From 2be577623030c33d780cb30503b0c688f3179506 Mon Sep 17 00:00:00 2001
From: Lukas Maurer <lukas.maurer@siemens.com>
Date: Fri, 11 Nov 2022 16:37:18 +0100
Subject: [PATCH 1/9] docs(toggle): rename file

---
 packages/angular-test-app/src/app/app-routing.module.ts       | 4 ++--
 packages/angular-test-app/src/app/app.module.ts               | 2 +-
 .../{toggle-custom-disable.ts => toggle-disabled.ts}          | 2 +-
 .../{toggle-custom-disable.html => toggle-disabled.html}      | 2 +-
 packages/react-test-app/src/main.tsx                          | 2 +-
 .../{toggle-custom-disable.tsx => toggle-disabled.tsx}        | 0
 6 files changed, 6 insertions(+), 6 deletions(-)
 rename packages/angular-test-app/src/preview-examples/{toggle-custom-disable.ts => toggle-disabled.ts} (89%)
 rename packages/html-test-app/src/preview-examples/{toggle-custom-disable.html => toggle-disabled.html} (86%)
 rename packages/react-test-app/src/preview-examples/{toggle-custom-disable.tsx => toggle-disabled.tsx} (100%)

diff --git a/packages/angular-test-app/src/app/app-routing.module.ts b/packages/angular-test-app/src/app/app-routing.module.ts
index 5239109527b..67d1187774a 100644
--- a/packages/angular-test-app/src/app/app-routing.module.ts
+++ b/packages/angular-test-app/src/app/app-routing.module.ts
@@ -73,7 +73,7 @@ import { Toast } from 'src/preview-examples/toast';
 import { ToastCustom } from 'src/preview-examples/toast-custom';
 import { Toggle } from 'src/preview-examples/toggle';
 import { ToggleColor } from 'src/preview-examples/toggle-color';
-import { ToggleCustomDisabled } from 'src/preview-examples/toggle-custom-disable';
+import { ToggleCustomDisabled } from 'src/preview-examples/toggle-disabled';
 import { ToggleCustomLabel } from 'src/preview-examples/toggle-custom-label';
 import { Tree } from 'src/preview-examples/tree';
 import { TreeCustom } from 'src/preview-examples/tree-custom';
@@ -252,7 +252,7 @@ const routes: Routes = [
       { path: 'tile', component: Tile },
       { path: 'timepicker', component: Timepicker },
       { path: 'toggle-color', component: ToggleColor },
-      { path: 'toggle-custom-disabled', component: ToggleCustomDisabled },
+      { path: 'toggle-disabled', component: ToggleCustomDisabled },
       { path: 'toggle-custom-label', component: ToggleCustomLabel },
       { path: 'toggle', component: Toggle },
       { path: 'upload', component: Upload },
diff --git a/packages/angular-test-app/src/app/app.module.ts b/packages/angular-test-app/src/app/app.module.ts
index 3a0de055ab3..dab41b72897 100644
--- a/packages/angular-test-app/src/app/app.module.ts
+++ b/packages/angular-test-app/src/app/app.module.ts
@@ -81,7 +81,7 @@ import { Toast } from 'src/preview-examples/toast';
 import { ToastCustom } from 'src/preview-examples/toast-custom';
 import { Toggle } from 'src/preview-examples/toggle';
 import { ToggleColor } from 'src/preview-examples/toggle-color';
-import { ToggleCustomDisabled } from 'src/preview-examples/toggle-custom-disable';
+import { ToggleCustomDisabled } from 'src/preview-examples/toggle-disabled';
 import { ToggleCustomLabel } from 'src/preview-examples/toggle-custom-label';
 import { Tree } from 'src/preview-examples/tree';
 import { TreeCustom } from 'src/preview-examples/tree-custom';
diff --git a/packages/angular-test-app/src/preview-examples/toggle-custom-disable.ts b/packages/angular-test-app/src/preview-examples/toggle-disabled.ts
similarity index 89%
rename from packages/angular-test-app/src/preview-examples/toggle-custom-disable.ts
rename to packages/angular-test-app/src/preview-examples/toggle-disabled.ts
index a055ac14c46..35278e72058 100644
--- a/packages/angular-test-app/src/preview-examples/toggle-custom-disable.ts
+++ b/packages/angular-test-app/src/preview-examples/toggle-disabled.ts
@@ -10,7 +10,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-toggle-custom-disabled',
+  selector: 'app-toggle-disabled',
   template: ` <ix-toggle disabled></ix-toggle> `,
 })
 export class ToggleCustomDisabled {}
diff --git a/packages/html-test-app/src/preview-examples/toggle-custom-disable.html b/packages/html-test-app/src/preview-examples/toggle-disabled.html
similarity index 86%
rename from packages/html-test-app/src/preview-examples/toggle-custom-disable.html
rename to packages/html-test-app/src/preview-examples/toggle-disabled.html
index d257dd8aeca..9924087852b 100644
--- a/packages/html-test-app/src/preview-examples/toggle-custom-disable.html
+++ b/packages/html-test-app/src/preview-examples/toggle-disabled.html
@@ -7,7 +7,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Toggle custom disable example</title>
+    <title>Toggle disabled example</title>
   </head>
   <body class="theme-brand-dark">
     <!-- Preview code -->
diff --git a/packages/react-test-app/src/main.tsx b/packages/react-test-app/src/main.tsx
index 17ab9c632db..40ea81480b6 100644
--- a/packages/react-test-app/src/main.tsx
+++ b/packages/react-test-app/src/main.tsx
@@ -78,7 +78,7 @@ import { Toast } from './preview-examples/toast';
 import { ToastCustom } from './preview-examples/toast-custom';
 import { Toggle } from './preview-examples/toggle';
 import { ToggleColor } from './preview-examples/toggle-color';
-import { ToggleDisabled } from './preview-examples/toggle-custom-disable';
+import { ToggleDisabled } from './preview-examples/toggle-disabled';
 import { ToggleCustomLabel } from './preview-examples/toggle-custom-label';
 import { Tree } from './preview-examples/tree';
 import { TreeCustom } from './preview-examples/tree-custom';
diff --git a/packages/react-test-app/src/preview-examples/toggle-custom-disable.tsx b/packages/react-test-app/src/preview-examples/toggle-disabled.tsx
similarity index 100%
rename from packages/react-test-app/src/preview-examples/toggle-custom-disable.tsx
rename to packages/react-test-app/src/preview-examples/toggle-disabled.tsx

From fbde1093b3c76e0535d7ba98ced02ab303bb07e6 Mon Sep 17 00:00:00 2001
From: Lukas Maurer <lukas.maurer@siemens.com>
Date: Fri, 11 Nov 2022 16:41:28 +0100
Subject: [PATCH 2/9] fix(core/map-navigation-overlay): change overlay to slot
 based implementation

---
 .../map-navigation-overlay.scss               |   1 +
 .../map-navigation-overlay.tsx                |  42 +++++++++++++++++-
 .../test/basic/index.html                     |  22 +++++++++
 .../test/map-navigation.e2e.ts                |  18 ++++++++
 ...-1-chromium---theme-classic-dark-linux.png | Bin 0 -> 9263 bytes
 ...1-chromium---theme-classic-light-linux.png | Bin 0 -> 9222 bytes
 .../map-navigation/map-navigation.scss        |   8 ----
 .../map-navigation/map-navigation.tsx         |  22 +++++----
 8 files changed, 91 insertions(+), 22 deletions(-)
 create mode 100644 packages/core/src/components/map-navigation-overlay/test/basic/index.html
 create mode 100644 packages/core/src/components/map-navigation-overlay/test/map-navigation.e2e.ts
 create mode 100644 packages/core/src/components/map-navigation-overlay/test/map-navigation.e2e.ts-snapshots/map-navigation-overlay-basic-1-chromium---theme-classic-dark-linux.png
 create mode 100644 packages/core/src/components/map-navigation-overlay/test/map-navigation.e2e.ts-snapshots/map-navigation-overlay-basic-1-chromium---theme-classic-light-linux.png

diff --git a/packages/core/src/components/map-navigation-overlay/map-navigation-overlay.scss b/packages/core/src/components/map-navigation-overlay/map-navigation-overlay.scss
index 4fba3726fe3..4dee23faa55 100644
--- a/packages/core/src/components/map-navigation-overlay/map-navigation-overlay.scss
+++ b/packages/core/src/components/map-navigation-overlay/map-navigation-overlay.scss
@@ -16,6 +16,7 @@
   width: 100%;
   height: 100%;
   z-index: 2;
+  top: 0;
 
   background-color: var(--theme-overlay--background);
 
diff --git a/packages/core/src/components/map-navigation-overlay/map-navigation-overlay.tsx b/packages/core/src/components/map-navigation-overlay/map-navigation-overlay.tsx
index a48c1be255f..61b5ec53932 100644
--- a/packages/core/src/components/map-navigation-overlay/map-navigation-overlay.tsx
+++ b/packages/core/src/components/map-navigation-overlay/map-navigation-overlay.tsx
@@ -7,7 +7,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';
+import {
+  Component,
+  Element,
+  Event,
+  EventEmitter,
+  h,
+  Host,
+  Prop,
+} from '@stencil/core';
+import anime from 'animejs';
 
 @Component({
   tag: 'ix-map-navigation-overlay',
@@ -15,6 +24,10 @@ import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';
   scoped: true,
 })
 export class MapNavigationOverlay {
+  private static readonly slowTime = 500;
+
+  @Element() hostElement: HTMLIxMapNavigationOverlayElement;
+
   /**
    * Title of overlay
    */
@@ -35,6 +48,31 @@ export class MapNavigationOverlay {
    */
   @Event() closeClick: EventEmitter;
 
+  componentWillLoad() {
+    anime({
+      targets: this.hostElement,
+      duration: MapNavigationOverlay.slowTime,
+      backdropFilter: [0, 'blur(1rem)'],
+      translateX: ['-4rem', 0],
+      opacity: [0, 1],
+      easing: 'easeOutSine',
+    });
+  }
+
+  private closeOverlay() {
+    anime({
+      targets: this.hostElement,
+      duration: MapNavigationOverlay.slowTime,
+      backdropFilter: ['blur(1rem)', 0],
+      translateX: [0, '-4rem'],
+      opacity: [1, 0],
+      easing: 'easeInSine',
+      complete: () => {
+        this.closeClick.emit();
+      },
+    });
+  }
+
   render() {
     return (
       <Host>
@@ -61,7 +99,7 @@ export class MapNavigationOverlay {
             invisible
             icon="close"
             size="24"
-            onClick={() => this.closeClick.emit()}
+            onClick={() => this.closeOverlay()}
           ></ix-icon-button>
         </div>
 
diff --git a/packages/core/src/components/map-navigation-overlay/test/basic/index.html b/packages/core/src/components/map-navigation-overlay/test/basic/index.html
new file mode 100644
index 00000000000..ff71aa5e1cd
--- /dev/null
+++ b/packages/core/src/components/map-navigation-overlay/test/basic/index.html
@@ -0,0 +1,22 @@
+<!--
+SPDX-FileCopyrightText: 2022 Siemens AG
+
+SPDX-License-Identifier: MIT
+-->
+
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
+    />
+    <title>Stencil Component Starter</title>
+  </head>
+  <body>
+    <ix-map-navigation-overlay name="Title" icon="bulb">
+      Lorem ipsum
+    </ix-map-navigation-overlay>
+    <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
+  </body>
+</html>
diff --git a/packages/core/src/components/map-navigation-overlay/test/map-navigation.e2e.ts b/packages/core/src/components/map-navigation-overlay/test/map-navigation.e2e.ts
new file mode 100644
index 00000000000..2b3e2387002
--- /dev/null
+++ b/packages/core/src/components/map-navigation-overlay/test/map-navigation.e2e.ts
@@ -0,0 +1,18 @@
+/*
+ * SPDX-FileCopyrightText: 2022 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 { expect } from '@playwright/test';
+import { regressionTest } from '@utils/test';
+
+regressionTest.describe('map-navigation-overlay', () => {
+  regressionTest('basic', async ({ page }) => {
+    await page.goto(`map-navigation-overlay/test/basic`);
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+  });
+});
diff --git a/packages/core/src/components/map-navigation-overlay/test/map-navigation.e2e.ts-snapshots/map-navigation-overlay-basic-1-chromium---theme-classic-dark-linux.png b/packages/core/src/components/map-navigation-overlay/test/map-navigation.e2e.ts-snapshots/map-navigation-overlay-basic-1-chromium---theme-classic-dark-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..86e52f71c8a2c6d4eb8d8aa9d02fb8041fc5d463
GIT binary patch
literal 9263
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
S)dB{%6_}^*vDzQb{p;VQ5oo0V

literal 0
HcmV?d00001

diff --git a/packages/core/src/components/map-navigation-overlay/test/map-navigation.e2e.ts-snapshots/map-navigation-overlay-basic-1-chromium---theme-classic-light-linux.png b/packages/core/src/components/map-navigation-overlay/test/map-navigation.e2e.ts-snapshots/map-navigation-overlay-basic-1-chromium---theme-classic-light-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..9e887029c28da3aa63acd0f9aee91afcc0e85703
GIT binary patch
literal 9222
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
Uxg65+J7@>kY52EQ-(3FjpTABm0{{R3

literal 0
HcmV?d00001

diff --git a/packages/core/src/components/map-navigation/map-navigation.scss b/packages/core/src/components/map-navigation/map-navigation.scss
index 5b3a64c56bf..f91585f992b 100644
--- a/packages/core/src/components/map-navigation/map-navigation.scss
+++ b/packages/core/src/components/map-navigation/map-navigation.scss
@@ -126,12 +126,4 @@
     overflow: hidden;
     z-index: calc(var(--theme-z-index-sticky) - 1);
   }
-
-  #overlay {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    z-index: calc(#{var(--theme-z-index-sticky)} + 1);
-  }
 }
diff --git a/packages/core/src/components/map-navigation/map-navigation.tsx b/packages/core/src/components/map-navigation/map-navigation.tsx
index ff6d6fa9a8c..41eeb20d175 100644
--- a/packages/core/src/components/map-navigation/map-navigation.tsx
+++ b/packages/core/src/components/map-navigation/map-navigation.tsx
@@ -8,15 +8,15 @@
  */
 
 import {
-    Component,
-    Element,
-    Event,
-    EventEmitter,
-    h,
-    Host,
-    Method,
-    Prop,
-    State
+  Component,
+  Element,
+  Event,
+  EventEmitter,
+  h,
+  Host,
+  Method,
+  Prop,
+  State,
 } from '@stencil/core';
 import anime from 'animejs';
 
@@ -48,7 +48,6 @@ export class MapNavigation {
 
   @State() isSidebarOpen = true;
 
-
   /**
    * Navigation toggled
    */
@@ -81,7 +80,6 @@ export class MapNavigation {
 
   componentDidRender() {
     this.appendMenu();
-    // this.openOverlay('Test', document.createElement('ix-breadcrumb'), 'info', 'color-warning');
     this.closeOverlay();
   }
 
@@ -236,7 +234,7 @@ export class MapNavigation {
             <main>
               <slot></slot>
             </main>
-            <div id="overlay"></div>
+            <slot name="overlay"></slot>
           </div>
         </div>
       </Host>

From 3453429848f9a43ae7feb3231c06c8cf88504d3d Mon Sep 17 00:00:00 2001
From: Lukas Maurer <lukas.maurer@siemens.com>
Date: Fri, 11 Nov 2022 16:42:10 +0100
Subject: [PATCH 3/9] docs(core/map-navigation): deprecate overlay methods

---
 packages/core/src/components.d.ts                             | 2 ++
 .../core/src/components/map-navigation/map-navigation.tsx     | 2 ++
 packages/core/src/components/map-navigation/readme.md         | 4 ++--
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
index 629560dc8c5..8c8e4df5aa2 100644
--- a/packages/core/src/components.d.ts
+++ b/packages/core/src/components.d.ts
@@ -705,6 +705,7 @@ export namespace Components {
         "applicationName": string;
         /**
           * Close current shown overlay
+          * @deprecated will get removed with next major release in favor of slot based approach
          */
         "closeOverlay": () => Promise<void>;
         /**
@@ -717,6 +718,7 @@ export namespace Components {
         "navigationTitle": string;
         /**
           * Open a overlay inside content area
+          * @deprecated will get removed with next major release in favor of slot based approach
           * @param name
           * @param component
           * @param icon
diff --git a/packages/core/src/components/map-navigation/map-navigation.tsx b/packages/core/src/components/map-navigation/map-navigation.tsx
index 41eeb20d175..bc650198c9d 100644
--- a/packages/core/src/components/map-navigation/map-navigation.tsx
+++ b/packages/core/src/components/map-navigation/map-navigation.tsx
@@ -140,6 +140,7 @@ export class MapNavigation {
 
   /**
    * Open a overlay inside content area
+   * @deprecated will get removed with next major release in favor of slot based approach
    *
    * @param name
    * @param component
@@ -176,6 +177,7 @@ export class MapNavigation {
 
   /**
    * Close current shown overlay
+   * @deprecated will get removed with next major release in favor of slot based approach
    */
   @Method()
   async closeOverlay() {
diff --git a/packages/core/src/components/map-navigation/readme.md b/packages/core/src/components/map-navigation/readme.md
index 0a29c367e89..581608e2910 100644
--- a/packages/core/src/components/map-navigation/readme.md
+++ b/packages/core/src/components/map-navigation/readme.md
@@ -30,7 +30,7 @@ SPDX-License-Identifier: MIT
 
 ### `closeOverlay() => Promise<void>`
 
-Close current shown overlay
+<span style="color:red">**[DEPRECATED]**</span> will get removed with next major release in favor of slot based approach<br/><br/>Close current shown overlay
 
 #### Returns
 
@@ -40,7 +40,7 @@ Type: `Promise<void>`
 
 ### `openOverlay(name: string, component: HTMLElement, icon?: string, color?: string) => Promise<void>`
 
-Open a overlay inside content area
+<span style="color:red">**[DEPRECATED]**</span> will get removed with next major release in favor of slot based approach<br/><br/>Open a overlay inside content area
 
 #### Returns
 

From 0f72223d6ee2e513d02a500fd14b62eede57bfb4 Mon Sep 17 00:00:00 2001
From: Lukas Maurer <lukas.maurer@siemens.com>
Date: Fri, 11 Nov 2022 16:56:34 +0100
Subject: [PATCH 4/9] ci(core): update component-doc.json

---
 packages/core/component-doc.json | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json
index 5ec4df7dc76..23b13bfa638 100644
--- a/packages/core/component-doc.json
+++ b/packages/core/component-doc.json
@@ -4371,7 +4371,13 @@
           "signature": "closeOverlay() => Promise<void>",
           "parameters": [],
           "docs": "Close current shown overlay",
-          "docsTags": []
+          "docsTags": [
+            {
+              "name": "deprecated",
+              "text": "will get removed with next major release in favor of slot based approach"
+            }
+          ],
+          "deprecation": "will get removed with next major release in favor of slot based approach"
         },
         {
           "name": "openOverlay",
@@ -4383,6 +4389,10 @@
           "parameters": [],
           "docs": "Open a overlay inside content area",
           "docsTags": [
+            {
+              "name": "deprecated",
+              "text": "will get removed with next major release in favor of slot based approach"
+            },
             {
               "name": "param",
               "text": "name"
@@ -4399,7 +4409,8 @@
               "name": "param",
               "text": "color"
             }
-          ]
+          ],
+          "deprecation": "will get removed with next major release in favor of slot based approach"
         }
       ],
       "events": [

From c8aa711e4ae74b65b10dc4111904c42866cc3eb6 Mon Sep 17 00:00:00 2001
From: Lukas Maurer <lukas.maurer@siemens.com>
Date: Mon, 14 Nov 2022 16:32:04 +0100
Subject: [PATCH 5/9] docs(map-mavigation-overlay): add examples

---
 .../src/app/app-routing.module.ts             |  2 +
 .../angular-test-app/src/app/app.module.ts    |  2 +
 .../map-navigation-overlay.ts                 | 39 +++++++++++++
 .../map-navigation/map-navigation.tsx         |  1 -
 .../controls/navigation/map-navigation.md     | 16 ++++++
 .../map-navigation-overlay.html               | 46 +++++++++++++++
 packages/react-test-app/src/main.tsx          |  2 +
 .../map-navigation-overlay.tsx                | 57 +++++++++++++++++++
 8 files changed, 164 insertions(+), 1 deletion(-)
 create mode 100644 packages/angular-test-app/src/preview-examples/map-navigation-overlay.ts
 create mode 100644 packages/html-test-app/src/preview-examples/map-navigation-overlay.html
 create mode 100644 packages/react-test-app/src/preview-examples/map-navigation-overlay.tsx

diff --git a/packages/angular-test-app/src/app/app-routing.module.ts b/packages/angular-test-app/src/app/app-routing.module.ts
index 67d1187774a..4f860dd94ab 100644
--- a/packages/angular-test-app/src/app/app-routing.module.ts
+++ b/packages/angular-test-app/src/app/app-routing.module.ts
@@ -84,6 +84,7 @@ import { VerticalTabsWithAvatar } from 'src/preview-examples/vertical-tabs-with-
 import { Workflow } from 'src/preview-examples/workflow';
 import { WorkflowVertical } from 'src/preview-examples/workflow-vertical';
 import { NavigationTestComponent } from './components/navigation-test.component';
+import { MapNavigationOverlay } from 'src/preview-examples/map-navigation-overlay';
 
 const routes: Routes = [
   {
@@ -262,6 +263,7 @@ const routes: Routes = [
       { path: 'workflow', component: Workflow },
       { path: 'workflow-vertical', component: WorkflowVertical },
       { path: 'map-navigation', component: MapNavigation },
+      { path: 'map-navigation-overlay', component: MapNavigationOverlay },
     ],
   },
 ];
diff --git a/packages/angular-test-app/src/app/app.module.ts b/packages/angular-test-app/src/app/app.module.ts
index dab41b72897..a73997d903f 100644
--- a/packages/angular-test-app/src/app/app.module.ts
+++ b/packages/angular-test-app/src/app/app.module.ts
@@ -57,6 +57,7 @@ import { InputReadonly } from 'src/preview-examples/input-readonly';
 import { InputWithIcon } from 'src/preview-examples/input-with-icon';
 import { Kpi } from 'src/preview-examples/kpi';
 import { MapNavigation } from 'src/preview-examples/map-navigation';
+import { MapNavigationOverlay } from 'src/preview-examples/map-navigation-overlay';
 import { MessageBar } from 'src/preview-examples/message-bar';
 import { Modal } from 'src/preview-examples/modal';
 import { Pill } from 'src/preview-examples/pill';
@@ -169,6 +170,7 @@ import { NavigationTestComponent } from './components/navigation-test.component'
     Workflow,
     WorkflowVertical,
     MapNavigation,
+    MapNavigationOverlay,
     TabsRounded,
     DatepickerRange,
   ],
diff --git a/packages/angular-test-app/src/preview-examples/map-navigation-overlay.ts b/packages/angular-test-app/src/preview-examples/map-navigation-overlay.ts
new file mode 100644
index 00000000000..97ef474df3f
--- /dev/null
+++ b/packages/angular-test-app/src/preview-examples/map-navigation-overlay.ts
@@ -0,0 +1,39 @@
+/*
+ * SPDX-FileCopyrightText: 2022 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-map-navigation-overlay',
+  template: `
+    <ix-map-navigation
+      application-name="Test Application"
+      navigation-title="Some other content"
+    >
+      <ix-icon name="rocket" slot="logo"></ix-icon>
+      <ix-menu>
+        <ix-menu-item>Item 1</ix-menu-item>
+        <ix-menu-item>Item 2</ix-menu-item>
+        <ix-menu-item>Item 3</ix-menu-item>
+      </ix-menu>
+      <div slot="sidebar-content">Sidebar content</div>
+      <ix-button (click)="showOverlay = true">Show overlay</ix-button>
+      <ix-map-navigation-overlay
+        *ngIf="showOverlay"
+        name="Custom overlay title"
+        icon="bulb"
+        slot="overlay"
+        (closeClick)="showOverlay = false"
+      ></ix-map-navigation-overlay>
+    </ix-map-navigation>
+  `,
+})
+export class MapNavigationOverlay {
+  showOverlay = true;
+}
diff --git a/packages/core/src/components/map-navigation/map-navigation.tsx b/packages/core/src/components/map-navigation/map-navigation.tsx
index bc650198c9d..9e200fffdf9 100644
--- a/packages/core/src/components/map-navigation/map-navigation.tsx
+++ b/packages/core/src/components/map-navigation/map-navigation.tsx
@@ -236,7 +236,6 @@ export class MapNavigation {
             <main>
               <slot></slot>
             </main>
-            <slot name="overlay"></slot>
           </div>
         </div>
       </Host>
diff --git a/packages/documentation/docs/controls/navigation/map-navigation.md b/packages/documentation/docs/controls/navigation/map-navigation.md
index 2fdc9735699..b5127595444 100644
--- a/packages/documentation/docs/controls/navigation/map-navigation.md
+++ b/packages/documentation/docs/controls/navigation/map-navigation.md
@@ -16,6 +16,8 @@ import SourceWebComponent from './../../auto-generated/previews/web-component/ma
 import ReactComponent from './../../auto-generated/previews/react/map-navigation.md'
 import AngularComponent from './../../auto-generated/previews/angular/map-navigation.md'
 
+import OverlayWebComponent from './../../auto-generated/previews/web-component/map-navigation-overlay.md'
+
 ## Usage
 
 <Preview name="map-navigation" height="35rem" noMargin>
@@ -30,6 +32,20 @@ import AngularComponent from './../../auto-generated/previews/angular/map-naviga
   </TabItem>
 </Preview>
 
+## Custom overlay
+
+<Preview name="map-navigation-overlay" height="35rem" noMargin>
+  <TabItem value="javascript">
+    <OverlayWebComponent />
+  </TabItem>
+  <TabItem value="react">
+    <ReactComponent />
+  </TabItem>
+  <TabItem value="angular">
+    <AngularComponent />
+  </TabItem>
+</Preview>
+
 ## Properties (ix-map-navigation)
 
 #### Props
diff --git a/packages/html-test-app/src/preview-examples/map-navigation-overlay.html b/packages/html-test-app/src/preview-examples/map-navigation-overlay.html
new file mode 100644
index 00000000000..a2f59545fa0
--- /dev/null
+++ b/packages/html-test-app/src/preview-examples/map-navigation-overlay.html
@@ -0,0 +1,46 @@
+<!--
+SPDX-FileCopyrightText: 2022 Siemens AG
+
+SPDX-License-Identifier: MIT
+-->
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Map navigation example</title>
+    <link rel="stylesheet" href="./example.css" />
+  </head>
+  <body class="theme-classic-dark">
+    <!-- Preview code -->
+    <ix-map-navigation
+      application-name="Test Application"
+      navigation-title="Some other content"
+    >
+      <ix-icon name="rocket" slot="logo"></ix-icon>
+      <ix-menu>
+        <ix-menu-item>Item 1</ix-menu-item>
+      </ix-menu>
+      <ix-button id="btn-open-overlay">Open overlay</ix-button>
+    </ix-map-navigation>
+
+    <script type="module">
+      const mapNav = document.querySelector('ix-map-navigation');
+      const buttonOpenOverlay = document.getElementById('btn-open-overlay');
+
+      buttonOpenOverlay.addEventListener('click', () => {
+        const overlay = document.createElement('ix-map-navigation-overlay');
+        overlay.slot = 'overlay';
+        overlay.name = 'Custom overlay';
+        overlay.icon = 'bulb';
+        mapNav.appendChild(overlay);
+
+        overlay.addEventListener('closeClick', (e) => {
+          overlay.parentNode.removeChild(overlay);
+        });
+      });
+    </script>
+
+    <!-- Preview code -->
+    <script type="module" src="./init.js"></script>
+  </body>
+</html>
diff --git a/packages/react-test-app/src/main.tsx b/packages/react-test-app/src/main.tsx
index 40ea81480b6..f130a49df77 100644
--- a/packages/react-test-app/src/main.tsx
+++ b/packages/react-test-app/src/main.tsx
@@ -87,6 +87,7 @@ import { Workflow } from './preview-examples/workflow';
 import { WorkflowVertical } from './preview-examples/workflow-vertical';
 import reportWebVitals from './reportWebVitals';
 import { NavigationTest } from './testing/NavigationTest';
+import { MapNavigationOverlay } from './preview-examples/map-navigation-overlay';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <BrowserRouter>
@@ -219,6 +220,7 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
         element={<BasicNavigationWithoutHeader />}
       />
       <Route path="/preview/map-navigation" element={<MapNavigation />} />
+      <Route path="/preview/map-navigation-overlay" element={<MapNavigationOverlay />} />
       <Route path="/testing">
         <Route path="navigation" element={<NavigationTest />}>
           <Route
diff --git a/packages/react-test-app/src/preview-examples/map-navigation-overlay.tsx b/packages/react-test-app/src/preview-examples/map-navigation-overlay.tsx
new file mode 100644
index 00000000000..dafda46f7a9
--- /dev/null
+++ b/packages/react-test-app/src/preview-examples/map-navigation-overlay.tsx
@@ -0,0 +1,57 @@
+/*
+ * SPDX-FileCopyrightText: 2022 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 React, { useState } from 'react';
+import {
+  IxButton,
+  IxMapNavigation,
+  IxMapNavigationOverlay,
+  IxMenu,
+  IxMenuItem,
+} from '@siemens/ix-react';
+
+export const MapNavigationOverlay: React.FC = () => {
+  const [overlay, setOverlay] = useState(false);
+
+  function openOverlay() {
+    setOverlay(true);
+  }
+
+  function closeOverlay() {
+    setOverlay(false);
+  }
+
+  return (
+    <IxMapNavigation>
+      <IxMenu>
+        <IxMenuItem>Item 1</IxMenuItem>
+        <IxMenuItem>Item 2</IxMenuItem>
+        <IxMenuItem>Item 3</IxMenuItem>
+      </IxMenu>
+      <IxButton
+        onClick={() => {
+          openOverlay();
+        }}
+      >
+        Open overlay
+      </IxButton>
+      <div>
+        {overlay ? (
+          <IxMapNavigationOverlay
+            name="Custom overlay title"
+            icon="bulb"
+            onCloseClick={() => closeOverlay()}
+          >
+            Lorem ipsum
+          </IxMapNavigationOverlay>
+        ) : null}
+      </div>
+    </IxMapNavigation>
+  );
+};

From cb918ff2dcd59dce8c7c4f5bfc4436966d5ab90d Mon Sep 17 00:00:00 2001
From: Lukas Maurer <lukas.maurer@siemens.com>
Date: Mon, 14 Nov 2022 16:33:06 +0100
Subject: [PATCH 6/9] fix(core/map-navigation): prevent null pointer exception

---
 packages/core/src/components/map-navigation/map-navigation.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/core/src/components/map-navigation/map-navigation.tsx b/packages/core/src/components/map-navigation/map-navigation.tsx
index 9e200fffdf9..cb4126b6b98 100644
--- a/packages/core/src/components/map-navigation/map-navigation.tsx
+++ b/packages/core/src/components/map-navigation/map-navigation.tsx
@@ -189,6 +189,9 @@ export class MapNavigation {
       opacity: [1, 0],
       easing: 'easeInSine',
       complete: () => {
+        if (!this.overlay) {
+          return;
+        }
         this.overlay.firstChild?.remove();
         this.overlay.classList.add('d-none');
       },

From e4d91457d6db6041368c5369bc03717c17d7defd Mon Sep 17 00:00:00 2001
From: Lukas Maurer <lukas.maurer@siemens.com>
Date: Mon, 14 Nov 2022 20:39:53 +0100
Subject: [PATCH 7/9] docs(toggle): update paths

---
 packages/documentation/docs/controls/toggle.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/documentation/docs/controls/toggle.md b/packages/documentation/docs/controls/toggle.md
index f2b4ac7bc36..e8812b0b921 100644
--- a/packages/documentation/docs/controls/toggle.md
+++ b/packages/documentation/docs/controls/toggle.md
@@ -7,17 +7,17 @@ import Events from './../auto-generated/ix-toggle/events.md';
 import SourceToggle from './../auto-generated/previews/web-component/toggle.md';
 import SourceToggleLabel from './../auto-generated/previews/web-component/toggle-custom-label.md';
 import SourceToggleColor from './../auto-generated/previews/web-component/toggle-color.md';
-import SourceToggleDisbaled from './../auto-generated/previews/web-component/toggle-custom-disable.md';
+import SourceToggleDisbaled from './../auto-generated/previews/web-component/toggle-disabled.md';
 
 import SourceReactToggle from './../auto-generated/previews/react/toggle.md';
 import SourceReactToggleLabel from './../auto-generated/previews/react/toggle-custom-label.md';
 import SourceReactToggleColor from './../auto-generated/previews/react/toggle-color.md';
-import SourceReactToggleDisbaled from './../auto-generated/previews/react/toggle-custom-disable.md';
+import SourceReactToggleDisbaled from './../auto-generated/previews/react/toggle-disabled.md';
 
 import SourceAngularToggle from './../auto-generated/previews/angular/toggle.md';
 import SourceAngularToggleLabel from './../auto-generated/previews/angular/toggle-custom-label.md';
 import SourceAngularToggleColor from './../auto-generated/previews/angular/toggle-color.md';
-import SourceAngularToggleDisbaled from './../auto-generated/previews/angular/toggle-custom-disable.md';
+import SourceAngularToggleDisbaled from './../auto-generated/previews/angular/toggle-disabled.md';
 
 # Toggle
 

From 228d74e36c6755b8f8d88391e2131123fada5e8b Mon Sep 17 00:00:00 2001
From: Lukas Maurer <lukas.maurer@siemens.com>
Date: Tue, 15 Nov 2022 10:45:22 +0100
Subject: [PATCH 8/9] test(core/map-navigation-overlay): test overlay in
 context of map navigation component

---
 .../test/basic/index.html                     |   8 +++++---
 ...-1-chromium---theme-classic-dark-linux.png | Bin 9263 -> 9315 bytes
 ...1-chromium---theme-classic-light-linux.png | Bin 9222 -> 9271 bytes
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/core/src/components/map-navigation-overlay/test/basic/index.html b/packages/core/src/components/map-navigation-overlay/test/basic/index.html
index ff71aa5e1cd..72cb52d19fc 100644
--- a/packages/core/src/components/map-navigation-overlay/test/basic/index.html
+++ b/packages/core/src/components/map-navigation-overlay/test/basic/index.html
@@ -14,9 +14,11 @@
     <title>Stencil Component Starter</title>
   </head>
   <body>
-    <ix-map-navigation-overlay name="Title" icon="bulb">
-      Lorem ipsum
-    </ix-map-navigation-overlay>
+    <ix-map-navigation>
+      <ix-map-navigation-overlay name="Title" icon="bulb" color="color-info">
+        Lorem ipsum
+      </ix-map-navigation-overlay>
+    </ix-map-navigation>
     <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
   </body>
 </html>
diff --git a/packages/core/src/components/map-navigation-overlay/test/map-navigation.e2e.ts-snapshots/map-navigation-overlay-basic-1-chromium---theme-classic-dark-linux.png b/packages/core/src/components/map-navigation-overlay/test/map-navigation.e2e.ts-snapshots/map-navigation-overlay-basic-1-chromium---theme-classic-dark-linux.png
index 86e52f71c8a2c6d4eb8d8aa9d02fb8041fc5d463..31ff27d21ef3a290a15f5508799a647d59e13f53 100644
GIT binary patch
literal 9315
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
N?FX+DwZ|@A{|_^WEKUFb

literal 9263
zcmeHNSy+?jwhm&kEh4+6YL!X1h;^iZF%1aRDqtD}Efr;q$|OQS69z*F!EKdN85ERR
zqD4fj5GKI@AyiakN+^gS2}uMp07(cC$Uvr@pFZc}oQrd{pL1~@uGaVc-}GjEYrSjz
z>rd86UvIO|w|))+fy`jXkNpG!ePU>?8T{15AZR#tfI%3cfAanTR7<s*27$JLV8@R9
ze6?K6#x$Ky((32wk+(&WbturWwSWCw?$jOUWN8-dY4PJ{>a77Asu05+RDWNJ$%(yA
zC*Z><>QBQz!uMu=<Na0lS0}$%>u*1gQfW_d>`I(AoZ-6J#MXas7mCR^f(TDrVhD#1
zULCFx0B}IxJoWcB2O6M*xu8!0dE>JTK%6Z84|J0*g4*Q^aFm2!l*n7z{bcFJ|GqtV
zA1HZt4BDj_-9IqE)>W$4heb=ot&?(i%pL%TQaV(13SvW|&xu>Rk}*OrOa7FFAN4t-
z5rL-OX3Il(Ztm>^AE4*ncT6*1z+3mXgdFG)|K^or3as9l6owhmbsw5|>vtIH9*iV;
znwVML&N+0}p+z^|+&;!EwcApcs!zKpQbd<2D3IXzju?{~$8Bg9(<!nS4a@hv@4|Q9
z;eHP%-&#Sv@5)cXE5oUjsfng$D)RLc;E0m}T>&6>NK#M-s(&7;eLXoeHdZbW2%gvd
zK(u<vjh5w_(GefPdD^9{a@Bn)KWl!{`2k+vkBse8Z4NE(Bep(172XlwCT;NdO22eA
zpZ5m=Q6|-X%!DVhM~Xs<YeV(AXf95Qa|(ake{*0(i)N-7umv%1H&i?|xiGOf9f+*~
zqm_Rmd}uc8&8fNv*NjoiS>62LN?OmAU4+tW#wNTw-nOy4U!i<uW#eDVB5g3;O3Bv;
z^MvG7dB3MH$2VVGr=Fv`Spq*PVMB0SGi=sUeJ+X`((opX-PRI8PNMhR57!NS?AdAs
zD&UpCXi*~_IMnNh>#8GF`~tghTdN}Yfi|b`ZnwM5&7>^{FP}?hVKU=hsG@*-*|4m6
z;*%<8jA8Z0IX2RyHdP@vdaTQQ7woZ5i3>LxP`pdZ%v}-^Y3;Zb0MR!nDC=-;leYVF
z)V2F%Y}tXcacjjK^3F=H+~Zt#T>hi+FY3mPzJ+yY-WW3{xn>j+G&)^~jlrI_vQ&S3
zne7%Ca?^|r#+tEq+;>gteTX=`O+BlB)4n)Vev_K4&7n|>DPwM2Y};%TE?|n`3|n|s
zmR>e*K`52VgcW6_F*FZCkN@L+a}`n!>ek!!fI)RyQb*Ty^Gjd_LoI#;aSQENPp{51
z-IQtq#@?U-`kZR34T!7CHEWay#oEJc@Dn}d;N^1F1ov5J8e?N%Y|RnICD}m35Q|f2
zjyop`QTJI|x^M?tG&-;psUA0PUe_6%(B_t+nWhn;(MKpoFNK4l4T?IyCc-euzd8h~
z+6l|2;id-<&-0X?)P|wo68hp@CAS9-F}{2Dya^RnD*MR>Bc2aQ9|3Pc)7iJ$HyL1O
z<T@IRCr!~VYvj5U!Xnmc=t{`)y3P9vwA)?4%N}(jo61^j5vlx<TkIai1e|!$Bc0Z!
z!v+kQZT)UrG)~eaZen*26BD=xlP>+3H_L9EziG+)rLrS`yRG`TcOGDroj<gHX@nqu
zSyxq6rIqFWhVOCuG$VHX*MsS43bMjMuJN|P?Q_<h@?K|VRae}|JzJ|}I5=sXE13wI
z!51nB90)c&m77iY_R2$g(#-qanbv71Q<ubd?4bJJ;SHiWvh#)aI?Uoc#UAFBV|C|r
zK-klIgyCRN1|50+i@F_?h=#kiM(O-3^fT)jNZR7mJZ(rdvADTt%H5&;J2!T4&=6Ve
zk+ME)kj%X(=r1WCp@oQX<*Qq_^whHU@XAGL%cXoC(Jz<gM|`;l=7j0JTaMP5qkFG-
zSI5#1sNSvfxP2=f#Tc@+0uHUZa3s$d0tQ$4NjcVE>hmM()?EG|E@I|k<x`|%^!A1?
z<K<$8S;=%x6!}k4ldZ?%yGj{O-uW_<m14oUczvm8Is`zkQR|X+o+EI`vi?UfV56$`
zHJ6V(Td25-O8bCQ2f^}F;$G_3K-gDby!c>scUFJZeYt1eViQKXhtu%tb4j<Y_T##R
zzs%FmT@x;eSSf)yYYn@0;xBUAF*0k)4Bu&FZevDDwo166^=JymF|;)?jHl{K=DyG>
zn_asP#??apC~1s}9OCtuY9Qg;S>DEm^>c6Mi4;{!UCxohdsVFlK=Bl`&s)E=Jz8~5
z=@H{~5&BbVL3To31u>)J!suXV<A|VaCoHPJyab_}ffzj8>^!qc$jVFT;47f9iwf7v
zD^49o`~<1I6Vbt4tC_`Yju1G7OabVSNF-F7-MFyOR|C`Oeig;+vMM_PN%t;Hi1%%Y
z?~9ykjTJuW+Rzi$CBI0SH5^O5HCzozZNEA5{(aNv#ypsl{Ld?r?(6hGYzM71c{+b-
z9kERJYza=YaVuQT2GqRI+LR?pIp1dNu-6P>G&(etpJhSlg;2EYw0W7j%5cGf_&FEo
z_!Hv3#Zpr|Dkfe#DVZks_LeM)d0u%he;&B+3TccQpf2=5s-HgH?TYlUYvDre@oJW-
zsaYwWB;@#{El)3sSdiHDXWc60Tka4-vACdMVU*IQjUR5yw1=VQtIqJei!_OW>DB<I
z!p>I{+`XHcT<02sJ{uj}nBkV1NIR1U{b#o|=Bn;$_kF0Qc+wgD;kjoRdT5&aE)SoI
zk=w|#%GDC*MguQwg<d#1rvG?d(oJB93RIjD1kFTL(>5q$F_|bPgmQ1%Im!-}%$%Ks
zD#XsHKc^ZEJQ=Fs07U(J{q>c5P6!UsU_HHS*2bL$i5ZpN9jW3|KsXt$#3~XKVtR}x
zZF<rE)h`IL&ZFkShu$^=;-auic&Va=T_F&}2fj!kBwo7I%jt5z(`63*hTXcK{^V3q
zYoiz5BYd`XS7Q{7`aG~vrnK;jT0r}6#td}j9WK<GL-*0yO3`7NxDlh`f9NlDb2WEc
zxag(-_%AEmL=T4aB54Z_zy~UPzkHn@8mGa&p?GzA?%x_5RBDpYdiv<0Z8oZ>;|yGp
zwX?t>MaU!K8gYE?lryD5rwurf4=})ujv_l&y7Ib8?7m}YtR|SM{mYZ2`6G6#<4R_s
z@opZCD;U#vUcZ%%Cw?Gf;U9ui?vFtQ4rUe4uThMy>O40`YhGuOrc+v?X2(cGkquox
z1KDDTEzg^SD4OwR*TRKg0E~5sWAoJ>`d}fg*b!awn)2wH(Pe}8sYXsvLU~YnSbEO|
zsf_na76$d|brl#OWRT`e%#{5$QzzVZ*KzxvTf@=&x?sTb2OW_%AU}`E=RR0n0uiIH
zf}&C4p6UalD=VW-H<4=^z5!zP1F(splO`#%gUVcm5t?5<lS%%u9+;yMy4Zo%0Ij~a
zPWZK71Ff^kYrhBNH$EVM95P=0=ey5iZg8}Mq{V*#=X@W2)@UVB`Jc%od3w#qKiApZ
z_V+tnTiFdv&4ApX4!EUSW2f`*cjMWu{0gj8G=<p|`^unsQ3cis$&^{U0a-MteLQJ;
z%19SFxywg9^#$<c<B9OBH6QIQ6UvP#bqJH%j?~BQ`n34g=@zIOD|}Q_vmfDdPQN(A
z*x`m<>NogC5i(_L=fJ=Kbjp;_r{>Bk7H3AB6}i@B7JlwvKR2yUP*BhU%aYi4r`v|`
zux&P9r(Nbh%(S7>shWTd(7B971Q{QeHvh&d`SmHxatVxB!vAP&eq4Gwp!dADO@TR5
zcFjt8gT{Ylizp9GW;#B5-u{#BGD`v-=M5X^&7s;)dU^q$sY^ICc3FF{YPVtxi|}>P
zF8Y)ngd$YjqYY_rbgsMZksQla-Xic{`}_7KB#^)!F4FR`IT1IaF$Y5J1e-(|LJM@E
zc(S28zAdsc=g>O?D+!-f<My|()4PY%6eB=8aK;6^@n!zKGyQ>FC7!e_q`b>)VL4`6
zU-`M&vH^Kh;&>1?#9T%-r_u{aGQV)AwAb#id<TjC#&eS3LAFx-B<<q64J1W}8YSPt
zJ?`)C9~2y1V8?3L;}{A0>kaBTa>HMSJm7tS@4Nb4_sc`&Ul&ryb3fda)OTOVOh6(B
z_Ux@Gb|+(_mA~Q|CI{VQ@)qK~J6QZ47;12{JK^c@<H&c^qmAs^qt2LKG*p?PEt)bP
zW-?2yTP*V@J5qm4=HO^P_Ydu_q`5nLP;{+n6aG6;Bee7iV|U1<tl5<}80*M-qq#|2
z^+nw>uYj~L6FX$sAk!9ekgl0v#x*XfS+o)`HrWukH<q{{gIW`(^Cg*aWl};)`ePr=
z0kojMXG*Hywzp%ch7mED!y=Ldtq8#1F;|us59?lAkS3{)z{-4{uHHOiNvAEGGEJOj
zf<4-&ChU6pOPtYKGf0$3L59GFDx>rI%fWjMaiTYSi!*vCrdn9HBQJ2mgIYt;AARgw
zR)~=aBE_TY78acgPzpD^{{Cz1EZIS;-p^PGQ-h~AsXv{&gj4hD4HhURcN4DulZ9+U
zszq5A_D#0L_MzVbYgs6$I-5ulggvWe?ox2@`22|8ySpV)%E4$~!x>CnDzzLs-8zPX
zFMbl`L%0K6idxiDP#saV@r+M?Iac=xRPx9|R*{l$&x4bUjaQB&EC}0XgML@r_weu~
zSD5ed)KQlfuz}703s#uIep_gfh?zd-k`k|;hoc2{u$xjhCv%VG(b(GHS=;joK*B-x
zaFB(eXY;3qB6Y+;LxyEA<Rk@|ab;@PLhb%TG&M&%n>N{0fM(n~!w=?eA$MZI-~s(I
z*qMsOIRmuyy?3B^N9QD=wD?HuhEgdRY_k5{FIlFXoRpdOF(r;TuMa`!0ToBes#f5?
z6}(D{oh`f<5LB;S`U9sHFnS6K>=Ll7U}vmcJf>+2M!niyEf_8ErN+BT@A9M%8(7Z*
zwlp_2McfD@Z*|%MxJlw&IcW5mciy687~6q2kOOJ92olkG=~-mAB=ZqkNZryt>%xf1
zl*nYFTEx@|;>+b|72ytn+G(U6u7Ve>XGd0tB<e`h9CGAS{57b<K+hAL9EL`t14J#C
zn)S+Nk}9R;k$<%>X>Lp!P4wFUH;k2*l{Jnpiy|k6{dU3L`h89K^E!RNKoA5whPt53
zDVo{`$GHRWrjAQ!v|OwDGhVr)u^r~-9t*{q<;P{{(L3D{@AcXJ+YNNuLvt&V9Z;S>
zKv|f%!AV>sc^rqs;Z&8JG0m)k+oX%@tuDWNSmGESrQXpA@5?sWEKRH6FW4fATiPRU
zXqE+KvaVYPe1n67H@HpwYK0oSrV_vNt4@lKou%O8au3U2+VwcpQnmwc&<FJMH%gW@
zO(Cgo?qOz1qQhjz9RZ;2CE%LDHg1_bQ_`Hy#iDuR2&#88tG?13V51Dkqc=K}ZNS7i
z!OoQc_5JyT8SjjhLC?lDD}m#43lPwM@U78m7X(_>#;P%_`oby|7#MMt3RbCLl?qm=
zV3i71nQ)Z}SDA2?3IBgG;l=}qV<3<*8~884>bvl2Dd2yvgedir(Q81}zjGU2giX8g
zMfl%kl(%cQ86JYNKl>gKUt44V;#>Qb+R8bfmEuch@!y{U9RDuVuP*$*Q;sRFEFNX~
S)dB{%6_}^*vDzQb{p;VQ5oo0V

diff --git a/packages/core/src/components/map-navigation-overlay/test/map-navigation.e2e.ts-snapshots/map-navigation-overlay-basic-1-chromium---theme-classic-light-linux.png b/packages/core/src/components/map-navigation-overlay/test/map-navigation.e2e.ts-snapshots/map-navigation-overlay-basic-1-chromium---theme-classic-light-linux.png
index 9e887029c28da3aa63acd0f9aee91afcc0e85703..233c23e34c137a81ff10d2e373e5dc4a1a82cfe8 100644
GIT binary patch
literal 9271
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
YKfOTGdyW5Us<k-kjMwSPZ!i7*U!tZ<@Bjb+

literal 9222
zcmeHNd011|whz)uty*rMttbfCiqfip$UH`Cg{Df-q6{*r3=zW|BtQ(oTA@|}4G07h
zqGc)~Lm9#ll3-CFOhHiQBw&C*LlOx?2$}9Vw(pPkzW3j~@2^X~FW)-*WS_m(Uc+y#
zy>jlJgS+nhSodQH1hNzM-M2qLARhvkTLwPb3J?~S?FkSK)DN!TK&txpEkGdqA+T>x
zUPvG=vJ>kImub=^_gV|>U~+Njww;w9+<02@*^T<czfqpvo-V&8|IBr#{&$BzKlQY7
znD@H&r(faQ%=L{QeRVK(^;yP`Lu=pOalWwizka-S(BZDhP_k;i_DJxr&2_TE5o9H8
z_y$*cLpdykt1#69dNQdH7jxbh5CxKgw@0sl7myRYk5WK-E)Vh%NbhV*0m;8K^iJE_
zc1qjst2BeybFLZSa*&c{&3}OO<6RI9fIO~A{jhDeCzszLs6K;43ZV7<WCN^GRwSXO
zuyhMBAw})eVtIWUS*3y<VoQe3k~Y$aiEE8R6<*aNB#R}A!*EjvO*%>HF{9a@$vNtV
z6!h3Bx{7qIOhGQ$uNP!GIt^A=r*#7IaxLJ7gl3jwmVW9ECV@{Z;LtF}u+V<u!*bj@
zwvgmt)8loNm7*c;f;%vb9d_)^hm-6>UjFj=Ui2FVV$cNYhF_$y(qad_7=;E-NtRbH
zfGobMxPpePiJ|+0=%|2xTkN+1Ned;didf{O-AB6)>I7y(oh@%X8VQ&8qvw9w<=)?R
za$<(*V=?slbv8>IdWgKSg3z;?E3lrPD~J^~Rb&~Z-F%xRlf<Z7;3HU3je9T?UjoA~
z*>H%?*bU2Y7m(*QZ^&7^n+@BNE8}PnmPK(DvZc=0=Q4iCm7YJ|6hebGR_+^E9q+`=
z&JbgU^LmNqP7@L8DwmABS4DI}ntFXeuVwDX?PiyF{OxlrmQI?w+KBlRtdX`b1}>j~
zX~IZIvNi)uXi>UNK-n^%g)`UY;Bafu%igz*k<kG6K5MR{JByHINR*OV>(@(+m=B(u
zS|+gc9|GES^YHK}g)Z^WwuXFTkazqbV3@uVKox+<M;(N%sG?5H(At<ZP*SCzY6RQ5
zVpubX&~}W*<(LH)mX?-g?AZxOk+O5Xka~!Zzh~AR0WHWzG33eymp0jQV6PA2e)lti
zMON|jr!~_W$6%(4#^nhf*VQ@c1l&<pu`nqU>-|HU9aFXg_)f;PuQpG&AnR_*B!25r
zd_KM>dGZ}!r5`<YD^XlUty<v}--Y)5DBF%Vl4FC_;SFy*k6<~twiHVnwTJas@X*C7
zyIDHdGSnN?4JS5U-llatdf;(yzMTc4FlIydz*Gf~`#6Haj5J(7(auLEKonxA!Z{PV
z=8X?7h-mEFW?b0%g96jgp6Phl-Ek=aREb${L9QAjcCwofO0$fkYYVAd0f)*LQO7l>
zw4~z>RH14^{qsd9&3DkqR_BpS21Q8(<7D8}C*R}!;+UDouMJoui6NX;zQt16E{UA0
z^qO;0`?bUia-QFAWIaj4+EeLbWz>cP7)ArOdQp>R{A97*ZrQi2+I$P$T7{KU`60Y?
zxz$bj#oVUV`CDI08w?HC2&~dGxmGrvEdAtQ`BJt#d7`G7bG_6Z_hle-_QhnppxDs~
z0S8R=@bq?_*(c>{QWO~*Dr#caeE>!@=V`#*lxq5}=;sQVkc_^dIAeVRLNrIY$d~%X
zV<DA%ZBC?oMKt69JC5pDN$q>{5n1uN47Iv0m<Y77vYO2oMD|*Zu=6S#4VuOUp3l4=
z8mh?RvXGN!@H5NpnM}7`hvt4E`;j8JvVJ4xMRoG&LX2pvBN^lk;ncr5-Ij45$4pXf
zdv^qi#=d+pA?o_|4vxFp7{yH=ZgDAtlLi~bE<W|q=XcZp9KTqp^c<pLq$BL<CQ}E7
zVp_`RSu6`RhHd>sH=A`+^s^E3P(gUU8CKRrlvNJZ1v3XHF)X&7<TqBe`Z>tc+stzn
zHASIN9PN;vX)hSTnv)u%bqLlPFDK_iq!XjEvQpV<;G{>@=<<CDU|X>=L5`+jN?06P
z`-3(1PlhVqDZRM&XvJw7;cQ!<dFHd%_S!jcDJQN*(^IO1Vqp7~TI`Pd9<Nw>QeH6`
z$9q$_zRUynfDfK(JBjq8{-P78K+2bBXznA7n2vnJcXGn4rRr`21Wdu512*kxFUp1^
zZK*N3$y!r#F2h&8WU@<T(UW81%af^NhIR@&E5@;nEdex4NS2$8|19?i%jE;$@u^Bd
z154q{?%1!_okY`&z8KF9Vud%XdJ>ec7kl%ZouDl<Z;1&Kuc78;!359E#*eI3dKQKU
zO>F2i)#j2Z%^6U*D<?9gvH`l?^a~IBXkB1k2<O?wi1mlTC5SDBa<;g7i2kYIOuHDe
zIN6M%C;!<MC){WpP7t%vv-i&*SO(pDw^;yjczD=xqpO}MWk>N-1yvCY(Tgm4K3%U8
zJM^Hj_VXj2&sH-!jrJZ7z9wG+lpR;X$}#oN57SngyF1B(FYSJ&-1`g2JnsG*;TpAt
zeaj|0Rjcjvz1<=AOd7lImffs$+Tv^<afyyyBiQ|kBKLnvmR)d3cQlc5(SdR+*L|z9
zo6%yd1duY_Ac}^(e*HSPwYaj<1X>VxCKS5*T9?N*RVz5*zt85t@IDrZx$YyTJ(Gw+
zCW_@$(1VME0VyIFuIgTrjaBZl=|Y3TOr`tyD=?>BUD{H&w%su?vBRwVMs%2aw)i_g
zz)p&Re#Z)M8cFE0aV0$jA!Nkg!PI!4l!02VDBQLlZyq<FA?)N;ZNT96(@kd!*4|xb
zsVDsL2gb=u=!wcKNp)xP*PYmf?alluCJZlKl(1xr)2`O>(I9V5O~XruSKNgU!o4Bk
zJ~jIh=?0IWP*uWiN`3IFU+;`v=^9uOtEGH44U?u{%U+u(bIlY9#lq$hPNHl!ce!`S
z9RZ}sX3;n@_PKUHki(HhF8<;SbvF}4*HTxO!NRLLSISuY#Ew13E~k%#tE<rbG#!8Z
z6)pX2H*2<~KQ$hfS?C0=%|Fv=kXzS5EU5CQMm~-L<!ft6y4;=J(82I(wcf&k&eGo$
zQt5F?s+XrD(!JO7D{y$Sir)vanyZgWK0?E&g(6B8+}65|oKG?$Buwa6V9j8nmgNk^
zOn1-F_(p7o>}{^3+#N^xv<O7THt39qi4K)It$7Cl7!Br^+fpuBsl8`-imBVQ{T)9I
z_l0j{!wppkL%XcJe8H_UrtOwiNE(ptRu;#`c(*Z?{B0l-Tvo2n*JyGFWB}Ag-G0F+
zzNJxv;`htCREGXMJD>&{xHPiYHu~JwPxjT*JN_ze&g;^*zeBDr453%atHL@BV{oCA
z4Qn8WjN7;rH#f^}h|yw>34)l|pK725{0R9TIeKV6vi7n{(VJ)Pl<Rl%Jbvay79+os
z!m(G%s}sxoz*$r23lIJ(<ihvpDU92|du^!)ARyZlSGMd2$DbYg_YX<qz{fu6eF^#4
zd{X28tR-o}EmNbv2cg!+5a^XXpeXMs1LXix3iE<8n9sEgiS63Z)*`-7g&k@xcww+)
zEVLlPKIt=XW<rl(@RerkdEdz95Z6rb4kSuX@EHWaxcnY7hGSi5-}fjK%6a99_H0j}
zD%Kt?BAzj$S(=!bgoTAMi!z<_x9vJq+|Xc^>mTovET7<(mXsVk1(bw8e|n%+HdlaH
zdizo~+UcD0s>l^FSPUarAmEgVNGdUI5VqGLK76j1kOh=tGelHB6A){y#it`fzkpB1
zIR|yzXPPB1-Sdkd3$atYYe&h2jr?YQVULI^E_`^vwG=s0l?dz^HGM}Xbi6(+42kT?
za1iBrxI0-DgxA87*V_%}N^%3b_aca|=xa~X4DyHI4kj2e4V?j1tuHomlL_`Wu7~#J
zKN7L2h?V(Q1lyRa2FdHw^%TmS9(Ua(ej=iARmuRJ2qGA}MAop4;<Vo1XLnr7@MiQO
zI5E#Ws3TZ1!z3KL@(sTDOs;9-)Ge)A0T4XhN2<@_{eaSyU>@XRN?RE`n{WBGgQzLU
z<^G<B0ImX)8CIQv%0IoD-~F-OB61Qy8fy~-85<9WDp&k4!iI&3#whs)au6tN6PM>^
z!F^}q6uij<UV7r&yT-BX8zTo{rqspS6~Ty^4fiH0vSpzZz=Zv|ez8n@WqaJh;6e0c
zjH^q=KEe{Ovn-I2EE^x8=Uiz|oqbwS)eXAEk*cPvq~Z6WlTkYiNszM9h^e+)b~6u7
z4K^T0b{II?YU#(FOP2KnQpiI<7Ty;>dL=9}vVXATj76ekW{07(qvqBf-!(?EB`?jA
z&2hj)$-pV?hCmdch|==%udy2|%*Q8hOXyOXSzlk@!s~L6)KB#D$LbK(Lpt7+aGwm@
zw?D7ht#NT`#heWThCk}pbPUL~XEP0)2B~N<G3n3py%wRp_G;cDpaOt5oZnBf2=00i
zP8kaw3o9exjU0sa9)K6s^&>$;opALQxTla4=LkD=Ew7bG0eHw`W*Ij!I9KnPjAsTW
zOy4=`Q)^U4iXT5bqH7;_4PT5?tAt{-VAw>tu_~9J^KStT2?qr$A0|mfq;%`?-;}E<
z8k&+nwwoEjQnd{W>-z1Fc$A)Hf^MjdTW=o=$@L!&V_)nWot#vZhJsl>B|}nbqv6vM
z7bcGZig$U8RK(6Q@(M@{*{W@zXb}Y54JFy%xU`@gp$B+@MZ?0XWVUBwWIT~iLbdO-
znE|ZRoBg%N@$0XD+m|%|#7@-2^KAC?^_@r}fJF#|b9i`T*OUom^h-cF-U~Ei^3B)=
z>XNmMO_^79009W7@5L;VgVb;jYBeBPHrrcZQ>|RBV>uU~TY360JVUiwy#O58fbb#T
z-(&t|kxP1aWg{nlCJMbm+xUe3@}5pvNlD2U7ViPhHB38YyN+ouP)m4iAR{9BRB|yH
zupyrhRVRX{j7|g0Q6QW!sXO&3<ENoZcim_5kyXqrcV|LKPfiFB_I7KdL3P(&{kp39
zu;qpzCx+Ki0$_$aR2e5~UG86O7zyzC{px8jE+^xL+`=Lv+<??)kT~-&oGzP#;VUWQ
zhckhka>>^>%gBb45Y!ScY~k=V-|PCdYS$Ft;t0k1(h+Pzza2lAi<S1-@rhX#)pYxy
z&Wt|5ez7aBT=_gh_4;)k<sUlq2fz;b*&c8v=*kK2rieI|Y=KRcCgCCjssm`p<K_oI
z?*`6lEV^7&a3I6>OOgY+ABgzl@r$GP^=wT2TjH1xzBqL}X=UDsS#zabGId*fZoViJ
z4#K63=^k3wXN_UI{{lMYl<=9y1k&)P)LJ44RNL$LMV|!VWAs%KXv;R=K>%9bBYP|M
z?>52c#KzxACjWn(@Q-Qyj|2ba5LDrRw?8(uv8jzsXZWiXxETwZv9K8no3Q}=E3gR#
zn^3R`1)ET?2?d)-_#c3Tea0vb1fp3Fz6-E<HvId|fd6FASK%Du_k+EnV_n=0gTO05
zi!Nx(`!-6)2m8T*xWDZLNcQYX0m-pL?^DI)v+w))ZF!LQEj{zUS~Qyv{(mZGi_q_M
Uxg65+J7@>kY52EQ-(3FjpTABm0{{R3


From 8c074a130650b6e0210a07ede1ad7ed20b882a3f Mon Sep 17 00:00:00 2001
From: Lukas Maurer <lukas.maurer@siemens.com>
Date: Tue, 15 Nov 2022 10:45:50 +0100
Subject: [PATCH 9/9] fix(docs/map-navigation-overlay): update imports

---
 .../docs/controls/navigation/map-navigation.md              | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/documentation/docs/controls/navigation/map-navigation.md b/packages/documentation/docs/controls/navigation/map-navigation.md
index b5127595444..5c9ee98f4bb 100644
--- a/packages/documentation/docs/controls/navigation/map-navigation.md
+++ b/packages/documentation/docs/controls/navigation/map-navigation.md
@@ -17,6 +17,8 @@ import ReactComponent from './../../auto-generated/previews/react/map-navigation
 import AngularComponent from './../../auto-generated/previews/angular/map-navigation.md'
 
 import OverlayWebComponent from './../../auto-generated/previews/web-component/map-navigation-overlay.md'
+import OverlayReactComponent from './../../auto-generated/previews/react/map-navigation-overlay.md'
+import OverlayAngularComponent from './../../auto-generated/previews/angular/map-navigation-overlay.md'
 
 ## Usage
 
@@ -39,10 +41,10 @@ import OverlayWebComponent from './../../auto-generated/previews/web-component/m
     <OverlayWebComponent />
   </TabItem>
   <TabItem value="react">
-    <ReactComponent />
+    <OverlayReactComponent />
   </TabItem>
   <TabItem value="angular">
-    <AngularComponent />
+    <OverlayAngularComponent />
   </TabItem>
 </Preview>