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

package/src/login/pages/login-idp-link-confirm/login-idp-link-confirm.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: [TemplateComponent, MsgStrPipe, KcClassDirective],
+    imports: [TemplateComponent, KcClassDirective],
     selector: 'kc-root',
     templateUrl: 'login-idp-link-confirm.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -21,9 +24,10 @@ import { MsgStrPipe } from '@keycloakify/angular/login/pipes/msg-str.pipe';
     ]
 })
 export class LoginIdpLinkConfirmComponent extends ComponentReference {
-    kcContext = inject<Extract<KcContext, { pageId: 'login-idp-link-confirm.ftl' }>>(KC_CONTEXT);
+    kcContext = inject<Extract<KcContext, { pageId: 'login-idp-link-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);
     displayRequiredFields = input(false);
     documentTitle = input<string>();
     bodyClassName = input<string>();

package/src/login/pages/login-idp-link-confirm-override/login-idp-link-confirm-override.component.html

@@ -9,7 +9,7 @@
     [documentTitle]="documentTitle()"
 >
     <ng-container headerNode>
-        {{ 'confirmOverrideIdpTitle' | msgStr }}
+        {{ i18n.msgStr('confirmOverrideIdpTitle') }}
     </ng-container>
     <ng-container content>
         <form
@@ -17,12 +17,12 @@
             [action]="url.loginAction"
             method="post"
         >
-            {{ 'pageExpiredMsg1' | msgStr }}
+            {{ i18n.msgStr('pageExpiredMsg1') }}
             <a
                 id="loginRestartLink"
                 [href]="url.loginRestartFlowUrl"
             >
-                {{ 'doClickHere' | msgStr }}
+                {{ i18n.msgStr('doClickHere') }}
             </a>
             <br />
             <br />
@@ -33,7 +33,7 @@
                 id="confirmOverride"
                 value="confirmOverride"
             >
-                {{ 'confirmOverrideIdpContinue' | msgStr: idpDisplayName }}
+                {{ i18n.msgStr('confirmOverrideIdpContinue', idpDisplayName) }}
             </button>
         </form>
     </ng-container>

package/src/login/pages/login-idp-link-confirm-override/login-idp-link-confirm-override.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_I18N } from '@keycloakify/angular/login/tokens/i18n.token';
+import { I18n } from '../../i18n';
+import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes.token';
+import { KC_LOGIN_CONTEXT } from '@keycloakify/angular/login/tokens/kc-context.token';
+import { ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { KcContext } from '../../KcContext';
 
 @Component({
     standalone: true,
-    imports: [KcClassDirective, TemplateComponent, MsgStrPipe],
+    imports: [KcClassDirective, TemplateComponent],
     selector: 'kc-root',
     templateUrl: 'login-idp-link-confirm-override.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -21,9 +24,10 @@ import { MsgStrPipe } from '@keycloakify/angular/login/pipes/msg-str.pipe';
     ]
 })
 export class LoginIdpLinkConfirmOverrideComponent extends ComponentReference {
-    kcContext = inject<Extract<KcContext, { pageId: 'login-idp-link-confirm-override.ftl' }>>(KC_CONTEXT);
+    kcContext = inject<Extract<KcContext, { pageId: 'login-idp-link-confirm-override.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/login-idp-link-email/login-idp-link-email.component.html

@@ -10,30 +10,30 @@
     [documentTitle]="documentTitle()"
 >
     <ng-container headerNode>
-        {{ 'emailLinkIdpTitle' | msgStr: idpAlias }}
+        {{ i18n.msgStr('emailLinkIdpTitle', idpAlias) }}
     </ng-container>
     <ng-container content>
         <p
             id="instruction1"
             class="instruction"
         >
-            {{ 'emailLinkIdp1' | msgStr: idpAlias : brokerContext.username : realm.displayName }}
+            {{ i18n.msgStr('emailLinkIdp1', idpAlias, brokerContext.username, realm.displayName) }}
         </p>
         <p
             id="instruction2"
             class="instruction"
         >
-            {{ 'emailLinkIdp2' | msgStr }}
-            <a [href]="url.loginAction">{{ 'doClickHere' | msgStr }}</a>
-            {{ 'emailLinkIdp3' | msgStr }}
+            {{ i18n.msgStr('emailLinkIdp2') }}
+            <a [href]="url.loginAction">{{ i18n.msgStr('doClickHere') }}</a>
+            {{ i18n.msgStr('emailLinkIdp3') }}
         </p>
         <p
             id="instruction3"
             class="instruction"
         >
-            {{ 'emailLinkIdp4' | msgStr }}
-            <a [href]="url.loginAction">{{ 'doClickHere' | msgStr }}</a>
-            {{ 'emailLinkIdp5' | msgStr }}
+            {{ i18n.msgStr('emailLinkIdp4') }}
+            <a [href]="url.loginAction">{{ i18n.msgStr('doClickHere') }}</a>
+            {{ i18n.msgStr('emailLinkIdp5') }}
         </p>
     </ng-container>
 </kc-login-template>

package/src/login/pages/login-idp-link-email/login-idp-link-email.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_I18N } from '@keycloakify/angular/login/tokens/i18n.token';
+import { I18n } from '../../i18n';
+import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes.token';
+import { KC_LOGIN_CONTEXT } from '@keycloakify/angular/login/tokens/kc-context.token';
+import { ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { KcContext } from '../../KcContext';
 
 @Component({
     standalone: true,
-    imports: [TemplateComponent, MsgStrPipe, KcClassDirective],
+    imports: [TemplateComponent, KcClassDirective],
     selector: 'kc-root',
     templateUrl: 'login-idp-link-email.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -21,9 +24,10 @@ import { MsgStrPipe } from '@keycloakify/angular/login/pipes/msg-str.pipe';
     ]
 })
 export class LoginIdpLinkEmailComponent extends ComponentReference {
-    kcContext = inject<Extract<KcContext, { pageId: 'login-idp-link-email.ftl' }>>(KC_CONTEXT);
+    kcContext = inject<Extract<KcContext, { pageId: 'login-idp-link-email.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/login-oauth-grant/login-oauth-grant.component.html

@@ -16,7 +16,7 @@
             />
         }
         <p>
-            {{ 'oauthGrantTitle' | msgStr: (client.name ? (client.name | advancedMsgStr) : client.clientId) }}
+            {{ i18n.msgStr('oauthGrantTitle', client.name ? i18n.advancedMsgStr(client.name) : client.clientId) }}
         </p>
     </ng-container>
 
@@ -25,12 +25,12 @@
             id="kc-oauth"
             class="content-area"
         >
-            <h3>{{ 'oauthGrantRequest' | msgStr }}</h3>
+            <h3>{{ i18n.msgStr('oauthGrantRequest') }}</h3>
             <ul>
                 @for (clientScope of oauth.clientScopesRequested; track clientScope) {
                     <li>
                         <span>
-                            {{ clientScope.consentScreenText | advancedMsgStr }}
+                            {{ i18n.advancedMsgStr(clientScope.consentScreenText) }}
                             @if (clientScope.dynamicScopeParameter) {
                                 : <b>{{ clientScope.dynamicScopeParameter }}</b>
                             }
@@ -42,17 +42,17 @@
             @if (client.attributes['policyUri'] || client.attributes['tosUri']) {
                 <h3>
                     @if (client.name) {
-                        {{ 'oauthGrantInformation' | msgStr: (client.name | advancedMsgStr) }}
+                        {{ i18n.msgStr('oauthGrantInformation', i18n.advancedMsgStr(client.name)) }}
                     } @else {
-                        {{ 'oauthGrantInformation' | msgStr: client.clientId }}
+                        {{ i18n.msgStr('oauthGrantInformation', client.clientId) }}
                     }
                     @if (client.attributes['policyUri']) {
-                        {{ 'oauthGrantReview' | msgStr }}
+                        {{ i18n.msgStr('oauthGrantReview') }}
                         <a
                             [href]="client.attributes['policyUri']"
                             target="_blank"
                         >
-                            {{ 'oauthGrantPolicy' | msgStr }}
+                            {{ i18n.msgStr('oauthGrantPolicy') }}
                         </a>
                     }
                 </h3>
@@ -77,12 +77,12 @@
                             <input
                                 [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']"
                                 type="submit"
-                                [value]="'doYes' | msgStr"
+                                [value]="i18n.msgStr('doYes')"
                             />
                             <input
                                 [kcClass]="['kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass']"
                                 type="submit"
-                                [value]="'doNo' | msgStr"
+                                [value]="i18n.msgStr('doNo')"
                             />
                         </div>
                     </div>

package/src/login/pages/login-oauth-grant/login-oauth-grant.component.ts

@@ -1,16 +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 { AdvancedMsgStrPipe } from '@keycloakify/angular/login/pipes/advanced-msg-str.pipe';
-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: [KcClassDirective, TemplateComponent, MsgStrPipe, AdvancedMsgStrPipe],
+    imports: [KcClassDirective, TemplateComponent],
     selector: 'kc-root',
     templateUrl: 'login-oauth-grant.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -22,9 +24,10 @@ import { MsgStrPipe } from '@keycloakify/angular/login/pipes/msg-str.pipe';
     ]
 })
 export class LoginOauthGrantComponent extends ComponentReference {
-    kcContext = inject<Extract<KcContext, { pageId: 'login-oauth-grant.ftl' }>>(KC_CONTEXT);
+    kcContext = inject<Extract<KcContext, { pageId: 'login-oauth-grant.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>('oauth');

package/src/login/pages/login-oauth2-device-verify-user-code/login-oauth2-device-verify-user-code.component.html

@@ -7,7 +7,7 @@
     [documentTitle]="documentTitle()"
 >
     <ng-container headerNode>
-        {{ 'oauth2DeviceVerificationTitle' | msgStr }}
+        {{ i18n.msgStr('oauth2DeviceVerificationTitle') }}
     </ng-container>
     <ng-container content>
         <form
@@ -22,7 +22,7 @@
                         for="device-user-code"
                         [kcClass]="'kcLabelClass'"
                     >
-                        {{ 'verifyOAuth2DeviceUserCode' | msgStr }}
+                        {{ i18n.msgStr('verifyOAuth2DeviceUserCode') }}
                     </label>
                 </div>
 
@@ -53,7 +53,7 @@
                         <input
                             [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']"
                             type="submit"
-                            value="{{ 'doSubmit' | msgStr }}"
+                            [value]="i18n.msgStr('doSubmit')"
                         />
                     </div>
                 </div>

package/src/login/pages/login-oauth2-device-verify-user-code/login-oauth2-device-verify-user-code.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: [TemplateComponent, MsgStrPipe, KcClassDirective],
+    imports: [TemplateComponent, KcClassDirective],
     selector: 'kc-root',
     templateUrl: 'login-oauth2-device-verify-user-code.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -21,9 +24,10 @@ import { MsgStrPipe } from '@keycloakify/angular/login/pipes/msg-str.pipe';
     ]
 })
 export class LoginOauth2DeviceVerifyUserCodeComponent extends ComponentReference {
-    kcContext = inject<Extract<KcContext, { pageId: 'login-oauth2-device-verify-user-code.ftl' }>>(KC_CONTEXT);
+    kcContext = inject<Extract<KcContext, { pageId: 'login-oauth2-device-verify-user-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);
     displayRequiredFields = input(false);
     documentTitle = input<string>();
     bodyClassName = input<string>();

package/src/login/pages/login-otp/login-otp.component.html

@@ -9,7 +9,7 @@
     [documentTitle]="documentTitle()"
 >
     <ng-container headerNode>
-        {{ 'doLogIn' | msgStr }}
+        {{ i18n.msgStr('doLogIn') }}
     </ng-container>
     <ng-container content>
         <form
@@ -57,7 +57,7 @@
                         for="otp"
                         [kcClass]="'kcLabelClass'"
                     >
-                        {{ 'loginOtpOneTime' | msgStr }}
+                        {{ i18n.msgStr('loginOtpOneTime') }}
                     </label>
                 </div>
                 <div [kcClass]="'kcInputWrapperClass'">
@@ -94,7 +94,7 @@
                         name="login"
                         id="kc-login"
                         type="submit"
-                        value="{{ 'doLogIn' | msgStr }}"
+                        [value]="i18n.msgStr('doLogIn')"
                     />
                 </div>
             </div>

package/src/login/pages/login-otp/login-otp.component.ts

@@ -1,16 +1,19 @@
 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 { KcSanitizePipe } from '@keycloakify/angular/login/pipes/kc-sanitize.pipe';
-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: [TemplateComponent, KcClassDirective, MsgStrPipe, KcSanitizePipe],
+    imports: [TemplateComponent, KcClassDirective, KcSanitizePipe],
     selector: 'kc-root',
     templateUrl: 'login-otp.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -22,9 +25,10 @@ import { MsgStrPipe } from '@keycloakify/angular/login/pipes/msg-str.pipe';
     ]
 })
 export class LoginOtpComponent extends ComponentReference {
-    kcContext = inject<Extract<KcContext, { pageId: 'login-otp.ftl' }>>(KC_CONTEXT);
+    kcContext = inject<Extract<KcContext, { pageId: 'login-otp.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/login-page-expired/login-page-expired.component.html

@@ -7,27 +7,27 @@
     [documentTitle]="documentTitle()"
 >
     <ng-container headerNode>
-        {{ 'pageExpiredTitle' | msgStr }}
+        {{ i18n.msgStr('pageExpiredTitle') }}
     </ng-container>
     <ng-container content>
         <p
             id="instruction1"
             class="instruction"
         >
-            {{ 'pageExpiredMsg1' | msgStr }}
+            {{ i18n.msgStr('pageExpiredMsg1') }}
             <a
                 id="loginRestartLink"
                 [href]="url.loginRestartFlowUrl"
             >
-                {{ 'doClickHere' | msgStr }}
+                {{ i18n.msgStr('doClickHere') }}
             </a>
             .<br />
-            {{ 'pageExpiredMsg2' | msgStr }}
+            {{ i18n.msgStr('pageExpiredMsg2') }}
             <a
                 id="loginContinueLink"
                 [href]="url.loginAction"
             >
-                {{ 'doClickHere' | msgStr }}
+                {{ i18n.msgStr('doClickHere') }}
             </a>
             .
         </p>

package/src/login/pages/login-page-expired/login-page-expired.component.ts

@@ -1,14 +1,17 @@
 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 { 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: [TemplateComponent, MsgStrPipe],
+    imports: [TemplateComponent],
     selector: 'kc-root',
     templateUrl: 'login-page-expired.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -20,9 +23,10 @@ import { MsgStrPipe } from '@keycloakify/angular/login/pipes/msg-str.pipe';
     ]
 })
 export class LoginPageExpiredComponent extends ComponentReference {
-    kcContext = inject<Extract<KcContext, { pageId: 'login-page-expired.ftl' }>>(KC_CONTEXT);
+    kcContext = inject<Extract<KcContext, { pageId: 'login-page-expired.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/login-passkeys-conditional-authenticate/login-passkeys-conditional-authenticate.component.html

@@ -8,18 +8,18 @@
 @let registrationDisabled = kcContext.registrationDisabled;
 <kc-login-template [displayInfo]="displayInfo">
     <ng-container headerNode>
-        {{ 'passkey-login-title' | msgStr }}
+        {{ i18n.msgStr('passkey-login-title') }}
     </ng-container>
     <ng-container infoNode>
         @if (realm.registrationAllowed && !registrationDisabled) {
             <div id="kc-registration">
                 <span>
-                    {{ 'noAccount' | msgStr }}
+                    {{ i18n.msgStr('noAccount') }}
                     <a
                         tabIndex="6"
                         [href]="url.registrationUrl"
                     >
-                        {{ 'doRegister' | msgStr }}
+                        {{ i18n.msgStr('doRegister') }}
                     </a>
                 </span>
             </div>
@@ -86,7 +86,7 @@
                 @if (shouldDisplayAuthenticators) {
                     @if (authenticators.authenticators.length > 1) {
                         <p [kcClass]="'kcSelectAuthListItemTitle'">
-                            {{ 'passkey-available-authenticators' | msgStr }}
+                            {{ i18n.msgStr('passkey-available-authenticators') }}
                         </p>
                     }
 
@@ -106,7 +106,7 @@
                                         [id]="'kc-webauthn-authenticator-label-' + i"
                                         [kcClass]="'kcSelectAuthListItemHeadingClass'"
                                     >
-                                        {{ authenticator.label | advancedMsgStr }}
+                                        {{ i18n.advancedMsgStr(authenticator.label) }}
                                     </div>
                                     @if (
                                         authenticator.transports !== undefined &&
@@ -123,7 +123,7 @@
                                                 let i = $index
                                             ) {
                                                 <span>
-                                                    {{ nameProperty | advancedMsgStr }}
+                                                    {{ i18n.advancedMsgStr(nameProperty) }}
                                                 </span>
                                                 @if (i !== authenticator.transports.displayNameProperties.length - 1) {
                                                     <span>, </span>
@@ -132,7 +132,7 @@
                                         </div>
                                         <div [kcClass]="'kcSelectAuthListItemDescriptionClass'">
                                             <span [id]="'kc-webauthn-authenticator-createdlabel-' + i">
-                                                {{ 'passkey-createdAt-label' | msgStr }}
+                                                {{ i18n.msgStr('passkey-createdAt-label') }}
                                             </span>
                                             <span [id]="'kc-webauthn-authenticator-created-' + i">
                                                 {{ authenticator.createdAt }}
@@ -160,7 +160,7 @@
                                     for="username"
                                     [kcClass]="'kcLabelClass'"
                                 >
-                                    {{ 'passkey-autofill-select' | msgStr }}
+                                    {{ i18n.msgStr('passkey-autofill-select') }}
                                 </label>
                                 <input
                                     tabIndex="1"
@@ -194,7 +194,7 @@
                             id="authButtonId"
                             type="button"
                             autoFocus
-                            value="{{ 'passkey-doAuthenticate' | msgStr }}"
+                            [value]="i18n.msgStr('passkey-doAuthenticate')"
                             [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonBlockClass', 'kcButtonLargeClass']"
                         />
                     </div>

package/src/login/pages/login-passkeys-conditional-authenticate/login-passkeys-conditional-authenticate.component.ts

@@ -1,24 +1,24 @@
 import { ChangeDetectionStrategy, Component, forwardRef, inject } from '@angular/core';
-import { CLASSES, KC_CONTEXT, USE_DEFAULT_CSS } from '@keycloakify/angular/lib/public-api';
-import { Script } from '@keycloakify/angular/lib/models';
-import { ClassKey } from 'keycloakify/login/lib/kcClsx';
-import { KcContext } from 'keycloakify/login/KcContext';
-import { getKcClsx } from 'keycloakify/login/lib/kcClsx';
+import { Script } from '@keycloakify/angular/lib/models/script.model';
+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 { AdvancedMsgStrPipe } from '@keycloakify/angular/login/pipes/advanced-msg-str.pipe';
-import { MsgStrPipe } from '@keycloakify/angular/login/pipes/msg-str.pipe';
-import { LoginResourceInjectorService } from '@keycloakify/angular/login/services';
+import { LoginResourceInjectorService } from '@keycloakify/angular/login/services/login-resource-injector.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 { ClassKey, getKcClsx } from 'keycloakify/login/lib/kcClsx';
+import { I18n } from '../../i18n';
+import { KcContext } from '../../KcContext';
 
 @Component({
     standalone: true,
-    imports: [TemplateComponent, MsgStrPipe, KcClassDirective, AdvancedMsgStrPipe],
+    imports: [TemplateComponent, KcClassDirective],
     selector: 'kc-root',
     templateUrl: 'login-passkeys-conditional-authenticate.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [
-        MsgStrPipe,
         {
             provide: ComponentReference,
             useExisting: forwardRef(() => LoginPasskeysConditionalAuthenticateComponent)
@@ -26,11 +26,11 @@ import { LoginResourceInjectorService } from '@keycloakify/angular/login/service
     ]
 })
 export class LoginPasskeysConditionalAuthenticateComponent extends ComponentReference {
-    kcContext = inject<Extract<KcContext, { pageId: 'login-passkeys-conditional-authenticate.ftl' }>>(KC_CONTEXT);
+    kcContext = inject<Extract<KcContext, { pageId: 'login-passkeys-conditional-authenticate.ftl' }>>(KC_LOGIN_CONTEXT);
     loginResourceInjectorService = inject(LoginResourceInjectorService);
-    msgStr = inject(MsgStrPipe);
+    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);
     displayInfo: boolean = true;
 
     authButtonId = 'authenticateWebAuthnButton';
@@ -65,13 +65,13 @@ export class LoginPasskeysConditionalAuthenticateComponent extends ComponentRefe
                     authButton.addEventListener("click", () => {
                         authenticateByWebAuthn({
                             ...input,
-                            errmsg : ${JSON.stringify(this.msgStr.transform('webauthn-unsupported-browser-text'))}
+                            errmsg : ${JSON.stringify(this.i18n.msgStr('webauthn-unsupported-browser-text'))}
                         });
                     });
 
                     initAuthenticate({
                         ...input,
-                        errmsg : ${JSON.stringify(this.msgStr.transform('passkey-unsupported-browser-text'))}
+                        errmsg : ${JSON.stringify(this.i18n.msgStr('passkey-unsupported-browser-text'))}
                     });
           `
             }