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

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

@@ -1,81 +1 @@
-/* pre-v19 - ignore this file
-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';
-
-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/base-mobile/src/app/app.module.ts

@@ -7,6 +7,7 @@ import { AppComponent } from './app.component';
 import { CoreModule } from './core/core.module';
 import { AppStarterService } from './app-starter.service';
 import { ServiceWorkerModule } from '@angular/service-worker';
+import { provideHttpClient, withFetch } from '@angular/common/http';
 
 @NgModule({
     declarations: [
@@ -36,6 +37,7 @@ import { ServiceWorkerModule } from '@angular/service-worker';
             deps: [AppStarterService],
             multi: true
         },
+        provideHttpClient(withFetch()),
     ],
     bootstrap: [
         AppComponent,

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

@@ -1,8 +1,5 @@
 import { NgModule } from '@angular/core';
-import { TranslateModule } from '@ngx-translate/core';
-import { StoreModule } from '@ngrx/store';
-import { EffectsModule } from '@ngrx/effects';
-import { StoreDevtoolsModule } from '@ngrx/store-devtools';
+import { provideTranslateService } from '@ngx-translate/core';
 
 import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
 
@@ -15,15 +12,12 @@ import {
     EuLoginSessionTimeoutHandlingInterceptor,
     CoreModule as EuiCoreModule,
     translateConfig,
-    CoreModuleEffects,
     EUI_CONFIG_TOKEN,
 } from '@eui/core';
 
 import { appConfig } from '../../config/index';
 import { environment } from '../../environments/environment';
 
-import { REDUCER_TOKEN, getReducers, metaReducers } from './reducers/index';
-
 import { SharedModule } from '@shared/shared.module';
 
 @NgModule({
@@ -31,11 +25,6 @@ import { SharedModule } from '@shared/shared.module';
         HttpClientModule,
         SharedModule,
         EuiCoreModule.forRoot(),
-        EffectsModule.forRoot([...CoreModuleEffects]),
-        TranslateModule.forRoot(translateConfig),
-        StoreModule.forRoot(),
-        StoreModule.forRoot(REDUCER_TOKEN, { metaReducers }),
-        !environment.production ? StoreDevtoolsModule.instrument({ maxAge: 50 }) : [],
         IonicModule.forRoot({mode: 'md'}),
     ],
     declarations: [
@@ -44,11 +33,7 @@ import { SharedModule } from '@shared/shared.module';
         SharedModule,
     ],
     providers: [
-        {
-            provide: REDUCER_TOKEN,
-            deps: [],
-            useFactory: getReducers,
-        },
+        provideTranslateService(translateConfig),
         {
             provide: EUI_CONFIG_TOKEN,
             useValue: { appConfig: appConfig, environment: environment }

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

@@ -4,7 +4,7 @@
             <euim-toolbar-title>{{ 'euim.about.text' | translate }}</euim-toolbar-title>
             <euim-toolbar-action-items>
                 <ion-button>
-                    <ion-label class="eui-u-mr-m" (click)="toggleQRCode()" slot="end">
+                    <ion-label (click)="toggleQRCode()" slot="end">
                         <strong>
                             @if (showCode) {
                                 {{ 'euim.about.hide.qrcode' | translate }}
@@ -21,7 +21,7 @@
 
     <euim-header-details color="branding">
         <div euimHeaderDetailsIcon>
-            <euim-toolbar-qrcode [showCode]="showCode" logoUrl="./assets/images/app-icon.svg"
+            <euim-toolbar-qrcode [showCode]="showCode" logoUrl="./assets/images/app-icon.png"
                                  qrCodeUrl="https://github.com/Cordobo/angularx-qrcode"></euim-toolbar-qrcode>
         </div>
         <div euimHeaderDetailsTitle><strong>eUI / mobile</strong></div>
@@ -41,11 +41,16 @@
                     <div euimLabel>{{'euim.about.changelog' | translate }}</div>
                 </ion-label>
             </ion-item>
-            <ion-item button (click)="onNavigate('/screen/about/privacy-statement')">
+            <ion-item button href="https://commission.europa.eu/privacy-policy-websites-managed-european-commission_en" target="_blank">
                 <ion-icon name="finger-print-sharp" slot="start"></ion-icon>
                 <ion-label>
                     <div euimLabel>{{'euim.about.privacy.statement' | translate }}</div>
                 </ion-label>
+                <ion-buttons>
+                    <ion-button fill="clear">
+                        <ion-icon name="open-outline" slot="icon-only"></ion-icon>
+                    </ion-button>
+                </ion-buttons>
             </ion-item>
             <ion-item button (click)="onNavigate('/screen/about/opensource-licences')">
                 <ion-icon name="ribbon-outline" slot="start"></ion-icon>

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

@@ -1,8 +1,12 @@
 import { Component } from '@angular/core';
 import { NavController } from '@ionic/angular';
+import { EuimChipSelectorComponentModule, EuimAboutModule, EuimHeaderDetailsModule, EuimToolbarQrcodeModule, EuimToolbarComponentModule, EuimLabelModule } from '@eui/mobile-core';
+import { IonToolbar, IonHeader, IonContent, IonButtons, IonList, IonListHeader, IonItem, IonLabel, IonIcon, IonButton } from '@ionic/angular/standalone';
+import { TranslatePipe } from '@ngx-translate/core';
 
 @Component({
-    templateUrl: './about.component.html'
+    templateUrl: './about.component.html',
+    imports: [TranslatePipe, IonToolbar, IonHeader, IonButtons, IonContent, IonList, IonListHeader, IonItem, IonLabel, IonIcon, IonButton, EuimChipSelectorComponentModule, EuimAboutModule, EuimHeaderDetailsModule, EuimToolbarQrcodeModule, EuimToolbarComponentModule, EuimLabelModule ]
 })
 export class AboutComponent {
     showCode = false;

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

@@ -1,14 +1,12 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
+import { Routes } from '@angular/router';
 import { AboutComponent } from './about.component';
 import { ChangeLogComponent } from './change-log/changelog.component';
-import { PrivacystatementComponent } from './privacy-statement/privacy-statement.component';
 import { LegalNoticeComponent } from './legal-notice/legal-notice.component';
 import { HelpSupportComponent } from './help-support/help-support.component';
 import { OpensourceLicencesComponent } from './opensource-licences/opensource-licences.component';
 import { LicenceDetailsComponent } from './licence-details/licence-details.component';
 
-const routes: Routes = [
+export const ABOUT_ROUTES: Routes = [
     {
         path: '',
         component: AboutComponent,
@@ -17,10 +15,6 @@ const routes: Routes = [
         path: 'change-log',
         component: ChangeLogComponent
     },
-    {
-        path: 'privacy-statement',
-        component: PrivacystatementComponent
-    },
     {
         path: 'legal-notice',
         component: LegalNoticeComponent
@@ -38,8 +32,3 @@ const routes: Routes = [
         component: LicenceDetailsComponent
     },
 ];
-
-@NgModule({
-    imports: [RouterModule.forChild(routes)],
-})
-export class AboutRoutingModule {}

package/lib/skeletons/_angular/base-mobile/src/app/features/about/change-log/changelog.component.ts

@@ -1,6 +1,10 @@
 import { Component } from '@angular/core';
+import { EuimAboutModule, EuimToolbarComponentModule } from '@eui/mobile-core';
+import { IonToolbar, IonHeader, IonContent } from '@ionic/angular/standalone';
+import { TranslatePipe } from '@ngx-translate/core';
 @Component({
-    templateUrl: './changelog.component.html'
+    templateUrl: './changelog.component.html',
+    imports: [TranslatePipe, EuimAboutModule, IonToolbar, IonHeader, IonContent, EuimToolbarComponentModule]
 })
 export class ChangeLogComponent {
     changeLogs = [

package/lib/skeletons/_angular/base-mobile/src/app/features/about/help-support/help-support.component.ts

@@ -1,7 +1,11 @@
 import { Component } from '@angular/core';
+import { EuimAboutModule, EuimAlertMessageModule, EuimToolbarComponentModule } from '@eui/mobile-core';
+import { IonToolbar, IonHeader, IonContent, IonIcon, IonButton } from '@ionic/angular/standalone';
+import { TranslatePipe } from '@ngx-translate/core';
 
 @Component({
-    templateUrl: './help-support.component.html'
+    templateUrl: './help-support.component.html',
+    imports: [TranslatePipe, IonToolbar, IonIcon, IonButton, EuimAboutModule, EuimAlertMessageModule, IonHeader, IonContent, EuimToolbarComponentModule]
 })
 export class HelpSupportComponent {
     alertInfos = {
@@ -19,28 +23,28 @@ export class HelpSupportComponent {
                     title: '+352 123 45 67890',
                     phone: '+352 123 45 67890',
                     subtitle: 'Customer service',
-                    startIcon: 'call',
+                    startIcon: 'call-outline',
                     hasBottomLine: true
                 },
                 {
                     title: '+32 123 45 67890',
                     phone: '+32 123 45 67890',
                     subtitle: 'Helpdesk support',
-                    startIcon: 'call',
+                    startIcon: 'call-outline',
                     hasBottomLine: true
                 },
                 {
                     title: 'digit-eui-support@ec.europa.eu',
                     mail: 'digit-eui-support@ec.europa.eu',
                     subtitle: 'Helpdesk support',
-                    startIcon: 'at',
+                    startIcon: 'call-outline',
                     hasBottomLine: true
                 },
                 {
                     title: 'EC Microsoft Teams',
                     link: 'https://teams.microsoft.com/l/channel/19%3a6db7a6cef52340eb91d67b8d75db2523%40thread.tacv2/%25E2%259D%2593%25E2%259D%2593%2520%2520HELPDESK%2520and%2520SUPPORT?groupId=fb6def72-c57b-4e8f-a82e-49be65d6e1f5&tenantId=b24c8b06-522c-46fe-9080-70926f8dddb1',
                     subtitle: 'Microsoft Teams helpdesk channel',
-                    startIcon: 'people'
+                    startIcon: 'call-outline'
                 },
             ],
         },
@@ -51,21 +55,21 @@ export class HelpSupportComponent {
                     title: 'eUI / mobile manual',
                     subtitle: 'Getting started with library',
                     link: 'https://euidev.ecdevops.eu/eui-showcase-mobile-18.x/home',
-                    startIcon: 'book',
+                    startIcon: 'call-outline',
                     endIcon: 'link'
                 },
                 {
                     title: 'EU Login',
                     subtitle: 'User manual',
                     link: 'https://webgate.ec.europa.eu/cas/help.html',
-                    startIcon: 'book',
+                    startIcon: 'call-outline',
                     endIcon: 'link'
                 },
                 {
                     title: 'FAQ',
                     subtitle: 'Frequently asked questions',
                     link: 'https://ec.europa.eu/sustainable-finance-taxonomy/faq',
-                    startIcon: 'book',
+                    startIcon: 'call-outline',
                     endIcon: 'link'
                 }
             ]

package/lib/skeletons/_angular/base-mobile/src/app/features/about/legal-notice/legal-notice.component.html

@@ -7,6 +7,6 @@
 </ion-header>
 <ion-content>
     <euim-about-content-loading>
-        <euim-pdf-viewer url="assets/docs/pdf-test.pdf"></euim-pdf-viewer>
+        <euim-pdf-viewer url="assets/docs/sample-pdf-mobile.pdf"></euim-pdf-viewer>
     </euim-about-content-loading>
 </ion-content>

package/lib/skeletons/_angular/base-mobile/src/app/features/about/legal-notice/legal-notice.component.ts

@@ -1,8 +1,10 @@
 import { Component } from '@angular/core';
+import { EuimAboutModule, EuimPdfViewerModule, EuimToolbarComponentModule } from '@eui/mobile-core';
+import { IonToolbar, IonHeader, IonContent } from '@ionic/angular/standalone';
+import { TranslatePipe } from '@ngx-translate/core';
 
 @Component({
-    templateUrl: './legal-notice.component.html'
+    templateUrl: './legal-notice.component.html',
+    imports: [TranslatePipe, IonToolbar, EuimAboutModule, EuimPdfViewerModule, IonHeader, IonContent, EuimToolbarComponentModule]
 })
-export class LegalNoticeComponent {
-
-}
+export class LegalNoticeComponent {}

package/lib/skeletons/_angular/base-mobile/src/app/features/about/licence-details/licence-details.component.ts

@@ -1,7 +1,10 @@
 import { Component } from '@angular/core';
+import { EuimAboutModule, EuimToolbarComponentModule } from '@eui/mobile-core';
+import { IonToolbar, IonHeader, IonContent } from '@ionic/angular/standalone';
+import { TranslatePipe } from '@ngx-translate/core';
 
 @Component({
-    templateUrl: './licence-details.component.html'
+    templateUrl: './licence-details.component.html',
+    imports: [TranslatePipe, IonToolbar, EuimAboutModule, IonHeader, IonContent, EuimToolbarComponentModule]
 })
-export class LicenceDetailsComponent {
-}
+export class LicenceDetailsComponent {}

package/lib/skeletons/_angular/base-mobile/src/app/features/about/opensource-licences/opensource-licences.component.ts

@@ -1,8 +1,12 @@
 import { Component } from '@angular/core';
 import { NavController } from '@ionic/angular';
+import { EuimAboutModule, EuimToolbarComponentModule } from '@eui/mobile-core';
+import { IonToolbar, IonHeader, IonContent } from '@ionic/angular/standalone';
+import { TranslatePipe } from '@ngx-translate/core';
 
 @Component({
-    templateUrl: './opensource-licences.component.html'
+    templateUrl: './opensource-licences.component.html',
+    imports: [TranslatePipe, IonToolbar, EuimAboutModule, IonHeader, IonContent, EuimToolbarComponentModule]
 })
 export class OpensourceLicencesComponent {
     constructor(

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

@@ -1,11 +1,50 @@
 <ion-header>
-    <ion-toolbar color="branding">
-        <euim-toolbar [hasSidebarTrigger]="true" [hasLanguageSelector]="true">
-            <euim-toolbar-title>eUI mobile showcase</euim-toolbar-title>
+    <ion-toolbar color="light">
+        <euim-toolbar [hasSidebarTrigger]="true">
+            <euim-toolbar-title>Home</euim-toolbar-title>
+            <euim-toolbar-action-items>
+                <ion-button>
+                    <ion-icon slot="icon-only" name="share-social-outline"></ion-icon>
+                </ion-button>
+            </euim-toolbar-action-items>
         </euim-toolbar>
     </ion-toolbar>
 </ion-header>
 
-<ion-content class="ion-padding">
-    Welcome to eUI mobile app
+<ion-content>
+    <ion-list>
+        @for (item of items; track $index;) {
+            @if (item.sectionTitle) {
+                <ion-list-header lines="full">
+                    <ion-label>{{ item.sectionTitle }}</ion-label>
+                </ion-list-header>
+            }
+            @for (item of item.items; track item;) {
+                <ion-item button lines="none" [href]="item.url" target="_blank">
+                    @if (item.icon) {
+                        <euim-avatar slot="start">
+                            <euim-avatar-icon>
+                                <ion-icon [name]="item.icon"></ion-icon>
+                            </euim-avatar-icon>
+                        </euim-avatar>
+                    }
+
+                    <ion-label>
+                        @if (item.title) {
+                            <div euimLabel euimLabelTitle euimLabelTruncate>{{ item.title }}</div>
+                        }
+                        @if (item.subtitle) {
+                            <div euimLabel euimLabelSubTitle>{{ item.subtitle }}</div>
+                        }
+                    </ion-label>
+                </ion-item>
+            }
+
+            @if (item.hasHelperText) {
+                <euim-helper-text>
+                    Please refer to documentation above to learn more about  eUI/Mobile library and  get started with variety of examples
+                </euim-helper-text>
+            }
+        }
+    </ion-list>
 </ion-content>

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

@@ -1,9 +1,78 @@
 import { Component, Inject } from '@angular/core';
 import { CONFIG_TOKEN, EuiAppConfig } from '@eui/core';
+import { EUIM_TOOLBAR, EUIM_AVATAR, EUIM_LABEL, EuimHelperTextComponent } from '@eui/mobile-core';
+import { IonToolbar, IonHeader, IonContent, IonList, IonButton, IonIcon, IonListHeader } from '@ionic/angular/standalone';
 
 @Component({
     templateUrl: './home.component.html',
+    imports: [EUIM_TOOLBAR, EUIM_AVATAR, EUIM_LABEL, IonList, IonListHeader, IonButton, IonIcon, EuimHelperTextComponent, IonToolbar, IonHeader, IonContent],
 })
 export class HomeComponent {
     constructor(@Inject(CONFIG_TOKEN) private config: EuiAppConfig) {}
+
+    items: ListItems[] = [
+        {
+            sectionTitle: 'DOCUMENTATION',
+            items: [
+                {
+                    title: 'Design System',
+                    subtitle: 'Explore 90+ mobile components',
+                    url: 'https://eui.ecdevops.eu/eui-showcase-ux-components-21.x/showcase-design-system/home',
+                    icon: 'color-palette-outline',
+                },
+                {   title: 'Components',
+                    subtitle: 'Explore 90+ mobile components',
+                    url: 'https://eui.ecdevops.eu/eui-showcase-mobile-20.x/home/components?segment=alphabetical',
+                    icon: 'cube-outline',
+                },
+                {   title: 'Patterns',
+                    subtitle: 'Explore proven component combinations',
+                    url: 'https://eui.ecdevops.eu/eui-showcase-mobile-patterns-20.x/home',
+                    icon: 'library-outline',
+                },
+                {   title: 'Applications',
+                    subtitle: 'Get inspired of 15+ eUI/Mobile apps ',
+                    url: 'https://eui.ecdevops.eu/eui-showcase-mobile-patterns-20.x/home/patterns?segment=apps',
+                    icon: 'apps-outline',
+                },
+                {   title: 'Plugins & Services',
+                    subtitle: 'Native hardware API’s',
+                    url: 'https://eui.ecdevops.eu/eui-showcase-mobile-20.x/home/plugins-services',
+                    icon: 'hardware-chip-outline',
+                },
+            ],
+
+            hasHelperText: true,
+        },
+        {
+            sectionTitle: 'CONTACT US',
+            items: [
+                {
+                    title: 'Teams',
+                    subtitle: 'Official eUI support channel ',
+                    url: 'https://teams.microsoft.com/l/channel/19%3a6db7a6cef52340eb91d67b8d75db2523%40thread.tacv2/%25E2%259D%2593%25E2%259D%2593%2520%2520HELPDESK%2520and%2520SUPPORT?groupId=fb6def72-c57b-4e8f-a82e-49be65d6e1f5&tenantId=b24c8b06-522c-46fe-9080-70926f8dddb1',
+                    icon: 'people-outline',
+                },
+                {
+                    title: 'Helpdesk',
+                    subtitle: 'Send us a support ticket',
+                    url: 'mailto:digit-eui-support@ec.europa.eu',
+                    icon: 'mail-outline',
+                },
+            ],
+        },
+    ];
+}
+
+interface Item {
+    title: string;
+    subtitle: string;
+    icon?: string;
+    url?: string;
+}
+
+interface ListItems {
+    sectionTitle?: string;
+    items: Item[];
+    hasHelperText?: boolean;
 }

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

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

package/lib/skeletons/_angular/base-mobile/src/app/features/module1/components/page1/page1.component.html

@@ -1,11 +1,30 @@
 <ion-header>
-    <ion-toolbar color="branding">
+    <ion-toolbar color="light">
         <euim-toolbar>
-            <euim-toolbar-title>Module 1 - Page 1</euim-toolbar-title>
+            <euim-toolbar-title>Page One</euim-toolbar-title>
+            <euim-toolbar-action-items>
+                <ion-button>
+                    <ion-icon slot="icon-only" name="ellipsis-vertical-outline"></ion-icon>
+                </ion-button>
+            </euim-toolbar-action-items>
         </euim-toolbar>
     </ion-toolbar>
+    <euim-header-details hasBorderBottom="false">
+        <div euimHeaderDetailsIcon>
+            <euim-avatar>
+                <euim-avatar-icon>
+                    <ion-icon name="reader-outline"></ion-icon>
+                </euim-avatar-icon>
+            </euim-avatar>
+        </div>
+        <div euimHeaderDetailsTitle><strong>Page One</strong></div>
+        <div euimHeaderDetailsMeta>Sample content</div>
+    </euim-header-details>
 </ion-header>
-
-<ion-content class="ion-padding">
-    page 1 content
+<ion-content>
+    <euim-empty-list-placeholder euimMarginTopLarge
+                                 description="Replace with your own content"
+                                 icon="cube-outline"
+                                 message="Module 1 / Page One">
+    </euim-empty-list-placeholder>
 </ion-content>

package/lib/skeletons/_angular/base-mobile/src/app/features/module1/components/page1/page1.component.ts

@@ -1,8 +1,9 @@
 import { Component } from '@angular/core';
-
+import { EUIM_TOOLBAR, EUIM_EMPTY_LIST_PLACEHOLDER, EUIM_HEADER_DETAILS, EUIM_AVATAR } from '@eui/mobile-core';
+import { IonToolbar, IonHeader, IonContent, IonIcon, IonButton } from '@ionic/angular/standalone';
 @Component({
     selector: 'page-one',
-    templateUrl: './page1.component.html'
+    templateUrl: './page1.component.html',
+    imports: [EUIM_TOOLBAR, EUIM_EMPTY_LIST_PLACEHOLDER, EUIM_HEADER_DETAILS, EUIM_AVATAR, IonIcon, IonButton, IonToolbar, IonHeader, IonContent],
 })
-export class Page1Component {
-}
+export class Page1Component {}

package/lib/skeletons/_angular/base-mobile/src/app/features/module1/components/page2/page2.component.html

@@ -1,11 +1,30 @@
 <ion-header>
-    <ion-toolbar color="branding">
+    <ion-toolbar color="light">
         <euim-toolbar>
-            <euim-toolbar-title>Module 1 - Page 2</euim-toolbar-title>
+            <euim-toolbar-title>Page Two</euim-toolbar-title>
+            <euim-toolbar-action-items>
+                <ion-button>
+                    <ion-icon slot="icon-only" name="ellipsis-vertical-outline"></ion-icon>
+                </ion-button>
+            </euim-toolbar-action-items>
         </euim-toolbar>
     </ion-toolbar>
+    <euim-header-details hasBorderBottom="false">
+        <div euimHeaderDetailsIcon>
+            <euim-avatar>
+                <euim-avatar-icon>
+                    <ion-icon name="reader-outline"></ion-icon>
+                </euim-avatar-icon>
+            </euim-avatar>
+        </div>
+        <div euimHeaderDetailsTitle><strong>Page Two</strong></div>
+        <div euimHeaderDetailsMeta>Sample content</div>
+    </euim-header-details>
 </ion-header>
-
-<ion-content class="ion-padding">
-    page 2 content
+<ion-content>
+    <euim-empty-list-placeholder euimMarginTopLarge
+                                 description="Replace with your own content"
+                                 icon="cube-outline"
+                                 message="Module 1 / Page Two">
+    </euim-empty-list-placeholder>
 </ion-content>

package/lib/skeletons/_angular/base-mobile/src/app/features/module1/components/page2/page2.component.ts

@@ -1,8 +1,10 @@
 import { Component } from '@angular/core';
+import { EUIM_TOOLBAR, EUIM_EMPTY_LIST_PLACEHOLDER, EUIM_HEADER_DETAILS, EUIM_AVATAR } from '@eui/mobile-core';
+import { IonToolbar, IonHeader, IonContent, IonIcon, IonButton } from '@ionic/angular/standalone';
 
 @Component({
     selector: 'page-two',
-    templateUrl: './page2.component.html'
+    templateUrl: './page2.component.html',
+    imports: [EUIM_HEADER_DETAILS, EUIM_AVATAR, EUIM_TOOLBAR, EUIM_EMPTY_LIST_PLACEHOLDER, IonIcon, IonButton, IonToolbar, IonHeader, IonContent],
 })
-export class Page2Component {
-}
+export class Page2Component {}

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

@@ -1,7 +1,7 @@
 <ion-header>
-    <ion-toolbar color="branding">
+    <ion-toolbar color="light">
         <euim-toolbar [hasSidebarTrigger]="true">
-            <euim-toolbar-title>Module 1 - home</euim-toolbar-title>
+            <euim-toolbar-title>Module 1</euim-toolbar-title>
         </euim-toolbar>
     </ion-toolbar>
 </ion-header>

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

@@ -1,15 +1,15 @@
 import { Component } from '@angular/core';
 import { NavController } from '@ionic/angular';
+import { EuimToolbarComponentModule } from '@eui/mobile-core';
+import { IonToolbar, IonHeader, IonContent, IonButton } from '@ionic/angular/standalone';
 
 @Component({
     templateUrl: './module1.component.html',
+    imports: [EuimToolbarComponentModule, IonToolbar, IonHeader, IonContent, IonButton],
 })
 export class Module1Component {
 
-    constructor(
-        private navCtrl: NavController,
-    ) {
-    }
+    constructor(private navCtrl: NavController) {}
 
     onNavigate(url: string) {
         this.navCtrl.navigateForward(url);