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

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

@@ -1,11 +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 { 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 { 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,
@@ -16,7 +18,7 @@ import { FormAction, FormFieldError } from '@keycloakify/angular/login/services/
             }
         `
     ],
-    imports: [KcClassDirective, AdvancedMsgStrPipe],
+    imports: [KcClassDirective],
     selector: 'kc-input-tag-selects',
     templateUrl: 'input-tag-selects.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -28,12 +30,13 @@ import { FormAction, FormFieldError } from '@keycloakify/angular/login/services/
     ]
 })
 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';

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

@@ -12,7 +12,7 @@
                     value="on"
                     defaultChecked="true"
                 />
-                {{ 'logoutOtherSessions' | msgStr }}
+                {{ i18n.msgStr('logoutOtherSessions') }}
             </label>
         </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

@@ -3,7 +3,7 @@
     <button
         type="button"
         [kcClass]="'kcFormPasswordVisibilityButtonClass'"
-        [attr.aria-label]="(isPasswordRevealed() ? 'hidePassword' : 'showPassword') | msgStr"
+        [attr.aria-label]="i18n.msgStr(isPasswordRevealed() ? 'hidePassword' : 'showPassword')"
         [attr.aria-controls]="passwordInputId()"
         (click)="togglePasswordVisibility()"
     >

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

@@ -1,10 +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 { 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-password-wrapper',
@@ -17,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: [
         {
@@ -27,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);
 

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

@@ -19,9 +19,9 @@
         @for (option of options(); track option) {
             <option [value]="option">
                 @if (!!attr.annotations.inputOptionLabels) {
-                    {{ attr.annotations.inputOptionLabels[option] ?? option | advancedMsgStr }}
+                    {{ i18n.advancedMsgStr(attr.annotations.inputOptionLabels[option] ?? option) }}
                 } @else if (!!attr.annotations.inputOptionLabelsI18nPrefix) {
-                    {{ attr.annotations.inputOptionLabelsI18nPrefix + '.' + option | advancedMsgStr }}
+                    {{ i18n.advancedMsgStr(attr.annotations.inputOptionLabelsI18nPrefix + '.' + option) }}
                 } @else {
                     {{ option }}
                 }

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

@@ -1,12 +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 { 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 { ToNumberPipe } from '@keycloakify/angular/login/pipes/to-number.pipe';
 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,
@@ -17,7 +19,7 @@ import { FormAction, FormFieldError } from '@keycloakify/angular/login/services/
             }
         `
     ],
-    imports: [KcClassDirective, ToNumberPipe, AdvancedMsgStrPipe],
+    imports: [KcClassDirective, ToNumberPipe],
     selector: 'kc-select-tag',
     templateUrl: 'select-tag.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -29,12 +31,13 @@ import { FormAction, FormFieldError } from '@keycloakify/angular/login/services/
     ]
 })
 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';

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

@@ -1,5 +1,6 @@
 import { ChangeDetectionStrategy, Component, forwardRef, inject, input, output } from '@angular/core';
-import { CLASSES, USE_DEFAULT_CSS } from '@keycloakify/angular/lib/public-api';
+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';
@@ -33,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

@@ -27,7 +27,7 @@
                 [for]="fieldState.attribute.name"
                 [kcClass]="'kcLabelClass'"
             >
-                {{ fieldState.attribute.displayName ?? '' | advancedMsgStr }}
+                {{ i18n.advancedMsgStr(fieldState.attribute.displayName ?? '') }}
                 @if (fieldState.attribute.required) {
                     *
                 }
@@ -41,7 +41,7 @@
                     [id]="'form-help-text-before-' + fieldState.attribute.name"
                     aria-live="polite"
                 >
-                    {{ fieldState.attribute.annotations.inputHelperTextBefore | advancedMsgStr }}
+                    {{ i18n.advancedMsgStr(fieldState.attribute.annotations.inputHelperTextBefore) }}
                 </div>
             }
 
@@ -64,7 +64,7 @@
                     [id]="'form-help-text-after-' + fieldState.attribute.name"
                     aria-live="polite"
                 >
-                    {{ fieldState.attribute.annotations.inputHelperTextAfter | advancedMsgStr }}
+                    {{ i18n.advancedMsgStr(fieldState.attribute.annotations.inputHelperTextAfter) }}
                 </div>
             }
 

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

@@ -1,15 +1,19 @@
 import { NgTemplateOutlet } from '@angular/common';
 import { ChangeDetectionStrategy, Component, ContentChild, effect, forwardRef, inject, output, TemplateRef } from '@angular/core';
-import { DO_MAKE_USER_CONFIRM_PASSWORD, KC_CONTEXT, CLASSES, USE_DEFAULT_CSS } from '@keycloakify/angular/lib/public-api';
-import { ClassKey } from 'keycloakify/login/lib/kcClsx';
-import { KcContext } from 'keycloakify/login/KcContext';
+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, UserProfileFormService } from '@keycloakify/angular/login/services/user-profile-form.service';
 import { FieldErrorsComponent } from '@keycloakify/angular/login/components/field-errors/field-errors.component';
 import { GroupLabelComponent } from '@keycloakify/angular/login/components/group-label/group-label.component';
 import { InputFieldByTypeComponent } from '@keycloakify/angular/login/components/input-field-by-type/input-field-by-type.component';
+import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class.directive';
+import { FormAction, UserProfileFormService } 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 { KC_LOGIN_CONTEXT } from '@keycloakify/angular/login/tokens/kc-context.token';
+import { DO_MAKE_USER_CONFIRM_PASSWORD } from '@keycloakify/angular/login/tokens/make-user-confirm-password.token';
+import { KcContext } from 'keycloakify/login/KcContext';
+import { ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { I18n } from '../../i18n';
 
 @Component({
     standalone: true,
@@ -20,7 +24,7 @@ import { InputFieldByTypeComponent } from '@keycloakify/angular/login/components
             }
         `
     ],
-    imports: [KcClassDirective, FieldErrorsComponent, InputFieldByTypeComponent, GroupLabelComponent, NgTemplateOutlet, AdvancedMsgStrPipe],
+    imports: [KcClassDirective, FieldErrorsComponent, InputFieldByTypeComponent, GroupLabelComponent, NgTemplateOutlet],
     selector: 'kc-user-profile-form-fields',
     templateUrl: 'user-profile-form-fields.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -33,11 +37,12 @@ import { InputFieldByTypeComponent } from '@keycloakify/angular/login/components
     ]
 })
 export class UserProfileFormFieldsComponent extends ComponentReference {
-    kcContext = inject<KcContext>(KC_CONTEXT);
+    i18n = inject<I18n>(LOGIN_I18N);
+    kcContext = inject<KcContext>(KC_LOGIN_CONTEXT);
     userProfileFormService = inject(UserProfileFormService);
     doMakeUserConfirmPassword = inject(DO_MAKE_USER_CONFIRM_PASSWORD);
     override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
-    override classes = inject<Partial<Record<ClassKey, string>>>(CLASSES);
+    override classes = inject<Partial<Record<ClassKey, string>>>(LOGIN_CLASSES);
 
     onIsFormSubmittable = output<boolean>();
 

package/src/login/containers/template.component.html

@@ -15,7 +15,7 @@
                 id="kc-header-wrapper"
                 [kcClass]="'kcHeaderWrapperClass'"
             >
-                <div [innerHTML]="realm?.displayNameHtml | kcSanitize: 'html'"></div>
+                <div [innerHTML]="realm?.displayNameHtml ?? '' | kcSanitize: 'html'"></div>
             </div>
         </div>
 
@@ -39,7 +39,7 @@
                                 <button
                                     tabindex="1"
                                     id="kc-current-locale-link"
-                                    [attr.aria-label]="'languages' | msgStr"
+                                    [attr.aria-label]="i18n.msgStr('languages')"
                                     aria-haspopup="true"
                                     aria-expanded="false"
                                     aria-controls="language-switch1"
@@ -91,12 +91,12 @@
                             <a
                                 id="reset-login"
                                 [href]="url?.loginRestartFlowUrl"
-                                [attr.aria-label]="'restartLoginTooltip' | msgStr"
+                                [attr.aria-label]="i18n.msgStr('restartLoginTooltip')"
                             >
                                 <div class="kc-login-tooltip">
                                     <i [kcClass]="'kcResetFlowIcon'"></i>
                                     <span class="kc-tooltip-text">
-                                        {{ 'restartLoginTooltip' | msgStr }}
+                                        {{ i18n.msgStr('restartLoginTooltip') }}
                                     </span>
                                 </div>
                             </a>
@@ -112,7 +112,7 @@
                         >
                             <span class="subtitle">
                                 <span class="required">*</span>
-                                {{ 'requiredFields' | msgStr }}
+                                {{ i18n.msgStr('requiredFields') }}
                             </span>
                         </div>
                         <div class="col-md-10">
@@ -174,7 +174,7 @@
                                         id="try-another-way"
                                         (click)="tryAnotherWay()"
                                     >
-                                        {{ 'doTryAnotherWay' | msgStr }}
+                                        {{ i18n.msgStr('doTryAnotherWay') }}
                                     </a>
                                 </div>
                             </div>

package/src/login/containers/template.component.ts

@@ -1,22 +1,24 @@
 import { AsyncPipe, NgTemplateOutlet } from '@angular/common';
 import { ChangeDetectionStrategy, Component, forwardRef, inject, input, OnInit, Renderer2 } from '@angular/core';
 import { Meta, Title } from '@angular/platform-browser';
-import { CLASSES, I18N, KC_CONTEXT, USE_DEFAULT_CSS } from '@keycloakify/angular/lib/public-api';
 import type { I18n } from '@keycloakify/angular/login/i18n';
 import { KcContext } from 'keycloakify/login/KcContext/KcContext';
 import { ClassKey, getKcClsx } from 'keycloakify/login/lib/kcClsx';
 import { Observable } from 'rxjs';
 import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference.class';
 import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class.directive';
-import { KcSanitizePipe } from '@keycloakify/angular/login/pipes';
-import { MsgStrPipe } from '@keycloakify/angular/login/pipes/msg-str.pipe';
+import { KcSanitizePipe } from '@keycloakify/angular/login/pipes/kc-sanitize.pipe';
 import { LoginResourceInjectorService } from '@keycloakify/angular/login/services/login-resource-injector.service';
+import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n.token';
+import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes.token';
+import { KC_LOGIN_CONTEXT } from '@keycloakify/angular/login/tokens/kc-context.token';
+import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css.token';
 
 @Component({
     selector: 'kc-login-template',
     templateUrl: './template.component.html',
     standalone: true,
-    imports: [AsyncPipe, KcSanitizePipe, NgTemplateOutlet, KcClassDirective, MsgStrPipe],
+    imports: [AsyncPipe, KcSanitizePipe, NgTemplateOutlet, KcClassDirective],
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [
         {
@@ -26,13 +28,13 @@ import { LoginResourceInjectorService } from '@keycloakify/angular/login/service
     ]
 })
 export class TemplateComponent extends ComponentReference implements OnInit {
-    i18n = inject<I18n>(I18N);
+    i18n = inject<I18n>(LOGIN_I18N);
     renderer = inject(Renderer2);
     meta = inject(Meta);
     title = inject(Title);
-    kcContext = inject<KcContext>(KC_CONTEXT);
+    kcContext = inject<KcContext>(KC_LOGIN_CONTEXT);
     override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
-    override classes = inject<Partial<Record<ClassKey, string>>>(CLASSES);
+    override classes = inject<Partial<Record<ClassKey, string>>>(LOGIN_CLASSES);
     loginResourceInjectorService = inject(LoginResourceInjectorService);
 
     displayInfo = input(false);

package/src/login/pages/code/code.component.html

@@ -3,20 +3,20 @@
 <kc-login-template>
     <ng-container headerNode>
         @if (code.success) {
-            {{ 'codeSuccessTitle' | msgStr }}
+            {{ i18n.msgStr('codeSuccessTitle') }}
         } @else {
-            {{ 'codeErrorTitle' | msgStr: code.error }}
+            {{ i18n.msgStr('codeErrorTitle', code.error) }}
         }
     </ng-container>
 
     <ng-container content>
         <div id="kc-code">
             @if (code.success) {
-                <p>{{ 'copyCodeInstruction' | msgStr }}</p>
+                <p>{{ i18n.msgStr('copyCodeInstruction') }}</p>
                 <input
                     id="code"
                     [kcClass]="'kcTextareaClass'"
-                    defaultValue="{{ code.code }}"
+                    [defaultValue]="code.code"
                 />
             } @else {
                 <p id="error">{{ code.error }}</p>

package/src/login/pages/code/code.component.ts

@@ -1,15 +1,18 @@
 import { ChangeDetectionStrategy, Component, forwardRef, inject } from '@angular/core';
-import { CLASSES, KC_CONTEXT, USE_DEFAULT_CSS } from '@keycloakify/angular/lib/public-api';
-import { ClassKey } from 'keycloakify/login/lib/kcClsx';
-import { KcContext } from 'keycloakify/login/KcContext';
+import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css.token';
+import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes.token';
+import { KC_LOGIN_CONTEXT } from '@keycloakify/angular/login/tokens/kc-context.token';
 import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference.class';
 import { TemplateComponent } from '@keycloakify/angular/login/containers/template.component';
 import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class.directive';
-import { MsgStrPipe } from '@keycloakify/angular/login/pipes/msg-str.pipe';
+import { ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { KcContext } from '../../KcContext';
+import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n.token';
+import { I18n } from '../../i18n';
 
 @Component({
     standalone: true,
-    imports: [MsgStrPipe, TemplateComponent, KcClassDirective],
+    imports: [TemplateComponent, KcClassDirective],
     selector: 'kc-root',
     templateUrl: 'code.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -21,7 +24,8 @@ import { MsgStrPipe } from '@keycloakify/angular/login/pipes/msg-str.pipe';
     ]
 })
 export class CodeComponent extends ComponentReference {
-    kcContext = inject<Extract<KcContext, { pageId: 'code.ftl' }>>(KC_CONTEXT);
+    kcContext = inject<Extract<KcContext, { pageId: 'code.ftl' }>>(KC_LOGIN_CONTEXT);
+    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/pages/delete-account-confirm/delete-account-confirm.component.html

@@ -2,7 +2,7 @@
 @let triggered_from_aia = kcContext.triggered_from_aia;
 <kc-login-template>
     <ng-container headerNode>
-        {{ 'deleteAccountConfirm' | msgStr }}
+        {{ i18n.msgStr('deleteAccountConfirm') }}
     </ng-container>
     <ng-container content>
         <form
@@ -15,21 +15,21 @@
                 style="margin-top: 0; margin-bottom: 30px"
             >
                 <span class="pficon pficon-warning-triangle-o"></span>
-                {{ 'irreversibleAction' | msgStr }}
+                {{ i18n.msgStr('irreversibleAction') }}
             </div>
-            <p>{{ 'deletingImplies' | msgStr }}</p>
+            <p>{{ i18n.msgStr('deletingImplies') }}</p>
             <ul style="color: #72767b; list-style: disc; list-style-position: inside">
-                <li>{{ 'loggingOutImmediately' | msgStr }}</li>
-                <li>{{ 'errasingData' | msgStr }}</li>
+                <li>{{ i18n.msgStr('loggingOutImmediately') }}</li>
+                <li>{{ i18n.msgStr('errasingData') }}</li>
             </ul>
             <p class="delete-account-text">
-                {{ 'finalDeletionConfirmation' | msgStr }}
+                {{ i18n.msgStr('finalDeletionConfirmation') }}
             </p>
             <div id="kc-form-buttons">
                 <input
                     [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']"
                     type="submit"
-                    value="{{ 'doConfirmDelete' | msgStr }}"
+                    [value]="i18n.msgStr('doConfirmDelete')"
                 />
                 @if (triggered_from_aia) {
                     <button
@@ -39,7 +39,7 @@
                         name="cancel-aia"
                         value="true"
                     >
-                        {{ 'doCancel' | msgStr }}
+                        {{ i18n.msgStr('doCancel') }}
                     </button>
                 }
             </div>

package/src/login/pages/delete-account-confirm/delete-account-confirm.component.ts

@@ -1,15 +1,18 @@
 import { ChangeDetectionStrategy, Component, forwardRef, inject } from '@angular/core';
-import { CLASSES, KC_CONTEXT, USE_DEFAULT_CSS } from '@keycloakify/angular/lib/public-api';
-import { ClassKey } from 'keycloakify/login/lib/kcClsx';
-import { KcContext } from 'keycloakify/login/KcContext';
+import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css.token';
 import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference.class';
 import { TemplateComponent } from '@keycloakify/angular/login/containers/template.component';
-import { KcClassDirective } from '@keycloakify/angular/login/directives';
-import { MsgStrPipe } from '@keycloakify/angular/login/pipes/msg-str.pipe';
+import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class.directive';
+import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes.token';
+import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n.token';
+import { KC_LOGIN_CONTEXT } from '@keycloakify/angular/login/tokens/kc-context.token';
+import { ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { I18n } from '../../i18n';
+import { KcContext } from '../../KcContext';
 
 @Component({
     standalone: true,
-    imports: [TemplateComponent, MsgStrPipe, KcClassDirective],
+    imports: [TemplateComponent, KcClassDirective],
     selector: 'kc-root',
     templateUrl: 'delete-account-confirm.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -21,7 +24,8 @@ import { MsgStrPipe } from '@keycloakify/angular/login/pipes/msg-str.pipe';
     ]
 })
 export class DeleteAccountConfirmComponent extends ComponentReference {
-    kcContext = inject<Extract<KcContext, { pageId: 'delete-account-confirm.ftl' }>>(KC_CONTEXT);
+    kcContext = inject<Extract<KcContext, { pageId: 'delete-account-confirm.ftl' }>>(KC_LOGIN_CONTEXT);
+    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/pages/delete-credential/delete-credential.component.html

@@ -2,11 +2,11 @@
 @let credentialLabel = kcContext.credentialLabel;
 <kc-login-template [displayMessage]="displayMessage">
     <ng-container headerNode>
-        {{ 'deleteCredentialTitle' | msgStr: credentialLabel }}
+        {{ i18n.msgStr('deleteCredentialTitle', credentialLabel) }}
     </ng-container>
     <ng-container content>
         <div id="kc-delete-text">
-            {{ 'deleteCredentialMessage' | msgStr: credentialLabel }}
+            {{ i18n.msgStr('deleteCredentialMessage', credentialLabel) }}
         </div>
 
         <form
@@ -19,13 +19,13 @@
                 name="accept"
                 id="kc-accept"
                 type="submit"
-                [value]="'doConfirmDelete' | msgStr"
+                [value]="i18n.msgStr('doConfirmDelete')"
             />
 
             <input
                 [kcClass]="['kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass']"
                 name="cancel-aia"
-                [value]="'doCancel' | msgStr"
+                [value]="i18n.msgStr('doCancel')"
                 id="kc-decline"
                 type="submit"
             />

package/src/login/pages/delete-credential/delete-credential.component.ts

@@ -1,15 +1,18 @@
 import { ChangeDetectionStrategy, Component, forwardRef, inject, input } from '@angular/core';
-import { CLASSES, KC_CONTEXT, USE_DEFAULT_CSS } from '@keycloakify/angular/lib/public-api';
-import { ClassKey } from 'keycloakify/login/lib/kcClsx';
-import { KcContext } from 'keycloakify/login/KcContext';
+import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css.token';
 import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference.class';
 import { TemplateComponent } from '@keycloakify/angular/login/containers/template.component';
 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 { KC_LOGIN_CONTEXT } from '@keycloakify/angular/login/tokens/kc-context.token';
+import { ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { I18n } from '../../i18n';
+import { KcContext } from '../../KcContext';
 
 @Component({
     standalone: true,
-    imports: [MsgStrPipe, TemplateComponent, KcClassDirective],
+    imports: [TemplateComponent, KcClassDirective],
     selector: 'kc-root',
     templateUrl: 'delete-credential.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -21,9 +24,10 @@ import { MsgStrPipe } from '@keycloakify/angular/login/pipes/msg-str.pipe';
     ]
 })
 export class DeleteCredentialComponent extends ComponentReference {
-    kcContext = inject<Extract<KcContext, { pageId: 'delete-credential.ftl' }>>(KC_CONTEXT);
+    kcContext = inject<Extract<KcContext, { pageId: 'delete-credential.ftl' }>>(KC_LOGIN_CONTEXT);
+    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);
     displayRequiredFields = input(false);
     documentTitle = input<string>();
     bodyClassName = input<string>();

package/src/login/pages/error/error.component.html

@@ -3,7 +3,7 @@
 @let client = kcContext.client;
 <kc-login-template [displayMessage]="false">
     <ng-container headerNode>
-        {{ 'errorTitle' | msgStr }}
+        {{ i18n.msgStr('errorTitle') }}
     </ng-container>
     <ng-container content>
         <div id="kc-error-message">
@@ -16,7 +16,7 @@
                     <a
                         id="backToApplication"
                         [href]="client.baseUrl"
-                        [innerHTML]="'backToApplication' | msgStr | kcSanitize: 'html'"
+                        [innerHTML]="i18n.msgStr('backToApplication') | kcSanitize: 'html'"
                     ></a>
                 </p>
             }