@keycloakify/angular 0.2.17 → 0.2.19

package/fesm2022/keycloakify-angular-login-services-i18n.mjs

@@ -3,10 +3,10 @@ import { Injectable } from '@angular/core';
 
 /** INTERNAL: DO NOT IMPORT THIS */
 class I18nService {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: I18nService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: I18nService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: I18nService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: I18nService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: I18nService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: I18nService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });

package/fesm2022/keycloakify-angular-login-services-login-resource-injector.mjs

@@ -58,10 +58,10 @@ class LoginResourceInjectorService {
         ];
         this.insertAdditionalScripts(scripts);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: LoginResourceInjectorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: LoginResourceInjectorService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: LoginResourceInjectorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: LoginResourceInjectorService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: LoginResourceInjectorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: LoginResourceInjectorService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'

package/fesm2022/keycloakify-angular-login-services-user-profile-form.mjs

@@ -46,7 +46,7 @@ class UserProfileFormService {
             formFieldStates: formState_reactless.formFieldStates.map(formFieldState_reactless => ({
                 attribute: formFieldState_reactless.attribute,
                 valueOrValues: formFieldState_reactless.valueOrValues,
-                displayableErrors: formFieldState_reactless.displayableErrors.map((formFieldError_reactless, i) => ({
+                displayableErrors: formFieldState_reactless.displayableErrors.map(formFieldError_reactless => ({
                     errorMessage: this.#domSanitizer.bypassSecurityTrustHtml(this.#i18n.advancedMsgStr(...formFieldError_reactless.advancedMsgArgs)),
                     errorMessageStr: this.#i18n.advancedMsgStr(...formFieldError_reactless.advancedMsgArgs),
                     source: formFieldError_reactless.source,
@@ -62,10 +62,10 @@ class UserProfileFormService {
         if (this.#unsubscribe)
             this.#unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: UserProfileFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: UserProfileFormService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: UserProfileFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: UserProfileFormService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: UserProfileFormService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: UserProfileFormService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });

package/fesm2022/keycloakify-angular-login-services-user-profile-form.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"keycloakify-angular-login-services-user-profile-form.mjs","sources":["../../src/login/services/user-profile-form/user-profile-form.service.ts","../../src/login/services/user-profile-form/keycloakify-angular-login-services-user-profile-form.ts"],"sourcesContent":["import { inject, Injectable, OnDestroy } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\nimport type { I18n } from '@keycloakify/angular/login/i18n';\nimport { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n';\nimport { KC_LOGIN_CONTEXT } from '@keycloakify/angular/login/tokens/kc-context';\nimport { DO_MAKE_USER_CONFIRM_PASSWORD } from '@keycloakify/angular/login/tokens/make-user-confirm-password';\nimport type {\n    Attribute,\n    PasswordPolicies,\n    Validators\n} from 'keycloakify/login/KcContext';\nimport * as reactlessApi from 'keycloakify/login/lib/getUserProfileApi';\nimport { BehaviorSubject, map, Observable } from 'rxjs';\nimport { assert, type Equals } from 'tsafe/assert';\n\nexport { getButtonToDisplayForMultivaluedAttributeField } from 'keycloakify/login/lib/getUserProfileApi';\n\nexport type FormFieldError = {\n    errorMessage: SafeHtml;\n    errorMessageStr: string;\n    source: FormFieldError.Source;\n    fieldIndex: number | undefined;\n};\n\n{\n    type A = Omit<FormFieldError, 'errorMessage' | 'errorMessageStr'>;\n    type B = Omit<reactlessApi.FormFieldError, 'advancedMsgArgs'>;\n\n    assert<Equals<A, B>>();\n}\n\nexport namespace FormFieldError {\n    export type Source =\n        | Source.Validator\n        | Source.PasswordPolicy\n        | Source.Server\n        | Source.Other;\n\n    export namespace Source {\n        export type Validator = {\n            type: 'validator';\n            name: keyof Validators;\n        };\n        export type PasswordPolicy = {\n            type: 'passwordPolicy';\n            name: keyof PasswordPolicies;\n        };\n        export type Server = {\n            type: 'server';\n        };\n\n        export type Other = {\n            type: 'other';\n            rule: 'passwordConfirmMatchesPassword' | 'requiredField';\n        };\n    }\n}\n\n{\n    type A = FormFieldError.Source;\n    type B = reactlessApi.FormFieldError.Source;\n\n    assert<Equals<A, B>>();\n}\n\nexport type FormFieldState = {\n    attribute: Attribute;\n    displayableErrors: FormFieldError[];\n    valueOrValues: string | string[];\n};\n\n{\n    type A = Omit<FormFieldState, 'displayableErrors'>;\n    type B = Omit<reactlessApi.FormFieldState, 'displayableErrors'>;\n\n    assert<Equals<A, B>>();\n}\n\nexport type FormState = {\n    isFormSubmittable: boolean;\n    formFieldStates: FormFieldState[];\n};\n\n{\n    type A = Omit<FormState, 'formFieldStates'>;\n    type B = Omit<FormState, 'formFieldStates'>;\n\n    assert<Equals<A, B>>();\n}\n\nexport type FormAction =\n    | {\n          action: 'update';\n          name: string;\n          valueOrValues: string | string[];\n          /** Default false */\n          displayErrorsImmediately?: boolean;\n      }\n    | {\n          action: 'focus lost';\n          name: string;\n          fieldIndex: number | undefined;\n      };\n\n{\n    type A = FormAction;\n    type B = reactlessApi.FormAction;\n\n    assert<Equals<A, B>>();\n}\n\nexport type KcContextLike = reactlessApi.KcContextLike;\n\nexport type I18nLike = Pick<I18n, 'advancedMsgStr'>;\n\n@Injectable({ providedIn: 'root' })\nexport class UserProfileFormService implements OnDestroy {\n    #kcContext = inject<KcContextLike>(KC_LOGIN_CONTEXT);\n    #i18n = inject<I18nLike>(LOGIN_I18N);\n    #doMakeUserConfirmPassword = inject(DO_MAKE_USER_CONFIRM_PASSWORD);\n    #domSanitizer = inject(DomSanitizer);\n    #internal_formState$: BehaviorSubject<reactlessApi.FormState>;\n    #unsubscribe: (() => void) | undefined;\n    public formState$: Observable<FormState>;\n    public dispatchFormAction: (action: FormAction) => void;\n    constructor() {\n        const api = reactlessApi.getUserProfileApi({\n            kcContext: this.#kcContext,\n            doMakeUserConfirmPassword: this.#doMakeUserConfirmPassword\n        });\n        this.#internal_formState$ = new BehaviorSubject<reactlessApi.FormState>(\n            api.getFormState()\n        );\n        this.#unsubscribe = api.subscribeToFormState(() => {\n            this.#internal_formState$.next(api.getFormState());\n        }).unsubscribe;\n        this.formState$ = this.#internal_formState$.asObservable().pipe(\n            takeUntilDestroyed(),\n            map(formState_reactless => ({\n                isFormSubmittable: formState_reactless.isFormSubmittable,\n                formFieldStates: formState_reactless.formFieldStates.map(\n                    formFieldState_reactless => ({\n                        attribute: formFieldState_reactless.attribute,\n                        valueOrValues: formFieldState_reactless.valueOrValues,\n                        displayableErrors: formFieldState_reactless.displayableErrors.map(\n                            (formFieldError_reactless, i) => ({\n                                errorMessage: this.#domSanitizer.bypassSecurityTrustHtml(\n                                    this.#i18n.advancedMsgStr(\n                                        ...formFieldError_reactless.advancedMsgArgs\n                                    )\n                                ),\n                                errorMessageStr: this.#i18n.advancedMsgStr(\n                                    ...formFieldError_reactless.advancedMsgArgs\n                                ),\n                                source: formFieldError_reactless.source,\n                                fieldIndex: formFieldError_reactless.fieldIndex\n                            })\n                        )\n                    })\n                )\n            }))\n        );\n        this.dispatchFormAction = api.dispatchFormAction;\n    }\n\n    ngOnDestroy(): void {\n        this.#internal_formState$.complete();\n        this.#internal_formState$.unsubscribe();\n        if (this.#unsubscribe) this.#unsubscribe();\n    }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;AAyBA;AAII,IAAA,MAAM,EAAgB;AAC1B;AA6BA;AAII,IAAA,MAAM,EAAgB;AAC1B;AAQA;AAII,IAAA,MAAM,EAAgB;AAC1B;AAOA;AAII,IAAA,MAAM,EAAgB;AAC1B;AAgBA;AAII,IAAA,MAAM,EAAgB;AAC1B;MAOa,sBAAsB,CAAA;AAC/B,IAAA,UAAU,GAAG,MAAM,CAAgB,gBAAgB,CAAC;AACpD,IAAA,KAAK,GAAG,MAAM,CAAW,UAAU,CAAC;AACpC,IAAA,0BAA0B,GAAG,MAAM,CAAC,6BAA6B,CAAC;AAClE,IAAA,aAAa,GAAG,MAAM,CAAC,YAAY,CAAC;AACpC,IAAA,oBAAoB;AACpB,IAAA,YAAY;AAGZ,IAAA,WAAA,GAAA;AACI,QAAA,MAAM,GAAG,GAAG,YAAY,CAAC,iBAAiB,CAAC;YACvC,SAAS,EAAE,IAAI,CAAC,UAAU;YAC1B,yBAAyB,EAAE,IAAI,CAAC;AACnC,SAAA,CAAC;QACF,IAAI,CAAC,oBAAoB,GAAG,IAAI,eAAe,CAC3C,GAAG,CAAC,YAAY,EAAE,CACrB;QACD,IAAI,CAAC,YAAY,GAAG,GAAG,CAAC,oBAAoB,CAAC,MAAK;YAC9C,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE,CAAC;SACrD,CAAC,CAAC,WAAW;QACd,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,oBAAoB,CAAC,YAAY,EAAE,CAAC,IAAI,CAC3D,kBAAkB,EAAE,EACpB,GAAG,CAAC,mBAAmB,KAAK;YACxB,iBAAiB,EAAE,mBAAmB,CAAC,iBAAiB;YACxD,eAAe,EAAE,mBAAmB,CAAC,eAAe,CAAC,GAAG,CACpD,wBAAwB,KAAK;gBACzB,SAAS,EAAE,wBAAwB,CAAC,SAAS;gBAC7C,aAAa,EAAE,wBAAwB,CAAC,aAAa;AACrD,gBAAA,iBAAiB,EAAE,wBAAwB,CAAC,iBAAiB,CAAC,GAAG,CAC7D,CAAC,wBAAwB,EAAE,CAAC,MAAM;AAC9B,oBAAA,YAAY,EAAE,IAAI,CAAC,aAAa,CAAC,uBAAuB,CACpD,IAAI,CAAC,KAAK,CAAC,cAAc,CACrB,GAAG,wBAAwB,CAAC,eAAe,CAC9C,CACJ;oBACD,eAAe,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CACtC,GAAG,wBAAwB,CAAC,eAAe,CAC9C;oBACD,MAAM,EAAE,wBAAwB,CAAC,MAAM;oBACvC,UAAU,EAAE,wBAAwB,CAAC;AACxC,iBAAA,CAAC;AAET,aAAA,CAAC;SAET,CAAC,CAAC,CACN;AACD,QAAA,IAAI,CAAC,kBAAkB,GAAG,GAAG,CAAC,kBAAkB;;IAGpD,WAAW,GAAA;AACP,QAAA,IAAI,CAAC,oBAAoB,CAAC,QAAQ,EAAE;AACpC,QAAA,IAAI,CAAC,oBAAoB,CAAC,WAAW,EAAE;QACvC,IAAI,IAAI,CAAC,YAAY;YAAE,IAAI,CAAC,YAAY,EAAE;;8GApDrC,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA,CAAA;AAAtB,IAAA,SAAA,IAAA,CAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,sBAAsB,cADT,MAAM,EAAA,CAAA,CAAA;;2FACnB,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBADlC,UAAU;mBAAC,EAAE,UAAU,EAAE,MAAM,EAAE;;;ACpHlC;;AAEG;;;;"}
+{"version":3,"file":"keycloakify-angular-login-services-user-profile-form.mjs","sources":["../../src/login/services/user-profile-form/user-profile-form.service.ts","../../src/login/services/user-profile-form/keycloakify-angular-login-services-user-profile-form.ts"],"sourcesContent":["import { inject, Injectable, OnDestroy } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\nimport type { I18n } from '@keycloakify/angular/login/i18n';\nimport { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n';\nimport { KC_LOGIN_CONTEXT } from '@keycloakify/angular/login/tokens/kc-context';\nimport { DO_MAKE_USER_CONFIRM_PASSWORD } from '@keycloakify/angular/login/tokens/make-user-confirm-password';\nimport type {\n    Attribute,\n    PasswordPolicies,\n    Validators\n} from 'keycloakify/login/KcContext';\nimport * as reactlessApi from 'keycloakify/login/lib/getUserProfileApi';\nimport { BehaviorSubject, map, Observable } from 'rxjs';\nimport { assert, type Equals } from 'tsafe/assert';\n\nexport { getButtonToDisplayForMultivaluedAttributeField } from 'keycloakify/login/lib/getUserProfileApi';\n\nexport type FormFieldError = {\n    errorMessage: SafeHtml;\n    errorMessageStr: string;\n    source: FormFieldError.Source;\n    fieldIndex: number | undefined;\n};\n\n{\n    type A = Omit<FormFieldError, 'errorMessage' | 'errorMessageStr'>;\n    type B = Omit<reactlessApi.FormFieldError, 'advancedMsgArgs'>;\n\n    assert<Equals<A, B>>();\n}\n\nexport namespace FormFieldError {\n    export type Source =\n        | Source.Validator\n        | Source.PasswordPolicy\n        | Source.Server\n        | Source.Other;\n\n    export namespace Source {\n        export type Validator = {\n            type: 'validator';\n            name: keyof Validators;\n        };\n        export type PasswordPolicy = {\n            type: 'passwordPolicy';\n            name: keyof PasswordPolicies;\n        };\n        export type Server = {\n            type: 'server';\n        };\n\n        export type Other = {\n            type: 'other';\n            rule: 'passwordConfirmMatchesPassword' | 'requiredField';\n        };\n    }\n}\n\n{\n    type A = FormFieldError.Source;\n    type B = reactlessApi.FormFieldError.Source;\n\n    assert<Equals<A, B>>();\n}\n\nexport type FormFieldState = {\n    attribute: Attribute;\n    displayableErrors: FormFieldError[];\n    valueOrValues: string | string[];\n};\n\n{\n    type A = Omit<FormFieldState, 'displayableErrors'>;\n    type B = Omit<reactlessApi.FormFieldState, 'displayableErrors'>;\n\n    assert<Equals<A, B>>();\n}\n\nexport type FormState = {\n    isFormSubmittable: boolean;\n    formFieldStates: FormFieldState[];\n};\n\n{\n    type A = Omit<FormState, 'formFieldStates'>;\n    type B = Omit<FormState, 'formFieldStates'>;\n\n    assert<Equals<A, B>>();\n}\n\nexport type FormAction =\n    | {\n          action: 'update';\n          name: string;\n          valueOrValues: string | string[];\n          /** Default false */\n          displayErrorsImmediately?: boolean;\n      }\n    | {\n          action: 'focus lost';\n          name: string;\n          fieldIndex: number | undefined;\n      };\n\n{\n    type A = FormAction;\n    type B = reactlessApi.FormAction;\n\n    assert<Equals<A, B>>();\n}\n\nexport type KcContextLike = reactlessApi.KcContextLike;\n\nexport type I18nLike = Pick<I18n, 'advancedMsgStr'>;\n\n@Injectable({ providedIn: 'root' })\nexport class UserProfileFormService implements OnDestroy {\n    #kcContext = inject<KcContextLike>(KC_LOGIN_CONTEXT);\n    #i18n = inject<I18nLike>(LOGIN_I18N);\n    #doMakeUserConfirmPassword = inject(DO_MAKE_USER_CONFIRM_PASSWORD);\n    #domSanitizer = inject(DomSanitizer);\n    #internal_formState$: BehaviorSubject<reactlessApi.FormState>;\n    #unsubscribe: (() => void) | undefined;\n    public formState$: Observable<FormState>;\n    public dispatchFormAction: (action: FormAction) => void;\n    constructor() {\n        const api = reactlessApi.getUserProfileApi({\n            kcContext: this.#kcContext,\n            doMakeUserConfirmPassword: this.#doMakeUserConfirmPassword\n        });\n        this.#internal_formState$ = new BehaviorSubject<reactlessApi.FormState>(\n            api.getFormState()\n        );\n        this.#unsubscribe = api.subscribeToFormState(() => {\n            this.#internal_formState$.next(api.getFormState());\n        }).unsubscribe;\n        this.formState$ = this.#internal_formState$.asObservable().pipe(\n            takeUntilDestroyed(),\n            map(formState_reactless => ({\n                isFormSubmittable: formState_reactless.isFormSubmittable,\n                formFieldStates: formState_reactless.formFieldStates.map(\n                    formFieldState_reactless => ({\n                        attribute: formFieldState_reactless.attribute,\n                        valueOrValues: formFieldState_reactless.valueOrValues,\n                        displayableErrors: formFieldState_reactless.displayableErrors.map(\n                            formFieldError_reactless => ({\n                                errorMessage: this.#domSanitizer.bypassSecurityTrustHtml(\n                                    this.#i18n.advancedMsgStr(\n                                        ...formFieldError_reactless.advancedMsgArgs\n                                    )\n                                ),\n                                errorMessageStr: this.#i18n.advancedMsgStr(\n                                    ...formFieldError_reactless.advancedMsgArgs\n                                ),\n                                source: formFieldError_reactless.source,\n                                fieldIndex: formFieldError_reactless.fieldIndex\n                            })\n                        )\n                    })\n                )\n            }))\n        );\n        this.dispatchFormAction = api.dispatchFormAction;\n    }\n\n    ngOnDestroy(): void {\n        this.#internal_formState$.complete();\n        this.#internal_formState$.unsubscribe();\n        if (this.#unsubscribe) this.#unsubscribe();\n    }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;AAyBA;AAII,IAAA,MAAM,EAAgB;AAC1B;AA6BA;AAII,IAAA,MAAM,EAAgB;AAC1B;AAQA;AAII,IAAA,MAAM,EAAgB;AAC1B;AAOA;AAII,IAAA,MAAM,EAAgB;AAC1B;AAgBA;AAII,IAAA,MAAM,EAAgB;AAC1B;MAOa,sBAAsB,CAAA;AAC/B,IAAA,UAAU,GAAG,MAAM,CAAgB,gBAAgB,CAAC;AACpD,IAAA,KAAK,GAAG,MAAM,CAAW,UAAU,CAAC;AACpC,IAAA,0BAA0B,GAAG,MAAM,CAAC,6BAA6B,CAAC;AAClE,IAAA,aAAa,GAAG,MAAM,CAAC,YAAY,CAAC;AACpC,IAAA,oBAAoB;AACpB,IAAA,YAAY;AAGZ,IAAA,WAAA,GAAA;AACI,QAAA,MAAM,GAAG,GAAG,YAAY,CAAC,iBAAiB,CAAC;YACvC,SAAS,EAAE,IAAI,CAAC,UAAU;YAC1B,yBAAyB,EAAE,IAAI,CAAC;AACnC,SAAA,CAAC;QACF,IAAI,CAAC,oBAAoB,GAAG,IAAI,eAAe,CAC3C,GAAG,CAAC,YAAY,EAAE,CACrB;QACD,IAAI,CAAC,YAAY,GAAG,GAAG,CAAC,oBAAoB,CAAC,MAAK;YAC9C,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE,CAAC;SACrD,CAAC,CAAC,WAAW;QACd,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,oBAAoB,CAAC,YAAY,EAAE,CAAC,IAAI,CAC3D,kBAAkB,EAAE,EACpB,GAAG,CAAC,mBAAmB,KAAK;YACxB,iBAAiB,EAAE,mBAAmB,CAAC,iBAAiB;YACxD,eAAe,EAAE,mBAAmB,CAAC,eAAe,CAAC,GAAG,CACpD,wBAAwB,KAAK;gBACzB,SAAS,EAAE,wBAAwB,CAAC,SAAS;gBAC7C,aAAa,EAAE,wBAAwB,CAAC,aAAa;gBACrD,iBAAiB,EAAE,wBAAwB,CAAC,iBAAiB,CAAC,GAAG,CAC7D,wBAAwB,KAAK;AACzB,oBAAA,YAAY,EAAE,IAAI,CAAC,aAAa,CAAC,uBAAuB,CACpD,IAAI,CAAC,KAAK,CAAC,cAAc,CACrB,GAAG,wBAAwB,CAAC,eAAe,CAC9C,CACJ;oBACD,eAAe,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CACtC,GAAG,wBAAwB,CAAC,eAAe,CAC9C;oBACD,MAAM,EAAE,wBAAwB,CAAC,MAAM;oBACvC,UAAU,EAAE,wBAAwB,CAAC;AACxC,iBAAA,CAAC;AAET,aAAA,CAAC;SAET,CAAC,CAAC,CACN;AACD,QAAA,IAAI,CAAC,kBAAkB,GAAG,GAAG,CAAC,kBAAkB;;IAGpD,WAAW,GAAA;AACP,QAAA,IAAI,CAAC,oBAAoB,CAAC,QAAQ,EAAE;AACpC,QAAA,IAAI,CAAC,oBAAoB,CAAC,WAAW,EAAE;QACvC,IAAI,IAAI,CAAC,YAAY;YAAE,IAAI,CAAC,YAAY,EAAE;;8GApDrC,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA,CAAA;AAAtB,IAAA,SAAA,IAAA,CAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,sBAAsB,cADT,MAAM,EAAA,CAAA,CAAA;;2FACnB,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBADlC,UAAU;mBAAC,EAAE,UAAU,EAAE,MAAM,EAAE;;;ACpHlC;;AAEG;;;;"}

package/fesm2022/keycloakify-angular-login-template.mjs

@@ -104,15 +104,15 @@ class TemplateComponent extends ComponentReference {
         this.#cdr.markForCheck();
         this.#effectRef.destroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: TemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.2", type: TemplateComponent, isStandalone: true, selector: "kc-root", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, userProfileFormFields: { classPropertyName: "userProfileFormFields", publicName: "userProfileFormFields", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: TemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: TemplateComponent, isStandalone: true, selector: "kc-root", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, userProfileFormFields: { classPropertyName: "userProfileFormFields", publicName: "userProfileFormFields", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: ComponentReference,
                 useExisting: forwardRef(() => TemplateComponent)
             }
         ], viewQueries: [{ propertyName: "pageRef", first: true, predicate: ["pageRef"], descendants: true, read: ViewContainerRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@let realm = kcContext.realm;\n@let message = kcContext.message;\n@let auth = kcContext.auth;\n@let isAppInitiatedAction = kcContext.isAppInitiatedAction;\n@let url = kcContext.url;\n@let isReadyToRender = isReadyToRender$ | async;\n\n@if (isReadyToRender) {\n    <div [kcClass]=\"'kcLoginClass'\">\n        <div\n            id=\"kc-header\"\n            [kcClass]=\"'kcHeaderClass'\"\n        >\n            <div\n                id=\"kc-header-wrapper\"\n                [kcClass]=\"'kcHeaderWrapperClass'\"\n            >\n                <div [innerHTML]=\"realm?.displayNameHtml ?? '' | kcSanitize: 'html'\"></div>\n            </div>\n        </div>\n\n        <div [kcClass]=\"'kcFormCardClass'\">\n            <header [kcClass]=\"'kcFormHeaderClass'\">\n                <!-- Locale switcher -->\n                @if (i18n.enabledLanguages.length > 1) {\n                    <div\n                        id=\"kc-locale\"\n                        [kcClass]=\"'kcLocaleMainClass'\"\n                    >\n                        <div\n                            id=\"kc-locale-wrapper\"\n                            [kcClass]=\"'kcLocaleWrapperClass'\"\n                        >\n                            <div\n                                id=\"kc-locale-dropdown\"\n                                class=\"menu-button-links\"\n                                [kcClass]=\"'kcLocaleDropDownClass'\"\n                            >\n                                <button\n                                    tabindex=\"1\"\n                                    id=\"kc-current-locale-link\"\n                                    aria-haspopup=\"true\"\n                                    aria-expanded=\"false\"\n                                    aria-controls=\"language-switch1\"\n                                    [attr.aria-label]=\"i18n.msgStr('languages')\"\n                                >\n                                    {{ i18n.currentLanguage.label }}\n                                </button>\n                                <ul\n                                    role=\"menu\"\n                                    tabindex=\"-1\"\n                                    aria-labelledby=\"kc-current-locale-link\"\n                                    aria-activedescendant=\"\"\n                                    id=\"language-switch1\"\n                                    [kcClass]=\"'kcLocaleListClass'\"\n                                >\n                                    @for (entry of i18n.enabledLanguages; track entry; let idx = $index) {\n                                        <li\n                                            role=\"none\"\n                                            [kcClass]=\"'kcLocaleListItemClass'\"\n                                        >\n                                            <a\n                                                role=\"menuitem\"\n                                                tabindex=\"-1\"\n                                                [href]=\"entry.href\"\n                                                [kcClass]=\"'kcLocaleItemClass'\"\n                                                [id]=\"'language-' + idx\"\n                                            >\n                                                {{ entry.label }}\n                                            </a>\n                                        </li>\n                                    }\n                                </ul>\n                            </div>\n                        </div>\n                    </div>\n                }\n\n                <!-- Header content -->\n                <ng-template #node>\n                    @if (auth && !auth.showUsername && !auth.showResetCredentials) {\n                        <h1 id=\"kc-page-title\">\n                            @let header = headerNode && headerNode();\n                            @if (header) {\n                                <ng-container [ngTemplateOutlet]=\"header\" />\n                            }\n                        </h1>\n                    } @else {\n                        <div\n                            id=\"kc-username\"\n                            [kcClass]=\"'kcFormGroupClass'\"\n                        >\n                            <label id=\"kc-attempted-username\">{{ auth?.attemptedUsername }}</label>\n                            <a\n                                id=\"reset-login\"\n                                [href]=\"url?.loginRestartFlowUrl\"\n                                [attr.aria-label]=\"i18n.msgStr('restartLoginTooltip')\"\n                            >\n                                <div class=\"kc-login-tooltip\">\n                                    <i [kcClass]=\"'kcResetFlowIcon'\"></i>\n                                    <span class=\"kc-tooltip-text\">\n                                        {{ i18n.msgStr('restartLoginTooltip') }}\n                                    </span>\n                                </div>\n                            </a>\n                        </div>\n                    }\n                </ng-template>\n\n                @if (displayRequiredFields) {\n                    <div [kcClass]=\"'kcContentWrapperClass'\">\n                        <div\n                            class=\"subtitle\"\n                            [kcClass]=\"'kcLabelWrapperClass'\"\n                        >\n                            <span class=\"subtitle\">\n                                <span class=\"required\">*</span>\n                                {{ i18n.msgStr('requiredFields') }}\n                            </span>\n                        </div>\n                        <div class=\"col-md-10\">\n                            <ng-container [ngTemplateOutlet]=\"node\" />\n                        </div>\n                    </div>\n                } @else {\n                    <ng-container [ngTemplateOutlet]=\"node\" />\n                }\n            </header>\n\n            <div id=\"kc-content\">\n                <div id=\"kc-content-wrapper\">\n                    <!-- Message display -->\n                    @if (displayMessage && message && (message.type !== 'warning' || !isAppInitiatedAction)) {\n                        <div\n                            [kcClass]=\"'kcAlertClass'\"\n                            [ngClass]=\"message.type === 'error' ? 'pf-m-danger' : 'pf-m-' + message.type\"\n                            [class]=\"'alert-' + message.type\"\n                        >\n                            <div class=\"pf-c-alert__icon\">\n                                @switch (message.type) {\n                                    @case ('success') {\n                                        <span [kcClass]=\"'kcFeedbackSuccessIcon'\"></span>\n                                    }\n                                    @case ('warning') {\n                                        <span [kcClass]=\"'kcFeedbackWarningIcon'\"></span>\n                                    }\n                                    @case ('info') {\n                                        <span [kcClass]=\"'kcFeedbackInfoIcon'\"></span>\n                                    }\n                                    @case ('error') {\n                                        <span [kcClass]=\"'kcFeedbackErrorIcon'\"></span>\n                                    }\n                                }\n                            </div>\n                            <span\n                                [kcClass]=\"'kcAlertTitleClass'\"\n                                [innerHTML]=\"message.summary | kcSanitize: 'html'\"\n                            ></span>\n                        </div>\n                    }\n                    <!-- Content -->\n                    <ng-template #pageRef></ng-template>\n\n                    @if (!!auth && auth?.showTryAnotherWayLink) {\n                        <form\n                            id=\"kc-select-try-another-way-form\"\n                            method=\"post\"\n                            [action]=\"url?.loginAction\"\n                        >\n                            <div [kcClass]=\"'kcFormGroupClass'\">\n                                <div [kcClass]=\"'kcFormGroupClass'\">\n                                    <input\n                                        type=\"hidden\"\n                                        name=\"tryAnotherWay\"\n                                        value=\"on\"\n                                    />\n                                    <a\n                                        id=\"try-another-way\"\n                                        (click)=\"tryAnotherWay()\"\n                                    >\n                                        {{ i18n.msgStr('doTryAnotherWay') }}\n                                    </a>\n                                </div>\n                            </div>\n                        </form>\n                    }\n                    @let socialProviders = socialProvidersNode && socialProvidersNode();\n                    @if (socialProviders) {\n                        <ng-container [ngTemplateOutlet]=\"socialProviders\" />\n                    }\n                    <!-- Info display -->\n                    @if (displayInfo) {\n                        <div\n                            id=\"kc-info\"\n                            [kcClass]=\"'kcSignUpClass'\"\n                        >\n                            <div\n                                id=\"kc-info-wrapper\"\n                                [kcClass]=\"'kcInfoAreaWrapperClass'\"\n                            >\n                                @let info = infoNode && infoNode();\n                                @if (info) {\n                                    <ng-container [ngTemplateOutlet]=\"info\" />\n                                }\n                            </div>\n                        </div>\n                    }\n                </div>\n            </div>\n        </div>\n    </div>\n}\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: KcSanitizePipe, name: "kcSanitize" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: KcClassDirective, selector: "[kcClass]", inputs: ["class", "ngClass", "kcClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: TemplateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: TemplateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kc-root', imports: [AsyncPipe, KcSanitizePipe, NgTemplateOutlet, KcClassDirective], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {

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

@@ -13,6 +13,7 @@ export declare class UserProfileFormFieldsComponent extends ComponentReference {
     doUseDefaultCss: boolean;
     classes: Partial<Record<ClassKey, string>>;
     formState$: import("rxjs").Observable<import("@keycloakify/angular/login/services/user-profile-form").FormState>;
+    xAttributeLocale$: import("rxjs").Observable<import("@keycloakify/angular/login/services/user-profile-form").FormFieldState | undefined>;
     beforeField: TemplateRef<unknown> | undefined;
     afterField: TemplateRef<unknown> | undefined;
     onDispatch(formAction: FormAction): void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@keycloakify/angular",
   "type": "module",
-  "version": "0.2.17",
+  "version": "0.2.19",
   "peerDependencies": {
     "keycloakify": "^11.8.0",
     "@angular/core": "^19.0.0",

package/src/account/directives/kc-class/kc-class.directive.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/consistent-indexed-object-style */
+
 import {
     Directive,
     DoCheck,
@@ -45,19 +45,17 @@ export class KcClassDirective implements DoCheck {
     readonly #renderer = inject(Renderer2);
     readonly #el = inject(ElementRef);
     readonly #host = inject(ComponentReference);
-    // eslint-disable-next-line @angular-eslint/no-input-rename
+
     @Input('class')
     set klass(value: string) {
         this.initialClasses = value != null ? value.trim().split(/\s+/) : [];
     }
 
-    // eslint-disable-next-line @angular-eslint/no-input-rename
     @Input('ngClass')
     set ngClass(value: string | NgClassSupportedTypes) {
         this.rawClass = typeof value === 'string' ? value.trim().split(/\s+/) : value;
     }
 
-    // eslint-disable-next-line @angular-eslint/no-input-rename
     @Input('kcClass')
     set kcClass(value: ClassKey | KcClassSupportedTypes) {
         this.rawKcClass =

package/src/account/pages/federatedIdentity/federatedIdentity.component.ts

@@ -12,7 +12,7 @@ import type { ClassKey } from 'keycloakify/account';
 
 @Component({
     imports: [KcClassDirective, NgClass],
-    selector: 'kc-federatedIdentity',
+    selector: 'kc-federated-identity',
     templateUrl: 'federatedIdentity.component.html',
     providers: [
         {

package/src/account/template/template.component.ts

@@ -1,4 +1,4 @@
-import { AsyncPipe, NgClass, NgTemplateOutlet } from '@angular/common';
+import { AsyncPipe, NgClass } from '@angular/common';
 import {
     ChangeDetectionStrategy,
     ChangeDetectorRef,
@@ -8,8 +8,6 @@ import {
     forwardRef,
     inject,
     input,
-    OnInit,
-    output,
     Renderer2,
     Type,
     viewChild,

package/src/eslint.config.js

@@ -0,0 +1,5 @@
+// @ts-check
+import tseslint from 'typescript-eslint';
+import rootConfig from '../eslint.config.js';
+
+export default tseslint.config(...rootConfig);

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

@@ -1,4 +1,5 @@
 @let formState = formState$ | async;
+@let xAttributeLocale = xAttributeLocale$ | async;
 @if (formState) {
     @let formFieldStates = formState.formFieldStates;
 
@@ -78,4 +79,12 @@
             </div>
         </div>
     }
+    <!-- See: https://github.com/keycloak/keycloak/issues/38029 -->
+    @if (kcContext.locale !== undefined && xAttributeLocale === undefined) {
+        <input
+            type="hidden"
+            name="locale"
+            [value]="i18n.currentLanguage.languageTag"
+        />
+    }
 }

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

@@ -14,6 +14,7 @@ import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n';
 import { KC_LOGIN_CONTEXT } from '@keycloakify/angular/login/tokens/kc-context';
 import { DO_MAKE_USER_CONFIRM_PASSWORD } from '@keycloakify/angular/login/tokens/make-user-confirm-password';
 import type { ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { map } from 'rxjs';
 
 @Component({
     styles: [
@@ -44,6 +45,7 @@ export class UserProfileFormFieldsComponent extends ComponentReference {
     override classes = inject<Partial<Record<ClassKey, string>>>(LOGIN_CLASSES);
 
     formState$ = this.#userProfileFormService.formState$;
+    xAttributeLocale$ = this.formState$.pipe(map(s => s.formFieldStates.find(x => x.attribute.name === 'locale')));
 
     @ContentChild('beforeField') beforeField: TemplateRef<unknown> | undefined;
     @ContentChild('afterField') afterField: TemplateRef<unknown> | undefined;

package/src/login/directives/kc-class/kc-class.directive.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/consistent-indexed-object-style */
+
 import {
     Directive,
     DoCheck,
@@ -44,19 +44,17 @@ export class KcClassDirective implements DoCheck {
     readonly #renderer = inject(Renderer2);
     readonly #el = inject(ElementRef);
     readonly #host = inject(ComponentReference);
-    // eslint-disable-next-line @angular-eslint/no-input-rename
+
     @Input('class')
     set klass(value: string) {
         this.initialClasses = value != null ? value.trim().split(/\s+/) : [];
     }
 
-    // eslint-disable-next-line @angular-eslint/no-input-rename
     @Input('ngClass')
     set ngClass(value: string | NgClassSupportedTypes) {
         this.rawClass = typeof value === 'string' ? value.trim().split(/\s+/) : value;
     }
 
-    // eslint-disable-next-line @angular-eslint/no-input-rename
     @Input('kcClass')
     set kcClass(value: ClassKey | KcClassSupportedTypes) {
         this.rawKcClass =

package/src/login/pages/idp-review-user-profile/idp-review-user-profile.component.ts

@@ -38,7 +38,7 @@ export class IdpReviewUserProfileComponent extends ComponentReference {
 
     displayRequiredFields = true;
     displayInfo = false;
-    displayMessage = !this.kcContext?.messagesPerField?.existsError('global');
+    displayMessage = this.kcContext?.messagesPerField?.existsError('global');
 
     headerNode = viewChild<TemplateRef<HTMLElement>>('headerNode');
     infoNode = viewChild<TemplateRef<HTMLElement>>('infoNode');

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

@@ -36,7 +36,7 @@ export class LoginComponent extends ComponentReference {
 
     displayRequiredFields = false;
     displayInfo = !!this.kcContext?.realm?.password && !!this.kcContext?.realm?.registrationAllowed && !this.kcContext?.registrationDisabled;
-    displayMessage = !this.kcContext?.messagesPerField?.existsError('username', 'password');
+    displayMessage = this.kcContext?.messagesPerField?.existsError('username', 'password');
 
     headerNode = viewChild<TemplateRef<HTMLElement>>('headerNode');
     infoNode = viewChild<TemplateRef<HTMLElement>>('infoNode');

package/src/login/pages/login-config-totp/login-config-totp.component.ts

@@ -34,7 +34,7 @@ export class LoginConfigTotpComponent extends ComponentReference {
 
     displayRequiredFields = false;
     displayInfo = false;
-    displayMessage = !this.kcContext.messagesPerField.existsError('totp', 'userLabel');
+    displayMessage = this.kcContext.messagesPerField.existsError('totp', 'userLabel');
 
     headerNode = viewChild<TemplateRef<HTMLElement>>('headerNode');
     infoNode = viewChild<TemplateRef<HTMLElement>>('infoNode');

package/src/login/pages/login-idp-link-confirm/login-idp-link-confirm.component.ts

@@ -27,7 +27,7 @@ export class LoginIdpLinkConfirmComponent extends ComponentReference {
 
     displayRequiredFields = false;
     displayInfo = false;
-    displayMessage = !this.kcContext.messagesPerField.existsError('totp', 'userLabel');
+    displayMessage = this.kcContext.messagesPerField.existsError('totp', 'userLabel');
 
     headerNode = viewChild<TemplateRef<HTMLElement>>('headerNode');
     infoNode = viewChild<TemplateRef<HTMLElement>>('infoNode');

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

@@ -27,7 +27,7 @@ export class LoginIdpLinkConfirmOverrideComponent extends ComponentReference {
 
     displayRequiredFields = false;
     displayInfo = false;
-    displayMessage = !this.kcContext.messagesPerField.existsError('totp', 'userLabel');
+    displayMessage = this.kcContext.messagesPerField.existsError('totp', 'userLabel');
 
     headerNode = viewChild<TemplateRef<HTMLElement>>('headerNode');
     infoNode = viewChild<TemplateRef<HTMLElement>>('infoNode');

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

@@ -36,7 +36,7 @@ export class LoginUpdatePasswordComponent extends ComponentReference {
 
     displayRequiredFields = false;
     displayInfo = false;
-    displayMessage = !this.kcContext.messagesPerField.existsError('password', 'password-confirm');
+    displayMessage = this.kcContext.messagesPerField.existsError('password', 'password-confirm');
 
     headerNode = viewChild<TemplateRef<HTMLElement>>('headerNode');
     infoNode = viewChild<TemplateRef<HTMLElement>>('infoNode');

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

@@ -34,7 +34,7 @@ export class LoginUsernameComponent extends ComponentReference {
 
     displayRequiredFields = false;
     displayInfo: boolean = !!this.kcContext?.realm?.password && !!this.kcContext?.realm?.registrationAllowed && !this.kcContext?.registrationDisabled;
-    displayMessage: boolean = !this.kcContext?.messagesPerField?.existsError('username');
+    displayMessage: boolean = this.kcContext?.messagesPerField?.existsError('username');
 
     headerNode = viewChild<TemplateRef<HTMLElement>>('headerNode');
     infoNode = viewChild<TemplateRef<HTMLElement>>('infoNode');

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

@@ -40,7 +40,7 @@ export class RegisterComponent extends ComponentReference {
 
     displayRequiredFields = false;
     displayInfo = false;
-    displayMessage: boolean = !this.kcContext?.messagesPerField?.existsError('global');
+    displayMessage: boolean = this.kcContext?.messagesPerField?.existsError('global');
 
     headerNode = viewChild<TemplateRef<HTMLElement>>('headerNode');
     infoNode = viewChild<TemplateRef<HTMLElement>>('infoNode');

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

@@ -144,7 +144,7 @@ export class UserProfileFormService implements OnDestroy {
                         attribute: formFieldState_reactless.attribute,
                         valueOrValues: formFieldState_reactless.valueOrValues,
                         displayableErrors: formFieldState_reactless.displayableErrors.map(
-                            (formFieldError_reactless, i) => ({
+                            formFieldError_reactless => ({
                                 errorMessage: this.#domSanitizer.bypassSecurityTrustHtml(
                                     this.#i18n.advancedMsgStr(
                                         ...formFieldError_reactless.advancedMsgArgs