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

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

@@ -8,7 +8,7 @@
     [documentTitle]="documentTitle()"
 >
     <ng-container headerNode>
-        {{ 'updateEmailTitle' | msgStr }}
+        {{ i18n.msgStr('updateEmailTitle') }}
     </ng-container>
     <ng-container content>
         <form
@@ -39,7 +39,7 @@
                             kcButtonLargeClass: true
                         }"
                         type="submit"
-                        value="{{ 'doSubmit' | msgStr }}"
+                        [value]="i18n.msgStr('doSubmit')"
                     />
                     @if (isAppInitiatedAction) {
                         <button
@@ -48,7 +48,7 @@
                             name="cancel-aia"
                             value="true"
                         >
-                            {{ 'doCancel' | msgStr }}
+                            {{ i18n.msgStr('doCancel') }}
                         </button>
                     }
                 </div>

package/src/login/pages/update-email/update-email.component.ts

@@ -1,17 +1,20 @@
 import { ChangeDetectionStrategy, Component, forwardRef, inject, input, signal } 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 { LogoutOtherSessionsComponent } from '@keycloakify/angular/login/components/logout-other-sessions/logout-other-sessions.component';
 import { UserProfileFormFieldsComponent } from '@keycloakify/angular/login/components/user-profile-form-fields/user-profile-form-fields.component';
 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, UserProfileFormFieldsComponent, LogoutOtherSessionsComponent],
+    imports: [TemplateComponent, KcClassDirective, UserProfileFormFieldsComponent, LogoutOtherSessionsComponent],
     selector: 'kc-root',
     templateUrl: 'update-email.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -23,9 +26,10 @@ import { MsgStrPipe } from '@keycloakify/angular/login/pipes/msg-str.pipe';
     ]
 })
 export class UpdateEmailComponent extends ComponentReference {
-    kcContext = inject<Extract<KcContext, { pageId: 'update-email.ftl' }>>(KC_CONTEXT);
+    kcContext = inject<Extract<KcContext, { pageId: 'update-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(true);
     documentTitle = input<string>();
     bodyClassName = input<string>();

package/src/login/pages/webauthn-authenticate/webauthn-authenticate.component.html

@@ -10,17 +10,17 @@
     [documentTitle]="documentTitle()"
 >
     <ng-container headerNode>
-        {{ 'webauthn-login-title' | msgStr }}
+        {{ i18n.msgStr('webauthn-login-title') }}
     </ng-container>
     <ng-container infoNode>
         <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'">
-                                    {{ 'webauthn-available-authenticators' | msgStr }}
+                                    {{ i18n.msgStr('webauthn-available-authenticators') }}
                                 </p>
                             }
                             <div [kcClass]="'kcFormOptionsClass'">
@@ -105,7 +105,7 @@
                                                     [id]="'kc-webauthn-authenticator-label-' + i"
                                                     [kcClass]="'kcSelectAuthListItemHeadingClass'"
                                                 >
-                                                    {{ authenticator.label | advancedMsgStr }}
+                                                    {{ i18n.advancedMsgStr(authenticator.label) }}
                                                 </div>
                                                 @if (authenticator.transports.displayNameProperties?.length) {
                                                     <div
@@ -117,7 +117,7 @@
                                                             track displayNameProperty;
                                                             let last = $last
                                                         ) {
-                                                            {{ displayNameProperty | advancedMsgStr }}
+                                                            {{ i18n.advancedMsgStr(displayNameProperty) }}
                                                             @if (!last) {
                                                                 <span>, </span>
                                                             }
@@ -125,7 +125,7 @@
                                                     </div>
                                                     <div [kcClass]="'kcSelectAuthListItemDescriptionClass'">
                                                         <span [id]="'kc-webauthn-authenticator-createdlabel-' + i">
-                                                            {{ 'webauthn-createdAt-label' | msgStr }}
+                                                            {{ i18n.msgStr('webauthn-createdAt-label') }}
                                                         </span>
                                                         <span [id]="'kc-webauthn-authenticator-created-' + i">{{ authenticator.createdAt }}</span>
                                                     </div>
@@ -151,7 +151,7 @@
                         [kcClass]="['kcButtonClass', 'kcButtonDefaultClass', 'kcButtonBlockClass', 'kcButtonLargeClass']"
                         id="cancelWebAuthnAIA"
                         name="cancel-aia"
-                        [value]="'webauthn-doAuthenticate' | msgStr"
+                        [value]="i18n.msgStr('webauthn-doAuthenticate')"
                     />
                 </div>
             </div>

package/src/login/pages/webauthn-authenticate/webauthn-authenticate.component.ts

@@ -1,25 +1,25 @@
 import { ChangeDetectionStrategy, Component, forwardRef, inject, input } 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 { LogoutOtherSessionsComponent } from '@keycloakify/angular/login/components/logout-other-sessions/logout-other-sessions.component';
 import { TemplateComponent } from '@keycloakify/angular/login/containers/template.component';
-import { KcClassDirective } from '@keycloakify/angular/login/directives';
-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 { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class.directive';
+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, AdvancedMsgStrPipe, KcClassDirective, LogoutOtherSessionsComponent],
+    imports: [TemplateComponent, KcClassDirective, LogoutOtherSessionsComponent],
     selector: 'kc-root',
     templateUrl: 'webauthn-authenticate.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [
-        MsgStrPipe,
         {
             provide: ComponentReference,
             useExisting: forwardRef(() => WebauthnAuthenticateComponent)
@@ -27,11 +27,11 @@ import { LoginResourceInjectorService } from '@keycloakify/angular/login/service
     ]
 })
 export class WebauthnAuthenticateComponent extends ComponentReference {
-    kcContext = inject<Extract<KcContext, { pageId: 'webauthn-authenticate.ftl' }>>(KC_CONTEXT);
+    kcContext = inject<Extract<KcContext, { pageId: 'webauthn-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);
     displayRequiredFields = input(false);
     documentTitle = input<string>();
     bodyClassName = input<string>();
@@ -57,7 +57,7 @@ export class WebauthnAuthenticateComponent extends ComponentReference {
                       userVerification : '${userVerification}',
                       rpId : '${rpId}',
                       createTimeout : ${createTimeout},
-                      errmsg : ${JSON.stringify(this.msgStr.transform('webauthn-unsupported-browser-text'))}
+                      errmsg : ${JSON.stringify(this.i18n.msgStr('webauthn-unsupported-browser-text'))}
                   };
                   authenticateByWebAuthn(input);
               });

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

@@ -9,7 +9,7 @@
     [documentTitle]="documentTitle()"
 >
     <ng-container headerNode>
-        {{ 'webauthn-error-title' | msgStr }}
+        {{ i18n.msgStr('webauthn-error-title') }}
     </ng-container>
     <ng-container content>
         <form
@@ -36,7 +36,7 @@
             [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonBlockClass', 'kcButtonLargeClass']"
             name="try-again"
             id="kc-try-again"
-            [value]="'doTryAgain' | msgStr"
+            [value]="i18n.msgStr('doTryAgain')"
         />
         @if (isAppInitiatedAction) {
             <form
@@ -52,7 +52,7 @@
                     name="cancel-aia"
                     value="true"
                 >
-                    {{ 'doCancel' | msgStr }}
+                    {{ i18n.msgStr('doCancel') }}
                 </button>
             </form>
         }

package/src/login/pages/webauthn-error/webauthn-error.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 { LogoutOtherSessionsComponent } from '@keycloakify/angular/login/components/logout-other-sessions/logout-other-sessions.component';
 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_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, LogoutOtherSessionsComponent],
+    imports: [TemplateComponent, KcClassDirective, LogoutOtherSessionsComponent],
     selector: 'kc-root',
     templateUrl: 'webauthn-error.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -22,9 +25,10 @@ import { MsgStrPipe } from '@keycloakify/angular/login/pipes/msg-str.pipe';
     ]
 })
 export class WebauthnErrorComponent extends ComponentReference {
-    kcContext = inject<Extract<KcContext, { pageId: 'webauthn-error.ftl' }>>(KC_CONTEXT);
+    kcContext = inject<Extract<KcContext, { pageId: 'webauthn-error.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/webauthn-register/webauthn-register.component.html

@@ -11,7 +11,7 @@
 >
     <ng-container headerNode>
         <span [kcClass]="'kcWebAuthnKeyIcon'"></span>
-        {{ 'webauthn-registration-title' | msgStr }}
+        {{ i18n.msgStr('webauthn-registration-title') }}
     </ng-container>
     <ng-container content>
         <form
@@ -58,7 +58,7 @@
             type="submit"
             [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonBlockClass', 'kcButtonLargeClass']"
             [id]="authButtonId"
-            [value]="'doRegisterSecurityKey' | msgStr"
+            [value]="i18n.msgStr('doRegisterSecurityKey')"
         />
         @if (!isSetRetry && isAppInitiatedAction) {
             <form
@@ -74,7 +74,7 @@
                     name="cancel-aia"
                     value="true"
                 >
-                    {{ 'doCancel' | msgStr }}
+                    {{ i18n.msgStr('doCancel') }}
                 </button>
             </form>
         }

package/src/login/pages/webauthn-register/webauthn-register.component.ts

@@ -1,23 +1,25 @@
 import { ChangeDetectionStrategy, Component, forwardRef, inject, input } 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 { 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 { LogoutOtherSessionsComponent } from '@keycloakify/angular/login/components/logout-other-sessions/logout-other-sessions.component';
 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 { LoginResourceInjectorService } from '@keycloakify/angular/login/services';
+import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class.directive';
+import { LoginResourceInjectorService } from '@keycloakify/angular/login/services/login-resource-injector.service';
+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';
+import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n.token';
+import { I18n } from '../../i18n';
 
 @Component({
     standalone: true,
-    imports: [TemplateComponent, MsgStrPipe, KcClassDirective, LogoutOtherSessionsComponent],
+    imports: [TemplateComponent, KcClassDirective, LogoutOtherSessionsComponent],
     selector: 'kc-root',
     templateUrl: 'webauthn-register.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [
-        MsgStrPipe,
         {
             provide: ComponentReference,
             useExisting: forwardRef(() => WebauthnRegisterComponent)
@@ -25,11 +27,11 @@ import { LoginResourceInjectorService } from '@keycloakify/angular/login/service
     ]
 })
 export class WebauthnRegisterComponent extends ComponentReference {
-    kcContext = inject<Extract<KcContext, { pageId: 'webauthn-register.ftl' }>>(KC_CONTEXT);
+    kcContext = inject<Extract<KcContext, { pageId: 'webauthn-register.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);
     displayRequiredFields = input(false);
     documentTitle = input<string>();
     bodyClassName = input<string>();
@@ -76,9 +78,9 @@ export class WebauthnRegisterComponent extends ComponentReference {
                       userVerificationRequirement : ${JSON.stringify(userVerificationRequirement)},
                       createTimeout : ${createTimeout},
                       excludeCredentialIds : ${JSON.stringify(excludeCredentialIds)},
-                      initLabel : ${JSON.stringify(this.msgStr.transform('webauthn-registration-init-label'))},
-                      initLabelPrompt : ${JSON.stringify(this.msgStr.transform('webauthn-registration-init-label-prompt'))},
-                      errmsg : ${JSON.stringify(this.msgStr.transform('webauthn-unsupported-browser-text'))}
+                      initLabel : ${JSON.stringify(this.i18n.msgStr('webauthn-registration-init-label'))},
+                      initLabelPrompt : ${JSON.stringify(this.i18n.msgStr('webauthn-registration-init-label-prompt'))},
+                      errmsg : ${JSON.stringify(this.i18n.msgStr('webauthn-unsupported-browser-text'))}
                   };
                   registerByWebAuthn(input);
               });

package/src/login/pipes/kc-sanitize.pipe.ts

@@ -1,4 +1,4 @@
-import { Pipe, PipeTransform } from '@angular/core';
+import { inject, Pipe, PipeTransform } from '@angular/core';
 import {
     DomSanitizer,
     SafeHtml,
@@ -10,25 +10,23 @@ import {
 
 @Pipe({ name: 'kcSanitize', standalone: true })
 export class KcSanitizePipe implements PipeTransform {
-    constructor(private sanitizer: DomSanitizer) {}
-    // TODO: Fix typing
+    #sanitizer = inject(DomSanitizer);
 
     transform(
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        value: any,
-        type: string
+        value: string,
+        type: 'html' | 'style' | 'script' | 'url' | 'resourceUrl'
     ): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
         switch (type) {
             case 'html':
-                return this.sanitizer.bypassSecurityTrustHtml(value);
+                return this.#sanitizer.bypassSecurityTrustHtml(value);
             case 'style':
-                return this.sanitizer.bypassSecurityTrustStyle(value);
+                return this.#sanitizer.bypassSecurityTrustStyle(value);
             case 'script':
-                return this.sanitizer.bypassSecurityTrustScript(value);
+                return this.#sanitizer.bypassSecurityTrustScript(value);
             case 'url':
-                return this.sanitizer.bypassSecurityTrustUrl(value);
+                return this.#sanitizer.bypassSecurityTrustUrl(value);
             case 'resourceUrl':
-                return this.sanitizer.bypassSecurityTrustResourceUrl(value);
+                return this.#sanitizer.bypassSecurityTrustResourceUrl(value);
             default:
                 throw new Error(`Invalid safe type specified: ${type}`);
         }

package/src/login/pipes/to-array.pipe.ts

@@ -6,7 +6,6 @@ import { Pipe, PipeTransform } from '@angular/core';
 })
 export class ToArrayPipe implements PipeTransform {
     transform(value: string | string[], emptyWhenString = false): string[] {
-        // if (!value) throw new Error('must pass a value');
         if (value instanceof Array) {
             return value;
         }

package/src/login/providers/keycloakify-angular.providers.ts

@@ -0,0 +1,68 @@
+import { DOCUMENT } from '@angular/common';
+import { APP_INITIALIZER, LOCALE_ID, makeEnvironmentProviders } 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 { 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 { KcContextLike } from 'keycloakify/login/i18n/noJsx';
+import { ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { KcContext } from '../KcContext';
+import { I18nService } from '@keycloakify/angular/login/services/i18n.service';
+
+export type KeycloakifyAngularLoginConfig = {
+    doMakeUserConfirmPassword?: boolean;
+    doUseDefaultCss?: boolean;
+    classes?: { [key in ClassKey]?: string };
+    getI18n: (params: { kcContext: KcContextLike }) => {
+        i18n: unknown;
+        prI18n_currentLanguage: Promise<unknown> | undefined;
+    };
+};
+
+export const provideKeycloakifyAngularLogin = (config: KeycloakifyAngularLoginConfig) =>
+    makeEnvironmentProviders([
+        {
+            provide: KC_LOGIN_CONTEXT,
+            // @ts-ignore
+            useValue: window.kcContext
+        },
+        {
+            provide: DO_MAKE_USER_CONFIRM_PASSWORD,
+            useValue: config?.doMakeUserConfirmPassword ?? true
+        },
+        {
+            provide: LOCALE_ID,
+            useFactory: (document: Document) => {
+                return document.documentElement.lang ?? 'en';
+            },
+            deps: [DOCUMENT]
+        },
+        {
+            provide: APP_INITIALIZER,
+            multi: true,
+            useFactory: (i18nService: I18nService, kcContext: KcContext) => async () => {
+                const getI18n = config.getI18n;
+
+                const { i18n, prI18n_currentLanguage } = getI18n({
+                    kcContext
+                });
+                let i18nPromise = new Promise<typeof i18n>(resolve => resolve(i18n));
+                if (prI18n_currentLanguage) {
+                    i18nPromise = prI18n_currentLanguage;
+                }
+                return i18nPromise.then(i18n => {
+                    i18nService.i18n = i18n;
+                    return true;
+                });
+            },
+            deps: [I18nService, KC_LOGIN_CONTEXT]
+        },
+        {
+            provide: LOGIN_I18N,
+            useFactory: (i18nService: I18nService) => i18nService.i18n,
+            deps: [I18nService]
+        },
+        { provide: USE_DEFAULT_CSS, useValue: config?.doUseDefaultCss ?? true },
+        { provide: LOGIN_CLASSES, useValue: config?.classes ?? {} }
+    ]);

package/src/{lib → login}/services/i18n.service.ts

@@ -1,5 +1,6 @@
 import { Injectable } from '@angular/core';
+
 @Injectable({ providedIn: 'root' })
-export class I18nService<T> {
-    i18n!: T;
+export class I18nService {
+    i18n!: unknown;
 }

package/src/login/services/login-resource-injector.service.ts

@@ -1,14 +1,15 @@
 import { inject, Injectable } from '@angular/core';
-import { KC_CONTEXT } from '@keycloakify/angular/lib/public-api';
-import { ResourceInjectorService, Script } from '@keycloakify/angular/lib/public-api';
+import { KC_LOGIN_CONTEXT } from '@keycloakify/angular/login/tokens/kc-context.token';
+import { ResourceInjectorService } from '@keycloakify/angular/lib/services/resource-injector.service';
 import { KcContext } from 'keycloakify/login/KcContext';
 import { catchError, forkJoin, of, switchMap } from 'rxjs';
+import { Script } from '@keycloakify/angular/lib/models/script.model';
 
 @Injectable({
     providedIn: 'root'
 })
 export class LoginResourceInjectorService {
-    private kcContext: KcContext = inject<KcContext>(KC_CONTEXT);
+    private kcContext: KcContext = inject<KcContext>(KC_LOGIN_CONTEXT);
     private resourceInjectorService: ResourceInjectorService = inject(
         ResourceInjectorService
     );

package/src/login/services/user-profile-form.service.ts

@@ -10,11 +10,6 @@ import {
     WritableSignal
 } from '@angular/core';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
-import {
-    DO_MAKE_USER_CONFIRM_PASSWORD,
-    I18N,
-    KC_CONTEXT
-} from '@keycloakify/angular/lib/public-api';
 import {
     Attribute,
     KcContext,
@@ -31,6 +26,9 @@ import { formatNumber } from 'keycloakify/tools/formatNumber';
 import { structuredCloneButFunctions } from 'keycloakify/tools/structuredCloneButFunctions';
 import { assert, id } from 'tsafe';
 import { LoginResourceInjectorService } from './login-resource-injector.service';
+import { KC_LOGIN_CONTEXT } from '@keycloakify/angular/login/tokens/kc-context.token';
+import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n.token';
+import { DO_MAKE_USER_CONFIRM_PASSWORD } from '@keycloakify/angular/login/tokens/make-user-confirm-password.token';
 
 type KcContextLike_useGetErrors = KcContextLike_i18n & {
     messagesPerField: Pick<KcContext['messagesPerField'], 'existsError' | 'get'>;
@@ -119,8 +117,8 @@ export type FormAction =
 @Injectable({ providedIn: 'root' })
 export class UserProfileFormService {
     private kcContext: KcContextLike =
-        inject<Extract<KcContext, { pageId: 'register.ftl' }>>(KC_CONTEXT);
-    private i18n = inject<I18n>(I18N);
+        inject<Extract<KcContext, { pageId: 'register.ftl' }>>(KC_LOGIN_CONTEXT);
+    private i18n = inject<I18n>(LOGIN_I18N);
     private doMakeUserConfirmPassword = inject(DO_MAKE_USER_CONFIRM_PASSWORD);
     private loginResourceInjectorService = inject(LoginResourceInjectorService);
     private sanitizer: DomSanitizer = inject(DomSanitizer);

package/src/login/tokens/classes.token.ts

@@ -0,0 +1,6 @@
+import { InjectionToken } from '@angular/core';
+import { ClassKey } from 'keycloakify/login/lib/kcClsx';
+
+export const LOGIN_CLASSES = new InjectionToken<{ [key in ClassKey]?: string }>(
+    'login classes'
+);

package/src/login/tokens/i18n.token.ts

@@ -0,0 +1,3 @@
+import { InjectionToken } from '@angular/core';
+
+export const LOGIN_I18N = new InjectionToken<unknown>('login i18n');

package/src/login/tokens/kc-context.token.ts

@@ -0,0 +1,4 @@
+import { InjectionToken } from '@angular/core';
+import { KcContext } from '../KcContext';
+
+export const KC_LOGIN_CONTEXT = new InjectionToken<KcContext>('keycloak login context');

package/src/login/tokens/make-user-confirm-password.token.ts

@@ -0,0 +1,5 @@
+import { InjectionToken } from '@angular/core';
+
+export const DO_MAKE_USER_CONFIRM_PASSWORD = new InjectionToken<boolean>(
+    'doMakeUserConfirmPassword'
+);

package/src/tsconfig.json

@@ -13,5 +13,11 @@
         },
         "allowSyntheticDefaultImports": true,
         "experimentalDecorators": true
+    },
+    "angularCompilerOptions": {
+        "enableI18nLegacyMessageIdFormat": false,
+        "strictInjectionParameters": true,
+        "strictInputAccessModifiers": true,
+        "strictTemplates": true
     }
 }