@sinequa/atomic-angular 1.19.3 → 1.19.4

package/fesm2022/sinequa-atomic-angular.mjs

@@ -3262,7 +3262,12 @@ class QueryService {
             };
             return r;
         }), tap(response => {
-            this.result.set(response);
+            // An "open" query (expanding a tree aggregation node) only fetches the node's
+            // children: its response is not the page's search result (no tabs, no records...).
+            // Publishing it would wipe the state derived from `result` (e.g. the tab counts).
+            if (query.action !== "open") {
+                this.result.set(response);
+            }
             info("queryService.getResults success - data: ", response);
         }));
     }
@@ -18408,6 +18413,18 @@ class UserProfileFormComponent {
         this.feedback.set(undefined);
         this.propertyToEdit.set(undefined);
     }
+    /**
+     * Whether the profile holds a value for a property. Only then is there something to delete: a property
+     * that shows its configured default, or that is simply not set, is absent from the profile and the
+     * server answers 404 to a delete on it (ES-34462).
+     *
+     * @param category data or customData
+     * @param propertyName property name
+     */
+    hasStoredValue(category, propertyName) {
+        const stored = this.userProfile()?.[category]?.[propertyName];
+        return stored !== undefined && stored !== null;
+    }
     /**
      * On data property deletion, for now we make the property an empty string
      *
@@ -18417,6 +18434,11 @@ class UserProfileFormComponent {
     async onDeleteData(category, propertyName) {
         if (this.pending())
             return;
+        // Nothing stored, nothing to delete: not a failure, and no request to send.
+        if (!this.hasStoredValue(category, propertyName)) {
+            info("User profile property not stored, nothing to delete", { category, propertyName });
+            return;
+        }
         const key = `${category}.${propertyName}`;
         this.feedback.set(undefined);
         this.pending.set(key);
@@ -18424,9 +18446,7 @@ class UserProfileFormComponent {
             const response = await deleteUserProfileProperty(this.userProfile(), category, propertyName);
             if (response) {
                 info("Deleted user profile property", response);
-                const userProfile = JSON.parse(JSON.stringify(this.userProfile()));
-                userProfile[category][propertyName] = undefined;
-                this.userProfileResource.set(userProfile);
+                this.forgetProperty(category, propertyName);
                 this.feedback.set({ key, type: "success", message: this.message("deleted", category, propertyName) });
             }
             else {
@@ -18434,13 +18454,30 @@ class UserProfileFormComponent {
                 this.feedback.set({ key, type: "error", message: this.message("deleteFailed", category, propertyName) });
             }
         }
-        catch {
-            this.feedback.set({ key, type: "error", message: this.message("deleteFailed", category, propertyName) });
+        catch (err) {
+            if (err?.status === 404) {
+                // The property is not in the profile (anymore), e.g. removed from another tab: the state asked for is
+                // already reached, so it is not an error to show.
+                info("User profile property already absent", { category, propertyName });
+                this.forgetProperty(category, propertyName);
+                this.feedback.set({ key, type: "success", message: this.message("deleted", category, propertyName) });
+            }
+            else {
+                this.feedback.set({ key, type: "error", message: this.message("deleteFailed", category, propertyName) });
+            }
         }
         finally {
             this.pending.set(undefined);
         }
     }
+    /** Takes a deleted property out of the stored profile; a custom property with a default shows that default again. */
+    forgetProperty(category, propertyName) {
+        const userProfile = JSON.parse(JSON.stringify(this.userProfile()));
+        if (userProfile[category]) {
+            userProfile[category][propertyName] = undefined;
+        }
+        this.userProfileResource.set(userProfile);
+    }
     /**
      * Saving a data property
      *
@@ -18457,18 +18494,11 @@ class UserProfileFormComponent {
         const userProfile = JSON.parse(JSON.stringify(this.userProfile()));
         if (!userProfile[category])
             userProfile[category] = {};
-        userProfile[category][propertyName] = this.value()?.trim() || "";
+        const written = this.value()?.trim() || "";
+        userProfile[category][propertyName] = written;
         try {
             const response = await patchUserProfile(userProfile, category, propertyName);
-            if (response) {
-                const newUserProfile = this.userProfile();
-                this.userProfileResource.set({
-                    ...newUserProfile,
-                    ...response,
-                    data: { ...(newUserProfile?.data || {}), ...(response.data || {}) },
-                    customData: { ...(newUserProfile?.customData || {}), ...(response.customData || {}) }
-                });
-            }
+            this.foldSavedValue(category, propertyName, response, written);
             this.value.set(undefined);
             this.propertyToEdit.set(undefined);
             this.feedback.set({ key, type: "success", message: this.message("saved", category, propertyName) });
@@ -18480,6 +18510,32 @@ class UserProfileFormComponent {
             this.pending.set(undefined);
         }
     }
+    /**
+     * Folds the answer of a PATCH back into the stored profile, so the form shows what was just saved.
+     *
+     * The answer depends on the server: before ES-34373 it is the whole updated profile (`{ data, customData, … }`),
+     * after it is the written value alone (`"fav-1AAA"`). Reading the latter as a profile used to leave the stored
+     * profile unchanged, and the form kept showing the old value (or the default) until the page was reloaded.
+     */
+    foldSavedValue(category, propertyName, response, written) {
+        const current = this.userProfile();
+        if (isPlainObject(response) && ("data" in response || "customData" in response)) {
+            const profile = response;
+            this.userProfileResource.set({
+                ...current,
+                ...profile,
+                data: { ...(current?.data || {}), ...(profile.data || {}) },
+                customData: { ...(current?.customData || {}), ...(profile.customData || {}) }
+            });
+            return;
+        }
+        // The value alone: what the server read back, or what was sent when it answers with nothing usable.
+        const value = response === undefined || response === null ? written : response;
+        this.userProfileResource.set({
+            ...current,
+            [category]: { ...(current?.[category] || {}), [propertyName]: value }
+        });
+    }
     /**
      * Get the value of a data key
      *
@@ -18526,7 +18582,7 @@ class UserProfileFormComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: UserProfileFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.29", type: UserProfileFormComponent, isStandalone: true, selector: "user-profile-form, UserProfileForm, userprofileform", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, currentLanguage: { classPropertyName: "currentLanguage", publicName: "currentLanguage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", currentLanguage: "currentLanguageChange" }, host: { classAttribute: "flex flex-col h-full overflow-hidden" }, providers: [provideTranslocoScope("user-profile", "login")], viewQueries: [{ propertyName: "createInputElement", first: true, predicate: ["avatarInput"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (userProfileResource.hasValue()) {\n  @let profile = userProfile();\n  <div class=\"flex min-h-0 flex-1 flex-col gap-2 p-4\">\n    <div class=\"mb-4 flex\">\n      @if (allowProfilePhoto()) {\n        <!-- AVATAR -->\n        <Avatar\n          class=\"size-14 cursor-pointer\"\n          [class.ring-2]=\"!!fieldState('data.profilePhoto')\"\n          [class.ring-destructive]=\"fieldState('data.profilePhoto') === 'error'\"\n          [class.ring-green-600]=\"fieldState('data.profilePhoto') === 'success'\"\n          (click)=\"avatarInput.click()\">\n          @if (profile?.data?.profilePhoto) {\n            <AvatarImage\n              [src]=\"profile?.data?.profilePhoto!\"\n              width=\"44\"\n              height=\"44\"\n              alt=\"avatar\" />\n          }\n          <AvatarFallback class=\"text-lg\">\n            @if (initials()) {\n              <span>{{ initials() }}</span>\n            } @else {\n              <UserIcon class=\"size-7\" />\n            }\n          </AvatarFallback>\n        </Avatar>\n        @if (profile?.data?.profilePhoto) {\n          <button\n            variant=\"ghost\"\n            [iconOnly]=\"true\"\n            class=\"text-destructive cursor-pointer\"\n            title=\"{{ 'userProfile.deleteProperty' | transloco }}\"\n            [attr.aria-label]=\"'userProfile.deleteProperty' | transloco\"\n            [disabled]=\"!!pending()\"\n            (click)=\"onDeleteData('data', 'profilePhoto')\">\n            <TrashIcon />\n          </button>\n        }\n      }\n      <div class=\"grow\"></div>\n      <div class=\"flex flex-col gap-4\">\n        <!-- LANGUAGE -->\n        <select\n          class=\"hover:outline-primary focus:outline-primary border-foreground/10 bg-background hover:bg-muted focus:bg-muted h-8 rounded-md border px-2 hover:outline focus:outline\"\n          [(ngModel)]=\"currentLanguage\"\n          (change)=\"changeLanguage()\">\n          @for (lang of AllLanguages; track lang.code) {\n            <option [value]=\"lang.code\">\n              {{ lang.label }}\n            </option>\n          }\n        </select>\n        <!-- CHANGE PASSWORD -->\n        @if (allowChangePassword()) {\n          <button\n            [disabled]=\"changingPassword()\"\n            (click)=\"changingPassword.set(true)\">\n            {{ \"login.changePassword\" | transloco }}\n          </button>\n        }\n      </div>\n    </div>\n    <!-- always rendered, so the room is reserved and the layout doesn't shift when a message appears -->\n    <p\n      class=\"min-h-5 text-sm\"\n      role=\"status\"\n      [attr.aria-live]=\"feedback()?.type === 'error' ? 'assertive' : 'polite'\"\n      [class.text-destructive]=\"feedback()?.type === 'error'\"\n      [class.text-green-600]=\"feedback()?.type === 'success'\">\n      {{ feedback()?.message }}\n    </p>\n    @if (changingPassword()) {\n      <ChangePassword\n        [username]=\"username()\"\n        [redirectAfterSuccess]=\"false\"\n        [redirectAfterCancel]=\"false\"\n        (cancel)=\"changingPassword.set(false)\"\n        (success)=\"changingPassword.set(false)\" />\n    } @else {\n      <!-- -m-1 p-1: room for the outline of a field, which the scroll container would otherwise clip -->\n      <div class=\"-m-1 min-h-0 flex-1 overflow-auto p-1\">\n        <div>\n          @for (key of formKeys(); track key) {\n            <div>\n              <p class=\"px-2\">{{ `userProfile.data.${key}` | transloco }}</p>\n              <div\n                class=\"group flex flex-row rounded-md px-2 py-0.5\"\n                [class.ring-1]=\"!!fieldState('data.' + key)\"\n                [class.ring-destructive]=\"fieldState('data.' + key) === 'error'\"\n                [class.ring-green-600]=\"\n                  fieldState('data.' + key) === 'success'\n                \">\n                <div\n                  class=\"min-w-0 grow break-words whitespace-pre-line\"\n                  [class.text-muted-foreground]=\"!getDataValue('data', key)\">\n                  @if (propertyToEdit() === \"data.\" + key) {\n                    <textarea\n                      class=\"hover:outline-primary focus:outline-primary border-foreground/20 hover:bg-muted focus:bg-muted mt-2 w-full rounded-md border px-2 pt-1 hover:outline focus:outline\"\n                      id=\"user-profile-{{ key }}\"\n                      [(ngModel)]=\"value\"></textarea>\n                  } @else {\n                    {{\n                      getDataValue(\"data\", key) ||\n                        (\"userProfile.notDefined\" | transloco)\n                    }}\n                  }\n                </div>\n                @if (propertyToEdit() === \"data.\" + key) {\n                  <button\n                    variant=\"ghost\"\n                    [iconOnly]=\"true\"\n                    class=\"visible mx-2 cursor-pointer sm:invisible sm:group-hover:visible\"\n                    title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                    [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                    [disabled]=\"!!pending()\"\n                    (click)=\"onSaveData('data', key)\">\n                    <save-icon class=\"ml-2\" />\n                  </button>\n                  <button\n                    variant=\"ghost\"\n                    [iconOnly]=\"true\"\n                    class=\"visible cursor-pointer sm:invisible sm:group-hover:visible\"\n                    title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                    [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                    (click)=\"onCancelEdit()\">\n                    <UndoIcon />\n                  </button>\n                } @else {\n                  <button\n                    variant=\"ghost\"\n                    [iconOnly]=\"true\"\n                    class=\"visible mx-2 cursor-pointer sm:invisible sm:group-hover:visible\"\n                    title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                    [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                    (click)=\"onEdit('data', key)\">\n                    <EditIcon />\n                  </button>\n                  <button\n                    variant=\"ghost\"\n                    [iconOnly]=\"true\"\n                    class=\"text-destructive visible cursor-pointer sm:invisible sm:group-hover:visible\"\n                    title=\"{{ 'userProfile.deleteProperty' | transloco }}\"\n                    [attr.aria-label]=\"'userProfile.deleteProperty' | transloco\"\n                    [disabled]=\"!!pending()\"\n                    (click)=\"onDeleteData('data', key)\">\n                    <TrashIcon />\n                  </button>\n                }\n              </div>\n            </div>\n          }\n          @for (key of customData(); track key) {\n            <div>\n              <p class=\"px-2\">{{ key }}</p>\n              <div\n                class=\"group flex flex-row rounded-md px-2 py-0.5\"\n                [class.ring-1]=\"!!fieldState('customData.' + key)\"\n                [class.ring-destructive]=\"\n                  fieldState('customData.' + key) === 'error'\n                \"\n                [class.ring-green-600]=\"\n                  fieldState('customData.' + key) === 'success'\n                \">\n                <div\n                  class=\"min-w-0 grow break-words whitespace-pre-line\"\n                  [class.text-muted-foreground]=\"\n                    !getDataValue('customData', key)\n                  \">\n                  @if (propertyToEdit() === \"customData.\" + key) {\n                    <textarea\n                      class=\"hover:outline-primary focus:outline-primary border-foreground/20 hover:bg-muted focus:bg-muted mt-2 w-full rounded-md border px-2 pt-1 hover:outline focus:outline\"\n                      id=\"user-profile-{{ key }}\"\n                      [(ngModel)]=\"value\"></textarea>\n                  } @else {\n                    {{\n                      getDataValue(\"customData\", key) ||\n                        (\"userProfile.notDefined\" | transloco)\n                    }}\n                  }\n                </div>\n                @if (propertyToEdit() === \"customData.\" + key) {\n                  <button\n                    variant=\"ghost\"\n                    [iconOnly]=\"true\"\n                    class=\"visible mx-2 cursor-pointer sm:invisible sm:group-hover:visible\"\n                    title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                    [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                    [disabled]=\"!!pending()\"\n                    (click)=\"onSaveData('customData', key)\">\n                    <save-icon class=\"ml-2\" />\n                  </button>\n                  <button\n                    variant=\"ghost\"\n                    [iconOnly]=\"true\"\n                    class=\"visible cursor-pointer sm:invisible sm:group-hover:visible\"\n                    title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                    [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                    (click)=\"onCancelEdit()\">\n                    <UndoIcon />\n                  </button>\n                } @else {\n                  <button\n                    variant=\"ghost\"\n                    [iconOnly]=\"true\"\n                    class=\"visible mx-2 cursor-pointer sm:invisible sm:group-hover:visible\"\n                    title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                    [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                    (click)=\"onEdit('customData', key)\">\n                    <EditIcon />\n                  </button>\n                  <button\n                    variant=\"ghost\"\n                    [iconOnly]=\"true\"\n                    class=\"text-destructive visible cursor-pointer sm:invisible sm:group-hover:visible\"\n                    title=\"{{ 'userProfile.deleteProperty' | transloco }}\"\n                    [attr.aria-label]=\"'userProfile.deleteProperty' | transloco\"\n                    [disabled]=\"!!pending()\"\n                    (click)=\"onDeleteData('customData', key)\">\n                    <TrashIcon />\n                  </button>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n} @else if (userProfileResource.isLoading()) {\n  <span>Loading...</span>\n} @else if (userProfileResource.error()) {\n  <p>Please contact an administrator to create your user profile.</p>\n}\n\n<!-- AVATAR UPLOAD -->\n<input\n  #avatarInput\n  class=\"hidden\"\n  type=\"file\"\n  accept=\"image/*\"\n  (change)=\"uploadAvatar($event)\" />\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: RouterModule }, { kind: "component", type: TrashIcon, selector: "trash-icon, TrashIcon", inputs: ["class"] }, { kind: "component", type: EditIcon, selector: "edit-icon, EditIcon, editicon", inputs: ["class"] }, { kind: "component", type: UndoIcon, selector: "UndoIcon, undoicon, undo-icon", inputs: ["class"] }, { kind: "component", type: SaveIcon, selector: "save-icon, SaveIcon", inputs: ["class"] }, { kind: "component", type: AvatarComponent, selector: "avatar, Avatar", inputs: ["class", "size"] }, { kind: "component", type: AvatarFallbackComponent, selector: "avatar-fallback, avatarfallback, AvatarFallback", inputs: ["class", "size"] }, { kind: "component", type: UserIcon, selector: "user-icon, UserIcon", inputs: ["class"] }, { kind: "component", type: AvatarImageComponent, selector: "avatar-image, AvatarImage, avatarimage", inputs: ["class", "src", "alt", "width", "height", "referrerPolicy", "crossOrigin"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size", "solid"] }, { kind: "component", type: ChangePasswordComponent, selector: "change-password, ChangePassword, changepassword", inputs: ["username", "alert", "redirectAfterSuccess", "redirectAfterCancel", "currentPassword", "newPassword", "confirmPassword"], outputs: ["success", "cancel", "currentPasswordChange", "newPasswordChange", "confirmPasswordChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.29", type: UserProfileFormComponent, isStandalone: true, selector: "user-profile-form, UserProfileForm, userprofileform", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, currentLanguage: { classPropertyName: "currentLanguage", publicName: "currentLanguage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", currentLanguage: "currentLanguageChange" }, host: { classAttribute: "flex flex-col h-full overflow-hidden" }, providers: [provideTranslocoScope("user-profile", "login")], viewQueries: [{ propertyName: "createInputElement", first: true, predicate: ["avatarInput"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (userProfileResource.hasValue()) {\n  @let profile = userProfile();\n  <div class=\"flex min-h-0 flex-1 flex-col gap-2 p-4\">\n    <div class=\"mb-4 flex\">\n      @if (allowProfilePhoto()) {\n        <!-- AVATAR -->\n        <Avatar\n          class=\"size-14 cursor-pointer\"\n          [class.ring-2]=\"!!fieldState('data.profilePhoto')\"\n          [class.ring-destructive]=\"fieldState('data.profilePhoto') === 'error'\"\n          [class.ring-green-600]=\"fieldState('data.profilePhoto') === 'success'\"\n          (click)=\"avatarInput.click()\">\n          @if (profile?.data?.profilePhoto) {\n            <AvatarImage\n              [src]=\"profile?.data?.profilePhoto!\"\n              width=\"44\"\n              height=\"44\"\n              alt=\"avatar\" />\n          }\n          <AvatarFallback class=\"text-lg\">\n            @if (initials()) {\n              <span>{{ initials() }}</span>\n            } @else {\n              <UserIcon class=\"size-7\" />\n            }\n          </AvatarFallback>\n        </Avatar>\n        @if (profile?.data?.profilePhoto) {\n          <button\n            variant=\"ghost\"\n            [iconOnly]=\"true\"\n            class=\"text-destructive cursor-pointer\"\n            title=\"{{ 'userProfile.deleteProperty' | transloco }}\"\n            [attr.aria-label]=\"'userProfile.deleteProperty' | transloco\"\n            [disabled]=\"!!pending()\"\n            (click)=\"onDeleteData('data', 'profilePhoto')\">\n            <TrashIcon />\n          </button>\n        }\n      }\n      <div class=\"grow\"></div>\n      <div class=\"flex flex-col gap-4\">\n        <!-- LANGUAGE -->\n        <select\n          class=\"hover:outline-primary focus:outline-primary border-foreground/10 bg-background hover:bg-muted focus:bg-muted h-8 rounded-md border px-2 hover:outline focus:outline\"\n          [(ngModel)]=\"currentLanguage\"\n          (change)=\"changeLanguage()\">\n          @for (lang of AllLanguages; track lang.code) {\n            <option [value]=\"lang.code\">\n              {{ lang.label }}\n            </option>\n          }\n        </select>\n        <!-- CHANGE PASSWORD -->\n        @if (allowChangePassword()) {\n          <button\n            [disabled]=\"changingPassword()\"\n            (click)=\"changingPassword.set(true)\">\n            {{ \"login.changePassword\" | transloco }}\n          </button>\n        }\n      </div>\n    </div>\n    <!-- always rendered, so the room is reserved and the layout doesn't shift when a message appears -->\n    <p\n      class=\"min-h-5 text-sm\"\n      role=\"status\"\n      [attr.aria-live]=\"feedback()?.type === 'error' ? 'assertive' : 'polite'\"\n      [class.text-destructive]=\"feedback()?.type === 'error'\"\n      [class.text-green-600]=\"feedback()?.type === 'success'\">\n      {{ feedback()?.message }}\n    </p>\n    @if (changingPassword()) {\n      <ChangePassword\n        [username]=\"username()\"\n        [redirectAfterSuccess]=\"false\"\n        [redirectAfterCancel]=\"false\"\n        (cancel)=\"changingPassword.set(false)\"\n        (success)=\"changingPassword.set(false)\" />\n    } @else {\n      <!-- -m-1 p-1: room for the outline of a field, which the scroll container would otherwise clip -->\n      <div class=\"-m-1 min-h-0 flex-1 overflow-auto p-1\">\n        <div>\n          @for (key of formKeys(); track key) {\n            <div>\n              <p class=\"px-2\">{{ `userProfile.data.${key}` | transloco }}</p>\n              <div\n                class=\"group flex flex-row rounded-md px-2 py-0.5\"\n                [class.ring-1]=\"!!fieldState('data.' + key)\"\n                [class.ring-destructive]=\"fieldState('data.' + key) === 'error'\"\n                [class.ring-green-600]=\"\n                  fieldState('data.' + key) === 'success'\n                \">\n                <div\n                  class=\"min-w-0 grow break-words whitespace-pre-line\"\n                  [class.text-muted-foreground]=\"!getDataValue('data', key)\">\n                  @if (propertyToEdit() === \"data.\" + key) {\n                    <textarea\n                      class=\"hover:outline-primary focus:outline-primary border-foreground/20 hover:bg-muted focus:bg-muted mt-2 w-full rounded-md border px-2 pt-1 hover:outline focus:outline\"\n                      id=\"user-profile-{{ key }}\"\n                      [(ngModel)]=\"value\"></textarea>\n                  } @else {\n                    {{\n                      getDataValue(\"data\", key) ||\n                        (\"userProfile.notDefined\" | transloco)\n                    }}\n                  }\n                </div>\n                @if (propertyToEdit() === \"data.\" + key) {\n                  <button\n                    variant=\"ghost\"\n                    [iconOnly]=\"true\"\n                    class=\"visible mx-2 cursor-pointer sm:invisible sm:group-hover:visible\"\n                    title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                    [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                    [disabled]=\"!!pending()\"\n                    (click)=\"onSaveData('data', key)\">\n                    <save-icon class=\"ml-2\" />\n                  </button>\n                  <button\n                    variant=\"ghost\"\n                    [iconOnly]=\"true\"\n                    class=\"visible cursor-pointer sm:invisible sm:group-hover:visible\"\n                    title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                    [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                    (click)=\"onCancelEdit()\">\n                    <UndoIcon />\n                  </button>\n                } @else {\n                  <button\n                    variant=\"ghost\"\n                    [iconOnly]=\"true\"\n                    class=\"visible mx-2 cursor-pointer sm:invisible sm:group-hover:visible\"\n                    title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                    [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                    (click)=\"onEdit('data', key)\">\n                    <EditIcon />\n                  </button>\n                  <button\n                    variant=\"ghost\"\n                    [iconOnly]=\"true\"\n                    class=\"text-destructive visible cursor-pointer sm:invisible sm:group-hover:visible\"\n                    title=\"{{ 'userProfile.deleteProperty' | transloco }}\"\n                    [attr.aria-label]=\"'userProfile.deleteProperty' | transloco\"\n                    [disabled]=\"!!pending() || !hasStoredValue('data', key)\"\n                    (click)=\"onDeleteData('data', key)\">\n                    <TrashIcon />\n                  </button>\n                }\n              </div>\n            </div>\n          }\n          @for (key of customData(); track key) {\n            <div>\n              <p class=\"px-2\">{{ key }}</p>\n              <div\n                class=\"group flex flex-row rounded-md px-2 py-0.5\"\n                [class.ring-1]=\"!!fieldState('customData.' + key)\"\n                [class.ring-destructive]=\"\n                  fieldState('customData.' + key) === 'error'\n                \"\n                [class.ring-green-600]=\"\n                  fieldState('customData.' + key) === 'success'\n                \">\n                <div\n                  class=\"min-w-0 grow break-words whitespace-pre-line\"\n                  [class.text-muted-foreground]=\"\n                    !getDataValue('customData', key)\n                  \">\n                  @if (propertyToEdit() === \"customData.\" + key) {\n                    <textarea\n                      class=\"hover:outline-primary focus:outline-primary border-foreground/20 hover:bg-muted focus:bg-muted mt-2 w-full rounded-md border px-2 pt-1 hover:outline focus:outline\"\n                      id=\"user-profile-{{ key }}\"\n                      [(ngModel)]=\"value\"></textarea>\n                  } @else {\n                    {{\n                      getDataValue(\"customData\", key) ||\n                        (\"userProfile.notDefined\" | transloco)\n                    }}\n                  }\n                </div>\n                @if (propertyToEdit() === \"customData.\" + key) {\n                  <button\n                    variant=\"ghost\"\n                    [iconOnly]=\"true\"\n                    class=\"visible mx-2 cursor-pointer sm:invisible sm:group-hover:visible\"\n                    title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                    [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                    [disabled]=\"!!pending()\"\n                    (click)=\"onSaveData('customData', key)\">\n                    <save-icon class=\"ml-2\" />\n                  </button>\n                  <button\n                    variant=\"ghost\"\n                    [iconOnly]=\"true\"\n                    class=\"visible cursor-pointer sm:invisible sm:group-hover:visible\"\n                    title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                    [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                    (click)=\"onCancelEdit()\">\n                    <UndoIcon />\n                  </button>\n                } @else {\n                  <button\n                    variant=\"ghost\"\n                    [iconOnly]=\"true\"\n                    class=\"visible mx-2 cursor-pointer sm:invisible sm:group-hover:visible\"\n                    title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                    [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                    (click)=\"onEdit('customData', key)\">\n                    <EditIcon />\n                  </button>\n                  <button\n                    variant=\"ghost\"\n                    [iconOnly]=\"true\"\n                    class=\"text-destructive visible cursor-pointer sm:invisible sm:group-hover:visible\"\n                    title=\"{{ 'userProfile.deleteProperty' | transloco }}\"\n                    [attr.aria-label]=\"'userProfile.deleteProperty' | transloco\"\n                    [disabled]=\"\n                      !!pending() || !hasStoredValue('customData', key)\n                    \"\n                    (click)=\"onDeleteData('customData', key)\">\n                    <TrashIcon />\n                  </button>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n} @else if (userProfileResource.isLoading()) {\n  <span>Loading...</span>\n} @else if (userProfileResource.error()) {\n  <p>Please contact an administrator to create your user profile.</p>\n}\n\n<!-- AVATAR UPLOAD -->\n<input\n  #avatarInput\n  class=\"hidden\"\n  type=\"file\"\n  accept=\"image/*\"\n  (change)=\"uploadAvatar($event)\" />\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: RouterModule }, { kind: "component", type: TrashIcon, selector: "trash-icon, TrashIcon", inputs: ["class"] }, { kind: "component", type: EditIcon, selector: "edit-icon, EditIcon, editicon", inputs: ["class"] }, { kind: "component", type: UndoIcon, selector: "UndoIcon, undoicon, undo-icon", inputs: ["class"] }, { kind: "component", type: SaveIcon, selector: "save-icon, SaveIcon", inputs: ["class"] }, { kind: "component", type: AvatarComponent, selector: "avatar, Avatar", inputs: ["class", "size"] }, { kind: "component", type: AvatarFallbackComponent, selector: "avatar-fallback, avatarfallback, AvatarFallback", inputs: ["class", "size"] }, { kind: "component", type: UserIcon, selector: "user-icon, UserIcon", inputs: ["class"] }, { kind: "component", type: AvatarImageComponent, selector: "avatar-image, AvatarImage, avatarimage", inputs: ["class", "src", "alt", "width", "height", "referrerPolicy", "crossOrigin"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size", "solid"] }, { kind: "component", type: ChangePasswordComponent, selector: "change-password, ChangePassword, changepassword", inputs: ["username", "alert", "redirectAfterSuccess", "redirectAfterCancel", "currentPassword", "newPassword", "confirmPassword"], outputs: ["success", "cancel", "currentPasswordChange", "newPasswordChange", "confirmPasswordChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: UserProfileFormComponent, decorators: [{
             type: Component,
@@ -18544,7 +18600,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImpo
                         AvatarImageComponent,
                         ButtonComponent,
                         ChangePasswordComponent
-                    ], providers: [provideTranslocoScope("user-profile", "login")], template: "@if (userProfileResource.hasValue()) {\n  @let profile = userProfile();\n  <div class=\"flex min-h-0 flex-1 flex-col gap-2 p-4\">\n    <div class=\"mb-4 flex\">\n      @if (allowProfilePhoto()) {\n        <!-- AVATAR -->\n        <Avatar\n          class=\"size-14 cursor-pointer\"\n          [class.ring-2]=\"!!fieldState('data.profilePhoto')\"\n          [class.ring-destructive]=\"fieldState('data.profilePhoto') === 'error'\"\n          [class.ring-green-600]=\"fieldState('data.profilePhoto') === 'success'\"\n          (click)=\"avatarInput.click()\">\n          @if (profile?.data?.profilePhoto) {\n            <AvatarImage\n              [src]=\"profile?.data?.profilePhoto!\"\n              width=\"44\"\n              height=\"44\"\n              alt=\"avatar\" />\n          }\n          <AvatarFallback class=\"text-lg\">\n            @if (initials()) {\n              <span>{{ initials() }}</span>\n            } @else {\n              <UserIcon class=\"size-7\" />\n            }\n          </AvatarFallback>\n        </Avatar>\n        @if (profile?.data?.profilePhoto) {\n          <button\n            variant=\"ghost\"\n            [iconOnly]=\"true\"\n            class=\"text-destructive cursor-pointer\"\n            title=\"{{ 'userProfile.deleteProperty' | transloco }}\"\n            [attr.aria-label]=\"'userProfile.deleteProperty' | transloco\"\n            [disabled]=\"!!pending()\"\n            (click)=\"onDeleteData('data', 'profilePhoto')\">\n            <TrashIcon />\n          </button>\n        }\n      }\n      <div class=\"grow\"></div>\n      <div class=\"flex flex-col gap-4\">\n        <!-- LANGUAGE -->\n        <select\n          class=\"hover:outline-primary focus:outline-primary border-foreground/10 bg-background hover:bg-muted focus:bg-muted h-8 rounded-md border px-2 hover:outline focus:outline\"\n          [(ngModel)]=\"currentLanguage\"\n          (change)=\"changeLanguage()\">\n          @for (lang of AllLanguages; track lang.code) {\n            <option [value]=\"lang.code\">\n              {{ lang.label }}\n            </option>\n          }\n        </select>\n        <!-- CHANGE PASSWORD -->\n        @if (allowChangePassword()) {\n          <button\n            [disabled]=\"changingPassword()\"\n            (click)=\"changingPassword.set(true)\">\n            {{ \"login.changePassword\" | transloco }}\n          </button>\n        }\n      </div>\n    </div>\n    <!-- always rendered, so the room is reserved and the layout doesn't shift when a message appears -->\n    <p\n      class=\"min-h-5 text-sm\"\n      role=\"status\"\n      [attr.aria-live]=\"feedback()?.type === 'error' ? 'assertive' : 'polite'\"\n      [class.text-destructive]=\"feedback()?.type === 'error'\"\n      [class.text-green-600]=\"feedback()?.type === 'success'\">\n      {{ feedback()?.message }}\n    </p>\n    @if (changingPassword()) {\n      <ChangePassword\n        [username]=\"username()\"\n        [redirectAfterSuccess]=\"false\"\n        [redirectAfterCancel]=\"false\"\n        (cancel)=\"changingPassword.set(false)\"\n        (success)=\"changingPassword.set(false)\" />\n    } @else {\n      <!-- -m-1 p-1: room for the outline of a field, which the scroll container would otherwise clip -->\n      <div class=\"-m-1 min-h-0 flex-1 overflow-auto p-1\">\n        <div>\n          @for (key of formKeys(); track key) {\n            <div>\n              <p class=\"px-2\">{{ `userProfile.data.${key}` | transloco }}</p>\n              <div\n                class=\"group flex flex-row rounded-md px-2 py-0.5\"\n                [class.ring-1]=\"!!fieldState('data.' + key)\"\n                [class.ring-destructive]=\"fieldState('data.' + key) === 'error'\"\n                [class.ring-green-600]=\"\n                  fieldState('data.' + key) === 'success'\n                \">\n                <div\n                  class=\"min-w-0 grow break-words whitespace-pre-line\"\n                  [class.text-muted-foreground]=\"!getDataValue('data', key)\">\n                  @if (propertyToEdit() === \"data.\" + key) {\n                    <textarea\n                      class=\"hover:outline-primary focus:outline-primary border-foreground/20 hover:bg-muted focus:bg-muted mt-2 w-full rounded-md border px-2 pt-1 hover:outline focus:outline\"\n                      id=\"user-profile-{{ key }}\"\n                      [(ngModel)]=\"value\"></textarea>\n                  } @else {\n                    {{\n                      getDataValue(\"data\", key) ||\n                        (\"userProfile.notDefined\" | transloco)\n                    }}\n                  }\n                </div>\n                @if (propertyToEdit() === \"data.\" + key) {\n                  <button\n                    variant=\"ghost\"\n                    [iconOnly]=\"true\"\n                    class=\"visible mx-2 cursor-pointer sm:invisible sm:group-hover:visible\"\n                    title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                    [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                    [disabled]=\"!!pending()\"\n                    (click)=\"onSaveData('data', key)\">\n                    <save-icon class=\"ml-2\" />\n                  </button>\n                  <button\n                    variant=\"ghost\"\n                    [iconOnly]=\"true\"\n                    class=\"visible cursor-pointer sm:invisible sm:group-hover:visible\"\n                    title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                    [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                    (click)=\"onCancelEdit()\">\n                    <UndoIcon />\n                  </button>\n                } @else {\n                  <button\n                    variant=\"ghost\"\n                    [iconOnly]=\"true\"\n                    class=\"visible mx-2 cursor-pointer sm:invisible sm:group-hover:visible\"\n                    title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                    [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                    (click)=\"onEdit('data', key)\">\n                    <EditIcon />\n                  </button>\n                  <button\n                    variant=\"ghost\"\n                    [iconOnly]=\"true\"\n                    class=\"text-destructive visible cursor-pointer sm:invisible sm:group-hover:visible\"\n                    title=\"{{ 'userProfile.deleteProperty' | transloco }}\"\n                    [attr.aria-label]=\"'userProfile.deleteProperty' | transloco\"\n                    [disabled]=\"!!pending()\"\n                    (click)=\"onDeleteData('data', key)\">\n                    <TrashIcon />\n                  </button>\n                }\n              </div>\n            </div>\n          }\n          @for (key of customData(); track key) {\n            <div>\n              <p class=\"px-2\">{{ key }}</p>\n              <div\n                class=\"group flex flex-row rounded-md px-2 py-0.5\"\n                [class.ring-1]=\"!!fieldState('customData.' + key)\"\n                [class.ring-destructive]=\"\n                  fieldState('customData.' + key) === 'error'\n                \"\n                [class.ring-green-600]=\"\n                  fieldState('customData.' + key) === 'success'\n                \">\n                <div\n                  class=\"min-w-0 grow break-words whitespace-pre-line\"\n                  [class.text-muted-foreground]=\"\n                    !getDataValue('customData', key)\n                  \">\n                  @if (propertyToEdit() === \"customData.\" + key) {\n                    <textarea\n                      class=\"hover:outline-primary focus:outline-primary border-foreground/20 hover:bg-muted focus:bg-muted mt-2 w-full rounded-md border px-2 pt-1 hover:outline focus:outline\"\n                      id=\"user-profile-{{ key }}\"\n                      [(ngModel)]=\"value\"></textarea>\n                  } @else {\n                    {{\n                      getDataValue(\"customData\", key) ||\n                        (\"userProfile.notDefined\" | transloco)\n                    }}\n                  }\n                </div>\n                @if (propertyToEdit() === \"customData.\" + key) {\n                  <button\n                    variant=\"ghost\"\n                    [iconOnly]=\"true\"\n                    class=\"visible mx-2 cursor-pointer sm:invisible sm:group-hover:visible\"\n                    title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                    [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                    [disabled]=\"!!pending()\"\n                    (click)=\"onSaveData('customData', key)\">\n                    <save-icon class=\"ml-2\" />\n                  </button>\n                  <button\n                    variant=\"ghost\"\n                    [iconOnly]=\"true\"\n                    class=\"visible cursor-pointer sm:invisible sm:group-hover:visible\"\n                    title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                    [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                    (click)=\"onCancelEdit()\">\n                    <UndoIcon />\n                  </button>\n                } @else {\n                  <button\n                    variant=\"ghost\"\n                    [iconOnly]=\"true\"\n                    class=\"visible mx-2 cursor-pointer sm:invisible sm:group-hover:visible\"\n                    title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                    [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                    (click)=\"onEdit('customData', key)\">\n                    <EditIcon />\n                  </button>\n                  <button\n                    variant=\"ghost\"\n                    [iconOnly]=\"true\"\n                    class=\"text-destructive visible cursor-pointer sm:invisible sm:group-hover:visible\"\n                    title=\"{{ 'userProfile.deleteProperty' | transloco }}\"\n                    [attr.aria-label]=\"'userProfile.deleteProperty' | transloco\"\n                    [disabled]=\"!!pending()\"\n                    (click)=\"onDeleteData('customData', key)\">\n                    <TrashIcon />\n                  </button>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n} @else if (userProfileResource.isLoading()) {\n  <span>Loading...</span>\n} @else if (userProfileResource.error()) {\n  <p>Please contact an administrator to create your user profile.</p>\n}\n\n<!-- AVATAR UPLOAD -->\n<input\n  #avatarInput\n  class=\"hidden\"\n  type=\"file\"\n  accept=\"image/*\"\n  (change)=\"uploadAvatar($event)\" />\n" }]
+                    ], providers: [provideTranslocoScope("user-profile", "login")], template: "@if (userProfileResource.hasValue()) {\n  @let profile = userProfile();\n  <div class=\"flex min-h-0 flex-1 flex-col gap-2 p-4\">\n    <div class=\"mb-4 flex\">\n      @if (allowProfilePhoto()) {\n        <!-- AVATAR -->\n        <Avatar\n          class=\"size-14 cursor-pointer\"\n          [class.ring-2]=\"!!fieldState('data.profilePhoto')\"\n          [class.ring-destructive]=\"fieldState('data.profilePhoto') === 'error'\"\n          [class.ring-green-600]=\"fieldState('data.profilePhoto') === 'success'\"\n          (click)=\"avatarInput.click()\">\n          @if (profile?.data?.profilePhoto) {\n            <AvatarImage\n              [src]=\"profile?.data?.profilePhoto!\"\n              width=\"44\"\n              height=\"44\"\n              alt=\"avatar\" />\n          }\n          <AvatarFallback class=\"text-lg\">\n            @if (initials()) {\n              <span>{{ initials() }}</span>\n            } @else {\n              <UserIcon class=\"size-7\" />\n            }\n          </AvatarFallback>\n        </Avatar>\n        @if (profile?.data?.profilePhoto) {\n          <button\n            variant=\"ghost\"\n            [iconOnly]=\"true\"\n            class=\"text-destructive cursor-pointer\"\n            title=\"{{ 'userProfile.deleteProperty' | transloco }}\"\n            [attr.aria-label]=\"'userProfile.deleteProperty' | transloco\"\n            [disabled]=\"!!pending()\"\n            (click)=\"onDeleteData('data', 'profilePhoto')\">\n            <TrashIcon />\n          </button>\n        }\n      }\n      <div class=\"grow\"></div>\n      <div class=\"flex flex-col gap-4\">\n        <!-- LANGUAGE -->\n        <select\n          class=\"hover:outline-primary focus:outline-primary border-foreground/10 bg-background hover:bg-muted focus:bg-muted h-8 rounded-md border px-2 hover:outline focus:outline\"\n          [(ngModel)]=\"currentLanguage\"\n          (change)=\"changeLanguage()\">\n          @for (lang of AllLanguages; track lang.code) {\n            <option [value]=\"lang.code\">\n              {{ lang.label }}\n            </option>\n          }\n        </select>\n        <!-- CHANGE PASSWORD -->\n        @if (allowChangePassword()) {\n          <button\n            [disabled]=\"changingPassword()\"\n            (click)=\"changingPassword.set(true)\">\n            {{ \"login.changePassword\" | transloco }}\n          </button>\n        }\n      </div>\n    </div>\n    <!-- always rendered, so the room is reserved and the layout doesn't shift when a message appears -->\n    <p\n      class=\"min-h-5 text-sm\"\n      role=\"status\"\n      [attr.aria-live]=\"feedback()?.type === 'error' ? 'assertive' : 'polite'\"\n      [class.text-destructive]=\"feedback()?.type === 'error'\"\n      [class.text-green-600]=\"feedback()?.type === 'success'\">\n      {{ feedback()?.message }}\n    </p>\n    @if (changingPassword()) {\n      <ChangePassword\n        [username]=\"username()\"\n        [redirectAfterSuccess]=\"false\"\n        [redirectAfterCancel]=\"false\"\n        (cancel)=\"changingPassword.set(false)\"\n        (success)=\"changingPassword.set(false)\" />\n    } @else {\n      <!-- -m-1 p-1: room for the outline of a field, which the scroll container would otherwise clip -->\n      <div class=\"-m-1 min-h-0 flex-1 overflow-auto p-1\">\n        <div>\n          @for (key of formKeys(); track key) {\n            <div>\n              <p class=\"px-2\">{{ `userProfile.data.${key}` | transloco }}</p>\n              <div\n                class=\"group flex flex-row rounded-md px-2 py-0.5\"\n                [class.ring-1]=\"!!fieldState('data.' + key)\"\n                [class.ring-destructive]=\"fieldState('data.' + key) === 'error'\"\n                [class.ring-green-600]=\"\n                  fieldState('data.' + key) === 'success'\n                \">\n                <div\n                  class=\"min-w-0 grow break-words whitespace-pre-line\"\n                  [class.text-muted-foreground]=\"!getDataValue('data', key)\">\n                  @if (propertyToEdit() === \"data.\" + key) {\n                    <textarea\n                      class=\"hover:outline-primary focus:outline-primary border-foreground/20 hover:bg-muted focus:bg-muted mt-2 w-full rounded-md border px-2 pt-1 hover:outline focus:outline\"\n                      id=\"user-profile-{{ key }}\"\n                      [(ngModel)]=\"value\"></textarea>\n                  } @else {\n                    {{\n                      getDataValue(\"data\", key) ||\n                        (\"userProfile.notDefined\" | transloco)\n                    }}\n                  }\n                </div>\n                @if (propertyToEdit() === \"data.\" + key) {\n                  <button\n                    variant=\"ghost\"\n                    [iconOnly]=\"true\"\n                    class=\"visible mx-2 cursor-pointer sm:invisible sm:group-hover:visible\"\n                    title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                    [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                    [disabled]=\"!!pending()\"\n                    (click)=\"onSaveData('data', key)\">\n                    <save-icon class=\"ml-2\" />\n                  </button>\n                  <button\n                    variant=\"ghost\"\n                    [iconOnly]=\"true\"\n                    class=\"visible cursor-pointer sm:invisible sm:group-hover:visible\"\n                    title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                    [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                    (click)=\"onCancelEdit()\">\n                    <UndoIcon />\n                  </button>\n                } @else {\n                  <button\n                    variant=\"ghost\"\n                    [iconOnly]=\"true\"\n                    class=\"visible mx-2 cursor-pointer sm:invisible sm:group-hover:visible\"\n                    title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                    [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                    (click)=\"onEdit('data', key)\">\n                    <EditIcon />\n                  </button>\n                  <button\n                    variant=\"ghost\"\n                    [iconOnly]=\"true\"\n                    class=\"text-destructive visible cursor-pointer sm:invisible sm:group-hover:visible\"\n                    title=\"{{ 'userProfile.deleteProperty' | transloco }}\"\n                    [attr.aria-label]=\"'userProfile.deleteProperty' | transloco\"\n                    [disabled]=\"!!pending() || !hasStoredValue('data', key)\"\n                    (click)=\"onDeleteData('data', key)\">\n                    <TrashIcon />\n                  </button>\n                }\n              </div>\n            </div>\n          }\n          @for (key of customData(); track key) {\n            <div>\n              <p class=\"px-2\">{{ key }}</p>\n              <div\n                class=\"group flex flex-row rounded-md px-2 py-0.5\"\n                [class.ring-1]=\"!!fieldState('customData.' + key)\"\n                [class.ring-destructive]=\"\n                  fieldState('customData.' + key) === 'error'\n                \"\n                [class.ring-green-600]=\"\n                  fieldState('customData.' + key) === 'success'\n                \">\n                <div\n                  class=\"min-w-0 grow break-words whitespace-pre-line\"\n                  [class.text-muted-foreground]=\"\n                    !getDataValue('customData', key)\n                  \">\n                  @if (propertyToEdit() === \"customData.\" + key) {\n                    <textarea\n                      class=\"hover:outline-primary focus:outline-primary border-foreground/20 hover:bg-muted focus:bg-muted mt-2 w-full rounded-md border px-2 pt-1 hover:outline focus:outline\"\n                      id=\"user-profile-{{ key }}\"\n                      [(ngModel)]=\"value\"></textarea>\n                  } @else {\n                    {{\n                      getDataValue(\"customData\", key) ||\n                        (\"userProfile.notDefined\" | transloco)\n                    }}\n                  }\n                </div>\n                @if (propertyToEdit() === \"customData.\" + key) {\n                  <button\n                    variant=\"ghost\"\n                    [iconOnly]=\"true\"\n                    class=\"visible mx-2 cursor-pointer sm:invisible sm:group-hover:visible\"\n                    title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                    [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                    [disabled]=\"!!pending()\"\n                    (click)=\"onSaveData('customData', key)\">\n                    <save-icon class=\"ml-2\" />\n                  </button>\n                  <button\n                    variant=\"ghost\"\n                    [iconOnly]=\"true\"\n                    class=\"visible cursor-pointer sm:invisible sm:group-hover:visible\"\n                    title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                    [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                    (click)=\"onCancelEdit()\">\n                    <UndoIcon />\n                  </button>\n                } @else {\n                  <button\n                    variant=\"ghost\"\n                    [iconOnly]=\"true\"\n                    class=\"visible mx-2 cursor-pointer sm:invisible sm:group-hover:visible\"\n                    title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                    [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                    (click)=\"onEdit('customData', key)\">\n                    <EditIcon />\n                  </button>\n                  <button\n                    variant=\"ghost\"\n                    [iconOnly]=\"true\"\n                    class=\"text-destructive visible cursor-pointer sm:invisible sm:group-hover:visible\"\n                    title=\"{{ 'userProfile.deleteProperty' | transloco }}\"\n                    [attr.aria-label]=\"'userProfile.deleteProperty' | transloco\"\n                    [disabled]=\"\n                      !!pending() || !hasStoredValue('customData', key)\n                    \"\n                    (click)=\"onDeleteData('customData', key)\">\n                    <TrashIcon />\n                  </button>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n} @else if (userProfileResource.isLoading()) {\n  <span>Loading...</span>\n} @else if (userProfileResource.error()) {\n  <p>Please contact an administrator to create your user profile.</p>\n}\n\n<!-- AVATAR UPLOAD -->\n<input\n  #avatarInput\n  class=\"hidden\"\n  type=\"file\"\n  accept=\"image/*\"\n  (change)=\"uploadAvatar($event)\" />\n" }]
         }], ctorParameters: () => [], propDecorators: { createInputElement: [{ type: i0.ViewChild, args: ["avatarInput", { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], currentLanguage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentLanguage", required: false }] }, { type: i0.Output, args: ["currentLanguageChange"] }] } });
 
 class UserProfileDialog {