@wolkabout/commons 0.1.10 → 0.1.11

package/fesm2022/wolkabout-commons.mjs

@@ -4298,11 +4298,11 @@ class AutocompleteComponent {
         document.removeEventListener('touchmove', this.scrollEvent, true);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AutocompleteComponent, deps: [{ token: i5.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: AutocompleteComponent, isStandalone: true, selector: "app-autocomplete", inputs: { name: "name", dataFunction: "dataFunction", displayFunction: "displayFunction", outlineBackground: "outlineBackground", hideRequiredMarker: "hideRequiredMarker" }, queries: [{ propertyName: "dropdownTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], ngImport: i0, template: "<ng-container>\r\n  <div class=\"w-full\">\r\n    <mat-form-field [ngClass]=\"{ 'outline-background': outlineBackground }\" class=\"w-full\" [hideRequiredMarker]=\"hideRequiredMarker\">\r\n      <mat-label>\r\n        <span>{{ name | translate }}</span>\r\n      </mat-label>\r\n      <input matInput #autoCompleteInput [ngClass]=\"{'cursor-text' : !hasValue(), 'cursor-default' : hasValue()}\" [formControl]=\"formControl\" [readonly]=\"hasValue()\" [placeholder]=\"name | translate\" autocomplete=\"off\"\r\n             [matAutocomplete]=\"auto\" (blur)=\"onTouched($event)\" [attr.data-test]=\"name + 'SearchInput'\"/>\r\n      @if (!disabled) {\r\n        <button matSuffix mat-icon-button *ngIf=\"formControl.value\" (click)=\"clear()\" type='button'>\r\n          <mat-icon class=\"text-mat-sys-on-error-container\">clear</mat-icon>\r\n        </button>\r\n      }\r\n      @for (error of getErrors(); track error) {\r\n        <mat-error>{{ 'COMMON.ERROR_VALIDATION_' + error | translate }}</mat-error>\r\n      }\r\n    </mat-form-field>\r\n  </div>\r\n  <mat-autocomplete #auto=\"matAutocomplete\" [class]=\"'autocomplete-panel'\" [displayWith]=\"displayFunction\">\r\n    @if (loading$ | async) {\r\n      <mat-option>\r\n        <div>{{ 'Loading...' }}</div>\r\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n      </mat-option>\r\n    } @else {\r\n      <mat-option *ngFor=\"let item of data$ | async; let i = index\" [value]=\"item\" class=\"autocomplete-option\" [attr.data-test]=\"name + 'SearchItem' + (i + 1)\">\r\n        <ng-container [ngTemplateOutlet]=\"dropdownTemplate ? dropdownTemplate : defaultTemplate\" [ngTemplateOutletContext]=\"{ item }\"></ng-container>\r\n        <ng-template #defaultTemplate>{{ displayFunction(item) }}</ng-template>\r\n      </mat-option>\r\n    }\r\n  </mat-autocomplete>\r\n</ng-container>\r\n", styles: [".mat-option-hidden{display:none}.autocomplete-option{height:fit-content}.autocomplete-option.autocomplete-option__active,.autocomplete-option.autocomplete-option__active:hover{background-color:var(--color-primary-50)}.autocomplete-info{height:30px;font-size:14px}.autocomplete-info.secondary{font-size:12px;height:25px}.autocomplete-info .autocomplete-item{text-overflow:ellipsis;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i1$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i8.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i8.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: AutocompleteComponent, isStandalone: true, selector: "app-autocomplete", inputs: { name: "name", dataFunction: "dataFunction", displayFunction: "displayFunction", outlineBackground: "outlineBackground", hideRequiredMarker: "hideRequiredMarker" }, queries: [{ propertyName: "dropdownTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], ngImport: i0, template: "<ng-container>\n  <div class=\"w-full\">\n    <mat-form-field [ngClass]=\"{ 'outline-background': outlineBackground }\" class=\"w-full\" [hideRequiredMarker]=\"hideRequiredMarker\">\n      <mat-label>\n        <span>{{ name | translate }}</span>\n      </mat-label>\n      <input matInput #autoCompleteInput [ngClass]=\"{'cursor-text' : !hasValue(), 'cursor-default' : hasValue()}\" [formControl]=\"formControl\" [readonly]=\"hasValue()\" [placeholder]=\"name | translate\" autocomplete=\"off\"\n             [matAutocomplete]=\"auto\" (blur)=\"onTouched($event)\" [attr.data-test]=\"name + 'SearchInput'\"/>\n      @if (!disabled) {\n        <button matSuffix mat-icon-button *ngIf=\"formControl.value\" (click)=\"clear()\" type='button'>\n          <mat-icon class=\"text-mat-sys-on-error-container\">clear</mat-icon>\n        </button>\n      }\n      @for (error of getErrors(); track error) {\n        <mat-error>{{ 'COMMON.ERROR_VALIDATION_' + error | translate }}</mat-error>\n      }\n    </mat-form-field>\n  </div>\n  <mat-autocomplete #auto=\"matAutocomplete\" [class]=\"'autocomplete-panel'\" [displayWith]=\"displayFunction\">\n    @if (loading$ | async) {\n      <mat-option>\n        <div>{{ 'Loading...' }}</div>\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n      </mat-option>\n    } @else {\n      <mat-option *ngFor=\"let item of data$ | async; let i = index\" [value]=\"item\" class=\"autocomplete-option\" [attr.data-test]=\"name + 'SearchItem' + (i + 1)\">\n        <ng-container [ngTemplateOutlet]=\"dropdownTemplate ? dropdownTemplate : defaultTemplate\" [ngTemplateOutletContext]=\"{ item }\"></ng-container>\n        <ng-template #defaultTemplate>{{ displayFunction(item) }}</ng-template>\n      </mat-option>\n    }\n  </mat-autocomplete>\n</ng-container>\n", styles: [".mat-option-hidden{display:none}.autocomplete-option{height:fit-content}.autocomplete-option.autocomplete-option__active,.autocomplete-option.autocomplete-option__active:hover{background-color:var(--color-primary-50)}.autocomplete-info{height:30px;font-size:14px}.autocomplete-info.secondary{font-size:12px;height:25px}.autocomplete-info .autocomplete-item{text-overflow:ellipsis;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i1$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i8.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i8.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AutocompleteComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-autocomplete', imports: [SharedModule], template: "<ng-container>\r\n  <div class=\"w-full\">\r\n    <mat-form-field [ngClass]=\"{ 'outline-background': outlineBackground }\" class=\"w-full\" [hideRequiredMarker]=\"hideRequiredMarker\">\r\n      <mat-label>\r\n        <span>{{ name | translate }}</span>\r\n      </mat-label>\r\n      <input matInput #autoCompleteInput [ngClass]=\"{'cursor-text' : !hasValue(), 'cursor-default' : hasValue()}\" [formControl]=\"formControl\" [readonly]=\"hasValue()\" [placeholder]=\"name | translate\" autocomplete=\"off\"\r\n             [matAutocomplete]=\"auto\" (blur)=\"onTouched($event)\" [attr.data-test]=\"name + 'SearchInput'\"/>\r\n      @if (!disabled) {\r\n        <button matSuffix mat-icon-button *ngIf=\"formControl.value\" (click)=\"clear()\" type='button'>\r\n          <mat-icon class=\"text-mat-sys-on-error-container\">clear</mat-icon>\r\n        </button>\r\n      }\r\n      @for (error of getErrors(); track error) {\r\n        <mat-error>{{ 'COMMON.ERROR_VALIDATION_' + error | translate }}</mat-error>\r\n      }\r\n    </mat-form-field>\r\n  </div>\r\n  <mat-autocomplete #auto=\"matAutocomplete\" [class]=\"'autocomplete-panel'\" [displayWith]=\"displayFunction\">\r\n    @if (loading$ | async) {\r\n      <mat-option>\r\n        <div>{{ 'Loading...' }}</div>\r\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n      </mat-option>\r\n    } @else {\r\n      <mat-option *ngFor=\"let item of data$ | async; let i = index\" [value]=\"item\" class=\"autocomplete-option\" [attr.data-test]=\"name + 'SearchItem' + (i + 1)\">\r\n        <ng-container [ngTemplateOutlet]=\"dropdownTemplate ? dropdownTemplate : defaultTemplate\" [ngTemplateOutletContext]=\"{ item }\"></ng-container>\r\n        <ng-template #defaultTemplate>{{ displayFunction(item) }}</ng-template>\r\n      </mat-option>\r\n    }\r\n  </mat-autocomplete>\r\n</ng-container>\r\n", styles: [".mat-option-hidden{display:none}.autocomplete-option{height:fit-content}.autocomplete-option.autocomplete-option__active,.autocomplete-option.autocomplete-option__active:hover{background-color:var(--color-primary-50)}.autocomplete-info{height:30px;font-size:14px}.autocomplete-info.secondary{font-size:12px;height:25px}.autocomplete-info .autocomplete-item{text-overflow:ellipsis;overflow:hidden}\n"] }]
+            args: [{ selector: 'app-autocomplete', imports: [SharedModule], template: "<ng-container>\n  <div class=\"w-full\">\n    <mat-form-field [ngClass]=\"{ 'outline-background': outlineBackground }\" class=\"w-full\" [hideRequiredMarker]=\"hideRequiredMarker\">\n      <mat-label>\n        <span>{{ name | translate }}</span>\n      </mat-label>\n      <input matInput #autoCompleteInput [ngClass]=\"{'cursor-text' : !hasValue(), 'cursor-default' : hasValue()}\" [formControl]=\"formControl\" [readonly]=\"hasValue()\" [placeholder]=\"name | translate\" autocomplete=\"off\"\n             [matAutocomplete]=\"auto\" (blur)=\"onTouched($event)\" [attr.data-test]=\"name + 'SearchInput'\"/>\n      @if (!disabled) {\n        <button matSuffix mat-icon-button *ngIf=\"formControl.value\" (click)=\"clear()\" type='button'>\n          <mat-icon class=\"text-mat-sys-on-error-container\">clear</mat-icon>\n        </button>\n      }\n      @for (error of getErrors(); track error) {\n        <mat-error>{{ 'COMMON.ERROR_VALIDATION_' + error | translate }}</mat-error>\n      }\n    </mat-form-field>\n  </div>\n  <mat-autocomplete #auto=\"matAutocomplete\" [class]=\"'autocomplete-panel'\" [displayWith]=\"displayFunction\">\n    @if (loading$ | async) {\n      <mat-option>\n        <div>{{ 'Loading...' }}</div>\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n      </mat-option>\n    } @else {\n      <mat-option *ngFor=\"let item of data$ | async; let i = index\" [value]=\"item\" class=\"autocomplete-option\" [attr.data-test]=\"name + 'SearchItem' + (i + 1)\">\n        <ng-container [ngTemplateOutlet]=\"dropdownTemplate ? dropdownTemplate : defaultTemplate\" [ngTemplateOutletContext]=\"{ item }\"></ng-container>\n        <ng-template #defaultTemplate>{{ displayFunction(item) }}</ng-template>\n      </mat-option>\n    }\n  </mat-autocomplete>\n</ng-container>\n", styles: [".mat-option-hidden{display:none}.autocomplete-option{height:fit-content}.autocomplete-option.autocomplete-option__active,.autocomplete-option.autocomplete-option__active:hover{background-color:var(--color-primary-50)}.autocomplete-info{height:30px;font-size:14px}.autocomplete-info.secondary{font-size:12px;height:25px}.autocomplete-info .autocomplete-item{text-overflow:ellipsis;overflow:hidden}\n"] }]
         }], ctorParameters: () => [{ type: i5.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -4414,11 +4414,11 @@ class AutocompleteChipsComponent {
         document.removeEventListener('touchmove', this.scrollEvent, true);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AutocompleteChipsComponent, deps: [{ token: i5.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: AutocompleteChipsComponent, isStandalone: true, selector: "app-autocomplete-chips", inputs: { name: "name", dataFunction: "dataFunction", displayFunction: "displayFunction", outlineBackground: "outlineBackground" }, queries: [{ propertyName: "dropdownTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }, { propertyName: "inputRef", first: true, predicate: ["autoCompleteInput"], descendants: true }], ngImport: i0, template: "<div class=\"w-full\" [ngClass]=\"{'required' : !!getErrors().length && !formControl.untouched && !(items$ | async)?.length}\">\r\n  <mat-form-field [ngClass]=\"{ 'outline-background': outlineBackground }\" class=\"w-full\">\r\n    <mat-label>\r\n      <span>{{ name | translate }}</span>\r\n    </mat-label>\r\n    <mat-chip-grid #chipGrid>\r\n      <mat-chip-row *ngFor=\"let item of items$ | async as items; let i = index\"\r\n                    [removable]=\"!disabled\"\r\n                    (removed)=\"removeItem(i, items)\">\r\n        {{ displayFunction(item) }}\r\n        <mat-icon class=\"text-mat-sys-on-error-container\" matChipRemove *ngIf=\"!disabled\">cancel</mat-icon>\r\n      </mat-chip-row>\r\n      <input matInput\r\n             #autoCompleteInput\r\n             [placeholder]=\"name | translate\"\r\n             autocomplete=\"off\"\r\n             [formControl]=\"formControl\"\r\n             [matAutocomplete]=\"auto\"\r\n             [matChipInputFor]=\"chipGrid\"\r\n             (blur)=\"onTouched($event)\"/>\r\n    </mat-chip-grid>\r\n  </mat-form-field>\r\n\r\n  @for (error of getErrors(); track error) {\r\n    @if (!formControl.untouched && !(items$ | async)?.length) {\r\n      <mat-error class=\"ml-4 mt-[-2px] text-xs\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate }}</mat-error>\r\n    }\r\n  }\r\n</div>\r\n<mat-autocomplete #auto=\"matAutocomplete\" [class]=\"'autocomplete-panel'\" (optionSelected)=\"addItem($event)\">\r\n  @if (loading$ | async) {\r\n    <mat-option>\r\n      <div>{{ 'Loading...' }}</div>\r\n      <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n    </mat-option>\r\n  } @else {\r\n    <ng-container *ngFor=\"let item of data$ | async; let i = index\">\r\n      @if (shouldShowOption(item, (items$ | async) ?? [])) {\r\n        <mat-option\r\n          [value]=\"item\"\r\n          class=\"autocomplete-option\"\r\n          [attr.data-test]=\"name + 'SearchItem' + (i + 1)\">\r\n          <ng-container [ngTemplateOutlet]=\"dropdownTemplate ? dropdownTemplate : defaultTemplate\"\r\n                        [ngTemplateOutletContext]=\"{ item }\"></ng-container>\r\n          <ng-template #defaultTemplate>{{ displayFunction(item) }}</ng-template>\r\n        </mat-option>\r\n      }\r\n    </ng-container>\r\n  }\r\n</mat-autocomplete>\r\n", styles: [".mat-option-hidden{display:none}.autocomplete-option{height:fit-content}.autocomplete-option.autocomplete-option__active,.autocomplete-option.autocomplete-option__active:hover{background-color:var(--color-primary-50)}.autocomplete-info{height:30px;font-size:14px}.autocomplete-info.secondary{font-size:12px;height:25px}.autocomplete-info .autocomplete-item{text-overflow:ellipsis;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i8.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i8.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i8$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i8$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i8$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i8$1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: AutocompleteChipsComponent, isStandalone: true, selector: "app-autocomplete-chips", inputs: { name: "name", dataFunction: "dataFunction", displayFunction: "displayFunction", outlineBackground: "outlineBackground" }, queries: [{ propertyName: "dropdownTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }, { propertyName: "inputRef", first: true, predicate: ["autoCompleteInput"], descendants: true }], ngImport: i0, template: "<div class=\"w-full\" [ngClass]=\"{'required' : !!getErrors().length && !formControl.untouched && !(items$ | async)?.length}\">\n  <mat-form-field [ngClass]=\"{ 'outline-background': outlineBackground }\" class=\"w-full\">\n    <mat-label>\n      <span>{{ name | translate }}</span>\n    </mat-label>\n    <mat-chip-grid #chipGrid>\n      <mat-chip-row *ngFor=\"let item of items$ | async as items; let i = index\"\n                    [removable]=\"!disabled\"\n                    (removed)=\"removeItem(i, items)\">\n        {{ displayFunction(item) }}\n        <mat-icon class=\"text-mat-sys-on-error-container\" matChipRemove *ngIf=\"!disabled\">cancel</mat-icon>\n      </mat-chip-row>\n      <input matInput\n             #autoCompleteInput\n             [placeholder]=\"name | translate\"\n             autocomplete=\"off\"\n             [formControl]=\"formControl\"\n             [matAutocomplete]=\"auto\"\n             [matChipInputFor]=\"chipGrid\"\n             (blur)=\"onTouched($event)\"/>\n    </mat-chip-grid>\n  </mat-form-field>\n\n  @for (error of getErrors(); track error) {\n    @if (!formControl.untouched && !(items$ | async)?.length) {\n      <mat-error class=\"ml-4 mt-[-2px] text-xs\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate }}</mat-error>\n    }\n  }\n</div>\n<mat-autocomplete #auto=\"matAutocomplete\" [class]=\"'autocomplete-panel'\" (optionSelected)=\"addItem($event)\">\n  @if (loading$ | async) {\n    <mat-option>\n      <div>{{ 'Loading...' }}</div>\n      <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n    </mat-option>\n  } @else {\n    <ng-container *ngFor=\"let item of data$ | async; let i = index\">\n      @if (shouldShowOption(item, (items$ | async) ?? [])) {\n        <mat-option\n          [value]=\"item\"\n          class=\"autocomplete-option\"\n          [attr.data-test]=\"name + 'SearchItem' + (i + 1)\">\n          <ng-container [ngTemplateOutlet]=\"dropdownTemplate ? dropdownTemplate : defaultTemplate\"\n                        [ngTemplateOutletContext]=\"{ item }\"></ng-container>\n          <ng-template #defaultTemplate>{{ displayFunction(item) }}</ng-template>\n        </mat-option>\n      }\n    </ng-container>\n  }\n</mat-autocomplete>\n", styles: [".mat-option-hidden{display:none}.autocomplete-option{height:fit-content}.autocomplete-option.autocomplete-option__active,.autocomplete-option.autocomplete-option__active:hover{background-color:var(--color-primary-50)}.autocomplete-info{height:30px;font-size:14px}.autocomplete-info.secondary{font-size:12px;height:25px}.autocomplete-info .autocomplete-item{text-overflow:ellipsis;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i8.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i8.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i8$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i8$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i8$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i8$1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AutocompleteChipsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-autocomplete-chips', imports: [SharedModule], template: "<div class=\"w-full\" [ngClass]=\"{'required' : !!getErrors().length && !formControl.untouched && !(items$ | async)?.length}\">\r\n  <mat-form-field [ngClass]=\"{ 'outline-background': outlineBackground }\" class=\"w-full\">\r\n    <mat-label>\r\n      <span>{{ name | translate }}</span>\r\n    </mat-label>\r\n    <mat-chip-grid #chipGrid>\r\n      <mat-chip-row *ngFor=\"let item of items$ | async as items; let i = index\"\r\n                    [removable]=\"!disabled\"\r\n                    (removed)=\"removeItem(i, items)\">\r\n        {{ displayFunction(item) }}\r\n        <mat-icon class=\"text-mat-sys-on-error-container\" matChipRemove *ngIf=\"!disabled\">cancel</mat-icon>\r\n      </mat-chip-row>\r\n      <input matInput\r\n             #autoCompleteInput\r\n             [placeholder]=\"name | translate\"\r\n             autocomplete=\"off\"\r\n             [formControl]=\"formControl\"\r\n             [matAutocomplete]=\"auto\"\r\n             [matChipInputFor]=\"chipGrid\"\r\n             (blur)=\"onTouched($event)\"/>\r\n    </mat-chip-grid>\r\n  </mat-form-field>\r\n\r\n  @for (error of getErrors(); track error) {\r\n    @if (!formControl.untouched && !(items$ | async)?.length) {\r\n      <mat-error class=\"ml-4 mt-[-2px] text-xs\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate }}</mat-error>\r\n    }\r\n  }\r\n</div>\r\n<mat-autocomplete #auto=\"matAutocomplete\" [class]=\"'autocomplete-panel'\" (optionSelected)=\"addItem($event)\">\r\n  @if (loading$ | async) {\r\n    <mat-option>\r\n      <div>{{ 'Loading...' }}</div>\r\n      <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n    </mat-option>\r\n  } @else {\r\n    <ng-container *ngFor=\"let item of data$ | async; let i = index\">\r\n      @if (shouldShowOption(item, (items$ | async) ?? [])) {\r\n        <mat-option\r\n          [value]=\"item\"\r\n          class=\"autocomplete-option\"\r\n          [attr.data-test]=\"name + 'SearchItem' + (i + 1)\">\r\n          <ng-container [ngTemplateOutlet]=\"dropdownTemplate ? dropdownTemplate : defaultTemplate\"\r\n                        [ngTemplateOutletContext]=\"{ item }\"></ng-container>\r\n          <ng-template #defaultTemplate>{{ displayFunction(item) }}</ng-template>\r\n        </mat-option>\r\n      }\r\n    </ng-container>\r\n  }\r\n</mat-autocomplete>\r\n", styles: [".mat-option-hidden{display:none}.autocomplete-option{height:fit-content}.autocomplete-option.autocomplete-option__active,.autocomplete-option.autocomplete-option__active:hover{background-color:var(--color-primary-50)}.autocomplete-info{height:30px;font-size:14px}.autocomplete-info.secondary{font-size:12px;height:25px}.autocomplete-info .autocomplete-item{text-overflow:ellipsis;overflow:hidden}\n"] }]
+            args: [{ selector: 'app-autocomplete-chips', imports: [SharedModule], template: "<div class=\"w-full\" [ngClass]=\"{'required' : !!getErrors().length && !formControl.untouched && !(items$ | async)?.length}\">\n  <mat-form-field [ngClass]=\"{ 'outline-background': outlineBackground }\" class=\"w-full\">\n    <mat-label>\n      <span>{{ name | translate }}</span>\n    </mat-label>\n    <mat-chip-grid #chipGrid>\n      <mat-chip-row *ngFor=\"let item of items$ | async as items; let i = index\"\n                    [removable]=\"!disabled\"\n                    (removed)=\"removeItem(i, items)\">\n        {{ displayFunction(item) }}\n        <mat-icon class=\"text-mat-sys-on-error-container\" matChipRemove *ngIf=\"!disabled\">cancel</mat-icon>\n      </mat-chip-row>\n      <input matInput\n             #autoCompleteInput\n             [placeholder]=\"name | translate\"\n             autocomplete=\"off\"\n             [formControl]=\"formControl\"\n             [matAutocomplete]=\"auto\"\n             [matChipInputFor]=\"chipGrid\"\n             (blur)=\"onTouched($event)\"/>\n    </mat-chip-grid>\n  </mat-form-field>\n\n  @for (error of getErrors(); track error) {\n    @if (!formControl.untouched && !(items$ | async)?.length) {\n      <mat-error class=\"ml-4 mt-[-2px] text-xs\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate }}</mat-error>\n    }\n  }\n</div>\n<mat-autocomplete #auto=\"matAutocomplete\" [class]=\"'autocomplete-panel'\" (optionSelected)=\"addItem($event)\">\n  @if (loading$ | async) {\n    <mat-option>\n      <div>{{ 'Loading...' }}</div>\n      <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n    </mat-option>\n  } @else {\n    <ng-container *ngFor=\"let item of data$ | async; let i = index\">\n      @if (shouldShowOption(item, (items$ | async) ?? [])) {\n        <mat-option\n          [value]=\"item\"\n          class=\"autocomplete-option\"\n          [attr.data-test]=\"name + 'SearchItem' + (i + 1)\">\n          <ng-container [ngTemplateOutlet]=\"dropdownTemplate ? dropdownTemplate : defaultTemplate\"\n                        [ngTemplateOutletContext]=\"{ item }\"></ng-container>\n          <ng-template #defaultTemplate>{{ displayFunction(item) }}</ng-template>\n        </mat-option>\n      }\n    </ng-container>\n  }\n</mat-autocomplete>\n", styles: [".mat-option-hidden{display:none}.autocomplete-option{height:fit-content}.autocomplete-option.autocomplete-option__active,.autocomplete-option.autocomplete-option__active:hover{background-color:var(--color-primary-50)}.autocomplete-info{height:30px;font-size:14px}.autocomplete-info.secondary{font-size:12px;height:25px}.autocomplete-info .autocomplete-item{text-overflow:ellipsis;overflow:hidden}\n"] }]
         }], ctorParameters: () => [{ type: i5.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -4472,14 +4472,14 @@ class BasicTimeSeriesGraphComponent {
                 trigger: 'axis',
                 formatter: (params) => {
                     const [timestamp, data] = params[0].data;
-                    return `
-            <div class="flex flex-col gap-y-2">
-                <div>${this.timeFormatter.transform(timestamp)}</div>
-                <div class="flex flex-row gap-x-2 items-center">
-                    <div class="h-2 w-2 bg-mat-sys-primary rounded-3xl">&nbsp;</div>
-                    <div>${timeSeries.name}:</div>
-                    <div><span class="font-bold">${data}</span><span>${timeSeries.unitSymbol ?? ''}</span></div>
-                </div>
+                    return `
+            <div class="flex flex-col gap-y-2">
+                <div>${this.timeFormatter.transform(timestamp)}</div>
+                <div class="flex flex-row gap-x-2 items-center">
+                    <div class="h-2 w-2 bg-mat-sys-primary rounded-3xl">&nbsp;</div>
+                    <div>${timeSeries.name}:</div>
+                    <div><span class="font-bold">${data}</span><span>${timeSeries.unitSymbol ?? ''}</span></div>
+                </div>
             </div>`;
                 },
                 axisPointer: {
@@ -4515,11 +4515,11 @@ class BasicTimeSeriesGraphComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BasicTimeSeriesGraphComponent, deps: [{ token: SimpleDateTimePipe }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: BasicTimeSeriesGraphComponent, isStandalone: true, selector: "app-basic-time-series-graph", inputs: { timeSeries: { classPropertyName: "timeSeries", publicName: "timeSeries", isSignal: true, isRequired: true, transformFunction: null }, desiredTimeFrame: { classPropertyName: "desiredTimeFrame", publicName: "desiredTimeFrame", isSignal: true, isRequired: false, transformFunction: null }, primaryColor: { classPropertyName: "primaryColor", publicName: "primaryColor", isSignal: true, isRequired: false, transformFunction: null } }, providers: [SimpleDatePipe, SimpleDateTimePipe], ngImport: i0, template: "<div echarts [options]=\"graphOptions()\" (chartDataZoom)=\"chartZoom($event)\" [theme]=\"chartTheme()!\" class=\"w-full h-full\"></div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: BasicTimeSeriesGraphComponent, isStandalone: true, selector: "app-basic-time-series-graph", inputs: { timeSeries: { classPropertyName: "timeSeries", publicName: "timeSeries", isSignal: true, isRequired: true, transformFunction: null }, desiredTimeFrame: { classPropertyName: "desiredTimeFrame", publicName: "desiredTimeFrame", isSignal: true, isRequired: false, transformFunction: null }, primaryColor: { classPropertyName: "primaryColor", publicName: "primaryColor", isSignal: true, isRequired: false, transformFunction: null } }, providers: [SimpleDatePipe, SimpleDateTimePipe], ngImport: i0, template: "<div echarts [options]=\"graphOptions()\" (chartDataZoom)=\"chartZoom($event)\" [theme]=\"chartTheme()!\" class=\"w-full h-full\"></div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BasicTimeSeriesGraphComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-basic-time-series-graph', imports: [NgxEchartsDirective], providers: [SimpleDatePipe, SimpleDateTimePipe], template: "<div echarts [options]=\"graphOptions()\" (chartDataZoom)=\"chartZoom($event)\" [theme]=\"chartTheme()!\" class=\"w-full h-full\"></div>\r\n" }]
+            args: [{ selector: 'app-basic-time-series-graph', imports: [NgxEchartsDirective], providers: [SimpleDatePipe, SimpleDateTimePipe], template: "<div echarts [options]=\"graphOptions()\" (chartDataZoom)=\"chartZoom($event)\" [theme]=\"chartTheme()!\" class=\"w-full h-full\"></div>\n" }]
         }], ctorParameters: () => [{ type: SimpleDateTimePipe }], propDecorators: { timeSeries: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeSeries", required: true }] }], desiredTimeFrame: [{ type: i0.Input, args: [{ isSignal: true, alias: "desiredTimeFrame", required: false }] }], primaryColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryColor", required: false }] }] } });
 
 class CardLabeledValueComponent {
@@ -4541,11 +4541,11 @@ class CardLabeledValueComponent {
     }, ...(ngDevMode ? [{ debugName: "permissionFunction" }] : []));
     hasPermission = toSignal(toObservable(this.permissionFunction).pipe(switchMap(obs => obs)), { initialValue: false });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CardLabeledValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: CardLabeledValueComponent, isStandalone: true, selector: "app-card-labeled-value", inputs: { permissions: { classPropertyName: "permissions", publicName: "permissions", isSignal: true, isRequired: false, transformFunction: null }, useAssetPermissions: { classPropertyName: "useAssetPermissions", publicName: "useAssetPermissions", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, editFunction: { classPropertyName: "editFunction", publicName: "editFunction", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mat-card\r\n  [ngClass]=\"{'cursor-pointer hover:bg-hover-color': editFunction() && hasPermission() }\"\r\n  [matTooltipDisabled]=\"!hasPermission()\" (click)=\"editFunction() && hasPermission() ? editFunction()!() : null\"\r\n  [matTooltip]=\"tooltip() | translate\"\r\n  matTooltipPosition=\"above\"\r\n>\r\n  <div class=\"flex items-center justify-between p-4 gap-x-4 h-full\">\r\n    <div class=\"flex flex-col w-full h-full overflow-hidden\">\r\n      <div class=\"font-semibold shrink-0\">{{ label() | translate }}</div>\r\n      <div class=\"text-mat-sys-primary flex items-center grow\">\r\n        <ng-content/>\r\n      </div>\r\n    </div>\r\n    @if (editFunction() && hasPermission()) {\r\n      <button mat-icon-button [ngClass]=\"icon() === 'delete' ? 'text-mat-sys-on-error-container' : 'text-mat-sys-primary'\" (click)=\"editFunction()!(); $event.stopPropagation()\">\r\n        <mat-icon>{{ icon() }}</mat-icon>\r\n      </button>\r\n    }\r\n  </div>\r\n</mat-card>\r\n", styles: ["mat-card{height:100%;min-height:5.5rem}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i1$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: CardLabeledValueComponent, isStandalone: true, selector: "app-card-labeled-value", inputs: { permissions: { classPropertyName: "permissions", publicName: "permissions", isSignal: true, isRequired: false, transformFunction: null }, useAssetPermissions: { classPropertyName: "useAssetPermissions", publicName: "useAssetPermissions", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, editFunction: { classPropertyName: "editFunction", publicName: "editFunction", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mat-card\n  [ngClass]=\"{'cursor-pointer hover:bg-hover-color': editFunction() && hasPermission() }\"\n  [matTooltipDisabled]=\"!hasPermission()\" (click)=\"editFunction() && hasPermission() ? editFunction()!() : null\"\n  [matTooltip]=\"tooltip() | translate\"\n  matTooltipPosition=\"above\"\n>\n  <div class=\"flex items-center justify-between p-4 gap-x-4 h-full\">\n    <div class=\"flex flex-col w-full h-full overflow-hidden\">\n      <div class=\"font-semibold shrink-0\">{{ label() | translate }}</div>\n      <div class=\"text-mat-sys-primary flex items-center grow\">\n        <ng-content/>\n      </div>\n    </div>\n    @if (editFunction() && hasPermission()) {\n      <button mat-icon-button [ngClass]=\"icon() === 'delete' ? 'text-mat-sys-on-error-container' : 'text-mat-sys-primary'\" (click)=\"editFunction()!(); $event.stopPropagation()\">\n        <mat-icon>{{ icon() }}</mat-icon>\n      </button>\n    }\n  </div>\n</mat-card>\n", styles: ["mat-card{height:100%;min-height:5.5rem}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i1$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CardLabeledValueComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-card-labeled-value', imports: [SharedModule], template: "<mat-card\r\n  [ngClass]=\"{'cursor-pointer hover:bg-hover-color': editFunction() && hasPermission() }\"\r\n  [matTooltipDisabled]=\"!hasPermission()\" (click)=\"editFunction() && hasPermission() ? editFunction()!() : null\"\r\n  [matTooltip]=\"tooltip() | translate\"\r\n  matTooltipPosition=\"above\"\r\n>\r\n  <div class=\"flex items-center justify-between p-4 gap-x-4 h-full\">\r\n    <div class=\"flex flex-col w-full h-full overflow-hidden\">\r\n      <div class=\"font-semibold shrink-0\">{{ label() | translate }}</div>\r\n      <div class=\"text-mat-sys-primary flex items-center grow\">\r\n        <ng-content/>\r\n      </div>\r\n    </div>\r\n    @if (editFunction() && hasPermission()) {\r\n      <button mat-icon-button [ngClass]=\"icon() === 'delete' ? 'text-mat-sys-on-error-container' : 'text-mat-sys-primary'\" (click)=\"editFunction()!(); $event.stopPropagation()\">\r\n        <mat-icon>{{ icon() }}</mat-icon>\r\n      </button>\r\n    }\r\n  </div>\r\n</mat-card>\r\n", styles: ["mat-card{height:100%;min-height:5.5rem}\n"] }]
+            args: [{ selector: 'app-card-labeled-value', imports: [SharedModule], template: "<mat-card\n  [ngClass]=\"{'cursor-pointer hover:bg-hover-color': editFunction() && hasPermission() }\"\n  [matTooltipDisabled]=\"!hasPermission()\" (click)=\"editFunction() && hasPermission() ? editFunction()!() : null\"\n  [matTooltip]=\"tooltip() | translate\"\n  matTooltipPosition=\"above\"\n>\n  <div class=\"flex items-center justify-between p-4 gap-x-4 h-full\">\n    <div class=\"flex flex-col w-full h-full overflow-hidden\">\n      <div class=\"font-semibold shrink-0\">{{ label() | translate }}</div>\n      <div class=\"text-mat-sys-primary flex items-center grow\">\n        <ng-content/>\n      </div>\n    </div>\n    @if (editFunction() && hasPermission()) {\n      <button mat-icon-button [ngClass]=\"icon() === 'delete' ? 'text-mat-sys-on-error-container' : 'text-mat-sys-primary'\" (click)=\"editFunction()!(); $event.stopPropagation()\">\n        <mat-icon>{{ icon() }}</mat-icon>\n      </button>\n    }\n  </div>\n</mat-card>\n", styles: ["mat-card{height:100%;min-height:5.5rem}\n"] }]
         }], propDecorators: { permissions: [{ type: i0.Input, args: [{ isSignal: true, alias: "permissions", required: false }] }], useAssetPermissions: [{ type: i0.Input, args: [{ isSignal: true, alias: "useAssetPermissions", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], editFunction: [{ type: i0.Input, args: [{ isSignal: true, alias: "editFunction", required: false }] }] } });
 
 class ConfirmationDialogComponent {
@@ -4559,11 +4559,11 @@ class ConfirmationDialogComponent {
         this.dialog.close(true);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ConfirmationDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$5.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: ConfirmationDialogComponent, isStandalone: true, selector: "app-confirmation-dialog", ngImport: i0, template: "<div class=\"flex flex-col flex-auto gap-y-8 p-4 content\">\r\n  <div class=\"text-lg\">{{ 'COMMON.CONFIRMATION_DIALOG_TITLE' | translate }}</div>\r\n  <div class=\"flex flex-col flex-auto gap-y-4\">\r\n    <div class=\"flex flex-col flex-auto gap-y-4 max-h-96 overflow-hidden\">\r\n      <div class=\"whitespace-pre-line\">{{ data.message | translate:data.parameters }}</div>\r\n    </div>\r\n  </div>\r\n  <div class=\"flex flex-row flex-auto gap-x-2 justify-end\">\r\n    <button mat-button mat-dialog-close>{{ 'COMMON.CANCEL' | translate }}</button>\r\n    <button [ngClass]=\"{'destructive-flat-button': data.deleteDialog}\" mat-flat-button\r\n            (click)=\"confirm()\">{{ data.actionButtonLabel ? (data.actionButtonLabel! | translate) : (data.deleteDialog ? ('COMMON.DELETE' | translate) : ('COMMON.CONFIRMATION_DIALOG_CONFIRM' | translate)) }}\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: [".content{max-width:var(--medium-dialog-width)}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i1$5.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: ConfirmationDialogComponent, isStandalone: true, selector: "app-confirmation-dialog", ngImport: i0, template: "<div class=\"flex flex-col flex-auto gap-y-8 p-4 content\">\n  <div class=\"text-lg\">{{ 'COMMON.CONFIRMATION_DIALOG_TITLE' | translate }}</div>\n  <div class=\"flex flex-col flex-auto gap-y-4\">\n    <div class=\"flex flex-col flex-auto gap-y-4 max-h-96 overflow-hidden\">\n      <div class=\"whitespace-pre-line\">{{ data.message | translate:data.parameters }}</div>\n    </div>\n  </div>\n  <div class=\"flex flex-row flex-auto gap-x-2 justify-end\">\n    <button mat-button mat-dialog-close>{{ 'COMMON.CANCEL' | translate }}</button>\n    <button [ngClass]=\"{'destructive-flat-button': data.deleteDialog}\" mat-flat-button\n            (click)=\"confirm()\">{{ data.actionButtonLabel ? (data.actionButtonLabel! | translate) : (data.deleteDialog ? ('COMMON.DELETE' | translate) : ('COMMON.CONFIRMATION_DIALOG_CONFIRM' | translate)) }}\n    </button>\n  </div>\n</div>\n", styles: [".content{max-width:var(--medium-dialog-width)}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i1$5.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-confirmation-dialog', imports: [SharedModule], template: "<div class=\"flex flex-col flex-auto gap-y-8 p-4 content\">\r\n  <div class=\"text-lg\">{{ 'COMMON.CONFIRMATION_DIALOG_TITLE' | translate }}</div>\r\n  <div class=\"flex flex-col flex-auto gap-y-4\">\r\n    <div class=\"flex flex-col flex-auto gap-y-4 max-h-96 overflow-hidden\">\r\n      <div class=\"whitespace-pre-line\">{{ data.message | translate:data.parameters }}</div>\r\n    </div>\r\n  </div>\r\n  <div class=\"flex flex-row flex-auto gap-x-2 justify-end\">\r\n    <button mat-button mat-dialog-close>{{ 'COMMON.CANCEL' | translate }}</button>\r\n    <button [ngClass]=\"{'destructive-flat-button': data.deleteDialog}\" mat-flat-button\r\n            (click)=\"confirm()\">{{ data.actionButtonLabel ? (data.actionButtonLabel! | translate) : (data.deleteDialog ? ('COMMON.DELETE' | translate) : ('COMMON.CONFIRMATION_DIALOG_CONFIRM' | translate)) }}\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: [".content{max-width:var(--medium-dialog-width)}\n"] }]
+            args: [{ selector: 'app-confirmation-dialog', imports: [SharedModule], template: "<div class=\"flex flex-col flex-auto gap-y-8 p-4 content\">\n  <div class=\"text-lg\">{{ 'COMMON.CONFIRMATION_DIALOG_TITLE' | translate }}</div>\n  <div class=\"flex flex-col flex-auto gap-y-4\">\n    <div class=\"flex flex-col flex-auto gap-y-4 max-h-96 overflow-hidden\">\n      <div class=\"whitespace-pre-line\">{{ data.message | translate:data.parameters }}</div>\n    </div>\n  </div>\n  <div class=\"flex flex-row flex-auto gap-x-2 justify-end\">\n    <button mat-button mat-dialog-close>{{ 'COMMON.CANCEL' | translate }}</button>\n    <button [ngClass]=\"{'destructive-flat-button': data.deleteDialog}\" mat-flat-button\n            (click)=\"confirm()\">{{ data.actionButtonLabel ? (data.actionButtonLabel! | translate) : (data.deleteDialog ? ('COMMON.DELETE' | translate) : ('COMMON.CONFIRMATION_DIALOG_CONFIRM' | translate)) }}\n    </button>\n  </div>\n</div>\n", styles: [".content{max-width:var(--medium-dialog-width)}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -4724,7 +4724,7 @@ class DateRangeInputComponent {
                 useExisting: forwardRef(() => DateRangeInputComponent),
                 multi: true,
             }
-        ], viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["picker"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"w-full flex flex-col\" [formGroup]=\"dateRangeForm\">\r\n  @if (isInForm()) {\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{ (translationPrefix() ? translationPrefix() + '_LABEL' : 'COMMON.DATE_RANGE_LABEL') | translate }}</mat-label>\r\n      <mat-select (blur)=\"onTouched($event)\" formControlName=\"periodOption\" (selectionChange)=\"onTimeRangeChanged($event)\" [errorStateMatcher]=\"periodErrorStateMatcher\" panelClass=\"date-range-panel\">\r\n        @for (periodOption of availableDateOptions(); track $index) {\r\n          <mat-option [value]=\"periodOption\">{{ 'COMMON.RELATIVE_TIME_PERIOD_' + periodOption | translate }}</mat-option>\r\n        }\r\n        @if (allowCustomTimespan()) {\r\n          <mat-option [value]=\"CUSTOM_PERIOD\">\r\n            <div class=\"flex flex-row gap-x-4\">\r\n              @if (dateRangeForm.get('from')?.value) {\r\n                <div class=\"flex flex-row\">\r\n                  <span class=\"whitespace-nowrap h-fit\">{{ dateRangeForm.get('from')?.value?.toMillis() | simpleDate : undefined: false }}</span>\r\n                  <span class=\"whitespace-nowrap h-fit\">&nbsp;-&nbsp;</span>\r\n                  <span class=\"whitespace-nowrap h-fit\">{{ dateRangeForm.get('to')?.value?.toMillis() | simpleDate : undefined: false }}</span>\r\n                </div>\r\n              } @else {\r\n                <div>{{ 'COMMON.RELATIVE_TIME_PERIOD_CUSTOM' | translate }}</div>\r\n              }\r\n            </div>\r\n          </mat-option>\r\n        }\r\n      </mat-select>\r\n      <mat-date-range-input [rangePicker]=\"picker\" style=\"visibility: hidden; width: 0; height: 0;\">\r\n        <input (blur)=\"onTouched($event)\" matStartDate formControlName=\"from\">\r\n        <input (blur)=\"onTouched($event)\" matEndDate formControlName=\"to\"/>\r\n      </mat-date-range-input>\r\n      <mat-date-range-picker #picker (closed)=\"emitValueChange()\"></mat-date-range-picker>\r\n      @if (dateRangeForm.get('periodOption')?.value === CUSTOM_PERIOD) {\r\n        <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n      }\r\n      @if (dateRangeForm.touched && dateRangeForm.hasError('required')) {\r\n        <mat-error>\r\n          {{ 'COMMON.ERROR_VALIDATION_REQUIRED' | translate }}\r\n        </mat-error>\r\n      }\r\n      @if (dateRangeForm.touched && dateRangeForm.hasError('incompletePeriod')) {\r\n        {{ 'COMMON.ERROR_VALIDATION_REQUIRED' | translate }}\r\n      }\r\n    </mat-form-field>\r\n  } @else {\r\n    <div class=\"flex\">\r\n      <mat-select class=\"date-range-flat-picker-select\" (blur)=\"onTouched($event)\" formControlName=\"periodOption\" (selectionChange)=\"onTimeRangeChanged($event)\" [errorStateMatcher]=\"periodErrorStateMatcher\" panelClass=\"date-range-panel\">\r\n        @for (periodOption of availableDateOptions(); track $index) {\r\n          <mat-option [value]=\"periodOption\">{{ 'COMMON.RELATIVE_TIME_PERIOD_' + periodOption | translate }}</mat-option>\r\n        }\r\n        @if (allowCustomTimespan()) {\r\n          <mat-option [value]=\"CUSTOM_PERIOD\">\r\n            <div class=\"flex flex-row gap-x-4\">\r\n              @if (dateRangeForm.get('from')?.value) {\r\n                <div class=\"flex flex-row\">\r\n                  <span class=\"whitespace-nowrap h-fit\">{{ dateRangeForm.get('from')?.value?.toMillis() | simpleDate : undefined: false }}</span>\r\n                  <span class=\"whitespace-nowrap h-fit\">&nbsp;-&nbsp;</span>\r\n                  <span class=\"whitespace-nowrap h-fit\">{{ dateRangeForm.get('to')?.value?.toMillis() | simpleDate : undefined: false }}</span>\r\n                </div>\r\n              } @else {\r\n                <div>{{ 'COMMON.RELATIVE_TIME_PERIOD_CUSTOM' | translate }}</div>\r\n              }\r\n            </div>\r\n          </mat-option>\r\n        }\r\n      </mat-select>\r\n      <mat-date-range-input [rangePicker]=\"picker\" style=\"visibility: hidden; width: 0; height: 0;\">\r\n        <input (blur)=\"onTouched($event)\" matStartDate formControlName=\"from\">\r\n        <input (blur)=\"onTouched($event)\" matEndDate formControlName=\"to\"/>\r\n      </mat-date-range-input>\r\n      <mat-date-range-picker #picker (closed)=\"emitValueChange()\"></mat-date-range-picker>\r\n      @if (dateRangeForm.get('periodOption')?.value === CUSTOM_PERIOD) {\r\n        <mat-datepicker-toggle matSuffix [for]=\"picker\" class=\"date-range-flat-picker-toggle\"></mat-datepicker-toggle>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i4$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i4$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i4$3.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i4$3.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i4$3.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i4$3.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: SimpleDatePipe, name: "simpleDate" }] });
+        ], viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["picker"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"w-full flex flex-col\" [formGroup]=\"dateRangeForm\">\n  @if (isInForm()) {\n    <mat-form-field class=\"flex\">\n      <mat-label>{{ (translationPrefix() ? translationPrefix() + '_LABEL' : 'COMMON.DATE_RANGE_LABEL') | translate }}</mat-label>\n      <mat-select (blur)=\"onTouched($event)\" formControlName=\"periodOption\" (selectionChange)=\"onTimeRangeChanged($event)\" [errorStateMatcher]=\"periodErrorStateMatcher\" panelClass=\"date-range-panel\">\n        @for (periodOption of availableDateOptions(); track $index) {\n          <mat-option [value]=\"periodOption\">{{ 'COMMON.RELATIVE_TIME_PERIOD_' + periodOption | translate }}</mat-option>\n        }\n        @if (allowCustomTimespan()) {\n          <mat-option [value]=\"CUSTOM_PERIOD\">\n            <div class=\"flex flex-row gap-x-4\">\n              @if (dateRangeForm.get('from')?.value) {\n                <div class=\"flex flex-row\">\n                  <span class=\"whitespace-nowrap h-fit\">{{ dateRangeForm.get('from')?.value?.toMillis() | simpleDate : undefined: false }}</span>\n                  <span class=\"whitespace-nowrap h-fit\">&nbsp;-&nbsp;</span>\n                  <span class=\"whitespace-nowrap h-fit\">{{ dateRangeForm.get('to')?.value?.toMillis() | simpleDate : undefined: false }}</span>\n                </div>\n              } @else {\n                <div>{{ 'COMMON.RELATIVE_TIME_PERIOD_CUSTOM' | translate }}</div>\n              }\n            </div>\n          </mat-option>\n        }\n      </mat-select>\n      <mat-date-range-input [rangePicker]=\"picker\" style=\"visibility: hidden; width: 0; height: 0;\">\n        <input (blur)=\"onTouched($event)\" matStartDate formControlName=\"from\">\n        <input (blur)=\"onTouched($event)\" matEndDate formControlName=\"to\"/>\n      </mat-date-range-input>\n      <mat-date-range-picker #picker (closed)=\"emitValueChange()\"></mat-date-range-picker>\n      @if (dateRangeForm.get('periodOption')?.value === CUSTOM_PERIOD) {\n        <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n      }\n      @if (dateRangeForm.touched && dateRangeForm.hasError('required')) {\n        <mat-error>\n          {{ 'COMMON.ERROR_VALIDATION_REQUIRED' | translate }}\n        </mat-error>\n      }\n      @if (dateRangeForm.touched && dateRangeForm.hasError('incompletePeriod')) {\n        {{ 'COMMON.ERROR_VALIDATION_REQUIRED' | translate }}\n      }\n    </mat-form-field>\n  } @else {\n    <div class=\"flex\">\n      <mat-select class=\"date-range-flat-picker-select\" (blur)=\"onTouched($event)\" formControlName=\"periodOption\" (selectionChange)=\"onTimeRangeChanged($event)\" [errorStateMatcher]=\"periodErrorStateMatcher\" panelClass=\"date-range-panel\">\n        @for (periodOption of availableDateOptions(); track $index) {\n          <mat-option [value]=\"periodOption\">{{ 'COMMON.RELATIVE_TIME_PERIOD_' + periodOption | translate }}</mat-option>\n        }\n        @if (allowCustomTimespan()) {\n          <mat-option [value]=\"CUSTOM_PERIOD\">\n            <div class=\"flex flex-row gap-x-4\">\n              @if (dateRangeForm.get('from')?.value) {\n                <div class=\"flex flex-row\">\n                  <span class=\"whitespace-nowrap h-fit\">{{ dateRangeForm.get('from')?.value?.toMillis() | simpleDate : undefined: false }}</span>\n                  <span class=\"whitespace-nowrap h-fit\">&nbsp;-&nbsp;</span>\n                  <span class=\"whitespace-nowrap h-fit\">{{ dateRangeForm.get('to')?.value?.toMillis() | simpleDate : undefined: false }}</span>\n                </div>\n              } @else {\n                <div>{{ 'COMMON.RELATIVE_TIME_PERIOD_CUSTOM' | translate }}</div>\n              }\n            </div>\n          </mat-option>\n        }\n      </mat-select>\n      <mat-date-range-input [rangePicker]=\"picker\" style=\"visibility: hidden; width: 0; height: 0;\">\n        <input (blur)=\"onTouched($event)\" matStartDate formControlName=\"from\">\n        <input (blur)=\"onTouched($event)\" matEndDate formControlName=\"to\"/>\n      </mat-date-range-input>\n      <mat-date-range-picker #picker (closed)=\"emitValueChange()\"></mat-date-range-picker>\n      @if (dateRangeForm.get('periodOption')?.value === CUSTOM_PERIOD) {\n        <mat-datepicker-toggle matSuffix [for]=\"picker\" class=\"date-range-flat-picker-toggle\"></mat-datepicker-toggle>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i4$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i4$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i4$3.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i4$3.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i4$3.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i4$3.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: SimpleDatePipe, name: "simpleDate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DateRangeInputComponent, decorators: [{
             type: Component,
@@ -4739,7 +4739,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                             useExisting: forwardRef(() => DateRangeInputComponent),
                             multi: true,
                         }
-                    ], template: "<div class=\"w-full flex flex-col\" [formGroup]=\"dateRangeForm\">\r\n  @if (isInForm()) {\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{ (translationPrefix() ? translationPrefix() + '_LABEL' : 'COMMON.DATE_RANGE_LABEL') | translate }}</mat-label>\r\n      <mat-select (blur)=\"onTouched($event)\" formControlName=\"periodOption\" (selectionChange)=\"onTimeRangeChanged($event)\" [errorStateMatcher]=\"periodErrorStateMatcher\" panelClass=\"date-range-panel\">\r\n        @for (periodOption of availableDateOptions(); track $index) {\r\n          <mat-option [value]=\"periodOption\">{{ 'COMMON.RELATIVE_TIME_PERIOD_' + periodOption | translate }}</mat-option>\r\n        }\r\n        @if (allowCustomTimespan()) {\r\n          <mat-option [value]=\"CUSTOM_PERIOD\">\r\n            <div class=\"flex flex-row gap-x-4\">\r\n              @if (dateRangeForm.get('from')?.value) {\r\n                <div class=\"flex flex-row\">\r\n                  <span class=\"whitespace-nowrap h-fit\">{{ dateRangeForm.get('from')?.value?.toMillis() | simpleDate : undefined: false }}</span>\r\n                  <span class=\"whitespace-nowrap h-fit\">&nbsp;-&nbsp;</span>\r\n                  <span class=\"whitespace-nowrap h-fit\">{{ dateRangeForm.get('to')?.value?.toMillis() | simpleDate : undefined: false }}</span>\r\n                </div>\r\n              } @else {\r\n                <div>{{ 'COMMON.RELATIVE_TIME_PERIOD_CUSTOM' | translate }}</div>\r\n              }\r\n            </div>\r\n          </mat-option>\r\n        }\r\n      </mat-select>\r\n      <mat-date-range-input [rangePicker]=\"picker\" style=\"visibility: hidden; width: 0; height: 0;\">\r\n        <input (blur)=\"onTouched($event)\" matStartDate formControlName=\"from\">\r\n        <input (blur)=\"onTouched($event)\" matEndDate formControlName=\"to\"/>\r\n      </mat-date-range-input>\r\n      <mat-date-range-picker #picker (closed)=\"emitValueChange()\"></mat-date-range-picker>\r\n      @if (dateRangeForm.get('periodOption')?.value === CUSTOM_PERIOD) {\r\n        <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n      }\r\n      @if (dateRangeForm.touched && dateRangeForm.hasError('required')) {\r\n        <mat-error>\r\n          {{ 'COMMON.ERROR_VALIDATION_REQUIRED' | translate }}\r\n        </mat-error>\r\n      }\r\n      @if (dateRangeForm.touched && dateRangeForm.hasError('incompletePeriod')) {\r\n        {{ 'COMMON.ERROR_VALIDATION_REQUIRED' | translate }}\r\n      }\r\n    </mat-form-field>\r\n  } @else {\r\n    <div class=\"flex\">\r\n      <mat-select class=\"date-range-flat-picker-select\" (blur)=\"onTouched($event)\" formControlName=\"periodOption\" (selectionChange)=\"onTimeRangeChanged($event)\" [errorStateMatcher]=\"periodErrorStateMatcher\" panelClass=\"date-range-panel\">\r\n        @for (periodOption of availableDateOptions(); track $index) {\r\n          <mat-option [value]=\"periodOption\">{{ 'COMMON.RELATIVE_TIME_PERIOD_' + periodOption | translate }}</mat-option>\r\n        }\r\n        @if (allowCustomTimespan()) {\r\n          <mat-option [value]=\"CUSTOM_PERIOD\">\r\n            <div class=\"flex flex-row gap-x-4\">\r\n              @if (dateRangeForm.get('from')?.value) {\r\n                <div class=\"flex flex-row\">\r\n                  <span class=\"whitespace-nowrap h-fit\">{{ dateRangeForm.get('from')?.value?.toMillis() | simpleDate : undefined: false }}</span>\r\n                  <span class=\"whitespace-nowrap h-fit\">&nbsp;-&nbsp;</span>\r\n                  <span class=\"whitespace-nowrap h-fit\">{{ dateRangeForm.get('to')?.value?.toMillis() | simpleDate : undefined: false }}</span>\r\n                </div>\r\n              } @else {\r\n                <div>{{ 'COMMON.RELATIVE_TIME_PERIOD_CUSTOM' | translate }}</div>\r\n              }\r\n            </div>\r\n          </mat-option>\r\n        }\r\n      </mat-select>\r\n      <mat-date-range-input [rangePicker]=\"picker\" style=\"visibility: hidden; width: 0; height: 0;\">\r\n        <input (blur)=\"onTouched($event)\" matStartDate formControlName=\"from\">\r\n        <input (blur)=\"onTouched($event)\" matEndDate formControlName=\"to\"/>\r\n      </mat-date-range-input>\r\n      <mat-date-range-picker #picker (closed)=\"emitValueChange()\"></mat-date-range-picker>\r\n      @if (dateRangeForm.get('periodOption')?.value === CUSTOM_PERIOD) {\r\n        <mat-datepicker-toggle matSuffix [for]=\"picker\" class=\"date-range-flat-picker-toggle\"></mat-datepicker-toggle>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}\n"] }]
+                    ], template: "<div class=\"w-full flex flex-col\" [formGroup]=\"dateRangeForm\">\n  @if (isInForm()) {\n    <mat-form-field class=\"flex\">\n      <mat-label>{{ (translationPrefix() ? translationPrefix() + '_LABEL' : 'COMMON.DATE_RANGE_LABEL') | translate }}</mat-label>\n      <mat-select (blur)=\"onTouched($event)\" formControlName=\"periodOption\" (selectionChange)=\"onTimeRangeChanged($event)\" [errorStateMatcher]=\"periodErrorStateMatcher\" panelClass=\"date-range-panel\">\n        @for (periodOption of availableDateOptions(); track $index) {\n          <mat-option [value]=\"periodOption\">{{ 'COMMON.RELATIVE_TIME_PERIOD_' + periodOption | translate }}</mat-option>\n        }\n        @if (allowCustomTimespan()) {\n          <mat-option [value]=\"CUSTOM_PERIOD\">\n            <div class=\"flex flex-row gap-x-4\">\n              @if (dateRangeForm.get('from')?.value) {\n                <div class=\"flex flex-row\">\n                  <span class=\"whitespace-nowrap h-fit\">{{ dateRangeForm.get('from')?.value?.toMillis() | simpleDate : undefined: false }}</span>\n                  <span class=\"whitespace-nowrap h-fit\">&nbsp;-&nbsp;</span>\n                  <span class=\"whitespace-nowrap h-fit\">{{ dateRangeForm.get('to')?.value?.toMillis() | simpleDate : undefined: false }}</span>\n                </div>\n              } @else {\n                <div>{{ 'COMMON.RELATIVE_TIME_PERIOD_CUSTOM' | translate }}</div>\n              }\n            </div>\n          </mat-option>\n        }\n      </mat-select>\n      <mat-date-range-input [rangePicker]=\"picker\" style=\"visibility: hidden; width: 0; height: 0;\">\n        <input (blur)=\"onTouched($event)\" matStartDate formControlName=\"from\">\n        <input (blur)=\"onTouched($event)\" matEndDate formControlName=\"to\"/>\n      </mat-date-range-input>\n      <mat-date-range-picker #picker (closed)=\"emitValueChange()\"></mat-date-range-picker>\n      @if (dateRangeForm.get('periodOption')?.value === CUSTOM_PERIOD) {\n        <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n      }\n      @if (dateRangeForm.touched && dateRangeForm.hasError('required')) {\n        <mat-error>\n          {{ 'COMMON.ERROR_VALIDATION_REQUIRED' | translate }}\n        </mat-error>\n      }\n      @if (dateRangeForm.touched && dateRangeForm.hasError('incompletePeriod')) {\n        {{ 'COMMON.ERROR_VALIDATION_REQUIRED' | translate }}\n      }\n    </mat-form-field>\n  } @else {\n    <div class=\"flex\">\n      <mat-select class=\"date-range-flat-picker-select\" (blur)=\"onTouched($event)\" formControlName=\"periodOption\" (selectionChange)=\"onTimeRangeChanged($event)\" [errorStateMatcher]=\"periodErrorStateMatcher\" panelClass=\"date-range-panel\">\n        @for (periodOption of availableDateOptions(); track $index) {\n          <mat-option [value]=\"periodOption\">{{ 'COMMON.RELATIVE_TIME_PERIOD_' + periodOption | translate }}</mat-option>\n        }\n        @if (allowCustomTimespan()) {\n          <mat-option [value]=\"CUSTOM_PERIOD\">\n            <div class=\"flex flex-row gap-x-4\">\n              @if (dateRangeForm.get('from')?.value) {\n                <div class=\"flex flex-row\">\n                  <span class=\"whitespace-nowrap h-fit\">{{ dateRangeForm.get('from')?.value?.toMillis() | simpleDate : undefined: false }}</span>\n                  <span class=\"whitespace-nowrap h-fit\">&nbsp;-&nbsp;</span>\n                  <span class=\"whitespace-nowrap h-fit\">{{ dateRangeForm.get('to')?.value?.toMillis() | simpleDate : undefined: false }}</span>\n                </div>\n              } @else {\n                <div>{{ 'COMMON.RELATIVE_TIME_PERIOD_CUSTOM' | translate }}</div>\n              }\n            </div>\n          </mat-option>\n        }\n      </mat-select>\n      <mat-date-range-input [rangePicker]=\"picker\" style=\"visibility: hidden; width: 0; height: 0;\">\n        <input (blur)=\"onTouched($event)\" matStartDate formControlName=\"from\">\n        <input (blur)=\"onTouched($event)\" matEndDate formControlName=\"to\"/>\n      </mat-date-range-input>\n      <mat-date-range-picker #picker (closed)=\"emitValueChange()\"></mat-date-range-picker>\n      @if (dateRangeForm.get('periodOption')?.value === CUSTOM_PERIOD) {\n        <mat-datepicker-toggle matSuffix [for]=\"picker\" class=\"date-range-flat-picker-toggle\"></mat-datepicker-toggle>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block}\n"] }]
         }], ctorParameters: () => [{ type: i0.DestroyRef }, { type: TenantPropertiesService }], propDecorators: { availableDateOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableDateOptions", required: false }] }], translationPrefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "translationPrefix", required: false }] }], allowCustomTimespan: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowCustomTimespan", required: false }] }], isInForm: [{ type: i0.Input, args: [{ isSignal: true, alias: "isInForm", required: false }] }], datePicker: [{ type: i0.ViewChild, args: ['picker', { isSignal: true }] }], validators: [{ type: i0.Input, args: [{ isSignal: true, alias: "validators", required: false }] }] } });
 
 class DateTimeFormFieldComponent {
@@ -4848,7 +4848,7 @@ class DateTimeFormFieldComponent {
                 useExisting: forwardRef(() => DateTimeFormFieldComponent),
                 multi: true,
             }
-        ], ngImport: i0, template: "<ng-container [formGroup]=\"formGroup\">\r\n  <div class=\"flex flex-col gap-y-4\">\r\n    <mat-form-field [matTooltip]=\"getDateErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\r\n      <mat-label>{{ (dateLabel ?? 'COMMON.DATE') | translate }}</mat-label>\r\n      <input [matDatepicker]=\"picker\" formControlName=\"date\" matInput>\r\n      <mat-datepicker-toggle [for]=\"picker\" matIconSuffix></mat-datepicker-toggle>\r\n      <mat-datepicker #picker></mat-datepicker>\r\n      @for (error of getDateErrors(); track error) {\r\n        <mat-error *ngIf=\"!showErrorInTooltip()\" class=\"text-[12px]\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate }}</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    <mat-form-field [matTooltip]=\"getTimeErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\r\n      <mat-label>{{ (timeLabel ?? 'COMMON.TIME') | translate }}</mat-label>\r\n      <input [format]=\"24\" [ngxMatTimepicker]=\"pickerA\" formControlName=\"time\" matInput (input)=\"onInputChange($event)\"/>\r\n      <mat-icon (click)=\"pickerA.open()\" matSuffix> watch_later</mat-icon>\r\n      <ngx-mat-timepicker #pickerA></ngx-mat-timepicker>\r\n      @for (error of getTimeErrors(); track error) {\r\n        <mat-error *ngIf=\"!showErrorInTooltip()\" class=\"text-[12px]\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate }}</mat-error>\r\n      }\r\n    </mat-form-field>\r\n  </div>\r\n</ng-container>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i4$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgxMatTimepickerDirective, selector: "[ngxMatTimepicker]", inputs: ["format", "max", "min", "ngxMatTimepicker", "value", "disableClick", "disabled"] }, { kind: "component", type: NgxMatTimepickerComponent, selector: "ngx-mat-timepicker", inputs: ["appendToInput", "color", "dottedMinutesInGap", "enableKeyboardInput", "format", "minutesGap", "cancelBtnTmpl", "confirmBtnTmpl", "defaultTime", "disableAnimation", "editableHintTmpl", "hoursOnly", "isEsc", "max", "min", "preventOverlayClick", "timepickerClass"], outputs: ["closed", "hourSelected", "opened", "timeChanged", "timeSet"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+        ], ngImport: i0, template: "<ng-container [formGroup]=\"formGroup\">\n  <div class=\"flex flex-col gap-y-4\">\n    <mat-form-field [matTooltip]=\"getDateErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n      <mat-label>{{ (dateLabel ?? 'COMMON.DATE') | translate }}</mat-label>\n      <input [matDatepicker]=\"picker\" formControlName=\"date\" matInput>\n      <mat-datepicker-toggle [for]=\"picker\" matIconSuffix></mat-datepicker-toggle>\n      <mat-datepicker #picker></mat-datepicker>\n      @for (error of getDateErrors(); track error) {\n        <mat-error *ngIf=\"!showErrorInTooltip()\" class=\"text-[12px]\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate }}</mat-error>\n      }\n    </mat-form-field>\n    <mat-form-field [matTooltip]=\"getTimeErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n      <mat-label>{{ (timeLabel ?? 'COMMON.TIME') | translate }}</mat-label>\n      <input [format]=\"24\" [ngxMatTimepicker]=\"pickerA\" formControlName=\"time\" matInput (input)=\"onInputChange($event)\"/>\n      <mat-icon (click)=\"pickerA.open()\" matSuffix> watch_later</mat-icon>\n      <ngx-mat-timepicker #pickerA></ngx-mat-timepicker>\n      @for (error of getTimeErrors(); track error) {\n        <mat-error *ngIf=\"!showErrorInTooltip()\" class=\"text-[12px]\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate }}</mat-error>\n      }\n    </mat-form-field>\n  </div>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i4$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgxMatTimepickerDirective, selector: "[ngxMatTimepicker]", inputs: ["format", "max", "min", "ngxMatTimepicker", "value", "disableClick", "disabled"] }, { kind: "component", type: NgxMatTimepickerComponent, selector: "ngx-mat-timepicker", inputs: ["appendToInput", "color", "dottedMinutesInGap", "enableKeyboardInput", "format", "minutesGap", "cancelBtnTmpl", "confirmBtnTmpl", "defaultTime", "disableAnimation", "editableHintTmpl", "hoursOnly", "isEsc", "max", "min", "preventOverlayClick", "timepickerClass"], outputs: ["closed", "hourSelected", "opened", "timeChanged", "timeSet"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DateTimeFormFieldComponent, decorators: [{
             type: Component,
@@ -4863,7 +4863,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                             useExisting: forwardRef(() => DateTimeFormFieldComponent),
                             multi: true,
                         }
-                    ], template: "<ng-container [formGroup]=\"formGroup\">\r\n  <div class=\"flex flex-col gap-y-4\">\r\n    <mat-form-field [matTooltip]=\"getDateErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\r\n      <mat-label>{{ (dateLabel ?? 'COMMON.DATE') | translate }}</mat-label>\r\n      <input [matDatepicker]=\"picker\" formControlName=\"date\" matInput>\r\n      <mat-datepicker-toggle [for]=\"picker\" matIconSuffix></mat-datepicker-toggle>\r\n      <mat-datepicker #picker></mat-datepicker>\r\n      @for (error of getDateErrors(); track error) {\r\n        <mat-error *ngIf=\"!showErrorInTooltip()\" class=\"text-[12px]\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate }}</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    <mat-form-field [matTooltip]=\"getTimeErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\r\n      <mat-label>{{ (timeLabel ?? 'COMMON.TIME') | translate }}</mat-label>\r\n      <input [format]=\"24\" [ngxMatTimepicker]=\"pickerA\" formControlName=\"time\" matInput (input)=\"onInputChange($event)\"/>\r\n      <mat-icon (click)=\"pickerA.open()\" matSuffix> watch_later</mat-icon>\r\n      <ngx-mat-timepicker #pickerA></ngx-mat-timepicker>\r\n      @for (error of getTimeErrors(); track error) {\r\n        <mat-error *ngIf=\"!showErrorInTooltip()\" class=\"text-[12px]\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate }}</mat-error>\r\n      }\r\n    </mat-form-field>\r\n  </div>\r\n</ng-container>\r\n" }]
+                    ], template: "<ng-container [formGroup]=\"formGroup\">\n  <div class=\"flex flex-col gap-y-4\">\n    <mat-form-field [matTooltip]=\"getDateErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n      <mat-label>{{ (dateLabel ?? 'COMMON.DATE') | translate }}</mat-label>\n      <input [matDatepicker]=\"picker\" formControlName=\"date\" matInput>\n      <mat-datepicker-toggle [for]=\"picker\" matIconSuffix></mat-datepicker-toggle>\n      <mat-datepicker #picker></mat-datepicker>\n      @for (error of getDateErrors(); track error) {\n        <mat-error *ngIf=\"!showErrorInTooltip()\" class=\"text-[12px]\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate }}</mat-error>\n      }\n    </mat-form-field>\n    <mat-form-field [matTooltip]=\"getTimeErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n      <mat-label>{{ (timeLabel ?? 'COMMON.TIME') | translate }}</mat-label>\n      <input [format]=\"24\" [ngxMatTimepicker]=\"pickerA\" formControlName=\"time\" matInput (input)=\"onInputChange($event)\"/>\n      <mat-icon (click)=\"pickerA.open()\" matSuffix> watch_later</mat-icon>\n      <ngx-mat-timepicker #pickerA></ngx-mat-timepicker>\n      @for (error of getTimeErrors(); track error) {\n        <mat-error *ngIf=\"!showErrorInTooltip()\" class=\"text-[12px]\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate }}</mat-error>\n      }\n    </mat-form-field>\n  </div>\n</ng-container>\n" }]
         }], ctorParameters: () => [{ type: i1$1.TranslateService }], propDecorators: { dateLabel: [{
                 type: Input
             }], timeLabel: [{
@@ -4992,11 +4992,11 @@ class DragDropFileUploadComponent {
         this.destroy$.complete();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DragDropFileUploadComponent, deps: [{ token: i5.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DragDropFileUploadComponent, isStandalone: true, selector: "application-drag-drop-file-upload", inputs: { accept: "accept", multiple: "multiple", prompt: "prompt" }, viewQueries: [{ propertyName: "dragDropZone", first: true, predicate: ["dragDropZone"], descendants: true }, { propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div #dragDropZone class=\"drag-drop-zone flex flex-col items-center justify-center\" [ngClass]=\"{ highlight: highlight(), disabled: disabled() }\">\r\n  @if (files$ | async; as files) {\r\n    @if (files.length > 0) {\r\n      <div class=\"flex flex-col flex-wrap items-center justify-center\">\r\n        @for (file of files; track $index) {\r\n          <div class=\"name-wrapper flex flex-row items-center justify-center gap-2\">\r\n            <mat-icon>description</mat-icon>\r\n            <span [matTooltipDisabled]=\"file.name.length < TRUNCATE_NAME_LIMIT\" [matTooltip]=\"file.name\">{{ getFileName(file.name) }}</span>\r\n            <mat-icon class=\"delete-button text-mat-sys-on-error-container\" (click)=\"deleteFile($event, $index)\">delete</mat-icon>\r\n          </div>\r\n        }\r\n      </div>\r\n    } @else {\r\n      <span>{{ prompt | translate }}</span>\r\n    }\r\n  } @else {\r\n    <span>{{ prompt | translate }}</span>\r\n  }\r\n  @if (controlDir.control?.errors && controlDir.control?.touched) {\r\n    <mat-error>{{ getErrorForTranslation(controlDir.control?.errors).key | translate: getErrorForTranslation(controlDir.control?.errors).params }}</mat-error>\r\n  }\r\n</div>\r\n<input #fileInput type=\"file\" [attr.multiple]=\"multiple ? true : null\" [attr.accept]=\"accept === '.*' ? '*' : accept\" (change)=\"onFileAdded($event)\"/>\r\n", styles: [":host{display:block;position:relative}input[type=file]{display:none}.drag-drop-zone{min-height:100px;min-width:250px;border:1px dashed var(--neutral-variant-color-60);cursor:pointer;border-radius:5px}.drag-drop-zone.highlight{background-color:var(--mat-sys-primary-container);border:1px solid var(--mat-sys-on-primary-container)}.drag-drop-zone.disabled{opacity:.5;pointer-events:none;cursor:no-drop}.drag-drop-zone .name-wrapper{cursor:auto}.drag-drop-zone .delete-button{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DragDropFileUploadComponent, isStandalone: true, selector: "application-drag-drop-file-upload", inputs: { accept: "accept", multiple: "multiple", prompt: "prompt" }, viewQueries: [{ propertyName: "dragDropZone", first: true, predicate: ["dragDropZone"], descendants: true }, { propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div #dragDropZone class=\"drag-drop-zone flex flex-col items-center justify-center\" [ngClass]=\"{ highlight: highlight(), disabled: disabled() }\">\n  @if (files$ | async; as files) {\n    @if (files.length > 0) {\n      <div class=\"flex flex-col flex-wrap items-center justify-center\">\n        @for (file of files; track $index) {\n          <div class=\"name-wrapper flex flex-row items-center justify-center gap-2\">\n            <mat-icon>description</mat-icon>\n            <span [matTooltipDisabled]=\"file.name.length < TRUNCATE_NAME_LIMIT\" [matTooltip]=\"file.name\">{{ getFileName(file.name) }}</span>\n            <mat-icon class=\"delete-button text-mat-sys-on-error-container\" (click)=\"deleteFile($event, $index)\">delete</mat-icon>\n          </div>\n        }\n      </div>\n    } @else {\n      <span>{{ prompt | translate }}</span>\n    }\n  } @else {\n    <span>{{ prompt | translate }}</span>\n  }\n  @if (controlDir.control?.errors && controlDir.control?.touched) {\n    <mat-error>{{ getErrorForTranslation(controlDir.control?.errors).key | translate: getErrorForTranslation(controlDir.control?.errors).params }}</mat-error>\n  }\n</div>\n<input #fileInput type=\"file\" [attr.multiple]=\"multiple ? true : null\" [attr.accept]=\"accept === '.*' ? '*' : accept\" (change)=\"onFileAdded($event)\"/>\n", styles: [":host{display:block;position:relative}input[type=file]{display:none}.drag-drop-zone{min-height:100px;min-width:250px;border:1px dashed var(--neutral-variant-color-60);cursor:pointer;border-radius:5px}.drag-drop-zone.highlight{background-color:var(--mat-sys-primary-container);border:1px solid var(--mat-sys-on-primary-container)}.drag-drop-zone.disabled{opacity:.5;pointer-events:none;cursor:no-drop}.drag-drop-zone .name-wrapper{cursor:auto}.drag-drop-zone .delete-button{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DragDropFileUploadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'application-drag-drop-file-upload', imports: [SharedModule], template: "<div #dragDropZone class=\"drag-drop-zone flex flex-col items-center justify-center\" [ngClass]=\"{ highlight: highlight(), disabled: disabled() }\">\r\n  @if (files$ | async; as files) {\r\n    @if (files.length > 0) {\r\n      <div class=\"flex flex-col flex-wrap items-center justify-center\">\r\n        @for (file of files; track $index) {\r\n          <div class=\"name-wrapper flex flex-row items-center justify-center gap-2\">\r\n            <mat-icon>description</mat-icon>\r\n            <span [matTooltipDisabled]=\"file.name.length < TRUNCATE_NAME_LIMIT\" [matTooltip]=\"file.name\">{{ getFileName(file.name) }}</span>\r\n            <mat-icon class=\"delete-button text-mat-sys-on-error-container\" (click)=\"deleteFile($event, $index)\">delete</mat-icon>\r\n          </div>\r\n        }\r\n      </div>\r\n    } @else {\r\n      <span>{{ prompt | translate }}</span>\r\n    }\r\n  } @else {\r\n    <span>{{ prompt | translate }}</span>\r\n  }\r\n  @if (controlDir.control?.errors && controlDir.control?.touched) {\r\n    <mat-error>{{ getErrorForTranslation(controlDir.control?.errors).key | translate: getErrorForTranslation(controlDir.control?.errors).params }}</mat-error>\r\n  }\r\n</div>\r\n<input #fileInput type=\"file\" [attr.multiple]=\"multiple ? true : null\" [attr.accept]=\"accept === '.*' ? '*' : accept\" (change)=\"onFileAdded($event)\"/>\r\n", styles: [":host{display:block;position:relative}input[type=file]{display:none}.drag-drop-zone{min-height:100px;min-width:250px;border:1px dashed var(--neutral-variant-color-60);cursor:pointer;border-radius:5px}.drag-drop-zone.highlight{background-color:var(--mat-sys-primary-container);border:1px solid var(--mat-sys-on-primary-container)}.drag-drop-zone.disabled{opacity:.5;pointer-events:none;cursor:no-drop}.drag-drop-zone .name-wrapper{cursor:auto}.drag-drop-zone .delete-button{cursor:pointer}\n"] }]
+            args: [{ selector: 'application-drag-drop-file-upload', imports: [SharedModule], template: "<div #dragDropZone class=\"drag-drop-zone flex flex-col items-center justify-center\" [ngClass]=\"{ highlight: highlight(), disabled: disabled() }\">\n  @if (files$ | async; as files) {\n    @if (files.length > 0) {\n      <div class=\"flex flex-col flex-wrap items-center justify-center\">\n        @for (file of files; track $index) {\n          <div class=\"name-wrapper flex flex-row items-center justify-center gap-2\">\n            <mat-icon>description</mat-icon>\n            <span [matTooltipDisabled]=\"file.name.length < TRUNCATE_NAME_LIMIT\" [matTooltip]=\"file.name\">{{ getFileName(file.name) }}</span>\n            <mat-icon class=\"delete-button text-mat-sys-on-error-container\" (click)=\"deleteFile($event, $index)\">delete</mat-icon>\n          </div>\n        }\n      </div>\n    } @else {\n      <span>{{ prompt | translate }}</span>\n    }\n  } @else {\n    <span>{{ prompt | translate }}</span>\n  }\n  @if (controlDir.control?.errors && controlDir.control?.touched) {\n    <mat-error>{{ getErrorForTranslation(controlDir.control?.errors).key | translate: getErrorForTranslation(controlDir.control?.errors).params }}</mat-error>\n  }\n</div>\n<input #fileInput type=\"file\" [attr.multiple]=\"multiple ? true : null\" [attr.accept]=\"accept === '.*' ? '*' : accept\" (change)=\"onFileAdded($event)\"/>\n", styles: [":host{display:block;position:relative}input[type=file]{display:none}.drag-drop-zone{min-height:100px;min-width:250px;border:1px dashed var(--neutral-variant-color-60);cursor:pointer;border-radius:5px}.drag-drop-zone.highlight{background-color:var(--mat-sys-primary-container);border:1px solid var(--mat-sys-on-primary-container)}.drag-drop-zone.disabled{opacity:.5;pointer-events:none;cursor:no-drop}.drag-drop-zone .name-wrapper{cursor:auto}.drag-drop-zone .delete-button{cursor:pointer}\n"] }]
         }], ctorParameters: () => [{ type: i5.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -5105,13 +5105,13 @@ class GoogleMapComponent {
         const isOffset = mapItem.trueLat !== undefined && mapItem.trueLng !== undefined;
         const lastReading = isOffset ? mapItem.trueLat + ',' + mapItem.trueLng : mapItem.lat + ',' + mapItem.lng;
         const offsetNotification = isOffset ? `<span>${this.translateService.instant('DASHBOARDS.MAP_WIDGET_OFFSET_NOTIFICATION')}</span>` : '';
-        const infoWindowContent = `
-      <div class="text-black flex flex-col gap-y-2 mt-4 !w-fit !h-fit select-none">
-        <span class="font-bold">${mapItem.path}</span>
-        <span>${lastReadingTime ? this.simpleDateTimePipe.transform(lastReadingTime) : ''}</span>
-        <span class="font-bold mt-4">${lastReading}</span>
-        ${offsetNotification}
-      </div>
+        const infoWindowContent = `
+      <div class="text-black flex flex-col gap-y-2 mt-4 !w-fit !h-fit select-none">
+        <span class="font-bold">${mapItem.path}</span>
+        <span>${lastReadingTime ? this.simpleDateTimePipe.transform(lastReadingTime) : ''}</span>
+        <span class="font-bold mt-4">${lastReading}</span>
+        ${offsetNotification}
+      </div>
     `;
         const infoWindow = new google.maps.InfoWindow({
             content: infoWindowContent,
@@ -5119,10 +5119,10 @@ class GoogleMapComponent {
             pixelOffset: new google.maps.Size(0, -4)
         });
         const pin = document.createElement('div');
-        pin.innerHTML = `
-      <svg width="48" height="48" viewBox="0 0 24 24" fill="${mapItem.color}">
-        <path d="M10.453 14.016zM12 2.016q2.906 0 4.945 2.039t2.039 4.945q0 1.453-.727 3.328t-1.758 3.516-2.039 3.07-1.711 2.273l-.75.797q-.281-.328-.75-.867t-1.688-2.156-2.133-3.141-1.664-3.445-.75-3.375q0-2.906 2.039-4.945t4.945-2.039z"></path>
-      </svg>
+        pin.innerHTML = `
+      <svg width="48" height="48" viewBox="0 0 24 24" fill="${mapItem.color}">
+        <path d="M10.453 14.016zM12 2.016q2.906 0 4.945 2.039t2.039 4.945q0 1.453-.727 3.328t-1.758 3.516-2.039 3.07-1.711 2.273l-.75.797q-.281-.328-.75-.867t-1.688-2.156-2.133-3.141-1.664-3.445-.75-3.375q0-2.906 2.039-4.945t4.945-2.039z"></path>
+      </svg>
     `;
         const marker = new google.maps.marker.AdvancedMarkerElement({
             position: { lat: +mapItem.lat, lng: +mapItem.lng },
@@ -5184,11 +5184,11 @@ class GoogleMapComponent {
         return result;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GoogleMapComponent, deps: [{ token: i1$1.TranslateService }, { token: SimpleDateTimePipe }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: GoogleMapComponent, isStandalone: true, selector: "app-google-map", inputs: { googleMapId: { classPropertyName: "googleMapId", publicName: "googleMapId", isSignal: true, isRequired: true, transformFunction: null }, darkTheme: { classPropertyName: "darkTheme", publicName: "darkTheme", isSignal: true, isRequired: true, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, pinColor: { classPropertyName: "pinColor", publicName: "pinColor", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { markerClicked: "markerClicked" }, providers: [SimpleDateTimePipe], viewQueries: [{ propertyName: "map", first: true, predicate: GoogleMap, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"map-wrapper\">\r\n  <google-map height=\"100%\" width=\"100%\" [options]=\"mapOptions()\" [zoom]=\"zoom()\" class=\"map-full\"/>\r\n  <div class=\"map-controls\">\r\n    <mat-card>\r\n      <button mat-mini-fab (click)=\"fitBounds()\" class=\"text-mat-sys-on-surface\" type=\"button\">\r\n        <mat-icon>filter_center_focus</mat-icon>\r\n      </button>\r\n    </mat-card>\r\n    <mat-card>\r\n      <button mat-mini-fab (click)=\"changeZoom(+1)\" [disabled]=\"zoom() === 21\" class=\"text-mat-sys-on-surface\" type=\"button\">\r\n        <mat-icon>add</mat-icon>\r\n      </button>\r\n    </mat-card>\r\n    <mat-card>\r\n      <button mat-mini-fab (click)=\"changeZoom(-1)\" [disabled]=\"zoom() === 2\" class=\"text-mat-sys-on-surface\" type=\"button\">\r\n        <mat-icon>remove</mat-icon>\r\n      </button>\r\n    </mat-card>\r\n  </div>\r\n</div>\r\n", styles: [".map-wrapper{display:flex;width:100%;height:100%}.map-full{width:100%;height:100%}.map-controls{position:absolute;bottom:1.75rem;right:.75rem;display:flex;flex-direction:column;row-gap:.25rem}.map-controls mat-card{border:none!important}.map-controls button{background-color:transparent!important}\n"], dependencies: [{ kind: "component", type: GoogleMap, selector: "google-map", inputs: ["height", "width", "mapId", "mapTypeId", "center", "zoom", "options"], outputs: ["mapInitialized", "authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }, { kind: "ngmodule", type: SharedModule }, { kind: "component", type: i1$4.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: GoogleMapComponent, isStandalone: true, selector: "app-google-map", inputs: { googleMapId: { classPropertyName: "googleMapId", publicName: "googleMapId", isSignal: true, isRequired: true, transformFunction: null }, darkTheme: { classPropertyName: "darkTheme", publicName: "darkTheme", isSignal: true, isRequired: true, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, pinColor: { classPropertyName: "pinColor", publicName: "pinColor", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { markerClicked: "markerClicked" }, providers: [SimpleDateTimePipe], viewQueries: [{ propertyName: "map", first: true, predicate: GoogleMap, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"map-wrapper\">\n  <google-map height=\"100%\" width=\"100%\" [options]=\"mapOptions()\" [zoom]=\"zoom()\" class=\"map-full\"/>\n  <div class=\"map-controls\">\n    <mat-card>\n      <button mat-mini-fab (click)=\"fitBounds()\" class=\"text-mat-sys-on-surface\" type=\"button\">\n        <mat-icon>filter_center_focus</mat-icon>\n      </button>\n    </mat-card>\n    <mat-card>\n      <button mat-mini-fab (click)=\"changeZoom(+1)\" [disabled]=\"zoom() === 21\" class=\"text-mat-sys-on-surface\" type=\"button\">\n        <mat-icon>add</mat-icon>\n      </button>\n    </mat-card>\n    <mat-card>\n      <button mat-mini-fab (click)=\"changeZoom(-1)\" [disabled]=\"zoom() === 2\" class=\"text-mat-sys-on-surface\" type=\"button\">\n        <mat-icon>remove</mat-icon>\n      </button>\n    </mat-card>\n  </div>\n</div>\n", styles: [".map-wrapper{display:flex;width:100%;height:100%}.map-full{width:100%;height:100%}.map-controls{position:absolute;bottom:1.75rem;right:.75rem;display:flex;flex-direction:column;row-gap:.25rem}.map-controls mat-card{border:none!important}.map-controls button{background-color:transparent!important}\n"], dependencies: [{ kind: "component", type: GoogleMap, selector: "google-map", inputs: ["height", "width", "mapId", "mapTypeId", "center", "zoom", "options"], outputs: ["mapInitialized", "authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }, { kind: "ngmodule", type: SharedModule }, { kind: "component", type: i1$4.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GoogleMapComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-google-map', imports: [GoogleMap, SharedModule], providers: [SimpleDateTimePipe], template: "<div class=\"map-wrapper\">\r\n  <google-map height=\"100%\" width=\"100%\" [options]=\"mapOptions()\" [zoom]=\"zoom()\" class=\"map-full\"/>\r\n  <div class=\"map-controls\">\r\n    <mat-card>\r\n      <button mat-mini-fab (click)=\"fitBounds()\" class=\"text-mat-sys-on-surface\" type=\"button\">\r\n        <mat-icon>filter_center_focus</mat-icon>\r\n      </button>\r\n    </mat-card>\r\n    <mat-card>\r\n      <button mat-mini-fab (click)=\"changeZoom(+1)\" [disabled]=\"zoom() === 21\" class=\"text-mat-sys-on-surface\" type=\"button\">\r\n        <mat-icon>add</mat-icon>\r\n      </button>\r\n    </mat-card>\r\n    <mat-card>\r\n      <button mat-mini-fab (click)=\"changeZoom(-1)\" [disabled]=\"zoom() === 2\" class=\"text-mat-sys-on-surface\" type=\"button\">\r\n        <mat-icon>remove</mat-icon>\r\n      </button>\r\n    </mat-card>\r\n  </div>\r\n</div>\r\n", styles: [".map-wrapper{display:flex;width:100%;height:100%}.map-full{width:100%;height:100%}.map-controls{position:absolute;bottom:1.75rem;right:.75rem;display:flex;flex-direction:column;row-gap:.25rem}.map-controls mat-card{border:none!important}.map-controls button{background-color:transparent!important}\n"] }]
+            args: [{ selector: 'app-google-map', imports: [GoogleMap, SharedModule], providers: [SimpleDateTimePipe], template: "<div class=\"map-wrapper\">\n  <google-map height=\"100%\" width=\"100%\" [options]=\"mapOptions()\" [zoom]=\"zoom()\" class=\"map-full\"/>\n  <div class=\"map-controls\">\n    <mat-card>\n      <button mat-mini-fab (click)=\"fitBounds()\" class=\"text-mat-sys-on-surface\" type=\"button\">\n        <mat-icon>filter_center_focus</mat-icon>\n      </button>\n    </mat-card>\n    <mat-card>\n      <button mat-mini-fab (click)=\"changeZoom(+1)\" [disabled]=\"zoom() === 21\" class=\"text-mat-sys-on-surface\" type=\"button\">\n        <mat-icon>add</mat-icon>\n      </button>\n    </mat-card>\n    <mat-card>\n      <button mat-mini-fab (click)=\"changeZoom(-1)\" [disabled]=\"zoom() === 2\" class=\"text-mat-sys-on-surface\" type=\"button\">\n        <mat-icon>remove</mat-icon>\n      </button>\n    </mat-card>\n  </div>\n</div>\n", styles: [".map-wrapper{display:flex;width:100%;height:100%}.map-full{width:100%;height:100%}.map-controls{position:absolute;bottom:1.75rem;right:.75rem;display:flex;flex-direction:column;row-gap:.25rem}.map-controls mat-card{border:none!important}.map-controls button{background-color:transparent!important}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.TranslateService }, { type: SimpleDateTimePipe }], propDecorators: { map: [{ type: i0.ViewChild, args: [i0.forwardRef(() => GoogleMap), { isSignal: true }] }], googleMapId: [{ type: i0.Input, args: [{ isSignal: true, alias: "googleMapId", required: true }] }], darkTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "darkTheme", required: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], pinColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinColor", required: true }] }], markerClicked: [{ type: i0.Output, args: ["markerClicked"] }] } });
 
 class ImagePreviewComponent {
@@ -5227,11 +5227,11 @@ class ImagePreviewComponent {
         return image !== null && image.constructor.name === 'SafeHtmlImpl';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ImagePreviewComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ImagePreviewComponent, isStandalone: true, selector: "app-image-preview", viewQueries: [{ propertyName: "image", first: true, predicate: ["imageElement"], descendants: true }, { propertyName: "svgElement", first: true, predicate: ["svgElement"], descendants: true }], ngImport: i0, template: "<div class=\"relative overflow-hidden image-wrapper flex flex-col items-center justify-center\" [ngStyle]=\"dimensionStyles() ? dimensionStyles() : {'opacity': '0'}\">\r\n  <mat-icon class=\"absolute top-4 right-4 hover:cursor-pointer text-mat-sys-on-error-container\" matDialogClose>close</mat-icon>\r\n  @if (!isHtml(data.image)) {\r\n    <img #imageElement [attr.src]=\"data.image\" alt=\"ImagePreview\"/>\r\n  } @else {\r\n    <div #svgElement class=\"p-4\" [innerHTML]=\"data.image\"></div>\r\n  }\r\n</div>\r\n", styles: [".image-wrapper{min-height:124px;min-width:124px}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$5.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ImagePreviewComponent, isStandalone: true, selector: "app-image-preview", viewQueries: [{ propertyName: "image", first: true, predicate: ["imageElement"], descendants: true }, { propertyName: "svgElement", first: true, predicate: ["svgElement"], descendants: true }], ngImport: i0, template: "<div class=\"relative overflow-hidden image-wrapper flex flex-col items-center justify-center\" [ngStyle]=\"dimensionStyles() ? dimensionStyles() : {'opacity': '0'}\">\n  <mat-icon class=\"absolute top-4 right-4 hover:cursor-pointer text-mat-sys-on-error-container\" matDialogClose>close</mat-icon>\n  @if (!isHtml(data.image)) {\n    <img #imageElement [attr.src]=\"data.image\" alt=\"ImagePreview\"/>\n  } @else {\n    <div #svgElement class=\"p-4\" [innerHTML]=\"data.image\"></div>\n  }\n</div>\n", styles: [".image-wrapper{min-height:124px;min-width:124px}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$5.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ImagePreviewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-image-preview', imports: [SharedModule], template: "<div class=\"relative overflow-hidden image-wrapper flex flex-col items-center justify-center\" [ngStyle]=\"dimensionStyles() ? dimensionStyles() : {'opacity': '0'}\">\r\n  <mat-icon class=\"absolute top-4 right-4 hover:cursor-pointer text-mat-sys-on-error-container\" matDialogClose>close</mat-icon>\r\n  @if (!isHtml(data.image)) {\r\n    <img #imageElement [attr.src]=\"data.image\" alt=\"ImagePreview\"/>\r\n  } @else {\r\n    <div #svgElement class=\"p-4\" [innerHTML]=\"data.image\"></div>\r\n  }\r\n</div>\r\n", styles: [".image-wrapper{min-height:124px;min-width:124px}\n"] }]
+            args: [{ selector: 'app-image-preview', imports: [SharedModule], template: "<div class=\"relative overflow-hidden image-wrapper flex flex-col items-center justify-center\" [ngStyle]=\"dimensionStyles() ? dimensionStyles() : {'opacity': '0'}\">\n  <mat-icon class=\"absolute top-4 right-4 hover:cursor-pointer text-mat-sys-on-error-container\" matDialogClose>close</mat-icon>\n  @if (!isHtml(data.image)) {\n    <img #imageElement [attr.src]=\"data.image\" alt=\"ImagePreview\"/>\n  } @else {\n    <div #svgElement class=\"p-4\" [innerHTML]=\"data.image\"></div>\n  }\n</div>\n", styles: [".image-wrapper{min-height:124px;min-width:124px}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -5266,21 +5266,21 @@ class ImageDisplayComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ImageDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ImageDisplayComponent, isStandalone: true, selector: "app-image-display", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (imageUrl(); as image) {\r\n  @if (isHtml(image)) {\r\n    <div (click)=\"openImage(image)\" [innerHTML]=\"image\" class=\"max-h-full h-full w-full object-contain block mt-1 hover:cursor-pointer\"></div>\r\n  } @else {\r\n    <img (click)=\"openImage(image)\" [attr.src]=\"image\" class=\"max-h-full h-full w-full object-contain block mt-1 hover:cursor-pointer\" alt=\"\"/>\r\n  }\r\n}\r\n", styles: [""] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ImageDisplayComponent, isStandalone: true, selector: "app-image-display", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (imageUrl(); as image) {\n  @if (isHtml(image)) {\n    <div (click)=\"openImage(image)\" [innerHTML]=\"image\" class=\"max-h-full h-full w-full object-contain block mt-1 hover:cursor-pointer\"></div>\n  } @else {\n    <img (click)=\"openImage(image)\" [attr.src]=\"image\" class=\"max-h-full h-full w-full object-contain block mt-1 hover:cursor-pointer\" alt=\"\"/>\n  }\n}\n", styles: [""] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ImageDisplayComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-image-display', imports: [], template: "@if (imageUrl(); as image) {\r\n  @if (isHtml(image)) {\r\n    <div (click)=\"openImage(image)\" [innerHTML]=\"image\" class=\"max-h-full h-full w-full object-contain block mt-1 hover:cursor-pointer\"></div>\r\n  } @else {\r\n    <img (click)=\"openImage(image)\" [attr.src]=\"image\" class=\"max-h-full h-full w-full object-contain block mt-1 hover:cursor-pointer\" alt=\"\"/>\r\n  }\r\n}\r\n" }]
+            args: [{ selector: 'app-image-display', imports: [], template: "@if (imageUrl(); as image) {\n  @if (isHtml(image)) {\n    <div (click)=\"openImage(image)\" [innerHTML]=\"image\" class=\"max-h-full h-full w-full object-contain block mt-1 hover:cursor-pointer\"></div>\n  } @else {\n    <img (click)=\"openImage(image)\" [attr.src]=\"image\" class=\"max-h-full h-full w-full object-contain block mt-1 hover:cursor-pointer\" alt=\"\"/>\n  }\n}\n" }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }] } });
 
 class LabeledValueComponent {
     name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LabeledValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: LabeledValueComponent, isStandalone: true, selector: "app-labeled-value", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-row gap-x-2 items-center\">\r\n  <div class=\"font-bold\">{{ name() | translate }}:</div>\r\n  <div class=\"flex flex-row items-center gap-x-2\">\r\n    <ng-content/>\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: LabeledValueComponent, isStandalone: true, selector: "app-labeled-value", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-row gap-x-2 items-center\">\n  <div class=\"font-bold\">{{ name() | translate }}:</div>\n  <div class=\"flex flex-row items-center gap-x-2\">\n    <ng-content/>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LabeledValueComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-labeled-value', imports: [TranslateModule], template: "<div class=\"flex flex-row gap-x-2 items-center\">\r\n  <div class=\"font-bold\">{{ name() | translate }}:</div>\r\n  <div class=\"flex flex-row items-center gap-x-2\">\r\n    <ng-content/>\r\n  </div>\r\n</div>\r\n" }]
+            args: [{ selector: 'app-labeled-value', imports: [TranslateModule], template: "<div class=\"flex flex-row gap-x-2 items-center\">\n  <div class=\"font-bold\">{{ name() | translate }}:</div>\n  <div class=\"flex flex-row items-center gap-x-2\">\n    <ng-content/>\n  </div>\n</div>\n" }]
         }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }] } });
 
 class LoadedIconComponent {
@@ -5314,11 +5314,11 @@ class LoadedIconComponent {
         this.sanitizer = sanitizer;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LoadedIconComponent, deps: [{ token: i1$6.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: LoadedIconComponent, isStandalone: true, selector: "app-loaded-icon", inputs: { iconRequest: { classPropertyName: "iconRequest", publicName: "iconRequest", isSignal: true, isRequired: true, transformFunction: null }, defaultIcon: { classPropertyName: "defaultIcon", publicName: "defaultIcon", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div [style.height.px]=\"size()\" [style.width.px]=\"size()\">\r\n  @if (icon() | async; as icon) {\r\n    <div [innerHTML]=\"icon\"></div>\r\n  } @else {\r\n    @if (isSvgIcon(); as icon) {\r\n      <mat-icon [svgIcon]=\"icon.id\"></mat-icon>\r\n    } @else {\r\n      <mat-icon>{{ defaultIcon() }}</mat-icon>\r\n    }\r\n  }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: LoadedIconComponent, isStandalone: true, selector: "app-loaded-icon", inputs: { iconRequest: { classPropertyName: "iconRequest", publicName: "iconRequest", isSignal: true, isRequired: true, transformFunction: null }, defaultIcon: { classPropertyName: "defaultIcon", publicName: "defaultIcon", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div [style.height.px]=\"size()\" [style.width.px]=\"size()\">\n  @if (icon() | async; as icon) {\n    <div [innerHTML]=\"icon\"></div>\n  } @else {\n    @if (isSvgIcon(); as icon) {\n      <mat-icon [svgIcon]=\"icon.id\"></mat-icon>\n    } @else {\n      <mat-icon>{{ defaultIcon() }}</mat-icon>\n    }\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LoadedIconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-loaded-icon', imports: [SharedModule], template: "<div [style.height.px]=\"size()\" [style.width.px]=\"size()\">\r\n  @if (icon() | async; as icon) {\r\n    <div [innerHTML]=\"icon\"></div>\r\n  } @else {\r\n    @if (isSvgIcon(); as icon) {\r\n      <mat-icon [svgIcon]=\"icon.id\"></mat-icon>\r\n    } @else {\r\n      <mat-icon>{{ defaultIcon() }}</mat-icon>\r\n    }\r\n  }\r\n</div>\r\n" }]
+            args: [{ selector: 'app-loaded-icon', imports: [SharedModule], template: "<div [style.height.px]=\"size()\" [style.width.px]=\"size()\">\n  @if (icon() | async; as icon) {\n    <div [innerHTML]=\"icon\"></div>\n  } @else {\n    @if (isSvgIcon(); as icon) {\n      <mat-icon [svgIcon]=\"icon.id\"></mat-icon>\n    } @else {\n      <mat-icon>{{ defaultIcon() }}</mat-icon>\n    }\n  }\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1$6.DomSanitizer }], propDecorators: { iconRequest: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconRequest", required: true }] }], defaultIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultIcon", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: true }] }] } });
 
 class IconComponent {
@@ -5332,13 +5332,13 @@ class IconComponent {
         return !!icon && typeof icon === 'object' && Object.hasOwn(icon, 'id') ? icon : null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: IconComponent, isStandalone: true, selector: "app-icon", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"shrink-0 h-6\">\r\n  @if (isAsyncIcon(); as loadedIcon) {\r\n    <app-loaded-icon [iconRequest]=\"loadedIcon.data\" [defaultIcon]=\"loadedIcon.defaultIcon\" [size]=\"24\"/>\r\n  }\r\n  @if (isSvgIcon(); as svgIcon) {\r\n    <mat-icon [svgIcon]=\"svgIcon.id\"></mat-icon>\r\n  }\r\n  @if (typeof icon() === 'string') {\r\n    <mat-icon>{{ icon() }}</mat-icon>\r\n  }\r\n  @if (typeof icon() === 'number') {\r\n    <span class=\"flex items-center justify-center shrink-0 min-w-5 h-5 px-1.5 rounded-full text-[11px] bg-mat-sys-primary text-mat-sys-on-primary\">{{ icon() }}</span>\r\n  }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: LoadedIconComponent, selector: "app-loaded-icon", inputs: ["iconRequest", "defaultIcon", "size"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: IconComponent, isStandalone: true, selector: "app-icon", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"shrink-0 h-6\">\n  @if (isAsyncIcon(); as loadedIcon) {\n    <app-loaded-icon [iconRequest]=\"loadedIcon.data\" [defaultIcon]=\"loadedIcon.defaultIcon\" [size]=\"24\"/>\n  }\n  @if (isSvgIcon(); as svgIcon) {\n    <mat-icon [svgIcon]=\"svgIcon.id\"></mat-icon>\n  }\n  @if (typeof icon() === 'string') {\n    <mat-icon>{{ icon() }}</mat-icon>\n  }\n  @if (typeof icon() === 'number') {\n    <span class=\"flex items-center justify-center shrink-0 min-w-5 h-5 px-1.5 rounded-full text-[11px] bg-mat-sys-primary text-mat-sys-on-primary\">{{ icon() }}</span>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: LoadedIconComponent, selector: "app-loaded-icon", inputs: ["iconRequest", "defaultIcon", "size"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: IconComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-icon', imports: [
                         SharedModule, LoadedIconComponent, MatIcon
-                    ], template: "<div class=\"shrink-0 h-6\">\r\n  @if (isAsyncIcon(); as loadedIcon) {\r\n    <app-loaded-icon [iconRequest]=\"loadedIcon.data\" [defaultIcon]=\"loadedIcon.defaultIcon\" [size]=\"24\"/>\r\n  }\r\n  @if (isSvgIcon(); as svgIcon) {\r\n    <mat-icon [svgIcon]=\"svgIcon.id\"></mat-icon>\r\n  }\r\n  @if (typeof icon() === 'string') {\r\n    <mat-icon>{{ icon() }}</mat-icon>\r\n  }\r\n  @if (typeof icon() === 'number') {\r\n    <span class=\"flex items-center justify-center shrink-0 min-w-5 h-5 px-1.5 rounded-full text-[11px] bg-mat-sys-primary text-mat-sys-on-primary\">{{ icon() }}</span>\r\n  }\r\n</div>\r\n" }]
+                    ], template: "<div class=\"shrink-0 h-6\">\n  @if (isAsyncIcon(); as loadedIcon) {\n    <app-loaded-icon [iconRequest]=\"loadedIcon.data\" [defaultIcon]=\"loadedIcon.defaultIcon\" [size]=\"24\"/>\n  }\n  @if (isSvgIcon(); as svgIcon) {\n    <mat-icon [svgIcon]=\"svgIcon.id\"></mat-icon>\n  }\n  @if (typeof icon() === 'string') {\n    <mat-icon>{{ icon() }}</mat-icon>\n  }\n  @if (typeof icon() === 'number') {\n    <span class=\"flex items-center justify-center shrink-0 min-w-5 h-5 px-1.5 rounded-full text-[11px] bg-mat-sys-primary text-mat-sys-on-primary\">{{ icon() }}</span>\n  }\n</div>\n" }]
         }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }] } });
 
 class LocalSortTableComponent {
@@ -5398,7 +5398,7 @@ class LocalSortTableComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LocalSortTableComponent, deps: [{ token: TenantPropertiesService }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: LocalSortTableComponent, isStandalone: true, selector: "app-local-sort-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, translationPrefix: { classPropertyName: "translationPrefix", publicName: "translationPrefix", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, noValuesMessage: { classPropertyName: "noValuesMessage", publicName: "noValuesMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelected: "itemSelected" }, ngImport: i0, template: "<table>\r\n  <thead>\r\n  <tr>\r\n    @for (column of columns(); track column.name) {\r\n      <th class=\"!font-medium truncate\" [ngClass]=\"{'sort-field': column.shouldSort, 'cursor-pointer': column.shouldSort}\" (click)=\"column.shouldSort ? sort(column.name) : undefined\">\r\n        <div class=\"flex flex-row items-center gap-x-2\">\r\n          {{ (translationPrefix().toUpperCase() +column.name.toUpperCase()) | translate }}\r\n          @if (column.shouldSort) {\r\n            <mat-icon>{{ sortDirection === 'asc' ? 'arrow_upward' : 'arrow_downward' }}</mat-icon>\r\n          }\r\n        </div>\r\n      </th>\r\n    }\r\n  </tr>\r\n  </thead>\r\n  <tbody>\r\n    @if (loading()) {\r\n      <div class=\"w-full h-full flex flex-col justify-center items-center\">\r\n        <mat-spinner diameter=\"30\"></mat-spinner>\r\n      </div>\r\n    } @else {\r\n      @if (displayData(); as displayData){\r\n        @if (!noValuesMessage()) {\r\n          @if (!sorting()) {\r\n            <cdk-virtual-scroll-viewport [itemSize]=\"56\" class=\"viewport\">\r\n              <tr *cdkVirtualFor=\"let element of displayData\" (click)=\"itemSelected.emit(element)\">\r\n                @for (column of columns(); track column.name) {\r\n                  <td class=\"cursor-pointer truncate\">\r\n              <span [matTooltip]=\"column.shouldTranslateValue ? ((translationPrefix() + element[column.name]) | translate) : element[column.name]\">\r\n                {{ column.shouldTranslateValue ? ((translationPrefix() + element[column.name]) | translate) : element[column.name] }}\r\n              </span>\r\n                }\r\n              </tr>\r\n            </cdk-virtual-scroll-viewport>\r\n          }\r\n        } @else {\r\n          <div class=\"w-full h-full flex flex-col justify-center items-center\">\r\n            <span>{{ noValuesMessage() | translate }}</span>\r\n          </div>\r\n        }\r\n      }\r\n    }\r\n  </tbody>\r\n</table>\r\n", styles: [":host{display:block;overflow:hidden;height:100%;width:100%}table{height:100%;width:100%;display:block}table thead{height:56px}table tbody{display:block;height:calc(100% - 56px);width:100%;overflow:hidden}table tbody tr:hover{background-color:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container)}table th,table td{padding-left:1rem;text-align:left;vertical-align:middle;border-bottom:1px solid var(--mat-sys-outline-variant)}tr{height:56px;display:table;table-layout:fixed;width:100%}.viewport{display:block;width:100%;height:100%;overflow:auto}.sort-field mat-icon{font-size:18px;line-height:18px;height:18px;width:18px;opacity:0;transition:all ease-in .2s}.sort-field:hover mat-icon{opacity:1}\n"], dependencies: [{ kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: LocalSortTableComponent, isStandalone: true, selector: "app-local-sort-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, translationPrefix: { classPropertyName: "translationPrefix", publicName: "translationPrefix", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, noValuesMessage: { classPropertyName: "noValuesMessage", publicName: "noValuesMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelected: "itemSelected" }, ngImport: i0, template: "<table>\n  <thead>\n  <tr>\n    @for (column of columns(); track column.name) {\n      <th class=\"!font-medium truncate\" [ngClass]=\"{'sort-field': column.shouldSort, 'cursor-pointer': column.shouldSort}\" (click)=\"column.shouldSort ? sort(column.name) : undefined\">\n        <div class=\"flex flex-row items-center gap-x-2\">\n          {{ (translationPrefix().toUpperCase() +column.name.toUpperCase()) | translate }}\n          @if (column.shouldSort) {\n            <mat-icon>{{ sortDirection === 'asc' ? 'arrow_upward' : 'arrow_downward' }}</mat-icon>\n          }\n        </div>\n      </th>\n    }\n  </tr>\n  </thead>\n  <tbody>\n    @if (loading()) {\n      <div class=\"w-full h-full flex flex-col justify-center items-center\">\n        <mat-spinner diameter=\"30\"></mat-spinner>\n      </div>\n    } @else {\n      @if (displayData(); as displayData){\n        @if (!noValuesMessage()) {\n          @if (!sorting()) {\n            <cdk-virtual-scroll-viewport [itemSize]=\"56\" class=\"viewport\">\n              <tr *cdkVirtualFor=\"let element of displayData\" (click)=\"itemSelected.emit(element)\">\n                @for (column of columns(); track column.name) {\n                  <td class=\"cursor-pointer truncate\">\n              <span [matTooltip]=\"column.shouldTranslateValue ? ((translationPrefix() + element[column.name]) | translate) : element[column.name]\">\n                {{ column.shouldTranslateValue ? ((translationPrefix() + element[column.name]) | translate) : element[column.name] }}\n              </span>\n                }\n              </tr>\n            </cdk-virtual-scroll-viewport>\n          }\n        } @else {\n          <div class=\"w-full h-full flex flex-col justify-center items-center\">\n            <span>{{ noValuesMessage() | translate }}</span>\n          </div>\n        }\n      }\n    }\n  </tbody>\n</table>\n", styles: [":host{display:block;overflow:hidden;height:100%;width:100%}table{height:100%;width:100%;display:block}table thead{height:56px}table tbody{display:block;height:calc(100% - 56px);width:100%;overflow:hidden}table tbody tr:hover{background-color:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container)}table th,table td{padding-left:1rem;text-align:left;vertical-align:middle;border-bottom:1px solid var(--mat-sys-outline-variant)}tr{height:56px;display:table;table-layout:fixed;width:100%}.viewport{display:block;width:100%;height:100%;overflow:auto}.sort-field mat-icon{font-size:18px;line-height:18px;height:18px;width:18px;opacity:0;transition:all ease-in .2s}.sort-field:hover mat-icon{opacity:1}\n"], dependencies: [{ kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LocalSortTableComponent, decorators: [{
             type: Component,
@@ -5408,7 +5408,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         CdkVirtualScrollViewport,
                         SharedModule,
                         TranslatePipe
-                    ], template: "<table>\r\n  <thead>\r\n  <tr>\r\n    @for (column of columns(); track column.name) {\r\n      <th class=\"!font-medium truncate\" [ngClass]=\"{'sort-field': column.shouldSort, 'cursor-pointer': column.shouldSort}\" (click)=\"column.shouldSort ? sort(column.name) : undefined\">\r\n        <div class=\"flex flex-row items-center gap-x-2\">\r\n          {{ (translationPrefix().toUpperCase() +column.name.toUpperCase()) | translate }}\r\n          @if (column.shouldSort) {\r\n            <mat-icon>{{ sortDirection === 'asc' ? 'arrow_upward' : 'arrow_downward' }}</mat-icon>\r\n          }\r\n        </div>\r\n      </th>\r\n    }\r\n  </tr>\r\n  </thead>\r\n  <tbody>\r\n    @if (loading()) {\r\n      <div class=\"w-full h-full flex flex-col justify-center items-center\">\r\n        <mat-spinner diameter=\"30\"></mat-spinner>\r\n      </div>\r\n    } @else {\r\n      @if (displayData(); as displayData){\r\n        @if (!noValuesMessage()) {\r\n          @if (!sorting()) {\r\n            <cdk-virtual-scroll-viewport [itemSize]=\"56\" class=\"viewport\">\r\n              <tr *cdkVirtualFor=\"let element of displayData\" (click)=\"itemSelected.emit(element)\">\r\n                @for (column of columns(); track column.name) {\r\n                  <td class=\"cursor-pointer truncate\">\r\n              <span [matTooltip]=\"column.shouldTranslateValue ? ((translationPrefix() + element[column.name]) | translate) : element[column.name]\">\r\n                {{ column.shouldTranslateValue ? ((translationPrefix() + element[column.name]) | translate) : element[column.name] }}\r\n              </span>\r\n                }\r\n              </tr>\r\n            </cdk-virtual-scroll-viewport>\r\n          }\r\n        } @else {\r\n          <div class=\"w-full h-full flex flex-col justify-center items-center\">\r\n            <span>{{ noValuesMessage() | translate }}</span>\r\n          </div>\r\n        }\r\n      }\r\n    }\r\n  </tbody>\r\n</table>\r\n", styles: [":host{display:block;overflow:hidden;height:100%;width:100%}table{height:100%;width:100%;display:block}table thead{height:56px}table tbody{display:block;height:calc(100% - 56px);width:100%;overflow:hidden}table tbody tr:hover{background-color:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container)}table th,table td{padding-left:1rem;text-align:left;vertical-align:middle;border-bottom:1px solid var(--mat-sys-outline-variant)}tr{height:56px;display:table;table-layout:fixed;width:100%}.viewport{display:block;width:100%;height:100%;overflow:auto}.sort-field mat-icon{font-size:18px;line-height:18px;height:18px;width:18px;opacity:0;transition:all ease-in .2s}.sort-field:hover mat-icon{opacity:1}\n"] }]
+                    ], template: "<table>\n  <thead>\n  <tr>\n    @for (column of columns(); track column.name) {\n      <th class=\"!font-medium truncate\" [ngClass]=\"{'sort-field': column.shouldSort, 'cursor-pointer': column.shouldSort}\" (click)=\"column.shouldSort ? sort(column.name) : undefined\">\n        <div class=\"flex flex-row items-center gap-x-2\">\n          {{ (translationPrefix().toUpperCase() +column.name.toUpperCase()) | translate }}\n          @if (column.shouldSort) {\n            <mat-icon>{{ sortDirection === 'asc' ? 'arrow_upward' : 'arrow_downward' }}</mat-icon>\n          }\n        </div>\n      </th>\n    }\n  </tr>\n  </thead>\n  <tbody>\n    @if (loading()) {\n      <div class=\"w-full h-full flex flex-col justify-center items-center\">\n        <mat-spinner diameter=\"30\"></mat-spinner>\n      </div>\n    } @else {\n      @if (displayData(); as displayData){\n        @if (!noValuesMessage()) {\n          @if (!sorting()) {\n            <cdk-virtual-scroll-viewport [itemSize]=\"56\" class=\"viewport\">\n              <tr *cdkVirtualFor=\"let element of displayData\" (click)=\"itemSelected.emit(element)\">\n                @for (column of columns(); track column.name) {\n                  <td class=\"cursor-pointer truncate\">\n              <span [matTooltip]=\"column.shouldTranslateValue ? ((translationPrefix() + element[column.name]) | translate) : element[column.name]\">\n                {{ column.shouldTranslateValue ? ((translationPrefix() + element[column.name]) | translate) : element[column.name] }}\n              </span>\n                }\n              </tr>\n            </cdk-virtual-scroll-viewport>\n          }\n        } @else {\n          <div class=\"w-full h-full flex flex-col justify-center items-center\">\n            <span>{{ noValuesMessage() | translate }}</span>\n          </div>\n        }\n      }\n    }\n  </tbody>\n</table>\n", styles: [":host{display:block;overflow:hidden;height:100%;width:100%}table{height:100%;width:100%;display:block}table thead{height:56px}table tbody{display:block;height:calc(100% - 56px);width:100%;overflow:hidden}table tbody tr:hover{background-color:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container)}table th,table td{padding-left:1rem;text-align:left;vertical-align:middle;border-bottom:1px solid var(--mat-sys-outline-variant)}tr{height:56px;display:table;table-layout:fixed;width:100%}.viewport{display:block;width:100%;height:100%;overflow:auto}.sort-field mat-icon{font-size:18px;line-height:18px;height:18px;width:18px;opacity:0;transition:all ease-in .2s}.sort-field:hover mat-icon{opacity:1}\n"] }]
         }], ctorParameters: () => [{ type: TenantPropertiesService }, { type: i1$1.TranslateService }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], translationPrefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "translationPrefix", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], noValuesMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noValuesMessage", required: false }] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }] } });
 
 class MasterDetailsViewComponent {
@@ -5430,11 +5430,11 @@ class MasterDetailsViewComponent {
         }
     }, ...(ngDevMode ? [{ debugName: "width" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MasterDetailsViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: MasterDetailsViewComponent, isStandalone: true, selector: "app-master-details-view", inputs: { displayRatio: { classPropertyName: "displayRatio", publicName: "displayRatio", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex h-full w-full min-w-full min-h-full pt-2 overflow-hidden bg-base-color-50\">\r\n  <div class=\"pr-4 flex shrink-0 grow-0\" [style.width]=\"width()\" [style.max-width]=\"width()\">\r\n    <ng-content select=\"[app-master]\"/>\r\n  </div>\r\n  <mat-divider [vertical]=\"true\"/>\r\n  <div class=\"pl-4 flex shrink grow overflow-hidden\">\r\n    <ng-content select=\"[app-details]\"/>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block;width:100%;height:100%;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i1$7.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: MasterDetailsViewComponent, isStandalone: true, selector: "app-master-details-view", inputs: { displayRatio: { classPropertyName: "displayRatio", publicName: "displayRatio", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex h-full w-full min-w-full min-h-full pt-2 overflow-hidden bg-base-color-50\">\n  <div class=\"pr-4 flex shrink-0 grow-0\" [style.width]=\"width()\" [style.max-width]=\"width()\">\n    <ng-content select=\"[app-master]\"/>\n  </div>\n  <mat-divider [vertical]=\"true\"/>\n  <div class=\"pl-4 flex shrink grow overflow-hidden\">\n    <ng-content select=\"[app-details]\"/>\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i1$7.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MasterDetailsViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-master-details-view', imports: [SharedModule], template: "<div class=\"flex h-full w-full min-w-full min-h-full pt-2 overflow-hidden bg-base-color-50\">\r\n  <div class=\"pr-4 flex shrink-0 grow-0\" [style.width]=\"width()\" [style.max-width]=\"width()\">\r\n    <ng-content select=\"[app-master]\"/>\r\n  </div>\r\n  <mat-divider [vertical]=\"true\"/>\r\n  <div class=\"pl-4 flex shrink grow overflow-hidden\">\r\n    <ng-content select=\"[app-details]\"/>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block;width:100%;height:100%;overflow:hidden}\n"] }]
+            args: [{ selector: 'app-master-details-view', imports: [SharedModule], template: "<div class=\"flex h-full w-full min-w-full min-h-full pt-2 overflow-hidden bg-base-color-50\">\n  <div class=\"pr-4 flex shrink-0 grow-0\" [style.width]=\"width()\" [style.max-width]=\"width()\">\n    <ng-content select=\"[app-master]\"/>\n  </div>\n  <mat-divider [vertical]=\"true\"/>\n  <div class=\"pl-4 flex shrink grow overflow-hidden\">\n    <ng-content select=\"[app-details]\"/>\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%;overflow:hidden}\n"] }]
         }], propDecorators: { displayRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayRatio", required: false }] }] } });
 
 class NestedListViewComponent {
@@ -5676,11 +5676,11 @@ class NestedListViewComponent {
         this.children.update(items => items.map(item => item.id === guid ? { ...item, rightNumber } : item));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NestedListViewComponent, deps: [{ token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: NestedListViewComponent, isStandalone: true, selector: "app-nested-list-view", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, dataControl: { classPropertyName: "dataControl", publicName: "dataControl", isSignal: true, isRequired: true, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, disableThresholdId: { classPropertyName: "disableThresholdId", publicName: "disableThresholdId", isSignal: true, isRequired: false, transformFunction: null }, isColoredInput: { classPropertyName: "isColoredInput", publicName: "isColoredInput", isSignal: true, isRequired: false, transformFunction: null }, searchActions: { classPropertyName: "searchActions", publicName: "searchActions", isSignal: true, isRequired: false, transformFunction: null }, selectionConfirmationAction: { classPropertyName: "selectionConfirmationAction", publicName: "selectionConfirmationAction", isSignal: true, isRequired: false, transformFunction: null }, hideSearch: { classPropertyName: "hideSearch", publicName: "hideSearch", isSignal: true, isRequired: false, transformFunction: null }, rootButtonText: { classPropertyName: "rootButtonText", publicName: "rootButtonText", isSignal: true, isRequired: false, transformFunction: null }, enableDrag: { classPropertyName: "enableDrag", publicName: "enableDrag", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dragging: "dragging", itemSelected: "itemSelected" }, ngImport: i0, template: "<div class=\"container flex h-full w-full min-w-full min-h-full relative overflow-hidden\">\r\n  <div [ngClass]=\"widthClass()\" class=\"master flex shrink-0 grow-0 min-w-0\">\r\n\r\n    <!-- LISTING -->\r\n    <div class=\"w-full h-full flex flex-col gap-y-2 relative\" [ngClass]=\"hideSearch() ? 'pt-2' : 'pt-1'\">\r\n\r\n      <!-- HEADER -->\r\n      <div class=\"flex w-full flex-row gap-x-2\">\r\n\r\n        <!-- SEARCH -->\r\n        @if (!hideSearch()) {\r\n          <div class=\"flex shrink grow flex-row pt-1 gap-x-2 overflow-hidden\">\r\n            <mat-form-field class=\"flex grow shrink small-input search-control\" (keydown.enter)=\"defaultSearchAction()?.action({parent: this.selectedItem()?.data, control: this.nameSearchControl})\" [ngClass]=\"{'colored-input': isColoredInput()}\">\r\n              <mat-label>{{ 'COMMON.SEARCH_IMMEDIATE_CHILDREN' | translate }}</mat-label>\r\n              <input matInput type=\"text\" [formControl]=\"nameSearchControl\">\r\n              <mat-icon matSuffix>search</mat-icon>\r\n            </mat-form-field>\r\n            @if (defaultSearchAction(); as defaultAction) {\r\n              <div [matTooltip]=\"defaultAction.disabledTooltip ? (defaultAction.disabledTooltip | translate) : ''\" [matTooltipDisabled]=\"defaultAction.disableCondition ? !defaultAction.disableCondition({control: nameSearchControl}) : true\">\r\n                <button mat-mini-fab [disabled]=\"defaultAction.disableCondition ? defaultAction.disableCondition({control: nameSearchControl}) : false\" (click)=\"defaultAction.action({parent: this.selectedItem()?.data, control: this.nameSearchControl})\" [matTooltip]=\"defaultAction.name | translate\">\r\n                  <mat-icon [svgIcon]=\"defaultAction.icon.id\"/>\r\n                </button>\r\n              </div>\r\n            }\r\n            @for (action of otherSearchActions(); track $index) {\r\n              @if (action.condition() | async) {\r\n                <div [matTooltip]=\"action.disabledTooltip ? (action.disabledTooltip | translate) : ''\" [matTooltipDisabled]=\"action.disableCondition ? !action.disableCondition() : true\">\r\n                  <button mat-mini-fab [disabled]=\"action.disableCondition ? action.disableCondition() : false\" (click)=\"action.action()\" [matTooltip]=\"action.name | translate\">\r\n                    <mat-icon [svgIcon]=\"action.icon.id\"/>\r\n                  </button>\r\n                </div>\r\n              }\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <!-- LIST -->\r\n      <div class=\"flex flex-col w-full h-full relative overflow-hidden\">\r\n\r\n        <!-- BREADCRUMBS -->\r\n        <div class=\"max-h-[50%] overflow-auto shrink-0\" [overflowClass]=\"'pr-4'\">\r\n          @if (!loadingBreadcrumbs()) {\r\n            @if (breadcrumbs(); as items) {\r\n              <div class=\"flex flex-col w-full overflow-x-hidden\">\r\n                @for (item of items; let i = $index; track i) {\r\n                  @if (selectedItem() && hasMultipleRoots() && i === 0) {\r\n                    <mat-card (click)=\"resetNavigation()\" class=\"mb-2 cursor-pointer regular-item hover:bg-hover-color\">\r\n                      <div class=\"px-3 flex flex-row items-center gap-x-2 item-card\">\r\n                        <div class=\"shrink-0 h-6\">\r\n                          <mat-icon>arrow_upward</mat-icon>\r\n                        </div>\r\n                        <span class=\"text-mat-sys-on-surface\">{{ rootButtonText() | translate: {default: rootButtonText()} }}</span>\r\n                      </div>\r\n                    </mat-card>\r\n                  }\r\n                  <mat-card class=\"mb-2 cursor-pointer\" (click)=\"selectBreadcrumb(item)\"\r\n                            [dndDraggable]=\"item.data\" [dndDisableDragIf]=\"!enableDrag() || !!shouldDisableBreadcrumbClick(item)\" (dndStart)=\"dragStart($event, item.data)\" (dndEnd)=\"isDragging.set(false)\"\r\n                            [ngClass]=\"[selectedItem()?.id === item.id ? 'selected-item' : 'regular-item hover:bg-hover-color', shouldDisableBreadcrumbClick(item) ? 'bg-disabled-color opacity-50 hover:cursor-auto pointer-events-none disabled' : '']\"\r\n                            [appScrollIntoView]=\"selectedItem()?.id === item.id\" [matTooltip]=\"item.name\" matTooltipPosition=\"right\">\r\n                    <div class=\"px-3 flex flex-row items-center justify-between gap-x-2 item-card\">\r\n                      <div class=\"flex flex-row grow items-center gap-x-2 overflow-hidden\">\r\n                        @if (item.icon; as icon) {\r\n                          <app-icon [icon]=\"icon\"/>\r\n                        }\r\n                        <span [ngClass]=\"[selectedItem()?.id === item.id ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface']\" class=\"truncate\">{{ item.name }}</span>\r\n                      </div>\r\n                      @if (item.rightNumber && item.rightNumber > 0) {\r\n                        <span class=\"flex items-center justify-center shrink-0 min-w-5 h-5 px-1.5 rounded-full text-[11px] font-semibold\" [ngClass]=\"selectedItem()?.id === item.id ? 'bg-transparent text-mat-sys-surface-container' : 'bg-mat-sys-primary text-mat-sys-on-primary'\">{{ item.rightNumber }}</span>\r\n                      } @else if (enableDrag() && !shouldDisableBreadcrumbClick(item)) {\r\n                        <mat-icon>drag_indicator</mat-icon>\r\n                      }\r\n                    </div>\r\n                  </mat-card>\r\n                }\r\n              </div>\r\n            }\r\n          }\r\n        </div>\r\n\r\n        <mat-divider class=\"w-full pb-2\"/>\r\n\r\n        <!-- CHILDREN -->\r\n        @if (selectedItem()) {\r\n          <div class=\"flex-1 overflow-auto min-h-0\" [overflowClass]=\"'pr-4'\">\r\n            @if (!loadingChildren()) {\r\n              @if (filteredChildren(); as items) {\r\n                @if (items.length) {\r\n                  <div class=\"flex flex-col w-full overflow-y-auto overflow-x-hidden\">\r\n                    @for (item of items; track $index) {\r\n                      <mat-card class=\"mb-2 cursor-pointer regular-item hover:bg-hover-color\" (click)=\"selectChild(item)\" [matTooltip]=\"item.name\" matTooltipPosition=\"right\"\r\n                                [dndDraggable]=\"item.data\" [dndDisableDragIf]=\"!enableDrag()\" (dndStart)=\"dragStart($event, item.data)\" (dndEnd)=\"isDragging.set(false)\">\r\n                        <div class=\"px-3 flex flex-row items-center justify-between gap-x-2 item-card\">\r\n                          <div class=\"flex flex-row grow items-center gap-x-2 overflow-hidden\">\r\n                            @if (item.icon; as icon) {\r\n                              <app-icon [icon]=\"icon\"/>\r\n                            }\r\n                            <span [ngClass]=\"selectedItem()?.id === item.id ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface'\" class=\"truncate\">{{ item.name }}</span>\r\n                          </div>\r\n                          @if (item.rightNumber && item.rightNumber > 0) {\r\n                            <span class=\"flex items-center justify-center shrink-0 min-w-5 h-5 px-1.5 rounded-full text-[11px] font-semibold\" [ngClass]=\"selectedItem()?.id === item.id ? 'bg-transparent text-mat-sys-surface-container' : 'bg-mat-sys-primary text-mat-sys-on-primary'\">{{ item.rightNumber }}</span>\r\n                          } @else if (enableDrag()) {\r\n                            <mat-icon>drag_indicator</mat-icon>\r\n                          }\r\n                        </div>\r\n                      </mat-card>\r\n                    }\r\n                  </div>\r\n                } @else {\r\n                  <div class=\"flex flex-col grow justify-center items-center\">\r\n                    <ng-content select=\"[app-no-items-message]\"/>\r\n                  </div>\r\n                }\r\n              }\r\n            } @else {\r\n              <div class=\"flex flex-col grow justify-center items-center\">\r\n                <mat-spinner diameter=\"30\"></mat-spinner>\r\n              </div>\r\n            }\r\n          </div>\r\n        }\r\n\r\n        <!-- ACTIONS (bottom right of the listing) -->\r\n        <div class=\"absolute bottom-0 right-0 z-10\">\r\n          <ng-content select=\"[app-actions]\"/>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  @if (width() !== 'full') {\r\n    <mat-divider [vertical]=\"true\" class=\"relative top-2\"/>\r\n\r\n    <!-- DETAILS -->\r\n    <div class=\"details flex shrink grow overflow-hidden pt-2\">\r\n      <ng-content select=\"[app-details]\"/>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;height:100%;width:100%;overflow:hidden}mat-card,.item-card{height:40px!important}.container{background-color:var(--base-color-50)}.container .master{padding-right:16px}.container .details{padding-left:16px}.selected-item{background:var(--mat-sys-primary);fill:var(--mat-sys-on-primary);color:var(--mat-sys-on-primary)}.regular-item{fill:var(--mat-sys-primary);color:var(--mat-sys-primary)}.regular-item.disabled{color:unset}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i1$4.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i1$7.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: ScrollIntoViewDirective, selector: "[appScrollIntoView]", inputs: ["appScrollIntoView"] }, { kind: "directive", type: OverflowClassDirective, selector: "[overflowClass]", inputs: ["overflowClass"] }, { kind: "directive", type: DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["icon"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: NestedListViewComponent, isStandalone: true, selector: "app-nested-list-view", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, dataControl: { classPropertyName: "dataControl", publicName: "dataControl", isSignal: true, isRequired: true, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, disableThresholdId: { classPropertyName: "disableThresholdId", publicName: "disableThresholdId", isSignal: true, isRequired: false, transformFunction: null }, isColoredInput: { classPropertyName: "isColoredInput", publicName: "isColoredInput", isSignal: true, isRequired: false, transformFunction: null }, searchActions: { classPropertyName: "searchActions", publicName: "searchActions", isSignal: true, isRequired: false, transformFunction: null }, selectionConfirmationAction: { classPropertyName: "selectionConfirmationAction", publicName: "selectionConfirmationAction", isSignal: true, isRequired: false, transformFunction: null }, hideSearch: { classPropertyName: "hideSearch", publicName: "hideSearch", isSignal: true, isRequired: false, transformFunction: null }, rootButtonText: { classPropertyName: "rootButtonText", publicName: "rootButtonText", isSignal: true, isRequired: false, transformFunction: null }, enableDrag: { classPropertyName: "enableDrag", publicName: "enableDrag", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dragging: "dragging", itemSelected: "itemSelected" }, ngImport: i0, template: "<div class=\"container flex h-full w-full min-w-full min-h-full relative overflow-hidden\">\n  <div [ngClass]=\"widthClass()\" class=\"master flex shrink-0 grow-0 min-w-0\">\n\n    <!-- LISTING -->\n    <div class=\"w-full h-full flex flex-col gap-y-2 relative\" [ngClass]=\"hideSearch() ? 'pt-2' : 'pt-1'\">\n\n      <!-- HEADER -->\n      <div class=\"flex w-full flex-row gap-x-2\">\n\n        <!-- SEARCH -->\n        @if (!hideSearch()) {\n          <div class=\"flex shrink grow flex-row pt-1 gap-x-2 overflow-hidden\">\n            <mat-form-field class=\"flex grow shrink small-input search-control\" (keydown.enter)=\"defaultSearchAction()?.action({parent: this.selectedItem()?.data, control: this.nameSearchControl})\" [ngClass]=\"{'colored-input': isColoredInput()}\">\n              <mat-label>{{ 'COMMON.SEARCH_IMMEDIATE_CHILDREN' | translate }}</mat-label>\n              <input matInput type=\"text\" [formControl]=\"nameSearchControl\">\n              <mat-icon matSuffix>search</mat-icon>\n            </mat-form-field>\n            @if (defaultSearchAction(); as defaultAction) {\n              <div [matTooltip]=\"defaultAction.disabledTooltip ? (defaultAction.disabledTooltip | translate) : ''\" [matTooltipDisabled]=\"defaultAction.disableCondition ? !defaultAction.disableCondition({control: nameSearchControl}) : true\">\n                <button mat-mini-fab [disabled]=\"defaultAction.disableCondition ? defaultAction.disableCondition({control: nameSearchControl}) : false\" (click)=\"defaultAction.action({parent: this.selectedItem()?.data, control: this.nameSearchControl})\" [matTooltip]=\"defaultAction.name | translate\">\n                  <mat-icon [svgIcon]=\"defaultAction.icon.id\"/>\n                </button>\n              </div>\n            }\n            @for (action of otherSearchActions(); track $index) {\n              @if (action.condition() | async) {\n                <div [matTooltip]=\"action.disabledTooltip ? (action.disabledTooltip | translate) : ''\" [matTooltipDisabled]=\"action.disableCondition ? !action.disableCondition() : true\">\n                  <button mat-mini-fab [disabled]=\"action.disableCondition ? action.disableCondition() : false\" (click)=\"action.action()\" [matTooltip]=\"action.name | translate\">\n                    <mat-icon [svgIcon]=\"action.icon.id\"/>\n                  </button>\n                </div>\n              }\n            }\n          </div>\n        }\n      </div>\n\n      <!-- LIST -->\n      <div class=\"flex flex-col w-full h-full relative overflow-hidden\">\n\n        <!-- BREADCRUMBS -->\n        <div class=\"max-h-[50%] overflow-auto shrink-0\" [overflowClass]=\"'pr-4'\">\n          @if (!loadingBreadcrumbs()) {\n            @if (breadcrumbs(); as items) {\n              <div class=\"flex flex-col w-full overflow-x-hidden\">\n                @for (item of items; let i = $index; track i) {\n                  @if (selectedItem() && hasMultipleRoots() && i === 0) {\n                    <mat-card (click)=\"resetNavigation()\" class=\"mb-2 cursor-pointer regular-item hover:bg-hover-color\">\n                      <div class=\"px-3 flex flex-row items-center gap-x-2 item-card\">\n                        <div class=\"shrink-0 h-6\">\n                          <mat-icon>arrow_upward</mat-icon>\n                        </div>\n                        <span class=\"text-mat-sys-on-surface\">{{ rootButtonText() | translate: {default: rootButtonText()} }}</span>\n                      </div>\n                    </mat-card>\n                  }\n                  <mat-card class=\"mb-2 cursor-pointer\" (click)=\"selectBreadcrumb(item)\"\n                            [dndDraggable]=\"item.data\" [dndDisableDragIf]=\"!enableDrag() || !!shouldDisableBreadcrumbClick(item)\" (dndStart)=\"dragStart($event, item.data)\" (dndEnd)=\"isDragging.set(false)\"\n                            [ngClass]=\"[selectedItem()?.id === item.id ? 'selected-item' : 'regular-item hover:bg-hover-color', shouldDisableBreadcrumbClick(item) ? 'bg-disabled-color opacity-50 hover:cursor-auto pointer-events-none disabled' : '']\"\n                            [appScrollIntoView]=\"selectedItem()?.id === item.id\" [matTooltip]=\"item.name\" matTooltipPosition=\"right\">\n                    <div class=\"px-3 flex flex-row items-center justify-between gap-x-2 item-card\">\n                      <div class=\"flex flex-row grow items-center gap-x-2 overflow-hidden\">\n                        @if (item.icon; as icon) {\n                          <app-icon [icon]=\"icon\"/>\n                        }\n                        <span [ngClass]=\"[selectedItem()?.id === item.id ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface']\" class=\"truncate\">{{ item.name }}</span>\n                      </div>\n                      @if (item.rightNumber && item.rightNumber > 0) {\n                        <span class=\"flex items-center justify-center shrink-0 min-w-5 h-5 px-1.5 rounded-full text-[11px] font-semibold\" [ngClass]=\"selectedItem()?.id === item.id ? 'bg-transparent text-mat-sys-surface-container' : 'bg-mat-sys-primary text-mat-sys-on-primary'\">{{ item.rightNumber }}</span>\n                      } @else if (enableDrag() && !shouldDisableBreadcrumbClick(item)) {\n                        <mat-icon>drag_indicator</mat-icon>\n                      }\n                    </div>\n                  </mat-card>\n                }\n              </div>\n            }\n          }\n        </div>\n\n        <mat-divider class=\"w-full pb-2\"/>\n\n        <!-- CHILDREN -->\n        @if (selectedItem()) {\n          <div class=\"flex-1 overflow-auto min-h-0\" [overflowClass]=\"'pr-4'\">\n            @if (!loadingChildren()) {\n              @if (filteredChildren(); as items) {\n                @if (items.length) {\n                  <div class=\"flex flex-col w-full overflow-y-auto overflow-x-hidden\">\n                    @for (item of items; track $index) {\n                      <mat-card class=\"mb-2 cursor-pointer regular-item hover:bg-hover-color\" (click)=\"selectChild(item)\" [matTooltip]=\"item.name\" matTooltipPosition=\"right\"\n                                [dndDraggable]=\"item.data\" [dndDisableDragIf]=\"!enableDrag()\" (dndStart)=\"dragStart($event, item.data)\" (dndEnd)=\"isDragging.set(false)\">\n                        <div class=\"px-3 flex flex-row items-center justify-between gap-x-2 item-card\">\n                          <div class=\"flex flex-row grow items-center gap-x-2 overflow-hidden\">\n                            @if (item.icon; as icon) {\n                              <app-icon [icon]=\"icon\"/>\n                            }\n                            <span [ngClass]=\"selectedItem()?.id === item.id ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface'\" class=\"truncate\">{{ item.name }}</span>\n                          </div>\n                          @if (item.rightNumber && item.rightNumber > 0) {\n                            <span class=\"flex items-center justify-center shrink-0 min-w-5 h-5 px-1.5 rounded-full text-[11px] font-semibold\" [ngClass]=\"selectedItem()?.id === item.id ? 'bg-transparent text-mat-sys-surface-container' : 'bg-mat-sys-primary text-mat-sys-on-primary'\">{{ item.rightNumber }}</span>\n                          } @else if (enableDrag()) {\n                            <mat-icon>drag_indicator</mat-icon>\n                          }\n                        </div>\n                      </mat-card>\n                    }\n                  </div>\n                } @else {\n                  <div class=\"flex flex-col grow justify-center items-center\">\n                    <ng-content select=\"[app-no-items-message]\"/>\n                  </div>\n                }\n              }\n            } @else {\n              <div class=\"flex flex-col grow justify-center items-center\">\n                <mat-spinner diameter=\"30\"></mat-spinner>\n              </div>\n            }\n          </div>\n        }\n\n        <!-- ACTIONS (bottom right of the listing) -->\n        <div class=\"absolute bottom-0 right-0 z-10\">\n          <ng-content select=\"[app-actions]\"/>\n        </div>\n      </div>\n    </div>\n\n  </div>\n\n  @if (width() !== 'full') {\n    <mat-divider [vertical]=\"true\" class=\"relative top-2\"/>\n\n    <!-- DETAILS -->\n    <div class=\"details flex shrink grow overflow-hidden pt-2\">\n      <ng-content select=\"[app-details]\"/>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;height:100%;width:100%;overflow:hidden}mat-card,.item-card{height:40px!important}.container{background-color:var(--base-color-50)}.container .master{padding-right:16px}.container .details{padding-left:16px}.selected-item{background:var(--mat-sys-primary);fill:var(--mat-sys-on-primary);color:var(--mat-sys-on-primary)}.regular-item{fill:var(--mat-sys-primary);color:var(--mat-sys-primary)}.regular-item.disabled{color:unset}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i1$4.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i1$7.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: ScrollIntoViewDirective, selector: "[appScrollIntoView]", inputs: ["appScrollIntoView"] }, { kind: "directive", type: OverflowClassDirective, selector: "[overflowClass]", inputs: ["overflowClass"] }, { kind: "directive", type: DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["icon"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NestedListViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-nested-list-view', imports: [SharedModule, ScrollIntoViewDirective, OverflowClassDirective, DndDraggableDirective, IconComponent], template: "<div class=\"container flex h-full w-full min-w-full min-h-full relative overflow-hidden\">\r\n  <div [ngClass]=\"widthClass()\" class=\"master flex shrink-0 grow-0 min-w-0\">\r\n\r\n    <!-- LISTING -->\r\n    <div class=\"w-full h-full flex flex-col gap-y-2 relative\" [ngClass]=\"hideSearch() ? 'pt-2' : 'pt-1'\">\r\n\r\n      <!-- HEADER -->\r\n      <div class=\"flex w-full flex-row gap-x-2\">\r\n\r\n        <!-- SEARCH -->\r\n        @if (!hideSearch()) {\r\n          <div class=\"flex shrink grow flex-row pt-1 gap-x-2 overflow-hidden\">\r\n            <mat-form-field class=\"flex grow shrink small-input search-control\" (keydown.enter)=\"defaultSearchAction()?.action({parent: this.selectedItem()?.data, control: this.nameSearchControl})\" [ngClass]=\"{'colored-input': isColoredInput()}\">\r\n              <mat-label>{{ 'COMMON.SEARCH_IMMEDIATE_CHILDREN' | translate }}</mat-label>\r\n              <input matInput type=\"text\" [formControl]=\"nameSearchControl\">\r\n              <mat-icon matSuffix>search</mat-icon>\r\n            </mat-form-field>\r\n            @if (defaultSearchAction(); as defaultAction) {\r\n              <div [matTooltip]=\"defaultAction.disabledTooltip ? (defaultAction.disabledTooltip | translate) : ''\" [matTooltipDisabled]=\"defaultAction.disableCondition ? !defaultAction.disableCondition({control: nameSearchControl}) : true\">\r\n                <button mat-mini-fab [disabled]=\"defaultAction.disableCondition ? defaultAction.disableCondition({control: nameSearchControl}) : false\" (click)=\"defaultAction.action({parent: this.selectedItem()?.data, control: this.nameSearchControl})\" [matTooltip]=\"defaultAction.name | translate\">\r\n                  <mat-icon [svgIcon]=\"defaultAction.icon.id\"/>\r\n                </button>\r\n              </div>\r\n            }\r\n            @for (action of otherSearchActions(); track $index) {\r\n              @if (action.condition() | async) {\r\n                <div [matTooltip]=\"action.disabledTooltip ? (action.disabledTooltip | translate) : ''\" [matTooltipDisabled]=\"action.disableCondition ? !action.disableCondition() : true\">\r\n                  <button mat-mini-fab [disabled]=\"action.disableCondition ? action.disableCondition() : false\" (click)=\"action.action()\" [matTooltip]=\"action.name | translate\">\r\n                    <mat-icon [svgIcon]=\"action.icon.id\"/>\r\n                  </button>\r\n                </div>\r\n              }\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <!-- LIST -->\r\n      <div class=\"flex flex-col w-full h-full relative overflow-hidden\">\r\n\r\n        <!-- BREADCRUMBS -->\r\n        <div class=\"max-h-[50%] overflow-auto shrink-0\" [overflowClass]=\"'pr-4'\">\r\n          @if (!loadingBreadcrumbs()) {\r\n            @if (breadcrumbs(); as items) {\r\n              <div class=\"flex flex-col w-full overflow-x-hidden\">\r\n                @for (item of items; let i = $index; track i) {\r\n                  @if (selectedItem() && hasMultipleRoots() && i === 0) {\r\n                    <mat-card (click)=\"resetNavigation()\" class=\"mb-2 cursor-pointer regular-item hover:bg-hover-color\">\r\n                      <div class=\"px-3 flex flex-row items-center gap-x-2 item-card\">\r\n                        <div class=\"shrink-0 h-6\">\r\n                          <mat-icon>arrow_upward</mat-icon>\r\n                        </div>\r\n                        <span class=\"text-mat-sys-on-surface\">{{ rootButtonText() | translate: {default: rootButtonText()} }}</span>\r\n                      </div>\r\n                    </mat-card>\r\n                  }\r\n                  <mat-card class=\"mb-2 cursor-pointer\" (click)=\"selectBreadcrumb(item)\"\r\n                            [dndDraggable]=\"item.data\" [dndDisableDragIf]=\"!enableDrag() || !!shouldDisableBreadcrumbClick(item)\" (dndStart)=\"dragStart($event, item.data)\" (dndEnd)=\"isDragging.set(false)\"\r\n                            [ngClass]=\"[selectedItem()?.id === item.id ? 'selected-item' : 'regular-item hover:bg-hover-color', shouldDisableBreadcrumbClick(item) ? 'bg-disabled-color opacity-50 hover:cursor-auto pointer-events-none disabled' : '']\"\r\n                            [appScrollIntoView]=\"selectedItem()?.id === item.id\" [matTooltip]=\"item.name\" matTooltipPosition=\"right\">\r\n                    <div class=\"px-3 flex flex-row items-center justify-between gap-x-2 item-card\">\r\n                      <div class=\"flex flex-row grow items-center gap-x-2 overflow-hidden\">\r\n                        @if (item.icon; as icon) {\r\n                          <app-icon [icon]=\"icon\"/>\r\n                        }\r\n                        <span [ngClass]=\"[selectedItem()?.id === item.id ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface']\" class=\"truncate\">{{ item.name }}</span>\r\n                      </div>\r\n                      @if (item.rightNumber && item.rightNumber > 0) {\r\n                        <span class=\"flex items-center justify-center shrink-0 min-w-5 h-5 px-1.5 rounded-full text-[11px] font-semibold\" [ngClass]=\"selectedItem()?.id === item.id ? 'bg-transparent text-mat-sys-surface-container' : 'bg-mat-sys-primary text-mat-sys-on-primary'\">{{ item.rightNumber }}</span>\r\n                      } @else if (enableDrag() && !shouldDisableBreadcrumbClick(item)) {\r\n                        <mat-icon>drag_indicator</mat-icon>\r\n                      }\r\n                    </div>\r\n                  </mat-card>\r\n                }\r\n              </div>\r\n            }\r\n          }\r\n        </div>\r\n\r\n        <mat-divider class=\"w-full pb-2\"/>\r\n\r\n        <!-- CHILDREN -->\r\n        @if (selectedItem()) {\r\n          <div class=\"flex-1 overflow-auto min-h-0\" [overflowClass]=\"'pr-4'\">\r\n            @if (!loadingChildren()) {\r\n              @if (filteredChildren(); as items) {\r\n                @if (items.length) {\r\n                  <div class=\"flex flex-col w-full overflow-y-auto overflow-x-hidden\">\r\n                    @for (item of items; track $index) {\r\n                      <mat-card class=\"mb-2 cursor-pointer regular-item hover:bg-hover-color\" (click)=\"selectChild(item)\" [matTooltip]=\"item.name\" matTooltipPosition=\"right\"\r\n                                [dndDraggable]=\"item.data\" [dndDisableDragIf]=\"!enableDrag()\" (dndStart)=\"dragStart($event, item.data)\" (dndEnd)=\"isDragging.set(false)\">\r\n                        <div class=\"px-3 flex flex-row items-center justify-between gap-x-2 item-card\">\r\n                          <div class=\"flex flex-row grow items-center gap-x-2 overflow-hidden\">\r\n                            @if (item.icon; as icon) {\r\n                              <app-icon [icon]=\"icon\"/>\r\n                            }\r\n                            <span [ngClass]=\"selectedItem()?.id === item.id ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface'\" class=\"truncate\">{{ item.name }}</span>\r\n                          </div>\r\n                          @if (item.rightNumber && item.rightNumber > 0) {\r\n                            <span class=\"flex items-center justify-center shrink-0 min-w-5 h-5 px-1.5 rounded-full text-[11px] font-semibold\" [ngClass]=\"selectedItem()?.id === item.id ? 'bg-transparent text-mat-sys-surface-container' : 'bg-mat-sys-primary text-mat-sys-on-primary'\">{{ item.rightNumber }}</span>\r\n                          } @else if (enableDrag()) {\r\n                            <mat-icon>drag_indicator</mat-icon>\r\n                          }\r\n                        </div>\r\n                      </mat-card>\r\n                    }\r\n                  </div>\r\n                } @else {\r\n                  <div class=\"flex flex-col grow justify-center items-center\">\r\n                    <ng-content select=\"[app-no-items-message]\"/>\r\n                  </div>\r\n                }\r\n              }\r\n            } @else {\r\n              <div class=\"flex flex-col grow justify-center items-center\">\r\n                <mat-spinner diameter=\"30\"></mat-spinner>\r\n              </div>\r\n            }\r\n          </div>\r\n        }\r\n\r\n        <!-- ACTIONS (bottom right of the listing) -->\r\n        <div class=\"absolute bottom-0 right-0 z-10\">\r\n          <ng-content select=\"[app-actions]\"/>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  @if (width() !== 'full') {\r\n    <mat-divider [vertical]=\"true\" class=\"relative top-2\"/>\r\n\r\n    <!-- DETAILS -->\r\n    <div class=\"details flex shrink grow overflow-hidden pt-2\">\r\n      <ng-content select=\"[app-details]\"/>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;height:100%;width:100%;overflow:hidden}mat-card,.item-card{height:40px!important}.container{background-color:var(--base-color-50)}.container .master{padding-right:16px}.container .details{padding-left:16px}.selected-item{background:var(--mat-sys-primary);fill:var(--mat-sys-on-primary);color:var(--mat-sys-on-primary)}.regular-item{fill:var(--mat-sys-primary);color:var(--mat-sys-primary)}.regular-item.disabled{color:unset}\n"] }]
+            args: [{ selector: 'app-nested-list-view', imports: [SharedModule, ScrollIntoViewDirective, OverflowClassDirective, DndDraggableDirective, IconComponent], template: "<div class=\"container flex h-full w-full min-w-full min-h-full relative overflow-hidden\">\n  <div [ngClass]=\"widthClass()\" class=\"master flex shrink-0 grow-0 min-w-0\">\n\n    <!-- LISTING -->\n    <div class=\"w-full h-full flex flex-col gap-y-2 relative\" [ngClass]=\"hideSearch() ? 'pt-2' : 'pt-1'\">\n\n      <!-- HEADER -->\n      <div class=\"flex w-full flex-row gap-x-2\">\n\n        <!-- SEARCH -->\n        @if (!hideSearch()) {\n          <div class=\"flex shrink grow flex-row pt-1 gap-x-2 overflow-hidden\">\n            <mat-form-field class=\"flex grow shrink small-input search-control\" (keydown.enter)=\"defaultSearchAction()?.action({parent: this.selectedItem()?.data, control: this.nameSearchControl})\" [ngClass]=\"{'colored-input': isColoredInput()}\">\n              <mat-label>{{ 'COMMON.SEARCH_IMMEDIATE_CHILDREN' | translate }}</mat-label>\n              <input matInput type=\"text\" [formControl]=\"nameSearchControl\">\n              <mat-icon matSuffix>search</mat-icon>\n            </mat-form-field>\n            @if (defaultSearchAction(); as defaultAction) {\n              <div [matTooltip]=\"defaultAction.disabledTooltip ? (defaultAction.disabledTooltip | translate) : ''\" [matTooltipDisabled]=\"defaultAction.disableCondition ? !defaultAction.disableCondition({control: nameSearchControl}) : true\">\n                <button mat-mini-fab [disabled]=\"defaultAction.disableCondition ? defaultAction.disableCondition({control: nameSearchControl}) : false\" (click)=\"defaultAction.action({parent: this.selectedItem()?.data, control: this.nameSearchControl})\" [matTooltip]=\"defaultAction.name | translate\">\n                  <mat-icon [svgIcon]=\"defaultAction.icon.id\"/>\n                </button>\n              </div>\n            }\n            @for (action of otherSearchActions(); track $index) {\n              @if (action.condition() | async) {\n                <div [matTooltip]=\"action.disabledTooltip ? (action.disabledTooltip | translate) : ''\" [matTooltipDisabled]=\"action.disableCondition ? !action.disableCondition() : true\">\n                  <button mat-mini-fab [disabled]=\"action.disableCondition ? action.disableCondition() : false\" (click)=\"action.action()\" [matTooltip]=\"action.name | translate\">\n                    <mat-icon [svgIcon]=\"action.icon.id\"/>\n                  </button>\n                </div>\n              }\n            }\n          </div>\n        }\n      </div>\n\n      <!-- LIST -->\n      <div class=\"flex flex-col w-full h-full relative overflow-hidden\">\n\n        <!-- BREADCRUMBS -->\n        <div class=\"max-h-[50%] overflow-auto shrink-0\" [overflowClass]=\"'pr-4'\">\n          @if (!loadingBreadcrumbs()) {\n            @if (breadcrumbs(); as items) {\n              <div class=\"flex flex-col w-full overflow-x-hidden\">\n                @for (item of items; let i = $index; track i) {\n                  @if (selectedItem() && hasMultipleRoots() && i === 0) {\n                    <mat-card (click)=\"resetNavigation()\" class=\"mb-2 cursor-pointer regular-item hover:bg-hover-color\">\n                      <div class=\"px-3 flex flex-row items-center gap-x-2 item-card\">\n                        <div class=\"shrink-0 h-6\">\n                          <mat-icon>arrow_upward</mat-icon>\n                        </div>\n                        <span class=\"text-mat-sys-on-surface\">{{ rootButtonText() | translate: {default: rootButtonText()} }}</span>\n                      </div>\n                    </mat-card>\n                  }\n                  <mat-card class=\"mb-2 cursor-pointer\" (click)=\"selectBreadcrumb(item)\"\n                            [dndDraggable]=\"item.data\" [dndDisableDragIf]=\"!enableDrag() || !!shouldDisableBreadcrumbClick(item)\" (dndStart)=\"dragStart($event, item.data)\" (dndEnd)=\"isDragging.set(false)\"\n                            [ngClass]=\"[selectedItem()?.id === item.id ? 'selected-item' : 'regular-item hover:bg-hover-color', shouldDisableBreadcrumbClick(item) ? 'bg-disabled-color opacity-50 hover:cursor-auto pointer-events-none disabled' : '']\"\n                            [appScrollIntoView]=\"selectedItem()?.id === item.id\" [matTooltip]=\"item.name\" matTooltipPosition=\"right\">\n                    <div class=\"px-3 flex flex-row items-center justify-between gap-x-2 item-card\">\n                      <div class=\"flex flex-row grow items-center gap-x-2 overflow-hidden\">\n                        @if (item.icon; as icon) {\n                          <app-icon [icon]=\"icon\"/>\n                        }\n                        <span [ngClass]=\"[selectedItem()?.id === item.id ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface']\" class=\"truncate\">{{ item.name }}</span>\n                      </div>\n                      @if (item.rightNumber && item.rightNumber > 0) {\n                        <span class=\"flex items-center justify-center shrink-0 min-w-5 h-5 px-1.5 rounded-full text-[11px] font-semibold\" [ngClass]=\"selectedItem()?.id === item.id ? 'bg-transparent text-mat-sys-surface-container' : 'bg-mat-sys-primary text-mat-sys-on-primary'\">{{ item.rightNumber }}</span>\n                      } @else if (enableDrag() && !shouldDisableBreadcrumbClick(item)) {\n                        <mat-icon>drag_indicator</mat-icon>\n                      }\n                    </div>\n                  </mat-card>\n                }\n              </div>\n            }\n          }\n        </div>\n\n        <mat-divider class=\"w-full pb-2\"/>\n\n        <!-- CHILDREN -->\n        @if (selectedItem()) {\n          <div class=\"flex-1 overflow-auto min-h-0\" [overflowClass]=\"'pr-4'\">\n            @if (!loadingChildren()) {\n              @if (filteredChildren(); as items) {\n                @if (items.length) {\n                  <div class=\"flex flex-col w-full overflow-y-auto overflow-x-hidden\">\n                    @for (item of items; track $index) {\n                      <mat-card class=\"mb-2 cursor-pointer regular-item hover:bg-hover-color\" (click)=\"selectChild(item)\" [matTooltip]=\"item.name\" matTooltipPosition=\"right\"\n                                [dndDraggable]=\"item.data\" [dndDisableDragIf]=\"!enableDrag()\" (dndStart)=\"dragStart($event, item.data)\" (dndEnd)=\"isDragging.set(false)\">\n                        <div class=\"px-3 flex flex-row items-center justify-between gap-x-2 item-card\">\n                          <div class=\"flex flex-row grow items-center gap-x-2 overflow-hidden\">\n                            @if (item.icon; as icon) {\n                              <app-icon [icon]=\"icon\"/>\n                            }\n                            <span [ngClass]=\"selectedItem()?.id === item.id ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface'\" class=\"truncate\">{{ item.name }}</span>\n                          </div>\n                          @if (item.rightNumber && item.rightNumber > 0) {\n                            <span class=\"flex items-center justify-center shrink-0 min-w-5 h-5 px-1.5 rounded-full text-[11px] font-semibold\" [ngClass]=\"selectedItem()?.id === item.id ? 'bg-transparent text-mat-sys-surface-container' : 'bg-mat-sys-primary text-mat-sys-on-primary'\">{{ item.rightNumber }}</span>\n                          } @else if (enableDrag()) {\n                            <mat-icon>drag_indicator</mat-icon>\n                          }\n                        </div>\n                      </mat-card>\n                    }\n                  </div>\n                } @else {\n                  <div class=\"flex flex-col grow justify-center items-center\">\n                    <ng-content select=\"[app-no-items-message]\"/>\n                  </div>\n                }\n              }\n            } @else {\n              <div class=\"flex flex-col grow justify-center items-center\">\n                <mat-spinner diameter=\"30\"></mat-spinner>\n              </div>\n            }\n          </div>\n        }\n\n        <!-- ACTIONS (bottom right of the listing) -->\n        <div class=\"absolute bottom-0 right-0 z-10\">\n          <ng-content select=\"[app-actions]\"/>\n        </div>\n      </div>\n    </div>\n\n  </div>\n\n  @if (width() !== 'full') {\n    <mat-divider [vertical]=\"true\" class=\"relative top-2\"/>\n\n    <!-- DETAILS -->\n    <div class=\"details flex shrink grow overflow-hidden pt-2\">\n      <ng-content select=\"[app-details]\"/>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;height:100%;width:100%;overflow:hidden}mat-card,.item-card{height:40px!important}.container{background-color:var(--base-color-50)}.container .master{padding-right:16px}.container .details{padding-left:16px}.selected-item{background:var(--mat-sys-primary);fill:var(--mat-sys-on-primary);color:var(--mat-sys-on-primary)}.regular-item{fill:var(--mat-sys-primary);color:var(--mat-sys-primary)}.regular-item.disabled{color:unset}\n"] }]
         }], ctorParameters: () => [{ type: i0.DestroyRef }], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], dataControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataControl", required: true }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], disableThresholdId: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableThresholdId", required: false }] }], isColoredInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "isColoredInput", required: false }] }], searchActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchActions", required: false }] }], selectionConfirmationAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionConfirmationAction", required: false }] }], hideSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideSearch", required: false }] }], rootButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "rootButtonText", required: false }] }], enableDrag: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableDrag", required: false }] }], dragging: [{ type: i0.Output, args: ["dragging"] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }] } });
 
 class NestedListDataControl {
@@ -5789,11 +5789,11 @@ class PdfViewerComponent {
         this.sanitizer = sanitizer;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PdfViewerComponent, deps: [{ token: i1$6.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: PdfViewerComponent, isStandalone: true, selector: "app-pdf-viewer", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (safeSrc()) {\r\n    <iframe [src]=\"safeSrc()\" frameborder=\"0\" class=\"w-full h-full\"></iframe>\r\n}", styles: [""] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: PdfViewerComponent, isStandalone: true, selector: "app-pdf-viewer", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (safeSrc()) {\n    <iframe [src]=\"safeSrc()\" frameborder=\"0\" class=\"w-full h-full\"></iframe>\n}", styles: [""] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PdfViewerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-pdf-viewer', imports: [], template: "@if (safeSrc()) {\r\n    <iframe [src]=\"safeSrc()\" frameborder=\"0\" class=\"w-full h-full\"></iframe>\r\n}" }]
+            args: [{ selector: 'app-pdf-viewer', imports: [], template: "@if (safeSrc()) {\n    <iframe [src]=\"safeSrc()\" frameborder=\"0\" class=\"w-full h-full\"></iframe>\n}" }]
         }], ctorParameters: () => [{ type: i1$6.DomSanitizer }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }] } });
 
 class StandardListViewComponent {
@@ -5924,11 +5924,11 @@ class StandardListViewComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StandardListViewComponent, deps: [{ token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: StandardListViewComponent, isStandalone: true, selector: "app-standard-list-view", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, dataControl: { classPropertyName: "dataControl", publicName: "dataControl", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, isColoredInput: { classPropertyName: "isColoredInput", publicName: "isColoredInput", isSignal: true, isRequired: false, transformFunction: null }, hideSearch: { classPropertyName: "hideSearch", publicName: "hideSearch", isSignal: true, isRequired: false, transformFunction: null }, hideDetails: { classPropertyName: "hideDetails", publicName: "hideDetails", isSignal: true, isRequired: false, transformFunction: null }, hidePadding: { classPropertyName: "hidePadding", publicName: "hidePadding", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelected: "itemSelected" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: ["standardListItemTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"container flex h-full w-full min-w-full min-h-full relative overflow-hidden {{hidePadding() ? 'pt-0' : 'pt-2'}}\">\r\n  <div [ngClass]=\"width()\" class=\"master flex shrink-0 grow-0 min-w-0\">\r\n\r\n    <!-- LISTING -->\r\n    <div class=\"w-full h-full flex flex-col gap-y-2 relative\">\r\n\r\n      <!-- SEARCH -->\r\n      @if (!hideSearch()) {\r\n        <mat-form-field class=\"w-full small-input\" [ngClass]=\"{'colored-input': isColoredInput()}\">\r\n          <mat-label>{{ 'COMMON.SEARCH' | translate }}</mat-label>\r\n          <input matInput type=\"text\" [formControl]=\"nameSearchControl\">\r\n          <mat-icon matSuffix>search</mat-icon>\r\n        </mat-form-field>\r\n      }\r\n\r\n      <!-- LIST -->\r\n      <div class=\"flex flex-col w-full h-full relative overflow-hidden\">\r\n        @if (!loadingData()) {\r\n          @if (filteredItems(); as items) {\r\n            @if (items.length) {\r\n              <div class=\"flex flex-col w-full grow shrink overflow-y-auto overflow-x-hidden\" [overflowClass]=\"'pr-4'\">\r\n                @for (item of items; track $index) {\r\n                  <ng-container [ngTemplateOutlet]=\"itemTemplate() || defaultTemplate\" [ngTemplateOutletContext]=\"{$implicit: item, selectedItem: selectedItem(), selectItem: selectItem.bind(this)}\"/>\r\n\r\n                  <!--DEFAULT TEMPLATE-->\r\n                  <ng-template #defaultTemplate>\r\n                    <mat-card class=\"mb-2 cursor-pointer\" (click)=\"selectItem(item)\"\r\n                              [class]=\"selectedItem()?.id === item.id ? 'selected-item' : 'regular-item hover:bg-hover-color'\"\r\n                              [appScrollIntoView]=\"selectedItem()?.id === item.id\"\r\n                              [matTooltip]=\"item.name\" matTooltipPosition=\"right\">\r\n                      <div class=\"px-3 flex flex-row items-center gap-x-2 item-card\">\r\n                        @if (item.icon; as icon) {\r\n                          <app-icon [icon]=\"icon\"/>\r\n                        }\r\n                        <span [ngClass]=\"selectedItem()?.id === item.id ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface'\" class=\"truncate flex-1\">{{ item.name }}</span>\r\n                        @if (item.rightIcon; as icon) {\r\n                          <app-icon [icon]=\"icon\"/>\r\n                        }\r\n                      </div>\r\n                    </mat-card>\r\n                  </ng-template>\r\n                }\r\n\r\n                <!--  Load more  -->\r\n                @if (this.dataSource().isPaged && !this.dataSource().isLastPage) {\r\n                  <mat-card class=\"mb-2 cursor-pointer regular-item hover:bg-hover-color\" (click)=\"loadMore()\">\r\n                    <div class=\"px-3 flex flex-row justify-center items-center gap-x-2 item-card\">\r\n                      @if (loadingPage()) {\r\n                        <mat-spinner diameter=\"30\"></mat-spinner>\r\n                      } @else {\r\n                        <span class=\"text-mat-sys-on-surface\">{{ 'COMMON.LOAD_MORE' | translate }}</span>\r\n                      }\r\n                    </div>\r\n                  </mat-card>\r\n                }\r\n              </div>\r\n            } @else {\r\n              <div class=\"flex flex-col grow justify-center items-center\">\r\n                <ng-content select=\"[app-no-items-message]\"></ng-content>\r\n              </div>\r\n            }\r\n          }\r\n        } @else {\r\n          <div class=\"flex flex-col grow justify-center items-center\">\r\n            <mat-spinner diameter=\"30\"></mat-spinner>\r\n          </div>\r\n        }\r\n\r\n        <!-- ACTIONS (bottom right of the listing) -->\r\n        <div class=\"absolute bottom-0 right-0 z-10\">\r\n          <ng-content select=\"[app-actions]\"/>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  @if (!hideDetails()) {\r\n    <mat-divider [vertical]=\"true\"/>\r\n\r\n    <!-- DETAILS -->\r\n    <div class=\"details flex shrink grow overflow-hidden\">\r\n      <ng-content select=\"[app-details]\"/>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;height:100%;width:100%;overflow:hidden}mat-card,.item-card{height:40px!important}.container{background-color:var(--base-color-50)}.container .master{padding-right:16px}.container .details{padding-left:16px}.selected-item{background:var(--mat-sys-primary);fill:var(--mat-sys-on-primary);color:var(--mat-sys-on-primary)}.regular-item{fill:var(--mat-sys-primary);color:var(--mat-sys-primary)}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i1$7.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: OverflowClassDirective, selector: "[overflowClass]", inputs: ["overflowClass"] }, { kind: "directive", type: ScrollIntoViewDirective, selector: "[appScrollIntoView]", inputs: ["appScrollIntoView"] }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["icon"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: StandardListViewComponent, isStandalone: true, selector: "app-standard-list-view", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, dataControl: { classPropertyName: "dataControl", publicName: "dataControl", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, isColoredInput: { classPropertyName: "isColoredInput", publicName: "isColoredInput", isSignal: true, isRequired: false, transformFunction: null }, hideSearch: { classPropertyName: "hideSearch", publicName: "hideSearch", isSignal: true, isRequired: false, transformFunction: null }, hideDetails: { classPropertyName: "hideDetails", publicName: "hideDetails", isSignal: true, isRequired: false, transformFunction: null }, hidePadding: { classPropertyName: "hidePadding", publicName: "hidePadding", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelected: "itemSelected" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: ["standardListItemTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"container flex h-full w-full min-w-full min-h-full relative overflow-hidden {{hidePadding() ? 'pt-0' : 'pt-2'}}\">\n  <div [ngClass]=\"width()\" class=\"master flex shrink-0 grow-0 min-w-0\">\n\n    <!-- LISTING -->\n    <div class=\"w-full h-full flex flex-col gap-y-2 relative\">\n\n      <!-- SEARCH -->\n      @if (!hideSearch()) {\n        <mat-form-field class=\"w-full small-input\" [ngClass]=\"{'colored-input': isColoredInput()}\">\n          <mat-label>{{ 'COMMON.SEARCH' | translate }}</mat-label>\n          <input matInput type=\"text\" [formControl]=\"nameSearchControl\">\n          <mat-icon matSuffix>search</mat-icon>\n        </mat-form-field>\n      }\n\n      <!-- LIST -->\n      <div class=\"flex flex-col w-full h-full relative overflow-hidden\">\n        @if (!loadingData()) {\n          @if (filteredItems(); as items) {\n            @if (items.length) {\n              <div class=\"flex flex-col w-full grow shrink overflow-y-auto overflow-x-hidden\" [overflowClass]=\"'pr-4'\">\n                @for (item of items; track $index) {\n                  <ng-container [ngTemplateOutlet]=\"itemTemplate() || defaultTemplate\" [ngTemplateOutletContext]=\"{$implicit: item, selectedItem: selectedItem(), selectItem: selectItem.bind(this)}\"/>\n\n                  <!--DEFAULT TEMPLATE-->\n                  <ng-template #defaultTemplate>\n                    <mat-card class=\"mb-2 cursor-pointer\" (click)=\"selectItem(item)\"\n                              [class]=\"selectedItem()?.id === item.id ? 'selected-item' : 'regular-item hover:bg-hover-color'\"\n                              [appScrollIntoView]=\"selectedItem()?.id === item.id\"\n                              [matTooltip]=\"item.name\" matTooltipPosition=\"right\">\n                      <div class=\"px-3 flex flex-row items-center gap-x-2 item-card\">\n                        @if (item.icon; as icon) {\n                          <app-icon [icon]=\"icon\"/>\n                        }\n                        <span [ngClass]=\"selectedItem()?.id === item.id ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface'\" class=\"truncate flex-1\">{{ item.name }}</span>\n                        @if (item.rightIcon; as icon) {\n                          <app-icon [icon]=\"icon\"/>\n                        }\n                      </div>\n                    </mat-card>\n                  </ng-template>\n                }\n\n                <!--  Load more  -->\n                @if (this.dataSource().isPaged && !this.dataSource().isLastPage) {\n                  <mat-card class=\"mb-2 cursor-pointer regular-item hover:bg-hover-color\" (click)=\"loadMore()\">\n                    <div class=\"px-3 flex flex-row justify-center items-center gap-x-2 item-card\">\n                      @if (loadingPage()) {\n                        <mat-spinner diameter=\"30\"></mat-spinner>\n                      } @else {\n                        <span class=\"text-mat-sys-on-surface\">{{ 'COMMON.LOAD_MORE' | translate }}</span>\n                      }\n                    </div>\n                  </mat-card>\n                }\n              </div>\n            } @else {\n              <div class=\"flex flex-col grow justify-center items-center\">\n                <ng-content select=\"[app-no-items-message]\"></ng-content>\n              </div>\n            }\n          }\n        } @else {\n          <div class=\"flex flex-col grow justify-center items-center\">\n            <mat-spinner diameter=\"30\"></mat-spinner>\n          </div>\n        }\n\n        <!-- ACTIONS (bottom right of the listing) -->\n        <div class=\"absolute bottom-0 right-0 z-10\">\n          <ng-content select=\"[app-actions]\"/>\n        </div>\n      </div>\n    </div>\n\n  </div>\n\n  @if (!hideDetails()) {\n    <mat-divider [vertical]=\"true\"/>\n\n    <!-- DETAILS -->\n    <div class=\"details flex shrink grow overflow-hidden\">\n      <ng-content select=\"[app-details]\"/>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;height:100%;width:100%;overflow:hidden}mat-card,.item-card{height:40px!important}.container{background-color:var(--base-color-50)}.container .master{padding-right:16px}.container .details{padding-left:16px}.selected-item{background:var(--mat-sys-primary);fill:var(--mat-sys-on-primary);color:var(--mat-sys-on-primary)}.regular-item{fill:var(--mat-sys-primary);color:var(--mat-sys-primary)}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i1$7.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: OverflowClassDirective, selector: "[overflowClass]", inputs: ["overflowClass"] }, { kind: "directive", type: ScrollIntoViewDirective, selector: "[appScrollIntoView]", inputs: ["appScrollIntoView"] }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["icon"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StandardListViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-standard-list-view', imports: [SharedModule, OverflowClassDirective, ScrollIntoViewDirective, IconComponent], template: "<div class=\"container flex h-full w-full min-w-full min-h-full relative overflow-hidden {{hidePadding() ? 'pt-0' : 'pt-2'}}\">\r\n  <div [ngClass]=\"width()\" class=\"master flex shrink-0 grow-0 min-w-0\">\r\n\r\n    <!-- LISTING -->\r\n    <div class=\"w-full h-full flex flex-col gap-y-2 relative\">\r\n\r\n      <!-- SEARCH -->\r\n      @if (!hideSearch()) {\r\n        <mat-form-field class=\"w-full small-input\" [ngClass]=\"{'colored-input': isColoredInput()}\">\r\n          <mat-label>{{ 'COMMON.SEARCH' | translate }}</mat-label>\r\n          <input matInput type=\"text\" [formControl]=\"nameSearchControl\">\r\n          <mat-icon matSuffix>search</mat-icon>\r\n        </mat-form-field>\r\n      }\r\n\r\n      <!-- LIST -->\r\n      <div class=\"flex flex-col w-full h-full relative overflow-hidden\">\r\n        @if (!loadingData()) {\r\n          @if (filteredItems(); as items) {\r\n            @if (items.length) {\r\n              <div class=\"flex flex-col w-full grow shrink overflow-y-auto overflow-x-hidden\" [overflowClass]=\"'pr-4'\">\r\n                @for (item of items; track $index) {\r\n                  <ng-container [ngTemplateOutlet]=\"itemTemplate() || defaultTemplate\" [ngTemplateOutletContext]=\"{$implicit: item, selectedItem: selectedItem(), selectItem: selectItem.bind(this)}\"/>\r\n\r\n                  <!--DEFAULT TEMPLATE-->\r\n                  <ng-template #defaultTemplate>\r\n                    <mat-card class=\"mb-2 cursor-pointer\" (click)=\"selectItem(item)\"\r\n                              [class]=\"selectedItem()?.id === item.id ? 'selected-item' : 'regular-item hover:bg-hover-color'\"\r\n                              [appScrollIntoView]=\"selectedItem()?.id === item.id\"\r\n                              [matTooltip]=\"item.name\" matTooltipPosition=\"right\">\r\n                      <div class=\"px-3 flex flex-row items-center gap-x-2 item-card\">\r\n                        @if (item.icon; as icon) {\r\n                          <app-icon [icon]=\"icon\"/>\r\n                        }\r\n                        <span [ngClass]=\"selectedItem()?.id === item.id ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface'\" class=\"truncate flex-1\">{{ item.name }}</span>\r\n                        @if (item.rightIcon; as icon) {\r\n                          <app-icon [icon]=\"icon\"/>\r\n                        }\r\n                      </div>\r\n                    </mat-card>\r\n                  </ng-template>\r\n                }\r\n\r\n                <!--  Load more  -->\r\n                @if (this.dataSource().isPaged && !this.dataSource().isLastPage) {\r\n                  <mat-card class=\"mb-2 cursor-pointer regular-item hover:bg-hover-color\" (click)=\"loadMore()\">\r\n                    <div class=\"px-3 flex flex-row justify-center items-center gap-x-2 item-card\">\r\n                      @if (loadingPage()) {\r\n                        <mat-spinner diameter=\"30\"></mat-spinner>\r\n                      } @else {\r\n                        <span class=\"text-mat-sys-on-surface\">{{ 'COMMON.LOAD_MORE' | translate }}</span>\r\n                      }\r\n                    </div>\r\n                  </mat-card>\r\n                }\r\n              </div>\r\n            } @else {\r\n              <div class=\"flex flex-col grow justify-center items-center\">\r\n                <ng-content select=\"[app-no-items-message]\"></ng-content>\r\n              </div>\r\n            }\r\n          }\r\n        } @else {\r\n          <div class=\"flex flex-col grow justify-center items-center\">\r\n            <mat-spinner diameter=\"30\"></mat-spinner>\r\n          </div>\r\n        }\r\n\r\n        <!-- ACTIONS (bottom right of the listing) -->\r\n        <div class=\"absolute bottom-0 right-0 z-10\">\r\n          <ng-content select=\"[app-actions]\"/>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  @if (!hideDetails()) {\r\n    <mat-divider [vertical]=\"true\"/>\r\n\r\n    <!-- DETAILS -->\r\n    <div class=\"details flex shrink grow overflow-hidden\">\r\n      <ng-content select=\"[app-details]\"/>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;height:100%;width:100%;overflow:hidden}mat-card,.item-card{height:40px!important}.container{background-color:var(--base-color-50)}.container .master{padding-right:16px}.container .details{padding-left:16px}.selected-item{background:var(--mat-sys-primary);fill:var(--mat-sys-on-primary);color:var(--mat-sys-on-primary)}.regular-item{fill:var(--mat-sys-primary);color:var(--mat-sys-primary)}\n"] }]
+            args: [{ selector: 'app-standard-list-view', imports: [SharedModule, OverflowClassDirective, ScrollIntoViewDirective, IconComponent], template: "<div class=\"container flex h-full w-full min-w-full min-h-full relative overflow-hidden {{hidePadding() ? 'pt-0' : 'pt-2'}}\">\n  <div [ngClass]=\"width()\" class=\"master flex shrink-0 grow-0 min-w-0\">\n\n    <!-- LISTING -->\n    <div class=\"w-full h-full flex flex-col gap-y-2 relative\">\n\n      <!-- SEARCH -->\n      @if (!hideSearch()) {\n        <mat-form-field class=\"w-full small-input\" [ngClass]=\"{'colored-input': isColoredInput()}\">\n          <mat-label>{{ 'COMMON.SEARCH' | translate }}</mat-label>\n          <input matInput type=\"text\" [formControl]=\"nameSearchControl\">\n          <mat-icon matSuffix>search</mat-icon>\n        </mat-form-field>\n      }\n\n      <!-- LIST -->\n      <div class=\"flex flex-col w-full h-full relative overflow-hidden\">\n        @if (!loadingData()) {\n          @if (filteredItems(); as items) {\n            @if (items.length) {\n              <div class=\"flex flex-col w-full grow shrink overflow-y-auto overflow-x-hidden\" [overflowClass]=\"'pr-4'\">\n                @for (item of items; track $index) {\n                  <ng-container [ngTemplateOutlet]=\"itemTemplate() || defaultTemplate\" [ngTemplateOutletContext]=\"{$implicit: item, selectedItem: selectedItem(), selectItem: selectItem.bind(this)}\"/>\n\n                  <!--DEFAULT TEMPLATE-->\n                  <ng-template #defaultTemplate>\n                    <mat-card class=\"mb-2 cursor-pointer\" (click)=\"selectItem(item)\"\n                              [class]=\"selectedItem()?.id === item.id ? 'selected-item' : 'regular-item hover:bg-hover-color'\"\n                              [appScrollIntoView]=\"selectedItem()?.id === item.id\"\n                              [matTooltip]=\"item.name\" matTooltipPosition=\"right\">\n                      <div class=\"px-3 flex flex-row items-center gap-x-2 item-card\">\n                        @if (item.icon; as icon) {\n                          <app-icon [icon]=\"icon\"/>\n                        }\n                        <span [ngClass]=\"selectedItem()?.id === item.id ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface'\" class=\"truncate flex-1\">{{ item.name }}</span>\n                        @if (item.rightIcon; as icon) {\n                          <app-icon [icon]=\"icon\"/>\n                        }\n                      </div>\n                    </mat-card>\n                  </ng-template>\n                }\n\n                <!--  Load more  -->\n                @if (this.dataSource().isPaged && !this.dataSource().isLastPage) {\n                  <mat-card class=\"mb-2 cursor-pointer regular-item hover:bg-hover-color\" (click)=\"loadMore()\">\n                    <div class=\"px-3 flex flex-row justify-center items-center gap-x-2 item-card\">\n                      @if (loadingPage()) {\n                        <mat-spinner diameter=\"30\"></mat-spinner>\n                      } @else {\n                        <span class=\"text-mat-sys-on-surface\">{{ 'COMMON.LOAD_MORE' | translate }}</span>\n                      }\n                    </div>\n                  </mat-card>\n                }\n              </div>\n            } @else {\n              <div class=\"flex flex-col grow justify-center items-center\">\n                <ng-content select=\"[app-no-items-message]\"></ng-content>\n              </div>\n            }\n          }\n        } @else {\n          <div class=\"flex flex-col grow justify-center items-center\">\n            <mat-spinner diameter=\"30\"></mat-spinner>\n          </div>\n        }\n\n        <!-- ACTIONS (bottom right of the listing) -->\n        <div class=\"absolute bottom-0 right-0 z-10\">\n          <ng-content select=\"[app-actions]\"/>\n        </div>\n      </div>\n    </div>\n\n  </div>\n\n  @if (!hideDetails()) {\n    <mat-divider [vertical]=\"true\"/>\n\n    <!-- DETAILS -->\n    <div class=\"details flex shrink grow overflow-hidden\">\n      <ng-content select=\"[app-details]\"/>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;height:100%;width:100%;overflow:hidden}mat-card,.item-card{height:40px!important}.container{background-color:var(--base-color-50)}.container .master{padding-right:16px}.container .details{padding-left:16px}.selected-item{background:var(--mat-sys-primary);fill:var(--mat-sys-on-primary);color:var(--mat-sys-on-primary)}.regular-item{fill:var(--mat-sys-primary);color:var(--mat-sys-primary)}\n"] }]
         }], ctorParameters: () => [{ type: i0.DestroyRef }], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], dataControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataControl", required: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], isColoredInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "isColoredInput", required: false }] }], hideSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideSearch", required: false }] }], hideDetails: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideDetails", required: false }] }], hidePadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePadding", required: false }] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }], itemTemplate: [{ type: i0.ContentChild, args: ['standardListItemTemplate', { isSignal: true }] }] } });
 
 class StandardListDataControl {
@@ -6036,11 +6036,11 @@ class TabulatedChipViewComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TabulatedChipViewComponent, deps: [{ token: i1$2.Router }, { token: i1$2.ActivatedRoute }, { token: NavigationPersistenceService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: TabulatedChipViewComponent, isStandalone: true, selector: "app-tabulated-chip-view", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, queryParamHandling: { classPropertyName: "queryParamHandling", publicName: "queryParamHandling", isSignal: true, isRequired: false, transformFunction: null }, saveLastActiveTab: { classPropertyName: "saveLastActiveTab", publicName: "saveLastActiveTab", isSignal: true, isRequired: false, transformFunction: null }, navBarLayoutClasses: { classPropertyName: "navBarLayoutClasses", publicName: "navBarLayoutClasses", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-auto flex-col overflow-hidden tabulated-view-container\">\r\n  <nav mat-tab-nav-bar [mat-stretch-tabs]=\"false\" [tabPanel]=\"tabPanel\" class=\"navigation\" [ngClass]=\"navBarLayoutClasses()\">\r\n    @for (tab of tabs(); track $index) {\r\n      @if (!tab.condition || (tab.condition | async)) {\r\n        <div\r\n          mat-tab-link\r\n          [active]=\"isActive(tab.route)\"\r\n          (click)=\"navigate(tab.route)\"\r\n          [matTooltip]=\"tab.tooltip ? (tab.tooltip | translate) : null\"\r\n          [ngClass]=\"{ 'bg-mat-sys-primary': isActive(tab.route), 'active': isActive(tab.route) }\"\r\n          class=\"rounded mr-2 navigation-tab\"\r\n          [attr.data-test]=\"tab.name + '_tab'\"\r\n        >\r\n          @if (tab.icon) {\r\n            <mat-icon>{{ tab.icon }}</mat-icon>\r\n          }\r\n          <span [ngClass]=\"isActive(tab.route) ?'text-mat-sys-surface-container' : 'text-mat-sys-primary'\">{{ tab.name | translate }}</span>\r\n        </div>\r\n      }\r\n    }\r\n  </nav>\r\n  <mat-tab-nav-panel #tabPanel class=\"flex flex-auto flex-col overflow-hidden\">\r\n    <router-outlet/>\r\n  </mat-tab-nav-panel>\r\n</div>\r\n", styles: [":host{display:flex;height:100%;width:100%;max-height:100%;max-width:100%;box-sizing:border-box;--mat-tab-active-indicator-color: transparent;--mat-tab-active-focus-indicator-color: transparent;--mat-tab-active-hover-indicator-color: transparent;--mat-tab-active-ripple-color: transparent;--mat-tab-inactive-ripple-color: transparent;--mat-tab-disabled-ripple-color: transparent;--mat-tab-active-indicator-height: 0;--mat-tab-divider-height: 0px;--mat-tab-container-height: 40px}.navigation{max-width:100%}.navigation-tab{border:1px solid var(--mat-sys-outline-variant);border-radius:10px;padding:0 1rem;height:2.5rem;box-sizing:border-box}.navigation-tab.active{border:none}.navigation-tab:hover{box-shadow:inset 0 0 0 200px #fff3}.navigation-tab:hover mat-icon,.navigation-tab:hover span{opacity:.8}:host-context(.alt-theme) .navigation-tab:hover{box-shadow:inset 0 0 0 200px #0003}:host-context(.alt-theme) .navigation-tab:hover mat-icon,:host-context(.alt-theme) .navigation-tab:hover span{opacity:.6}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4$4.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i4$4.MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: i4$4.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: TabulatedChipViewComponent, isStandalone: true, selector: "app-tabulated-chip-view", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, queryParamHandling: { classPropertyName: "queryParamHandling", publicName: "queryParamHandling", isSignal: true, isRequired: false, transformFunction: null }, saveLastActiveTab: { classPropertyName: "saveLastActiveTab", publicName: "saveLastActiveTab", isSignal: true, isRequired: false, transformFunction: null }, navBarLayoutClasses: { classPropertyName: "navBarLayoutClasses", publicName: "navBarLayoutClasses", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-auto flex-col overflow-hidden tabulated-view-container\">\n  <nav mat-tab-nav-bar [mat-stretch-tabs]=\"false\" [tabPanel]=\"tabPanel\" class=\"navigation\" [ngClass]=\"navBarLayoutClasses()\">\n    @for (tab of tabs(); track $index) {\n      @if (!tab.condition || (tab.condition | async)) {\n        <div\n          mat-tab-link\n          [active]=\"isActive(tab.route)\"\n          (click)=\"navigate(tab.route)\"\n          [matTooltip]=\"tab.tooltip ? (tab.tooltip | translate) : null\"\n          [ngClass]=\"{ 'bg-mat-sys-primary': isActive(tab.route), 'active': isActive(tab.route) }\"\n          class=\"rounded mr-2 navigation-tab\"\n          [attr.data-test]=\"tab.name + '_tab'\"\n        >\n          @if (tab.icon) {\n            <mat-icon>{{ tab.icon }}</mat-icon>\n          }\n          <span [ngClass]=\"isActive(tab.route) ?'text-mat-sys-surface-container' : 'text-mat-sys-primary'\">{{ tab.name | translate }}</span>\n        </div>\n      }\n    }\n  </nav>\n  <mat-tab-nav-panel #tabPanel class=\"flex flex-auto flex-col overflow-hidden\">\n    <router-outlet/>\n  </mat-tab-nav-panel>\n</div>\n", styles: [":host{display:flex;height:100%;width:100%;max-height:100%;max-width:100%;box-sizing:border-box;--mat-tab-active-indicator-color: transparent;--mat-tab-active-focus-indicator-color: transparent;--mat-tab-active-hover-indicator-color: transparent;--mat-tab-active-ripple-color: transparent;--mat-tab-inactive-ripple-color: transparent;--mat-tab-disabled-ripple-color: transparent;--mat-tab-active-indicator-height: 0;--mat-tab-divider-height: 0px;--mat-tab-container-height: 40px}.navigation{max-width:100%}.navigation-tab{border:1px solid var(--mat-sys-outline-variant);border-radius:10px;padding:0 1rem;height:2.5rem;box-sizing:border-box}.navigation-tab.active{border:none}.navigation-tab:hover{box-shadow:inset 0 0 0 200px #fff3}.navigation-tab:hover mat-icon,.navigation-tab:hover span{opacity:.8}:host-context(.alt-theme) .navigation-tab:hover{box-shadow:inset 0 0 0 200px #0003}:host-context(.alt-theme) .navigation-tab:hover mat-icon,:host-context(.alt-theme) .navigation-tab:hover span{opacity:.6}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4$4.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i4$4.MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: i4$4.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TabulatedChipViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-tabulated-chip-view', imports: [SharedModule], template: "<div class=\"flex flex-auto flex-col overflow-hidden tabulated-view-container\">\r\n  <nav mat-tab-nav-bar [mat-stretch-tabs]=\"false\" [tabPanel]=\"tabPanel\" class=\"navigation\" [ngClass]=\"navBarLayoutClasses()\">\r\n    @for (tab of tabs(); track $index) {\r\n      @if (!tab.condition || (tab.condition | async)) {\r\n        <div\r\n          mat-tab-link\r\n          [active]=\"isActive(tab.route)\"\r\n          (click)=\"navigate(tab.route)\"\r\n          [matTooltip]=\"tab.tooltip ? (tab.tooltip | translate) : null\"\r\n          [ngClass]=\"{ 'bg-mat-sys-primary': isActive(tab.route), 'active': isActive(tab.route) }\"\r\n          class=\"rounded mr-2 navigation-tab\"\r\n          [attr.data-test]=\"tab.name + '_tab'\"\r\n        >\r\n          @if (tab.icon) {\r\n            <mat-icon>{{ tab.icon }}</mat-icon>\r\n          }\r\n          <span [ngClass]=\"isActive(tab.route) ?'text-mat-sys-surface-container' : 'text-mat-sys-primary'\">{{ tab.name | translate }}</span>\r\n        </div>\r\n      }\r\n    }\r\n  </nav>\r\n  <mat-tab-nav-panel #tabPanel class=\"flex flex-auto flex-col overflow-hidden\">\r\n    <router-outlet/>\r\n  </mat-tab-nav-panel>\r\n</div>\r\n", styles: [":host{display:flex;height:100%;width:100%;max-height:100%;max-width:100%;box-sizing:border-box;--mat-tab-active-indicator-color: transparent;--mat-tab-active-focus-indicator-color: transparent;--mat-tab-active-hover-indicator-color: transparent;--mat-tab-active-ripple-color: transparent;--mat-tab-inactive-ripple-color: transparent;--mat-tab-disabled-ripple-color: transparent;--mat-tab-active-indicator-height: 0;--mat-tab-divider-height: 0px;--mat-tab-container-height: 40px}.navigation{max-width:100%}.navigation-tab{border:1px solid var(--mat-sys-outline-variant);border-radius:10px;padding:0 1rem;height:2.5rem;box-sizing:border-box}.navigation-tab.active{border:none}.navigation-tab:hover{box-shadow:inset 0 0 0 200px #fff3}.navigation-tab:hover mat-icon,.navigation-tab:hover span{opacity:.8}:host-context(.alt-theme) .navigation-tab:hover{box-shadow:inset 0 0 0 200px #0003}:host-context(.alt-theme) .navigation-tab:hover mat-icon,:host-context(.alt-theme) .navigation-tab:hover span{opacity:.6}\n"] }]
+            args: [{ selector: 'app-tabulated-chip-view', imports: [SharedModule], template: "<div class=\"flex flex-auto flex-col overflow-hidden tabulated-view-container\">\n  <nav mat-tab-nav-bar [mat-stretch-tabs]=\"false\" [tabPanel]=\"tabPanel\" class=\"navigation\" [ngClass]=\"navBarLayoutClasses()\">\n    @for (tab of tabs(); track $index) {\n      @if (!tab.condition || (tab.condition | async)) {\n        <div\n          mat-tab-link\n          [active]=\"isActive(tab.route)\"\n          (click)=\"navigate(tab.route)\"\n          [matTooltip]=\"tab.tooltip ? (tab.tooltip | translate) : null\"\n          [ngClass]=\"{ 'bg-mat-sys-primary': isActive(tab.route), 'active': isActive(tab.route) }\"\n          class=\"rounded mr-2 navigation-tab\"\n          [attr.data-test]=\"tab.name + '_tab'\"\n        >\n          @if (tab.icon) {\n            <mat-icon>{{ tab.icon }}</mat-icon>\n          }\n          <span [ngClass]=\"isActive(tab.route) ?'text-mat-sys-surface-container' : 'text-mat-sys-primary'\">{{ tab.name | translate }}</span>\n        </div>\n      }\n    }\n  </nav>\n  <mat-tab-nav-panel #tabPanel class=\"flex flex-auto flex-col overflow-hidden\">\n    <router-outlet/>\n  </mat-tab-nav-panel>\n</div>\n", styles: [":host{display:flex;height:100%;width:100%;max-height:100%;max-width:100%;box-sizing:border-box;--mat-tab-active-indicator-color: transparent;--mat-tab-active-focus-indicator-color: transparent;--mat-tab-active-hover-indicator-color: transparent;--mat-tab-active-ripple-color: transparent;--mat-tab-inactive-ripple-color: transparent;--mat-tab-disabled-ripple-color: transparent;--mat-tab-active-indicator-height: 0;--mat-tab-divider-height: 0px;--mat-tab-container-height: 40px}.navigation{max-width:100%}.navigation-tab{border:1px solid var(--mat-sys-outline-variant);border-radius:10px;padding:0 1rem;height:2.5rem;box-sizing:border-box}.navigation-tab.active{border:none}.navigation-tab:hover{box-shadow:inset 0 0 0 200px #fff3}.navigation-tab:hover mat-icon,.navigation-tab:hover span{opacity:.8}:host-context(.alt-theme) .navigation-tab:hover{box-shadow:inset 0 0 0 200px #0003}:host-context(.alt-theme) .navigation-tab:hover mat-icon,:host-context(.alt-theme) .navigation-tab:hover span{opacity:.6}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.Router }, { type: i1$2.ActivatedRoute }, { type: NavigationPersistenceService }], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], queryParamHandling: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryParamHandling", required: false }] }], saveLastActiveTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "saveLastActiveTab", required: false }] }], navBarLayoutClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "navBarLayoutClasses", required: false }] }] } });
 
 class TabulatedViewComponent {
@@ -6067,11 +6067,11 @@ class TabulatedViewComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TabulatedViewComponent, deps: [{ token: i1$2.Router }, { token: i1$2.ActivatedRoute }, { token: NavigationPersistenceService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: TabulatedViewComponent, isStandalone: true, selector: "app-tabulated-view", inputs: { tabs: "tabs", queryParamHandling: "queryParamHandling", saveLastActiveTab: "saveLastActiveTab" }, ngImport: i0, template: "<div class=\"flex flex-auto flex-col overflow-hidden\">\r\n  <nav mat-tab-nav-bar [mat-stretch-tabs]=\"false\" [tabPanel]=\"tabPanel\" class=\"navigation\">\r\n    <div\r\n      *ngFor=\"let tab of tabs\"\r\n      mat-tab-link\r\n      [active]=\"isActive(tab.route)\"\r\n      (click)=\"navigate(tab.route)\"\r\n      [matTooltip]=\"tab.tooltip ? (tab.tooltip | translate) : null\"\r\n      [attr.data-test]=\"tab.name + '_tab'\"\r\n    >\r\n      <mat-icon *ngIf=\"tab.icon\">\r\n        {{ tab.icon }}\r\n      </mat-icon>\r\n      {{ tab.name | translate }}\r\n    </div>\r\n  </nav>\r\n  <mat-tab-nav-panel #tabPanel class=\"flex flex-auto flex-col overflow-hidden\">\r\n    <router-outlet></router-outlet>\r\n  </mat-tab-nav-panel>\r\n</div>\r\n", styles: [":host{display:flex;height:100%;width:100%;max-height:100%;max-width:100%;box-sizing:border-box}.navigation{border-bottom:1px solid rgba(0,0,0,.12);max-width:100%}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4$4.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i4$4.MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: i4$4.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: TabulatedViewComponent, isStandalone: true, selector: "app-tabulated-view", inputs: { tabs: "tabs", queryParamHandling: "queryParamHandling", saveLastActiveTab: "saveLastActiveTab" }, ngImport: i0, template: "<div class=\"flex flex-auto flex-col overflow-hidden\">\n  <nav mat-tab-nav-bar [mat-stretch-tabs]=\"false\" [tabPanel]=\"tabPanel\" class=\"navigation\">\n    <div\n      *ngFor=\"let tab of tabs\"\n      mat-tab-link\n      [active]=\"isActive(tab.route)\"\n      (click)=\"navigate(tab.route)\"\n      [matTooltip]=\"tab.tooltip ? (tab.tooltip | translate) : null\"\n      [attr.data-test]=\"tab.name + '_tab'\"\n    >\n      <mat-icon *ngIf=\"tab.icon\">\n        {{ tab.icon }}\n      </mat-icon>\n      {{ tab.name | translate }}\n    </div>\n  </nav>\n  <mat-tab-nav-panel #tabPanel class=\"flex flex-auto flex-col overflow-hidden\">\n    <router-outlet></router-outlet>\n  </mat-tab-nav-panel>\n</div>\n", styles: [":host{display:flex;height:100%;width:100%;max-height:100%;max-width:100%;box-sizing:border-box}.navigation{border-bottom:1px solid rgba(0,0,0,.12);max-width:100%}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4$4.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i4$4.MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: i4$4.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TabulatedViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-tabulated-view', imports: [SharedModule], template: "<div class=\"flex flex-auto flex-col overflow-hidden\">\r\n  <nav mat-tab-nav-bar [mat-stretch-tabs]=\"false\" [tabPanel]=\"tabPanel\" class=\"navigation\">\r\n    <div\r\n      *ngFor=\"let tab of tabs\"\r\n      mat-tab-link\r\n      [active]=\"isActive(tab.route)\"\r\n      (click)=\"navigate(tab.route)\"\r\n      [matTooltip]=\"tab.tooltip ? (tab.tooltip | translate) : null\"\r\n      [attr.data-test]=\"tab.name + '_tab'\"\r\n    >\r\n      <mat-icon *ngIf=\"tab.icon\">\r\n        {{ tab.icon }}\r\n      </mat-icon>\r\n      {{ tab.name | translate }}\r\n    </div>\r\n  </nav>\r\n  <mat-tab-nav-panel #tabPanel class=\"flex flex-auto flex-col overflow-hidden\">\r\n    <router-outlet></router-outlet>\r\n  </mat-tab-nav-panel>\r\n</div>\r\n", styles: [":host{display:flex;height:100%;width:100%;max-height:100%;max-width:100%;box-sizing:border-box}.navigation{border-bottom:1px solid rgba(0,0,0,.12);max-width:100%}\n"] }]
+            args: [{ selector: 'app-tabulated-view', imports: [SharedModule], template: "<div class=\"flex flex-auto flex-col overflow-hidden\">\n  <nav mat-tab-nav-bar [mat-stretch-tabs]=\"false\" [tabPanel]=\"tabPanel\" class=\"navigation\">\n    <div\n      *ngFor=\"let tab of tabs\"\n      mat-tab-link\n      [active]=\"isActive(tab.route)\"\n      (click)=\"navigate(tab.route)\"\n      [matTooltip]=\"tab.tooltip ? (tab.tooltip | translate) : null\"\n      [attr.data-test]=\"tab.name + '_tab'\"\n    >\n      <mat-icon *ngIf=\"tab.icon\">\n        {{ tab.icon }}\n      </mat-icon>\n      {{ tab.name | translate }}\n    </div>\n  </nav>\n  <mat-tab-nav-panel #tabPanel class=\"flex flex-auto flex-col overflow-hidden\">\n    <router-outlet></router-outlet>\n  </mat-tab-nav-panel>\n</div>\n", styles: [":host{display:flex;height:100%;width:100%;max-height:100%;max-width:100%;box-sizing:border-box}.navigation{border-bottom:1px solid rgba(0,0,0,.12);max-width:100%}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.Router }, { type: i1$2.ActivatedRoute }, { type: NavigationPersistenceService }], propDecorators: { tabs: [{
                 type: Input,
                 args: [{ required: true }]
@@ -6091,11 +6091,11 @@ class TreeNodeComponent {
         this.nodeSelected.emit(node);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TreeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: TreeNodeComponent, isStandalone: true, selector: "app-tree-node", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { nodeSelected: "nodeSelected" }, ngImport: i0, template: "<div class=\"w-full flex flex-col\">\r\n  <!-- ROW -->\r\n  <div class=\"w-full h-10 flex flex-row items-center\">\r\n\r\n    <!-- ARROWS -->\r\n    @if (node().canHaveChildren) {\r\n      @if (node().open) {\r\n        <button mat-icon-button class=\"scale-80\" (click)=\"toggle(node())\">\r\n          <mat-icon>keyboard_arrow_down</mat-icon>\r\n        </button>\r\n      } @else {\r\n        <button mat-icon-button class=\"scale-80\" [disabled]=\"!node().hasChildren\" (click)=\"toggle(node())\">\r\n          <mat-icon>keyboard_arrow_right</mat-icon>\r\n        </button>\r\n      }\r\n    } @else {\r\n      <div class=\"w-12 h-12\">&nbsp;</div>\r\n    }\r\n\r\n    <!-- ICON AND TEXT -->\r\n    <div class=\"flex flex-row items-center cursor-pointer\" (click)=\"selectNode(node())\">\r\n      <mat-icon [ngClass]=\"node().selected ? 'text-mat-sys-tertiary' : 'text-mat-sys-primary'\">{{ node().icon }}</mat-icon>\r\n      <div class=\"pl-2\" [ngClass]=\"{ 'text-mat-sys-tertiary' : node().selected }\">{{ node().name }}</div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Children -->\r\n  @if (node().open) {\r\n    <div class=\"w-full flex flex-col pl-9\">\r\n      @if (node().children | async; as children) {\r\n        @for (child of children; track $index) {\r\n          <app-tree-node [node]=\"child\" (nodeSelected)=\"selectNode($event)\"/>\r\n        }\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "component", type: TreeNodeComponent, selector: "app-tree-node", inputs: ["node"], outputs: ["nodeSelected"] }, { kind: "ngmodule", type: SharedModule }, { kind: "component", type: i1$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: TreeNodeComponent, isStandalone: true, selector: "app-tree-node", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { nodeSelected: "nodeSelected" }, ngImport: i0, template: "<div class=\"w-full flex flex-col\">\n  <!-- ROW -->\n  <div class=\"w-full h-10 flex flex-row items-center\">\n\n    <!-- ARROWS -->\n    @if (node().canHaveChildren) {\n      @if (node().open) {\n        <button mat-icon-button class=\"scale-80\" (click)=\"toggle(node())\">\n          <mat-icon>keyboard_arrow_down</mat-icon>\n        </button>\n      } @else {\n        <button mat-icon-button class=\"scale-80\" [disabled]=\"!node().hasChildren\" (click)=\"toggle(node())\">\n          <mat-icon>keyboard_arrow_right</mat-icon>\n        </button>\n      }\n    } @else {\n      <div class=\"w-12 h-12\">&nbsp;</div>\n    }\n\n    <!-- ICON AND TEXT -->\n    <div class=\"flex flex-row items-center cursor-pointer\" (click)=\"selectNode(node())\">\n      <mat-icon [ngClass]=\"node().selected ? 'text-mat-sys-tertiary' : 'text-mat-sys-primary'\">{{ node().icon }}</mat-icon>\n      <div class=\"pl-2\" [ngClass]=\"{ 'text-mat-sys-tertiary' : node().selected }\">{{ node().name }}</div>\n    </div>\n  </div>\n\n  <!-- Children -->\n  @if (node().open) {\n    <div class=\"w-full flex flex-col pl-9\">\n      @if (node().children | async; as children) {\n        @for (child of children; track $index) {\n          <app-tree-node [node]=\"child\" (nodeSelected)=\"selectNode($event)\"/>\n        }\n      }\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: TreeNodeComponent, selector: "app-tree-node", inputs: ["node"], outputs: ["nodeSelected"] }, { kind: "ngmodule", type: SharedModule }, { kind: "component", type: i1$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TreeNodeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-tree-node', imports: [SharedModule], template: "<div class=\"w-full flex flex-col\">\r\n  <!-- ROW -->\r\n  <div class=\"w-full h-10 flex flex-row items-center\">\r\n\r\n    <!-- ARROWS -->\r\n    @if (node().canHaveChildren) {\r\n      @if (node().open) {\r\n        <button mat-icon-button class=\"scale-80\" (click)=\"toggle(node())\">\r\n          <mat-icon>keyboard_arrow_down</mat-icon>\r\n        </button>\r\n      } @else {\r\n        <button mat-icon-button class=\"scale-80\" [disabled]=\"!node().hasChildren\" (click)=\"toggle(node())\">\r\n          <mat-icon>keyboard_arrow_right</mat-icon>\r\n        </button>\r\n      }\r\n    } @else {\r\n      <div class=\"w-12 h-12\">&nbsp;</div>\r\n    }\r\n\r\n    <!-- ICON AND TEXT -->\r\n    <div class=\"flex flex-row items-center cursor-pointer\" (click)=\"selectNode(node())\">\r\n      <mat-icon [ngClass]=\"node().selected ? 'text-mat-sys-tertiary' : 'text-mat-sys-primary'\">{{ node().icon }}</mat-icon>\r\n      <div class=\"pl-2\" [ngClass]=\"{ 'text-mat-sys-tertiary' : node().selected }\">{{ node().name }}</div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Children -->\r\n  @if (node().open) {\r\n    <div class=\"w-full flex flex-col pl-9\">\r\n      @if (node().children | async; as children) {\r\n        @for (child of children; track $index) {\r\n          <app-tree-node [node]=\"child\" (nodeSelected)=\"selectNode($event)\"/>\r\n        }\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n" }]
+            args: [{ selector: 'app-tree-node', imports: [SharedModule], template: "<div class=\"w-full flex flex-col\">\n  <!-- ROW -->\n  <div class=\"w-full h-10 flex flex-row items-center\">\n\n    <!-- ARROWS -->\n    @if (node().canHaveChildren) {\n      @if (node().open) {\n        <button mat-icon-button class=\"scale-80\" (click)=\"toggle(node())\">\n          <mat-icon>keyboard_arrow_down</mat-icon>\n        </button>\n      } @else {\n        <button mat-icon-button class=\"scale-80\" [disabled]=\"!node().hasChildren\" (click)=\"toggle(node())\">\n          <mat-icon>keyboard_arrow_right</mat-icon>\n        </button>\n      }\n    } @else {\n      <div class=\"w-12 h-12\">&nbsp;</div>\n    }\n\n    <!-- ICON AND TEXT -->\n    <div class=\"flex flex-row items-center cursor-pointer\" (click)=\"selectNode(node())\">\n      <mat-icon [ngClass]=\"node().selected ? 'text-mat-sys-tertiary' : 'text-mat-sys-primary'\">{{ node().icon }}</mat-icon>\n      <div class=\"pl-2\" [ngClass]=\"{ 'text-mat-sys-tertiary' : node().selected }\">{{ node().name }}</div>\n    </div>\n  </div>\n\n  <!-- Children -->\n  @if (node().open) {\n    <div class=\"w-full flex flex-col pl-9\">\n      @if (node().children | async; as children) {\n        @for (child of children; track $index) {\n          <app-tree-node [node]=\"child\" (nodeSelected)=\"selectNode($event)\"/>\n        }\n      }\n    </div>\n  }\n</div>\n" }]
         }], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }], nodeSelected: [{ type: i0.Output, args: ["nodeSelected"] }] } });
 
 class TreeComponent {
@@ -6145,11 +6145,11 @@ class TreeComponent {
         this.selectedNode.selected = true;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: TreeComponent, isStandalone: true, selector: "app-tree", inputs: { roots: { classPropertyName: "roots", publicName: "roots", isSignal: true, isRequired: true, transformFunction: null }, guidPath: { classPropertyName: "guidPath", publicName: "guidPath", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { nodeSelected: "nodeSelected" }, ngImport: i0, template: "<div class=\"h-full w-full flex flex-col\">\r\n  @for (node of roots(); track $index) {\r\n    <app-tree-node [node]=\"node\" (nodeSelected)=\"selectNode($event)\"/>\r\n  }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "component", type: TreeNodeComponent, selector: "app-tree-node", inputs: ["node"], outputs: ["nodeSelected"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: TreeComponent, isStandalone: true, selector: "app-tree", inputs: { roots: { classPropertyName: "roots", publicName: "roots", isSignal: true, isRequired: true, transformFunction: null }, guidPath: { classPropertyName: "guidPath", publicName: "guidPath", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { nodeSelected: "nodeSelected" }, ngImport: i0, template: "<div class=\"h-full w-full flex flex-col\">\n  @for (node of roots(); track $index) {\n    <app-tree-node [node]=\"node\" (nodeSelected)=\"selectNode($event)\"/>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: TreeNodeComponent, selector: "app-tree-node", inputs: ["node"], outputs: ["nodeSelected"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TreeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-tree', imports: [TreeNodeComponent], template: "<div class=\"h-full w-full flex flex-col\">\r\n  @for (node of roots(); track $index) {\r\n    <app-tree-node [node]=\"node\" (nodeSelected)=\"selectNode($event)\"/>\r\n  }\r\n</div>\r\n" }]
+            args: [{ selector: 'app-tree', imports: [TreeNodeComponent], template: "<div class=\"h-full w-full flex flex-col\">\n  @for (node of roots(); track $index) {\n    <app-tree-node [node]=\"node\" (nodeSelected)=\"selectNode($event)\"/>\n  }\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { roots: [{ type: i0.Input, args: [{ isSignal: true, alias: "roots", required: true }] }], guidPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "guidPath", required: true }] }], nodeSelected: [{ type: i0.Output, args: ["nodeSelected"] }] } });
 
 class ValueDisplayComponent {
@@ -6166,11 +6166,11 @@ class ValueDisplayComponent {
         return vector.replaceAll(',', ', ');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ValueDisplayComponent, isStandalone: true, selector: "app-value-display", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (value(); as value) {\r\n  @switch (type()) {\r\n    @case (DataType.BOOLEAN) {\r\n      <mat-icon>{{ value === 'true' ? 'check' : 'close' }}</mat-icon>\r\n    }\r\n    @case (DataType.COLOR) {\r\n      <div class=\"color-circle\" [style.background-color]=\"value\"></div>\r\n    }\r\n    @case (DataType.DATE) {\r\n      <div class=\"truncate\" matTooltip=\"{{ getNumber(value) | simpleDateTime }}\">{{ getNumber(value) | simpleDateTime }}</div>\r\n    }\r\n    @case (DataType.DURATION) {\r\n      {{ getNumber(value) | duration }}\r\n    }\r\n    @case (DataType.LINK) {\r\n      <div class=\"truncate\" matTooltip=\"{{ value }}\">\r\n        <a href=\"{{value}}\" target=\"_blank\" class=\"underline\">{{ value }}</a>\r\n      </div>\r\n    }\r\n    @case (DataType.VECTOR) {\r\n      <div class=\"truncate\" matTooltip=\"{{ getVectorValue(value) }}\">{{ getVectorValue(value) }}</div>\r\n    }\r\n    @case (DataType.NUMERIC){\r\n      <div class=\"truncate\" matTooltip=\"{{ getNumber(value) }} {{ unit() }}\">{{getNumber(value) | localizedNumber}} {{ unit() }}</div>\r\n    }\r\n    @default {\r\n      <div class=\"truncate\" matTooltip=\"{{ value }} {{ unit() }}\">{{ value }} {{ unit() }}</div>\r\n    }\r\n  }\r\n} @else {\r\n  -\r\n}\r\n", styles: [".color-circle{width:1.5rem;height:1.5rem;margin-top:.25rem;border-radius:9999px}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: DurationPipe, name: "duration" }, { kind: "pipe", type: SimpleDateTimePipe, name: "simpleDateTime" }, { kind: "pipe", type: LocalizedNumberPipe, name: "localizedNumber" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ValueDisplayComponent, isStandalone: true, selector: "app-value-display", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (value(); as value) {\n  @switch (type()) {\n    @case (DataType.BOOLEAN) {\n      <mat-icon>{{ value === 'true' ? 'check' : 'close' }}</mat-icon>\n    }\n    @case (DataType.COLOR) {\n      <div class=\"color-circle\" [style.background-color]=\"value\"></div>\n    }\n    @case (DataType.DATE) {\n      <div class=\"truncate\" matTooltip=\"{{ getNumber(value) | simpleDateTime }}\">{{ getNumber(value) | simpleDateTime }}</div>\n    }\n    @case (DataType.DURATION) {\n      {{ getNumber(value) | duration }}\n    }\n    @case (DataType.LINK) {\n      <div class=\"truncate\" matTooltip=\"{{ value }}\">\n        <a href=\"{{value}}\" target=\"_blank\" class=\"underline\">{{ value }}</a>\n      </div>\n    }\n    @case (DataType.VECTOR) {\n      <div class=\"truncate\" matTooltip=\"{{ getVectorValue(value) }}\">{{ getVectorValue(value) }}</div>\n    }\n    @case (DataType.NUMERIC){\n      <div class=\"truncate\" matTooltip=\"{{ getNumber(value) }} {{ unit() }}\">{{getNumber(value) | localizedNumber}} {{ unit() }}</div>\n    }\n    @default {\n      <div class=\"truncate\" matTooltip=\"{{ value }} {{ unit() }}\">{{ value }} {{ unit() }}</div>\n    }\n  }\n} @else {\n  -\n}\n", styles: [".color-circle{width:1.5rem;height:1.5rem;margin-top:.25rem;border-radius:9999px}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: DurationPipe, name: "duration" }, { kind: "pipe", type: SimpleDateTimePipe, name: "simpleDateTime" }, { kind: "pipe", type: LocalizedNumberPipe, name: "localizedNumber" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueDisplayComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-value-display', imports: [SharedModule, DurationPipe, SimpleDateTimePipe, LocalizedNumberPipe], template: "@if (value(); as value) {\r\n  @switch (type()) {\r\n    @case (DataType.BOOLEAN) {\r\n      <mat-icon>{{ value === 'true' ? 'check' : 'close' }}</mat-icon>\r\n    }\r\n    @case (DataType.COLOR) {\r\n      <div class=\"color-circle\" [style.background-color]=\"value\"></div>\r\n    }\r\n    @case (DataType.DATE) {\r\n      <div class=\"truncate\" matTooltip=\"{{ getNumber(value) | simpleDateTime }}\">{{ getNumber(value) | simpleDateTime }}</div>\r\n    }\r\n    @case (DataType.DURATION) {\r\n      {{ getNumber(value) | duration }}\r\n    }\r\n    @case (DataType.LINK) {\r\n      <div class=\"truncate\" matTooltip=\"{{ value }}\">\r\n        <a href=\"{{value}}\" target=\"_blank\" class=\"underline\">{{ value }}</a>\r\n      </div>\r\n    }\r\n    @case (DataType.VECTOR) {\r\n      <div class=\"truncate\" matTooltip=\"{{ getVectorValue(value) }}\">{{ getVectorValue(value) }}</div>\r\n    }\r\n    @case (DataType.NUMERIC){\r\n      <div class=\"truncate\" matTooltip=\"{{ getNumber(value) }} {{ unit() }}\">{{getNumber(value) | localizedNumber}} {{ unit() }}</div>\r\n    }\r\n    @default {\r\n      <div class=\"truncate\" matTooltip=\"{{ value }} {{ unit() }}\">{{ value }} {{ unit() }}</div>\r\n    }\r\n  }\r\n} @else {\r\n  -\r\n}\r\n", styles: [".color-circle{width:1.5rem;height:1.5rem;margin-top:.25rem;border-radius:9999px}\n"] }]
+            args: [{ selector: 'app-value-display', imports: [SharedModule, DurationPipe, SimpleDateTimePipe, LocalizedNumberPipe], template: "@if (value(); as value) {\n  @switch (type()) {\n    @case (DataType.BOOLEAN) {\n      <mat-icon>{{ value === 'true' ? 'check' : 'close' }}</mat-icon>\n    }\n    @case (DataType.COLOR) {\n      <div class=\"color-circle\" [style.background-color]=\"value\"></div>\n    }\n    @case (DataType.DATE) {\n      <div class=\"truncate\" matTooltip=\"{{ getNumber(value) | simpleDateTime }}\">{{ getNumber(value) | simpleDateTime }}</div>\n    }\n    @case (DataType.DURATION) {\n      {{ getNumber(value) | duration }}\n    }\n    @case (DataType.LINK) {\n      <div class=\"truncate\" matTooltip=\"{{ value }}\">\n        <a href=\"{{value}}\" target=\"_blank\" class=\"underline\">{{ value }}</a>\n      </div>\n    }\n    @case (DataType.VECTOR) {\n      <div class=\"truncate\" matTooltip=\"{{ getVectorValue(value) }}\">{{ getVectorValue(value) }}</div>\n    }\n    @case (DataType.NUMERIC){\n      <div class=\"truncate\" matTooltip=\"{{ getNumber(value) }} {{ unit() }}\">{{getNumber(value) | localizedNumber}} {{ unit() }}</div>\n    }\n    @default {\n      <div class=\"truncate\" matTooltip=\"{{ value }} {{ unit() }}\">{{ value }} {{ unit() }}</div>\n    }\n  }\n} @else {\n  -\n}\n", styles: [".color-circle{width:1.5rem;height:1.5rem;margin-top:.25rem;border-radius:9999px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: true }] }], unit: [{ type: i0.Input, args: [{ isSignal: true, alias: "unit", required: false }] }] } });
 
 class ValueInputBooleanComponent {
@@ -6185,7 +6185,7 @@ class ValueInputBooleanComponent {
         effect(() => {
             const validators = this.validators() ?? [];
             this.formControl.setValidators([...validators]);
-            this.formControl.updateValueAndValidity({ emitEvent: false });
+            this.formControl.updateValueAndValidity({ emitEvent: true });
         });
     }
     onTouched = () => {
@@ -6238,7 +6238,7 @@ class ValueInputBooleanComponent {
                 useExisting: forwardRef(() => ValueInputBooleanComponent),
                 multi: true,
             }
-        ], ngImport: i0, template: "<mat-slide-toggle [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\r\n  <div class=\"flex flex-col ml-2\">\r\n    <span class=\"text-xs font-light\"> {{ name() }} </span>\r\n    <span>{{ formControl.value ? ('DATA_BROWSER.ATTRIBUTE_VALUE_ENABLED' | translate) : ('DATA_BROWSER.ATTRIBUTE_VALUE_DISABLED' | translate) }}</span>\r\n  </div>\r\n</mat-slide-toggle>\r\n@for (error of getErrors(); track error) {\r\n  <mat-error *ngIf=\"!showErrorInTooltip()\" class=\"ml-4 mt-[-8px] text-[12px]\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate }}</mat-error>\r\n}\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+        ], ngImport: i0, template: "<mat-slide-toggle [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n  <div class=\"flex flex-col ml-2\">\n    <span class=\"text-xs font-light\"> {{ name() }} </span>\n    <span>{{ formControl.value ? ('DATA_BROWSER.ATTRIBUTE_VALUE_ENABLED' | translate) : ('DATA_BROWSER.ATTRIBUTE_VALUE_DISABLED' | translate) }}</span>\n  </div>\n</mat-slide-toggle>\n@for (error of getErrors(); track error) {\n  <mat-error *ngIf=\"!showErrorInTooltip()\" class=\"ml-4 mt-[-8px] text-[12px]\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate }}</mat-error>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueInputBooleanComponent, decorators: [{
             type: Component,
@@ -6253,7 +6253,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                             useExisting: forwardRef(() => ValueInputBooleanComponent),
                             multi: true,
                         }
-                    ], template: "<mat-slide-toggle [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\r\n  <div class=\"flex flex-col ml-2\">\r\n    <span class=\"text-xs font-light\"> {{ name() }} </span>\r\n    <span>{{ formControl.value ? ('DATA_BROWSER.ATTRIBUTE_VALUE_ENABLED' | translate) : ('DATA_BROWSER.ATTRIBUTE_VALUE_DISABLED' | translate) }}</span>\r\n  </div>\r\n</mat-slide-toggle>\r\n@for (error of getErrors(); track error) {\r\n  <mat-error *ngIf=\"!showErrorInTooltip()\" class=\"ml-4 mt-[-8px] text-[12px]\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate }}</mat-error>\r\n}\r\n" }]
+                    ], template: "<mat-slide-toggle [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n  <div class=\"flex flex-col ml-2\">\n    <span class=\"text-xs font-light\"> {{ name() }} </span>\n    <span>{{ formControl.value ? ('DATA_BROWSER.ATTRIBUTE_VALUE_ENABLED' | translate) : ('DATA_BROWSER.ATTRIBUTE_VALUE_DISABLED' | translate) }}</span>\n  </div>\n</mat-slide-toggle>\n@for (error of getErrors(); track error) {\n  <mat-error *ngIf=\"!showErrorInTooltip()\" class=\"ml-4 mt-[-8px] text-[12px]\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate }}</mat-error>\n}\n" }]
         }], ctorParameters: () => [{ type: i1$1.TranslateService }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], validators: [{ type: i0.Input, args: [{ isSignal: true, alias: "validators", required: false }] }], showErrorInTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrorInTooltip", required: false }] }] } });
 
 class ValueInputColorComponent {
@@ -6273,7 +6273,7 @@ class ValueInputColorComponent {
         effect(() => {
             const validators = this.validators() ?? [];
             this.formControl.setValidators([...validators, this.hexadecimalColorValidator]);
-            this.formControl.updateValueAndValidity({ emitEvent: false });
+            this.formControl.updateValueAndValidity({ emitEvent: true });
         });
     }
     // ControlValueAccessor methods
@@ -6346,7 +6346,7 @@ class ValueInputColorComponent {
                 useExisting: forwardRef(() => ValueInputColorComponent),
                 multi: true,
             }
-        ], viewQueries: [{ propertyName: "colorPicker", first: true, predicate: ["colorPicker"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-form-field class=\"w-full relative\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\r\n  <mat-label>{{ name() }}</mat-label>\r\n  <input matInput type=\"text\" [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" (click)=\"openColorPicker()\">\r\n  <input type=\"color\" #colorPicker [value]=\"formControl.value\" (input)=\"onColorPickerChange($event)\" class=\"absolute opacity-0 right-55 top-full mt-1 z-10\" [class.hidden]=\"!showPicker\">\r\n  <div class=\"w-5 h-5 rounded-full mr-4 cursor-pointer\" [style.background-color]=\"formControl.getRawValue()\" matSuffix (click)=\"openColorPicker()\">&nbsp;</div>\r\n\r\n  @for (error of getErrors(); track error) {\r\n    <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate :{max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\r\n  }\r\n</mat-form-field>\r\n", styles: ["mat-form-field input[type=color]{width:auto;height:auto}:host{--color-picker-width: 250px}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+        ], viewQueries: [{ propertyName: "colorPicker", first: true, predicate: ["colorPicker"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-form-field class=\"w-full relative\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n  <mat-label>{{ name() }}</mat-label>\n  <input matInput type=\"text\" [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" (click)=\"openColorPicker()\">\n  <input type=\"color\" #colorPicker [value]=\"formControl.value\" (input)=\"onColorPickerChange($event)\" class=\"absolute opacity-0 right-55 top-full mt-1 z-10\" [class.hidden]=\"!showPicker\">\n  <div class=\"w-5 h-5 rounded-full mr-4 cursor-pointer\" [style.background-color]=\"formControl.getRawValue()\" matSuffix (click)=\"openColorPicker()\">&nbsp;</div>\n\n  @for (error of getErrors(); track error) {\n    <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate :{max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\n  }\n</mat-form-field>\n", styles: ["mat-form-field input[type=color]{width:auto;height:auto}:host{--color-picker-width: 250px}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueInputColorComponent, decorators: [{
             type: Component,
@@ -6361,7 +6361,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                             useExisting: forwardRef(() => ValueInputColorComponent),
                             multi: true,
                         }
-                    ], template: "<mat-form-field class=\"w-full relative\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\r\n  <mat-label>{{ name() }}</mat-label>\r\n  <input matInput type=\"text\" [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" (click)=\"openColorPicker()\">\r\n  <input type=\"color\" #colorPicker [value]=\"formControl.value\" (input)=\"onColorPickerChange($event)\" class=\"absolute opacity-0 right-55 top-full mt-1 z-10\" [class.hidden]=\"!showPicker\">\r\n  <div class=\"w-5 h-5 rounded-full mr-4 cursor-pointer\" [style.background-color]=\"formControl.getRawValue()\" matSuffix (click)=\"openColorPicker()\">&nbsp;</div>\r\n\r\n  @for (error of getErrors(); track error) {\r\n    <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate :{max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\r\n  }\r\n</mat-form-field>\r\n", styles: ["mat-form-field input[type=color]{width:auto;height:auto}:host{--color-picker-width: 250px}\n"] }]
+                    ], template: "<mat-form-field class=\"w-full relative\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n  <mat-label>{{ name() }}</mat-label>\n  <input matInput type=\"text\" [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" (click)=\"openColorPicker()\">\n  <input type=\"color\" #colorPicker [value]=\"formControl.value\" (input)=\"onColorPickerChange($event)\" class=\"absolute opacity-0 right-55 top-full mt-1 z-10\" [class.hidden]=\"!showPicker\">\n  <div class=\"w-5 h-5 rounded-full mr-4 cursor-pointer\" [style.background-color]=\"formControl.getRawValue()\" matSuffix (click)=\"openColorPicker()\">&nbsp;</div>\n\n  @for (error of getErrors(); track error) {\n    <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate :{max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\n  }\n</mat-form-field>\n", styles: ["mat-form-field input[type=color]{width:auto;height:auto}:host{--color-picker-width: 250px}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.TranslateService }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], colorPicker: [{ type: i0.ViewChild, args: ['colorPicker', { isSignal: true }] }], validators: [{ type: i0.Input, args: [{ isSignal: true, alias: "validators", required: false }] }], showErrorInTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrorInTooltip", required: false }] }] } });
 
 class ValueInputDateComponent {
@@ -6376,7 +6376,7 @@ class ValueInputDateComponent {
         effect(() => {
             const validators = this.validators() ?? [];
             this.formControl.setValidators([...validators]);
-            this.formControl.updateValueAndValidity({ emitEvent: false });
+            this.formControl.updateValueAndValidity({ emitEvent: true });
         });
     }
     // Control Value Accessor
@@ -6429,7 +6429,7 @@ class ValueInputDateComponent {
                 useExisting: forwardRef(() => ValueInputDateComponent),
                 multi: true,
             }
-        ], ngImport: i0, template: "<app-date-time-form-field [formControl]=\"formControl\" [validators]=\"validators()\" [showErrorInTooltip]=\"showErrorInTooltip()\" class=\"w-full\"></app-date-time-form-field>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: DateTimeFormFieldComponent, selector: "app-date-time-form-field", inputs: ["dateLabel", "timeLabel", "validators", "showErrorInTooltip"] }] });
+        ], ngImport: i0, template: "<app-date-time-form-field [formControl]=\"formControl\" [validators]=\"validators()\" [showErrorInTooltip]=\"showErrorInTooltip()\" class=\"w-full\"></app-date-time-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: DateTimeFormFieldComponent, selector: "app-date-time-form-field", inputs: ["dateLabel", "timeLabel", "validators", "showErrorInTooltip"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueInputDateComponent, decorators: [{
             type: Component,
@@ -6444,7 +6444,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                             useExisting: forwardRef(() => ValueInputDateComponent),
                             multi: true,
                         }
-                    ], template: "<app-date-time-form-field [formControl]=\"formControl\" [validators]=\"validators()\" [showErrorInTooltip]=\"showErrorInTooltip()\" class=\"w-full\"></app-date-time-form-field>\r\n" }]
+                    ], template: "<app-date-time-form-field [formControl]=\"formControl\" [validators]=\"validators()\" [showErrorInTooltip]=\"showErrorInTooltip()\" class=\"w-full\"></app-date-time-form-field>\n" }]
         }], ctorParameters: () => [], propDecorators: { validators: [{ type: i0.Input, args: [{ isSignal: true, alias: "validators", required: false }] }], showErrorInTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrorInTooltip", required: false }] }] } });
 
 class ValueInputEnumComponent {
@@ -6463,7 +6463,7 @@ class ValueInputEnumComponent {
         effect(() => {
             const validators = this.validators() ?? [];
             this.formControl.setValidators([...validators]);
-            this.formControl.updateValueAndValidity({ emitEvent: false });
+            this.formControl.updateValueAndValidity({ emitEvent: true });
         });
     }
     // ControlValueAccessor methods
@@ -6519,7 +6519,7 @@ class ValueInputEnumComponent {
                 useExisting: forwardRef(() => ValueInputEnumComponent),
                 multi: true,
             }
-        ], ngImport: i0, template: "<div class=\"w-full flex flex-col gap-y-2\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\r\n  <mat-form-field appearance=\"outline\" class=\"w-full\">\r\n    <mat-label>{{ name() }}</mat-label>\r\n    <mat-select [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\">\r\n      @for (value of options(); track value) {\r\n        <mat-option [value]=\"value\">{{ value }}</mat-option>\r\n      }\r\n    </mat-select>\r\n\r\n    @for (error of getErrors(); track error) {\r\n      <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate :{max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\r\n    }\r\n  </mat-form-field>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+        ], ngImport: i0, template: "<div class=\"w-full flex flex-col gap-y-2\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n  <mat-form-field appearance=\"outline\" class=\"w-full\">\n    <mat-label>{{ name() }}</mat-label>\n    <mat-select [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\">\n      @for (value of options(); track value) {\n        <mat-option [value]=\"value\">{{ value }}</mat-option>\n      }\n    </mat-select>\n\n    @for (error of getErrors(); track error) {\n      <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate :{max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\n    }\n  </mat-form-field>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueInputEnumComponent, decorators: [{
             type: Component,
@@ -6534,7 +6534,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                             useExisting: forwardRef(() => ValueInputEnumComponent),
                             multi: true,
                         }
-                    ], template: "<div class=\"w-full flex flex-col gap-y-2\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\r\n  <mat-form-field appearance=\"outline\" class=\"w-full\">\r\n    <mat-label>{{ name() }}</mat-label>\r\n    <mat-select [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\">\r\n      @for (value of options(); track value) {\r\n        <mat-option [value]=\"value\">{{ value }}</mat-option>\r\n      }\r\n    </mat-select>\r\n\r\n    @for (error of getErrors(); track error) {\r\n      <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate :{max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\r\n    }\r\n  </mat-form-field>\r\n</div>\r\n" }]
+                    ], template: "<div class=\"w-full flex flex-col gap-y-2\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n  <mat-form-field appearance=\"outline\" class=\"w-full\">\n    <mat-label>{{ name() }}</mat-label>\n    <mat-select [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\">\n      @for (value of options(); track value) {\n        <mat-option [value]=\"value\">{{ value }}</mat-option>\n      }\n    </mat-select>\n\n    @for (error of getErrors(); track error) {\n      <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate :{max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\n    }\n  </mat-form-field>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1$1.TranslateService }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], validators: [{ type: i0.Input, args: [{ isSignal: true, alias: "validators", required: false }] }], showErrorInTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrorInTooltip", required: false }] }] } });
 
 class ValueInputHexadecimalComponent {
@@ -6548,7 +6548,7 @@ class ValueInputHexadecimalComponent {
         effect(() => {
             const validators = this.validators() ?? [];
             this.formControl.setValidators([...validators, this.hexadecimalValidator]);
-            this.formControl.updateValueAndValidity({ emitEvent: false });
+            this.formControl.updateValueAndValidity({ emitEvent: true });
         });
     }
     onTouched = () => {
@@ -6612,7 +6612,7 @@ class ValueInputHexadecimalComponent {
                 useExisting: forwardRef(() => ValueInputHexadecimalComponent),
                 multi: true,
             }
-        ], ngImport: i0, template: "<mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\r\n  <mat-label>{{ 'DATA_BROWSER.ATTRIBUTE_VALUE' | translate }}</mat-label>\r\n  <input matInput type=\"text\" [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" autocomplete=\"off\"/>\r\n\r\n    @for (error of getErrors(); track error) {\r\n      <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate :{max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\r\n    }\r\n</mat-form-field>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+        ], ngImport: i0, template: "<mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n  <mat-label>{{ 'DATA_BROWSER.ATTRIBUTE_VALUE' | translate }}</mat-label>\n  <input matInput type=\"text\" [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" autocomplete=\"off\"/>\n\n    @for (error of getErrors(); track error) {\n      <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate :{max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\n    }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueInputHexadecimalComponent, decorators: [{
             type: Component,
@@ -6627,7 +6627,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                             useExisting: forwardRef(() => ValueInputHexadecimalComponent),
                             multi: true,
                         }
-                    ], template: "<mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\r\n  <mat-label>{{ 'DATA_BROWSER.ATTRIBUTE_VALUE' | translate }}</mat-label>\r\n  <input matInput type=\"text\" [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" autocomplete=\"off\"/>\r\n\r\n    @for (error of getErrors(); track error) {\r\n      <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate :{max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\r\n    }\r\n</mat-form-field>\r\n" }]
+                    ], template: "<mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n  <mat-label>{{ 'DATA_BROWSER.ATTRIBUTE_VALUE' | translate }}</mat-label>\n  <input matInput type=\"text\" [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" autocomplete=\"off\"/>\n\n    @for (error of getErrors(); track error) {\n      <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate :{max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\n    }\n</mat-form-field>\n" }]
         }], ctorParameters: () => [{ type: i1$1.TranslateService }], propDecorators: { validators: [{ type: i0.Input, args: [{ isSignal: true, alias: "validators", required: false }] }], showErrorInTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrorInTooltip", required: false }] }] } });
 
 class ValueInputLinkComponent {
@@ -6644,7 +6644,7 @@ class ValueInputLinkComponent {
         effect(() => {
             const validators = this.validators() ?? [];
             this.formControl.setValidators([...validators, this.linkValidator]);
-            this.formControl.updateValueAndValidity({ emitEvent: false });
+            this.formControl.updateValueAndValidity({ emitEvent: true });
         });
     }
     // ControlValueAccessor methods
@@ -6706,7 +6706,7 @@ class ValueInputLinkComponent {
                 useExisting: forwardRef(() => ValueInputLinkComponent),
                 multi: true,
             }
-        ], ngImport: i0, template: "<mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\r\n  <mat-label>{{ 'DATA_BROWSER.ATTRIBUTE_VALUE' | translate }}</mat-label>\r\n  <input matInput type=\"text\" [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" autocomplete=\"off\"/>\r\n\r\n    @for (error of getErrors(); track error) {\r\n      <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate :{max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\r\n    }\r\n</mat-form-field>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+        ], ngImport: i0, template: "<mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n  <mat-label>{{ 'DATA_BROWSER.ATTRIBUTE_VALUE' | translate }}</mat-label>\n  <input matInput type=\"text\" [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" autocomplete=\"off\"/>\n\n    @for (error of getErrors(); track error) {\n      <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate :{max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\n    }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueInputLinkComponent, decorators: [{
             type: Component,
@@ -6721,7 +6721,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                             useExisting: forwardRef(() => ValueInputLinkComponent),
                             multi: true,
                         }
-                    ], template: "<mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\r\n  <mat-label>{{ 'DATA_BROWSER.ATTRIBUTE_VALUE' | translate }}</mat-label>\r\n  <input matInput type=\"text\" [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" autocomplete=\"off\"/>\r\n\r\n    @for (error of getErrors(); track error) {\r\n      <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate :{max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\r\n    }\r\n</mat-form-field>\r\n" }]
+                    ], template: "<mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n  <mat-label>{{ 'DATA_BROWSER.ATTRIBUTE_VALUE' | translate }}</mat-label>\n  <input matInput type=\"text\" [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" autocomplete=\"off\"/>\n\n    @for (error of getErrors(); track error) {\n      <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate :{max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\n    }\n</mat-form-field>\n" }]
         }], ctorParameters: () => [{ type: i1$1.TranslateService }], propDecorators: { validators: [{ type: i0.Input, args: [{ isSignal: true, alias: "validators", required: false }] }], showErrorInTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrorInTooltip", required: false }] }] } });
 
 class ValueInputLocationComponent {
@@ -6742,8 +6742,8 @@ class ValueInputLocationComponent {
             const validators = this.validators() ?? [];
             this.formGroup.get('latitude')?.setValidators([...validators, Validators.min(-90), Validators.max(90)]);
             this.formGroup.get('longitude')?.setValidators([...validators, Validators.min(-180), Validators.max(180)]);
-            this.formGroup.get('latitude')?.updateValueAndValidity({ emitEvent: false });
-            this.formGroup.get('longitude')?.updateValueAndValidity({ emitEvent: false });
+            this.formGroup.get('latitude')?.updateValueAndValidity({ emitEvent: true });
+            this.formGroup.get('longitude')?.updateValueAndValidity({ emitEvent: true });
         });
     }
     // ControlValueAccessor methods
@@ -6816,7 +6816,7 @@ class ValueInputLocationComponent {
                 useExisting: forwardRef(() => ValueInputLocationComponent),
                 multi: true,
             }
-        ], ngImport: i0, template: "<form [formGroup]=\"formGroup\">\r\n  <div class=\"flex flex-col gap-y-1\">\r\n    <div class=\"flex gap-4 w-full justify-between items-start\">\r\n      <mat-form-field class=\"flex-1\" [matTooltip]=\"getErrorTooltip('latitude')\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\r\n        <mat-label>{{ 'DATA_BROWSER.ATTRIBUTE_LATITUDE' | translate }}</mat-label>\r\n        <input matInput (paste)=\"handleLocationPaste($event, 'latitude')\" (blur)=\"this.formGroup.get('latitude')?.updateValueAndValidity({ emitEvent: false })\" formControlName=\"latitude\" type=\"number\" autocomplete=\"off\">\r\n\r\n          @for (error of getErrors('latitude'); track error) {\r\n            <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate: {max: 90, min: -90} }}</mat-error>\r\n          }\r\n      </mat-form-field>\r\n\r\n      <mat-form-field class=\"flex-1\" [matTooltip]=\"getErrorTooltip('longitude')\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\r\n        <mat-label>{{ 'DATA_BROWSER.ATTRIBUTE_LONGITUDE' | translate }}</mat-label>\r\n        <input matInput (paste)=\"handleLocationPaste($event, 'longitude')\" (blur)=\"this.formGroup.get('longitude')?.updateValueAndValidity({ emitEvent: false })\" formControlName=\"longitude\" type=\"number\" autocomplete=\"off\">\r\n\r\n          @for (error of getErrors('longitude'); track error) {\r\n            <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate: {max: 180, min: -180} }}</mat-error>\r\n          }\r\n      </mat-form-field>\r\n    </div>\r\n  </div>\r\n</form>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.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: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+        ], ngImport: i0, template: "<form [formGroup]=\"formGroup\">\n  <div class=\"flex flex-col gap-y-1\">\n    <div class=\"flex gap-4 w-full justify-between items-start\">\n      <mat-form-field class=\"flex-1\" [matTooltip]=\"getErrorTooltip('latitude')\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n        <mat-label>{{ 'DATA_BROWSER.ATTRIBUTE_LATITUDE' | translate }}</mat-label>\n        <input matInput (paste)=\"handleLocationPaste($event, 'latitude')\" (blur)=\"this.formGroup.get('latitude')?.updateValueAndValidity({ emitEvent: false })\" formControlName=\"latitude\" type=\"number\" autocomplete=\"off\">\n\n          @for (error of getErrors('latitude'); track error) {\n            <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate: {max: 90, min: -90} }}</mat-error>\n          }\n      </mat-form-field>\n\n      <mat-form-field class=\"flex-1\" [matTooltip]=\"getErrorTooltip('longitude')\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n        <mat-label>{{ 'DATA_BROWSER.ATTRIBUTE_LONGITUDE' | translate }}</mat-label>\n        <input matInput (paste)=\"handleLocationPaste($event, 'longitude')\" (blur)=\"this.formGroup.get('longitude')?.updateValueAndValidity({ emitEvent: false })\" formControlName=\"longitude\" type=\"number\" autocomplete=\"off\">\n\n          @for (error of getErrors('longitude'); track error) {\n            <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate: {max: 180, min: -180} }}</mat-error>\n          }\n      </mat-form-field>\n    </div>\n  </div>\n</form>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.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: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueInputLocationComponent, decorators: [{
             type: Component,
@@ -6831,7 +6831,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                             useExisting: forwardRef(() => ValueInputLocationComponent),
                             multi: true,
                         }
-                    ], template: "<form [formGroup]=\"formGroup\">\r\n  <div class=\"flex flex-col gap-y-1\">\r\n    <div class=\"flex gap-4 w-full justify-between items-start\">\r\n      <mat-form-field class=\"flex-1\" [matTooltip]=\"getErrorTooltip('latitude')\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\r\n        <mat-label>{{ 'DATA_BROWSER.ATTRIBUTE_LATITUDE' | translate }}</mat-label>\r\n        <input matInput (paste)=\"handleLocationPaste($event, 'latitude')\" (blur)=\"this.formGroup.get('latitude')?.updateValueAndValidity({ emitEvent: false })\" formControlName=\"latitude\" type=\"number\" autocomplete=\"off\">\r\n\r\n          @for (error of getErrors('latitude'); track error) {\r\n            <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate: {max: 90, min: -90} }}</mat-error>\r\n          }\r\n      </mat-form-field>\r\n\r\n      <mat-form-field class=\"flex-1\" [matTooltip]=\"getErrorTooltip('longitude')\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\r\n        <mat-label>{{ 'DATA_BROWSER.ATTRIBUTE_LONGITUDE' | translate }}</mat-label>\r\n        <input matInput (paste)=\"handleLocationPaste($event, 'longitude')\" (blur)=\"this.formGroup.get('longitude')?.updateValueAndValidity({ emitEvent: false })\" formControlName=\"longitude\" type=\"number\" autocomplete=\"off\">\r\n\r\n          @for (error of getErrors('longitude'); track error) {\r\n            <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate: {max: 180, min: -180} }}</mat-error>\r\n          }\r\n      </mat-form-field>\r\n    </div>\r\n  </div>\r\n</form>\r\n" }]
+                    ], template: "<form [formGroup]=\"formGroup\">\n  <div class=\"flex flex-col gap-y-1\">\n    <div class=\"flex gap-4 w-full justify-between items-start\">\n      <mat-form-field class=\"flex-1\" [matTooltip]=\"getErrorTooltip('latitude')\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n        <mat-label>{{ 'DATA_BROWSER.ATTRIBUTE_LATITUDE' | translate }}</mat-label>\n        <input matInput (paste)=\"handleLocationPaste($event, 'latitude')\" (blur)=\"this.formGroup.get('latitude')?.updateValueAndValidity({ emitEvent: false })\" formControlName=\"latitude\" type=\"number\" autocomplete=\"off\">\n\n          @for (error of getErrors('latitude'); track error) {\n            <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate: {max: 90, min: -90} }}</mat-error>\n          }\n      </mat-form-field>\n\n      <mat-form-field class=\"flex-1\" [matTooltip]=\"getErrorTooltip('longitude')\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n        <mat-label>{{ 'DATA_BROWSER.ATTRIBUTE_LONGITUDE' | translate }}</mat-label>\n        <input matInput (paste)=\"handleLocationPaste($event, 'longitude')\" (blur)=\"this.formGroup.get('longitude')?.updateValueAndValidity({ emitEvent: false })\" formControlName=\"longitude\" type=\"number\" autocomplete=\"off\">\n\n          @for (error of getErrors('longitude'); track error) {\n            <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate: {max: 180, min: -180} }}</mat-error>\n          }\n      </mat-form-field>\n    </div>\n  </div>\n</form>\n" }]
         }], ctorParameters: () => [{ type: i1$1.TranslateService }], propDecorators: { validators: [{ type: i0.Input, args: [{ isSignal: true, alias: "validators", required: false }] }], showErrorInTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrorInTooltip", required: false }] }] } });
 
 class ValueInputNumericComponent {
@@ -6849,7 +6849,7 @@ class ValueInputNumericComponent {
         effect(() => {
             const validators = this.validators() ?? [];
             this.formControl.setValidators([...validators, this.numberValidator()]);
-            this.formControl.updateValueAndValidity({ emitEvent: false });
+            this.formControl.updateValueAndValidity({ emitEvent: true });
         });
     }
     validate() {
@@ -6913,7 +6913,7 @@ class ValueInputNumericComponent {
                 useExisting: forwardRef(() => ValueInputNumericComponent),
                 multi: true,
             }
-        ], ngImport: i0, template: "<mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\r\n  <mat-label>{{ name() }}</mat-label>\r\n  <input matInput type=\"text\" [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" autocomplete=\"off\" wolkaboutLocalizedNumericInput/>\r\n\r\n    @for (error of getErrors(); track error) {\r\n      <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate :{max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\r\n  }\r\n</mat-form-field>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: LocalizedNumericInputDirective, selector: "input[wolkaboutLocalizedNumericInput]" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+        ], ngImport: i0, template: "<mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n  <mat-label>{{ name() }}</mat-label>\n  <input matInput type=\"text\" [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" autocomplete=\"off\" wolkaboutLocalizedNumericInput/>\n\n    @for (error of getErrors(); track error) {\n      <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate :{max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\n  }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: LocalizedNumericInputDirective, selector: "input[wolkaboutLocalizedNumericInput]" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueInputNumericComponent, decorators: [{
             type: Component,
@@ -6928,7 +6928,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                             useExisting: forwardRef(() => ValueInputNumericComponent),
                             multi: true,
                         }
-                    ], template: "<mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\r\n  <mat-label>{{ name() }}</mat-label>\r\n  <input matInput type=\"text\" [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" autocomplete=\"off\" wolkaboutLocalizedNumericInput/>\r\n\r\n    @for (error of getErrors(); track error) {\r\n      <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate :{max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\r\n  }\r\n</mat-form-field>\r\n" }]
+                    ], template: "<mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n  <mat-label>{{ name() }}</mat-label>\n  <input matInput type=\"text\" [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" autocomplete=\"off\" wolkaboutLocalizedNumericInput/>\n\n    @for (error of getErrors(); track error) {\n      <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate :{max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\n  }\n</mat-form-field>\n" }]
         }], ctorParameters: () => [{ type: i1$1.TranslateService }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], validators: [{ type: i0.Input, args: [{ isSignal: true, alias: "validators", required: false }] }], showErrorInTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrorInTooltip", required: false }] }] } });
 
 class ValueInputStringComponent {
@@ -6946,7 +6946,7 @@ class ValueInputStringComponent {
         effect(() => {
             const validators = this.validators() ?? [];
             this.formControl.setValidators([...validators]);
-            this.formControl.updateValueAndValidity({ emitEvent: false });
+            this.formControl.updateValueAndValidity({ emitEvent: true });
         });
     }
     // ControlValueAccessor methods
@@ -7002,7 +7002,7 @@ class ValueInputStringComponent {
                 useExisting: forwardRef(() => ValueInputStringComponent),
                 multi: true,
             }
-        ], ngImport: i0, template: "<mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\r\n  <mat-label>{{ name() }}</mat-label>\r\n  <input matInput [type]=\"'text'\" [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" autocomplete=\"off\"/>\r\n  @for (error of getErrors(); track error) {\r\n    <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate : {max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\r\n  }\r\n</mat-form-field>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+        ], ngImport: i0, template: "<mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n  <mat-label>{{ name() }}</mat-label>\n  <input matInput [type]=\"'text'\" [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" autocomplete=\"off\"/>\n  @for (error of getErrors(); track error) {\n    <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate : {max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\n  }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueInputStringComponent, decorators: [{
             type: Component,
@@ -7017,7 +7017,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                             useExisting: forwardRef(() => ValueInputStringComponent),
                             multi: true,
                         }
-                    ], template: "<mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\r\n  <mat-label>{{ name() }}</mat-label>\r\n  <input matInput [type]=\"'text'\" [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" autocomplete=\"off\"/>\r\n  @for (error of getErrors(); track error) {\r\n    <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate : {max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\r\n  }\r\n</mat-form-field>\r\n" }]
+                    ], template: "<mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n  <mat-label>{{ name() }}</mat-label>\n  <input matInput [type]=\"'text'\" [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" autocomplete=\"off\"/>\n  @for (error of getErrors(); track error) {\n    <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate : {max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\n  }\n</mat-form-field>\n" }]
         }], ctorParameters: () => [{ type: i1$1.TranslateService }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], validators: [{ type: i0.Input, args: [{ isSignal: true, alias: "validators", required: false }] }], showErrorInTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrorInTooltip", required: false }] }] } });
 
 class ValueInputVectorComponent {
@@ -7036,7 +7036,7 @@ class ValueInputVectorComponent {
         effect(() => {
             const validators = this.validators() ?? [];
             this.formControl.setValidators([...validators, this.validateOptions]);
-            this.formControl.updateValueAndValidity({ emitEvent: false });
+            this.formControl.updateValueAndValidity({ emitEvent: true });
         });
         effect(() => {
             const options = this.options();
@@ -7111,7 +7111,7 @@ class ValueInputVectorComponent {
                 useExisting: forwardRef(() => ValueInputVectorComponent),
                 multi: true,
             }
-        ], ngImport: i0, template: "<div class=\"w-full flex flex-col gap-y-2\">\r\n  <mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\r\n    <mat-label>{{ name() }} ({{ options()?.join(',') }})</mat-label>\r\n    <input matInput [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" class=\"w-full\">\r\n\r\n      @for (error of getErrors(); track error) {\r\n        <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate :{max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\r\n      }\r\n  </mat-form-field>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+        ], ngImport: i0, template: "<div class=\"w-full flex flex-col gap-y-2\">\n  <mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n    <mat-label>{{ name() }} ({{ options()?.join(',') }})</mat-label>\n    <input matInput [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" class=\"w-full\">\n\n      @for (error of getErrors(); track error) {\n        <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate :{max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\n      }\n  </mat-form-field>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueInputVectorComponent, decorators: [{
             type: Component,
@@ -7126,7 +7126,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                             useExisting: forwardRef(() => ValueInputVectorComponent),
                             multi: true,
                         }
-                    ], template: "<div class=\"w-full flex flex-col gap-y-2\">\r\n  <mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\r\n    <mat-label>{{ name() }} ({{ options()?.join(',') }})</mat-label>\r\n    <input matInput [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" class=\"w-full\">\r\n\r\n      @for (error of getErrors(); track error) {\r\n        <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate :{max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\r\n      }\r\n  </mat-form-field>\r\n</div>\r\n" }]
+                    ], template: "<div class=\"w-full flex flex-col gap-y-2\">\n  <mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n    <mat-label>{{ name() }} ({{ options()?.join(',') }})</mat-label>\n    <input matInput [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" class=\"w-full\">\n\n      @for (error of getErrors(); track error) {\n        <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate :{max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\n      }\n  </mat-form-field>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1$1.TranslateService }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], showErrorInTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrorInTooltip", required: false }] }], validators: [{ type: i0.Input, args: [{ isSignal: true, alias: "validators", required: false }] }] } });
 
 class ValueInputDurationComponent {
@@ -7152,7 +7152,7 @@ class ValueInputDurationComponent {
         effect(() => {
             const validators = this.validators() ?? [];
             this.formControl.setValidators([...validators, this.durationValidator]);
-            this.formControl.updateValueAndValidity({ emitEvent: false });
+            this.formControl.updateValueAndValidity({ emitEvent: true });
         });
     }
     writeValue(value) {
@@ -7227,7 +7227,7 @@ class ValueInputDurationComponent {
                 useExisting: forwardRef(() => ValueInputDurationComponent),
                 multi: true,
             }
-        ], ngImport: i0, template: "<mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\r\n  <mat-label>{{ name() }}</mat-label>\r\n  <input matInput [type]=\"'text'\" [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" autocomplete=\"off\"/>\r\n\r\n    @for (error of getErrors(); track error) {\r\n      <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate :{max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\r\n    }\r\n</mat-form-field>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+        ], ngImport: i0, template: "<mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n  <mat-label>{{ name() }}</mat-label>\n  <input matInput [type]=\"'text'\" [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" autocomplete=\"off\"/>\n\n    @for (error of getErrors(); track error) {\n      <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate :{max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\n    }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueInputDurationComponent, decorators: [{
             type: Component,
@@ -7242,7 +7242,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                             useExisting: forwardRef(() => ValueInputDurationComponent),
                             multi: true,
                         }
-                    ], template: "<mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\r\n  <mat-label>{{ name() }}</mat-label>\r\n  <input matInput [type]=\"'text'\" [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" autocomplete=\"off\"/>\r\n\r\n    @for (error of getErrors(); track error) {\r\n      <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate :{max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\r\n    }\r\n</mat-form-field>\r\n" }]
+                    ], template: "<mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n  <mat-label>{{ name() }}</mat-label>\n  <input matInput [type]=\"'text'\" [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" autocomplete=\"off\"/>\n\n    @for (error of getErrors(); track error) {\n      <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate :{max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\n    }\n</mat-form-field>\n" }]
         }], ctorParameters: () => [{ type: i0.DestroyRef }, { type: i1$1.TranslateService }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], validators: [{ type: i0.Input, args: [{ isSignal: true, alias: "validators", required: false }] }], showErrorInTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrorInTooltip", required: false }] }] } });
 
 class ValueInputComponent {
@@ -7259,6 +7259,7 @@ class ValueInputComponent {
             const validationConditions = this.validationConditions();
             const dataType = this.dataType();
             this.setValidators(validationConditions, dataType);
+            this.formControl.updateValueAndValidity();
         });
     }
     validate() {
@@ -7308,6 +7309,7 @@ class ValueInputComponent {
             validators.push(Validators.minLength(+validationConditions.minSize));
         }
         this.validators.set(validators);
+        console.log("formControl in value-input.component", this.formControl);
     }
     DataType = DataType;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -7322,7 +7324,7 @@ class ValueInputComponent {
                 useExisting: forwardRef(() => ValueInputComponent),
                 multi: true,
             }
-        ], ngImport: i0, template: "@switch (dataType()) {\r\n  @case (DataType.STRING) {\r\n    <app-value-input-string [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\"/>\r\n  }\r\n  @case (DataType.NUMERIC) {\r\n    <app-value-input-numeric [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\"/>\r\n  }\r\n  @case (DataType.BOOLEAN) {\r\n    <app-value-input-boolean [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\"/>\r\n  }\r\n  @case (DataType.HEXADECIMAL) {\r\n    <app-value-input-hexadecimal [showErrorInTooltip]=\"showErrorInTooltip()\" [validators]=\"validators()\" [formControl]=\"formControl\"/>\r\n  }\r\n  @case (DataType.COLOR) {\r\n    <app-value-input-color [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\"/>\r\n  }\r\n  @case (DataType.LINK) {\r\n    <app-value-input-link [showErrorInTooltip]=\"showErrorInTooltip()\" [validators]=\"validators()\" [formControl]=\"formControl\"/>\r\n  }\r\n  @case (DataType.DATE) {\r\n    <app-value-input-date [showErrorInTooltip]=\"showErrorInTooltip()\" [validators]=\"validators()\" [formControl]=\"formControl\"/>\r\n  }\r\n  @case (DataType.DURATION) {\r\n    <app-value-input-duration [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\"/>\r\n  }\r\n  @case (DataType.LOCATION) {\r\n    <app-value-input-location [showErrorInTooltip]=\"showErrorInTooltip()\" [validators]=\"validators()\" [formControl]=\"formControl\"/>\r\n  }\r\n  @case (DataType.VECTOR) {\r\n    <app-value-input-vector [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\" [options]=\"options()\"/>\r\n  }\r\n  @case (DataType.ENUM) {\r\n    <app-value-input-enum [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\" [options]=\"options()\"/>\r\n  }\r\n}\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ValueInputBooleanComponent, selector: "app-value-input-boolean", inputs: ["name", "validators", "showErrorInTooltip"] }, { kind: "component", type: ValueInputColorComponent, selector: "app-value-input-color", inputs: ["name", "validators", "showErrorInTooltip"] }, { kind: "component", type: ValueInputDateComponent, selector: "app-value-input-date", inputs: ["validators", "showErrorInTooltip"] }, { kind: "component", type: ValueInputEnumComponent, selector: "app-value-input-enum", inputs: ["options", "name", "validators", "showErrorInTooltip"] }, { kind: "component", type: ValueInputHexadecimalComponent, selector: "app-value-input-hexadecimal", inputs: ["validators", "showErrorInTooltip"] }, { kind: "component", type: ValueInputLinkComponent, selector: "app-value-input-link", inputs: ["validators", "showErrorInTooltip"] }, { kind: "component", type: ValueInputLocationComponent, selector: "app-value-input-location", inputs: ["validators", "showErrorInTooltip"] }, { kind: "component", type: ValueInputNumericComponent, selector: "app-value-input-numeric", inputs: ["name", "validators", "showErrorInTooltip"] }, { kind: "component", type: ValueInputStringComponent, selector: "app-value-input-string", inputs: ["name", "validators", "showErrorInTooltip"] }, { kind: "component", type: ValueInputVectorComponent, selector: "app-value-input-vector", inputs: ["options", "name", "showErrorInTooltip", "validators"] }, { kind: "component", type: ValueInputDurationComponent, selector: "app-value-input-duration", inputs: ["name", "validators", "showErrorInTooltip"] }] });
+        ], ngImport: i0, template: "@switch (dataType()) {\n  @case (DataType.STRING) {\n    <app-value-input-string [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\"/>\n  }\n  @case (DataType.NUMERIC) {\n    <app-value-input-numeric [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\"/>\n  }\n  @case (DataType.BOOLEAN) {\n    <app-value-input-boolean [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\"/>\n  }\n  @case (DataType.HEXADECIMAL) {\n    <app-value-input-hexadecimal [showErrorInTooltip]=\"showErrorInTooltip()\" [validators]=\"validators()\" [formControl]=\"formControl\"/>\n  }\n  @case (DataType.COLOR) {\n    <app-value-input-color [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\"/>\n  }\n  @case (DataType.LINK) {\n    <app-value-input-link [showErrorInTooltip]=\"showErrorInTooltip()\" [validators]=\"validators()\" [formControl]=\"formControl\"/>\n  }\n  @case (DataType.DATE) {\n    <app-value-input-date [showErrorInTooltip]=\"showErrorInTooltip()\" [validators]=\"validators()\" [formControl]=\"formControl\"/>\n  }\n  @case (DataType.DURATION) {\n    <app-value-input-duration [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\"/>\n  }\n  @case (DataType.LOCATION) {\n    <app-value-input-location [showErrorInTooltip]=\"showErrorInTooltip()\" [validators]=\"validators()\" [formControl]=\"formControl\"/>\n  }\n  @case (DataType.VECTOR) {\n    <app-value-input-vector [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\" [options]=\"options()\"/>\n  }\n  @case (DataType.ENUM) {\n    <app-value-input-enum [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\" [options]=\"options()\"/>\n  }\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ValueInputBooleanComponent, selector: "app-value-input-boolean", inputs: ["name", "validators", "showErrorInTooltip"] }, { kind: "component", type: ValueInputColorComponent, selector: "app-value-input-color", inputs: ["name", "validators", "showErrorInTooltip"] }, { kind: "component", type: ValueInputDateComponent, selector: "app-value-input-date", inputs: ["validators", "showErrorInTooltip"] }, { kind: "component", type: ValueInputEnumComponent, selector: "app-value-input-enum", inputs: ["options", "name", "validators", "showErrorInTooltip"] }, { kind: "component", type: ValueInputHexadecimalComponent, selector: "app-value-input-hexadecimal", inputs: ["validators", "showErrorInTooltip"] }, { kind: "component", type: ValueInputLinkComponent, selector: "app-value-input-link", inputs: ["validators", "showErrorInTooltip"] }, { kind: "component", type: ValueInputLocationComponent, selector: "app-value-input-location", inputs: ["validators", "showErrorInTooltip"] }, { kind: "component", type: ValueInputNumericComponent, selector: "app-value-input-numeric", inputs: ["name", "validators", "showErrorInTooltip"] }, { kind: "component", type: ValueInputStringComponent, selector: "app-value-input-string", inputs: ["name", "validators", "showErrorInTooltip"] }, { kind: "component", type: ValueInputVectorComponent, selector: "app-value-input-vector", inputs: ["options", "name", "showErrorInTooltip", "validators"] }, { kind: "component", type: ValueInputDurationComponent, selector: "app-value-input-duration", inputs: ["name", "validators", "showErrorInTooltip"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueInputComponent, decorators: [{
             type: Component,
@@ -7337,7 +7339,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                             useExisting: forwardRef(() => ValueInputComponent),
                             multi: true,
                         }
-                    ], template: "@switch (dataType()) {\r\n  @case (DataType.STRING) {\r\n    <app-value-input-string [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\"/>\r\n  }\r\n  @case (DataType.NUMERIC) {\r\n    <app-value-input-numeric [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\"/>\r\n  }\r\n  @case (DataType.BOOLEAN) {\r\n    <app-value-input-boolean [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\"/>\r\n  }\r\n  @case (DataType.HEXADECIMAL) {\r\n    <app-value-input-hexadecimal [showErrorInTooltip]=\"showErrorInTooltip()\" [validators]=\"validators()\" [formControl]=\"formControl\"/>\r\n  }\r\n  @case (DataType.COLOR) {\r\n    <app-value-input-color [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\"/>\r\n  }\r\n  @case (DataType.LINK) {\r\n    <app-value-input-link [showErrorInTooltip]=\"showErrorInTooltip()\" [validators]=\"validators()\" [formControl]=\"formControl\"/>\r\n  }\r\n  @case (DataType.DATE) {\r\n    <app-value-input-date [showErrorInTooltip]=\"showErrorInTooltip()\" [validators]=\"validators()\" [formControl]=\"formControl\"/>\r\n  }\r\n  @case (DataType.DURATION) {\r\n    <app-value-input-duration [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\"/>\r\n  }\r\n  @case (DataType.LOCATION) {\r\n    <app-value-input-location [showErrorInTooltip]=\"showErrorInTooltip()\" [validators]=\"validators()\" [formControl]=\"formControl\"/>\r\n  }\r\n  @case (DataType.VECTOR) {\r\n    <app-value-input-vector [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\" [options]=\"options()\"/>\r\n  }\r\n  @case (DataType.ENUM) {\r\n    <app-value-input-enum [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\" [options]=\"options()\"/>\r\n  }\r\n}\r\n" }]
+                    ], template: "@switch (dataType()) {\n  @case (DataType.STRING) {\n    <app-value-input-string [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\"/>\n  }\n  @case (DataType.NUMERIC) {\n    <app-value-input-numeric [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\"/>\n  }\n  @case (DataType.BOOLEAN) {\n    <app-value-input-boolean [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\"/>\n  }\n  @case (DataType.HEXADECIMAL) {\n    <app-value-input-hexadecimal [showErrorInTooltip]=\"showErrorInTooltip()\" [validators]=\"validators()\" [formControl]=\"formControl\"/>\n  }\n  @case (DataType.COLOR) {\n    <app-value-input-color [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\"/>\n  }\n  @case (DataType.LINK) {\n    <app-value-input-link [showErrorInTooltip]=\"showErrorInTooltip()\" [validators]=\"validators()\" [formControl]=\"formControl\"/>\n  }\n  @case (DataType.DATE) {\n    <app-value-input-date [showErrorInTooltip]=\"showErrorInTooltip()\" [validators]=\"validators()\" [formControl]=\"formControl\"/>\n  }\n  @case (DataType.DURATION) {\n    <app-value-input-duration [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\"/>\n  }\n  @case (DataType.LOCATION) {\n    <app-value-input-location [showErrorInTooltip]=\"showErrorInTooltip()\" [validators]=\"validators()\" [formControl]=\"formControl\"/>\n  }\n  @case (DataType.VECTOR) {\n    <app-value-input-vector [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\" [options]=\"options()\"/>\n  }\n  @case (DataType.ENUM) {\n    <app-value-input-enum [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\" [options]=\"options()\"/>\n  }\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], dataType: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataType", required: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], validationConditions: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationConditions", required: false }] }], showErrorInTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrorInTooltip", required: false }] }] } });
 
 class DoubleDrawerLayoutComponent {
@@ -7430,13 +7432,13 @@ class DoubleDrawerLayoutComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DoubleDrawerLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DoubleDrawerLayoutComponent, isStandalone: true, selector: "app-double-drawer-layout", inputs: { leftDrawerConfig: { classPropertyName: "leftDrawerConfig", publicName: "leftDrawerConfig", isSignal: true, isRequired: true, transformFunction: null }, rightDrawerConfig: { classPropertyName: "rightDrawerConfig", publicName: "rightDrawerConfig", isSignal: true, isRequired: false, transformFunction: null }, backdropConfig: { classPropertyName: "backdropConfig", publicName: "backdropConfig", isSignal: true, isRequired: true, transformFunction: null }, dialogConfig: { classPropertyName: "dialogConfig", publicName: "dialogConfig", isSignal: true, isRequired: false, transformFunction: null }, fullScreenConfig: { classPropertyName: "fullScreenConfig", publicName: "fullScreenConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { leftDrawerToggled: "leftDrawerToggled", rightDrawerToggled: "rightDrawerToggled" }, host: { listeners: { "window:mousemove": "onMouseMove()", "window:keydown": "onKeyDown($event)" } }, ngImport: i0, template: "<div class=\"w-full h-full relative\">\r\n  <div class=\"absolute h-full drawer\" [ngClass]=\"{open : isLeftDrawerOpen()}\" [ngStyle]=\"{'width': isLeftDrawerOpen() ? leftDrawerConfig().width : '0px'}\">\r\n    <button mat-flat-button class=\"drawer-toggle\"\r\n            (click)=\"isLeftDrawerOpen.set(!isLeftDrawerOpen())\"\r\n            [ngClass]=\"{\r\n               'destructive-flat-button': isLeftDrawerOpen(),\r\n               'drawer-toggle-name': leftDrawerConfig().title && !isLeftDrawerOpen()\r\n               }\"\r\n            [matTooltip]=\"isLeftDrawerOpen() ?\r\n              ('COMMON.COLLAPSE_NAVIGATION' | translate) :\r\n              leftDrawerConfig().title ?\r\n                leftDrawerConfig().title :\r\n                ('COMMON.EXPAND_NAVIGATION' | translate)\"\r\n            matTooltipPosition=\"right\">\r\n      @if (leftDrawerConfig().title && !isLeftDrawerOpen()) {\r\n        <span>{{ leftDrawerConfig().title }}</span>\r\n      } @else {\r\n        <span class=\"block\"><mat-icon [ngClass]=\"{'toggle-icon-small': !isLeftDrawerOpen()}\" [svgIcon]=\"isLeftDrawerOpen() ? 'close' : 'arrow_right'\"></mat-icon></span>\r\n      }\r\n    </button>\r\n    <div class=\"h-full w-full\" [ngClass]=\"{'overflow-hidden': !isLeftDrawerOpen()}\">\r\n      <ng-content select=\"[left-drawer]\"></ng-content>\r\n    </div>\r\n  </div>\r\n  <div class=\"h-full w-full content-wrapper\" [ngClass]=\"{'open': (isLeftDrawerOpen() || isRightDrawerOpen()) && backdropConfig().show}\">\r\n    <div class=\"message-wrapper\" [ngClass]=\"{'show': backdropConfig().showMessage}\">\r\n      <span>{{ backdropConfig().message | translate }}</span>\r\n    </div>\r\n    <div class=\"content-backdrop\" [ngClass]=\"{'transparent': backdropConfig().showTransparentBackdrop}\" (click)=\"backdropClick()\">\r\n    </div>\r\n    <div class=\"flex flex-col flex-auto gap-4 h-full w-full overflow-hidden relative\">\r\n      @if (showFullscreenButton()) {\r\n        <button mat-icon-button type=\"button\" class=\"absolute top-2 right-3 !z-10\" [ngClass]=\"!isLeftDrawerOpen() && !isRightDrawerOpen() ? '!block' : '!hidden' \" (mouseover)=\"mouseOver()\" (mouseout)=\"hoverActive.set(false)\"\r\n                [matTooltip]=\"fullScreenEnabled() ? ('COMMON.EXIT_FULLSCREEN' | translate) : ('COMMON.ENTER_FULLSCREEN' | translate)\" (click)=\"fullscreenService.toggleFullScreen(); hoverActive.set(false)\" matTooltipPosition=\"left\">\r\n          @if (fullScreenEnabled()) {\r\n            <mat-icon>fullscreen_exit</mat-icon>\r\n          } @else {\r\n            <mat-icon>fullscreen</mat-icon>\r\n          }\r\n        </button>\r\n      }\r\n      <ng-content select=\"[details]\"></ng-content>\r\n    </div>\r\n  </div>\r\n  <div class=\"absolute h-full drawer right\" [ngClass]=\"{open : isRightDrawerOpen()}\" [ngStyle]=\"{'width': isRightDrawerOpen() ? rightDrawerConfig()?.width : '0px'}\">\r\n    <button mat-flat-button class=\"drawer-toggle\"\r\n            (click)=\"toggleRightDrawer()\"\r\n            [ngClass]=\"{'destructive-flat-button': isRightDrawerOpen()}\"\r\n            [matTooltip]=\"isRightDrawerOpen() ? ('COMMON.COLLAPSE_NAVIGATION' | translate) : ('COMMON.EXPAND_NAVIGATION' | translate)\"\r\n            matTooltipPosition=\"right\">\r\n      <span class=\"block\"><mat-icon [svgIcon]=\"isRightDrawerOpen() ? 'close' : 'arrow_left'\"></mat-icon></span>\r\n    </button>\r\n    <div class=\"h-full w-full\" [ngClass]=\"{'overflow-hidden': !isRightDrawerOpen()}\">\r\n      <ng-content select=\"[right-drawer]\"></ng-content>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:flex;height:100%;width:100%;max-height:100%;max-width:100%;box-sizing:border-box}.drawer{z-index:10;width:0;max-width:calc(100% - 40px);transition:all .3s cubic-bezier(.4,0,.2,1) 0s;position:relative;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.drawer:after{content:\"\";display:block;width:100%;height:100%;opacity:.6;position:absolute;inset:0;background-color:var(--mat-sys-surface-container);z-index:-1}.drawer .drawer-toggle{position:absolute;bottom:16px;right:0;word-break:keep-all;white-space:nowrap;min-width:fit-content!important;width:fit-content!important;transform:translate(100%);border-radius:0 5px 5px 0!important;padding:0 10px}.drawer .drawer-toggle.drawer-toggle-name{max-width:300px!important;min-width:unset!important;overflow:hidden}.drawer .drawer-toggle.drawer-toggle-name span{display:block;max-width:280px;overflow:hidden;text-overflow:ellipsis}.drawer .drawer-toggle .toggle-icon-small{margin:0 6px;height:10px;width:10px}.drawer.right{right:0;top:0}.drawer.right .drawer-toggle{display:none;position:absolute;bottom:16px;left:0;transform:translate(-100%);border-radius:5px 0 0 5px!important}.drawer.right .drawer-toggle span{line-height:12px}.drawer.right .drawer-toggle span mat-icon{height:24px;width:24px}.drawer.open{border-right:1px solid var(--mat-sys-outline-variant)}.drawer.open.right .drawer-toggle{display:block}.drawer.open.right{border-right:unset;border-left:1px solid var(--mat-sys-outline-variant)}.drawer.open .drawer-toggle span{line-height:12px}.drawer.open .drawer-toggle span mat-icon{height:24px;width:24px}:host-context(.alt-theme) .drawer.after{background-color:var(--mat-sys-surface-container-lowest)}.content-wrapper{position:relative}.content-wrapper .content-backdrop{transition:all .3s cubic-bezier(.4,0,.2,1) 0s;width:100%;height:100%;position:absolute;top:0;left:0;opacity:0;z-index:-1;background-color:transparent}.content-wrapper .message-wrapper{transition:all .5s cubic-bezier(.4,0,.2,1) 0s;position:absolute;right:32px;top:24px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:10px;padding:0 1rem;height:2.5rem;box-sizing:border-box;background-color:var(--mat-sys-primary);color:var(--mat-sys-surface-container);opacity:0;z-index:-1}.content-wrapper .message-wrapper.show{opacity:1;z-index:4}.content-wrapper.open .content-backdrop{background-color:#000;opacity:.5;z-index:3}.content-wrapper.open .content-backdrop.transparent{background-color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DoubleDrawerLayoutComponent, isStandalone: true, selector: "app-double-drawer-layout", inputs: { leftDrawerConfig: { classPropertyName: "leftDrawerConfig", publicName: "leftDrawerConfig", isSignal: true, isRequired: true, transformFunction: null }, rightDrawerConfig: { classPropertyName: "rightDrawerConfig", publicName: "rightDrawerConfig", isSignal: true, isRequired: false, transformFunction: null }, backdropConfig: { classPropertyName: "backdropConfig", publicName: "backdropConfig", isSignal: true, isRequired: true, transformFunction: null }, dialogConfig: { classPropertyName: "dialogConfig", publicName: "dialogConfig", isSignal: true, isRequired: false, transformFunction: null }, fullScreenConfig: { classPropertyName: "fullScreenConfig", publicName: "fullScreenConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { leftDrawerToggled: "leftDrawerToggled", rightDrawerToggled: "rightDrawerToggled" }, host: { listeners: { "window:mousemove": "onMouseMove()", "window:keydown": "onKeyDown($event)" } }, ngImport: i0, template: "<div class=\"w-full h-full relative\">\n  <div class=\"absolute h-full drawer\" [ngClass]=\"{open : isLeftDrawerOpen()}\" [ngStyle]=\"{'width': isLeftDrawerOpen() ? leftDrawerConfig().width : '0px'}\">\n    <button mat-flat-button class=\"drawer-toggle\"\n            (click)=\"isLeftDrawerOpen.set(!isLeftDrawerOpen())\"\n            [ngClass]=\"{\n               'destructive-flat-button': isLeftDrawerOpen(),\n               'drawer-toggle-name': leftDrawerConfig().title && !isLeftDrawerOpen()\n               }\"\n            [matTooltip]=\"isLeftDrawerOpen() ?\n              ('COMMON.COLLAPSE_NAVIGATION' | translate) :\n              leftDrawerConfig().title ?\n                leftDrawerConfig().title :\n                ('COMMON.EXPAND_NAVIGATION' | translate)\"\n            matTooltipPosition=\"right\">\n      @if (leftDrawerConfig().title && !isLeftDrawerOpen()) {\n        <span>{{ leftDrawerConfig().title }}</span>\n      } @else {\n        <span class=\"block\"><mat-icon [ngClass]=\"{'toggle-icon-small': !isLeftDrawerOpen()}\" [svgIcon]=\"isLeftDrawerOpen() ? 'close' : 'arrow_right'\"></mat-icon></span>\n      }\n    </button>\n    <div class=\"h-full w-full\" [ngClass]=\"{'overflow-hidden': !isLeftDrawerOpen()}\">\n      <ng-content select=\"[left-drawer]\"></ng-content>\n    </div>\n  </div>\n  <div class=\"h-full w-full content-wrapper\" [ngClass]=\"{'open': (isLeftDrawerOpen() || isRightDrawerOpen()) && backdropConfig().show}\">\n    <div class=\"message-wrapper\" [ngClass]=\"{'show': backdropConfig().showMessage}\">\n      <span>{{ backdropConfig().message | translate }}</span>\n    </div>\n    <div class=\"content-backdrop\" [ngClass]=\"{'transparent': backdropConfig().showTransparentBackdrop}\" (click)=\"backdropClick()\">\n    </div>\n    <div class=\"flex flex-col flex-auto gap-4 h-full w-full overflow-hidden relative\">\n      @if (showFullscreenButton()) {\n        <button mat-icon-button type=\"button\" class=\"absolute top-2 right-3 !z-10\" [ngClass]=\"!isLeftDrawerOpen() && !isRightDrawerOpen() ? '!block' : '!hidden' \" (mouseover)=\"mouseOver()\" (mouseout)=\"hoverActive.set(false)\"\n                [matTooltip]=\"fullScreenEnabled() ? ('COMMON.EXIT_FULLSCREEN' | translate) : ('COMMON.ENTER_FULLSCREEN' | translate)\" (click)=\"fullscreenService.toggleFullScreen(); hoverActive.set(false)\" matTooltipPosition=\"left\">\n          @if (fullScreenEnabled()) {\n            <mat-icon>fullscreen_exit</mat-icon>\n          } @else {\n            <mat-icon>fullscreen</mat-icon>\n          }\n        </button>\n      }\n      <ng-content select=\"[details]\"></ng-content>\n    </div>\n  </div>\n  <div class=\"absolute h-full drawer right\" [ngClass]=\"{open : isRightDrawerOpen()}\" [ngStyle]=\"{'width': isRightDrawerOpen() ? rightDrawerConfig()?.width : '0px'}\">\n    <button mat-flat-button class=\"drawer-toggle\"\n            (click)=\"toggleRightDrawer()\"\n            [ngClass]=\"{'destructive-flat-button': isRightDrawerOpen()}\"\n            [matTooltip]=\"isRightDrawerOpen() ? ('COMMON.COLLAPSE_NAVIGATION' | translate) : ('COMMON.EXPAND_NAVIGATION' | translate)\"\n            matTooltipPosition=\"right\">\n      <span class=\"block\"><mat-icon [svgIcon]=\"isRightDrawerOpen() ? 'close' : 'arrow_left'\"></mat-icon></span>\n    </button>\n    <div class=\"h-full w-full\" [ngClass]=\"{'overflow-hidden': !isRightDrawerOpen()}\">\n      <ng-content select=\"[right-drawer]\"></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex;height:100%;width:100%;max-height:100%;max-width:100%;box-sizing:border-box}.drawer{z-index:10;width:0;max-width:calc(100% - 40px);transition:all .3s cubic-bezier(.4,0,.2,1) 0s;position:relative;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.drawer:after{content:\"\";display:block;width:100%;height:100%;opacity:.6;position:absolute;inset:0;background-color:var(--mat-sys-surface-container);z-index:-1}.drawer .drawer-toggle{position:absolute;bottom:16px;right:0;word-break:keep-all;white-space:nowrap;min-width:fit-content!important;width:fit-content!important;transform:translate(100%);border-radius:0 5px 5px 0!important;padding:0 10px}.drawer .drawer-toggle.drawer-toggle-name{max-width:300px!important;min-width:unset!important;overflow:hidden}.drawer .drawer-toggle.drawer-toggle-name span{display:block;max-width:280px;overflow:hidden;text-overflow:ellipsis}.drawer .drawer-toggle .toggle-icon-small{margin:0 6px;height:10px;width:10px}.drawer.right{right:0;top:0}.drawer.right .drawer-toggle{display:none;position:absolute;bottom:16px;left:0;transform:translate(-100%);border-radius:5px 0 0 5px!important}.drawer.right .drawer-toggle span{line-height:12px}.drawer.right .drawer-toggle span mat-icon{height:24px;width:24px}.drawer.open{border-right:1px solid var(--mat-sys-outline-variant)}.drawer.open.right .drawer-toggle{display:block}.drawer.open.right{border-right:unset;border-left:1px solid var(--mat-sys-outline-variant)}.drawer.open .drawer-toggle span{line-height:12px}.drawer.open .drawer-toggle span mat-icon{height:24px;width:24px}:host-context(.alt-theme) .drawer.after{background-color:var(--mat-sys-surface-container-lowest)}.content-wrapper{position:relative}.content-wrapper .content-backdrop{transition:all .3s cubic-bezier(.4,0,.2,1) 0s;width:100%;height:100%;position:absolute;top:0;left:0;opacity:0;z-index:-1;background-color:transparent}.content-wrapper .message-wrapper{transition:all .5s cubic-bezier(.4,0,.2,1) 0s;position:absolute;right:32px;top:24px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:10px;padding:0 1rem;height:2.5rem;box-sizing:border-box;background-color:var(--mat-sys-primary);color:var(--mat-sys-surface-container);opacity:0;z-index:-1}.content-wrapper .message-wrapper.show{opacity:1;z-index:4}.content-wrapper.open .content-backdrop{background-color:#000;opacity:.5;z-index:3}.content-wrapper.open .content-backdrop.transparent{background-color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DoubleDrawerLayoutComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-double-drawer-layout', imports: [
                         SharedModule
-                    ], template: "<div class=\"w-full h-full relative\">\r\n  <div class=\"absolute h-full drawer\" [ngClass]=\"{open : isLeftDrawerOpen()}\" [ngStyle]=\"{'width': isLeftDrawerOpen() ? leftDrawerConfig().width : '0px'}\">\r\n    <button mat-flat-button class=\"drawer-toggle\"\r\n            (click)=\"isLeftDrawerOpen.set(!isLeftDrawerOpen())\"\r\n            [ngClass]=\"{\r\n               'destructive-flat-button': isLeftDrawerOpen(),\r\n               'drawer-toggle-name': leftDrawerConfig().title && !isLeftDrawerOpen()\r\n               }\"\r\n            [matTooltip]=\"isLeftDrawerOpen() ?\r\n              ('COMMON.COLLAPSE_NAVIGATION' | translate) :\r\n              leftDrawerConfig().title ?\r\n                leftDrawerConfig().title :\r\n                ('COMMON.EXPAND_NAVIGATION' | translate)\"\r\n            matTooltipPosition=\"right\">\r\n      @if (leftDrawerConfig().title && !isLeftDrawerOpen()) {\r\n        <span>{{ leftDrawerConfig().title }}</span>\r\n      } @else {\r\n        <span class=\"block\"><mat-icon [ngClass]=\"{'toggle-icon-small': !isLeftDrawerOpen()}\" [svgIcon]=\"isLeftDrawerOpen() ? 'close' : 'arrow_right'\"></mat-icon></span>\r\n      }\r\n    </button>\r\n    <div class=\"h-full w-full\" [ngClass]=\"{'overflow-hidden': !isLeftDrawerOpen()}\">\r\n      <ng-content select=\"[left-drawer]\"></ng-content>\r\n    </div>\r\n  </div>\r\n  <div class=\"h-full w-full content-wrapper\" [ngClass]=\"{'open': (isLeftDrawerOpen() || isRightDrawerOpen()) && backdropConfig().show}\">\r\n    <div class=\"message-wrapper\" [ngClass]=\"{'show': backdropConfig().showMessage}\">\r\n      <span>{{ backdropConfig().message | translate }}</span>\r\n    </div>\r\n    <div class=\"content-backdrop\" [ngClass]=\"{'transparent': backdropConfig().showTransparentBackdrop}\" (click)=\"backdropClick()\">\r\n    </div>\r\n    <div class=\"flex flex-col flex-auto gap-4 h-full w-full overflow-hidden relative\">\r\n      @if (showFullscreenButton()) {\r\n        <button mat-icon-button type=\"button\" class=\"absolute top-2 right-3 !z-10\" [ngClass]=\"!isLeftDrawerOpen() && !isRightDrawerOpen() ? '!block' : '!hidden' \" (mouseover)=\"mouseOver()\" (mouseout)=\"hoverActive.set(false)\"\r\n                [matTooltip]=\"fullScreenEnabled() ? ('COMMON.EXIT_FULLSCREEN' | translate) : ('COMMON.ENTER_FULLSCREEN' | translate)\" (click)=\"fullscreenService.toggleFullScreen(); hoverActive.set(false)\" matTooltipPosition=\"left\">\r\n          @if (fullScreenEnabled()) {\r\n            <mat-icon>fullscreen_exit</mat-icon>\r\n          } @else {\r\n            <mat-icon>fullscreen</mat-icon>\r\n          }\r\n        </button>\r\n      }\r\n      <ng-content select=\"[details]\"></ng-content>\r\n    </div>\r\n  </div>\r\n  <div class=\"absolute h-full drawer right\" [ngClass]=\"{open : isRightDrawerOpen()}\" [ngStyle]=\"{'width': isRightDrawerOpen() ? rightDrawerConfig()?.width : '0px'}\">\r\n    <button mat-flat-button class=\"drawer-toggle\"\r\n            (click)=\"toggleRightDrawer()\"\r\n            [ngClass]=\"{'destructive-flat-button': isRightDrawerOpen()}\"\r\n            [matTooltip]=\"isRightDrawerOpen() ? ('COMMON.COLLAPSE_NAVIGATION' | translate) : ('COMMON.EXPAND_NAVIGATION' | translate)\"\r\n            matTooltipPosition=\"right\">\r\n      <span class=\"block\"><mat-icon [svgIcon]=\"isRightDrawerOpen() ? 'close' : 'arrow_left'\"></mat-icon></span>\r\n    </button>\r\n    <div class=\"h-full w-full\" [ngClass]=\"{'overflow-hidden': !isRightDrawerOpen()}\">\r\n      <ng-content select=\"[right-drawer]\"></ng-content>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:flex;height:100%;width:100%;max-height:100%;max-width:100%;box-sizing:border-box}.drawer{z-index:10;width:0;max-width:calc(100% - 40px);transition:all .3s cubic-bezier(.4,0,.2,1) 0s;position:relative;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.drawer:after{content:\"\";display:block;width:100%;height:100%;opacity:.6;position:absolute;inset:0;background-color:var(--mat-sys-surface-container);z-index:-1}.drawer .drawer-toggle{position:absolute;bottom:16px;right:0;word-break:keep-all;white-space:nowrap;min-width:fit-content!important;width:fit-content!important;transform:translate(100%);border-radius:0 5px 5px 0!important;padding:0 10px}.drawer .drawer-toggle.drawer-toggle-name{max-width:300px!important;min-width:unset!important;overflow:hidden}.drawer .drawer-toggle.drawer-toggle-name span{display:block;max-width:280px;overflow:hidden;text-overflow:ellipsis}.drawer .drawer-toggle .toggle-icon-small{margin:0 6px;height:10px;width:10px}.drawer.right{right:0;top:0}.drawer.right .drawer-toggle{display:none;position:absolute;bottom:16px;left:0;transform:translate(-100%);border-radius:5px 0 0 5px!important}.drawer.right .drawer-toggle span{line-height:12px}.drawer.right .drawer-toggle span mat-icon{height:24px;width:24px}.drawer.open{border-right:1px solid var(--mat-sys-outline-variant)}.drawer.open.right .drawer-toggle{display:block}.drawer.open.right{border-right:unset;border-left:1px solid var(--mat-sys-outline-variant)}.drawer.open .drawer-toggle span{line-height:12px}.drawer.open .drawer-toggle span mat-icon{height:24px;width:24px}:host-context(.alt-theme) .drawer.after{background-color:var(--mat-sys-surface-container-lowest)}.content-wrapper{position:relative}.content-wrapper .content-backdrop{transition:all .3s cubic-bezier(.4,0,.2,1) 0s;width:100%;height:100%;position:absolute;top:0;left:0;opacity:0;z-index:-1;background-color:transparent}.content-wrapper .message-wrapper{transition:all .5s cubic-bezier(.4,0,.2,1) 0s;position:absolute;right:32px;top:24px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:10px;padding:0 1rem;height:2.5rem;box-sizing:border-box;background-color:var(--mat-sys-primary);color:var(--mat-sys-surface-container);opacity:0;z-index:-1}.content-wrapper .message-wrapper.show{opacity:1;z-index:4}.content-wrapper.open .content-backdrop{background-color:#000;opacity:.5;z-index:3}.content-wrapper.open .content-backdrop.transparent{background-color:transparent}\n"] }]
+                    ], template: "<div class=\"w-full h-full relative\">\n  <div class=\"absolute h-full drawer\" [ngClass]=\"{open : isLeftDrawerOpen()}\" [ngStyle]=\"{'width': isLeftDrawerOpen() ? leftDrawerConfig().width : '0px'}\">\n    <button mat-flat-button class=\"drawer-toggle\"\n            (click)=\"isLeftDrawerOpen.set(!isLeftDrawerOpen())\"\n            [ngClass]=\"{\n               'destructive-flat-button': isLeftDrawerOpen(),\n               'drawer-toggle-name': leftDrawerConfig().title && !isLeftDrawerOpen()\n               }\"\n            [matTooltip]=\"isLeftDrawerOpen() ?\n              ('COMMON.COLLAPSE_NAVIGATION' | translate) :\n              leftDrawerConfig().title ?\n                leftDrawerConfig().title :\n                ('COMMON.EXPAND_NAVIGATION' | translate)\"\n            matTooltipPosition=\"right\">\n      @if (leftDrawerConfig().title && !isLeftDrawerOpen()) {\n        <span>{{ leftDrawerConfig().title }}</span>\n      } @else {\n        <span class=\"block\"><mat-icon [ngClass]=\"{'toggle-icon-small': !isLeftDrawerOpen()}\" [svgIcon]=\"isLeftDrawerOpen() ? 'close' : 'arrow_right'\"></mat-icon></span>\n      }\n    </button>\n    <div class=\"h-full w-full\" [ngClass]=\"{'overflow-hidden': !isLeftDrawerOpen()}\">\n      <ng-content select=\"[left-drawer]\"></ng-content>\n    </div>\n  </div>\n  <div class=\"h-full w-full content-wrapper\" [ngClass]=\"{'open': (isLeftDrawerOpen() || isRightDrawerOpen()) && backdropConfig().show}\">\n    <div class=\"message-wrapper\" [ngClass]=\"{'show': backdropConfig().showMessage}\">\n      <span>{{ backdropConfig().message | translate }}</span>\n    </div>\n    <div class=\"content-backdrop\" [ngClass]=\"{'transparent': backdropConfig().showTransparentBackdrop}\" (click)=\"backdropClick()\">\n    </div>\n    <div class=\"flex flex-col flex-auto gap-4 h-full w-full overflow-hidden relative\">\n      @if (showFullscreenButton()) {\n        <button mat-icon-button type=\"button\" class=\"absolute top-2 right-3 !z-10\" [ngClass]=\"!isLeftDrawerOpen() && !isRightDrawerOpen() ? '!block' : '!hidden' \" (mouseover)=\"mouseOver()\" (mouseout)=\"hoverActive.set(false)\"\n                [matTooltip]=\"fullScreenEnabled() ? ('COMMON.EXIT_FULLSCREEN' | translate) : ('COMMON.ENTER_FULLSCREEN' | translate)\" (click)=\"fullscreenService.toggleFullScreen(); hoverActive.set(false)\" matTooltipPosition=\"left\">\n          @if (fullScreenEnabled()) {\n            <mat-icon>fullscreen_exit</mat-icon>\n          } @else {\n            <mat-icon>fullscreen</mat-icon>\n          }\n        </button>\n      }\n      <ng-content select=\"[details]\"></ng-content>\n    </div>\n  </div>\n  <div class=\"absolute h-full drawer right\" [ngClass]=\"{open : isRightDrawerOpen()}\" [ngStyle]=\"{'width': isRightDrawerOpen() ? rightDrawerConfig()?.width : '0px'}\">\n    <button mat-flat-button class=\"drawer-toggle\"\n            (click)=\"toggleRightDrawer()\"\n            [ngClass]=\"{'destructive-flat-button': isRightDrawerOpen()}\"\n            [matTooltip]=\"isRightDrawerOpen() ? ('COMMON.COLLAPSE_NAVIGATION' | translate) : ('COMMON.EXPAND_NAVIGATION' | translate)\"\n            matTooltipPosition=\"right\">\n      <span class=\"block\"><mat-icon [svgIcon]=\"isRightDrawerOpen() ? 'close' : 'arrow_left'\"></mat-icon></span>\n    </button>\n    <div class=\"h-full w-full\" [ngClass]=\"{'overflow-hidden': !isRightDrawerOpen()}\">\n      <ng-content select=\"[right-drawer]\"></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex;height:100%;width:100%;max-height:100%;max-width:100%;box-sizing:border-box}.drawer{z-index:10;width:0;max-width:calc(100% - 40px);transition:all .3s cubic-bezier(.4,0,.2,1) 0s;position:relative;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.drawer:after{content:\"\";display:block;width:100%;height:100%;opacity:.6;position:absolute;inset:0;background-color:var(--mat-sys-surface-container);z-index:-1}.drawer .drawer-toggle{position:absolute;bottom:16px;right:0;word-break:keep-all;white-space:nowrap;min-width:fit-content!important;width:fit-content!important;transform:translate(100%);border-radius:0 5px 5px 0!important;padding:0 10px}.drawer .drawer-toggle.drawer-toggle-name{max-width:300px!important;min-width:unset!important;overflow:hidden}.drawer .drawer-toggle.drawer-toggle-name span{display:block;max-width:280px;overflow:hidden;text-overflow:ellipsis}.drawer .drawer-toggle .toggle-icon-small{margin:0 6px;height:10px;width:10px}.drawer.right{right:0;top:0}.drawer.right .drawer-toggle{display:none;position:absolute;bottom:16px;left:0;transform:translate(-100%);border-radius:5px 0 0 5px!important}.drawer.right .drawer-toggle span{line-height:12px}.drawer.right .drawer-toggle span mat-icon{height:24px;width:24px}.drawer.open{border-right:1px solid var(--mat-sys-outline-variant)}.drawer.open.right .drawer-toggle{display:block}.drawer.open.right{border-right:unset;border-left:1px solid var(--mat-sys-outline-variant)}.drawer.open .drawer-toggle span{line-height:12px}.drawer.open .drawer-toggle span mat-icon{height:24px;width:24px}:host-context(.alt-theme) .drawer.after{background-color:var(--mat-sys-surface-container-lowest)}.content-wrapper{position:relative}.content-wrapper .content-backdrop{transition:all .3s cubic-bezier(.4,0,.2,1) 0s;width:100%;height:100%;position:absolute;top:0;left:0;opacity:0;z-index:-1;background-color:transparent}.content-wrapper .message-wrapper{transition:all .5s cubic-bezier(.4,0,.2,1) 0s;position:absolute;right:32px;top:24px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:10px;padding:0 1rem;height:2.5rem;box-sizing:border-box;background-color:var(--mat-sys-primary);color:var(--mat-sys-surface-container);opacity:0;z-index:-1}.content-wrapper .message-wrapper.show{opacity:1;z-index:4}.content-wrapper.open .content-backdrop{background-color:#000;opacity:.5;z-index:3}.content-wrapper.open .content-backdrop.transparent{background-color:transparent}\n"] }]
         }], ctorParameters: () => [], propDecorators: { onMouseMove: [{
                 type: HostListener,
                 args: ['window:mousemove']