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

package/src/login/components/add-remove-buttons-multi-valued-attribute/add-remove-buttons-multi-valued-attribute.component.ts

@@ -1,13 +1,8 @@
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    input,
-    output
-} from '@angular/core';
-import { Attribute } from 'keycloakify/login/KcContext';
-import { MsgStrPipe } from '@keycloakify/angular/login/pipes/msg-str.pipe';
-import { FormAction } from '@keycloakify/angular/login/services/user-profile-form.service';
+import { ChangeDetectionStrategy, Component, computed, inject, input, output } from '@angular/core';
+import { type FormAction } from '@keycloakify/angular/login/services/user-profile-form';
+import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n';
+import { type Attribute } from 'keycloakify/login/KcContext';
+import type { I18n } from '../../i18n';
 
 @Component({
     standalone: true,
@@ -18,12 +13,13 @@ import { FormAction } from '@keycloakify/angular/login/services/user-profile-for
             }
         `
     ],
-    imports: [MsgStrPipe],
+    imports: [],
     selector: 'kc-add-remove-buttons-multi-valued-attribute',
     templateUrl: 'add-remove-buttons-multi-valued-attribute.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class AddRemoveButtonsMultiValuedAttributeComponent {
+    i18n = inject<I18n>(LOGIN_I18N);
     attribute = input<Attribute>();
     values = input<string[]>();
     fieldIndex = input<number>();
@@ -72,11 +68,7 @@ export class AddRemoveButtonsMultiValuedAttributeComponent {
         });
     }
 
-    private getButtonToDisplayForMultivaluedAttributeField(params: {
-        attribute: Attribute;
-        values: string[];
-        fieldIndex: number;
-    }) {
+    private getButtonToDisplayForMultivaluedAttributeField(params: { attribute: Attribute; values: string[]; fieldIndex: number }) {
         const { attribute, values, fieldIndex } = params;
 
         const hasRemove = (() => {

package/src/login/components/field-errors/field-errors.component.html

@@ -1,15 +1,15 @@
 @let index = fieldIndex();
 <span
-  [id]="'input-error-' + attribute.name + (index === undefined ? '' : '-' + index)"
-  [kcClass]="'kcInputErrorMessageClass'"
-  aria-live="polite"
+    aria-live="polite"
+    [id]="'input-error-' + attribute.name + (index === undefined ? '' : '-' + index)"
+    [kcClass]="'kcInputErrorMessageClass'"
 >
-  @for (error of displayableErrors(); track error; let i = $index) {
-    @if (error.fieldIndex === index) {
-      <span [innerHTML]="error.errorMessage"></span>
-      @if (displayableErrors()?.length ?? 0 - 1 !== i) {
-        <br />
-      }
+    @for (error of displayableErrors(); track error; let i = $index) {
+        @if (error.fieldIndex === index) {
+            <span [innerHTML]="error.errorMessage"></span>
+            @if (displayableErrors()?.length ?? 0 - 1 !== i) {
+                <br />
+            }
+        }
     }
-  }
 </span>

package/src/login/components/field-errors/field-errors.component.ts

@@ -1,16 +1,11 @@
-import {
-    ChangeDetectionStrategy,
-    Component,
-    forwardRef,
-    inject,
-    input
-} 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 { FormFieldError } from '@keycloakify/angular/login/services/user-profile-form.service';
+import { ChangeDetectionStrategy, Component, forwardRef, inject, input } 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 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,
@@ -37,5 +32,5 @@ export class FieldErrorsComponent extends ComponentReference {
     displayableErrors = input<FormFieldError[]>();
     fieldIndex = input<number>();
     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/group-label/group-label.component.html

@@ -1,30 +1,30 @@
 @let attr = attribute();
 @let groupName = groupNameRef();
 @if (attr && groupName !== '') {
-  <div
-    [kcClass]="'kcFormGroupClass'"
-    [kcAttributes]="attr.group?.html5DataAnnotations"
-  >
-    @let groupDisplayHeader = attr.group?.displayHeader ?? '';
-    @let groupHeaderText = groupDisplayHeader !== '' ? groupDisplayHeader : (attr.group?.name ?? '');
-    <div [kcClass]="'kcContentWrapperClass'">
-      <label
-        [id]="'header-' + attr.group?.name"
-        [kcClass]="'kcFormGroupHeader'"
-      >
-        {{ groupHeaderText | advancedMsgStr }}
-      </label>
+    <div
+        [kcClass]="'kcFormGroupClass'"
+        [kcAttributes]="attr.group?.html5DataAnnotations"
+    >
+        @let groupDisplayHeader = attr.group?.displayHeader ?? '';
+        @let groupHeaderText = groupDisplayHeader !== '' ? groupDisplayHeader : (attr.group?.name ?? '');
+        <div [kcClass]="'kcContentWrapperClass'">
+            <label
+                [id]="'header-' + attr.group?.name"
+                [kcClass]="'kcFormGroupHeader'"
+            >
+                {{ i18n.advancedMsgStr(groupHeaderText) }}
+            </label>
+        </div>
+        @let groupDisplayDescription = attr.group?.displayDescription ?? '';
+        @if (groupDisplayDescription !== '') {
+            <div [kcClass]="'kcLabelWrapperClass'">
+                <label
+                    [id]="'description-' + attr.group?.name"
+                    [kcClass]="'kcLabelClass'"
+                >
+                    {{ i18n.advancedMsgStr(groupDisplayDescription) }}
+                </label>
+            </div>
+        }
     </div>
-    @let groupDisplayDescription = attr.group?.displayDescription ?? '';
-    @if (groupDisplayDescription !== '') {
-      <div [kcClass]="'kcLabelWrapperClass'">
-        <label
-          [id]="'description-' + attr.group?.name"
-          [kcClass]="'kcLabelClass'"
-        >
-          {{ groupDisplayDescription | advancedMsgStr }}
-        </label>
-      </div>
-    }
-  </div>
 }

package/src/login/components/group-label/group-label.component.ts

@@ -1,18 +1,13 @@
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    forwardRef,
-    inject,
-    input
-} 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 { AttributesDirective } from '@keycloakify/angular/login/directives/attributes.directive';
-import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class.directive';
-import { AdvancedMsgStrPipe } from '@keycloakify/angular/login/pipes/advanced-msg-str.pipe';
+import { ChangeDetectionStrategy, Component, computed, forwardRef, inject, input } 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 { AttributesDirective } from '@keycloakify/angular/lib/directives/attributes';
+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 Attribute } from 'keycloakify/login/KcContext';
+import type { ClassKey } from 'keycloakify/login/lib/kcClsx';
+import type { I18n } from '../../i18n';
 
 @Component({
     standalone: true,
@@ -23,7 +18,7 @@ import { AdvancedMsgStrPipe } from '@keycloakify/angular/login/pipes/advanced-ms
             }
         `
     ],
-    imports: [KcClassDirective, AttributesDirective, AdvancedMsgStrPipe],
+    imports: [KcClassDirective, AttributesDirective],
     selector: 'kc-group-label',
     templateUrl: 'group-label.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -35,10 +30,11 @@ import { AdvancedMsgStrPipe } from '@keycloakify/angular/login/pipes/advanced-ms
     ]
 })
 export class GroupLabelComponent extends ComponentReference {
+    i18n = inject<I18n>(LOGIN_I18N);
     attribute = input<Attribute>();
     groupName = input<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);
     groupNameRef = computed(() => {
         const attribute = this.attribute();
         const groupName = this.groupName();

package/src/login/components/input-field-by-type/input-field-by-type.component.html

@@ -1,63 +1,63 @@
 @let attr = attribute();
 @if (attr) {
-  @let type = attr.annotations.inputType;
-  @switch (type) {
-    @case ('textarea') {
-      <kc-textarea-tag
-        [attribute]="attribute()"
-        [value]="$any(valueOrValues())"
-        [displayableErrors]="displayableErrors()"
-        (dispatchFormAction)="dispatchFormAction.emit($event)"
-      ></kc-textarea-tag>
-    }
-    @case (type === 'select' || type === 'multiselect' ? type : '') {
-      <kc-select-tag
-        [attribute]="attribute()"
-        [valueOrValues]="valueOrValues()"
-        [displayableErrors]="displayableErrors()"
-        (dispatchFormAction)="dispatchFormAction.emit($event)"
-      ></kc-select-tag>
-    }
-    @case (type === 'select-radiobuttons' || type === 'multiselect-checkboxes' ? type : '') {
-      <kc-input-tag-selects
-        [attribute]="attribute()"
-        [valueOrValues]="valueOrValues()"
-        [displayableErrors]="displayableErrors()"
-        (dispatchFormAction)="dispatchFormAction.emit($event)"
-      ></kc-input-tag-selects>
-    }
-    @default {
-      @let values = valueOrValues();
-      <!-- if valueOrValues is string skip -->
-      @if (values && (values | toArray: true).length) {
-        @for (value of values; track value; let i = $index) {
-          <kc-input-tag
-            [attribute]="attribute()"
-            [valueOrValues]="valueOrValues()"
-            [fieldIndex]="i"
-            [displayableErrors]="displayableErrors()"
-            (dispatchFormAction)="dispatchFormAction.emit($event)"
-          ></kc-input-tag>
+    @let type = attr.annotations.inputType;
+    @switch (type) {
+        @case ('textarea') {
+            <kc-textarea-tag
+                [attribute]="attribute()"
+                [value]="$any(valueOrValues())"
+                [displayableErrors]="displayableErrors()"
+                (dispatchFormAction)="dispatchFormAction.emit($event)"
+            />
+        }
+        @case (type === 'select' || type === 'multiselect' ? type : '') {
+            <kc-select-tag
+                [attribute]="attribute()"
+                [valueOrValues]="valueOrValues()"
+                [displayableErrors]="displayableErrors()"
+                (dispatchFormAction)="dispatchFormAction.emit($event)"
+            />
+        }
+        @case (type === 'select-radiobuttons' || type === 'multiselect-checkboxes' ? type : '') {
+            <kc-input-tag-selects
+                [attribute]="attribute()"
+                [valueOrValues]="valueOrValues()"
+                [displayableErrors]="displayableErrors()"
+                (dispatchFormAction)="dispatchFormAction.emit($event)"
+            />
         }
-      } @else {
-        @if (attr.name === 'password' || attr.name === 'password-confirm') {
-          <kc-password-wrapper [passwordInputId]="attr.name">
-            <kc-input-tag
-              [attribute]="attributePassword()"
-              [valueOrValues]="valueOrValues()"
-              [displayableErrors]="displayableErrors()"
-              (dispatchFormAction)="dispatchFormAction.emit($event)"
-            ></kc-input-tag>
-          </kc-password-wrapper>
-        } @else {
-          <kc-input-tag
-            [attribute]="attribute()"
-            [valueOrValues]="valueOrValues()"
-            [displayableErrors]="displayableErrors()"
-            (dispatchFormAction)="dispatchFormAction.emit($event)"
-          ></kc-input-tag>
+        @default {
+            @let values = valueOrValues();
+            <!-- if valueOrValues is string skip -->
+            @if (values && (values | toArray: true).length) {
+                @for (value of values; track value; let i = $index) {
+                    <kc-input-tag
+                        [attribute]="attribute()"
+                        [valueOrValues]="valueOrValues()"
+                        [fieldIndex]="i"
+                        [displayableErrors]="displayableErrors()"
+                        (dispatchFormAction)="dispatchFormAction.emit($event)"
+                    />
+                }
+            } @else {
+                @if (attr.name === 'password' || attr.name === 'password-confirm') {
+                    <kc-password-wrapper [passwordInputId]="attr.name">
+                        <kc-input-tag
+                            [attribute]="attributePassword()"
+                            [valueOrValues]="valueOrValues()"
+                            [displayableErrors]="displayableErrors()"
+                            (dispatchFormAction)="dispatchFormAction.emit($event)"
+                        />
+                    </kc-password-wrapper>
+                } @else {
+                    <kc-input-tag
+                        [attribute]="attribute()"
+                        [valueOrValues]="valueOrValues()"
+                        [displayableErrors]="displayableErrors()"
+                        (dispatchFormAction)="dispatchFormAction.emit($event)"
+                    />
+                }
+            }
         }
-      }
     }
-  }
 }

package/src/login/components/input-field-by-type/input-field-by-type.component.ts

@@ -1,26 +1,16 @@
-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 { ToArrayPipe } from '@keycloakify/angular/login/pipes/to-array.pipe';
-import {
-    FormAction,
-    FormFieldError
-} from '@keycloakify/angular/login/services/user-profile-form.service';
-import { InputTagSelectsComponent } from '@keycloakify/angular/login/components/input-tag-selects/input-tag-selects.component';
-import { InputTagComponent } from '@keycloakify/angular/login/components/input-tag/input-tag.component';
-import { PasswordWrapperComponent } from '@keycloakify/angular/login/components/password-wrapper/password-wrapper.component';
-import { SelectTagComponent } from '@keycloakify/angular/login/components/select-tag/select-tag.component';
-import { TextareaTagComponent } from '@keycloakify/angular/login/components/textarea-tag/textarea-tag.component';
+import { ChangeDetectionStrategy, Component, computed, forwardRef, inject, input, output } from '@angular/core';
+import { ToArrayPipe } from '@keycloakify/angular/lib/pipes/to-array';
+import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css';
+import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference';
+import { InputTagComponent } from '@keycloakify/angular/login/components/input-tag';
+import { InputTagSelectsComponent } from '@keycloakify/angular/login/components/input-tag-selects';
+import { PasswordWrapperComponent } from '@keycloakify/angular/login/components/password-wrapper';
+import { SelectTagComponent } from '@keycloakify/angular/login/components/select-tag';
+import { TextareaTagComponent } from '@keycloakify/angular/login/components/textarea-tag';
+import { FormAction, 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,
@@ -31,14 +21,7 @@ import { TextareaTagComponent } from '@keycloakify/angular/login/components/text
             }
         `
     ],
-    imports: [
-        ToArrayPipe,
-        TextareaTagComponent,
-        SelectTagComponent,
-        InputTagSelectsComponent,
-        InputTagComponent,
-        PasswordWrapperComponent
-    ],
+    imports: [ToArrayPipe, TextareaTagComponent, SelectTagComponent, InputTagSelectsComponent, InputTagComponent, PasswordWrapperComponent],
     selector: 'kc-input-field-by-type',
     templateUrl: 'input-field-by-type.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -55,7 +38,7 @@ export class InputFieldByTypeComponent 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);
 
     attributePassword = computed<Attribute>(() => {
         const attribute: Attribute = this.attribute() ?? ({} as Attribute);

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]="i18n.advancedMsgStr(attr.annotations.inputTypePlaceholder ?? '')"
+        [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-add-remove-buttons-multi-valued-attribute
+            [attribute]="attr"
+            [values]="values"
+            [fieldIndex]="index"
+            (dispatchFormAction)="dispatchFormAction.emit($event)"
+        />
+    }
 }

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

@@ -1,28 +1,19 @@
-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 { AttributesDirective } from '@keycloakify/angular/login/directives/attributes.directive';
-import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class.directive';
-import { AdvancedMsgStrPipe } from '@keycloakify/angular/login/pipes/advanced-msg-str.pipe';
-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 { 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';
+import { ChangeDetectionStrategy, Component, computed, forwardRef, inject, input, output } from '@angular/core';
+import { AttributesDirective } from '@keycloakify/angular/lib/directives/attributes';
+import { InputTypePipe } from '@keycloakify/angular/lib/pipes/input-type';
+import { ToArrayPipe } from '@keycloakify/angular/lib/pipes/to-array';
+import { ToNumberPipe } from '@keycloakify/angular/lib/pipes/to-number';
+import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css';
+import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference';
+import { AddRemoveButtonsMultiValuedAttributeComponent } from '@keycloakify/angular/login/components/add-remove-buttons-multi-valued-attribute';
+import { FieldErrorsComponent } from '@keycloakify/angular/login/components/field-errors';
+import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class';
+import type { I18n } from '../../i18n';
+import { FormAction, 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';
 
 @Component({
     standalone: true,
@@ -40,8 +31,7 @@ import { FieldErrorsComponent } from '@keycloakify/angular/login/components/fiel
         AttributesDirective,
         ToArrayPipe,
         FieldErrorsComponent,
-        AddRemoveButtonsMultiValuedAttributeComponent,
-        AdvancedMsgStrPipe
+        AddRemoveButtonsMultiValuedAttributeComponent
     ],
     selector: 'kc-input-tag',
     templateUrl: 'input-tag.component.html',
@@ -54,6 +44,7 @@ import { FieldErrorsComponent } from '@keycloakify/angular/login/components/fiel
     ]
 })
 export class InputTagComponent extends ComponentReference {
+    i18n = inject<I18n>(LOGIN_I18N);
     attribute = input<Attribute>();
     valueOrValues = input<string | string[]>();
     fieldIndex = input<number | undefined>(undefined);
@@ -61,7 +52,7 @@ export class InputTagComponent 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);
 
     value = computed(() => {
         const valueOrValues = this.valueOrValues();

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('')]"
+            >
+                {{ i18n.advancedMsgStr(option) }}
+            </label>
+        </div>
+    }
 }