Feat/ng update 20

.github/workflows/test.yaml

@@ -17,17 +17,18 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: "20.x"
+          node-version: "24.x"
 
       - name: Install dependencies
         env:
           HUSKY_SKIP_INSTALL: true
-        run: npm ci
+        run: npm ci --force
 
       - name: Cypress run
         uses: cypress-io/github-action@v6
         with:
           component: true
+          install-command: npm ci --legacy-peer-deps
 
       - name: Lint, build and release
         env:

README.md

@@ -36,7 +36,8 @@ Demo and examples: [ngxpert.github.io/cmdk](https://ngxpert.github.io/cmdk)
 | ------------- | -------- |
 | 1.x           | >=16 <17 |
 | 2.x           | >=17 <18 |
-| 3.x           | >=18     |
+| 3.x           | >=18 < 20     |
+| 4.x           | >=20 < 21     |
 
 <details>
 <summary>For older versions</summary>

angular.json

@@ -15,7 +15,7 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:application",
+          "builder": "@angular/build:application",
           "options": {
             "outputPath": {
               "base": "dist/cmdk"
@@ -66,7 +66,7 @@
           "defaultConfiguration": "production"
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular/build:dev-server",
           "configurations": {
             "production": {
               "buildTarget": "cmdk:build:production"
@@ -78,13 +78,13 @@
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "builder": "@angular/build:extract-i18n",
           "options": {
             "buildTarget": "cmdk:build"
           }
         },
         "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+          "builder": "@angular/build:karma",
           "options": {
             "main": "src/test.ts",
             "polyfills": "src/polyfills.ts",
@@ -116,7 +116,7 @@
       "prefix": "cmdk",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "builder": "@angular/build:ng-packagr",
           "options": {
             "project": "projects/ngxpert/cmdk/ng-package.json"
           },
@@ -131,7 +131,7 @@
           "defaultConfiguration": "production"
         },
         "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+          "builder": "@angular/build:karma",
           "options": {
             "main": "projects/ngxpert/cmdk/src/test.ts",
             "tsConfig": "projects/ngxpert/cmdk/tsconfig.spec.json",
@@ -159,6 +159,30 @@
     },
     "@angular-eslint/schematics:library": {
       "setParserOptionsProject": true
+    },
+    "@schematics/angular:component": {
+      "type": "component"
+    },
+    "@schematics/angular:directive": {
+      "type": "directive"
+    },
+    "@schematics/angular:service": {
+      "type": "service"
+    },
+    "@schematics/angular:guard": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:interceptor": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:module": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:pipe": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:resolver": {
+      "typeSeparator": "."
     }
   }
 }

cypress/group.cy.ts

@@ -1,8 +1,8 @@
-import { TestsModule } from 'src/app/tests/tests.module';
+import { GroupComponent } from "src/app/tests/group.component";
 
 describe('group', async () => {
   beforeEach(() => {
-    cy.mount(`<app-group></app-group>`, { imports: [TestsModule] });
+    cy.mount(`<app-group></app-group>`, { imports: [GroupComponent] });
   });
 
   it('groups are shown/hidden based on item matches', () => {

cypress/item.cy.ts

@@ -1,8 +1,8 @@
-import { TestsModule } from 'src/app/tests/tests.module';
+import { GroupComponent } from "src/app/tests/group.component";
 
 describe('item', () => {
   beforeEach(() => {
-    cy.mount(`<app-item></app-item>`, { imports: [TestsModule] });
+    cy.mount(`<app-item></app-item>`, { imports: [GroupComponent] });
   });
 
   it('mounted item matches search', () => {

cypress/keybindings.cy.ts

@@ -1,8 +1,8 @@
-import { TestsModule } from 'src/app/tests/tests.module';
+import { GroupComponent } from "src/app/tests/group.component";
 
 describe('arrow keybinds', async () => {
   beforeEach(() => {
-    cy.mount('<app-keybindings></app-keybindings>', { imports: [TestsModule] });
+    cy.mount('<app-keybindings></app-keybindings>', { imports: [GroupComponent] });
   });
 
   test('arrow up/down changes selected item', () => {

cypress/props.cy.ts

@@ -1,17 +1,17 @@
-import { TestsModule } from 'src/app/tests/tests.module';
+import { GroupComponent } from "src/app/tests/group.component";
 
 describe('props', () => {
   it('results match against custom filter', async () => {
     cy.mount("<app-props [customFilter]='true'></app-props>", {
-      imports: [TestsModule],
+      imports: [GroupComponent],
     });
     cy.get(`[cmdkinput]`).type(`ant`);
     cy.get(`[cmdkitem]`).should('have.data', 'value', 'ant');
   });
 
   it('controlled value', () => {
     cy.mount('<app-props></app-props>', {
-      imports: [TestsModule],
+      imports: [GroupComponent],
     });
     cy.get(`[cmdkitem][aria-selected="true"]`).should(
       'have.data',
@@ -28,7 +28,7 @@ describe('props', () => {
 
   it('controlled search', () => {
     cy.mount('<app-props></app-props>', {
-      imports: [TestsModule],
+      imports: [GroupComponent],
     });
     cy.get(`[cmdkitem][aria-selected="true"]`).should(
       'have.data',

karma.conf.js

@@ -10,7 +10,7 @@ module.exports = function (config) {
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'),
       require('karma-coverage'),
-      require('@angular-devkit/build-angular/plugins/karma')
+
     ],
     client: {
       jasmine: {