@eui/cli 19.3.13 → 19.3.14-snapshot-1774513968963

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

@@ -1,6 +1,6 @@
 {
     "name": "eui-angular-app",
-    "version": "19.3.13",
+    "version": "19.3.14-snapshot-1774513968963",
     "license": "EUPL-1.1",
     "scripts": {
         "ng": "ng",
@@ -21,7 +21,7 @@
     },
     "private": true,
     "dependencies": {
-        "@eui/deps-base": "19.3.13"
+        "@eui/deps-base": "19.3.14-snapshot-1774513968963"
     },
     "resolutions": {
         "js-yaml": ">=3.13.1",

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

@@ -1,6 +1,6 @@
 {
     "name": "eui-angular-app",
-    "version": "19.3.13",
+    "version": "19.3.14-snapshot-1774513968963",
     "license": "EUPL-1.1",
     "scripts": {
         "ng": "ng",
@@ -20,7 +20,7 @@
     },
     "private": true,
     "dependencies": {
-        "@eui/deps-base-next": "19.3.13",
+        "@eui/deps-base-next": "19.3.14-snapshot-1774513968963",
         "@eui/mobile-core": "20.0.1",
         "@eui/mobile-styles": "20.0.1"
     },

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

@@ -2,12 +2,12 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
 const routes: Routes = [
-    { path: '', redirectTo: 'screen/home', pathMatch: 'full' },
+    { path: '', redirectTo: 'screen/welcome', pathMatch: 'full' },
     { path: 'index.jsp', redirectTo: 'screen/home' },
     { path: 'screen/home', loadChildren: () => import('./features/home/home.routes').then(m => m.HOME_ROUTES) },
     { path: 'screen/module1', loadChildren: () => import('./features/module1/module1.routes').then(m => m.MODULE1_ROUTES) },
-    { path: 'screen/module2', loadChildren: () => import('./features/module2/module2.routes').then(m => m.MODULE2_ROUTES) },
     { path: 'screen/about', loadChildren: () => import('./features/about/about.routes').then(m => m.ABOUT_ROUTES) },
+    { path: 'screen/welcome', loadChildren: () => import('./features/welcome/welcome.routes').then(m => m.WELCOME_ROUTES) },
 ];
 
 @NgModule({

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

@@ -21,26 +21,49 @@
             </euim-user-profile-action>
         </euim-user-profile>
         <euim-sidebar-content>
-            <ng-container *ngFor="let menuItem of sidebarItems">
-                <ion-item-divider *ngIf="menuItem?.isSection">
-                    <ion-label>{{menuItem?.label}}</ion-label>
-                </ion-item-divider>
-                <ion-item *ngIf="!menuItem?.isSection"
-                          (click)="onItemClick(menuItem)"
-                          button
-                          lines="none">
-                    <ion-icon [color]="menuItem.iconColor" [name]="menuItem.icon"
-                              slot="start"></ion-icon>
-                    <ion-label>
-                        <div euimDark euimLabel>{{menuItem?.label}}</div>
-                    </ion-label>
-                </ion-item>
-            </ng-container>
+            @for (item of items; track item) {
+                @if (item?.isSection) {
+                    <ion-item-divider>
+                        <ion-label>{{item?.label}}</ion-label>
+                    </ion-item-divider>
+                }
+
+                @if (!item?.isSection) {
+                    <ion-item *ngIf="!item?.isSection"
+                              (click)="onItemClick(item)"
+                              button
+                              lines="none">
+                        <ion-icon [name]="item.icon"
+                                  slot="start"></ion-icon>
+                        <ion-label>
+                            <div euimLabel>{{item?.label}}</div>
+                        </ion-label>
+
+                        @if (item.hasBadge) {
+                            <ion-badge color="primary" slot="end">Manager</ion-badge>
+                        }
+                    </ion-item>
+                }
+            }
         </euim-sidebar-content>
         <ion-footer>
-            <ion-item>
-                <div euimLabel euimSizeM>eUl/Mobile</div>
-                <div euimLabel euimSizeS slot="end"></div>
+            <ion-item button lines="none" href="screen/about">
+                <ion-icon name="phone-portrait-outline" slot="start"></ion-icon>
+                <ion-label>
+                    <div euimLabel>About</div>
+                </ion-label>
+            </ion-item>
+            <ion-item button lines="none" href="screen/welcome">
+                <ion-icon name="bulb-outline" slot="start"></ion-icon>
+                <ion-label>
+                    <div euimLabel>Welcome</div>
+                </ion-label>
+            </ion-item>
+            <ion-item button lines="none">
+                <ion-icon name="power-outline" slot="start"></ion-icon>
+                <ion-label>
+                    <div euimLabel>Sign Out</div>
+                </ion-label>
             </ion-item>
         </ion-footer>
     </euim-sidebar>

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

@@ -9,7 +9,7 @@ import { NavController } from "@ionic/angular";
 @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
-    standalone:false,
+    standalone: false,
 })
 export class AppComponent implements OnDestroy {
     userInfos: UserState;
@@ -18,30 +18,37 @@ export class AppComponent implements OnDestroy {
     // an array to keep all subscriptions and easily unsubscribe
     subs: Subscription[] = [];
 
-    public sidebarItems: MenuItem[] = [
+    public items: MenuItem[] = [
         {
             label: 'Home', url: 'screen/home', icon: 'home-outline',
-            iconColor: 'dark',
         },
         {
             isSection: true,
-            label: 'MODULE 1',
+            label: 'DOCUMENTATION',
         },
-        { label: 'Module Page', url: 'screen/module1',
-        icon: 'document-outline', iconColor: 'dark', },
-        { label: 'Page 1', url: 'screen/module1/page1',
-            icon: 'document-outline', iconColor: 'dark', },
-        { label: 'Page 2', url: 'screen/module1/page2',
-            icon: 'document-outline', iconColor: 'dark', },
+        { label: 'Design System', url: 'https://eui.ecdevops.eu/eui-showcase-ux-components-21.x/showcase-design-system/home',
+            icon: 'color-palette-outline', },
+        { label: 'Components', url: 'https://eui.ecdevops.eu/eui-showcase-mobile-20.x/home/components?segment=alphabetical',
+            icon: 'cube-outline', },
+        { label: 'Patterns', url: 'https://eui.ecdevops.eu/eui-showcase-mobile-patterns-20.x/home',
+            icon: 'library-outline', },
+        { label: 'Applications', url: 'https://eui.ecdevops.eu/eui-showcase-mobile-patterns-20.x/home/patterns?segment=apps',
+            icon: 'apps-outline', },
+        { label: 'Plugins & Services', url: 'https://eui.ecdevops.eu/eui-showcase-mobile-20.x/home/plugins-services',
+            icon: 'hardware-chip-outline', },
         {
             isSection: true,
-            label: 'MODULE 2',
+            label: 'SAMPLE CONTENT',
+        },
+        { label: 'Module Page', url: 'screen/module1',
+            icon: 'document-outline', },
+        {
+            label: 'Page One', url: 'screen/module1/page1',
+            icon: 'reader-outline',
         },
-        { label: 'Module Page', url: 'screen/module2',
-            icon: 'document-outline', iconColor: 'dark', },
         {
-            label: 'About this app', url: 'screen/about',
-            icon: 'phone-portrait-outline', iconColor: 'dark',
+            label: 'Page Two', url: 'screen/module1/page2',
+            icon: 'reader-outline',
         },
 
     ];
@@ -74,4 +81,5 @@ export interface MenuItem {
     label: string;
     url?: string;
     isSection?: boolean;
+    hasBadge?: boolean;
 }

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 }}

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,12 +1,78 @@
 import { Component, Inject } from '@angular/core';
 import { CONFIG_TOKEN, EuiAppConfig } from '@eui/core';
-import { EuimToolbarComponentModule } from '@eui/mobile-core';
-import { IonToolbar, IonHeader, IonContent } from '@ionic/angular/standalone';
+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: [EuimToolbarComponentModule, IonToolbar, IonHeader, IonContent],
+    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/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,9 +1,9 @@
 import { Component } from '@angular/core';
-import { EuimToolbarComponentModule } from '@eui/mobile-core';
-import { IonToolbar, IonHeader, IonContent } from '@ionic/angular/standalone';
+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',
-    imports: [EuimToolbarComponentModule, IonToolbar, IonHeader, IonContent],
+    imports: [EUIM_TOOLBAR, EUIM_EMPTY_LIST_PLACEHOLDER, EUIM_HEADER_DETAILS, EUIM_AVATAR, IonIcon, IonButton, IonToolbar, IonHeader, IonContent],
 })
 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,10 +1,10 @@
 import { Component } from '@angular/core';
-import { EuimToolbarComponentModule } from '@eui/mobile-core';
-import { IonToolbar, IonHeader, IonContent } from '@ionic/angular/standalone';
+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',
-    imports: [EuimToolbarComponentModule, IonToolbar, IonHeader, IonContent],
+    imports: [EUIM_HEADER_DETAILS, EUIM_AVATAR, EUIM_TOOLBAR, EUIM_EMPTY_LIST_PLACEHOLDER, IonIcon, IonButton, IonToolbar, IonHeader, IonContent],
 })
 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/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/web-symfony/myapp-web/package.json

@@ -1,6 +1,6 @@
 {
     "name": "eui-angular-app",
-    "version": "19.3.13",
+    "version": "19.3.14-snapshot-1774513968963",
     "license": "EUPL-1.1",
     "description": "eUI JEE Symfony app scripts",
     "scripts": {
@@ -18,6 +18,6 @@
     },
     "private": true,
     "dependencies": {
-        "@eui/deps-base": "19.3.13"
+        "@eui/deps-base": "19.3.14-snapshot-1774513968963"
     }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@eui/cli",
-    "version": "19.3.13",
-    "tag": "v19-lts",
+    "version": "19.3.14-snapshot-1774513968963",
+    "tag": "snapshot",
     "license": "EUPL-1.1",
     "description": "eUI CLI app generator",
     "bin": {

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

@@ -1,11 +0,0 @@
-<ion-header>
-    <ion-toolbar color="branding">
-        <euim-toolbar [hasSidebarTrigger]="true">
-            <euim-toolbar-title>Module 2 - home</euim-toolbar-title>
-        </euim-toolbar>
-    </ion-toolbar>
-</ion-header>
-
-<ion-content class="ion-padding">
-    Module 2 page content
-</ion-content>

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

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

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

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