@eui/cli 15.0.0-rc.2 → 15.0.0-rc.20

package/.version.properties

@@ -1 +1 @@
-15.0.0-rc.2
+15.0.0-rc.20

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

@@ -56,8 +56,8 @@
             ],
             "styles": [
                 "node_modules/@eui/styles/dist/styles/eui.css",
-                "node_modules/@eui/styles/dist/styles/eui-utilities.css",
-                "node_modules/@eui/styles/dist/styles/eui-bootstrap.css",
+                "node_modules/@eui/styles/dist/styles/eui-extra-utilities.css",
+                "node_modules/@eui/styles/dist/styles/eui-legacy-bootstrap.css",
                 "node_modules/@eui/styles/dist/styles/eui-legacy-icons-font.css",
                 "src/styles.scss"
             ]

package/lib/skeletons/_angular/base/mock/server.js

@@ -1,16 +1,21 @@
 const express = require('express');
 const bodyParser = require('body-parser');
 const app = express();
-const low = require('lowdb')
-const FileAsync = require('lowdb/adapters/FileAsync')
-const adapter = new FileAsync('mock/db/db.json')
-const db = low(adapter)
+const low = require('lowdb');
+const FileAsync = require('lowdb/adapters/FileAsync');
+const adapter = new FileAsync('mock/db/db.json');
+const db = low(adapter);
+const cors = require('cors');
 const port = 3000;
 
 app.use(bodyParser.urlencoded({ extended: true }));
+app.use(cors({
+    origin: 'http://127.0.0.1:8080', // adapt to your need
+    credentials: true,
+}));
 
 require('./app/routes')(app, db);
 
 app.listen(port, () => {
-  console.log('We are live on ' + port);
+    console.log('We are live on ' + port);
 });

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

@@ -1,11 +1,11 @@
 {
     "name": "eui-angular-app",
-    "version": "15.0.0-rc.2",
+    "version": "15.0.0-rc.20",
     "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 --maxSpaceSize",
+        "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",
@@ -20,6 +20,6 @@
     },
     "private": true,
     "dependencies": {
-        "@eui/deps-base": "15.0.0-rc.2"
+        "@eui/deps-base": "15.0.0-rc.20"
     }
 }

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

@@ -1,4 +1,4 @@
-<eui-app [userInfos]="userInfos?.fullName" [isSidebarOpen]="true">
+<eui-app [userInfos]="userInfos?.fullName">
     <eui-app-toolbar>
         <eui-toolbar>
             <eui-toolbar-logo></eui-toolbar-logo>
@@ -8,10 +8,10 @@
                 <eui-toolbar-item-user-profile>
                     <eui-user-profile-menu>
                         <eui-user-profile-menu-item>
-                            <eui-icon iconClass="eui-icon-person-thin"></eui-icon> {{ 'eui.my-profile-informations' | translate }}
+                            <eui-icon-svg icon="old-eui-person-thin"></eui-icon-svg> {{ 'eui.my-profile-informations' | translate }}
                         </eui-user-profile-menu-item>
                         <eui-user-profile-menu-item>
-                            <eui-icon iconClass="eui-icon-logout-thin"></eui-icon> {{ 'eui.sign-out' | translate }}
+                            <eui-icon-svg icon="old-eui-logout-thin"></eui-icon-svg> {{ 'eui.sign-out' | translate }}
                         </eui-user-profile-menu-item>
                     </eui-user-profile-menu>
                 </eui-toolbar-item-user-profile>

package/lib/skeletons/_angular/base/src/app/core/core.module.ts

@@ -14,6 +14,7 @@ import {
     CoreModuleEffects,
     EUI_CONFIG_TOKEN,
 } from '@eui/core';
+import { EuiLayoutModule } from '@eui/components/layout';
 
 import { appConfig } from '../../config/index';
 import { environment } from '../../environments/environment';
@@ -24,6 +25,7 @@ import { SharedModule } from '@shared/shared.module';
 
 @NgModule({
     imports: [
+        EuiLayoutModule,
         SharedModule,
         HttpClientModule,
         EuiCoreModule.forRoot(),
@@ -35,6 +37,7 @@ import { SharedModule } from '@shared/shared.module';
     declarations: [
     ],
     exports: [
+        EuiLayoutModule,
         SharedModule,
     ],
     providers: [

package/lib/skeletons/_angular/base/src/app/shared/shared.module.ts

@@ -1,43 +1,45 @@
+// Angular
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 // Common 3rd party module used accross the app
 import { TranslateModule } from '@ngx-translate/core';
 
 // eUI specific modules - commonly used accross the app - prefered way
 // keep here to avoid imports within features modules
-import { EuiLayoutModule } from '@eui/components/layout';
 import { EuiPageModule } from '@eui/components/eui-page';
-import { EuiIconModule } from '@eui/components/atoms/eui-icon';
+import { EuiIconModule } from '@eui/components/eui-icon';
 
-// import ALL eUI components (Warning : increase bundle size)
+// import ALL eUI components
 // import { EuiAllModule } from '@eui/components';
-// import { UxAllModule } from '@eui/components/legacy'; // if declared, add eui-legacy.css in angular.json styles config
 
-@NgModule({
-    imports: [
-        CommonModule,
-        TranslateModule,
+// if declared, add eui-legacy.css + eui-legacy-utilities.css in angular.json styles config
+// import { UxAllModule } from '@eui/components/legacy';
+
+const MODULES = [
+    CommonModule,
+    FormsModule, ReactiveFormsModule,
+
+    TranslateModule,
+
+    // put here commonly used eUI modules components throughout the application
+    EuiPageModule,
+    EuiIconModule,
 
-        EuiLayoutModule,
-        EuiPageModule,
-        EuiIconModule,
+    // in case of you really want to import all eUI components, see commented imports above
+    // EuiAllModule,
+    // UxAllModule,
+];
 
-        // EuiAllModule,
-        // UxAllModule,
+@NgModule({
+    imports: [
+        ...MODULES,
     ],
     declarations: [
     ],
     exports: [
-        CommonModule,
-        TranslateModule,
-
-        EuiLayoutModule,
-        EuiPageModule,
-        EuiIconModule,
-
-        // EuiAllModule,
-        // UxAllModule,
+        ...MODULES,
     ]
 })
 export class SharedModule {}

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

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

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

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

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

@@ -1,11 +1,11 @@
 {
     "name": "eui-angular-app",
-    "version": "15.0.0-rc.2",
+    "version": "15.0.0-rc.20",
     "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 --maxSpaceSize",
+        "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",
@@ -20,8 +20,15 @@
     },
     "private": true,
     "dependencies": {
-        "@eui/deps-base": "15.0.0-rc.2",
-        "@eui/mobile-core": "14.1.0-snapshot-1667838676751",
-        "@eui/mobile-styles": "14.1.0-snapshot-1667838676751"
-    }
+        "@eui/deps-base": "15.0.0-rc.20",
+        "@eui/mobile-core": "14.1.0-snapshot-1670348200908",
+        "@eui/mobile-styles": "14.1.0-snapshot-1670348200908"
+    },
+    "browserslist": [
+        "last 2 chrome versions",
+        "last 2 firefox versions",
+        "last 1 edge version",
+        "Firefox ESR"
+    ],
+    "resolutions": {}
 }

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

@@ -0,0 +1,17 @@
+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) },
+];
+
+@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

@@ -3,23 +3,25 @@
         <euim-app-sidebar-header>
             <euim-user-profile>
                 <euim-user-profile-avatar>
-                    <euim-avatar-icon color="info" size="l" fill="solid">
-                        <ion-icon icon="person"></ion-icon>
+                    <euim-avatar-icon color="primary" size="m" fill="solid">
+                        <ion-icon icon="person-circle"></ion-icon>
                     </euim-avatar-icon>
                 </euim-user-profile-avatar>
                 <euim-user-profile-infos >
                     <euim-user-profile-infos-item>
-                        <p euimLabel euimLabelTitle>{{userInfos?.fullName}}</p>
+                        <p euimLabel></p>
+                    </euim-user-profile-infos-item>
+                    <euim-user-profile-infos-item>
+                        <p euimLabel></p>
                     </euim-user-profile-infos-item>
                 </euim-user-profile-infos>
                 <euim-user-profile-action>
-                    <ion-button fill="clear">
-                        <ion-icon name="settings-sharp" ></ion-icon>
-                    </ion-button>
+                    <euim-language-selector euimPrimary></euim-language-selector>
                 </euim-user-profile-action>
             </euim-user-profile>
         </euim-app-sidebar-header>
 
-        <euim-app-sidebar-menu [items]="sidebarItems"></euim-app-sidebar-menu>
+        <euim-app-sidebar-menu [items]="sidebarItems" (itemClick)="onItemClick($event)"></euim-app-sidebar-menu>
+
     </euim-app-sidebar>
 </euim-app>

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

@@ -0,0 +1,55 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Store } from '@ngrx/store';
+import {
+    getUserState,
+    UserState,
+} from '@eui/core';
+import { Observable, Subscription } from 'rxjs';
+import { EuimMenuItem } from '@eui/mobile-core';
+
+@Component({
+    selector: 'app-root',
+    templateUrl: './app.component.html',
+})
+export class AppComponent implements OnInit, OnDestroy {
+    userInfos: UserState;
+    // Observe state changes
+    userState: Observable<UserState>;
+    // an array to keep all subscriptions and easily unsubscribe
+    subs: Subscription[] = [];
+
+    sidebarItems = [
+        { label: 'Home', url: 'screen/home', iconClass: 'eui-icon-home' },
+        { label: 'Module 1', url: 'screen/module1', iconClass: 'eui-icon-work', children: [
+            { label: 'page 1', url: 'screen/module1/page1' },
+            { label: 'page 2', url: 'screen/module1/page2' },
+        ] },
+        { label: 'Module 2', url: 'screen/module2', iconClass: 'eui-icon-work' },
+    ];
+    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' },
+    ];
+
+    constructor(
+        private store: Store<any>,
+    ) {
+            this.userState = this.store.select(getUserState);
+            this.subs.push(this.userState.subscribe((user: UserState) => {
+                this.userInfos = { ...user };
+            }));
+    }
+
+    ngOnInit() {
+    }
+
+    ngOnDestroy() {
+        this.subs.forEach((s: Subscription) => s.unsubscribe());
+    }
+
+    onItemClick(item: EuimMenuItem) {
+        // Handle any menu item click
+    }
+}

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 {}

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

@@ -4,7 +4,7 @@ import { StoreModule } from '@ngrx/store';
 import { EffectsModule } from '@ngrx/effects';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 
-import { HTTP_INTERCEPTORS } from '@angular/common/http';
+import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
 
 import { IonicModule } from '@ionic/angular';
 
@@ -28,6 +28,7 @@ import { SharedModule } from '@shared/shared.module';
 
 @NgModule({
     imports: [
+        HttpClientModule,
         SharedModule,
         EuiCoreModule.forRoot(),
         EffectsModule.forRoot([...CoreModuleEffects]),

package/lib/skeletons/_angular/base-mobile/src/app/core/reducers/index.ts

@@ -0,0 +1,31 @@
+import { InjectionToken } from '@angular/core';
+import { MetaReducer } from '@ngrx/store';
+import { storeFreeze } from 'ngrx-store-freeze';
+import { reducers as coreReducers, CoreState, getAppState, localStorageSync } from '@eui/core';
+
+import { environment } from '../../../environments/environment';
+
+export const REDUCER_TOKEN = new InjectionToken<any>('Registered Reducers');
+
+/**
+ * Define here your app state
+ *
+ * [IMPORTANT]
+ * There are some **reserved** slice of the state
+ * that you **can not** use in your application ==> app |user | notification
+ */
+// eslint-disable-next-line
+export interface AppState extends CoreState {
+    // [key: string]: fromTaskManager.State | any;
+}
+
+/**
+ * Define here the reducers of your app
+ */
+const rootReducer = Object.assign({}, coreReducers, {
+    // [fromTaskManager.namespace]: fromTaskManager.reducers,
+});
+
+export const getReducers = () => rootReducer;
+
+export const metaReducers: MetaReducer<AppState>[] = !environment.production ? [localStorageSync, storeFreeze] : [localStorageSync];

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

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { HomeComponent } from './home.component';
+
+const routes: Routes = [
+    { path: '', component: HomeComponent },
+];
+
+@NgModule({
+    imports: [
+        RouterModule.forChild(routes)
+    ],
+})
+export class HomeRoutingModule {}

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

@@ -1,8 +1,14 @@
-<euim-page>
-    <euim-page-header hasSidebarTrigger=true hasLanguageSelector=true>
-        <euim-page-header-title>eUI mobile app</euim-page-header-title>
-    </euim-page-header>
+<ion-header>
+    <ion-toolbar color="primary">
+        <euim-toolbar [hasSidebarTrigger]="true" [hasLanguageSelector]="true">
+            <euim-toolbar-title>eUI mobile showcase</euim-toolbar-title>
+        </euim-toolbar>
+    </ion-toolbar>
+</ion-header>
 
-    <h2>Welcome to eUI mobile app</h2>
+<ion-content>
+    <div class="ion-padding">
+            Welcome to eUI mobile app
+    </div>
 
-</euim-page>
+</ion-content>

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

@@ -0,0 +1,11 @@
+import { Component, Inject } from '@angular/core';
+import { CONFIG_TOKEN, EuiAppConfig } from '@eui/core';
+
+@Component({
+    templateUrl: './home.component.html',
+})
+export class HomeComponent {
+    constructor(@Inject(CONFIG_TOKEN) private config: EuiAppConfig) {
+        console.log(config);
+    }
+}

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

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+
+import { SharedModule } from '../../shared/shared.module';
+
+import { HomeRoutingModule } from './home-routing.module';
+
+import { HomeComponent } from './home.component';
+
+@NgModule({
+    imports: [
+        SharedModule,
+        HomeRoutingModule,
+    ],
+    declarations: [
+        HomeComponent,
+    ],
+})
+export class Module {}

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

@@ -1,8 +1,11 @@
-<euim-page>
-    <euim-page-header backButtonDefaultHref="/screen/module1">
-        <euim-page-header-title>Module 1 - Page 1</euim-page-header-title>
-    </euim-page-header>
+<ion-header>
+    <ion-toolbar color="primary">
+        <euim-toolbar backButtonDefaultHref="/screen/module1">
+            <euim-toolbar-title>Module 1 - Page 1</euim-toolbar-title>
+        </euim-toolbar>
+    </ion-toolbar>
+</ion-header>
 
+<ion-content class="ion-padding">
     page content
-
-</euim-page>
+</ion-content>

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

@@ -1,8 +1,11 @@
-<euim-page>
-    <euim-page-header backButtonDefaultHref="/screen/module1">
-        <euim-page-header-title>Module 1 - Page 2</euim-page-header-title>
-    </euim-page-header>
+<ion-header>
+    <ion-toolbar color="primary">
+        <euim-toolbar backButtonDefaultHref="/screen/module1">
+            <euim-toolbar-title>Module 1 - Page 2</euim-toolbar-title>
+        </euim-toolbar>
+    </ion-toolbar>
+</ion-header>
 
+<ion-content class="ion-padding">
     page content
-
-</euim-page>
+</ion-content>

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

@@ -1,12 +1,15 @@
-<euim-page>
-    <euim-page-header hasSidebarTrigger=true>
-        <euim-page-header-title>Module 1 - home</euim-page-header-title>
-    </euim-page-header>
+<ion-header>
+    <ion-toolbar color="primary">
+        <euim-toolbar [hasSidebarTrigger]="true">
+            <euim-toolbar-title>Module 2 - home</euim-toolbar-title>
+        </euim-toolbar>
+    </ion-toolbar>
+</ion-header>
 
+<ion-content class="ion-padding">
     page content
-
     <br><br>
     <a (click)="onNavigate('/screen/module1/page1')">Goto page 1</a>
     <br><br>
     <a (click)="onNavigate('/screen/module1/page2')">Goto page 2</a>
-</euim-page>
+</ion-content>

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

@@ -1,8 +1,11 @@
-<euim-page>
-    <euim-page-header hasSidebarTrigger=true>
-        <euim-page-header-title>Module 2 - home</euim-page-header-title>
-    </euim-page-header>
+<ion-header>
+    <ion-toolbar color="primary">
+        <euim-toolbar [hasSidebarTrigger]="true">
+            <euim-toolbar-title>Module 2 - home</euim-toolbar-title>
+        </euim-toolbar>
+    </ion-toolbar>
+</ion-header>
 
+<ion-content class="ion-padding">
     page content
-
-</euim-page>
+</ion-content>

package/lib/skeletons/_angular/base-mobile/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-mobile/src/index.html

@@ -0,0 +1,27 @@
+<!doctype html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <title>Application name</title>
+  <base href="/">
+    <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
+    <meta name="format-detection" content="telephone=no"/>
+    <meta name="msapplication-tap-highlight" content="no"/>
+    <link rel="manifest" href="manifest.webmanifest">
+
+    <link rel="icon" type="image/x-icon" href="favicon.ico">
+
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
+</head>
+
+<body>
+  <app-root>
+    <div id="loader-wrapper">
+      <div id="loader"></div>
+    </div>
+  </app-root>
+</body>
+
+</html>

package/lib/skeletons/_angular/base-mobile/src/manifest.webmanifest

@@ -0,0 +1,51 @@
+{
+  "name": "app",
+  "short_name": "app",
+  "theme_color": "#1976d2",
+  "background_color": "#fafafa",
+  "display": "standalone",
+  "scope": "./",
+  "start_url": "./",
+  "icons": [
+    {
+      "src": "assets/icons/icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/icons/icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/icons/icon-128x128.png",
+      "sizes": "128x128",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/icons/icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/icons/icon-152x152.png",
+      "sizes": "152x152",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/icons/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/icons/icon-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/icons/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}

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

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

package/lib/skeletons/_angular/options/openid-jwt/package.json

@@ -1,23 +1,23 @@
 {
     "name": "eui-angular-app",
-    "version": "15.0.0-rc.2",
+    "version": "15.0.0-rc.20",
     "license": "EUPL-1.1",
     "scripts": {
         "ng": "ng",
         "start-mock-server": "nodemon --watch ./mock ./mock/server.js",
-        "start-serve": "eui-scripts serve-app --openid --maxSpaceSize",
+        "start-serve": "eui-scripts serve-app --openid --configuration=proxy-mock --configEnvTarget=local-mock",
         "start": "npm-run-all --parallel start-mock-server start-serve",
-        "start-proxy": "eui-scripts serve-app --openid --maxSpaceSize",
+        "start-proxy": "eui-scripts serve-app --openid",
         "start-openid": "eui-scripts serve-app --openid --configEnvTarget=local",
         "build": "eui-scripts build-app",
-        "build-prod-openid-dev": "eui-scripts build-app --configuration=production-optimized --openid --configEnvTarget=dev",
-        "build-prod-openid-prd": "eui-scripts build-app --configuration=production-optimized --openid --configEnvTarget=prod",
+        "build-openid-dev": "eui-scripts build-app --configuration=production-optimized --openid --configEnvTarget=dev",
+        "build-openid-prod": "eui-scripts build-app --configuration=production-optimized --openid --configEnvTarget=prod",
         "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": "15.0.0-rc.2"
+        "@eui/deps-base": "15.0.0-rc.20"
     }
 }

package/lib/skeletons/_angular/options/openid-jwt/src/app/core/core.module.ts

@@ -3,8 +3,8 @@ import { TranslateModule } from '@ngx-translate/core';
 import { StoreModule } from '@ngrx/store';
 import { EffectsModule } from '@ngrx/effects';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
+import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
 
-import { HTTP_INTERCEPTORS } from '@angular/common/http';
 import {
     CachePreventionInterceptor,
     CorsSecurityInterceptor,
@@ -27,6 +27,7 @@ import { SharedModule } from '@shared/shared.module';
 @NgModule({
     imports: [
         SharedModule,
+        HttpClientModule,
         EuiCoreModule.forRoot(),
         EffectsModule.forRoot([...CoreModuleEffects]),
         TranslateModule.forRoot(translateConfig),
@@ -46,7 +47,7 @@ import { SharedModule } from '@shared/shared.module';
         },
         {
             provide: EUI_CONFIG_TOKEN,
-            useValue: { appConfig: appConfig, environment: environment }
+            useValue: { appConfig, environment },
         },
         {
             // Sets the withCredentials on Ajax Request to send the JSESSIONID cookie to another domain.

package/lib/skeletons/_angular/options/openid-jwt/src/assets/config/env-json-config-local-mock.json

@@ -0,0 +1,10 @@
+{
+    "openIdConnect": {
+        "enabled": false
+    },
+    "modules": {
+        "core": {
+            "userDetails": "/user-details"
+        }
+    }
+}

package/lib/skeletons/web-symfony/myapp-web/package.json

@@ -1,6 +1,6 @@
 {
     "name": "eui-angular-app",
-    "version": "15.0.0-rc.2",
+    "version": "15.0.0-rc.20",
     "license": "EUPL-1.1",
     "description": "eUI JEE Symfony app scripts",
     "scripts": {
@@ -19,6 +19,6 @@
     },
     "private": true,
     "dependencies": {
-        "@eui/deps-base": "15.0.0-rc.2"
+        "@eui/deps-base": "15.0.0-rc.20"
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@eui/cli",
-    "version": "15.0.0-rc.2",
+    "version": "15.0.0-rc.20",
     "tag": "next",
     "license": "EUPL-1.1",
     "description": "eUI CLI app generator",
@@ -13,13 +13,13 @@
         "url": "https://citnet.tech.ec.europa.eu/CITnet/stash/projects/CSDR/repos/eui"
     },
     "dependencies": {
-        "@eui/tools": "5.3.90"
+        "@eui/tools": "6.2.43"
     },
     "preferGlobal": true,
     "homepage": "https://eui.ecdevops.eu",
     "author": "ec.europa.eui@gmail.com",
     "engines": {
-        "node": "^14.15.0 || >=16.10.0",
+        "node": "^14.20.0 || >=16.13.0",
         "yarn": ">=1.22.4 <2",
         "npm": "Please use yarn instead of NPM to install dependencies"
     }