@eui/cli 23.0.0-alpha.1 → 23.0.0-alpha.3

package/lib/skeletons/_angular/base-mobile/src/app/features/module1/{module1-routing.module.ts → module1.routes.ts}

@@ -1,18 +1,10 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
+import { Routes } from '@angular/router';
 import { Page1Component } from './components/page1/page1.component';
 import { Page2Component } from './components/page2/page2.component';
 import { Module1Component } from './module1.component';
 
-const routes: Routes = [
+export const MODULE1_ROUTES: Routes = [
     { path: '', component: Module1Component },
     { path: 'page1', component: Page1Component },
     { path: 'page2', component: Page2Component },
 ];
-
-@NgModule({
-    imports: [
-        RouterModule.forChild(routes)
-    ],
-})
-export class Module1RoutingModule {}

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

@@ -0,0 +1,32 @@
+<ion-header>
+    <ion-toolbar color="light">
+        <euim-toolbar [hasSidebarTrigger]="true"></euim-toolbar>
+    </ion-toolbar>
+</ion-header>
+<ion-content>
+    <euim-slider-info-screen showRightBtn
+                             isNextBtn
+                             [actionBtnNames]="{
+                             rightBtnName: 'Close',
+                             lastStepActionBtnName: 'Close',
+                             leftBtnName: '',
+                            }">
+        <euim-slide-info-screen>
+            <euim-media-header euimNoGradient euimSizeL>
+                <img euimMediaHeaderImage
+                     src="./assets/images/image.png"/>
+            </euim-media-header>
+            <div euimSliderInfoScreenTitle>
+                Welcome
+            </div>
+            <div euimSliderInfoScreenSubTitle>
+                Mobile starter application
+            </div>
+            <div euimSliderInfoScreenContent>
+                <span>This is your starter application, which you can modify to your personal taste.<br><br>
+                Visit <a href="https://eui.ecdevops.eu/eui-showcase-mobile-20.x/home" target="_blank">eUI/Mobile documentation</a> for further details.</span>
+            </div>
+        </euim-slide-info-screen>
+    </euim-slider-info-screen>
+</ion-content>
+

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

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { EUIM_TOOLBAR, EUIM_SLIDER_INFO_SCREEN, EUIM_MEDIA_HEADER } from '@eui/mobile-core';
+import { IonContent, IonHeader, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+    templateUrl: './welcome.component.html',
+    imports: [EUIM_TOOLBAR, IonContent, IonHeader, IonToolbar, EUIM_SLIDER_INFO_SCREEN, EUIM_MEDIA_HEADER],
+})
+export class WelcomeComponent {}

package/lib/skeletons/_angular/base-mobile/src/app/features/welcome/welcome.routes.ts

@@ -0,0 +1,6 @@
+import { Routes } from '@angular/router';
+import { WelcomeComponent } from './welcome.component';
+
+export const WELCOME_ROUTES: Routes = [
+    { path: '', component: WelcomeComponent },
+];

package/lib/skeletons/_angular/base-mobile/src/index.html

@@ -61,7 +61,7 @@
     <link rel="apple-touch-startup-image" media="screen and (device-width: 744px) and (device-height: 1133px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="assets/icons/apple-splash-portrait-1488-2266.png">
 
     <link rel="manifest" href="manifest.webmanifest">
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="default"/>
 </head>
 

package/lib/skeletons/_angular/base-mobile/src/main.ts

@@ -5,6 +5,11 @@ import { preInitApp } from "@eui/core";
 import { AppModule } from "./app/app.module";
 import { environment } from "./environments/environment";
 
+import { addIcons } from 'ionicons';
+import * as allIcons from 'ionicons/icons';
+
+addIcons(allIcons);
+
 if (environment.production) {
     enableProdMode();
 }

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

@@ -48,30 +48,50 @@
         </ecl-menu>
     </ecl-site-header>
 
-    <ecl-page-header>
-        <ecl-breadcrumb>
-            <ol eclBreadcrumbContainer>
-                <li eclBreadcrumbSegment>Home</li>
-                <li eclBreadcrumbSegment>European Commission</li>
-                <li eclBreadcrumbSegment [isCurrentPage]="true">ECL</li>
-            </ol>
-        </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 eclPageHeader descriptionPosition="bottom">
+    <picture eclPageHeaderBackgroundPicture>
+        <img eclPageHeaderBackgroundImage src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
+            alt="Europe flag" />
+    </picture>
+    <div eclPageHeaderContainer>
+        <div eclContainer>
+            <ecl-breadcrumb>
+                <ol eclBreadcrumbContainer>
+                    <li eclBreadcrumbSegment href="http://ec.europa.eu">Home</li>
+                    <li eclBreadcrumbSegment routerLink="about">About the European Commission</li>
+                    <li eclBreadcrumbSegment routerLink="structure">Organisational structure</li>
+                    <li eclBreadcrumbSegment routerLink="org">How the Commission is organized</li>
+                    <li eclBreadcrumbSegment isCurrentPage>News</li>
+                </ol>
+            </ecl-breadcrumb>
+            <h1 eclPageHeaderTitle>Consectetur adipiscing elit</h1>
+            <ul eclPageHeaderMeta>
+                <li eclPageHeaderMetaItem>News article</li>
+                <li eclPageHeaderMetaItem>10 March 2025</li>
+                <li eclPageHeaderMetaItem>
+                    <ecl-icon icon="location" size="2xs" eclContentBlockSecondaryMetaIcon></ecl-icon>Brussels
+                </li>
+                <li eclPageHeaderMetaItem>
+                    <ecl-icon icon="clock" size="2xs" eclContentBlockSecondaryMetaIcon></ecl-icon>1 minute read
+                </li>
+                <li eclPageHeaderMetaItem>
+                    Research center
+                </li>
+            </ul>
         </div>
-    </ecl-page-header>
+    </div>
+    <div eclPageHeaderDescriptionContainer position="bottom">
+        <picture eclPageHeaderDescriptionPicture>
+            <img eclPageHeaderDescriptionImage src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
+                alt="Europe flag">
+        </picture>
+        <p eclPageHeaderDescription>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec ullamcorper mi. Morbi interdum
+            fermentum tempus. Nam nec rhoncus risus,<a eclLink routerLink="/">
+                eget dictum elit</a>. Vestibulum gravida tincidunt venenatis.
+        </p>
+    </div>
+</div>
 
     <div class="ecl-u-pv-xl">
         <router-outlet></router-outlet>
@@ -92,17 +112,20 @@
                     <span eclSiteFooterDescriptionName>[name of the manager of the site]</span>
                 </div>
                 <ecl-social-media-follow eclSiteFooterSocialMedia>
-                    <ecl-social-media-follow-item icon="facebook" href="https://www.facebook.com/dg"
-                        isInverted></ecl-social-media-follow-item>
-                    <ecl-social-media-follow-item icon="instagram" href="https://www.instagram.com/dg/"
-                        isInverted></ecl-social-media-follow-item>
-                    <ecl-social-media-follow-item icon="twitter" href="https://x.com/dg"
-                        isInverted></ecl-social-media-follow-item>
-                    <ecl-social-media-follow-item icon="linkedin" href="https://www.linkedin.com/dg"
-                        isInverted></ecl-social-media-follow-item>
-                    <ecl-social-media-follow-item icon="chain" href="https://more_chanels/dg"
-                        isInverted></ecl-social-media-follow-item>
-                </ecl-social-media-follow>
+                <ecl-social-media-follow-item icon="mastodon" href="https://ec.social-network.europa.eu/@EUCommission"
+                isInverted></ecl-social-media-follow-item>
+                <ecl-social-media-follow-item icon="linkedin" href="https://www.linkedin.com/company/european-commission"
+                    isInverted></ecl-social-media-follow-item>
+                <ecl-social-media-follow-item icon="bluesky" href="https://bsky.app/profile/ec.europa.eu"
+                    isInverted></ecl-social-media-follow-item>
+                <ecl-social-media-follow-item icon="facebook" href="https://www.facebook.com/EuropeanCommission"
+                    isInverted></ecl-social-media-follow-item>
+                <ecl-social-media-follow-item icon="youtube" href="https://www.youtube.com/user/eutube"
+                    isInverted></ecl-social-media-follow-item>
+                <ecl-social-media-follow-item icon="chain"
+                    href="https://european-union.europa.eu/contact-eu/social-media-channels_en"
+                    isInverted></ecl-social-media-follow-item>
+            </ecl-social-media-follow>
             </div>
             <div eclSiteFooterSection variant="links">
                 <div eclSiteFooterRow>

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

@@ -13,7 +13,7 @@ import { EUI_ECL_PAGE_HEADER } from '@eui/ecl/components/ecl-page-header';
 import { EUI_ECL_SOCIAL_MEDIA_FOLLOW } from '@eui/ecl/components/ecl-social-media-follow';
 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';
+import { TranslatePipe } from '@ngx-translate/core';
 
 @Component({
     selector: 'app-root',
@@ -30,7 +30,7 @@ import { TranslateModule } from '@ngx-translate/core';
         ...EUI_ECL_SITE_FOOTER,
         ...EUI_ECL_SOCIAL_MEDIA_FOLLOW,
         RouterOutlet,
-        TranslateModule,
+        TranslatePipe,
     ]
 })
 export class AppComponent implements OnInit {

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

@@ -6,7 +6,7 @@ import { Observable } from 'rxjs';
 import { routes } from './app.routes';
 import { AppStarterService } from './app-starter.service';
 
-import { TranslateModule } from '@ngx-translate/core';
+import { provideTranslateService } from '@ngx-translate/core';
 
 import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import {
@@ -75,8 +75,8 @@ export const appConfig: ApplicationConfig = {
         provideHttpClient(withInterceptorsFromDi()),
         importProvidersFrom(
             EuiCoreModule.forRoot(),
-            TranslateModule.forRoot(translateConfig)
         ),
+        provideTranslateService(translateConfig),
         AppStarterService,
         provideRouter(routes),
         provideAnimations(),

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

@@ -2,20 +2,18 @@ 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 {
     protected config: EuiAppConfig = inject(CONFIG_TOKEN);
-    
+
     constructor() {
         console.log(this.config);
     }

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

@@ -48,30 +48,50 @@
         </ecl-menu>
     </ecl-site-header>
 
-    <ecl-page-header>
-        <ecl-breadcrumb>
-            <ol eclBreadcrumbContainer>
-                <li eclBreadcrumbSegment>Home</li>
-                <li eclBreadcrumbSegment>European Commission</li>
-                <li eclBreadcrumbSegment [isCurrentPage]="true">ECL</li>
-            </ol>
-        </ecl-breadcrumb>
-
-        <div eclPageHeaderInfo>
-            <div eclPageHeaderMeta>
-                <span eclPageHeaderMetaItem>
-                    Auto generated template
-                </span>
+    <div eclPageHeader descriptionPosition="bottom">
+        <picture eclPageHeaderBackgroundPicture>
+            <img eclPageHeaderBackgroundImage src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
+                alt="Europe flag" />
+        </picture>
+        <div eclPageHeaderContainer>
+            <div eclContainer>
+                <ecl-breadcrumb>
+                    <ol eclBreadcrumbContainer>
+                        <li eclBreadcrumbSegment href="http://ec.europa.eu">Home</li>
+                        <li eclBreadcrumbSegment routerLink="about">About the European Commission</li>
+                        <li eclBreadcrumbSegment routerLink="structure">Organisational structure</li>
+                        <li eclBreadcrumbSegment routerLink="org">How the Commission is organized</li>
+                        <li eclBreadcrumbSegment isCurrentPage>News</li>
+                    </ol>
+                </ecl-breadcrumb>
+                <h1 eclPageHeaderTitle>Consectetur adipiscing elit</h1>
+                <ul eclPageHeaderMeta>
+                    <li eclPageHeaderMetaItem>News article</li>
+                    <li eclPageHeaderMetaItem>10 March 2025</li>
+                    <li eclPageHeaderMetaItem>
+                        <ecl-icon icon="location" size="2xs" eclContentBlockSecondaryMetaIcon></ecl-icon>Brussels
+                    </li>
+                    <li eclPageHeaderMetaItem>
+                        <ecl-icon icon="clock" size="2xs" eclContentBlockSecondaryMetaIcon></ecl-icon>1 minute read
+                    </li>
+                    <li eclPageHeaderMetaItem>
+                        Research center
+                    </li>
+                </ul>
             </div>
-            <h1 eclPageHeaderTitle>Europa Component Library</h1>
         </div>
-        <div eclPageHeaderDescriptionContainer>
+        <div eclPageHeaderDescriptionContainer position="bottom">
+            <picture eclPageHeaderDescriptionPicture>
+                <img eclPageHeaderDescriptionImage
+                    src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg" alt="Europe flag">
+            </picture>
             <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.
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec ullamcorper mi. Morbi interdum
+                fermentum tempus. Nam nec rhoncus risus,<a eclLink routerLink="/">
+                    eget dictum elit</a>. Vestibulum gravida tincidunt venenatis.
             </p>
         </div>
-    </ecl-page-header>
+    </div>
 
     <div class="ecl-u-pv-xl">
         <router-outlet></router-outlet>

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

@@ -12,7 +12,7 @@ import { EclMenuItemSelectEvent, EUI_ECL_MENU } from '@eui/ecl/components/ecl-me
 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';
+import { TranslatePipe } from '@ngx-translate/core';
 
 @Component({
     selector: 'app-root',
@@ -28,7 +28,7 @@ import { TranslateModule } from '@ngx-translate/core';
         ...EUI_ECL_SITE_HEADER,
         ...EUI_ECL_SITE_FOOTER,
         RouterOutlet,
-        TranslateModule,
+        TranslatePipe,
     ]
 })
 export class AppComponent implements OnInit {

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

@@ -6,7 +6,7 @@ import { Observable } from 'rxjs';
 import { routes } from './app.routes';
 import { AppStarterService } from './app-starter.service';
 
-import { TranslateModule } from '@ngx-translate/core';
+import { provideTranslateService } from '@ngx-translate/core';
 
 import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import {
@@ -75,8 +75,8 @@ export const appConfig: ApplicationConfig = {
         provideHttpClient(withInterceptorsFromDi()),
         importProvidersFrom(
             EuiCoreModule.forRoot(),
-            TranslateModule.forRoot(translateConfig)
         ),
+        provideTranslateService(translateConfig),
         AppStarterService,
         provideRouter(routes),
         provideAnimations(),

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

@@ -2,20 +2,18 @@ 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 {
     protected config: EuiAppConfig = inject(CONFIG_TOKEN);
-    
+
     constructor() {
         console.log(this.config);
     }

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

@@ -1,11 +1,11 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { TranslateModule } from '@ngx-translate/core';
+import { TranslatePipe } from '@ngx-translate/core';
 
 const MODULES = [
     RouterModule,
-    TranslateModule,
+    TranslatePipe,
     CommonModule,
 ];
 @NgModule({