@ukic/web-components 2.8.0 → 2.10.0

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

@@ -11,435 +11,448 @@ import { checkResizeObserver, DEVICE_SIZES, getCurrentDeviceSize, getThemeForegr
  * @slot buttons - Content will be rendered to right of search bar.
  */
 export class TopNavigation {
-  constructor() {
-    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;
+    constructor() {
+        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();
         }
-        else if (slot && slot.tagName === "FORM") {
-          this.searchBar = slot.querySelector("ic-search-bar");
+    }
+    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;
+    }
+    themeChangeHandler(ev) {
+        const theme = ev.detail;
+        this.foregroundColor = theme.mode;
+    }
+    toggleSearchBar() {
+        this.mobileSearchBarVisible = !this.mobileSearchBarVisible;
         if (this.searchBar !== null) {
-          this.searchBar.hideLabel = true;
+            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;
+            }
         }
-      }
-    };
-    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) {
-            this.toggleSearchBar();
-          }
+    }
+    showNavMenu(show) {
+        this.navMenuVisible = show;
+        if (show) {
+            this.icNavigationMenuOpened.emit();
+            document.body.style.height = "100%";
+            document.body.style.overflow = "hidden";
         }
-        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);
+        else {
+            this.icNavigationMenuClosed.emit();
+            document.body.style.height = "auto";
+            document.body.style.overflow = "auto";
         }
-      }
-    };
-    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;
+    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" }))))));
     }
-  }
-  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.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;
-      }
+    static get is() { return "ic-top-navigation"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ic-top-navigation.css"]
+        };
     }
-  }
-  showNavMenu(show) {
-    this.navMenuVisible = show;
-    if (show) {
-      this.icNavigationMenuOpened.emit();
-      document.body.style.height = "100%";
-      document.body.style.overflow = "hidden";
+    static get styleUrls() {
+        return {
+            "$": ["ic-top-navigation.css"]
+        };
     }
-    else {
-      this.icNavigationMenuClosed.emit();
-      document.body.style.height = "auto";
-      document.body.style.overflow = "auto";
+    static get properties() {
+        return {
+            "contentAligned": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcAlignment",
+                    "resolved": "\"center\" | \"full-width\" | \"left\"",
+                    "references": {
+                        "IcAlignment": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcAlignment"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The alignment of the top navigation content."
+                },
+                "attribute": "content-aligned",
+                "reflect": false,
+                "defaultValue": "\"full-width\""
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The URL to navigate to when the app title is clicked."
+                },
+                "attribute": "href",
+                "reflect": false,
+                "defaultValue": "\"/\""
+            },
+            "inline": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the flyout navigation menu on small devices will be contained by the parent element."
+                },
+                "attribute": "inline",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "shortAppTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The short title of the app to be displayed at small screen sizes in place of the app title."
+                },
+                "attribute": "short-app-title",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The status info to be displayed."
+                },
+                "attribute": "status",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "version": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The version info to be displayed."
+                },
+                "attribute": "version",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "appTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The app title to be displayed. This is required, unless a slotted app title link is used."
+                },
+                "attribute": "app-title",
+                "reflect": false
+            }
+        };
     }
-  }
-  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";
-      }
+    static get states() {
+        return {
+            "deviceSize": {},
+            "foregroundColor": {},
+            "hasFullWidthSearchBar": {},
+            "menuOpen": {},
+            "mobileSearchBarVisible": {},
+            "mobileSearchHiddenOnBlur": {},
+            "navMenuVisible": {},
+            "searchButtonClick": {},
+            "searchValue": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "icNavigationMenuClosed",
+                "name": "icNavigationMenuClosed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": "- Emitted when the menu is closed."
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "icNavigationMenuOpened",
+                "name": "icNavigationMenuOpened",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": "- Emitted when the menu is opened."
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "topNavResized",
+                "name": "topNavResized",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the top navigation is resized."
+                },
+                "complexType": {
+                    "original": "{ size: number }",
+                    "resolved": "{ size: number; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "appTitle",
+                "methodName": "watchPropHandler"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "icNavigationMenuClose",
+                "method": "navBarMenuCloseHandler",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "icSearchBarBlur",
+                "method": "searchInputBlurHandler",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "icChange",
+                "method": "searchValueChangeHandler",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "themeChange",
+                "method": "themeChangeHandler",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
     }
-    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 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,
-      } }, this.hasIconButtons && (h("div", { class: "menu-buttons-slot", slot: "buttons" }, h("slot", { name: "buttons" }))), h("ul", { slot: "navigation" }, h("slot", { name: "navigation" }))))));
-  }
-  static get is() { return "ic-top-navigation"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ic-top-navigation.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ic-top-navigation.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "contentAligned": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "IcAlignment",
-          "resolved": "\"center\" | \"full-width\" | \"left\"",
-          "references": {
-            "IcAlignment": {
-              "location": "import",
-              "path": "../../utils/types",
-              "id": "src/utils/types.ts::IcAlignment"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The alignment of the top navigation content."
-        },
-        "attribute": "content-aligned",
-        "reflect": false,
-        "defaultValue": "\"full-width\""
-      },
-      "href": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The URL to navigate to when the app title is clicked."
-        },
-        "attribute": "href",
-        "reflect": false,
-        "defaultValue": "\"/\""
-      },
-      "inline": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "If `true`, the flyout navigation menu on small devices will be contained by the parent element."
-        },
-        "attribute": "inline",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "shortAppTitle": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The short title of the app to be displayed at small screen sizes in place of the app title."
-        },
-        "attribute": "short-app-title",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "status": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The status info to be displayed."
-        },
-        "attribute": "status",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "version": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The version info to be displayed."
-        },
-        "attribute": "version",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "appTitle": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The app title to be displayed. This is required, unless a slotted app title link is used."
-        },
-        "attribute": "app-title",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "deviceSize": {},
-      "foregroundColor": {},
-      "hasFullWidthSearchBar": {},
-      "menuOpen": {},
-      "mobileSearchBarVisible": {},
-      "mobileSearchHiddenOnBlur": {},
-      "navMenuVisible": {},
-      "searchButtonClick": {},
-      "searchValue": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "icNavigationMenuClosed",
-        "name": "icNavigationMenuClosed",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [{
-              "name": "internal",
-              "text": "- Emitted when the menu is closed."
-            }],
-          "text": ""
-        },
-        "complexType": {
-          "original": "void",
-          "resolved": "void",
-          "references": {}
-        }
-      }, {
-        "method": "icNavigationMenuOpened",
-        "name": "icNavigationMenuOpened",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [{
-              "name": "internal",
-              "text": "- Emitted when the menu is opened."
-            }],
-          "text": ""
-        },
-        "complexType": {
-          "original": "void",
-          "resolved": "void",
-          "references": {}
-        }
-      }];
-  }
-  static get elementRef() { return "el"; }
-  static get watchers() {
-    return [{
-        "propName": "appTitle",
-        "methodName": "watchPropHandler"
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "icNavigationMenuClose",
-        "method": "navBarMenuCloseHandler",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "icSearchBarBlur",
-        "method": "searchInputBlurHandler",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "icChange",
-        "method": "searchValueChangeHandler",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "themeChange",
-        "method": "themeChangeHandler",
-        "target": "document",
-        "capture": false,
-        "passive": false
-      }];
-  }
 }
 //# sourceMappingURL=ic-top-navigation.js.map