@keycloakify/angular 0.0.1-rc.2 → 0.0.1-rc.3

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

@@ -1,49 +1,45 @@
 @let attr = attribute();
 @let index = fieldIndex();
 @if (attr) {
-  <input
-    [type]="attr.annotations.inputType | inputType"
-    [id]="attr.name"
-    [name]="attr.name"
-    [value]="value()"
-    [kcClass]="'kcInputClass'"
-    [attr.aria-invalid]="index && displayableErrors()?.[index] !== undefined"
-    [disabled]="attr.readOnly"
-    [autocomplete]="attr.autocomplete"
-    [placeholder]="attr.annotations.inputTypePlaceholder ?? '' | advancedMsgStr"
-    [attr.pattern]="attr.annotations.inputTypePattern"
-    [attr.size]="
-      !attr.annotations.inputTypeSize
-        ? undefined
-        : (attr.annotations.inputTypeSize | toNumber) === 0
-          ? undefined
-          : (attr.annotations.inputTypeSize | toNumber)
-    "
-    [attr.maxlength]="
-      !attr.annotations.inputTypeMaxlength ? undefined : (attr.annotations.inputTypeMaxlength | toNumber)
-    "
-    [attr.minlength]="
-      !attr.annotations.inputTypeMinlength ? undefined : (attr.annotations.inputTypeMinlength | toNumber)
-    "
-    [attr.max]="attr.annotations.inputTypeMax"
-    [attr.min]="attr.annotations.inputTypeMin"
-    [attr.step]="attr.annotations.inputTypeStep"
-    [kcAttributes]="attr.html5DataAnnotations"
-    (change)="onChange($event)"
-    (blur)="onBlur()"
-  />
-  @if (index !== undefined) {
-    @let values = valueOrValues() ?? [] | toArray;
-    <kc-field-errors
-      [attribute]="attr"
-      [displayableErrors]="displayableErrors()"
-      [fieldIndex]="index"
-    ></kc-field-errors>
-    <kc-add-remove-buttons-multi-valued-attribute
-      [attribute]="attr"
-      [values]="values"
-      [fieldIndex]="index"
-      (dispatchFormAction)="dispatchFormAction.emit($event)"
-    ></kc-add-remove-buttons-multi-valued-attribute>
-  }
+    <input
+        [type]="attr.annotations.inputType | inputType"
+        [id]="attr.name"
+        [name]="attr.name"
+        [value]="value()"
+        [kcClass]="'kcInputClass'"
+        [attr.aria-invalid]="index && displayableErrors()?.[index] !== undefined"
+        [disabled]="attr.readOnly"
+        [autocomplete]="attr.autocomplete"
+        [placeholder]="attr.annotations.inputTypePlaceholder ?? '' | advancedMsgStr"
+        [attr.pattern]="attr.annotations.inputTypePattern"
+        [attr.size]="
+            !attr.annotations.inputTypeSize
+                ? undefined
+                : (attr.annotations.inputTypeSize | toNumber) === 0
+                  ? undefined
+                  : (attr.annotations.inputTypeSize | toNumber)
+        "
+        [attr.maxlength]="!attr.annotations.inputTypeMaxlength ? undefined : (attr.annotations.inputTypeMaxlength | toNumber)"
+        [attr.minlength]="!attr.annotations.inputTypeMinlength ? undefined : (attr.annotations.inputTypeMinlength | toNumber)"
+        [attr.max]="attr.annotations.inputTypeMax"
+        [attr.min]="attr.annotations.inputTypeMin"
+        [attr.step]="attr.annotations.inputTypeStep"
+        [kcAttributes]="attr.html5DataAnnotations"
+        (change)="onChange($event)"
+        (blur)="onBlur()"
+    />
+    @if (index !== undefined) {
+        @let values = valueOrValues() ?? [] | toArray;
+        <kc-field-errors
+            [attribute]="attr"
+            [displayableErrors]="displayableErrors()"
+            [fieldIndex]="index"
+        ></kc-field-errors>
+        <kc-add-remove-buttons-multi-valued-attribute
+            [attribute]="attr"
+            [values]="values"
+            [fieldIndex]="index"
+            (dispatchFormAction)="dispatchFormAction.emit($event)"
+        ></kc-add-remove-buttons-multi-valued-attribute>
+    }
 }

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

@@ -1,12 +1,4 @@
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    forwardRef,
-    inject,
-    input,
-    output
-} from '@angular/core';
+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';
@@ -17,10 +9,7 @@ import { AdvancedMsgStrPipe } from '@keycloakify/angular/login/pipes/advanced-ms
 import { InputTypePipe } from '@keycloakify/angular/login/pipes/input-type.pipe';
 import { ToArrayPipe } from '@keycloakify/angular/login/pipes/to-array.pipe';
 import { ToNumberPipe } from '@keycloakify/angular/login/pipes/to-number.pipe';
-import {
-    FormAction,
-    FormFieldError
-} from '@keycloakify/angular/login/services/user-profile-form.service';
+import { FormAction, FormFieldError } from '@keycloakify/angular/login/services/user-profile-form.service';
 import { AddRemoveButtonsMultiValuedAttributeComponent } from '@keycloakify/angular/login/components/add-remove-buttons-multi-valued-attribute/add-remove-buttons-multi-valued-attribute.component';
 import { FieldErrorsComponent } from '@keycloakify/angular/login/components/field-errors/field-errors.component';
 

package/src/login/components/input-tag-selects/input-tag-selects.component.html

@@ -4,26 +4,26 @@
 @let classDiv = context()?.classDiv;
 @let attr = attribute();
 @if (attr) {
-  @for (option of options(); track option) {
-    <div [kcClass]="classDiv">
-      <input
-        [type]="inputType"
-        [id]="attr.name + '-' + option"
-        [name]="attr.name"
-        [value]="option"
-        [kcClass]="classInput"
-        [attr.aria-invalid]="!!displayableErrors()?.length"
-        [disabled]="attr.readOnly"
-        [checked]="checked(option)"
-        (change)="onChange($event, option)"
-        (blur)="onBlur()"
-      />
-      <label
-        [for]="attr.name + '-' + option"
-        [kcClass]="[classLabel!, attr.readOnly ? 'kcInputClassRadioCheckboxLabelDisabled' : $any('')]"
-      >
-        {{ option | advancedMsgStr }}
-      </label>
-    </div>
-  }
+    @for (option of options(); track option) {
+        <div [kcClass]="classDiv">
+            <input
+                [type]="inputType"
+                [id]="attr.name + '-' + option"
+                [name]="attr.name"
+                [value]="option"
+                [kcClass]="classInput"
+                [attr.aria-invalid]="!!displayableErrors()?.length"
+                [disabled]="attr.readOnly"
+                [checked]="checked(option)"
+                (change)="onChange($event, option)"
+                (blur)="onBlur()"
+            />
+            <label
+                [for]="attr.name + '-' + option"
+                [kcClass]="[classLabel!, attr.readOnly ? 'kcInputClassRadioCheckboxLabelDisabled' : $any('')]"
+            >
+                {{ option | advancedMsgStr }}
+            </label>
+        </div>
+    }
 }

package/src/login/components/input-tag-selects/input-tag-selects.component.ts

@@ -1,23 +1,11 @@
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    forwardRef,
-    inject,
-    input,
-    output,
-    Signal
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, forwardRef, inject, input, output, Signal } 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 {
-    FormAction,
-    FormFieldError
-} from '@keycloakify/angular/login/services/user-profile-form.service';
+import { FormAction, FormFieldError } from '@keycloakify/angular/login/services/user-profile-form.service';
 
 @Component({
     standalone: true,
@@ -87,9 +75,7 @@ export class InputTagSelectsComponent 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;

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

@@ -1,19 +1,19 @@
 <div
-  id="kc-form-options"
-  [kcClass]="'kcFormOptionsClass'"
+    id="kc-form-options"
+    [kcClass]="'kcFormOptionsClass'"
 >
-  <div [kcClass]="'kcFormOptionsWrapperClass'">
-    <div class="checkbox">
-      <label for="logout-sessions">
-        <input
-          type="checkbox"
-          id="logout-sessions"
-          name="logout-sessions"
-          value="on"
-          defaultChecked="true"
-        />
-        {{ 'logoutOtherSessions' | msgStr }}
-      </label>
+    <div [kcClass]="'kcFormOptionsWrapperClass'">
+        <div class="checkbox">
+            <label for="logout-sessions">
+                <input
+                    type="checkbox"
+                    id="logout-sessions"
+                    name="logout-sessions"
+                    value="on"
+                    defaultChecked="true"
+                />
+                {{ 'logoutOtherSessions' | msgStr }}
+            </label>
+        </div>
     </div>
-  </div>
 </div>

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]="(isPasswordRevealed() ? 'hidePassword' : 'showPassword') | msgStr"
+        [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,14 +1,5 @@
 import { AsyncPipe } from '@angular/common';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    forwardRef,
-    inject,
-    input,
-    Renderer2,
-    signal,
-    WritableSignal
-} from '@angular/core';
+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';
@@ -51,11 +42,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) {
+                    {{ attr.annotations.inputOptionLabels[option] ?? option | advancedMsgStr }}
+                } @else if (!!attr.annotations.inputOptionLabelsI18nPrefix) {
+                    {{ attr.annotations.inputOptionLabelsI18nPrefix + '.' + option | advancedMsgStr }}
+                } @else {
+                    {{ option }}
+                }
+            </option>
+        }
+    </select>
 }

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

@@ -1,12 +1,4 @@
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    forwardRef,
-    inject,
-    input,
-    output
-} from '@angular/core';
+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';
@@ -14,10 +6,7 @@ import { ComponentReference } from '@keycloakify/angular/login/classes/component
 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 { FormAction, FormFieldError } from '@keycloakify/angular/login/services/user-profile-form.service';
 
 @Component({
     standalone: true,
@@ -62,9 +51,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;
@@ -89,9 +76,7 @@ export class SelectTagComponent extends ComponentReference {
             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;

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,11 @@
-import {
-    ChangeDetectionStrategy,
-    Component,
-    forwardRef,
-    inject,
-    input,
-    output
-} from '@angular/core';
+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 { FormAction, FormFieldError } from '@keycloakify/angular/login/services/user-profile-form.service';
 
 @Component({
     standalone: true,

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

@@ -1,85 +1,85 @@
 @let formFieldStates = formState().formFieldStates;
 
 @for (fieldState of formFieldStates; track fieldState.attribute) {
-  <!-- [groupNameRef]="groupNameRef"
+    <!-- [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'"
+            >
+                {{ fieldState.attribute.displayName ?? '' | advancedMsgStr }}
+                @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"
+                >
+                    {{ fieldState.attribute.annotations.inputHelperTextBefore | advancedMsgStr }}
+                </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"
+                >
+                    {{ fieldState.attribute.annotations.inputHelperTextAfter | advancedMsgStr }}
+                </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>
 }