@ukic/web-components 3.0.0 → 3.1.0

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

@@ -1,6 +1,6 @@
 import { Host, h, } from "@stencil/core";
-import { IcThemeForegroundEnum, } from "../../utils/types";
-import { checkResizeObserver, DEVICE_SIZES, getCurrentDeviceSize, getThemeForegroundColor, getSlot, onComponentPropUndefinedChange, onComponentRequiredPropUndefined, isSlotUsed, isEmptyString, isPropDefined, } from "../../utils/helpers";
+import { IcBrandForegroundEnum, } from "../../utils/types";
+import { checkResizeObserver, DEVICE_SIZES, getCurrentDeviceSize, getBrandForegroundAppearance, getSlot, onComponentPropUndefinedChange, onComponentRequiredPropUndefined, isSlotUsed, isEmptyString, isPropDefined, } from "../../utils/helpers";
 /**
  * @slot app-icon - Content will be rendered to left of app title. Anything that is slotted here will be hidden from screen readers.
  * @slot app-title - Handle routing by nesting a route in the app title.
@@ -18,6 +18,47 @@ export class TopNavigation {
         this.hasSearchSlotContent = false;
         this.resizeObserver = null;
         this.searchBar = null;
+        this.deviceSize = DEVICE_SIZES.XL;
+        this.foregroundColor = getBrandForegroundAppearance();
+        this.hasFullWidthSearchBar = false;
+        this.mobileSearchBarVisible = false;
+        this.mobileSearchHiddenOnBlur = false;
+        this.navMenuVisible = false;
+        this.searchButtonClick = false;
+        this.searchValue = "";
+        /**
+         * The alignment of the top navigation content.
+         */
+        this.contentAligned = "full-width";
+        /**
+         * Can set a custom breakpoint for the top navigation to switch to mobile mode.
+         * Must be one of our specified breakpoints in px: `0`, `576`, `768`, `992`, `1200`.
+         */
+        this.customMobileBreakpoint = DEVICE_SIZES.L;
+        /**
+         *  The URL to navigate to when the app title is clicked.
+         */
+        this.href = "/";
+        /**
+         * If `true`, the flyout navigation menu on small devices will be contained by the parent element.
+         */
+        this.inline = false;
+        /**
+         * The short title of the app to be displayed at small screen sizes in place of the app title.
+         */
+        this.shortAppTitle = "";
+        /**
+         * The status info to be displayed.
+         */
+        this.status = "";
+        /**
+         * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        this.theme = "inherit";
+        /**
+         * The version info to be displayed.
+         */
+        this.version = "";
         this.checkSlots = () => {
             this.hasAppIcon = isSlotUsed(this.el, "app-icon");
             this.hasNavigation = isSlotUsed(this.el, "navigation");
@@ -65,7 +106,8 @@ export class TopNavigation {
                     //remove attribute again as this trigger a redraw & applies css
                     this.searchBar.removeAttribute("hidden");
                     setTimeout(() => {
-                        this.searchBar.focus();
+                        var _a;
+                        (_a = this.searchBar) === null || _a === void 0 ? void 0 : _a.focus();
                     }, 100);
                 }
             }
@@ -76,22 +118,6 @@ export class TopNavigation {
             });
             this.resizeObserver.observe(this.el);
         };
-        this.deviceSize = DEVICE_SIZES.XL;
-        this.foregroundColor = getThemeForegroundColor();
-        this.hasFullWidthSearchBar = false;
-        this.mobileSearchBarVisible = false;
-        this.mobileSearchHiddenOnBlur = false;
-        this.navMenuVisible = false;
-        this.searchButtonClick = false;
-        this.searchValue = "";
-        this.contentAligned = "full-width";
-        this.customMobileBreakpoint = DEVICE_SIZES.L;
-        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
@@ -116,8 +142,9 @@ export class TopNavigation {
         this.checkSlots();
     }
     navBarMenuCloseHandler() {
+        var _a, _b;
         this.showNavMenu(false);
-        this.el.shadowRoot.querySelector("#menu-button").focus();
+        (_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("#menu-button")) === null || _b === void 0 ? void 0 : _b.focus();
     }
     searchInputBlurHandler({ detail, }) {
         if (detail !== null) {
@@ -131,18 +158,20 @@ export class TopNavigation {
     searchValueChangeHandler({ detail }) {
         this.searchValue = detail.value;
     }
-    themeChangeHandler({ detail }) {
+    brandChangeHandler({ detail }) {
         this.foregroundColor = detail.mode;
     }
     toggleSearchBar() {
+        var _a;
         this.mobileSearchBarVisible = !this.mobileSearchBarVisible;
         if (this.searchBar !== null) {
-            this.mobileSearchButtonEl.setAttribute("aria-label", `${this.mobileSearchBarVisible ? "Hide" : "Show"} search`);
+            (_a = this.mobileSearchButtonEl) === null || _a === void 0 ? void 0 : _a.setAttribute("aria-label", `${this.mobileSearchBarVisible ? "Hide" : "Show"} search`);
             this.hasFullWidthSearchBar = this.mobileSearchBarVisible;
             this.searchBar.fullWidth = this.mobileSearchBarVisible;
             if (this.mobileSearchBarVisible) {
                 setTimeout(() => {
-                    this.searchBar.focus();
+                    var _a;
+                    (_a = this.searchBar) === null || _a === void 0 ? void 0 : _a.focus();
                 }, 100);
             }
         }
@@ -154,11 +183,11 @@ export class TopNavigation {
         document.body.style.overflow = show ? "hidden" : "auto";
     }
     render() {
-        const { appTitle, contentAligned, customMobileBreakpoint, deviceSize, el, foregroundColor, hasAppIcon, hasFullWidthSearchBar, hasIconButtons, hasNavigation, hasSearchSlotContent, href, inline, menuButtonClick, mobileSearchBarVisible, navMenuVisible, searchButtonClickHandler, searchButtonMouseDownHandler, shortAppTitle, status, version, } = this;
+        const { appTitle, contentAligned, customMobileBreakpoint, deviceSize, el, foregroundColor, hasAppIcon, hasFullWidthSearchBar, hasIconButtons, hasNavigation, hasSearchSlotContent, href, inline, menuButtonClick, mobileSearchBarVisible, navMenuVisible, searchButtonClickHandler, searchButtonMouseDownHandler, shortAppTitle, status, version, theme, } = this;
         const hasStatus = status !== "";
         const hasVersion = version !== "";
         const hasMenuContent = hasNavigation || hasIconButtons || hasStatus || hasVersion;
-        const searchButtonSize = deviceSize <= DEVICE_SIZES.S ? "default" : "large";
+        const searchButtonSize = deviceSize <= DEVICE_SIZES.S ? "medium" : "large";
         const hasTitle = appTitle !== "" && isPropDefined(appTitle);
         const overMobileBreakpoint = deviceSize <= customMobileBreakpoint;
         const appTitleVariant = overMobileBreakpoint
@@ -167,22 +196,23 @@ export class TopNavigation {
                 : "h4"
             : "h3";
         const mobileSearchButtonTitle = `${mobileSearchBarVisible ? "Hide" : "Show"} search`;
-        const menuSize = deviceSize <= DEVICE_SIZES.S ? "small" : "default";
+        const menuSize = deviceSize <= DEVICE_SIZES.S ? "small" : "medium";
         const shortAppTitleSlot = isSlotUsed(el, "short-app-title");
         const hasAppTitleSlot = isSlotUsed(el, "app-title");
         const Component = hasAppTitleSlot ? "div" : "a";
         const attrs = Component == "a" && {
             href: href,
         };
-        return (h(Host, { class: {
+        return (h(Host, { key: '5ca49354d8e2344b7d2cfa2089494ca2c4521b84', class: {
                 "fullwidth-searchbar": hasFullWidthSearchBar,
                 "mobile-mode": overMobileBreakpoint,
-                [IcThemeForegroundEnum.Dark]: foregroundColor === IcThemeForegroundEnum.Dark,
-            } }, h("div", { class: "top-navigation" }, h("ic-section-container", { aligned: contentAligned, "full-height": true }, h("header", { role: "banner" }, h("div", { class: "top-panel-container" }, h("div", { class: "app-details-container" }, (hasTitle || hasAppTitleSlot) && (h(Component, Object.assign({ class: "title-link" }, attrs), hasAppIcon && (h("div", { class: "app-icon-container" }, h("slot", { name: "app-icon" }))), deviceSize <= DEVICE_SIZES.S &&
+                [IcBrandForegroundEnum.Dark]: foregroundColor === IcBrandForegroundEnum.Dark,
+                [`ic-theme-${theme}`]: theme !== "inherit",
+            } }, h("div", { key: '3447c99cc05b7203ea80d0651f1ac066122697e1', class: "top-navigation" }, h("ic-section-container", { key: '563a2b3fc3c7d456fee7261c2d5645948301e953', aligned: contentAligned, "full-height": true }, h("header", { key: '61d58c8a68ff59cfa1b5cf75daef6c62b2b4692a', role: "banner" }, h("div", { key: '17108bd26152301bf07afe95a061debb23184e8b', class: "top-panel-container" }, h("div", { key: '86fe01bd6227bc0a1e1633cab7d6cff654e2a808', class: "app-details-container" }, (hasTitle || hasAppTitleSlot) && (h(Component, Object.assign({ key: 'c6f2a1ed6ce7b7813f12352401c89852d6646327', class: "title-link" }, attrs), hasAppIcon && (h("div", { key: 'c5a2e2961b16b5f5dc6e918ba6f758e7bce09cd7', class: "app-icon-container" }, h("slot", { key: '9b6d5636aa1f474bac2add8948bcd598f3d5c231', name: "app-icon" }))), deviceSize <= DEVICE_SIZES.S &&
             (!isEmptyString(shortAppTitle) || shortAppTitleSlot) ? (h("ic-typography", { variant: "subtitle-small", "aria-label": (!hasAppTitleSlot || !shortAppTitleSlot) &&
-                `${appTitle} (${shortAppTitle})` }, h("h1", null, shortAppTitleSlot ? (h("slot", { name: "short-app-title" })) : (shortAppTitle)))) : (h("ic-typography", { variant: appTitleVariant }, h("h1", { class: "title-wrap" }, hasAppTitleSlot ? (h("slot", { name: "app-title" })) : (appTitle)))))), hasStatus && (h("div", { class: "app-status" }, h("ic-typography", { "aria-label": "app tag", variant: "label-uppercase", class: "app-status-text" }, status))), hasVersion && (h("div", { class: "app-version" }, h("ic-typography", { variant: "label", class: "app-version-text", "aria-label": "app version" }, version)))), (hasSearchSlotContent || hasMenuContent) && (h("div", { class: "search-menu-container" }, h("div", { class: "search-actions-container" }, !overMobileBreakpoint && h("slot", { name: "search" }), hasSearchSlotContent && overMobileBreakpoint && (h("ic-button", { id: "search-toggle-button", ref: (el) => (this.mobileSearchButtonEl = el), onMouseDown: searchButtonMouseDownHandler, variant: "icon", size: searchButtonSize, "aria-label": mobileSearchButtonTitle, appearance: foregroundColor, onClick: 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" }))))), hasIconButtons && !overMobileBreakpoint && (h("div", { class: "icon-buttons-container" }, h("slot", { name: "buttons" }))), hasMenuContent && overMobileBreakpoint && (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": `${navMenuVisible}` }, h("ic-button", { id: "menu-button", appearance: foregroundColor, variant: "secondary", "aria-expanded": "false", "aria-haspopup": "true", "aria-label": `Open ${hasNavigation ? "navigation" : "app"} menu`, size: menuSize, onClick: menuButtonClick }, "Menu", h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#ffffff", slot: "left-icon" }, h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" })))))))))), mobileSearchBarVisible && (h("div", { class: "search-bar-container" }, h("slot", { name: "search" }))), hasNavigation && !overMobileBreakpoint && (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: foregroundColor }, h("ul", { class: "navigation-item-list", tabindex: "-1" }, h("slot", { name: "navigation" }))))))))), navMenuVisible && (h("ic-navigation-menu", { version: version, status: status, class: {
-                ["inline"]: inline,
-            } }, hasIconButtons && (h("div", { class: "menu-buttons-slot", slot: "buttons" }, h("slot", { name: "buttons" }))), h("ul", { slot: "navigation" }, h("slot", { name: "navigation" }))))));
+                `${appTitle} (${shortAppTitle})` }, h("h1", null, shortAppTitleSlot ? (h("slot", { name: "short-app-title" })) : (shortAppTitle)))) : (h("ic-typography", { variant: appTitleVariant }, h("h1", { class: "title-wrap" }, hasAppTitleSlot ? (h("slot", { name: "app-title" })) : (appTitle)))))), hasStatus && (h("div", { key: 'f4365e21d3de5cc7c0f7c6f62a64c3fa0a7415bb', class: "app-status" }, h("ic-typography", { key: '9d03f72e0533c1d721142cba78ba216c9abf61c5', "aria-label": "app tag", variant: "label-uppercase", class: "app-status-text" }, status))), hasVersion && (h("div", { key: '318b6cf7cd4359429a6d698d40e3b99f46ac67e0', class: "app-version" }, h("ic-typography", { key: '67cc4163765fb967729ba4fa03e857c1b0cc96e3', variant: "label", class: "app-version-text", "aria-label": "app version" }, version)))), (hasSearchSlotContent || hasMenuContent) && (h("div", { key: '0f8ce1b2c3a0cf3f3bbbe2d0285324935e5b1676', class: "search-menu-container" }, h("div", { key: 'a4033e992457aa434c705d0e35d24c9efb291195', class: "search-actions-container" }, !overMobileBreakpoint && h("slot", { key: 'd9347964c2972b338c4e09833ab94f820d8b49c8', name: "search" }), hasSearchSlotContent && overMobileBreakpoint && (h("ic-button", { key: 'b980ecf6adf49457b2477865c98aac4e95ea4d8a', id: "search-toggle-button", ref: (el) => (this.mobileSearchButtonEl = el), onMouseDown: searchButtonMouseDownHandler, variant: "icon-tertiary", monochrome: true, size: searchButtonSize, "aria-label": mobileSearchButtonTitle, theme: foregroundColor, onClick: searchButtonClickHandler }, h("slot", { key: '1488d2319238d970a190b867db0ccc85c026a94f', name: "toggle-icon" }, h("svg", { key: '67e8c1448faf4b9a78098bb8809c8d75135e7671', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#ffffff" }, h("path", { key: '2f04deb0ec8098168de56fab593d0e1b9d37639a', d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { key: '797b58f8ad7489b4cd149ae46b32ecce0c9a85cf', 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" }))))), hasIconButtons && !overMobileBreakpoint && (h("div", { key: '173e7158dc1c4667be9442b7f64be140faebb102', class: "icon-buttons-container" }, h("slot", { key: 'afa131f570550779b8c52403c0f8abf90ba68369', name: "buttons" }))), hasMenuContent && overMobileBreakpoint && (h("div", { key: 'ca353958a7b441eeb82ecab62b3f0ba1de625fcc', class: "menu-button-container" }, h("span", { key: 'b13a1b5ba472b65d150a194bd7f2fb846d434b8b', id: "navigation-landmark-button-text", class: "navigation-landmark-button-text", "aria-hidden": "true" }, "Main navigation button"), h("nav", { key: '8c47f744b6aaa53afe14a09f78f8e231d7e5137b', "aria-labelledby": "navigation-landmark-button-text", "aria-hidden": `${navMenuVisible}` }, h("ic-button", { key: '4365bba111555335f4a04fb168d9e4659e0ca788', id: "menu-button", theme: foregroundColor, variant: "secondary", monochrome: true, "aria-expanded": "false", "aria-haspopup": "true", "aria-label": `Open ${hasNavigation ? "navigation" : "app"} menu`, size: menuSize, onClick: menuButtonClick }, "Menu", h("svg", { key: '05366f4016a367fd4ae143e044eb7401f2a23bbb', xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#ffffff", slot: "left-icon" }, h("path", { key: '40f079a4c147f2adfb5bbfe1b8bfeef64e444abe', d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { key: '0419ea11aee74c5993643dde955ca7ccbd836ad6', d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" })))))))))), mobileSearchBarVisible && (h("div", { key: '160ea58b8338c6b09482bb5808afa93de039c2b4', class: "search-bar-container" }, h("slot", { key: 'a415f0c6a409b4dbea14697c8c63967ee4c05dcc', name: "search" }))), hasNavigation && !overMobileBreakpoint && (h("div", { key: 'db58d987843728204f3c08ffcc730bc9400c5f75', class: "navigation-tabs" }, h("span", { key: 'c27c1d0868d4acf6385e7b39060d42d04b617e28', id: "navigation-landmark-text", class: "navigation-landmark-text", "aria-hidden": "true" }, "Main pages"), h("nav", { key: 'a9d72cda63f8f15b2c5df447a6f544cf9637286a', "aria-labelledby": "navigation-landmark-text", class: "nav-panel-container" }, h("ic-horizontal-scroll", { key: '717a0f8855c98de7c688467b6e08acaf59a50f15', monochrome: true, appearance: foregroundColor }, h("ul", { key: '6e0a057b908929ceca9e5b6113590b7a596fe091', class: "navigation-item-list", tabindex: "-1" }, h("slot", { key: '401932642750d3d4cece6a886a1e6c4316c218c8', name: "navigation" }))))))))), navMenuVisible && (h("ic-navigation-menu", { key: '0816b74f63c67e9d6869cabeb7a45651ca0eb139', version: version, status: status, class: {
+                ["inline"]: !!inline,
+            } }, hasIconButtons && (h("div", { key: '2bf599f25216d608a72e9e3b8537983419ad6a27', class: "menu-buttons-slot", slot: "buttons" }, h("slot", { key: '3483da6f4815d9f37d25ee021622c00c5a64af79', name: "buttons" }))), h("ul", { key: '92b83221e6e974101b0f1186fcae040a070e248f', slot: "navigation" }, h("slot", { key: 'f3f64918abe306948d0709cfac63abde69a61eae', name: "navigation" }))))));
     }
     static get is() { return "ic-top-navigation"; }
     static get encapsulation() { return "shadow"; }
@@ -203,7 +233,7 @@ export class TopNavigation {
                 "mutable": false,
                 "complexType": {
                     "original": "IcAlignment",
-                    "resolved": "\"center\" | \"full-width\" | \"left\"",
+                    "resolved": "\"center\" | \"full-width\" | \"left\" | undefined",
                     "references": {
                         "IcAlignment": {
                             "location": "import",
@@ -213,11 +243,13 @@ export class TopNavigation {
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The alignment of the top navigation content."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "content-aligned",
                 "reflect": false,
                 "defaultValue": "\"full-width\""
@@ -227,7 +259,7 @@ export class TopNavigation {
                 "mutable": false,
                 "complexType": {
                     "original": "IcDeviceSizes",
-                    "resolved": "0 | 1200 | 576 | 768 | 992",
+                    "resolved": "0 | 1200 | 576 | 768 | 992 | undefined",
                     "references": {
                         "IcDeviceSizes": {
                             "location": "import",
@@ -237,11 +269,13 @@ export class TopNavigation {
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Can set a custom breakpoint for the top navigation to switch to mobile mode.\nMust be one of our specified breakpoints in px: `0`, `576`, `768`, `992`, `1200`."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "custom-mobile-breakpoint",
                 "reflect": false,
                 "defaultValue": "DEVICE_SIZES.L"
@@ -251,15 +285,17 @@ export class TopNavigation {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The URL to navigate to when the app title is clicked."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "href",
                 "reflect": false,
                 "defaultValue": "\"/\""
@@ -269,15 +305,17 @@ export class TopNavigation {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "If `true`, the flyout navigation menu on small devices will be contained by the parent element."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "inline",
                 "reflect": false,
                 "defaultValue": "false"
@@ -287,15 +325,17 @@ export class TopNavigation {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The short title of the app to be displayed at small screen sizes in place of the app title."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "short-app-title",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -305,33 +345,63 @@ export class TopNavigation {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The status info to be displayed."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "status",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcThemeMode",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\" | undefined",
+                    "references": {
+                        "IcThemeMode": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcThemeMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"inherit\""
+            },
             "version": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The version info to be displayed."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "version",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -341,15 +411,17 @@ export class TopNavigation {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The app title to be displayed. This is required, unless a slotted app title link is used."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "app-title",
                 "reflect": false
             }
@@ -448,8 +520,8 @@ export class TopNavigation {
                 "capture": false,
                 "passive": false
             }, {
-                "name": "themeChange",
-                "method": "themeChangeHandler",
+                "name": "brandChange",
+                "method": "brandChangeHandler",
                 "target": "document",
                 "capture": false,
                 "passive": false

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

@@ -1 +1 @@
-{"version":3,"file":"ic-top-navigation.js","sourceRoot":"","sources":["../../../src/components/ic-top-navigation/ic-top-navigation.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,CAAC,EACD,KAAK,EACL,MAAM,EACN,KAAK,EAEL,KAAK,GACN,MAAM,eAAe,CAAC;AAEvB,OAAO,EAIL,qBAAqB,GAItB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EACL,mBAAmB,EACnB,YAAY,EACZ,oBAAoB,EACpB,uBAAuB,EACvB,OAAO,EACP,8BAA8B,EAC9B,gCAAgC,EAChC,UAAU,EACV,aAAa,EACb,aAAa,GACd,MAAM,qBAAqB,CAAC;AAG7B;;;;;;;;GAQG;AAMH,MAAM,OAAO,aAAa;;QAChB,eAAU,GAAY,KAAK,CAAC;QAC5B,mBAAc,GAAY,KAAK,CAAC;QAChC,kBAAa,GAAY,KAAK,CAAC;QAC/B,yBAAoB,GAAY,KAAK,CAAC;QAEtC,mBAAc,GAAmB,IAAI,CAAC;QACtC,cAAS,GAA2B,IAAI,CAAC;QAkIzC,eAAU,GAAG,GAAG,EAAE;YACxB,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,UAAU,CAAC,CAAC;YAClD,IAAI,CAAC,aAAa,GAAG,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,YAAY,CAAC,CAAC;YACvD,IAAI,CAAC,cAAc,GAAG,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,SAAS,CAAC,CAAC;YACrD,IAAI,CAAC,oBAAoB,GAAG,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAC;QAC5D,CAAC,CAAC;QAEM,wBAAmB,GAAG,GAAG,EAAE;YACjC,IAAI,IAAI,CAAC,oBAAoB,EAAE,CAAC;gBAC9B,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAC;gBACxC,IAAI,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,OAAO,MAAK,eAAe,EAAE,CAAC;oBACtC,IAAI,CAAC,SAAS,GAAG,IAA8B,CAAC;gBAClD,CAAC;qBAAM,IAAI,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,OAAO,MAAK,MAAM,EAAE,CAAC;oBACpC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;gBACvD,CAAC;gBAED,IAAI,IAAI,CAAC,SAAS,KAAK,IAAI,EAAE,CAAC;oBAC5B,IAAI,CAAC,SAAS,CAAC,SAAS,GAAG,IAAI,CAAC;gBAClC,CAAC;YACH,CAAC;QACH,CAAC,CAAC;QAoBM,oBAAe,GAAG,GAAG,EAAE;YAC7B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QACzB,CAAC,CAAC;QASM,iCAA4B,GAAG,GAAG,EAAE;YAC1C,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;QAChC,CAAC,CAAC;QAEM,6BAAwB,GAAG,GAAG,EAAE;YACtC,IAAI,CAAC,eAAe,EAAE,CAAC;YACvB,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;QACjC,CAAC,CAAC;QAEM,2BAAsB,GAAG,CAAC,QAAgB,EAAE,EAAE;YACpD,IAAI,QAAQ,KAAK,IAAI,CAAC,UAAU,EAAE,CAAC;gBACjC,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC;gBAC3B,IAAI,QAAQ,GAAG,IAAI,CAAC,sBAAsB,EAAE,CAAC;oBAC3C,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;oBACxB,IAAI,IAAI,CAAC,sBAAsB,EAAE,CAAC;wBAChC,IAAI,CAAC,eAAe,EAAE,CAAC;oBACzB,CAAC;gBACH,CAAC;gBACD,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;oBACxB,IAAI,EAAE,QAAQ;iBACf,CAAC,CAAC;gBACH,IAAI,IAAI,CAAC,SAAS,IAAI,QAAQ,CAAC,aAAa,KAAK,IAAI,CAAC,SAAS,EAAE,CAAC;oBAChE,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;oBAC9C,+DAA+D;oBAC/D,IAAI,CAAC,SAAS,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;oBACzC,UAAU,CAAC,GAAG,EAAE;wBACd,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC;oBACzB,CAAC,EAAE,GAAG,CAAC,CAAC;gBACV,CAAC;YACH,CAAC;QACH,CAAC,CAAC;QAEM,sBAAiB,GAAG,GAAG,EAAE;YAC/B,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;gBAC5C,IAAI,CAAC,sBAAsB,CAAC,oBAAoB,EAAE,CAAC,CAAC;YACtD,CAAC,CAAC,CAAC;YAEH,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACvC,CAAC,CAAC;0BAvN4B,YAAY,CAAC,EAAE;+BACC,uBAAuB,EAAE;qCAC7B,KAAK;sCACJ,KAAK;wCACH,KAAK;8BACf,KAAK;iCACF,KAAK;2BACZ,EAAE;8BAKK,YAAY;sCAKF,YAAY,CAAC,CAAC;oBAIvC,GAAG;sBAKA,KAAK;6BAKC,EAAE;sBAKT,EAAE;uBAKD,EAAE;;;IAQ5B,gBAAgB,CAAC,QAAgB,EAAE,QAAgB;QACjD,uGAAuG;QACvG,mEAAmE;QACnE,8BAA8B,CAC5B,QAAQ,EACR,QAAQ,EACR,IAAI,CAAC,mBAAmB,CACzB,CAAC;IACJ,CAAC;IAiBD,oBAAoB;;QAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,UAAU,EAAE,CAAC;IACpC,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,UAAU,EAAE,CAAC;QAClB,IAAI,CAAC,UAAU,GAAG,oBAAoB,EAAE,CAAC;QACzC,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC;IAED,gBAAgB;QACd,mBAAmB,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;QAC5C,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,WAAW,CAAC;YAC/B,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC,EAChD,gBAAgB,CACjB,CAAC;IACN,CAAC;IAED,mBAAmB;QACjB,IAAI,CAAC,UAAU,EAAE,CAAC;IACpB,CAAC;IAGD,sBAAsB;QACpB,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QACxB,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAc,cAAc,CAAC,CAAC,KAAK,EAAE,CAAC;IACxE,CAAC;IAGD,sBAAsB,CAAC,EACrB,MAAM,GACkC;QACxC,IAAI,MAAM,KAAK,IAAI,EAAE,CAAC;YACpB,IAAI,IAAI,CAAC,sBAAsB,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC;gBAC3D,qGAAqG;gBACrG,IAAI,CAAC,eAAe,EAAE,CAAC;YACzB,CAAC;YACD,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC;QAClC,CAAC;IACH,CAAC;IAGD,wBAAwB,CAAC,EAAE,MAAM,EAAmC;QAClE,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC;IAClC,CAAC;IAGD,kBAAkB,CAAC,EAAE,MAAM,EAAwB;QACjD,IAAI,CAAC,eAAe,GAAG,MAAM,CAAC,IAAI,CAAC;IACrC,CAAC;IAwBO,eAAe;QACrB,IAAI,CAAC,sBAAsB,GAAG,CAAC,IAAI,CAAC,sBAAsB,CAAC;QAE3D,IAAI,IAAI,CAAC,SAAS,KAAK,IAAI,EAAE,CAAC;YAC5B,IAAI,CAAC,oBAAoB,CAAC,YAAY,CACpC,YAAY,EACZ,GAAG,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,SAAS,CAC1D,CAAC;YACF,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,sBAAsB,CAAC;YACzD,IAAI,CAAC,SAAS,CAAC,SAAS,GAAG,IAAI,CAAC,sBAAsB,CAAC;YACvD,IAAI,IAAI,CAAC,sBAAsB,EAAE,CAAC;gBAChC,UAAU,CAAC,GAAG,EAAE;oBACd,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC;gBACzB,CAAC,EAAE,GAAG,CAAC,CAAC;YACV,CAAC;QACH,CAAC;IACH,CAAC;IAMO,WAAW,CAAC,IAAa;QAC/B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;QAC3B,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC,IAAI,EAAE,CAAC;QAC1E,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;QACpD,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC;IAC1D,CAAC;IA0CD,MAAM;QACJ,MAAM,EACJ,QAAQ,EACR,cAAc,EACd,sBAAsB,EACtB,UAAU,EACV,EAAE,EACF,eAAe,EACf,UAAU,EACV,qBAAqB,EACrB,cAAc,EACd,aAAa,EACb,oBAAoB,EACpB,IAAI,EACJ,MAAM,EACN,eAAe,EACf,sBAAsB,EACtB,cAAc,EACd,wBAAwB,EACxB,4BAA4B,EAC5B,aAAa,EACb,MAAM,EACN,OAAO,GACR,GAAG,IAAI,CAAC;QAET,MAAM,SAAS,GAAG,MAAM,KAAK,EAAE,CAAC;QAChC,MAAM,UAAU,GAAG,OAAO,KAAK,EAAE,CAAC;QAClC,MAAM,cAAc,GAClB,aAAa,IAAI,cAAc,IAAI,SAAS,IAAI,UAAU,CAAC;QAE7D,MAAM,gBAAgB,GAAG,UAAU,IAAI,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC;QAC5E,MAAM,QAAQ,GAAG,QAAQ,KAAK,EAAE,IAAI,aAAa,CAAC,QAAQ,CAAC,CAAC;QAC5D,MAAM,oBAAoB,GAAG,UAAU,IAAI,sBAAsB,CAAC;QAElE,MAAM,eAAe,GAAyB,oBAAoB;YAChE,CAAC,CAAC,UAAU,IAAI,YAAY,CAAC,CAAC;gBAC5B,CAAC,CAAC,gBAAgB;gBAClB,CAAC,CAAC,IAAI;YACR,CAAC,CAAC,IAAI,CAAC;QAET,MAAM,uBAAuB,GAAG,GAC9B,sBAAsB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MACpC,SAAS,CAAC;QACV,MAAM,QAAQ,GAAG,UAAU,IAAI,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC;QAEpE,MAAM,iBAAiB,GAAG,UAAU,CAAC,EAAE,EAAE,iBAAiB,CAAC,CAAC;QAC5D,MAAM,eAAe,GAAG,UAAU,CAAC,EAAE,EAAE,WAAW,CAAC,CAAC;QACpD,MAAM,SAAS,GAAG,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC;QAChD,MAAM,KAAK,GAAG,SAAS,IAAI,GAAG,IAAI;YAChC,IAAI,EAAE,IAAI;SACX,CAAC;QAEF,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;gBACL,qBAAqB,EAAE,qBAAqB;gBAC5C,aAAa,EAAE,oBAAoB;gBACnC,CAAC,qBAAqB,CAAC,IAAI,CAAC,EAC1B,eAAe,KAAK,qBAAqB,CAAC,IAAI;aACjD;YAED,WAAK,KAAK,EAAC,gBAAgB;gBACzB,4BAAsB,OAAO,EAAE,cAAc;oBAC3C,cAAQ,IAAI,EAAC,QAAQ;wBACnB,WAAK,KAAK,EAAC,qBAAqB;4BAC9B,WAAK,KAAK,EAAC,uBAAuB;gCAC/B,CAAC,QAAQ,IAAI,eAAe,CAAC,IAAI,CAChC,EAAC,SAAS,kBAAC,KAAK,EAAC,YAAY,IAAK,KAAK;oCACpC,UAAU,IAAI,CACb,WAAK,KAAK,EAAC,oBAAoB;wCAC7B,YAAM,IAAI,EAAC,UAAU,GAAG,CACpB,CACP;oCACA,UAAU,IAAI,YAAY,CAAC,CAAC;wCAC7B,CAAC,CAAC,aAAa,CAAC,aAAa,CAAC,IAAI,iBAAiB,CAAC,CAAC,CAAC,CAAC,CACrD,qBACE,OAAO,EAAC,gBAAgB,gBAEtB,CAAC,CAAC,eAAe,IAAI,CAAC,iBAAiB,CAAC;4CACxC,GAAG,QAAQ,KAAK,aAAa,GAAG;wCAGlC,cACG,iBAAiB,CAAC,CAAC,CAAC,CACnB,YAAM,IAAI,EAAC,iBAAiB,GAAQ,CACrC,CAAC,CAAC,CAAC,CACF,aAAa,CACd,CACE,CACS,CACjB,CAAC,CAAC,CAAC,CACF,qBAAe,OAAO,EAAE,eAAe;wCACrC,UAAI,KAAK,EAAC,YAAY,IACnB,eAAe,CAAC,CAAC,CAAC,CACjB,YAAM,IAAI,EAAC,WAAW,GAAQ,CAC/B,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CACE,CACS,CACjB,CACS,CACb;gCACA,SAAS,IAAI,CACZ,WAAK,KAAK,EAAC,YAAY;oCACrB,mCACa,SAAS,EACpB,OAAO,EAAC,iBAAiB,EACzB,KAAK,EAAC,iBAAiB,IAEtB,MAAM,CACO,CACZ,CACP;gCACA,UAAU,IAAI,CACb,WAAK,KAAK,EAAC,aAAa;oCACtB,qBACE,OAAO,EAAC,OAAO,EACf,KAAK,EAAC,kBAAkB,gBACb,aAAa,IAEvB,OAAO,CACM,CACZ,CACP,CACG;4BAEL,CAAC,oBAAoB,IAAI,cAAc,CAAC,IAAI,CAC3C,WAAK,KAAK,EAAC,uBAAuB;gCAChC,WAAK,KAAK,EAAC,0BAA0B;oCAClC,CAAC,oBAAoB,IAAI,YAAM,IAAI,EAAC,QAAQ,GAAQ;oCAEpD,oBAAoB,IAAI,oBAAoB,IAAI,CAC/C,iBACE,EAAE,EAAC,sBAAsB,EACzB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,oBAAoB,GAAG,EAAE,CAAC,EAC7C,WAAW,EAAE,4BAA4B,EACzC,OAAO,EAAC,MAAM,EACd,IAAI,EAAE,gBAAgB,gBACV,uBAAuB,EACnC,UAAU,EAAE,eAAe,EAC3B,OAAO,EAAE,wBAAwB;wCAEjC,YAAM,IAAI,EAAC,aAAa;4CACtB,WACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,SAAS;gDAEd,YAAM,CAAC,EAAC,iBAAiB,EAAC,IAAI,EAAC,MAAM,GAAG;gDACxC,YAAM,CAAC,EAAC,4OAA4O,GAAG,CACnP,CACD,CACG,CACb;oCAEA,cAAc,IAAI,CAAC,oBAAoB,IAAI,CAC1C,WAAK,KAAK,EAAC,wBAAwB;wCACjC,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACP;oCACA,cAAc,IAAI,oBAAoB,IAAI,CACzC,WAAK,KAAK,EAAC,uBAAuB;wCAChC,YACE,EAAE,EAAC,iCAAiC,EACpC,KAAK,EAAC,iCAAiC,iBAC3B,MAAM,6BAGb;wCACP,8BACkB,iCAAiC,iBACpC,GAAG,cAAc,EAAE;4CAEhC,iBACE,EAAE,EAAC,aAAa,EAChB,UAAU,EAAE,eAAe,EAC3B,OAAO,EAAC,WAAW,mBACL,OAAO,mBACP,MAAM,gBACR,QACV,aAAa,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KACjC,OAAO,EACP,IAAI,EAAE,QAAQ,EACd,OAAO,EAAE,eAAe;;gDAGxB,WACE,KAAK,EAAC,4BAA4B,EAClC,MAAM,EAAC,MAAM,EACb,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,MAAM,EACZ,IAAI,EAAC,SAAS,EACd,IAAI,EAAC,WAAW;oDAEhB,YAAM,CAAC,EAAC,iBAAiB,EAAC,IAAI,EAAC,MAAM,GAAG;oDACxC,YAAM,CAAC,EAAC,+CAA+C,GAAG,CACtD,CACI,CACR,CACF,CACP,CACG,CACF,CACP,CACG;wBAEL,sBAAsB,IAAI,CACzB,WAAK,KAAK,EAAC,sBAAsB;4BAC/B,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACP;wBAEA,aAAa,IAAI,CAAC,oBAAoB,IAAI,CACzC,WAAK,KAAK,EAAC,iBAAiB;4BAC1B,YACE,EAAE,EAAC,0BAA0B,EAC7B,KAAK,EAAC,0BAA0B,iBACpB,MAAM,iBAGb;4BACP,8BACkB,0BAA0B,EAC1C,KAAK,EAAC,qBAAqB;gCAE3B,4BAAsB,UAAU,EAAE,eAAe;oCAC/C,UAAI,KAAK,EAAC,sBAAsB,EAAC,QAAQ,EAAC,IAAI;wCAC5C,YAAM,IAAI,EAAC,YAAY,GAAQ,CAC5B,CACgB,CACnB,CACF,CACP,CACM,CACY,CACnB;YACL,cAAc,IAAI,CACjB,0BACE,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE;oBACL,CAAC,QAAQ,CAAC,EAAE,MAAM;iBACnB;gBAEA,cAAc,IAAI,CACjB,WAAK,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,SAAS;oBAC3C,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACP;gBACD,UAAI,IAAI,EAAC,YAAY;oBACnB,YAAM,IAAI,EAAC,YAAY,GAAQ,CAC5B,CACc,CACtB,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  State,\n  Listen,\n  Event,\n  EventEmitter,\n  Watch,\n} from \"@stencil/core\";\n\nimport {\n  IcTypographyVariants,\n  IcAlignment,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n  IcTheme,\n  IcDeviceSizes,\n  IcValueEventDetail,\n} from \"../../utils/types\";\nimport {\n  checkResizeObserver,\n  DEVICE_SIZES,\n  getCurrentDeviceSize,\n  getThemeForegroundColor,\n  getSlot,\n  onComponentPropUndefinedChange,\n  onComponentRequiredPropUndefined,\n  isSlotUsed,\n  isEmptyString,\n  isPropDefined,\n} from \"../../utils/helpers\";\nimport { IcSearchBarBlurEventDetail } from \"../ic-search-bar/ic-search-bar.types\";\n\n/**\n * @slot app-icon - Content will be rendered to left of app title. Anything that is slotted here will be hidden from screen readers.\n * @slot app-title - Handle routing by nesting a route in the app title.\n * @slot short-app-title - Handle routing by nesting a route in the short app title (to be displayed in place of app title on small screen sizes).\n * @slot search - Content will be rendered in search area to left of buttons.\n * @slot toggle-icon - Icon to be displayed on the button to toggle search slot content on smaller devices\n * @slot navigation - Content will be rendered in navigation panel.\n * @slot buttons - Content will be rendered to right of search bar.\n */\n@Component({\n  tag: \"ic-top-navigation\",\n  styleUrl: \"ic-top-navigation.css\",\n  shadow: true,\n})\nexport class TopNavigation {\n  private hasAppIcon: boolean = false;\n  private hasIconButtons: boolean = false;\n  private hasNavigation: boolean = false;\n  private hasSearchSlotContent: boolean = false;\n  private mobileSearchButtonEl: HTMLIcButtonElement;\n  private resizeObserver: ResizeObserver = null;\n  private searchBar: HTMLIcSearchBarElement = null;\n\n  @Element() el: HTMLIcTopNavigationElement;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n  @State() hasFullWidthSearchBar: boolean = false;\n  @State() mobileSearchBarVisible: boolean = false;\n  @State() mobileSearchHiddenOnBlur: boolean = false;\n  @State() navMenuVisible: boolean = false;\n  @State() searchButtonClick: boolean = false;\n  @State() searchValue: string = \"\";\n\n  /**\n   * The alignment of the top navigation content.\n   */\n  @Prop() contentAligned: IcAlignment = \"full-width\";\n  /**\n   * Can set a custom breakpoint for the top navigation to switch to mobile mode.\n   * Must be one of our specified breakpoints in px: `0`, `576`, `768`, `992`, `1200`.\n   */\n  @Prop() customMobileBreakpoint: IcDeviceSizes = DEVICE_SIZES.L;\n  /**\n   *  The URL to navigate to when the app title is clicked.\n   */\n  @Prop() href: string = \"/\";\n\n  /**\n   * If `true`, the flyout navigation menu on small devices will be contained by the parent element.\n   */\n  @Prop() inline: boolean = false;\n\n  /**\n   * The short title of the app to be displayed at small screen sizes in place of the app title.\n   */\n  @Prop() shortAppTitle: string = \"\";\n\n  /**\n   * The status info to be displayed.\n   */\n  @Prop() status: string = \"\";\n\n  /**\n   * The version info to be displayed.\n   */\n  @Prop() version: string = \"\";\n\n  /**\n   * The app title to be displayed. This is required, unless a slotted app title link is used.\n   */\n  @Prop() appTitle: string;\n\n  @Watch(\"appTitle\")\n  watchPropHandler(newValue: string, oldValue: string): void {\n    //added for Gatsby rehydration issue where prop is initially undefined but then changes to actual value\n    //this watch can be removed once Gatsby hydration issue is resolved\n    onComponentPropUndefinedChange(\n      oldValue,\n      newValue,\n      this.initialiseSearchBar\n    );\n  }\n\n  /**\n   * @internal - Emitted when the menu is closed.\n   */\n  @Event() icNavigationMenuClosed: EventEmitter<void>;\n\n  /**\n   * @internal - Emitted when the menu is opened.\n   */\n  @Event() icNavigationMenuOpened: EventEmitter<void>;\n\n  /**\n   * Emitted when the top navigation is resized.\n   */\n  @Event() icTopNavResized: EventEmitter<{ size: number }>;\n\n  disconnectedCallback(): void {\n    this.resizeObserver?.disconnect();\n  }\n\n  componentWillLoad(): void {\n    this.checkSlots();\n    this.deviceSize = getCurrentDeviceSize();\n    this.initialiseSearchBar();\n  }\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\n    !isSlotUsed(this.el, \"app-title\") &&\n      onComponentRequiredPropUndefined(\n        [{ prop: this.appTitle, propName: \"app-title\" }],\n        \"Top Navigation\"\n      );\n  }\n\n  componentWillRender(): void {\n    this.checkSlots();\n  }\n\n  @Listen(\"icNavigationMenuClose\", {})\n  navBarMenuCloseHandler(): void {\n    this.showNavMenu(false);\n    this.el.shadowRoot.querySelector<HTMLElement>(\"#menu-button\").focus();\n  }\n\n  @Listen(\"icSearchBarBlur\", {})\n  searchInputBlurHandler({\n    detail,\n  }: CustomEvent<IcSearchBarBlurEventDetail>): void {\n    if (detail !== null) {\n      if (this.mobileSearchBarVisible && !this.searchButtonClick) {\n        //don't hide if blur was triggered by click on search button - let the click handler toggle the state\n        this.toggleSearchBar();\n      }\n      this.searchValue = detail.value;\n    }\n  }\n\n  @Listen(\"icChange\", {})\n  searchValueChangeHandler({ detail }: CustomEvent<IcValueEventDetail>): void {\n    this.searchValue = detail.value;\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler({ detail }: CustomEvent<IcTheme>): void {\n    this.foregroundColor = detail.mode;\n  }\n\n  private checkSlots = () => {\n    this.hasAppIcon = isSlotUsed(this.el, \"app-icon\");\n    this.hasNavigation = isSlotUsed(this.el, \"navigation\");\n    this.hasIconButtons = isSlotUsed(this.el, \"buttons\");\n    this.hasSearchSlotContent = isSlotUsed(this.el, \"search\");\n  };\n\n  private initialiseSearchBar = () => {\n    if (this.hasSearchSlotContent) {\n      const slot = getSlot(this.el, \"search\");\n      if (slot?.tagName === \"IC-SEARCH-BAR\") {\n        this.searchBar = slot as HTMLIcSearchBarElement;\n      } else if (slot?.tagName === \"FORM\") {\n        this.searchBar = slot.querySelector(\"ic-search-bar\");\n      }\n\n      if (this.searchBar !== null) {\n        this.searchBar.hideLabel = true;\n      }\n    }\n  };\n\n  private toggleSearchBar(): void {\n    this.mobileSearchBarVisible = !this.mobileSearchBarVisible;\n\n    if (this.searchBar !== null) {\n      this.mobileSearchButtonEl.setAttribute(\n        \"aria-label\",\n        `${this.mobileSearchBarVisible ? \"Hide\" : \"Show\"} search`\n      );\n      this.hasFullWidthSearchBar = this.mobileSearchBarVisible;\n      this.searchBar.fullWidth = this.mobileSearchBarVisible;\n      if (this.mobileSearchBarVisible) {\n        setTimeout(() => {\n          this.searchBar.focus();\n        }, 100);\n      }\n    }\n  }\n\n  private menuButtonClick = () => {\n    this.showNavMenu(true);\n  };\n\n  private showNavMenu(show: boolean): void {\n    this.navMenuVisible = show;\n    (show ? this.icNavigationMenuOpened : this.icNavigationMenuClosed).emit();\n    document.body.style.height = show ? \"100%\" : \"auto\";\n    document.body.style.overflow = show ? \"hidden\" : \"auto\";\n  }\n\n  private searchButtonMouseDownHandler = () => {\n    this.searchButtonClick = true;\n  };\n\n  private searchButtonClickHandler = () => {\n    this.toggleSearchBar();\n    this.searchButtonClick = false;\n  };\n\n  private resizeObserverCallback = (currSize: number) => {\n    if (currSize !== this.deviceSize) {\n      this.deviceSize = currSize;\n      if (currSize > this.customMobileBreakpoint) {\n        this.showNavMenu(false);\n        if (this.mobileSearchBarVisible) {\n          this.toggleSearchBar();\n        }\n      }\n      this.icTopNavResized.emit({\n        size: currSize,\n      });\n      if (this.searchBar && document.activeElement === this.searchBar) {\n        this.searchBar.setAttribute(\"hidden\", \"true\");\n        //remove attribute again as this trigger a redraw & applies css\n        this.searchBar.removeAttribute(\"hidden\");\n        setTimeout(() => {\n          this.searchBar.focus();\n        }, 100);\n      }\n    }\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.resizeObserverCallback(getCurrentDeviceSize());\n    });\n\n    this.resizeObserver.observe(this.el);\n  };\n\n  render() {\n    const {\n      appTitle,\n      contentAligned,\n      customMobileBreakpoint,\n      deviceSize,\n      el,\n      foregroundColor,\n      hasAppIcon,\n      hasFullWidthSearchBar,\n      hasIconButtons,\n      hasNavigation,\n      hasSearchSlotContent,\n      href,\n      inline,\n      menuButtonClick,\n      mobileSearchBarVisible,\n      navMenuVisible,\n      searchButtonClickHandler,\n      searchButtonMouseDownHandler,\n      shortAppTitle,\n      status,\n      version,\n    } = this;\n\n    const hasStatus = status !== \"\";\n    const hasVersion = version !== \"\";\n    const hasMenuContent =\n      hasNavigation || hasIconButtons || hasStatus || hasVersion;\n\n    const searchButtonSize = deviceSize <= DEVICE_SIZES.S ? \"default\" : \"large\";\n    const hasTitle = appTitle !== \"\" && isPropDefined(appTitle);\n    const overMobileBreakpoint = deviceSize <= customMobileBreakpoint;\n\n    const appTitleVariant: IcTypographyVariants = overMobileBreakpoint\n      ? deviceSize <= DEVICE_SIZES.S\n        ? \"subtitle-small\"\n        : \"h4\"\n      : \"h3\";\n\n    const mobileSearchButtonTitle = `${\n      mobileSearchBarVisible ? \"Hide\" : \"Show\"\n    } search`;\n    const menuSize = deviceSize <= DEVICE_SIZES.S ? \"small\" : \"default\";\n\n    const shortAppTitleSlot = isSlotUsed(el, \"short-app-title\");\n    const hasAppTitleSlot = isSlotUsed(el, \"app-title\");\n    const Component = hasAppTitleSlot ? \"div\" : \"a\";\n    const attrs = Component == \"a\" && {\n      href: href,\n    };\n\n    return (\n      <Host\n        class={{\n          \"fullwidth-searchbar\": hasFullWidthSearchBar,\n          \"mobile-mode\": overMobileBreakpoint,\n          [IcThemeForegroundEnum.Dark]:\n            foregroundColor === IcThemeForegroundEnum.Dark,\n        }}\n      >\n        <div class=\"top-navigation\">\n          <ic-section-container aligned={contentAligned} full-height>\n            <header role=\"banner\">\n              <div class=\"top-panel-container\">\n                <div class=\"app-details-container\">\n                  {(hasTitle || hasAppTitleSlot) && (\n                    <Component class=\"title-link\" {...attrs}>\n                      {hasAppIcon && (\n                        <div class=\"app-icon-container\">\n                          <slot name=\"app-icon\" />\n                        </div>\n                      )}\n                      {deviceSize <= DEVICE_SIZES.S &&\n                      (!isEmptyString(shortAppTitle) || shortAppTitleSlot) ? (\n                        <ic-typography\n                          variant=\"subtitle-small\"\n                          aria-label={\n                            (!hasAppTitleSlot || !shortAppTitleSlot) &&\n                            `${appTitle} (${shortAppTitle})`\n                          }\n                        >\n                          <h1>\n                            {shortAppTitleSlot ? (\n                              <slot name=\"short-app-title\"></slot>\n                            ) : (\n                              shortAppTitle\n                            )}\n                          </h1>\n                        </ic-typography>\n                      ) : (\n                        <ic-typography variant={appTitleVariant}>\n                          <h1 class=\"title-wrap\">\n                            {hasAppTitleSlot ? (\n                              <slot name=\"app-title\"></slot>\n                            ) : (\n                              appTitle\n                            )}\n                          </h1>\n                        </ic-typography>\n                      )}\n                    </Component>\n                  )}\n                  {hasStatus && (\n                    <div class=\"app-status\">\n                      <ic-typography\n                        aria-label=\"app tag\"\n                        variant=\"label-uppercase\"\n                        class=\"app-status-text\"\n                      >\n                        {status}\n                      </ic-typography>\n                    </div>\n                  )}\n                  {hasVersion && (\n                    <div class=\"app-version\">\n                      <ic-typography\n                        variant=\"label\"\n                        class=\"app-version-text\"\n                        aria-label=\"app version\"\n                      >\n                        {version}\n                      </ic-typography>\n                    </div>\n                  )}\n                </div>\n\n                {(hasSearchSlotContent || hasMenuContent) && (\n                  <div class=\"search-menu-container\">\n                    <div class=\"search-actions-container\">\n                      {!overMobileBreakpoint && <slot name=\"search\"></slot>}\n\n                      {hasSearchSlotContent && overMobileBreakpoint && (\n                        <ic-button\n                          id=\"search-toggle-button\"\n                          ref={(el) => (this.mobileSearchButtonEl = el)}\n                          onMouseDown={searchButtonMouseDownHandler}\n                          variant=\"icon\"\n                          size={searchButtonSize}\n                          aria-label={mobileSearchButtonTitle}\n                          appearance={foregroundColor}\n                          onClick={searchButtonClickHandler}\n                        >\n                          <slot name=\"toggle-icon\">\n                            <svg\n                              xmlns=\"http://www.w3.org/2000/svg\"\n                              viewBox=\"0 0 24 24\"\n                              fill=\"#ffffff\"\n                            >\n                              <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n                              <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\" />\n                            </svg>\n                          </slot>\n                        </ic-button>\n                      )}\n\n                      {hasIconButtons && !overMobileBreakpoint && (\n                        <div class=\"icon-buttons-container\">\n                          <slot name=\"buttons\"></slot>\n                        </div>\n                      )}\n                      {hasMenuContent && overMobileBreakpoint && (\n                        <div class=\"menu-button-container\">\n                          <span\n                            id=\"navigation-landmark-button-text\"\n                            class=\"navigation-landmark-button-text\"\n                            aria-hidden=\"true\"\n                          >\n                            Main navigation button\n                          </span>\n                          <nav\n                            aria-labelledby=\"navigation-landmark-button-text\"\n                            aria-hidden={`${navMenuVisible}`}\n                          >\n                            <ic-button\n                              id=\"menu-button\"\n                              appearance={foregroundColor}\n                              variant=\"secondary\"\n                              aria-expanded=\"false\"\n                              aria-haspopup=\"true\"\n                              aria-label={`Open ${\n                                hasNavigation ? \"navigation\" : \"app\"\n                              } menu`}\n                              size={menuSize}\n                              onClick={menuButtonClick}\n                            >\n                              Menu\n                              <svg\n                                xmlns=\"http://www.w3.org/2000/svg\"\n                                height=\"24px\"\n                                viewBox=\"0 0 24 24\"\n                                width=\"24px\"\n                                fill=\"#ffffff\"\n                                slot=\"left-icon\"\n                              >\n                                <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n                                <path d=\"M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z\" />\n                              </svg>\n                            </ic-button>\n                          </nav>\n                        </div>\n                      )}\n                    </div>\n                  </div>\n                )}\n              </div>\n\n              {mobileSearchBarVisible && (\n                <div class=\"search-bar-container\">\n                  <slot name=\"search\"></slot>\n                </div>\n              )}\n\n              {hasNavigation && !overMobileBreakpoint && (\n                <div class=\"navigation-tabs\">\n                  <span\n                    id=\"navigation-landmark-text\"\n                    class=\"navigation-landmark-text\"\n                    aria-hidden=\"true\"\n                  >\n                    Main pages\n                  </span>\n                  <nav\n                    aria-labelledby=\"navigation-landmark-text\"\n                    class=\"nav-panel-container\"\n                  >\n                    <ic-horizontal-scroll appearance={foregroundColor}>\n                      <ul class=\"navigation-item-list\" tabindex=\"-1\">\n                        <slot name=\"navigation\"></slot>\n                      </ul>\n                    </ic-horizontal-scroll>\n                  </nav>\n                </div>\n              )}\n            </header>\n          </ic-section-container>\n        </div>\n        {navMenuVisible && (\n          <ic-navigation-menu\n            version={version}\n            status={status}\n            class={{\n              [\"inline\"]: inline,\n            }}\n          >\n            {hasIconButtons && (\n              <div class=\"menu-buttons-slot\" slot=\"buttons\">\n                <slot name=\"buttons\"></slot>\n              </div>\n            )}\n            <ul slot=\"navigation\">\n              <slot name=\"navigation\"></slot>\n            </ul>\n          </ic-navigation-menu>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-top-navigation.js","sourceRoot":"","sources":["../../../src/components/ic-top-navigation/ic-top-navigation.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  State,\n  Listen,\n  Event,\n  EventEmitter,\n  Watch,\n} from \"@stencil/core\";\n\nimport {\n  IcTypographyVariants,\n  IcAlignment,\n  IcBrandForeground,\n  IcBrandForegroundEnum,\n  IcBrand,\n  IcDeviceSizes,\n  IcValueEventDetail,\n  IcThemeMode,\n} from \"../../utils/types\";\nimport {\n  checkResizeObserver,\n  DEVICE_SIZES,\n  getCurrentDeviceSize,\n  getBrandForegroundAppearance,\n  getSlot,\n  onComponentPropUndefinedChange,\n  onComponentRequiredPropUndefined,\n  isSlotUsed,\n  isEmptyString,\n  isPropDefined,\n} from \"../../utils/helpers\";\nimport { IcSearchBarBlurEventDetail } from \"../ic-search-bar/ic-search-bar.types\";\n\n/**\n * @slot app-icon - Content will be rendered to left of app title. Anything that is slotted here will be hidden from screen readers.\n * @slot app-title - Handle routing by nesting a route in the app title.\n * @slot short-app-title - Handle routing by nesting a route in the short app title (to be displayed in place of app title on small screen sizes).\n * @slot search - Content will be rendered in search area to left of buttons.\n * @slot toggle-icon - Icon to be displayed on the button to toggle search slot content on smaller devices\n * @slot navigation - Content will be rendered in navigation panel.\n * @slot buttons - Content will be rendered to right of search bar.\n */\n@Component({\n  tag: \"ic-top-navigation\",\n  styleUrl: \"ic-top-navigation.css\",\n  shadow: true,\n})\nexport class TopNavigation {\n  private hasAppIcon: boolean = false;\n  private hasIconButtons: boolean = false;\n  private hasNavigation: boolean = false;\n  private hasSearchSlotContent: boolean = false;\n  private mobileSearchButtonEl?: HTMLIcButtonElement;\n  private resizeObserver: ResizeObserver | null = null;\n  private searchBar: HTMLIcSearchBarElement | null = null;\n\n  @Element() el: HTMLIcTopNavigationElement;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() foregroundColor: IcBrandForeground = getBrandForegroundAppearance();\n  @State() hasFullWidthSearchBar: boolean = false;\n  @State() mobileSearchBarVisible: boolean = false;\n  @State() mobileSearchHiddenOnBlur: boolean = false;\n  @State() navMenuVisible: boolean = false;\n  @State() searchButtonClick: boolean = false;\n  @State() searchValue: string = \"\";\n\n  /**\n   * The alignment of the top navigation content.\n   */\n  @Prop() contentAligned?: IcAlignment = \"full-width\";\n  /**\n   * Can set a custom breakpoint for the top navigation to switch to mobile mode.\n   * Must be one of our specified breakpoints in px: `0`, `576`, `768`, `992`, `1200`.\n   */\n  @Prop() customMobileBreakpoint?: IcDeviceSizes = DEVICE_SIZES.L;\n  /**\n   *  The URL to navigate to when the app title is clicked.\n   */\n  @Prop() href?: string = \"/\";\n\n  /**\n   * If `true`, the flyout navigation menu on small devices will be contained by the parent element.\n   */\n  @Prop() inline?: boolean = false;\n\n  /**\n   * The short title of the app to be displayed at small screen sizes in place of the app title.\n   */\n  @Prop() shortAppTitle?: string = \"\";\n\n  /**\n   * The status info to be displayed.\n   */\n  @Prop() status?: string = \"\";\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  /**\n   * The version info to be displayed.\n   */\n  @Prop() version?: string = \"\";\n\n  /**\n   * The app title to be displayed. This is required, unless a slotted app title link is used.\n   */\n  @Prop() appTitle?: string;\n\n  @Watch(\"appTitle\")\n  watchPropHandler(newValue: string, oldValue: string): void {\n    //added for Gatsby rehydration issue where prop is initially undefined but then changes to actual value\n    //this watch can be removed once Gatsby hydration issue is resolved\n    onComponentPropUndefinedChange(\n      oldValue,\n      newValue,\n      this.initialiseSearchBar\n    );\n  }\n\n  /**\n   * @internal - Emitted when the menu is closed.\n   */\n  @Event() icNavigationMenuClosed: EventEmitter<void>;\n\n  /**\n   * @internal - Emitted when the menu is opened.\n   */\n  @Event() icNavigationMenuOpened: EventEmitter<void>;\n\n  /**\n   * Emitted when the top navigation is resized.\n   */\n  @Event() icTopNavResized: EventEmitter<{ size: number }>;\n\n  disconnectedCallback(): void {\n    this.resizeObserver?.disconnect();\n  }\n\n  componentWillLoad(): void {\n    this.checkSlots();\n    this.deviceSize = getCurrentDeviceSize();\n    this.initialiseSearchBar();\n  }\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\n    !isSlotUsed(this.el, \"app-title\") &&\n      onComponentRequiredPropUndefined(\n        [{ prop: this.appTitle, propName: \"app-title\" }],\n        \"Top Navigation\"\n      );\n  }\n\n  componentWillRender(): void {\n    this.checkSlots();\n  }\n\n  @Listen(\"icNavigationMenuClose\", {})\n  navBarMenuCloseHandler(): void {\n    this.showNavMenu(false);\n    this.el.shadowRoot?.querySelector<HTMLElement>(\"#menu-button\")?.focus();\n  }\n\n  @Listen(\"icSearchBarBlur\", {})\n  searchInputBlurHandler({\n    detail,\n  }: CustomEvent<IcSearchBarBlurEventDetail>): void {\n    if (detail !== null) {\n      if (this.mobileSearchBarVisible && !this.searchButtonClick) {\n        //don't hide if blur was triggered by click on search button - let the click handler toggle the state\n        this.toggleSearchBar();\n      }\n      this.searchValue = detail.value as string;\n    }\n  }\n\n  @Listen(\"icChange\", {})\n  searchValueChangeHandler({ detail }: CustomEvent<IcValueEventDetail>): void {\n    this.searchValue = detail.value as string;\n  }\n\n  @Listen(\"brandChange\", { target: \"document\" })\n  brandChangeHandler({ detail }: CustomEvent<IcBrand>): void {\n    this.foregroundColor = detail.mode;\n  }\n\n  private checkSlots = () => {\n    this.hasAppIcon = isSlotUsed(this.el, \"app-icon\");\n    this.hasNavigation = isSlotUsed(this.el, \"navigation\");\n    this.hasIconButtons = isSlotUsed(this.el, \"buttons\");\n    this.hasSearchSlotContent = isSlotUsed(this.el, \"search\");\n  };\n\n  private initialiseSearchBar = () => {\n    if (this.hasSearchSlotContent) {\n      const slot = getSlot(this.el, \"search\");\n      if (slot?.tagName === \"IC-SEARCH-BAR\") {\n        this.searchBar = slot as HTMLIcSearchBarElement;\n      } else if (slot?.tagName === \"FORM\") {\n        this.searchBar = slot.querySelector(\"ic-search-bar\");\n      }\n\n      if (this.searchBar !== null) {\n        this.searchBar.hideLabel = true;\n      }\n    }\n  };\n\n  private toggleSearchBar(): void {\n    this.mobileSearchBarVisible = !this.mobileSearchBarVisible;\n\n    if (this.searchBar !== null) {\n      this.mobileSearchButtonEl?.setAttribute(\n        \"aria-label\",\n        `${this.mobileSearchBarVisible ? \"Hide\" : \"Show\"} search`\n      );\n      this.hasFullWidthSearchBar = this.mobileSearchBarVisible;\n      this.searchBar.fullWidth = this.mobileSearchBarVisible;\n      if (this.mobileSearchBarVisible) {\n        setTimeout(() => {\n          this.searchBar?.focus();\n        }, 100);\n      }\n    }\n  }\n\n  private menuButtonClick = () => {\n    this.showNavMenu(true);\n  };\n\n  private showNavMenu(show: boolean): void {\n    this.navMenuVisible = show;\n    (show ? this.icNavigationMenuOpened : this.icNavigationMenuClosed).emit();\n    document.body.style.height = show ? \"100%\" : \"auto\";\n    document.body.style.overflow = show ? \"hidden\" : \"auto\";\n  }\n\n  private searchButtonMouseDownHandler = () => {\n    this.searchButtonClick = true;\n  };\n\n  private searchButtonClickHandler = () => {\n    this.toggleSearchBar();\n    this.searchButtonClick = false;\n  };\n\n  private resizeObserverCallback = (currSize: number) => {\n    if (currSize !== this.deviceSize) {\n      this.deviceSize = currSize;\n      if (currSize > this.customMobileBreakpoint!) {\n        this.showNavMenu(false);\n        if (this.mobileSearchBarVisible) {\n          this.toggleSearchBar();\n        }\n      }\n      this.icTopNavResized.emit({\n        size: currSize,\n      });\n      if (this.searchBar && document.activeElement === this.searchBar) {\n        this.searchBar.setAttribute(\"hidden\", \"true\");\n        //remove attribute again as this trigger a redraw & applies css\n        this.searchBar.removeAttribute(\"hidden\");\n        setTimeout(() => {\n          this.searchBar?.focus();\n        }, 100);\n      }\n    }\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.resizeObserverCallback(getCurrentDeviceSize());\n    });\n\n    this.resizeObserver.observe(this.el);\n  };\n\n  render() {\n    const {\n      appTitle,\n      contentAligned,\n      customMobileBreakpoint,\n      deviceSize,\n      el,\n      foregroundColor,\n      hasAppIcon,\n      hasFullWidthSearchBar,\n      hasIconButtons,\n      hasNavigation,\n      hasSearchSlotContent,\n      href,\n      inline,\n      menuButtonClick,\n      mobileSearchBarVisible,\n      navMenuVisible,\n      searchButtonClickHandler,\n      searchButtonMouseDownHandler,\n      shortAppTitle,\n      status,\n      version,\n      theme,\n    } = this;\n\n    const hasStatus = status !== \"\";\n    const hasVersion = version !== \"\";\n    const hasMenuContent =\n      hasNavigation || hasIconButtons || hasStatus || hasVersion;\n\n    const searchButtonSize = deviceSize <= DEVICE_SIZES.S ? \"medium\" : \"large\";\n    const hasTitle = appTitle !== \"\" && isPropDefined(appTitle);\n    const overMobileBreakpoint = deviceSize <= customMobileBreakpoint!;\n\n    const appTitleVariant: IcTypographyVariants = overMobileBreakpoint\n      ? deviceSize <= DEVICE_SIZES.S\n        ? \"subtitle-small\"\n        : \"h4\"\n      : \"h3\";\n\n    const mobileSearchButtonTitle = `${\n      mobileSearchBarVisible ? \"Hide\" : \"Show\"\n    } search`;\n    const menuSize = deviceSize <= DEVICE_SIZES.S ? \"small\" : \"medium\";\n\n    const shortAppTitleSlot = isSlotUsed(el, \"short-app-title\");\n    const hasAppTitleSlot = isSlotUsed(el, \"app-title\");\n    const Component = hasAppTitleSlot ? \"div\" : \"a\";\n    const attrs = Component == \"a\" && {\n      href: href,\n    };\n\n    return (\n      <Host\n        class={{\n          \"fullwidth-searchbar\": hasFullWidthSearchBar,\n          \"mobile-mode\": overMobileBreakpoint,\n          [IcBrandForegroundEnum.Dark]:\n            foregroundColor === IcBrandForegroundEnum.Dark,\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n      >\n        <div class=\"top-navigation\">\n          <ic-section-container aligned={contentAligned} full-height>\n            <header role=\"banner\">\n              <div class=\"top-panel-container\">\n                <div class=\"app-details-container\">\n                  {(hasTitle || hasAppTitleSlot) && (\n                    <Component class=\"title-link\" {...attrs}>\n                      {hasAppIcon && (\n                        <div class=\"app-icon-container\">\n                          <slot name=\"app-icon\" />\n                        </div>\n                      )}\n                      {deviceSize <= DEVICE_SIZES.S &&\n                      (!isEmptyString(shortAppTitle!) || shortAppTitleSlot) ? (\n                        <ic-typography\n                          variant=\"subtitle-small\"\n                          aria-label={\n                            (!hasAppTitleSlot || !shortAppTitleSlot) &&\n                            `${appTitle} (${shortAppTitle})`\n                          }\n                        >\n                          <h1>\n                            {shortAppTitleSlot ? (\n                              <slot name=\"short-app-title\"></slot>\n                            ) : (\n                              shortAppTitle\n                            )}\n                          </h1>\n                        </ic-typography>\n                      ) : (\n                        <ic-typography variant={appTitleVariant}>\n                          <h1 class=\"title-wrap\">\n                            {hasAppTitleSlot ? (\n                              <slot name=\"app-title\"></slot>\n                            ) : (\n                              appTitle\n                            )}\n                          </h1>\n                        </ic-typography>\n                      )}\n                    </Component>\n                  )}\n                  {hasStatus && (\n                    <div class=\"app-status\">\n                      <ic-typography\n                        aria-label=\"app tag\"\n                        variant=\"label-uppercase\"\n                        class=\"app-status-text\"\n                      >\n                        {status}\n                      </ic-typography>\n                    </div>\n                  )}\n                  {hasVersion && (\n                    <div class=\"app-version\">\n                      <ic-typography\n                        variant=\"label\"\n                        class=\"app-version-text\"\n                        aria-label=\"app version\"\n                      >\n                        {version}\n                      </ic-typography>\n                    </div>\n                  )}\n                </div>\n\n                {(hasSearchSlotContent || hasMenuContent) && (\n                  <div class=\"search-menu-container\">\n                    <div class=\"search-actions-container\">\n                      {!overMobileBreakpoint && <slot name=\"search\"></slot>}\n\n                      {hasSearchSlotContent && overMobileBreakpoint && (\n                        <ic-button\n                          id=\"search-toggle-button\"\n                          ref={(el) => (this.mobileSearchButtonEl = el)}\n                          onMouseDown={searchButtonMouseDownHandler}\n                          variant=\"icon-tertiary\"\n                          monochrome\n                          size={searchButtonSize}\n                          aria-label={mobileSearchButtonTitle}\n                          theme={foregroundColor as IcThemeMode}\n                          onClick={searchButtonClickHandler}\n                        >\n                          <slot name=\"toggle-icon\">\n                            <svg\n                              xmlns=\"http://www.w3.org/2000/svg\"\n                              viewBox=\"0 0 24 24\"\n                              fill=\"#ffffff\"\n                            >\n                              <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n                              <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\" />\n                            </svg>\n                          </slot>\n                        </ic-button>\n                      )}\n\n                      {hasIconButtons && !overMobileBreakpoint && (\n                        <div class=\"icon-buttons-container\">\n                          <slot name=\"buttons\"></slot>\n                        </div>\n                      )}\n                      {hasMenuContent && overMobileBreakpoint && (\n                        <div class=\"menu-button-container\">\n                          <span\n                            id=\"navigation-landmark-button-text\"\n                            class=\"navigation-landmark-button-text\"\n                            aria-hidden=\"true\"\n                          >\n                            Main navigation button\n                          </span>\n                          <nav\n                            aria-labelledby=\"navigation-landmark-button-text\"\n                            aria-hidden={`${navMenuVisible}`}\n                          >\n                            <ic-button\n                              id=\"menu-button\"\n                              theme={foregroundColor as IcThemeMode}\n                              variant=\"secondary\"\n                              monochrome\n                              aria-expanded=\"false\"\n                              aria-haspopup=\"true\"\n                              aria-label={`Open ${\n                                hasNavigation ? \"navigation\" : \"app\"\n                              } menu`}\n                              size={menuSize}\n                              onClick={menuButtonClick}\n                            >\n                              Menu\n                              <svg\n                                xmlns=\"http://www.w3.org/2000/svg\"\n                                height=\"24px\"\n                                viewBox=\"0 0 24 24\"\n                                width=\"24px\"\n                                fill=\"#ffffff\"\n                                slot=\"left-icon\"\n                              >\n                                <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n                                <path d=\"M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z\" />\n                              </svg>\n                            </ic-button>\n                          </nav>\n                        </div>\n                      )}\n                    </div>\n                  </div>\n                )}\n              </div>\n\n              {mobileSearchBarVisible && (\n                <div class=\"search-bar-container\">\n                  <slot name=\"search\"></slot>\n                </div>\n              )}\n\n              {hasNavigation && !overMobileBreakpoint && (\n                <div class=\"navigation-tabs\">\n                  <span\n                    id=\"navigation-landmark-text\"\n                    class=\"navigation-landmark-text\"\n                    aria-hidden=\"true\"\n                  >\n                    Main pages\n                  </span>\n                  <nav\n                    aria-labelledby=\"navigation-landmark-text\"\n                    class=\"nav-panel-container\"\n                  >\n                    <ic-horizontal-scroll\n                      monochrome\n                      appearance={foregroundColor}\n                    >\n                      <ul class=\"navigation-item-list\" tabindex=\"-1\">\n                        <slot name=\"navigation\"></slot>\n                      </ul>\n                    </ic-horizontal-scroll>\n                  </nav>\n                </div>\n              )}\n            </header>\n          </ic-section-container>\n        </div>\n        {navMenuVisible && (\n          <ic-navigation-menu\n            version={version}\n            status={status}\n            class={{\n              [\"inline\"]: !!inline,\n            }}\n          >\n            {hasIconButtons && (\n              <div class=\"menu-buttons-slot\" slot=\"buttons\">\n                <slot name=\"buttons\"></slot>\n              </div>\n            )}\n            <ul slot=\"navigation\">\n              <slot name=\"navigation\"></slot>\n            </ul>\n          </ic-navigation-menu>\n        )}\n      </Host>\n    );\n  }\n}\n"]}