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

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 { ChangeDetectionStrategy, Component, computed, forwardRef, inject, input } 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 { 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 { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes.token';
+import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n.token';
+import { Attribute } from 'keycloakify/login/KcContext';
+import { ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { 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)"
+            ></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>
         }
-      } @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)"
+                    ></kc-input-tag>
+                }
+            } @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>
+                }
+            }
         }
-      }
     }
-  }
 }

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

@@ -1,21 +1,11 @@
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    forwardRef,
-    inject,
-    input,
-    output
-} from '@angular/core';
-import { CLASSES, USE_DEFAULT_CSS } from '@keycloakify/angular/lib/public-api';
+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 { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes.token';
 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 { 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';
@@ -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-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,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 { 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 { 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 { 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 { FormAction, 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 { Attribute } from 'keycloakify/login/KcContext';
+import { ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { I18n } from '../../i18n';
 
 @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>
+    }
 }

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 { ChangeDetectionStrategy, Component, computed, forwardRef, inject, input, output, Signal } 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 { 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';
+import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes.token';
+import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n.token';
+import { Attribute } from 'keycloakify/login/KcContext';
+import { ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { 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 { 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 { MsgStrPipe } from '@keycloakify/angular/login/pipes/msg-str.pipe';
+import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes.token';
+import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n.token';
+import { ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { 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></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>