@eui/cli 16.0.0-next.1 → 16.0.0-next.10

package/.version.properties

@@ -1 +1 @@
-16.0.0-next.1
+16.0.0-next.10

package/bin/eui-cli.js

@@ -48,21 +48,7 @@ if (args.targetPath) {
 if (args.v) {
   console.info('Current eUI CLI version installed : ' + config.version);
 
-// } else if (args.m) {
-//   // module/sub-package generator
-//   return generators.moduleGenerate({
-//     inputConfig: inputConfig,
-//     targetPath: targetPath
-//   });
-
-// } else if (args.f) {
-//   return generators.featureGenerate({
-//     inputConfig: inputConfig,
-//     targetPath: targetPath
-//   });
-
 } else {
-  // Application generator
   return generators.appGenerate({
     inputConfig: inputConfig,
     targetPath: targetPath

package/lib/build.js

@@ -141,9 +141,15 @@ const copyAngular = (targetPath, cliConfig, overwrite = true) => {
     .then(() => {
       if (cliConfig.appOptions && cliConfig.appOptions.length !== 0) {
         cliConfig.appOptions.forEach((item) => {
-          console.log('Applying option : ' + item);
-          tools.copydir(config.optionsPath[item], targetPath, true);
+          if (item !== 'ecl') {
+            console.log('Applying option : ' + item);
+            tools.copydir(config.optionsPath[item], targetPath, true);
+          }
         })
+        if (cliConfig.appOptionsEclTheme) {
+          console.log(`eUI ECL theme selected : ` + cliConfig.appOptionsEclTheme);
+          tools.copydir(config.optionsPath[cliConfig.appOptionsEclTheme], targetPath, true);
+        }
       }
       return Promise.resolve();
     })

package/lib/cli.js

@@ -5,6 +5,7 @@ const defaultConfig = {
   appScope: '@app',
   appType: 'angular',
   appOptions: [],
+  appOptionsEclTheme: 'ecl-ec',
   appFeatures: [],
   groupId: 'ec.europa.digit',
   artifactId: 'myapp',
@@ -79,13 +80,27 @@ module.exports.start = (options) => {
           message: 'Select one or more additional configuration options :',
           choices: [
             { name: 'OpenId Connect JWT implementation', value: 'openid-jwt' },
-            { name: 'ECL app-shell template and configuration - for ec.europa.eu apps', value: 'ecl' },
+            { name: 'eUI ECL app-shell template and configuration - for ec.europa.eu apps', value: 'ecl' },
           ],
           when: function (answers) {
             return (answers.appType !== 'mobile');
           }
         },
 
+        {
+          type: 'list',
+          name: 'appOptionsEclTheme',
+          default: defaultConfig.appOptionsEclTheme,
+          message: 'Select which eUI ECL theme flavor you need :',
+          choices: [
+            { name: 'eUI ECL - EC theme', value: 'ecl-ec' },
+            { name: 'eUI ECL - EU theme', value: 'ecl-eu' },
+          ],
+          when: function (answers) {
+            return (answers.appOptions.includes('ecl'));
+          }
+        },
+
         {
           name: 'npmInstall',
           type: 'confirm',

package/lib/config.js

@@ -17,7 +17,8 @@ module.exports.webSymfonyPath = path.join(skeletonsPath, 'web-symfony');
 
 module.exports.optionsPath = {
     "openid-jwt": path.join(skeletonsPath, '_angular/options/openid-jwt'),
-    "ecl": path.join(skeletonsPath, '_angular/options/ecl'),
+    "ecl-ec": path.join(skeletonsPath, '_angular/options/ecl-ec'),
+    "ecl-eu": path.join(skeletonsPath, '_angular/options/ecl-eu'),
 };
 
 module.exports.version = version;

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

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

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

@@ -5,7 +5,8 @@
         "**/dist/**",
         "**/coverage/**",
         "**/e2e/**",
-        "**/test/**"
+        "**/test/**",
+        "**/testing/**"
     ],
     "overrides": [
         {
@@ -20,8 +21,9 @@
                 "createDefaultProgram": true
             },
             "extends": [
-                "plugin:@angular-eslint/ng-cli-compat",
-                "plugin:@angular-eslint/ng-cli-compat--formatting-add-on",
+                "eslint:recommended",
+                "plugin:@typescript-eslint/recommended",
+                "plugin:@angular-eslint/recommended",
                 "plugin:@angular-eslint/template/process-inline-templates"
             ],
             "rules": {

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

@@ -10,7 +10,7 @@ import { Observable, Subscription } from 'rxjs';
     selector: 'app-root',
     templateUrl: './app.component.html',
 })
-export class AppComponent implements OnInit, OnDestroy {
+export class AppComponent implements OnDestroy {
     userInfos: UserState;
     // Observe state changes
     userState: Observable<UserState>;
@@ -42,9 +42,6 @@ export class AppComponent implements OnInit, OnDestroy {
             }));
     }
 
-    ngOnInit() {
-    }
-
     ngOnDestroy() {
         this.subs.forEach((s: Subscription) => s.unsubscribe());
     }

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

@@ -4,14 +4,14 @@
     <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">eUI
+        <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">European Commission's User Experience</a></strong> (UX@EC) and the adoption
+                    target="_blank" class="eui-u-text-link-external">European Commission's User Experience</a></strong> (UX@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
@@ -19,7 +19,7 @@
             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, My Workplace, Compass Corporate, Assmal, eProcurement, Sygma, Sedia, etc.</p>
+            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
@@ -27,8 +27,10 @@
 
         <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">DIGIT-EUI-SUPPORT@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">MS Teams EC_eUI team</a>
+                    href="mailto:DIGIT-EUI-SUPPORT@ec.europa.eu" class="eui-u-text-link">DIGIT-EUI-SUPPORT@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>

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

@@ -1,6 +1,6 @@
 {
     "name": "eui-angular-app",
-    "version": "16.0.0-next.1",
+    "version": "16.0.0-next.10",
     "license": "EUPL-1.1",
     "scripts": {
         "ng": "ng",
@@ -20,10 +20,8 @@
     },
     "private": true,
     "dependencies": {
-        "@eui/deps-base": "16.0.0-next.1",
-        "@eui/mobile-core": "14.2.0",
-        "@eui/mobile-styles": "14.2.0",
-        "@eui/ecl-core": "14.1.4"
-    },
-    "resolutions": {}
+        "@eui/deps-base": "16.0.0-next.10",
+        "@eui/mobile-core": "15.1.0",
+        "@eui/mobile-styles": "15.1.0"
+    }
 }

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

@@ -11,7 +11,7 @@ import { EuimMenuItem } from '@eui/mobile-core';
     selector: 'app-root',
     templateUrl: './app.component.html',
 })
-export class AppComponent implements OnInit, OnDestroy {
+export class AppComponent implements OnDestroy {
     userInfos: UserState;
     // Observe state changes
     userState: Observable<UserState>;
@@ -42,14 +42,12 @@ export class AppComponent implements OnInit, OnDestroy {
             }));
     }
 
-    ngOnInit() {
-    }
-
     ngOnDestroy() {
         this.subs.forEach((s: Subscription) => s.unsubscribe());
     }
 
     onItemClick(item: EuimMenuItem) {
         // Handle any menu item click
+        console.log(item);
     }
 }

package/lib/skeletons/_angular/options/{ecl → ecl-ec}/src/app/shared/shared.module.ts

@@ -1,21 +1,19 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
+import { CommonModule } from '@angular/common';
 import { TranslateModule } from '@ngx-translate/core';
 
 import { EclAllModule } from '@eui/ecl';
 
+const MODULES = [
+    RouterModule,
+    EclAllModule,
+    TranslateModule,
+    CommonModule,
+];
 @NgModule({
-    imports: [
-        RouterModule,
-        EclAllModule,
-        TranslateModule,
-    ],
-    declarations: [
-    ],
-    exports: [
-        RouterModule,
-        EclAllModule,
-        TranslateModule,
-    ],
+    imports: [...MODULES],
+    declarations: [],
+    exports: [...MODULES],
 })
 export class SharedModule {}

package/lib/skeletons/_angular/options/{ecl → ecl-ec}/src/config/global.ts

@@ -17,4 +17,7 @@ export const GLOBAL: GlobalConfig = {
             lang: 'en',
         },
     },
+    eui: {
+        theme: 'ec'
+    }
 };

package/lib/skeletons/_angular/options/ecl-eu/angular.json

@@ -0,0 +1,171 @@
+{
+    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+    "version": 1,
+    "newProjectRoot": "projects",
+    "defaultProject": "app",
+    "cli": {
+        "analytics": false
+    },
+    "projects": {
+      "app": {
+        "root": "",
+        "sourceRoot": "src",
+        "projectType": "application",
+        "prefix": "app",
+        "schematics": {
+          "@schematics/angular:component": {
+            "style": "scss"
+          },
+          "@schematics/angular:application": {
+            "strict": true
+          }
+        },
+        "architect": {
+          "build": {
+            "builder": "@angular-devkit/build-angular:browser",
+            "options": {
+              "outputPath": "dist",
+              "index": "src/index.html",
+              "main": "src/main.ts",
+              "polyfills": "src/polyfills.ts",
+              "tsConfig": "src/tsconfig.app.json",
+              "inlineStyleLanguage": "scss",
+              "assets": [
+                "src/favicon.ico",
+                "src/assets",
+                {
+                  "glob": "**/*",
+                  "input": "node_modules/@eui/core/assets/",
+                  "output": "./assets"
+                },
+                {
+                  "glob": "**/*",
+                  "input": "node_modules/@eui/styles-base/dist/assets/ecl",
+                  "output": "./assets/images/ecl"
+                },
+                {
+                  "glob": "**/*",
+                  "input": "node_modules/@eui/styles-base/dist/assets",
+                  "output": "./assets"
+                },
+                {
+                    "glob": "**/*",
+                    "input": "node_modules/@eui/ecl/assets/",
+                    "output": "./assets"
+                }
+              ],
+              "styles": [
+                "node_modules/@eui/styles/dist/styles/eui-ecl-eu.css",
+                "src/styles.scss"
+              ]
+            },
+            "configurations": {
+              "production": {
+                "fileReplacements": [
+                  {
+                    "replace": "src/environments/environment.ts",
+                    "with": "src/environments/environment.prod.ts"
+                  }
+                ],
+                "optimization": false,
+                "outputHashing": "all",
+                "sourceMap": false,
+                "namedChunks": true,
+                "aot": true,
+                "extractLicenses": true,
+                "vendorChunk": false,
+                "buildOptimizer": false,
+                "budgets": [
+                    {
+                        "type": "initial",
+                        "maximumWarning": "2mb",
+                        "maximumError": "6mb"
+                    }
+                ]
+              },
+              "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,
+                "namedChunks": true,
+                "aot": true,
+                "extractLicenses": true,
+                "vendorChunk": false,
+                "buildOptimizer": true,
+                "budgets": [
+                    {
+                        "type": "initial",
+                        "maximumWarning": "2mb",
+                        "maximumError": "6mb"
+                    }
+                ]
+              },
+              "development": {
+                  "buildOptimizer": false,
+                  "optimization": false,
+                  "vendorChunk": true,
+                  "extractLicenses": false,
+                  "sourceMap": true,
+                  "namedChunks": true
+              }
+            },
+            "defaultConfiguration": "production"
+          },
+          "serve": {
+            "builder": "@angular-devkit/build-angular:dev-server",
+            "options": {
+                "browserTarget": "app:build"
+            },
+            "configurations": {
+                "proxy-mock": {
+                    "browserTarget": "app:build",
+                    "proxyConfig": "proxy-mock.conf.json"
+                },
+                "production": {
+                    "browserTarget": "app:build:production"
+                },
+                "development": {
+                  "browserTarget": "app:build:development"
+                }
+            },
+            "defaultConfiguration": "development"
+          },
+          "lint": {
+              "builder": "@angular-eslint/builder:lint",
+              "options": {
+                  "lintFilePatterns": [
+                      "src/**/*.ts",
+                      "src/**/*.html"
+                  ],
+                  "eslintConfig": "src/.eslintrc.json"
+              }
+          },
+          "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"
+            }
+          }
+        }
+      }
+    }
+  }

package/lib/skeletons/_angular/options/ecl-eu/src/app/app.component.html

@@ -0,0 +1,189 @@
+<ecl-app>
+    <ecl-site-header siteName="Site name">
+
+        <div eclSiteHeaderEnvironment>Environment</div>
+
+        <ecl-site-header-action>
+            <ecl-site-header-login 
+                [isLoggedIn]="isLoggedIn" 
+                (login)="onLogin($event)">
+                <p eclSiteHeaderLoginDescription>
+                    {{ 'ecl.site-header.LOGGED-IN-AS' | translate }} {{ userInfos?.fullName }}
+                </p>
+                <hr eclSiteHeaderLoginSeparator />
+                <a eclLink variant="standalone" href="#" (click)="onLogout($event)">
+                    {{ 'ecl.site-header.LOGOUT' | translate }}
+                </a>
+            </ecl-site-header-login>
+
+            <ecl-site-header-language></ecl-site-header-language>
+
+            <ecl-site-header-search (search)="onSearch($event)"></ecl-site-header-search>
+        </ecl-site-header-action>
+
+        <ecl-menu (menuItemSelect)="onMenuItemSelected($event)">
+            <ecl-menu-item label="Home"></ecl-menu-item>
+            <ecl-menu-item label="Item 1">
+                <ecl-menu-mega>
+                    <ecl-menu-mega-item label="Item 1.1"></ecl-menu-mega-item>
+                    <ecl-menu-mega-item label="Item 1.2"></ecl-menu-mega-item>
+                    <ecl-menu-mega-item label="Item 1.3" [isCurrent]="true"></ecl-menu-mega-item>
+                </ecl-menu-mega>
+
+            </ecl-menu-item>
+
+            <ecl-menu-item label="Item 2">
+                <ecl-menu-mega>
+                    <ecl-menu-mega-item label="Item 2.1"></ecl-menu-mega-item>
+                    <ecl-menu-mega-item label="Item 2.2"></ecl-menu-mega-item>
+                    <ecl-menu-mega-item label="Item 2.3"></ecl-menu-mega-item>
+                </ecl-menu-mega>
+            </ecl-menu-item>
+
+            <ecl-menu-item label="Item 3">
+                <ecl-menu-mega>
+                    <ecl-menu-mega-item label="Item 3.1"></ecl-menu-mega-item>
+                    <ecl-menu-mega-item label="Item 3.2"></ecl-menu-mega-item>
+                    <ecl-menu-mega-item label="Item 3.3"></ecl-menu-mega-item>
+                </ecl-menu-mega>
+            </ecl-menu-item>
+        </ecl-menu>
+    </ecl-site-header>
+
+    <ecl-page-header>
+        <ecl-breadcrumb>
+            <ecl-breadcrumb-segment>Home</ecl-breadcrumb-segment>
+            <ecl-breadcrumb-segment>European Commission</ecl-breadcrumb-segment>
+            <ecl-breadcrumb-segment [isCurrentPage]="true">ECL</ecl-breadcrumb-segment>
+        </ecl-breadcrumb>
+
+        <div eclPageHeaderMeta>
+            <span eclPageHeaderMetaItem>
+                Auto generated template
+            </span>
+        </div>
+        <h1 eclPageHeaderTitle>Europa Component Library</h1>
+        <div eclPageHeaderDescriptionContainer>
+            <p eclPageHeaderDescription>
+                The Europa Component Library (ECL) is a comprehensive style guide containing the design elements and visual standards that make up all Europa websites and applications.
+            </p>
+        </div>
+    </ecl-page-header>
+
+    <div class="ecl-u-pv-xl">
+        <router-outlet></router-outlet>
+    </div>
+
+    <ecl-site-footer>
+        <div eclSiteFooterRow>
+            <div eclSiteFooterColumn>
+                <div eclSiteFooterSection>
+                    <h2 eclSiteFooterTitle>
+                        <a eclLink
+                            variant="standalone"
+                            eclSiteFooterTitleLink
+                            routerLink="/">Site name
+                        </a>
+                    </h2>
+                    <div eclSiteFooterDescription>
+                        This site is managed by <a routerLink="/" eclLink variant="standalone">site owner name</a>
+                        and is an official website of the European Union
+                    </div>
+                </div>
+            </div>
+            <div eclSiteFooterColumn>
+                <div eclSiteFooterSection>
+                    <h2 eclSiteFooterTitle
+                        [isSeparator]="true">
+                        Contact site name
+                    </h2>
+                    <ul eclSiteFooterList>
+                        <li eclSiteFooterListItem>
+                            <a eclLink
+                                eclSiteFooterLink
+                                variant="standalone"
+                                routerLink="/">
+                                Link
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+                <div eclSiteFooterSection>
+                    <h2 eclSiteFooterTitle
+                        [isSeparator]="true">
+                        Follow us
+                    </h2>
+                    <ul eclSiteFooterList
+                        [isInline]="true">
+                        <li eclSiteFooterListItem>
+                            <a eclLink
+                                eclSiteFooterLink
+                                variant="standalone"
+                                routerLink="/">
+                                <span eclLinkLabel>Social 1</span>
+                            </a>
+                        </li>
+                        <li eclSiteFooterListItem>
+                            <a eclLink
+                                eclSiteFooterLink
+                                variant="standalone"
+                                routerLink="/">
+                                <span eclLinkLabel>Social 2</span>
+                            </a>
+                        </li>
+                        <li eclSiteFooterListItem>
+                            <a eclLink
+                                eclSiteFooterLink
+                                variant="standalone"
+                                routerLink="/">
+                                <span eclLinkLabel>Social 3</span>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div eclSiteFooterColumn>
+                <div eclSiteFooterSection>
+                    <h2 eclSiteFooterTitle
+                        [isSeparator]="true">
+                        Optional links
+                    </h2>
+                    <ul eclSiteFooterList>
+                        <li eclSiteFooterListItem>
+                            <a eclLink
+                                eclSiteFooterLink
+                                variant="standalone"
+                                routerLink="/">
+                                {{ 'ecl.footer.ACCESSIBILITY' | translate }}
+                            </a>
+                        </li>
+                        <li eclSiteFooterListItem>
+                            <a eclLink
+                                eclSiteFooterLink
+                                variant="standalone"
+                                routerLink="/">
+                                Link 2
+                            </a>
+                        </li>
+                        <li eclSiteFooterListItem>
+                            <a eclLink
+                                eclSiteFooterLink
+                                variant="standalone"
+                                routerLink="/">
+                                Link 3
+                            </a>
+                        </li>
+                        <li eclSiteFooterListItem>
+                            <a eclLink
+                                eclSiteFooterLink
+                                variant="standalone"
+                                routerLink="/">
+                                Link 4
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </ecl-site-footer>
+</ecl-app>

package/lib/skeletons/_angular/options/ecl-eu/src/app/app.component.ts

@@ -0,0 +1,59 @@
+import { Component, OnDestroy } from '@angular/core';
+import { Store } from '@ngrx/store';
+import {
+    getUserState,
+    UserState,
+} from '@eui/core';
+import { Observable, Subscription } from 'rxjs';
+
+import {
+    EclMenuItemSelectEvent,
+    EclSiteHeaderLoginEvent,
+    EclSiteHeaderSearchEvent,
+} from '@eui/ecl';
+
+@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[] = [];
+
+    isLoggedIn = false;
+
+    constructor(
+        private store: Store<any>,
+    ) {
+        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());
+    }
+
+    onLogin(evt: EclSiteHeaderLoginEvent) {
+        this.isLoggedIn = true;
+        console.log(evt);
+    }
+
+    onLogout(evt: MouseEvent) {
+        this.isLoggedIn = false;
+        evt.preventDefault();
+        console.log('logout');
+    }
+
+    onSearch(evt: EclSiteHeaderSearchEvent) {
+        console.log(evt);
+    }
+
+    onMenuItemSelected(evt: EclMenuItemSelectEvent) {
+        console.log('menu item selected', evt);
+    }
+}

package/lib/skeletons/_angular/options/ecl-eu/src/app/features/home/home.component.html

@@ -0,0 +1,71 @@
+<div class="ecl-container">
+    <div class="ecl-row">
+        <div class="ecl-col-12">
+            <main>
+                <h2 class="ecl-u-type-heading-2 ecl-u-mv-none">Purpose</h2>
+                <p class="ecl-u-type-paragraph ecl-u-mt-m ecl-u-mb-none">
+                    This library contains useful components that you can use to build your own website, following DG COMM guidelines.
+                </p>
+
+                <p class="ecl-u-type-paragraph ecl-u-mt-m ecl-u-mb-m">All library elements are accompanied by</p>
+                <ul eclUnorderedList>
+                    <li eclUnorderedListItem>documentation explaining what a component is and how it should be used</li>
+                    <li eclUnorderedListItem>a visual demonstration</li>
+                    <li eclUnorderedListItem>HTML/CSS code for implementation</li>
+                </ul>
+
+
+                <h2 class="ecl-u-type-heading-2 ecl-u-mt-xl ecl-u-mb-none">eUI/ECL integration</h2>
+                <p class="ecl-u-type-paragraph ecl-u-mt-m ecl-u-mb-none">
+                    eUI provides <a eclLink href="http://www.angular.io">Angular</a> implementation of <a eclLink href="https://ec.europa.eu/component-library/">ECL components,</a> enabling projects based on angular, get all benefints of having ECL compliant web application.
+                </p>
+
+                <p class="ecl-u-type-paragraph ecl-u-mt-m ecl-u-mb-none">
+                    It is also possible to use all eUI components in eui/ECL application by importing specific component module
+                    or by importing all components pulling UxAllModule / EuiAllModule
+                </p>
+
+                <h2 class="ecl-u-type-heading-2 ecl-u-mt-xl ecl-u-mb-none">Documentation</h2>
+                <p class="ecl-u-type-paragraph ecl-u-mt-m ecl-u-mb-m">
+                    Documentation can be found as live showcase of all components available, as well as other building blocks, such
+                    as utility css classes, typography, colors etc.
+                </p>
+
+                <ul eclUnorderedList>
+                    <li eclUnorderedListItem><a eclLink href="https://ec.europa.eu/component-library">ECL reference documentation</a></li>
+                    <li eclUnorderedListItem><a eclLink href="https://eui.ecdevops.eu/">eUI library</a></li>
+                </ul>
+
+                <h2 class="ecl-u-type-heading-2 ecl-u-mt-xl ecl-u-mb-none">Support</h2>
+                <p class="ecl-u-type-paragraph ecl-u-mt-m ecl-u-mb-none">
+                    For support in building a European Commission website using the ECL, please contact <a eclLink href="mailto:Europamanagement@ec.europa.eu">COMM Europa Management</a> (CEM)
+                </p>
+
+                <p>For support in building a European Commission website using the eui/ECL integration, please contact
+                    <a eclLink href="DIGIT-EUI-SUPPORT@ec.europa.eu">DIGIT eUI Support</a> team.
+                </p>
+
+                <h2 class="ecl-u-type-heading-2 ecl-u-mt-xl ecl-u-mb-none">Contact</h2>
+
+                <dl eclDescriptionList [isHorizontal]="true" class="ecl-u-mt-m">
+                    <dt eclDescriptionListTerm>Microsoft Teams</dt>
+                    <dd eclDescriptionListDefinition>
+                        <a eclLink href="https://teams.microsoft.com/l/team/19%3a2f5bb6b7d1e24c4aabaa62229d3e1955%40thread.tacv2/conversations?groupId=fb6def72-c57b-4e8f-a82e-49be65d6e1f5&tenantId=b24c8b06-522c-46fe-9080-70926f8dddb1">
+                            https://teams.microsoft.com
+                        </a>
+                    </dd>
+
+                    <dt eclDescriptionListTerm>DIGIT eUI Support</dt>
+                    <dd eclDescriptionListDefinition>
+                        <a eclLink href="mailto:DIGIT-EUI-SUPPORT@ec.europa.eu">DIGIT-EUI-SUPPORT@ec.europa.eu</a>
+                    </dd>
+
+                    <dt eclDescriptionListTerm>COMM Europa Management</dt>
+                    <dd eclDescriptionListDefinition>
+                        <a eclLink href="mailto:Europamanagement@ec.europa.eu">Europamanagement@ec.europa.eu</a>
+                    </dd>
+                </dl>
+            </main>
+        </div>
+    </div>
+</div>

package/lib/skeletons/_angular/options/ecl-eu/src/app/features/module1/components/page1/page1.component.html

@@ -0,0 +1 @@
+<h2>Module1 - Page 1</h2>

package/lib/skeletons/_angular/options/ecl-eu/src/app/features/module1/components/page2/page2.component.html

@@ -0,0 +1 @@
+<h2>Module 1 - page 2</h2>

package/lib/skeletons/_angular/options/ecl-eu/src/app/features/module1/module1.component.html

@@ -0,0 +1 @@
+<h2>Module1 - HOME</h2>

package/lib/skeletons/_angular/options/ecl-eu/src/app/features/module2/module2.component.html

@@ -0,0 +1 @@
+<h2>Module2 - HOME</h2>

package/lib/skeletons/_angular/options/ecl-eu/src/app/shared/shared.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+
+import { EclAllModule } from '@eui/ecl';
+
+const MODULES = [
+    RouterModule,
+    EclAllModule,
+    TranslateModule,
+    CommonModule,
+];
+@NgModule({
+    imports: [...MODULES],
+    declarations: [],
+    exports: [...MODULES],
+})
+export class SharedModule {}

package/lib/skeletons/_angular/options/ecl-eu/src/config/global.ts

@@ -0,0 +1,23 @@
+import { GlobalConfig } from '@eui/core';
+
+export const GLOBAL: GlobalConfig = {
+    appTitle: 'CSDR-app',
+    i18n: {
+        i18nService: {
+            defaultLanguage: 'en',
+            languages: ['en', 'fr'],
+        },
+        i18nLoader: {
+            i18nFolders: ['i18n-eui', 'i18n-ecl', 'i18n'],
+        },
+    },
+    user: {
+        defaultUserPreferences: {
+            dashboard: { },
+            lang: 'en',
+        },
+    },
+    eui: {
+        theme: 'eu',
+    },
+};

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

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

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

@@ -16,6 +16,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';
@@ -26,6 +27,7 @@ import { SharedModule } from '@shared/shared.module';
 
 @NgModule({
     imports: [
+        EuiLayoutModule,
         SharedModule,
         HttpClientModule,
         EuiCoreModule.forRoot(),
@@ -37,6 +39,7 @@ import { SharedModule } from '@shared/shared.module';
     declarations: [
     ],
     exports: [
+        EuiLayoutModule,
         SharedModule,
     ],
     providers: [

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@eui/cli",
-    "version": "16.0.0-next.1",
+    "version": "16.0.0-next.10",
     "tag": "next",
     "license": "EUPL-1.1",
     "description": "eUI CLI app generator",
@@ -13,7 +13,7 @@
         "url": "https://citnet.tech.ec.europa.eu/CITnet/stash/projects/CSDR/repos/eui"
     },
     "dependencies": {
-        "@eui/tools": "6.8.1"
+        "@eui/tools": "6.11.27"
     },
     "preferGlobal": true,
     "homepage": "https://eui.ecdevops.eu",