@sinequa/atomic-angular 2.6.0 → 2.7.0

package/fesm2022/sinequa-atomic-angular.mjs

@@ -2,11 +2,11 @@ import * as i0 from "@angular/core";
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, DOCUMENT, DestroyRef, Directive, ElementRef, EnvironmentInjector, HostBinding, HostListener, Inject, Injectable, InjectionToken, Injector, LOCALE_ID, Optional, Pipe, Service, TemplateRef, ViewEncapsulation, afterNextRender, afterRenderEffect, assertInInjectionContext, booleanAttribute, computed, contentChild, contentChildren, effect, inject, input, isDevMode, linkedSignal, makeEnvironmentProviders, model, numberAttribute, output, provideEnvironmentInitializer, resource, runInInjectionContext, signal, untracked, viewChild, viewChildren } from "@angular/core";
 import { BehaviorSubject, EMPTY, Subject, Subscription, catchError, debounceTime, filter, firstValueFrom, from, fromEvent, map, of, scan, shareReplay, switchMap, tap, throwError } from "rxjs";
 import { TranslocoPipe, TranslocoService, provideTranslocoScope } from "@jsverse/transloco";
-import { ArrowDownIcon, ArrowDownZaIcon, ArrowLeftIcon, ArrowRightFromBracketIcon, ArrowRightIcon, ArrowUpAzIcon, ArrowUpIcon, ArrowUpRightFromSquareIcon, ArrowsMaximizeIcon, AutocompleteComponent, AvatarComponent, AvatarFallbackComponent, AvatarImageComponent, BadgeComponent, BarsIcon, BellIcon, BookmarkIcon, BreakpointObserverService, ButtonComponent, CalendarDayIcon, CheckIcon, CheckboxComponent, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronsLeftIcon, ChevronsRightIcon, CircleCheckIcon, CommentIcon, CommentsIcon, DIALOG_REF, DesktopIcon, DialogBodyComponent, DialogComponent, DialogContentComponent, DialogDescriptionComponent, DialogFooterComponent, DialogHeaderComponent, DialogTitleComponent, DropdownDirective, EditIcon, EllipsisIcon, EllipsisVerticalIcon, EyeIcon, EyeSlashIcon, FileHTMLIcon, FileIcon, FileOutputIcon, FileSpreadsheetIcon, FileTextIcon, FilterIcon, FilterXIcon, FlagEnglishIcon, FlagFrenchIcon, FlagGermanIcon, FlashlightIcon, FolderIcon, FolderOpenIcon, FrownIcon, GearIcon, GitForkIcon, GlobeIcon, HighlighterIcon, HistoryIcon, HomeIcon, ImageIcon, InboxIcon, InfoCircleIcon, InputComponent, InputControlDirective, InputIconRightDirective, KbdComponent, KbdGroupComponent, KeyIcon, KeyboardIcon, LanguageIcon, LightbulbIcon, LightbulbSlashIcon, LinkComponent, ListComponent, ListFilterIcon, ListItemActionComponent, ListItemAvatarDirective, ListItemComponent, ListItemLeftDirective, ListItemTextComponent, LoadingCircleIcon, MagnifyingGlassIcon, MagnifyingGlassMinusIcon, MagnifyingGlassPlusIcon, MenuComponent, MenuContentComponent, MenuItemComponent, MenuTriggerDirective, MoonIcon, PaletteIcon, PaperclipIcon, PenToSquareIcon, PlusIcon, PopoverDirective, PresentationIcon, QuestionCircleIcon, RadioComponent, RobotIcon, SaveIcon, SearchBarComponent, SearchInputComponent, SelectComponent, SelectTriggerDirective, SendIcon, SheetBodyComponent, SheetComponent, SheetHeaderComponent, SlashIcon, SlidersIcon, SparklesIcon, SpinnerIcon, SquareCheckIcon, SquareIcon, SquareMinusIcon, StarIcon, SunBrightIcon, SwitchComponent, SyncIcon, TabComponent, TabListComponent, TabPanelComponent, TabsComponent, TagComponent, TagIcon, TagsIcon, TextareaComponent, TextareaControlDirective, ThumbsDownIcon, ThumbsUpIcon, ToggleComponent, ToggleGroupComponent, ToggleItemComponent, ToggleLeftIcon, ToggleRightIcon, TooltipDirective, TrashCanIcon, TrashIcon, TreeComponent, TreeItemComponent, TreeItemExpanderComponent, TreeItemGroupComponent, TriangleAlertIcon, UndoIcon, UserIcon, UserSecretIcon, VideoIcon, XMarkIcon, createCallable, injectCallRef, isApplePlatform } from "@sinequa/galactik";
+import { ArrowDownIcon, ArrowDownZaIcon, ArrowLeftIcon, ArrowRightFromBracketIcon, ArrowRightIcon, ArrowUpAzIcon, ArrowUpIcon, ArrowUpRightFromSquareIcon, ArrowsMaximizeIcon, AutocompleteComponent, AvatarComponent, AvatarFallbackComponent, AvatarImageComponent, BadgeComponent, BarsIcon, BellIcon, BookmarkIcon, BreakpointObserverService, ButtonComponent, CalendarDayIcon, CheckIcon, CheckboxComponent, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronsLeftIcon, ChevronsRightIcon, CircleCheckIcon, CommentIcon, CommentsIcon, DIALOG_REF, DesktopIcon, DialogBodyComponent, DialogComponent, DialogContentComponent, DialogDescriptionComponent, DialogFooterComponent, DialogHeaderComponent, DialogTitleComponent, DropdownDirective, EditIcon, EllipsisIcon, EllipsisVerticalIcon, EyeIcon, EyeSlashIcon, FileHTMLIcon, FileIcon, FileOutputIcon, FileSpreadsheetIcon, FileTextIcon, FilterIcon, FilterXIcon, FlagEnglishIcon, FlagFrenchIcon, FlagGermanIcon, FlashlightIcon, FolderIcon, FolderOpenIcon, FrownIcon, GearIcon, GitForkIcon, GlobeIcon, HighlighterIcon, HistoryIcon, HomeIcon, ImageIcon, InboxIcon, InfoCircleIcon, InputComponent, InputControlDirective, InputIconRightDirective, KbdComponent, KbdGroupComponent, KeyIcon, KeyboardIcon, LanguageIcon, LightbulbIcon, LightbulbSlashIcon, LinkComponent, ListComponent, ListFilterIcon, ListItemActionComponent, ListItemAvatarDirective, ListItemComponent, ListItemLeftDirective, ListItemTextComponent, LoadingCircleIcon, LockIcon, MagnifyingGlassIcon, MagnifyingGlassMinusIcon, MagnifyingGlassPlusIcon, MenuComponent, MenuContentComponent, MenuItemComponent, MenuTriggerDirective, MoonIcon, PaletteIcon, PaperclipIcon, PenToSquareIcon, PlusIcon, PopoverDirective, PresentationIcon, QuestionCircleIcon, RadioComponent, RobotIcon, SaveIcon, SearchBarComponent, SearchInputComponent, SelectComponent, SelectTriggerDirective, SendIcon, SheetBodyComponent, SheetComponent, SheetHeaderComponent, SidebarInsetDirective, SlashIcon, SlidersIcon, SparklesIcon, SpinnerIcon, SquareCheckIcon, SquareIcon, SquareMinusIcon, StarIcon, SunBrightIcon, SwitchComponent, SyncIcon, TabComponent, TabListComponent, TabPanelComponent, TabsComponent, TagComponent, TagIcon, TagInputComponent, TagsIcon, TextareaComponent, TextareaControlDirective, ThumbsDownIcon, ThumbsUpIcon, ToggleComponent, ToggleGroupComponent, ToggleItemComponent, ToggleLeftIcon, ToggleRightIcon, TooltipDirective, TrashCanIcon, TrashIcon, TreeComponent, TreeItemComponent, TreeItemExpanderComponent, TreeItemGroupComponent, TriangleAlertIcon, UndoIcon, UserIcon, UserSecretIcon, VideoIcon, XMarkIcon, createCallable, injectCallRef, isApplePlatform } from "@sinequa/galactik";
 import { withDevtools } from "@angular-architects/ngrx-toolkit";
 import { getState, patchState, signalStore, signalStoreFeature, withComputed, withMethods, withState } from "@ngrx/signals";
 import { ActivatedRoute, NavigationEnd, Router, RouterLink, RouterModule } from "@angular/router";
-import { Audit, AuditEventType, EngineType, addAuditAdditionalInfo, addConcepts, aggItemRegex, bisect, buildPathsAndLevels, createAtomicClient, createHeaders, debug, error, escapeExpr, expiresSoon, extraColumns, filter as filter$1, flattenLegacyFilterValues, getDefaultClient, getMetadata, getQueryParamsFromUrl, getRelativeDate, getToken, getUrlParamsFromQueryParams, globalConfig, info, isExpired, isExternalAuthMode, isJsonable, isNotInputEvent, isObject, notify, parseValueAndOperatorFromItem, queryParamsFromUrl, resolveBearerToken, resolveOAuthProvider, resolveSAMLProvider, resultPages, setToken, suggestionsToTreeAggregationNodes, sysLang, translateAggregationToDateOptions, warn } from "@sinequa/atomic";
+import { Audit, AuditEventType, EngineType, addAuditAdditionalInfo, addConcepts, aggItemRegex, bisect, buildPathsAndLevels, createAtomicClient, createHeaders, debug, error, escapeExpr, expiresSoon, extraColumns, filter as filter$1, flattenLegacyFilterValues, getDefaultClient, getMetadata, getQueryParamsFromUrl, getRelativeDate, getToken, getUrlParamsFromQueryParams, globalConfig, info, isExpired, isExternalAuthMode, isJsonable, isNotInputEvent, isObject, notify, parseValueAndOperatorFromItem, resolveBearerToken, resolveOAuthProvider, resolveSAMLProvider, resultPages, setToken, suggestionsToTreeAggregationNodes, sysLang, translateAggregationToDateOptions, warn } from "@sinequa/atomic";
 import { DomSanitizer, Title } from "@angular/platform-browser";
 import MarkdownIt from "markdown-it";
 import { DATE_PIPE_DEFAULT_OPTIONS, DATE_PIPE_DEFAULT_TIMEZONE, DatePipe, Location, NgComponentOutlet, NgStyle, NgTemplateOutlet } from "@angular/common";
@@ -296,8 +296,9 @@ function withAppFeatures() {
 				};
 			},
 			getQueryByName(name) {
+				if (!name) return void 0;
 				const queries = store.queries();
-				return Object.values(queries).find((query) => query.name.toLowerCase() === name.toLowerCase());
+				return Object.values(queries).find((query) => query.name?.toLowerCase() === name.toLowerCase());
 			},
 			getQueryByIndex(index) {
 				const queries = store.queries();
@@ -805,6 +806,9 @@ var QueryService = class QueryService {
 	result = signal({}, ...ngDevMode ? [{ debugName: "result" }] : /* istanbul ignore next */ []);
 	failure = computed(() => this.result().$error, ...ngDevMode ? [{ debugName: "failure" }] : /* istanbul ignore next */ []);
 	audit;
+	warnEmptySearch() {
+		firstValueFrom(this.transloco.selectTranslate("emptySearch", {}, "searches")).catch(() => "Please enter a search query.").then((message) => notify.warning(message));
+	}
 	search(q, includeQueryParams = true, audit) {
 		const $auditRecord = { auditEvents: [audit ?? this.audit ?? {
 			type: "Search_Text",
@@ -820,7 +824,7 @@ var QueryService = class QueryService {
 		if (!((this.queryParamsStore.filters?.() || []).length > 0) && !query.basket && query.action !== "open") {
 			if (this.appStore.allowEmptySearch(query?.name || "") === false && query?.text === "") {
 				warn("QueryService.search: Empty search query is not allowed. Returning empty result.");
-				notify.warning(this.transloco.translate("searches.emptySearch"));
+				this.warnEmptySearch();
 				const emptyResult = { records: [] };
 				this.result.set(emptyResult);
 				return of(emptyResult);
@@ -3243,11 +3247,13 @@ i0.ɵɵngDeclareClassMetadata({
 });
 var UserProfileService = class UserProfileService {
 	client = inject(ATOMIC_CLIENT);
+	injector = inject(Injector);
 	resources = /* @__PURE__ */ new WeakMap();
 	getUserProfile(userId) {
 		let resourceRef = this.resources.get(userId);
 		if (!resourceRef) {
 			resourceRef = resource({
+				injector: this.injector,
 				params: () => {
 					const id = userId();
 					return id ? { id } : void 0;
@@ -3426,17 +3432,61 @@ const QUERY_PARAMS_DEFAULTS = {
 	neuralSearch: void 0,
 	aggregation_overrides: void 0
 };
+function parseHref(href) {
+	let url;
+	try {
+		url = new URL(href, window.location.origin);
+	} catch {
+		return {
+			path: "",
+			params: new URLSearchParams()
+		};
+	}
+	if (url.hash.startsWith("#/")) {
+		const route = url.hash.slice(1);
+		const queryIndex = route.indexOf("?");
+		const path = queryIndex === -1 ? route : route.slice(0, queryIndex);
+		const search = queryIndex === -1 ? "" : route.slice(queryIndex + 1);
+		return {
+			path,
+			params: new URLSearchParams(search)
+		};
+	}
+	return {
+		path: "",
+		params: url.searchParams
+	};
+}
+function parseFilters(raw) {
+	if (!raw) return [];
+	const candidates = [raw];
+	try {
+		const decoded = decodeURIComponent(raw);
+		if (decoded !== raw) candidates.push(decoded);
+	} catch {}
+	for (const candidate of candidates) try {
+		const parsed = JSON.parse(candidate);
+		if (Array.isArray(parsed)) return parsed;
+	} catch {}
+	return [];
+}
 const QueryParamsStore = signalStore({ providedIn: "root" }, withDevtools("QueryParams"), withQueryParamsFeatures());
 function withQueryParamsFeatures() {
 	return signalStoreFeature(withState(QUERY_PARAMS_DEFAULTS), withMethods((store, injector = inject(Injector), router = inject(Router), route = inject(ActivatedRoute), appStore = inject(AppStore)) => ({
 		setFromUrl(href) {
 			if (!href) return;
-			const path = new URL(href, window.location.origin).hash.split("?")[0].replace(/^#/, "");
-			const { q: text, f, id, p, s: sort, c, t: tab, basket, n: name } = queryParamsFromUrl(href);
-			const filters = f ? JSON.parse(decodeURIComponent(f)) : [];
-			const spellingCorrectionMode = c;
-			let page;
-			if (p) page = parseInt(p, 10);
+			const { path, params } = parseHref(href);
+			const text = params.get("q") ?? "";
+			const filters = parseFilters(params.get("f"));
+			const id = params.get("id") ?? "";
+			const sort = params.get("s") ?? "";
+			const tab = params.get("t") ?? "";
+			const basket = params.get("b") ?? "";
+			const name = params.get("n") ?? "";
+			const spellingCorrectionMode = params.get("c") || void 0;
+			const p = params.get("p");
+			const parsedPage = p ? parseInt(p, 10) : NaN;
+			const page = Number.isNaN(parsedPage) ? void 0 : parsedPage;
 			patchState(store, (state) => {
 				return {
 					...state,
@@ -4934,14 +4984,15 @@ var LoadingComponent = class LoadingComponent {
 				clearTimeout(timeout);
 				setTimeout(() => {
 					const url = this.route.snapshot.queryParams["returnUrl"] || null;
-					if (!url) {
-						this.router.navigateByUrl(url);
+					if (url) {
 						this.queryParamsStore.setFromUrl(url);
+						this.router.navigateByUrl(url);
 					} else this.router.navigate(["/"]);
 				}, 700);
 			}
 		});
-		if (!this.client.auth.isAuthenticated()) {
+		if (this.client.auth.isAuthenticated()) this.application.updateReadyState(true);
+		else {
 			this.application.updateReadyState(false);
 			this.client.auth.login().then(() => {
 				this.application.updateReadyState(true);
@@ -7203,17 +7254,18 @@ var InfinityScrollDirective = class InfinityScrollDirective {
 		alias: "scroll-options"
 	});
 	onScroll = output();
-	observer = new IntersectionObserver(([entry]) => {
-		if (entry.isIntersecting) this.onScroll.emit();
-	}, this.options());
+	observer;
 	el = inject(ElementRef);
 	constructor() {
 		afterNextRender(() => {
+			this.observer = new IntersectionObserver(([entry]) => {
+				if (entry.isIntersecting) this.onScroll.emit();
+			}, this.options());
 			this.observer.observe(this.el.nativeElement);
 		});
 	}
 	ngOnDestroy() {
-		this.observer.disconnect();
+		this.observer?.disconnect();
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
@@ -18692,7 +18744,6 @@ var BookmarkButtonComponent = class BookmarkButtonComponent {
 	isBookmarked = computed(() => {
 		return this.userSettingsStore.isBookmarked(this.article());
 	}, ...ngDevMode ? [{ debugName: "isBookmarked" }] : /* istanbul ignore next */ []);
-	title = computed(() => this.transloco.translate("bookmarks.bookmarkDocument"), ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
 	async bookmark(e) {
 		e.stopPropagation();
 		const article = this.article();
@@ -18756,11 +18807,11 @@ var BookmarkButtonComponent = class BookmarkButtonComponent {
 			properties: { "class.visible": "isBookmarked()" },
 			classAttribute: "cursor-pointer"
 		},
-		providers: [provideTranslocoScope("bookmark")],
+		providers: [provideTranslocoScope("bookmarks")],
 		ngImport: i0,
 		template: `
   <button [variant]="variant()" [size]="size()" [iconOnly]="true"
-    [tooltip]="title()"
+    [tooltip]="'bookmarks.bookmarkDocument' | transloco"
     [attr.aria-pressed]="isBookmarked()"
     [attr.tabindex]="tabIndex()"
     (click)="bookmark($event)">
@@ -18770,7 +18821,7 @@ var BookmarkButtonComponent = class BookmarkButtonComponent {
     @else {
       <bookmark-icon />
     }
-    <span class="sr-only">{{ title() }}</span>
+    <span class="sr-only">{{ 'bookmarks.bookmarkDocument' | transloco }}</span>
   </button>
     `,
 		isInline: true,
@@ -18818,6 +18869,11 @@ var BookmarkButtonComponent = class BookmarkButtonComponent {
 					"tooltip-offset"
 				],
 				exportAs: ["tooltip"]
+			},
+			{
+				kind: "pipe",
+				type: TranslocoPipe,
+				name: "transloco"
 			}
 		]
 	});
@@ -18834,12 +18890,13 @@ i0.ɵɵngDeclareClassMetadata({
 			imports: [
 				BookmarkIcon,
 				ButtonComponent,
-				TooltipDirective
+				TooltipDirective,
+				TranslocoPipe
 			],
-			providers: [provideTranslocoScope("bookmark")],
+			providers: [provideTranslocoScope("bookmarks")],
 			template: `
   <button [variant]="variant()" [size]="size()" [iconOnly]="true"
-    [tooltip]="title()"
+    [tooltip]="'bookmarks.bookmarkDocument' | transloco"
     [attr.aria-pressed]="isBookmarked()"
     [attr.tabindex]="tabIndex()"
     (click)="bookmark($event)">
@@ -18849,7 +18906,7 @@ i0.ɵɵngDeclareClassMetadata({
     @else {
       <bookmark-icon />
     }
-    <span class="sr-only">{{ title() }}</span>
+    <span class="sr-only">{{ 'bookmarks.bookmarkDocument' | transloco }}</span>
   </button>
     `,
 			host: {
@@ -21890,7 +21947,7 @@ var DidYouMeanComponent = class DidYouMeanComponent {
       <p>
         <span class="me-1">{{ 'didYouMean.didYouMean' | transloco }}</span>
         <a class="text-(--font-primary-base) hover:underline cursor-pointer" role="button" (click)="selectCorrected()">{{ correction() }}</a>
-        <span>?</span>
+        <span>{{ 'didYouMean.didYouMeanSuffix' | transloco }}</span>
       </p>
     }
     @case ('correction') {
@@ -21940,7 +21997,7 @@ i0.ɵɵngDeclareClassMetadata({
       <p>
         <span class="me-1">{{ 'didYouMean.didYouMean' | transloco }}</span>
         <a class="text-(--font-primary-base) hover:underline cursor-pointer" role="button" (click)="selectCorrected()">{{ correction() }}</a>
-        <span>?</span>
+        <span>{{ 'didYouMean.didYouMeanSuffix' | transloco }}</span>
       </p>
     }
     @case ('correction') {
@@ -31619,6 +31676,36 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}] }
 });
+const isPlainObject = (value) => value !== null && typeof value === "object" && !Array.isArray(value);
+const LEAF_SEPARATOR = " › ";
+function flattenLeaves(source, prefix = []) {
+	return Object.entries(source).flatMap(([name, value]) => isPlainObject(value) ? flattenLeaves(value, [...prefix, name]) : [{
+		path: [...prefix, name],
+		value
+	}]);
+}
+function valueAtPath(source, path) {
+	return path.reduce((node, name) => isPlainObject(node) ? node[name] : void 0, source);
+}
+const toFieldText = (value) => {
+	if (value === void 0 || value === null) return "";
+	return Array.isArray(value) ? JSON.stringify(value) : String(value);
+};
+function normalizeCustomData(entries) {
+	const properties = /* @__PURE__ */ new Map();
+	const add = (key, value) => {
+		if (!key || properties.has(key)) return;
+		properties.set(key, value === void 0 || value === null ? { key } : {
+			key,
+			defaultValue: value
+		});
+	};
+	for (const entry of Array.isArray(entries) ? entries : []) if (typeof entry === "string") add(entry);
+	else if (entry && typeof entry === "object" && !Array.isArray(entry)) Object.entries(entry).forEach(([key, value]) => add(key, value));
+	else console.warn("[user-profile] customData: entry ignored, expected a string or an object.", entry);
+	return [...properties.values()];
+}
+const SAVED_FLASH_MS = 3e3;
 const sameKeys = (a, b) => a.length === b.length && a.every((key, index) => key === b[index]);
 const userProfileSchema = (editing) => schema((p) => {
 	applyEach(p.data, (field) => readonly(field, { when: ({ key }) => `data.${key()}` !== editing() }));
@@ -31632,9 +31719,13 @@ var UserProfileFormComponent = class UserProfileFormComponent {
 	transloco = inject(TranslocoService);
 	injector = inject(Injector);
 	document = inject(DOCUMENT);
+	destroyRef = inject(DestroyRef);
 	labelClass = FORM_LABEL_CLASS;
 	errorClass = FORM_ERROR_CLASS;
+	chipClass = "inline-flex items-center rounded-(--radius-rounded) bg-(--bg-accent-base-alt) px-(--spacing-2xs) text-(length:--size-sm) font-medium text-(--font-accent-base)";
 	statusMessage = signal("", ...ngDevMode ? [{ debugName: "statusMessage" }] : /* istanbul ignore next */ []);
+	savedProperty = signal(void 0, ...ngDevMode ? [{ debugName: "savedProperty" }] : /* istanbul ignore next */ []);
+	savedTimer;
 	dataKeys = [
 		"fullName",
 		"mail",
@@ -31657,10 +31748,29 @@ var UserProfileFormComponent = class UserProfileFormComponent {
 		equal: sameKeys
 	});
 	allowProfilePhoto = computed(() => this.keys().some((key) => key === "profilePhoto"), ...ngDevMode ? [{ debugName: "allowProfilePhoto" }] : /* istanbul ignore next */ []);
-	customData = computed(() => (this.appStore.general()?.features?.userProfile?.customData || []).filter((key) => !this.keys().some((k) => k.toLowerCase() === key.toLowerCase())), {
+	customDataConfig = computed(() => normalizeCustomData(this.appStore.general()?.features?.userProfile?.customData).filter(({ key }) => !this.keys().some((k) => k.toLowerCase() === key.toLowerCase())), ...ngDevMode ? [{ debugName: "customDataConfig" }] : /* istanbul ignore next */ []);
+	customRows = computed(() => {
+		const stored = this.user()?.customData;
+		return this.customDataConfig().flatMap(({ key, defaultValue }) => {
+			const shape = isPlainObject(defaultValue) ? defaultValue : isPlainObject(stored?.[key]) ? stored[key] : void 0;
+			if (!shape) return [{
+				key,
+				root: key,
+				defaultValue
+			}];
+			return flattenLeaves(shape).map(({ path, value }) => ({
+				key: [key, ...path].join(LEAF_SEPARATOR),
+				root: key,
+				path: [key, ...path],
+				defaultValue: isPlainObject(defaultValue) ? value : void 0
+			}));
+		});
+	}, ...ngDevMode ? [{ debugName: "customRows" }] : /* istanbul ignore next */ []);
+	customData = computed(() => this.customRows().map(({ key }) => key), {
 		...ngDevMode ? { debugName: "customData" } : /* istanbul ignore next */ {},
 		equal: sameKeys
 	});
+	customRowIndex = computed(() => new Map(this.customRows().map((row) => [row.key, row])), ...ngDevMode ? [{ debugName: "customRowIndex" }] : /* istanbul ignore next */ []);
 	properties = computed(() => [...this.formKeys().map((key) => ({
 		category: "data",
 		key,
@@ -31670,6 +31780,13 @@ var UserProfileFormComponent = class UserProfileFormComponent {
 		key,
 		translated: false
 	}))], ...ngDevMode ? [{ debugName: "properties" }] : /* istanbul ignore next */ []);
+	sections = computed(() => {
+		const rows = this.properties();
+		return ["data", "customData"].map((category) => ({
+			id: category === "data" ? "information" : "preferences",
+			rows: rows.filter((row) => row.category === category)
+		})).filter((section) => section.rows.length > 0);
+	}, ...ngDevMode ? [{ debugName: "sections" }] : /* istanbul ignore next */ []);
 	initials = computed(() => this.principalStore.initials(), ...ngDevMode ? [{ debugName: "initials" }] : /* istanbul ignore next */ []);
 	username = computed(() => this.principalStore.name() || this.principalStore.email() || null, ...ngDevMode ? [{ debugName: "username" }] : /* istanbul ignore next */ []);
 	propertyToEdit = signal(void 0, ...ngDevMode ? [{ debugName: "propertyToEdit" }] : /* istanbul ignore next */ []);
@@ -31695,7 +31812,7 @@ var UserProfileFormComponent = class UserProfileFormComponent {
 		const profile = this.user();
 		return {
 			data: toRecord(this.formKeys(), profile?.data),
-			customData: toRecord(this.customData(), profile?.customData)
+			customData: Object.fromEntries(this.customData().map((key) => [key, toFieldText(this.effectiveValue("customData", key))]))
 		};
 	}, ...ngDevMode ? [{ debugName: "profileModel" }] : /* istanbul ignore next */ []);
 	profileForm = form(this.profileModel, userProfileSchema(this.propertyToEdit), {
@@ -31706,6 +31823,7 @@ var UserProfileFormComponent = class UserProfileFormComponent {
 		effect(() => {
 			if (this.userProfileResource.error()?.status === 404) this.createUserProfile();
 		});
+		this.destroyRef.onDestroy(() => clearTimeout(this.savedTimer));
 	}
 	fieldId(category, key) {
 		return `user-profile-${category}-${key.replace(/[^\w-]+/g, "-")}`;
@@ -31734,6 +31852,33 @@ var UserProfileFormComponent = class UserProfileFormComponent {
 	getDataValue(category, key) {
 		return this.user()?.[category]?.[key];
 	}
+	defaultValue(category, key) {
+		return category === "customData" ? this.customRowIndex().get(key)?.defaultValue : void 0;
+	}
+	isLeaf(category, key) {
+		return category === "customData" && this.customRowIndex().get(key)?.path !== void 0;
+	}
+	storedValue(category, key) {
+		const bucket = this.user()?.[category];
+		const path = category === "customData" ? this.customRowIndex().get(key)?.path : void 0;
+		return path ? valueAtPath(bucket, path) : bucket?.[key];
+	}
+	isBoolean(category, key) {
+		return !this.isLeaf(category, key) && typeof this.effectiveValue(category, key) === "boolean";
+	}
+	booleanValue(category, key) {
+		return this.effectiveValue(category, key) === true;
+	}
+	isReadOnlyValue(category, key) {
+		return Array.isArray(this.effectiveValue(category, key));
+	}
+	arrayTags(category, key) {
+		const value = this.effectiveValue(category, key);
+		return [...new Set((Array.isArray(value) ? value : []).map((item) => typeof item === "string" ? item : JSON.stringify(item)))];
+	}
+	effectiveValue(category, key) {
+		return this.storedValue(category, key) ?? this.defaultValue(category, key);
+	}
 	onEdit(category, key) {
 		this.propertyToEdit.set(`${category}.${key}`);
 		this.fieldFor(category, key)?.().focusBoundControl();
@@ -31743,19 +31888,43 @@ var UserProfileFormComponent = class UserProfileFormComponent {
 		const field = event.target;
 		field.setSelectionRange(field.value.length, field.value.length);
 	}
+	onEscape(event, category, key) {
+		if (!this.isEditing(category, key)) return;
+		event.preventDefault();
+		event.stopPropagation();
+		this.onCancelEdit(category, key);
+	}
 	onCancelEdit(category, key) {
 		if (!this.isEditing(category, key)) return;
 		const state = this.fieldFor(category, key)?.();
-		state?.value.set(this.getDataValue(category, key) ?? "");
+		state?.value.set(toFieldText(this.effectiveValue(category, key)));
 		state?.reset();
 		this.leaveEditMode(category, key);
 		this.announce("editCancelled", category, key);
 	}
-	propertyLabel(category, key) {
-		return category === "data" ? this.transloco.translate(`userProfile.data.${key}`) : key;
+	labelFor(category, key) {
+		if (category === "data") return this.transloco.translate(`userProfile.data.${key}`);
+		const leafPath = this.customRowIndex().get(key)?.path;
+		if (leafPath) return [this.labelFor(category, leafPath[0]), ...leafPath.slice(1)].join(LEAF_SEPARATOR);
+		const path = `userProfile.customData.${key}`;
+		const translated = this.transloco.translate(path);
+		return translated && translated !== path ? translated : key;
+	}
+	isDefault(category, key) {
+		const stored = this.storedValue(category, key);
+		return (stored === void 0 || stored === null) && this.defaultValue(category, key) !== void 0;
+	}
+	isSaved(category, key) {
+		return this.savedProperty() === `${category}.${key}`;
+	}
+	flashSaved(category, key) {
+		this.savedProperty.set(`${category}.${key}`);
+		clearTimeout(this.savedTimer);
+		this.savedTimer = setTimeout(() => this.savedProperty.set(void 0), SAVED_FLASH_MS);
 	}
 	announce(kind, category, key) {
-		this.statusMessage.set(this.transloco.translate(`userProfile.status.${kind}`, { property: this.propertyLabel(category, key) }));
+		this.statusMessage.set(this.transloco.translate(`userProfile.status.${kind}`, { property: this.labelFor(category, key) }));
+		if (kind === "saved") this.flashSaved(category, key);
 	}
 	leaveEditMode(category, key) {
 		this.propertyToEdit.set(void 0);
@@ -31789,6 +31958,7 @@ var UserProfileFormComponent = class UserProfileFormComponent {
 		}
 	}
 	async onDeleteData(category, key) {
+		if (!this.hasStoredValue(category, key)) return;
 		try {
 			const response = await this.client.api.userProfile.deleteProperty(this.user(), category, key);
 			if (!response) {
@@ -31796,14 +31966,46 @@ var UserProfileFormComponent = class UserProfileFormComponent {
 				return;
 			}
 			info("Deleted user profile property", response);
-			const userProfile = JSON.parse(JSON.stringify(this.user()));
-			userProfile[category][key] = "";
-			this.userProfileResource.set(userProfile);
-			this.announce("deleted", category, key);
+			this.forgetProperty(category, key);
 		} catch (err) {
+			if (err?.status === 404) {
+				info("User profile property already absent", {
+					category,
+					key
+				});
+				this.forgetProperty(category, key);
+				return;
+			}
 			notify.error(err.message);
 		}
 	}
+	hasStoredValue(category, key) {
+		const stored = this.storedValue(category, key);
+		return stored !== void 0 && stored !== null;
+	}
+	forgetProperty(category, key) {
+		const userProfile = JSON.parse(JSON.stringify(this.user()));
+		if (this.defaultValue(category, key) === void 0) userProfile[category][key] = "";
+		else delete userProfile[category][key];
+		this.userProfileResource.set(userProfile);
+		this.announce("deleted", category, key);
+	}
+	async onToggleBoolean(category, key, checked, toggle) {
+		const previous = this.user();
+		if (!previous || this.booleanValue(category, key) === checked) return;
+		this.userProfileResource.set({
+			...previous,
+			[category]: {
+				...previous[category],
+				[key]: checked
+			}
+		});
+		if (await this.patchProperty(category, key, checked)) this.announce("saved", category, key);
+		else {
+			this.userProfileResource.set(previous);
+			toggle.checked.set(!checked);
+		}
+	}
 	async patchProperty(category, key, value) {
 		const userProfile = JSON.parse(JSON.stringify(this.user()));
 		userProfile[category] = {
@@ -31857,7 +32059,7 @@ var UserProfileFormComponent = class UserProfileFormComponent {
 		host: { classAttribute: "flex flex-col h-full overflow-hidden" },
 		providers: [provideTranslocoScope("user-profile", "login")],
 		ngImport: i0,
-		template: "@if (userProfileResource.hasValue()) {\n  @let profile = user();\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        @let profilePhoto = profile?.data?.profilePhoto;\n        <!-- AVATAR — a real <button>: the avatar opens the file picker, so it has to be reachable and\n             activatable with the keyboard, which a click handler on a <div> never is. -->\n        <button\n          type=\"button\"\n          variant=\"none\"\n          class=\"cursor-pointer rounded-full\"\n          [title]=\"'userProfile.changePhoto' | transloco\"\n          [attr.aria-label]=\"'userProfile.changePhoto' | transloco\"\n          (click)=\"avatarInput.click()\">\n          <Avatar fill=\"secondary\" class=\"size-14\">\n            @if (profilePhoto) {\n              <!-- alt=\"\": the button already carries the accessible name, the image would repeat it. -->\n              <AvatarImage [src]=\"profilePhoto\" width=\"44\" height=\"44\" alt=\"\" />\n            }\n            <AvatarFallback class=\"size-full text-lg\">\n              @if (initials()) {\n                <span>{{ initials() }}</span>\n              } @else {\n                <UserIcon class=\"size-7\" />\n              }\n            </AvatarFallback>\n          </Avatar>\n        </button>\n        @if (profilePhoto) {\n          <button\n            type=\"button\"\n            variant=\"tertiary\"\n            [iconOnly]=\"true\"\n            class=\"text-destructive cursor-pointer\"\n            [title]=\"'userProfile.deleteProperty' | transloco\"\n            [attr.aria-label]=\"\n              'userProfile.deletePropertyNamed'\n                | transloco\n                  : { property: 'userProfile.data.profilePhoto' | transloco }\n            \"\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        <!-- CHANGE PASSWORD -->\n        @if (allowChangePassword()) {\n          <button\n            type=\"button\"\n            [disabled]=\"changingPassword()\"\n            (click)=\"changingPassword.set(true)\">\n            {{ \"login.changePassword\" | transloco }}\n          </button>\n        }\n      </div>\n    </div>\n    @if (changingPassword()) {\n      <!-- ChangePassword renders its own <form [formRoot]>: it stays in this branch, mutually\n           exclusive with the profile form below, so the two never nest. -->\n      <ChangePassword\n        [username]=\"username()\"\n        [redirectAfterSuccess]=\"false\"\n        [redirectAfterCancel]=\"false\"\n        (cancel)=\"changingPassword.set(false)\"\n        (success)=\"changingPassword.set(false)\" />\n    } @else {\n      <!-- p: the focus outline of the fields is drawn *outside* their box, and this is the\n           scrolling ancestor — without a gutter it clips the ring on every edge it touches\n           (left for all of them, bottom for the last one, top for the first). -->\n      <div class=\"min-h-0 flex-1 overflow-auto p-(--spacing-3xs)\">\n        <!--\n          [formRoot] pose novalidate, intercepte submit et appelle preventDefault() avant de déclencher\n          submit() sur le field tree. Un seul bouton type=\"submit\" est rendu à la fois — celui de la\n          ligne en cours d'édition — et l'action de soumission persiste cette seule propriété.\n        -->\n        <!-- aria-label: a <form> with no accessible name is not exposed as a form landmark, so the\n             fields could not be reached as a whole. aria-busy holds the announcement back while a\n             property is being persisted. -->\n        <form\n          [formRoot]=\"profileForm\"\n          [attr.aria-label]=\"'userProfile.profileFields' | transloco\"\n          [attr.aria-busy]=\"profileForm().submitting() ? 'true' : null\">\n          @for (\n            property of properties();\n            track property.category + \".\" + property.key\n          ) {\n            @let category = property.category;\n            @let key = property.key;\n            @let field = profileForm[category][key];\n            @let label =\n              property.translated\n                ? (\"userProfile.data.\" + key | transloco)\n                : key;\n            @let editing = isEditing(category, key);\n            @let invalid = showError(field);\n            <!-- role=\"group\" named by the label: without it the four action buttons of a row are\n                 announced out of context, as a flat run of \"Edit …\" / \"Delete …\" with nothing tying\n                 them to the property they belong to. -->\n            <div\n              role=\"group\"\n              [attr.aria-labelledby]=\"labelId(category, key)\"\n              class=\"flex flex-col gap-(--spacing-3xs)\">\n              <label\n                [id]=\"labelId(category, key)\"\n                [for]=\"fieldId(category, key)\"\n                [class]=\"labelClass\"\n                >{{ label }}</label\n              >\n              <div class=\"group flex flex-row\">\n                <div class=\"min-w-0 grow\">\n                  <textarea-group\n                    resize=\"auto\"\n                    [maxRows]=\"3\"\n                    [scheme]=\"invalid ? 'error' : 'default'\">\n                    <!-- No [attr.readonly] here: [formField] writes the readonly attribute itself from\n                         the field state, which the schema's readonly() rule drives. The native\n                         readonly attribute is what exposes aria-readonly — do not duplicate it. -->\n                    <textarea\n                      textarea-control\n                      rows=\"1\"\n                      [id]=\"fieldId(category, key)\"\n                      [formField]=\"field\"\n                      [attr.placeholder]=\"'userProfile.notDefined' | transloco\"\n                      [attr.aria-invalid]=\"invalid ? 'true' : null\"\n                      [attr.aria-describedby]=\"\n                        invalid ? errorId(category, key) : null\n                      \"\n                      [attr.aria-keyshortcuts]=\"editing ? 'Escape' : null\"\n                      (focus)=\"onFieldFocus($event)\"\n                      (keydown.escape)=\"onCancelEdit(category, key)\"></textarea>\n                  </textarea-group>\n                </div>\n                <!-- group-focus-within, and not only group-hover: `invisible` takes the buttons out of\n                     the tab order, so without it editing or deleting a property is unreachable with a\n                     keyboard. Focusing the field of the row reveals its actions. -->\n                @if (editing) {\n                  <button\n                    type=\"submit\"\n                    variant=\"tertiary\"\n                    [iconOnly]=\"true\"\n                    class=\"visible mx-2 cursor-pointer sm:invisible sm:group-focus-within:visible sm:group-hover:visible\"\n                    [disabled]=\"profileForm().submitting()\"\n                    [title]=\"'userProfile.saveProperty' | transloco\"\n                    [attr.aria-label]=\"\n                      'userProfile.savePropertyNamed'\n                        | transloco: { property: label }\n                    \">\n                    <save-icon />\n                  </button>\n                  <button\n                    type=\"button\"\n                    variant=\"tertiary\"\n                    [iconOnly]=\"true\"\n                    class=\"visible cursor-pointer sm:invisible sm:group-focus-within:visible sm:group-hover:visible\"\n                    [title]=\"'userProfile.cancelEdit' | transloco\"\n                    [attr.aria-label]=\"\n                      'userProfile.cancelEditNamed'\n                        | transloco: { property: label }\n                    \"\n                    (click)=\"onCancelEdit(category, key)\">\n                    <UndoIcon />\n                  </button>\n                } @else {\n                  <button\n                    type=\"button\"\n                    variant=\"tertiary\"\n                    [iconOnly]=\"true\"\n                    [id]=\"editButtonId(category, key)\"\n                    class=\"visible mx-2 cursor-pointer sm:invisible sm:group-focus-within:visible sm:group-hover:visible\"\n                    [title]=\"'userProfile.editProperty' | transloco\"\n                    [attr.aria-label]=\"\n                      'userProfile.editPropertyNamed'\n                        | transloco: { property: label }\n                    \"\n                    (click)=\"onEdit(category, key)\">\n                    <EditIcon />\n                  </button>\n                  <button\n                    type=\"button\"\n                    variant=\"tertiary\"\n                    [iconOnly]=\"true\"\n                    class=\"text-destructive visible cursor-pointer sm:invisible sm:group-focus-within:visible sm:group-hover:visible\"\n                    [title]=\"'userProfile.deleteProperty' | transloco\"\n                    [attr.aria-label]=\"\n                      'userProfile.deletePropertyNamed'\n                        | transloco: { property: label }\n                    \"\n                    (click)=\"onDeleteData(category, key)\">\n                    <TrashIcon />\n                  </button>\n                }\n              </div>\n              @if (invalid) {\n                <p\n                  [id]=\"errorId(category, key)\"\n                  role=\"alert\"\n                  [class]=\"errorClass\">\n                  {{ errorKey(field) | transloco }}\n                </p>\n              }\n            </div>\n          }\n        </form>\n        <!-- Always in the DOM, and only its text changes: a live region inserted at the same time as\n             its content is not reliably announced. `sr-only` — the transitions it describes are\n             already visible on screen. -->\n        <p class=\"sr-only\" role=\"status\" aria-live=\"polite\">\n          {{ statusMessage() }}\n        </p>\n      </div>\n    }\n  </div>\n} @else if (userProfileResource.isLoading()) {\n  <p role=\"status\">{{ \"userProfile.loading\" | transloco }}</p>\n} @else if (userProfileResource.error()) {\n  <p role=\"alert\">{{ \"userProfile.loadError\" | transloco }}</p>\n}\n\n<!-- AVATAR UPLOAD — `hidden` keeps it out of both the tab order and the accessibility tree, which is\n     intended: it is opened by the avatar button above. It also sits outside the <form>. -->\n<input\n  #avatarInput\n  class=\"hidden\"\n  type=\"file\"\n  accept=\"image/*\"\n  (change)=\"uploadAvatar($event)\" />\n",
+		template: "@if (userProfileResource.hasValue()) {\n  @let profile = user();\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        @let profilePhoto = profile?.data?.profilePhoto;\n        <!-- AVATAR — a real <button>: the avatar opens the file picker, so it has to be reachable and\n             activatable with the keyboard, which a click handler on a <div> never is. -->\n        <button\n          type=\"button\"\n          variant=\"none\"\n          class=\"cursor-pointer rounded-full\"\n          [title]=\"'userProfile.changePhoto' | transloco\"\n          [attr.aria-label]=\"'userProfile.changePhoto' | transloco\"\n          (click)=\"avatarInput.click()\">\n          <Avatar fill=\"secondary\" class=\"size-14\">\n            @if (profilePhoto) {\n              <!-- alt=\"\": the button already carries the accessible name, the image would repeat it. -->\n              <AvatarImage [src]=\"profilePhoto\" width=\"44\" height=\"44\" alt=\"\" />\n            }\n            <AvatarFallback class=\"size-full text-lg\">\n              @if (initials()) {\n                <span>{{ initials() }}</span>\n              } @else {\n                <UserIcon class=\"size-7\" />\n              }\n            </AvatarFallback>\n          </Avatar>\n        </button>\n        @if (profilePhoto) {\n          <button\n            type=\"button\"\n            variant=\"tertiary\"\n            [iconOnly]=\"true\"\n            class=\"text-destructive cursor-pointer\"\n            [title]=\"'userProfile.deleteProperty' | transloco\"\n            [attr.aria-label]=\"\n              'userProfile.deletePropertyNamed'\n                | transloco\n                  : { property: 'userProfile.data.profilePhoto' | transloco }\n            \"\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        <!-- CHANGE PASSWORD -->\n        @if (allowChangePassword()) {\n          <button\n            type=\"button\"\n            [disabled]=\"changingPassword()\"\n            (click)=\"changingPassword.set(true)\">\n            {{ \"login.changePassword\" | transloco }}\n          </button>\n        }\n      </div>\n    </div>\n    @if (changingPassword()) {\n      <!-- ChangePassword renders its own <form [formRoot]>: it stays in this branch, mutually\n           exclusive with the profile form below, so the two never nest. -->\n      <ChangePassword\n        [username]=\"username()\"\n        [redirectAfterSuccess]=\"false\"\n        [redirectAfterCancel]=\"false\"\n        (cancel)=\"changingPassword.set(false)\"\n        (success)=\"changingPassword.set(false)\" />\n    } @else {\n      <!-- p: the focus outline of the fields is drawn *outside* their box, and this is the\n           scrolling ancestor — without a gutter it clips the ring on every edge it touches\n           (left for all of them, bottom for the last one, top for the first). -->\n      <div class=\"min-h-0 flex-1 overflow-auto p-(--spacing-3xs)\">\n        <!--\n          [formRoot] pose novalidate, intercepte submit et appelle preventDefault() avant de déclencher\n          submit() sur le field tree. Un seul bouton type=\"submit\" est rendu à la fois — celui de la\n          ligne en cours d'édition — et l'action de soumission persiste cette seule propriété.\n        -->\n        <!-- aria-label: a <form> with no accessible name is not exposed as a form landmark, so the\n             fields could not be reached as a whole. aria-busy holds the announcement back while a\n             property is being persisted. -->\n        <form\n          class=\"@container\"\n          [formRoot]=\"profileForm\"\n          [attr.aria-label]=\"'userProfile.profileFields' | transloco\"\n          [attr.aria-busy]=\"profileForm().submitting() ? 'true' : null\">\n          @for (section of sections(); track section.id) {\n            <section\n              [attr.aria-labelledby]=\"'user-profile-section-' + section.id\"\n              class=\"mb-(--spacing-md) flex flex-col gap-(--spacing-sm) rounded-(--radius-lg) border border-solid border-(--stroke-primary-lighter) p-(--spacing-md)\">\n              <div>\n                <h3\n                  [id]=\"'user-profile-section-' + section.id\"\n                  class=\"m-0 text-(length:--size-base) font-semibold\">\n                  {{ \"userProfile.sections.\" + section.id | transloco }}\n                </h3>\n                <p\n                  class=\"m-0 text-(length:--size-sm) text-(--font-neutral-muted)\">\n                  {{\n                    \"userProfile.sections.\" + section.id + \"Hint\" | transloco\n                  }}\n                </p>\n              </div>\n              <div\n                class=\"grid grid-cols-1 gap-x-(--spacing-md) gap-y-(--spacing-sm) @lg:grid-cols-2\">\n                @for (\n                  property of section.rows;\n                  track property.category + \".\" + property.key\n                ) {\n                  @let category = property.category;\n                  @let key = property.key;\n                  @let field = profileForm[category][key];\n                  @let label = labelFor(category, key);\n                  @let editing = isEditing(category, key);\n                  @let invalid = showError(field);\n                  @let boolean = isBoolean(category, key);\n                  @let readOnlyValue = isReadOnlyValue(category, key);\n                  @let leaf = isLeaf(category, key);\n                  @let saved = isSaved(category, key);\n                  <!-- role=\"group\" named by the label: without it the action buttons of a row are\n                       announced out of context, as a flat run of \"Edit …\" / \"Delete …\" with nothing tying\n                       them to the property they belong to. A switch, and a value shown but not edited,\n                       take the whole width of the grid: they are not a field to line up with another. -->\n                  <div\n                    role=\"group\"\n                    [attr.aria-labelledby]=\"labelId(category, key)\"\n                    class=\"flex min-w-0 flex-col gap-(--spacing-3xs)\"\n                    [class.col-span-full]=\"boolean || readOnlyValue\">\n                    @if (boolean) {\n                      <!-- A switch is not a labelable text field: the name goes through aria-labelledby. The\n                           value is saved as soon as it is flipped, so there is no edit mode. -->\n                      <div\n                        class=\"flex flex-row items-center gap-(--spacing-sm) rounded-(--radius-md) border border-solid border-(--stroke-primary-lighter) px-(--spacing-md) py-(--spacing-xs)\">\n                        <span\n                          [id]=\"labelId(category, key)\"\n                          class=\"grow\"\n                          [class]=\"labelClass\"\n                          >{{ label }}</span\n                        >\n                        @if (saved) {\n                          <span\n                            class=\"flex items-center gap-(--spacing-3xs) text-(length:--size-sm) text-(--font-success-base)\">\n                            <CircleCheckIcon aria-hidden=\"true\" />\n                            {{ \"userProfile.saved\" | transloco }}\n                          </span>\n                        } @else if (isDefault(category, key)) {\n                          <span [class]=\"chipClass\">{{\n                            \"userProfile.defaultValue\" | transloco\n                          }}</span>\n                        }\n                        <switch\n                          #toggle\n                          [checked]=\"booleanValue(category, key)\"\n                          [disabled]=\"profileForm().submitting()\"\n                          [aria-labelledby]=\"labelId(category, key)\"\n                          (checkedChange)=\"\n                            onToggleBoolean(category, key, $event, toggle)\n                          \" />\n                        <button\n                          type=\"button\"\n                          variant=\"tertiary\"\n                          [iconOnly]=\"true\"\n                          class=\"text-destructive cursor-pointer\"\n                          [title]=\"'userProfile.deleteProperty' | transloco\"\n                          [attr.aria-label]=\"\n                            'userProfile.deletePropertyNamed'\n                              | transloco: { property: label }\n                          \"\n                          [disabled]=\"!hasStoredValue(category, key)\"\n                          (click)=\"onDeleteData(category, key)\">\n                          <TrashIcon />\n                        </button>\n                      </div>\n                    } @else if (readOnlyValue) {\n                      <!-- An array is shown, never edited: its shape is the administrator's. A galactik\n                           TagInput in read-only mode, which is what it is for; its inner text field is named\n                           after the property, as there is no <label for> to reach it. -->\n                      <span\n                        [id]=\"labelId(category, key)\"\n                        [class]=\"labelClass\"\n                        >{{ label }}</span\n                      >\n                      <tag-input\n                        class=\"[&_tag-remove]:hidden\"\n                        [value]=\"arrayTags(category, key)\"\n                        [readonly]=\"true\"\n                        [aria-label]=\"label\"\n                        [addLabel]=\"label\" />\n                    } @else {\n                      <label\n                        [id]=\"labelId(category, key)\"\n                        [for]=\"fieldId(category, key)\"\n                        [class]=\"labelClass\"\n                        >{{ label }}</label\n                      >\n                      <!-- The actions sit inside the box: galactik styles it from the control with has-[]\n                           selectors, which match descendants, so the focus ring and the read-only look\n                           keep working with the buttons next to the input. At rest the box is tinted,\n                           which is what tells a field from its label; it is white while edited. -->\n                      <!-- scheme: galactik colours the field itself for an error and for a save that just\n                           went through. The tint of a read-only field must not hide the success one, hence\n                           the data attribute and its more specific variant. -->\n                      <input-group\n                        class=\"has-[[readonly]]:bg-(--bg-primary-lighter) data-[state=success]:has-[[readonly]]:bg-(--bg-success-base-alt)\"\n                        [attr.data-state]=\"saved ? 'success' : null\"\n                        [scheme]=\"\n                          invalid ? 'error' : saved ? 'success' : 'default'\n                        \">\n                        <!-- No [attr.readonly] here: [formField] writes the readonly attribute itself from\n                             the field state, which the schema's readonly() rule drives. The native\n                             readonly attribute is what exposes aria-readonly — do not duplicate it. -->\n                        <input\n                          input-control\n                          type=\"text\"\n                          [id]=\"fieldId(category, key)\"\n                          [formField]=\"field\"\n                          [attr.placeholder]=\"\n                            'userProfile.notDefined' | transloco\n                          \"\n                          [attr.aria-invalid]=\"invalid ? 'true' : null\"\n                          [attr.aria-describedby]=\"\n                            invalid ? errorId(category, key) : null\n                          \"\n                          [attr.aria-keyshortcuts]=\"editing ? 'Escape' : null\"\n                          (focus)=\"onFieldFocus($event)\"\n                          (keydown.escape)=\"onEscape($event, category, key)\" />\n                        <!-- Always visible: hiding them until hover made them unreachable on a touch screen\n                             and left nothing to discover. -->\n                        @if (!leaf) {\n                          <div class=\"flex shrink-0 flex-row items-center\">\n                            @if (editing) {\n                              <button\n                                type=\"submit\"\n                                variant=\"primary\"\n                                size=\"sm\"\n                                [iconOnly]=\"true\"\n                                class=\"cursor-pointer\"\n                                [disabled]=\"profileForm().submitting()\"\n                                [title]=\"'userProfile.saveProperty' | transloco\"\n                                [attr.aria-label]=\"\n                                  'userProfile.savePropertyNamed'\n                                    | transloco: { property: label }\n                                \">\n                                <save-icon />\n                              </button>\n                              <button\n                                type=\"button\"\n                                variant=\"tertiary\"\n                                size=\"sm\"\n                                [iconOnly]=\"true\"\n                                class=\"cursor-pointer\"\n                                [title]=\"'userProfile.cancelEdit' | transloco\"\n                                [attr.aria-label]=\"\n                                  'userProfile.cancelEditNamed'\n                                    | transloco: { property: label }\n                                \"\n                                (click)=\"onCancelEdit(category, key)\">\n                                <UndoIcon />\n                              </button>\n                            } @else {\n                              <button\n                                type=\"button\"\n                                variant=\"tertiary\"\n                                size=\"sm\"\n                                [iconOnly]=\"true\"\n                                [id]=\"editButtonId(category, key)\"\n                                class=\"cursor-pointer\"\n                                [title]=\"'userProfile.editProperty' | transloco\"\n                                [attr.aria-label]=\"\n                                  'userProfile.editPropertyNamed'\n                                    | transloco: { property: label }\n                                \"\n                                (click)=\"onEdit(category, key)\">\n                                <EditIcon />\n                              </button>\n                              <button\n                                type=\"button\"\n                                variant=\"tertiary\"\n                                size=\"sm\"\n                                [iconOnly]=\"true\"\n                                class=\"text-destructive cursor-pointer\"\n                                [title]=\"\n                                  'userProfile.deleteProperty' | transloco\n                                \"\n                                [attr.aria-label]=\"\n                                  'userProfile.deletePropertyNamed'\n                                    | transloco: { property: label }\n                                \"\n                                [disabled]=\"!hasStoredValue(category, key)\"\n                                (click)=\"onDeleteData(category, key)\">\n                                <TrashIcon />\n                              </button>\n                            }\n                          </div>\n                        }\n                      </input-group>\n                    }\n                    <!-- Under the field, one message at a time: the error first, then the confirmation of a\n                         save, then what is worth knowing about the value. -->\n                    @if (invalid) {\n                      <p\n                        [id]=\"errorId(category, key)\"\n                        role=\"alert\"\n                        [class]=\"errorClass\">\n                        {{ errorKey(field) | transloco }}\n                      </p>\n                    } @else if (!boolean) {\n                      @if (saved) {\n                        <p\n                          class=\"m-0 flex items-center gap-(--spacing-3xs) text-(length:--size-sm) text-(--font-success-base)\">\n                          <CircleCheckIcon aria-hidden=\"true\" />\n                          {{ \"userProfile.saved\" | transloco }}\n                        </p>\n                      } @else if (readOnlyValue || leaf) {\n                        <p\n                          class=\"m-0 flex items-center gap-(--spacing-3xs) text-(length:--size-sm) text-(--font-neutral-muted)\">\n                          <LockIcon />\n                          {{ \"userProfile.lockedByAdmin\" | transloco }}\n                        </p>\n                      } @else if (editing) {\n                        <p\n                          class=\"m-0 text-(length:--size-sm) text-(--font-neutral-muted)\">\n                          {{ \"userProfile.editHint\" | transloco }}\n                        </p>\n                      } @else if (isDefault(category, key)) {\n                        <p class=\"m-0\">\n                          <span [class]=\"chipClass\">{{\n                            \"userProfile.defaultValue\" | transloco\n                          }}</span>\n                        </p>\n                      }\n                    }\n                  </div>\n                }\n              </div>\n            </section>\n          }\n        </form>\n        <!-- Always in the DOM, and only its text changes: a live region inserted at the same time as\n             its content is not reliably announced. `sr-only` — the transitions it describes are\n             already visible on screen. -->\n        <p class=\"sr-only\" role=\"status\" aria-live=\"polite\">\n          {{ statusMessage() }}\n        </p>\n      </div>\n    }\n  </div>\n} @else if (userProfileResource.isLoading()) {\n  <p role=\"status\">{{ \"userProfile.loading\" | transloco }}</p>\n} @else if (userProfileResource.error()) {\n  <p role=\"alert\">{{ \"userProfile.loadError\" | transloco }}</p>\n}\n\n<!-- AVATAR UPLOAD — `hidden` keeps it out of both the tab order and the accessibility tree, which is\n     intended: it is opened by the avatar button above. It also sits outside the <form>. -->\n<input\n  #avatarInput\n  class=\"hidden\"\n  type=\"file\"\n  accept=\"image/*\"\n  (change)=\"uploadAvatar($event)\" />\n",
 		dependencies: [
 			{
 				kind: "directive",
@@ -31950,24 +32152,75 @@ var UserProfileFormComponent = class UserProfileFormComponent {
 					"size"
 				]
 			},
+			{
+				kind: "component",
+				type: CircleCheckIcon,
+				selector: "circle-check, circle-check-icon, CircleCheck, CircleCheckIcon",
+				inputs: ["class"]
+			},
+			{
+				kind: "component",
+				type: LockIcon,
+				selector: "lock, lock-icon, Lock, LockIcon",
+				inputs: ["class"]
+			},
+			{
+				kind: "component",
+				type: SwitchComponent,
+				selector: "switch, Switch",
+				inputs: [
+					"checked",
+					"disabled",
+					"size",
+					"class",
+					"aria-label",
+					"aria-labelledby",
+					"presentational",
+					"compact",
+					"tabIndex"
+				],
+				outputs: ["checkedChange"]
+			},
+			{
+				kind: "component",
+				type: TagInputComponent,
+				selector: "TagInput, tag-input, taginput",
+				inputs: [
+					"value",
+					"disabled",
+					"readonly",
+					"placeholder",
+					"separator",
+					"addOnBlur",
+					"size",
+					"scheme",
+					"class",
+					"aria-label",
+					"addLabel",
+					"removeLabel",
+					"addedLabel",
+					"removedLabel"
+				],
+				outputs: ["valueChange", "touch"]
+			},
 			{
 				kind: "directive",
-				type: TextareaComponent,
-				selector: "textarea-group, textareagroup, TextareaGroup",
+				type: InputComponent,
+				selector: "input-group, inputgroup, InputGroup",
 				inputs: [
 					"class",
 					"size",
 					"scheme",
-					"resize",
 					"filled",
-					"minRows",
-					"maxRows"
+					"numbers",
+					"autoHeight",
+					"textSize"
 				]
 			},
 			{
 				kind: "directive",
-				type: TextareaControlDirective,
-				selector: "textarea[textarea-control], textarea[textareaControl]",
+				type: InputControlDirective,
+				selector: "input[input-control], input[inputControl]",
 				inputs: ["class"]
 			},
 			{
@@ -32019,18 +32272,22 @@ i0.ɵɵngDeclareClassMetadata({
 				UserIcon,
 				AvatarImageComponent,
 				ButtonComponent,
-				TextareaComponent,
-				TextareaControlDirective,
+				CircleCheckIcon,
+				LockIcon,
+				SwitchComponent,
+				TagInputComponent,
+				InputComponent,
+				InputControlDirective,
 				ChangePasswordComponent
 			],
 			providers: [provideTranslocoScope("user-profile", "login")],
-			template: "@if (userProfileResource.hasValue()) {\n  @let profile = user();\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        @let profilePhoto = profile?.data?.profilePhoto;\n        <!-- AVATAR — a real <button>: the avatar opens the file picker, so it has to be reachable and\n             activatable with the keyboard, which a click handler on a <div> never is. -->\n        <button\n          type=\"button\"\n          variant=\"none\"\n          class=\"cursor-pointer rounded-full\"\n          [title]=\"'userProfile.changePhoto' | transloco\"\n          [attr.aria-label]=\"'userProfile.changePhoto' | transloco\"\n          (click)=\"avatarInput.click()\">\n          <Avatar fill=\"secondary\" class=\"size-14\">\n            @if (profilePhoto) {\n              <!-- alt=\"\": the button already carries the accessible name, the image would repeat it. -->\n              <AvatarImage [src]=\"profilePhoto\" width=\"44\" height=\"44\" alt=\"\" />\n            }\n            <AvatarFallback class=\"size-full text-lg\">\n              @if (initials()) {\n                <span>{{ initials() }}</span>\n              } @else {\n                <UserIcon class=\"size-7\" />\n              }\n            </AvatarFallback>\n          </Avatar>\n        </button>\n        @if (profilePhoto) {\n          <button\n            type=\"button\"\n            variant=\"tertiary\"\n            [iconOnly]=\"true\"\n            class=\"text-destructive cursor-pointer\"\n            [title]=\"'userProfile.deleteProperty' | transloco\"\n            [attr.aria-label]=\"\n              'userProfile.deletePropertyNamed'\n                | transloco\n                  : { property: 'userProfile.data.profilePhoto' | transloco }\n            \"\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        <!-- CHANGE PASSWORD -->\n        @if (allowChangePassword()) {\n          <button\n            type=\"button\"\n            [disabled]=\"changingPassword()\"\n            (click)=\"changingPassword.set(true)\">\n            {{ \"login.changePassword\" | transloco }}\n          </button>\n        }\n      </div>\n    </div>\n    @if (changingPassword()) {\n      <!-- ChangePassword renders its own <form [formRoot]>: it stays in this branch, mutually\n           exclusive with the profile form below, so the two never nest. -->\n      <ChangePassword\n        [username]=\"username()\"\n        [redirectAfterSuccess]=\"false\"\n        [redirectAfterCancel]=\"false\"\n        (cancel)=\"changingPassword.set(false)\"\n        (success)=\"changingPassword.set(false)\" />\n    } @else {\n      <!-- p: the focus outline of the fields is drawn *outside* their box, and this is the\n           scrolling ancestor — without a gutter it clips the ring on every edge it touches\n           (left for all of them, bottom for the last one, top for the first). -->\n      <div class=\"min-h-0 flex-1 overflow-auto p-(--spacing-3xs)\">\n        <!--\n          [formRoot] pose novalidate, intercepte submit et appelle preventDefault() avant de déclencher\n          submit() sur le field tree. Un seul bouton type=\"submit\" est rendu à la fois — celui de la\n          ligne en cours d'édition — et l'action de soumission persiste cette seule propriété.\n        -->\n        <!-- aria-label: a <form> with no accessible name is not exposed as a form landmark, so the\n             fields could not be reached as a whole. aria-busy holds the announcement back while a\n             property is being persisted. -->\n        <form\n          [formRoot]=\"profileForm\"\n          [attr.aria-label]=\"'userProfile.profileFields' | transloco\"\n          [attr.aria-busy]=\"profileForm().submitting() ? 'true' : null\">\n          @for (\n            property of properties();\n            track property.category + \".\" + property.key\n          ) {\n            @let category = property.category;\n            @let key = property.key;\n            @let field = profileForm[category][key];\n            @let label =\n              property.translated\n                ? (\"userProfile.data.\" + key | transloco)\n                : key;\n            @let editing = isEditing(category, key);\n            @let invalid = showError(field);\n            <!-- role=\"group\" named by the label: without it the four action buttons of a row are\n                 announced out of context, as a flat run of \"Edit …\" / \"Delete …\" with nothing tying\n                 them to the property they belong to. -->\n            <div\n              role=\"group\"\n              [attr.aria-labelledby]=\"labelId(category, key)\"\n              class=\"flex flex-col gap-(--spacing-3xs)\">\n              <label\n                [id]=\"labelId(category, key)\"\n                [for]=\"fieldId(category, key)\"\n                [class]=\"labelClass\"\n                >{{ label }}</label\n              >\n              <div class=\"group flex flex-row\">\n                <div class=\"min-w-0 grow\">\n                  <textarea-group\n                    resize=\"auto\"\n                    [maxRows]=\"3\"\n                    [scheme]=\"invalid ? 'error' : 'default'\">\n                    <!-- No [attr.readonly] here: [formField] writes the readonly attribute itself from\n                         the field state, which the schema's readonly() rule drives. The native\n                         readonly attribute is what exposes aria-readonly — do not duplicate it. -->\n                    <textarea\n                      textarea-control\n                      rows=\"1\"\n                      [id]=\"fieldId(category, key)\"\n                      [formField]=\"field\"\n                      [attr.placeholder]=\"'userProfile.notDefined' | transloco\"\n                      [attr.aria-invalid]=\"invalid ? 'true' : null\"\n                      [attr.aria-describedby]=\"\n                        invalid ? errorId(category, key) : null\n                      \"\n                      [attr.aria-keyshortcuts]=\"editing ? 'Escape' : null\"\n                      (focus)=\"onFieldFocus($event)\"\n                      (keydown.escape)=\"onCancelEdit(category, key)\"></textarea>\n                  </textarea-group>\n                </div>\n                <!-- group-focus-within, and not only group-hover: `invisible` takes the buttons out of\n                     the tab order, so without it editing or deleting a property is unreachable with a\n                     keyboard. Focusing the field of the row reveals its actions. -->\n                @if (editing) {\n                  <button\n                    type=\"submit\"\n                    variant=\"tertiary\"\n                    [iconOnly]=\"true\"\n                    class=\"visible mx-2 cursor-pointer sm:invisible sm:group-focus-within:visible sm:group-hover:visible\"\n                    [disabled]=\"profileForm().submitting()\"\n                    [title]=\"'userProfile.saveProperty' | transloco\"\n                    [attr.aria-label]=\"\n                      'userProfile.savePropertyNamed'\n                        | transloco: { property: label }\n                    \">\n                    <save-icon />\n                  </button>\n                  <button\n                    type=\"button\"\n                    variant=\"tertiary\"\n                    [iconOnly]=\"true\"\n                    class=\"visible cursor-pointer sm:invisible sm:group-focus-within:visible sm:group-hover:visible\"\n                    [title]=\"'userProfile.cancelEdit' | transloco\"\n                    [attr.aria-label]=\"\n                      'userProfile.cancelEditNamed'\n                        | transloco: { property: label }\n                    \"\n                    (click)=\"onCancelEdit(category, key)\">\n                    <UndoIcon />\n                  </button>\n                } @else {\n                  <button\n                    type=\"button\"\n                    variant=\"tertiary\"\n                    [iconOnly]=\"true\"\n                    [id]=\"editButtonId(category, key)\"\n                    class=\"visible mx-2 cursor-pointer sm:invisible sm:group-focus-within:visible sm:group-hover:visible\"\n                    [title]=\"'userProfile.editProperty' | transloco\"\n                    [attr.aria-label]=\"\n                      'userProfile.editPropertyNamed'\n                        | transloco: { property: label }\n                    \"\n                    (click)=\"onEdit(category, key)\">\n                    <EditIcon />\n                  </button>\n                  <button\n                    type=\"button\"\n                    variant=\"tertiary\"\n                    [iconOnly]=\"true\"\n                    class=\"text-destructive visible cursor-pointer sm:invisible sm:group-focus-within:visible sm:group-hover:visible\"\n                    [title]=\"'userProfile.deleteProperty' | transloco\"\n                    [attr.aria-label]=\"\n                      'userProfile.deletePropertyNamed'\n                        | transloco: { property: label }\n                    \"\n                    (click)=\"onDeleteData(category, key)\">\n                    <TrashIcon />\n                  </button>\n                }\n              </div>\n              @if (invalid) {\n                <p\n                  [id]=\"errorId(category, key)\"\n                  role=\"alert\"\n                  [class]=\"errorClass\">\n                  {{ errorKey(field) | transloco }}\n                </p>\n              }\n            </div>\n          }\n        </form>\n        <!-- Always in the DOM, and only its text changes: a live region inserted at the same time as\n             its content is not reliably announced. `sr-only` — the transitions it describes are\n             already visible on screen. -->\n        <p class=\"sr-only\" role=\"status\" aria-live=\"polite\">\n          {{ statusMessage() }}\n        </p>\n      </div>\n    }\n  </div>\n} @else if (userProfileResource.isLoading()) {\n  <p role=\"status\">{{ \"userProfile.loading\" | transloco }}</p>\n} @else if (userProfileResource.error()) {\n  <p role=\"alert\">{{ \"userProfile.loadError\" | transloco }}</p>\n}\n\n<!-- AVATAR UPLOAD — `hidden` keeps it out of both the tab order and the accessibility tree, which is\n     intended: it is opened by the avatar button above. It also sits outside the <form>. -->\n<input\n  #avatarInput\n  class=\"hidden\"\n  type=\"file\"\n  accept=\"image/*\"\n  (change)=\"uploadAvatar($event)\" />\n"
+			template: "@if (userProfileResource.hasValue()) {\n  @let profile = user();\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        @let profilePhoto = profile?.data?.profilePhoto;\n        <!-- AVATAR — a real <button>: the avatar opens the file picker, so it has to be reachable and\n             activatable with the keyboard, which a click handler on a <div> never is. -->\n        <button\n          type=\"button\"\n          variant=\"none\"\n          class=\"cursor-pointer rounded-full\"\n          [title]=\"'userProfile.changePhoto' | transloco\"\n          [attr.aria-label]=\"'userProfile.changePhoto' | transloco\"\n          (click)=\"avatarInput.click()\">\n          <Avatar fill=\"secondary\" class=\"size-14\">\n            @if (profilePhoto) {\n              <!-- alt=\"\": the button already carries the accessible name, the image would repeat it. -->\n              <AvatarImage [src]=\"profilePhoto\" width=\"44\" height=\"44\" alt=\"\" />\n            }\n            <AvatarFallback class=\"size-full text-lg\">\n              @if (initials()) {\n                <span>{{ initials() }}</span>\n              } @else {\n                <UserIcon class=\"size-7\" />\n              }\n            </AvatarFallback>\n          </Avatar>\n        </button>\n        @if (profilePhoto) {\n          <button\n            type=\"button\"\n            variant=\"tertiary\"\n            [iconOnly]=\"true\"\n            class=\"text-destructive cursor-pointer\"\n            [title]=\"'userProfile.deleteProperty' | transloco\"\n            [attr.aria-label]=\"\n              'userProfile.deletePropertyNamed'\n                | transloco\n                  : { property: 'userProfile.data.profilePhoto' | transloco }\n            \"\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        <!-- CHANGE PASSWORD -->\n        @if (allowChangePassword()) {\n          <button\n            type=\"button\"\n            [disabled]=\"changingPassword()\"\n            (click)=\"changingPassword.set(true)\">\n            {{ \"login.changePassword\" | transloco }}\n          </button>\n        }\n      </div>\n    </div>\n    @if (changingPassword()) {\n      <!-- ChangePassword renders its own <form [formRoot]>: it stays in this branch, mutually\n           exclusive with the profile form below, so the two never nest. -->\n      <ChangePassword\n        [username]=\"username()\"\n        [redirectAfterSuccess]=\"false\"\n        [redirectAfterCancel]=\"false\"\n        (cancel)=\"changingPassword.set(false)\"\n        (success)=\"changingPassword.set(false)\" />\n    } @else {\n      <!-- p: the focus outline of the fields is drawn *outside* their box, and this is the\n           scrolling ancestor — without a gutter it clips the ring on every edge it touches\n           (left for all of them, bottom for the last one, top for the first). -->\n      <div class=\"min-h-0 flex-1 overflow-auto p-(--spacing-3xs)\">\n        <!--\n          [formRoot] pose novalidate, intercepte submit et appelle preventDefault() avant de déclencher\n          submit() sur le field tree. Un seul bouton type=\"submit\" est rendu à la fois — celui de la\n          ligne en cours d'édition — et l'action de soumission persiste cette seule propriété.\n        -->\n        <!-- aria-label: a <form> with no accessible name is not exposed as a form landmark, so the\n             fields could not be reached as a whole. aria-busy holds the announcement back while a\n             property is being persisted. -->\n        <form\n          class=\"@container\"\n          [formRoot]=\"profileForm\"\n          [attr.aria-label]=\"'userProfile.profileFields' | transloco\"\n          [attr.aria-busy]=\"profileForm().submitting() ? 'true' : null\">\n          @for (section of sections(); track section.id) {\n            <section\n              [attr.aria-labelledby]=\"'user-profile-section-' + section.id\"\n              class=\"mb-(--spacing-md) flex flex-col gap-(--spacing-sm) rounded-(--radius-lg) border border-solid border-(--stroke-primary-lighter) p-(--spacing-md)\">\n              <div>\n                <h3\n                  [id]=\"'user-profile-section-' + section.id\"\n                  class=\"m-0 text-(length:--size-base) font-semibold\">\n                  {{ \"userProfile.sections.\" + section.id | transloco }}\n                </h3>\n                <p\n                  class=\"m-0 text-(length:--size-sm) text-(--font-neutral-muted)\">\n                  {{\n                    \"userProfile.sections.\" + section.id + \"Hint\" | transloco\n                  }}\n                </p>\n              </div>\n              <div\n                class=\"grid grid-cols-1 gap-x-(--spacing-md) gap-y-(--spacing-sm) @lg:grid-cols-2\">\n                @for (\n                  property of section.rows;\n                  track property.category + \".\" + property.key\n                ) {\n                  @let category = property.category;\n                  @let key = property.key;\n                  @let field = profileForm[category][key];\n                  @let label = labelFor(category, key);\n                  @let editing = isEditing(category, key);\n                  @let invalid = showError(field);\n                  @let boolean = isBoolean(category, key);\n                  @let readOnlyValue = isReadOnlyValue(category, key);\n                  @let leaf = isLeaf(category, key);\n                  @let saved = isSaved(category, key);\n                  <!-- role=\"group\" named by the label: without it the action buttons of a row are\n                       announced out of context, as a flat run of \"Edit …\" / \"Delete …\" with nothing tying\n                       them to the property they belong to. A switch, and a value shown but not edited,\n                       take the whole width of the grid: they are not a field to line up with another. -->\n                  <div\n                    role=\"group\"\n                    [attr.aria-labelledby]=\"labelId(category, key)\"\n                    class=\"flex min-w-0 flex-col gap-(--spacing-3xs)\"\n                    [class.col-span-full]=\"boolean || readOnlyValue\">\n                    @if (boolean) {\n                      <!-- A switch is not a labelable text field: the name goes through aria-labelledby. The\n                           value is saved as soon as it is flipped, so there is no edit mode. -->\n                      <div\n                        class=\"flex flex-row items-center gap-(--spacing-sm) rounded-(--radius-md) border border-solid border-(--stroke-primary-lighter) px-(--spacing-md) py-(--spacing-xs)\">\n                        <span\n                          [id]=\"labelId(category, key)\"\n                          class=\"grow\"\n                          [class]=\"labelClass\"\n                          >{{ label }}</span\n                        >\n                        @if (saved) {\n                          <span\n                            class=\"flex items-center gap-(--spacing-3xs) text-(length:--size-sm) text-(--font-success-base)\">\n                            <CircleCheckIcon aria-hidden=\"true\" />\n                            {{ \"userProfile.saved\" | transloco }}\n                          </span>\n                        } @else if (isDefault(category, key)) {\n                          <span [class]=\"chipClass\">{{\n                            \"userProfile.defaultValue\" | transloco\n                          }}</span>\n                        }\n                        <switch\n                          #toggle\n                          [checked]=\"booleanValue(category, key)\"\n                          [disabled]=\"profileForm().submitting()\"\n                          [aria-labelledby]=\"labelId(category, key)\"\n                          (checkedChange)=\"\n                            onToggleBoolean(category, key, $event, toggle)\n                          \" />\n                        <button\n                          type=\"button\"\n                          variant=\"tertiary\"\n                          [iconOnly]=\"true\"\n                          class=\"text-destructive cursor-pointer\"\n                          [title]=\"'userProfile.deleteProperty' | transloco\"\n                          [attr.aria-label]=\"\n                            'userProfile.deletePropertyNamed'\n                              | transloco: { property: label }\n                          \"\n                          [disabled]=\"!hasStoredValue(category, key)\"\n                          (click)=\"onDeleteData(category, key)\">\n                          <TrashIcon />\n                        </button>\n                      </div>\n                    } @else if (readOnlyValue) {\n                      <!-- An array is shown, never edited: its shape is the administrator's. A galactik\n                           TagInput in read-only mode, which is what it is for; its inner text field is named\n                           after the property, as there is no <label for> to reach it. -->\n                      <span\n                        [id]=\"labelId(category, key)\"\n                        [class]=\"labelClass\"\n                        >{{ label }}</span\n                      >\n                      <tag-input\n                        class=\"[&_tag-remove]:hidden\"\n                        [value]=\"arrayTags(category, key)\"\n                        [readonly]=\"true\"\n                        [aria-label]=\"label\"\n                        [addLabel]=\"label\" />\n                    } @else {\n                      <label\n                        [id]=\"labelId(category, key)\"\n                        [for]=\"fieldId(category, key)\"\n                        [class]=\"labelClass\"\n                        >{{ label }}</label\n                      >\n                      <!-- The actions sit inside the box: galactik styles it from the control with has-[]\n                           selectors, which match descendants, so the focus ring and the read-only look\n                           keep working with the buttons next to the input. At rest the box is tinted,\n                           which is what tells a field from its label; it is white while edited. -->\n                      <!-- scheme: galactik colours the field itself for an error and for a save that just\n                           went through. The tint of a read-only field must not hide the success one, hence\n                           the data attribute and its more specific variant. -->\n                      <input-group\n                        class=\"has-[[readonly]]:bg-(--bg-primary-lighter) data-[state=success]:has-[[readonly]]:bg-(--bg-success-base-alt)\"\n                        [attr.data-state]=\"saved ? 'success' : null\"\n                        [scheme]=\"\n                          invalid ? 'error' : saved ? 'success' : 'default'\n                        \">\n                        <!-- No [attr.readonly] here: [formField] writes the readonly attribute itself from\n                             the field state, which the schema's readonly() rule drives. The native\n                             readonly attribute is what exposes aria-readonly — do not duplicate it. -->\n                        <input\n                          input-control\n                          type=\"text\"\n                          [id]=\"fieldId(category, key)\"\n                          [formField]=\"field\"\n                          [attr.placeholder]=\"\n                            'userProfile.notDefined' | transloco\n                          \"\n                          [attr.aria-invalid]=\"invalid ? 'true' : null\"\n                          [attr.aria-describedby]=\"\n                            invalid ? errorId(category, key) : null\n                          \"\n                          [attr.aria-keyshortcuts]=\"editing ? 'Escape' : null\"\n                          (focus)=\"onFieldFocus($event)\"\n                          (keydown.escape)=\"onEscape($event, category, key)\" />\n                        <!-- Always visible: hiding them until hover made them unreachable on a touch screen\n                             and left nothing to discover. -->\n                        @if (!leaf) {\n                          <div class=\"flex shrink-0 flex-row items-center\">\n                            @if (editing) {\n                              <button\n                                type=\"submit\"\n                                variant=\"primary\"\n                                size=\"sm\"\n                                [iconOnly]=\"true\"\n                                class=\"cursor-pointer\"\n                                [disabled]=\"profileForm().submitting()\"\n                                [title]=\"'userProfile.saveProperty' | transloco\"\n                                [attr.aria-label]=\"\n                                  'userProfile.savePropertyNamed'\n                                    | transloco: { property: label }\n                                \">\n                                <save-icon />\n                              </button>\n                              <button\n                                type=\"button\"\n                                variant=\"tertiary\"\n                                size=\"sm\"\n                                [iconOnly]=\"true\"\n                                class=\"cursor-pointer\"\n                                [title]=\"'userProfile.cancelEdit' | transloco\"\n                                [attr.aria-label]=\"\n                                  'userProfile.cancelEditNamed'\n                                    | transloco: { property: label }\n                                \"\n                                (click)=\"onCancelEdit(category, key)\">\n                                <UndoIcon />\n                              </button>\n                            } @else {\n                              <button\n                                type=\"button\"\n                                variant=\"tertiary\"\n                                size=\"sm\"\n                                [iconOnly]=\"true\"\n                                [id]=\"editButtonId(category, key)\"\n                                class=\"cursor-pointer\"\n                                [title]=\"'userProfile.editProperty' | transloco\"\n                                [attr.aria-label]=\"\n                                  'userProfile.editPropertyNamed'\n                                    | transloco: { property: label }\n                                \"\n                                (click)=\"onEdit(category, key)\">\n                                <EditIcon />\n                              </button>\n                              <button\n                                type=\"button\"\n                                variant=\"tertiary\"\n                                size=\"sm\"\n                                [iconOnly]=\"true\"\n                                class=\"text-destructive cursor-pointer\"\n                                [title]=\"\n                                  'userProfile.deleteProperty' | transloco\n                                \"\n                                [attr.aria-label]=\"\n                                  'userProfile.deletePropertyNamed'\n                                    | transloco: { property: label }\n                                \"\n                                [disabled]=\"!hasStoredValue(category, key)\"\n                                (click)=\"onDeleteData(category, key)\">\n                                <TrashIcon />\n                              </button>\n                            }\n                          </div>\n                        }\n                      </input-group>\n                    }\n                    <!-- Under the field, one message at a time: the error first, then the confirmation of a\n                         save, then what is worth knowing about the value. -->\n                    @if (invalid) {\n                      <p\n                        [id]=\"errorId(category, key)\"\n                        role=\"alert\"\n                        [class]=\"errorClass\">\n                        {{ errorKey(field) | transloco }}\n                      </p>\n                    } @else if (!boolean) {\n                      @if (saved) {\n                        <p\n                          class=\"m-0 flex items-center gap-(--spacing-3xs) text-(length:--size-sm) text-(--font-success-base)\">\n                          <CircleCheckIcon aria-hidden=\"true\" />\n                          {{ \"userProfile.saved\" | transloco }}\n                        </p>\n                      } @else if (readOnlyValue || leaf) {\n                        <p\n                          class=\"m-0 flex items-center gap-(--spacing-3xs) text-(length:--size-sm) text-(--font-neutral-muted)\">\n                          <LockIcon />\n                          {{ \"userProfile.lockedByAdmin\" | transloco }}\n                        </p>\n                      } @else if (editing) {\n                        <p\n                          class=\"m-0 text-(length:--size-sm) text-(--font-neutral-muted)\">\n                          {{ \"userProfile.editHint\" | transloco }}\n                        </p>\n                      } @else if (isDefault(category, key)) {\n                        <p class=\"m-0\">\n                          <span [class]=\"chipClass\">{{\n                            \"userProfile.defaultValue\" | transloco\n                          }}</span>\n                        </p>\n                      }\n                    }\n                  </div>\n                }\n              </div>\n            </section>\n          }\n        </form>\n        <!-- Always in the DOM, and only its text changes: a live region inserted at the same time as\n             its content is not reliably announced. `sr-only` — the transitions it describes are\n             already visible on screen. -->\n        <p class=\"sr-only\" role=\"status\" aria-live=\"polite\">\n          {{ statusMessage() }}\n        </p>\n      </div>\n    }\n  </div>\n} @else if (userProfileResource.isLoading()) {\n  <p role=\"status\">{{ \"userProfile.loading\" | transloco }}</p>\n} @else if (userProfileResource.error()) {\n  <p role=\"alert\">{{ \"userProfile.loadError\" | transloco }}</p>\n}\n\n<!-- AVATAR UPLOAD — `hidden` keeps it out of both the tab order and the accessibility tree, which is\n     intended: it is opened by the avatar button above. It also sits outside the <form>. -->\n<input\n  #avatarInput\n  class=\"hidden\"\n  type=\"file\"\n  accept=\"image/*\"\n  (change)=\"uploadAvatar($event)\" />\n"
 		}]
 	}],
 	ctorParameters: () => []
 });
 function toRecord(keys, source) {
-	return Object.fromEntries(keys.map((key) => [key, String(source?.[key] ?? "")]));
+	return Object.fromEntries(keys.map((key) => [key, toFieldText(source?.[key])]));
 }
 function splitPropertyId(id) {
 	const separator = id.indexOf(".");
@@ -32672,8 +32929,10 @@ var SettingsDialogComponent = class SettingsDialogComponent {
 		template: `
     @if (!duplicate) {
       <div dialog #dialog="dialog" [closeLabel]="'settings.close' | transloco" (closed)="call.end($event)">
-        <DialogContent size="xl" class="h-[min(48rem,calc(100dvh-2rem))] flex-row! items-stretch!">
-          <div class="flex w-64 shrink-0 flex-col gap-(--spacing-3xs) bg-(--layer-page-on-layer) p-(--spacing-sm)">
+        <!-- The inset layout of the sidebar, in a dialog: the navigation sits on the tinted surface of the
+             dialog itself and the panel is a white card set into it. -->
+        <DialogContent size="xl" class="h-[min(48rem,calc(100dvh-2rem))] flex-row! items-stretch! bg-(--bg-primary-lighter)">
+          <div class="flex w-64 shrink-0 flex-col gap-(--spacing-3xs) p-(--spacing-sm)">
             <button
               type="button"
               variant="none"
@@ -32710,7 +32969,7 @@ var SettingsDialogComponent = class SettingsDialogComponent {
             </nav>
           </div>
 
-          <div class="m-(--spacing-xs) flex min-w-0 flex-1 flex-col overflow-y-auto rounded-(--radius-lg) bg-(--layer-page-layer) p-(--spacing-xl)">
+          <div sidebarInset class="my-(--spacing-xs) mr-(--spacing-xs) overflow-y-auto rounded-(--radius-2xl) bg-(--bg-neutral-white) p-(--spacing-xl) shadow-none">
             @switch (panel()) {
               @case ("account") {
                 <settings-account-panel class="flex min-h-0 flex-1 flex-col" [focusOnOpen]="!navigated()" />
@@ -32783,6 +33042,12 @@ var SettingsDialogComponent = class SettingsDialogComponent {
 				selector: "x-mark, x-mark-icon, XMark, XMarkIcon",
 				inputs: ["class"]
 			},
+			{
+				kind: "directive",
+				type: SidebarInsetDirective,
+				selector: "[sidebarInset]",
+				inputs: ["class"]
+			},
 			{
 				kind: "component",
 				type: SettingsAccountPanelComponent,
@@ -32825,6 +33090,7 @@ i0.ɵɵngDeclareClassMetadata({
 				PaletteIcon,
 				KeyboardIcon,
 				XMarkIcon,
+				SidebarInsetDirective,
 				SettingsAccountPanelComponent,
 				SettingsAppearancePanelComponent,
 				SettingsShortcutsPanelComponent
@@ -32833,8 +33099,10 @@ i0.ɵɵngDeclareClassMetadata({
 			template: `
     @if (!duplicate) {
       <div dialog #dialog="dialog" [closeLabel]="'settings.close' | transloco" (closed)="call.end($event)">
-        <DialogContent size="xl" class="h-[min(48rem,calc(100dvh-2rem))] flex-row! items-stretch!">
-          <div class="flex w-64 shrink-0 flex-col gap-(--spacing-3xs) bg-(--layer-page-on-layer) p-(--spacing-sm)">
+        <!-- The inset layout of the sidebar, in a dialog: the navigation sits on the tinted surface of the
+             dialog itself and the panel is a white card set into it. -->
+        <DialogContent size="xl" class="h-[min(48rem,calc(100dvh-2rem))] flex-row! items-stretch! bg-(--bg-primary-lighter)">
+          <div class="flex w-64 shrink-0 flex-col gap-(--spacing-3xs) p-(--spacing-sm)">
             <button
               type="button"
               variant="none"
@@ -32871,7 +33139,7 @@ i0.ɵɵngDeclareClassMetadata({
             </nav>
           </div>
 
-          <div class="m-(--spacing-xs) flex min-w-0 flex-1 flex-col overflow-y-auto rounded-(--radius-lg) bg-(--layer-page-layer) p-(--spacing-xl)">
+          <div sidebarInset class="my-(--spacing-xs) mr-(--spacing-xs) overflow-y-auto rounded-(--radius-2xl) bg-(--bg-neutral-white) p-(--spacing-xl) shadow-none">
             @switch (panel()) {
               @case ("account") {
                 <settings-account-panel class="flex min-h-0 flex-1 flex-col" [focusOnOpen]="!navigated()" />