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

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

@@ -0,0 +1,27 @@
+{
+  "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/angular.json

@@ -0,0 +1,156 @@
+{
+    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+    "version": 1,
+    "newProjectRoot": "projects",
+    "cli": {
+        "analytics": false
+    },
+    "projects": {
+        "app": {
+            "root": "",
+            "sourceRoot": "src",
+            "projectType": "application",
+            "prefix": "app",
+            "schematics": {
+                "@schematics/angular:component": {
+                    "style": "scss"
+                }
+            },
+            "architect": {
+                "build": {
+                    "builder": "@angular-devkit/build-angular:browser",
+                    "options": {
+                        "outputPath": "dist",
+                        "index": "src/index.html",
+                        "main": "src/main.ts",
+                        "polyfills": ["zone.js"],
+                        "tsConfig": "src/tsconfig.app.json",
+                        "assets": [
+                            "src/favicon.ico",
+                            "src/assets",
+                            "src/manifest.webmanifest",
+                            {
+                                "glob": "**/*",
+                                "input": "src/assets",
+                                "output": "assets"
+                            },
+                            {
+                                "glob": "**/*",
+                                "input": "node_modules/@eui/core/assets/",
+                                "output": "./assets"
+                            },
+                            {
+                                "glob": "**/*",
+                                "input": "node_modules/@eui/ecl-core/assets/",
+                                "output": "./assets"
+                            },
+                            {
+                                "glob": "**/*",
+                                "input": "node_modules/@eui/styles/dist/assets/images",
+                                "output": "./assets/images"
+                            },
+                            {
+                                "glob": "**/*.svg",
+                                "input": "node_modules/ionicons/dist/ionicons/svg",
+                                "output": "./svg"
+                            }
+                        ],
+                        "styles": [
+                            "node_modules/@eui/mobile-styles/dist/eui-mobile.css",
+                            "src/styles.scss"
+                        ]
+                    },
+                    "configurations": {
+                        "production": {
+                            "fileReplacements": [
+                                {
+                                    "replace": "src/environments/environment.ts",
+                                    "with": "src/environments/environment.prod.ts"
+                                }
+                            ],
+                            "optimization": false,
+                            "outputHashing": "all",
+                            "sourceMap": false,
+                            "aot": true,
+                            "extractLicenses": true,
+                            "budgets": [
+                                {
+                                    "type": "initial",
+                                    "maximumWarning": "6mb",
+                                    "maximumError": "9mb"
+                                }
+                            ]
+                        },
+                        "production-optimized": {
+                            "fileReplacements": [
+                                {
+                                    "replace": "src/environments/environment.ts",
+                                    "with": "src/environments/environment.prod.ts"
+                                }
+                            ],
+                            "optimization": {
+                                "scripts": true,
+                                "styles": {
+                                    "minify": false,
+                                    "inlineCritical": true
+                                },
+                                "fonts": true
+                            },
+                            "outputHashing": "all",
+                            "sourceMap": false,
+                            "extractLicenses": true,
+                            "budgets": [
+                                {
+                                    "type": "initial",
+                                    "maximumWarning": "2mb",
+                                    "maximumError": "6mb"
+                                }
+                            ]
+                        },
+                        "development": {
+                            "optimization": false,
+                            "extractLicenses": false,
+                            "sourceMap": true
+                        }
+                    },
+                    "defaultConfiguration": "production"
+                },
+                "serve": {
+                    "builder": "@angular-devkit/build-angular:dev-server",
+                    "options": {
+                        "browserTarget": "app:build"
+                    },
+                    "configurations": {
+                        "proxy-mock": {
+                            "browserTarget": "app:build:development",
+                            "proxyConfig": "proxy-mock.conf.json"
+                        },
+                        "production": {
+                            "browserTarget": "app:build:production"
+                        },
+                        "development": {
+                            "browserTarget": "app:build:development"
+                        }
+                    },
+                    "defaultConfiguration": "development"
+                },
+                "test": {
+                    "builder": "@angular-devkit/build-angular:karma",
+                    "options": {
+                        "polyfills": ["zone.js", "zone.js/testing"],
+                        "tsConfig": "src/tsconfig.spec.json",
+                        "karmaConfig": "src/karma.conf.js",
+                        "inlineStyleLanguage": "scss"
+                    }
+                },
+                "lint": {
+                    "builder": "@angular-eslint/builder:lint",
+                    "options": {
+                        "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"],
+                        "eslintConfig": "src/.eslintrc.json"
+                    }
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,5 @@
+{
+  "name": "app",
+  "integrations": {},
+  "type": "angular"
+}

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

@@ -0,0 +1,33 @@
+{
+    "$schema": "./node_modules/@angular/service-worker/config/schema.json",
+    "index": "/index.html",
+    "appData": {
+        "version": "1.1.2"
+    },
+    "assetGroups": [
+        {
+            "name": "app",
+            "installMode": "prefetch",
+            "resources": {
+                "files": [
+                    "/favicon.ico",
+                    "/index.html",
+                    "/manifest.webmanifest",
+                    "/*.css",
+                    "/*.js"
+                ]
+            }
+        },
+        {
+            "name": "assets",
+            "installMode": "lazy",
+            "updateMode": "prefetch",
+            "resources": {
+                "files": [
+                    "/assets/**",
+                    "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
+                ]
+            }
+        }
+    ]
+}

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

@@ -0,0 +1,27 @@
+{
+    "name": "eui-angular-app",
+    "version": "21.0.0-alpha.40",
+    "license": "EUPL-1.1",
+    "scripts": {
+        "ng": "ng",
+        "start-mock-server": "nodemon --watch ./mock ./mock/server.js",
+        "start-serve": "eui-scripts serve-app --configuration=proxy-mock",
+        "start": "npm-run-all --parallel start-mock-server start-serve",
+        "start-proxy": "eui-scripts serve-app --configuration=proxy",
+        "start-local": "eui-scripts serve-app",
+        "build": "eui-scripts build-app",
+        "build-dev": "eui-scripts build-app --configuration=development --configEnvTarget=DEV",
+        "build-prod": "eui-scripts build-app --configuration=production-optimized --configEnvTarget=PROD",
+        "build-prod-skip-test": "eui-scripts build-app --configuration=production-optimized --configEnvTarget=PROD --skipTest",
+        "build-prod-stats": "eui-scripts build-app --configuration=production-optimized --configEnvTarget=PROD --statsJson",
+        "app:build": "eui-scripts build-app",
+        "app:inject-config": "eui-scripts inject-config-app",
+        "generate-changelog": "eui-scripts generate-changelog"
+    },
+    "private": true,
+    "dependencies": {
+        "@eui/deps-base": "18.2.20",
+        "@eui/mobile-core": "18.1.3",
+        "@eui/mobile-styles": "18.1.3"
+    }
+}

package/lib/skeletons/_angular/base-mobile/src/app/app-routing.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [
+    { path: '', redirectTo: 'screen/home', pathMatch: 'full' },
+    { path: 'index.jsp', redirectTo: 'screen/home' },
+    { path: 'screen/home', loadChildren: () => import('./features/home/home.module').then(m => m.Module) },
+    { path: 'screen/module1', loadChildren: () => import('./features/module1/module1.module').then(m => m.Module) },
+    { path: 'screen/module2', loadChildren: () => import('./features/module2/module2.module').then(m => m.Module) },
+    { path: 'screen/about', loadChildren: () => import('./features/about/about.module').then(m => m.Module) },
+];
+
+@NgModule({
+    imports: [
+        RouterModule.forRoot(routes),
+    ],
+})
+export class AppRoutingModule {}

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

@@ -0,0 +1,73 @@
+import { Inject, Injectable } from '@angular/core';
+import {
+    CONFIG_TOKEN,
+    UserService,
+    EuiAppConfig,
+    UserDetails,
+    UserPreferences,
+    I18nService,
+} from '@eui/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable, of, zip, catchError } from 'rxjs';
+import { switchMap } from 'rxjs/operators';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class AppStarterService {
+    defaultUserPreferences: UserPreferences;
+
+    constructor(
+        protected userService: UserService,
+        protected i18nService: I18nService,
+        @Inject(CONFIG_TOKEN) private config: EuiAppConfig,
+        protected http: HttpClient,
+    ) {
+    }
+
+    start(): Observable<any> {
+
+        return zip(
+            this.initUserService().pipe(
+                switchMap((userStatus) => {
+                    return this.i18nService.init();
+                }),
+            ),
+        );
+    }
+
+    /**
+     * Fetches user details,
+     * create user: UserState object
+     * then initialise to the UserService on run time
+     */
+    initUserService(): Observable<any> {
+        return zip(
+            this.fetchUserDetails(),
+        ).pipe(
+            switchMap(([userDetails]) => {
+                return this.userService.init(userDetails);
+            }),
+            catchError((err) => {
+                return of(null);
+            })
+        );
+    }
+
+    /**
+     * Fetches user details
+     */
+    private fetchUserDetails(): Observable<UserDetails> {
+        // const url = this.config.modules.your_custom_module.your_custom_endpoint
+        const moduleCoreApi = this.config.modules.core;
+        const url = `${moduleCoreApi.base}${moduleCoreApi.userDetails}`;
+        const user = { userId: 'anonymous' };
+
+        if (!url) {
+            return of(user);
+        }
+
+        return this.http.get<UserDetails>(url)
+            .pipe(catchError(err => { return of(null); }));
+    }
+}

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

@@ -0,0 +1,47 @@
+<euim-app>
+    <euim-sidebar id="mainSidebar">
+        <euim-user-profile>
+            <euim-user-profile-avatar>
+                <euim-avatar color="branding" size="m" fill="solid">
+                    <euim-avatar-icon>
+                        <ion-icon name="person-circle"></ion-icon>
+                    </euim-avatar-icon>
+                </euim-avatar>
+            </euim-user-profile-avatar>
+            <euim-user-profile-infos>
+                <euim-user-profile-infos-item>
+                    <div euimLabel euimLabelTitle>John Doe</div>
+                </euim-user-profile-infos-item>
+                <euim-user-profile-infos-item>
+                    <div euimLabel euimLabelSubTitle>DG DIGIT</div>
+                </euim-user-profile-infos-item>
+            </euim-user-profile-infos>
+            <euim-user-profile-action>
+                <euim-language-selector color="branding"></euim-language-selector>
+            </euim-user-profile-action>
+        </euim-user-profile>
+        <euim-sidebar-content>
+            <ng-container *ngFor="let menuItem of sidebarItems">
+                <ion-item-divider *ngIf="menuItem?.isSection">
+                    <ion-label>{{menuItem?.label}}</ion-label>
+                </ion-item-divider>
+                <ion-item *ngIf="!menuItem?.isSection"
+                          (click)="onItemClick(menuItem)"
+                          button
+                          lines="none">
+                    <ion-icon [color]="menuItem.iconColor" [name]="menuItem.icon"
+                              slot="start"></ion-icon>
+                    <ion-label>
+                        <div euimDark euimLabel>{{menuItem?.label}}</div>
+                    </ion-label>
+                </ion-item>
+            </ng-container>
+        </euim-sidebar-content>
+        <ion-footer>
+            <ion-item>
+                <div euimDark euimLabel euimSizeM>eUl/Mobile</div>
+                <div euimDefault euimLabel euimSizeS slot="end"></div>
+            </ion-item>
+        </ion-footer>
+    </euim-sidebar>
+</euim-app>

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

@@ -0,0 +1,81 @@
+import { Component, OnDestroy } from '@angular/core';
+import { Store } from '@ngrx/store';
+import {
+    getUserState,
+    UserState,
+} from '@eui/core';
+import { Observable, Subscription } from 'rxjs';
+import { NavController } from "@ionic/angular";
+
+@Component({
+    selector: 'app-root',
+    templateUrl: './app.component.html',
+})
+export class AppComponent implements OnDestroy {
+    userInfos: UserState;
+    // Observe state changes
+    userState: Observable<UserState>;
+    // an array to keep all subscriptions and easily unsubscribe
+    subs: Subscription[] = [];
+
+    public sidebarItems: MenuItem[] = [
+        {
+            label: 'Home', url: 'screen/home', icon: 'home-outline',
+            iconColor: 'dark',
+        },
+        {
+            isSection: true,
+            label: 'MODULE 1',
+        },
+        { label: 'Module Page', url: 'screen/module1',
+        icon: 'document-outline', iconColor: 'dark', },
+        { label: 'Page 1', url: 'screen/module1/page1',
+            icon: 'document-outline', iconColor: 'dark', },
+        { label: 'Page 2', url: 'screen/module1/page2',
+            icon: 'document-outline', iconColor: 'dark', },
+        {
+            isSection: true,
+            label: 'MODULE 2',
+        },
+        { label: 'Module Page', url: 'screen/module2',
+            icon: 'document-outline', iconColor: 'dark', },
+        {
+            label: 'About this app', url: 'screen/about',
+            icon: 'phone-portrait-outline', iconColor: 'dark',
+        },
+
+    ];
+
+    constructor(
+        private store: Store<any>,
+        private navCtrl:NavController,
+    ) {
+            this.userState = this.store.select(getUserState);
+            this.subs.push(this.userState.subscribe((user: UserState) => {
+                this.userInfos = { ...user };
+            }));
+    }
+
+    ngOnDestroy() {
+        this.subs.forEach((s: Subscription) => s.unsubscribe());
+    }
+
+    onItemClick(menuItem: MenuItem): void {
+        if (menuItem && menuItem.url) {
+            if (menuItem.url.indexOf('http') > -1) {
+                window.open(menuItem.url, '_blank');
+            } else {
+                this.navCtrl.navigateRoot(menuItem.url).then();
+            }
+        }
+    }
+
+}
+
+export interface MenuItem {
+    icon?: string;
+    iconColor?: string;
+    label: string;
+    url?: string;
+    isSection?: boolean;
+}

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

@@ -0,0 +1,81 @@
+/* pre-v19 - ignore this file
+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';
+
+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-mobile/src/app/app.module.ts

@@ -0,0 +1,44 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { APP_INITIALIZER, NgModule } from '@angular/core';
+
+import { AppRoutingModule } from './app-routing.module';
+import { AppComponent } from './app.component';
+import { CoreModule } from './core/core.module';
+import { AppStarterService } from './app-starter.service';
+import { ServiceWorkerModule } from '@angular/service-worker';
+
+@NgModule({
+    declarations: [
+        AppComponent,
+    ],
+    imports: [
+        BrowserModule,
+        BrowserAnimationsModule,
+        CoreModule,
+        AppRoutingModule,
+        ServiceWorkerModule.register('ngsw-worker.js', {
+            enabled: false,
+            // Register the ServiceWorker as soon as the app is stable
+            // or after 30 seconds (whichever comes first).
+            registrationStrategy: 'registerWhenStable:30000'
+        }),
+    ],
+    providers: [
+        AppStarterService,
+        {
+            provide: APP_INITIALIZER,
+            useFactory: (appStarterService) => {
+                return () => new Promise<void>((resolve) => {
+                    appStarterService.start().subscribe(() => resolve());
+                });
+            },
+            deps: [AppStarterService],
+            multi: true
+        },
+    ],
+    bootstrap: [
+        AppComponent,
+    ],
+})
+export class AppModule {}