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

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

@@ -0,0 +1,181 @@
+{
+    "$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"
+                },
+                "@schematics/angular:application": {
+                    "strict": true
+                }
+            },
+            "architect": {
+                "build": {
+                    "builder": "@angular-devkit/build-angular:application",
+                    "options": {
+                        "outputPath": "dist",
+                        "index": "src/index.html",
+                        "browser": "src/main.ts",
+                        "polyfills": ["zone.js"],
+                        "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/dist/assets/ecl",
+                                "output": "./assets/images/ecl"
+                            },
+                            {
+                                "glob": "**/*",
+                                "input": "node_modules/@eui/styles/dist/assets",
+                                "output": "./assets"
+                            },
+                            {
+                                "glob": "**/*",
+                                "input": "node_modules/@eui/ecl/assets/",
+                                "output": "./assets"
+                            },
+                            {
+                                "glob": "**/*",
+                                "input": "node_modules/@eui/styles/dist/styles",
+                                "output": "./assets"
+                            }
+                        ],
+                        "styles": [
+                            "node_modules/@eui/styles/dist/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,
+                            "aot": true,
+                            "extractLicenses": true,
+                            "budgets": [
+                                {
+                                    "type": "initial",
+                                    "maximumWarning": "1mb",
+                                    "maximumError": "2mb"
+                                }
+                            ]
+                        },
+                        "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": {
+                        "buildTarget": "app:build"
+                    },
+                    "configurations": {
+                        "proxy-mock": {
+                            "buildTarget": "app:build:development",
+                            "proxyConfig": "proxy-mock.conf.json"
+                        },
+                        "production": {
+                            "buildTarget": "app:build:production"
+                        },
+                        "development": {
+                            "buildTarget": "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",
+                        "assets": [
+                            {
+                                "glob": "**/*",
+                                "input": "node_modules/@eui/core/assets/",
+                                "output": "./assets"
+                            },
+                            {
+                                "glob": "**/*",
+                                "input": "node_modules/@eui/styles/dist/assets/ecl",
+                                "output": "./assets/images/ecl"
+                            },
+                            {
+                                "glob": "**/*",
+                                "input": "node_modules/@eui/styles/dist/assets",
+                                "output": "./assets"
+                            },
+                            {
+                                "glob": "**/*",
+                                "input": "node_modules/@eui/ecl/assets/",
+                                "output": "./assets"
+                            }
+                        ]
+                    }
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,203 @@
+<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)" aria-label="Main navigation">
+            <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 eclPageHeaderInfo>
+            <div eclPageHeaderMeta>
+                <span eclPageHeaderMetaItem>
+                    Auto generated template
+                </span>
+            </div>
+            <h1 eclPageHeaderTitle>Europa Component Library</h1>
+        </div>
+        <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 isSiteInfo>
+                    <div eclSiteFooterTitle>
+                        <a eclLink
+                            variant="standalone"
+                            eclSiteFooterTitleLink
+                            routerLink="/">Site name
+                        </a>
+                    </div>
+                    <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>
+                    <div eclSiteFooterTitle
+                        [isSeparator]="true">
+                        Contact site name
+                    </div>
+                    <ul eclSiteFooterList>
+                        <li eclSiteFooterListItem>
+                            <a eclLink
+                                eclSiteFooterLink
+                                variant="standalone"
+                                routerLink="/">
+                                Link
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+                <div eclSiteFooterSection>
+                    <div eclSiteFooterTitle
+                        [isSeparator]="true">
+                        Follow us
+                    </div>
+                    <ul eclSiteFooterList
+                        [isInline]="true">
+                        <li eclSiteFooterListItem>
+                            <a eclLink
+                                eclSiteFooterLink
+                                variant="standalone"
+                                routerLink="/">
+                                <ecl-icon iconSet="social-media"
+                                          icon="facebook"
+                                          size="xs">
+                                </ecl-icon>
+                                <span eclLinkLabel>Social 1</span>
+                            </a>
+                        </li>
+                        <li eclSiteFooterListItem>
+                            <a eclLink
+                                eclSiteFooterLink
+                                variant="standalone"
+                                routerLink="/">
+                                <ecl-icon iconSet="social-media"
+                                          icon="twitter"
+                                          size="xs">
+                                </ecl-icon>
+                                <span eclLinkLabel>Social 2</span>
+                            </a>
+                        </li>
+                        <li eclSiteFooterListItem>
+                            <a eclLink
+                                eclSiteFooterLink
+                                variant="standalone"
+                                routerLink="/">
+                                <ecl-icon iconSet="social-media"
+                                          icon="mastodon"
+                                          size="xs">
+                                </ecl-icon>
+                                <span eclLinkLabel>Social 3</span>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div eclSiteFooterColumn>
+                <div eclSiteFooterSection>
+                    <div eclSiteFooterTitle
+                        [isSeparator]="true">
+                        Optional links
+                    </div>
+                    <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,65 @@
+import { Component, OnInit, Signal } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import {
+    UserService,
+    UserState,
+} from '@eui/core';
+import { EUI_ECL_APP } from '@eui/ecl/components/ecl-app';
+import { EUI_ECL_BREADCRUMB } from '@eui/ecl/components/ecl-breadcrumb';
+import { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';
+import { EUI_ECL_LINK } from '@eui/ecl/components/ecl-link';
+import { EclMenuItemSelectEvent, EUI_ECL_MENU } from '@eui/ecl/components/ecl-menu';
+import { EUI_ECL_PAGE_HEADER } from '@eui/ecl/components/ecl-page-header';
+import { EUI_ECL_SITE_FOOTER } from '@eui/ecl/components/ecl-site-footer';
+import { EclSiteHeaderLoginEvent, EclSiteHeaderSearchEvent, EUI_ECL_SITE_HEADER } from '@eui/ecl/components/ecl-site-header';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+    selector: 'app-root',
+    templateUrl: './app.component.html',
+    standalone: true,
+    imports: [
+        ...EUI_ECL_APP,
+        ...EUI_ECL_BREADCRUMB,
+        ...EUI_ECL_ICON,
+        ...EUI_ECL_LINK,
+        ...EUI_ECL_MENU,
+        ...EUI_ECL_PAGE_HEADER,
+        ...EUI_ECL_SITE_HEADER,
+        ...EUI_ECL_SITE_FOOTER,
+        RouterOutlet,
+        TranslateModule,
+    ]
+})
+export class AppComponent implements OnInit {
+
+    isLoggedIn = false;
+    userState: Signal<UserState>;
+    userInfos: UserState;
+
+    constructor(private userService: UserService<UserState>,) { }
+
+    ngOnInit(): void {
+        this.userState = this.userService.getSignal();
+        this.userInfos = this.userState();
+    }
+
+    onLogin(evt: EclSiteHeaderLoginEvent): void {
+        this.isLoggedIn = true;
+        console.log(evt);
+    }
+
+    onLogout(evt: MouseEvent): void {
+        this.isLoggedIn = false;
+        evt.preventDefault();
+        console.log('logout');
+    }
+
+    onSearch(evt: EclSiteHeaderSearchEvent): void {
+        console.log(evt);
+    }
+
+    onMenuItemSelected(evt: EclMenuItemSelectEvent): void {
+        console.log('menu item selected', evt);
+    }
+}

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

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

package/lib/skeletons/_angular/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&#64;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&#64;ec.europa.eu</a>
+                    </dd>
+
+                    <dt eclDescriptionListTerm>COMM Europa Management</dt>
+                    <dd eclDescriptionListDefinition>
+                        <a eclLink href="mailto:Europamanagement@ec.europa.eu">Europamanagement&#64;ec.europa.eu</a>
+                    </dd>
+                </dl>
+            </main>
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,20 @@
+import { Component, Inject } from '@angular/core';
+import { CONFIG_TOKEN, EuiAppConfig } from '@eui/core';
+import { EUI_ECL_LINK } from '@eui/ecl/components/ecl-link';
+import { EUI_ECL_LIST } from '@eui/ecl/components/ecl-list';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+    templateUrl: './home.component.html',
+    standalone: true,
+    imports: [
+        TranslateModule,
+        ...EUI_ECL_LINK,
+        ...EUI_ECL_LIST,
+    ],
+})
+export class HomeComponent {
+    constructor(@Inject(CONFIG_TOKEN) protected config: EuiAppConfig) {
+        console.log(config);
+    }
+}

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/page1/page1.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+    templateUrl: './page1.component.html',
+    standalone: true,
+})
+export class Page1Component {}

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/components/page2/page2.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+    templateUrl: './page2.component.html',
+    standalone: true,
+})
+export class Page2Component {}

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/module1/module1.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+    templateUrl: './module1.component.html',
+    standalone: true,
+})
+export class Module1Component {}

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

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