feat(launchpad): align to new style and responsive design

api-goldens/element-ng/application-header/index.api.md

@@ -135,15 +135,15 @@ export class SiHeaderSiemensLogoComponent extends SiHeaderLogoDirective {
 // @public (undocumented)
 export class SiLaunchpadFactoryComponent {
     readonly apps: _angular_core.InputSignal<App[] | AppCategory[]>;
-    readonly closeText: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
+    readonly closeText: _angular_core.InputSignal<TranslatableString>;
     readonly enableFavorites: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    readonly favoriteAppsText: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
+    readonly favoriteAppsText: _angular_core.InputSignal<TranslatableString>;
     // (undocumented)
     readonly favoriteChange: _angular_core.OutputEmitterRef<FavoriteChangeEvent>;
-    readonly showLessAppsText: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
-    readonly showMoreAppsText: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
-    readonly subtitleText: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
-    readonly titleText: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
+    readonly showLessAppsText: _angular_core.InputSignal<TranslatableString>;
+    readonly showMoreAppsText: _angular_core.InputSignal<TranslatableString>;
+    readonly subtitleText: _angular_core.InputSignal<TranslatableString | undefined>;
+    readonly titleText: _angular_core.InputSignal<TranslatableString>;
 }
 
 // (No @packageDocumentation comment for this package)

api-goldens/element-ng/translate/index.api.md

@@ -296,6 +296,8 @@ export interface SiTranslatableKeys {
     // (undocumented)
     'SI_LAUNCHPAD.DEFAULT_CATEGORY_TITLE'?: string;
     // (undocumented)
+    'SI_LAUNCHPAD.EXTERNAL_LINK'?: string;
+    // (undocumented)
     'SI_LAUNCHPAD.FAVORITE_APPS'?: string;
     // (undocumented)
     'SI_LAUNCHPAD.SHOW_LESS'?: string;
@@ -304,8 +306,6 @@ export interface SiTranslatableKeys {
     // (undocumented)
     'SI_LAUNCHPAD.SUB_TITLE'?: string;
     // (undocumented)
-    'SI_LAUNCHPAD.SUBTITLE'?: string;
-    // (undocumented)
     'SI_LAUNCHPAD.TITLE'?: string;
     // (undocumented)
     'SI_LIST_DETAILS.BACK'?: string;

playwright/e2e/element-examples/si-launchpad.spec.ts

@@ -13,7 +13,7 @@ test.describe('launchpad', () => {
     await page.getByText('Show more').click();
     await si.runVisualAndA11yTests();
 
-    await page.getByRole('link', { name: 'Rocket' }).locator('.favorite-icon').click();
+    await page.getByRole('link', { name: 'Fischbach' }).first().locator('.favorite-icon').click();
     await si.runVisualAndA11yTests('new favorite');
   });
 

playwright/snapshots/navbar-launchpad.spec.ts-snapshots/si-navbar--si-navbar-launchpad--medium-size.yaml

@@ -8,8 +8,9 @@
       - /url: "#/viewer/viewer/item2"
   - button "Help"
   - button "Jane Smith"
-- paragraph: Launchpad
+- paragraph: Switch applications
 - paragraph: Access all your apps
+- button "Close launchpad"
 - link "Assets":
   - /url: .
 - link "Water":
@@ -19,5 +20,4 @@
 - link "Statistics":
   - /url: .
 - link "Add more":
-  - /url: https://example.org
-- button "Close launchpad"
+  - /url: https://example.org

playwright/snapshots/navbar-launchpad.spec.ts-snapshots/si-navbar--si-navbar-launchpad-categories.yaml

@@ -10,9 +10,10 @@
       - /url: "#/viewer/viewer/item2"
   - button "Help"
   - button "Jane Smith"
-- paragraph: Launchpad
+- paragraph: Switch applications
 - paragraph: Access all your apps
-- text: Favorite apps
+- button "Close launchpad"
+- text: Favorites
 - link "Water":
   - /url: .
 - button "Show less"
@@ -27,5 +28,4 @@
 - link "Statistics":
   - /url: .
 - link "Add more":
-  - /url: https://example.org
-- button "Close launchpad"
+  - /url: https://example.org

playwright/snapshots/navbar-launchpad.spec.ts-snapshots/si-navbar--si-navbar-launchpad.yaml

@@ -10,8 +10,9 @@
       - /url: "#/viewer/viewer/item2"
   - button "Help"
   - button "Jane Smith"
-- paragraph: Launchpad
+- paragraph: Switch applications
 - paragraph: Access all your apps
+- button "Close launchpad"
 - link "Assets":
   - /url: .
 - link "Water":
@@ -21,5 +22,4 @@
 - link "Statistics":
   - /url: .
 - link "Add more":
-  - /url: https://example.org
-- button "Close launchpad"
+  - /url: https://example.org

playwright/snapshots/si-launchpad.spec.ts-snapshots/si-application-header--si-launchpad--mobile.yaml

@@ -2,18 +2,59 @@
   - button "Launchpad" [expanded]
   - link "Siemens logo":
     - /url: "#/"
-- paragraph: Launchpad
-- paragraph: Access all your apps
-- text: Favorite apps
-- link "Fischbach":
+- paragraph: Switch applications
+- button "Close launchpad"
+- text: Favorites
+- link "Assets System name":
   - /url: .
-- button "Show less"
-- link "Assets":
+- link "Fischbach System name":
   - /url: .
-- link "Fischbach":
+- link "Statistics System name":
+  - /url: "#/viewer/viewer/stats"
+- link "Rocket System name":
   - /url: .
-- link "Rocket":
+- button "Show less"
+- link "Assets System name":
   - /url: .
-- link "Statistics":
+- link "Fischbach System name":
+  - /url: .
+- link "Statistics System name":
   - /url: "#/viewer/viewer/stats"
-- button "Close launchpad"
+- link "Rocket System name":
+  - /url: .
+- link "This is a really long name External application System name":
+  - /url: .
+  - text: ""
+- link "App name 1 External application System name":
+  - /url: .
+  - text: ""
+- link "App name 2 System name":
+  - /url: .
+- link "App name 3 System name":
+  - /url: .
+- link "This is a really long name External application System name":
+  - /url: .
+  - text: ""
+- link "App name 4 System name":
+  - /url: .
+- link "App name 5 System name":
+  - /url: .
+- link "App name 6 This is a really long name":
+  - /url: .
+- link "App name 7 System name":
+  - /url: .
+- link "App name 8 System name":
+  - /url: .
+- link "App name 9 System name":
+  - /url: .
+- link /App name \d+ System name/:
+  - /url: .
+- heading "Launchpad Configuration" [level=2]
+- paragraph: Configure your launchpad settings and test different display modes.
+- text: Enable Favorites Show favorite apps at the top
+- switch "Enable Favorites Show favorite apps at the top" [checked]
+- text: Enable Categories Group apps into organized categories
+- switch "Enable Categories Group apps into organized categories"
+- paragraph:
+  - strong: "Demo note:"
+  - text: Click the header icon to open the launchpad and test your settings

playwright/snapshots/si-launchpad.spec.ts-snapshots/si-application-header--si-launchpad--new-favorite.yaml

@@ -2,20 +2,57 @@
   - button "Launchpad" [expanded]
   - link "Siemens logo":
     - /url: "#/"
-- paragraph: Launchpad
-- paragraph: Access all your apps
-- text: Favorite apps
-- link "Fischbach":
+- paragraph: Switch applications
+- button "Close launchpad"
+- text: Favorites
+- link "Assets System name":
   - /url: .
-- link "Rocket":
+- link "Statistics System name":
+  - /url: "#/viewer/viewer/stats"
+- link "Rocket System name":
   - /url: .
 - button "Show less"
-- link "Assets":
-  - /url: .
-- link "Fischbach":
+- link "Assets System name":
   - /url: .
-- link "Rocket":
+- link "Fischbach System name":
   - /url: .
-- link "Statistics":
+- link "Statistics System name":
   - /url: "#/viewer/viewer/stats"
-- button "Close launchpad"
+- link "Rocket System name":
+  - /url: .
+- link "This is a really long name External application System name":
+  - /url: .
+  - text: ""
+- link "App name 1 External application System name":
+  - /url: .
+  - text: ""
+- link "App name 2 System name":
+  - /url: .
+- link "App name 3 System name":
+  - /url: .
+- link "This is a really long name External application System name":
+  - /url: .
+  - text: ""
+- link "App name 4 System name":
+  - /url: .
+- link "App name 5 System name":
+  - /url: .
+- link "App name 6 This is a really long name":
+  - /url: .
+- link "App name 7 System name":
+  - /url: .
+- link "App name 8 System name":
+  - /url: .
+- link "App name 9 System name":
+  - /url: .
+- link /App name \d+ System name/:
+  - /url: .
+- heading "Launchpad Configuration" [level=2]
+- paragraph: Configure your launchpad settings and test different display modes.
+- text: Enable Favorites Show favorite apps at the top
+- switch "Enable Favorites Show favorite apps at the top" [checked]
+- text: Enable Categories Group apps into organized categories
+- switch "Enable Categories Group apps into organized categories"
+- paragraph:
+  - strong: "Demo note:"
+  - text: Click the header icon to open the launchpad and test your settings

playwright/snapshots/si-launchpad.spec.ts-snapshots/si-application-header--si-launchpad.yaml

@@ -2,18 +2,59 @@
   - button "Launchpad" [expanded]
   - link "Siemens logo":
     - /url: "#/"
-- paragraph: Launchpad
-- paragraph: Access all your apps
-- text: Favorite apps
-- link "Fischbach":
+- paragraph: Switch applications
+- button "Close launchpad"
+- text: Favorites
+- link "Assets System name":
   - /url: .
-- button "Show less"
-- link "Assets":
+- link "Fischbach System name":
   - /url: .
-- link "Fischbach":
+- link "Statistics System name":
+  - /url: "#/viewer/viewer/stats"
+- link "Rocket System name":
   - /url: .
-- link "Rocket":
+- button "Show less"
+- link "Assets System name":
   - /url: .
-- link "Statistics":
+- link "Fischbach System name":
+  - /url: .
+- link "Statistics System name":
   - /url: "#/viewer/viewer/stats"
-- button "Close launchpad"
+- link "Rocket System name":
+  - /url: .
+- link "This is a really long name External application System name":
+  - /url: .
+  - text: ""
+- link "App name 1 External application System name":
+  - /url: .
+  - text: ""
+- link "App name 2 System name":
+  - /url: .
+- link "App name 3 System name":
+  - /url: .
+- link "This is a really long name External application System name":
+  - /url: .
+  - text: ""
+- link "App name 4 System name":
+  - /url: .
+- link "App name 5 System name":
+  - /url: .
+- link "App name 6 This is a really long name":
+  - /url: .
+- link "App name 7 System name":
+  - /url: .
+- link "App name 8 System name":
+  - /url: .
+- link "App name 9 System name":
+  - /url: .
+- link /App name \d+ System name/:
+  - /url: .
+- heading "Launchpad Configuration" [level=2]
+- paragraph: Configure your launchpad settings and test different display modes.
+- text: Enable Favorites Show favorite apps at the top
+- switch "Enable Favorites Show favorite apps at the top" [checked]
+- text: Enable Categories Group apps into organized categories
+- switch "Enable Categories Group apps into organized categories"
+- paragraph:
+  - strong: "Demo note:"
+  - text: Click the header icon to open the launchpad and test your settings