@eui/cli 21.0.0-next.2 → 21.0.0-next.21

package/lib/skeletons/_angular/base/angular.json

@@ -122,6 +122,22 @@
                         }
                     },
                     "defaultConfiguration": "development"
+                },
+                "test": {
+                    "builder": "@angular/build:unit-test",
+                    "options": {
+                        "tsConfig": "src/tsconfig.spec.json"
+                    }
+                },
+                "lint": {
+                    "builder": "@angular-eslint/builder:lint",
+                    "options": {
+                        "lintFilePatterns": [
+                            "src/**/*.ts",
+                            "src/**/*.html"
+                        ],
+                        "eslintConfig": "eslint.config.js"
+                    }
                 }
             }
         }

package/lib/skeletons/_angular/base/eslint.config.js

@@ -0,0 +1,43 @@
+// @ts-check
+const eslint = require("@eslint/js");
+const tseslint = require("typescript-eslint");
+const angular = require("angular-eslint");
+
+module.exports = tseslint.config(
+    {
+        files: ["**/*.ts"],
+        extends: [
+            eslint.configs.recommended,
+            ...tseslint.configs.recommended,
+            ...tseslint.configs.stylistic,
+            ...angular.configs.tsRecommended,
+        ],
+        processor: angular.processInlineTemplates,
+        rules: {
+            "@angular-eslint/directive-selector": [
+                "error",
+                {
+                    type: "attribute",
+                    prefix: "app",
+                    style: "camelCase",
+                },
+            ],
+            "@angular-eslint/component-selector": [
+                "error",
+                {
+                    type: "element",
+                    prefix: "app",
+                    style: "kebab-case",
+                },
+            ],
+        },
+    },
+    {
+        files: ["**/*.html"],
+        extends: [
+            ...angular.configs.templateRecommended,
+            ...angular.configs.templateAccessibility,
+        ],
+        rules: {},
+    },
+);

package/lib/skeletons/_angular/base/package.json

@@ -1,6 +1,6 @@
 {
     "name": "eui-angular-app",
-    "version": "21.0.0-next.2",
+    "version": "21.0.0-next.21",
     "license": "EUPL-1.1",
     "scripts": {
         "ng": "ng",
@@ -21,7 +21,7 @@
     },
     "private": true,
     "dependencies": {
-        "@eui/deps-base": "21.0.0-next.2"
+        "@eui/deps-base": "21.0.0-next.21"
     },
     "devDependencies": {
         "npm-run-all": "4.1.5",
@@ -29,7 +29,12 @@
         "nodemon": "2.0.22",
         "lowdb": "1.0.0",
         "body-parser": "1.20.3",
-        "express": "4.21.2"
+        "express": "4.21.2",
+        "typescript-eslint": "8.46.3",
+        "angular-eslint": "20.6.0",
+        "eslint": "^9.39.0",
+        "vitest": "^4.0.0",
+        "jsdom": "^27.2.0"
     },
     "resolutions": {
         "semver": ">=7.5.2",

package/lib/skeletons/_angular/base/src/app/app-starter.service.spec.ts

@@ -4,9 +4,11 @@ import {CONFIG_TOKEN, I18nService, UserService} from '@eui/core';
 import {EuiAppConfig} from '@eui/core';
 import {of} from 'rxjs';
 import {AppStarterService} from './app-starter.service';
-import SpyObj = jasmine.SpyObj;
 import { EuiServiceStatus } from '@eui/base';
 import { provideHttpClient, withInterceptorsFromDi } from "@angular/common/http";
+import { describe, it, beforeEach, expect, vi } from 'vitest';
+
+type SpyObj<T> = { [K in keyof T]: T[K] extends (...args: any[]) => any ? ReturnType<typeof vi.fn> : T[K] };
 
 describe('AppStarterService', () => {
     let service: AppStarterService;
@@ -16,8 +18,8 @@ describe('AppStarterService', () => {
     let configMock: EuiAppConfig;
 
     beforeEach(() => {
-        userServiceMock = jasmine.createSpyObj('UserService', ['init']);
-        i18nServiceMock = jasmine.createSpyObj('I18nService', ['init']);
+        userServiceMock = { init: vi.fn() } as SpyObj<UserService>;
+        i18nServiceMock = { init: vi.fn() } as SpyObj<I18nService>;
         configMock = {global: {}, modules: {core: {base: 'localhost:3000', userDetails: 'dummy'}}};
 
         TestBed.configureTestingModule({
@@ -40,8 +42,8 @@ describe('AppStarterService', () => {
     });
 
     it('should call start method', () => {
-        userServiceMock.init.and.returnValue(of({ } as EuiServiceStatus));
-        i18nServiceMock.init.and.returnValue(of({ } as EuiServiceStatus));
+        vi.mocked(userServiceMock.init).mockReturnValue(of({ } as EuiServiceStatus));
+        vi.mocked(i18nServiceMock.init).mockReturnValue(of({ } as EuiServiceStatus));
         service.start().subscribe(() => {
             expect(userServiceMock.init).toHaveBeenCalled();
             expect(i18nServiceMock.init).toHaveBeenCalled();
@@ -49,7 +51,7 @@ describe('AppStarterService', () => {
     });
 
     it('should call initUserService method', () => {
-        userServiceMock.init.and.returnValue(of({ } as EuiServiceStatus));
+        vi.mocked(userServiceMock.init).mockReturnValue(of({ } as EuiServiceStatus));
         service.initUserService().subscribe(() => {
             expect(userServiceMock.init).toHaveBeenCalled();
         });

package/lib/skeletons/_angular/base/src/app/app.component.html

@@ -10,17 +10,17 @@
                     <eui-user-profile isShowAvatarInitials>
                         <eui-user-profile-menu>
                             <eui-user-profile-menu-item>
-                                <eui-icon-svg icon="person:outline"/>{{ 'eui.my-profile-informations' | translate }}
+                                <eui-icon-svg icon="user:regular"/>{{ 'eui.my-profile-informations' | translate }}
                             </eui-user-profile-menu-item>
                             <eui-user-profile-menu-item>
-                                <eui-icon-svg icon="log-out:outline"/>{{ 'eui.sign-out' | translate }}
+                                <eui-icon-svg icon="sign-out:regular"/>{{ 'eui.sign-out' | translate }}
                             </eui-user-profile-menu-item>
                         </eui-user-profile-menu>
                     </eui-user-profile>
                 </eui-toolbar-item>
 
                 <eui-toolbar-item>
-                    <eui-notifications [count]="notificationItems?.length" [items]="notificationItems"></eui-notifications>
+                    <eui-notifications [count]="notificationItems.length" [items]="notificationItems" />
                 </eui-toolbar-item>
             </eui-toolbar-items>
 

package/lib/skeletons/_angular/base/src/app/app.component.spec.ts

@@ -10,7 +10,9 @@ import { CONFIG_TOKEN, I18nService, I18nState, UserService} from '@eui/core';
 import { EuiAppConfig } from '@eui/core';
 import { Observable, of } from 'rxjs';
 import { TranslateModule } from '@ngx-translate/core';
-import SpyObj = jasmine.SpyObj;
+import { describe, it, beforeEach, expect, vi } from 'vitest';
+
+type SpyObj<T> = { [K in keyof T]: T[K] extends (...args: any[]) => any ? ReturnType<typeof vi.fn> : T[K] };
 
 describe('AppComponent', () => {
     let component: AppComponent;
@@ -20,18 +22,18 @@ describe('AppComponent', () => {
     let configMock: EuiAppConfig;
 
     beforeEach(async () => {
-
-        // Handle the overloaded getState method
         type GetStateReturnType<T> = T extends keyof I18nState ? Observable<I18nState[T]> : Observable<I18nState>;
 
-        userServiceMock = jasmine.createSpyObj('UserService', ['init']);
-        i18nServiceMock = jasmine.createSpyObj<I18nService>('I18nService', ['init', 'getState']);
-        i18nServiceMock.getState.and.callFake(<K extends keyof I18nState>(key?: K): GetStateReturnType<K> => {
-            if (typeof key === 'string') {
-                return of({ activeLang: 'en' }[key]) as GetStateReturnType<K>;
-            }
-            return of({ activeLang: 'en' }) as GetStateReturnType<K>;
-        });
+        userServiceMock = { init: vi.fn() } as SpyObj<UserService>;
+        i18nServiceMock = { 
+            init: vi.fn(), 
+            getState: vi.fn(<K extends keyof I18nState>(key?: K): GetStateReturnType<K> => {
+                if (typeof key === 'string') {
+                    return of({ activeLang: 'en' }[key]) as GetStateReturnType<K>;
+                }
+                return of({ activeLang: 'en' }) as GetStateReturnType<K>;
+            })
+        } as SpyObj<I18nService>;
         configMock = {global: {}, modules: {core: {base: 'localhost:3000', userDetails: 'dummy'}}};
 
         await TestBed.configureTestingModule({

package/lib/skeletons/_angular/base/src/app/features/home/home.component.html

@@ -1,5 +1,5 @@
 <eui-page>
-    <eui-page-header label="{{ 'page.home.title' | translate }}"></eui-page-header>
+    <eui-page-header label="{{ 'page.home.title' | translate }}" />
 
     <eui-page-content>
         <h3 class="eui-u-font-bold eui-u-color-info">Overview</h3>

package/lib/skeletons/_angular/base/src/app/features/home/home.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { CONFIG_TOKEN, EuiAppConfig } from '@eui/core';
 import { EUI_PAGE } from '@eui/components/eui-page';
 import { TranslateModule } from '@ngx-translate/core';
@@ -11,7 +11,9 @@ import { TranslateModule } from '@ngx-translate/core';
     ],
 })
 export class HomeComponent {
-    constructor(@Inject(CONFIG_TOKEN) protected config: EuiAppConfig) {
-        console.log(config);
+    protected config: EuiAppConfig = inject(CONFIG_TOKEN);
+
+    constructor() {
+        console.log(this.config);
     }
 }

package/lib/skeletons/_angular/base/src/app/features/module1/components/page1/page1.component.html

@@ -1,5 +1,5 @@
 <eui-page>
-    <eui-page-header label="Module 1 - page 1"></eui-page-header>
+    <eui-page-header label="Module 1 - page 1" />
 
     <eui-page-content>
         page 1 content

package/lib/skeletons/_angular/base/src/app/features/module1/components/page2/page2.component.html

@@ -1,5 +1,5 @@
 <eui-page>
-    <eui-page-header label="Module 1 - page 2"></eui-page-header>
+    <eui-page-header label="Module 1 - page 2" />
 
     <eui-page-content>
         page 1 content

package/lib/skeletons/_angular/base/src/app/features/module1/module1.component.html

@@ -1,7 +1,5 @@
 <eui-page>
-    <eui-page-header label="Module 1"></eui-page-header>
+    <eui-page-header label="Module 1" />
 
-    <eui-page-content>
-
-    </eui-page-content>
+    <eui-page-content />
 </eui-page>

package/lib/skeletons/_angular/base/src/app/features/module2/module2.component.html

@@ -1,5 +1,5 @@
 <eui-page>
-    <eui-page-header label="Module 2"></eui-page-header>
+    <eui-page-header label="Module 2" />
 
     <eui-page-content>
         Module 2 content

package/lib/skeletons/_angular/base/src/dummy.spec.ts

@@ -1,3 +1,5 @@
+import { describe, expect, it } from 'vitest';
+
 // Dummy test
 describe('Test', () => {
     it('should work', () => {

package/lib/skeletons/_angular/base/src/tsconfig.app.json

@@ -9,6 +9,9 @@
         "strictTemplates": true,
         "strictInjectionParameters": true,
     },
+    "include": [
+        "**/*.ts"
+    ],
     "exclude": [
       "**/*.spec.ts",
       "app/shared/testing/router.mock.ts",

package/lib/skeletons/_angular/base/tsconfig.json

@@ -1,27 +1,31 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
 {
-  "compileOnSave": false,
-  "compilerOptions": {
-    "baseUrl": "./",
-    "outDir": "./dist/out-tsc",
-    "target": "ES2022",
-    "module": "ES2022",
-    "useDefineForClassFields": false,
-    "lib": [
-      "ES2022",
-      "dom"
-    ],
-    "sourceMap": true,
-    "declaration": false,
-    "moduleResolution": "bundler",
-    "emitDecoratorMetadata": false,
-    "experimentalDecorators": true,
-    "allowSyntheticDefaultImports": true,
-    "importHelpers": true,
-    "typeRoots": [
-      "node_modules/@types"
-    ],
-    "paths": {
-        "@shared/*": ["src/app/shared/*"],
+    "compileOnSave": false,
+    "compilerOptions": {
+        "baseUrl": "./",
+        "outDir": "./dist/out-tsc",
+        "target": "ES2022",
+        "module": "ES2022",
+        "useDefineForClassFields": false,
+        "lib": [
+            "ES2022",
+            "dom"
+        ],
+        "sourceMap": true,
+        "declaration": false,
+        "moduleResolution": "bundler",
+        "emitDecoratorMetadata": false,
+        "experimentalDecorators": true,
+        "allowSyntheticDefaultImports": true,
+        "importHelpers": true,
+        "typeRoots": [
+            "node_modules/@types"
+        ],
+        "paths": {
+            "@shared/*": [
+                "src/app/shared/*"
+            ]
+        }
     }
-  }
 }

package/lib/skeletons/_angular/base-mobile/package.json

@@ -1,6 +1,6 @@
 {
     "name": "eui-angular-app",
-    "version": "21.0.0-next.2",
+    "version": "21.0.0-next.21",
     "license": "EUPL-1.1",
     "scripts": {
         "ng": "ng",
@@ -21,7 +21,7 @@
     "private": true,
     "dependencies": {
         "@eui/deps-base": "18.2.20",
-        "@eui/mobile-core": "18.1.3",
-        "@eui/mobile-styles": "18.1.3"
+        "@eui/mobile-core": "18.1.4",
+        "@eui/mobile-styles": "18.1.4"
     }
 }

package/lib/skeletons/_angular/options/pnpm/package.json

@@ -1,6 +1,6 @@
 {
     "name": "eui-angular-app",
-    "version": "21.0.0-next.2",
+    "version": "21.0.0-next.21",
     "license": "EUPL-1.1",
     "scripts": {
         "ng": "ng",
@@ -18,21 +18,21 @@
     },
     "private": true,
     "dependencies": {
-        "@angular/animations": "21.0.0-rc.2",
-        "@angular/common": "21.0.0-rc.2",
-        "@angular/compiler": "21.0.0-rc.2",
-        "@angular/core": "21.0.0-rc.2",
-        "@angular/forms": "21.0.0-rc.2",
-        "@angular/platform-browser": "21.0.0-rc.2",
-        "@angular/platform-browser-dynamic": "21.0.0-rc.2",
-        "@angular/router": "21.0.0-rc.2",
-        "@angular/elements": "21.0.0-rc.2",
-        "@angular/language-service": "21.0.0-rc.2",
-        "@angular/service-worker": "21.0.0-rc.2",
-        "@angular/cdk": "21.0.0-rc.1",
-        "@angular/material": "21.0.0-rc.1",
-        "@angular/material-moment-adapter": "21.0.0-rc.1",
-        "@angular-devkit/build-angular": "21.0.0-rc.1",
+        "@angular/animations": "21.0.0",
+        "@angular/common": "21.0.0",
+        "@angular/compiler": "21.0.0",
+        "@angular/core": "21.0.0",
+        "@angular/forms": "21.0.0",
+        "@angular/platform-browser": "21.0.0",
+        "@angular/platform-browser-dynamic": "21.0.0",
+        "@angular/router": "21.0.0",
+        "@angular/elements": "21.0.0",
+        "@angular/language-service": "21.0.0",
+        "@angular/service-worker": "21.0.0",
+        "@angular/cdk": "21.0.0",
+        "@angular/material": "21.0.0",
+        "@angular/material-moment-adapter": "21.0.0",
+        "@angular-devkit/build-angular": "21.0.0",
         "rxjs": "7.8.2",
         "tslib": "2.8.1",
         "zone.js": "0.15.1",
@@ -48,18 +48,18 @@
         "pikaday": "1.8.2",
         "lodash-es": "4.17.21",
         "localforage": "1.10.0",
-        "@eui/base": "21.0.0-next.2",
-        "@eui/core": "21.0.0-next.2",
-        "@eui/styles": "21.0.0-next.2",
-        "@eui/components": "21.0.0-next.2",
-        "@eui/ecl": "21.0.0-next.2"
+        "@eui/base": "21.0.0-next.21",
+        "@eui/core": "21.0.0-next.21",
+        "@eui/styles": "21.0.0-next.21",
+        "@eui/components": "21.0.0-next.21",
+        "@eui/ecl": "21.0.0-next.21"
     },
     "devDependencies": {
-        "@angular/build": "21.0.0-rc.1",
-        "@angular/compiler-cli": "21.0.0-rc.2",
-        "@angular/cli": "21.0.0-rc.1",
-        "@eui/cli": "21.0.0-next.2",
-        "ng-packagr": "21.0.0-rc.1",
+        "@angular/build": "21.0.0",
+        "@angular/compiler-cli": "21.0.0",
+        "@angular/cli": "21.0.0",
+        "@eui/cli": "21.0.0-next.21",
+        "ng-packagr": "21.0.0",
         "typescript": "5.9.2",
         "npm-run-all": "4.1.5",
         "json-server": "1.0.0-beta.3",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@eui/cli",
-    "version": "21.0.0-next.2",
+    "version": "21.0.0-next.21",
     "tag": "next",
     "license": "EUPL-1.1",
     "description": "eUI CLI app generator & tools",

package/lib/skeletons/_angular/base/src/.eslintrc.json

@@ -1,121 +0,0 @@
-{
-    "root": true,
-    "ignorePatterns": [
-        "**/node_modules/**",
-        "**/dist/**",
-        "**/coverage/**",
-        "**/e2e/**",
-        "**/test/**",
-        "**/testing/**"
-    ],
-    "overrides": [
-        {
-            "files": [
-                "*.ts"
-            ],
-            "parserOptions": {
-                "project": [
-                    "tsconfig.json",
-                    "e2e/tsconfig.json"
-                ],
-                "createDefaultProgram": true
-            },
-            "extends": [
-                "eslint:recommended",
-                "plugin:@typescript-eslint/recommended",
-                "plugin:@angular-eslint/recommended",
-                "plugin:@angular-eslint/template/process-inline-templates"
-            ],
-            "rules": {
-                "@angular-eslint/component-selector": [
-                    "error",
-                    {
-                        "type": "element",
-                        "prefix": ["app", "app"],
-                        "style": "kebab-case"
-                    }
-                ],
-                "@angular-eslint/directive-selector": [
-                    "error",
-                    {
-                        "type": "attribute",
-                        "prefix": ["app", "eui"],
-                        "style": "camelCase"
-                    }
-                ],
-                "@typescript-eslint/ban-ts-comment": "off",
-                "@typescript-eslint/no-empty-object-type": "error",
-                "@typescript-eslint/no-unsafe-function-type": "error",
-                "@typescript-eslint/consistent-type-definitions": "off",
-                "@typescript-eslint/dot-notation": "off",
-                "@typescript-eslint/explicit-member-accessibility": [
-                    "off",
-                    {
-                        "accessibility": "explicit"
-                    }
-                ],
-                "@typescript-eslint/no-require-imports": "error",
-                "@typescript-eslint/no-unused-vars": "off",
-                "@typescript-eslint/no-var-requires": "error",
-                "@typescript-eslint/require-await": "error",
-                "brace-style": [
-                    "error",
-                    "1tbs"
-                ],
-                "id-blacklist": "off",
-                "id-match": "off",
-                "no-duplicate-case": "error",
-                "no-duplicate-imports": "off",
-                "no-invalid-this": "error",
-                "no-multiple-empty-lines": [
-                    "error",
-                    {
-                        "max": 1
-                    }
-                ],
-                "no-new-func": "error",
-                "no-redeclare": "off",
-                "@typescript-eslint/no-redeclare": [
-                    "error"
-                ],
-                "no-template-curly-in-string": "error",
-                "no-underscore-dangle": "off",
-                "@typescript-eslint/naming-convention": [
-                    "error",
-                    {
-                        "selector": "enum",
-                        "format": [
-                            "PascalCase",
-                            "UPPER_CASE"
-                        ]
-                    }
-                ],
-                "@typescript-eslint/member-ordering": [
-                    "error",
-                    {
-                        "default": [
-                            "public-static-field",
-                            "public-instance-field",
-                            "private-static-field",
-                            "private-instance-field",
-                            "public-constructor",
-                            "private-constructor",
-                            "public-instance-method",
-                            "protected-instance-method",
-                            "private-instance-method"
-                        ]
-                    }
-                ]
-            }
-        },
-        {
-            "files": [
-                "*.html"
-            ],
-            "extends": [
-                "plugin:@angular-eslint/template/recommended"
-            ],
-            "rules": {}
-        }
-    ]
-}