Update to angular 21

.github/workflows/ci.yaml

@@ -2,10 +2,10 @@ name: ci
 on:
   push:
     branches:
-      - main
+      - feature/next
   pull_request:
     branches:
-      - main
+      - feature/next
 
 jobs:
 

eslint.config.js

@@ -1,27 +1,43 @@
 // @ts-check
 import eslint from '@eslint/js';
-import tseslint from 'typescript-eslint';
 import angular from 'angular-eslint';
 import eslintConfigPrettier from 'eslint-config-prettier';
 import eslintPluginPrettier from 'eslint-plugin-prettier';
 import unusedImports from 'eslint-plugin-unused-imports';
+import { defineConfig } from 'eslint/config';
+import tseslint from 'typescript-eslint';
 
-export default tseslint.config(
+export default defineConfig(
     {
         ignores: ['src/bin/**/*'],
         files: ['**/*.ts'],
         plugins: {
             prettier: eslintPluginPrettier,
-            'unused-imports': unusedImports
+            'unused-imports': unusedImports,
+            '@typescript-eslint': tseslint.plugin
+        },
+        languageOptions: {
+            parser: tseslint.parser,
+            parserOptions: {
+                projectService: true
+            }
         },
         extends: [
             eslint.configs.recommended,
-            ...tseslint.configs.recommended,
-            ...tseslint.configs.stylistic,
-            ...angular.configs.tsRecommended
+            tseslint.configs.recommended,
+            tseslint.configs.stylistic,
+            angular.configs.tsRecommended
         ],
         processor: angular.processInlineTemplates,
         rules: {
+            '@typescript-eslint/consistent-type-imports': [
+                'error',
+                {
+                    disallowTypeAnnotations: true,
+                    fixStyle: 'inline-type-imports',
+                    prefer: 'type-imports'
+                }
+            ],
             'no-unused-vars': 'off',
             '@typescript-eslint/no-unused-vars': 'off',
             'unused-imports/no-unused-imports': 'error',
@@ -60,23 +76,15 @@ export default tseslint.config(
             '@angular-eslint/no-output-rename': 'off',
             '@angular-eslint/no-input-rename': 'off',
             ...eslintConfigPrettier.rules,
-            'prettier/prettier': [
-                'error',
-                {
-                    endOfLine: 'auto'
-                },
-                {
-                    usePrettierrc: true
-                }
-            ]
+            'prettier/prettier': ['error']
         }
     },
     {
         files: ['**/*.html'],
         plugins: {
             prettier: eslintPluginPrettier
         },
-        extends: [...angular.configs.templateRecommended],
+        extends: [angular.configs.templateRecommended],
         rules: {
             ...eslintConfigPrettier.rules,
             'prettier/prettier': ['error', { parser: 'angular' }]

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@keycloakify/angular",
-    "version": "20.1.12",
+    "version": "21.0.0-rc.2",
     "type": "module",
     "description": "Angular Components for Keycloakify",
     "repository": {
@@ -27,19 +27,20 @@
     ],
     "homepage": "https://www.keycloakify.dev",
     "devDependencies": {
-        "@angular/build": "^20.3.10",
-        "@angular/cli": "^20.3.10",
-        "@angular/common": "^20.3.12",
-        "@angular/compiler": "^20.3.12",
-        "@angular/compiler-cli": "^20.3.12",
-        "@angular/core": "^20.3.12",
-        "@angular/platform-browser": "^20.3.12",
+        "@angular/build": "^21.0.1",
+        "@angular/cli": "^21.0.1",
+        "@angular/common": "^21.0.1",
+        "@angular/compiler": "^21.0.1",
+        "@angular/compiler-cli": "^21.0.1",
+        "@angular/core": "^21.0.1",
+        "@angular/platform-browser": "^21.0.1",
         "@eslint/compat": "^2.0.0",
+        "@storybook/angular": "^10.1.2",
         "@types/node": "^24.10.1",
         "@vercel/ncc": "^0.38.4",
-        "angular-eslint": "^20.6.0",
+        "angular-eslint": "^21.0.1",
         "chalk": "^5.6.2",
-        "chokidar": "^4.0.3",
+        "chokidar": "^5.0.0",
         "cli-select": "^1.1.2",
         "conventional-changelog-cli": "^5.0.0",
         "cz-conventional-changelog": "^3.3.0",
@@ -48,15 +49,15 @@
         "eslint-plugin-prettier": "^5.5.4",
         "eslint-plugin-unused-imports": "^4.3.0",
         "husky": "^9.1.7",
-        "keycloakify": "^11.11.3",
-        "ng-packagr": "^20.3.2",
+        "keycloakify": "^11.13.0",
+        "ng-packagr": "^21.0.0",
         "npm-check-updates": "^19.1.2",
-        "prettier": "^3.6.2",
+        "prettier": "^3.7.3",
         "rxjs": "^7.8.2",
         "tslib": "^2.8.1",
         "tsx": "4.20.4",
         "typescript": "~5.9.3",
-        "typescript-eslint": "^8.46.4",
-        "zod": "^4.1.12"
+        "typescript-eslint": "^8.48.0",
+        "zod": "^4.1.13"
     }
 }

src/account/DefaultPage/DefaultPage.ts

@@ -1,6 +1,6 @@
-import { Type } from '@angular/core';
-import type { ClassKey } from 'keycloakify/account';
+import { type Type } from '@angular/core';
 import type { KcContext } from '@keycloakify/angular/account/KcContext';
+import type { ClassKey } from 'keycloakify/account';
 
 const DefaultPage = async (
     pageId: KcContext['pageId'],
@@ -15,39 +15,46 @@ const DefaultPage = async (
     let ComponentBootstrapPromise;
     switch (pageId) {
         case 'password.ftl':
-            ComponentBootstrapPromise = import(
-                '@keycloakify/angular/account/pages/password'
-            ).then(c => c.PasswordComponent);
+            ComponentBootstrapPromise =
+                import('@keycloakify/angular/account/pages/password').then(
+                    c => c.PasswordComponent
+                );
             break;
         case 'account.ftl':
-            ComponentBootstrapPromise = import(
-                '@keycloakify/angular/account/pages/account'
-            ).then(c => c.AccountComponent);
+            ComponentBootstrapPromise =
+                import('@keycloakify/angular/account/pages/account').then(
+                    c => c.AccountComponent
+                );
             break;
         case 'sessions.ftl':
-            ComponentBootstrapPromise = import(
-                '@keycloakify/angular/account/pages/sessions'
-            ).then(c => c.SessionsComponent);
+            ComponentBootstrapPromise =
+                import('@keycloakify/angular/account/pages/sessions').then(
+                    c => c.SessionsComponent
+                );
             break;
         case 'totp.ftl':
-            ComponentBootstrapPromise = import(
-                '@keycloakify/angular/account/pages/totp'
-            ).then(c => c.TotpComponent);
+            ComponentBootstrapPromise =
+                import('@keycloakify/angular/account/pages/totp').then(
+                    c => c.TotpComponent
+                );
             break;
         case 'applications.ftl':
-            ComponentBootstrapPromise = import(
-                '@keycloakify/angular/account/pages/applications'
-            ).then(c => c.ApplicationsComponent);
+            ComponentBootstrapPromise =
+                import('@keycloakify/angular/account/pages/applications').then(
+                    c => c.ApplicationsComponent
+                );
             break;
         case 'log.ftl':
-            ComponentBootstrapPromise = import(
-                '@keycloakify/angular/account/pages/log'
-            ).then(c => c.LogComponent);
+            ComponentBootstrapPromise =
+                import('@keycloakify/angular/account/pages/log').then(
+                    c => c.LogComponent
+                );
             break;
         case 'federatedIdentity.ftl':
-            ComponentBootstrapPromise = import(
-                '@keycloakify/angular/account/pages/federatedIdentity'
-            ).then(c => c.FederatedIdentityComponent);
+            ComponentBootstrapPromise =
+                import('@keycloakify/angular/account/pages/federatedIdentity').then(
+                    c => c.FederatedIdentityComponent
+                );
             break;
     }
     return ComponentBootstrapPromise?.then(ComponentBootstrap => ({

src/account/classes/component-reference/component-reference.class.ts

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

src/account/directives/kc-class/kc-class.directive.ts

@@ -2,15 +2,15 @@
 
 import {
     Directive,
-    DoCheck,
+    type DoCheck,
     ElementRef,
     inject,
     Input,
     isDevMode,
     Renderer2,
     ɵstringify as stringify
 } from '@angular/core';
-import { ClassKey } from 'keycloakify/account';
+import { type ClassKey } from 'keycloakify/account';
 import { getKcClsx } from 'keycloakify/account/lib/kcClsx';
 import { ComponentReference } from '@keycloakify/angular/account/classes/component-reference';
 

src/account/services/account-resource-injector/account-resource-injector.service.ts

@@ -1,6 +1,6 @@
 import { inject, Injectable } from '@angular/core';
 import { KC_ACCOUNT_CONTEXT } from '@keycloakify/angular/account/tokens/kc-context';
-import { Script } from '@keycloakify/angular/lib/models/script';
+import { type Script } from '@keycloakify/angular/lib/models/script';
 import { ResourceInjectorService } from '@keycloakify/angular/lib/services/resource-injector';
 import { catchError, forkJoin, of, switchMap } from 'rxjs';
 import type { KcContext } from '@keycloakify/angular/account/KcContext';

src/account/template/template.component.ts

@@ -4,12 +4,12 @@ import {
     ChangeDetectorRef,
     Component,
     effect,
-    EffectRef,
+    type EffectRef,
     forwardRef,
     inject,
     input,
     Renderer2,
-    Type,
+    type Type,
     viewChild,
     ViewContainerRef
 } from '@angular/core';
@@ -23,8 +23,8 @@ import { ACCOUNT_I18N } from '@keycloakify/angular/account/tokens/i18n';
 import { KC_ACCOUNT_CONTEXT } from '@keycloakify/angular/account/tokens/kc-context';
 import { KcSanitizePipe } from '@keycloakify/angular/lib/pipes/kc-sanitize';
 import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css';
-import { ClassKey, getKcClsx } from 'keycloakify/account/lib/kcClsx';
-import { Observable } from 'rxjs';
+import { type ClassKey, getKcClsx } from 'keycloakify/account/lib/kcClsx';
+import { type Observable } from 'rxjs';
 
 type ActiveType = 'account' | 'password' | 'totp' | 'social' | 'sessions' | 'applications' | 'log' | 'authorization' | undefined;
 

src/eslint.config.js

@@ -1,5 +1,5 @@
 // @ts-check
-import tseslint from 'typescript-eslint';
+import { defineConfig } from 'eslint/config';
 import rootConfig from '../eslint.config.js';
 
-export default tseslint.config(...rootConfig);
+export default defineConfig(...rootConfig);

src/lib/pipes/input-type/input-type.pipe.ts

@@ -1,4 +1,4 @@
-import { Pipe, PipeTransform } from '@angular/core';
+import { Pipe, type PipeTransform } from '@angular/core';
 
 @Pipe({
     name: 'inputType'

src/lib/pipes/is-array-with-empty-object/is-array-with-empty-object.pipe.ts

@@ -1,4 +1,4 @@
-import { Pipe, PipeTransform } from '@angular/core';
+import { Pipe, type PipeTransform } from '@angular/core';
 
 @Pipe({
     name: 'isArrayWithEmptyObject'

src/lib/pipes/kc-sanitize/kc-sanitize.pipe.ts

@@ -1,11 +1,11 @@
-import { inject, Pipe, PipeTransform } from '@angular/core';
+import { inject, Pipe, type PipeTransform } from '@angular/core';
 import {
     DomSanitizer,
-    SafeHtml,
-    SafeResourceUrl,
-    SafeScript,
-    SafeStyle,
-    SafeUrl
+    type SafeHtml,
+    type SafeResourceUrl,
+    type SafeScript,
+    type SafeStyle,
+    type SafeUrl
 } from '@angular/platform-browser';
 
 @Pipe({ name: 'kcSanitize' })

src/lib/pipes/to-array/to-array.pipe.ts

@@ -1,4 +1,4 @@
-import { Pipe, PipeTransform } from '@angular/core';
+import { Pipe, type PipeTransform } from '@angular/core';
 
 @Pipe({
     name: 'toArray'

src/lib/pipes/to-number/to-number.pipe.ts

@@ -1,4 +1,4 @@
-import { Pipe, PipeTransform } from '@angular/core';
+import { Pipe, type PipeTransform } from '@angular/core';
 
 @Pipe({
     name: 'toNumber'

src/lib/services/resource-injector/resource-injector.service.ts

@@ -1,6 +1,6 @@
-import { inject, Injectable, Renderer2, RendererFactory2 } from '@angular/core';
+import { inject, Injectable, type Renderer2, RendererFactory2 } from '@angular/core';
 import { Observable } from 'rxjs';
-import { Script } from '@keycloakify/angular/lib/models/script';
+import { type Script } from '@keycloakify/angular/lib/models/script';
 
 @Injectable({
     providedIn: 'root'

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

@@ -7,7 +7,7 @@ import { InputTagSelectsComponent } from '@keycloakify/angular/login/components/
 import { PasswordWrapperComponent } from '@keycloakify/angular/login/components/password-wrapper';
 import { SelectTagComponent } from '@keycloakify/angular/login/components/select-tag';
 import { TextareaTagComponent } from '@keycloakify/angular/login/components/textarea-tag';
-import { FormAction, FormFieldError } from '@keycloakify/angular/login/services/user-profile-form';
+import { type FormAction, 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 { ClassKey } from 'keycloakify/login/lib/kcClsx';

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

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, computed, forwardRef, inject, input, output, Signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, forwardRef, inject, input, output, type Signal } 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';

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

@@ -9,7 +9,7 @@ import { AddRemoveButtonsMultiValuedAttributeComponent } from '@keycloakify/angu
 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 { FormAction, FormFieldError } from '@keycloakify/angular/login/services/user-profile-form';
+import { type FormAction, type 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';

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

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, forwardRef, inject, input, Renderer2, signal, WritableSignal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, forwardRef, inject, input, Renderer2, signal, type 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';
 import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class';

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

@@ -1,5 +1,5 @@
 import { AsyncPipe, NgTemplateOutlet } from '@angular/common';
-import { ChangeDetectionStrategy, Component, ContentChild, forwardRef, inject, TemplateRef } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ContentChild, forwardRef, inject, type TemplateRef } 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 { FieldErrorsComponent } from '@keycloakify/angular/login/components/field-errors';