@ukic/web-components 3.0.0 → 3.1.0

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

@@ -2,8 +2,8 @@ import { Host, h, } from "@stencil/core";
 import menuIcon from "../../assets/hamburger-menu-icon.svg";
 import closeIcon from "../../assets/close-icon.svg";
 import chevronIcon from "../../assets/chevron-icon.svg";
-import { getCurrentDeviceSize, DEVICE_SIZES, checkResizeObserver, isSlotUsed, getThemeForegroundColor, getCssProperty, hasClassificationBanner, onComponentRequiredPropUndefined, isEmptyString, isPropDefined, } from "../../utils/helpers";
-import { IcThemeForegroundEnum, } from "../../utils/types";
+import { getCurrentDeviceSize, DEVICE_SIZES, checkResizeObserver, isSlotUsed, getBrandForegroundAppearance, getCssProperty, hasClassificationBanner, onComponentRequiredPropUndefined, isEmptyString, isPropDefined, } from "../../utils/helpers";
+import { IcBrandForegroundEnum, } from "../../utils/types";
 /**
  * @slot app-icon - Content will be rendered adjacent to the app title at the very top of the side navigation.
  * @slot app-title - Handle routing by nesting a route in the app title.
@@ -17,11 +17,48 @@ export class SideNavigation {
         this.resizeObserver = null;
         this.COLLAPSED_ICON_LABELS_END = "collapsed-icon-labels-end";
         this.COLLAPSED_ICON_LABELS_START = "collapsed-icon-labels-start";
-        this.menuButton = null;
+        this.deviceSize = getCurrentDeviceSize();
+        this.deviceSizeAppTitle = DEVICE_SIZES.S;
+        this.foregroundColor = getBrandForegroundAppearance();
+        this.hasSecondaryNavigation = false;
+        this.menuExpanded = false;
+        this.menuOpen = false;
+        /**
+         * If `true`, the icon and label will appear when side navigation is collapsed.
+         */
+        this.collapsedIconLabels = false;
+        /**
+         * If `true`, automatic parent wrapper styling will be disabled.
+         */
+        this.disableAutoParentStyling = false;
+        /**
+         * If `true`, the side navigation will not display as a top bar on small devices.
+         */
+        this.disableTopBarBehaviour = false;
+        /**
+         * If `true`, the side navigation will display in an expanded state.
+         */
+        this.expanded = false;
+        /**
+         * The URL that the app title link points to.
+         */
+        this.href = "/";
+        /**
+         * @internal If `true`, side navigation will be contained by its 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 = "";
+        /**
+         * If `true`, the menu expand button will be removed (PLEASE NOTE: This takes effect on screen sizes 992px and above).
+         */
+        this.static = false;
         this.emitSideNavigationExpanded = (objDetails) => {
             this.icSideNavExpanded.emit({
                 sideNavExpanded: objDetails.sideNavExpanded,
-                sideNavMobile: objDetails.sideNavMobile,
+                sideNavMobile: !!objDetails.sideNavMobile,
             });
         };
         this.toggleMenu = () => {
@@ -35,7 +72,8 @@ export class SideNavigation {
             });
         };
         this.setToggleMenuFlyoutMenuVisibility = (menuOpen) => {
-            const sideNav = this.el.shadowRoot.querySelector("#side-navigation");
+            var _a;
+            const sideNav = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("#side-navigation");
             const sideNavInner = sideNav.querySelector(".side-navigation-inner");
             const bottomWrapper = sideNav.querySelector(".bottom-wrapper");
             const menuVisibilityVisible = "menu-visibility-visible";
@@ -51,32 +89,32 @@ export class SideNavigation {
             }
         };
         this.setMobileMenuAriaAttributes = (menuOpen) => {
-            if (this.menuButton !== null) {
+            if (this.menuButton) {
                 this.menuButton.setAttribute("aria-expanded", `${menuOpen}`);
                 this.menuButton.setAttribute("aria-label", `${menuOpen ? "Close" : "Open"} navigation menu`);
             }
         };
         this.setAndRemoveNoWrapAfterMenuExpanded = () => {
-            const appTitle = this.el.shadowRoot.querySelector(".title-link ic-typography") ||
+            var _a;
+            const appTitle = ((_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".title-link ic-typography")) ||
                 this.el.querySelector("[slot='app-title']");
-            appTitle.classList.add("ic-typography-no-wrap");
+            appTitle === null || appTitle === void 0 ? void 0 : appTitle.classList.add("ic-typography-no-wrap");
             setTimeout(() => {
-                appTitle.classList.remove("ic-typography-no-wrap");
+                appTitle === null || appTitle === void 0 ? void 0 : appTitle.classList.remove("ic-typography-no-wrap");
             }, this.ANIMATION_DURATION);
         };
-        this.toggleMenuExpanded = () => {
-            this.menuExpanded = !this.menuExpanded;
+        this.toggleMenuExpanded = (expanded) => {
+            var _a, _b, _c, _d;
+            if (this.deviceSize > DEVICE_SIZES.S) {
+                this.menuExpanded = expanded;
+            }
             if (this.menuExpanded) {
                 this.setAndRemoveNoWrapAfterMenuExpanded();
-                this.el.shadowRoot
-                    .querySelector(".app-title-inner-wrapper")
-                    .classList.add("app-title-show");
+                (_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".app-title-inner-wrapper")) === null || _b === void 0 ? void 0 : _b.classList.add("app-title-show");
             }
             else {
                 this.el.style.setProperty("--navigation-item-width", "320px");
-                this.el.shadowRoot
-                    .querySelector(".app-title-inner-wrapper")
-                    .classList.remove("app-title-show");
+                (_d = (_c = this.el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector(".app-title-inner-wrapper")) === null || _d === void 0 ? void 0 : _d.classList.remove("app-title-show");
                 this.el.addEventListener("transitionend", (e) => {
                     if (e.propertyName === "width") {
                         this.el.style.setProperty("--navigation-item-width", null);
@@ -100,6 +138,7 @@ export class SideNavigation {
         this.arrangeSlottedNavigationItem = (menuExpanded) => {
             const navItems = this.el.querySelectorAll("ic-navigation-item");
             navItems.forEach((navItem) => {
+                var _a;
                 const isNamedSlot = isSlotUsed(navItem, "navigation-item");
                 const isUnnamedSlot = navItem.children[0] && !navItem.children[0].getAttribute("slot");
                 if (isNamedSlot || isUnnamedSlot) {
@@ -111,21 +150,28 @@ export class SideNavigation {
                         navItemSlot = navItem.children[0];
                     }
                     const iconWrapper = document.createElement("div");
-                    const icon = navItemSlot.querySelector("svg");
-                    const label = navItem.textContent.trim();
+                    const icon = navItemSlot === null || navItemSlot === void 0 ? void 0 : navItemSlot.querySelector("svg");
+                    const badge = navItemSlot === null || navItemSlot === void 0 ? void 0 : navItemSlot.querySelector("ic-badge");
+                    const label = (_a = navItem.textContent) === null || _a === void 0 ? void 0 : _a.trim();
                     const icTypography = document.createElement("ic-typography");
                     icTypography.classList.add("ic-typography-label", "hydrated", "navigation-item-side-nav-slotted-text");
+                    iconWrapper.style.position = "relative";
                     iconWrapper.style.height = "var(--ic-space-lg)";
-                    iconWrapper.append(icon);
-                    navItemSlot.textContent = "";
-                    icTypography.textContent = label;
-                    navItemSlot.append(iconWrapper);
-                    navItemSlot.append(icTypography);
+                    icon && iconWrapper.append(icon);
+                    badge && iconWrapper.append(badge);
+                    if (label) {
+                        icTypography.textContent = label;
+                    }
+                    if (navItemSlot) {
+                        navItemSlot.textContent = "";
+                        navItemSlot.append(iconWrapper);
+                        navItemSlot.append(icTypography);
+                    }
                     if (this.collapsedIconLabels) {
-                        this.styleSlottedCollapsedIconLabels(menuExpanded, icTypography);
+                        this.styleSlottedCollapsedIconLabels(!!menuExpanded, icTypography);
                     }
                     else {
-                        this.styleSlottedIconLabels(menuExpanded, icTypography);
+                        this.styleSlottedIconLabels(!!menuExpanded, icTypography);
                     }
                 }
             });
@@ -145,7 +191,8 @@ export class SideNavigation {
             }
         };
         this.setExpandedButtonHeight = () => {
-            const appStatusWrapper = this.el.shadowRoot.querySelector("#side-navigation > .bottom-wrapper > .bottom-side-nav > .app-status-wrapper");
+            var _a;
+            const appStatusWrapper = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("#side-navigation > .bottom-wrapper > .bottom-side-nav > .app-status-wrapper");
             if (appStatusWrapper.offsetHeight !== 0) {
                 this.el.style.setProperty("--sm-side-navigation-bottom-bar-height", `${appStatusWrapper.offsetHeight}px`);
             }
@@ -165,8 +212,9 @@ export class SideNavigation {
             }
         };
         this.transitionHandler = (type) => {
-            const primaryNavigationWrapper = this.el.shadowRoot.querySelector(".primary-navigation");
-            const secondaryNavigationWrapper = this.el.shadowRoot.querySelector(".bottom-wrapper > .secondary-navigation");
+            var _a, _b;
+            const primaryNavigationWrapper = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".primary-navigation");
+            const secondaryNavigationWrapper = (_b = this.el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector(".bottom-wrapper > .secondary-navigation");
             const classToRemove = type === "start"
                 ? this.COLLAPSED_ICON_LABELS_END
                 : this.COLLAPSED_ICON_LABELS_START;
@@ -197,14 +245,17 @@ export class SideNavigation {
                 navItems[0].querySelector("a") ||
                 navItems[0].querySelector("div");
             const navItemSVG = navItems[0].querySelector("svg");
-            const navStyles = {
-                gap: window.getComputedStyle(navItemLink).gap,
-                iconWidth: window.getComputedStyle(navItemSVG).width,
-                paddingLeft: window.getComputedStyle(navItemLink).paddingLeft,
-            };
-            return Object.values(navStyles).reduce((prev, curr) => {
-                return (prev += parseInt(curr));
-            }, 0);
+            if (navItemLink && navItemSVG) {
+                const navStyles = {
+                    gap: window.getComputedStyle(navItemLink).gap,
+                    iconWidth: window.getComputedStyle(navItemSVG).width,
+                    paddingLeft: window.getComputedStyle(navItemLink).paddingLeft,
+                };
+                return Object.values(navStyles).reduce((prev, curr) => {
+                    return (prev += parseInt(curr));
+                }, 0);
+            }
+            return 0;
         };
         this.displayTooltipWithExpandedLongLabel = (menuExpanded) => {
             let timer;
@@ -220,7 +271,8 @@ export class SideNavigation {
                         const icTypographyScrollWidth = ((_a = (navigationItem.shadowRoot &&
                             navigationItem.shadowRoot.querySelector("ic-tooltip .link ic-typography.ic-typography-label"))) === null || _a === void 0 ? void 0 : _a.scrollWidth) ||
                             ((_b = navigationItem.querySelector("ic-typography.ic-typography-label")) === null || _b === void 0 ? void 0 : _b.scrollWidth);
-                        if (icTypographyScrollWidth > sideNavWidth - paddingIconDelta) {
+                        if (icTypographyScrollWidth &&
+                            icTypographyScrollWidth > sideNavWidth - paddingIconDelta) {
                             navigationItem.setAttribute("display-navigation-tooltip", "true");
                         }
                     });
@@ -243,10 +295,12 @@ export class SideNavigation {
          * @param value - padding-top css value
          */
         this.setParentPaddingTop = (value) => {
-            this.el.parentElement.style.setProperty("padding-top", value);
+            var _a;
+            (_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.style.setProperty("padding-top", value);
         };
         this.setParentPaddingLeft = (value) => {
-            this.el.parentElement.style.setProperty("padding-left", value);
+            var _a;
+            (_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.style.setProperty("padding-left", value);
         };
         this.renderAppTitle = (isAppNameSubtitleVariant) => {
             const displayShortAppTitle = this.deviceSize <= DEVICE_SIZES.S && !isEmptyString(this.shortAppTitle);
@@ -257,19 +311,19 @@ export class SideNavigation {
                     : undefined }, h("h1", null, displayShortAppTitle ? this.shortAppTitle : this.appTitle)));
         };
         this.resizeObserverCallback = (currSize) => {
-            var _a;
+            var _a, _b, _c, _d;
             this.deviceSize = currSize;
             const isSmallAndDisableTopBar = currSize === DEVICE_SIZES.S && !this.disableTopBarBehaviour;
             if (!this.disableAutoParentStyling) {
-                const topBarHeight = (_a = this.el.shadowRoot.querySelector(".top-bar")) === null || _a === void 0 ? void 0 : _a.scrollHeight;
+                const topBarHeight = (_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".top-bar")) === null || _b === void 0 ? void 0 : _b.scrollHeight;
                 this.setParentPaddingTop(isSmallAndDisableTopBar ? `${topBarHeight}px` : "0");
                 if (isSmallAndDisableTopBar)
                     this.setParentPaddingLeft("0");
                 if (isSmallAndDisableTopBar && this.inline) {
-                    this.el.parentElement.style.setProperty("height", `calc(100% - ${topBarHeight}px)`);
+                    (_c = this.el.parentElement) === null || _c === void 0 ? void 0 : _c.style.setProperty("height", `calc(100% - ${topBarHeight}px)`);
                 }
                 else if (!isSmallAndDisableTopBar) {
-                    this.el.parentElement.style.setProperty("height", "100%");
+                    (_d = this.el.parentElement) === null || _d === void 0 ? void 0 : _d.style.setProperty("height", "100%");
                 }
             }
             if (!this.disableAutoParentStyling) {
@@ -309,7 +363,7 @@ export class SideNavigation {
             const dynamicSlottedIcTypographyComps = Array.from(this.el.querySelectorAll(".navigation-item-side-nav-slotted-text"));
             dynamicSlottedIcTypographyComps.forEach((icTypography) => {
                 var _a, _b;
-                if ((_b = (_a = icTypography === null || icTypography === void 0 ? void 0 : icTypography.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.classList.contains("navigation-item-side-nav-collapsed-with-label")) {
+                if ((_b = (_a = icTypography.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.classList.contains("navigation-item-side-nav-collapsed-with-label")) {
                     icTypography.style.whiteSpace = "nowrap";
                     icTypography.style.overflow = "hidden";
                     icTypography.style.textOverflow = "ellipsis";
@@ -326,28 +380,13 @@ export class SideNavigation {
             return (h("div", { class: {
                     "top-bar": true,
                     [this.foregroundColor]: true,
-                } }, isSDevice && (h("nav", { "aria-labelledby": "menu-navigation-toggle-button-landmark", "aria-hidden": "false" }, h("ic-button", { "aria-label": "Open navigation menu", class: "menu-button", id: "menu-button", variant: "secondary", size: "small", "full-width": "true", appearance: foregroundColor, onClick: this.toggleMenu, ariaOwnsId: "side-navigation", "aria-haspopup": "true", "aria-expanded": "false", ref: (el) => (this.menuButton = el) }, h("span", { class: "mobile-top-bar-menu-icon", slot: "left-icon", innerHTML: menuOpen ? closeIcon : menuIcon }), menuOpen ? "Close" : "Menu"), h("span", { id: "menu-navigation-toggle-button-landmark", class: "navigation-landmark-title", "aria-hidden": "true" }, "Navigation menu toggle button"))), h("div", { class: "app-title-wrapper" }, (hasTitle || isSlotUsed(this.el, "app-title")) && (h(Component, Object.assign({}, attrs, { class: "title-link" }), h("div", { class: "app-icon-container", "aria-hidden": "true" }, h("slot", { name: "app-icon" })), h("div", { class: "app-title-inner-wrapper" }, isSlotUsed(this.el, "app-title") ? (h("slot", { name: "app-title" })) : (this.renderAppTitle(isAppNameSubtitleVariant))))))));
+                } }, isSDevice && (h("nav", { "aria-labelledby": "menu-navigation-toggle-button-landmark", "aria-hidden": "false" }, h("ic-button", { "aria-label": "Open navigation menu", class: "menu-button", id: "menu-button", variant: "secondary", size: "small", "full-width": "true", theme: foregroundColor == "default" || foregroundColor == "light"
+                    ? "light"
+                    : "dark", monochrome: true, onClick: this.toggleMenu, ariaOwnsId: "side-navigation", "aria-haspopup": "true", "aria-expanded": "false", ref: (el) => (this.menuButton = el) }, h("span", { class: "mobile-top-bar-menu-icon", slot: "left-icon", innerHTML: menuOpen ? closeIcon : menuIcon }), menuOpen ? "Close" : "Menu"), h("span", { id: "menu-navigation-toggle-button-landmark", class: "navigation-landmark-title", "aria-hidden": "true" }, "Navigation menu toggle button"))), h("div", { class: "app-title-wrapper" }, (hasTitle || isSlotUsed(this.el, "app-title")) && (h(Component, Object.assign({}, attrs, { class: "title-link" }), h("div", { class: "app-icon-container", "aria-hidden": "true" }, h("slot", { name: "app-icon" })), h("div", { class: "app-title-inner-wrapper" }, isSlotUsed(this.el, "app-title") ? (h("slot", { name: "app-title" })) : (this.renderAppTitle(isAppNameSubtitleVariant))))))));
         };
-        this.deviceSize = getCurrentDeviceSize();
-        this.deviceSizeAppTitle = DEVICE_SIZES.S;
-        this.foregroundColor = getThemeForegroundColor();
-        this.hasSecondaryNavigation = false;
-        this.menuExpanded = false;
-        this.menuOpen = false;
-        this.appTitle = undefined;
-        this.collapsedIconLabels = false;
-        this.disableAutoParentStyling = false;
-        this.disableTopBarBehaviour = false;
-        this.expanded = false;
-        this.href = "/";
-        this.inline = false;
-        this.shortAppTitle = "";
-        this.static = false;
-        this.status = undefined;
-        this.version = undefined;
     }
     watchExpandedHandler() {
-        this.setMenuExpanded(this.expanded);
+        this.toggleMenuExpanded(this.expanded);
     }
     componentWillLoad() {
         this.setMenuExpanded(this.expanded);
@@ -370,12 +409,13 @@ export class SideNavigation {
             onComponentRequiredPropUndefined([{ prop: this.appTitle, propName: "app-title" }], "Side Navigation");
     }
     disconnectedCallback() {
+        var _a;
         if (this.resizeObserver !== null) {
             this.resizeObserver.disconnect();
         }
-        this.el.removeEventListener("transitionend", this.transitionEndHandler);
+        (_a = this.el) === null || _a === void 0 ? void 0 : _a.removeEventListener("transitionend", this.transitionEndHandler);
     }
-    themeChangeHandler({ detail }) {
+    brandChangeHandler({ detail }) {
         this.foregroundColor = detail.mode;
     }
     render() {
@@ -389,25 +429,25 @@ export class SideNavigation {
             isSDevice,
             foregroundColor,
             menuOpen,
-            href,
+            href: href,
             isAppNameSubtitleVariant,
-            appTitle,
+            appTitle: appTitle || "",
         };
-        return (h(Host, { class: {
+        return (h(Host, { key: 'fb3b4d0f5aacea466c00d2070666498fad03cb7e', class: {
                 "xs-menu-open": menuOpen && isSDevice,
                 "xs-menu-close": !menuOpen && isSDevice,
                 "sm-collapsed": !isSDevice && !menuExpanded,
                 "sm-expanded": !isSDevice && menuExpanded,
-                "side-display": this.deviceSize > DEVICE_SIZES.S || this.disableTopBarBehaviour,
-                [`ic-side-navigation-${IcThemeForegroundEnum.Dark}`]: foregroundColor === IcThemeForegroundEnum.Dark,
-                ["collapsed-labels"]: !isSDevice && !menuExpanded && collapsedIconLabels,
-                ["ic-side-navigation-inline"]: inline,
-            } }, isSDevice && this.renderTopBar(Object.assign({}, topBarProps)), h("div", { class: "side-navigation", id: "side-navigation" }, !isSDevice && this.renderTopBar(Object.assign({}, topBarProps)), h("div", { class: "side-navigation-inner" }, isSlotUsed(this.el, "primary-navigation") && (h("nav", { class: "primary-navigation", "aria-labelledby": "primary-navigation-landmark" }, h("span", { "aria-hidden": "true", class: "navigation-landmark-title", id: "primary-navigation-landmark" }, "Primary"), h("ul", { class: "navigation-list" }, h("slot", { name: "primary-navigation" }))))), h("div", { class: {
+                "side-display": this.deviceSize > DEVICE_SIZES.S || !!this.disableTopBarBehaviour,
+                [`ic-side-navigation-${IcBrandForegroundEnum.Dark}`]: foregroundColor === IcBrandForegroundEnum.Dark,
+                ["collapsed-labels"]: !isSDevice && !menuExpanded && !!collapsedIconLabels,
+                ["ic-side-navigation-inline"]: !!inline,
+            } }, isSDevice && this.renderTopBar(Object.assign({}, topBarProps)), h("div", { key: 'cfcf5cf40063506b1d5e11999bd772d59be886ba', class: "side-navigation", id: "side-navigation" }, !isSDevice && this.renderTopBar(Object.assign({}, topBarProps)), h("div", { key: 'e1199b3ddd25f85a9923b539d679bf11b85eb07e', class: "side-navigation-inner" }, isSlotUsed(this.el, "primary-navigation") && (h("nav", { key: 'd3d89fab68ebecdde70bd6d6261c0fd81bdda1a9', class: "primary-navigation", "aria-labelledby": "primary-navigation-landmark" }, h("span", { key: 'd87c01d166d182b5a767e296aa22238de118ff4a', "aria-hidden": "true", class: "navigation-landmark-title", id: "primary-navigation-landmark" }, "Primary"), h("ul", { key: '671878664c41e8d44ed62b620acf25c6078e26d0', class: "navigation-list" }, h("slot", { key: '205c67d3279edbe83853a99592d228dff2e98b27', name: "primary-navigation" }))))), h("div", { key: 'be621438d3883452a9ce44f471898cc19b723a10', class: {
                 ["bottom-wrapper"]: true,
                 ["classification-spacing"]: hasClassificationBanner(),
-            } }, isSlotUsed(this.el, "secondary-navigation") && (h("nav", { class: "secondary-navigation", "aria-labelledby": "secondary-navigation-landmark" }, h("span", { "aria-hidden": "true", class: "navigation-landmark-title", id: "secondary-navigation-landmark" }, "Secondary"), h("ul", { class: "navigation-list" }, h("slot", { name: "secondary-navigation" })))), h("div", { class: "bottom-side-nav" }, this.hasSecondaryNavigation && h("ic-divider", null), displayExpandBtn && (h("button", { class: "menu-expand-button", innerHTML: chevronIcon, onClick: this.toggleMenuExpanded, "aria-label": `${menuExpanded ? "Collapse" : "Expand"} side navigation` })), h("div", { class: "app-status-wrapper" }, status !== "" && (h("div", { class: {
+            } }, isSlotUsed(this.el, "secondary-navigation") && (h("nav", { key: '0075e727cb1618ff3b09c5d1d613c8788a4463ab', class: "secondary-navigation", "aria-labelledby": "secondary-navigation-landmark" }, h("span", { key: 'c2bf5cd0a50611ee03a51d520d9976e35f27267a', "aria-hidden": "true", class: "navigation-landmark-title", id: "secondary-navigation-landmark" }, "Secondary"), h("ul", { key: '684998117db93f3c22c07d3d550310aae9968bf2', class: "navigation-list" }, h("slot", { key: 'db05162c302b252d92f3921257904119c34a1bd1', name: "secondary-navigation" })))), h("div", { key: '44a26aafd9510543bb000f3fbaca4872a1fc989b', class: "bottom-side-nav" }, this.hasSecondaryNavigation && h("ic-divider", { key: '1e8dea5e2686b5dd43a8e79589bf557a965f6b91' }), displayExpandBtn && (h("button", { key: '64bef7ce7c1fe3f6d837c9dadfc55b3fe0eddec1', class: "menu-expand-button", innerHTML: chevronIcon, onClick: () => this.toggleMenuExpanded(!this.menuExpanded), "aria-label": `${menuExpanded ? "Collapse" : "Expand"} side navigation` })), h("div", { key: '4166d9cba9edc66f773552280b82e58f9b5aed6d', class: "app-status-wrapper" }, status !== "" && (h("div", { key: '01a05942ac2d77a6c71501ef8308dfc7b42c6502', class: {
                 ["app-status"]: true,
-            } }, h("ic-typography", { "aria-label": "app tag", variant: "label-uppercase", class: "app-status-text" }, status))), version !== "" && (h("ic-typography", { variant: "label", class: "app-version", "aria-label": "app version" }, version))))))));
+            } }, h("ic-typography", { key: 'f417366c7c2ff3be1c653bfdd376563da5c0a343', "aria-label": "app tag", variant: "label-uppercase", class: "app-status-text" }, status))), version !== "" && (h("ic-typography", { key: '58c3bb697b4d13712ec0ac9b4ad732659f6a4b3e', variant: "label", class: "app-version", "aria-label": "app version" }, version))))))));
     }
     static get is() { return "ic-side-navigation"; }
     static get encapsulation() { return "shadow"; }
@@ -428,15 +468,17 @@ export class SideNavigation {
                 "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
             },
@@ -445,15 +487,17 @@ export class SideNavigation {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "If `true`, the icon and label will appear when side navigation is collapsed."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "collapsed-icon-labels",
                 "reflect": false,
                 "defaultValue": "false"
@@ -463,15 +507,17 @@ export class SideNavigation {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "If `true`, automatic parent wrapper styling will be disabled."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disable-auto-parent-styling",
                 "reflect": false,
                 "defaultValue": "false"
@@ -481,15 +527,17 @@ export class SideNavigation {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "If `true`, the side navigation will not display as a top bar on small devices."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disable-top-bar-behaviour",
                 "reflect": false,
                 "defaultValue": "false"
@@ -499,15 +547,17 @@ export class SideNavigation {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "If `true`, the side navigation will display in an expanded state."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "expanded",
                 "reflect": false,
                 "defaultValue": "false"
@@ -517,15 +567,17 @@ export class SideNavigation {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The URL that the app title link points to."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "href",
                 "reflect": false,
                 "defaultValue": "\"/\""
@@ -535,11 +587,11 @@ export class SideNavigation {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [{
                             "name": "internal",
@@ -547,6 +599,8 @@ export class SideNavigation {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "inline",
                 "reflect": false,
                 "defaultValue": "false"
@@ -556,15 +610,17 @@ export class SideNavigation {
                 "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": "\"\""
@@ -574,15 +630,17 @@ export class SideNavigation {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "If `true`, the menu expand button will be removed (PLEASE NOTE: This takes effect on screen sizes 992px and above)."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "static",
                 "reflect": false,
                 "defaultValue": "false"
@@ -592,15 +650,17 @@ export class SideNavigation {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The status of the app to be displayed."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "status",
                 "reflect": false
             },
@@ -609,15 +669,17 @@ export class SideNavigation {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The version of the app to be displayed."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "version",
                 "reflect": false
             }
@@ -666,8 +728,8 @@ export class SideNavigation {
     }
     static get listeners() {
         return [{
-                "name": "themeChange",
-                "method": "themeChangeHandler",
+                "name": "brandChange",
+                "method": "brandChangeHandler",
                 "target": "document",
                 "capture": false,
                 "passive": false