@keycloakify/angular 0.0.1-rc.2 → 0.0.1-rc.4

package/src/login/components/password-wrapper/password-wrapper.component.ts

@@ -1,19 +1,12 @@
 import { AsyncPipe } from '@angular/common';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    forwardRef,
-    inject,
-    input,
-    Renderer2,
-    signal,
-    WritableSignal
-} from '@angular/core';
-import { CLASSES, USE_DEFAULT_CSS } from '@keycloakify/angular/lib/public-api';
-import { ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { ChangeDetectionStrategy, Component, forwardRef, inject, input, Renderer2, signal, WritableSignal } 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 { MsgStrPipe } from '@keycloakify/angular/login/pipes/msg-str.pipe';
+import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes.token';
+import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n.token';
+import { ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { I18n } from '../../i18n';
 
 @Component({
     selector: 'kc-password-wrapper',
@@ -26,7 +19,7 @@ import { MsgStrPipe } from '@keycloakify/angular/login/pipes/msg-str.pipe';
     ],
     standalone: true,
     changeDetection: ChangeDetectionStrategy.OnPush,
-    imports: [KcClassDirective, AsyncPipe, MsgStrPipe],
+    imports: [KcClassDirective, AsyncPipe],
     templateUrl: './password-wrapper.component.html',
     providers: [
         {
@@ -36,10 +29,11 @@ import { MsgStrPipe } from '@keycloakify/angular/login/pipes/msg-str.pipe';
     ]
 })
 export class PasswordWrapperComponent extends ComponentReference {
+    i18n = inject<I18n>(LOGIN_I18N);
     private renderer = inject(Renderer2);
     passwordInputId = input.required<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);
 
     isPasswordRevealed: WritableSignal<boolean> = signal(false);
 
@@ -51,11 +45,7 @@ export class PasswordWrapperComponent extends ComponentReference {
     private setPasswordInputType(): void {
         const input = document.getElementById(this.passwordInputId());
         if (input) {
-            this.renderer.setProperty(
-                input,
-                'type',
-                this.isPasswordRevealed() ? 'text' : 'password'
-            );
+            this.renderer.setProperty(input, 'type', this.isPasswordRevealed() ? 'text' : 'password');
         }
     }
 }

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

@@ -1,31 +1,31 @@
 @let attr = attribute();
 @let multiple = isMultiple();
 @if (attr) {
-  <select
-    [id]="attr.name"
-    [name]="attr.name"
-    [value]="valueOrValues()"
-    [kcClass]="'kcInputClass'"
-    [attr.aria-invalid]="!!displayableErrors()?.length"
-    [disabled]="attr.readOnly"
-    [multiple]="multiple"
-    [size]="!attr.annotations.inputTypeSize ? undefined : (attr.annotations.inputTypeSize | toNumber)"
-    (change)="onChange($event)"
-    (blur)="onBlur()"
-  >
-    @if (!multiple) {
-      <option value=""></option>
-    }
-    @for (option of options(); track option) {
-      <option [value]="option">
-        @if (!!attr.annotations.inputOptionLabels) {
-          {{ attr.annotations.inputOptionLabels[option] ?? option | advancedMsgStr }}
-        } @else if (!!attr.annotations.inputOptionLabelsI18nPrefix) {
-          {{ attr.annotations.inputOptionLabelsI18nPrefix + '.' + option | advancedMsgStr }}
-        } @else {
-          {{ option }}
+    <select
+        [id]="attr.name"
+        [name]="attr.name"
+        [value]="valueOrValues()"
+        [kcClass]="'kcInputClass'"
+        [attr.aria-invalid]="!!displayableErrors()?.length"
+        [disabled]="attr.readOnly"
+        [multiple]="multiple"
+        [size]="!attr.annotations.inputTypeSize ? undefined : (attr.annotations.inputTypeSize | toNumber)"
+        (change)="onChange($event)"
+        (blur)="onBlur()"
+    >
+        @if (!multiple) {
+            <option value=""></option>
         }
-      </option>
-    }
-  </select>
+        @for (option of options(); track option) {
+            <option [value]="option">
+                @if (!!attr.annotations.inputOptionLabels) {
+                    {{ i18n.advancedMsgStr(attr.annotations.inputOptionLabels[option] ?? option) }}
+                } @else if (!!attr.annotations.inputOptionLabelsI18nPrefix) {
+                    {{ i18n.advancedMsgStr(attr.annotations.inputOptionLabelsI18nPrefix + '.' + option) }}
+                } @else {
+                    {{ option }}
+                }
+            </option>
+        }
+    </select>
 }

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

@@ -1,23 +1,14 @@
-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 { ChangeDetectionStrategy, Component, computed, forwardRef, inject, input, output } 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 { AdvancedMsgStrPipe } from '@keycloakify/angular/login/pipes/advanced-msg-str.pipe';
 import { ToNumberPipe } from '@keycloakify/angular/login/pipes/to-number.pipe';
-import {
-    FormAction,
-    FormFieldError
-} from '@keycloakify/angular/login/services/user-profile-form.service';
+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 { Attribute } from 'keycloakify/login/KcContext';
+import { ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { I18n } from '../../i18n';
 
 @Component({
     standalone: true,
@@ -28,7 +19,7 @@ import {
             }
         `
     ],
-    imports: [KcClassDirective, ToNumberPipe, AdvancedMsgStrPipe],
+    imports: [KcClassDirective, ToNumberPipe],
     selector: 'kc-select-tag',
     templateUrl: 'select-tag.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -40,12 +31,13 @@ import {
     ]
 })
 export class SelectTagComponent extends ComponentReference {
+    i18n = inject<I18n>(LOGIN_I18N);
     attribute = input<Attribute>();
     valueOrValues = input<string | string[]>();
     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);
 
     isMultiple = computed(() => {
         return this.attribute()?.annotations?.inputType === 'multiselect';
@@ -62,9 +54,7 @@ export class SelectTagComponent 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;
@@ -89,9 +79,7 @@ export class SelectTagComponent extends ComponentReference {
             name: this.attribute()?.name ?? '',
             valueOrValues: (() => {
                 if (this.isMultiple()) {
-                    return Array.from(
-                        (event.target as HTMLSelectElement).selectedOptions
-                    ).map(option => option.value);
+                    return Array.from((event.target as HTMLSelectElement).selectedOptions).map(option => option.value);
                 }
 
                 return (event.target as HTMLSelectElement).value;

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

@@ -1,18 +1,16 @@
 @let attr = attribute();
 @if (attr) {
-  <textarea
-    [id]="attr.name"
-    [name]="attr.name"
-    [kcClass]="'kcInputClass'"
-    [attr.aria-invalid]="!!displayableErrors()?.length"
-    [disabled]="attr.readOnly"
-    [cols]="attr.annotations.inputTypeCols === undefined ? undefined : (attr.annotations.inputTypeCols | toNumber)"
-    [rows]="attr.annotations.inputTypeRows === undefined ? undefined : (attr.annotations.inputTypeRows | toNumber)"
-    [maxLength]="
-      attr.annotations.inputTypeMaxlength === undefined ? undefined : (attr.annotations.inputTypeMaxlength | toNumber)
-    "
-    [value]="value()"
-    (change)="onChange($event)"
-    (blur)="onBlur()"
-  ></textarea>
+    <textarea
+        [id]="attr.name"
+        [name]="attr.name"
+        [kcClass]="'kcInputClass'"
+        [attr.aria-invalid]="!!displayableErrors()?.length"
+        [disabled]="attr.readOnly"
+        [cols]="attr.annotations.inputTypeCols === undefined ? undefined : (attr.annotations.inputTypeCols | toNumber)"
+        [rows]="attr.annotations.inputTypeRows === undefined ? undefined : (attr.annotations.inputTypeRows | toNumber)"
+        [maxLength]="attr.annotations.inputTypeMaxlength === undefined ? undefined : (attr.annotations.inputTypeMaxlength | toNumber)"
+        [value]="value()"
+        (change)="onChange($event)"
+        (blur)="onBlur()"
+    ></textarea>
 }

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

@@ -1,21 +1,12 @@
-import {
-    ChangeDetectionStrategy,
-    Component,
-    forwardRef,
-    inject,
-    input,
-    output
-} from '@angular/core';
-import { CLASSES, USE_DEFAULT_CSS } from '@keycloakify/angular/lib/public-api';
+import { ChangeDetectionStrategy, Component, 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 { 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 { ToNumberPipe } from '@keycloakify/angular/login/pipes/to-number.pipe';
-import {
-    FormAction,
-    FormFieldError
-} from '@keycloakify/angular/login/services/user-profile-form.service';
+import { FormAction, FormFieldError } from '@keycloakify/angular/login/services/user-profile-form.service';
 
 @Component({
     standalone: true,
@@ -43,7 +34,7 @@ export class TextareaTagComponent 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);
 
     onChange(event: Event) {
         this.dispatchFormAction.emit({

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

@@ -1,85 +1,85 @@
 @let formFieldStates = formState().formFieldStates;
 
 @for (fieldState of formFieldStates; track fieldState.attribute) {
-  <!-- [groupNameRef]="groupNameRef"
+    <!-- [groupNameRef]="groupNameRef"
   TODO: verify this logic
   -->
-  <kc-group-label [attribute]="fieldState.attribute"> </kc-group-label>
+    <kc-group-label [attribute]="fieldState.attribute"> </kc-group-label>
 
-  @if (beforeField) {
-    <ng-container
-      [ngTemplateOutlet]="beforeField"
-      [ngTemplateOutletContext]="{
-        attribute: fieldState.attribute,
-        valueOrValues: fieldState.valueOrValues,
-        displayableErrors: fieldState.displayableErrors,
-      }"
+    @if (beforeField) {
+        <ng-container
+            [ngTemplateOutlet]="beforeField"
+            [ngTemplateOutletContext]="{
+                attribute: fieldState.attribute,
+                valueOrValues: fieldState.valueOrValues,
+                displayableErrors: fieldState.displayableErrors
+            }"
+        >
+        </ng-container>
+    }
+
+    <div
+        [kcClass]="'kcFormGroupClass'"
+        [style.display]="fieldState.attribute.name === 'password-confirm' && !doMakeUserConfirmPassword ? 'none' : 'block'"
     >
-    </ng-container>
-  }
+        <div [kcClass]="'kcLabelWrapperClass'">
+            <label
+                [for]="fieldState.attribute.name"
+                [kcClass]="'kcLabelClass'"
+            >
+                {{ i18n.advancedMsgStr(fieldState.attribute.displayName ?? '') }}
+                @if (fieldState.attribute.required) {
+                    *
+                }
+            </label>
+        </div>
 
-  <div
-    [kcClass]="'kcFormGroupClass'"
-    [style.display]="fieldState.attribute.name === 'password-confirm' && !doMakeUserConfirmPassword ? 'none' : 'block'"
-  >
-    <div [kcClass]="'kcLabelWrapperClass'">
-      <label
-        [for]="fieldState.attribute.name"
-        [kcClass]="'kcLabelClass'"
-      >
-        {{ fieldState.attribute.displayName ?? '' | advancedMsgStr }}
-        @if (fieldState.attribute.required) {
-          *
-        }
-      </label>
-    </div>
+        <div [kcClass]="'kcInputWrapperClass'">
+            @if (fieldState.attribute.annotations.inputHelperTextBefore) {
+                <div
+                    [kcClass]="'kcInputHelperTextBeforeClass'"
+                    [id]="'form-help-text-before-' + fieldState.attribute.name"
+                    aria-live="polite"
+                >
+                    {{ i18n.advancedMsgStr(fieldState.attribute.annotations.inputHelperTextBefore) }}
+                </div>
+            }
 
-    <div [kcClass]="'kcInputWrapperClass'">
-      @if (fieldState.attribute.annotations.inputHelperTextBefore) {
-        <div
-          [kcClass]="'kcInputHelperTextBeforeClass'"
-          [id]="'form-help-text-before-' + fieldState.attribute.name"
-          aria-live="polite"
-        >
-          {{ fieldState.attribute.annotations.inputHelperTextBefore | advancedMsgStr }}
-        </div>
-      }
+            <kc-input-field-by-type
+                [attribute]="fieldState.attribute"
+                [valueOrValues]="fieldState.valueOrValues"
+                [displayableErrors]="fieldState.displayableErrors"
+                (dispatchFormAction)="onDispatch($event)"
+            >
+            </kc-input-field-by-type>
 
-      <kc-input-field-by-type
-        [attribute]="fieldState.attribute"
-        [valueOrValues]="fieldState.valueOrValues"
-        [displayableErrors]="fieldState.displayableErrors"
-        (dispatchFormAction)="onDispatch($event)"
-      >
-      </kc-input-field-by-type>
+            <kc-field-errors
+                [attribute]="fieldState.attribute"
+                [displayableErrors]="fieldState.displayableErrors"
+            >
+            </kc-field-errors>
+            @if (fieldState.attribute.annotations.inputHelperTextAfter) {
+                <div
+                    [kcClass]="'kcInputHelperTextAfterClass'"
+                    [id]="'form-help-text-after-' + fieldState.attribute.name"
+                    aria-live="polite"
+                >
+                    {{ i18n.advancedMsgStr(fieldState.attribute.annotations.inputHelperTextAfter) }}
+                </div>
+            }
 
-      <kc-field-errors
-        [attribute]="fieldState.attribute"
-        [displayableErrors]="fieldState.displayableErrors"
-      >
-      </kc-field-errors>
-      @if (fieldState.attribute.annotations.inputHelperTextAfter) {
-        <div
-          [kcClass]="'kcInputHelperTextAfterClass'"
-          [id]="'form-help-text-after-' + fieldState.attribute.name"
-          aria-live="polite"
-        >
-          {{ fieldState.attribute.annotations.inputHelperTextAfter | advancedMsgStr }}
+            @if (afterField) {
+                <ng-container
+                    [ngTemplateOutlet]="afterField"
+                    [ngTemplateOutletContext]="{
+                        attribute: fieldState.attribute,
+                        valueOrValues: fieldState.valueOrValues,
+                        displayableErrors: fieldState.displayableErrors
+                    }"
+                >
+                </ng-container>
+            }
+            <!-- NOTE: Downloading of html5DataAnnotations scripts is done in the useUserProfileForm hook -->
         </div>
-      }
-
-      @if (afterField) {
-        <ng-container
-          [ngTemplateOutlet]="afterField"
-          [ngTemplateOutletContext]="{
-            attribute: fieldState.attribute,
-            valueOrValues: fieldState.valueOrValues,
-            displayableErrors: fieldState.displayableErrors,
-          }"
-        >
-        </ng-container>
-      }
-      <!-- NOTE: Downloading of html5DataAnnotations scripts is done in the useUserProfileForm hook -->
     </div>
-  </div>
 }

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

@@ -1,32 +1,19 @@
 import { NgTemplateOutlet } from '@angular/common';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    ContentChild,
-    effect,
-    forwardRef,
-    inject,
-    output,
-    TemplateRef
-} from '@angular/core';
-import {
-    DO_MAKE_USER_CONFIRM_PASSWORD,
-    KC_CONTEXT,
-    CLASSES,
-    USE_DEFAULT_CSS
-} from '@keycloakify/angular/lib/public-api';
-import { ClassKey } from 'keycloakify/login/lib/kcClsx';
-import { KcContext } from 'keycloakify/login/KcContext';
+import { ChangeDetectionStrategy, Component, ContentChild, effect, forwardRef, inject, output, TemplateRef } 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 { AdvancedMsgStrPipe } from '@keycloakify/angular/login/pipes/advanced-msg-str.pipe';
-import {
-    FormAction,
-    UserProfileFormService
-} from '@keycloakify/angular/login/services/user-profile-form.service';
 import { FieldErrorsComponent } from '@keycloakify/angular/login/components/field-errors/field-errors.component';
 import { GroupLabelComponent } from '@keycloakify/angular/login/components/group-label/group-label.component';
 import { InputFieldByTypeComponent } from '@keycloakify/angular/login/components/input-field-by-type/input-field-by-type.component';
+import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class.directive';
+import { FormAction, UserProfileFormService } 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 { KC_LOGIN_CONTEXT } from '@keycloakify/angular/login/tokens/kc-context.token';
+import { DO_MAKE_USER_CONFIRM_PASSWORD } from '@keycloakify/angular/login/tokens/make-user-confirm-password.token';
+import { KcContext } from 'keycloakify/login/KcContext';
+import { ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { I18n } from '../../i18n';
 
 @Component({
     standalone: true,
@@ -37,14 +24,7 @@ import { InputFieldByTypeComponent } from '@keycloakify/angular/login/components
             }
         `
     ],
-    imports: [
-        KcClassDirective,
-        FieldErrorsComponent,
-        InputFieldByTypeComponent,
-        GroupLabelComponent,
-        NgTemplateOutlet,
-        AdvancedMsgStrPipe
-    ],
+    imports: [KcClassDirective, FieldErrorsComponent, InputFieldByTypeComponent, GroupLabelComponent, NgTemplateOutlet],
     selector: 'kc-user-profile-form-fields',
     templateUrl: 'user-profile-form-fields.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -57,11 +37,12 @@ import { InputFieldByTypeComponent } from '@keycloakify/angular/login/components
     ]
 })
 export class UserProfileFormFieldsComponent extends ComponentReference {
-    kcContext = inject<KcContext>(KC_CONTEXT);
+    i18n = inject<I18n>(LOGIN_I18N);
+    kcContext = inject<KcContext>(KC_LOGIN_CONTEXT);
     userProfileFormService = inject(UserProfileFormService);
     doMakeUserConfirmPassword = inject(DO_MAKE_USER_CONFIRM_PASSWORD);
     override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
-    override classes = inject<Partial<Record<ClassKey, string>>>(CLASSES);
+    override classes = inject<Partial<Record<ClassKey, string>>>(LOGIN_CLASSES);
 
     onIsFormSubmittable = output<boolean>();