@keycloakify/angular 20.1.9 → 20.1.10

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@keycloakify/angular",
   "type": "module",
-  "version": "20.1.9",
+  "version": "20.1.10",
   "peerDependencies": {
     "keycloakify": "^11.9.3",
     "@angular/core": "^20.0.0",
@@ -174,14 +174,14 @@
       "types": "./login/components/field-errors/index.d.ts",
       "default": "./fesm2022/keycloakify-angular-login-components-field-errors.mjs"
     },
-    "./login/components/group-label": {
-      "types": "./login/components/group-label/index.d.ts",
-      "default": "./fesm2022/keycloakify-angular-login-components-group-label.mjs"
-    },
     "./login/components/input-field-by-type": {
       "types": "./login/components/input-field-by-type/index.d.ts",
       "default": "./fesm2022/keycloakify-angular-login-components-input-field-by-type.mjs"
     },
+    "./login/components/group-label": {
+      "types": "./login/components/group-label/index.d.ts",
+      "default": "./fesm2022/keycloakify-angular-login-components-group-label.mjs"
+    },
     "./login/components/input-tag": {
       "types": "./login/components/input-tag/index.d.ts",
       "default": "./fesm2022/keycloakify-angular-login-components-input-tag.mjs"
@@ -214,6 +214,10 @@
       "types": "./login/directives/kc-class/index.d.ts",
       "default": "./fesm2022/keycloakify-angular-login-directives-kc-class.mjs"
     },
+    "./login/providers/keycloakify-angular": {
+      "types": "./login/providers/keycloakify-angular/index.d.ts",
+      "default": "./fesm2022/keycloakify-angular-login-providers-keycloakify-angular.mjs"
+    },
     "./login/pages/code": {
       "types": "./login/pages/code/index.d.ts",
       "default": "./fesm2022/keycloakify-angular-login-pages-code.mjs"
@@ -266,14 +270,14 @@
       "types": "./login/pages/login-oauth-grant/index.d.ts",
       "default": "./fesm2022/keycloakify-angular-login-pages-login-oauth-grant.mjs"
     },
-    "./login/pages/login-oauth2-device-verify-user-code": {
-      "types": "./login/pages/login-oauth2-device-verify-user-code/index.d.ts",
-      "default": "./fesm2022/keycloakify-angular-login-pages-login-oauth2-device-verify-user-code.mjs"
-    },
     "./login/pages/login-otp": {
       "types": "./login/pages/login-otp/index.d.ts",
       "default": "./fesm2022/keycloakify-angular-login-pages-login-otp.mjs"
     },
+    "./login/pages/login-oauth2-device-verify-user-code": {
+      "types": "./login/pages/login-oauth2-device-verify-user-code/index.d.ts",
+      "default": "./fesm2022/keycloakify-angular-login-pages-login-oauth2-device-verify-user-code.mjs"
+    },
     "./login/pages/login-page-expired": {
       "types": "./login/pages/login-page-expired/index.d.ts",
       "default": "./fesm2022/keycloakify-angular-login-pages-login-page-expired.mjs"
@@ -326,14 +330,14 @@
       "types": "./login/pages/logout-confirm/index.d.ts",
       "default": "./fesm2022/keycloakify-angular-login-pages-logout-confirm.mjs"
     },
-    "./login/pages/register": {
-      "types": "./login/pages/register/index.d.ts",
-      "default": "./fesm2022/keycloakify-angular-login-pages-register.mjs"
-    },
     "./login/pages/saml-post-form": {
       "types": "./login/pages/saml-post-form/index.d.ts",
       "default": "./fesm2022/keycloakify-angular-login-pages-saml-post-form.mjs"
     },
+    "./login/pages/register": {
+      "types": "./login/pages/register/index.d.ts",
+      "default": "./fesm2022/keycloakify-angular-login-pages-register.mjs"
+    },
     "./login/pages/select-authenticator": {
       "types": "./login/pages/select-authenticator/index.d.ts",
       "default": "./fesm2022/keycloakify-angular-login-pages-select-authenticator.mjs"
@@ -358,10 +362,6 @@
       "types": "./login/pages/webauthn-register/index.d.ts",
       "default": "./fesm2022/keycloakify-angular-login-pages-webauthn-register.mjs"
     },
-    "./login/providers/keycloakify-angular": {
-      "types": "./login/providers/keycloakify-angular/index.d.ts",
-      "default": "./fesm2022/keycloakify-angular-login-providers-keycloakify-angular.mjs"
-    },
     "./login/services/i18n": {
       "types": "./login/services/i18n/index.d.ts",
       "default": "./fesm2022/keycloakify-angular-login-services-i18n.mjs"

package/src/account/i18n.ts

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

package/src/account/pages/account/account.component.html

@@ -27,7 +27,7 @@
     @if (!realm.registrationEmailAsUsername) {
         <div
             class="form-group"
-            [ngClass]="{ 'has-error': messagesPerField.existsError('username') }"
+            [class.has-error]="messagesPerField.existsError('username')"
         >
             <div class="col-sm-2 col-md-2">
                 <label
@@ -56,7 +56,7 @@
 
     <div
         class="form-group"
-        [ngClass]="{ 'has-error': messagesPerField.existsError('email') }"
+        [class.has-error]="messagesPerField.existsError('email')"
     >
         <div class="col-sm-2 col-md-2">
             <label
@@ -82,7 +82,7 @@
 
     <div
         class="form-group"
-        [ngClass]="{ 'has-error': messagesPerField.existsError('firstName') }"
+        [class.has-error]="messagesPerField.existsError('firstName')"
     >
         <div class="col-sm-2 col-md-2">
             <label
@@ -107,7 +107,7 @@
 
     <div
         class="form-group"
-        [ngClass]="{ 'has-error': messagesPerField.existsError('lastName') }"
+        [class.has-error]="messagesPerField.existsError('lastName')"
     >
         <div class="col-sm-2 col-md-2">
             <label

package/src/account/pages/account/account.component.ts

@@ -1,5 +1,4 @@
-import { NgClass } from '@angular/common';
-import { Component, forwardRef, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, forwardRef, inject } from '@angular/core';
 import { ComponentReference } from '@keycloakify/angular/account/classes/component-reference';
 import { KcClassDirective } from '@keycloakify/angular/account/directives/kc-class';
 import type { I18n } from '@keycloakify/angular/account/i18n';
@@ -12,9 +11,10 @@ import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css
 import type { ClassKey } from 'keycloakify/account';
 
 @Component({
-    imports: [NgClass, KcClassDirective, KcSanitizePipe],
+    imports: [KcClassDirective, KcSanitizePipe],
     selector: 'kc-account',
     templateUrl: 'account.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [
         {
             provide: ComponentReference,

package/src/account/pages/applications/applications.component.ts

@@ -1,5 +1,5 @@
-import { KeyValuePipe, NgClass } from '@angular/common';
-import { Component, forwardRef, inject } from '@angular/core';
+import { KeyValuePipe } from '@angular/common';
+import { ChangeDetectionStrategy, Component, forwardRef, inject } from '@angular/core';
 import { ComponentReference } from '@keycloakify/angular/account/classes/component-reference';
 import { KcClassDirective } from '@keycloakify/angular/account/directives/kc-class';
 import type { I18n } from '@keycloakify/angular/account/i18n';
@@ -12,9 +12,10 @@ import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css
 import type { ClassKey } from 'keycloakify/account';
 
 @Component({
-    imports: [KcClassDirective, NgClass, KeyValuePipe, IsArrayWithEmptyObjectPipe],
+    imports: [KcClassDirective, KeyValuePipe, IsArrayWithEmptyObjectPipe],
     selector: 'kc-applications',
     templateUrl: 'applications.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [
         {
             provide: ComponentReference,

package/src/account/pages/federatedIdentity/federatedIdentity.component.ts

@@ -1,7 +1,5 @@
-import { NgClass } from '@angular/common';
-import { Component, forwardRef, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, forwardRef, inject } from '@angular/core';
 import { ComponentReference } from '@keycloakify/angular/account/classes/component-reference';
-import { KcClassDirective } from '@keycloakify/angular/account/directives/kc-class';
 import type { I18n } from '@keycloakify/angular/account/i18n';
 import type { KcContext } from '@keycloakify/angular/account/KcContext';
 import { ACCOUNT_CLASSES } from '@keycloakify/angular/account/tokens/classes';
@@ -11,9 +9,9 @@ import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css
 import type { ClassKey } from 'keycloakify/account';
 
 @Component({
-    imports: [KcClassDirective, NgClass],
     selector: 'kc-federated-identity',
     templateUrl: 'federatedIdentity.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [
         {
             provide: ComponentReference,

package/src/account/pages/log/log.component.ts

@@ -1,5 +1,5 @@
-import { DatePipe, NgClass } from '@angular/common';
-import { Component, forwardRef, inject } from '@angular/core';
+import { DatePipe } from '@angular/common';
+import { ChangeDetectionStrategy, Component, forwardRef, inject } from '@angular/core';
 import { ComponentReference } from '@keycloakify/angular/account/classes/component-reference';
 import { KcClassDirective } from '@keycloakify/angular/account/directives/kc-class';
 import type { I18n } from '@keycloakify/angular/account/i18n';
@@ -11,9 +11,10 @@ import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css
 import type { ClassKey } from 'keycloakify/account';
 
 @Component({
-    imports: [KcClassDirective, NgClass, DatePipe],
+    imports: [KcClassDirective, DatePipe],
     selector: 'kc-log',
     templateUrl: 'log.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [
         {
             provide: ComponentReference,

package/src/account/pages/password/password.component.ts

@@ -1,5 +1,4 @@
-import { NgClass } from '@angular/common';
-import { Component, forwardRef, inject, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, forwardRef, inject, signal } from '@angular/core';
 import { ComponentReference } from '@keycloakify/angular/account/classes/component-reference';
 import { KcClassDirective } from '@keycloakify/angular/account/directives/kc-class';
 import type { I18n } from '@keycloakify/angular/account/i18n';
@@ -11,9 +10,10 @@ import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css
 import type { ClassKey } from 'keycloakify/account';
 
 @Component({
-    imports: [KcClassDirective, NgClass],
+    imports: [KcClassDirective],
     selector: 'kc-password',
     templateUrl: 'password.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [
         {
             provide: ComponentReference,

package/src/account/pages/sessions/sessions.component.ts

@@ -1,5 +1,4 @@
-import { NgClass } from '@angular/common';
-import { Component, forwardRef, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, forwardRef, inject } from '@angular/core';
 import { ComponentReference } from '@keycloakify/angular/account/classes/component-reference';
 import { KcClassDirective } from '@keycloakify/angular/account/directives/kc-class';
 import type { I18n } from '@keycloakify/angular/account/i18n';
@@ -11,9 +10,10 @@ import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css
 import type { ClassKey } from 'keycloakify/account';
 
 @Component({
-    imports: [KcClassDirective, NgClass],
+    imports: [KcClassDirective],
     selector: 'kc-sessions',
     templateUrl: 'sessions.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [
         {
             provide: ComponentReference,

package/src/account/pages/totp/totp.component.ts

@@ -1,5 +1,4 @@
-import { NgClass } from '@angular/common';
-import { Component, forwardRef, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, forwardRef, inject } from '@angular/core';
 import { ComponentReference } from '@keycloakify/angular/account/classes/component-reference';
 import { KcClassDirective } from '@keycloakify/angular/account/directives/kc-class';
 import type { I18n } from '@keycloakify/angular/account/i18n';
@@ -12,9 +11,10 @@ import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css
 import type { ClassKey } from 'keycloakify/account';
 
 @Component({
-    imports: [KcClassDirective, KcSanitizePipe, NgClass],
+    imports: [KcClassDirective, KcSanitizePipe],
     selector: 'kc-totp',
     templateUrl: 'totp.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [
         {
             provide: ComponentReference,

package/src/account/providers/keycloakify-angular/keycloakify-angular.providers.ts

@@ -11,7 +11,7 @@ import { ACCOUNT_CLASSES } from '@keycloakify/angular/account/tokens/classes';
 import { ACCOUNT_I18N } from '@keycloakify/angular/account/tokens/i18n';
 import { KC_ACCOUNT_CONTEXT } from '@keycloakify/angular/account/tokens/kc-context';
 import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css';
-import { type KcContextLike } from 'keycloakify/account/i18n/noJsx';
+import type { KcContextLike } from 'keycloakify/account/i18n/noJsx';
 import type { ClassKey } from 'keycloakify/account/lib/kcClsx';
 
 export type KeycloakifyAngularAccountConfig = {
@@ -39,7 +39,7 @@ export const provideKeycloakifyAngular = (config: KeycloakifyAngularAccountConfi
         },
         provideAppInitializer(() => {
             const i18nService: I18nService = inject(I18nService);
-            const kcContext: KcContext = inject(KC_ACCOUNT_CONTEXT);
+            const kcContext = inject<KcContext>(KC_ACCOUNT_CONTEXT);
             const getI18n = config.getI18n;
 
             const { i18n, prI18n_currentLanguage } = getI18n({

package/src/account/template/template.component.html

@@ -66,35 +66,35 @@
     <div class="container">
         <div class="bs-sidebar col-sm-3">
             <ul>
-                <li [ngClass]="{ active: active === 'account' }">
+                <li [class.active]="active === 'account'">
                     <a [href]="url.accountUrl">{{ i18n.msgStr('account') }}</a>
                 </li>
                 @if (features.passwordUpdateSupported) {
-                    <li [ngClass]="{ active: active === 'password' }">
+                    <li [class.active]="active === 'password'">
                         <a [href]="url.passwordUrl">{{ i18n.msgStr('password') }}</a>
                     </li>
                 }
-                <li [ngClass]="{ active: active === 'totp' }">
+                <li [class.active]="active === 'totp'">
                     <a [href]="url.totpUrl">{{ i18n.msgStr('authenticator') }}</a>
                 </li>
                 @if (features.identityFederation) {
-                    <li [ngClass]="{ active: active === 'social' }">
+                    <li [class.active]="active === 'social'">
                         <a [href]="url.socialUrl">{{ i18n.msgStr('federatedIdentity') }}</a>
                     </li>
                 }
-                <li [ngClass]="{ active: active === 'sessions' }">
+                <li [class.active]="active === 'sessions'">
                     <a [href]="url.sessionsUrl">{{ i18n.msgStr('sessions') }}</a>
                 </li>
-                <li [ngClass]="{ active: active === 'applications' }">
+                <li [class.active]="active === 'applications'">
                     <a [href]="url.applicationsUrl">{{ i18n.msgStr('applications') }}</a>
                 </li>
                 @if (features.log) {
-                    <li [ngClass]="{ active: active === 'log' }">
+                    <li [class.active]="active === 'log'">
                         <a [href]="url.logUrl">{{ i18n.msgStr('log') }}</a>
                     </li>
                 }
                 @if (realm.userManagedAccessAllowed && features.authorization) {
-                    <li [ngClass]="{ active: active === 'authorization' }">
+                    <li [class.active]="active === 'authorization'">
                         <a [href]="url.resourceUrl">{{ i18n.msgStr('myResources') }}</a>
                     </li>
                 }

package/src/account/template/template.component.ts

@@ -15,7 +15,6 @@ import {
 } from '@angular/core';
 import { Meta, Title } from '@angular/platform-browser';
 import { ComponentReference } from '@keycloakify/angular/account/classes/component-reference';
-import { KcClassDirective } from '@keycloakify/angular/account/directives/kc-class';
 import type { I18n } from '@keycloakify/angular/account/i18n';
 import type { KcContext } from '@keycloakify/angular/account/KcContext';
 import { AccountResourceInjectorService } from '@keycloakify/angular/account/services/account-resource-injector';
@@ -32,7 +31,7 @@ type ActiveType = 'account' | 'password' | 'totp' | 'social' | 'sessions' | 'app
 @Component({
     selector: 'kc-root',
     templateUrl: 'template.component.html',
-    imports: [AsyncPipe, KcSanitizePipe, KcClassDirective, NgClass],
+    imports: [AsyncPipe, KcSanitizePipe, NgClass],
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [
         {

package/src/bin/initialize-account-theme/boilerplate/KcPageStory.ts

@@ -1,5 +1,6 @@
 /* eslint-disable @angular-eslint/component-class-suffix */
 import { Component, inject, OnInit, Type } from '@angular/core';
+import type { KcContext } from '@keycloakify/angular/account/KcContext';
 import { provideKeycloakifyAngular } from '@keycloakify/angular/account/providers/keycloakify-angular';
 import { TemplateComponent } from '@keycloakify/angular/account/template';
 import { getKcPage } from './KcPage';
@@ -54,7 +55,7 @@ export const decorators = (_: unknown, context: StoryContextLike) => ({
 })
 export class KcPageStory implements OnInit {
     pageComponent: Type<unknown> | undefined;
-    kcContext = inject(KC_ACCOUNT_CONTEXT);
+    kcContext = inject<KcContext>(KC_ACCOUNT_CONTEXT);
     ngOnInit() {
         getKcPage(this.kcContext.pageId).then(kcPage => {
             this.pageComponent = kcPage.PageComponent;

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

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, computed, inject, input, output } from '@angular/core';
 import { getButtonToDisplayForMultivaluedAttributeField, 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 { Attribute } from 'keycloakify/login/KcContext';
 import type { I18n } from '@keycloakify/angular/login/i18n';
 
 @Component({
@@ -12,7 +12,6 @@ import type { I18n } from '@keycloakify/angular/login/i18n';
             }
         `
     ],
-    imports: [],
     selector: 'kc-add-remove-buttons-multi-valued-attribute',
     templateUrl: 'add-remove-buttons-multi-valued-attribute.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush

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

@@ -2,9 +2,9 @@ import { ChangeDetectionStrategy, Component, forwardRef, inject, input } from '@
 import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css';
 import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference';
 import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class';
-import { type FormFieldError } from '@keycloakify/angular/login/services/user-profile-form';
+import type { FormFieldError } from '@keycloakify/angular/login/services/user-profile-form';
 import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes';
-import { type Attribute } from 'keycloakify/login/KcContext';
+import type { Attribute } from 'keycloakify/login/KcContext';
 import type { ClassKey } from 'keycloakify/login/lib/kcClsx';
 
 @Component({

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

@@ -5,7 +5,7 @@ import { AttributesDirective } from '@keycloakify/angular/lib/directives/attribu
 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 Attribute } from 'keycloakify/login/KcContext';
+import type { Attribute } from 'keycloakify/login/KcContext';
 import type { ClassKey } from 'keycloakify/login/lib/kcClsx';
 import type { I18n } from '@keycloakify/angular/login/i18n';
 

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

@@ -9,7 +9,7 @@ import { SelectTagComponent } from '@keycloakify/angular/login/components/select
 import { TextareaTagComponent } from '@keycloakify/angular/login/components/textarea-tag';
 import { FormAction, FormFieldError } from '@keycloakify/angular/login/services/user-profile-form';
 import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes';
-import { type Attribute } from 'keycloakify/login/KcContext';
+import type { Attribute } from 'keycloakify/login/KcContext';
 import type { ClassKey } from 'keycloakify/login/lib/kcClsx';
 
 @Component({

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

@@ -12,7 +12,7 @@ import type { I18n } from '@keycloakify/angular/login/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';
-import { type Attribute } from 'keycloakify/login/KcContext';
+import type { Attribute } from 'keycloakify/login/KcContext';
 import type { ClassKey } from 'keycloakify/login/lib/kcClsx';
 
 @Component({

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

@@ -2,10 +2,10 @@ import { ChangeDetectionStrategy, Component, computed, forwardRef, inject, input
 import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css';
 import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference';
 import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class';
-import { type FormAction, type FormFieldError } from '@keycloakify/angular/login/services/user-profile-form';
+import type { 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';
-import { type Attribute } from 'keycloakify/login/KcContext';
+import type { Attribute } from 'keycloakify/login/KcContext';
 import type { ClassKey } from 'keycloakify/login/lib/kcClsx';
 import type { I18n } from '@keycloakify/angular/login/i18n';
 

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

@@ -1,4 +1,3 @@
-import { AsyncPipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, forwardRef, inject, input, Renderer2, signal, WritableSignal } from '@angular/core';
 import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css';
 import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference';
@@ -18,7 +17,7 @@ import type { I18n } from '@keycloakify/angular/login/i18n';
         `
     ],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    imports: [KcClassDirective, AsyncPipe],
+    imports: [KcClassDirective],
     templateUrl: 'password-wrapper.component.html',
     providers: [
         {

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

@@ -3,10 +3,10 @@ import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css
 import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference';
 import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class';
 import { ToNumberPipe } from '@keycloakify/angular/lib/pipes/to-number';
-import { type FormAction, type FormFieldError } from '@keycloakify/angular/login/services/user-profile-form';
+import type { 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';
-import { type Attribute } from 'keycloakify/login/KcContext';
+import type { Attribute } from 'keycloakify/login/KcContext';
 import type { ClassKey } from 'keycloakify/login/lib/kcClsx';
 import type { I18n } from '@keycloakify/angular/login/i18n';
 

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

@@ -3,9 +3,9 @@ import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css
 import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference';
 import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class';
 import { ToNumberPipe } from '@keycloakify/angular/lib/pipes/to-number';
-import { type FormAction, type FormFieldError } from '@keycloakify/angular/login/services/user-profile-form';
+import type { FormAction, FormFieldError } from '@keycloakify/angular/login/services/user-profile-form';
 import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes';
-import { type Attribute } from 'keycloakify/login/KcContext';
+import type { Attribute } from 'keycloakify/login/KcContext';
 import type { ClassKey } from 'keycloakify/login/lib/kcClsx';
 
 @Component({

package/src/login/i18n.ts

@@ -1,4 +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';
+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/login/login.component.ts

@@ -1,4 +1,4 @@
-import { AsyncPipe, CommonModule, NgClass } from '@angular/common';
+import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, Component, forwardRef, inject, signal, type TemplateRef, viewChild } from '@angular/core';
 import { KcSanitizePipe } from '@keycloakify/angular/lib/pipes/kc-sanitize';
 import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css';
@@ -16,7 +16,7 @@ import type { ClassKey } from 'keycloakify/login/lib/kcClsx';
     selector: 'kc-login',
     templateUrl: 'login.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
-    imports: [KcClassDirective, AsyncPipe, KcSanitizePipe, PasswordWrapperComponent, NgClass, CommonModule],
+    imports: [KcClassDirective, KcSanitizePipe, PasswordWrapperComponent, CommonModule],
     providers: [
         {
             provide: ComponentReference,

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

@@ -1,13 +1,11 @@
 import { ChangeDetectionStrategy, Component, forwardRef, inject, type TemplateRef, viewChild } from '@angular/core';
 import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference';
-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 { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n';
 import { KC_LOGIN_CONTEXT } from '@keycloakify/angular/login/tokens/kc-context';
 
 @Component({
-    imports: [KcClassDirective],
     selector: 'kc-login-idp-link-email',
     templateUrl: 'login-idp-link-email.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -9,7 +9,6 @@ import { KC_LOGIN_CONTEXT } from '@keycloakify/angular/login/tokens/kc-context';
 import type { ClassKey } from 'keycloakify/login/lib/kcClsx';
 
 @Component({
-    imports: [],
     selector: 'kc-login-page-expired',
     templateUrl: 'login-page-expired.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, forwardRef, inject, type TemplateRef, viewChild } from '@angular/core';
-import { type Script } from '@keycloakify/angular/lib/models/script';
+import type { Script } from '@keycloakify/angular/lib/models/script';
 import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css';
 import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference';
 import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class';

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

@@ -1,4 +1,3 @@
-import { AsyncPipe, NgClass } from '@angular/common';
 import { ChangeDetectionStrategy, Component, forwardRef, inject, signal, type TemplateRef, viewChild } from '@angular/core';
 import { KcSanitizePipe } from '@keycloakify/angular/lib/pipes/kc-sanitize';
 import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css';
@@ -15,7 +14,7 @@ import type { ClassKey } from 'keycloakify/login/lib/kcClsx';
     selector: 'kc-login-username',
     templateUrl: 'login-username.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
-    imports: [KcClassDirective, AsyncPipe, KcSanitizePipe, NgClass],
+    imports: [KcClassDirective, KcSanitizePipe],
     providers: [
         {
             provide: ComponentReference,

package/src/login/pages/login-verify-email/login-verify-email.component.ts

@@ -1,7 +1,6 @@
 import { ChangeDetectionStrategy, Component, forwardRef, inject, type TemplateRef, viewChild } from '@angular/core';
 import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css';
 import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference';
-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 { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes';
@@ -10,7 +9,6 @@ import { KC_LOGIN_CONTEXT } from '@keycloakify/angular/login/tokens/kc-context';
 import type { ClassKey } from 'keycloakify/login/lib/kcClsx';
 
 @Component({
-    imports: [KcClassDirective],
     selector: 'kc-login-verify-email',
     templateUrl: 'login-verify-email.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,

package/src/login/pages/saml-post-form/saml-post-form.component.ts

@@ -9,7 +9,6 @@ import { KC_LOGIN_CONTEXT } from '@keycloakify/angular/login/tokens/kc-context';
 import type { ClassKey } from 'keycloakify/login/lib/kcClsx';
 
 @Component({
-    imports: [],
     selector: 'kc-saml-post-form',
     templateUrl: 'saml-post-form.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,

package/src/login/pages/select-authenticator/select-authenticator.component.ts

@@ -1,4 +1,3 @@
-import { NgClass } from '@angular/common';
 import { ChangeDetectionStrategy, Component, forwardRef, inject, type TemplateRef, viewChild } from '@angular/core';
 import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css';
 import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference';
@@ -11,7 +10,7 @@ import { KC_LOGIN_CONTEXT } from '@keycloakify/angular/login/tokens/kc-context';
 import type { ClassKey } from 'keycloakify/login/lib/kcClsx';
 
 @Component({
-    imports: [KcClassDirective, NgClass],
+    imports: [KcClassDirective],
     selector: 'kc-select-authenticator',
     templateUrl: 'select-authenticator.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,