feat(core/application): app switch (#1007)

Co-authored-by: Lukas Maurer <lukas.maurer@siemens.com>

.github/workflows/deploy-pages-daily.yml

@@ -2,6 +2,8 @@ name: Deploy to GitHub Pages (DEV Version)
 
 on:
   workflow_dispatch:
+  schedule:
+    - cron: '0 6 * * 1-4'
 
 permissions:
   contents: write

packages/angular-test-app/src/app/app-routing.module.ts

@@ -12,6 +12,10 @@ import { RouterModule, Routes } from '@angular/router';
 import AboutAndLegal from 'src/preview-examples/about-and-legal';
 import ActionCard from 'src/preview-examples/action-card';
 import AGGrid from 'src/preview-examples/aggrid';
+import ApplicationExample from 'src/preview-examples/application';
+import ApplicationAppSwitchExample from 'src/preview-examples/application-app-switch';
+import ApplicationBreakpointExample from 'src/preview-examples/application-breakpoints';
+import ApplicationHeaderExample from 'src/preview-examples/application-header';
 import BasicNavigation from 'src/preview-examples/basic-navigation';
 import BasicNavigationWithOutHeader from 'src/preview-examples/basic-navigation-without-header';
 import Blind from 'src/preview-examples/blind';
@@ -28,6 +32,7 @@ import CategoryFilterSuggestions from 'src/preview-examples/category-filter-sugg
 import Checkbox from 'src/preview-examples/checkbox';
 import CheckboxIndeterminate from 'src/preview-examples/checkbox-indeterminate';
 import Chip from 'src/preview-examples/chip';
+import ContentExample from 'src/preview-examples/content';
 import PageHeader from 'src/preview-examples/content-header';
 import PageHeaderNoBack from 'src/preview-examples/content-header-no-back';
 import DateDropdown from 'src/preview-examples/date-dropdown';
@@ -160,6 +165,26 @@ const routes: Routes = [
   {
     path: 'preview',
     children: [
+      {
+        path: 'application',
+        component: ApplicationExample,
+      },
+      {
+        path: 'application-breakpoints',
+        component: ApplicationBreakpointExample,
+      },
+      {
+        path: 'application-app-switch',
+        component: ApplicationAppSwitchExample,
+      },
+      {
+        path: 'application-header',
+        component: ApplicationHeaderExample,
+      },
+      {
+        path: 'content',
+        component: ContentExample,
+      },
       {
         path: 'buttons',
         component: Buttons,

packages/angular-test-app/src/app/app.module.ts

@@ -19,6 +19,10 @@ import { AgGridModule } from 'ag-grid-angular';
 import AboutAndLegal from 'src/preview-examples/about-and-legal';
 import ActionCard from 'src/preview-examples/action-card';
 import AGGrid from 'src/preview-examples/aggrid';
+import ApplicationExample from 'src/preview-examples/application';
+import ApplicationAppSwitchExample from 'src/preview-examples/application-app-switch';
+import ApplicationBreakpointExample from 'src/preview-examples/application-breakpoints';
+import ApplicationHeaderExample from 'src/preview-examples/application-header';
 import BasicNavigation from 'src/preview-examples/basic-navigation';
 import BasicNavigationWithOutHeader from 'src/preview-examples/basic-navigation-without-header';
 import Blind from 'src/preview-examples/blind';
@@ -35,6 +39,7 @@ import CategoryFilterSuggestions from 'src/preview-examples/category-filter-sugg
 import Checkbox from 'src/preview-examples/checkbox';
 import CheckboxIndeterminate from 'src/preview-examples/checkbox-indeterminate';
 import Chip from 'src/preview-examples/chip';
+import ContentExample from 'src/preview-examples/content';
 import ContentHeader from 'src/preview-examples/content-header';
 import ContentHeaderNoBack from 'src/preview-examples/content-header-no-back';
 import DateDropdown from 'src/preview-examples/date-dropdown';
@@ -142,7 +147,12 @@ import { NavigationTestComponent } from './components/navigation-test.component'
 
 @NgModule({
   declarations: [
+    ApplicationExample,
+    ApplicationBreakpointExample,
+    ApplicationAppSwitchExample,
+    ApplicationHeaderExample,
     AppComponent,
+    ContentExample,
     Buttons,
     ButtonGroup,
     AGGrid,

packages/angular-test-app/src/preview-examples/about-and-legal.html

@@ -0,0 +1,11 @@
+<ix-application>
+  <ix-application-header>
+    <div class="placeholder-logo" slot="logo"></div>
+  </ix-application-header>
+  <ix-menu #menu>
+    <ix-menu-about>
+      <ix-menu-about-item label="Tab 1">Content 1</ix-menu-about-item>
+      <ix-menu-about-item label="Tab 2">Content 2</ix-menu-about-item>
+    </ix-menu-about>
+  </ix-menu>
+</ix-application>

packages/angular-test-app/src/preview-examples/about-and-legal.ts

@@ -11,17 +11,7 @@ import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
 
 @Component({
   selector: 'app-example',
-  template: `
-    <ix-basic-navigation>
-      <div class="placeholder-logo" slot="logo"></div>
-      <ix-menu #menu>
-        <ix-menu-about>
-          <ix-menu-about-item label="Tab 1">Content 1</ix-menu-about-item>
-          <ix-menu-about-item label="Tab 2">Content 2</ix-menu-about-item>
-        </ix-menu-about>
-      </ix-menu>
-    </ix-basic-navigation>
-  `,
+  templateUrl: './about-and-legal.html',
 })
 export default class AboutAndLegal implements AfterViewInit {
   @ViewChild('menu', { read: ElementRef })

packages/angular-test-app/src/preview-examples/application-app-switch.html

@@ -0,0 +1,17 @@
+<ix-application [appSwitchConfig]="appSwitchConfig">
+  <ix-application-header name="My Application">
+    <div class="placeholder-logo" slot="logo"></div>
+  </ix-application-header>
+  <ix-menu>
+    <ix-menu-item>Item 1</ix-menu-item>
+    <ix-menu-item>Item 2</ix-menu-item>
+  </ix-menu>
+
+  <ix-content>
+    <ix-content-header
+      slot="header"
+      header-title="My Content Page"
+    >
+    </ix-content-header>
+  </ix-content>
+</ix-application>

packages/angular-test-app/src/preview-examples/application-app-switch.ts

@@ -0,0 +1,40 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Component } from '@angular/core';
+import { AppSwitchConfiguration } from '@siemens/ix';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: './application-app-switch.html',
+})
+export default class ApplicationAppSwitchExample {
+  appSwitchConfig: AppSwitchConfiguration = {
+    i18nAppSwitch: 'Switch to Application',
+    currentAppId: 'demo-app-2',
+    apps: [
+      {
+        id: 'demo-app-1',
+        name: 'Floor App',
+        iconSrc: 'https://www.svgrepo.com/show/530661/genetic-data.svg',
+        url: 'https://ix.siemens.io/',
+        description: 'Example description for floor app',
+        target: '_self',
+      },
+      {
+        id: 'demo-app-2',
+        name: 'Calculator App',
+        iconSrc: 'https://www.svgrepo.com/show/530661/genetic-data.svg',
+        url: 'https://ix.siemens.io/',
+        description: 'Example description for floor app',
+        target: '_self',
+      },
+    ],
+  };
+}

packages/angular-test-app/src/preview-examples/application-breakpoints.html

@@ -0,0 +1,38 @@
+<ix-application application-name="Application name" [breakpoints]="breakpoints">
+  <ix-application-header name="My Application">
+    <div class="placeholder-logo" slot="logo"></div>
+
+    <ix-dropdown-button variant="secondary" label="Select config" ghost>
+      <ix-dropdown-item label="Config 1"></ix-dropdown-item>
+      <ix-dropdown-item label="Config 2"></ix-dropdown-item>
+      <ix-dropdown-item label="Config 3"></ix-dropdown-item>
+    </ix-dropdown-button>
+
+    <ix-avatar>
+      <ix-dropdown-item label="Action 1"></ix-dropdown-item>
+      <ix-dropdown-item label="Action 2"></ix-dropdown-item>
+      <ix-dropdown-item label="Action 3"></ix-dropdown-item>
+    </ix-avatar>
+  </ix-application-header>
+
+  <ix-menu>
+    <ix-menu-item>Item 1</ix-menu-item>
+    <ix-menu-item>Item 2</ix-menu-item>
+  </ix-menu>
+  <ix-content>
+    <ix-content-header
+      slot="header"
+      header-title="Choose breakpoint"
+    >
+    </ix-content-header>
+
+    <input id="small" type="radio" name="layout" value="sm" (change)="onCheckedChange('sm')" />
+    <label for="small">Small</label>
+
+    <input id="medium" type="radio" name="layout" value="md" (change)="onCheckedChange('md')" checked />
+    <label for="medium">Medium</label>
+
+    <input id="large" type="radio" name="layout" value="lg" (change)="onCheckedChange('lg')" />
+    <label for="large">Large</label>
+  </ix-content>
+</ix-application>

packages/angular-test-app/src/preview-examples/application-breakpoints.ts

@@ -0,0 +1,22 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { Component } from '@angular/core';
+import { Breakpoint } from '@siemens/ix';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: './application-breakpoints.html',
+})
+export default class ApplicationBreakpointExample {
+  breakpoints: Breakpoint[] = ['md'];
+
+  onCheckedChange(breakpoint: Breakpoint) {
+    this.breakpoints = [breakpoint];
+  }
+}

packages/angular-test-app/src/preview-examples/application-header.html

@@ -0,0 +1,19 @@
+<ix-application-header name="My Application">
+  <div class="placeholder-logo" slot="logo"></div>
+
+  <ix-icon-button ghost icon="checkboxes"></ix-icon-button>
+  <ix-icon-button ghost icon="checkboxes"></ix-icon-button>
+  <ix-icon-button ghost icon="checkboxes"></ix-icon-button>
+
+  <ix-dropdown-button variant="secondary" label="Select config" ghost>
+    <ix-dropdown-item label="Config 1"></ix-dropdown-item>
+    <ix-dropdown-item label="Config 2"></ix-dropdown-item>
+    <ix-dropdown-item label="Config 3"></ix-dropdown-item>
+  </ix-dropdown-button>
+
+  <ix-avatar>
+    <ix-dropdown-item label="Action 1"></ix-dropdown-item>
+    <ix-dropdown-item label="Action 2"></ix-dropdown-item>
+    <ix-dropdown-item label="Action 3"></ix-dropdown-item>
+  </ix-avatar>
+</ix-application-header>

packages/angular-test-app/src/preview-examples/application-header.ts

@@ -0,0 +1,16 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: './application-header.html',
+})
+export default class ApplicationHeaderExample {}

packages/angular-test-app/src/preview-examples/application.html

@@ -0,0 +1,17 @@
+<ix-application>
+  <ix-application-header name="My Application">
+    <div class="placeholder-logo" slot="logo"></div>
+  </ix-application-header>
+  <ix-menu>
+    <ix-menu-item>Item 1</ix-menu-item>
+    <ix-menu-item>Item 2</ix-menu-item>
+  </ix-menu>
+
+  <ix-content>
+    <ix-content-header
+      slot="header"
+      header-title="My Content Page"
+    >
+    </ix-content-header>
+  </ix-content>
+</ix-application>

packages/angular-test-app/src/preview-examples/application.ts

@@ -0,0 +1,16 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: './application.html',
+})
+export default class ApplicationExample {}

packages/angular-test-app/src/preview-examples/content.html

@@ -0,0 +1,13 @@
+<ix-content>
+  <ix-content-header slot="header" header-title="My Content Page">
+  </ix-content-header>
+  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+    voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+    clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+    amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
+    sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
+    rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
+    ipsum dolor sit amet.
+</ix-content>

packages/angular-test-app/src/preview-examples/content.ts

@@ -0,0 +1,16 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: './content.html',
+})
+export default class ContentExample {}

packages/angular-test-app/src/preview-examples/menu-category.html

@@ -1,4 +1,4 @@
-<ix-basic-navigation>
+<ix-application>
   <ix-menu>
     <ix-menu-item home icon="home">Home</ix-menu-item>
     <ix-menu-item icon="globe">Normal Tab</ix-menu-item>
@@ -7,4 +7,4 @@
       <ix-menu-item icon="globe">Nested Tab</ix-menu-item>
     </ix-menu-category>
   </ix-menu>
-</ix-basic-navigation>
+</ix-application>

packages/angular-test-app/src/preview-examples/popover-news.html

@@ -0,0 +1,13 @@
+<ix-application>
+  <ix-application-header>
+    <div class="placeholder-logo" slot="logo"></div>
+  </ix-application-header>
+  <ix-menu>
+    <ix-menu-about>
+      <ix-menu-about-item label="Example"> </ix-menu-about-item>
+    </ix-menu-about>
+    <ix-menu-about-news label="Test" show about-item-label="Example">
+      Test
+    </ix-menu-about-news>
+  </ix-menu>
+</ix-application>

packages/angular-test-app/src/preview-examples/popover-news.ts

@@ -11,18 +11,6 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-example',
-  template: `
-    <ix-basic-navigation>
-      <div class="placeholder-logo" slot="logo"></div>
-      <ix-menu>
-        <ix-menu-about>
-          <ix-menu-about-item label="Example"> </ix-menu-about-item>
-        </ix-menu-about>
-        <ix-menu-about-news label="Test" show about-item-label="Example">
-          Test
-        </ix-menu-about-news>
-      </ix-menu>
-    </ix-basic-navigation>
-  `,
+  templateUrl: './popover-news.html',
 })
 export default class PopoverNews {}