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

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

@@ -0,0 +1,237 @@
+<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 the Directorate-General for &quot;DG
+                        identification&quot;
+                    </div>
+                </div>
+            </div>
+            <div eclSiteFooterColumn>
+                <div eclSiteFooterSection>
+                    <div eclSiteFooterTitle
+                        [isSeparator]="true">
+                        Contact us
+                    </div>
+                    <ul eclSiteFooterList>
+                        <li eclSiteFooterListItem>
+                            <a eclLink
+                                isInverted
+                                eclSiteFooterLink
+                                variant="standalone"
+                                routerLink="/">
+                                {{ 'ecl.footer.CONTACT-INFO-DG' | translate }}
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+                <div eclSiteFooterSection>
+                    <div eclSiteFooterTitle
+                        [isSeparator]="true">
+                        Follow us on
+                    </div>
+                    <ul eclSiteFooterList
+                        [isInline]="true">
+                        <li eclSiteFooterListItem>
+                            <a  eclLink
+                                isInverted
+                                eclSiteFooterLink
+                                variant="standalone"
+                                routerLink="/">
+                                <ecl-icon iconSet="social-media"
+                                    icon="facebook-negative"
+                                    size="xs">
+                                </ecl-icon>
+                                <span eclLinkLabel>Facebook</span>
+                            </a>
+                        </li>
+                        <li eclSiteFooterListItem>
+                            <a eclLink
+                                isInverted
+                                eclSiteFooterLink
+                                variant="standalone"
+                                routerLink="/">
+                                <ecl-icon iconSet="social-media"
+                                    icon="twitter-negative"
+                                    size="xs">
+                                </ecl-icon>
+                                <span eclLinkLabel>X</span>
+                            </a>
+                        </li>
+                        <li eclSiteFooterListItem>
+                            <a eclLink
+                                isInverted
+                                eclSiteFooterLink
+                                variant="standalone"
+                                routerLink="/">
+                                <ecl-icon iconSet="social-media"
+                                    icon="linkedin-negative"
+                                    size="xs">
+                                </ecl-icon>
+                                <span eclLinkLabel>Linkedin</span>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div eclSiteFooterColumn>
+                <div eclSiteFooterSection>
+                    <div eclSiteFooterTitle
+                        [isSeparator]="true">
+                        {{ 'ecl.footer.ABOUT-US' | translate }}
+                    </div>
+                    <ul eclSiteFooterList>
+                        <li eclSiteFooterListItem>
+                            <a eclLink
+                                isInverted
+                                eclSiteFooterLink
+                                variant="standalone"
+                                routerLink="/">
+                                {{ 'ecl.footer.INFO-ABOUT-DG' | translate }}
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+                <div eclSiteFooterSection>
+                    <div eclSiteFooterTitle
+                        [isSeparator]="true">
+                        {{ 'ecl.footer.RELATED-SITES' | translate }}
+                    </div>
+                    <ul eclSiteFooterList>
+                        <li eclSiteFooterListItem>
+                            <a eclLink
+                                isInverted
+                                eclSiteFooterLink
+                                variant="standalone"
+                                routerLink="/">
+                                Related link 1
+                            </a>
+                        </li>
+                        <li eclSiteFooterListItem>
+                            <a eclLink
+                                isInverted
+                                eclSiteFooterLink
+                                variant="standalone"
+                                routerLink="/">
+                                Related link 2
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+        <div eclSiteFooterRow>
+            <div eclSiteFooterColumn>
+                <div eclSiteFooterSection
+                    [isCondensed]="true">
+                    <div eclSiteFooterContent>{{ 'ecl.footer.MORE-INFO' | translate }}:</div>
+                    <ul eclSiteFooterList>
+                        <li eclSiteFooterListItem>
+                            <a eclLink
+                                isInverted
+                                eclSiteFooterLink
+                                variant="standalone"
+                                routerLink="/">
+                                Class name 1
+                            </a>
+                        </li>
+                        <li eclSiteFooterListItem>
+                            <a eclLink
+                                isInverted
+                                eclSiteFooterLink
+                                variant="standalone"
+                                routerLink="/">
+                                Class name 2
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </ecl-site-footer>
+</ecl-app>

package/lib/skeletons/_angular/options/ecl-ec/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 { EclAppModule } from '@eui/ecl/components/ecl-app';
+import { EclBreadcrumbModule } from '@eui/ecl/components/ecl-breadcrumb';
+import { EclIconModule } from '@eui/ecl/components/ecl-icon';
+import { EclMenuItemSelectEvent, EclMenuModule } from '@eui/ecl/components/ecl-menu';
+import { EclLinkModule } from '@eui/ecl/components/ecl-link';
+import { EclPageHeaderModule } from '@eui/ecl/components/ecl-page-header';
+import { EclSiteFooterModule } from '@eui/ecl/components/ecl-site-footer';
+import { EclSiteHeaderLoginEvent, EclSiteHeaderModule, EclSiteHeaderSearchEvent } from '@eui/ecl/components/ecl-site-header';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+    selector: 'app-root',
+    templateUrl: './app.component.html',
+    standalone: true,
+    imports: [
+        EclAppModule,
+        EclBreadcrumbModule,
+        EclIconModule,
+        EclLinkModule,
+        EclMenuModule,
+        EclPageHeaderModule,
+        EclSiteHeaderModule,
+        EclSiteFooterModule,
+        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-ec/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-ec/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-ec/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 { TranslateModule } from '@ngx-translate/core';
+import { EclListModule } from '@eui/ecl/components/ecl-list';
+import { EclLinkModule } from '@eui/ecl/components/ecl-link';
+
+@Component({
+    templateUrl: './home.component.html',
+    standalone: true,
+    imports: [
+        TranslateModule,
+        EclLinkModule,
+        EclListModule,
+    ],
+})
+export class HomeComponent {
+    constructor(@Inject(CONFIG_TOKEN) protected config: EuiAppConfig) {
+        console.log(config);
+    }
+}

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

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

package/lib/skeletons/_angular/options/ecl-ec/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-ec/src/app/features/module1/components/page2/page2.component.html

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

package/lib/skeletons/_angular/options/ecl-ec/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-ec/src/app/features/module1/module1.component.html

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

package/lib/skeletons/_angular/options/ecl-ec/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-ec/src/app/features/module2/module2.component.html

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

package/lib/skeletons/_angular/options/ecl-ec/src/app/features/module2/module2.component.ts

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

package/lib/skeletons/_angular/options/ecl-ec/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: 'ec'
+    }
+};