@keycloakify/angular 0.0.1-rc.0 → 0.0.1-rc.10

package/src/login/components/logout-other-sessions/logout-other-sessions.component.ts

@@ -1,12 +1,14 @@
-import { ChangeDetectionStrategy, Component, forwardRef, inject } from "@angular/core";
-import { CLASSES, USE_DEFAULT_CSS } from "@keycloakify/angular/lib/public-api";
-import { ClassKey } from "keycloakify/login/lib/kcClsx";
-import { ComponentReference } from "@keycloakify/angular/login/classes/component-reference.class";
-import { KcClassDirective } from "@keycloakify/angular/login/directives/kc-class.directive";
-import { MsgStrPipe } from "@keycloakify/angular/login/pipes/msg-str.pipe";
+import { ChangeDetectionStrategy, Component, forwardRef, inject } from '@angular/core';
+import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css.token';
+import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference.class';
+import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class.directive';
+import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes.token';
+import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n.token';
+import { type ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { type I18n } from '../../i18n';
 
 @Component({
-    selector: "kc-logout-other-sessions",
+    selector: 'kc-logout-other-sessions',
     styles: [
         `
             :host {
@@ -15,9 +17,9 @@ import { MsgStrPipe } from "@keycloakify/angular/login/pipes/msg-str.pipe";
         `
     ],
     standalone: true,
-    imports: [KcClassDirective, MsgStrPipe],
+    imports: [KcClassDirective],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    templateUrl: "./logout-other-sessions.component.html",
+    templateUrl: './logout-other-sessions.component.html',
     providers: [
         {
             provide: ComponentReference,
@@ -26,6 +28,7 @@ import { MsgStrPipe } from "@keycloakify/angular/login/pipes/msg-str.pipe";
     ]
 })
 export class LogoutOtherSessionsComponent extends ComponentReference {
+    i18n = inject<I18n>(LOGIN_I18N);
     override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
-    override classes = inject<Partial<Record<ClassKey, string>>>(CLASSES);
+    override classes = inject<Partial<Record<ClassKey, string>>>(LOGIN_CLASSES);
 }

package/src/login/components/password-wrapper/password-wrapper.component.html

@@ -1,15 +1,15 @@
 <div [kcClass]="'kcInputGroup'">
-  <ng-content></ng-content>
-  <button
-    type="button"
-    [kcClass]="'kcFormPasswordVisibilityButtonClass'"
-    [attr.aria-label]="(isPasswordRevealed() ? 'hidePassword' : 'showPassword') | msgStr"
-    [attr.aria-controls]="passwordInputId()"
-    (click)="togglePasswordVisibility()"
-  >
-    <i
-      [kcClass]="isPasswordRevealed() ? 'kcFormPasswordVisibilityIconHide' : 'kcFormPasswordVisibilityIconShow'"
-      aria-hidden="true"
-    ></i>
-  </button>
+    <ng-content></ng-content>
+    <button
+        type="button"
+        [kcClass]="'kcFormPasswordVisibilityButtonClass'"
+        [attr.aria-label]="i18n.msgStr(isPasswordRevealed() ? 'hidePassword' : 'showPassword')"
+        [attr.aria-controls]="passwordInputId()"
+        (click)="togglePasswordVisibility()"
+    >
+        <i
+            [kcClass]="isPasswordRevealed() ? 'kcFormPasswordVisibilityIconHide' : 'kcFormPasswordVisibilityIconShow'"
+            aria-hidden="true"
+        ></i>
+    </button>
 </div>

package/src/login/components/password-wrapper/password-wrapper.component.ts

@@ -1,22 +1,15 @@
-import { AsyncPipe } from "@angular/common";
-import {
-    ChangeDetectionStrategy,
-    Component,
-    forwardRef,
-    inject,
-    input,
-    Renderer2,
-    signal,
-    WritableSignal
-} from "@angular/core";
-import { CLASSES, USE_DEFAULT_CSS } from "@keycloakify/angular/lib/public-api";
-import { ClassKey } from "keycloakify/login/lib/kcClsx";
-import { ComponentReference } from "@keycloakify/angular/login/classes/component-reference.class";
-import { KcClassDirective } from "@keycloakify/angular/login/directives/kc-class.directive";
-import { MsgStrPipe } from "@keycloakify/angular/login/pipes/msg-str.pipe";
+import { AsyncPipe } from '@angular/common';
+import { ChangeDetectionStrategy, Component, forwardRef, inject, input, Renderer2, signal, WritableSignal } from '@angular/core';
+import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css.token';
+import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference.class';
+import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class.directive';
+import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes.token';
+import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n.token';
+import { type ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { type I18n } from '../../i18n';
 
 @Component({
-    selector: "kc-password-wrapper",
+    selector: 'kc-password-wrapper',
     styles: [
         `
             :host {
@@ -26,8 +19,8 @@ import { MsgStrPipe } from "@keycloakify/angular/login/pipes/msg-str.pipe";
     ],
     standalone: true,
     changeDetection: ChangeDetectionStrategy.OnPush,
-    imports: [KcClassDirective, AsyncPipe, MsgStrPipe],
-    templateUrl: "./password-wrapper.component.html",
+    imports: [KcClassDirective, AsyncPipe],
+    templateUrl: './password-wrapper.component.html',
     providers: [
         {
             provide: ComponentReference,
@@ -36,10 +29,11 @@ import { MsgStrPipe } from "@keycloakify/angular/login/pipes/msg-str.pipe";
     ]
 })
 export class PasswordWrapperComponent extends ComponentReference {
+    i18n = inject<I18n>(LOGIN_I18N);
     private renderer = inject(Renderer2);
     passwordInputId = input.required<string>();
     override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
-    override classes = inject<Partial<Record<ClassKey, string>>>(CLASSES);
+    override classes = inject<Partial<Record<ClassKey, string>>>(LOGIN_CLASSES);
 
     isPasswordRevealed: WritableSignal<boolean> = signal(false);
 
@@ -51,11 +45,7 @@ export class PasswordWrapperComponent extends ComponentReference {
     private setPasswordInputType(): void {
         const input = document.getElementById(this.passwordInputId());
         if (input) {
-            this.renderer.setProperty(
-                input,
-                "type",
-                this.isPasswordRevealed() ? "text" : "password"
-            );
+            this.renderer.setProperty(input, 'type', this.isPasswordRevealed() ? 'text' : 'password');
         }
     }
 }

package/src/login/components/select-tag/select-tag.component.html

@@ -1,31 +1,31 @@
 @let attr = attribute();
 @let multiple = isMultiple();
 @if (attr) {
-  <select
-    [id]="attr.name"
-    [name]="attr.name"
-    [value]="valueOrValues()"
-    [kcClass]="'kcInputClass'"
-    [attr.aria-invalid]="!!displayableErrors()?.length"
-    [disabled]="attr.readOnly"
-    [multiple]="multiple"
-    [size]="!attr.annotations.inputTypeSize ? undefined : (attr.annotations.inputTypeSize | toNumber)"
-    (change)="onChange($event)"
-    (blur)="onBlur()"
-  >
-    @if (!multiple) {
-      <option value=""></option>
-    }
-    @for (option of options(); track option) {
-      <option [value]="option">
-        @if (!!attr.annotations.inputOptionLabels) {
-          {{ attr.annotations.inputOptionLabels[option] ?? option | advancedMsgStr }}
-        } @else if (!!attr.annotations.inputOptionLabelsI18nPrefix) {
-          {{ attr.annotations.inputOptionLabelsI18nPrefix + '.' + option | advancedMsgStr }}
-        } @else {
-          {{ option }}
+    <select
+        [id]="attr.name"
+        [name]="attr.name"
+        [value]="valueOrValues()"
+        [kcClass]="'kcInputClass'"
+        [attr.aria-invalid]="!!displayableErrors()?.length"
+        [disabled]="attr.readOnly"
+        [multiple]="multiple"
+        [size]="!attr.annotations.inputTypeSize ? undefined : (attr.annotations.inputTypeSize | toNumber)"
+        (change)="onChange($event)"
+        (blur)="onBlur()"
+    >
+        @if (!multiple) {
+            <option value=""></option>
         }
-      </option>
-    }
-  </select>
+        @for (option of options(); track option) {
+            <option [value]="option">
+                @if (!!attr.annotations.inputOptionLabels) {
+                    {{ i18n.advancedMsgStr(attr.annotations.inputOptionLabels[option] ?? option) }}
+                } @else if (!!attr.annotations.inputOptionLabelsI18nPrefix) {
+                    {{ i18n.advancedMsgStr(attr.annotations.inputOptionLabelsI18nPrefix + '.' + option) }}
+                } @else {
+                    {{ option }}
+                }
+            </option>
+        }
+    </select>
 }

package/src/login/components/select-tag/select-tag.component.ts

@@ -1,23 +1,14 @@
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    forwardRef,
-    inject,
-    input,
-    output
-} from "@angular/core";
-import { CLASSES, USE_DEFAULT_CSS } from "@keycloakify/angular/lib/public-api";
-import { Attribute } from "keycloakify/login/KcContext";
-import { ClassKey } from "keycloakify/login/lib/kcClsx";
-import { ComponentReference } from "@keycloakify/angular/login/classes/component-reference.class";
-import { KcClassDirective } from "@keycloakify/angular/login/directives/kc-class.directive";
-import { AdvancedMsgStrPipe } from "@keycloakify/angular/login/pipes/advanced-msg-str.pipe";
-import { ToNumberPipe } from "@keycloakify/angular/login/pipes/to-number.pipe";
-import {
-    FormAction,
-    FormFieldError
-} from "@keycloakify/angular/login/services/user-profile-form.service";
+import { ChangeDetectionStrategy, Component, computed, forwardRef, inject, input, output } from '@angular/core';
+import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css.token';
+import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference.class';
+import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class.directive';
+import { ToNumberPipe } from '@keycloakify/angular/lib/pipes/to-number.pipe';
+import { type FormAction, type FormFieldError } from '@keycloakify/angular/login/services/user-profile-form.service';
+import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes.token';
+import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n.token';
+import { type Attribute } from 'keycloakify/login/KcContext';
+import { type ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { type I18n } from '../../i18n';
 
 @Component({
     standalone: true,
@@ -28,9 +19,9 @@ import {
             }
         `
     ],
-    imports: [KcClassDirective, ToNumberPipe, AdvancedMsgStrPipe],
-    selector: "kc-select-tag",
-    templateUrl: "select-tag.component.html",
+    imports: [KcClassDirective, ToNumberPipe],
+    selector: 'kc-select-tag',
+    templateUrl: 'select-tag.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [
         {
@@ -40,15 +31,16 @@ import {
     ]
 })
 export class SelectTagComponent extends ComponentReference {
+    i18n = inject<I18n>(LOGIN_I18N);
     attribute = input<Attribute>();
     valueOrValues = input<string | string[]>();
     displayableErrors = input<FormFieldError[]>();
     dispatchFormAction = output<FormAction>();
     override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
-    override classes = inject<Partial<Record<ClassKey, string>>>(CLASSES);
+    override classes = inject<Partial<Record<ClassKey, string>>>(LOGIN_CLASSES);
 
     isMultiple = computed(() => {
-        return this.attribute()?.annotations?.inputType === "multiselect";
+        return this.attribute()?.annotations?.inputType === 'multiselect';
     });
 
     options = computed(() => {
@@ -62,9 +54,7 @@ export class SelectTagComponent extends ComponentReference {
                         break walk;
                     }
 
-                    const validator = (
-                        attribute.validators as Record<string, { options?: string[] }>
-                    )[inputOptionsFromValidation];
+                    const validator = (attribute.validators as Record<string, { options?: string[] }>)[inputOptionsFromValidation];
 
                     if (validator === undefined) {
                         break walk;
@@ -85,13 +75,11 @@ export class SelectTagComponent extends ComponentReference {
 
     onChange(event: Event) {
         this.dispatchFormAction.emit({
-            action: "update",
-            name: this.attribute()?.name ?? "",
+            action: 'update',
+            name: this.attribute()?.name ?? '',
             valueOrValues: (() => {
                 if (this.isMultiple()) {
-                    return Array.from(
-                        (event.target as HTMLSelectElement).selectedOptions
-                    ).map(option => option.value);
+                    return Array.from((event.target as HTMLSelectElement).selectedOptions).map(option => option.value);
                 }
 
                 return (event.target as HTMLSelectElement).value;
@@ -101,8 +89,8 @@ export class SelectTagComponent extends ComponentReference {
 
     onBlur() {
         this.dispatchFormAction.emit({
-            action: "focus lost",
-            name: this.attribute()?.name ?? "",
+            action: 'focus lost',
+            name: this.attribute()?.name ?? '',
             fieldIndex: undefined
         });
     }

package/src/login/components/textarea-tag/textarea-tag.component.html

@@ -1,18 +1,16 @@
 @let attr = attribute();
 @if (attr) {
-  <textarea
-    [id]="attr.name"
-    [name]="attr.name"
-    [kcClass]="'kcInputClass'"
-    [attr.aria-invalid]="!!displayableErrors()?.length"
-    [disabled]="attr.readOnly"
-    [cols]="attr.annotations.inputTypeCols === undefined ? undefined : (attr.annotations.inputTypeCols | toNumber)"
-    [rows]="attr.annotations.inputTypeRows === undefined ? undefined : (attr.annotations.inputTypeRows | toNumber)"
-    [maxLength]="
-      attr.annotations.inputTypeMaxlength === undefined ? undefined : (attr.annotations.inputTypeMaxlength | toNumber)
-    "
-    [value]="value()"
-    (change)="onChange($event)"
-    (blur)="onBlur()"
-  ></textarea>
+    <textarea
+        [id]="attr.name"
+        [name]="attr.name"
+        [kcClass]="'kcInputClass'"
+        [attr.aria-invalid]="!!displayableErrors()?.length"
+        [disabled]="attr.readOnly"
+        [cols]="attr.annotations.inputTypeCols === undefined ? undefined : (attr.annotations.inputTypeCols | toNumber)"
+        [rows]="attr.annotations.inputTypeRows === undefined ? undefined : (attr.annotations.inputTypeRows | toNumber)"
+        [maxLength]="attr.annotations.inputTypeMaxlength === undefined ? undefined : (attr.annotations.inputTypeMaxlength | toNumber)"
+        [value]="value()"
+        (change)="onChange($event)"
+        (blur)="onBlur()"
+    ></textarea>
 }

package/src/login/components/textarea-tag/textarea-tag.component.ts

@@ -1,21 +1,12 @@
-import {
-    ChangeDetectionStrategy,
-    Component,
-    forwardRef,
-    inject,
-    input,
-    output
-} from "@angular/core";
-import { CLASSES, USE_DEFAULT_CSS } from "@keycloakify/angular/lib/public-api";
-import { Attribute } from "keycloakify/login/KcContext";
-import { ClassKey } from "keycloakify/login/lib/kcClsx";
-import { ComponentReference } from "@keycloakify/angular/login/classes/component-reference.class";
-import { KcClassDirective } from "@keycloakify/angular/login/directives/kc-class.directive";
-import { ToNumberPipe } from "@keycloakify/angular/login/pipes/to-number.pipe";
-import {
-    FormAction,
-    FormFieldError
-} from "@keycloakify/angular/login/services/user-profile-form.service";
+import { ChangeDetectionStrategy, Component, forwardRef, inject, input, output } from '@angular/core';
+import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css.token';
+import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference.class';
+import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class.directive';
+import { ToNumberPipe } from '@keycloakify/angular/lib/pipes/to-number.pipe';
+import { type FormAction, type FormFieldError } from '@keycloakify/angular/login/services/user-profile-form.service';
+import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes.token';
+import { type Attribute } from 'keycloakify/login/KcContext';
+import { type ClassKey } from 'keycloakify/login/lib/kcClsx';
 
 @Component({
     standalone: true,
@@ -27,8 +18,8 @@ import {
         `
     ],
     imports: [KcClassDirective, ToNumberPipe],
-    selector: "kc-textarea-tag",
-    templateUrl: "textarea-tag.component.html",
+    selector: 'kc-textarea-tag',
+    templateUrl: 'textarea-tag.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [
         {
@@ -43,20 +34,20 @@ export class TextareaTagComponent extends ComponentReference {
     displayableErrors = input<FormFieldError[]>();
     dispatchFormAction = output<FormAction>();
     override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
-    override classes = inject<Partial<Record<ClassKey, string>>>(CLASSES);
+    override classes = inject<Partial<Record<ClassKey, string>>>(LOGIN_CLASSES);
 
     onChange(event: Event) {
         this.dispatchFormAction.emit({
-            action: "update",
-            name: this.attribute()?.name ?? "",
+            action: 'update',
+            name: this.attribute()?.name ?? '',
             valueOrValues: (event.target as HTMLTextAreaElement).value
         });
     }
 
     onBlur() {
         this.dispatchFormAction.emit({
-            action: "focus lost",
-            name: this.attribute()?.name ?? "",
+            action: 'focus lost',
+            name: this.attribute()?.name ?? '',
             fieldIndex: undefined
         });
     }

package/src/login/components/user-profile-form-fields/user-profile-form-fields.component.html

@@ -1,85 +1,82 @@
 @let formFieldStates = formState().formFieldStates;
 
 @for (fieldState of formFieldStates; track fieldState.attribute) {
-  <!-- [groupNameRef]="groupNameRef"
-  TODO: verify this logic
-  -->
-  <kc-group-label [attribute]="fieldState.attribute"> </kc-group-label>
+    <kc-group-label [attribute]="fieldState.attribute"> </kc-group-label>
 
-  @if (beforeField) {
-    <ng-container
-      [ngTemplateOutlet]="beforeField"
-      [ngTemplateOutletContext]="{
-        attribute: fieldState.attribute,
-        valueOrValues: fieldState.valueOrValues,
-        displayableErrors: fieldState.displayableErrors,
-      }"
+    @if (beforeField) {
+        <ng-container
+            [ngTemplateOutlet]="beforeField"
+            [ngTemplateOutletContext]="{
+                attribute: fieldState.attribute,
+                valueOrValues: fieldState.valueOrValues,
+                displayableErrors: fieldState.displayableErrors
+            }"
+        >
+        </ng-container>
+    }
+
+    <div
+        [kcClass]="'kcFormGroupClass'"
+        [style.display]="fieldState.attribute.name === 'password-confirm' && !doMakeUserConfirmPassword ? 'none' : 'block'"
     >
-    </ng-container>
-  }
+        <div [kcClass]="'kcLabelWrapperClass'">
+            <label
+                [for]="fieldState.attribute.name"
+                [kcClass]="'kcLabelClass'"
+            >
+                {{ i18n.advancedMsgStr(fieldState.attribute.displayName ?? '') }}
+                @if (fieldState.attribute.required) {
+                    *
+                }
+            </label>
+        </div>
 
-  <div
-    [kcClass]="'kcFormGroupClass'"
-    [style.display]="fieldState.attribute.name === 'password-confirm' && !doMakeUserConfirmPassword ? 'none' : 'block'"
-  >
-    <div [kcClass]="'kcLabelWrapperClass'">
-      <label
-        [for]="fieldState.attribute.name"
-        [kcClass]="'kcLabelClass'"
-      >
-        {{ fieldState.attribute.displayName ?? '' | advancedMsgStr }}
-        @if (fieldState.attribute.required) {
-          *
-        }
-      </label>
-    </div>
+        <div [kcClass]="'kcInputWrapperClass'">
+            @if (fieldState.attribute.annotations.inputHelperTextBefore) {
+                <div
+                    [kcClass]="'kcInputHelperTextBeforeClass'"
+                    [id]="'form-help-text-before-' + fieldState.attribute.name"
+                    aria-live="polite"
+                >
+                    {{ i18n.advancedMsgStr(fieldState.attribute.annotations.inputHelperTextBefore) }}
+                </div>
+            }
 
-    <div [kcClass]="'kcInputWrapperClass'">
-      @if (fieldState.attribute.annotations.inputHelperTextBefore) {
-        <div
-          [kcClass]="'kcInputHelperTextBeforeClass'"
-          [id]="'form-help-text-before-' + fieldState.attribute.name"
-          aria-live="polite"
-        >
-          {{ fieldState.attribute.annotations.inputHelperTextBefore | advancedMsgStr }}
-        </div>
-      }
+            <kc-input-field-by-type
+                [attribute]="fieldState.attribute"
+                [valueOrValues]="fieldState.valueOrValues"
+                [displayableErrors]="fieldState.displayableErrors"
+                (dispatchFormAction)="onDispatch($event)"
+            >
+            </kc-input-field-by-type>
 
-      <kc-input-field-by-type
-        [attribute]="fieldState.attribute"
-        [valueOrValues]="fieldState.valueOrValues"
-        [displayableErrors]="fieldState.displayableErrors"
-        (dispatchFormAction)="onDispatch($event)"
-      >
-      </kc-input-field-by-type>
+            <kc-field-errors
+                [attribute]="fieldState.attribute"
+                [displayableErrors]="fieldState.displayableErrors"
+            >
+            </kc-field-errors>
+            @if (fieldState.attribute.annotations.inputHelperTextAfter) {
+                <div
+                    [kcClass]="'kcInputHelperTextAfterClass'"
+                    [id]="'form-help-text-after-' + fieldState.attribute.name"
+                    aria-live="polite"
+                >
+                    {{ i18n.advancedMsgStr(fieldState.attribute.annotations.inputHelperTextAfter) }}
+                </div>
+            }
 
-      <kc-field-errors
-        [attribute]="fieldState.attribute"
-        [displayableErrors]="fieldState.displayableErrors"
-      >
-      </kc-field-errors>
-      @if (fieldState.attribute.annotations.inputHelperTextAfter) {
-        <div
-          [kcClass]="'kcInputHelperTextAfterClass'"
-          [id]="'form-help-text-after-' + fieldState.attribute.name"
-          aria-live="polite"
-        >
-          {{ fieldState.attribute.annotations.inputHelperTextAfter | advancedMsgStr }}
+            @if (afterField) {
+                <ng-container
+                    [ngTemplateOutlet]="afterField"
+                    [ngTemplateOutletContext]="{
+                        attribute: fieldState.attribute,
+                        valueOrValues: fieldState.valueOrValues,
+                        displayableErrors: fieldState.displayableErrors
+                    }"
+                >
+                </ng-container>
+            }
+            <!-- NOTE: Downloading of html5DataAnnotations scripts is done in the useUserProfileForm hook -->
         </div>
-      }
-
-      @if (afterField) {
-        <ng-container
-          [ngTemplateOutlet]="afterField"
-          [ngTemplateOutletContext]="{
-            attribute: fieldState.attribute,
-            valueOrValues: fieldState.valueOrValues,
-            displayableErrors: fieldState.displayableErrors,
-          }"
-        >
-        </ng-container>
-      }
-      <!-- NOTE: Downloading of html5DataAnnotations scripts is done in the useUserProfileForm hook -->
     </div>
-  </div>
 }