@keycloakify/angular 0.0.1-rc.0 → 0.0.1-rc.10

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

@@ -1,9 +1,9 @@
-import { inject, Injectable, Renderer2, RendererFactory2 } from "@angular/core";
-import { Observable } from "rxjs";
-import { Script } from "../models/script.model";
+import { inject, Injectable, Renderer2, RendererFactory2 } from '@angular/core';
+import { Observable } from 'rxjs';
+import { Script } from '../models/script.model';
 
 @Injectable({
-    providedIn: "root"
+    providedIn: 'root'
 })
 export class ResourceInjectorService {
     private renderer: Renderer2 = inject(RendererFactory2).createRenderer(null, null);
@@ -17,8 +17,8 @@ export class ResourceInjectorService {
                 console.debug(`stylesheet: ${url} already loaded`);
                 return;
             }
-            const link = document.createElement("link");
-            link.rel = "stylesheet";
+            const link = document.createElement('link');
+            link.rel = 'stylesheet';
             link.href = url;
 
             link.onload = () => {
@@ -39,7 +39,7 @@ export class ResourceInjectorService {
             console.debug(`script: ${src} already injected`);
             return;
         }
-        const script = document.createElement("script");
+        const script = document.createElement('script');
         script.type = type;
         if (src) script.src = src;
         if (textContent) script.textContent = textContent;

package/src/lib/tokens/use-default-css.token.ts

@@ -0,0 +1,3 @@
+import { InjectionToken } from '@angular/core';
+
+export const USE_DEFAULT_CSS = new InjectionToken<boolean>('use default css');

package/src/login/DefaultPage.ts

@@ -1,9 +1,9 @@
-import { Type } from "@angular/core";
-import { ClassKey } from "keycloakify/login/lib/kcClsx";
-import { KcContext } from "keycloakify/login/KcContext";
+import { Type } from '@angular/core';
+import { type ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { type KcContext } from './KcContext';
 
 const DefaultPage = async (
-    pageId: KcContext["pageId"],
+    pageId: KcContext['pageId'],
     doMakeUserConfirmPassword = true,
     doUseDefaultCss = true,
     classes: { [key in ClassKey]?: string } = {}
@@ -15,185 +15,185 @@ const DefaultPage = async (
 }> => {
     let ComponentBootstrapPromise;
     switch (pageId) {
-        case "login.ftl":
+        case 'login.ftl':
             ComponentBootstrapPromise = import(
-                "@keycloakify/angular/login/pages/login/login.component"
+                '@keycloakify/angular/login/pages/login/login.component'
             ).then(c => c.LoginComponent);
             break;
-        case "login-username.ftl":
+        case 'login-username.ftl':
             ComponentBootstrapPromise = import(
-                "@keycloakify/angular/login/pages/login-username/login-username.component"
+                '@keycloakify/angular/login/pages/login-username/login-username.component'
             ).then(c => c.LoginUsernameComponent);
             break;
-        case "login-password.ftl":
+        case 'login-password.ftl':
             ComponentBootstrapPromise = import(
-                "@keycloakify/angular/login/pages/login-password/login-password.component"
+                '@keycloakify/angular/login/pages/login-password/login-password.component'
             ).then(c => c.LoginPasswordComponent);
             break;
-        case "webauthn-authenticate.ftl":
+        case 'webauthn-authenticate.ftl':
             ComponentBootstrapPromise = import(
-                "@keycloakify/angular/login/pages/webauthn-authenticate/webauthn-authenticate.component"
+                '@keycloakify/angular/login/pages/webauthn-authenticate/webauthn-authenticate.component'
             ).then(c => c.WebauthnAuthenticateComponent);
             break;
-        case "webauthn-register.ftl":
+        case 'webauthn-register.ftl':
             ComponentBootstrapPromise = import(
-                "@keycloakify/angular/login/pages/webauthn-register/webauthn-register.component"
+                '@keycloakify/angular/login/pages/webauthn-register/webauthn-register.component'
             ).then(c => c.WebauthnRegisterComponent);
             break;
-        case "register.ftl":
+        case 'register.ftl':
             ComponentBootstrapPromise = import(
-                "@keycloakify/angular/login/pages/register/register.component"
+                '@keycloakify/angular/login/pages/register/register.component'
             ).then(c => c.RegisterComponent);
             break;
-        case "info.ftl":
+        case 'info.ftl':
             ComponentBootstrapPromise = import(
-                "@keycloakify/angular/login/pages/info/info.component"
+                '@keycloakify/angular/login/pages/info/info.component'
             ).then(c => c.InfoComponent);
             break;
-        case "error.ftl":
+        case 'error.ftl':
             ComponentBootstrapPromise = import(
-                "@keycloakify/angular/login/pages/error/error.component"
+                '@keycloakify/angular/login/pages/error/error.component'
             ).then(c => c.ErrorComponent);
             break;
-        case "login-reset-password.ftl":
+        case 'login-reset-password.ftl':
             ComponentBootstrapPromise = import(
-                "@keycloakify/angular/login/pages/login-reset-password/login-reset-password.component"
+                '@keycloakify/angular/login/pages/login-reset-password/login-reset-password.component'
             ).then(c => c.LoginResetPasswordComponent);
             break;
-        case "login-verify-email.ftl":
+        case 'login-verify-email.ftl':
             ComponentBootstrapPromise = import(
-                "@keycloakify/angular/login/pages/login-verify-email/login-verify-email.component"
+                '@keycloakify/angular/login/pages/login-verify-email/login-verify-email.component'
             ).then(c => c.LoginVerifyEmailComponent);
             break;
-        case "terms.ftl":
+        case 'terms.ftl':
             ComponentBootstrapPromise = import(
-                "@keycloakify/angular/login/pages/terms/terms.component"
+                '@keycloakify/angular/login/pages/terms/terms.component'
             ).then(c => c.TermsComponent);
             break;
-        case "login-oauth2-device-verify-user-code.ftl":
+        case 'login-oauth2-device-verify-user-code.ftl':
             ComponentBootstrapPromise = import(
-                "@keycloakify/angular/login/pages/login-oauth2-device-verify-user-code/login-oauth2-device-verify-user-code.component"
+                '@keycloakify/angular/login/pages/login-oauth2-device-verify-user-code/login-oauth2-device-verify-user-code.component'
             ).then(c => c.LoginOauth2DeviceVerifyUserCodeComponent);
             break;
-        case "login-oauth-grant.ftl":
+        case 'login-oauth-grant.ftl':
             ComponentBootstrapPromise = import(
-                "@keycloakify/angular/login/pages/login-oauth-grant/login-oauth-grant.component"
+                '@keycloakify/angular/login/pages/login-oauth-grant/login-oauth-grant.component'
             ).then(c => c.LoginOauthGrantComponent);
             break;
-        case "login-otp.ftl":
+        case 'login-otp.ftl':
             ComponentBootstrapPromise = import(
-                "@keycloakify/angular/login/pages/login-otp/login-otp.component"
+                '@keycloakify/angular/login/pages/login-otp/login-otp.component'
             ).then(c => c.LoginOtpComponent);
 
             break;
-        case "login-update-profile.ftl":
+        case 'login-update-profile.ftl':
             ComponentBootstrapPromise = import(
-                "@keycloakify/angular/login/pages/login-update-profile/login-update-profile.component"
+                '@keycloakify/angular/login/pages/login-update-profile/login-update-profile.component'
             ).then(c => c.LoginUpdateProfileComponent);
             break;
-        case "login-update-password.ftl":
+        case 'login-update-password.ftl':
             ComponentBootstrapPromise = import(
-                "@keycloakify/angular/login/pages/login-update-password/login-update-password.component"
+                '@keycloakify/angular/login/pages/login-update-password/login-update-password.component'
             ).then(c => c.LoginUpdatePasswordComponent);
             break;
-        case "login-idp-link-confirm.ftl":
+        case 'login-idp-link-confirm.ftl':
             ComponentBootstrapPromise = import(
-                "@keycloakify/angular/login/pages/login-idp-link-confirm/login-idp-link-confirm.component"
+                '@keycloakify/angular/login/pages/login-idp-link-confirm/login-idp-link-confirm.component'
             ).then(c => c.LoginIdpLinkConfirmComponent);
             break;
-        case "login-idp-link-email.ftl":
+        case 'login-idp-link-email.ftl':
             ComponentBootstrapPromise = import(
-                "@keycloakify/angular/login/pages/login-idp-link-email/login-idp-link-email.component"
+                '@keycloakify/angular/login/pages/login-idp-link-email/login-idp-link-email.component'
             ).then(c => c.LoginIdpLinkEmailComponent);
             break;
-        case "login-page-expired.ftl":
+        case 'login-page-expired.ftl':
             ComponentBootstrapPromise = import(
-                "@keycloakify/angular/login/pages/login-page-expired/login-page-expired.component"
+                '@keycloakify/angular/login/pages/login-page-expired/login-page-expired.component'
             ).then(c => c.LoginPageExpiredComponent);
             break;
-        case "login-config-totp.ftl":
+        case 'login-config-totp.ftl':
             ComponentBootstrapPromise = import(
-                "@keycloakify/angular/login/pages/login-config-totp/login-config-totp.component"
+                '@keycloakify/angular/login/pages/login-config-totp/login-config-totp.component'
             ).then(c => c.LoginConfigTotpComponent);
             break;
-        case "logout-confirm.ftl":
+        case 'logout-confirm.ftl':
             ComponentBootstrapPromise = import(
-                "@keycloakify/angular/login/pages/logout-confirm/logout-confirm.component"
+                '@keycloakify/angular/login/pages/logout-confirm/logout-confirm.component'
             ).then(c => c.LogoutConfirmComponent);
             break;
-        case "idp-review-user-profile.ftl":
+        case 'idp-review-user-profile.ftl':
             ComponentBootstrapPromise = import(
-                "@keycloakify/angular/login/pages/idp-review-user-profile/idp-review-user-profile.component"
+                '@keycloakify/angular/login/pages/idp-review-user-profile/idp-review-user-profile.component'
             ).then(c => c.IdpReviewUserProfileComponent);
             break;
-        case "update-email.ftl":
+        case 'update-email.ftl':
             ComponentBootstrapPromise = import(
-                "@keycloakify/angular/login/pages/update-email/update-email.component"
+                '@keycloakify/angular/login/pages/update-email/update-email.component'
             ).then(c => c.UpdateEmailComponent);
             break;
-        case "select-authenticator.ftl":
+        case 'select-authenticator.ftl':
             ComponentBootstrapPromise = import(
-                "@keycloakify/angular/login/pages/select-authenticator/select-authenticator.component"
+                '@keycloakify/angular/login/pages/select-authenticator/select-authenticator.component'
             ).then(c => c.SelectAuthenticatorComponent);
             break;
-        case "saml-post-form.ftl":
+        case 'saml-post-form.ftl':
             ComponentBootstrapPromise = import(
-                "@keycloakify/angular/login/pages/saml-post-form/saml-post-form.component"
+                '@keycloakify/angular/login/pages/saml-post-form/saml-post-form.component'
             ).then(c => c.SamlPostFormComponent);
             break;
-        case "delete-credential.ftl":
+        case 'delete-credential.ftl':
             ComponentBootstrapPromise = import(
-                "@keycloakify/angular/login/pages/delete-credential/delete-credential.component"
+                '@keycloakify/angular/login/pages/delete-credential/delete-credential.component'
             ).then(c => c.DeleteCredentialComponent);
             break;
-        case "code.ftl":
+        case 'code.ftl':
             ComponentBootstrapPromise = import(
-                "@keycloakify/angular/login/pages/code/code.component"
+                '@keycloakify/angular/login/pages/code/code.component'
             ).then(c => c.CodeComponent);
             break;
-        case "delete-account-confirm.ftl":
+        case 'delete-account-confirm.ftl':
             ComponentBootstrapPromise = import(
-                "@keycloakify/angular/login/pages/delete-account-confirm/delete-account-confirm.component"
+                '@keycloakify/angular/login/pages/delete-account-confirm/delete-account-confirm.component'
             ).then(c => c.DeleteAccountConfirmComponent);
             break;
-        case "frontchannel-logout.ftl":
+        case 'frontchannel-logout.ftl':
             ComponentBootstrapPromise = import(
-                "@keycloakify/angular/login/pages/frontchannel-logout/frontchannel-logout.component"
+                '@keycloakify/angular/login/pages/frontchannel-logout/frontchannel-logout.component'
             ).then(c => c.FrontchannelLogoutComponent);
             break;
-        case "login-recovery-authn-code-config.ftl":
+        case 'login-recovery-authn-code-config.ftl':
             ComponentBootstrapPromise = import(
-                "@keycloakify/angular/login/pages/login-recovery-authn-code-config/login-recovery-authn-code-config.component"
+                '@keycloakify/angular/login/pages/login-recovery-authn-code-config/login-recovery-authn-code-config.component'
             ).then(c => c.LoginRecoveryAuthnCodeConfigComponent);
             break;
-        case "login-recovery-authn-code-input.ftl":
+        case 'login-recovery-authn-code-input.ftl':
             ComponentBootstrapPromise = import(
-                "@keycloakify/angular/login/pages/login-recovery-authn-code-input/login-recovery-authn-code-input.component"
+                '@keycloakify/angular/login/pages/login-recovery-authn-code-input/login-recovery-authn-code-input.component'
             ).then(c => c.LoginRecoveryAuthnCodeInputComponent);
             break;
-        case "login-reset-otp.ftl":
+        case 'login-reset-otp.ftl':
             ComponentBootstrapPromise = import(
-                "@keycloakify/angular/login/pages/login-reset-otp/login-reset-otp.component"
+                '@keycloakify/angular/login/pages/login-reset-otp/login-reset-otp.component'
             ).then(c => c.LoginResetOtpComponent);
             break;
-        case "login-x509-info.ftl":
+        case 'login-x509-info.ftl':
             ComponentBootstrapPromise = import(
-                "@keycloakify/angular/login/pages/login-x509-info/login-x509-info.component"
+                '@keycloakify/angular/login/pages/login-x509-info/login-x509-info.component'
             ).then(c => c.LoginX509InfoComponent);
             break;
-        case "webauthn-error.ftl":
+        case 'webauthn-error.ftl':
             ComponentBootstrapPromise = import(
-                "@keycloakify/angular/login/pages/webauthn-error/webauthn-error.component"
+                '@keycloakify/angular/login/pages/webauthn-error/webauthn-error.component'
             ).then(c => c.WebauthnErrorComponent);
             break;
-        case "login-passkeys-conditional-authenticate.ftl":
+        case 'login-passkeys-conditional-authenticate.ftl':
             ComponentBootstrapPromise = import(
-                "@keycloakify/angular/login/pages/login-passkeys-conditional-authenticate/login-passkeys-conditional-authenticate.component"
+                '@keycloakify/angular/login/pages/login-passkeys-conditional-authenticate/login-passkeys-conditional-authenticate.component'
             ).then(c => c.LoginPasskeysConditionalAuthenticateComponent);
             break;
-        case "login-idp-link-confirm-override.ftl":
+        case 'login-idp-link-confirm-override.ftl':
             ComponentBootstrapPromise = import(
-                "@keycloakify/angular/login/pages/login-idp-link-confirm-override/login-idp-link-confirm-override.component"
+                '@keycloakify/angular/login/pages/login-idp-link-confirm-override/login-idp-link-confirm-override.component'
             ).then(c => c.LoginIdpLinkConfirmOverrideComponent);
             break;
     }

package/src/login/KcContext.ts

@@ -1 +1 @@
-export type { KcContext } from "keycloakify/login/KcContext";
+export type { KcContext } from 'keycloakify/login/KcContext';

package/src/login/classes/component-reference.class.ts

@@ -1,4 +1,4 @@
-import { ClassKey } from "keycloakify/login/lib/kcClsx";
+import { type ClassKey } from 'keycloakify/login/lib/kcClsx';
 export abstract class ComponentReference {
     doUseDefaultCss: boolean | undefined;
     classes: Partial<Record<ClassKey, string>> | undefined;

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

@@ -1,24 +1,24 @@
 @let idPostfix = attribute()?.name ?? '' + '-' + (fieldIndex() ?? 0 + 1);
 @if (hasRemove()) {
-  <button
-    [id]="'kc-remove-' + idPostfix"
-    type="button"
-    class="pf-c-button pf-m-inline pf-m-link"
-    (click)="onRemove()"
-  >
-    {{ 'remove' | msgStr }}
-  </button>
-  @if (hasAdd()) {
-    &nbsp;|&nbsp;
-  }
+    <button
+        [id]="'kc-remove-' + idPostfix"
+        type="button"
+        class="pf-c-button pf-m-inline pf-m-link"
+        (click)="onRemove()"
+    >
+        {{ i18n.msgStr('remove') }}
+    </button>
+    @if (hasAdd()) {
+        &nbsp;|&nbsp;
+    }
 }
 @if (hasAdd()) {
-  <button
-    [id]="'kc-add-' + idPostfix"
-    type="button"
-    class="pf-c-button pf-m-inline pf-m-link"
-    (click)="onAdd()"
-  >
-    {{ 'addValue' | msgStr }}
-  </button>
+    <button
+        [id]="'kc-add-' + idPostfix"
+        type="button"
+        class="pf-c-button pf-m-inline pf-m-link"
+        (click)="onAdd()"
+    >
+        {{ i18n.msgStr('addValue') }}
+    </button>
 }

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

@@ -1,13 +1,8 @@
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    input,
-    output
-} from "@angular/core";
-import { Attribute } from "keycloakify/login/KcContext";
-import { MsgStrPipe } from "@keycloakify/angular/login/pipes/msg-str.pipe";
-import { FormAction } from "@keycloakify/angular/login/services/user-profile-form.service";
+import { ChangeDetectionStrategy, Component, computed, inject, input, output } from '@angular/core';
+import { type FormAction } from '@keycloakify/angular/login/services/user-profile-form.service';
+import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n.token';
+import { type Attribute } from 'keycloakify/login/KcContext';
+import { type I18n } from '../../i18n';
 
 @Component({
     standalone: true,
@@ -18,12 +13,13 @@ import { FormAction } from "@keycloakify/angular/login/services/user-profile-for
             }
         `
     ],
-    imports: [MsgStrPipe],
-    selector: "kc-add-remove-buttons-multi-valued-attribute",
-    templateUrl: "add-remove-buttons-multi-valued-attribute.component.html",
+    imports: [],
+    selector: 'kc-add-remove-buttons-multi-valued-attribute',
+    templateUrl: 'add-remove-buttons-multi-valued-attribute.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class AddRemoveButtonsMultiValuedAttributeComponent {
+    i18n = inject<I18n>(LOGIN_I18N);
     attribute = input<Attribute>();
     values = input<string[]>();
     fieldIndex = input<number>();
@@ -58,25 +54,21 @@ export class AddRemoveButtonsMultiValuedAttributeComponent {
 
     onAdd() {
         this.dispatchFormAction.emit({
-            action: "update",
-            name: this.attribute()?.name ?? "",
-            valueOrValues: [...(this.values() ?? []), ""]
+            action: 'update',
+            name: this.attribute()?.name ?? '',
+            valueOrValues: [...(this.values() ?? []), '']
         });
     }
 
     onRemove() {
         this.dispatchFormAction.emit({
-            action: "update",
-            name: this.attribute()?.name ?? "",
+            action: 'update',
+            name: this.attribute()?.name ?? '',
             valueOrValues: (this.values() ?? []).filter((_, i) => i !== this.fieldIndex())
         });
     }
 
-    private getButtonToDisplayForMultivaluedAttributeField(params: {
-        attribute: Attribute;
-        values: string[];
-        fieldIndex: number;
-    }) {
+    private getButtonToDisplayForMultivaluedAttributeField(params: { attribute: Attribute; values: string[]; fieldIndex: number }) {
         const { attribute, values, fieldIndex } = params;
 
         const hasRemove = (() => {

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

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

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

@@ -1,16 +1,11 @@
-import {
-    ChangeDetectionStrategy,
-    Component,
-    forwardRef,
-    inject,
-    input
-} from "@angular/core";
-import { CLASSES, USE_DEFAULT_CSS } from "@keycloakify/angular/lib/public-api";
-import { Attribute } from "keycloakify/login/KcContext";
-import { ClassKey } from "keycloakify/login/lib/kcClsx";
-import { ComponentReference } from "@keycloakify/angular/login/classes/component-reference.class";
-import { KcClassDirective } from "@keycloakify/angular/login/directives/kc-class.directive";
-import { FormFieldError } from "@keycloakify/angular/login/services/user-profile-form.service";
+import { ChangeDetectionStrategy, Component, forwardRef, inject, input } from '@angular/core';
+import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css.token';
+import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference.class';
+import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class.directive';
+import { type FormFieldError } from '@keycloakify/angular/login/services/user-profile-form.service';
+import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes.token';
+import { type Attribute } from 'keycloakify/login/KcContext';
+import { type ClassKey } from 'keycloakify/login/lib/kcClsx';
 
 @Component({
     standalone: true,
@@ -22,8 +17,8 @@ import { FormFieldError } from "@keycloakify/angular/login/services/user-profile
         `
     ],
     imports: [KcClassDirective],
-    selector: "kc-field-errors",
-    templateUrl: "field-errors.component.html",
+    selector: 'kc-field-errors',
+    templateUrl: 'field-errors.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [
         {
@@ -37,5 +32,5 @@ export class FieldErrorsComponent extends ComponentReference {
     displayableErrors = input<FormFieldError[]>();
     fieldIndex = input<number>();
     override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
-    override classes = inject<Partial<Record<ClassKey, string>>>(CLASSES);
+    override classes = inject<Partial<Record<ClassKey, string>>>(LOGIN_CLASSES);
 }

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

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

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

@@ -1,18 +1,13 @@
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    forwardRef,
-    inject,
-    input
-} from "@angular/core";
-import { CLASSES, USE_DEFAULT_CSS } from "@keycloakify/angular/lib/public-api";
-import { Attribute } from "keycloakify/login/KcContext";
-import { ClassKey } from "keycloakify/login/lib/kcClsx";
-import { ComponentReference } from "@keycloakify/angular/login/classes/component-reference.class";
-import { AttributesDirective } from "@keycloakify/angular/login/directives/attributes.directive";
-import { KcClassDirective } from "@keycloakify/angular/login/directives/kc-class.directive";
-import { AdvancedMsgStrPipe } from "@keycloakify/angular/login/pipes/advanced-msg-str.pipe";
+import { ChangeDetectionStrategy, Component, computed, forwardRef, inject, input } from '@angular/core';
+import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css.token';
+import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference.class';
+import { AttributesDirective } from '@keycloakify/angular/lib/directives/attributes.directive';
+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 { type Attribute } from 'keycloakify/login/KcContext';
+import { type ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { type I18n } from '../../i18n';
 
 @Component({
     standalone: true,
@@ -23,9 +18,9 @@ import { AdvancedMsgStrPipe } from "@keycloakify/angular/login/pipes/advanced-ms
             }
         `
     ],
-    imports: [KcClassDirective, AttributesDirective, AdvancedMsgStrPipe],
-    selector: "kc-group-label",
-    templateUrl: "group-label.component.html",
+    imports: [KcClassDirective, AttributesDirective],
+    selector: 'kc-group-label',
+    templateUrl: 'group-label.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [
         {
@@ -35,16 +30,17 @@ import { AdvancedMsgStrPipe } from "@keycloakify/angular/login/pipes/advanced-ms
     ]
 })
 export class GroupLabelComponent extends ComponentReference {
+    i18n = inject<I18n>(LOGIN_I18N);
     attribute = input<Attribute>();
     groupName = input<string>();
     override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
-    override classes = inject<Partial<Record<ClassKey, string>>>(CLASSES);
+    override classes = inject<Partial<Record<ClassKey, string>>>(LOGIN_CLASSES);
     groupNameRef = computed(() => {
         const attribute = this.attribute();
         const groupName = this.groupName();
         if (attribute?.group?.name !== groupName) {
-            return attribute?.group?.name ?? "";
+            return attribute?.group?.name ?? '';
         }
-        return "";
+        return '';
     });
 }