@eui/cli 21.0.0-alpha.4 → 21.0.0-alpha.40

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

@@ -0,0 +1,60 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterModule } from '@angular/router';
+import { AppComponent } from './app.component';
+import { EUI_LAYOUT } from '@eui/components/layout';
+import { routes } from './app.routes';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { AppStarterService } from './app-starter.service';
+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;
+
+describe('AppComponent', () => {
+    let component: AppComponent;
+    let fixture: ComponentFixture<AppComponent>;
+    let userServiceMock: SpyObj<UserService>;
+    let i18nServiceMock: SpyObj<I18nService>;
+    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>;
+        });
+        configMock = {global: {}, modules: {core: {base: 'localhost:3000', userDetails: 'dummy'}}};
+
+        await TestBed.configureTestingModule({
+            imports: [
+                RouterModule.forRoot(routes),
+                ...EUI_LAYOUT,
+                TranslateModule.forRoot(),
+            ],
+            providers: [
+                provideHttpClient(withInterceptorsFromDi()),
+                provideHttpClientTesting(),
+                AppStarterService,
+                {provide: UserService, useValue: userServiceMock},
+                {provide: I18nService, useValue: i18nServiceMock},
+                {provide: CONFIG_TOKEN, useValue: configMock},
+            ],
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(AppComponent);
+        component = fixture.componentInstance;
+    });
+
+    it('should create the app', () => {
+        expect(component).toBeTruthy();
+    });
+});

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

@@ -0,0 +1,35 @@
+import { Component } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { EUI_LANGUAGE_SELECTOR } from '@eui/components/eui-language-selector';
+import { EUI_USER_PROFILE } from '@eui/components/eui-user-profile';
+import { EUI_ICON } from '@eui/components/eui-icon';
+import { EuiMenuItem } from '@eui/components/eui-menu';
+import { EUI_LAYOUT } from '@eui/components/layout';
+
+@Component({
+    selector: 'app-root',
+    templateUrl: './app.component.html',
+    imports: [
+        TranslateModule,
+        ...EUI_LAYOUT,
+        ...EUI_ICON,
+        ...EUI_USER_PROFILE,
+        ...EUI_LANGUAGE_SELECTOR,
+    ],
+})
+export class AppComponent {
+    sidebarItems: EuiMenuItem[] = [
+        { label: 'Home', url: 'screen/home' },
+        { label: 'Module 1', url: 'screen/module1', children: [
+            { label: 'page 1', url: 'screen/module1/page1' },
+            { label: 'page 2', url: 'screen/module1/page2' },
+        ] },
+        { label: 'Module 2', url: 'screen/module2' },
+    ];
+    notificationItems = [
+        { label: 'Title label 1', subLabel: 'Subtitle label' },
+        { label: 'Title label 2', subLabel: 'Subtitle label' },
+        { label: 'Title label 3', subLabel: 'Subtitle label' },
+        { label: 'Title label 4', subLabel: 'Subtitle label' },
+    ];
+}

package/lib/skeletons/_angular/base/src/app/app.config.ts

@@ -0,0 +1,84 @@
+import { inject, provideAppInitializer } from '@angular/core';
+import { ApplicationConfig, importProvidersFrom } from '@angular/core';
+import { provideRouter } from '@angular/router';
+import { Observable } from 'rxjs';
+
+import { routes } from './app.routes';
+import { AppStarterService } from './app-starter.service';
+
+import { TranslateModule } from '@ngx-translate/core';
+
+import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import {
+    CachePreventionInterceptor,
+    CorsSecurityInterceptor,
+    CsrfPreventionInterceptor,
+    EuLoginSessionTimeoutHandlingInterceptor,
+    CoreModule as EuiCoreModule,
+    translateConfig,
+    EUI_CONFIG_TOKEN,
+    provideEuiInitializer,
+    EuiServiceStatus,
+} from '@eui/core';
+
+import { appConfig as euiAppConfig} from '../config';
+import { environment } from '../environments/environment';
+import { provideAnimations } from '@angular/platform-browser/animations';
+
+/**
+ * The provided function is injected at application startup and executed during
+ * app initialization. If the function returns a Promise or an Observable, initialization
+ * does not complete until the Promise is resolved or the Observable is completed.
+ */
+const init = (): Observable<EuiServiceStatus> => {
+    const appStarter = inject(AppStarterService);
+    return appStarter.start();
+};
+
+export const appConfig: ApplicationConfig = {
+    providers: [
+        {
+            provide: EUI_CONFIG_TOKEN,
+            useValue: { appConfig: euiAppConfig, environment }
+        },
+        {
+            // Sets the withCredentials on Ajax Request to send the JSESSIONID cookie to another domain.
+            // This is necessary when a request is being made to another domain that is protected by EU Login.
+            provide: HTTP_INTERCEPTORS,
+            useClass: CorsSecurityInterceptor,
+            multi: true,
+        },
+        {
+            // When the authentication session is invalid, we need to re-authenticate. The browser refreshes the current URL,
+            // and lets the EU Login client redirect to the official EU Login page.
+            provide: HTTP_INTERCEPTORS,
+            useClass: EuLoginSessionTimeoutHandlingInterceptor,
+            multi: true,
+        },
+        {
+            // Adds HTTP header to each Ajax request that ensures the request is set by a piece of JavaScript code in the application.
+            // This prevents dynamically-loaded content from forging a request in the name of the currently logged-in user.
+            // Be aware that this assumes that cross-site scripting (XSS) is already put in place, (default setting in Angular).
+            provide: HTTP_INTERCEPTORS,
+            useClass: CsrfPreventionInterceptor,
+            multi: true,
+        },
+        {
+            // Asks the intermediate proxies not to return a cache copy of the resource.
+            // In matter of fact forces each server in the chain to validate the freshness of the resource.
+            provide: HTTP_INTERCEPTORS,
+            useClass: CachePreventionInterceptor,
+            multi: true,
+        },
+        provideEuiInitializer(),
+        provideAppInitializer(init),
+        provideHttpClient(withInterceptorsFromDi()),
+        importProvidersFrom(
+            EuiCoreModule.forRoot(),
+            TranslateModule.forRoot(translateConfig)
+        ),
+        AppStarterService,
+        provideRouter(routes),
+        provideAnimations(),
+    ],
+};

package/lib/skeletons/_angular/base/src/app/app.routes.ts

@@ -0,0 +1,9 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [
+    { path: '', redirectTo: 'screen/home', pathMatch: 'full' },
+    { path: 'index.jsp', redirectTo: 'screen/home' },
+    { path: 'screen/home', loadChildren: () => import('./features/home/home.routes').then(m => m.HOME_ROUTES) },
+    { path: 'screen/module1', loadChildren: () => import('./features/module1/module1.routes').then(m => m.MODULE1_ROUTES) },
+    { path: 'screen/module2', loadChildren: () => import('./features/module2/module2.routes').then(m => m.MODULE2_ROUTES) },
+];

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

@@ -0,0 +1,41 @@
+<eui-page>
+    <eui-page-header label="{{ 'page.home.title' | translate }}"></eui-page-header>
+
+    <eui-page-content>
+        <h3 class="eui-u-font-bold eui-u-color-info">Overview</h3>
+
+        <p>The <strong><a href="https://webgate.ec.europa.eu/fpfis/wikis/display/eUI" target="_blank" class="eui-u-text-link-external">eUI
+                    Platform</a></strong> (eUI) is meant to ease development of <strong>Single Web Page
+                Applications</strong> (SPAs) providing rich <strong>User Experience</strong> (UX) starting point
+            to directly quick-start applications development.</p>
+
+        <p>It's also focusing on rationalisation and implementation of <strong><a
+                    href="https://webgate.ec.europa.eu/fpfis/wikis/display/Europa/User+experience"
+                    target="_blank" class="eui-u-text-link-external">European Commission's User Experience</a></strong> (UX&#64;EC) and the adoption
+            of a common look and feel for your web applications.</p>
+
+        <p>Thereby, the <strong>eUI framework</strong> provides guidelines and recommendations on
+            <strong>collaborative and reusable web components</strong> in order to help
+            to build common and homogeneous graphical web interfaces that reflects the <strong>European
+                Commission Style Guides</strong> towards a corporate look and feel.
+            It also offers consistency from User Experience point of view through various participant projects
+            such as Opsys, MyWorkplace, Compass Corporate, Assmal, eProcurement, Sygma, Sedia, etc.</p>
+
+        <p>The target audience goes from Developers who will find a lot of usefull technical information, but
+            also Designers who want to reuse such materials to illustrate their work as well as Analysts and
+            Managers to help them during conceptual phases.</p>
+
+        <p>Feel free to participate and help to improve the eUI platform.</p>
+        <p>Contact us at <strong><a
+                    href="mailto:DIGIT-EUI-SUPPORT@ec.europa.eu" class="eui-u-text-link">DIGIT-EUI-SUPPORT&#64;ec.europa.eu</a></strong> and
+            join us on MS Teams : <a href="https://teams.microsoft.com/l/team/19%3a2f5bb6b7d1e24c4aabaa62229d3e1955%40thread.tacv2/conversations?groupId=fb6def72-c57b-4e8f-a82e-49be65d6e1f5&tenantId=b24c8b06-522c-46fe-9080-70926f8dddb1" target="_blank"  class="eui-u-text-link-external">
+                MS Teams EC_eUI team
+            </a>
+        </p>
+
+        <div>
+            <strong>The eUI Team</strong>
+        </div>
+
+    </eui-page-content>
+</eui-page>

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

@@ -0,0 +1,17 @@
+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';
+
+@Component({
+    templateUrl: './home.component.html',
+    imports: [
+        TranslateModule,
+        ...EUI_PAGE,
+    ],
+})
+export class HomeComponent {
+    constructor(@Inject(CONFIG_TOKEN) protected config: EuiAppConfig) {
+        console.log(config);
+    }
+}

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

@@ -0,0 +1,6 @@
+import { Routes } from '@angular/router';
+import { HomeComponent } from './home.component';
+
+export const HOME_ROUTES: Routes = [
+    { path: '', component: HomeComponent },
+];

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

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

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

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { EUI_PAGE } from '@eui/components/eui-page';
+
+@Component({
+    templateUrl: './page1.component.html',
+    imports: [
+        ...EUI_PAGE,
+    ],
+})
+export class Page1Component {}

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

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

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

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { EUI_PAGE } from '@eui/components/eui-page';
+
+@Component({
+    templateUrl: './page2.component.html',
+    imports: [
+        ...EUI_PAGE,
+    ],
+})
+export class Page2Component {}

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

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

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

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { EUI_PAGE } from '@eui/components/eui-page';
+
+@Component({
+    templateUrl: './module1.component.html',
+    imports: [
+        ...EUI_PAGE,
+    ],
+})
+export class Module1Component {}

package/lib/skeletons/_angular/base/src/app/features/module1/module1.routes.ts

@@ -0,0 +1,10 @@
+import { Routes } from '@angular/router';
+import { Page1Component } from './components/page1/page1.component';
+import { Page2Component } from './components/page2/page2.component';
+import { Module1Component } from './module1.component';
+
+export const MODULE1_ROUTES: Routes = [
+    { path: '', component: Module1Component },
+    { path: 'page1', component: Page1Component },
+    { path: 'page2', component: Page2Component },
+];

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

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

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

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { EUI_PAGE } from '@eui/components/eui-page';
+
+@Component({
+    templateUrl: './module2.component.html',
+    imports: [
+        ...EUI_PAGE,
+    ],
+})
+export class Module2Component {}

package/lib/skeletons/_angular/base/src/app/features/module2/module2.routes.ts

@@ -0,0 +1,6 @@
+import { Routes } from '@angular/router';
+import { Module2Component } from './module2.component';
+
+export const MODULE2_ROUTES: Routes = [
+    { path: '', component: Module2Component },
+];

package/lib/skeletons/_angular/base/src/app/shared/testing/router.mock.ts

@@ -0,0 +1,18 @@
+import { NavigationEnd } from '@angular/router';
+import { Observable } from 'rxjs/Observable';
+
+export class RouterMock {
+    routerState = { root: '' };
+    public navigationEnd = new NavigationEnd(0, 'http://url1', 'http://url2');
+    public events = new Observable(observer => {
+        observer.next(this.navigationEnd);
+        observer.complete();
+    });
+
+    constructor() {}
+
+    createUrlTree() {}
+
+    serializeUrl() {}
+
+}

package/lib/skeletons/_angular/base/src/assets/config/env-json-config-dev.json

@@ -0,0 +1,8 @@
+{
+    "modules": {
+        "core": {
+            "base": "SERVER_HOST/api",
+            "userDetails": "/user-details"
+        }
+    }
+}

package/lib/skeletons/_angular/base/src/assets/config/env-json-config-prod.json

@@ -0,0 +1,8 @@
+{
+    "modules": {
+        "core": {
+            "base": "SERVER_HOST/api",
+            "userDetails": "/user-details"
+        }
+    }
+}

package/lib/skeletons/_angular/base/src/assets/config/env-json-config.json

@@ -0,0 +1,7 @@
+{
+    "modules": {
+        "core": {
+            "userDetails": "/user-details"
+        }
+    }
+}

package/lib/skeletons/_angular/base/src/assets/i18n/en.json

@@ -0,0 +1,7 @@
+{
+    "page.home.title": "Welcome to eUI!",
+    "app.search.button": "Search",
+    "eui.my-profile-informations": "My profile information",
+    "eui.you-are-logged-in-as": "You are logged in as",
+    "eui.sign-out": "Sign out"
+}

package/lib/skeletons/_angular/base/src/assets/i18n/fr.json

@@ -0,0 +1,7 @@
+{
+    "page.home.title": "Bienvenue dans eUI!",
+    "app.search.button": "Chercher",
+    "eui.my-profile-informations": "My profile information FR",
+    "eui.you-are-logged-in-as": "You are logged in as FR",
+    "eui.sign-out": "Sign out FR"
+}

package/lib/skeletons/_angular/base/src/config/global.ts

@@ -0,0 +1,33 @@
+import { GlobalConfig } from '@eui/core';
+
+export const GLOBAL: GlobalConfig = {
+    appTitle: 'CSDR-app',
+    i18n: {
+        i18nService: {
+            defaultLanguage: 'en',
+            languages: [
+                {
+                    code: 'en',
+                    label: 'English'
+                },
+                {
+                    code: 'fr',
+                    label: 'Français'
+                }
+            ],
+        },
+        i18nLoader: {
+            i18nFolders: [
+                'i18n-eui',
+                'i18n',
+                'i18n-ecl'
+            ],
+        },
+    },
+    user: {
+        defaultUserPreferences: {
+            dashboard: { },
+            lang: 'en',
+        },
+    },
+};

package/lib/skeletons/_angular/base/src/config/index.ts

@@ -0,0 +1,8 @@
+import { EuiAppConfig } from '@eui/core';
+import { GLOBAL } from './global';
+import { MODULES } from './modules';
+
+export const appConfig: EuiAppConfig = {
+    global: GLOBAL,
+    modules: MODULES,
+};

package/lib/skeletons/_angular/base/src/config/modules.ts

@@ -0,0 +1,7 @@
+import { ModulesConfig } from '@eui/core';
+
+export const MODULES: ModulesConfig = {
+    core: {
+        base: '/api',
+    }
+};

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

@@ -0,0 +1,6 @@
+// Dummy test
+describe('Test', () => {
+    it('should work', () => {
+        expect(true).toBe(true);
+    });
+});

package/lib/skeletons/_angular/base/src/environments/environment.prod.ts

@@ -0,0 +1,11 @@
+import { EuiEnvConfig } from '@eui/core';
+
+export const environment: EuiEnvConfig = {
+    production: true,
+    enableDevToolRedux: false,
+    envDynamicConfig: {
+        uri: 'assets/env-json-config.json',
+        deepMerge: true,
+        merge: ['modules'],
+    },
+};

package/lib/skeletons/_angular/base/src/environments/environment.ts

@@ -0,0 +1,15 @@
+import { EuiEnvConfig } from '@eui/core';
+
+interface EnvConfig extends EuiEnvConfig {
+    production: boolean;
+}
+
+export const environment: EnvConfig = {
+    production: false,
+    enableDevToolRedux: true,
+    envDynamicConfig: {
+        uri: 'assets/env-json-config.json',
+        deepMerge: true,
+        merge: ['modules'],
+    },
+};

package/lib/skeletons/_angular/base/src/index.html

@@ -0,0 +1,20 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Application name</title>
+  <base href="/">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+
+<body>
+  <app-root>
+    <div id="loader-wrapper">
+      <div id="loader"></div>
+    </div>
+  </app-root>
+</body>
+
+</html>

package/lib/skeletons/_angular/base/src/karma.conf.js

@@ -0,0 +1,47 @@
+function get(config) {
+
+    return {
+        basePath: '',
+        frameworks: ['jasmine', '@angular-devkit/build-angular'],
+        plugins: [
+            require('karma-jasmine'),
+            require('karma-chrome-launcher'),
+            require('karma-jasmine-html-reporter'),
+            require('karma-coverage-istanbul-reporter'),
+            require('karma-coverage'),
+            require('karma-sourcemap-loader'),
+            require('@angular-devkit/build-angular/plugins/karma')
+        ],
+        client:{
+          clearContext: false // leave Jasmine Spec Runner output visible in browser
+        },
+        coverageIstanbulReporter: {
+          reports: [ 'html', 'lcovonly' ],
+          fixWebpackSourcePaths: true
+        },
+        angularCli: {
+          environment: 'dev'
+        },
+        reporters: ['progress', 'kjhtml'],
+        port: 9876,
+        colors: true,
+        logLevel: config.LOG_INFO,
+        autoWatch: true,
+        browsers: ['ChromeHeadlessCustom'],
+        customLaunchers: {
+            ChromeHeadlessCustom: {
+                base: 'ChromeHeadless',
+                flags: [
+                    '--no-sandbox',
+                ],
+            },
+        },
+        singleRun: false
+    }
+}
+
+module.exports = function (config) {
+    config.set(
+        get(config)
+    );
+}

package/lib/skeletons/_angular/base/src/main.ts

@@ -0,0 +1,20 @@
+import { enableProdMode } from '@angular/core';
+import { preInitApp } from '@eui/core';
+import { environment } from './environments/environment';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app/app.component';
+import { appConfig } from './app/app.config';
+
+if (environment.production) {
+    enableProdMode();
+}
+
+preInitApp(environment).then(() =>
+    bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err)));
+
+declare global {
+    interface Window {
+        global: Window;
+    }
+}
+window.global = window;

package/lib/skeletons/_angular/base/src/styles.scss

@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */

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

@@ -0,0 +1,18 @@
+{
+    "extends": "../tsconfig.json",
+    "compilerOptions": {
+      "outDir": "../out-tsc/app",
+      "types": []
+    },
+    "angularCompilerOptions": {
+        "annotateForClosureCompiler": true,
+        "strictTemplates": true,
+        "strictInjectionParameters": true,
+    },
+    "exclude": [
+      "**/*.spec.ts",
+      "app/shared/testing/router.mock.ts",
+      "environments/environment.prod.ts",
+      "environments/environment.dev.ts"
+    ]
+  }

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

@@ -0,0 +1,10 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/spec"
+  },
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}