@sinequa/atomic-angular 0.4.20-dev.1 → 0.4.28

package/fesm2022/sinequa-atomic-angular.mjs

@@ -2,12 +2,12 @@ import * as i0 from '@angular/core';
 import { Injectable, inject, HostBinding, Component, Pipe, InjectionToken, computed, ChangeDetectorRef, DestroyRef, LOCALE_ID, Inject, Optional, input, output, signal, effect, assertInInjectionContext, runInInjectionContext, Injector, EventEmitter, Directive, viewChild, ElementRef, afterNextRender, untracked, linkedSignal, model, TemplateRef, HostListener, Renderer2, contentChildren, contentChild, booleanAttribute, resource, ViewContainerRef, viewChildren, numberAttribute, afterEveryRender } from '@angular/core';
 import { BehaviorSubject, Subscription, catchError, EMPTY, firstValueFrom, map, Subject, of, tap, throwError, filter, shareReplay, fromEvent, debounceTime, from, switchMap } from 'rxjs';
 import { TranslocoService, TranslocoPipe, provideTranslocoScope } from '@jsverse/transloco';
-import { DropdownComponent, DropdownContentComponent, InputComponent, ButtonComponent, cn, EllipsisIcon, ChevronRightIcon, MenuComponent, MenuContentComponent, MenuItemComponent, BadgeComponent, DialogComponent, DialogHeaderComponent, DialogTitleComponent, DialogContentComponent, DialogFooterComponent, ListItemComponent, SwitchComponent, SelectOptionDirective, DialogService, TabsComponent, TabsListComponent, TabComponent, ChevronLeftIconComponent, ChevronsLeftIconComponent, ChevronsRightIconComponent, Separator, SheetCloseDirective, SheetService, ButtonGroup, InputGroupInput, InputGroupComponent, InputGroupAddonComponent, SearchIcon, FilterIcon, DateRangePickerDirective, LoadingCircleIconComponent, CircleCheckIconComponent, PopoverComponent, HorizontalDividerComponent, CardComponent, CardHeaderComponent, CardContentComponent, CardFooterComponent, PopoverContentComponent, BookmarkIcon, UserIcon, TrashIcon, FolderIcon, VerticalDividerComponent, BreakpointObserverService, FlagEnglishIconComponent, FlagFrenchIconComponent, EditIcon, UndoIcon, AvatarComponent, AvatarFallbackComponent, AvatarImageComponent } from '@sinequa/ui';
+import { DropdownComponent, DropdownContentComponent, InputComponent, ButtonComponent, cn, EllipsisIcon, ChevronRightIcon, MenuComponent, MenuContentComponent, MenuItemComponent, BadgeComponent, DialogComponent, DialogHeaderComponent, DialogTitleComponent, DialogContentComponent, DialogFooterComponent, ListItemComponent, SwitchComponent, SelectOptionDirective, DialogService, TabsComponent, TabsListComponent, TabComponent, ChevronLeftIconComponent, ChevronsLeftIconComponent, ChevronsRightIconComponent, Separator, SheetCloseDirective, SheetService, ButtonGroup, InputGroupInput, InputGroupComponent, InputGroupAddonComponent, SearchIcon, FilterIcon, DateRangePickerDirective, LoadingCircleIconComponent, CircleCheckIconComponent, PopoverComponent, CardComponent, CardHeaderComponent, CardContentComponent, CardFooterComponent, PopoverContentComponent, BookmarkIcon, UserIcon, TrashIcon, FolderIcon, VerticalDividerComponent, BreakpointObserverService, HorizontalDividerComponent, FlagEnglishIconComponent, FlagFrenchIconComponent, EditIcon, UndoIcon, AvatarComponent, AvatarFallbackComponent, AvatarImageComponent } from '@sinequa/ui';
 import highlightWords from 'highlight-words';
 import { ActivatedRoute, Router, NavigationEnd, RouterLink, RouterModule } from '@angular/router';
 import { withDevtools } from '@angular-architects/ngrx-toolkit';
 import { signalStore, signalStoreFeature, withState, withMethods, patchState, getState, withComputed } from '@ngrx/signals';
-import { globalConfig, EngineType, extraColumns, sysLang, getQueryParamsFromUrl, logout, login, info, warn, notify, error, setGlobalConfig, addConcepts, queryParamsFromUrl, patchUserSettings, deleteUserSettings, fetchUserSettings, buildPathsAndLevels, escapeExpr, isAuthenticated, isExpired, debug, fetchSuggest, isObject, Audit, getMetadata, bisect, isNotInputEvent, fetchSponsoredLinks, fetchQuery, translateAggregationToDateOptions, aggItemRegex, parseValueAndOperatorFromItem, fetchSuggestField, fetchSimilarDocuments, fetchChangePassword, fetchSendPasswordResetEmail, expiresSoon, suggestionsToTreeAggregationNodes, labels, fetchLabels, guid, getRelativeDate, createUserProfile, deleteUserProfileProperty, patchUserProfile, isJsonable, addAuditAdditionalInfo, getToken, setToken, createHeaders } from '@sinequa/atomic';
+import { globalConfig, EngineType, extraColumns, sysLang, getQueryParamsFromUrl, logout, login, info, warn, error, setGlobalConfig, notify, addConcepts, queryParamsFromUrl, patchUserSettings, deleteUserSettings, fetchUserSettings, buildPathsAndLevels, escapeExpr, isAuthenticated, isExpired, debug, fetchSuggest, isObject, Audit, getMetadata, bisect, isNotInputEvent, fetchSponsoredLinks, fetchQuery, translateAggregationToDateOptions, aggItemRegex, parseValueAndOperatorFromItem, fetchSuggestField, fetchSimilarDocuments, fetchChangePassword, fetchSendPasswordResetEmail, expiresSoon, suggestionsToTreeAggregationNodes, labels, fetchLabels, guid, getRelativeDate, createUserProfile, deleteUserProfileProperty, patchUserProfile, isJsonable, addAuditAdditionalInfo, getToken, setToken, createHeaders } from '@sinequa/atomic';
 import { HttpClient, HttpParams, httpResource, HttpResponse, HttpHeaders, HttpContextToken } from '@angular/common/http';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { DatePipe, DATE_PIPE_DEFAULT_TIMEZONE, DATE_PIPE_DEFAULT_OPTIONS, Location, NgTemplateOutlet, NgStyle, NgClass, NgComponentOutlet } from '@angular/common';
@@ -1242,6 +1242,8 @@ const initialPrincipal = {
     fullName: "",
     isAdministrator: false,
     isDelegatedAdmin: false,
+    editablePartition: undefined,
+    passwordExpirationDate: null,
     description: "",
     param1: "",
     param2: "",
@@ -1264,6 +1266,7 @@ const PrincipalStore = signalStore({ providedIn: 'root' }, withDevtools('Princip
         if (!fullName)
             return '';
         return fullName
+            .trim()
             .split(' ')
             .map(word => word[0]?.toUpperCase())
             .join('');
@@ -1569,9 +1572,6 @@ async function signIn() {
         if (!response) {
             warn("No response from login, redirecting to login page", response);
         }
-        else {
-            notify.info("Successfully signed in");
-        }
     }
     catch (err) {
         error("Error during login", err);
@@ -4820,8 +4820,8 @@ class UserProfileService {
      * @param id - The ID of the user.
      * @returns An Observable that emits an the UserProfile object.
      */
-    getUserProfile(principal) {
-        return httpResource(() => (principal()?.userId ? `${this.API_URL}/${principal()?.userId}` : undefined), {
+    getUserProfile(userId) {
+        return httpResource(() => (userId() ? `${this.API_URL}/${userId()}` : undefined), {
             parse: (response) => {
                 return response;
             }
@@ -5077,7 +5077,7 @@ class DocumentLocatorComponent {
 
     <div #documentLocator class="flex grow items-center gap-2 overflow-auto">
       @for (segment of visibleSegments(); track $index) {
-        <button decoration="underline" class="text-foreground h-auto cursor-pointer whitespace-nowrap p-0" (click)="navigateToSegment($index)">
+        <button variant="link" class="text-foreground h-auto cursor-pointer whitespace-nowrap p-0" (click)="navigateToSegment($index)">
           {{ segment }}
         </button>
 
@@ -5140,7 +5140,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
 
     <div #documentLocator class="flex grow items-center gap-2 overflow-auto">
       @for (segment of visibleSegments(); track $index) {
-        <button decoration="underline" class="text-foreground h-auto cursor-pointer whitespace-nowrap p-0" (click)="navigateToSegment($index)">
+        <button variant="link" class="text-foreground h-auto cursor-pointer whitespace-nowrap p-0" (click)="navigateToSegment($index)">
           {{ segment }}
         </button>
 
@@ -5553,11 +5553,11 @@ class CollectionsDialog {
           }
 
         <DialogFooter class="flex flex-col">
-          <button decoration="outline" #closeBtn (click)="onClose()" >
+          <button variant="outline" #closeBtn (click)="onClose()" >
             {{ 'collections.close' | transloco }}
           </button>
           <button
-            [decoration]="creating() ? 'outline' : undefined"
+            [variant]="creating() ? 'outline' : undefined"
             tabindex="0"
             [attr.title]="(creating() ? 'collections.cancelCreation' : 'collections.createCollection') | transloco"
             (click)="onCreate()">
@@ -5637,11 +5637,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
           }
 
         <DialogFooter class="flex flex-col">
-          <button decoration="outline" #closeBtn (click)="onClose()" >
+          <button variant="outline" #closeBtn (click)="onClose()" >
             {{ 'collections.close' | transloco }}
           </button>
           <button
-            [decoration]="creating() ? 'outline' : undefined"
+            [variant]="creating() ? 'outline' : undefined"
             tabindex="0"
             [attr.title]="(creating() ? 'collections.cancelCreation' : 'collections.createCollection') | transloco"
             (click)="onCreate()">
@@ -5892,7 +5892,7 @@ class ExportDialog {
         </section>
 
         <DialogFooter>
-          <button decoration="outline" (click)="dialog.close()">
+          <button variant="outline" (click)="dialog.close()">
             {{ 'cancel' | transloco }}
           </button>
           <button tabindex="0" [attr.title]="'export.download' | transloco" (click)="onDownload()">
@@ -5981,7 +5981,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
         </section>
 
         <DialogFooter>
-          <button decoration="outline" (click)="dialog.close()">
+          <button variant="outline" (click)="dialog.close()">
             {{ 'cancel' | transloco }}
           </button>
           <button tabindex="0" [attr.title]="'export.download' | transloco" (click)="onDownload()">
@@ -9538,12 +9538,12 @@ class AlertDialog {
         @if (alert || canUpdateQuery()) {
           <div class="flex w-full flex-col gap-2">
             @if (alert) {
-              <button decoration="outline" (click)="execute()" [disabled]="!canUpdateQuery()">
+              <button variant="outline" (click)="execute()" [disabled]="!canUpdateQuery()">
                 {{ 'alerts.execute' | transloco }}
               </button>
             }
             @if (canUpdateQuery()) {
-              <button [disabled]="updateStatus() !== 'idle'" decoration="outline" (click)="updateQuery()">
+              <button [disabled]="updateStatus() !== 'idle'" variant="outline" (click)="updateQuery()">
                 @switch (updateStatus()) {
                   @case ('updating') {
                     <LoadingCircle class="size-4 animate-spin" width="16" height="16" />
@@ -9562,7 +9562,7 @@ class AlertDialog {
           </div>
         }
         <div class="ml-auto flex justify-end gap-2">
-          <button decoration="outline" (click)="dialog.cancel()">
+          <button variant="outline" (click)="dialog.cancel()">
             {{ 'cancel' | transloco }}
           </button>
           <button (click)="confirm()" [disabled]="invalidForm()">
@@ -9668,12 +9668,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
         @if (alert || canUpdateQuery()) {
           <div class="flex w-full flex-col gap-2">
             @if (alert) {
-              <button decoration="outline" (click)="execute()" [disabled]="!canUpdateQuery()">
+              <button variant="outline" (click)="execute()" [disabled]="!canUpdateQuery()">
                 {{ 'alerts.execute' | transloco }}
               </button>
             }
             @if (canUpdateQuery()) {
-              <button [disabled]="updateStatus() !== 'idle'" decoration="outline" (click)="updateQuery()">
+              <button [disabled]="updateStatus() !== 'idle'" variant="outline" (click)="updateQuery()">
                 @switch (updateStatus()) {
                   @case ('updating') {
                     <LoadingCircle class="size-4 animate-spin" width="16" height="16" />
@@ -9692,7 +9692,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
           </div>
         }
         <div class="ml-auto flex justify-end gap-2">
-          <button decoration="outline" (click)="dialog.cancel()">
+          <button variant="outline" (click)="dialog.cancel()">
             {{ 'cancel' | transloco }}
           </button>
           <button (click)="confirm()" [disabled]="invalidForm()">
@@ -9748,11 +9748,11 @@ class AlertsComponent {
         this.tmpAlerts.splice(drop.currentIndex, 0, this.tmpAlerts.splice(drop.previousIndex, 1)[0]);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AlertsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: AlertsComponent, isStandalone: true, selector: "Alerts", providers: [provideTranslocoScope('alerts')], viewQueries: [{ propertyName: "alertFormDialog", first: true, predicate: AlertDialog, descendants: true, isSignal: true }], ngImport: i0, template: "<ul\n  role=\"list\"\n  class=\"flex min-w-80 flex-col p-2\"\n  cdkDropList\n  [cdkDropListData]=\"tmpAlerts\"\n  [cdkDropListDisabled]=\"!reordering()\"\n  (cdkDropListDropped)=\"dropped($event)\">\n  @if (floating) {\n    <label class=\"text-xl font-bold\">{{ 'alerts.label' | transloco }}</label>\n    <HorizontalDivider />\n  }\n  @for (alert of tmpAlerts; track $index) {\n    <li role=\"listitem\" class=\"group h-10\" tabindex=\"0\" cdkDrag (click)=\"onClick($index)\" (keydown.enter)=\"onClick($index)\">\n      <i class=\"fa-fw fas fa-bell shrink-0\" aria-hidden=\"true\"></i>\n      <p class=\"line-clamp-1\">{{ alert.name }}</p>\n      @if (!reordering()) {\n        <button\n          class=\"text-destructive hover:text-destructive invisible ms-auto transition-transform hover:scale-125 group-hover:visible\"\n          title=\"{{ 'alerts.deleteAlert' | transloco }}\"\n          [attr.aria-label]=\"'alerts.deleteAlert' | transloco\"\n          (click)=\"deleteAlert($event, $index)\">\n          <i class=\"fa-fw fa-regular fa-trash-can\" aria-hidden=\"true\"></i>\n        </button>\n      } @else {\n        <i class=\"fa-fw fa-regular fa-bars\"></i>\n      }\n    </li>\n  } @empty {\n    <li role=\"listitem\" class=\"py-4 text-center text-neutral-500\">{{ 'alerts.noAlerts' | transloco }}</li>\n  }\n</ul>\n<div class=\"flex flex-col gap-2 p-2\">\n  <button decoration=\"outline\" class=\"w-full\" tabindex=\"0\" [attr.title]=\"'alerts.manageAlerts' | transloco\" [disabled]=\"!alerts().length\" (click)=\"reorder()\">\n    {{ (reordering() ? 'save' : 'alerts.manageAlerts') | transloco }}\n  </button>\n  <button class=\"w-full\" [attr.title]=\"'alerts.createAlert' | transloco\" (click)=\"createAlert()\">\n    {{ 'alerts.createAlert' | transloco }}\n  </button>\n</div>\n", dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "component", type: HorizontalDividerComponent, selector: "horizontal-divider, HorizontalDivider, horizontaldivider" }, { kind: "directive", type: ListItemComponent, selector: "[role=\"listitem\"], [role=\"option\"]", inputs: ["class", "variant", "decoration"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: AlertsComponent, isStandalone: true, selector: "Alerts", providers: [provideTranslocoScope('alerts')], viewQueries: [{ propertyName: "alertFormDialog", first: true, predicate: AlertDialog, descendants: true, isSignal: true }], ngImport: i0, template: "<ul\r\n  role=\"list\"\r\n  class=\"flex min-w-80 flex-col p-2\"\r\n  cdkDropList\r\n  [cdkDropListData]=\"tmpAlerts\"\r\n  [cdkDropListDisabled]=\"!reordering()\"\r\n  (cdkDropListDropped)=\"dropped($event)\">\r\n  @if (floating) {\r\n    <label class=\"text-xl font-bold\">{{ \"alerts.label\" | transloco }}</label>\r\n    <Separator />\r\n  }\r\n  @for (alert of tmpAlerts; track $index) {\r\n    <li\r\n      role=\"listitem\"\r\n      class=\"group h-10\"\r\n      tabindex=\"0\"\r\n      cdkDrag\r\n      (click)=\"onClick($index)\"\r\n      (keydown.enter)=\"onClick($index)\">\r\n      <i class=\"fa-fw fas fa-bell shrink-0\" aria-hidden=\"true\"></i>\r\n      <p class=\"line-clamp-1\">{{ alert.name }}</p>\r\n      @if (!reordering()) {\r\n        <button\r\n          class=\"text-destructive hover:text-destructive invisible ms-auto transition-transform group-hover:visible hover:scale-125\"\r\n          title=\"{{ 'alerts.deleteAlert' | transloco }}\"\r\n          [attr.aria-label]=\"'alerts.deleteAlert' | transloco\"\r\n          (click)=\"deleteAlert($event, $index)\">\r\n          <i class=\"fa-fw fa-regular fa-trash-can\" aria-hidden=\"true\"></i>\r\n        </button>\r\n      } @else {\r\n        <i class=\"fa-fw fa-regular fa-bars\"></i>\r\n      }\r\n    </li>\r\n  } @empty {\r\n    <li role=\"listitem\" class=\"py-4 text-center text-neutral-500\">\r\n      {{ \"alerts.noAlerts\" | transloco }}\r\n    </li>\r\n  }\r\n</ul>\r\n<div class=\"flex flex-col gap-2 p-2\">\r\n  <button\r\n    variant=\"outline\"\r\n    class=\"w-full\"\r\n    tabindex=\"0\"\r\n    [attr.title]=\"'alerts.manageAlerts' | transloco\"\r\n    [disabled]=\"!alerts().length\"\r\n    (click)=\"reorder()\">\r\n    {{ (reordering() ? \"save\" : \"alerts.manageAlerts\") | transloco }}\r\n  </button>\r\n  <button\r\n    class=\"w-full\"\r\n    [attr.title]=\"'alerts.createAlert' | transloco\"\r\n    (click)=\"createAlert()\">\r\n    {{ \"alerts.createAlert\" | transloco }}\r\n  </button>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "directive", type: ListItemComponent, selector: "[role=\"listitem\"], [role=\"option\"]", inputs: ["class", "variant", "decoration"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: Separator, selector: "separator, Separator", inputs: ["class", "orientation"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AlertsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'Alerts', standalone: true, imports: [TranslocoPipe, ButtonComponent, HorizontalDividerComponent, ListItemComponent, DragDropModule], providers: [provideTranslocoScope('alerts')], template: "<ul\n  role=\"list\"\n  class=\"flex min-w-80 flex-col p-2\"\n  cdkDropList\n  [cdkDropListData]=\"tmpAlerts\"\n  [cdkDropListDisabled]=\"!reordering()\"\n  (cdkDropListDropped)=\"dropped($event)\">\n  @if (floating) {\n    <label class=\"text-xl font-bold\">{{ 'alerts.label' | transloco }}</label>\n    <HorizontalDivider />\n  }\n  @for (alert of tmpAlerts; track $index) {\n    <li role=\"listitem\" class=\"group h-10\" tabindex=\"0\" cdkDrag (click)=\"onClick($index)\" (keydown.enter)=\"onClick($index)\">\n      <i class=\"fa-fw fas fa-bell shrink-0\" aria-hidden=\"true\"></i>\n      <p class=\"line-clamp-1\">{{ alert.name }}</p>\n      @if (!reordering()) {\n        <button\n          class=\"text-destructive hover:text-destructive invisible ms-auto transition-transform hover:scale-125 group-hover:visible\"\n          title=\"{{ 'alerts.deleteAlert' | transloco }}\"\n          [attr.aria-label]=\"'alerts.deleteAlert' | transloco\"\n          (click)=\"deleteAlert($event, $index)\">\n          <i class=\"fa-fw fa-regular fa-trash-can\" aria-hidden=\"true\"></i>\n        </button>\n      } @else {\n        <i class=\"fa-fw fa-regular fa-bars\"></i>\n      }\n    </li>\n  } @empty {\n    <li role=\"listitem\" class=\"py-4 text-center text-neutral-500\">{{ 'alerts.noAlerts' | transloco }}</li>\n  }\n</ul>\n<div class=\"flex flex-col gap-2 p-2\">\n  <button decoration=\"outline\" class=\"w-full\" tabindex=\"0\" [attr.title]=\"'alerts.manageAlerts' | transloco\" [disabled]=\"!alerts().length\" (click)=\"reorder()\">\n    {{ (reordering() ? 'save' : 'alerts.manageAlerts') | transloco }}\n  </button>\n  <button class=\"w-full\" [attr.title]=\"'alerts.createAlert' | transloco\" (click)=\"createAlert()\">\n    {{ 'alerts.createAlert' | transloco }}\n  </button>\n</div>\n" }]
+            args: [{ selector: 'Alerts', standalone: true, imports: [TranslocoPipe, ButtonComponent, ListItemComponent, DragDropModule, Separator], providers: [provideTranslocoScope('alerts')], template: "<ul\r\n  role=\"list\"\r\n  class=\"flex min-w-80 flex-col p-2\"\r\n  cdkDropList\r\n  [cdkDropListData]=\"tmpAlerts\"\r\n  [cdkDropListDisabled]=\"!reordering()\"\r\n  (cdkDropListDropped)=\"dropped($event)\">\r\n  @if (floating) {\r\n    <label class=\"text-xl font-bold\">{{ \"alerts.label\" | transloco }}</label>\r\n    <Separator />\r\n  }\r\n  @for (alert of tmpAlerts; track $index) {\r\n    <li\r\n      role=\"listitem\"\r\n      class=\"group h-10\"\r\n      tabindex=\"0\"\r\n      cdkDrag\r\n      (click)=\"onClick($index)\"\r\n      (keydown.enter)=\"onClick($index)\">\r\n      <i class=\"fa-fw fas fa-bell shrink-0\" aria-hidden=\"true\"></i>\r\n      <p class=\"line-clamp-1\">{{ alert.name }}</p>\r\n      @if (!reordering()) {\r\n        <button\r\n          class=\"text-destructive hover:text-destructive invisible ms-auto transition-transform group-hover:visible hover:scale-125\"\r\n          title=\"{{ 'alerts.deleteAlert' | transloco }}\"\r\n          [attr.aria-label]=\"'alerts.deleteAlert' | transloco\"\r\n          (click)=\"deleteAlert($event, $index)\">\r\n          <i class=\"fa-fw fa-regular fa-trash-can\" aria-hidden=\"true\"></i>\r\n        </button>\r\n      } @else {\r\n        <i class=\"fa-fw fa-regular fa-bars\"></i>\r\n      }\r\n    </li>\r\n  } @empty {\r\n    <li role=\"listitem\" class=\"py-4 text-center text-neutral-500\">\r\n      {{ \"alerts.noAlerts\" | transloco }}\r\n    </li>\r\n  }\r\n</ul>\r\n<div class=\"flex flex-col gap-2 p-2\">\r\n  <button\r\n    variant=\"outline\"\r\n    class=\"w-full\"\r\n    tabindex=\"0\"\r\n    [attr.title]=\"'alerts.manageAlerts' | transloco\"\r\n    [disabled]=\"!alerts().length\"\r\n    (click)=\"reorder()\">\r\n    {{ (reordering() ? \"save\" : \"alerts.manageAlerts\") | transloco }}\r\n  </button>\r\n  <button\r\n    class=\"w-full\"\r\n    [attr.title]=\"'alerts.createAlert' | transloco\"\r\n    (click)=\"createAlert()\">\r\n    {{ \"alerts.createAlert\" | transloco }}\r\n  </button>\r\n</div>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { alertFormDialog: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AlertDialog), { isSignal: true }] }] } });
 
 class ChangePasswordComponent {
@@ -10703,7 +10703,7 @@ class BookmarksComponent {
         this.range.set(this.range() + (this.config.itemsPerPage ?? 10));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: BookmarksComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: BookmarksComponent, isStandalone: true, selector: "bookmarks, Bookmarks", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideTranslocoScope("bookmarks")], ngImport: i0, template: "@if (floating) {\n  <div class=\"p-2\">\n    <label class=\"text-xl font-bold\">{{ 'bookmarks.label' | transloco }}</label>\n    <Separator />\n  </div>\n}\n\n<ul class=\"flex max-h-[460px] flex-col overflow-auto\" role=\"list\">\n  @for (bookmark of paginatedBookmarks(); track $index) {\n    <li role=\"listitem\" class=\"group h-10\" tabindex=\"0\" (click)=\"onClick(bookmark)\" (keydown.enter)=\"onClick(bookmark)\">\n      <BookmarkIcon solid class=\"shrink-0\" />\n\n      <p class=\"line-clamp-1\">{{ bookmark.label }}</p>\n\n      @if (bookmark.author) {\n        <Badge variant=\"ghost\" class=\"text-grey-500 text-xs\">\n          <UserIcon class=\"size-3\"/>\n          <span class=\"line-clamp-1\">{{ bookmark.author }}</span>\n        </Badge>\n      }\n      @if (bookmark.parentFolder) {\n        <Badge variant=\"ghost\" class=\"text-grey-500 text-xs\">\n          <FolderIcon class=\"size-3\"/>\n          <span class=\"line-clamp-1\">{{ bookmark.parentFolder }}</span>\n        </Badge>\n      }\n\n      <button\n        variant=\"ghost\"\n        size=\"icon\"\n        title=\"{{ 'bookmarks.openBookmark' | transloco }}\"\n        class=\"text-destructive ms-auto group-hover:visible\"\n        [attr.title]=\"'bookmarks.removeBookmark' | transloco\"\n        [attr.aria-label]=\"'bookmarks.removeBookmark' | transloco\"\n        (click)=\"onDelete(bookmark, $event)\">\n        <TrashIcon />\n      </button>\n    </li>\n  } @empty {\n    <li class=\"py-4 text-center text-neutral-500\">{{ 'bookmarks.noBookmarks' | transloco }}</li>\n  }\n</ul>\n\n<div class=\"flex flex-col px-2\">\n  @if (hasMore() && config.showLoadMore) {\n    <button variant=\"ghost\" class=\"w-full\" tabindex=\"0\" [attr.title]=\"'loadMore' | transloco\" (click)=\"loadMore($event)\">\n      {{ 'loadMore' | transloco }}\n    </button>\n  }\n  <button decoration=\"underline\" class=\"ml-auto\" [attr.title]=\"'seeMore' | transloco\" [routerLink]=\"[config.routerLink]\">{{ 'seeMore' | transloco }}</button>\n</div>\n", styles: [":host ul{scrollbar-width:thin}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: ListItemComponent, selector: "[role=\"listitem\"], [role=\"option\"]", inputs: ["class", "variant", "decoration"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "directive", type: Separator, selector: "separator, Separator", inputs: ["class", "orientation"] }, { kind: "component", type: BookmarkIcon, selector: "bookmark-icon, BookmarkIcon", inputs: ["class", "solid"] }, { kind: "component", type: UserIcon, selector: "user-icon, UserIcon", inputs: ["class"] }, { kind: "component", type: TrashIcon, selector: "trash-icon, TrashIcon", inputs: ["class"] }, { kind: "component", type: FolderIcon, selector: "folder-icon, FolderIcon", inputs: ["class"] }, { kind: "directive", type: BadgeComponent, selector: "badge, Badge", inputs: ["class", "variant", "size"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: BookmarksComponent, isStandalone: true, selector: "bookmarks, Bookmarks", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideTranslocoScope("bookmarks")], ngImport: i0, template: "@if (floating) {\r\n  <div class=\"p-2\">\r\n    <label class=\"text-xl font-bold\">{{ \"bookmarks.label\" | transloco }}</label>\r\n    <Separator />\r\n  </div>\r\n}\r\n\r\n<ul class=\"flex max-h-[460px] flex-col overflow-auto\" role=\"list\">\r\n  @for (bookmark of paginatedBookmarks(); track $index) {\r\n    <li\r\n      role=\"listitem\"\r\n      class=\"group h-10\"\r\n      tabindex=\"0\"\r\n      (click)=\"onClick(bookmark)\"\r\n      (keydown.enter)=\"onClick(bookmark)\">\r\n      <BookmarkIcon solid class=\"shrink-0\" />\r\n\r\n      <p class=\"line-clamp-1\">{{ bookmark.label }}</p>\r\n\r\n      @if (bookmark.author) {\r\n        <Badge variant=\"ghost\" class=\"text-grey-500 text-xs\">\r\n          <UserIcon class=\"size-3\" />\r\n          <span class=\"line-clamp-1\">{{ bookmark.author }}</span>\r\n        </Badge>\r\n      }\r\n      @if (bookmark.parentFolder) {\r\n        <Badge variant=\"ghost\" class=\"text-grey-500 text-xs\">\r\n          <FolderIcon class=\"size-3\" />\r\n          <span class=\"line-clamp-1\">{{ bookmark.parentFolder }}</span>\r\n        </Badge>\r\n      }\r\n\r\n      <button\r\n        variant=\"ghost\"\r\n        size=\"icon\"\r\n        title=\"{{ 'bookmarks.openBookmark' | transloco }}\"\r\n        class=\"text-destructive ms-auto group-hover:visible\"\r\n        [attr.title]=\"'bookmarks.removeBookmark' | transloco\"\r\n        [attr.aria-label]=\"'bookmarks.removeBookmark' | transloco\"\r\n        (click)=\"onDelete(bookmark, $event)\">\r\n        <TrashIcon />\r\n      </button>\r\n    </li>\r\n  } @empty {\r\n    <li class=\"py-4 text-center text-neutral-500\">\r\n      {{ \"bookmarks.noBookmarks\" | transloco }}\r\n    </li>\r\n  }\r\n</ul>\r\n\r\n<div class=\"flex flex-col px-2\">\r\n  @if (hasMore() && config.showLoadMore) {\r\n    <button\r\n      variant=\"ghost\"\r\n      class=\"w-full\"\r\n      tabindex=\"0\"\r\n      [attr.title]=\"'loadMore' | transloco\"\r\n      (click)=\"loadMore($event)\">\r\n      {{ \"loadMore\" | transloco }}\r\n    </button>\r\n  }\r\n  <button\r\n    variant=\"link\"\r\n    class=\"ml-auto\"\r\n    [attr.title]=\"'seeMore' | transloco\"\r\n    [routerLink]=\"[config.routerLink]\">\r\n    {{ \"seeMore\" | transloco }}\r\n  </button>\r\n</div>\r\n", styles: [":host ul{scrollbar-width:thin}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: ListItemComponent, selector: "[role=\"listitem\"], [role=\"option\"]", inputs: ["class", "variant", "decoration"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "directive", type: Separator, selector: "separator, Separator", inputs: ["class", "orientation"] }, { kind: "component", type: BookmarkIcon, selector: "bookmark-icon, BookmarkIcon", inputs: ["class", "solid"] }, { kind: "component", type: UserIcon, selector: "user-icon, UserIcon", inputs: ["class"] }, { kind: "component", type: TrashIcon, selector: "trash-icon, TrashIcon", inputs: ["class"] }, { kind: "component", type: FolderIcon, selector: "folder-icon, FolderIcon", inputs: ["class"] }, { kind: "directive", type: BadgeComponent, selector: "badge, Badge", inputs: ["class", "variant", "size"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: BookmarksComponent, decorators: [{
             type: Component,
@@ -10718,7 +10718,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         TrashIcon,
                         FolderIcon,
                         BadgeComponent
-                    ], providers: [provideTranslocoScope("bookmarks")], template: "@if (floating) {\n  <div class=\"p-2\">\n    <label class=\"text-xl font-bold\">{{ 'bookmarks.label' | transloco }}</label>\n    <Separator />\n  </div>\n}\n\n<ul class=\"flex max-h-[460px] flex-col overflow-auto\" role=\"list\">\n  @for (bookmark of paginatedBookmarks(); track $index) {\n    <li role=\"listitem\" class=\"group h-10\" tabindex=\"0\" (click)=\"onClick(bookmark)\" (keydown.enter)=\"onClick(bookmark)\">\n      <BookmarkIcon solid class=\"shrink-0\" />\n\n      <p class=\"line-clamp-1\">{{ bookmark.label }}</p>\n\n      @if (bookmark.author) {\n        <Badge variant=\"ghost\" class=\"text-grey-500 text-xs\">\n          <UserIcon class=\"size-3\"/>\n          <span class=\"line-clamp-1\">{{ bookmark.author }}</span>\n        </Badge>\n      }\n      @if (bookmark.parentFolder) {\n        <Badge variant=\"ghost\" class=\"text-grey-500 text-xs\">\n          <FolderIcon class=\"size-3\"/>\n          <span class=\"line-clamp-1\">{{ bookmark.parentFolder }}</span>\n        </Badge>\n      }\n\n      <button\n        variant=\"ghost\"\n        size=\"icon\"\n        title=\"{{ 'bookmarks.openBookmark' | transloco }}\"\n        class=\"text-destructive ms-auto group-hover:visible\"\n        [attr.title]=\"'bookmarks.removeBookmark' | transloco\"\n        [attr.aria-label]=\"'bookmarks.removeBookmark' | transloco\"\n        (click)=\"onDelete(bookmark, $event)\">\n        <TrashIcon />\n      </button>\n    </li>\n  } @empty {\n    <li class=\"py-4 text-center text-neutral-500\">{{ 'bookmarks.noBookmarks' | transloco }}</li>\n  }\n</ul>\n\n<div class=\"flex flex-col px-2\">\n  @if (hasMore() && config.showLoadMore) {\n    <button variant=\"ghost\" class=\"w-full\" tabindex=\"0\" [attr.title]=\"'loadMore' | transloco\" (click)=\"loadMore($event)\">\n      {{ 'loadMore' | transloco }}\n    </button>\n  }\n  <button decoration=\"underline\" class=\"ml-auto\" [attr.title]=\"'seeMore' | transloco\" [routerLink]=\"[config.routerLink]\">{{ 'seeMore' | transloco }}</button>\n</div>\n", styles: [":host ul{scrollbar-width:thin}\n"] }]
+                    ], providers: [provideTranslocoScope("bookmarks")], template: "@if (floating) {\r\n  <div class=\"p-2\">\r\n    <label class=\"text-xl font-bold\">{{ \"bookmarks.label\" | transloco }}</label>\r\n    <Separator />\r\n  </div>\r\n}\r\n\r\n<ul class=\"flex max-h-[460px] flex-col overflow-auto\" role=\"list\">\r\n  @for (bookmark of paginatedBookmarks(); track $index) {\r\n    <li\r\n      role=\"listitem\"\r\n      class=\"group h-10\"\r\n      tabindex=\"0\"\r\n      (click)=\"onClick(bookmark)\"\r\n      (keydown.enter)=\"onClick(bookmark)\">\r\n      <BookmarkIcon solid class=\"shrink-0\" />\r\n\r\n      <p class=\"line-clamp-1\">{{ bookmark.label }}</p>\r\n\r\n      @if (bookmark.author) {\r\n        <Badge variant=\"ghost\" class=\"text-grey-500 text-xs\">\r\n          <UserIcon class=\"size-3\" />\r\n          <span class=\"line-clamp-1\">{{ bookmark.author }}</span>\r\n        </Badge>\r\n      }\r\n      @if (bookmark.parentFolder) {\r\n        <Badge variant=\"ghost\" class=\"text-grey-500 text-xs\">\r\n          <FolderIcon class=\"size-3\" />\r\n          <span class=\"line-clamp-1\">{{ bookmark.parentFolder }}</span>\r\n        </Badge>\r\n      }\r\n\r\n      <button\r\n        variant=\"ghost\"\r\n        size=\"icon\"\r\n        title=\"{{ 'bookmarks.openBookmark' | transloco }}\"\r\n        class=\"text-destructive ms-auto group-hover:visible\"\r\n        [attr.title]=\"'bookmarks.removeBookmark' | transloco\"\r\n        [attr.aria-label]=\"'bookmarks.removeBookmark' | transloco\"\r\n        (click)=\"onDelete(bookmark, $event)\">\r\n        <TrashIcon />\r\n      </button>\r\n    </li>\r\n  } @empty {\r\n    <li class=\"py-4 text-center text-neutral-500\">\r\n      {{ \"bookmarks.noBookmarks\" | transloco }}\r\n    </li>\r\n  }\r\n</ul>\r\n\r\n<div class=\"flex flex-col px-2\">\r\n  @if (hasMore() && config.showLoadMore) {\r\n    <button\r\n      variant=\"ghost\"\r\n      class=\"w-full\"\r\n      tabindex=\"0\"\r\n      [attr.title]=\"'loadMore' | transloco\"\r\n      (click)=\"loadMore($event)\">\r\n      {{ \"loadMore\" | transloco }}\r\n    </button>\r\n  }\r\n  <button\r\n    variant=\"link\"\r\n    class=\"ml-auto\"\r\n    [attr.title]=\"'seeMore' | transloco\"\r\n    [routerLink]=\"[config.routerLink]\">\r\n    {{ \"seeMore\" | transloco }}\r\n  </button>\r\n</div>\r\n", styles: [":host ul{scrollbar-width:thin}\n"] }]
         }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
 
 class DeleteCollectionDialog {
@@ -10751,7 +10751,7 @@ class DeleteCollectionDialog {
         <p>{{ 'collections.confirmDelete' | transloco }} {{ collection()?.name }}?</p>
 
         <DialogFooter>
-          <button decoration="outline" (click)="dialog.cancel()">
+          <button variant="outline" (click)="dialog.cancel()">
             {{ 'cancel' | transloco }}
           </button>
 
@@ -10788,7 +10788,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
         <p>{{ 'collections.confirmDelete' | transloco }} {{ collection()?.name }}?</p>
 
         <DialogFooter>
-          <button decoration="outline" (click)="dialog.cancel()">
+          <button variant="outline" (click)="dialog.cancel()">
             {{ 'cancel' | transloco }}
           </button>
 
@@ -10843,7 +10843,7 @@ class CollectionsComponent {
         this.range.set(this.range() + (this.config.itemsPerPage ?? 10));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CollectionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: CollectionsComponent, isStandalone: true, selector: "app-collections", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideTranslocoScope("collections")], viewQueries: [{ propertyName: "deleteCollectionDialog", first: true, predicate: DeleteCollectionDialog, descendants: true, isSignal: true }], ngImport: i0, template: "@if (floating) {\n  <div class=\"p-2\">\n    <label class=\"text-xl font-bold\">{{ 'collections.label' | transloco }}</label>\n    <Separator />\n  </div>\n}\n\n<ul class=\"flex max-h-[460px] flex-col overflow-auto\">\n  @for (collection of paginatedCollections(); track $index) {\n    <li\n      role=\"listitem\"\n      class=\"group grid grid-cols-[min-content_auto_min-content] items-center\"\n      tabindex=\"0\"\n      (click)=\"onClick(collection)\"\n      (keydown.enter)=\"onClick(collection)\">\n      <i class=\"fas fa-inbox ps-2\"></i>\n\n      <p class=\"mx-2 line-clamp-1\">{{ collection.name }}</p>\n\n      <button\n        variant=\"ghost\"\n        size=\"icon\"\n        class=\"text-destructive invisible group-hover:visible\"\n        title=\"{{ 'collections.deleteCollection' | transloco }}\"\n        [attr.aria-label]=\"'collections.deleteCollection' | transloco\"\n        (click)=\"onDelete(collection, $index, $event)\">\n        <TrashIcon />\n      </button>\n    </li>\n  } @empty {\n    <li class=\"list-none py-4 text-center text-neutral-500\">{{ 'collections.noCollections' | transloco }}</li>\n  }\n</ul>\n\n<div class=\"flex flex-col px-2\">\n  @if (hasMore() && config.showLoadMore) {\n    <button decoration=\"outline\" class=\"w-full\" tabindex=\"0\" [attr.title]=\"'loadMore' | transloco\" (click)=\"loadMore($event)\">\n      {{ 'loadMore' | transloco }}\n    </button>\n  }\n  <button decoration=\"underline\" class=\"ml-auto\" [attr.title]=\"'seeMore' | transloco\" [routerLink]=\"[config.routerLink]\">{{ 'seeMore' | transloco }}</button>\n</div>\n\n<delete-collection-dialog />\n", dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: DeleteCollectionDialog, selector: "delete-collection-dialog" }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "directive", type: ListItemComponent, selector: "[role=\"listitem\"], [role=\"option\"]", inputs: ["class", "variant", "decoration"] }, { kind: "directive", type: Separator, selector: "separator, Separator", inputs: ["class", "orientation"] }, { kind: "component", type: TrashIcon, selector: "trash-icon, TrashIcon", inputs: ["class"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: CollectionsComponent, isStandalone: true, selector: "app-collections", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideTranslocoScope("collections")], viewQueries: [{ propertyName: "deleteCollectionDialog", first: true, predicate: DeleteCollectionDialog, descendants: true, isSignal: true }], ngImport: i0, template: "@if (floating) {\r\n  <div class=\"p-2\">\r\n    <label class=\"text-xl font-bold\">{{\r\n      \"collections.label\" | transloco\r\n    }}</label>\r\n    <Separator />\r\n  </div>\r\n}\r\n\r\n<ul class=\"flex max-h-[460px] flex-col overflow-auto\">\r\n  @for (collection of paginatedCollections(); track $index) {\r\n    <li\r\n      role=\"listitem\"\r\n      class=\"group grid grid-cols-[min-content_auto_min-content] items-center\"\r\n      tabindex=\"0\"\r\n      (click)=\"onClick(collection)\"\r\n      (keydown.enter)=\"onClick(collection)\">\r\n      <i class=\"fas fa-inbox ps-2\"></i>\r\n\r\n      <p class=\"mx-2 line-clamp-1\">{{ collection.name }}</p>\r\n\r\n      <button\r\n        variant=\"ghost\"\r\n        size=\"icon\"\r\n        class=\"text-destructive invisible group-hover:visible\"\r\n        title=\"{{ 'collections.deleteCollection' | transloco }}\"\r\n        [attr.aria-label]=\"'collections.deleteCollection' | transloco\"\r\n        (click)=\"onDelete(collection, $index, $event)\">\r\n        <TrashIcon />\r\n      </button>\r\n    </li>\r\n  } @empty {\r\n    <li class=\"list-none py-4 text-center text-neutral-500\">\r\n      {{ \"collections.noCollections\" | transloco }}\r\n    </li>\r\n  }\r\n</ul>\r\n\r\n<div class=\"flex flex-col px-2\">\r\n  @if (hasMore() && config.showLoadMore) {\r\n    <button\r\n      variant=\"outline\"\r\n      class=\"w-full\"\r\n      tabindex=\"0\"\r\n      [attr.title]=\"'loadMore' | transloco\"\r\n      (click)=\"loadMore($event)\">\r\n      {{ \"loadMore\" | transloco }}\r\n    </button>\r\n  }\r\n  <button\r\n    variant=\"link\"\r\n    class=\"ml-auto\"\r\n    [attr.title]=\"'seeMore' | transloco\"\r\n    [routerLink]=\"[config.routerLink]\">\r\n    {{ \"seeMore\" | transloco }}\r\n  </button>\r\n</div>\r\n\r\n<delete-collection-dialog />\r\n", dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: DeleteCollectionDialog, selector: "delete-collection-dialog" }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "directive", type: ListItemComponent, selector: "[role=\"listitem\"], [role=\"option\"]", inputs: ["class", "variant", "decoration"] }, { kind: "directive", type: Separator, selector: "separator, Separator", inputs: ["class", "orientation"] }, { kind: "component", type: TrashIcon, selector: "trash-icon, TrashIcon", inputs: ["class"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CollectionsComponent, decorators: [{
             type: Component,
@@ -10855,7 +10855,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         ListItemComponent,
                         Separator,
                         TrashIcon
-                    ], providers: [provideTranslocoScope("collections")], template: "@if (floating) {\n  <div class=\"p-2\">\n    <label class=\"text-xl font-bold\">{{ 'collections.label' | transloco }}</label>\n    <Separator />\n  </div>\n}\n\n<ul class=\"flex max-h-[460px] flex-col overflow-auto\">\n  @for (collection of paginatedCollections(); track $index) {\n    <li\n      role=\"listitem\"\n      class=\"group grid grid-cols-[min-content_auto_min-content] items-center\"\n      tabindex=\"0\"\n      (click)=\"onClick(collection)\"\n      (keydown.enter)=\"onClick(collection)\">\n      <i class=\"fas fa-inbox ps-2\"></i>\n\n      <p class=\"mx-2 line-clamp-1\">{{ collection.name }}</p>\n\n      <button\n        variant=\"ghost\"\n        size=\"icon\"\n        class=\"text-destructive invisible group-hover:visible\"\n        title=\"{{ 'collections.deleteCollection' | transloco }}\"\n        [attr.aria-label]=\"'collections.deleteCollection' | transloco\"\n        (click)=\"onDelete(collection, $index, $event)\">\n        <TrashIcon />\n      </button>\n    </li>\n  } @empty {\n    <li class=\"list-none py-4 text-center text-neutral-500\">{{ 'collections.noCollections' | transloco }}</li>\n  }\n</ul>\n\n<div class=\"flex flex-col px-2\">\n  @if (hasMore() && config.showLoadMore) {\n    <button decoration=\"outline\" class=\"w-full\" tabindex=\"0\" [attr.title]=\"'loadMore' | transloco\" (click)=\"loadMore($event)\">\n      {{ 'loadMore' | transloco }}\n    </button>\n  }\n  <button decoration=\"underline\" class=\"ml-auto\" [attr.title]=\"'seeMore' | transloco\" [routerLink]=\"[config.routerLink]\">{{ 'seeMore' | transloco }}</button>\n</div>\n\n<delete-collection-dialog />\n" }]
+                    ], providers: [provideTranslocoScope("collections")], template: "@if (floating) {\r\n  <div class=\"p-2\">\r\n    <label class=\"text-xl font-bold\">{{\r\n      \"collections.label\" | transloco\r\n    }}</label>\r\n    <Separator />\r\n  </div>\r\n}\r\n\r\n<ul class=\"flex max-h-[460px] flex-col overflow-auto\">\r\n  @for (collection of paginatedCollections(); track $index) {\r\n    <li\r\n      role=\"listitem\"\r\n      class=\"group grid grid-cols-[min-content_auto_min-content] items-center\"\r\n      tabindex=\"0\"\r\n      (click)=\"onClick(collection)\"\r\n      (keydown.enter)=\"onClick(collection)\">\r\n      <i class=\"fas fa-inbox ps-2\"></i>\r\n\r\n      <p class=\"mx-2 line-clamp-1\">{{ collection.name }}</p>\r\n\r\n      <button\r\n        variant=\"ghost\"\r\n        size=\"icon\"\r\n        class=\"text-destructive invisible group-hover:visible\"\r\n        title=\"{{ 'collections.deleteCollection' | transloco }}\"\r\n        [attr.aria-label]=\"'collections.deleteCollection' | transloco\"\r\n        (click)=\"onDelete(collection, $index, $event)\">\r\n        <TrashIcon />\r\n      </button>\r\n    </li>\r\n  } @empty {\r\n    <li class=\"list-none py-4 text-center text-neutral-500\">\r\n      {{ \"collections.noCollections\" | transloco }}\r\n    </li>\r\n  }\r\n</ul>\r\n\r\n<div class=\"flex flex-col px-2\">\r\n  @if (hasMore() && config.showLoadMore) {\r\n    <button\r\n      variant=\"outline\"\r\n      class=\"w-full\"\r\n      tabindex=\"0\"\r\n      [attr.title]=\"'loadMore' | transloco\"\r\n      (click)=\"loadMore($event)\">\r\n      {{ \"loadMore\" | transloco }}\r\n    </button>\r\n  }\r\n  <button\r\n    variant=\"link\"\r\n    class=\"ml-auto\"\r\n    [attr.title]=\"'seeMore' | transloco\"\r\n    [routerLink]=\"[config.routerLink]\">\r\n    {{ \"seeMore\" | transloco }}\r\n  </button>\r\n</div>\r\n\r\n<delete-collection-dialog />\r\n" }]
         }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], deleteCollectionDialog: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DeleteCollectionDialog), { isSignal: true }] }] } });
 
 class OverrideUserDialogComponent {
@@ -10954,7 +10954,7 @@ class OverrideUserDialogComponent {
           </div>
 
         <DialogFooter>
-          <button decoration="outline" (click)="dialog.close()">
+          <button variant="outline" (click)="dialog.close()">
             {{ 'cancel' | transloco }}
           </button>
 
@@ -11019,7 +11019,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
           </div>
 
         <DialogFooter>
-          <button decoration="outline" (click)="dialog.close()">
+          <button variant="outline" (click)="dialog.close()">
             {{ 'cancel' | transloco }}
           </button>
 
@@ -11058,7 +11058,7 @@ class ResetUserSettingsDialogComponent {
           <p>{{ 'dialogs.resetUserSettings.message' | transloco }}</p>
 
           <DialogFooter>
-            <button decoration="outline" (click)="dialog.close()">
+            <button variant="outline" (click)="dialog.close()">
               {{ 'cancel' | transloco }}
             </button>
 
@@ -11095,7 +11095,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
           <p>{{ 'dialogs.resetUserSettings.message' | transloco }}</p>
 
           <DialogFooter>
-            <button decoration="outline" (click)="dialog.close()">
+            <button variant="outline" (click)="dialog.close()">
               {{ 'cancel' | transloco }}
             </button>
 
@@ -12474,7 +12474,7 @@ class FeedbackDialogComponent {
         }
 
         <DialogFooter>
-          <button decoration="outline" (click)="dialog.close()">
+          <button variant="outline" (click)="dialog.close()">
             {{ 'cancel' | transloco }}
           </button>
           <button [disabled]="!comment()" (click)="submit()">
@@ -12519,7 +12519,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
         }
 
         <DialogFooter>
-          <button decoration="outline" (click)="dialog.close()">
+          <button variant="outline" (click)="dialog.close()">
             {{ 'cancel' | transloco }}
           </button>
           <button [disabled]="!comment()" (click)="submit()">
@@ -12800,9 +12800,10 @@ class AggregationTreeComponent {
                     error("The aggregation tree component does not support list aggregations. Please use the <Aggregation /> component instead.");
                 }
                 // overrides "expandedLevel" from custom JSON file
-                const expandedLevel = this.expandedLevel() ?? agg.expandedLevel ?? 0;
-                console.log(`${agg.name} expandedlLevel`, this.expandedLevel(), agg.expandedLevel, expandedLevel);
-                this.expandItems(agg.items, expandedLevel);
+                const expandedLevel = this.expandedLevel() ?? agg.expandedLevel;
+                if (expandedLevel) {
+                    this.expandItems(agg.items, expandedLevel);
+                }
                 // overrides "searchable" properties with the input if any
                 agg.searchable = this.searchable() ?? agg.searchable;
                 return agg;
@@ -12890,6 +12891,8 @@ class AggregationTreeComponent {
     constructor() {
         this.query = buildQuery();
         effect(() => {
+            // if the aggregation store changes, remove previous session storage
+            getState(this.aggregationsStore);
             sessionStorage.removeItem(`agg-${this.column()}`);
         });
         effect(() => {
@@ -13287,9 +13290,9 @@ class AggregationTreeComponent {
             if (!node.$opened && node.items?.length >= 0 && level < expandedLevel) {
                 node.$opened = true;
             }
-            if (node.$opened && level >= expandedLevel) {
-                node.$opened = false;
-            }
+            // if(node.$opened && level >= expandedLevel) {
+            //   node.$opened = false;
+            // }
             return false;
         });
     }
@@ -14775,11 +14778,11 @@ class SearchFooterComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SearchFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: SearchFooterComponent, isStandalone: true, selector: "search-footer, searchfooter, SearchFooter", inputs: { hasMore: { classPropertyName: "hasMore", publicName: "hasMore", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { loadMore: "loadMore" }, ngImport: i0, template: ` <div class="flex flex-col px-2">
     @if (hasMore() && config().showLoadMore) {
-      <button decoration="outline" class="w-full" tabindex="0" [attr.title]="'loadMore' | transloco" (click)="onLoadMore($event)">
+      <button variant="outline" class="w-full" tabindex="0" [attr.title]="'loadMore' | transloco" (click)="onLoadMore($event)">
         {{ 'loadMore' | transloco }}
       </button>
     }
-    <button decoration="underline" class="ml-auto" [attr.title]="'seeMore' | transloco" [routerLink]="[config().routerLink]">
+    <button variant="link" class="ml-auto" [attr.title]="'seeMore' | transloco" [routerLink]="[config().routerLink]">
       {{ 'seeMore' | transloco }}
     </button>
   </div>`, isInline: true, dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
@@ -14791,11 +14794,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                     imports: [TranslocoPipe, RouterLink, ButtonComponent],
                     template: ` <div class="flex flex-col px-2">
     @if (hasMore() && config().showLoadMore) {
-      <button decoration="outline" class="w-full" tabindex="0" [attr.title]="'loadMore' | transloco" (click)="onLoadMore($event)">
+      <button variant="outline" class="w-full" tabindex="0" [attr.title]="'loadMore' | transloco" (click)="onLoadMore($event)">
         {{ 'loadMore' | transloco }}
       </button>
     }
-    <button decoration="underline" class="ml-auto" [attr.title]="'seeMore' | transloco" [routerLink]="[config().routerLink]">
+    <button variant="link" class="ml-auto" [attr.title]="'seeMore' | transloco" [routerLink]="[config().routerLink]">
       {{ 'seeMore' | transloco }}
     </button>
   </div>`
@@ -15079,7 +15082,7 @@ class SavedSearchDialog {
           (ngModelChange)="saveName.set($event)" />
 
           <DialogFooter>
-            <button decoration="outline" (click)="dialog.close()">
+            <button variant="outline" (click)="dialog.close()">
               {{ 'cancel' | transloco }}
             </button>
             <button (click)="confirm()" [disabled]="!saveName()">
@@ -15124,7 +15127,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
           (ngModelChange)="saveName.set($event)" />
 
           <DialogFooter>
-            <button decoration="outline" (click)="dialog.close()">
+            <button variant="outline" (click)="dialog.close()">
               {{ 'cancel' | transloco }}
             </button>
             <button (click)="confirm()" [disabled]="!saveName()">
@@ -15218,15 +15221,7 @@ class UserProfileFormComponent {
     }, ...(ngDevMode ? [{ debugName: "keys" }] : []));
     formKeys = computed(() => this.keys().filter(k => k !== "profilePhoto"), ...(ngDevMode ? [{ debugName: "formKeys" }] : []));
     allowProfilePhoto = computed(() => this.keys().some(k => k === "profilePhoto"), ...(ngDevMode ? [{ debugName: "allowProfilePhoto" }] : []));
-    initials = computed(() => {
-        const fullName = this.userProfile()?.data?.fullName;
-        if (!fullName)
-            return undefined;
-        return fullName
-            .split(" ")
-            .map((word) => word[0].toUpperCase())
-            .join("");
-    }, ...(ngDevMode ? [{ debugName: "initials" }] : []));
+    initials = computed(() => this.principalStore.initials(), ...(ngDevMode ? [{ debugName: "initials" }] : []));
     username = computed(() => this.principalStore.name() || this.principalStore.email() || null, ...(ngDevMode ? [{ debugName: "username" }] : []));
     propertyToEdit = signal(undefined, ...(ngDevMode ? [{ debugName: "propertyToEdit" }] : []));
     value = model(undefined, ...(ngDevMode ? [{ debugName: "value" }] : []));
@@ -15236,17 +15231,13 @@ class UserProfileFormComponent {
         { code: "fr", label: "Français", icon: FlagFrenchIconComponent }
     ];
     changingPassword = signal(false, ...(ngDevMode ? [{ debugName: "changingPassword" }] : []));
-    principal = computed(() => this.principalStore.principal?.(), ...(ngDevMode ? [{ debugName: "principal" }] : []));
-    customData = computed(() => {
-        const customData = this.appStore.general()?.features?.userProfile?.customData;
-        const profileKeys = this.userProfile()?.customData;
-        return (customData?.length ? customData : (profileKeys ? Object.keys(profileKeys) : []))
-            .filter(key => !this.keys().some(k => k.toLowerCase() === key.toLowerCase())); // hide any duplicates in customData keys from data's
-    }, ...(ngDevMode ? [{ debugName: "customData" }] : []));
+    customData = computed(() => (this.appStore.general()?.features?.userProfile?.customData || [])
+        .filter(key => !this.keys().some(k => k.toLowerCase() === key.toLowerCase())), ...(ngDevMode ? [{ debugName: "customData" }] : []));
     allowChangePassword = computed(() => {
         const { useCredentials } = globalConfig;
         const { allowChangePassword = false } = this.appStore.general()?.features || {};
-        return allowChangePassword && useCredentials && this.principal().editablePartition;
+        const editablePartition = this.principalStore.editablePartition?.() || false;
+        return allowChangePassword && useCredentials && editablePartition;
     }, ...(ngDevMode ? [{ debugName: "allowChangePassword" }] : []));
     constructor() {
         this.currentLanguage.set(this.transloco.getActiveLang());
@@ -15257,26 +15248,31 @@ class UserProfileFormComponent {
             }
         });
     }
-    userProfileResource = this.userProfileService.getUserProfile(this.principal);
+    userProfileResource = this.userProfileService.getUserProfile(this.principalStore.userId);
     userProfile = linkedSignal(() => {
         if (this.userProfileResource.hasValue()) {
             return this.userProfileResource.value();
         }
-        const { userId: id, email: mail, fullName } = this.principal() || {};
+        const { userId: id, email: mail, fullName } = getState(this.principalStore);
         if (!id || !mail || !fullName) {
             return undefined;
         }
         return { data: { id, mail, fullName } };
     }, ...(ngDevMode ? [{ debugName: "userProfile" }] : []));
     async createUserProfile() {
-        const { userId: id, email: mail, fullName } = this.principal() || {};
+        const { userId: id, email: mail, fullName } = getState(this.principalStore);
         if (!id) {
             return;
         }
-        const response = await createUserProfile({ data: { id, mail, fullName } });
-        if (response) {
-            info("Created user profile", response);
-            this.userProfileResource.set(response);
+        try {
+            const response = await createUserProfile({ data: { id, mail, fullName } });
+            if (response) {
+                info("Created user profile", response);
+                this.userProfileResource.set(response);
+            }
+        }
+        catch (err) {
+            notify.error(err.message);
         }
     }
     /**
@@ -15288,7 +15284,7 @@ class UserProfileFormComponent {
     onEdit(category, propertyName) {
         const data = this.userProfile()?.[category];
         const value = data?.[propertyName];
-        this.value.set(value || "");
+        this.value.set(value?.trim() || "");
         this.propertyToEdit.set(`${category}.${propertyName}`);
     }
     /**
@@ -15298,15 +15294,20 @@ class UserProfileFormComponent {
      * @param propertyName property name
      */
     async onDeleteData(category, propertyName) {
-        const response = await deleteUserProfileProperty(this.userProfile(), category, propertyName);
-        if (response) {
-            info("Deleted user profile property", response);
-            const userProfile = JSON.parse(JSON.stringify(this.userProfile()));
-            userProfile[category][propertyName] = undefined;
-            this.userProfileResource.set(userProfile);
+        try {
+            const response = await deleteUserProfileProperty(this.userProfile(), category, propertyName);
+            if (response) {
+                info("Deleted user profile property", response);
+                const userProfile = JSON.parse(JSON.stringify(this.userProfile()));
+                userProfile[category][propertyName] = undefined;
+                this.userProfileResource.set(userProfile);
+            }
+            else {
+                info("Could not delete user profile property", response);
+            }
         }
-        else {
-            info("Could not delete user profile property", response);
+        catch (err) {
+            notify.error(err.message);
         }
     }
     /**
@@ -15320,19 +15321,24 @@ class UserProfileFormComponent {
         const userProfile = JSON.parse(JSON.stringify(this.userProfile()));
         if (!userProfile[category])
             userProfile[category] = {};
-        userProfile[category][propertyName] = this.value();
-        const response = await patchUserProfile(userProfile, category, propertyName);
-        if (response) {
-            const newUserProfile = this.userProfile();
-            this.userProfileResource.set({
-                ...newUserProfile,
-                ...response,
-                data: { ...(newUserProfile?.data || {}), ...(response.data || {}) },
-                customData: { ...(newUserProfile?.customData || {}), ...(response.customData || {}) }
-            });
+        userProfile[category][propertyName] = this.value()?.trim() || "";
+        try {
+            const response = await patchUserProfile(userProfile, category, propertyName);
+            if (response) {
+                const newUserProfile = this.userProfile();
+                this.userProfileResource.set({
+                    ...newUserProfile,
+                    ...response,
+                    data: { ...(newUserProfile?.data || {}), ...(response.data || {}) },
+                    customData: { ...(newUserProfile?.customData || {}), ...(response.customData || {}) }
+                });
+            }
+            this.value.set(undefined);
+            this.propertyToEdit.set(undefined);
+        }
+        catch (err) {
+            notify.error(err.message);
         }
-        this.value.set(undefined);
-        this.propertyToEdit.set(undefined);
     }
     /**
      * Get the value of a data key
@@ -15376,7 +15382,7 @@ class UserProfileFormComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: UserProfileFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: UserProfileFormComponent, isStandalone: true, selector: "user-profile-form, UserProfileForm, userprofileform", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, currentLanguage: { classPropertyName: "currentLanguage", publicName: "currentLanguage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", currentLanguage: "currentLanguageChange" }, providers: [provideTranslocoScope("user-profile", "login")], viewQueries: [{ propertyName: "createInputElement", first: true, predicate: ["avatarInput"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (userProfileResource.hasValue()) {\n  @let profile = userProfile();\n  <div class=\"flex flex-col gap-2 p-4\">\n    <div class=\"mb-4 flex\">\n      @if (allowProfilePhoto()) {\n        <!-- AVATAR -->\n        <Avatar\n          class=\"bg-accent text-accent-foreground hover:bg-accent/80 hover:text-accent-foreground/80 size-14 cursor-pointer\"\n          (click)=\"avatarInput.click()\">\n          @if (profile?.data?.profilePhoto) {\n            <AvatarImage\n              [src]=\"profile?.data?.profilePhoto!\"\n              width=\"44\"\n              height=\"44\"\n              alt=\"avatar\" />\n          }\n          <AvatarFallback class=\"text-lg\">\n            @if (initials()) {\n              <span>{{ initials() }}</span>\n            } @else {\n              <UserIcon class=\"size-7 p-1\" />\n            }\n          </AvatarFallback>\n        </Avatar>\n        @if (profile?.data?.profilePhoto) {\n          <button\n            variant=\"ghost\"\n            size=\"icon\"\n            class=\"text-destructive invisible cursor-pointer group-hover:visible\"\n            title=\"{{ 'userProfile.deleteProperty' | transloco }}\"\n            [attr.aria-label]=\"'userProfile.deleteProperty' | transloco\"\n            (click)=\"onDeleteData('data', 'profilePhoto')\">\n            <TrashIcon />\n          </button>\n        }\n      }\n      <div class=\"grow\"></div>\n      <div class=\"flex flex-col gap-4\">\n        <!-- LANGUAGE -->\n        <select\n          class=\"hover:outline-primary focus:outline-primary border-foreground/10 bg-background hover:bg-muted focus:bg-muted h-8 rounded-md border px-2 hover:outline focus:outline\"\n          [(ngModel)]=\"currentLanguage\"\n          (change)=\"changeLanguage()\">\n          @for (lang of AllLanguages; track lang.code) {\n            <option [value]=\"lang.code\">\n              {{ lang.label }}\n            </option>\n          }\n        </select>\n        <!-- CHANGE PASSWORD -->\n        @if (allowChangePassword()) {\n          <button\n            [disabled]=\"changingPassword()\"\n            (click)=\"changingPassword.set(true)\">\n            {{ \"login.changePassword\" | transloco }}\n          </button>\n        }\n      </div>\n    </div>\n    @if (changingPassword()) {\n      <ChangePassword\n        [username]=\"username()\"\n        [redirectAfterSuccess]=\"false\"\n        [redirectAfterCancel]=\"false\"\n        (cancel)=\"changingPassword.set(false)\"\n        (success)=\"changingPassword.set(false)\" />\n    } @else {\n      @for (key of formKeys(); track key) {\n        <div>\n          <p>{{ `userProfile.data.${key}` | transloco }}</p>\n          <div class=\"group flex flex-row\">\n            <div\n              class=\"grow whitespace-pre-line\"\n              [class.text-muted-foreground]=\"!getDataValue('data', key)\">\n              @if (propertyToEdit() === \"data.\" + key) {\n                <textarea\n                  class=\"hover:outline-primary focus:outline-primary border-foreground/20 hover:bg-muted focus:bg-muted mt-2 w-full rounded-md border px-2 pt-1 hover:outline focus:outline\"\n                  id=\"user-profile-{{ key }}\"\n                  [(ngModel)]=\"value\"></textarea>\n              } @else {\n                {{\n                  getDataValue(\"data\", key) ||\n                    (\"userProfile.notDefined\" | transloco)\n                }}\n              }\n            </div>\n            @if (propertyToEdit() === \"data.\" + key) {\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"mx-2 cursor-pointer\"\n                title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                (click)=\"onSaveData('data', key)\">\n                <i class=\"fa-fw fas fa-save ml-2\"></i>\n              </button>\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"cursor-pointer\"\n                title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                (click)=\"propertyToEdit.set(undefined)\">\n                <UndoIcon />\n              </button>\n            } @else {\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"invisible mx-2 cursor-pointer group-hover:visible\"\n                title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                (click)=\"onEdit('data', key)\">\n                <EditIcon />\n              </button>\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"text-destructive invisible cursor-pointer group-hover:visible\"\n                title=\"{{ 'userProfile.deleteProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.deleteProperty' | transloco\"\n                (click)=\"onDeleteData('data', key)\">\n                <TrashIcon />\n              </button>\n            }\n          </div>\n        </div>\n      }\n      @for (key of customData(); track key) {\n        <div>\n          <p>{{ key }}</p>\n          <div class=\"group flex flex-row\">\n            <div\n              class=\"grow whitespace-pre-line\"\n              [class.text-muted-foreground]=\"!getDataValue('customData', key)\">\n              @if (propertyToEdit() === \"customData.\" + key) {\n                <textarea\n                  class=\"hover:outline-primary focus:outline-primary border-foreground/20 hover:bg-muted focus:bg-muted mt-2 w-full rounded-md border px-2 pt-1 hover:outline focus:outline\"\n                  id=\"user-profile-{{ key }}\"\n                  [(ngModel)]=\"value\"></textarea>\n              } @else {\n                {{\n                  getDataValue(\"customData\", key) ||\n                    (\"userProfile.notDefined\" | transloco)\n                }}\n              }\n            </div>\n            @if (propertyToEdit() === \"customData.\" + key) {\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"mx-2 cursor-pointer\"\n                title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                (click)=\"onSaveData('customData', key)\">\n                <i class=\"fa-fw fas fa-save ml-2\"></i>\n              </button>\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"cursor-pointer\"\n                title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                (click)=\"propertyToEdit.set(undefined)\">\n                <UndoIcon />\n              </button>\n            } @else {\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"invisible mx-2 cursor-pointer group-hover:visible\"\n                title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                (click)=\"onEdit('customData', key)\">\n                <EditIcon />\n              </button>\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"text-destructive invisible cursor-pointer group-hover:visible\"\n                title=\"{{ 'userProfile.deleteProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.deleteProperty' | transloco\"\n                (click)=\"onDeleteData('customData', key)\">\n                <TrashIcon />\n              </button>\n            }\n          </div>\n        </div>\n      }\n    }\n  </div>\n} @else if (userProfileResource.isLoading()) {\n  <span>Loading...</span>\n} @else if (userProfileResource.error()) {\n  <p>Please contact an administrator to create your user profile.</p>\n}\n\n<!-- AVATAR UPLOAD -->\n<input\n  #avatarInput\n  class=\"hidden\"\n  type=\"file\"\n  accept=\"image/*\"\n  (change)=\"uploadAvatar($event)\" />\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: InputComponent, selector: "input[type=\"text\"], input[type=\"email\"], input[type=\"number\"], input[type=\"password\"], input[type=\"tel\"], input[type=\"url\"], input[type=\"time\"], input[type=\"file\"]", inputs: ["class", "variant", "decoration"] }, { kind: "component", type: TrashIcon, selector: "trash-icon, TrashIcon", inputs: ["class"] }, { kind: "component", type: EditIcon, selector: "edit-icon, EditIcon, editicon", inputs: ["class"] }, { kind: "component", type: UndoIcon, selector: "UndoIcon, undoicon, undo-icon", inputs: ["class"] }, { kind: "component", type: AvatarComponent, selector: "avatar, Avatar", inputs: ["class"] }, { kind: "component", type: AvatarFallbackComponent, selector: "avatar-fallback, avatarfallback, AvatarFallback", inputs: ["class"] }, { kind: "component", type: UserIcon, selector: "user-icon, UserIcon", inputs: ["class"] }, { kind: "component", type: AvatarImageComponent, selector: "avatar-image, AvatarImage, avatarimage", inputs: ["class", "src", "alt", "width", "height", "referrerPolicy", "crossOrigin"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "component", type: ChangePasswordComponent, selector: "change-password, ChangePassword, changepassword", inputs: ["username", "alert", "redirectAfterSuccess", "redirectAfterCancel", "currentPassword", "newPassword", "confirmPassword"], outputs: ["success", "cancel", "currentPasswordChange", "newPasswordChange", "confirmPasswordChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: UserProfileFormComponent, isStandalone: true, selector: "user-profile-form, UserProfileForm, userprofileform", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, currentLanguage: { classPropertyName: "currentLanguage", publicName: "currentLanguage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", currentLanguage: "currentLanguageChange" }, providers: [provideTranslocoScope("user-profile", "login")], viewQueries: [{ propertyName: "createInputElement", first: true, predicate: ["avatarInput"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (userProfileResource.hasValue()) {\n  @let profile = userProfile();\n  <div class=\"flex flex-col gap-2 p-4\">\n    <div class=\"mb-4 flex\">\n      @if (allowProfilePhoto()) {\n        <!-- AVATAR -->\n        <Avatar\n          class=\"bg-accent text-accent-foreground hover:bg-accent/80 hover:text-accent-foreground/80 size-14 cursor-pointer\"\n          (click)=\"avatarInput.click()\">\n          @if (profile?.data?.profilePhoto) {\n            <AvatarImage\n              [src]=\"profile?.data?.profilePhoto!\"\n              width=\"44\"\n              height=\"44\"\n              alt=\"avatar\" />\n          }\n          <AvatarFallback class=\"text-lg\">\n            @if (initials()) {\n              <span>{{ initials() }}</span>\n            } @else {\n              <UserIcon class=\"size-7 p-1\" />\n            }\n          </AvatarFallback>\n        </Avatar>\n        @if (profile?.data?.profilePhoto) {\n          <button\n            variant=\"ghost\"\n            size=\"icon\"\n            class=\"text-destructive cursor-pointer\"\n            title=\"{{ 'userProfile.deleteProperty' | transloco }}\"\n            [attr.aria-label]=\"'userProfile.deleteProperty' | transloco\"\n            (click)=\"onDeleteData('data', 'profilePhoto')\">\n            <TrashIcon />\n          </button>\n        }\n      }\n      <div class=\"grow\"></div>\n      <div class=\"flex flex-col gap-4\">\n        <!-- LANGUAGE -->\n        <select\n          class=\"hover:outline-primary focus:outline-primary border-foreground/10 bg-background hover:bg-muted focus:bg-muted h-8 rounded-md border px-2 hover:outline focus:outline\"\n          [(ngModel)]=\"currentLanguage\"\n          (change)=\"changeLanguage()\">\n          @for (lang of AllLanguages; track lang.code) {\n            <option [value]=\"lang.code\">\n              {{ lang.label }}\n            </option>\n          }\n        </select>\n        <!-- CHANGE PASSWORD -->\n        @if (allowChangePassword()) {\n          <button\n            [disabled]=\"changingPassword()\"\n            (click)=\"changingPassword.set(true)\">\n            {{ \"login.changePassword\" | transloco }}\n          </button>\n        }\n      </div>\n    </div>\n    @if (changingPassword()) {\n      <ChangePassword\n        [username]=\"username()\"\n        [redirectAfterSuccess]=\"false\"\n        [redirectAfterCancel]=\"false\"\n        (cancel)=\"changingPassword.set(false)\"\n        (success)=\"changingPassword.set(false)\" />\n    } @else {\n      @for (key of formKeys(); track key) {\n        <div>\n          <p>{{ `userProfile.data.${key}` | transloco }}</p>\n          <div class=\"group flex flex-row\">\n            <div\n              class=\"grow whitespace-pre-line\"\n              [class.text-muted-foreground]=\"!getDataValue('data', key)\">\n              @if (propertyToEdit() === \"data.\" + key) {\n                <textarea\n                  class=\"hover:outline-primary focus:outline-primary border-foreground/20 hover:bg-muted focus:bg-muted mt-2 w-full rounded-md border px-2 pt-1 hover:outline focus:outline\"\n                  id=\"user-profile-{{ key }}\"\n                  [(ngModel)]=\"value\"></textarea>\n              } @else {\n                {{\n                  getDataValue(\"data\", key) ||\n                    (\"userProfile.notDefined\" | transloco)\n                }}\n              }\n            </div>\n            @if (propertyToEdit() === \"data.\" + key) {\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"mx-2 cursor-pointer\"\n                title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                (click)=\"onSaveData('data', key)\">\n                <i class=\"fa-fw fas fa-save ml-2\"></i>\n              </button>\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"cursor-pointer\"\n                title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                (click)=\"propertyToEdit.set(undefined)\">\n                <UndoIcon />\n              </button>\n            } @else {\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"invisible mx-2 cursor-pointer group-hover:visible\"\n                title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                (click)=\"onEdit('data', key)\">\n                <EditIcon />\n              </button>\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"text-destructive invisible cursor-pointer group-hover:visible\"\n                title=\"{{ 'userProfile.deleteProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.deleteProperty' | transloco\"\n                (click)=\"onDeleteData('data', key)\">\n                <TrashIcon />\n              </button>\n            }\n          </div>\n        </div>\n      }\n      @for (key of customData(); track key) {\n        <div>\n          <p>{{ key }}</p>\n          <div class=\"group flex flex-row\">\n            <div\n              class=\"grow whitespace-pre-line\"\n              [class.text-muted-foreground]=\"!getDataValue('customData', key)\">\n              @if (propertyToEdit() === \"customData.\" + key) {\n                <textarea\n                  class=\"hover:outline-primary focus:outline-primary border-foreground/20 hover:bg-muted focus:bg-muted mt-2 w-full rounded-md border px-2 pt-1 hover:outline focus:outline\"\n                  id=\"user-profile-{{ key }}\"\n                  [(ngModel)]=\"value\"></textarea>\n              } @else {\n                {{\n                  getDataValue(\"customData\", key) ||\n                    (\"userProfile.notDefined\" | transloco)\n                }}\n              }\n            </div>\n            @if (propertyToEdit() === \"customData.\" + key) {\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"mx-2 cursor-pointer\"\n                title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                (click)=\"onSaveData('customData', key)\">\n                <i class=\"fa-fw fas fa-save ml-2\"></i>\n              </button>\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"cursor-pointer\"\n                title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                (click)=\"propertyToEdit.set(undefined)\">\n                <UndoIcon />\n              </button>\n            } @else {\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"invisible mx-2 cursor-pointer group-hover:visible\"\n                title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                (click)=\"onEdit('customData', key)\">\n                <EditIcon />\n              </button>\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"text-destructive invisible cursor-pointer group-hover:visible\"\n                title=\"{{ 'userProfile.deleteProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.deleteProperty' | transloco\"\n                (click)=\"onDeleteData('customData', key)\">\n                <TrashIcon />\n              </button>\n            }\n          </div>\n        </div>\n      }\n    }\n  </div>\n} @else if (userProfileResource.isLoading()) {\n  <span>Loading...</span>\n} @else if (userProfileResource.error()) {\n  <p>Please contact an administrator to create your user profile.</p>\n}\n\n<!-- AVATAR UPLOAD -->\n<input\n  #avatarInput\n  class=\"hidden\"\n  type=\"file\"\n  accept=\"image/*\"\n  (change)=\"uploadAvatar($event)\" />\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: RouterModule }, { kind: "component", type: TrashIcon, selector: "trash-icon, TrashIcon", inputs: ["class"] }, { kind: "component", type: EditIcon, selector: "edit-icon, EditIcon, editicon", inputs: ["class"] }, { kind: "component", type: UndoIcon, selector: "UndoIcon, undoicon, undo-icon", inputs: ["class"] }, { kind: "component", type: AvatarComponent, selector: "avatar, Avatar", inputs: ["class"] }, { kind: "component", type: AvatarFallbackComponent, selector: "avatar-fallback, avatarfallback, AvatarFallback", inputs: ["class"] }, { kind: "component", type: UserIcon, selector: "user-icon, UserIcon", inputs: ["class"] }, { kind: "component", type: AvatarImageComponent, selector: "avatar-image, AvatarImage, avatarimage", inputs: ["class", "src", "alt", "width", "height", "referrerPolicy", "crossOrigin"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "component", type: ChangePasswordComponent, selector: "change-password, ChangePassword, changepassword", inputs: ["username", "alert", "redirectAfterSuccess", "redirectAfterCancel", "currentPassword", "newPassword", "confirmPassword"], outputs: ["success", "cancel", "currentPasswordChange", "newPasswordChange", "confirmPasswordChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: UserProfileFormComponent, decorators: [{
             type: Component,
@@ -15384,7 +15390,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         FormsModule,
                         RouterModule,
                         TranslocoPipe,
-                        InputComponent,
                         TrashIcon,
                         EditIcon,
                         UndoIcon,
@@ -15394,19 +15399,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         AvatarImageComponent,
                         ButtonComponent,
                         ChangePasswordComponent
-                    ], providers: [provideTranslocoScope("user-profile", "login")], template: "@if (userProfileResource.hasValue()) {\n  @let profile = userProfile();\n  <div class=\"flex flex-col gap-2 p-4\">\n    <div class=\"mb-4 flex\">\n      @if (allowProfilePhoto()) {\n        <!-- AVATAR -->\n        <Avatar\n          class=\"bg-accent text-accent-foreground hover:bg-accent/80 hover:text-accent-foreground/80 size-14 cursor-pointer\"\n          (click)=\"avatarInput.click()\">\n          @if (profile?.data?.profilePhoto) {\n            <AvatarImage\n              [src]=\"profile?.data?.profilePhoto!\"\n              width=\"44\"\n              height=\"44\"\n              alt=\"avatar\" />\n          }\n          <AvatarFallback class=\"text-lg\">\n            @if (initials()) {\n              <span>{{ initials() }}</span>\n            } @else {\n              <UserIcon class=\"size-7 p-1\" />\n            }\n          </AvatarFallback>\n        </Avatar>\n        @if (profile?.data?.profilePhoto) {\n          <button\n            variant=\"ghost\"\n            size=\"icon\"\n            class=\"text-destructive invisible cursor-pointer group-hover:visible\"\n            title=\"{{ 'userProfile.deleteProperty' | transloco }}\"\n            [attr.aria-label]=\"'userProfile.deleteProperty' | transloco\"\n            (click)=\"onDeleteData('data', 'profilePhoto')\">\n            <TrashIcon />\n          </button>\n        }\n      }\n      <div class=\"grow\"></div>\n      <div class=\"flex flex-col gap-4\">\n        <!-- LANGUAGE -->\n        <select\n          class=\"hover:outline-primary focus:outline-primary border-foreground/10 bg-background hover:bg-muted focus:bg-muted h-8 rounded-md border px-2 hover:outline focus:outline\"\n          [(ngModel)]=\"currentLanguage\"\n          (change)=\"changeLanguage()\">\n          @for (lang of AllLanguages; track lang.code) {\n            <option [value]=\"lang.code\">\n              {{ lang.label }}\n            </option>\n          }\n        </select>\n        <!-- CHANGE PASSWORD -->\n        @if (allowChangePassword()) {\n          <button\n            [disabled]=\"changingPassword()\"\n            (click)=\"changingPassword.set(true)\">\n            {{ \"login.changePassword\" | transloco }}\n          </button>\n        }\n      </div>\n    </div>\n    @if (changingPassword()) {\n      <ChangePassword\n        [username]=\"username()\"\n        [redirectAfterSuccess]=\"false\"\n        [redirectAfterCancel]=\"false\"\n        (cancel)=\"changingPassword.set(false)\"\n        (success)=\"changingPassword.set(false)\" />\n    } @else {\n      @for (key of formKeys(); track key) {\n        <div>\n          <p>{{ `userProfile.data.${key}` | transloco }}</p>\n          <div class=\"group flex flex-row\">\n            <div\n              class=\"grow whitespace-pre-line\"\n              [class.text-muted-foreground]=\"!getDataValue('data', key)\">\n              @if (propertyToEdit() === \"data.\" + key) {\n                <textarea\n                  class=\"hover:outline-primary focus:outline-primary border-foreground/20 hover:bg-muted focus:bg-muted mt-2 w-full rounded-md border px-2 pt-1 hover:outline focus:outline\"\n                  id=\"user-profile-{{ key }}\"\n                  [(ngModel)]=\"value\"></textarea>\n              } @else {\n                {{\n                  getDataValue(\"data\", key) ||\n                    (\"userProfile.notDefined\" | transloco)\n                }}\n              }\n            </div>\n            @if (propertyToEdit() === \"data.\" + key) {\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"mx-2 cursor-pointer\"\n                title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                (click)=\"onSaveData('data', key)\">\n                <i class=\"fa-fw fas fa-save ml-2\"></i>\n              </button>\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"cursor-pointer\"\n                title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                (click)=\"propertyToEdit.set(undefined)\">\n                <UndoIcon />\n              </button>\n            } @else {\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"invisible mx-2 cursor-pointer group-hover:visible\"\n                title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                (click)=\"onEdit('data', key)\">\n                <EditIcon />\n              </button>\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"text-destructive invisible cursor-pointer group-hover:visible\"\n                title=\"{{ 'userProfile.deleteProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.deleteProperty' | transloco\"\n                (click)=\"onDeleteData('data', key)\">\n                <TrashIcon />\n              </button>\n            }\n          </div>\n        </div>\n      }\n      @for (key of customData(); track key) {\n        <div>\n          <p>{{ key }}</p>\n          <div class=\"group flex flex-row\">\n            <div\n              class=\"grow whitespace-pre-line\"\n              [class.text-muted-foreground]=\"!getDataValue('customData', key)\">\n              @if (propertyToEdit() === \"customData.\" + key) {\n                <textarea\n                  class=\"hover:outline-primary focus:outline-primary border-foreground/20 hover:bg-muted focus:bg-muted mt-2 w-full rounded-md border px-2 pt-1 hover:outline focus:outline\"\n                  id=\"user-profile-{{ key }}\"\n                  [(ngModel)]=\"value\"></textarea>\n              } @else {\n                {{\n                  getDataValue(\"customData\", key) ||\n                    (\"userProfile.notDefined\" | transloco)\n                }}\n              }\n            </div>\n            @if (propertyToEdit() === \"customData.\" + key) {\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"mx-2 cursor-pointer\"\n                title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                (click)=\"onSaveData('customData', key)\">\n                <i class=\"fa-fw fas fa-save ml-2\"></i>\n              </button>\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"cursor-pointer\"\n                title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                (click)=\"propertyToEdit.set(undefined)\">\n                <UndoIcon />\n              </button>\n            } @else {\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"invisible mx-2 cursor-pointer group-hover:visible\"\n                title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                (click)=\"onEdit('customData', key)\">\n                <EditIcon />\n              </button>\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"text-destructive invisible cursor-pointer group-hover:visible\"\n                title=\"{{ 'userProfile.deleteProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.deleteProperty' | transloco\"\n                (click)=\"onDeleteData('customData', key)\">\n                <TrashIcon />\n              </button>\n            }\n          </div>\n        </div>\n      }\n    }\n  </div>\n} @else if (userProfileResource.isLoading()) {\n  <span>Loading...</span>\n} @else if (userProfileResource.error()) {\n  <p>Please contact an administrator to create your user profile.</p>\n}\n\n<!-- AVATAR UPLOAD -->\n<input\n  #avatarInput\n  class=\"hidden\"\n  type=\"file\"\n  accept=\"image/*\"\n  (change)=\"uploadAvatar($event)\" />\n" }]
+                    ], providers: [provideTranslocoScope("user-profile", "login")], template: "@if (userProfileResource.hasValue()) {\n  @let profile = userProfile();\n  <div class=\"flex flex-col gap-2 p-4\">\n    <div class=\"mb-4 flex\">\n      @if (allowProfilePhoto()) {\n        <!-- AVATAR -->\n        <Avatar\n          class=\"bg-accent text-accent-foreground hover:bg-accent/80 hover:text-accent-foreground/80 size-14 cursor-pointer\"\n          (click)=\"avatarInput.click()\">\n          @if (profile?.data?.profilePhoto) {\n            <AvatarImage\n              [src]=\"profile?.data?.profilePhoto!\"\n              width=\"44\"\n              height=\"44\"\n              alt=\"avatar\" />\n          }\n          <AvatarFallback class=\"text-lg\">\n            @if (initials()) {\n              <span>{{ initials() }}</span>\n            } @else {\n              <UserIcon class=\"size-7 p-1\" />\n            }\n          </AvatarFallback>\n        </Avatar>\n        @if (profile?.data?.profilePhoto) {\n          <button\n            variant=\"ghost\"\n            size=\"icon\"\n            class=\"text-destructive cursor-pointer\"\n            title=\"{{ 'userProfile.deleteProperty' | transloco }}\"\n            [attr.aria-label]=\"'userProfile.deleteProperty' | transloco\"\n            (click)=\"onDeleteData('data', 'profilePhoto')\">\n            <TrashIcon />\n          </button>\n        }\n      }\n      <div class=\"grow\"></div>\n      <div class=\"flex flex-col gap-4\">\n        <!-- LANGUAGE -->\n        <select\n          class=\"hover:outline-primary focus:outline-primary border-foreground/10 bg-background hover:bg-muted focus:bg-muted h-8 rounded-md border px-2 hover:outline focus:outline\"\n          [(ngModel)]=\"currentLanguage\"\n          (change)=\"changeLanguage()\">\n          @for (lang of AllLanguages; track lang.code) {\n            <option [value]=\"lang.code\">\n              {{ lang.label }}\n            </option>\n          }\n        </select>\n        <!-- CHANGE PASSWORD -->\n        @if (allowChangePassword()) {\n          <button\n            [disabled]=\"changingPassword()\"\n            (click)=\"changingPassword.set(true)\">\n            {{ \"login.changePassword\" | transloco }}\n          </button>\n        }\n      </div>\n    </div>\n    @if (changingPassword()) {\n      <ChangePassword\n        [username]=\"username()\"\n        [redirectAfterSuccess]=\"false\"\n        [redirectAfterCancel]=\"false\"\n        (cancel)=\"changingPassword.set(false)\"\n        (success)=\"changingPassword.set(false)\" />\n    } @else {\n      @for (key of formKeys(); track key) {\n        <div>\n          <p>{{ `userProfile.data.${key}` | transloco }}</p>\n          <div class=\"group flex flex-row\">\n            <div\n              class=\"grow whitespace-pre-line\"\n              [class.text-muted-foreground]=\"!getDataValue('data', key)\">\n              @if (propertyToEdit() === \"data.\" + key) {\n                <textarea\n                  class=\"hover:outline-primary focus:outline-primary border-foreground/20 hover:bg-muted focus:bg-muted mt-2 w-full rounded-md border px-2 pt-1 hover:outline focus:outline\"\n                  id=\"user-profile-{{ key }}\"\n                  [(ngModel)]=\"value\"></textarea>\n              } @else {\n                {{\n                  getDataValue(\"data\", key) ||\n                    (\"userProfile.notDefined\" | transloco)\n                }}\n              }\n            </div>\n            @if (propertyToEdit() === \"data.\" + key) {\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"mx-2 cursor-pointer\"\n                title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                (click)=\"onSaveData('data', key)\">\n                <i class=\"fa-fw fas fa-save ml-2\"></i>\n              </button>\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"cursor-pointer\"\n                title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                (click)=\"propertyToEdit.set(undefined)\">\n                <UndoIcon />\n              </button>\n            } @else {\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"invisible mx-2 cursor-pointer group-hover:visible\"\n                title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                (click)=\"onEdit('data', key)\">\n                <EditIcon />\n              </button>\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"text-destructive invisible cursor-pointer group-hover:visible\"\n                title=\"{{ 'userProfile.deleteProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.deleteProperty' | transloco\"\n                (click)=\"onDeleteData('data', key)\">\n                <TrashIcon />\n              </button>\n            }\n          </div>\n        </div>\n      }\n      @for (key of customData(); track key) {\n        <div>\n          <p>{{ key }}</p>\n          <div class=\"group flex flex-row\">\n            <div\n              class=\"grow whitespace-pre-line\"\n              [class.text-muted-foreground]=\"!getDataValue('customData', key)\">\n              @if (propertyToEdit() === \"customData.\" + key) {\n                <textarea\n                  class=\"hover:outline-primary focus:outline-primary border-foreground/20 hover:bg-muted focus:bg-muted mt-2 w-full rounded-md border px-2 pt-1 hover:outline focus:outline\"\n                  id=\"user-profile-{{ key }}\"\n                  [(ngModel)]=\"value\"></textarea>\n              } @else {\n                {{\n                  getDataValue(\"customData\", key) ||\n                    (\"userProfile.notDefined\" | transloco)\n                }}\n              }\n            </div>\n            @if (propertyToEdit() === \"customData.\" + key) {\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"mx-2 cursor-pointer\"\n                title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                (click)=\"onSaveData('customData', key)\">\n                <i class=\"fa-fw fas fa-save ml-2\"></i>\n              </button>\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"cursor-pointer\"\n                title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                (click)=\"propertyToEdit.set(undefined)\">\n                <UndoIcon />\n              </button>\n            } @else {\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"invisible mx-2 cursor-pointer group-hover:visible\"\n                title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                (click)=\"onEdit('customData', key)\">\n                <EditIcon />\n              </button>\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"text-destructive invisible cursor-pointer group-hover:visible\"\n                title=\"{{ 'userProfile.deleteProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.deleteProperty' | transloco\"\n                (click)=\"onDeleteData('customData', key)\">\n                <TrashIcon />\n              </button>\n            }\n          </div>\n        </div>\n      }\n    }\n  </div>\n} @else if (userProfileResource.isLoading()) {\n  <span>Loading...</span>\n} @else if (userProfileResource.error()) {\n  <p>Please contact an administrator to create your user profile.</p>\n}\n\n<!-- AVATAR UPLOAD -->\n<input\n  #avatarInput\n  class=\"hidden\"\n  type=\"file\"\n  accept=\"image/*\"\n  (change)=\"uploadAvatar($event)\" />\n" }]
         }], ctorParameters: () => [], propDecorators: { createInputElement: [{ type: i0.ViewChild, args: ["avatarInput", { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], currentLanguage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentLanguage", required: false }] }, { type: i0.Output, args: ["currentLanguageChange"] }] } });
 
 class UserProfileDialog {
     dialog = viewChild(DialogComponent, ...(ngDevMode ? [{ debugName: "dialog" }] : []));
     opened = signal(false, ...(ngDevMode ? [{ debugName: "opened" }] : []));
     open() {
-        this.dialog()?.showModal();
+        this.dialog()?.open();
         this.opened.set(true);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: UserProfileDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: UserProfileDialog, isStandalone: true, selector: "user-profile-dialog, userprofiledialog, UserProfileDialog", providers: [provideTranslocoScope("user-profile")], viewQueries: [{ propertyName: "dialog", first: true, predicate: DialogComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
-    <dialog #dialog>
+    <div dialog #dialog="dialog">
       <DialogContent class="max-h-11/12 overflow-auto">
         <DialogHeader>
           <DialogTitle>{{ 'userProfile.title' | transloco }}</DialogTitle>
@@ -15415,9 +15420,8 @@ class UserProfileDialog {
         @if (opened()) {
           <user-profile-form />
         }
-
-        </DialogContent>
-    </dialog>
+      </DialogContent>
+    </div>
   `, isInline: true, dependencies: [{ kind: "component", type: DialogComponent, selector: "dialog, [dialog]", outputs: ["closed"], exportAs: ["dialog"] }, { kind: "component", type: DialogHeaderComponent, selector: "DialogHeader" }, { kind: "directive", type: DialogContentComponent, selector: "DialogContent", inputs: ["class"] }, { kind: "component", type: UserProfileFormComponent, selector: "user-profile-form, UserProfileForm, userprofileform", inputs: ["value", "currentLanguage"], outputs: ["valueChange", "currentLanguageChange"] }, { kind: "directive", type: DialogTitleComponent, selector: "DialogTitle", inputs: ["class"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: UserProfileDialog, decorators: [{
@@ -15435,7 +15439,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                     ],
                     providers: [provideTranslocoScope("user-profile")],
                     template: `
-    <dialog #dialog>
+    <div dialog #dialog="dialog">
       <DialogContent class="max-h-11/12 overflow-auto">
         <DialogHeader>
           <DialogTitle>{{ 'userProfile.title' | transloco }}</DialogTitle>
@@ -15444,9 +15448,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
         @if (opened()) {
           <user-profile-form />
         }
-
-        </DialogContent>
-    </dialog>
+      </DialogContent>
+    </div>
   `
                 }]
         }], propDecorators: { dialog: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DialogComponent), { isSignal: true }] }] } });
@@ -15612,6 +15615,9 @@ const toastInterceptorFn = (request, next) => {
             }
         }
         if ([400, 403, 500, 503].includes(status)) {
+            if (status === 400 && url.includes("api/v2/user-profile")) {
+                return next(request);
+            }
             // Avoid showing error toasts for preview requests
             if (url.includes("api/v1/preview") === false) {
                 const { errorMessage = err.statusText, errorCodeText = `Error ${status}` } = error;