@keycloakify/angular 0.0.1-rc.16 → 0.0.1-rc.18

package/src/login/DefaultPage.ts

@@ -0,0 +1,208 @@
+import { Type } from '@angular/core';
+import type { ClassKey } from 'keycloakify/login/lib/kcClsx';
+import type { KcContext } from './KcContext';
+
+const DefaultPage = async (
+    pageId: KcContext['pageId'],
+    doMakeUserConfirmPassword = true,
+    doUseDefaultCss = true,
+    classes: { [key in ClassKey]?: string } = {}
+): Promise<{
+    ComponentBootstrap: Type<unknown>;
+    doMakeUserConfirmPassword: boolean;
+    doUseDefaultCss: boolean;
+    classes: { [key in ClassKey]?: string };
+}> => {
+    let ComponentBootstrapPromise;
+    switch (pageId) {
+        case 'login.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/login'
+            ).then(c => c.LoginComponent);
+            break;
+        case 'login-username.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/login-username'
+            ).then(c => c.LoginUsernameComponent);
+            break;
+        case 'login-password.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/login-password'
+            ).then(c => c.LoginPasswordComponent);
+            break;
+        case 'webauthn-authenticate.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/webauthn-authenticate'
+            ).then(c => c.WebauthnAuthenticateComponent);
+            break;
+        case 'webauthn-register.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/webauthn-register'
+            ).then(c => c.WebauthnRegisterComponent);
+            break;
+        case 'register.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/register'
+            ).then(c => c.RegisterComponent);
+            break;
+        case 'info.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/info'
+            ).then(c => c.InfoComponent);
+            break;
+        case 'error.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/error'
+            ).then(c => c.ErrorComponent);
+            break;
+        case 'login-reset-password.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/login-reset-password'
+            ).then(c => c.LoginResetPasswordComponent);
+            break;
+        case 'login-verify-email.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/login-verify-email'
+            ).then(c => c.LoginVerifyEmailComponent);
+            break;
+        case 'terms.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/terms'
+            ).then(c => c.TermsComponent);
+            break;
+        case 'login-oauth2-device-verify-user-code.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/login-oauth2-device-verify-user-code'
+            ).then(c => c.LoginOauth2DeviceVerifyUserCodeComponent);
+            break;
+        case 'login-oauth-grant.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/login-oauth-grant'
+            ).then(c => c.LoginOauthGrantComponent);
+            break;
+        case 'login-otp.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/login-otp'
+            ).then(c => c.LoginOtpComponent);
+
+            break;
+        case 'login-update-profile.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/login-update-profile'
+            ).then(c => c.LoginUpdateProfileComponent);
+            break;
+        case 'login-update-password.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/login-update-password'
+            ).then(c => c.LoginUpdatePasswordComponent);
+            break;
+        case 'login-idp-link-confirm.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/login-idp-link-confirm'
+            ).then(c => c.LoginIdpLinkConfirmComponent);
+            break;
+        case 'login-idp-link-email.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/login-idp-link-email'
+            ).then(c => c.LoginIdpLinkEmailComponent);
+            break;
+        case 'login-page-expired.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/login-page-expired'
+            ).then(c => c.LoginPageExpiredComponent);
+            break;
+        case 'login-config-totp.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/login-config-totp'
+            ).then(c => c.LoginConfigTotpComponent);
+            break;
+        case 'logout-confirm.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/logout-confirm'
+            ).then(c => c.LogoutConfirmComponent);
+            break;
+        case 'idp-review-user-profile.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/idp-review-user-profile'
+            ).then(c => c.IdpReviewUserProfileComponent);
+            break;
+        case 'update-email.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/update-email'
+            ).then(c => c.UpdateEmailComponent);
+            break;
+        case 'select-authenticator.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/select-authenticator'
+            ).then(c => c.SelectAuthenticatorComponent);
+            break;
+        case 'saml-post-form.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/saml-post-form'
+            ).then(c => c.SamlPostFormComponent);
+            break;
+        case 'delete-credential.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/delete-credential'
+            ).then(c => c.DeleteCredentialComponent);
+            break;
+        case 'code.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/code'
+            ).then(c => c.CodeComponent);
+            break;
+        case 'delete-account-confirm.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/delete-account-confirm'
+            ).then(c => c.DeleteAccountConfirmComponent);
+            break;
+        case 'frontchannel-logout.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/frontchannel-logout'
+            ).then(c => c.FrontchannelLogoutComponent);
+            break;
+        case 'login-recovery-authn-code-config.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/login-recovery-authn-code-config'
+            ).then(c => c.LoginRecoveryAuthnCodeConfigComponent);
+            break;
+        case 'login-recovery-authn-code-input.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/login-recovery-authn-code-input'
+            ).then(c => c.LoginRecoveryAuthnCodeInputComponent);
+            break;
+        case 'login-reset-otp.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/login-reset-otp'
+            ).then(c => c.LoginResetOtpComponent);
+            break;
+        case 'login-x509-info.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/login-x509-info'
+            ).then(c => c.LoginX509InfoComponent);
+            break;
+        case 'webauthn-error.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/webauthn-error'
+            ).then(c => c.WebauthnErrorComponent);
+            break;
+        case 'login-passkeys-conditional-authenticate.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/login-passkeys-conditional-authenticate'
+            ).then(c => c.LoginPasskeysConditionalAuthenticateComponent);
+            break;
+        case 'login-idp-link-confirm-override.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/login/pages/login-idp-link-confirm-override'
+            ).then(c => c.LoginIdpLinkConfirmOverrideComponent);
+            break;
+    }
+    return ComponentBootstrapPromise?.then(ComponentBootstrap => ({
+        ComponentBootstrap,
+        doMakeUserConfirmPassword,
+        doUseDefaultCss,
+        classes
+    }));
+};
+
+export { DefaultPage };

package/src/login/KcContext.ts

@@ -0,0 +1 @@
+export type { KcContext } from 'keycloakify/login/KcContext';

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

@@ -1,9 +1,9 @@
 @let idPostfix = attribute()?.name ?? '' + '-' + (fieldIndex() ?? 0 + 1);
 @if (hasRemove()) {
     <button
-        [id]="'kc-remove-' + idPostfix"
         type="button"
         class="pf-c-button pf-m-inline pf-m-link"
+        [id]="'kc-remove-' + idPostfix"
         (click)="onRemove()"
     >
         {{ i18n.msgStr('remove') }}
@@ -14,9 +14,9 @@
 }
 @if (hasAdd()) {
     <button
-        [id]="'kc-add-' + idPostfix"
         type="button"
         class="pf-c-button pf-m-inline pf-m-link"
+        [id]="'kc-add-' + idPostfix"
         (click)="onAdd()"
     >
         {{ i18n.msgStr('addValue') }}

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

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

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

@@ -1,8 +1,8 @@
 @let index = fieldIndex();
 <span
+    aria-live="polite"
     [id]="'input-error-' + attribute.name + (index === undefined ? '' : '-' + index)"
     [kcClass]="'kcInputErrorMessageClass'"
-    aria-live="polite"
 >
     @for (error of displayableErrors(); track error; let i = $index) {
         @if (error.fieldIndex === index) {

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

@@ -7,7 +7,7 @@ import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes';
 import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n';
 import { type Attribute } from 'keycloakify/login/KcContext';
 import type { ClassKey } from 'keycloakify/login/lib/kcClsx';
-import type { I18n } from '@keycloakify/angular/login/i18n';
+import type { I18n } from '../../i18n';
 
 @Component({
     standalone: true,

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

@@ -8,7 +8,7 @@
                 [value]="$any(valueOrValues())"
                 [displayableErrors]="displayableErrors()"
                 (dispatchFormAction)="dispatchFormAction.emit($event)"
-            ></kc-textarea-tag>
+            />
         }
         @case (type === 'select' || type === 'multiselect' ? type : '') {
             <kc-select-tag
@@ -16,7 +16,7 @@
                 [valueOrValues]="valueOrValues()"
                 [displayableErrors]="displayableErrors()"
                 (dispatchFormAction)="dispatchFormAction.emit($event)"
-            ></kc-select-tag>
+            />
         }
         @case (type === 'select-radiobuttons' || type === 'multiselect-checkboxes' ? type : '') {
             <kc-input-tag-selects
@@ -24,7 +24,7 @@
                 [valueOrValues]="valueOrValues()"
                 [displayableErrors]="displayableErrors()"
                 (dispatchFormAction)="dispatchFormAction.emit($event)"
-            ></kc-input-tag-selects>
+            />
         }
         @default {
             @let values = valueOrValues();
@@ -37,7 +37,7 @@
                         [fieldIndex]="i"
                         [displayableErrors]="displayableErrors()"
                         (dispatchFormAction)="dispatchFormAction.emit($event)"
-                    ></kc-input-tag>
+                    />
                 }
             } @else {
                 @if (attr.name === 'password' || attr.name === 'password-confirm') {
@@ -47,7 +47,7 @@
                             [valueOrValues]="valueOrValues()"
                             [displayableErrors]="displayableErrors()"
                             (dispatchFormAction)="dispatchFormAction.emit($event)"
-                        ></kc-input-tag>
+                        />
                     </kc-password-wrapper>
                 } @else {
                     <kc-input-tag
@@ -55,7 +55,7 @@
                         [valueOrValues]="valueOrValues()"
                         [displayableErrors]="displayableErrors()"
                         (dispatchFormAction)="dispatchFormAction.emit($event)"
-                    ></kc-input-tag>
+                    />
                 }
             }
         }

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

@@ -34,12 +34,12 @@
             [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

@@ -8,7 +8,7 @@ import { ComponentReference } from '@keycloakify/angular/login/classes/component
 import { AddRemoveButtonsMultiValuedAttributeComponent } from '@keycloakify/angular/login/components/add-remove-buttons-multi-valued-attribute';
 import { FieldErrorsComponent } from '@keycloakify/angular/login/components/field-errors';
 import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class';
-import type { I18n } from '@keycloakify/angular/login/i18n';
+import type { I18n } from '../../i18n';
 import { FormAction, FormFieldError } from '@keycloakify/angular/login/services/user-profile-form';
 import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes';
 import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n';

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

@@ -7,7 +7,7 @@ import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes';
 import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n';
 import { type Attribute } from 'keycloakify/login/KcContext';
 import type { ClassKey } from 'keycloakify/login/lib/kcClsx';
-import type { I18n } from '@keycloakify/angular/login/i18n';
+import type { I18n } from '../../i18n';
 
 @Component({
     standalone: true,

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

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

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

@@ -1,5 +1,5 @@
 <div [kcClass]="'kcInputGroup'">
-    <ng-content></ng-content>
+    <ng-content />
     <button
         type="button"
         [kcClass]="'kcFormPasswordVisibilityButtonClass'"
@@ -8,8 +8,8 @@
         (click)="togglePasswordVisibility()"
     >
         <i
-            [kcClass]="isPasswordRevealed() ? 'kcFormPasswordVisibilityIconHide' : 'kcFormPasswordVisibilityIconShow'"
             aria-hidden="true"
+            [kcClass]="isPasswordRevealed() ? 'kcFormPasswordVisibilityIconHide' : 'kcFormPasswordVisibilityIconShow'"
         ></i>
     </button>
 </div>

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

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

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

@@ -8,7 +8,7 @@ import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes';
 import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n';
 import { type Attribute } from 'keycloakify/login/KcContext';
 import type { ClassKey } from 'keycloakify/login/lib/kcClsx';
-import type { I18n } from '@keycloakify/angular/login/i18n';
+import type { I18n } from '../../i18n';
 
 @Component({
     standalone: true,

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

@@ -1,7 +1,7 @@
 @let formFieldStates = formState().formFieldStates;
 
 @for (fieldState of formFieldStates; track fieldState.attribute) {
-    <kc-group-label [attribute]="fieldState.attribute"> </kc-group-label>
+    <kc-group-label [attribute]="fieldState.attribute" />
 
     @if (beforeField) {
         <ng-container
@@ -11,8 +11,7 @@
                 valueOrValues: fieldState.valueOrValues,
                 displayableErrors: fieldState.displayableErrors
             }"
-        >
-        </ng-container>
+        />
     }
 
     <div
@@ -34,9 +33,9 @@
         <div [kcClass]="'kcInputWrapperClass'">
             @if (fieldState.attribute.annotations.inputHelperTextBefore) {
                 <div
+                    aria-live="polite"
                     [kcClass]="'kcInputHelperTextBeforeClass'"
                     [id]="'form-help-text-before-' + fieldState.attribute.name"
-                    aria-live="polite"
                 >
                     {{ i18n.advancedMsgStr(fieldState.attribute.annotations.inputHelperTextBefore) }}
                 </div>
@@ -47,19 +46,17 @@
                 [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
+                    aria-live="polite"
                     [kcClass]="'kcInputHelperTextAfterClass'"
                     [id]="'form-help-text-after-' + fieldState.attribute.name"
-                    aria-live="polite"
                 >
                     {{ i18n.advancedMsgStr(fieldState.attribute.annotations.inputHelperTextAfter) }}
                 </div>
@@ -73,8 +70,7 @@
                         valueOrValues: fieldState.valueOrValues,
                         displayableErrors: fieldState.displayableErrors
                     }"
-                >
-                </ng-container>
+                />
             }
             <!-- NOTE: Downloading of html5DataAnnotations scripts is done in the useUserProfileForm hook -->
         </div>

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

@@ -6,8 +6,8 @@ import { FieldErrorsComponent } from '@keycloakify/angular/login/components/fiel
 import { GroupLabelComponent } from '@keycloakify/angular/login/components/group-label';
 import { InputFieldByTypeComponent } from '@keycloakify/angular/login/components/input-field-by-type';
 import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class';
-import type { I18n } from '@keycloakify/angular/login/i18n';
-import type { KcContext } from '@keycloakify/angular/login/KcContext';
+import type { I18n } from '../../i18n';
+import type { KcContext } from '../../KcContext';
 import { SubmitService } from '@keycloakify/angular/login/services/submit';
 import { type FormAction, UserProfileFormService } from '@keycloakify/angular/login/services/user-profile-form';
 import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes';

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

@@ -33,16 +33,16 @@
                         >
                             <div
                                 id="kc-locale-dropdown"
-                                [kcClass]="'kcLocaleDropDownClass'"
                                 class="menu-button-links"
+                                [kcClass]="'kcLocaleDropDownClass'"
                             >
                                 <button
                                     tabindex="1"
                                     id="kc-current-locale-link"
-                                    [attr.aria-label]="i18n.msgStr('languages')"
                                     aria-haspopup="true"
                                     aria-expanded="false"
                                     aria-controls="language-switch1"
+                                    [attr.aria-label]="i18n.msgStr('languages')"
                                 >
                                     {{ i18n.currentLanguage.label }}
                                 </button>
@@ -56,8 +56,8 @@
                                 >
                                     @for (entry of i18n.enabledLanguages; track entry; let idx = $index) {
                                         <li
-                                            [kcClass]="'kcLocaleListItemClass'"
                                             role="none"
+                                            [kcClass]="'kcLocaleListItemClass'"
                                         >
                                             <a
                                                 role="menuitem"
@@ -80,7 +80,7 @@
                 <ng-template #node>
                     @if (auth && !auth.showUsername && !auth.showResetCredentials) {
                         <h1 id="kc-page-title">
-                            <ng-content select="[headerNode]"></ng-content>
+                            <ng-content select="[headerNode]" />
                         </h1>
                     } @else {
                         <div
@@ -107,8 +107,8 @@
                 @if (displayRequiredFields()) {
                     <div [kcClass]="'kcContentWrapperClass'">
                         <div
-                            [kcClass]="'kcLabelWrapperClass'"
                             class="subtitle"
+                            [kcClass]="'kcLabelWrapperClass'"
                         >
                             <span class="subtitle">
                                 <span class="required">*</span>
@@ -116,11 +116,11 @@
                             </span>
                         </div>
                         <div class="col-md-10">
-                            <ng-container [ngTemplateOutlet]="node"></ng-container>
+                            <ng-container [ngTemplateOutlet]="node" />
                         </div>
                     </div>
                 } @else {
-                    <ng-container [ngTemplateOutlet]="node"></ng-container>
+                    <ng-container [ngTemplateOutlet]="node" />
                 }
             </header>
 
@@ -156,12 +156,12 @@
                         </div>
                     }
                     <!-- Content -->
-                    <ng-content select="[content]"></ng-content>
+                    <ng-content select="[content]" />
                     @if (!!auth && auth?.showTryAnotherWayLink) {
                         <form
                             id="kc-select-try-another-way-form"
-                            [action]="url?.loginAction"
                             method="post"
+                            [action]="url?.loginAction"
                         >
                             <div [kcClass]="'kcFormGroupClass'">
                                 <div [kcClass]="'kcFormGroupClass'">
@@ -181,7 +181,7 @@
                         </form>
                     }
 
-                    <ng-content select="[socialProvidersNode]"></ng-content>
+                    <ng-content select="[socialProvidersNode]" />
                     <!-- Info display -->
                     @if (displayInfo()) {
                         <div
@@ -192,7 +192,7 @@
                                 id="kc-info-wrapper"
                                 [kcClass]="'kcInfoAreaWrapperClass'"
                             >
-                                <ng-content select="[infoNode]"></ng-content>
+                                <ng-content select="[infoNode]" />
                             </div>
                         </div>
                     }

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

@@ -11,8 +11,8 @@ import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n';
 import { KC_LOGIN_CONTEXT } from '@keycloakify/angular/login/tokens/kc-context';
 import { type ClassKey, getKcClsx } from 'keycloakify/login/lib/kcClsx';
 import { Observable } from 'rxjs';
-import type { I18n } from '@keycloakify/angular/login/i18n';
-import { KcContext } from '@keycloakify/angular/login/KcContext';
+import type { I18n } from '../../i18n';
+import { KcContext } from '../../KcContext';
 
 @Component({
     selector: 'kc-login-template',

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

@@ -10,9 +10,8 @@ import {
     Renderer2,
     ɵstringify as stringify
 } from '@angular/core';
-import type { ClassKey } from 'keycloakify/login/lib/kcClsx';
-import { getKcClsx } from 'keycloakify/login/lib/kcClsx';
 import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference';
+import { type ClassKey, getKcClsx } from 'keycloakify/login/lib/kcClsx';
 
 interface CssClassState {
     // PERF: could use a bit mask to represent state as all fields are boolean flags

package/src/login/i18n.ts

@@ -0,0 +1,4 @@
+import type { GenericI18n_noJsx } from 'keycloakify/login/i18n/noJsx/GenericI18n_noJsx';
+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

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

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

@@ -6,9 +6,9 @@
     </ng-container>
     <ng-container content>
         <form
-            [action]="url.loginAction"
             method="post"
             class="form-actions"
+            [action]="url.loginAction"
         >
             <div
                 class="alert alert-warning"
@@ -27,17 +27,17 @@
             </p>
             <div id="kc-form-buttons">
                 <input
-                    [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']"
                     type="submit"
+                    [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']"
                     [value]="i18n.msgStr('doConfirmDelete')"
                 />
                 @if (triggered_from_aia) {
                     <button
-                        [kcClass]="['kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass']"
                         style="margin-left: calc(100% - 220px)"
                         type="submit"
                         name="cancel-aia"
                         value="true"
+                        [kcClass]="['kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass']"
                     >
                         {{ i18n.msgStr('doCancel') }}
                     </button>