From 3a460182bedab19e542cca75840ac7c386c30b0c Mon Sep 17 00:00:00 2001
From: JohannesDoberer <johannes.doberer@sap.com>
Date: Tue, 14 Dec 2021 18:24:34 +0100
Subject: [PATCH] Searchfield configurable (#2385)

---
 core/src/navigation/GlobalSearch.html         |  19 +-
 core/src/navigation/GlobalSearchCentered.html | 534 ++++++++++++++++++
 core/src/navigation/LeftNav.html              |   2 +-
 core/src/navigation/TopNav.html               |  41 +-
 .../helpers/global-search-helpers.js          |  12 +
 core/src/utilities/helpers/index.js           |   1 +
 core/src/utilities/luigi-config-defaults.js   |   3 +-
 docs/navigation-parameters-reference.md       |  12 +-
 plugins/package.json                          |   2 +-
 .../tests/0-fiddle/fiddle-navigation.spec.js  |  62 +-
 .../src/luigi-config/extended/globalSearch.js |   5 +-
 11 files changed, 669 insertions(+), 24 deletions(-)
 create mode 100644 core/src/navigation/GlobalSearchCentered.html
 create mode 100644 core/src/utilities/helpers/global-search-helpers.js

diff --git a/core/src/navigation/GlobalSearch.html b/core/src/navigation/GlobalSearch.html
index 9433f26cfc..0f036c98e2 100644
--- a/core/src/navigation/GlobalSearch.html
+++ b/core/src/navigation/GlobalSearch.html
@@ -99,6 +99,7 @@
   export let inputElem;
   export let luigiCustomSearchRenderer__slot;
   export let luigiCustomSearchItemRenderer__slotContainer;
+  export let globalSearchConfig;
   const dispatch = createEventDispatcher();
   const searchApiObj = {
     fireItemSelected: item => {
@@ -107,23 +108,34 @@
   };
   let searchResults = {};
   let showPopOverCustomSearch = false;
-  let search;
+  let search = {};
   let isCustomSearchRenderer;
   let isCustomSearchResultItemRenderer;
+  let searchFieldAlwaysVisible;
+
   onMount(async () => {
-    search = await LuigiConfig.getConfigValueAsync('globalSearch');
+    search = globalSearchConfig;
     let inputElement = inputElem;
     const placeHolder = getSearchPlaceholder(search.searchProvider);
     if (placeHolder) {
       inputElement.placeholder = placeHolder;
     }
+    getCustomRenderer();
+  });
+
+  beforeUpdate(() => {
+    search = globalSearchConfig;
+    getCustomRenderer();
+  });
+
+  function getCustomRenderer() {
     isCustomSearchRenderer = GenericHelpers.isFunction(
       search.searchProvider.customSearchResultRenderer
     );
     isCustomSearchResultItemRenderer = GenericHelpers.isFunction(
       search.searchProvider.customSearchResultItemRenderer
     );
-  });
+  }
 
   function getSearchPlaceholder(searchProvider) {
     if (!searchProvider || !searchProvider.inputPlaceholder) {
@@ -338,7 +350,6 @@
   }
 
   //remove arrow from the search popover
-
   @media screen and (max-width: 1024px) {
     .luigi-search-shell__mobile {
       position: relative;
diff --git a/core/src/navigation/GlobalSearchCentered.html b/core/src/navigation/GlobalSearchCentered.html
new file mode 100644
index 0000000000..5ce086a026
--- /dev/null
+++ b/core/src/navigation/GlobalSearchCentered.html
@@ -0,0 +1,534 @@
+<svelte:window on:click="{closeSearchResult}" on:blur="{closeSearchResult}" />
+<div
+  class="fd-shellbar__action lui-global-search-input {isSearchFieldVisible?'lui-global-search-mobile--active':''}"
+>
+  <div class="fd-popover">
+    <div
+      class="fd-popover__control luigi-search"
+      on:click|stopPropagation="{() => {}}"
+      aria-hidden="{!isSearchFieldVisible}"
+      aria-haspopup="true"
+    >
+      <div class="fd-input-group fd-shellbar__input-group luigi-search-input-ctn">
+        {#if search && search.disableInputHandlers}
+        <input
+          type="text"
+          class="fd-input fd-input-group__input fd-shellbar__input-group__input luigi-search__input"
+          data-testid="luigi-search-input__no-handlers"
+        />
+        {:else} <input type="text" on:keyup="{(event) => onKeyUp(event)}" class="fd-input
+        fd-input-group__input fd-shellbar__input-group__input luigi-search__input"
+        data-testid="luigi-search-input" bind:this="{inputElem}" on:input={() =>
+        renderClearBtn()} /> {#if search.searchFieldCentered &&
+        GenericHelpers.requestExperimentalFeature('globalSearchCentered', true)}
+        <span
+          class="fd-input-group__addon fd-shellbar__input-group__addon fd-input-group__addon--button lui-search-btn-ctn"
+        >
+          {#if displayClearSearchFieldBtn}
+          <button
+            aria-label="button-decline"
+            class="fd-shellbar__button fd-button"
+            on:click="{clearSearchField}"
+          >
+            <i class="sap-icon--decline"></i>
+          </button>
+          {/if}
+          <button
+            aria-label="button-search"
+            class="fd-shellbar__button fd-button"
+            on:click="{searchBtnClicked}"
+          >
+            <i class="sap-icon--search"></i>
+          </button>
+        </span>
+        {/if} {/if}
+      </div>
+      {#if !isCustomSearchRenderer}
+      <div
+        class="fd-popover__body fd-popover__body--right luigi-search-popover__body"
+        aria-hidden="{!displaySearchResult}"
+      >
+        <nav class="fd-menu">
+          {#if searchResult}
+          <ul
+            class="fd-menu__list fd-menu__list--top"
+            bind:this="{luigiCustomSearchItemRenderer__slotContainer}"
+          >
+            {#each searchResult as result, index}
+            <li
+              class="fd-menu__item luigi-search-result-item__{index}"
+              on:click="{(event) => onSearchResultItemSelected(result, event)}"
+              on:keyup="{(event) => handleKeydown(result, event)}"
+              tabindex="0"
+            >
+              {#if !isCustomSearchResultItemRenderer}
+              <a class="fd-menu__link" on:click|preventDefault="{() => {}}">
+                <div class="fd-product-switch__text">
+                  <div class="fd-product-switch__title">{result.label}</div>
+                  <div class="fd-product-switch__subtitle">
+                    {result.description}
+                  </div>
+                </div>
+              </a>
+              {:else} {@html
+              renderCustomSearchItem(result,luigiCustomSearchItemRenderer__slotContainer,
+              index)} {/if}
+            </li>
+            {/each}
+          </ul>
+          {/if}
+        </nav>
+      </div>
+      {:else}
+      <div bind:this="{luigiCustomSearchRenderer__slot}"></div>
+      {/if}
+    </div>
+  </div>
+</div>
+{#if !isSearchFieldVisible}
+<div class="lui-global-search-btn">
+  <div on:click|stopPropagation="{() => {}}">
+    <button
+      class="fd-button fd-shellbar__button"
+      aria-haspopup="true"
+      aria-expanded="{!isSearchFieldVisible}"
+      on:click="{toggleSearch}"
+      data-testid="luigi-search-btn-desktop"
+    >
+      <i class="sap-icon sap-icon--search"></i>
+    </button>
+  </div>
+</div>
+{/if} {#if isSearchFieldVisible}
+<div
+  class="lui-global-search-cancel-btn {isSearchFieldVisible?'lui-global-search-cancel-btn--active':''}"
+>
+  <button
+    class="fd-button fd-shellbar__button"
+    aria-haspopup="true"
+    aria-expanded="{!isSearchFieldVisible}"
+    on:click|stopPropagation="{()=> toggleSearch()}"
+    data-testid="luigi-search-cancel-btn"
+  >
+    {$getTranslation(cancelBtn)}
+  </button>
+</div>
+{/if}
+<script>
+  import { beforeUpdate, createEventDispatcher, onMount, getContext } from 'svelte';
+  import { LuigiAuth, LuigiConfig, LuigiI18N } from '../core-api';
+  import { GenericHelpers, GlobalSearchHelper } from '../utilities/helpers';
+  import { Routing } from '../services/routing';
+  import {
+    KEYCODE_ARROW_UP,
+    KEYCODE_ARROW_DOWN,
+    KEYCODE_ENTER,
+    KEYCODE_ESC
+  } from '../utilities/keycode.js';
+  import { TOP_NAV_DEFAULTS } from '../utilities/luigi-config-defaults';
+  import { CSS_BREAKPOINTS } from '../utilities/constants';
+  export let searchResult = [];
+  export let displaySearchResult;
+  export let displayCustomSearchResult;
+  export let inputElem;
+  export let luigiCustomSearchRenderer__slot;
+  export let luigiCustomSearchItemRenderer__slotContainer;
+  export let globalSearchConfig;
+  const dispatch = createEventDispatcher();
+  const searchApiObj = {
+    fireItemSelected: item => {
+      search.searchProvider.onSearchResultItemSelected(item);
+    }
+  };
+  let cancelBtn = TOP_NAV_DEFAULTS.globalSearchCenteredCancelButton;
+  export let isSearchFieldVisible;
+  let searchResults = {};
+  let showPopOverCustomSearch = false;
+  let search = {};
+  let isCustomSearchRenderer;
+  let isCustomSearchResultItemRenderer;
+  let displayClearSearchFieldBtn = false;
+  let getTranslation = getContext('getTranslation');
+
+  onMount(async () => {
+    search = globalSearchConfig;
+    cancelBtn = search.globalSearchCenteredCancelButton
+      ? search.globalSearchCenteredCancelButton
+      : cancelBtn;
+    let inputElement = inputElem;
+    const placeHolder = getSearchPlaceholder(search.searchProvider);
+    if (placeHolder) {
+      inputElement.placeholder = placeHolder;
+    }
+    getCustomRenderer();
+    GlobalSearchHelper.handleVisibilityGlobalSearch();
+    const globalSearchCtn = document.querySelector('.lui-global-search');
+    const resizeObserver = new ResizeObserver(entries => {
+      GlobalSearchHelper.handleVisibilityGlobalSearch();
+    });
+
+    resizeObserver.observe(globalSearchCtn);
+  });
+
+  beforeUpdate(() => {
+    search = globalSearchConfig;
+    getCustomRenderer();
+  });
+
+  function getCustomRenderer() {
+    isCustomSearchRenderer = GenericHelpers.isFunction(
+      search.searchProvider.customSearchResultRenderer
+    );
+    isCustomSearchResultItemRenderer = GenericHelpers.isFunction(
+      search.searchProvider.customSearchResultItemRenderer
+    );
+  }
+
+  function getSearchPlaceholder(searchProvider) {
+    if (!searchProvider || !searchProvider.inputPlaceholder) {
+      return undefined;
+    }
+    const currentLocale = LuigiI18N.getCurrentLocale();
+    if (GenericHelpers.isFunction(searchProvider.inputPlaceholder)) {
+      return searchProvider.inputPlaceholder();
+    }
+    if (typeof searchProvider.inputPlaceholder === 'string') {
+      const translated = LuigiI18N.getTranslation(searchProvider.inputPlaceholder);
+      if (!!translated && translated.trim().length > 0) {
+        return translated;
+      }
+      return searchProvider.inputPlaceholder;
+    }
+    if (typeof searchProvider.inputPlaceholder === 'object') {
+      return searchProvider.inputPlaceholder[currentLocale];
+    }
+  }
+
+  function renderCustomSearchItem(item, slotContainer, index) {
+    setTimeout(() => {
+      search.searchProvider.customSearchResultItemRenderer(
+        item,
+        slotContainer.children[index],
+        searchApiObj
+      );
+    });
+    return '';
+  }
+
+  function closeSearchResult() {
+    dispatch('closeSearchResult');
+  }
+
+  function onKeyUp({ keyCode }) {
+    if (search) {
+      if (
+        GenericHelpers.isFunction(search.searchProvider.onEnter) &&
+        keyCode === KEYCODE_ENTER
+      ) {
+        search.searchProvider.onEnter();
+      } else if (
+        GenericHelpers.isFunction(search.searchProvider.onEscape) &&
+        keyCode === KEYCODE_ESC
+      ) {
+        search.searchProvider.onEscape();
+      } else if (keyCode === KEYCODE_ARROW_DOWN) {
+        if (displaySearchResult) {
+          document
+            .querySelector('.luigi-search-result-item__0')
+            .childNodes[0].setAttribute('aria-selected', 'true');
+          document.querySelector('.luigi-search-result-item__0').focus();
+        }
+      } else if (GenericHelpers.isFunction(search.searchProvider.onInput)) {
+        search.searchProvider.onInput();
+      }
+    } else {
+      console.warn('GlobalSearchCentered is not available.');
+    }
+  }
+
+  function searchBtnClicked() {
+    if (search && GenericHelpers.isFunction(search.searchProvider.onSearchBtnClick)) {
+      search.searchProvider.onSearchBtnClick();
+    }
+  }
+
+  function renderClearBtn() {
+    document.querySelector('.luigi-search__input').value
+      ? (displayClearSearchFieldBtn = true)
+      : (displayClearSearchFieldBtn = false);
+  }
+
+  function clearSearchField() {
+    document.querySelector('.luigi-search__input').value = '';
+    closeSearchResult();
+    displayClearSearchFieldBtn = false;
+  }
+
+  function calcSearchResultItemSelected(direction) {
+    let renderedSearchResultItems = luigiCustomSearchItemRenderer__slotContainer.children;
+    if (renderedSearchResultItems) {
+      for (let index = 0; index < renderedSearchResultItems.length; index++) {
+        let { childNodes, nextSibling, previousSibling } = renderedSearchResultItems[
+          index
+        ];
+        let nodeSibling;
+        if (childNodes[0].getAttribute('aria-selected') === 'true') {
+          if (direction === KEYCODE_ARROW_DOWN) {
+            nodeSibling =
+              nextSibling !== null ? nextSibling : renderedSearchResultItems[0];
+          }
+          if (direction === KEYCODE_ARROW_UP) {
+            nodeSibling =
+              previousSibling !== null
+                ? previousSibling
+                : renderedSearchResultItems[renderedSearchResultItems.length - 1];
+          }
+          childNodes[0].setAttribute('aria-selected', 'false');
+          nodeSibling.childNodes[0].setAttribute('aria-selected', 'true');
+          nodeSibling.focus();
+          break;
+        }
+      }
+    }
+  }
+
+  function clearAriaSelected() {
+    let renderedSearchResultItems = luigiCustomSearchItemRenderer__slotContainer.children;
+    if (renderedSearchResultItems) {
+      for (let index = 0; index < renderedSearchResultItems.length; index++) {
+        let element = renderedSearchResultItems[index];
+        if (element.childNodes[0].getAttribute('aria-selected') === 'true') {
+          element.childNodes[0].setAttribute('aria-selected', 'false');
+        }
+      }
+    }
+  }
+
+  function onSearchResultItemSelected(searchResultItem) {
+    if (
+      search &&
+      GenericHelpers.isFunction(search.searchProvider.onSearchResultItemSelected)
+    ) {
+      search.searchProvider.onSearchResultItemSelected(searchResultItem);
+    } else if (
+      GenericHelpers.isFunction(search.searchProvider.onEscape) &&
+      event.keyCode === KEYCODE_ESC
+    ) {
+      search.searchProvider.onEscape();
+    }
+  }
+
+  function handleKeydown(result, { keyCode }) {
+    if (keyCode === KEYCODE_ENTER) {
+      search.searchProvider.onSearchResultItemSelected(result);
+    }
+    if (keyCode === KEYCODE_ARROW_UP || keyCode === KEYCODE_ARROW_DOWN) {
+      calcSearchResultItemSelected(keyCode);
+    } else if (
+      GenericHelpers.isFunction(search.searchProvider.onEscape) &&
+      keyCode === KEYCODE_ESC
+    ) {
+      clearAriaSelected();
+      setTimeout(() => {
+        inputElem.focus();
+      });
+      search.searchProvider.onEscape();
+    }
+  }
+
+  export function onActionClick(searchResultItem) {
+    let node = searchResultItem.pathObject;
+    if (node.externalLink) {
+      Routing.navigateToLink(node);
+    } else {
+      dispatch('handleSearchNavigation', { node });
+    }
+  }
+
+  function setFocusOnGlobalSearchFieldDesktop() {
+    if (inputElem) {
+      inputElem.focus();
+    }
+  }
+
+  export function toggleSearch() {
+    if (!isSearchFieldVisible)
+      setTimeout(() => {
+        setFocusOnGlobalSearchFieldDesktop();
+      });
+    else {
+      displaySearchResult = false;
+    }
+    dispatch('toggleSearch', {
+      isSearchFieldVisible,
+      inputElem,
+      luigiCustomSearchRenderer__slot
+    });
+
+    if (GenericHelpers.isFunction(search.searchProvider.toggleSearch)) {
+      const fieldVisible =
+        isSearchFieldVisible === undefined ? true : !isSearchFieldVisible;
+      search.searchProvider.toggleSearch(inputElem, fieldVisible);
+    }
+  }
+</script>
+<style type="text/scss">
+  @import 'styles/variables';
+  //remove default browser outline on focus for search results
+  .luigi-search-popover__body {
+    li[class*='luigi-search-result']:focus {
+      outline: none;
+    }
+  }
+
+  .luigi-search {
+    .fd-input-group {
+      isolation: isolate;
+    }
+
+    .fd-input-group,
+    .fd-button,
+    .luigi-search__input {
+      height: 2rem;
+    }
+
+    .fd-input-group__addon,
+    .luigi-search__input {
+      isolation: isolate;
+      z-index: -1;
+    }
+
+    .luigi-search__input {
+      flex: 1;
+    }
+
+    .fd-input-group__addon {
+      min-height: 2rem;
+    }
+  }
+
+  .luigi-search__input:hover + .fd-input-group__addon--button {
+    background-color: var(--sapShell_Hover_Background, #283848) !important;
+  }
+
+  :global(.lui-global-search) {
+    order: 2;
+    flex-grow: 10;
+    max-width: 43rem;
+    .fd-popover {
+      width: 100%;
+    }
+  }
+
+  @media (min-width: 1440px) {
+    :global(.lui-global-search) {
+      margin-left: 3rem;
+      margin-right: 3rem;
+    }
+  }
+
+  @media (min-width: 1024px) and (max-width: 1440px) {
+    :global(.lui-global-search) {
+      margin-left: 2rem;
+      margin-right: 2rem;
+    }
+  }
+
+  @media (min-width: 1023px) and (max-width: 600px) {
+    :global(.lui-global-search) {
+      margin-left: 1rem;
+      margin-right: 1rem;
+    }
+  }
+
+  :global(.lui-global-search) {
+    display: flex;
+    justify-content: center;
+  }
+
+  :global(.lui-global-search.lui-global-search-toggle) {
+    justify-content: flex-end;
+    .lui-global-search-btn {
+      display: inline-block;
+    }
+  }
+
+  .lui-search-btn-ctn {
+    font-size: 0;
+  }
+
+  .fd-input-group__addon--button {
+    display: inline-block;
+  }
+
+  div.luigi-search-input-ctn:focus-within {
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    outline-offset: -0.1875rem;
+    outline-width: 0.0625rem;
+    outline-width: var(--sapContent_FocusWidth, 0.0625rem);
+    outline-color: #fff;
+    outline-color: var(--sapContent_ContrastFocusColor, #fff);
+    outline-style: dotted;
+    outline-style: var(--sapContent_FocusStyle, dotted);
+  }
+
+  :global(.lui-global-search.lui-global-search-toggle) {
+    .lui-global-search-input {
+      display: none;
+    }
+    .lui-global-search-input.lui-global-search-mobile--active {
+      position: absolute;
+      display: block;
+      background-color: var(--sapShellColor, #354a5f);
+      width: calc(100% - 90px);
+      left: 0;
+      top: 0;
+      z-index: 2;
+      padding-left: 1rem;
+      .fd-shellbar__input-group {
+        margin-top: 6px;
+      }
+    }
+
+    .lui-global-search-cancel-btn.lui-global-search-cancel-btn--active {
+      text-align: center;
+      position: absolute;
+      right: 0;
+      display: block;
+      display: inline-block;
+      background-color: var(--sapShellColor, #354a5f);
+      top: 0;
+      z-index: 2;
+      width: 90px;
+      .fd-shellbar__button {
+        margin-top: 4px;
+      }
+    }
+    .lui-global-search-btn {
+      right: 0;
+    }
+  }
+
+  .lui-global-search-cancel-btn {
+    display: none;
+  }
+
+  .lui-global-search-btn {
+    display: none;
+  }
+
+  .lui-global-search-input {
+    flex: 0 0 100%;
+  }
+
+  :global(.fd-shellbar__group) {
+    flex-grow: 1;
+  }
+
+  @media (max-width: 599px) {
+    :global(.fd-shellbar__logo) {
+      display: none;
+    }
+  }
+</style>
diff --git a/core/src/navigation/LeftNav.html b/core/src/navigation/LeftNav.html
index 2b649cf637..df7181b1e7 100644
--- a/core/src/navigation/LeftNav.html
+++ b/core/src/navigation/LeftNav.html
@@ -1016,7 +1016,7 @@
       animation-duration: 0.3s;
       animation-fill-mode: forwards;
       .lui-flyout-sublist__title {
-        background: var(--sapList_Background,#fff);
+        background: var(--sapList_Background, #fff);
       }
 
       @-webkit-keyframes flyoutAnimation {
diff --git a/core/src/navigation/TopNav.html b/core/src/navigation/TopNav.html
index 2905b7fb17..eeb9454906 100644
--- a/core/src/navigation/TopNav.html
+++ b/core/src/navigation/TopNav.html
@@ -22,8 +22,25 @@
       on:handleClick="{handleClickExternal}"
     />
   </div>
+  {#if globalSearchConfig && isGlobalSearchCentered}
+  <div class="lui-global-search">
+    <GlobalSearchCentered
+      globalSearchConfig="{globalSearchConfig}"
+      bind:isSearchFieldVisible
+      on:toggleSearch
+      on:handleSearchNavigation
+      bind:searchResult
+      bind:displaySearchResult
+      bind:displayCustomSearchResult
+      bind:inputElem
+      bind:luigiCustomSearchRenderer__slot
+      on:closeSearchResult
+    />
+  </div>
+  {/if}
   <div class="fd-shellbar__group fd-shellbar__group--actions">
-    {#if !authorizationEnabled || isLoggedIn} {#if isGlobalSearchAvailable}
+    {#if !authorizationEnabled || isLoggedIn} {#if globalSearchConfig &&
+    !isGlobalSearchCentered}
     <GlobalSearch
       bind:isSearchFieldVisible
       on:toggleSearch
@@ -34,6 +51,7 @@
       bind:inputElem
       bind:luigiCustomSearchRenderer__slot
       on:closeSearchResult
+      globalSearchConfig="{globalSearchConfig}"
     />
     {/if}
     <ContextSwitcher
@@ -42,9 +60,9 @@
       isMobile="{false}"
       addNavHrefForAnchor="{addNavHrefForAnchor}"
     />
-    {/if} {#if isGlobalSearchAvailable || (children && pathData.length > 0)} {#if
-    (children && pathData.length > 0)} {#each children as node, i} {#if !(node.hideFromNav
-    || (showGlobalNav && node.globalNav))} {#if node.isCat}
+    {/if} {#if globalSearchConfig || (children && pathData.length > 0)} {#if (children &&
+    pathData.length > 0)} {#each children as node, i} {#if !(node.hideFromNav ||
+    (showGlobalNav && node.globalNav))} {#if node.isCat}
     <div
       class="fd-shellbar__action fd-shellbar__action--hide fd-shellbar__action--desktop"
     >
@@ -119,7 +137,7 @@
 
     <!-- dropdown for top nav nodes on smaller screens -->
     {#if (visibleNodeCount - globalNavNodeCount > 0) || isProductSwitcherAvailable ||
-    contextSwitcherConfig || isGlobalSearchAvailable }
+    contextSwitcherConfig || globalSearchConfig }
     <div class="fd-shellbar__action fd-shellbar__action--mobile">
       <div class="fd-shellbar-collapse">
         <div class="fd-popover fd-popover--right">
@@ -150,7 +168,7 @@
           >
             <nav class="fd-menu">
               <ul class="fd-menu__list fd-menu__list--no-shadow">
-                {#if isGlobalSearchAvailable}
+                {#if globalSearchConfig && !isGlobalSearchCentered}
                 <li class="fd-menu__item">
                   <a
                     class="fd-menu__link"
@@ -411,6 +429,7 @@
   import ContextSwitcher from './ContextSwitcher.html';
   import ProductSwitcher from './ProductSwitcher.html';
   import GlobalSearch from './GlobalSearch.html';
+  import GlobalSearchCentered from './GlobalSearchCentered.html';
   import TopNavNode from './TopNavNode.html';
   import { beforeUpdate, createEventDispatcher, onMount, getContext } from 'svelte';
   import { LuigiAuth, LuigiConfig, LuigiI18N } from '../core-api';
@@ -425,7 +444,6 @@
   import { SemiCollapsibleNavigation } from './services/semi-collapsed-navigation';
 
   const dispatch = createEventDispatcher();
-
   export let authorizationEnabled;
   export let autologinEnabled;
   export let isLoggedIn = false;
@@ -449,7 +467,8 @@
   export let profileItemsAvailable;
   export let userInfo = {};
   export let urlAuthError;
-  export let isGlobalSearchAvailable;
+  export let globalSearchConfig;
+  export let isGlobalSearchCentered;
   export let isSearchFieldVisible;
   export let inputElem;
   export let luigiCustomSearchRenderer__slot;
@@ -499,7 +518,11 @@
         );
         profileTypeSettings = LuigiConfig.getConfigValue('settings.profileType');
         productSwitcherConfig = NavigationHelpers.getProductSwitcherConfig();
-        isGlobalSearchAvailable = LuigiConfig.getConfigValue('globalSearch');
+        globalSearchConfig = LuigiConfig.getConfigValue('globalSearch');
+        isGlobalSearchCentered =
+          globalSearchConfig &&
+          globalSearchConfig.searchFieldCentered &&
+          GenericHelpers.requestExperimentalFeature('globalSearchCentered', true);
         showGlobalNav =
           LuigiConfig.getConfigBooleanValue('settings.globalSideNavigation') &&
           GenericHelpers.requestExperimentalFeature('globalNav', true);
diff --git a/core/src/utilities/helpers/global-search-helpers.js b/core/src/utilities/helpers/global-search-helpers.js
new file mode 100644
index 0000000000..57e612073a
--- /dev/null
+++ b/core/src/utilities/helpers/global-search-helpers.js
@@ -0,0 +1,12 @@
+/* istanbul ignore file */
+class GlobalSearchHelperClass {
+  constructor() {}
+
+  handleVisibilityGlobalSearch() {
+    const globalSearchCtn = document.querySelector('.lui-global-search');
+    const condition = globalSearchCtn.offsetWidth <= 384;
+    globalSearchCtn.classList.toggle('lui-global-search-toggle', condition);
+  }
+}
+
+export const GlobalSearchHelper = new GlobalSearchHelperClass();
diff --git a/core/src/utilities/helpers/index.js b/core/src/utilities/helpers/index.js
index 73e0831ca8..3991aafa30 100644
--- a/core/src/utilities/helpers/index.js
+++ b/core/src/utilities/helpers/index.js
@@ -9,3 +9,4 @@ export * from './state-helpers';
 export * from './event-listener-helpers';
 export * from './storage-helper';
 export * from './usersetting-dialog-helpers';
+export * from './global-search-helpers'
\ No newline at end of file
diff --git a/core/src/utilities/luigi-config-defaults.js b/core/src/utilities/luigi-config-defaults.js
index 6f061a80be..9a7faa4f96 100644
--- a/core/src/utilities/luigi-config-defaults.js
+++ b/core/src/utilities/luigi-config-defaults.js
@@ -11,7 +11,8 @@ export const TOP_NAV_DEFAULTS = {
     dialogHeader: 'User Settings',
     saveBtn: 'Save',
     dismissBtn: 'Cancel'
-  }
+  },
+  globalSearchCenteredCancelButton: 'Cancel'
 };
 
 export const NAVIGATION_DEFAULTS = {
diff --git a/docs/navigation-parameters-reference.md b/docs/navigation-parameters-reference.md
index 0e33cc2170..fd181be2b3 100644
--- a/docs/navigation-parameters-reference.md
+++ b/docs/navigation-parameters-reference.md
@@ -843,6 +843,16 @@ The global search is an input field available in the top navigation bar. The sea
 - **description**: disables the on:keyUp and other internal handlers on the search input field. It is a plain input field then, which can be used to attach your own handlers. If set to `true`, a **searchProvider** must be defined in order to show the search field, which can contain your custom logic. It is recommended to initialize your custom logic in the [**lifeCycle.luigiAfterInit**](lifecycle-hooks.md#luigiafterinit) hook.
 - **since**: 1.5.0
 
+### globalSearchCenteredCancelButton
+- **type**: string
+- **description**: defines the label of the cancel button. It will be displayed if you want to hide the search field on a smaller viewport. This property is only available if `searchFieldCentered` is active. Default value is `cancel` and this property is optional.
+- **since**: NEXTRELEASE
+
+### searchFieldCentered
+- **type**: boolean
+- **description**: The search input field will be rendered in the center of the shellbar.
+- **since**: NEXTRELEASE
+
 ### searchProvider
 - **type**: Object
 - **description**: The search provider is an object which contains different events and the possibility to implement a custom result renderer or change only the search result item.
@@ -897,7 +907,7 @@ The global search is an input field available in the top navigation bar. The sea
      - **description**: Key value JSON object, where `key` is the language and `value` is the text used as placeholder in the search input field. This function doesn't have any input parameter.
    - **toggleSearch**
      - **type**: Function
-     - **description**: This function will be executed every time you click on the search icon.
+     - **description**: This function will be executed every time when the visibility of the search input field is changed.
     - **attributes**:
       - **element**
         - **type**: INPUT element
diff --git a/plugins/package.json b/plugins/package.json
index ed355b4c09..ea55532ae6 100644
--- a/plugins/package.json
+++ b/plugins/package.json
@@ -4,7 +4,7 @@
   "description": "luigi-auth-plugin-* development versions, only the public folders are being published to npm as a package",
   "repository": {
     "type": "git",
-    "url": "ssh://github.com/SAP/luigiluigi.git"
+    "url": "ssh://github.com/SAP/luigi.git"
   },
   "scripts": {
     "bundle": "npm run bundle-evergreen && npm run bundle-ie11",
diff --git a/test/e2e-test-application/e2e/tests/0-fiddle/fiddle-navigation.spec.js b/test/e2e-test-application/e2e/tests/0-fiddle/fiddle-navigation.spec.js
index b3cfc53189..1ba78e55b3 100644
--- a/test/e2e-test-application/e2e/tests/0-fiddle/fiddle-navigation.spec.js
+++ b/test/e2e-test-application/e2e/tests/0-fiddle/fiddle-navigation.spec.js
@@ -575,7 +575,12 @@ describe('Fiddle', () => {
               language: {
                 type: 'enum',
                 label: 'Language and Region',
-                options: [{ value: 'de', label: 'Deutsch' }, { value: 'en', label: 'English' }, '简体中文', { value: 'fr', label: 'Français' }],
+                options: [
+                  { value: 'de', label: 'Deutsch' },
+                  { value: 'en', label: 'English' },
+                  '简体中文',
+                  { value: 'fr', label: 'Français' }
+                ],
                 description:
                   'After you save your settings, the browser will refresh for the new language to take effect.'
               },
@@ -634,18 +639,15 @@ describe('Fiddle', () => {
         .should('exist')
         .should('contain', 'English');
 
-
       cy.get('[data-testid="lui-us-language-dropdown"]')
         .eq(0)
         .click();
+      cy.get('[data-testid="lui-us-language-dropdown"]').should('be.visible');
       cy.get('[data-testid="lui-us-language-dropdown"]')
-        .should('be.visible');
-        cy.get('[data-testid="lui-us-language-dropdown"]')
         .eq(0)
         .click();
       cy.wait(500);
-      cy.get('[data-testid="lui-us-option0_0"]')
-        .should('not.be.visible');
+      cy.get('[data-testid="lui-us-option0_0"]').should('not.be.visible');
 
       cy.get('[data-testid="lui-us-dismissBtn"]').click();
       cy.get('.lui-usersettings-dialog').should('not.be.visible');
@@ -724,6 +726,54 @@ describe('Fiddle', () => {
       });
     });
   });
+
+  describe('GlobalSearchCentered', () => {
+    let newConfig;
+    beforeEach(() => {
+      newConfig = cloneDeep(fiddleConfig);
+    });
+    beforeEach(() => {
+      newConfig.globalSearch = {
+        searchFieldCentered: true,
+        searchProvider: {}
+      };
+      newConfig.settings = {
+        experimental: {
+          globalSearchCentered: true
+        }
+      };
+
+      cy.visitWithFiddleConfig('/home', newConfig);
+    });
+    context('Desktop', () => {
+      it('Search on large viewport', () => {
+        cy.get('.lui-global-search-btn').should('not.be.visible');
+        cy.get('.lui-global-search-cancel-btn').should('not.be.visible');
+        cy.get('.lui-global-search-input').should('be.visible');
+      });
+    });
+    context('Mobile', () => {
+      it('Search on smaller viewport', () => {
+        cy.viewport('iphone-6');
+        cy.get('.lui-global-search-btn').should('be.visible');
+        cy.get('.lui-global-search-cancel-btn').should('not.be.visible');
+        cy.get('.lui-global-search-input').should('not.be.visible');
+
+        cy.get('.lui-global-search-btn').click();
+
+        cy.get('.lui-global-search-btn').should('not.be.visible');
+        cy.get('.lui-global-search-cancel-btn').should('be.visible');
+        cy.get('.lui-global-search-input').should('be.visible');
+
+        cy.get('.lui-global-search-cancel-btn').click();
+
+        cy.get('.lui-global-search-btn').should('be.visible');
+        cy.get('.lui-global-search-cancel-btn').should('not.be.visible');
+        cy.get('.lui-global-search-input').should('not.be.visible');
+      });
+    });
+  });
+
   describe('BreadCrumb and NavHeader', () => {
     let newConfig;
     var breadcrumbsConfig = {
diff --git a/test/e2e-test-application/src/luigi-config/extended/globalSearch.js b/test/e2e-test-application/src/luigi-config/extended/globalSearch.js
index f78b3e9c55..c3296c3e39 100644
--- a/test/e2e-test-application/src/luigi-config/extended/globalSearch.js
+++ b/test/e2e-test-application/src/luigi-config/extended/globalSearch.js
@@ -2,7 +2,7 @@ class GlobalSearch {
   constructor() {
     this.searchResult = [];
   }
-
+  // searchFieldCentered = true;
   searchProvider = {
     // onInput: () => {},
     // onEnter: () => {},
@@ -114,6 +114,9 @@ class GlobalSearch {
         }
       }
     },
+    onSearchBtnClick: () => {
+      console.log('retrieve globalSearch search btn clicked');
+    },
     onEnter: () => {},
     onEscape: () => {
       Luigi.globalSearch().closeSearchResult();