@keycloakify/angular 0.0.1-rc.5 → 0.0.1-rc.7

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@keycloakify/angular",
-    "version": "0.0.1-rc.5",
+    "version": "0.0.1-rc.7",
     "description": "Angular components for Keycloakify",
     "repository": {
         "type": "git",
@@ -157,6 +157,8 @@
         "login/tokens/kc-context.token.js",
         "login/tokens/make-user-confirm-password.token.d.ts",
         "login/tokens/make-user-confirm-password.token.js",
+        "login/tokens/user-profile-form-fields-ejected-path.token.d.ts",
+        "login/tokens/user-profile-form-fields-ejected-path.token.js",
         "src/lib/models/script.model.ts",
         "src/lib/services/resource-injector.service.ts",
         "src/lib/tokens/use-default-css.token.ts",
@@ -274,6 +276,7 @@
         "src/login/tokens/i18n.token.ts",
         "src/login/tokens/kc-context.token.ts",
         "src/login/tokens/make-user-confirm-password.token.ts",
+        "src/login/tokens/user-profile-form-fields-ejected-path.token.ts",
         "src/tsconfig.json",
         "stories/login/pages/login/login.stories.ts"
     ],

package/src/login/DefaultPage.ts

@@ -1,6 +1,6 @@
 import { Type } from '@angular/core';
-import { ClassKey } from 'keycloakify/login/lib/kcClsx';
-import { KcContext } from 'keycloakify/login/KcContext';
+import { type ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { type KcContext } from './KcContext';
 
 const DefaultPage = async (
     pageId: KcContext['pageId'],

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

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

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

@@ -1,8 +1,8 @@
 import { ChangeDetectionStrategy, Component, computed, inject, input, output } from '@angular/core';
-import { FormAction } from '@keycloakify/angular/login/services/user-profile-form.service';
+import { type FormAction } from '@keycloakify/angular/login/services/user-profile-form.service';
 import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n.token';
-import { Attribute } from 'keycloakify/login/KcContext';
-import { I18n } from '../../i18n';
+import { type Attribute } from 'keycloakify/login/KcContext';
+import { type I18n } from '../../i18n';
 
 @Component({
     standalone: true,

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

@@ -2,10 +2,10 @@ import { ChangeDetectionStrategy, Component, forwardRef, inject, input } from '@
 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 { FormFieldError } from '@keycloakify/angular/login/services/user-profile-form.service';
+import { type FormFieldError } from '@keycloakify/angular/login/services/user-profile-form.service';
 import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes.token';
-import { Attribute } from 'keycloakify/login/KcContext';
-import { ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { type Attribute } from 'keycloakify/login/KcContext';
+import { type ClassKey } from 'keycloakify/login/lib/kcClsx';
 
 @Component({
     standalone: true,

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

@@ -5,9 +5,9 @@ import { AttributesDirective } from '@keycloakify/angular/login/directives/attri
 import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class.directive';
 import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes.token';
 import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n.token';
-import { Attribute } from 'keycloakify/login/KcContext';
-import { ClassKey } from 'keycloakify/login/lib/kcClsx';
-import { I18n } from '../../i18n';
+import { type Attribute } from 'keycloakify/login/KcContext';
+import { type ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { type I18n } from '../../i18n';
 
 @Component({
     standalone: true,

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

@@ -1,8 +1,8 @@
 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 { Attribute } from 'keycloakify/login/KcContext';
-import { ClassKey } from 'keycloakify/login/lib/kcClsx';
+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/login/pipes/to-array.pipe';
 import { FormAction, FormFieldError } from '@keycloakify/angular/login/services/user-profile-form.service';

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

@@ -11,9 +11,9 @@ import { ToNumberPipe } from '@keycloakify/angular/login/pipes/to-number.pipe';
 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';
+import { type Attribute } from 'keycloakify/login/KcContext';
+import { type ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { type I18n } from '../../i18n';
 
 @Component({
     standalone: true,

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

@@ -2,12 +2,12 @@ import { ChangeDetectionStrategy, Component, computed, forwardRef, inject, input
 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 { FormAction, FormFieldError } from '@keycloakify/angular/login/services/user-profile-form.service';
+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 { Attribute } from 'keycloakify/login/KcContext';
-import { ClassKey } from 'keycloakify/login/lib/kcClsx';
-import { I18n } from '../../i18n';
+import { type Attribute } from 'keycloakify/login/KcContext';
+import { type ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { type I18n } from '../../i18n';
 
 @Component({
     standalone: true,

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

@@ -4,8 +4,8 @@ import { ComponentReference } from '@keycloakify/angular/login/classes/component
 import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class.directive';
 import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes.token';
 import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n.token';
-import { ClassKey } from 'keycloakify/login/lib/kcClsx';
-import { I18n } from '../../i18n';
+import { type ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { type I18n } from '../../i18n';
 
 @Component({
     selector: 'kc-logout-other-sessions',

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

@@ -5,8 +5,8 @@ import { ComponentReference } from '@keycloakify/angular/login/classes/component
 import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class.directive';
 import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes.token';
 import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n.token';
-import { ClassKey } from 'keycloakify/login/lib/kcClsx';
-import { I18n } from '../../i18n';
+import { type ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { type I18n } from '../../i18n';
 
 @Component({
     selector: 'kc-password-wrapper',

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

@@ -3,12 +3,12 @@ import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css
 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 { 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 { Attribute } from 'keycloakify/login/KcContext';
-import { ClassKey } from 'keycloakify/login/lib/kcClsx';
-import { I18n } from '../../i18n';
+import { type Attribute } from 'keycloakify/login/KcContext';
+import { type ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { type I18n } from '../../i18n';
 
 @Component({
     standalone: true,

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

@@ -1,12 +1,12 @@
 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 { type FormAction, type FormFieldError } from '@keycloakify/angular/login/services/user-profile-form.service';
+import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes.token';
+import { type Attribute } from 'keycloakify/login/KcContext';
+import { type ClassKey } from 'keycloakify/login/lib/kcClsx';
 
 @Component({
     standalone: true,

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

@@ -6,14 +6,14 @@ import { FieldErrorsComponent } from '@keycloakify/angular/login/components/fiel
 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 { type 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';
+import { type ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { type I18n } from '../../i18n';
+import { type KcContext } from '../../KcContext';
 
 @Component({
     standalone: true,

package/src/login/containers/template.component.ts

@@ -1,18 +1,18 @@
 import { AsyncPipe, NgTemplateOutlet } from '@angular/common';
 import { ChangeDetectionStrategy, Component, forwardRef, inject, input, OnInit, Renderer2 } from '@angular/core';
 import { Meta, Title } from '@angular/platform-browser';
-import type { I18n } from '@keycloakify/angular/login/i18n';
-import { KcContext } from 'keycloakify/login/KcContext/KcContext';
-import { ClassKey, getKcClsx } from 'keycloakify/login/lib/kcClsx';
-import { Observable } from 'rxjs';
+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 { I18n } from '@keycloakify/angular/login/i18n';
 import { KcSanitizePipe } from '@keycloakify/angular/login/pipes/kc-sanitize.pipe';
 import { LoginResourceInjectorService } from '@keycloakify/angular/login/services/login-resource-injector.service';
-import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n.token';
 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 { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css.token';
+import { KcContext } from 'keycloakify/login/KcContext/KcContext';
+import { type ClassKey, getKcClsx } from 'keycloakify/login/lib/kcClsx';
+import { Observable } from 'rxjs';
 
 @Component({
     selector: 'kc-login-template',

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

@@ -10,7 +10,7 @@ import {
     Renderer2,
     ɵstringify as stringify
 } from '@angular/core';
-import { ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { type ClassKey } from 'keycloakify/login/lib/kcClsx';
 import { getKcClsx } from 'keycloakify/login/lib/kcClsx';
 import { ComponentReference } from '../classes/component-reference.class';
 

package/src/login/i18n.ts

@@ -1,4 +1,4 @@
 import type { GenericI18n_noJsx } from 'keycloakify/login/i18n/noJsx/GenericI18n_noJsx';
-import { MessageKey as MessageKey_defaultSet } from 'keycloakify/login/i18n/messages_defaultSet/types';
+import { type MessageKey as MessageKey_defaultSet } from 'keycloakify/login/i18n/messages_defaultSet/types';
 /** INTERNAL: DO NOT IMPORT THIS */
 export type I18n = GenericI18n_noJsx<MessageKey_defaultSet, string>;

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

@@ -5,10 +5,10 @@ import { KC_LOGIN_CONTEXT } from '@keycloakify/angular/login/tokens/kc-context.t
 import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference.class';
 import { TemplateComponent } from '@keycloakify/angular/login/containers/template.component';
 import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class.directive';
-import { ClassKey } from 'keycloakify/login/lib/kcClsx';
-import { KcContext } from '../../KcContext';
+import { type ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { type KcContext } from '../../KcContext';
 import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n.token';
-import { I18n } from '../../i18n';
+import { type I18n } from '../../i18n';
 
 @Component({
     standalone: true,

package/src/login/pages/delete-account-confirm/delete-account-confirm.component.ts

@@ -6,9 +6,9 @@ import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class
 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 { ClassKey } from 'keycloakify/login/lib/kcClsx';
-import { I18n } from '../../i18n';
-import { KcContext } from '../../KcContext';
+import { type ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { type I18n } from '../../i18n';
+import { type KcContext } from '../../KcContext';
 
 @Component({
     standalone: true,

package/src/login/pages/delete-credential/delete-credential.component.ts

@@ -6,9 +6,9 @@ import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class
 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 { ClassKey } from 'keycloakify/login/lib/kcClsx';
-import { I18n } from '../../i18n';
-import { KcContext } from '../../KcContext';
+import { type ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { type I18n } from '../../i18n';
+import { type KcContext } from '../../KcContext';
 
 @Component({
     standalone: true,

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

@@ -4,11 +4,11 @@ import { ComponentReference } from '@keycloakify/angular/login/classes/component
 import { TemplateComponent } from '@keycloakify/angular/login/containers/template.component';
 import { KcSanitizePipe } from '@keycloakify/angular/login/pipes/kc-sanitize.pipe';
 import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n.token';
-import { I18n } from '../../i18n';
+import { type I18n } from '../../i18n';
 import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes.token';
 import { KC_LOGIN_CONTEXT } from '@keycloakify/angular/login/tokens/kc-context.token';
-import { ClassKey } from 'keycloakify/login/lib/kcClsx';
-import { KcContext } from '../../KcContext';
+import { type ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { type KcContext } from '../../KcContext';
 
 @Component({
     standalone: true,

package/src/login/pages/frontchannel-logout/frontchannel-logout.component.ts

@@ -4,11 +4,11 @@ import { ComponentReference } from '@keycloakify/angular/login/classes/component
 import { TemplateComponent } from '@keycloakify/angular/login/containers/template.component';
 import { KcSanitizePipe } from '@keycloakify/angular/login/pipes/kc-sanitize.pipe';
 import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n.token';
-import { I18n } from '../../i18n';
+import { type I18n } from '../../i18n';
 import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes.token';
 import { KC_LOGIN_CONTEXT } from '@keycloakify/angular/login/tokens/kc-context.token';
-import { ClassKey } from 'keycloakify/login/lib/kcClsx';
-import { KcContext } from '../../KcContext';
+import { type ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { type KcContext } from '../../KcContext';
 
 @Component({
     standalone: true,

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

@@ -16,7 +16,7 @@
             [action]="url.loginAction"
             method="post"
         >
-            <kc-user-profile-form-fields (onIsFormSubmittable)="isFormSubmittable.set($event)" />
+            <ng-container *ngComponentOutlet="userProfileFormFieldsComponent | async"></ng-container>
             <div [kcClass]="'kcFormGroupClass'">
                 <div
                     id="kc-form-options"

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

@@ -1,19 +1,22 @@
-import { ChangeDetectionStrategy, Component, forwardRef, inject, input, signal } from '@angular/core';
+import { AsyncPipe, NgComponentOutlet } from '@angular/common';
+import { AfterContentInit, ChangeDetectionStrategy, Component, ContentChild, forwardRef, inject, input, signal, Type } 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 { UserProfileFormFieldsComponent } from '@keycloakify/angular/login/components/user-profile-form-fields/user-profile-form-fields.component';
 import { TemplateComponent } from '@keycloakify/angular/login/containers/template.component';
 import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class.directive';
-import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n.token';
-import { I18n } from '../../i18n';
 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 { ClassKey } from 'keycloakify/login/lib/kcClsx';
-import { KcContext } from '../../KcContext';
+import { USER_PROFILE_FORM_FIELDS_EJECTED_PATH } from '@keycloakify/angular/login/tokens/user-profile-form-fields-ejected-path.token';
+import { type ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { from, Observable, tap } from 'rxjs';
+import { type I18n } from '../../i18n';
+import { type KcContext } from '../../KcContext';
 
 @Component({
     standalone: true,
-    imports: [TemplateComponent, UserProfileFormFieldsComponent, KcClassDirective],
+    imports: [TemplateComponent, KcClassDirective, NgComponentOutlet, AsyncPipe],
     selector: 'kc-root',
     templateUrl: 'idp-review-user-profile.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -24,7 +27,9 @@ import { KcContext } from '../../KcContext';
         }
     ]
 })
-export class IdpReviewUserProfileComponent extends ComponentReference {
+export class IdpReviewUserProfileComponent extends ComponentReference implements AfterContentInit {
+    @ContentChild(UserProfileFormFieldsComponent, { descendants: true }) userProfileFormFields: UserProfileFormFieldsComponent | undefined;
+
     kcContext = inject<Extract<KcContext, { pageId: 'idp-review-user-profile.ftl' }>>(KC_LOGIN_CONTEXT);
     displayRequiredFields = input(true);
     documentTitle = input<string>();
@@ -36,6 +41,22 @@ export class IdpReviewUserProfileComponent extends ComponentReference {
     displayInfo: boolean = false;
     displayMessage: boolean = !this.kcContext?.messagesPerField?.existsError('global');
 
+    userProfileFormFieldsComponent: Observable<Type<UserProfileFormFieldsComponent> | null>;
+    userProfileFormFieldsEjectedPath = inject<string | undefined>(USER_PROFILE_FORM_FIELDS_EJECTED_PATH);
+    constructor() {
+        super();
+        this.userProfileFormFieldsComponent = from(
+            import(/* @vite-ignore */
+                this.userProfileFormFieldsEjectedPath ??
+                    '../../components/user-profile-form-fields/user-profile-form-fields.component'
+            ).then(c => c.UserProfileFormFieldsComponent)
+        );
+    }
+
+    ngAfterContentInit(): void {
+        this.userProfileFormFields?.onIsFormSubmittable?.subscribe(submittable => this.isFormSubmittable.set(submittable));
+    }
+
     onCallback() {
         (document.getElementById('kc-register-form') as HTMLFormElement).submit();
     }

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

@@ -6,9 +6,9 @@ import { KcSanitizePipe } from '@keycloakify/angular/login/pipes/kc-sanitize.pip
 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 { ClassKey } from 'keycloakify/login/lib/kcClsx';
-import { I18n } from '../../i18n';
-import { KcContext } from '../../KcContext';
+import { type ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { type I18n } from '../../i18n';
+import { type KcContext } from '../../KcContext';
 
 @Component({
     standalone: true,

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

@@ -9,9 +9,9 @@ import { KcSanitizePipe } from '@keycloakify/angular/login/pipes/kc-sanitize.pip
 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 { ClassKey } from 'keycloakify/login/lib/kcClsx';
-import { I18n } from '../../i18n';
-import { KcContext } from '../../KcContext';
+import { type ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { type I18n } from '../../i18n';
+import { type KcContext } from '../../KcContext';
 
 @Component({
     selector: 'kc-root',

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

@@ -8,9 +8,9 @@ import { KcSanitizePipe } from '@keycloakify/angular/login/pipes/kc-sanitize.pip
 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 { ClassKey } from 'keycloakify/login/lib/kcClsx';
-import { I18n } from '../../i18n';
-import { KcContext } from '../../KcContext';
+import { type ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { type I18n } from '../../i18n';
+import { type KcContext } from '../../KcContext';
 
 @Component({
     standalone: true,

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

@@ -6,9 +6,9 @@ import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class
 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 { ClassKey } from 'keycloakify/login/lib/kcClsx';
-import { I18n } from '../../i18n';
-import { KcContext } from '../../KcContext';
+import { type ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { type I18n } from '../../i18n';
+import { type KcContext } from '../../KcContext';
 
 @Component({
     standalone: true,

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

@@ -4,11 +4,11 @@ import { ComponentReference } from '@keycloakify/angular/login/classes/component
 import { TemplateComponent } from '@keycloakify/angular/login/containers/template.component';
 import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class.directive';
 import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n.token';
-import { I18n } from '../../i18n';
+import { type I18n } from '../../i18n';
 import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes.token';
 import { KC_LOGIN_CONTEXT } from '@keycloakify/angular/login/tokens/kc-context.token';
-import { ClassKey } from 'keycloakify/login/lib/kcClsx';
-import { KcContext } from '../../KcContext';
+import { type ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { type KcContext } from '../../KcContext';
 
 @Component({
     standalone: true,

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

@@ -4,11 +4,11 @@ import { ComponentReference } from '@keycloakify/angular/login/classes/component
 import { TemplateComponent } from '@keycloakify/angular/login/containers/template.component';
 import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class.directive';
 import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n.token';
-import { I18n } from '../../i18n';
+import { type I18n } from '../../i18n';
 import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes.token';
 import { KC_LOGIN_CONTEXT } from '@keycloakify/angular/login/tokens/kc-context.token';
-import { ClassKey } from 'keycloakify/login/lib/kcClsx';
-import { KcContext } from '../../KcContext';
+import { type ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { type KcContext } from '../../KcContext';
 
 @Component({
     standalone: true,

package/src/login/pages/login-oauth-grant/login-oauth-grant.component.ts

@@ -6,9 +6,9 @@ import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class
 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 { ClassKey } from 'keycloakify/login/lib/kcClsx';
-import { I18n } from '../../i18n';
-import { KcContext } from '../../KcContext';
+import { type ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { type I18n } from '../../i18n';
+import { type KcContext } from '../../KcContext';
 
 @Component({
     standalone: true,

package/src/login/pages/login-oauth2-device-verify-user-code/login-oauth2-device-verify-user-code.component.ts

@@ -6,9 +6,9 @@ import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class
 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 { ClassKey } from 'keycloakify/login/lib/kcClsx';
-import { I18n } from '../../i18n';
-import { KcContext } from '../../KcContext';
+import { type ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { type I18n } from '../../i18n';
+import { type KcContext } from '../../KcContext';
 
 @Component({
     standalone: true,

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

@@ -7,9 +7,9 @@ import { KcSanitizePipe } from '@keycloakify/angular/login/pipes/kc-sanitize.pip
 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 { ClassKey } from 'keycloakify/login/lib/kcClsx';
-import { I18n } from '../../i18n';
-import { KcContext } from '../../KcContext';
+import { type ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { type I18n } from '../../i18n';
+import { type KcContext } from '../../KcContext';
 
 @Component({
     standalone: true,

package/src/login/pages/login-page-expired/login-page-expired.component.ts

@@ -5,9 +5,9 @@ import { TemplateComponent } from '@keycloakify/angular/login/containers/templat
 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 { ClassKey } from 'keycloakify/login/lib/kcClsx';
-import { I18n } from '../../i18n';
-import { KcContext } from '../../KcContext';
+import { type ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { type I18n } from '../../i18n';
+import { type KcContext } from '../../KcContext';
 
 @Component({
     standalone: true,

package/src/login/pages/login-passkeys-conditional-authenticate/login-passkeys-conditional-authenticate.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, forwardRef, inject } from '@angular/core';
-import { Script } from '@keycloakify/angular/lib/models/script.model';
+import { type Script } from '@keycloakify/angular/lib/models/script.model';
 import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css.token';
 import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference.class';
 import { TemplateComponent } from '@keycloakify/angular/login/containers/template.component';
@@ -8,9 +8,9 @@ import { LoginResourceInjectorService } from '@keycloakify/angular/login/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 { ClassKey, getKcClsx } from 'keycloakify/login/lib/kcClsx';
-import { I18n } from '../../i18n';
-import { KcContext } from '../../KcContext';
+import { type ClassKey, getKcClsx } from 'keycloakify/login/lib/kcClsx';
+import { type I18n } from '../../i18n';
+import { type KcContext } from '../../KcContext';
 
 @Component({
     standalone: true,

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

@@ -8,9 +8,9 @@ import { KcSanitizePipe } from '@keycloakify/angular/login/pipes/kc-sanitize.pip
 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 { ClassKey } from 'keycloakify/login/lib/kcClsx';
-import { I18n } from '../../i18n';
-import { KcContext } from '../../KcContext';
+import { type ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { type I18n } from '../../i18n';
+import { type KcContext } from '../../KcContext';
 
 @Component({
     standalone: true,

package/src/login/pages/login-recovery-authn-code-config/login-recovery-authn-code-config.component.ts

@@ -7,9 +7,9 @@ import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class
 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 { ClassKey } from 'keycloakify/login/lib/kcClsx';
-import { I18n } from '../../i18n';
-import { KcContext } from '../../KcContext';
+import { type ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { type I18n } from '../../i18n';
+import { type KcContext } from '../../KcContext';
 
 @Component({
     standalone: true,