@ukic/canary-web-components 2.0.0-canary.3 → 2.0.0-canary.5

package/dist/components/ic-top-navigation.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { I as IcThemeForegroundEnum } from './types.js';
-import { K as getSlot, D as DEVICE_SIZES, d as getCurrentDeviceSize, z as getThemeForegroundColor, b as onComponentPropUndefinedChange, i as isSlotUsed, c as checkResizeObserver, o as onComponentRequiredPropUndefined, y as isEmptyString } from './helpers.js';
+import { O as getSlot, D as DEVICE_SIZES, l as getCurrentDeviceSize, G as getThemeForegroundColor, d as onComponentPropUndefinedChange, i as isSlotUsed, c as checkResizeObserver, o as onComponentRequiredPropUndefined, F as isEmptyString, b as isPropDefined } from './helpers.js';
 import { d as defineCustomElement$8 } from './ic-button2.js';
 import { d as defineCustomElement$7 } from './ic-horizontal-scroll2.js';
 import { d as defineCustomElement$6 } from './ic-loading-indicator2.js';
@@ -9,279 +9,283 @@ import { d as defineCustomElement$4 } from './ic-section-container2.js';
 import { d as defineCustomElement$3 } from './ic-tooltip2.js';
 import { d as defineCustomElement$2 } from './ic-typography2.js';
 
-const icTopNavigationCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;color:var(--ic-theme-text);width:100%;position:relative}:host .top-navigation{background-color:var(--ic-theme-primary);height:-moz-max-content;height:max-content}:host(.fullwidth-searchbar) slot[name=\"search\"]::slotted(form){width:100%}:host .title-link{display:inline-flex;align-items:center;text-decoration:none;padding:var(--ic-space-xxs);transition:var(--ic-easing-transition-fast)}:host .title-link,:host .title-link:visited,:host .title-link:active,:host .title-link ::slotted(a),:host .title-link:visited ::slotted(a),:host .title-link:active ::slotted(a){color:var(--ic-theme-text);text-decoration:none;outline:none}:host .title-link:hover:not(:focus){background-color:var(--ic-theme-hover)}:host .title-link:active:not(:focus){background-color:var(--ic-theme-active)}:host .title-link:hover{border-radius:var(--ic-border-radius)}:host .title-link:focus,:host .title-link:focus-within{border-radius:var(--ic-border-radius);box-shadow:var(--ic-border-focus);outline:var(--ic-hc-focus-outline)}:host .title-link ic-typography{font-weight:600}:host .nav-panel-container{border-top:var(--ic-keyline-lighten);padding:0 var(--ic-space-lg);margin-left:calc(-1 * var(--section-container-margin));margin-right:calc(-1 * var(--section-container-margin));display:flex}:host(.dark) .nav-panel-container{border-top:var(--ic-keyline-darken)}.top-panel-container{display:flex;padding-top:0.5rem;padding-bottom:0.5rem}.navigation-tabs{margin-top:calc(-1 * var(--ic-space-1px))}.app-details-container{display:flex;align-items:center;flex:1 1 auto;margin-right:var(--ic-space-md)}.app-icon-container{display:flex;padding-right:var(--ic-space-xs)}.icon-buttons-container{display:flex;margin-left:var(--ic-space-md)}.icon-buttons-container ::slotted(nav){display:flex}.title-wrap{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}:host .app-status{border-radius:var(--ic-space-md);background-color:var(--ic-architectural-white);color:var(--ic-color-primary-text);padding:var(--ic-space-xxs) var(--ic-space-lg);margin-left:var(--ic-space-md);flex:1 1 0;max-width:-moz-fit-content;max-width:fit-content}:host(.dark) .app-status{background-color:var(--ic-theme-text);color:var(--ic-color-white-text)}:host .app-version{border-radius:var(--ic-space-md);background-color:var(--ic-theme-active);padding:var(--ic-space-xxs) var(--ic-space-sm);margin-left:var(--ic-space-xs);flex:1 1 0;max-width:-moz-fit-content;max-width:fit-content}slot[name=\"app-icon\"]::slotted(svg){fill:var(--ic-theme-text);width:2em;height:2em}slot[name=\"toggle-icon\"] svg{fill:var(--ic-theme-text)}.search-menu-container{justify-content:right;display:flex;align-items:center}.menu-button-container{margin-left:var(--ic-space-md)}.menu-button-container .navigation-landmark-button-text{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}.search-actions-container{display:flex}.menu-buttons-slot{display:flex;flex-direction:column}.navigation-landmark-text{position:absolute;width:var(--ic-space-1px);height:var(--ic-space-1px);padding:0;margin:calc(-1 * var(--ic-space-1px));overflow:hidden}.navigation-item-list{display:flex;list-style:none;height:2.75rem}.navigation-item-list::-webkit-scrollbar{display:none}:host ic-section-container{padding-bottom:0 !important;padding-top:0 !important}@media screen and (min-width: 993px){.app-details-container{margin-right:var(--ic-space-lg)}}@media screen and (max-width: 1200px){:host .nav-panel-container{padding:0 var(--ic-space-md)}}@media screen and (max-width: 992px){:host .nav-panel-container,:host .app-status,:host .app-version{display:none}:host .title-link{margin-right:var(--ic-space-xs)}.search-menu-container{max-width:10rem}.search-bar-container{display:flex;justify-content:center;align-items:center;border-top:var(--ic-keyline-darken);height:4rem;padding-left:var(--ic-space-md);padding-right:var(--ic-space-md);margin-left:calc(-1 * var(--section-container-margin));margin-right:calc(-1 * var(--section-container-margin))}}@media screen and (max-width: 576px){:host .title-link{margin-right:var(--ic-space-xxxs);word-break:break-word;-webkit-hyphens:none;hyphens:none}.top-panel-container{min-height:2.5rem}.searchbox-inline{display:none}.search-bar-container{margin-top:0;height:3.5rem;padding-left:var(--ic-space-xs);padding-right:var(--ic-space-xs)}.menu-button-container{margin-left:var(--ic-space-sm)}slot[name=\"app-icon\"]::slotted(svg){width:1.5em;height:1.5em}slot[name=\"toggle-icon\"] svg{width:1.5em;height:1.5em}}@media (forced-colors: active){:host .top-navigation{border-bottom:var(--ic-hc-border)}.app-status,.app-version{border:var(--ic-hc-border)}slot[name=\"app-icon\"]::slotted(svg){fill:currentcolor}}";
+const icTopNavigationCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;color:var(--ic-theme-text);width:100%;position:relative}:host .top-navigation{background-color:var(--ic-theme-primary);height:-moz-max-content;height:max-content}:host(.fullwidth-searchbar) slot[name=\"search\"]::slotted(form){width:100%}:host .title-link{display:inline-flex;align-items:center;text-decoration:none;padding:var(--ic-space-xxs);transition:var(--ic-easing-transition-fast)}:host .title-link,:host .title-link:visited,:host .title-link:active,:host .title-link ::slotted(a),:host .title-link:visited ::slotted(a),:host .title-link:active ::slotted(a){color:var(--ic-theme-text);text-decoration:none;outline:none}:host .title-link:hover:not(:focus){background-color:var(--ic-theme-hover)}:host .title-link:active:not(:focus){background-color:var(--ic-theme-active)}:host .title-link:hover{border-radius:var(--ic-border-radius)}:host .title-link:focus,:host .title-link:focus-within{border-radius:var(--ic-border-radius);box-shadow:var(--ic-border-focus);outline:var(--ic-hc-focus-outline)}:host .title-link ic-typography{font-weight:600}:host .nav-panel-container{border-top:var(--ic-keyline-lighten);padding:0 var(--ic-space-lg);margin-left:calc(-1 * var(--section-container-margin));margin-right:calc(-1 * var(--section-container-margin));display:flex}:host(.dark) .nav-panel-container{border-top:var(--ic-keyline-darken)}.top-panel-container{display:flex;padding-top:0.5rem;padding-bottom:0.5rem}.navigation-tabs{margin-top:calc(-1 * var(--ic-space-1px))}.app-details-container{display:flex;align-items:center;flex:1 1 auto;margin-right:var(--ic-space-md)}.app-icon-container{display:flex;padding-right:var(--ic-space-xs)}.icon-buttons-container{display:flex;margin-left:var(--ic-space-md)}.icon-buttons-container ::slotted(nav){display:flex}.title-wrap{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}:host .app-status{border-radius:var(--ic-space-md);background-color:var(--ic-architectural-white);color:var(--ic-color-primary-text);padding:var(--ic-space-xxs) var(--ic-space-lg);margin-left:var(--ic-space-md);flex:1 1 0;max-width:-moz-fit-content;max-width:fit-content}:host(.dark) .app-status{background-color:var(--ic-theme-text);color:var(--ic-color-white-text)}:host .app-version{border-radius:var(--ic-space-md);background-color:var(--ic-theme-active);padding:var(--ic-space-xxs) var(--ic-space-sm);margin-left:var(--ic-space-xs);flex:1 1 0;max-width:-moz-fit-content;max-width:fit-content}slot[name=\"app-icon\"]::slotted(*){fill:var(--ic-theme-text);width:2em;height:2em}slot[name=\"toggle-icon\"] svg{fill:var(--ic-theme-text)}.search-menu-container{justify-content:right;display:flex;align-items:center}.menu-button-container{margin-left:var(--ic-space-md)}.menu-button-container .navigation-landmark-button-text{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}.search-actions-container{display:flex}.menu-buttons-slot{display:flex;flex-direction:column}.navigation-landmark-text{position:absolute;width:var(--ic-space-1px);height:var(--ic-space-1px);padding:0;margin:calc(-1 * var(--ic-space-1px));overflow:hidden}.navigation-item-list{display:flex;list-style:none;height:2.75rem}.navigation-item-list::-webkit-scrollbar{display:none}:host ic-section-container{padding-bottom:0 !important;padding-top:0 !important}@media screen and (min-width: 993px){.app-details-container{margin-right:var(--ic-space-lg)}}@media screen and (max-width: 1200px){:host .nav-panel-container{padding:0 var(--ic-space-md)}}@media screen and (max-width: 992px){:host .nav-panel-container,:host .app-status,:host .app-version{display:none}:host .title-link{margin-right:var(--ic-space-xs)}.search-menu-container{max-width:10rem}.search-bar-container{display:flex;justify-content:center;align-items:center;border-top:var(--ic-keyline-darken);height:4rem;padding-left:var(--ic-space-md);padding-right:var(--ic-space-md);margin-left:calc(-1 * var(--section-container-margin));margin-right:calc(-1 * var(--section-container-margin))}}@media screen and (max-width: 576px){:host .title-link{margin-right:var(--ic-space-xxxs);word-break:break-word;-webkit-hyphens:none;hyphens:none}.top-panel-container{min-height:2.5rem}.search-bar-container{margin-top:0;height:3.5rem;padding-left:var(--ic-space-xs);padding-right:var(--ic-space-xs)}.menu-button-container{margin-left:var(--ic-space-sm)}slot[name=\"app-icon\"]::slotted(*){width:1.5em;height:1.5em}slot[name=\"toggle-icon\"] svg{width:1.5em;height:1.5em}}@media (forced-colors: active){:host .top-navigation{border-bottom:var(--ic-hc-border)}.app-status,.app-version{border:var(--ic-hc-border)}slot[name=\"app-icon\"]::slotted(*){fill:currentcolor}}";
 
 const TopNavigation = /*@__PURE__*/ proxyCustomElement(class TopNavigation extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.icNavigationMenuClosed = createEvent(this, "icNavigationMenuClosed", 7);
-    this.icNavigationMenuOpened = createEvent(this, "icNavigationMenuOpened", 7);
-    this.hasAppIcon = false;
-    this.hasIconButtons = false;
-    this.hasNavigation = false;
-    this.hasSearchSlotContent = false;
-    this.resizeObserver = null;
-    this.searchBar = null;
-    this.initialiseSearchBar = () => {
-      if (this.hasSearchSlotContent) {
-        const slot = getSlot(this.el, "search");
-        if (slot && slot.tagName === "IC-SEARCH-BAR") {
-          this.searchBar = slot;
-        }
-        else if (slot && slot.tagName === "FORM") {
-          this.searchBar = slot.querySelector("ic-search-bar");
-        }
-        if (this.searchBar !== null) {
-          this.searchBar.hideLabel = true;
-        }
-      }
-    };
-    this.emitTopNavResized = (size) => {
-      const event = new CustomEvent("topNavResized", { detail: { size: size } });
-      this.el.dispatchEvent(event);
-    };
-    this.menuButtonClick = () => {
-      this.showNavMenu(true);
-    };
-    this.searchButtonMouseDownHandler = () => {
-      this.searchButtonClick = true;
-    };
-    this.searchButtonClickHandler = () => {
-      this.toggleSearchBar();
-      this.searchButtonClick = false;
-    };
-    this.resizeObserverCallback = (currSize) => {
-      if (currSize !== this.deviceSize) {
-        this.deviceSize = currSize;
-        if (currSize > DEVICE_SIZES.L) {
-          this.showNavMenu(false);
-          if (this.mobileSearchBarVisible) {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.icNavigationMenuClosed = createEvent(this, "icNavigationMenuClosed", 7);
+        this.icNavigationMenuOpened = createEvent(this, "icNavigationMenuOpened", 7);
+        this.topNavResized = createEvent(this, "topNavResized", 7);
+        this.hasAppIcon = false;
+        this.hasIconButtons = false;
+        this.hasNavigation = false;
+        this.hasSearchSlotContent = false;
+        this.resizeObserver = null;
+        this.searchBar = null;
+        this.initialiseSearchBar = () => {
+            if (this.hasSearchSlotContent) {
+                const slot = getSlot(this.el, "search");
+                if (slot && slot.tagName === "IC-SEARCH-BAR") {
+                    this.searchBar = slot;
+                }
+                else if (slot && slot.tagName === "FORM") {
+                    this.searchBar = slot.querySelector("ic-search-bar");
+                }
+                if (this.searchBar !== null) {
+                    this.searchBar.hideLabel = true;
+                }
+            }
+        };
+        this.menuButtonClick = () => {
+            this.showNavMenu(true);
+        };
+        this.searchButtonMouseDownHandler = () => {
+            this.searchButtonClick = true;
+        };
+        this.searchButtonClickHandler = () => {
             this.toggleSearchBar();
-          }
+            this.searchButtonClick = false;
+        };
+        this.resizeObserverCallback = (currSize) => {
+            if (currSize !== this.deviceSize) {
+                this.deviceSize = currSize;
+                if (currSize > DEVICE_SIZES.L) {
+                    this.showNavMenu(false);
+                    if (this.mobileSearchBarVisible) {
+                        this.toggleSearchBar();
+                    }
+                }
+                this.topNavResized.emit({
+                    size: currSize,
+                });
+                if (document.activeElement !== null &&
+                    document.activeElement !== undefined &&
+                    document.activeElement.tagName === "IC-SEARCH-BAR") {
+                    this.searchBar.setAttribute("hidden", "true");
+                    //remove attribute again as this trigger a redraw & applies css
+                    this.searchBar.removeAttribute("hidden");
+                    setTimeout(() => {
+                        this.searchBar.focus();
+                    }, 100);
+                }
+            }
+        };
+        this.runResizeObserver = () => {
+            this.resizeObserver = new ResizeObserver(() => {
+                const currSize = getCurrentDeviceSize();
+                this.resizeObserverCallback(currSize);
+            });
+            this.resizeObserver.observe(this.el);
+        };
+        this.deviceSize = DEVICE_SIZES.XL;
+        this.foregroundColor = getThemeForegroundColor();
+        this.hasFullWidthSearchBar = false;
+        this.menuOpen = false;
+        this.mobileSearchBarVisible = false;
+        this.mobileSearchHiddenOnBlur = false;
+        this.navMenuVisible = false;
+        this.searchButtonClick = false;
+        this.searchValue = "";
+        this.contentAligned = "full-width";
+        this.href = "/";
+        this.inline = false;
+        this.shortAppTitle = "";
+        this.status = "";
+        this.version = "";
+        this.appTitle = undefined;
+    }
+    watchPropHandler(newValue, oldValue) {
+        //added for gatsby rehydration issue where prop is initially undefined but then changes to actual value
+        //this watch can be removed once gatbsy hydration issue is resolved
+        onComponentPropUndefinedChange(oldValue, newValue, this.initialiseSearchBar);
+    }
+    disconnectedCallback() {
+        if (this.resizeObserver !== null) {
+            this.resizeObserver.disconnect();
         }
-        this.emitTopNavResized(currSize);
-        if (document.activeElement !== null &&
-          document.activeElement !== undefined &&
-          document.activeElement.tagName === "IC-SEARCH-BAR") {
-          this.searchBar.setAttribute("hidden", "true");
-          //remove attribute again as this trigger a redraw & applies css
-          this.searchBar.removeAttribute("hidden");
-          setTimeout(() => {
-            this.searchBar.focus();
-          }, 100);
+    }
+    componentWillLoad() {
+        this.hasAppIcon = isSlotUsed(this.el, "app-icon");
+        this.hasNavigation = isSlotUsed(this.el, "navigation");
+        this.hasIconButtons = isSlotUsed(this.el, "buttons");
+        this.hasSearchSlotContent = isSlotUsed(this.el, "search");
+        this.deviceSize = getCurrentDeviceSize();
+        this.initialiseSearchBar();
+    }
+    componentDidLoad() {
+        checkResizeObserver(this.runResizeObserver);
+        !isSlotUsed(this.el, "app-title") &&
+            onComponentRequiredPropUndefined([{ prop: this.appTitle, propName: "app-title" }], "Top Navigation");
+    }
+    componentWillRender() {
+        this.hasNavigation = isSlotUsed(this.el, "navigation");
+        this.hasSearchSlotContent = isSlotUsed(this.el, "search");
+        this.hasIconButtons = isSlotUsed(this.el, "buttons");
+        this.hasAppIcon = isSlotUsed(this.el, "app-icon");
+    }
+    navBarMenuCloseHandler() {
+        this.showNavMenu(false);
+        const menuBtn = this.el.shadowRoot.querySelector("#menu-button");
+        menuBtn.focus();
+    }
+    searchInputBlurHandler(ev) {
+        if (ev.detail !== null) {
+            if (this.mobileSearchBarVisible && !this.searchButtonClick) {
+                //don't hide if blur was triggered by click on search button - let the click handler toggle the state
+                this.toggleSearchBar();
+            }
+            this.searchValue = ev.detail.value;
         }
-      }
-    };
-    this.runResizeObserver = () => {
-      this.resizeObserver = new ResizeObserver(() => {
-        const currSize = getCurrentDeviceSize();
-        this.resizeObserverCallback(currSize);
-      });
-      this.resizeObserver.observe(this.el);
-    };
-    this.deviceSize = DEVICE_SIZES.XL;
-    this.foregroundColor = getThemeForegroundColor();
-    this.hasFullWidthSearchBar = false;
-    this.menuOpen = false;
-    this.mobileSearchBarVisible = false;
-    this.mobileSearchHiddenOnBlur = false;
-    this.navMenuVisible = false;
-    this.searchButtonClick = false;
-    this.searchValue = "";
-    this.contentAligned = "full-width";
-    this.href = "/";
-    this.inline = false;
-    this.shortAppTitle = "";
-    this.status = "";
-    this.version = "";
-    this.appTitle = undefined;
-  }
-  watchPropHandler(newValue, oldValue) {
-    //added for gatsby rehydration issue where prop is initially undefined but then changes to actual value
-    //this watch can be removed once gatbsy hydration issue is resolved
-    onComponentPropUndefinedChange(oldValue, newValue, this.initialiseSearchBar);
-  }
-  disconnectedCallback() {
-    if (this.resizeObserver !== null) {
-      this.resizeObserver.disconnect();
     }
-  }
-  componentWillLoad() {
-    this.hasAppIcon = isSlotUsed(this.el, "app-icon");
-    this.hasNavigation = isSlotUsed(this.el, "navigation");
-    this.hasIconButtons = isSlotUsed(this.el, "buttons");
-    this.hasSearchSlotContent = isSlotUsed(this.el, "search");
-    this.deviceSize = getCurrentDeviceSize();
-    this.initialiseSearchBar();
-  }
-  componentDidLoad() {
-    checkResizeObserver(this.runResizeObserver);
-    !isSlotUsed(this.el, "app-title") &&
-      onComponentRequiredPropUndefined([{ prop: this.appTitle, propName: "app-title" }], "Top Navigation");
-  }
-  componentWillRender() {
-    this.hasNavigation = isSlotUsed(this.el, "navigation");
-    this.hasSearchSlotContent = isSlotUsed(this.el, "search");
-    this.hasIconButtons = isSlotUsed(this.el, "buttons");
-    this.hasAppIcon = isSlotUsed(this.el, "app-icon");
-  }
-  navBarMenuCloseHandler() {
-    this.showNavMenu(false);
-    const menuBtn = this.el.shadowRoot.querySelector("#menu-button");
-    menuBtn.focus();
-  }
-  searchInputBlurHandler(ev) {
-    if (ev.detail !== null) {
-      if (this.mobileSearchBarVisible && !this.searchButtonClick) {
-        //don't hide if blur was triggered by click on search button - let the click handler toggle the state
-        this.toggleSearchBar();
-      }
-      this.searchValue = ev.detail.value;
+    searchValueChangeHandler(ev) {
+        this.searchValue = ev.detail.value;
     }
-  }
-  searchValueChangeHandler(ev) {
-    this.searchValue = ev.detail.value;
-  }
-  themeChangeHandler(ev) {
-    const theme = ev.detail;
-    this.foregroundColor = theme.mode;
-  }
-  toggleSearchBar() {
-    this.mobileSearchBarVisible = !this.mobileSearchBarVisible;
-    if (this.searchBar !== null) {
-      if (this.mobileSearchBarVisible) {
-        this.mobileSearchButtonEl.updateAriaLabel("Hide search");
-        this.hasFullWidthSearchBar = true;
-        this.searchBar.fullWidth = true;
-        setTimeout(() => {
-          this.searchBar.focus();
-        }, 100);
-      }
-      else {
-        this.mobileSearchButtonEl.updateAriaLabel("Show search");
-        this.hasFullWidthSearchBar = false;
-        this.searchBar.fullWidth = false;
-      }
+    themeChangeHandler(ev) {
+        const theme = ev.detail;
+        this.foregroundColor = theme.mode;
     }
-  }
-  showNavMenu(show) {
-    this.navMenuVisible = show;
-    if (show) {
-      this.icNavigationMenuOpened.emit();
-      document.body.style.height = "100%";
-      document.body.style.overflow = "hidden";
+    toggleSearchBar() {
+        this.mobileSearchBarVisible = !this.mobileSearchBarVisible;
+        if (this.searchBar !== null) {
+            if (this.mobileSearchBarVisible) {
+                this.mobileSearchButtonEl.setAttribute("aria-label", "Hide search");
+                this.hasFullWidthSearchBar = true;
+                this.searchBar.fullWidth = true;
+                setTimeout(() => {
+                    this.searchBar.focus();
+                }, 100);
+            }
+            else {
+                this.mobileSearchButtonEl.setAttribute("aria-label", "Show search");
+                this.hasFullWidthSearchBar = false;
+                this.searchBar.fullWidth = false;
+            }
+        }
     }
-    else {
-      this.icNavigationMenuClosed.emit();
-      document.body.style.height = "auto";
-      document.body.style.overflow = "auto";
+    showNavMenu(show) {
+        this.navMenuVisible = show;
+        if (show) {
+            this.icNavigationMenuOpened.emit();
+            document.body.style.height = "100%";
+            document.body.style.overflow = "hidden";
+        }
+        else {
+            this.icNavigationMenuClosed.emit();
+            document.body.style.height = "auto";
+            document.body.style.overflow = "auto";
+        }
     }
-  }
-  render() {
-    const hasMenuContent = this.hasNavigation ||
-      this.hasIconButtons ||
-      this.status !== "" ||
-      this.version !== "";
-    const searchButtonSize = this.deviceSize <= DEVICE_SIZES.S ? "default" : "large";
-    let appTitleVariant = "h3";
-    const hasTitle = this.appTitle !== "" && this.appTitle !== undefined;
-    if (this.deviceSize <= DEVICE_SIZES.L) {
-      appTitleVariant = "h4";
-      if (this.deviceSize <= DEVICE_SIZES.S) {
-        appTitleVariant = "subtitle-small";
-      }
+    render() {
+        const hasMenuContent = this.hasNavigation ||
+            this.hasIconButtons ||
+            this.status !== "" ||
+            this.version !== "";
+        const searchButtonSize = this.deviceSize <= DEVICE_SIZES.S ? "default" : "large";
+        let appTitleVariant = "h3";
+        const hasTitle = this.appTitle !== "" && isPropDefined(this.appTitle);
+        if (this.deviceSize <= DEVICE_SIZES.L) {
+            appTitleVariant = "h4";
+            if (this.deviceSize <= DEVICE_SIZES.S) {
+                appTitleVariant = "subtitle-small";
+            }
+        }
+        const mobileSearchButtonTitle = this.mobileSearchBarVisible
+            ? "Hide search"
+            : "Show search";
+        const menuSize = this.deviceSize <= DEVICE_SIZES.S ? "small" : "default";
+        const Component = isSlotUsed(this.el, "app-title") ? "div" : "a";
+        const attrs = Component == "a" && {
+            href: this.href,
+        };
+        const shortAppTitleSlot = isSlotUsed(this.el, "short-app-title");
+        return (h(Host, { class: {
+                ["fullwidth-searchbar"]: this.hasFullWidthSearchBar,
+                [IcThemeForegroundEnum.Dark]: this.foregroundColor === IcThemeForegroundEnum.Dark,
+            } }, h("div", { class: "top-navigation" }, h("ic-section-container", { aligned: this.contentAligned, "full-height": true }, h("header", { role: "banner" }, h("div", { class: "top-panel-container" }, h("div", { class: "app-details-container" }, (hasTitle || isSlotUsed(this.el, "app-title")) && (h(Component, Object.assign({ class: "title-link" }, attrs), this.hasAppIcon && (h("div", { class: "app-icon-container" }, h("slot", { name: "app-icon" }))), this.deviceSize <= DEVICE_SIZES.S &&
+            (!isEmptyString(this.shortAppTitle) ||
+                shortAppTitleSlot) ? (h("ic-typography", { variant: "subtitle-small", "aria-label": (!isSlotUsed(this.el, "app-title") ||
+                !shortAppTitleSlot) &&
+                `${this.appTitle} (${this.shortAppTitle})` }, h("h1", null, shortAppTitleSlot ? (h("slot", { name: "short-app-title" })) : (this.shortAppTitle)))) : (h("ic-typography", { variant: appTitleVariant }, h("h1", { class: "title-wrap" }, isSlotUsed(this.el, "app-title") ? (h("slot", { name: "app-title" })) : (this.appTitle)))))), this.status !== "" && (h("div", { class: "app-status" }, h("ic-typography", { "aria-label": "app tag", variant: "label-uppercase", class: "app-status-text" }, this.status))), this.version !== "" && (h("div", { class: "app-version" }, h("ic-typography", { variant: "label", class: "app-version-text", "aria-label": "app version" }, this.version)))), (this.hasSearchSlotContent || hasMenuContent) && (h("div", { class: "search-menu-container" }, h("div", { class: "search-actions-container" }, this.deviceSize > DEVICE_SIZES.L && (h("slot", { name: "search" })), this.hasSearchSlotContent &&
+            this.deviceSize <= DEVICE_SIZES.L && (h("ic-button", { id: "search-toggle-button", ref: (el) => (this.mobileSearchButtonEl = el), onMouseDown: this.searchButtonMouseDownHandler, variant: "icon", size: searchButtonSize, "aria-label": mobileSearchButtonTitle, appearance: this.foregroundColor, onClick: this.searchButtonClickHandler }, h("slot", { name: "toggle-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#ffffff" }, h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" }))))), this.hasIconButtons &&
+            this.deviceSize > DEVICE_SIZES.L && (h("div", { class: "icon-buttons-container" }, h("slot", { name: "buttons" }))), hasMenuContent && this.deviceSize <= DEVICE_SIZES.L && (h("div", { class: "menu-button-container" }, h("span", { id: "navigation-landmark-button-text", class: "navigation-landmark-button-text", "aria-hidden": "true" }, "Main navigation button"), h("nav", { "aria-labelledby": "navigation-landmark-button-text", "aria-hidden": this.navMenuVisible ? "true" : "false" }, h("ic-button", { id: "menu-button", appearance: this.foregroundColor, variant: "secondary", "aria-expanded": this.menuOpen ? "true" : "false", "aria-haspopup": "true", "aria-label": `Open ${this.hasNavigation ? "navigation" : "app"} menu`, size: menuSize, onClick: this.menuButtonClick }, "Menu", h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#ffffff", slot: "icon" }, h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" })))))))))), this.mobileSearchBarVisible && (h("div", { class: "search-bar-container" }, h("slot", { name: "search" }))), this.hasNavigation && this.deviceSize > DEVICE_SIZES.L && (h("div", { class: "navigation-tabs" }, h("span", { id: "navigation-landmark-text", class: "navigation-landmark-text", "aria-hidden": "true" }, "Main pages"), h("nav", { "aria-labelledby": "navigation-landmark-text", class: "nav-panel-container" }, h("ic-horizontal-scroll", { appearance: this.foregroundColor }, h("ul", { class: "navigation-item-list", tabindex: "-1" }, h("slot", { name: "navigation" }))))))))), this.navMenuVisible && (h("ic-navigation-menu", { version: this.version, status: this.status, class: {
+                ["inline"]: this.inline,
+            } }, this.hasIconButtons && (h("div", { class: "menu-buttons-slot", slot: "buttons" }, h("slot", { name: "buttons" }))), h("ul", { slot: "navigation" }, h("slot", { name: "navigation" }))))));
     }
-    const mobileSearchButtonTitle = this.mobileSearchBarVisible
-      ? "Hide search"
-      : "Show search";
-    const menuSize = this.deviceSize <= DEVICE_SIZES.S ? "small" : "default";
-    const Component = isSlotUsed(this.el, "app-title") ? "div" : "a";
-    const attrs = Component == "a" && {
-      href: this.href,
-    };
-    return (h(Host, { class: {
-        ["fullwidth-searchbar"]: this.hasFullWidthSearchBar,
-        [IcThemeForegroundEnum.Dark]: this.foregroundColor === IcThemeForegroundEnum.Dark,
-      } }, h("div", { class: "top-navigation" }, h("ic-section-container", { aligned: this.contentAligned, "full-height": true }, h("header", { role: "banner" }, h("div", { class: "top-panel-container" }, h("div", { class: "app-details-container" }, (hasTitle || isSlotUsed(this.el, "app-title")) && (h(Component, Object.assign({ class: "title-link" }, attrs), this.hasAppIcon && (h("div", { class: "app-icon-container", "aria-hidden": "true" }, h("slot", { name: "app-icon" }))), this.deviceSize <= DEVICE_SIZES.S &&
-      !isEmptyString(this.shortAppTitle) ? (h("ic-typography", { variant: "subtitle-small", "aria-label": `${this.appTitle} (${this.shortAppTitle})` }, h("h1", null, this.shortAppTitle))) : (h("ic-typography", { variant: appTitleVariant }, h("h1", { class: "title-wrap" }, isSlotUsed(this.el, "app-title") ? (h("slot", { name: "app-title" })) : (this.appTitle)))))), this.status !== "" && (h("div", { class: "app-status" }, h("ic-typography", { "aria-label": "app tag", variant: "label-uppercase", class: "app-status-text" }, this.status))), this.version !== "" && (h("div", { class: "app-version" }, h("ic-typography", { variant: "label", class: "app-version-text", "aria-label": "app version" }, this.version)))), (this.hasSearchSlotContent || hasMenuContent) && (h("div", { class: "search-menu-container" }, h("div", { class: "search-actions-container" }, this.deviceSize > DEVICE_SIZES.L && (h("slot", { name: "search" })), this.hasSearchSlotContent &&
-      this.deviceSize <= DEVICE_SIZES.L && (h("ic-button", { id: "search-toggle-button", ref: (el) => (this.mobileSearchButtonEl = el), onMouseDown: this.searchButtonMouseDownHandler, variant: "icon", size: searchButtonSize, "aria-label": mobileSearchButtonTitle, appearance: this.foregroundColor, onClick: this.searchButtonClickHandler }, h("slot", { name: "toggle-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#ffffff" }, h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" }))))), this.hasIconButtons && this.deviceSize > DEVICE_SIZES.L && (h("div", { class: "icon-buttons-container" }, h("slot", { name: "buttons" }))), hasMenuContent && this.deviceSize <= DEVICE_SIZES.L && (h("div", { class: "menu-button-container" }, h("span", { id: "navigation-landmark-button-text", class: "navigation-landmark-button-text", "aria-hidden": "true" }, "Main navigation button"), h("nav", { "aria-labelledby": "navigation-landmark-button-text", "aria-hidden": this.navMenuVisible ? "true" : "false" }, h("ic-button", { id: "menu-button", appearance: this.foregroundColor, variant: "secondary", "aria-expanded": this.menuOpen ? "true" : "false", "aria-haspopup": "true", "aria-label": `Open ${this.hasNavigation ? "navigation" : "app"} menu`, size: menuSize, onClick: this.menuButtonClick }, "Menu", h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#ffffff", slot: "icon" }, h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" })))))))))), this.mobileSearchBarVisible && (h("div", { class: "search-bar-container" }, h("slot", { name: "search" }))), this.hasNavigation && this.deviceSize > DEVICE_SIZES.L && (h("div", { class: "navigation-tabs" }, h("span", { id: "navigation-landmark-text", class: "navigation-landmark-text", "aria-hidden": "true" }, "Main navigation"), h("nav", { "aria-labelledby": "navigation-landmark-text", class: "nav-panel-container" }, h("ic-horizontal-scroll", { appearance: this.foregroundColor }, h("ul", { class: "navigation-item-list", tabindex: "-1" }, h("slot", { name: "navigation" }))))))))), this.navMenuVisible && (h("ic-navigation-menu", { version: this.version, status: this.status, class: {
-        ["inline"]: this.inline,
-      } }, h("div", { class: "menu-buttons-slot", slot: "buttons" }, h("slot", { name: "buttons" })), h("ul", { slot: "navigation" }, h("slot", { name: "navigation" }))))));
-  }
-  get el() { return this; }
-  static get watchers() { return {
-    "appTitle": ["watchPropHandler"]
-  }; }
-  static get style() { return icTopNavigationCss; }
+    get el() { return this; }
+    static get watchers() { return {
+        "appTitle": ["watchPropHandler"]
+    }; }
+    static get style() { return icTopNavigationCss; }
 }, [1, "ic-top-navigation", {
-    "contentAligned": [1, "content-aligned"],
-    "href": [1],
-    "inline": [4],
-    "shortAppTitle": [1, "short-app-title"],
-    "status": [1],
-    "version": [1],
-    "appTitle": [1, "app-title"],
-    "deviceSize": [32],
-    "foregroundColor": [32],
-    "hasFullWidthSearchBar": [32],
-    "menuOpen": [32],
-    "mobileSearchBarVisible": [32],
-    "mobileSearchHiddenOnBlur": [32],
-    "navMenuVisible": [32],
-    "searchButtonClick": [32],
-    "searchValue": [32]
-  }, [[0, "icNavigationMenuClose", "navBarMenuCloseHandler"], [0, "icSearchBarBlur", "searchInputBlurHandler"], [0, "icChange", "searchValueChangeHandler"], [4, "themeChange", "themeChangeHandler"]], {
-    "appTitle": ["watchPropHandler"]
-  }]);
+        "contentAligned": [1, "content-aligned"],
+        "href": [1],
+        "inline": [4],
+        "shortAppTitle": [1, "short-app-title"],
+        "status": [1],
+        "version": [1],
+        "appTitle": [1, "app-title"],
+        "deviceSize": [32],
+        "foregroundColor": [32],
+        "hasFullWidthSearchBar": [32],
+        "menuOpen": [32],
+        "mobileSearchBarVisible": [32],
+        "mobileSearchHiddenOnBlur": [32],
+        "navMenuVisible": [32],
+        "searchButtonClick": [32],
+        "searchValue": [32]
+    }, [[0, "icNavigationMenuClose", "navBarMenuCloseHandler"], [0, "icSearchBarBlur", "searchInputBlurHandler"], [0, "icChange", "searchValueChangeHandler"], [4, "themeChange", "themeChangeHandler"]], {
+        "appTitle": ["watchPropHandler"]
+    }]);
 function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["ic-top-navigation", "ic-button", "ic-horizontal-scroll", "ic-loading-indicator", "ic-navigation-menu", "ic-section-container", "ic-tooltip", "ic-typography"];
-  components.forEach(tagName => { switch (tagName) {
-    case "ic-top-navigation":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, TopNavigation);
-      }
-      break;
-    case "ic-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$8();
-      }
-      break;
-    case "ic-horizontal-scroll":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$7();
-      }
-      break;
-    case "ic-loading-indicator":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$6();
-      }
-      break;
-    case "ic-navigation-menu":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "ic-section-container":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "ic-tooltip":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "ic-typography":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ic-top-navigation", "ic-button", "ic-horizontal-scroll", "ic-loading-indicator", "ic-navigation-menu", "ic-section-container", "ic-tooltip", "ic-typography"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ic-top-navigation":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, TopNavigation);
+            }
+            break;
+        case "ic-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "ic-horizontal-scroll":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "ic-loading-indicator":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "ic-navigation-menu":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "ic-section-container":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "ic-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ic-typography":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
 }
 
 const IcTopNavigation = TopNavigation;