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

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

@@ -1,23 +1,13 @@
-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 { ChangeDetectionStrategy, Component, computed, forwardRef, inject, input, output, Signal } from '@angular/core';
+import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css';
+import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference';
+import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class';
+import { type FormAction, type FormFieldError } from '@keycloakify/angular/login/services/user-profile-form';
+import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes';
+import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n';
+import { type Attribute } from 'keycloakify/login/KcContext';
+import type { ClassKey } from 'keycloakify/login/lib/kcClsx';
+import type { I18n } from '../../i18n';
 
 @Component({
     standalone: true,
@@ -28,7 +18,7 @@ import {
             }
         `
     ],
-    imports: [KcClassDirective, AdvancedMsgStrPipe],
+    imports: [KcClassDirective],
     selector: 'kc-input-tag-selects',
     templateUrl: 'input-tag-selects.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -40,12 +30,13 @@ import {
     ]
 })
 export class InputTagSelectsComponent extends ComponentReference {
+    i18n = inject<I18n>(LOGIN_I18N);
     attribute = input<Attribute>();
     valueOrValues = input<string | string[]>();
     dispatchFormAction = output<FormAction>();
     displayableErrors = input<FormFieldError[]>();
     override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
-    override classes = inject<Partial<Record<ClassKey, string>>>(CLASSES);
+    override classes = inject<Partial<Record<ClassKey, string>>>(LOGIN_CLASSES);
 
     context: Signal<{
         inputType: 'radio' | 'checkbox';
@@ -87,9 +78,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"
+                />
+                {{ i18n.msgStr('logoutOtherSessions') }}
+            </label>
+        </div>
     </div>
-  </div>
 </div>

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

@@ -1,9 +1,11 @@
 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 { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css';
+import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference';
+import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class';
+import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes';
+import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n';
+import type { ClassKey } from 'keycloakify/login/lib/kcClsx';
+import type { I18n } from '../../i18n';
 
 @Component({
     selector: 'kc-logout-other-sessions',
@@ -15,7 +17,7 @@ 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',
     providers: [
@@ -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 />
+    <button
+        type="button"
+        [kcClass]="'kcFormPasswordVisibilityButtonClass'"
+        [attr.aria-label]="i18n.msgStr(isPasswordRevealed() ? 'hidePassword' : 'showPassword')"
+        [attr.aria-controls]="passwordInputId()"
+        (click)="togglePasswordVisibility()"
+    >
+        <i
+            aria-hidden="true"
+            [kcClass]="isPasswordRevealed() ? 'kcFormPasswordVisibilityIconHide' : 'kcFormPasswordVisibilityIconShow'"
+        ></i>
+    </button>
 </div>

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

@@ -1,19 +1,12 @@
 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 { ChangeDetectionStrategy, Component, forwardRef, inject, input, Renderer2, signal, WritableSignal } from '@angular/core';
+import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css';
+import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference';
+import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class';
+import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes';
+import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n';
+import type { ClassKey } from 'keycloakify/login/lib/kcClsx';
+import type { I18n } from '../../i18n';
 
 @Component({
     selector: 'kc-password-wrapper',
@@ -26,7 +19,7 @@ import { MsgStrPipe } from '@keycloakify/angular/login/pipes/msg-str.pipe';
     ],
     standalone: true,
     changeDetection: ChangeDetectionStrategy.OnPush,
-    imports: [KcClassDirective, AsyncPipe, MsgStrPipe],
+    imports: [KcClassDirective, AsyncPipe],
     templateUrl: './password-wrapper.component.html',
     providers: [
         {
@@ -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';
+import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference';
+import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class';
+import { ToNumberPipe } from '@keycloakify/angular/lib/pipes/to-number';
+import { type FormAction, type FormFieldError } from '@keycloakify/angular/login/services/user-profile-form';
+import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes';
+import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n';
+import { type Attribute } from 'keycloakify/login/KcContext';
+import type { ClassKey } from 'keycloakify/login/lib/kcClsx';
+import type { I18n } from '../../i18n';
 
 @Component({
     standalone: true,
@@ -28,7 +19,7 @@ import {
             }
         `
     ],
-    imports: [KcClassDirective, ToNumberPipe, AdvancedMsgStrPipe],
+    imports: [KcClassDirective, ToNumberPipe],
     selector: 'kc-select-tag',
     templateUrl: 'select-tag.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -40,12 +31,13 @@ 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';
@@ -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;
@@ -89,9 +79,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,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';
+import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference';
+import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class';
+import { ToNumberPipe } from '@keycloakify/angular/lib/pipes/to-number';
+import { type FormAction, type FormFieldError } from '@keycloakify/angular/login/services/user-profile-form';
+import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes';
+import { type Attribute } from 'keycloakify/login/KcContext';
+import type { ClassKey } from 'keycloakify/login/lib/kcClsx';
 
 @Component({
     standalone: true,
@@ -43,7 +34,7 @@ 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({

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

@@ -1,85 +1,78 @@
 @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" />
 
-  @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
+            }"
+        />
+    }
+
+    <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
+                    aria-live="polite"
+                    [kcClass]="'kcInputHelperTextBeforeClass'"
+                    [id]="'form-help-text-before-' + fieldState.attribute.name"
+                >
+                    {{ 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
-        [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"
+            />
+            @if (fieldState.attribute.annotations.inputHelperTextAfter) {
+                <div
+                    aria-live="polite"
+                    [kcClass]="'kcInputHelperTextAfterClass'"
+                    [id]="'form-help-text-after-' + fieldState.attribute.name"
+                >
+                    {{ 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
+                    }"
+                />
+            }
+            <!-- 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>
 }