@sinequa/atomic-angular 1.19.3 → 1.20.0

package/fesm2022/sinequa-atomic-angular.mjs

@@ -2,12 +2,12 @@ import * as i0 from '@angular/core';
 import { Injectable, inject, HostBinding, Component, Pipe, InjectionToken, computed, ChangeDetectorRef, DestroyRef, LOCALE_ID, Inject, Optional, input, output, signal, effect, assertInInjectionContext, runInInjectionContext, EnvironmentInjector, Injector, EventEmitter, Directive, viewChild, ElementRef, afterNextRender, untracked, linkedSignal, model, TemplateRef, HostListener, Renderer2, contentChildren, contentChild, booleanAttribute, resource, ChangeDetectionStrategy, ViewContainerRef, numberAttribute, viewChildren, afterRenderEffect, afterEveryRender } from '@angular/core';
 import { BehaviorSubject, Subscription, Subject, of, catchError, map, tap, EMPTY, throwError, from, filter as filter$1, shareReplay, switchMap, firstValueFrom, fromEvent, debounceTime } from 'rxjs';
 import { TranslocoService, TranslocoPipe, provideTranslocoScope } from '@jsverse/transloco';
-import { DropdownComponent, DropdownContentComponent, InputComponent, ButtonComponent, cn, FaIconComponent, EllipsisIcon, ChevronRightIcon, MenuComponent, MenuContentComponent, MenuItemComponent, LinkComponent, CardComponent, CardHeaderComponent, CardContentComponent, BadgeComponent, DialogComponent, DialogHeaderComponent, DialogTitleComponent, DialogContentComponent, DialogFooterComponent, ListItemComponent, SquareCheckIcon, SquareMinusIcon, SquareIcon, SwitchComponent, SelectOptionDirective, DialogService, XMarkIcon, InboxIcon, SparklesIcon, FileOutputIcon, TabsComponent, TabsListComponent, TabComponent, SidebarMenuComponent, SidebarMenuItemComponent, SidebarMenuButtonComponent, TooltipDirective, FrownIcon, ChevronLeftIcon, ChevronsLeftIcon, ChevronsRightIcon, ArrowUpAzIcon, ArrowDownZaIcon, ArrowUpRightFromSquareIcon, ToggleRightIcon, ToggleLeftIcon, Separator, SheetCloseDirective, ArrowLeftIcon, SheetService, DateRangePickerDirective, DatepickerDirective, FilterIcon, FilterXIcon, IconButtonComponent, HighlighterIcon, TagsIcon, SpinnerIcon, MagnifyingGlassIcon, LoadingCircleIcon, CircleCheckIcon, PopoverComponent, BellIcon, TrashIcon, BarsIcon, CardFooterComponent, InputGroupInput, InputGroupComponent, InputGroupAddonComponent, EyeSlashIcon, EyeIcon, BookmarkIcon, PopoverContentComponent, UserIcon, FolderIcon, DialogDescriptionComponent, VerticalDividerComponent, CommentIcon, ThumbsUpIcon, ThumbsDownIcon, DropdownDirective, SearchIcon, TriangleAlertIcon, BreakpointObserverService, ListFilterIcon, SheetComponent, SheetHeaderComponent, SheetTitleComponent, TrashCanIcon, CircleXIcon, InfoCircleIcon, HorizontalDividerComponent, HistoryIcon, StarIcon, FlagEnglishIcon, FlagFrenchIcon, FlagGermanIcon, EditIcon, UndoIcon, SaveIcon, AvatarComponent, AvatarFallbackComponent, AvatarImageComponent } from '@sinequa/ui';
+import { DropdownComponent, DropdownContentComponent, InputComponent, ButtonComponent, cn, FaIconComponent, EllipsisIcon, ChevronRightIcon, MenuComponent, MenuContentComponent, MenuItemComponent, LinkComponent, CardComponent, CardHeaderComponent, CardContentComponent, BadgeComponent, DialogComponent, DialogHeaderComponent, DialogTitleComponent, DialogContentComponent, DialogFooterComponent, ListItemComponent, SquareCheckIcon, SquareMinusIcon, SquareIcon, SwitchComponent, SelectOptionDirective, DialogService, XMarkIcon, InboxIcon, SparklesIcon, FileOutputIcon, TabsComponent, TabsListComponent, TabComponent, SidebarMenuComponent, SidebarMenuItemComponent, SidebarMenuButtonComponent, TooltipDirective, FrownIcon, ChevronLeftIcon, ChevronsLeftIcon, ChevronsRightIcon, ArrowUpAzIcon, ArrowDownZaIcon, ArrowUpRightFromSquareIcon, ToggleRightIcon, ToggleLeftIcon, Separator, SheetCloseDirective, ArrowLeftIcon, SheetService, DateRangePickerDirective, DatepickerDirective, FilterIcon, FilterXIcon, IconButtonComponent, HighlighterIcon, TagsIcon, SpinnerIcon, MagnifyingGlassIcon, LoadingCircleIcon, CircleCheckIcon, PopoverComponent, BellIcon, TrashIcon, BarsIcon, CardFooterComponent, InputGroupInput, InputGroupComponent, InputGroupAddonComponent, EyeSlashIcon, EyeIcon, BookmarkIcon, PopoverContentComponent, UserIcon, FolderIcon, DialogDescriptionComponent, VerticalDividerComponent, CommentIcon, ThumbsUpIcon, ThumbsDownIcon, DropdownDirective, SearchIcon, TriangleAlertIcon, BreakpointObserverService, ListFilterIcon, SheetComponent, SheetHeaderComponent, SheetTitleComponent, TrashCanIcon, CircleXIcon, InfoCircleIcon, HorizontalDividerComponent, HistoryIcon, StarIcon, FlagEnglishIcon, FlagFrenchIcon, FlagGermanIcon, EditIcon, UndoIcon, SaveIcon, AvatarComponent, AvatarFallbackComponent, GlobeIcon, UserSecretIcon, AvatarImageComponent } from '@sinequa/ui';
 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, 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 { 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, deleteUserProfilePrivateCustomData, deleteUserProfileProperty, patchUserProfilePrivateCustomData, 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);
         }));
     }
@@ -6114,25 +6119,41 @@ class MissingTermsComponent {
     missingTerms = computed(() => {
         const query = this.queryParamsStore.getQuery();
         return this.article()
-            .termspresence?.filter(tp => tp.presence === 'missing')
+            .termspresence?.filter(tp => tp.presence === "missing")
             .map(tp => {
-            const bracketMatch = tp.term.match(/^\[(.+)\]$/);
-            const cleanTerm = bracketMatch ? bracketMatch[1] : tp.term;
-            const escapedTerm = cleanTerm.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-            const text = (query.text || '').replace(new RegExp(`\\b${escapedTerm}\\b`, 'gi'), '').replace(/\s+/g, ' ').trim();
-            return {
-                value: cleanTerm,
-                queryParams: { q: `${text} +[${cleanTerm}]` }
-            };
+            const { value, q } = mustIncludeQuery(query.text || "", tp.term);
+            return { value, queryParams: { q } };
         });
     }, ...(ngDevMode ? [{ debugName: "missingTerms" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: MissingTermsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.29", type: MissingTermsComponent, isStandalone: true, selector: "missing-terms, MissingTerms, missingterms", inputs: { article: { classPropertyName: "article", publicName: "article", isSignal: true, isRequired: true, transformFunction: null } }, providers: [provideTranslocoScope('article')], ngImport: i0, template: "@if ((missingTerms() || []).length > 0) {\n  <span class=\"terms-label\">{{ 'article.missingTerms' | transloco }}</span>\n  <span class=\"terms\">\n    @for (term of missingTerms(); track $index) {\n      <span class=\"term ms-1\">{{ term.value }}</span>\n    }\n  </span>\n  <span class=\"mx-1\">|</span>\n  <span class=\"terms-label ms-1\">{{ 'article.mustInclude' | transloco }}</span>\n  <span class=\"terms\">\n    @for (term of missingTerms(); track $index) {\n      <a role=\"button\" class=\"ms-1\" routerLink=\"search\" [queryParams]=\"term.queryParams\" (click)=\"$event.stopPropagation()\">{{ term.value }}</a>\n    }\n  </span>\n}\n", styles: [".term{text-decoration-line:line-through}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.29", type: MissingTermsComponent, isStandalone: true, selector: "missing-terms, MissingTerms, missingterms", inputs: { article: { classPropertyName: "article", publicName: "article", isSignal: true, isRequired: true, transformFunction: null } }, providers: [provideTranslocoScope("article")], ngImport: i0, template: "@if ((missingTerms() || []).length > 0) {\n  <span class=\"terms-label\">{{ 'article.missingTerms' | transloco }}</span>\n  <span class=\"terms\">\n    @for (term of missingTerms(); track $index) {\n      <span class=\"term ms-1\">{{ term.value }}</span>\n    }\n  </span>\n  <span class=\"mx-1\">|</span>\n  <span class=\"terms-label ms-1\">{{ 'article.mustInclude' | transloco }}</span>\n  <span class=\"terms\">\n    @for (term of missingTerms(); track $index) {\n      <a role=\"button\" class=\"ms-1\" routerLink=\"search\" [queryParams]=\"term.queryParams\" (click)=\"$event.stopPropagation()\">{{ term.value }}</a>\n    }\n  </span>\n}\n", styles: [".term{text-decoration-line:line-through}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: MissingTermsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'missing-terms, MissingTerms, missingterms', standalone: true, imports: [TranslocoPipe, RouterLink], providers: [provideTranslocoScope('article')], template: "@if ((missingTerms() || []).length > 0) {\n  <span class=\"terms-label\">{{ 'article.missingTerms' | transloco }}</span>\n  <span class=\"terms\">\n    @for (term of missingTerms(); track $index) {\n      <span class=\"term ms-1\">{{ term.value }}</span>\n    }\n  </span>\n  <span class=\"mx-1\">|</span>\n  <span class=\"terms-label ms-1\">{{ 'article.mustInclude' | transloco }}</span>\n  <span class=\"terms\">\n    @for (term of missingTerms(); track $index) {\n      <a role=\"button\" class=\"ms-1\" routerLink=\"search\" [queryParams]=\"term.queryParams\" (click)=\"$event.stopPropagation()\">{{ term.value }}</a>\n    }\n  </span>\n}\n", styles: [".term{text-decoration-line:line-through}\n"] }]
+            args: [{ selector: "missing-terms, MissingTerms, missingterms", standalone: true, imports: [TranslocoPipe, RouterLink], providers: [provideTranslocoScope("article")], template: "@if ((missingTerms() || []).length > 0) {\n  <span class=\"terms-label\">{{ 'article.missingTerms' | transloco }}</span>\n  <span class=\"terms\">\n    @for (term of missingTerms(); track $index) {\n      <span class=\"term ms-1\">{{ term.value }}</span>\n    }\n  </span>\n  <span class=\"mx-1\">|</span>\n  <span class=\"terms-label ms-1\">{{ 'article.mustInclude' | transloco }}</span>\n  <span class=\"terms\">\n    @for (term of missingTerms(); track $index) {\n      <a role=\"button\" class=\"ms-1\" routerLink=\"search\" [queryParams]=\"term.queryParams\" (click)=\"$event.stopPropagation()\">{{ term.value }}</a>\n    }\n  </span>\n}\n", styles: [".term{text-decoration-line:line-through}\n"] }]
         }], propDecorators: { article: [{ type: i0.Input, args: [{ isSignal: true, alias: "article", required: true }] }] } });
+/**
+ * The backend returns each term with the syntax it has in the query: `[exit code]`, `"exit code"`, `(exit code)` or `/exit code/`.
+ * Removes that syntax (and any +/- operator) to get the bare value, which is what goes inside `+[...]`.
+ */
+const DELIMITED_TERM = /^[+-]?(?:\[(.+)\]|"(.+)"|\((.+)\)|\/(.+)\/)$/;
+/**
+ * Builds the query text which makes `term` mandatory: the term is removed from the current text, then added as a `+[term]` concept.
+ */
+function mustIncludeQuery(queryText, term) {
+    const delimited = term.match(DELIMITED_TERM);
+    const value = delimited ? (delimited[1] ?? delimited[2] ?? delimited[3] ?? delimited[4]) : term;
+    // Escape special regex characters to avoid regex injection (e.g. brackets becoming character classes)
+    const escapedTerm = value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    // 1. The term is a whole pattern of the query (e.g. "exit code" or +[exit code]): remove it with its delimiters.
+    //    A word boundary cannot be used here, as the delimiters are not word characters.
+    const wholePattern = new RegExp(`(^|\\s)[+-]?(?:\\[${escapedTerm}\\]|"${escapedTerm}"|\\(${escapedTerm}\\)|\\/${escapedTerm}\\/)(?=\\s|$)`, "gi");
+    const withoutPattern = queryText.replace(wholePattern, "$1");
+    // 2. Otherwise, the term is made of plain words of the query: remove them.
+    const remaining = withoutPattern !== queryText ? withoutPattern : queryText.replace(new RegExp(`\\b${escapedTerm}\\b`, "gi"), "");
+    const text = remaining.replace(/\s+/g, " ").trim();
+    return { value, q: `${text} +[${value}]` };
+}
 
 class CollectionsDialog {
     closed = output();
@@ -18255,17 +18276,71 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImpo
 
 /** Whether a value is an object (an array excluded): a structure, which this form cannot edit. */
 const isPlainObject = (value) => value !== null && typeof value === "object" && !Array.isArray(value);
+/** Segments of a `/`-separated property path. */
+const toPath = (key) => key.split("/");
+/** The value stored at a `/`-separated path of `source`, or `undefined` when a node on the way is missing or not an object. */
+function getAtPath(source, key) {
+    let node = source;
+    for (const segment of toPath(key)) {
+        if (!isPlainObject(node)) {
+            return undefined;
+        }
+        node = node[segment];
+    }
+    return node;
+}
+/**
+ * A copy of `source` holding `value` at a `/`-separated path (`undefined` removes it), siblings untouched.
+ * The nodes on the way are created when missing, or replaced when they are not objects.
+ */
+function setAtPath(source, key, value) {
+    const [head, ...rest] = toPath(key);
+    const copy = { ...(source ?? {}) };
+    if (rest.length) {
+        const child = copy[head];
+        copy[head] = setAtPath(isPlainObject(child) ? child : undefined, rest.join("/"), value);
+    }
+    else {
+        copy[head] = value;
+    }
+    return copy;
+}
+/**
+ * Where to write `value` for the property at `key` so that the server accepts it.
+ *
+ * The server does not create the nodes on the way: a PATCH on `obj/deep/leaf` answers 404 while `obj` or
+ * `obj/deep` does not exist in the profile. The write is therefore moved up to the first missing node (an
+ * absent one, or one that is not an object), and carries the rest of the path as nested objects: with an empty
+ * `source`, `obj/deep/leaf = "x"` is written as `obj = { deep: { leaf: "x" } }`. When every node on the way
+ * exists, the target is `key` itself.
+ */
+function writeTarget(source, key, value) {
+    const path = toPath(key);
+    let node = source;
+    for (let depth = 0; depth < path.length - 1; depth++) {
+        const child = isPlainObject(node) ? node[path[depth]] : undefined;
+        if (!isPlainObject(child)) {
+            const nested = path.slice(depth + 1).reduceRight((inner, segment) => ({ [segment]: inner }), value);
+            return { key: path.slice(0, depth + 1).join("/"), value: nested };
+        }
+        node = child;
+    }
+    return { key, value };
+}
 /**
- * Normalizes `features.userProfile.customData`, as written in the custom JSON, into a flat list.
+ * Normalizes `features.userProfile.customData` / `features.userProfile.privateCustomData`, as written in
+ * the custom JSON, into a flat list of `/`-separated paths.
  *
- * Two entry shapes are accepted and can be mixed:
- * - `"nickname"` — a property without default;
+ * Entry shapes accepted, which can be mixed:
+ * - `"nickname"` — a property without default; `"agent/favorites"` is a nested one;
  * - `{ "nickname": "none" }` — a property and its default value. An object with several keys declares
- *   one property per key.
+ *   one property per key;
+ * - `{ "obj": { "property1": "val2" } }` — a hierarchy: the property `obj/property1`, default `val2`, at
+ *   any depth.
  *
  * The JSON is read at run time and nothing validates it, so an entry that is neither a string nor a
- * plain object is dropped, with a warning, rather than thrown on. When a key is declared twice, the
- * first declaration wins.
+ * plain object, or a path with an empty segment, is dropped, with a warning, rather than thrown on. When
+ * a path is declared twice, the first declaration wins.
  */
 function normalizeCustomData(entries) {
     const properties = new Map();
@@ -18273,14 +18348,26 @@ function normalizeCustomData(entries) {
         if (!key || properties.has(key)) {
             return;
         }
+        if (toPath(key).some(segment => !segment)) {
+            console.warn("[user-profile] customData: path ignored, it has an empty segment.", key);
+            return;
+        }
         properties.set(key, value === undefined || value === null ? { key } : { key, defaultValue: value });
     };
+    const addTree = (prefix, value) => {
+        if (isPlainObject(value) && Object.keys(value).length) {
+            Object.entries(value).forEach(([key, child]) => addTree(prefix ? `${prefix}/${key}` : key, child));
+        }
+        else {
+            add(prefix, isPlainObject(value) ? undefined : value);
+        }
+    };
     for (const entry of Array.isArray(entries) ? entries : []) {
         if (typeof entry === "string") {
             add(entry);
         }
         else if (isPlainObject(entry)) {
-            Object.entries(entry).forEach(([key, value]) => add(key, value));
+            addTree("", entry);
         }
         else {
             console.warn("[user-profile] customData: entry ignored, expected a string or an object.", entry);
@@ -18289,6 +18376,101 @@ function normalizeCustomData(entries) {
     return [...properties.values()];
 }
 
+/** Whether a value is a structure (an array or an object) rather than a scalar. */
+const isStructured = (value) => Array.isArray(value) || isPlainObject(value);
+/**
+ * Read-only view of any JSON value, to show a profile property whose content is not known in advance.
+ *
+ * - a scalar is shown as text;
+ * - an array of scalars is a row of chips;
+ * - any other array, and an object, is a nested list: each item (or key) is shown with this same
+ *   component, so values, objects and arrays can be mixed at any depth.
+ *
+ * It renders nothing interactive, so the profile form keeps the edition to itself.
+ */
+class JsonValueView {
+    value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
+    isArray = computed(() => Array.isArray(this.value()), ...(ngDevMode ? [{ debugName: "isArray" }] : []));
+    /** The items of a structure (a label only for an object key), or `undefined` for a scalar. */
+    entries = computed(() => {
+        const value = this.value();
+        if (Array.isArray(value)) {
+            return value.map(item => ({ label: undefined, value: item }));
+        }
+        if (isPlainObject(value)) {
+            return Object.entries(value).map(([label, item]) => ({ label: label, value: item }));
+        }
+        return undefined;
+    }, ...(ngDevMode ? [{ debugName: "entries" }] : []));
+    scalarArray = computed(() => this.isArray() && (this.entries() ?? []).length > 0 && (this.entries() ?? []).every(item => !isStructured(item.value)), ...(ngDevMode ? [{ debugName: "scalarArray" }] : []));
+    text(value) {
+        return value === null || value === undefined ? "∅" : String(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: JsonValueView, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.29", type: JsonValueView, isStandalone: true, selector: "json-value-view", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block min-w-0" }, ngImport: i0, template: `
+    @if (entries(); as list) {
+      @if (scalarArray()) {
+        <ul class="flex flex-wrap gap-1">
+          @for (item of list; track $index) {
+            <li class="bg-muted rounded-full px-2 py-0.5 text-sm break-words">{{ text(item.value) }}</li>
+          }
+        </ul>
+      } @else if (list.length) {
+        <ul class="border-foreground/10 flex flex-col gap-1 border-l-2 pl-2">
+          @for (item of list; track $index) {
+            <li class="flex min-w-0 flex-col">
+              @if (item.label !== undefined) {
+                <span class="text-muted-foreground text-xs">{{ item.label }}</span>
+              }
+              <json-value-view [value]="item.value" />
+            </li>
+          }
+        </ul>
+      } @else {
+        <span class="text-muted-foreground">{{ isArray() ? "[ ]" : "{ }" }}</span>
+      }
+    } @else {
+      <span class="break-words whitespace-pre-line">{{ text(value()) }}</span>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: JsonValueView, selector: "json-value-view", inputs: ["value"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: JsonValueView, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "json-value-view",
+                    standalone: true,
+                    host: { class: "block min-w-0" },
+                    template: `
+    @if (entries(); as list) {
+      @if (scalarArray()) {
+        <ul class="flex flex-wrap gap-1">
+          @for (item of list; track $index) {
+            <li class="bg-muted rounded-full px-2 py-0.5 text-sm break-words">{{ text(item.value) }}</li>
+          }
+        </ul>
+      } @else if (list.length) {
+        <ul class="border-foreground/10 flex flex-col gap-1 border-l-2 pl-2">
+          @for (item of list; track $index) {
+            <li class="flex min-w-0 flex-col">
+              @if (item.label !== undefined) {
+                <span class="text-muted-foreground text-xs">{{ item.label }}</span>
+              }
+              <json-value-view [value]="item.value" />
+            </li>
+          }
+        </ul>
+      } @else {
+        <span class="text-muted-foreground">{{ isArray() ? "[ ]" : "{ }" }}</span>
+      }
+    } @else {
+      <span class="break-words whitespace-pre-line">{{ text(value()) }}</span>
+    }
+  `
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }] } });
+
+/** Marks a JSON editor content that does not parse. */
+const INVALID = Symbol("invalid-json");
 const SUPPORTED_LANGUAGES = ["en", "fr", "de"];
 class UserProfileFormComponent {
     principalStore = inject(PrincipalStore);
@@ -18320,16 +18502,36 @@ class UserProfileFormComponent {
     ];
     changingPassword = signal(false, ...(ngDevMode ? [{ debugName: "changingPassword" }] : []));
     customDataConfig = computed(() => normalizeCustomData(this.appStore.general()?.features?.userProfile?.customData), ...(ngDevMode ? [{ debugName: "customDataConfig" }] : []));
+    privateCustomDataConfig = computed(() => normalizeCustomData(this.appStore.general()?.features?.userProfile?.privateCustomData), ...(ngDevMode ? [{ debugName: "privateCustomDataConfig" }] : []));
     /**
-     * The editable custom properties. A property that already holds an object in the profile (hierarchical
-     * `customData`) is left out: this form edits scalars only and would overwrite the structure.
+     * The custom properties of the form. A property may hold any JSON value, a structure included: it is
+     * shown structured and edited as JSON (see {@link editingJson}).
      */
-    customData = computed(() => {
-        const stored = this.userProfile()?.customData;
-        return this.customDataConfig()
-            .map(({ key }) => key)
-            .filter(key => !this.keys().some(k => k.toLowerCase() === key.toLowerCase()) && !isPlainObject(stored?.[key]));
-    }, ...(ngDevMode ? [{ debugName: "customData" }] : []));
+    customData = computed(() => this.customDataConfig()
+        .map(({ key }) => key)
+        .filter(key => !this.keys().some(k => k.toLowerCase() === key.toLowerCase())), ...(ngDevMode ? [{ debugName: "customData" }] : []));
+    /** The private properties of the form; they only ever go through the private endpoints. */
+    privateCustomData = computed(() => this.privateCustomDataConfig().map(({ key }) => key), ...(ngDevMode ? [{ debugName: "privateCustomData" }] : []));
+    /** Whether the editor holds JSON (the property is an array or an object) rather than a single text. */
+    editingJson = signal(false, ...(ngDevMode ? [{ debugName: "editingJson" }] : []));
+    /** Whether the JSON being edited does not parse: the save is then not offered. */
+    invalidJson = computed(() => {
+        if (!this.editingJson())
+            return false;
+        try {
+            JSON.parse(this.value() ?? "");
+            return false;
+        }
+        catch {
+            return true;
+        }
+    }, ...(ngDevMode ? [{ debugName: "invalidJson" }] : []));
+    /** Every field of the form, in display order. A key declared both public and private gives two fields. */
+    fields = computed(() => [
+        ...this.formKeys().map((key) => ({ category: "data", key })),
+        ...this.customData().map((key) => ({ category: "customData", key })),
+        ...this.privateCustomData().map((key) => ({ category: "privateCustomData", key }))
+    ], ...(ngDevMode ? [{ debugName: "fields" }] : []));
     allowChangePassword = computed(() => {
         const { useCredentials } = globalConfig;
         const { allowChangePassword = false } = this.appStore.general()?.features || {};
@@ -18379,9 +18581,10 @@ class UserProfileFormComponent {
      * @param propertyName property name
      */
     onEdit(category, propertyName) {
-        const value = this.getDataValue(category, propertyName);
+        const raw = this.getRawValue(category, propertyName);
         this.feedback.set(undefined);
-        this.value.set(value?.trim() || "");
+        this.editingJson.set(isStructured(raw));
+        this.value.set(isStructured(raw) ? JSON.stringify(raw, null, 2) : raw === undefined || raw === null ? "" : String(raw).trim());
         this.propertyToEdit.set(`${category}.${propertyName}`);
     }
     /** Name of the property as the user sees it: the translated label for `data`, the raw key otherwise. */
@@ -18406,8 +18609,21 @@ class UserProfileFormComponent {
     /** Leaves the editor without saving. */
     onCancelEdit() {
         this.feedback.set(undefined);
+        this.editingJson.set(false);
         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.storedValue(category, propertyName);
+        return stored !== undefined && stored !== null;
+    }
     /**
      * On data property deletion, for now we make the property an empty string
      *
@@ -18417,16 +18633,22 @@ 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);
         try {
-            const response = await deleteUserProfileProperty(this.userProfile(), category, propertyName);
+            // A private property is only ever deleted through the private endpoint, never the public one.
+            const response = category === "privateCustomData"
+                ? await deleteUserProfilePrivateCustomData(propertyName)
+                : 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 {
@@ -18434,13 +18656,34 @@ 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 (category === "data") {
+            if (userProfile.data)
+                userProfile.data[propertyName] = undefined;
+        }
+        else if (userProfile[category]) {
+            userProfile[category] = setAtPath(userProfile[category], propertyName, undefined);
+        }
+        this.userProfileResource.set(userProfile);
+    }
     /**
      * Saving a data property
      *
@@ -18452,24 +18695,30 @@ class UserProfileFormComponent {
             return;
         const key = `${category}.${propertyName}`;
         this.feedback.set(undefined);
+        const written = this.valueToWrite(category, propertyName);
+        if (written === INVALID) {
+            this.feedback.set({ key, type: "error", message: this.transloco.translate("userProfile.invalidJson") });
+            return;
+        }
         this.pending.set(key);
         // cloning the user profile to avoid changing the signal value before confirming the update
         const userProfile = JSON.parse(JSON.stringify(this.userProfile()));
-        if (!userProfile[category])
-            userProfile[category] = {};
-        userProfile[category][propertyName] = this.value()?.trim() || "";
+        if (category === "data") {
+            userProfile.data = { ...(userProfile.data ?? {}), [propertyName]: written };
+        }
+        else {
+            userProfile[category] = setAtPath(userProfile[category], propertyName, written);
+        }
+        // The server does not create the nodes on the way (404): write at the first missing one, with the rest nested.
+        const target = category === "data" ? { key: propertyName, value: written } : writeTarget(this.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 || {}) }
-                });
-            }
+            // A private property is only ever written through the private endpoint, never the public one.
+            const response = category === "privateCustomData"
+                ? await patchUserProfilePrivateCustomData(target.key, target.value)
+                : await patchUserProfile(userProfile, category, target.key);
+            this.foldSavedValue(category, target.key, response, target.value);
             this.value.set(undefined);
+            this.editingJson.set(false);
             this.propertyToEdit.set(undefined);
             this.feedback.set({ key, type: "success", message: this.message("saved", category, propertyName) });
         }
@@ -18481,20 +18730,86 @@ class UserProfileFormComponent {
         }
     }
     /**
-     * Get the value of a data key
+     * 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 (category !== "privateCustomData" && !isStructured(written) && 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]: category === "data" ? { ...(current?.data || {}), [propertyName]: value } : setAtPath(current?.[category], propertyName, value)
+        });
+    }
+    /** The value the profile holds for a property, whichever category it lives in; `propertyName` is a path for custom data. */
+    storedValue(category, propertyName) {
+        const source = this.userProfile()?.[category];
+        return category === "data" ? source?.[propertyName] : getAtPath(source, propertyName);
+    }
+    /**
+     * The value of a property as the profile holds it, of any JSON type; while it holds none, the default the
+     * administrator configured for a custom property.
+     */
+    getRawValue(category, key) {
+        const value = this.storedValue(category, key);
+        if (value === undefined && category !== "data") {
+            const config = category === "customData" ? this.customDataConfig() : this.privateCustomDataConfig();
+            return config.find(property => property.key === key)?.defaultValue;
+        }
+        return value;
+    }
+    /** Whether the value of a property is a structure (an array or an object), shown with {@link JsonValueView}. */
+    isStructuredValue(category, key) {
+        return isStructured(this.getRawValue(category, key));
+    }
+    /**
+     * Get the value of a data key, when it is a scalar
      *
      * @param category data or customData
      * @param key property key
-     * @returns the value
+     * @returns the value, or `undefined` when there is none or when it is a structure
      */
     getDataValue(category, key) {
-        const data = this.userProfile()?.[category];
-        const value = data?.[key];
-        if (value === undefined && category === "customData") {
-            const defaultValue = this.customDataConfig().find(property => property.key === key)?.defaultValue;
-            return defaultValue === undefined || typeof defaultValue === "object" ? undefined : String(defaultValue);
+        const value = this.getRawValue(category, key);
+        return value === undefined || isStructured(value) ? undefined : value;
+    }
+    /**
+     * What the editor holds, as the value to send: the parsed JSON for a structure (or `INVALID`), the text
+     * otherwise. A property stored as a number or a boolean stays one when the text still reads as such, so that
+     * saving does not silently turn it into a string.
+     */
+    valueToWrite(category, propertyName) {
+        if (this.editingJson()) {
+            try {
+                return JSON.parse(this.value() ?? "");
+            }
+            catch {
+                return INVALID;
+            }
         }
-        return value;
+        const text = this.value()?.trim() || "";
+        if (category === "data")
+            return text;
+        const stored = this.storedValue(category, propertyName);
+        if (typeof stored === "number" && text !== "" && Number.isFinite(Number(text)))
+            return Number(text);
+        if (typeof stored === "boolean" && (text === "true" || text === "false"))
+            return text === "true";
+        return text;
     }
     /**
      * TODO: how do we save the picture?
@@ -18526,7 +18841,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        <!-- two columns from the sm breakpoint; a structured value or the JSON editor takes the full width -->\n        <div\n          class=\"grid grid-cols-1 items-start gap-x-6 gap-y-2 sm:grid-cols-2\">\n          @for (field of fields(); track field.category + \".\" + field.key) {\n            @let id = field.category + \".\" + field.key;\n            @let isPrivate = field.category === \"privateCustomData\";\n            <div\n              [class]=\"\n                isStructuredValue(field.category, field.key) ||\n                (propertyToEdit() === id && editingJson())\n                  ? 'min-w-0 sm:col-span-2'\n                  : 'min-w-0'\n              \">\n              <p class=\"flex items-center gap-2 px-2\">\n                <span>\n                  @if (field.category === \"data\") {\n                    {{ `userProfile.data.${field.key}` | transloco }}\n                  } @else {\n                    {{ field.key.split(\"/\").join(\" \u203A \") }}\n                  }\n                </span>\n                <!-- PRIVATE / PUBLIC: icon AND text, so the information is not carried by the icon or a color alone -->\n                <span\n                  class=\"text-muted-foreground inline-flex items-center gap-1 text-xs\"\n                  [attr.data-visibility]=\"isPrivate ? 'private' : 'public'\"\n                  [title]=\"\n                    (isPrivate\n                      ? 'userProfile.privateHint'\n                      : 'userProfile.publicHint'\n                    ) | transloco\n                  \">\n                  @if (isPrivate) {\n                    <user-secret-icon class=\"size-3.5 shrink-0\" />\n                  } @else {\n                    <globe-icon class=\"size-3.5 shrink-0\" />\n                  }\n                  <span>{{\n                    (isPrivate ? \"userProfile.private\" : \"userProfile.public\")\n                      | transloco\n                  }}</span>\n                  <span class=\"sr-only\">\n                    {{\n                      (isPrivate\n                        ? \"userProfile.privateHint\"\n                        : \"userProfile.publicHint\"\n                      ) | transloco\n                    }}\n                  </span>\n                </span>\n              </p>\n              <div\n                class=\"group flex flex-row rounded-md px-2 py-0.5\"\n                [class.ring-1]=\"!!fieldState(id)\"\n                [class.ring-destructive]=\"fieldState(id) === 'error'\"\n                [class.ring-green-600]=\"fieldState(id) === 'success'\">\n                <div\n                  class=\"min-w-0 grow break-words whitespace-pre-line\"\n                  [class.text-muted-foreground]=\"\n                    getRawValue(field.category, field.key) == null\n                  \">\n                  @if (propertyToEdit() === id) {\n                    @if (editingJson()) {\n                      <!-- an array or an object is edited as JSON, on several lines -->\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 font-mono text-sm hover:outline focus:outline\"\n                        rows=\"8\"\n                        [attr.aria-invalid]=\"invalidJson() || null\"\n                        [attr.aria-describedby]=\"\n                          invalidJson() ? 'user-profile-json-error' : null\n                        \"\n                        id=\"user-profile-{{ field.category }}-{{ field.key }}\"\n                        [(ngModel)]=\"value\"></textarea>\n                    } @else {\n                      <input\n                        type=\"text\"\n                        class=\"hover:outline-primary focus:outline-primary border-foreground/20 hover:bg-muted focus:bg-muted mt-2 h-8 w-full rounded-md border px-2 hover:outline focus:outline\"\n                        id=\"user-profile-{{ field.category }}-{{ field.key }}\"\n                        [(ngModel)]=\"value\" />\n                    }\n                    @if (invalidJson()) {\n                      <p\n                        id=\"user-profile-json-error\"\n                        class=\"text-destructive text-sm\">\n                        {{ \"userProfile.invalidJson\" | transloco }}\n                      </p>\n                    }\n                  } @else if (isStructuredValue(field.category, field.key)) {\n                    <json-value-view\n                      [value]=\"getRawValue(field.category, field.key)\" />\n                  } @else {\n                    {{\n                      getDataValue(field.category, field.key) ??\n                        (\"userProfile.notDefined\" | transloco)\n                    }}\n                  }\n                </div>\n                @if (propertyToEdit() === id) {\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() || invalidJson()\"\n                    (click)=\"onSaveData(field.category, field.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(field.category, field.key)\">\n                    <EditIcon />\n                  </button>\n                  <!-- nothing stored, nothing to delete: the button is not offered rather than shown disabled -->\n                  @if (hasStoredValue(field.category, field.key)) {\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]=\"\n                        'userProfile.deleteProperty' | transloco\n                      \"\n                      [disabled]=\"!!pending()\"\n                      (click)=\"onDeleteData(field.category, field.key)\">\n                      <TrashIcon />\n                    </button>\n                  }\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: GlobeIcon, selector: "globe-icon, GlobeIcon, globeicon", inputs: ["class"] }, { kind: "component", type: UserSecretIcon, selector: "user-secret-icon, UserSecretIcon", inputs: ["class"] }, { kind: "component", type: JsonValueView, selector: "json-value-view", inputs: ["value"] }, { 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,
@@ -18541,10 +18856,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImpo
                         AvatarComponent,
                         AvatarFallbackComponent,
                         UserIcon,
+                        GlobeIcon,
+                        UserSecretIcon,
+                        JsonValueView,
                         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        <!-- two columns from the sm breakpoint; a structured value or the JSON editor takes the full width -->\n        <div\n          class=\"grid grid-cols-1 items-start gap-x-6 gap-y-2 sm:grid-cols-2\">\n          @for (field of fields(); track field.category + \".\" + field.key) {\n            @let id = field.category + \".\" + field.key;\n            @let isPrivate = field.category === \"privateCustomData\";\n            <div\n              [class]=\"\n                isStructuredValue(field.category, field.key) ||\n                (propertyToEdit() === id && editingJson())\n                  ? 'min-w-0 sm:col-span-2'\n                  : 'min-w-0'\n              \">\n              <p class=\"flex items-center gap-2 px-2\">\n                <span>\n                  @if (field.category === \"data\") {\n                    {{ `userProfile.data.${field.key}` | transloco }}\n                  } @else {\n                    {{ field.key.split(\"/\").join(\" \u203A \") }}\n                  }\n                </span>\n                <!-- PRIVATE / PUBLIC: icon AND text, so the information is not carried by the icon or a color alone -->\n                <span\n                  class=\"text-muted-foreground inline-flex items-center gap-1 text-xs\"\n                  [attr.data-visibility]=\"isPrivate ? 'private' : 'public'\"\n                  [title]=\"\n                    (isPrivate\n                      ? 'userProfile.privateHint'\n                      : 'userProfile.publicHint'\n                    ) | transloco\n                  \">\n                  @if (isPrivate) {\n                    <user-secret-icon class=\"size-3.5 shrink-0\" />\n                  } @else {\n                    <globe-icon class=\"size-3.5 shrink-0\" />\n                  }\n                  <span>{{\n                    (isPrivate ? \"userProfile.private\" : \"userProfile.public\")\n                      | transloco\n                  }}</span>\n                  <span class=\"sr-only\">\n                    {{\n                      (isPrivate\n                        ? \"userProfile.privateHint\"\n                        : \"userProfile.publicHint\"\n                      ) | transloco\n                    }}\n                  </span>\n                </span>\n              </p>\n              <div\n                class=\"group flex flex-row rounded-md px-2 py-0.5\"\n                [class.ring-1]=\"!!fieldState(id)\"\n                [class.ring-destructive]=\"fieldState(id) === 'error'\"\n                [class.ring-green-600]=\"fieldState(id) === 'success'\">\n                <div\n                  class=\"min-w-0 grow break-words whitespace-pre-line\"\n                  [class.text-muted-foreground]=\"\n                    getRawValue(field.category, field.key) == null\n                  \">\n                  @if (propertyToEdit() === id) {\n                    @if (editingJson()) {\n                      <!-- an array or an object is edited as JSON, on several lines -->\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 font-mono text-sm hover:outline focus:outline\"\n                        rows=\"8\"\n                        [attr.aria-invalid]=\"invalidJson() || null\"\n                        [attr.aria-describedby]=\"\n                          invalidJson() ? 'user-profile-json-error' : null\n                        \"\n                        id=\"user-profile-{{ field.category }}-{{ field.key }}\"\n                        [(ngModel)]=\"value\"></textarea>\n                    } @else {\n                      <input\n                        type=\"text\"\n                        class=\"hover:outline-primary focus:outline-primary border-foreground/20 hover:bg-muted focus:bg-muted mt-2 h-8 w-full rounded-md border px-2 hover:outline focus:outline\"\n                        id=\"user-profile-{{ field.category }}-{{ field.key }}\"\n                        [(ngModel)]=\"value\" />\n                    }\n                    @if (invalidJson()) {\n                      <p\n                        id=\"user-profile-json-error\"\n                        class=\"text-destructive text-sm\">\n                        {{ \"userProfile.invalidJson\" | transloco }}\n                      </p>\n                    }\n                  } @else if (isStructuredValue(field.category, field.key)) {\n                    <json-value-view\n                      [value]=\"getRawValue(field.category, field.key)\" />\n                  } @else {\n                    {{\n                      getDataValue(field.category, field.key) ??\n                        (\"userProfile.notDefined\" | transloco)\n                    }}\n                  }\n                </div>\n                @if (propertyToEdit() === id) {\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() || invalidJson()\"\n                    (click)=\"onSaveData(field.category, field.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(field.category, field.key)\">\n                    <EditIcon />\n                  </button>\n                  <!-- nothing stored, nothing to delete: the button is not offered rather than shown disabled -->\n                  @if (hasStoredValue(field.category, field.key)) {\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]=\"\n                        'userProfile.deleteProperty' | transloco\n                      \"\n                      [disabled]=\"!!pending()\"\n                      (click)=\"onDeleteData(field.category, field.key)\">\n                      <TrashIcon />\n                    </button>\n                  }\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 {
@@ -18557,7 +18875,7 @@ class UserProfileDialog {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: UserProfileDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.29", type: UserProfileDialog, isStandalone: true, selector: "user-profile-dialog, userprofiledialog, UserProfileDialog", providers: [provideTranslocoScope("user-profile")], viewQueries: [{ propertyName: "dialog", first: true, predicate: DialogComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
     <div dialog #dialog="dialog">
-      <DialogContent class="flex flex-col max-h-11/12 overflow-hidden">
+      <DialogContent class="flex flex-col max-h-11/12 overflow-hidden sm:max-w-3xl">
         <DialogHeader>
           <DialogTitle>{{ 'userProfile.title' | transloco }}</DialogTitle>
         </DialogHeader>
@@ -18574,18 +18892,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImpo
             args: [{
                     selector: "user-profile-dialog, userprofiledialog, UserProfileDialog",
                     standalone: true,
-                    imports: [
-                        DialogComponent,
-                        DialogHeaderComponent,
-                        DialogContentComponent,
-                        UserProfileFormComponent,
-                        DialogTitleComponent,
-                        TranslocoPipe
-                    ],
+                    imports: [DialogComponent, DialogHeaderComponent, DialogContentComponent, UserProfileFormComponent, DialogTitleComponent, TranslocoPipe],
                     providers: [provideTranslocoScope("user-profile")],
                     template: `
     <div dialog #dialog="dialog">
-      <DialogContent class="flex flex-col max-h-11/12 overflow-hidden">
+      <DialogContent class="flex flex-col max-h-11/12 overflow-hidden sm:max-w-3xl">
         <DialogHeader>
           <DialogTitle>{{ 'userProfile.title' | transloco }}</DialogTitle>
         </DialogHeader>