@sinequa/atomic-angular 1.19.2 → 1.19.4

package/fesm2022/sinequa-atomic-angular.mjs

@@ -7,7 +7,7 @@ import highlightWords from 'highlight-words';
 import { ActivatedRoute, Router, NavigationEnd, RouterLink, RouterLinkActive, RouterModule } from '@angular/router';
 import { withDevtools } from '@angular-architects/ngrx-toolkit';
 import { signalStore, signalStoreFeature, withState, withMethods, patchState, getState, withComputed } from '@ngrx/signals';
-import { EngineType, fetchApp, extraColumns, sysLang, fetchPrincipal, globalConfig, filter, getQueryParamsFromUrl, isRedirectPending, info, clearSessionTokens, login, error, setGlobalConfig, initializeAppConfig, notify, addConcepts, queryParamsFromUrl, patchUserSettings, deleteUserSettings, fetchUserSettings, warn, buildPathsAndLevels, escapeExpr, fetchQuery, flattenLegacyFilterValues, isAuthenticated, isExpired, debug, AuditEventType, fetchSuggest, isObject, Audit, getMetadata, bisect, isNotInputEvent, fetchSponsoredLinks, translateAggregationToDateOptions, aggItemRegex, parseValueAndOperatorFromItem, fetchSuggestField, fetchSimilarDocuments, logout, fetchChangePassword, fetchSendPasswordResetEmail, expiresSoon, suggestionsToTreeAggregationNodes, labels, fetchLabels, guid, getRelativeDate, createUserProfile, deleteUserProfileProperty, patchUserProfile, isJsonable, addAuditAdditionalInfo, getToken, setToken, createHeaders } from '@sinequa/atomic';
+import { EngineType, fetchApp, extraColumns, sysLang, fetchPrincipal, globalConfig, filter, getQueryParamsFromUrl, isRedirectPending, info, clearSessionTokens, login, error, setGlobalConfig, initializeAppConfig, notify, addConcepts, queryParamsFromUrl, patchUserSettings, deleteUserSettings, fetchUserSettings, warn, buildPathsAndLevels, escapeExpr, fetchQuery, flattenLegacyFilterValues, isAuthenticated, isExpired, debug, AuditEventType, fetchSuggest, Audit, isObject, getMetadata, bisect, isNotInputEvent, fetchSponsoredLinks, translateAggregationToDateOptions, aggItemRegex, parseValueAndOperatorFromItem, fetchSuggestField, fetchSimilarDocuments, logout, fetchChangePassword, fetchSendPasswordResetEmail, expiresSoon, suggestionsToTreeAggregationNodes, labels, fetchLabels, guid, getRelativeDate, createUserProfile, deleteUserProfileProperty, patchUserProfile, isJsonable, addAuditAdditionalInfo, getToken, setToken, createHeaders } from '@sinequa/atomic';
 import { takeUntilDestroyed, toObservable, toSignal } from '@angular/core/rxjs-interop';
 import { DatePipe, DATE_PIPE_DEFAULT_TIMEZONE, DATE_PIPE_DEFAULT_OPTIONS, Location, NgTemplateOutlet, NgStyle, NgClass, NgComponentOutlet } from '@angular/common';
 import { HttpClient, HttpParams, httpResource, HttpResponse, HttpContextToken, HttpHeaders } from '@angular/common/http';
@@ -3262,7 +3262,12 @@ class QueryService {
             };
             return r;
         }), tap(response => {
-            this.result.set(response);
+            // An "open" query (expanding a tree aggregation node) only fetches the node's
+            // children: its response is not the page's search result (no tabs, no records...).
+            // Publishing it would wipe the state derived from `result` (e.g. the tab counts).
+            if (query.action !== "open") {
+                this.result.set(response);
+            }
             info("queryService.getResults success - data: ", response);
         }));
     }
@@ -4404,116 +4409,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImpo
                 }]
         }] });
 
-class JsonMethodPluginService {
-    http = inject(HttpClient);
-    API_URL = `${globalConfig.backendUrl}/api/v1`;
-    /**
-     * Call a JsonMethod plugin using an HTTP POST
-     *
-     * @param method The name of the JsonMethod plugin
-     * @param query Parameters to pass to the plugin
-     * @param options HTTP options for the request
-     * @returns An observable of the plugin's return value
-     */
-    post(method, query, options) {
-        if (!isObject(query)) {
-            return throwError(() => ({ error: 'invalid query object' }));
-        }
-        return this.http.post(`${this.API_URL}/plugin/${method}`, query, options);
-    }
-    /**
-     * Call a JsonMethod plugin using an HTTP GET
-     *
-     * @param method The name of the JsonMethod plugin
-     * @param query Parameters to pass to the plugin
-     * @param options HTTP options for the request
-     * @returns An observable of the plugin's return value
-     */
-    get(method, query, options) {
-        return this.http.get(`${this.API_URL}/plugin/${method}`, {
-            params: query,
-            ...options
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: JsonMethodPluginService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: JsonMethodPluginService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: JsonMethodPluginService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
-
-/**
- * The route an audit event names: the path, without its leading slash, query string or fragment.
- * `/search?q=irsn#p2` and `/search` are the same route — arriving on one from the other is a new
- * query, not a navigation.
- */
-function routeNameOf(url) {
-    return url.slice(1).split(/[?#]/)[0];
-}
-class NavigationService {
-    router = inject(Router);
-    auditService = inject(AuditService);
-    // The route of the previous navigation, used only to dedupe audit route-change notifications in
-    // navigationEnd$ below. Kept separate from urlAfterNavigation so that getter stays correct
-    // regardless of whether anything subscribes to navigationEnd$.
-    //
-    // It used to hold the full url (`/search?q=irsn`) while the comparison was against the bare route
-    // name (`search`): the two could never be equal, so the dedupe never fired and every navigation
-    // was audited — including the query-param changes that make up most of a search session.
-    previousRouteName = null;
-    /**
-     * The URL of the current navigation, used to redirect the user after login.
-     *
-     * Sourced directly from `Router.url`, which Angular keeps up to date on every navigation with no
-     * subscription required — unlike a field updated as a side effect of `navigationEnd$` below,
-     * which only happens for whoever actually subscribes to it.
-     *
-     * The authentication screens are never returned: sending someone back to `/logout` after they
-     * signed in defeats the sign-in, and back to `/login` loops. The exclusion used to be a literal
-     * `!== "/login"`, which let through `/logout`, `/login?mode=changepassword` — same screen, one
-     * query param — and any application whose `loginPath` is not spelled `/login`.
-     */
-    get urlAfterNavigation() {
-        const url = this.router.url;
-        return isAuthRoute(url, globalConfig.loginPath) ? null : url;
-    }
-    /**
-     * Observable that emits events of type `NavigationEnd` from the Angular Router.
-     *
-     * This observable performs the following operations:
-     * - Maps all router events to `RouterEvent`.
-     * - Filters the events to only include instances of `NavigationEnd`.
-     * - Taps into the event stream to notify the audit service when the route itself changes — a new
-     *   query, a filter or another page of results stays on the same route and is not one.
-     * - Shares the replayed value with a buffer size of 1 to ensure subscribers receive the latest emitted value.
-     *
-     * @type Observable<RouterEvent>
-     */
-    navigationEnd$ = this.router.events.pipe(map(event => event), filter$1((event) => event instanceof NavigationEnd), tap(event => {
-        const routeName = routeNameOf(event.url);
-        // The empty name is the application root, which has never been audited.
-        if (routeName && routeName !== this.previousRouteName) {
-            this.auditService.notifyRouteChange(routeName);
-        }
-        // Every route is remembered, the authentication screens included. Skipping them would swallow
-        // the return: leaving `/search` for `/login` and coming back is two route changes, and the
-        // second one would compare against a `search` the user has meanwhile left. (The exclusion that
-        // used to sit here never ran — the dedupe above it could not fire.)
-        this.previousRouteName = routeName;
-    }), shareReplay(1));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: NavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: NavigationService, providedIn: "root" });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: NavigationService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: "root"
-                }]
-        }] });
-
 // pre-configured highlights's colors
 const HIGHLIGHTS = new InjectionToken('highlights', {
     factory: () => [
@@ -4799,17 +4694,45 @@ class PreviewService {
      * @returns the html id
      */
     getEntityId(entity, value, index) {
-        if (!this.previewData)
-            return undefined;
-        // Combine filters for better performance.
-        // NB: positionInCategories[entity] is a zero-based index, so the first occurrence is 0.
-        // Use a presence check (not truthiness) to avoid dropping that first occurrence.
-        const entitySearched = this.previewData.highlightsPerLocation
-            .filter(item => item.positionInCategories[entity] !== undefined && item.values.some(v => v === value))
-            .map(e => ({ id: e.positionInCategories[entity] }));
-        const id = entitySearched[index]?.id;
-        return id;
+        return this.getEntityLocations(entity, value)[index];
+    }
+    /**
+     * Get the ids of every occurrence of an entity value that is actually highlighted in the preview,
+     * ordered by position in the document.
+     *
+     * This is the source of truth for entity navigation: the `count` carried by the indexed record can be
+     * greater than the number of occurrences located in the converted document (ES-32245).
+     *
+     * @param entity the entity type (i.e. "geo")
+     * @param value the entity value (i.e. "AUSTRALIA")
+     * @returns the html ids (`positionInCategories[entity]`), empty when nothing is highlighted
+     */
+    getEntityLocations(entity, value) {
+        const data = this.previewData;
+        if (!data)
+            return [];
+        let perEntity = this.entityLocationsCache.get(data);
+        if (!perEntity) {
+            perEntity = new Map();
+            this.entityLocationsCache.set(data, perEntity);
+        }
+        const key = `${entity}\u0000${value}`;
+        let ids = perEntity.get(key);
+        if (!ids) {
+            ids = [];
+            for (const item of data.highlightsPerLocation) {
+                // NB: positionInCategories[entity] is a zero-based index, so the first occurrence is 0.
+                // Use a presence check (not truthiness) to avoid dropping that first occurrence.
+                const position = item.positionInCategories[entity];
+                if (position !== undefined && item.values.some(v => v === value))
+                    ids.push(position);
+            }
+            perEntity.set(key, ids);
+        }
+        return ids;
     }
+    /** Memoized `getEntityLocations` results, dropped with the `PreviewData` they were computed from. */
+    entityLocationsCache = new WeakMap();
     /**
      * Send a message to the prewiew iFrame with the required data to retrieve HTML content for a specific highlight category
      *
@@ -4973,6 +4896,171 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i0.DestroyRef }] });
 
+/**
+ * Cursor over the occurrences of an entity value highlighted in the preview.
+ *
+ * The number of occurrences is the one actually located in the preview (`PreviewService.getEntityLocations`),
+ * not the `count` of the indexed record, which can be greater (ES-32245).
+ */
+class EntityNavigationService {
+    previewService = inject(PreviewService);
+    lastPreviewData;
+    /** The current position, shared by the entities panels */
+    navigation = signal(undefined, ...(ngDevMode ? [{ debugName: "navigation" }] : []));
+    /** The value hovered in the panel */
+    hovering = signal(undefined, ...(ngDevMode ? [{ debugName: "hovering" }] : []));
+    /** The 1-based position of the hovered value, `0` when it is not the one being navigated */
+    hoverIndex = computed(() => (this.navigation()?.value === this.hovering() ? (this.navigation()?.index ?? 0) : 0), ...(ngDevMode ? [{ debugName: "hoverIndex" }] : []));
+    /**
+     * Number of occurrences of `value` highlighted in the preview.
+     * `fallback` (the indexed count) is only used while no preview is loaded.
+     */
+    total(entity, value, fallback = 0) {
+        if (!this.previewService.previewData)
+            return fallback;
+        return this.previewService.getEntityLocations(entity, value).length;
+    }
+    navigate(entity, value, direction) {
+        const ids = this.previewService.getEntityLocations(entity, value);
+        const total = ids.length;
+        if (total === 0) {
+            warn(`No highlighted occurrence for entity ${entity}:`, value);
+            notify.warning(`No occurrence of "${value}" can be reached in the document.`);
+            return;
+        }
+        // The cursor belongs to one document: start over when another preview has been loaded
+        if (this.lastPreviewData !== this.previewService.previewData) {
+            this.lastPreviewData = this.previewService.previewData;
+            this.navigation.set(undefined);
+        }
+        const current = this.navigation();
+        // Start from the first (next) or last (prev) occurrence when the value changes
+        const position = current?.value === value ? current.index : direction === "next" ? 0 : 1;
+        const index = ((position - 1 + (direction === "next" ? 1 : -1) + total) % total) + 1;
+        this.navigation.set({ value, index });
+        const id = ids[index - 1];
+        this.previewService.events.set("scrollTo");
+        this.previewService.sendMessage({ action: "select", id: `${entity}_${id}`, usePassageHighlighter: false });
+        debug(`${direction} navigation:`, { id, entity, value, index, total });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: EntityNavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: EntityNavigationService, providedIn: "root" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: EntityNavigationService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: "root" }]
+        }] });
+
+class JsonMethodPluginService {
+    http = inject(HttpClient);
+    API_URL = `${globalConfig.backendUrl}/api/v1`;
+    /**
+     * Call a JsonMethod plugin using an HTTP POST
+     *
+     * @param method The name of the JsonMethod plugin
+     * @param query Parameters to pass to the plugin
+     * @param options HTTP options for the request
+     * @returns An observable of the plugin's return value
+     */
+    post(method, query, options) {
+        if (!isObject(query)) {
+            return throwError(() => ({ error: 'invalid query object' }));
+        }
+        return this.http.post(`${this.API_URL}/plugin/${method}`, query, options);
+    }
+    /**
+     * Call a JsonMethod plugin using an HTTP GET
+     *
+     * @param method The name of the JsonMethod plugin
+     * @param query Parameters to pass to the plugin
+     * @param options HTTP options for the request
+     * @returns An observable of the plugin's return value
+     */
+    get(method, query, options) {
+        return this.http.get(`${this.API_URL}/plugin/${method}`, {
+            params: query,
+            ...options
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: JsonMethodPluginService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: JsonMethodPluginService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: JsonMethodPluginService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+/**
+ * The route an audit event names: the path, without its leading slash, query string or fragment.
+ * `/search?q=irsn#p2` and `/search` are the same route — arriving on one from the other is a new
+ * query, not a navigation.
+ */
+function routeNameOf(url) {
+    return url.slice(1).split(/[?#]/)[0];
+}
+class NavigationService {
+    router = inject(Router);
+    auditService = inject(AuditService);
+    // The route of the previous navigation, used only to dedupe audit route-change notifications in
+    // navigationEnd$ below. Kept separate from urlAfterNavigation so that getter stays correct
+    // regardless of whether anything subscribes to navigationEnd$.
+    //
+    // It used to hold the full url (`/search?q=irsn`) while the comparison was against the bare route
+    // name (`search`): the two could never be equal, so the dedupe never fired and every navigation
+    // was audited — including the query-param changes that make up most of a search session.
+    previousRouteName = null;
+    /**
+     * The URL of the current navigation, used to redirect the user after login.
+     *
+     * Sourced directly from `Router.url`, which Angular keeps up to date on every navigation with no
+     * subscription required — unlike a field updated as a side effect of `navigationEnd$` below,
+     * which only happens for whoever actually subscribes to it.
+     *
+     * The authentication screens are never returned: sending someone back to `/logout` after they
+     * signed in defeats the sign-in, and back to `/login` loops. The exclusion used to be a literal
+     * `!== "/login"`, which let through `/logout`, `/login?mode=changepassword` — same screen, one
+     * query param — and any application whose `loginPath` is not spelled `/login`.
+     */
+    get urlAfterNavigation() {
+        const url = this.router.url;
+        return isAuthRoute(url, globalConfig.loginPath) ? null : url;
+    }
+    /**
+     * Observable that emits events of type `NavigationEnd` from the Angular Router.
+     *
+     * This observable performs the following operations:
+     * - Maps all router events to `RouterEvent`.
+     * - Filters the events to only include instances of `NavigationEnd`.
+     * - Taps into the event stream to notify the audit service when the route itself changes — a new
+     *   query, a filter or another page of results stays on the same route and is not one.
+     * - Shares the replayed value with a buffer size of 1 to ensure subscribers receive the latest emitted value.
+     *
+     * @type Observable<RouterEvent>
+     */
+    navigationEnd$ = this.router.events.pipe(map(event => event), filter$1((event) => event instanceof NavigationEnd), tap(event => {
+        const routeName = routeNameOf(event.url);
+        // The empty name is the application root, which has never been audited.
+        if (routeName && routeName !== this.previousRouteName) {
+            this.auditService.notifyRouteChange(routeName);
+        }
+        // Every route is remembered, the authentication screens included. Skipping them would swallow
+        // the return: leaving `/search` for `/login` and coming back is two route changes, and the
+        // second one would compare against a `search` the user has meanwhile left. (The exclusion that
+        // used to sit here never ran — the dedupe above it could not fire.)
+        this.previousRouteName = routeName;
+    }), shareReplay(1));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: NavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: NavigationService, providedIn: "root" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: NavigationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root"
+                }]
+        }] });
+
 /**
  * @deprecated This service is deprecated and should not be used directly. Please use the PrincipalStore instead.
 */
@@ -10281,12 +10369,13 @@ class ArticleEntities {
     cn = cn;
     appStore = inject(AppStore);
     previewService = inject(PreviewService);
+    entityNavigation = inject(EntityNavigationService);
     article = input.required(...(ngDevMode ? [{ debugName: "article" }] : []));
     previewHighlights = computed(() => {
         const highlights = this.appStore.getWebServiceByType("preview")?.highlights
             ?.split(",")
-            .filter((h) => h !== "extractslocations" && h !== "matchlocations" && h !== "matchingpassages");
-        return highlights?.map((highlight) => ({
+            .filter(h => h !== "extractslocations" && h !== "matchlocations" && h !== "matchingpassages");
+        return highlights?.map(highlight => ({
             name: highlight,
             entity: highlight,
             metadata: this.getMetadata(this.article(), highlight)
@@ -10296,54 +10385,24 @@ class ArticleEntities {
         const m = article[entity];
         return m ?? [];
     }
-    navigation = signal(undefined, ...(ngDevMode ? [{ debugName: "navigation" }] : []));
-    hovering = signal(undefined, ...(ngDevMode ? [{ debugName: "hovering" }] : []));
-    hoverIndex = computed(() => this.navigation()?.value === this.hovering() ? (this.navigation()?.index ?? 0) : 0, ...(ngDevMode ? [{ debugName: "hoverIndex" }] : []));
+    navigation = this.entityNavigation.navigation;
+    hovering = this.entityNavigation.hovering;
+    hoverIndex = this.entityNavigation.hoverIndex;
+    /** Number of occurrences of the entity value highlighted in the preview (not the indexed `count`, see ES-32245) */
+    total(entity, data) {
+        return this.entityNavigation.total(entity, data.value, data.count);
+    }
     scrollTo(type, index, usePassageHighlighter = false) {
         // if previewData contains "matchingpassages" then we use the passage highlighter otherwise we use "extractslocations"
         const category = type || this.previewService.highlightCategory;
         this.previewService.events.set("scrollTo");
         this.previewService.sendMessage({ action: "select", id: `${category}_${index}`, usePassageHighlighter });
     }
-    navigate(entity, data, direction) {
-        if (!data.count || data.count <= 0) {
-            warn(`Invalid count for entity ${entity}:`, data.count);
-            return;
-        }
-        const currentNavigation = this.navigation();
-        const isCurrentValue = currentNavigation?.value === data.value;
-        let newIndex;
-        if (direction === "next") {
-            newIndex = isCurrentValue && currentNavigation.index < data.count ? currentNavigation.index + 1 : 1;
-        }
-        else {
-            newIndex = isCurrentValue && currentNavigation.index > 1 ? currentNavigation.index - 1 : data.count;
-        }
-        this.navigation.set({
-            value: data.value,
-            index: newIndex
-        });
-        const id = this.previewService.getEntityId(entity, data.value, newIndex - 1);
-        if (id !== undefined) {
-            this.scrollTo(entity, id);
-            debug(`${direction} navigation:`, {
-                id,
-                entity,
-                value: data.value,
-                index: newIndex,
-                totalCount: data.count
-            });
-        }
-        else {
-            warn(`Unable to get ID for ${direction} navigation:`, { entity, value: data.value, index: newIndex });
-            notify.warning(`Unable to navigate to the ${direction} occurrence of "${data.value}".`);
-        }
-    }
     navigateNext(entity, data) {
-        this.navigate(entity, data, "next");
+        this.entityNavigation.navigate(entity, data.value, "next");
     }
     navigatePrev(entity, data) {
-        this.navigate(entity, data, "prev");
+        this.entityNavigation.navigate(entity, data.value, "prev");
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: ArticleEntities, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.29", type: ArticleEntities, isStandalone: true, selector: "article-entities,ArticleEntities,articleentities", inputs: { article: { classPropertyName: "article", publicName: "article", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
@@ -10387,13 +10446,13 @@ class ArticleEntities {
                     <chevronleft />
                   </button>
 
-                  <span>{{ hoverIndex() }} / {{ data.count }}</span>
+                  <span>{{ hoverIndex() }} / {{ total(entity, data) }}</span>
 
                   <button class="hover:scale-125" aria-label="next entity" role="button" (click)="navigateNext(entity, data)">
                     <chevronright />
                   </button>
                 } @else {
-                  {{ data.count }}
+                  {{ total(entity, data) }}
                 }
               </p>
             </li>
@@ -10449,13 +10508,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImpo
                     <chevronleft />
                   </button>
 
-                  <span>{{ hoverIndex() }} / {{ data.count }}</span>
+                  <span>{{ hoverIndex() }} / {{ total(entity, data) }}</span>
 
                   <button class="hover:scale-125" aria-label="next entity" role="button" (click)="navigateNext(entity, data)">
                     <chevronright />
                   </button>
                 } @else {
-                  {{ data.count }}
+                  {{ total(entity, data) }}
                 }
               </p>
             </li>
@@ -13654,12 +13713,13 @@ class EntitiesPanel {
     cn = cn;
     appStore = inject(AppStore);
     previewService = inject(PreviewService);
+    entityNavigation = inject(EntityNavigationService);
     article = input.required(...(ngDevMode ? [{ debugName: "article" }] : []));
     previewHighlights = computed(() => {
         const highlights = this.appStore.getWebServiceByType("preview")?.highlights
             ?.split(",")
-            .filter((h) => h !== "extractslocations" && h !== "matchlocations" && h !== "matchingpassages");
-        return highlights?.map((highlight) => ({
+            .filter(h => h !== "extractslocations" && h !== "matchlocations" && h !== "matchingpassages");
+        return highlights?.map(highlight => ({
             name: highlight,
             entity: highlight,
             metadata: this.getMetadata(this.article(), highlight)
@@ -13669,54 +13729,24 @@ class EntitiesPanel {
         const m = article[entity];
         return m ?? [];
     }
-    navigation = signal(undefined, ...(ngDevMode ? [{ debugName: "navigation" }] : []));
-    hovering = signal(undefined, ...(ngDevMode ? [{ debugName: "hovering" }] : []));
-    hoverIndex = computed(() => this.navigation()?.value === this.hovering() ? (this.navigation()?.index ?? 0) : 0, ...(ngDevMode ? [{ debugName: "hoverIndex" }] : []));
+    navigation = this.entityNavigation.navigation;
+    hovering = this.entityNavigation.hovering;
+    hoverIndex = this.entityNavigation.hoverIndex;
+    /** Number of occurrences of the entity value highlighted in the preview (not the indexed `count`, see ES-32245) */
+    total(entity, data) {
+        return this.entityNavigation.total(entity, data.value, data.count);
+    }
     scrollTo(type, index, usePassageHighlighter = false) {
         // if previewData contains "matchingpassages" then we use the passage highlighter otherwise we use "extractslocations"
         const category = type || this.previewService.highlightCategory;
         this.previewService.events.set("scrollTo");
         this.previewService.sendMessage({ action: "select", id: `${category}_${index}`, usePassageHighlighter });
     }
-    navigate(entity, data, direction) {
-        if (!data.count || data.count <= 0) {
-            warn(`Invalid count for entity ${entity}:`, data.count);
-            return;
-        }
-        const currentNavigation = this.navigation();
-        const isCurrentValue = currentNavigation?.value === data.value;
-        let newIndex;
-        if (direction === "next") {
-            newIndex = isCurrentValue && currentNavigation.index < data.count ? currentNavigation.index + 1 : 1;
-        }
-        else {
-            newIndex = isCurrentValue && currentNavigation.index > 1 ? currentNavigation.index - 1 : data.count;
-        }
-        this.navigation.set({
-            value: data.value,
-            index: newIndex
-        });
-        const id = this.previewService.getEntityId(entity, data.value, newIndex - 1);
-        if (id !== undefined) {
-            this.scrollTo(entity, id);
-            debug(`${direction} navigation:`, {
-                id,
-                entity,
-                value: data.value,
-                index: newIndex,
-                totalCount: data.count
-            });
-        }
-        else {
-            warn(`Unable to get ID for ${direction} navigation:`, { entity, value: data.value, index: newIndex });
-            notify.warning(`Unable to navigate to the ${direction} occurrence of "${data.value}".`);
-        }
-    }
     navigateNext(entity, data) {
-        this.navigate(entity, data, "next");
+        this.entityNavigation.navigate(entity, data.value, "next");
     }
     navigatePrev(entity, data) {
-        this.navigate(entity, data, "prev");
+        this.entityNavigation.navigate(entity, data.value, "prev");
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: EntitiesPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.29", type: EntitiesPanel, isStandalone: true, selector: "entities-panel,EntitiesPanel,entitiesPanel", inputs: { article: { classPropertyName: "article", publicName: "article", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
@@ -13760,13 +13790,13 @@ class EntitiesPanel {
                     <chevronleft />
                   </button>
 
-                  <span>{{ hoverIndex() }} / {{ data.count }}</span>
+                  <span>{{ hoverIndex() }} / {{ total(entity, data) }}</span>
 
                   <button class="hover:scale-125" aria-label="next entity" role="button" (click)="navigateNext(entity, data)">
                     <chevronright />
                   </button>
                 } @else {
-                  {{ data.count }}
+                  {{ total(entity, data) }}
                 }
               </p>
             </li>
@@ -13822,13 +13852,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImpo
                     <chevronleft />
                   </button>
 
-                  <span>{{ hoverIndex() }} / {{ data.count }}</span>
+                  <span>{{ hoverIndex() }} / {{ total(entity, data) }}</span>
 
                   <button class="hover:scale-125" aria-label="next entity" role="button" (click)="navigateNext(entity, data)">
                     <chevronright />
                   </button>
                 } @else {
-                  {{ data.count }}
+                  {{ total(entity, data) }}
                 }
               </p>
             </li>
@@ -18383,6 +18413,18 @@ class UserProfileFormComponent {
         this.feedback.set(undefined);
         this.propertyToEdit.set(undefined);
     }
+    /**
+     * Whether the profile holds a value for a property. Only then is there something to delete: a property
+     * that shows its configured default, or that is simply not set, is absent from the profile and the
+     * server answers 404 to a delete on it (ES-34462).
+     *
+     * @param category data or customData
+     * @param propertyName property name
+     */
+    hasStoredValue(category, propertyName) {
+        const stored = this.userProfile()?.[category]?.[propertyName];
+        return stored !== undefined && stored !== null;
+    }
     /**
      * On data property deletion, for now we make the property an empty string
      *
@@ -18392,6 +18434,11 @@ class UserProfileFormComponent {
     async onDeleteData(category, propertyName) {
         if (this.pending())
             return;
+        // Nothing stored, nothing to delete: not a failure, and no request to send.
+        if (!this.hasStoredValue(category, propertyName)) {
+            info("User profile property not stored, nothing to delete", { category, propertyName });
+            return;
+        }
         const key = `${category}.${propertyName}`;
         this.feedback.set(undefined);
         this.pending.set(key);
@@ -18399,9 +18446,7 @@ class UserProfileFormComponent {
             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);
+                this.forgetProperty(category, propertyName);
                 this.feedback.set({ key, type: "success", message: this.message("deleted", category, propertyName) });
             }
             else {
@@ -18409,13 +18454,30 @@ class UserProfileFormComponent {
                 this.feedback.set({ key, type: "error", message: this.message("deleteFailed", category, propertyName) });
             }
         }
-        catch {
-            this.feedback.set({ key, type: "error", message: this.message("deleteFailed", category, propertyName) });
+        catch (err) {
+            if (err?.status === 404) {
+                // The property is not in the profile (anymore), e.g. removed from another tab: the state asked for is
+                // already reached, so it is not an error to show.
+                info("User profile property already absent", { category, propertyName });
+                this.forgetProperty(category, propertyName);
+                this.feedback.set({ key, type: "success", message: this.message("deleted", category, propertyName) });
+            }
+            else {
+                this.feedback.set({ key, type: "error", message: this.message("deleteFailed", category, propertyName) });
+            }
         }
         finally {
             this.pending.set(undefined);
         }
     }
+    /** Takes a deleted property out of the stored profile; a custom property with a default shows that default again. */
+    forgetProperty(category, propertyName) {
+        const userProfile = JSON.parse(JSON.stringify(this.userProfile()));
+        if (userProfile[category]) {
+            userProfile[category][propertyName] = undefined;
+        }
+        this.userProfileResource.set(userProfile);
+    }
     /**
      * Saving a data property
      *
@@ -18432,18 +18494,11 @@ class UserProfileFormComponent {
         const userProfile = JSON.parse(JSON.stringify(this.userProfile()));
         if (!userProfile[category])
             userProfile[category] = {};
-        userProfile[category][propertyName] = this.value()?.trim() || "";
+        const written = this.value()?.trim() || "";
+        userProfile[category][propertyName] = written;
         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.foldSavedValue(category, propertyName, response, written);
             this.value.set(undefined);
             this.propertyToEdit.set(undefined);
             this.feedback.set({ key, type: "success", message: this.message("saved", category, propertyName) });
@@ -18455,6 +18510,32 @@ class UserProfileFormComponent {
             this.pending.set(undefined);
         }
     }
+    /**
+     * Folds the answer of a PATCH back into the stored profile, so the form shows what was just saved.
+     *
+     * The answer depends on the server: before ES-34373 it is the whole updated profile (`{ data, customData, … }`),
+     * after it is the written value alone (`"fav-1AAA"`). Reading the latter as a profile used to leave the stored
+     * profile unchanged, and the form kept showing the old value (or the default) until the page was reloaded.
+     */
+    foldSavedValue(category, propertyName, response, written) {
+        const current = this.userProfile();
+        if (isPlainObject(response) && ("data" in response || "customData" in response)) {
+            const profile = response;
+            this.userProfileResource.set({
+                ...current,
+                ...profile,
+                data: { ...(current?.data || {}), ...(profile.data || {}) },
+                customData: { ...(current?.customData || {}), ...(profile.customData || {}) }
+            });
+            return;
+        }
+        // The value alone: what the server read back, or what was sent when it answers with nothing usable.
+        const value = response === undefined || response === null ? written : response;
+        this.userProfileResource.set({
+            ...current,
+            [category]: { ...(current?.[category] || {}), [propertyName]: value }
+        });
+    }
     /**
      * Get the value of a data key
      *
@@ -18501,7 +18582,7 @@ class UserProfileFormComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: UserProfileFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.29", 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" }, host: { classAttribute: "flex flex-col h-full overflow-hidden" }, 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 min-h-0 flex-1 flex-col gap-2 p-4\">\n    <div class=\"mb-4 flex\">\n      @if (allowProfilePhoto()) {\n        <!-- AVATAR -->\n        <Avatar\n          class=\"size-14 cursor-pointer\"\n          [class.ring-2]=\"!!fieldState('data.profilePhoto')\"\n          [class.ring-destructive]=\"fieldState('data.profilePhoto') === 'error'\"\n          [class.ring-green-600]=\"fieldState('data.profilePhoto') === 'success'\"\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\" />\n            }\n          </AvatarFallback>\n        </Avatar>\n        @if (profile?.data?.profilePhoto) {\n          <button\n            variant=\"ghost\"\n            [iconOnly]=\"true\"\n            class=\"text-destructive cursor-pointer\"\n            title=\"{{ 'userProfile.deleteProperty' | transloco }}\"\n            [attr.aria-label]=\"'userProfile.deleteProperty' | transloco\"\n            [disabled]=\"!!pending()\"\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    <!-- always rendered, so the room is reserved and the layout doesn't shift when a message appears -->\n    <p\n      class=\"min-h-5 text-sm\"\n      role=\"status\"\n      [attr.aria-live]=\"feedback()?.type === 'error' ? 'assertive' : 'polite'\"\n      [class.text-destructive]=\"feedback()?.type === 'error'\"\n      [class.text-green-600]=\"feedback()?.type === 'success'\">\n      {{ feedback()?.message }}\n    </p>\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      <!-- -m-1 p-1: room for the outline of a field, which the scroll container would otherwise clip -->\n      <div class=\"-m-1 min-h-0 flex-1 overflow-auto p-1\">\n        <div>\n          @for (key of formKeys(); track key) {\n            <div>\n              <p class=\"px-2\">{{ `userProfile.data.${key}` | transloco }}</p>\n              <div\n                class=\"group flex flex-row rounded-md px-2 py-0.5\"\n                [class.ring-1]=\"!!fieldState('data.' + key)\"\n                [class.ring-destructive]=\"fieldState('data.' + key) === 'error'\"\n                [class.ring-green-600]=\"\n                  fieldState('data.' + key) === 'success'\n                \">\n                <div\n                  class=\"min-w-0 grow break-words 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                    [iconOnly]=\"true\"\n                    class=\"visible mx-2 cursor-pointer sm:invisible sm:group-hover:visible\"\n                    title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                    [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                    [disabled]=\"!!pending()\"\n                    (click)=\"onSaveData('data', key)\">\n                    <save-icon class=\"ml-2\" />\n                  </button>\n                  <button\n                    variant=\"ghost\"\n                    [iconOnly]=\"true\"\n                    class=\"visible cursor-pointer sm:invisible sm:group-hover:visible\"\n                    title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                    [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                    (click)=\"onCancelEdit()\">\n                    <UndoIcon />\n                  </button>\n                } @else {\n                  <button\n                    variant=\"ghost\"\n                    [iconOnly]=\"true\"\n                    class=\"visible mx-2 cursor-pointer sm:invisible sm: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                    [iconOnly]=\"true\"\n                    class=\"text-destructive visible cursor-pointer sm:invisible sm:group-hover:visible\"\n                    title=\"{{ 'userProfile.deleteProperty' | transloco }}\"\n                    [attr.aria-label]=\"'userProfile.deleteProperty' | transloco\"\n                    [disabled]=\"!!pending()\"\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 class=\"px-2\">{{ key }}</p>\n              <div\n                class=\"group flex flex-row rounded-md px-2 py-0.5\"\n                [class.ring-1]=\"!!fieldState('customData.' + key)\"\n                [class.ring-destructive]=\"\n                  fieldState('customData.' + key) === 'error'\n                \"\n                [class.ring-green-600]=\"\n                  fieldState('customData.' + key) === 'success'\n                \">\n                <div\n                  class=\"min-w-0 grow break-words whitespace-pre-line\"\n                  [class.text-muted-foreground]=\"\n                    !getDataValue('customData', key)\n                  \">\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                    [iconOnly]=\"true\"\n                    class=\"visible mx-2 cursor-pointer sm:invisible sm:group-hover:visible\"\n                    title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                    [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                    [disabled]=\"!!pending()\"\n                    (click)=\"onSaveData('customData', key)\">\n                    <save-icon class=\"ml-2\" />\n                  </button>\n                  <button\n                    variant=\"ghost\"\n                    [iconOnly]=\"true\"\n                    class=\"visible cursor-pointer sm:invisible sm:group-hover:visible\"\n                    title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                    [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                    (click)=\"onCancelEdit()\">\n                    <UndoIcon />\n                  </button>\n                } @else {\n                  <button\n                    variant=\"ghost\"\n                    [iconOnly]=\"true\"\n                    class=\"visible mx-2 cursor-pointer sm:invisible sm: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                    [iconOnly]=\"true\"\n                    class=\"text-destructive visible cursor-pointer sm:invisible sm:group-hover:visible\"\n                    title=\"{{ 'userProfile.deleteProperty' | transloco }}\"\n                    [attr.aria-label]=\"'userProfile.deleteProperty' | transloco\"\n                    [disabled]=\"!!pending()\"\n                    (click)=\"onDeleteData('customData', key)\">\n                    <TrashIcon />\n                  </button>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </div>\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: SaveIcon, selector: "save-icon, SaveIcon", inputs: ["class"] }, { kind: "component", type: AvatarComponent, selector: "avatar, Avatar", inputs: ["class", "size"] }, { kind: "component", type: AvatarFallbackComponent, selector: "avatar-fallback, avatarfallback, AvatarFallback", inputs: ["class", "size"] }, { 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", "scheme", "iconOnly", "size", "solid"] }, { 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.29", 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" }, host: { classAttribute: "flex flex-col h-full overflow-hidden" }, 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 min-h-0 flex-1 flex-col gap-2 p-4\">\n    <div class=\"mb-4 flex\">\n      @if (allowProfilePhoto()) {\n        <!-- AVATAR -->\n        <Avatar\n          class=\"size-14 cursor-pointer\"\n          [class.ring-2]=\"!!fieldState('data.profilePhoto')\"\n          [class.ring-destructive]=\"fieldState('data.profilePhoto') === 'error'\"\n          [class.ring-green-600]=\"fieldState('data.profilePhoto') === 'success'\"\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\" />\n            }\n          </AvatarFallback>\n        </Avatar>\n        @if (profile?.data?.profilePhoto) {\n          <button\n            variant=\"ghost\"\n            [iconOnly]=\"true\"\n            class=\"text-destructive cursor-pointer\"\n            title=\"{{ 'userProfile.deleteProperty' | transloco }}\"\n            [attr.aria-label]=\"'userProfile.deleteProperty' | transloco\"\n            [disabled]=\"!!pending()\"\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    <!-- always rendered, so the room is reserved and the layout doesn't shift when a message appears -->\n    <p\n      class=\"min-h-5 text-sm\"\n      role=\"status\"\n      [attr.aria-live]=\"feedback()?.type === 'error' ? 'assertive' : 'polite'\"\n      [class.text-destructive]=\"feedback()?.type === 'error'\"\n      [class.text-green-600]=\"feedback()?.type === 'success'\">\n      {{ feedback()?.message }}\n    </p>\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      <!-- -m-1 p-1: room for the outline of a field, which the scroll container would otherwise clip -->\n      <div class=\"-m-1 min-h-0 flex-1 overflow-auto p-1\">\n        <div>\n          @for (key of formKeys(); track key) {\n            <div>\n              <p class=\"px-2\">{{ `userProfile.data.${key}` | transloco }}</p>\n              <div\n                class=\"group flex flex-row rounded-md px-2 py-0.5\"\n                [class.ring-1]=\"!!fieldState('data.' + key)\"\n                [class.ring-destructive]=\"fieldState('data.' + key) === 'error'\"\n                [class.ring-green-600]=\"\n                  fieldState('data.' + key) === 'success'\n                \">\n                <div\n                  class=\"min-w-0 grow break-words 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                    [iconOnly]=\"true\"\n                    class=\"visible mx-2 cursor-pointer sm:invisible sm:group-hover:visible\"\n                    title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                    [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                    [disabled]=\"!!pending()\"\n                    (click)=\"onSaveData('data', key)\">\n                    <save-icon class=\"ml-2\" />\n                  </button>\n                  <button\n                    variant=\"ghost\"\n                    [iconOnly]=\"true\"\n                    class=\"visible cursor-pointer sm:invisible sm:group-hover:visible\"\n                    title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                    [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                    (click)=\"onCancelEdit()\">\n                    <UndoIcon />\n                  </button>\n                } @else {\n                  <button\n                    variant=\"ghost\"\n                    [iconOnly]=\"true\"\n                    class=\"visible mx-2 cursor-pointer sm:invisible sm: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                    [iconOnly]=\"true\"\n                    class=\"text-destructive visible cursor-pointer sm:invisible sm:group-hover:visible\"\n                    title=\"{{ 'userProfile.deleteProperty' | transloco }}\"\n                    [attr.aria-label]=\"'userProfile.deleteProperty' | transloco\"\n                    [disabled]=\"!!pending() || !hasStoredValue('data', key)\"\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 class=\"px-2\">{{ key }}</p>\n              <div\n                class=\"group flex flex-row rounded-md px-2 py-0.5\"\n                [class.ring-1]=\"!!fieldState('customData.' + key)\"\n                [class.ring-destructive]=\"\n                  fieldState('customData.' + key) === 'error'\n                \"\n                [class.ring-green-600]=\"\n                  fieldState('customData.' + key) === 'success'\n                \">\n                <div\n                  class=\"min-w-0 grow break-words whitespace-pre-line\"\n                  [class.text-muted-foreground]=\"\n                    !getDataValue('customData', key)\n                  \">\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                    [iconOnly]=\"true\"\n                    class=\"visible mx-2 cursor-pointer sm:invisible sm:group-hover:visible\"\n                    title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                    [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                    [disabled]=\"!!pending()\"\n                    (click)=\"onSaveData('customData', key)\">\n                    <save-icon class=\"ml-2\" />\n                  </button>\n                  <button\n                    variant=\"ghost\"\n                    [iconOnly]=\"true\"\n                    class=\"visible cursor-pointer sm:invisible sm:group-hover:visible\"\n                    title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                    [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                    (click)=\"onCancelEdit()\">\n                    <UndoIcon />\n                  </button>\n                } @else {\n                  <button\n                    variant=\"ghost\"\n                    [iconOnly]=\"true\"\n                    class=\"visible mx-2 cursor-pointer sm:invisible sm: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                    [iconOnly]=\"true\"\n                    class=\"text-destructive visible cursor-pointer sm:invisible sm:group-hover:visible\"\n                    title=\"{{ 'userProfile.deleteProperty' | transloco }}\"\n                    [attr.aria-label]=\"'userProfile.deleteProperty' | transloco\"\n                    [disabled]=\"\n                      !!pending() || !hasStoredValue('customData', key)\n                    \"\n                    (click)=\"onDeleteData('customData', key)\">\n                    <TrashIcon />\n                  </button>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </div>\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: SaveIcon, selector: "save-icon, SaveIcon", inputs: ["class"] }, { kind: "component", type: AvatarComponent, selector: "avatar, Avatar", inputs: ["class", "size"] }, { kind: "component", type: AvatarFallbackComponent, selector: "avatar-fallback, avatarfallback, AvatarFallback", inputs: ["class", "size"] }, { 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", "scheme", "iconOnly", "size", "solid"] }, { 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.29", ngImport: i0, type: UserProfileFormComponent, decorators: [{
             type: Component,
@@ -18519,7 +18600,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImpo
                         AvatarImageComponent,
                         ButtonComponent,
                         ChangePasswordComponent
-                    ], providers: [provideTranslocoScope("user-profile", "login")], template: "@if (userProfileResource.hasValue()) {\n  @let profile = userProfile();\n  <div class=\"flex min-h-0 flex-1 flex-col gap-2 p-4\">\n    <div class=\"mb-4 flex\">\n      @if (allowProfilePhoto()) {\n        <!-- AVATAR -->\n        <Avatar\n          class=\"size-14 cursor-pointer\"\n          [class.ring-2]=\"!!fieldState('data.profilePhoto')\"\n          [class.ring-destructive]=\"fieldState('data.profilePhoto') === 'error'\"\n          [class.ring-green-600]=\"fieldState('data.profilePhoto') === 'success'\"\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\" />\n            }\n          </AvatarFallback>\n        </Avatar>\n        @if (profile?.data?.profilePhoto) {\n          <button\n            variant=\"ghost\"\n            [iconOnly]=\"true\"\n            class=\"text-destructive cursor-pointer\"\n            title=\"{{ 'userProfile.deleteProperty' | transloco }}\"\n            [attr.aria-label]=\"'userProfile.deleteProperty' | transloco\"\n            [disabled]=\"!!pending()\"\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    <!-- always rendered, so the room is reserved and the layout doesn't shift when a message appears -->\n    <p\n      class=\"min-h-5 text-sm\"\n      role=\"status\"\n      [attr.aria-live]=\"feedback()?.type === 'error' ? 'assertive' : 'polite'\"\n      [class.text-destructive]=\"feedback()?.type === 'error'\"\n      [class.text-green-600]=\"feedback()?.type === 'success'\">\n      {{ feedback()?.message }}\n    </p>\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      <!-- -m-1 p-1: room for the outline of a field, which the scroll container would otherwise clip -->\n      <div class=\"-m-1 min-h-0 flex-1 overflow-auto p-1\">\n        <div>\n          @for (key of formKeys(); track key) {\n            <div>\n              <p class=\"px-2\">{{ `userProfile.data.${key}` | transloco }}</p>\n              <div\n                class=\"group flex flex-row rounded-md px-2 py-0.5\"\n                [class.ring-1]=\"!!fieldState('data.' + key)\"\n                [class.ring-destructive]=\"fieldState('data.' + key) === 'error'\"\n                [class.ring-green-600]=\"\n                  fieldState('data.' + key) === 'success'\n                \">\n                <div\n                  class=\"min-w-0 grow break-words 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                    [iconOnly]=\"true\"\n                    class=\"visible mx-2 cursor-pointer sm:invisible sm:group-hover:visible\"\n                    title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                    [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                    [disabled]=\"!!pending()\"\n                    (click)=\"onSaveData('data', key)\">\n                    <save-icon class=\"ml-2\" />\n                  </button>\n                  <button\n                    variant=\"ghost\"\n                    [iconOnly]=\"true\"\n                    class=\"visible cursor-pointer sm:invisible sm:group-hover:visible\"\n                    title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                    [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                    (click)=\"onCancelEdit()\">\n                    <UndoIcon />\n                  </button>\n                } @else {\n                  <button\n                    variant=\"ghost\"\n                    [iconOnly]=\"true\"\n                    class=\"visible mx-2 cursor-pointer sm:invisible sm: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                    [iconOnly]=\"true\"\n                    class=\"text-destructive visible cursor-pointer sm:invisible sm:group-hover:visible\"\n                    title=\"{{ 'userProfile.deleteProperty' | transloco }}\"\n                    [attr.aria-label]=\"'userProfile.deleteProperty' | transloco\"\n                    [disabled]=\"!!pending()\"\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 class=\"px-2\">{{ key }}</p>\n              <div\n                class=\"group flex flex-row rounded-md px-2 py-0.5\"\n                [class.ring-1]=\"!!fieldState('customData.' + key)\"\n                [class.ring-destructive]=\"\n                  fieldState('customData.' + key) === 'error'\n                \"\n                [class.ring-green-600]=\"\n                  fieldState('customData.' + key) === 'success'\n                \">\n                <div\n                  class=\"min-w-0 grow break-words whitespace-pre-line\"\n                  [class.text-muted-foreground]=\"\n                    !getDataValue('customData', key)\n                  \">\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                    [iconOnly]=\"true\"\n                    class=\"visible mx-2 cursor-pointer sm:invisible sm:group-hover:visible\"\n                    title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                    [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                    [disabled]=\"!!pending()\"\n                    (click)=\"onSaveData('customData', key)\">\n                    <save-icon class=\"ml-2\" />\n                  </button>\n                  <button\n                    variant=\"ghost\"\n                    [iconOnly]=\"true\"\n                    class=\"visible cursor-pointer sm:invisible sm:group-hover:visible\"\n                    title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                    [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                    (click)=\"onCancelEdit()\">\n                    <UndoIcon />\n                  </button>\n                } @else {\n                  <button\n                    variant=\"ghost\"\n                    [iconOnly]=\"true\"\n                    class=\"visible mx-2 cursor-pointer sm:invisible sm: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                    [iconOnly]=\"true\"\n                    class=\"text-destructive visible cursor-pointer sm:invisible sm:group-hover:visible\"\n                    title=\"{{ 'userProfile.deleteProperty' | transloco }}\"\n                    [attr.aria-label]=\"'userProfile.deleteProperty' | transloco\"\n                    [disabled]=\"!!pending()\"\n                    (click)=\"onDeleteData('customData', key)\">\n                    <TrashIcon />\n                  </button>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </div>\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 min-h-0 flex-1 flex-col gap-2 p-4\">\n    <div class=\"mb-4 flex\">\n      @if (allowProfilePhoto()) {\n        <!-- AVATAR -->\n        <Avatar\n          class=\"size-14 cursor-pointer\"\n          [class.ring-2]=\"!!fieldState('data.profilePhoto')\"\n          [class.ring-destructive]=\"fieldState('data.profilePhoto') === 'error'\"\n          [class.ring-green-600]=\"fieldState('data.profilePhoto') === 'success'\"\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\" />\n            }\n          </AvatarFallback>\n        </Avatar>\n        @if (profile?.data?.profilePhoto) {\n          <button\n            variant=\"ghost\"\n            [iconOnly]=\"true\"\n            class=\"text-destructive cursor-pointer\"\n            title=\"{{ 'userProfile.deleteProperty' | transloco }}\"\n            [attr.aria-label]=\"'userProfile.deleteProperty' | transloco\"\n            [disabled]=\"!!pending()\"\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    <!-- always rendered, so the room is reserved and the layout doesn't shift when a message appears -->\n    <p\n      class=\"min-h-5 text-sm\"\n      role=\"status\"\n      [attr.aria-live]=\"feedback()?.type === 'error' ? 'assertive' : 'polite'\"\n      [class.text-destructive]=\"feedback()?.type === 'error'\"\n      [class.text-green-600]=\"feedback()?.type === 'success'\">\n      {{ feedback()?.message }}\n    </p>\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      <!-- -m-1 p-1: room for the outline of a field, which the scroll container would otherwise clip -->\n      <div class=\"-m-1 min-h-0 flex-1 overflow-auto p-1\">\n        <div>\n          @for (key of formKeys(); track key) {\n            <div>\n              <p class=\"px-2\">{{ `userProfile.data.${key}` | transloco }}</p>\n              <div\n                class=\"group flex flex-row rounded-md px-2 py-0.5\"\n                [class.ring-1]=\"!!fieldState('data.' + key)\"\n                [class.ring-destructive]=\"fieldState('data.' + key) === 'error'\"\n                [class.ring-green-600]=\"\n                  fieldState('data.' + key) === 'success'\n                \">\n                <div\n                  class=\"min-w-0 grow break-words 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                    [iconOnly]=\"true\"\n                    class=\"visible mx-2 cursor-pointer sm:invisible sm:group-hover:visible\"\n                    title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                    [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                    [disabled]=\"!!pending()\"\n                    (click)=\"onSaveData('data', key)\">\n                    <save-icon class=\"ml-2\" />\n                  </button>\n                  <button\n                    variant=\"ghost\"\n                    [iconOnly]=\"true\"\n                    class=\"visible cursor-pointer sm:invisible sm:group-hover:visible\"\n                    title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                    [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                    (click)=\"onCancelEdit()\">\n                    <UndoIcon />\n                  </button>\n                } @else {\n                  <button\n                    variant=\"ghost\"\n                    [iconOnly]=\"true\"\n                    class=\"visible mx-2 cursor-pointer sm:invisible sm: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                    [iconOnly]=\"true\"\n                    class=\"text-destructive visible cursor-pointer sm:invisible sm:group-hover:visible\"\n                    title=\"{{ 'userProfile.deleteProperty' | transloco }}\"\n                    [attr.aria-label]=\"'userProfile.deleteProperty' | transloco\"\n                    [disabled]=\"!!pending() || !hasStoredValue('data', key)\"\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 class=\"px-2\">{{ key }}</p>\n              <div\n                class=\"group flex flex-row rounded-md px-2 py-0.5\"\n                [class.ring-1]=\"!!fieldState('customData.' + key)\"\n                [class.ring-destructive]=\"\n                  fieldState('customData.' + key) === 'error'\n                \"\n                [class.ring-green-600]=\"\n                  fieldState('customData.' + key) === 'success'\n                \">\n                <div\n                  class=\"min-w-0 grow break-words whitespace-pre-line\"\n                  [class.text-muted-foreground]=\"\n                    !getDataValue('customData', key)\n                  \">\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                    [iconOnly]=\"true\"\n                    class=\"visible mx-2 cursor-pointer sm:invisible sm:group-hover:visible\"\n                    title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                    [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                    [disabled]=\"!!pending()\"\n                    (click)=\"onSaveData('customData', key)\">\n                    <save-icon class=\"ml-2\" />\n                  </button>\n                  <button\n                    variant=\"ghost\"\n                    [iconOnly]=\"true\"\n                    class=\"visible cursor-pointer sm:invisible sm:group-hover:visible\"\n                    title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                    [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                    (click)=\"onCancelEdit()\">\n                    <UndoIcon />\n                  </button>\n                } @else {\n                  <button\n                    variant=\"ghost\"\n                    [iconOnly]=\"true\"\n                    class=\"visible mx-2 cursor-pointer sm:invisible sm: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                    [iconOnly]=\"true\"\n                    class=\"text-destructive visible cursor-pointer sm:invisible sm:group-hover:visible\"\n                    title=\"{{ 'userProfile.deleteProperty' | transloco }}\"\n                    [attr.aria-label]=\"'userProfile.deleteProperty' | transloco\"\n                    [disabled]=\"\n                      !!pending() || !hasStoredValue('customData', key)\n                    \"\n                    (click)=\"onDeleteData('customData', key)\">\n                    <TrashIcon />\n                  </button>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </div>\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 {
@@ -18796,5 +18877,5 @@ const queryNameResolver = () => {
  * Generated bundle index. Do not edit.
  */
 
-export { AGGREGATIONS_NAMES, AGGREGATIONS_NAMES_PRESET_DEFAULT, APP_FEATURES, AdvancedFiltersComponent, AdvancedSearch, AdvancedSearchComponent, AggregationComponent, AggregationDateComponent, AggregationDateRangeDialogComponent, AggregationItemDirective, AggregationListComponent, AggregationPanelComponent, AggregationTreeComponent, AggregationsService, AggregationsStore, Alert, AlertDialog, AlertsComponent, AppService, AppStore, ApplicationService, ApplicationStore, ArticleEntities, ArticleExtracts, ArticleLabels, ArticleSimilarDocuments, AsideFiltersComponent, AuditFeedbackType, AuditService, AuthGuard, AuthPageComponent, AutocompleteService, BOOKMARKS_CONFIG, BOOKMARKS_OPTIONS, BackdropComponent, BackdropService, BookmarkButtonComponent, BookmarksComponent, COLLECTIONS_CONFIG, COLLECTIONS_OPTIONS, COMPONENTS_FOR_DOCUMENT_TYPE, ChangePasswordComponent, ChildMarkerDirective, CollectionsComponent, CollectionsDialog, DRAWER_COMPONENT, DRAWER_STACK_MAX_COUNT, DateComponent, DeleteCollectionDialog, DidYouMeanComponent, DocumentLocatorComponent, DrawerAdvancedFiltersComponent, DrawerComponent, DrawerNavbarComponent, DrawerPreviewComponent, DrawerService, DrawerStackComponent, DrawerStackService, DropdownInputComponent, DropdownListComponent, ErrorComponent, ExportDialog, ExportService, FILTERS_BREAKPOINT, FILTER_DATE_ALLOW_CUSTOM_RANGE, FeatureFlagsDialogComponent, FeedbackDialogComponent, FileSizePipe, FilterButtonComponent, FiltersBarComponent, HIGHLIGHTS, HighlightWordPipe, InfinityScrollDirective, InlineWorker, JsonMethodPluginService, KeyboardNavigatorDirective, LabelService, LabelsEditDialog, LoadingComponent, MetadataComponent, MissingTermsComponent, MoreButtonComponent, MoreComponent, MultiSelectLabelsComponent, MultiSelectionToolbarComponent, NON_SEARCHABLE_COLUMNS, NON_SEARCHABLE_DEFAULTS, NavbarTabsComponent, NavigationService, NoResultComponent, OpenArticleOnCtrlEnterDirective, OperatorPipe, OverflowItemDirective, OverflowManagerDirective, OverflowStopDirective, OverrideUserDialogComponent, PREVIEW_CONFIG, PagerComponent, PreviewNavigator, PreviewService, PrincipalService, PrincipalStore, QueryParamsStore, QueryService, RECENT_SEARCHES_CONFIG, RECENT_SEARCHES_OPTIONS, ROUTE_COMPONENTS, RecentSearchesComponent, ResetUserSettingsDialogComponent, SAVED_SEARCHES_CONFIG, SAVED_SEARCHES_OPTIONS, SavedSearchDialog, SavedSearchesComponent, SavedSearchesService, SearchFeedbackComponent, SearchInputFooter, SearchService, SelectArticleDirective, SelectArticleOnClickDirective, SelectionHistoryService, SelectionService, SelectionStore, ShowBookmarkDirective, SidebarNavComponent, SignInComponent, SignedOutComponent, SortSelectorComponent, SourceComponent, SourceIconPipe, SponsoredResultsComponent, SyslangPipe, THEMES, TextChunkService, ThemeProviderDirective, ThemeSelectorComponent, ThemeStore, ThemeToggleComponent, TranslocoDateImpurePipe, UserProfileDialog, UserProfileFormComponent, UserProfileService, UserSettingsStore, __resetSignInMutexForTests, applyThemeToNativeElement, auditInterceptorFn, authInterceptorFn, bodyInterceptorFn, bootstrapApp, buildQuery, debouncedSignal, errorInterceptorFn, getCurrentPath, getCurrentQueryName, getQueryNameFromRoute, injectRouteNavigation, isAuthRoute, isSignInInFlight, legacyFilterToFilter, processCssVars, queryNameResolver, signIn, themeColorNameToCssVariable, themeColorsToCssVariables, toastInterceptorFn, withAggregationsFeatures, withAlertsFeatures, withAppFeatures, withApplicationFeatures, withAssistantFeatures, withBasketsFeatures, withBookmarkFeatures, withBootstrapApp, withExtractsFeatures, withFetch, withMultiSelectionFeatures, withQueryParamsFeatures, withRecentSearchesFeatures, withSavedSearchesFeatures, withSelectionFeatures, withThemeBodyHook, withThemes, withThemesFeatures, withUserSettingsFeatures };
+export { AGGREGATIONS_NAMES, AGGREGATIONS_NAMES_PRESET_DEFAULT, APP_FEATURES, AdvancedFiltersComponent, AdvancedSearch, AdvancedSearchComponent, AggregationComponent, AggregationDateComponent, AggregationDateRangeDialogComponent, AggregationItemDirective, AggregationListComponent, AggregationPanelComponent, AggregationTreeComponent, AggregationsService, AggregationsStore, Alert, AlertDialog, AlertsComponent, AppService, AppStore, ApplicationService, ApplicationStore, ArticleEntities, ArticleExtracts, ArticleLabels, ArticleSimilarDocuments, AsideFiltersComponent, AuditFeedbackType, AuditService, AuthGuard, AuthPageComponent, AutocompleteService, BOOKMARKS_CONFIG, BOOKMARKS_OPTIONS, BackdropComponent, BackdropService, BookmarkButtonComponent, BookmarksComponent, COLLECTIONS_CONFIG, COLLECTIONS_OPTIONS, COMPONENTS_FOR_DOCUMENT_TYPE, ChangePasswordComponent, ChildMarkerDirective, CollectionsComponent, CollectionsDialog, DRAWER_COMPONENT, DRAWER_STACK_MAX_COUNT, DateComponent, DeleteCollectionDialog, DidYouMeanComponent, DocumentLocatorComponent, DrawerAdvancedFiltersComponent, DrawerComponent, DrawerNavbarComponent, DrawerPreviewComponent, DrawerService, DrawerStackComponent, DrawerStackService, DropdownInputComponent, DropdownListComponent, EntityNavigationService, ErrorComponent, ExportDialog, ExportService, FILTERS_BREAKPOINT, FILTER_DATE_ALLOW_CUSTOM_RANGE, FeatureFlagsDialogComponent, FeedbackDialogComponent, FileSizePipe, FilterButtonComponent, FiltersBarComponent, HIGHLIGHTS, HighlightWordPipe, InfinityScrollDirective, InlineWorker, JsonMethodPluginService, KeyboardNavigatorDirective, LabelService, LabelsEditDialog, LoadingComponent, MetadataComponent, MissingTermsComponent, MoreButtonComponent, MoreComponent, MultiSelectLabelsComponent, MultiSelectionToolbarComponent, NON_SEARCHABLE_COLUMNS, NON_SEARCHABLE_DEFAULTS, NavbarTabsComponent, NavigationService, NoResultComponent, OpenArticleOnCtrlEnterDirective, OperatorPipe, OverflowItemDirective, OverflowManagerDirective, OverflowStopDirective, OverrideUserDialogComponent, PREVIEW_CONFIG, PagerComponent, PreviewNavigator, PreviewService, PrincipalService, PrincipalStore, QueryParamsStore, QueryService, RECENT_SEARCHES_CONFIG, RECENT_SEARCHES_OPTIONS, ROUTE_COMPONENTS, RecentSearchesComponent, ResetUserSettingsDialogComponent, SAVED_SEARCHES_CONFIG, SAVED_SEARCHES_OPTIONS, SavedSearchDialog, SavedSearchesComponent, SavedSearchesService, SearchFeedbackComponent, SearchInputFooter, SearchService, SelectArticleDirective, SelectArticleOnClickDirective, SelectionHistoryService, SelectionService, SelectionStore, ShowBookmarkDirective, SidebarNavComponent, SignInComponent, SignedOutComponent, SortSelectorComponent, SourceComponent, SourceIconPipe, SponsoredResultsComponent, SyslangPipe, THEMES, TextChunkService, ThemeProviderDirective, ThemeSelectorComponent, ThemeStore, ThemeToggleComponent, TranslocoDateImpurePipe, UserProfileDialog, UserProfileFormComponent, UserProfileService, UserSettingsStore, __resetSignInMutexForTests, applyThemeToNativeElement, auditInterceptorFn, authInterceptorFn, bodyInterceptorFn, bootstrapApp, buildQuery, debouncedSignal, errorInterceptorFn, getCurrentPath, getCurrentQueryName, getQueryNameFromRoute, injectRouteNavigation, isAuthRoute, isSignInInFlight, legacyFilterToFilter, processCssVars, queryNameResolver, signIn, themeColorNameToCssVariable, themeColorsToCssVariables, toastInterceptorFn, withAggregationsFeatures, withAlertsFeatures, withAppFeatures, withApplicationFeatures, withAssistantFeatures, withBasketsFeatures, withBookmarkFeatures, withBootstrapApp, withExtractsFeatures, withFetch, withMultiSelectionFeatures, withQueryParamsFeatures, withRecentSearchesFeatures, withSavedSearchesFeatures, withSelectionFeatures, withThemeBodyHook, withThemes, withThemesFeatures, withUserSettingsFeatures };
 //# sourceMappingURL=sinequa-atomic-angular.mjs.map