From cad0f0abc50101fa65bb1b6b14dc4b2e7fe3faed Mon Sep 17 00:00:00 2001
From: Philipp Pracht <philipp.pracht@sap.com>
Date: Fri, 31 Mar 2023 14:37:37 +0200
Subject: [PATCH 01/13] initial working solution

---
 core/src/App.svelte                  |  2 +-
 core/src/navigation/TabHeader.svelte | 36 ++++++++++++
 core/src/navigation/TabNav.svelte    | 83 +++++++++++++++++++---------
 core/src/services/routing.js         |  2 +-
 4 files changed, 94 insertions(+), 29 deletions(-)
 create mode 100644 core/src/navigation/TabHeader.svelte

diff --git a/core/src/App.svelte b/core/src/App.svelte
index 6bea9f9760..af1362532b 100644
--- a/core/src/App.svelte
+++ b/core/src/App.svelte
@@ -2187,7 +2187,7 @@
 
   :global(.iframeContainer.iframeContainerTabNav) {
     top: calc(
-      var(--luigi__shellbar--height) + var(--luigi__horizontal-nav--height)
+      var(--luigi__shellbar--height) + var(--luigi__horizontal-nav--live-height, var(--luigi__horizontal-nav--height))
     );
   }
 
diff --git a/core/src/navigation/TabHeader.svelte b/core/src/navigation/TabHeader.svelte
new file mode 100644
index 0000000000..7bb8f2c88a
--- /dev/null
+++ b/core/src/navigation/TabHeader.svelte
@@ -0,0 +1,36 @@
+<script>
+  import { onMount } from 'svelte';
+  
+  import { WebComponentService } from '../services/web-components';
+
+  export let node;
+
+
+  const __this = {
+    get: () => ({
+      node
+    }),
+    set: obj => {
+      if (obj) {
+        Object.getOwnPropertyNames(obj).forEach(prop => {
+          if (prop === 'node') {
+            node = obj.node;
+          }
+        });        
+      }
+    }
+  };
+
+  onMount(() => {
+    console.log(node);
+    setTimeout(() => {
+      WebComponentService.renderWebComponent(node.viewUrl, document.querySelector('.lui-tab-header'), node.context, node);
+    });
+  });
+
+
+</script>
+
+{#if node}
+  <div class="lui-tab-header"></div>
+{/if}
diff --git a/core/src/navigation/TabNav.svelte b/core/src/navigation/TabNav.svelte
index 388ea13613..bfc3cfd095 100644
--- a/core/src/navigation/TabNav.svelte
+++ b/core/src/navigation/TabNav.svelte
@@ -1,8 +1,10 @@
 <script>
-  import { beforeUpdate, createEventDispatcher, onMount, getContext } from 'svelte';
+  import { beforeUpdate, createEventDispatcher, onMount, getContext, onDestroy } from 'svelte';
   import { Navigation } from './services/navigation';
   import { NavigationHelpers, RoutingHelpers } from '../utilities/helpers';
   import { LuigiConfig } from '../core-api';
+  
+  import TabHeader from './TabHeader.svelte'; 
 
   export let children;
   export let pathData;
@@ -17,6 +19,7 @@
   export let resizeTabNavToggle;
   let previousResizeTabNavToggle;
   let getTranslation = getContext('getTranslation');
+  let resizeObserver;
 
   //TODO refactor
   const __this = {
@@ -60,7 +63,7 @@
     if (!tabNavData) {
       return;
     }
-    __this.set({ ...tabNavData });
+    __this.set({ ...tabNavData });  
     previousPathData = pathData;
     window['LEFTNAVDATA'] = tabNavData.groupedChildren;
     setTimeout(calcTabsContainer);
@@ -117,6 +120,23 @@
 
   onMount(() => {
     hideNavComponent = LuigiConfig.getConfigBooleanValue('settings.hideNavigation');
+    resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        console.log(entry);
+        //entry.
+        document.documentElement.style.setProperty('--luigi__horizontal-nav--live-height', entry.contentRect.height + 'px');
+      }
+    });
+    setTimeout(() => {
+      resizeObserver.observe(document.querySelector('#tabsContainer.lui-tabs'));
+    });
+  });
+
+  onDestroy(() => {
+    if(resizeObserver) {
+      resizeObserver.disconnect();
+    }
+    document.documentElement.style.setProperty('--luigi__horizontal-nav--live-height', '0');
   });
 
   // [svelte-upgrade warning]
@@ -191,10 +211,12 @@
   on:resize={onResize}
 />
 {#if children && pathData.length > 1}
+<div class="lui-tabs" id="tabsContainer">
+  <TabHeader node={selectedNode.parent}></TabHeader>
+
   <nav
     class="fd-tabs fd-tabs--l"
     role="tablist"
-    id="tabsContainer"
     on:toggleDropdownState={event => toggleDropdownState(event.name)}
   >
     <div class="tabsContainerWrapper">
@@ -388,6 +410,7 @@
       </span>
     </div>
   </nav>
+</div>
 {/if}
 
 <style type="text/scss">
@@ -437,39 +460,45 @@
     display: none;
   }
 
-  .fd-tabs {
-    flex-wrap: nowrap;
-    align-items: stretch;
-    @include box-shadow(1px 1px 2px 0 rgba(0, 0, 0, 0.05));
-    border: none;
-    position: absolute;
-    right: 0;
-    left: var(--luigi__left-sidenav--width);
+  .lui-tabs {
+      right: 0;
+      left: var(--luigi__left-sidenav--width);
+      border: none;
+      position: absolute;
+      
+      @media (max-width: 599px) {
+        left: 0;
+      }
 
-    @media (max-width: 599px) {
+     .fd-tabs {
+      flex-wrap: nowrap;
+      align-items: stretch;
+      @include box-shadow(1px 1px 2px 0 rgba(0, 0, 0, 0.05));
+      border: none;
+      right: 0;
       left: 0;
-    }
 
-    &__item {
-      white-space: nowrap;
-      display: inline-block;
-    }
+      &__item {
+        white-space: nowrap;
+        display: inline-block;
+      }
 
-    &__link {
-      &.has-child {
-        .label {
-          padding-right: 17px;
-        }
-        .luigi-icon--dropdown {
-          position: absolute;
-          top: 0.4em;
-          right: 14px;
+      &__link {
+        &.has-child {
+          .label {
+            padding-right: 17px;
+          }
+          .luigi-icon--dropdown {
+            position: absolute;
+            top: 0.4em;
+            right: 14px;
+          }
         }
       }
     }
   }
 
-  :global(.fd-tabs__item.hide_element) {
+  :global(.lui-tabs .fd-tabs__item.fd-tabs__item.hide_element) {
     display: none;
   }
 </style>
diff --git a/core/src/services/routing.js b/core/src/services/routing.js
index 93cf3694a9..e43ec7eb14 100644
--- a/core/src/services/routing.js
+++ b/core/src/services/routing.js
@@ -288,7 +288,7 @@ class RoutingClass {
    * @param {Object} config the configuration of application
    */
   async handlePageNotFound(nodeObject, viewUrl, pathData, path, component, pathUrlRaw, config) {
-    if (!viewUrl && !nodeObject.compound) {
+    if ((!viewUrl && !nodeObject.compound) || (nodeObject.tabNav && nodeObject.tabNav.showAsTabHeader)) {
       const defaultChildNode = await RoutingHelpers.getDefaultChildNode(pathData, async (node, ctx) => {
         return await Navigation.getChildren(node, ctx);
       });

From ab226b714102c93e53cbe5405b2339a853a08c69 Mon Sep 17 00:00:00 2001
From: Ndricim Rrapi <ndricim.rrapi@sap.com>
Date: Wed, 5 Apr 2023 16:39:47 +0200
Subject: [PATCH 02/13] Cleanup

---
 core/public/package.json             |   2 +-
 core/src/navigation/TabHeader.svelte |  13 +-
 core/src/navigation/TabNav.svelte    | 411 ++++++++++++++-------------
 3 files changed, 222 insertions(+), 204 deletions(-)

diff --git a/core/public/package.json b/core/public/package.json
index 430466ec89..a35596a177 100644
--- a/core/public/package.json
+++ b/core/public/package.json
@@ -19,4 +19,4 @@
     "microfrontends"
   ],
   "version": "2.1.0"
-}
\ No newline at end of file
+}
diff --git a/core/src/navigation/TabHeader.svelte b/core/src/navigation/TabHeader.svelte
index 7bb8f2c88a..2b9351a9b7 100644
--- a/core/src/navigation/TabHeader.svelte
+++ b/core/src/navigation/TabHeader.svelte
@@ -1,11 +1,10 @@
 <script>
   import { onMount } from 'svelte';
-  
   import { WebComponentService } from '../services/web-components';
 
   export let node;
 
-
+  // define get and setters 
   const __this = {
     get: () => ({
       node
@@ -22,15 +21,17 @@
   };
 
   onMount(() => {
-    console.log(node);
-    setTimeout(() => {
+    // render webcomponent based on pased node object 
+    if (node.webcomponent) {
       WebComponentService.renderWebComponent(node.viewUrl, document.querySelector('.lui-tab-header'), node.context, node);
-    });
+    } else { 
+      console.warn('Horizontal navigation custom header microfrontend requires a webcomponent type node.')
+    }
   });
 
 
 </script>
 
 {#if node}
-  <div class="lui-tab-header"></div>
+  <div class="lui-tab-header" />
 {/if}
diff --git a/core/src/navigation/TabNav.svelte b/core/src/navigation/TabNav.svelte
index bfc3cfd095..901e875058 100644
--- a/core/src/navigation/TabNav.svelte
+++ b/core/src/navigation/TabNav.svelte
@@ -118,25 +118,39 @@
     }
   };
 
-  onMount(() => {
-    hideNavComponent = LuigiConfig.getConfigBooleanValue('settings.hideNavigation');
+  /**
+   * This function attaches on Svelte's ResizeObserver to detect the height of the component so that the 'top' distance property
+   * is changed according to the variable horizontal tabnav web component height. 
+   */
+  const handleHorizontalNavHeightChange = () => {
     resizeObserver = new ResizeObserver((entries) => {
       for (const entry of entries) {
-        console.log(entry);
-        //entry.
         document.documentElement.style.setProperty('--luigi__horizontal-nav--live-height', entry.contentRect.height + 'px');
       }
     });
     setTimeout(() => {
       resizeObserver.observe(document.querySelector('#tabsContainer.lui-tabs'));
     });
-  });
+  }
 
-  onDestroy(() => {
+  /**
+   * This function resets ResizeObserver's affected property to 0 and it is used to reset the state upon destroying of the TabNav component.
+   */
+  const resetResizeObserver = () => {
     if(resizeObserver) {
       resizeObserver.disconnect();
     }
     document.documentElement.style.setProperty('--luigi__horizontal-nav--live-height', '0');
+  }
+
+
+  onMount(() => {
+    hideNavComponent = LuigiConfig.getConfigBooleanValue('settings.hideNavigation');
+    handleHorizontalNavHeightChange();
+  });
+
+  onDestroy(() => {
+    resetResizeObserver();
   });
 
   // [svelte-upgrade warning]
@@ -211,206 +225,209 @@
   on:resize={onResize}
 />
 {#if children && pathData.length > 1}
-<div class="lui-tabs" id="tabsContainer">
-  <TabHeader node={selectedNode.parent}></TabHeader>
-
-  <nav
-    class="fd-tabs fd-tabs--l"
-    role="tablist"
-    on:toggleDropdownState={event => toggleDropdownState(event.name)}
-  >
-    <div class="tabsContainerWrapper">
-      <div class="tabsContainer luigi-tabsContainer">
-        {#each Object.entries(children) as [key, nodes], index}
-          {#if key === 'undefined' || key.indexOf(virtualGroupPrefix) === 0}
-            {#each nodes as node, index2}
-              {#if !node.hideFromNav}
-                {#if node.label}
-                  <span
-                    class="fd-tabs__item {node === selectedNodeForTabNav
-                      ? 'is-selected'
-                      : ''}"
-                    uid="{index}-{index2}"
-                    isSelected={node === selectedNodeForTabNav}
-                  >
+  <div class="lui-tabs" id="tabsContainer">
+    <TabHeader node={selectedNode.parent} />
+
+    <nav
+      class="fd-tabs fd-tabs--l"
+      role="tablist"
+      on:toggleDropdownState={event => toggleDropdownState(event.name)}
+    >
+      <div class="tabsContainerWrapper">
+        <div class="tabsContainer luigi-tabsContainer">
+          {#each Object.entries(children) as [key, nodes], index}
+            {#if key === 'undefined' || key.indexOf(virtualGroupPrefix) === 0}
+              {#each nodes as node, index2}
+                {#if !node.hideFromNav}
+                  {#if node.label}
+                    <span
+                      class="fd-tabs__item {node === selectedNodeForTabNav
+                        ? 'is-selected'
+                        : ''}"
+                      uid="{index}-{index2}"
+                      isSelected={node === selectedNodeForTabNav}
+                    >
+                      <a
+                        class="fd-tabs__link"
+                        href={getRouteLink(node)}
+                        role="tab"
+                        aria-selected={node === selectedNodeForTabNav}
+                        on:click|preventDefault={() => handleClick(node)}
+                      >
+                        <span class="fd-tabs__tag"
+                          >{$getTranslation(node.label)}</span
+                        >
+                      </a>
+                    </span>
+                  {/if}
+                {/if}
+              {/each}
+            {:else}
+              <span
+                class="fd-tabs__item"
+                uid="{index}-0"
+                on:click={event => event.stopPropagation()}
+                isSelected={isSelectedCat(key, selectedNodeForTabNav)}
+              >
+                <div class="fd-popover">
+                  <div class="fd-popover__control">
                     <a
-                      class="fd-tabs__link"
-                      href={getRouteLink(node)}
+                      class="fd-tabs__link has-child"
+                      aria-expanded="false"
                       role="tab"
-                      aria-selected={node === selectedNodeForTabNav}
-                      on:click|preventDefault={() => handleClick(node)}
+                      on:click|preventDefault={() => toggleDropdownState(key)}
+                      aria-selected={isSelectedCat(key, selectedNodeForTabNav)}
                     >
-                      <span class="fd-tabs__tag"
-                        >{$getTranslation(node.label)}</span
+                      <span class="label fd-tabs__tag"
+                        >{$getTranslation(key)}</span
                       >
+                      <span class="sap-icon--dropdown luigi-icon--dropdown" />
                     </a>
-                  </span>
-                {/if}
-              {/if}
-            {/each}
-          {:else}
-            <span
-              class="fd-tabs__item"
-              uid="{index}-0"
-              on:click={event => event.stopPropagation()}
-              isSelected={isSelectedCat(key, selectedNodeForTabNav)}
-            >
-              <div class="fd-popover">
-                <div class="fd-popover__control">
-                  <a
-                    class="fd-tabs__link has-child"
-                    aria-expanded="false"
-                    role="tab"
-                    on:click|preventDefault={() => toggleDropdownState(key)}
-                    aria-selected={isSelectedCat(key, selectedNodeForTabNav)}
+                  </div>
+                  <div
+                    class="fd-popover__body fd-popover__body--no-arrow"
+                    aria-hidden={!dropDownStates[key]}
                   >
-                    <span class="label fd-tabs__tag"
-                      >{$getTranslation(key)}</span
-                    >
-                    <span class="sap-icon--dropdown luigi-icon--dropdown" />
-                  </a>
-                </div>
-                <div
-                  class="fd-popover__body fd-popover__body--no-arrow"
-                  aria-hidden={!dropDownStates[key]}
-                >
-                  <nav class="fd-menu">
-                    <ul class="fd-menu__list fd-menu__list--no-shadow">
-                      {#each nodes as node}
-                        {#if !node.hideFromNav}
-                          {#if node.label}
-                            <li class="fd-menu__item">
-                              <a
-                                href={getRouteLink(node)}
-                                class="fd-menu__link"
-                                on:click|preventDefault={() =>
-                                  handleClick(node)}
-                                aria-selected={node === selectedNodeForTabNav}
-                              >
-                                <span class="fd-menu__title"
-                                  >{$getTranslation(node.label)}</span
+                    <nav class="fd-menu">
+                      <ul class="fd-menu__list fd-menu__list--no-shadow">
+                        {#each nodes as node}
+                          {#if !node.hideFromNav}
+                            {#if node.label}
+                              <li class="fd-menu__item">
+                                <a
+                                  href={getRouteLink(node)}
+                                  class="fd-menu__link"
+                                  on:click|preventDefault={() =>
+                                    handleClick(node)}
+                                  aria-selected={node === selectedNodeForTabNav}
                                 >
-                              </a>
-                            </li>
+                                  <span class="fd-menu__title"
+                                    >{$getTranslation(node.label)}</span
+                                  >
+                                </a>
+                              </li>
+                            {/if}
                           {/if}
-                        {/if}
-                      {/each}
-                    </ul>
-                  </nav>
+                        {/each}
+                      </ul>
+                    </nav>
+                  </div>
                 </div>
-              </div>
-            </span>
-          {/if}
-        {/each}
+              </span>
+            {/if}
+          {/each}
+        </div>
       </div>
-    </div>
-
-    <div class="luigi-tabsMoreButton">
-      <span class="fd-tabs__item" on:click={event => event.stopPropagation()}>
-        <div class="fd-popover fd-popover--right">
-          <a
-            class="fd-tabs__link fd-popover__control has-child luigi__more"
-            aria-expanded="false"
-            role="tab"
-            on:click|preventDefault={toggleMoreBtn}
-          >
-            <span class="label fd-tabs__tag">More</span>
-            <span class="sap-icon--dropdown luigi-icon--dropdown" />
-          </a>
-          <div
-            class="fd-popover__body fd-popover__body--right fd-popover__body--no-arrow"
-            aria-hidden={!isMoreBtnExpanded}
-          >
-            <ul
-              class="fd-nested-list fd-nested-list--compact fd-nested-list--text-only"
+
+      <div class="luigi-tabsMoreButton">
+        <span class="fd-tabs__item" on:click={event => event.stopPropagation()}>
+          <div class="fd-popover fd-popover--right">
+            <a
+              class="fd-tabs__link fd-popover__control has-child luigi__more"
+              aria-expanded="false"
+              role="tab"
+              on:click|preventDefault={toggleMoreBtn}
             >
-              {#each Object.entries(children) as [key, nodes], index}
-                {#if key === 'undefined' || key.indexOf(virtualGroupPrefix) === 0}
-                  {#each nodes as node, index2}
-                    <li class="fd-nested-list__item" uid="{index}-{index2}">
-                      <a
-                        href={getRouteLink(node)}
-                        class="fd-nested-list__link"
-                        on:click|preventDefault={() => handleClick(node)}
-                        aria-selected={node === selectedNodeForTabNav}
-                      >
-                        <span class="fd-nested-list__title"
-                          >{$getTranslation(node.label)}</span
+              <span class="label fd-tabs__tag">More</span>
+              <span class="sap-icon--dropdown luigi-icon--dropdown" />
+            </a>
+            <div
+              class="fd-popover__body fd-popover__body--right fd-popover__body--no-arrow"
+              aria-hidden={!isMoreBtnExpanded}
+            >
+              <ul
+                class="fd-nested-list fd-nested-list--compact fd-nested-list--text-only"
+              >
+                {#each Object.entries(children) as [key, nodes], index}
+                  {#if key === 'undefined' || key.indexOf(virtualGroupPrefix) === 0}
+                    {#each nodes as node, index2}
+                      <li class="fd-nested-list__item" uid="{index}-{index2}">
+                        <a
+                          href={getRouteLink(node)}
+                          class="fd-nested-list__link"
+                          on:click|preventDefault={() => handleClick(node)}
+                          aria-selected={node === selectedNodeForTabNav}
                         >
-                      </a>
-                    </li>
-                  {/each}
-                {:else}
-                  <li class="fd-nested-list__item" uid="{index}-0">
-                    <div class="fd-nested-list__content has-child" tabindex="0">
-                      <a
-                        href="javascript:void(null)"
-                        tabindex="-1"
-                        class="fd-nested-list__link"
-                        id="tabnav_list_level1_{index}"
-                        aria-haspopup="true"
-                        aria-expanded={dropDownStates[key + index]}
-                        aria-selected={isSelectedCat(
-                          key,
-                          selectedNodeForTabNav
-                        )}
-                        on:click|preventDefault={() =>
-                          toggleDropdownState(key + index)}
+                          <span class="fd-nested-list__title"
+                            >{$getTranslation(node.label)}</span
+                          >
+                        </a>
+                      </li>
+                    {/each}
+                  {:else}
+                    <li class="fd-nested-list__item" uid="{index}-0">
+                      <div
+                        class="fd-nested-list__content has-child"
+                        tabindex="0"
                       >
-                        <span class="fd-nested-list__title"
-                          >{$getTranslation(key)}</span
+                        <a
+                          href="javascript:void(null)"
+                          tabindex="-1"
+                          class="fd-nested-list__link"
+                          id="tabnav_list_level1_{index}"
+                          aria-haspopup="true"
+                          aria-expanded={dropDownStates[key + index]}
+                          aria-selected={isSelectedCat(
+                            key,
+                            selectedNodeForTabNav
+                          )}
+                          on:click|preventDefault={() =>
+                            toggleDropdownState(key + index)}
                         >
-                      </a>
-                      <button
-                        class="fd-button fd-nested-list__button"
-                        href="#"
-                        tabindex="-1"
-                        aria-label="Expand submenu"
-                        aria-haspopup="true"
-                        aria-expanded={dropDownStates[key + index]}
-                        on:click|preventDefault={() =>
-                          toggleDropdownState(key + index)}
-                      >
-                        <i
-                          class={dropDownStates[key + index]
-                            ? 'sap-icon--navigation-down-arrow'
-                            : 'sap-icon--navigation-right-arrow'}
-                          role="presentation"
-                        />
-                      </button>
-                    </div>
-                    <ul
-                      class="fd-nested-list level-2"
-                      aria-hidden={!dropDownStates[key + index]}
-                    >
-                      {#each nodes as node}
-                        <li
-                          class="fd-nested-list__item"
-                          aria-labelledby="tabnav_list_level1_{index}"
+                          <span class="fd-nested-list__title"
+                            >{$getTranslation(key)}</span
+                          >
+                        </a>
+                        <button
+                          class="fd-button fd-nested-list__button"
+                          href="#"
+                          tabindex="-1"
+                          aria-label="Expand submenu"
+                          aria-haspopup="true"
+                          aria-expanded={dropDownStates[key + index]}
+                          on:click|preventDefault={() =>
+                            toggleDropdownState(key + index)}
                         >
-                          <a
-                            class="fd-nested-list__link"
-                            href={getRouteLink(node)}
-                            on:click|preventDefault={() => handleClick(node)}
-                            aria-selected={node === selectedNodeForTabNav}
+                          <i
+                            class={dropDownStates[key + index]
+                              ? 'sap-icon--navigation-down-arrow'
+                              : 'sap-icon--navigation-right-arrow'}
+                            role="presentation"
+                          />
+                        </button>
+                      </div>
+                      <ul
+                        class="fd-nested-list level-2"
+                        aria-hidden={!dropDownStates[key + index]}
+                      >
+                        {#each nodes as node}
+                          <li
+                            class="fd-nested-list__item"
+                            aria-labelledby="tabnav_list_level1_{index}"
                           >
-                            <span class="fd-nested-list__title"
-                              >{$getTranslation(node.label)}</span
+                            <a
+                              class="fd-nested-list__link"
+                              href={getRouteLink(node)}
+                              on:click|preventDefault={() => handleClick(node)}
+                              aria-selected={node === selectedNodeForTabNav}
                             >
-                          </a>
-                        </li>
-                      {/each}
-                    </ul>
-                  </li>
-                {/if}
-              {/each}
-            </ul>
+                              <span class="fd-nested-list__title"
+                                >{$getTranslation(node.label)}</span
+                              >
+                            </a>
+                          </li>
+                        {/each}
+                      </ul>
+                    </li>
+                  {/if}
+                {/each}
+              </ul>
+            </div>
           </div>
-        </div>
-      </span>
-    </div>
-  </nav>
-</div>
+        </span>
+      </div>
+    </nav>
+  </div>
 {/if}
 
 <style type="text/scss">
@@ -461,16 +478,16 @@
   }
 
   .lui-tabs {
-      right: 0;
-      left: var(--luigi__left-sidenav--width);
-      border: none;
-      position: absolute;
-      
-      @media (max-width: 599px) {
-        left: 0;
-      }
+    right: 0;
+    left: var(--luigi__left-sidenav--width);
+    border: none;
+    position: absolute;
+
+    @media (max-width: 599px) {
+      left: 0;
+    }
 
-     .fd-tabs {
+    .fd-tabs {
       flex-wrap: nowrap;
       align-items: stretch;
       @include box-shadow(1px 1px 2px 0 rgba(0, 0, 0, 0.05));

From e76dd38fb7a9716cbbf7e76f5cc7151cb7f6ea92 Mon Sep 17 00:00:00 2001
From: Ndricim Rrapi <ndricim.rrapi@sap.com>
Date: Tue, 11 Apr 2023 16:37:27 +0200
Subject: [PATCH 03/13] Add showAsTabHeader check

---
 core/src/navigation/TabHeader.svelte | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/core/src/navigation/TabHeader.svelte b/core/src/navigation/TabHeader.svelte
index 2b9351a9b7..b7f86e9d0e 100644
--- a/core/src/navigation/TabHeader.svelte
+++ b/core/src/navigation/TabHeader.svelte
@@ -21,11 +21,11 @@
   };
 
   onMount(() => {
-    // render webcomponent based on pased node object 
-    if (node.webcomponent) {
+    // render webcomponent based on pased node object only if it is a webcomponent and showAsTabHeader is set to true
+    if (node.webcomponent && node.tabNav.showAsTabHeader) {
       WebComponentService.renderWebComponent(node.viewUrl, document.querySelector('.lui-tab-header'), node.context, node);
     } else { 
-      console.warn('Horizontal navigation custom header microfrontend requires a webcomponent type node.')
+      console.warn('Horizontal navigation custom header microfrontend requires a webcomponent type node and tabNav.showAsTabHeader property set.')
     }
   });
 

From cc307d5a00a049ca97b25b1f9fa7856f3e363574 Mon Sep 17 00:00:00 2001
From: Ndricim Rrapi <ndricim.rrapi@sap.com>
Date: Wed, 12 Apr 2023 15:48:15 +0200
Subject: [PATCH 04/13] Add showAsTabheader check

---
 core/src/services/routing.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/core/src/services/routing.js b/core/src/services/routing.js
index 57b761f0dc..0048c59a68 100644
--- a/core/src/services/routing.js
+++ b/core/src/services/routing.js
@@ -391,6 +391,11 @@ class RoutingClass {
           tabNavInherited = false;
           break;
         } else if (GenericHelpers.isObject(cnode.tabNav)) {
+          // show tab navigation if showAsTabHeader alone is set, skip remaining logic
+          if (cnode.tabNav.showAsTabHeader) {
+            tabNavInherited = true;
+            break;
+          }
           if ('hideTabNavAutomatically' in cnode.tabNav && cnode.children) {
             if (cnode.tabNav.hideTabNavAutomatically === true && cnode.children.length === 1) {
               tabNavInherited = false;

From 9bab307deb1dd2da3f448d8714ab92d6d50c9a31 Mon Sep 17 00:00:00 2001
From: Ndricim Rrapi <ndricim.rrapi@sap.com>
Date: Thu, 13 Apr 2023 16:07:08 +0200
Subject: [PATCH 05/13] Add e2e tests

---
 .../e2e/tests/1-angular/navigation-3.cy.js    | 24 +++++++++++++++++++
 .../src/assets/tabHeader.js                   | 18 ++++++++++++++
 .../src/luigi-config/extended/navigation.js   | 23 ++++++++++++++++++
 3 files changed, 65 insertions(+)
 create mode 100644 test/e2e-test-application/src/assets/tabHeader.js

diff --git a/test/e2e-test-application/cypress/e2e/tests/1-angular/navigation-3.cy.js b/test/e2e-test-application/cypress/e2e/tests/1-angular/navigation-3.cy.js
index 1c3fd0ca51..51b9d4c69a 100644
--- a/test/e2e-test-application/cypress/e2e/tests/1-angular/navigation-3.cy.js
+++ b/test/e2e-test-application/cypress/e2e/tests/1-angular/navigation-3.cy.js
@@ -127,12 +127,24 @@ describe('Navigation', () => {
           .click();
         cy.expectPathToBe('/projects/tabNav/dps1');
       });
+
+      it('open horizontal tab nav header microfrontend', () => {
+        cy.get('[data-testid="tabnavheader_tabnavheader"]').click();
+        cy.get('.lui-tab-header>')
+          .shadow()
+          .find('p')
+          .contains('Hello World from a TabNav Header microfrontend!');
+        cy.getIframeBody().then(result => {
+          cy.wrap(result).contains('Global Settings');
+        });
+      });
     });
 
     context('Mobile', () => {
       beforeEach(() => {
         cy.viewport('iphone-6');
       });
+
       it('Horizontal Navigation on mobile', () => {
         cy.get('[data-testid="mobile-menu"]').click();
         cy.get('[data-testid="projects_projects-mobile"]').click();
@@ -209,6 +221,18 @@ describe('Navigation', () => {
             .should('be.visible');
         });
       });
+
+      it('open horizontal tab nav header microfrontend', () => {
+        cy.get('[data-testid="mobile-menu"]').click();
+        cy.get('[data-testid="tabnavheader_tabnavheader-mobile"]').click();
+        cy.get('.lui-tab-header>')
+          .shadow()
+          .find('p')
+          .contains('Hello World from a TabNav Header microfrontend!');
+        cy.getIframeBody().then(result => {
+          cy.wrap(result).contains('Global Settings');
+        });
+      });
     });
   });
 
diff --git a/test/e2e-test-application/src/assets/tabHeader.js b/test/e2e-test-application/src/assets/tabHeader.js
new file mode 100644
index 0000000000..f7aa09f351
--- /dev/null
+++ b/test/e2e-test-application/src/assets/tabHeader.js
@@ -0,0 +1,18 @@
+export default class extends HTMLElement {
+  constructor() {
+    super();
+    const template = document.createElement('template');
+    template.innerHTML = `<section><p>Hello World from a TabNav Header microfrontend!</p></section>`;
+
+    const empty = document.createElement('template');
+    empty.innerHTML = `<section><p>Test!</p><br/><br/></section>`;
+
+    this._shadowRoot = this.attachShadow({
+      mode: 'open',
+      delegatesFocus: false
+    });
+    this._shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+  set context(ctx) {}
+}
diff --git a/test/e2e-test-application/src/luigi-config/extended/navigation.js b/test/e2e-test-application/src/luigi-config/extended/navigation.js
index e852261e70..b63469b68b 100644
--- a/test/e2e-test-application/src/luigi-config/extended/navigation.js
+++ b/test/e2e-test-application/src/luigi-config/extended/navigation.js
@@ -65,6 +65,29 @@ class Navigation {
       }
     },
 
+    {
+      pathSegment: 'tabnavheader',
+      label: 'Tab Nav Header',
+      viewUrl: '/assets/tabHeader.js',
+      icon: 'home',
+      webcomponent: true,
+      tabNav: {
+        showAsTabHeader: true
+      },
+      children: [
+        {
+          pathSegment: 'header1',
+          label: 'Header 1',
+          viewUrl: '/sampleapp.html#/settings'
+        },
+        {
+          pathSegment: 'header2',
+          label: 'Header 2',
+          viewUrl: '/sampleapp.html#/overview'
+        },
+        {}
+      ]
+    },
     {
       pathSegment: 'view-groups',
       label: 'View Groups',

From cdfd4c3b8f640b6b6814c877e9a9fde0bc845088 Mon Sep 17 00:00:00 2001
From: Philipp Pracht <philipp.pracht@sap.com>
Date: Thu, 13 Apr 2023 17:22:37 +0200
Subject: [PATCH 06/13] more resilient notTopNav case

---
 core/src/App.svelte | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/core/src/App.svelte b/core/src/App.svelte
index 949ad3afb2..08b002005d 100644
--- a/core/src/App.svelte
+++ b/core/src/App.svelte
@@ -2196,6 +2196,12 @@
     );
   }
 
+  :global(.no-top-nav .iframeContainer.iframeContainerTabNav) {
+    top: calc(
+      var(--luigi__horizontal-nav--live-height, var(--luigi__horizontal-nav--height))
+    );
+  }
+
   .iframeContainer:focus {
     outline: none;
   }

From abb69ec9f6da98607bfc8c1ef049af0ef3d45435 Mon Sep 17 00:00:00 2001
From: Ndricim Rrapi <ndricim.rrapi@sap.com>
Date: Fri, 14 Apr 2023 11:08:08 +0200
Subject: [PATCH 07/13] prettier

---
 core/src/App.svelte | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/core/src/App.svelte b/core/src/App.svelte
index 08b002005d..1fa42ac625 100644
--- a/core/src/App.svelte
+++ b/core/src/App.svelte
@@ -2192,13 +2192,20 @@
 
   :global(.iframeContainer.iframeContainerTabNav) {
     top: calc(
-      var(--luigi__shellbar--height) + var(--luigi__horizontal-nav--live-height, var(--luigi__horizontal-nav--height))
+      var(--luigi__shellbar--height) +
+        var(
+          --luigi__horizontal-nav--live-height,
+          var(--luigi__horizontal-nav--height)
+        )
     );
   }
 
   :global(.no-top-nav .iframeContainer.iframeContainerTabNav) {
     top: calc(
-      var(--luigi__horizontal-nav--live-height, var(--luigi__horizontal-nav--height))
+      var(
+        --luigi__horizontal-nav--live-height,
+        var(--luigi__horizontal-nav--height)
+      )
     );
   }
 

From 7b398ce3502c18348509744531c8a00d440a850d Mon Sep 17 00:00:00 2001
From: Ndricim Rrapi <ndricim.rrapi@sap.com>
Date: Fri, 14 Apr 2023 13:31:51 +0200
Subject: [PATCH 08/13] Fix e2e test

---
 .../cypress/e2e/tests/1-angular/globalSearch.cy.js              | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/e2e-test-application/cypress/e2e/tests/1-angular/globalSearch.cy.js b/test/e2e-test-application/cypress/e2e/tests/1-angular/globalSearch.cy.js
index 73db737353..848b18f9ac 100644
--- a/test/e2e-test-application/cypress/e2e/tests/1-angular/globalSearch.cy.js
+++ b/test/e2e-test-application/cypress/e2e/tests/1-angular/globalSearch.cy.js
@@ -73,7 +73,7 @@ describe('Global Search', () => {
       cy.get('.luigi-search-popover__body .fd-menu .fd-menu__list')
         .should('be.visible')
         .children()
-        .should('have.length', 6);
+        .should('have.length', 8);
     });
 
     it('Click on Projects result', () => {

From 0f55e06e66eebaf96fc136a716f67115107a4ad2 Mon Sep 17 00:00:00 2001
From: Ndricim Rrapi <ndricim.rrapi@sap.com>
Date: Fri, 14 Apr 2023 13:53:01 +0200
Subject: [PATCH 09/13] Add docu

---
 docs/navigation-parameters-reference.md | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/docs/navigation-parameters-reference.md b/docs/navigation-parameters-reference.md
index bfddf708f4..3a919d2253 100644
--- a/docs/navigation-parameters-reference.md
+++ b/docs/navigation-parameters-reference.md
@@ -645,9 +645,11 @@ navigation: {
 
 ### tabNav
 - **type**: boolean or Object
-- **description**: renders the children of the node as a horizontal navigation bar. Sub-children are not supported. When you categorize nodes you will get a drop-down menu in the horizontal navigation.
-- **since**: v0.7.0
-In the case the node has only one child, it's possible to configure if the horizontal navigation bar will be hidden automatically or not. To do so, the `tabNav` property must be an object with the property `{hideTabNavAutomatically:true|false}`.
+- **description**: renders the children of the node as a horizontal navigation bar. Sub-children are not supported. When you categorize nodes you will get a drop-down menu in the horizontal navigation. Set to `true` to show the horizontal navigation, or use the extra attributes to for more customization. 
+- **attributes**:
+  - **hideTabNavAutomatically**: boolean. In the case the node has only one child, it's possible to configure if the horizontal navigation bar will be hidden automatically or not. Set to true to hide the horizontal navigation bar and false otherwise. ( **since**: v0.7.0 )
+  - **showAsTabHeader**: boolean. if set on the node, it considers it as horizontal navigation header microfrontend. The node should be webcomponent based and it should have nested children to show on the horizontal navigation bar. (**since**: NEXTRELEASE )
+
 - **example**:
 ```js
 // Without hiding tab nav automatically 
@@ -657,12 +659,21 @@ In the case the node has only one child, it's possible to configure if the horiz
  children: [
   ...
                 
-//With hiding tab nav automatically if node has only one child               
+// With hiding tab nav automatically if node has only one child               
   pathSegment: 'example',
   label: 'Example',
   tabNav: { hideTabNavAutomatically: true },
   children: [
   ...
+
+  // showing horizontal navigation header microfrontend       
+  pathSegment: 'header',
+  label: 'Header Microfrontend',
+  viewUrl: '/tabHeader.js'
+  webcomponent: true,
+  tabNav: { showAsTabHeader : true },
+  children: [
+  ...
 ```
 - **since**: 2.0.0
 

From 9360f26cb2cb205433f9d890d3e142a3b3acd411 Mon Sep 17 00:00:00 2001
From: Ndricim Rrapi <ndricim.rrapi@sap.com>
Date: Fri, 21 Apr 2023 14:43:19 +0200
Subject: [PATCH 10/13] Apply suggestions from code review

Co-authored-by: Aleksandra Simeonova <aleksandra.simeonova@sap.com>
---
 docs/navigation-parameters-reference.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/navigation-parameters-reference.md b/docs/navigation-parameters-reference.md
index 3a919d2253..e8f57b7be6 100644
--- a/docs/navigation-parameters-reference.md
+++ b/docs/navigation-parameters-reference.md
@@ -645,10 +645,10 @@ navigation: {
 
 ### tabNav
 - **type**: boolean or Object
-- **description**: renders the children of the node as a horizontal navigation bar. Sub-children are not supported. When you categorize nodes you will get a drop-down menu in the horizontal navigation. Set to `true` to show the horizontal navigation, or use the extra attributes to for more customization. 
+- **description**: renders the children of the node as a horizontal navigation bar. Sub-children are not supported. When you categorize nodes, you will get a drop-down menu in the horizontal navigation. Set to `true` to show the horizontal navigation, or use the extra attributes for more customization. (**since**: v0.7.0)
 - **attributes**:
   - **hideTabNavAutomatically**: boolean. In the case the node has only one child, it's possible to configure if the horizontal navigation bar will be hidden automatically or not. Set to true to hide the horizontal navigation bar and false otherwise. ( **since**: v0.7.0 )
-  - **showAsTabHeader**: boolean. if set on the node, it considers it as horizontal navigation header microfrontend. The node should be webcomponent based and it should have nested children to show on the horizontal navigation bar. (**since**: NEXTRELEASE )
+  - **showAsTabHeader**: boolean. If this attribute is set on the node, it will be considered as a horizontal navigation header micro frontend. The node should be [webcomponent-based](web-component.md) and it should have nested children to show on the horizontal navigation bar. (**since**: NEXTRELEASE )
 
 - **example**:
 ```js
@@ -666,9 +666,9 @@ navigation: {
   children: [
   ...
 
-  // showing horizontal navigation header microfrontend       
+  // showing horizontal navigation header micro frontend       
   pathSegment: 'header',
-  label: 'Header Microfrontend',
+  label: 'Header Micro frontend',
   viewUrl: '/tabHeader.js'
   webcomponent: true,
   tabNav: { showAsTabHeader : true },

From 65f8ab77cd71d99dfb74da0b082e03348f4e6dc5 Mon Sep 17 00:00:00 2001
From: Ndricim Rrapi <ndricim.rrapi@sap.com>
Date: Mon, 24 Apr 2023 16:06:35 +0200
Subject: [PATCH 11/13] Apply suggestions from code review

Co-authored-by: Aleksandra Simeonova <aleksandra.simeonova@sap.com>
---
 docs/navigation-parameters-reference.md | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/docs/navigation-parameters-reference.md b/docs/navigation-parameters-reference.md
index e8f57b7be6..3120a93d61 100644
--- a/docs/navigation-parameters-reference.md
+++ b/docs/navigation-parameters-reference.md
@@ -647,7 +647,7 @@ navigation: {
 - **type**: boolean or Object
 - **description**: renders the children of the node as a horizontal navigation bar. Sub-children are not supported. When you categorize nodes, you will get a drop-down menu in the horizontal navigation. Set to `true` to show the horizontal navigation, or use the extra attributes for more customization. (**since**: v0.7.0)
 - **attributes**:
-  - **hideTabNavAutomatically**: boolean. In the case the node has only one child, it's possible to configure if the horizontal navigation bar will be hidden automatically or not. Set to true to hide the horizontal navigation bar and false otherwise. ( **since**: v0.7.0 )
+  - **hideTabNavAutomatically**: boolean. In the case the node has only one child, it's possible to configure whether the horizontal navigation bar will be hidden automatically or not. Set this attribute to `true` to hide the horizontal navigation bar and `false` otherwise. ( **since**: v2.0.0 )
   - **showAsTabHeader**: boolean. If this attribute is set on the node, it will be considered as a horizontal navigation header micro frontend. The node should be [webcomponent-based](web-component.md) and it should have nested children to show on the horizontal navigation bar. (**since**: NEXTRELEASE )
 
 - **example**:
@@ -675,7 +675,6 @@ navigation: {
   children: [
   ...
 ```
-- **since**: 2.0.0
 
 ### testId
 - **type**: string

From a54c32d6a9dcbea6d8d64d4cc77c1c4831785a78 Mon Sep 17 00:00:00 2001
From: Ndricim Rrapi <ndricim.rrapi@sap.com>
Date: Mon, 24 Apr 2023 16:58:45 +0200
Subject: [PATCH 12/13] Apply suggestions

---
 docs/navigation-advanced.md | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/docs/navigation-advanced.md b/docs/navigation-advanced.md
index 639e63e34d..cb343ed036 100644
--- a/docs/navigation-advanced.md
+++ b/docs/navigation-advanced.md
@@ -425,8 +425,11 @@ Tab-style navigation in Luigi can be displayed directly above the micro frontend
 
 ### tabNav
 - **type**: boolean or Object
-- **description**: renders the children of the node as a horizontal navigation bar. Sub-children are not supported. When you categorize nodes you will get a drop-down menu in the horizontal navigation.
-In the case the node has only one child, it's possible to configure if the horizontal navigation bar will be hidden automatically or not. To do so, the `tabNav` property must be an object with the property `{hideTabNavAutomatically:true|false}`.
+- **description**: renders the children of the node as a horizontal navigation bar. Sub-children are not supported. When you categorize nodes, you will get a drop-down menu in the horizontal navigation. Set to `true` to show the horizontal navigation, or use the extra attributes for more customization. (**since**: v0.7.0)
+- **attributes**:
+  - **hideTabNavAutomatically**: boolean. In the case the node has only one child, it's possible to configure whether the horizontal navigation bar will be hidden automatically or not. Set this attribute to `true` to hide the horizontal navigation bar and `false` otherwise. ( **since**: v2.0.0 )
+  - **showAsTabHeader**: boolean. If this attribute is set on the node, it will be considered as a horizontal navigation header micro frontend. The node should be [webcomponent-based](web-component.md) and it should have nested children to show on the horizontal navigation bar. (**since**: NEXTRELEASE )
+
 - **example**:
 ```js
 // Without hiding tab nav automatically 
@@ -436,12 +439,21 @@ In the case the node has only one child, it's possible to configure if the horiz
  children: [
   ...
                 
-//With hiding tab nav automatically if node has only one child              
+// With hiding tab nav automatically if node has only one child               
   pathSegment: 'example',
   label: 'Example',
   tabNav: { hideTabNavAutomatically: true },
   children: [
   ...
+
+  // showing horizontal navigation header micro frontend       
+  pathSegment: 'header',
+  label: 'Header Micro frontend',
+  viewUrl: '/tabHeader.js'
+  webcomponent: true,
+  tabNav: { showAsTabHeader : true },
+  children: [
+  ...
 ```
 
 ## Breadcrumbs

From b1274c0fecb047f0209685ab7e6bad7f33367dd5 Mon Sep 17 00:00:00 2001
From: Philipp Pracht <philipp.pracht@sap.com>
Date: Wed, 26 Apr 2023 17:17:25 +0200
Subject: [PATCH 13/13] some improvements...

---
 core/src/navigation/TabHeader.svelte       | 16 ++++++++++------
 core/src/navigation/TabNav.svelte          | 15 +++++++++++++--
 core/src/navigation/services/navigation.js |  2 +-
 3 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/core/src/navigation/TabHeader.svelte b/core/src/navigation/TabHeader.svelte
index b7f86e9d0e..bf5f40c940 100644
--- a/core/src/navigation/TabHeader.svelte
+++ b/core/src/navigation/TabHeader.svelte
@@ -21,12 +21,16 @@
   };
 
   onMount(() => {
-    // render webcomponent based on pased node object only if it is a webcomponent and showAsTabHeader is set to true
-    if (node.webcomponent && node.tabNav.showAsTabHeader) {
-      WebComponentService.renderWebComponent(node.viewUrl, document.querySelector('.lui-tab-header'), node.context, node);
-    } else { 
-      console.warn('Horizontal navigation custom header microfrontend requires a webcomponent type node and tabNav.showAsTabHeader property set.')
-    }
+    
+    document.querySelector('.lui-tab-header').innerHTML = '';
+    setTimeout(()=>{
+      // render webcomponent based on pased node object only if it is a webcomponent and showAsTabHeader is set to true
+      if (node.webcomponent && node.tabNav.showAsTabHeader) {
+        WebComponentService.renderWebComponent(node.viewUrl, document.querySelector('.lui-tab-header'), node.context, node);
+      } else { 
+        console.warn('Horizontal navigation custom header microfrontend requires a webcomponent type node and tabNav.showAsTabHeader property set.')
+      }
+    });
   });
 
 
diff --git a/core/src/navigation/TabNav.svelte b/core/src/navigation/TabNav.svelte
index 901e875058..883d94ab8a 100644
--- a/core/src/navigation/TabNav.svelte
+++ b/core/src/navigation/TabNav.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { beforeUpdate, createEventDispatcher, onMount, getContext, onDestroy } from 'svelte';
+  import { afterUpdate, beforeUpdate, createEventDispatcher, onMount, getContext, onDestroy } from 'svelte';
   import { Navigation } from './services/navigation';
   import { NavigationHelpers, RoutingHelpers } from '../utilities/helpers';
   import { LuigiConfig } from '../core-api';
@@ -140,7 +140,7 @@
     if(resizeObserver) {
       resizeObserver.disconnect();
     }
-    document.documentElement.style.setProperty('--luigi__horizontal-nav--live-height', '0');
+    document.documentElement.style.removeProperty('--luigi__horizontal-nav--live-height');
   }
 
 
@@ -169,6 +169,17 @@
     }
   });
 
+  afterUpdate(() => {
+    resetResizeObserver();
+    if (!resizeObserver) {
+      handleHorizontalNavHeightChange();
+    } else {
+      setTimeout(() => {
+        resizeObserver.observe(document.querySelector('#tabsContainer.lui-tabs'));
+      });
+    }
+  });
+
   function isOpenUIiconName(name) {
     return NavigationHelpers.isOpenUIiconName(name);
   }
diff --git a/core/src/navigation/services/navigation.js b/core/src/navigation/services/navigation.js
index 63e576a39a..71b8fe845d 100644
--- a/core/src/navigation/services/navigation.js
+++ b/core/src/navigation/services/navigation.js
@@ -349,7 +349,7 @@ class NavigationClass {
           if (node.keepSelectedForChildren === false) {
             // explicitly set to false
             childToKeepFound = true;
-          } else if (node.keepSelectedForChildren || node.tabNav) {
+          } else if (node.keepSelectedForChildren || (node.tabNav && !RoutingHelpers.isDynamicNode(node))) {
             childToKeepFound = true;
             res = [];
           }