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

package/src/login/components/input-field-by-type/input-field-by-type.component.html

@@ -1,63 +1,63 @@
 @let attr = attribute();
 @if (attr) {
-  @let type = attr.annotations.inputType;
-  @switch (type) {
-    @case ('textarea') {
-      <kc-textarea-tag
-        [attribute]="attribute()"
-        [value]="$any(valueOrValues())"
-        [displayableErrors]="displayableErrors()"
-        (dispatchFormAction)="dispatchFormAction.emit($event)"
-      ></kc-textarea-tag>
-    }
-    @case (type === 'select' || type === 'multiselect' ? type : '') {
-      <kc-select-tag
-        [attribute]="attribute()"
-        [valueOrValues]="valueOrValues()"
-        [displayableErrors]="displayableErrors()"
-        (dispatchFormAction)="dispatchFormAction.emit($event)"
-      ></kc-select-tag>
-    }
-    @case (type === 'select-radiobuttons' || type === 'multiselect-checkboxes' ? type : '') {
-      <kc-input-tag-selects
-        [attribute]="attribute()"
-        [valueOrValues]="valueOrValues()"
-        [displayableErrors]="displayableErrors()"
-        (dispatchFormAction)="dispatchFormAction.emit($event)"
-      ></kc-input-tag-selects>
-    }
-    @default {
-      @let values = valueOrValues();
-      <!-- if valueOrValues is string skip -->
-      @if (values && (values | toArray: true).length) {
-        @for (value of values; track value; let i = $index) {
-          <kc-input-tag
-            [attribute]="attribute()"
-            [valueOrValues]="valueOrValues()"
-            [fieldIndex]="i"
-            [displayableErrors]="displayableErrors()"
-            (dispatchFormAction)="dispatchFormAction.emit($event)"
-          ></kc-input-tag>
+    @let type = attr.annotations.inputType;
+    @switch (type) {
+        @case ('textarea') {
+            <kc-textarea-tag
+                [attribute]="attribute()"
+                [value]="$any(valueOrValues())"
+                [displayableErrors]="displayableErrors()"
+                (dispatchFormAction)="dispatchFormAction.emit($event)"
+            ></kc-textarea-tag>
+        }
+        @case (type === 'select' || type === 'multiselect' ? type : '') {
+            <kc-select-tag
+                [attribute]="attribute()"
+                [valueOrValues]="valueOrValues()"
+                [displayableErrors]="displayableErrors()"
+                (dispatchFormAction)="dispatchFormAction.emit($event)"
+            ></kc-select-tag>
+        }
+        @case (type === 'select-radiobuttons' || type === 'multiselect-checkboxes' ? type : '') {
+            <kc-input-tag-selects
+                [attribute]="attribute()"
+                [valueOrValues]="valueOrValues()"
+                [displayableErrors]="displayableErrors()"
+                (dispatchFormAction)="dispatchFormAction.emit($event)"
+            ></kc-input-tag-selects>
         }
-      } @else {
-        @if (attr.name === 'password' || attr.name === 'password-confirm') {
-          <kc-password-wrapper [passwordInputId]="attr.name">
-            <kc-input-tag
-              [attribute]="attributePassword()"
-              [valueOrValues]="valueOrValues()"
-              [displayableErrors]="displayableErrors()"
-              (dispatchFormAction)="dispatchFormAction.emit($event)"
-            ></kc-input-tag>
-          </kc-password-wrapper>
-        } @else {
-          <kc-input-tag
-            [attribute]="attribute()"
-            [valueOrValues]="valueOrValues()"
-            [displayableErrors]="displayableErrors()"
-            (dispatchFormAction)="dispatchFormAction.emit($event)"
-          ></kc-input-tag>
+        @default {
+            @let values = valueOrValues();
+            <!-- if valueOrValues is string skip -->
+            @if (values && (values | toArray: true).length) {
+                @for (value of values; track value; let i = $index) {
+                    <kc-input-tag
+                        [attribute]="attribute()"
+                        [valueOrValues]="valueOrValues()"
+                        [fieldIndex]="i"
+                        [displayableErrors]="displayableErrors()"
+                        (dispatchFormAction)="dispatchFormAction.emit($event)"
+                    ></kc-input-tag>
+                }
+            } @else {
+                @if (attr.name === 'password' || attr.name === 'password-confirm') {
+                    <kc-password-wrapper [passwordInputId]="attr.name">
+                        <kc-input-tag
+                            [attribute]="attributePassword()"
+                            [valueOrValues]="valueOrValues()"
+                            [displayableErrors]="displayableErrors()"
+                            (dispatchFormAction)="dispatchFormAction.emit($event)"
+                        ></kc-input-tag>
+                    </kc-password-wrapper>
+                } @else {
+                    <kc-input-tag
+                        [attribute]="attribute()"
+                        [valueOrValues]="valueOrValues()"
+                        [displayableErrors]="displayableErrors()"
+                        (dispatchFormAction)="dispatchFormAction.emit($event)"
+                    ></kc-input-tag>
+                }
+            }
         }
-      }
     }
-  }
 }

package/src/login/components/input-field-by-type/input-field-by-type.component.ts

@@ -1,26 +1,16 @@
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    forwardRef,
-    inject,
-    input,
-    output
-} from "@angular/core";
-import { CLASSES, USE_DEFAULT_CSS } from "@keycloakify/angular/lib/public-api";
-import { Attribute } from "keycloakify/login/KcContext";
-import { ClassKey } from "keycloakify/login/lib/kcClsx";
-import { ComponentReference } from "@keycloakify/angular/login/classes/component-reference.class";
-import { ToArrayPipe } from "@keycloakify/angular/login/pipes/to-array.pipe";
-import {
-    FormAction,
-    FormFieldError
-} from "@keycloakify/angular/login/services/user-profile-form.service";
-import { InputTagSelectsComponent } from "@keycloakify/angular/login/components/input-tag-selects/input-tag-selects.component";
-import { InputTagComponent } from "@keycloakify/angular/login/components/input-tag/input-tag.component";
-import { PasswordWrapperComponent } from "@keycloakify/angular/login/components/password-wrapper/password-wrapper.component";
-import { SelectTagComponent } from "@keycloakify/angular/login/components/select-tag/select-tag.component";
-import { TextareaTagComponent } from "@keycloakify/angular/login/components/textarea-tag/textarea-tag.component";
+import { ChangeDetectionStrategy, Component, computed, forwardRef, inject, input, output } 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 { type Attribute } from 'keycloakify/login/KcContext';
+import { type ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference.class';
+import { ToArrayPipe } from '@keycloakify/angular/lib/pipes/to-array.pipe';
+import { FormAction, FormFieldError } from '@keycloakify/angular/login/services/user-profile-form.service';
+import { InputTagSelectsComponent } from '@keycloakify/angular/login/components/input-tag-selects/input-tag-selects.component';
+import { InputTagComponent } from '@keycloakify/angular/login/components/input-tag/input-tag.component';
+import { PasswordWrapperComponent } from '@keycloakify/angular/login/components/password-wrapper/password-wrapper.component';
+import { SelectTagComponent } from '@keycloakify/angular/login/components/select-tag/select-tag.component';
+import { TextareaTagComponent } from '@keycloakify/angular/login/components/textarea-tag/textarea-tag.component';
 
 @Component({
     standalone: true,
@@ -31,16 +21,9 @@ import { TextareaTagComponent } from "@keycloakify/angular/login/components/text
             }
         `
     ],
-    imports: [
-        ToArrayPipe,
-        TextareaTagComponent,
-        SelectTagComponent,
-        InputTagSelectsComponent,
-        InputTagComponent,
-        PasswordWrapperComponent
-    ],
-    selector: "kc-input-field-by-type",
-    templateUrl: "input-field-by-type.component.html",
+    imports: [ToArrayPipe, TextareaTagComponent, SelectTagComponent, InputTagSelectsComponent, InputTagComponent, PasswordWrapperComponent],
+    selector: 'kc-input-field-by-type',
+    templateUrl: 'input-field-by-type.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [
         {
@@ -55,13 +38,13 @@ export class InputFieldByTypeComponent extends ComponentReference {
     displayableErrors = input<FormFieldError[]>();
     dispatchFormAction = output<FormAction>();
     override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
-    override classes = inject<Partial<Record<ClassKey, string>>>(CLASSES);
+    override classes = inject<Partial<Record<ClassKey, string>>>(LOGIN_CLASSES);
 
     attributePassword = computed<Attribute>(() => {
         const attribute: Attribute = this.attribute() ?? ({} as Attribute);
         return {
             ...attribute,
-            annotations: { ...(attribute.annotations ?? {}), inputType: "password" }
+            annotations: { ...(attribute.annotations ?? {}), inputType: 'password' }
         };
     });
 }

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

@@ -1,49 +1,45 @@
 @let attr = attribute();
 @let index = fieldIndex();
 @if (attr) {
-  <input
-    [type]="attr.annotations.inputType | inputType"
-    [id]="attr.name"
-    [name]="attr.name"
-    [value]="value()"
-    [kcClass]="'kcInputClass'"
-    [attr.aria-invalid]="index && displayableErrors()?.[index] !== undefined"
-    [disabled]="attr.readOnly"
-    [autocomplete]="attr.autocomplete"
-    [placeholder]="attr.annotations.inputTypePlaceholder ?? '' | advancedMsgStr"
-    [attr.pattern]="attr.annotations.inputTypePattern"
-    [attr.size]="
-      !attr.annotations.inputTypeSize
-        ? undefined
-        : (attr.annotations.inputTypeSize | toNumber) === 0
-          ? undefined
-          : (attr.annotations.inputTypeSize | toNumber)
-    "
-    [attr.maxlength]="
-      !attr.annotations.inputTypeMaxlength ? undefined : (attr.annotations.inputTypeMaxlength | toNumber)
-    "
-    [attr.minlength]="
-      !attr.annotations.inputTypeMinlength ? undefined : (attr.annotations.inputTypeMinlength | toNumber)
-    "
-    [attr.max]="attr.annotations.inputTypeMax"
-    [attr.min]="attr.annotations.inputTypeMin"
-    [attr.step]="attr.annotations.inputTypeStep"
-    [kcAttributes]="attr.html5DataAnnotations"
-    (change)="onChange($event)"
-    (blur)="onBlur()"
-  />
-  @if (index !== undefined) {
-    @let values = valueOrValues() ?? [] | toArray;
-    <kc-field-errors
-      [attribute]="attr"
-      [displayableErrors]="displayableErrors()"
-      [fieldIndex]="index"
-    ></kc-field-errors>
-    <kc-add-remove-buttons-multi-valued-attribute
-      [attribute]="attr"
-      [values]="values"
-      [fieldIndex]="index"
-      (dispatchFormAction)="dispatchFormAction.emit($event)"
-    ></kc-add-remove-buttons-multi-valued-attribute>
-  }
+    <input
+        [type]="attr.annotations.inputType | inputType"
+        [id]="attr.name"
+        [name]="attr.name"
+        [value]="value()"
+        [kcClass]="'kcInputClass'"
+        [attr.aria-invalid]="index && displayableErrors()?.[index] !== undefined"
+        [disabled]="attr.readOnly"
+        [autocomplete]="attr.autocomplete"
+        [placeholder]="i18n.advancedMsgStr(attr.annotations.inputTypePlaceholder ?? '')"
+        [attr.pattern]="attr.annotations.inputTypePattern"
+        [attr.size]="
+            !attr.annotations.inputTypeSize
+                ? undefined
+                : (attr.annotations.inputTypeSize | toNumber) === 0
+                  ? undefined
+                  : (attr.annotations.inputTypeSize | toNumber)
+        "
+        [attr.maxlength]="!attr.annotations.inputTypeMaxlength ? undefined : (attr.annotations.inputTypeMaxlength | toNumber)"
+        [attr.minlength]="!attr.annotations.inputTypeMinlength ? undefined : (attr.annotations.inputTypeMinlength | toNumber)"
+        [attr.max]="attr.annotations.inputTypeMax"
+        [attr.min]="attr.annotations.inputTypeMin"
+        [attr.step]="attr.annotations.inputTypeStep"
+        [kcAttributes]="attr.html5DataAnnotations"
+        (change)="onChange($event)"
+        (blur)="onBlur()"
+    />
+    @if (index !== undefined) {
+        @let values = valueOrValues() ?? [] | toArray;
+        <kc-field-errors
+            [attribute]="attr"
+            [displayableErrors]="displayableErrors()"
+            [fieldIndex]="index"
+        ></kc-field-errors>
+        <kc-add-remove-buttons-multi-valued-attribute
+            [attribute]="attr"
+            [values]="values"
+            [fieldIndex]="index"
+            (dispatchFormAction)="dispatchFormAction.emit($event)"
+        ></kc-add-remove-buttons-multi-valued-attribute>
+    }
 }

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

@@ -1,28 +1,19 @@
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    forwardRef,
-    inject,
-    input,
-    output
-} from "@angular/core";
-import { CLASSES, USE_DEFAULT_CSS } from "@keycloakify/angular/lib/public-api";
-import { Attribute } from "keycloakify/login/KcContext";
-import { ClassKey } from "keycloakify/login/lib/kcClsx";
-import { 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 { InputTypePipe } from "@keycloakify/angular/login/pipes/input-type.pipe";
-import { ToArrayPipe } from "@keycloakify/angular/login/pipes/to-array.pipe";
-import { ToNumberPipe } from "@keycloakify/angular/login/pipes/to-number.pipe";
-import {
-    FormAction,
-    FormFieldError
-} from "@keycloakify/angular/login/services/user-profile-form.service";
-import { AddRemoveButtonsMultiValuedAttributeComponent } from "@keycloakify/angular/login/components/add-remove-buttons-multi-valued-attribute/add-remove-buttons-multi-valued-attribute.component";
-import { FieldErrorsComponent } from "@keycloakify/angular/login/components/field-errors/field-errors.component";
+import { ChangeDetectionStrategy, Component, computed, forwardRef, inject, input, output } from '@angular/core';
+import { AttributesDirective } from '@keycloakify/angular/lib/directives/attributes.directive';
+import { InputTypePipe } from '@keycloakify/angular/lib/pipes/input-type.pipe';
+import { ToArrayPipe } from '@keycloakify/angular/lib/pipes/to-array.pipe';
+import { ToNumberPipe } from '@keycloakify/angular/lib/pipes/to-number.pipe';
+import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css.token';
+import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference.class';
+import { AddRemoveButtonsMultiValuedAttributeComponent } from '@keycloakify/angular/login/components/add-remove-buttons-multi-valued-attribute/add-remove-buttons-multi-valued-attribute.component';
+import { FieldErrorsComponent } from '@keycloakify/angular/login/components/field-errors/field-errors.component';
+import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class.directive';
+import { FormAction, FormFieldError } from '@keycloakify/angular/login/services/user-profile-form.service';
+import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes.token';
+import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n.token';
+import { type Attribute } from 'keycloakify/login/KcContext';
+import { type ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { type I18n } from '../../i18n';
 
 @Component({
     standalone: true,
@@ -40,11 +31,10 @@ import { FieldErrorsComponent } from "@keycloakify/angular/login/components/fiel
         AttributesDirective,
         ToArrayPipe,
         FieldErrorsComponent,
-        AddRemoveButtonsMultiValuedAttributeComponent,
-        AdvancedMsgStrPipe
+        AddRemoveButtonsMultiValuedAttributeComponent
     ],
-    selector: "kc-input-tag",
-    templateUrl: "input-tag.component.html",
+    selector: 'kc-input-tag',
+    templateUrl: 'input-tag.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [
         {
@@ -54,6 +44,7 @@ import { FieldErrorsComponent } from "@keycloakify/angular/login/components/fiel
     ]
 })
 export class InputTagComponent extends ComponentReference {
+    i18n = inject<I18n>(LOGIN_I18N);
     attribute = input<Attribute>();
     valueOrValues = input<string | string[]>();
     fieldIndex = input<number | undefined>(undefined);
@@ -61,7 +52,7 @@ export class InputTagComponent extends ComponentReference {
     displayableErrors = input<FormFieldError[]>();
     dispatchFormAction = output<FormAction>();
     override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
-    override classes = inject<Partial<Record<ClassKey, string>>>(CLASSES);
+    override classes = inject<Partial<Record<ClassKey, string>>>(LOGIN_CLASSES);
 
     value = computed(() => {
         const valueOrValues = this.valueOrValues();
@@ -78,8 +69,8 @@ export class InputTagComponent extends ComponentReference {
     onChange(event: Event) {
         const valueOrValues = this.valueOrValues();
         this.dispatchFormAction.emit({
-            action: "update",
-            name: this.attribute()?.name ?? "",
+            action: 'update',
+            name: this.attribute()?.name ?? '',
             valueOrValues: (() => {
                 if (this.fieldIndex !== undefined) {
                     if (valueOrValues instanceof Array) {
@@ -100,8 +91,8 @@ export class InputTagComponent extends ComponentReference {
 
     onBlur() {
         this.dispatchFormAction.emit({
-            action: "focus lost",
-            name: this.attribute()?.name ?? "",
+            action: 'focus lost',
+            name: this.attribute()?.name ?? '',
             fieldIndex: this.fieldIndex()
         });
     }

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

@@ -4,26 +4,26 @@
 @let classDiv = context()?.classDiv;
 @let attr = attribute();
 @if (attr) {
-  @for (option of options(); track option) {
-    <div [kcClass]="classDiv">
-      <input
-        [type]="inputType"
-        [id]="attr.name + '-' + option"
-        [name]="attr.name"
-        [value]="option"
-        [kcClass]="classInput"
-        [attr.aria-invalid]="!!displayableErrors()?.length"
-        [disabled]="attr.readOnly"
-        [checked]="checked(option)"
-        (change)="onChange($event, option)"
-        (blur)="onBlur()"
-      />
-      <label
-        [for]="attr.name + '-' + option"
-        [kcClass]="[classLabel!, attr.readOnly ? 'kcInputClassRadioCheckboxLabelDisabled' : $any('')]"
-      >
-        {{ option | advancedMsgStr }}
-      </label>
-    </div>
-  }
+    @for (option of options(); track option) {
+        <div [kcClass]="classDiv">
+            <input
+                [type]="inputType"
+                [id]="attr.name + '-' + option"
+                [name]="attr.name"
+                [value]="option"
+                [kcClass]="classInput"
+                [attr.aria-invalid]="!!displayableErrors()?.length"
+                [disabled]="attr.readOnly"
+                [checked]="checked(option)"
+                (change)="onChange($event, option)"
+                (blur)="onBlur()"
+            />
+            <label
+                [for]="attr.name + '-' + option"
+                [kcClass]="[classLabel!, attr.readOnly ? 'kcInputClassRadioCheckboxLabelDisabled' : $any('')]"
+            >
+                {{ i18n.advancedMsgStr(option) }}
+            </label>
+        </div>
+    }
 }

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

@@ -1,23 +1,13 @@
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    forwardRef,
-    inject,
-    input,
-    output,
-    Signal
-} from "@angular/core";
-import { CLASSES, USE_DEFAULT_CSS } from "@keycloakify/angular/lib/public-api";
-import { Attribute } from "keycloakify/login/KcContext";
-import { ClassKey } from "keycloakify/login/lib/kcClsx";
-import { ComponentReference } from "@keycloakify/angular/login/classes/component-reference.class";
-import { KcClassDirective } from "@keycloakify/angular/login/directives/kc-class.directive";
-import { AdvancedMsgStrPipe } from "@keycloakify/angular/login/pipes/advanced-msg-str.pipe";
-import {
-    FormAction,
-    FormFieldError
-} from "@keycloakify/angular/login/services/user-profile-form.service";
+import { ChangeDetectionStrategy, Component, computed, forwardRef, inject, input, output, Signal } 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 FormAction, type FormFieldError } from '@keycloakify/angular/login/services/user-profile-form.service';
+import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes.token';
+import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n.token';
+import { type Attribute } from 'keycloakify/login/KcContext';
+import { type ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { type I18n } from '../../i18n';
 
 @Component({
     standalone: true,
@@ -28,9 +18,9 @@ import {
             }
         `
     ],
-    imports: [KcClassDirective, AdvancedMsgStrPipe],
-    selector: "kc-input-tag-selects",
-    templateUrl: "input-tag-selects.component.html",
+    imports: [KcClassDirective],
+    selector: 'kc-input-tag-selects',
+    templateUrl: 'input-tag-selects.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [
         {
@@ -40,15 +30,16 @@ import {
     ]
 })
 export class InputTagSelectsComponent extends ComponentReference {
+    i18n = inject<I18n>(LOGIN_I18N);
     attribute = input<Attribute>();
     valueOrValues = input<string | string[]>();
     dispatchFormAction = output<FormAction>();
     displayableErrors = input<FormFieldError[]>();
     override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
-    override classes = inject<Partial<Record<ClassKey, string>>>(CLASSES);
+    override classes = inject<Partial<Record<ClassKey, string>>>(LOGIN_CLASSES);
 
     context: Signal<{
-        inputType: "radio" | "checkbox";
+        inputType: 'radio' | 'checkbox';
         classDiv: ClassKey;
         classInput: ClassKey;
         classLabel: ClassKey;
@@ -57,19 +48,19 @@ export class InputTagSelectsComponent extends ComponentReference {
         if (attribute) {
             const { inputType } = attribute.annotations;
             switch (inputType) {
-                case "select-radiobuttons":
+                case 'select-radiobuttons':
                     return {
-                        inputType: "radio",
-                        classDiv: "kcInputClassRadio",
-                        classInput: "kcInputClassRadioInput",
-                        classLabel: "kcInputClassRadioLabel"
+                        inputType: 'radio',
+                        classDiv: 'kcInputClassRadio',
+                        classInput: 'kcInputClassRadioInput',
+                        classLabel: 'kcInputClassRadioLabel'
                     };
-                case "multiselect-checkboxes":
+                case 'multiselect-checkboxes':
                     return {
-                        inputType: "checkbox",
-                        classDiv: "kcInputClassCheckbox",
-                        classInput: "kcInputClassCheckboxInput",
-                        classLabel: "kcInputClassCheckboxLabel"
+                        inputType: 'checkbox',
+                        classDiv: 'kcInputClassCheckbox',
+                        classInput: 'kcInputClassCheckboxInput',
+                        classLabel: 'kcInputClassCheckboxLabel'
                     };
             }
         }
@@ -87,9 +78,7 @@ export class InputTagSelectsComponent extends ComponentReference {
                         break walk;
                     }
 
-                    const validator = (
-                        attribute.validators as Record<string, { options?: string[] }>
-                    )[inputOptionsFromValidation];
+                    const validator = (attribute.validators as Record<string, { options?: string[] }>)[inputOptionsFromValidation];
 
                     if (validator === undefined) {
                         break walk;
@@ -120,8 +109,8 @@ export class InputTagSelectsComponent extends ComponentReference {
         const valueOrValues = this.valueOrValues();
         const isChecked = (event.target as HTMLInputElement).checked;
         this.dispatchFormAction.emit({
-            action: "update",
-            name: this.attribute()?.name ?? "",
+            action: 'update',
+            name: this.attribute()?.name ?? '',
             valueOrValues: (() => {
                 if (valueOrValues instanceof Array) {
                     const newValues = [...valueOrValues];
@@ -135,15 +124,15 @@ export class InputTagSelectsComponent extends ComponentReference {
                     return newValues;
                 }
 
-                return (event.target as HTMLInputElement)?.checked ? option : "";
+                return (event.target as HTMLInputElement)?.checked ? option : '';
             })()
         });
     }
 
     onBlur() {
         this.dispatchFormAction.emit({
-            action: "focus lost",
-            name: this.attribute()?.name ?? "",
+            action: 'focus lost',
+            name: this.attribute()?.name ?? '',
             fieldIndex: undefined
         });
     }

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

@@ -1,19 +1,19 @@
 <div
-  id="kc-form-options"
-  [kcClass]="'kcFormOptionsClass'"
+    id="kc-form-options"
+    [kcClass]="'kcFormOptionsClass'"
 >
-  <div [kcClass]="'kcFormOptionsWrapperClass'">
-    <div class="checkbox">
-      <label for="logout-sessions">
-        <input
-          type="checkbox"
-          id="logout-sessions"
-          name="logout-sessions"
-          value="on"
-          defaultChecked="true"
-        />
-        {{ 'logoutOtherSessions' | msgStr }}
-      </label>
+    <div [kcClass]="'kcFormOptionsWrapperClass'">
+        <div class="checkbox">
+            <label for="logout-sessions">
+                <input
+                    type="checkbox"
+                    id="logout-sessions"
+                    name="logout-sessions"
+                    value="on"
+                    defaultChecked="true"
+                />
+                {{ i18n.msgStr('logoutOtherSessions') }}
+            </label>
+        </div>
     </div>
-  </div>
 </div>