@eui/cli 15.0.0-rc.18 → 15.0.0-rc.19

package/.version.properties

@@ -1 +1 @@
-15.0.0-rc.18
+15.0.0-rc.19

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

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

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,6 +1,6 @@
 {
     "name": "eui-angular-app",
-    "version": "15.0.0-rc.18",
+    "version": "15.0.0-rc.19",
     "license": "EUPL-1.1",
     "scripts": {
         "ng": "ng",
@@ -20,9 +20,9 @@
     },
     "private": true,
     "dependencies": {
-        "@eui/deps-base": "15.0.0-rc.18",
-        "@eui/mobile-core": "14.1.0-snapshot-1670248435917",
-        "@eui/mobile-styles": "14.1.0-snapshot-1670248435917"
+        "@eui/deps-base": "15.0.0-rc.19",
+        "@eui/mobile-core": "14.1.0-snapshot-1670348200908",
+        "@eui/mobile-styles": "14.1.0-snapshot-1670348200908"
     },
     "browserslist": [
         "last 2 chrome versions",

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,6 +1,6 @@
 {
     "name": "eui-angular-app",
-    "version": "15.0.0-rc.18",
+    "version": "15.0.0-rc.19",
     "license": "EUPL-1.1",
     "scripts": {
         "ng": "ng",
@@ -18,6 +18,6 @@
     },
     "private": true,
     "dependencies": {
-        "@eui/deps-base": "15.0.0-rc.18"
+        "@eui/deps-base": "15.0.0-rc.19"
     }
 }

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

@@ -1,6 +1,6 @@
 {
     "name": "eui-angular-app",
-    "version": "15.0.0-rc.18",
+    "version": "15.0.0-rc.19",
     "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.18"
+        "@eui/deps-base": "15.0.0-rc.19"
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@eui/cli",
-    "version": "15.0.0-rc.18",
+    "version": "15.0.0-rc.19",
     "tag": "next",
     "license": "EUPL-1.1",
     "description": "eUI CLI app generator",