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

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

@@ -1,22 +1,13 @@
-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 { 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 { 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 { 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';
 
 @Component({
-    selector: "kc-password-wrapper",
+    selector: 'kc-password-wrapper',
     styles: [
         `
             :host {
@@ -27,7 +18,7 @@ import { MsgStrPipe } from "@keycloakify/angular/login/pipes/msg-str.pipe";
     standalone: true,
     changeDetection: ChangeDetectionStrategy.OnPush,
     imports: [KcClassDirective, AsyncPipe, MsgStrPipe],
-    templateUrl: "./password-wrapper.component.html",
+    templateUrl: './password-wrapper.component.html',
     providers: [
         {
             provide: ComponentReference,
@@ -51,11 +42,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) {
+                    {{ attr.annotations.inputOptionLabels[option] ?? option | advancedMsgStr }}
+                } @else if (!!attr.annotations.inputOptionLabelsI18nPrefix) {
+                    {{ attr.annotations.inputOptionLabelsI18nPrefix + '.' + option | advancedMsgStr }}
+                } @else {
+                    {{ option }}
+                }
+            </option>
+        }
+    </select>
 }

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

@@ -1,23 +1,12 @@
-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 { 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 { 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 { 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';
 
 @Component({
     standalone: true,
@@ -29,8 +18,8 @@ import {
         `
     ],
     imports: [KcClassDirective, ToNumberPipe, AdvancedMsgStrPipe],
-    selector: "kc-select-tag",
-    templateUrl: "select-tag.component.html",
+    selector: 'kc-select-tag',
+    templateUrl: 'select-tag.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [
         {
@@ -48,7 +37,7 @@ export class SelectTagComponent extends ComponentReference {
     override classes = inject<Partial<Record<ClassKey, string>>>(CLASSES);
 
     isMultiple = computed(() => {
-        return this.attribute()?.annotations?.inputType === "multiselect";
+        return this.attribute()?.annotations?.inputType === 'multiselect';
     });
 
     options = computed(() => {
@@ -62,9 +51,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;
@@ -85,13 +72,11 @@ export class SelectTagComponent extends ComponentReference {
 
     onChange(event: Event) {
         this.dispatchFormAction.emit({
-            action: "update",
-            name: this.attribute()?.name ?? "",
+            action: 'update',
+            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;
@@ -101,8 +86,8 @@ export class SelectTagComponent extends ComponentReference {
 
     onBlur() {
         this.dispatchFormAction.emit({
-            action: "focus lost",
-            name: this.attribute()?.name ?? "",
+            action: 'focus lost',
+            name: this.attribute()?.name ?? '',
             fieldIndex: undefined
         });
     }

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,11 @@
-import {
-    ChangeDetectionStrategy,
-    Component,
-    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 { 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 { ChangeDetectionStrategy, Component, 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 { 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';
 
 @Component({
     standalone: true,
@@ -27,8 +17,8 @@ import {
         `
     ],
     imports: [KcClassDirective, ToNumberPipe],
-    selector: "kc-textarea-tag",
-    templateUrl: "textarea-tag.component.html",
+    selector: 'kc-textarea-tag',
+    templateUrl: 'textarea-tag.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [
         {
@@ -47,16 +37,16 @@ export class TextareaTagComponent extends ComponentReference {
 
     onChange(event: Event) {
         this.dispatchFormAction.emit({
-            action: "update",
-            name: this.attribute()?.name ?? "",
+            action: 'update',
+            name: this.attribute()?.name ?? '',
             valueOrValues: (event.target as HTMLTextAreaElement).value
         });
     }
 
     onBlur() {
         this.dispatchFormAction.emit({
-            action: "focus lost",
-            name: this.attribute()?.name ?? "",
+            action: 'focus lost',
+            name: this.attribute()?.name ?? '',
             fieldIndex: undefined
         });
     }

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'"
+            >
+                {{ fieldState.attribute.displayName ?? '' | advancedMsgStr }}
+                @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"
+                >
+                    {{ fieldState.attribute.annotations.inputHelperTextBefore | advancedMsgStr }}
+                </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"
+                >
+                    {{ fieldState.attribute.annotations.inputHelperTextAfter | advancedMsgStr }}
+                </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,15 @@
-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 { 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 { 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 { 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';
 
 @Component({
     standalone: true,
@@ -37,16 +20,9 @@ import { InputFieldByTypeComponent } from "@keycloakify/angular/login/components
             }
         `
     ],
-    imports: [
-        KcClassDirective,
-        FieldErrorsComponent,
-        InputFieldByTypeComponent,
-        GroupLabelComponent,
-        NgTemplateOutlet,
-        AdvancedMsgStrPipe
-    ],
-    selector: "kc-user-profile-form-fields",
-    templateUrl: "user-profile-form-fields.component.html",
+    imports: [KcClassDirective, FieldErrorsComponent, InputFieldByTypeComponent, GroupLabelComponent, NgTemplateOutlet, AdvancedMsgStrPipe],
+    selector: 'kc-user-profile-form-fields',
+    templateUrl: 'user-profile-form-fields.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [
         UserProfileFormService,
@@ -67,8 +43,8 @@ export class UserProfileFormFieldsComponent extends ComponentReference {
 
     formState = this.userProfileFormService.formState;
 
-    @ContentChild("beforField") beforeField: TemplateRef<unknown> | undefined;
-    @ContentChild("afterField") afterField: TemplateRef<unknown> | undefined;
+    @ContentChild('beforField') beforeField: TemplateRef<unknown> | undefined;
+    @ContentChild('afterField') afterField: TemplateRef<unknown> | undefined;
 
     constructor() {
         super();