@ukic/web-components 2.30.0 → 2.31.0

package/hydrate/index.js

@@ -11137,6 +11137,7 @@ class HorizontalScroll {
         });
     }
     disconnectedCallback() {
+        var _a, _b;
         if (this.resizeObserver !== undefined) {
             this.resizeObserver.disconnect();
         }
@@ -11144,12 +11145,12 @@ class HorizontalScroll {
         ["mouseup", "mouseleave"].forEach((event) => {
             scrollArrows.forEach((arrow) => arrow.removeEventListener(event, this.arrowMouseUpHandler));
         });
-        this.items.forEach((item) => {
+        (_a = this.items) === null || _a === void 0 ? void 0 : _a.forEach((item) => {
             if (item.removeEventListener) {
                 item.removeEventListener(this.focusTrigger, this.focusHandler);
             }
         });
-        this.itemsContainerEl.removeEventListener("scroll", this.scrollHandler);
+        (_b = this.itemsContainerEl) === null || _b === void 0 ? void 0 : _b.removeEventListener("scroll", this.scrollHandler);
     }
     /**
      * @internal if side scrolling enabled, scrolls the specified item into view.
@@ -14006,11 +14007,12 @@ class Menu {
         }
     }
     disconnectedCallback() {
+        var _a, _b;
         if (this.popperInstance) {
             this.popperInstance.destroy();
         }
-        this.parentEl.removeEventListener("icClear", this.handleClearListener);
-        this.parentEl.removeEventListener("icSubmitSearch", this.handleSubmitSearch);
+        (_a = this.parentEl) === null || _a === void 0 ? void 0 : _a.removeEventListener("icClear", this.handleClearListener);
+        (_b = this.parentEl) === null || _b === void 0 ? void 0 : _b.removeEventListener("icSubmitSearch", this.handleSubmitSearch);
     }
     componentWillLoad() {
         var _a, _b;
@@ -14210,7 +14212,7 @@ class MenuGroup {
     }
     render() {
         const parentMenu = this.el.closest("ic-popover-menu");
-        return (hAsync(Host, { "aria-label": this.label !== null ? this.label : "" }, isPropDefined(this.label) && (hAsync("ic-typography", { variant: "subtitle-small" }, this.label)), hAsync("ul", { role: "group" }, hAsync("slot", null)), this.el !== (parentMenu === null || parentMenu === void 0 ? void 0 : parentMenu.querySelector("ic-menu-group:last-child")) && (hAsync("hr", null))));
+        return (hAsync(Host, { role: "group", "aria-label": this.label !== null ? this.label : "" }, isPropDefined(this.label) && (hAsync("ic-typography", { variant: "subtitle-small" }, this.label)), hAsync("span", { class: "menu-items-wrapper" }, hAsync("slot", null)), this.el !== (parentMenu === null || parentMenu === void 0 ? void 0 : parentMenu.querySelector("ic-menu-group:last-child")) && (hAsync("hr", null))));
     }
     get el() { return getElement(this); }
     static get style() { return icMenuGroupCss; }
@@ -14236,6 +14238,7 @@ class MenuItem {
         registerInstance(this, hostRef);
         this.childBlur = createEvent(this, "childBlur", 7);
         this.handleMenuItemClick = createEvent(this, "handleMenuItemClick", 7);
+        this.icToggleChecked = createEvent(this, "icToggleChecked", 7);
         this.triggerPopoverMenuInstance = createEvent(this, "triggerPopoverMenuInstance", 7);
         this.handleClick = (e) => {
             if (isPropDefined(this.submenuTriggerFor)) {
@@ -14244,6 +14247,9 @@ class MenuItem {
             else if (this.variant === "toggle") {
                 e.preventDefault();
                 this.toggleChecked = !this.toggleChecked;
+                this.icToggleChecked.emit({
+                    checked: this.toggleChecked,
+                });
             }
             this.handleMenuItemClick.emit({
                 label: this.label,
@@ -14276,7 +14282,6 @@ class MenuItem {
                 return ariaLabel;
             }
         };
-        this.toggleChecked = false;
         this.description = undefined;
         this.disabled = false;
         this.href = undefined;
@@ -14287,6 +14292,7 @@ class MenuItem {
         this.rel = undefined;
         this.submenuTriggerFor = undefined;
         this.target = undefined;
+        this.toggleChecked = false;
         this.variant = "default";
     }
     componentWillLoad() {
@@ -14311,13 +14317,13 @@ class MenuItem {
         };
         return (hAsync(Host, { class: {
                 ["disabled"]: this.disabled,
-            } }, hAsync("li", { role: this.variant === "toggle" ? "menuitemcheckbox" : "menuitem", "aria-disabled": `${this.disabled}`, "aria-checked": this.variant === "toggle" ? this.toggleChecked : undefined }, hAsync("ic-button", { fullWidth: true, variant: "tertiary", onClick: this.handleClick, href: isPropDefined(this.href), hreflang: isPropDefined(this.hreflang), target: isPropDefined(this.target), rel: isPropDefined(this.rel), referrerpolicy: this.referrerpolicy !== undefined ? this.referrerpolicy : null, "aria-disabled": `${this.disabled}`, "aria-label": this.getMenuItemAriaLabel(), ariaControlsId: isPropDefined(this.submenuTriggerFor)
-                ? `ic-popover-submenu-${this.submenuTriggerFor}`
-                : false, "aria-haspopup": isPropDefined(this.submenuTriggerFor) ||
+            } }, hAsync("li", { role: this.variant === "toggle" ? "menuitemcheckbox" : "menuitem", "aria-disabled": `${this.disabled}`, "aria-checked": this.variant === "toggle"
+                ? this.toggleChecked
+                    ? "true"
+                    : "false"
+                : undefined }, hAsync("ic-button", { fullWidth: true, variant: "tertiary", onClick: this.handleClick, href: isPropDefined(this.href), hreflang: isPropDefined(this.hreflang), target: isPropDefined(this.target), rel: isPropDefined(this.rel), referrerpolicy: this.referrerpolicy !== undefined ? this.referrerpolicy : null, "aria-disabled": `${this.disabled}`, "aria-label": this.getMenuItemAriaLabel(), "aria-haspopup": isPropDefined(this.submenuTriggerFor) ||
                 this.el.classList.contains("ic-popover-submenu-back-button")
                 ? "menu"
-                : false, ariaOwnsId: isPropDefined(this.submenuTriggerFor)
-                ? `ic-popover-submenu-${this.submenuTriggerFor}`
                 : false }, hAsync("div", { class: "focus-border" }, isSlotUsed(this.el, "icon") && (hAsync("span", { class: "icon" }, hAsync("slot", { name: "icon" }))), hAsync(MenuItemInformation, null), this.variant === "toggle" && (hAsync("span", { class: {
                 ["check-icon"]: true,
                 ["hide"]: !this.toggleChecked,
@@ -14340,12 +14346,12 @@ class MenuItem {
             "rel": [1],
             "submenuTriggerFor": [1, "submenu-trigger-for"],
             "target": [1],
-            "variant": [1537],
-            "toggleChecked": [32]
+            "toggleChecked": [1540, "toggle-checked"],
+            "variant": [1537]
         },
         "$listeners$": [[2, "click", "handleHostClick"]],
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["variant", "variant"]]
+        "$attrsToReflect$": [["toggleChecked", "toggle-checked"], ["variant", "variant"]]
     }; }
 }
 
@@ -14682,11 +14688,12 @@ class NavigationGroup {
         this.label = undefined;
     }
     disconnectedCallback() {
+        var _a, _b;
         if (this.navigationType === "side") {
-            this.parentEl.removeEventListener("sideNavExpanded", this.sideNavExpandHandler);
+            (_a = this.parentEl) === null || _a === void 0 ? void 0 : _a.removeEventListener("sideNavExpanded", this.sideNavExpandHandler);
         }
         else if (this.navigationType === "top") {
-            this.parentEl.removeEventListener("topNavResized", this.topNavResizedHandler);
+            (_b = this.parentEl) === null || _b === void 0 ? void 0 : _b.removeEventListener("topNavResized", this.topNavResizedHandler);
         }
     }
     componentWillLoad() {
@@ -14805,12 +14812,14 @@ class NavigationItem {
         this.childBlur = createEvent(this, "childBlur", 7);
         this.navItemClicked = createEvent(this, "navItemClicked", 7);
         this.isInitialRender = true;
+        this.hostMutationObserver = null;
+        this.ARIA_LABEL_STRING = "aria-label";
         this.displayDefaultNavigationItem = (href, hreflang, target, rel, referrerpolicy, download, label) => {
             const variant = this.isTopNavChild || this.inTopNavSideMenu ? "body" : "label";
             const ChevronIconComponent = this.expandable && (hAsync("div", { class: { svg: true }, innerHTML: chevronIcon }));
             const IconComponent = this.el.querySelector('[slot="icon"]') && (hAsync("div", { class: "icon" }, hAsync("slot", { name: "icon" }), isSlotUsed(this.el, "badge") && hAsync("slot", { name: "badge" })));
             if (href !== "") {
-                return (hAsync("a", { href: href, target: target, rel: rel, hreflang: hreflang, referrerPolicy: referrerpolicy, download: download !== false ? download : null, class: "link", ref: (el) => (this.itemEl = el), part: "link" }, IconComponent, hAsync("ic-typography", { variant: variant }, label), hAsync("div", { class: "chevron-container" }, ChevronIconComponent), target === "_blank" && (hAsync("span", { class: "open-in-new-icon", innerHTML: OpenInNew }))));
+                return (hAsync("a", { href: href, target: target, rel: rel, hreflang: hreflang, referrerPolicy: referrerpolicy, download: download !== false ? download : null, class: "link", ref: (el) => (this.itemEl = el), part: "link", "aria-label": this.ariaLabel ? this.ariaLabel : null }, IconComponent, hAsync("ic-typography", { variant: variant }, label), hAsync("div", { class: "chevron-container" }, ChevronIconComponent), target === "_blank" && (hAsync("span", { class: "open-in-new-icon", innerHTML: OpenInNew }))));
             }
             return (hAsync("div", { tabindex: "0", class: "link", ref: (el) => (this.itemEl = el) }, IconComponent, hAsync("ic-typography", { variant: variant }, label), ChevronIconComponent));
         };
@@ -14838,6 +14847,14 @@ class NavigationItem {
         this.handleClick = () => {
             this.navItemClicked.emit();
         };
+        // triggered when attributes of host element change
+        this.hostMutationCallback = (mutationList) => {
+            mutationList.forEach(({ attributeName }) => {
+                if (attributeName === this.ARIA_LABEL_STRING) {
+                    this.ariaLabel = this.el.getAttribute(attributeName);
+                }
+            });
+        };
         this.generateTooltipLabel = () => {
             if (this.label) {
                 return this.label;
@@ -14867,6 +14884,7 @@ class NavigationItem {
         this.navigationType = undefined;
         this.parentEl = undefined;
         this.sideNavExpanded = false;
+        this.ariaLabel = "";
         this.collapsedIconLabel = false;
         this.displayNavigationTooltip = false;
         this.download = false;
@@ -14880,12 +14898,14 @@ class NavigationItem {
         this.target = undefined;
     }
     disconnectedCallback() {
+        var _a;
         if (this.navigationType === "side") {
             this.parentEl.removeEventListener("sideNavExpanded", this.sideNavExpandHandler);
         }
         else if (this.navigationType === "top") {
             this.parentEl.removeEventListener("topNavResized", this.topNavResizedHandler);
         }
+        (_a = this.hostMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     componentWillLoad() {
         const { navType, parent } = getNavItemParentDetails(this.el);
@@ -14907,6 +14927,15 @@ class NavigationItem {
         if (this.navigationSlot) {
             this.navigationSlot.ariaLabel = this.navigationSlot.textContent.trim();
         }
+        if (this.el.hasAttribute(this.ARIA_LABEL_STRING)) {
+            this.ariaLabel = this.el.getAttribute(this.ARIA_LABEL_STRING);
+        }
+    }
+    componentDidLoad() {
+        this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);
+        this.hostMutationObserver.observe(this.el, {
+            attributes: true,
+        });
     }
     componentDidUpdate() {
         this.isInitialRender = false;
@@ -14976,6 +15005,7 @@ class NavigationItem {
             "navigationType": [32],
             "parentEl": [32],
             "sideNavExpanded": [32],
+            "ariaLabel": [32],
             "setFocus": [64]
         },
         "$listeners$": [[4, "themeChange", "themeChangeHandler"]],
@@ -15628,7 +15658,7 @@ class PopoverMenu {
                     this.popoverMenuEls.push(el);
                 }
                 else if (el.tagName === "IC-MENU-GROUP") {
-                    const groupSlotWrapper = el.shadowRoot.querySelector("ul");
+                    const groupSlotWrapper = el.shadowRoot.querySelector(".menu-items-wrapper");
                     const menuGroupElements = getSlotElements(groupSlotWrapper);
                     this.addMenuItems(menuGroupElements);
                 }
@@ -15810,10 +15840,10 @@ class PopoverMenu {
                 ? `ic-popover-submenu-${this.submenuId}`
                 : "", class: {
                 menu: true,
-            }, tabindex: open ? "0" : "-1" }, hAsync("div", { class: {
+            }, tabindex: open ? "0" : "-1" }, hAsync("span", { class: {
                 "opening-from-parent": this.openingFromParent,
                 "opening-from-child": this.openingFromChild,
-            } }, isPropDefined(this.submenuId) && (hAsync("div", null, hAsync("ic-menu-item", { class: "ic-popover-submenu-back-button", ref: (el) => (this.backButton = el), label: "Back", onClick: this.handleBackButtonClick, id: `ic-popover-submenu-back-button-${this.submenuLevel}` }, hAsync("svg", { slot: "icon", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "submenu-back-icon" }, hAsync("path", { d: "M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z", fill: "currentColor" }))), hAsync("ic-typography", { variant: "subtitle-small", class: "parent-label" }, this.parentLabel))), hAsync("ul", { class: "button", "aria-label": this.getMenuAriaLabel(), role: "menu" }, hAsync("slot", null))))));
+            } }, isPropDefined(this.submenuId) && (hAsync("span", null, hAsync("span", { role: "menu" }, hAsync("ic-menu-item", { class: "ic-popover-submenu-back-button", ref: (el) => (this.backButton = el), label: "Back", onClick: this.handleBackButtonClick, id: `ic-popover-submenu-back-button-${this.submenuLevel}` }, hAsync("svg", { slot: "icon", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "submenu-back-icon" }, hAsync("path", { d: "M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z", fill: "currentColor" })))), hAsync("ic-typography", { variant: "subtitle-small", class: "parent-label" }, this.parentLabel))), hAsync("ul", { class: "button", "aria-label": this.getMenuAriaLabel(), role: "menu" }, hAsync("slot", null))))));
     }
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }
@@ -17959,10 +17989,11 @@ 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 }) {
         this.foregroundColor = detail.mode;
@@ -18904,7 +18935,8 @@ class TabContext {
         this.configureTabs();
     }
     disconnectedCallback() {
-        this.tabGroup.removeEventListener("keydown", this.keydownHandler);
+        var _a;
+        (_a = this.tabGroup) === null || _a === void 0 ? void 0 : _a.removeEventListener("keydown", this.keydownHandler);
     }
     tabClickHandler(event) {
         if (this.selectedTabIndex === undefined &&
@@ -19900,7 +19932,7 @@ class ToggleButtonGroup {
         });
     }
     disconnectedCallback() {
-        document.removeEventListener("keydown", this.keyListener);
+        document === null || document === void 0 ? void 0 : document.removeEventListener("keydown", this.keyListener);
     }
     // trigger selectHandler when unable to add 'target'
     proxySelectHandler(toggle) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukic/web-components",
-  "version": "2.30.0",
+  "version": "2.31.0",
   "description": "A web component UI library compiled with StencilJS",
   "author": "mi6",
   "bugs": {
@@ -96,5 +96,5 @@
     "webpack": "^5.76.0"
   },
   "license": "MIT",
-  "gitHead": "895517389cf1b33e002f4b72661792fd74ee4cbb"
+  "gitHead": "8f1cf8223eb9c9d871cca4af42fc7c39db4f1b6a"
 }

package/vscode-data.json

@@ -656,7 +656,7 @@
         },
         {
           "name": "checked",
-          "description": "If `true`, the checkbox will be set to the checked state."
+          "description": "If `true`, the checkbox will be set to the checked state. This is only the initial state and will be updated to unchecked if the checkbox is clicked."
         },
         {
           "name": "disabled",
@@ -1899,6 +1899,10 @@
           "name": "target",
           "description": "The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe)."
         },
+        {
+          "name": "toggle-checked",
+          "description": "If `true`, the menu item will be in a checked state. This is only applicable when variant is set to `toggle`."
+        },
         {
           "name": "variant",
           "description": "The variant of the menu item.",

package/dist/core/p-1ae6aadb.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["icSideNavigationCss","SideNavigation","this","ANIMATION_DURATION","parseInt","getCssProperty","IC_NAVIGATION_ITEM","resizeObserver","COLLAPSED_ICON_LABELS_END","COLLAPSED_ICON_LABELS_START","menuButton","emitSideNavigationExpanded","objDetails","sideNavExpanded","emit","sideNavMobile","toggleMenu","menuOpen","setMobileMenuAriaAttributes","arrangeSlottedNavigationItem","setToggleMenuFlyoutMenuVisibility","sideNav","el","shadowRoot","querySelector","sideNavInner","bottomWrapper","menuVisibilityVisible","classList","add","setTimeout","remove","setAttribute","setAndRemoveNoWrapAfterMenuExpanded","appTitle","toggleMenuExpanded","menuExpanded","style","setProperty","addEventListener","e","propertyName","displayTooltipWithExpandedLongLabel","collapsedIconLabels","animateCollapsedIconLabels","setExpandedButtonHeight","navItems","querySelectorAll","forEach","navItem","isNamedSlot","isSlotUsed","isUnnamedSlot","children","getAttribute","navItemSlot","iconWrapper","document","createElement","icon","label","textContent","trim","icTypography","height","append","styleSlottedCollapsedIconLabels","styleSlottedIconLabels","marginTop","whiteSpace","overflow","textOverflow","appStatusWrapper","offsetHeight","opacity","visibility","transition","transitionHandler","type","primaryNavigationWrapper","secondaryNavigationWrapper","classToRemove","classToAdd","transitionEndHandler","paddingIconWidth","navItemLink","navItemSVG","navStyles","gap","window","getComputedStyle","iconWidth","width","paddingLeft","Object","values","reduce","prev","curr","timer","sideNavWidth","clientWidth","navigationItems","Array","from","paddingIconDelta","length","navigationItem","icTypographyScrollWidth","_a","scrollWidth","_b","clearTimeout","setMenuExpanded","expanded","setParentPaddingTop","value","parentElement","setParentPaddingLeft","renderAppTitle","isAppNameSubtitleVariant","displayShortAppTitle","deviceSize","DEVICE_SIZES","S","isEmptyString","shortAppTitle","h","variant","undefined","resizeObserverCallback","currSize","isSmallAndDisableTopBar","disableTopBarBehaviour","disableAutoParentStyling","topBarHeight","scrollHeight","inline","L","M","static","runResizeObserver","ResizeObserver","getCurrentDeviceSize","deviceSizeAppTitle","observe","body","box","setCollapsedIconLabels","styleSlottedCollapsedIconLabel","dynamicSlottedIcTypographyComps","contains","renderTopBar","isSDevice","foregroundColor","href","hasTitle","isPropDefined","Component","attrs","class","id","size","appearance","onClick","ariaOwnsId","ref","slot","innerHTML","closeIcon","menuIcon","assign","name","getThemeForegroundColor","watchExpandedHandler","componentWillLoad","hasSecondaryNavigation","componentDidLoad","checkResizeObserver","onComponentRequiredPropUndefined","prop","propName","disconnectedCallback","disconnect","removeEventListener","themeChangeHandler","detail","mode","render","status","version","isMdDevice","isLgDevice","displayExpandBtn","topBarProps","Host","IcThemeForegroundEnum","Dark","hasClassificationBanner","chevronIcon"],"sources":["src/components/ic-side-navigation/ic-side-navigation.css?tag=ic-side-navigation&encapsulation=shadow","src/components/ic-side-navigation/ic-side-navigation.tsx"],"sourcesContent":["/**\n * @prop --ic-z-index-side-navigation: z-index of side navigation panel\n */\n\n:host {\n  display: block;\n\n  --side-navigation-position: fixed;\n  --side-navigation-position-left: 0;\n  --side-navigation-position-top: var(--ic-space-xxl);\n  --side-navigation-height: var(--ic-space-xxl);\n  --sm-side-navigation-top-bar-height: 3.5rem;\n  --sm-side-navigation-collapsed-labels-width: 6rem;\n  --sm-side-navigation-expand-transition-duration: var(\n    --ic-transition-duration-slow\n  );\n  --side-navigation-width: 20rem;\n  --sm-side-navigation-bottom-bar-height: 3.5rem;\n\n  z-index: var(--ic-z-index-side-navigation);\n}\n\n:host > * {\n  box-sizing: border-box;\n}\n\n.side-navigation {\n  display: flex;\n  flex-direction: column;\n  width: var(--side-navigation-width);\n  color: var(--ic-theme-text);\n  position: var(--side-navigation-position);\n  top: var(--side-navigation-position-top);\n  left: calc(var(--side-navigation-width) * -1);\n  bottom: 0;\n  background-color: var(--ic-theme-primary);\n  z-index: var(--ic-z-index-side-navigation);\n}\n\n:host(.inline) .side-navigation {\n  position: absolute;\n  height: 100%;\n}\n\n:host(.anchor-right) .side-navigation {\n  right: calc(var(--side-navigation-width) * -1);\n}\n\n.classification-spacing {\n  margin-bottom: var(--ic-space-lg);\n}\n\n.navigation-list {\n  padding: 0;\n  margin: 0;\n  list-style: none;\n}\n\n.side-navigation-inner {\n  background-color: var(--ic-theme-primary);\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 0;\n  overflow: auto;\n}\n\n:host(.inline) .side-navigation-inner {\n  flex: 1;\n}\n\n:host(.xs-menu-open) .side-navigation {\n  transition: left var(--ic-easing-transition-slow);\n  left: 0;\n}\n\n:host(:has(.xs-menu-open, .xs-menu-close)) ::slotted(ic-navigation-item) {\n  --navigation-item-side-nav-right: var(--ic-space-xl);\n}\n\n:host(.xs-menu-close) .side-navigation {\n  left: calc(var(--side-navigation-width) * -1);\n  transition: left var(--ic-easing-transition-slow);\n}\n\n:host(.xs-menu-close) .side-navigation > * {\n  visibility: hidden;\n}\n\n:host(.anchor-right.xs-menu-open) .side-navigation {\n  right: 0;\n  left: auto;\n}\n\n:host(.anchor-right.xs-menu-close) .side-navigation {\n  right: calc(var(--side-navigation-width) * -1);\n  left: auto;\n  transition: right var(--ic-easing-transition-slow);\n}\n\n.bottom-wrapper {\n  border-top: var(--ic-keyline-lighten);\n  bottom: 0;\n  left: 0;\n  z-index: 2;\n  box-shadow: -0.188rem -0.188rem 0.5rem rgb(0 0 0 / 20%);\n  background-color: var(--ic-theme-primary);\n  display: flex;\n  flex-direction: column;\n}\n\n:host(.inline) .bottom-wrapper {\n  position: sticky;\n}\n\n:host(.dark) .bottom-wrapper {\n  border-top: var(--ic-keyline-darken);\n}\n\n/* Mobile Top Bar */\n\n.top-bar {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  min-height: var(--side-navigation-height);\n  padding: var(--ic-space-xs);\n  box-sizing: border-box;\n  background-color: var(--ic-theme-primary);\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  border-bottom: var(--ic-keyline-darken);\n  box-shadow: var(--ic-elevation-overlay);\n  z-index: 2;\n  overflow: hidden;\n  visibility: visible;\n}\n\n:host(.inline) .top-bar {\n  position: absolute;\n}\n\n.top-bar.dark a:focus {\n  box-shadow: var(--ic-border-focus);\n}\n\n.top-bar.light {\n  border-bottom: var(--ic-keyline-lighten);\n}\n\n.app-title-wrapper {\n  display: flex;\n  margin-left: var(--ic-space-xs);\n  border-left: var(--ic-keyline-darken);\n  padding-left: var(--ic-space-xxs);\n  color: var(--ic-theme-text);\n  align-items: center;\n}\n\n.app-title-wrapper ic-typography h1 {\n  margin: 0;\n}\n\n@media screen and (min-width: 340px) {\n  .app-title-wrapper ic-typography {\n    margin-left: var(--ic-space-xs);\n  }\n}\n\n:host .title-link {\n  display: flex;\n  align-items: center;\n  transition: box-shadow var(--ic-easing-transition-fast),\n    background-color var(--ic-easing-transition-fast);\n  text-decoration: none;\n  padding: var(--ic-space-xxs);\n  color: var(--ic-theme-text);\n}\n\n:host .title-link:visited,\n:host .title-link:active {\n  color: var(--ic-theme-text);\n}\n\nslot[name=\"app-title\"]::slotted(a),\nslot[name=\"app-icon\"]::slotted(a) {\n  color: var(--ic-theme-text);\n  outline: none;\n  text-decoration: none;\n  display: flex;\n}\n\nslot[name=\"app-title\"]::slotted(ic-typography),\nslot[name=\"app-title\"]::slotted(a) {\n  margin-left: var(--ic-space-xs) !important;\n}\n\nslot[name=\"app-title\"]::slotted(a) {\n  font: var(--ic-font-subtitle-small);\n}\n\n@media screen and (min-width: 577px) {\n  :host(.sm-collapsed) slot[name=\"app-title\"]::slotted(ic-typography),\n  :host(.sm-collapsed) slot[name=\"app-title\"]::slotted(a) {\n    position: absolute;\n    left: -9999px;\n    opacity: 0;\n    transition: opacity var(--ic-easing-transition-slow);\n  }\n\n  :host(.sm-expanded) slot[name=\"app-title\"]::slotted(a) {\n    font: var(--ic-font-h3) !important;\n    font-weight: var(--ic-font-weight-semibold) !important;\n    margin-left: var(--ic-space-xs) !important;\n  }\n}\n\n:host .title-link:hover {\n  border-radius: var(--ic-border-radius);\n  background-color: var(--ic-theme-hover);\n}\n\n:host .title-link:active {\n  background-color: var(--ic-theme-active);\n}\n\n:host .title-link:focus,\n:host .title-link:focus-within {\n  border-radius: var(--ic-border-radius);\n  box-shadow: var(--ic-border-focus);\n  outline: var(--ic-hc-focus-outline);\n  background-color: transparent;\n}\n\n:host .title-link ic-typography {\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n.app-title-wrapper ::slotted(svg) {\n  fill: var(--ic-theme-text);\n}\n\n.app-icon-container {\n  display: none;\n}\n\n.button-label {\n  display: flex;\n  align-items: center;\n}\n\n.mobile-top-bar-menu-icon {\n  display: flex;\n}\n\n.menu-button {\n  width: 6.5rem;\n}\n\n.app-status-wrapper {\n  inset: 0 var(--ic-space-sm) 0 3.5rem;\n  width: auto;\n  display: flex;\n  gap: var(--ic-space-xs);\n  padding: var(--ic-space-sm) 0;\n  justify-content: flex-end;\n  align-items: flex-end;\n  pointer-events: none;\n  height: fit-content;\n  margin: 0 var(--ic-space-xs);\n}\n\n.app-status-wrapper .app-version {\n  display: flex;\n  overflow-wrap: break-word;\n  padding-bottom: var(--ic-space-xxs);\n}\n\n.app-status-wrapper .app-status {\n  display: flex;\n  border-radius: 1rem;\n  background-color: var(--ic-theme-text);\n  color: var(--ic-color-primary-text);\n  padding: var(--ic-space-xxs) var(--ic-space-lg);\n  min-width: 1rem;\n}\n\n.app-status-wrapper .app-status-text {\n  overflow-wrap: break-word;\n}\n\n:host(.dark) .app-status-wrapper .app-status {\n  color: var(--ic-color-white-text);\n}\n\n.navigation-landmark-title {\n  position: absolute;\n  width: var(--ic-space-1px);\n  height: var(--ic-space-1px);\n  padding: 0;\n  margin: calc(-1 * var(--ic-space-1px));\n  overflow: hidden;\n}\n\n/* Navigation Group */\n\n::slotted(ic-navigation-group) {\n  --navigation-group-height: 2.75rem;\n  --navigation-group-width: 100%;\n  --navigation-group-justify-content: space-between;\n  --navigation-group-hover: var(--ic-theme-hover);\n  --navigation-group-text-hover: var(--ic-theme-text);\n  --navigation-item-child-height: 3.5rem;\n  --navigation-item-child-active: var(--ic-action-dark-bg-active);\n  --navigation-item-child-color: var(--ic-theme-text);\n  --navigation-group-expand-toggle-padding: 0.25rem;\n}\n\n/* Navigation Items */\n\n::slotted(ic-navigation-item),\n::slotted(ic-navigation-group) {\n  --navigation-item-justify-content: flex-start;\n  --navigation-item-min-height: 56px;\n  --navigation-item-height: auto;\n}\n\n/* Toggle Chevron */\n\n.bottom-side-nav {\n  position: relative;\n  align-content: flex-end;\n  min-height: var(--sm-side-navigation-top-bar-height);\n}\n\n.bottom-side-nav ic-divider {\n  position: absolute;\n  top: 0;\n  width: 100%;\n}\n\n.primary-navigation {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n\n  /* Hide scrollbar when required but keep functionality */\n  scrollbar-width: none;\n}\n\n.primary-navigation::-webkit-scrollbar {\n  display: none;\n}\n\n.primary-navigation,\n.secondary-navigation {\n  overflow-x: hidden;\n}\n\n.bottom-side-nav .menu-expand-button {\n  position: absolute;\n  display: none;\n}\n\n.menu-visibility-visible {\n  visibility: visible;\n  width: 100%;\n}\n\n.app-title-show {\n  min-width: 15.5rem;\n}\n\n:host(.side-display) {\n  display: flex;\n  flex-direction: column;\n  height: 100vh;\n  position: var(--side-navigation-position);\n  left: 0;\n  top: 0;\n  bottom: 0;\n}\n\n:host(.side-display) .app-icon-container {\n  height: 40px;\n  display: flex;\n  align-items: center;\n}\n\n:host(.side-display) .top-bar {\n  --side-navigation-height: var(--sm-side-navigation-top-bar-height);\n\n  position: relative;\n  padding: 0;\n  box-shadow: -0.188rem 0.188rem 0.5rem rgb(0 0 0 / 20%);\n}\n\n:host(.inline.side-display) .top-bar {\n  position: sticky;\n}\n\n:host(.anchor-right.side-display) .top-bar {\n  box-shadow: 0.188rem 0.188rem 0.5rem rgb(0 0 0 / 20%);\n}\n\n:host(.anchor-right.side-display) .bottom-wrapper {\n  box-shadow: 0.188rem -0.188rem 0.5rem rgb(0 0 0 / 20%);\n}\n\n:host(.side-display) .side-navigation,\n:host(.side-display) .top-bar {\n  width: var(--sm-side-navigation-top-bar-height);\n}\n\n:host(.sm-collapsed.side-display) {\n  width: var(--sm-side-navigation-top-bar-height);\n  transition: width var(--ic-easing-transition-slow);\n}\n\n:host(.sm-collapsed.collapsed-labels.side-display) {\n  width: var(--sm-side-navigation-collapsed-labels-width);\n}\n\n:host(.sm-expanded.side-display) {\n  width: var(--side-navigation-width);\n  transition: width var(--ic-easing-transition-slow);\n  box-shadow: var(--ic-elevation-overlay);\n}\n\n:host(.side-display) .side-navigation {\n  --side-navigation-position-top: 0;\n\n  flex: 1;\n  position: relative;\n  top: auto;\n  left: auto;\n  bottom: auto;\n}\n\n:host(.inline.side-display) .side-navigation {\n  position: relative;\n}\n\n:host(.anchor-right.side-display) .side-navigation {\n  left: auto;\n  right: 0;\n}\n\n:host(.side-display) .app-title-wrapper {\n  margin-left: 0;\n  border-left: none;\n  padding: var(--ic-space-xs) var(--ic-space-sm);\n}\n\n:host(.side-display) .app-title-wrapper ::slotted(svg) {\n  height: var(--ic-space-lg);\n  width: var(--ic-space-lg);\n}\n\n:host(.side-display) .app-title-wrapper ic-typography {\n  font-weight: var(--ic-font-weight-semibold);\n}\n\n:host(.sm-collapsed.side-display) .app-title-wrapper ic-typography {\n  position: absolute;\n  left: -9999px;\n  opacity: 0;\n  transition: opacity var(--ic-easing-transition-slow);\n}\n\n:host(.sm-expanded.side-display) ic-typography {\n  position: relative;\n  left: 0;\n}\n\n:host(.sm-expanded.side-display) :is(.side-navigation, .top-bar) {\n  width: var(--side-navigation-width);\n  transition: width var(--ic-easing-transition-slow);\n}\n\n:host(.sm-collapsed.side-display) :is(.side-navigation, .top-bar) {\n  width: var(--sm-side-navigation-top-bar-height);\n  transition: width var(--ic-easing-transition-slow);\n}\n\n:host(.anchor-right.sm-expanded.side-display) :is(.side-navigation, .top-bar) {\n  left: auto;\n  right: 0;\n}\n\n:host(.side-display) .app-status-wrapper,\n:host(.sm-collapsed.side-display) .app-status-wrapper {\n  display: none;\n  margin-left: 0;\n}\n\n:host(.sm-expanded.side-display) .app-status-wrapper {\n  display: flex;\n  max-width: 16rem;\n  margin-right: calc(var(--ic-space-xxxs) + var(--ic-space-xs));\n}\n\n:host(.side-display) .bottom-side-nav {\n  justify-items: flex-end;\n  align-items: flex-end;\n  justify-content: flex-end;\n  display: flex;\n  outline: none;\n}\n\n:host(.side-display) .bottom-side-nav .menu-expand-button {\n  padding-left: var(--ic-space-md);\n  height: var(--sm-side-navigation-top-bar-height);\n  width: 100%;\n  color: var(--ic-theme-text);\n  background-color: transparent;\n  outline: var(--ic-hc-focus-outline);\n  border: none;\n  cursor: pointer;\n  display: flex;\n  transition: var(--ic-easing-transition-fast);\n}\n\n:host(.sm-expanded.side-display) .bottom-side-nav .menu-expand-button {\n  height: 100%;\n}\n\n:host(.side-display) .bottom-side-nav .menu-expand-button svg {\n  justify-items: flex-start;\n  align-self: center;\n  display: inline-block;\n  width: var(--ic-space-lg);\n  height: var(--ic-space-lg);\n}\n\n:host(.side-display) .bottom-side-nav .menu-expand-button:hover {\n  background-color: var(--ic-theme-hover);\n}\n\n:host(.side-display) .bottom-side-nav .menu-expand-button:focus {\n  box-shadow: var(--ic-border-focus-inset);\n  border-radius: var(--ic-border-radius-inset);\n  background-color: transparent;\n}\n\n:host(.sm-collapsed.side-display) .bottom-side-nav .menu-expand-button svg {\n  transform: scaleX(1);\n  transition: transform var(--ic-easing-transition-slow);\n}\n\n:host(.sm-expanded.side-display) .bottom-side-nav .menu-expand-button svg {\n  transform: scaleX(-1);\n  transition: transform var(--ic-easing-transition-slow);\n  align-self: flex-end;\n  margin-bottom: 0.875rem;\n}\n\n:host(.anchor-right.sm-collapsed.side-display)\n  .bottom-side-nav\n  .menu-expand-button\n  svg {\n  transform: scaleX(-1);\n}\n\n:host(.anchor-right.sm-expanded.side-display)\n  .bottom-side-nav\n  .menu-expand-button\n  svg {\n  transform: scaleX(1);\n}\n\n:host(.sm-collapsed.side-display) ::slotted(ic-navigation-item) {\n  --navigation-item-label-opacity: 1;\n}\n\n:host(.sm-collapsed.side-display) ::slotted(ic-navigation-item),\n:host(.sm-collapsed.side-display) ::slotted(ic-navigation-group) {\n  --navigation-item-label-opacity: 0;\n  --navigation-item-min-height: 56px;\n  --navigation-item-height: 56px;\n}\n\n:host(.sm-expanded.side-display) ::slotted(ic-navigation-item),\n:host(.sm-expanded.side-display) ::slotted(ic-navigation-group) {\n  --navigation-item-label-opacity: 1;\n  --navigation-item-height: auto;\n  --navigation-item-min-height: 56px;\n  --navigation-item-width: 320px;\n  --navigation-item-side-nav-right: var(--ic-space-xl);\n}\n\n:host(.sm-collapsed.side-display) ::slotted(ic-navigation-group) {\n  --navigation-group-title-position: absolute;\n  --navigation-group-title-position-left: -9999px;\n  --navigation-group-title-opacity: none;\n}\n\n:host(.sm-expanded.side-display) ::slotted(ic-navigation-group) {\n  --navigation-group-title-position: relative;\n  --navigation-group-title-position-left: 0;\n  --navigation-group-expand-toggle-padding: 0.25rem;\n  --navigation-group-title-opacity: flex;\n}\n\n:host(.sm-collapsed.collapsed-labels.side-display) .side-navigation,\n:host(.sm-collapsed.collapsed-labels.side-display) .top-bar {\n  width: var(--sm-side-navigation-collapsed-labels-width);\n}\n\n:host(.sm-collapsed.collapsed-labels.side-display) .menu-expand-button {\n  padding: 0;\n}\n\n:host(.sm-collapsed.collapsed-labels.side-display) .app-title-wrapper {\n  width: 100%;\n  justify-content: center;\n}\n\n:host(.sm-collapsed.collapsed-labels.side-display)\n  ::slotted(ic-navigation-group) {\n  --navigation-group-justify-content: center;\n  --navigation-item-label-opacity: 1;\n  --navigation-group-item-min-width: 100%;\n  --navigation-group-expand-toggle-padding: 1rem;\n}\n\n:host(.collapsed-labels.side-display) .bottom-side-nav .menu-expand-button {\n  justify-content: center;\n}\n\n:host(.side-display) .collapsed-icon-labels-start {\n  visibility: hidden;\n  opacity: 0;\n}\n\n:host(.side-display) .collapsed-icon-labels-end {\n  visibility: visible;\n  opacity: 1;\n  transition: visibility 0s, opacity var(--ic-easing-transition-slow);\n}\n\n/* Media Queries */\n\n@media screen and (min-width: 340px) {\n  .app-icon-container {\n    display: flex;\n  }\n}\n\n@media screen and (min-width: 993px) {\n  :host(.side-display) {\n    position: sticky;\n    left: auto;\n    top: 0;\n    bottom: 0;\n  }\n\n  :host(.sm-expanded.side-display) {\n    box-shadow: none;\n  }\n}\n\n@media (forced-colors: active) {\n  .side-navigation,\n  .top-bar {\n    border-right: var(--ic-hc-border);\n  }\n\n  .menu-expand-button {\n    color: Highlight !important;\n  }\n\n  slot[name=\"app-icon\"]::slotted(svg) {\n    fill: currentcolor;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Element,\n  Listen,\n  Event,\n  EventEmitter,\n  Watch,\n} from \"@stencil/core\";\n\nimport menuIcon from \"../../assets/hamburger-menu-icon.svg\";\nimport closeIcon from \"../../assets/close-icon.svg\";\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\nimport {\n  getCurrentDeviceSize,\n  DEVICE_SIZES,\n  checkResizeObserver,\n  isSlotUsed,\n  getThemeForegroundColor,\n  getCssProperty,\n  hasClassificationBanner,\n  onComponentRequiredPropUndefined,\n  isEmptyString,\n  isPropDefined,\n} from \"../../utils/helpers\";\nimport {\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport { IcTopBar, IcExpandedDetail } from \"./ic-side-navigation.types\";\n\n/**\n * @slot app-icon - Content will be rendered adjacent to the app title at the very top of the side navigation.\n * @slot app-title - Handle routing by nesting a route in the app title.\n * @slot primary-navigation - Content will be rendered at the top of the side navigation.\n * @slot secondary-navigation - Content will be rendered at the bottom of the side navigation.\n */\n\n@Component({\n  tag: \"ic-side-navigation\",\n  styleUrl: \"ic-side-navigation.css\",\n  shadow: true,\n})\nexport class SideNavigation {\n  private ANIMATION_DURATION =\n    parseInt(getCssProperty(\"--ic-transition-duration-slow\")) || 0;\n  private IC_NAVIGATION_ITEM: string = \"ic-navigation-item\";\n  private resizeObserver: ResizeObserver = null;\n  private COLLAPSED_ICON_LABELS_END = \"collapsed-icon-labels-end\";\n  private COLLAPSED_ICON_LABELS_START = \"collapsed-icon-labels-start\";\n  private menuButton: HTMLIcButtonElement = null;\n\n  @Element() el: HTMLIcSideNavigationElement;\n\n  @State() deviceSize: number = getCurrentDeviceSize();\n  @State() deviceSizeAppTitle: number = DEVICE_SIZES.S;\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n  @State() hasSecondaryNavigation: boolean = false;\n  @State() menuExpanded: boolean = false;\n  @State() menuOpen: boolean = false;\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  /**\n   * If `true`, the icon and label will appear when side navigation is collapsed.\n   */\n  @Prop() collapsedIconLabels: boolean = false;\n\n  /**\n   * If `true`, automatic parent wrapper styling will be disabled.\n   */\n  @Prop() disableAutoParentStyling: boolean = false;\n\n  /**\n   * If `true`, the side navigation will not display as a top bar on small devices.\n   */\n  @Prop() disableTopBarBehaviour: boolean = false;\n\n  /**\n   * If `true`, the side navigation will display in an expanded state.\n   */\n  @Prop() expanded: boolean = false;\n\n  @Watch(\"expanded\")\n  watchExpandedHandler(): void {\n    this.setMenuExpanded(this.expanded);\n  }\n\n  /**\n   * The URL that the app title link points to.\n   */\n  @Prop() href: string = \"/\";\n\n  /**\n   * @internal If `true`, side navigation will be contained by its 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   * If `true`, the menu expand button will be removed (PLEASE NOTE: This takes effect on screen sizes 992px and above).\n   */\n  @Prop() static: boolean = false;\n\n  /**\n   * The status of the app to be displayed.\n   */\n  @Prop() status: string;\n\n  /**\n   * The version of the app to be displayed.\n   */\n  @Prop() version: string;\n\n  /**\n   * Emitted when the side navigation is collapsed and expanded.\n   */\n  @Event() sideNavExpanded: EventEmitter<IcExpandedDetail>;\n\n  componentWillLoad(): void {\n    this.setMenuExpanded(this.expanded);\n\n    if (this.collapsedIconLabels) {\n      this.setCollapsedIconLabels();\n    }\n\n    this.hasSecondaryNavigation = isSlotUsed(this.el, \"secondary-navigation\");\n  }\n\n  componentDidLoad(): void {\n    this.emitSideNavigationExpanded({\n      sideNavExpanded: this.menuExpanded,\n      sideNavMobile:\n        this.deviceSize === DEVICE_SIZES.S && !this.disableTopBarBehaviour,\n    });\n\n    checkResizeObserver(this.runResizeObserver);\n    this.styleSlottedCollapsedIconLabel();\n    this.arrangeSlottedNavigationItem(this.menuExpanded);\n    this.displayTooltipWithExpandedLongLabel(this.menuExpanded);\n\n    this.setExpandedButtonHeight();\n\n    !isSlotUsed(this.el, \"app-title\") &&\n      onComponentRequiredPropUndefined(\n        [{ prop: this.appTitle, propName: \"app-title\" }],\n        \"Side Navigation\"\n      );\n  }\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n\n    this.el.removeEventListener(\"transitionend\", this.transitionEndHandler);\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler({ detail }: CustomEvent): void {\n    this.foregroundColor = (detail as IcTheme).mode;\n  }\n\n  private emitSideNavigationExpanded = (objDetails: {\n    sideNavExpanded: boolean;\n    sideNavMobile?: boolean;\n  }): void => {\n    this.sideNavExpanded.emit({\n      sideNavExpanded: objDetails.sideNavExpanded,\n      sideNavMobile: objDetails.sideNavMobile,\n    });\n  };\n\n  private toggleMenu = (): void => {\n    this.menuOpen = !this.menuOpen;\n    this.setMobileMenuAriaAttributes(this.menuOpen);\n\n    this.arrangeSlottedNavigationItem(this.menuOpen);\n\n    this.setToggleMenuFlyoutMenuVisibility(this.menuOpen);\n\n    this.emitSideNavigationExpanded({\n      sideNavExpanded: this.menuOpen,\n      sideNavMobile: true,\n    });\n  };\n\n  private setToggleMenuFlyoutMenuVisibility = (menuOpen: boolean) => {\n    const sideNav = this.el.shadowRoot.querySelector(\n      \"#side-navigation\"\n    ) as HTMLDivElement;\n    const sideNavInner = sideNav.querySelector(\n      \".side-navigation-inner\"\n    ) as HTMLElement;\n    const bottomWrapper = sideNav.querySelector(\n      \".bottom-wrapper\"\n    ) as HTMLElement;\n\n    const menuVisibilityVisible = \"menu-visibility-visible\";\n\n    if (menuOpen) {\n      bottomWrapper.classList.add(menuVisibilityVisible);\n      sideNavInner.classList.add(menuVisibilityVisible);\n    } else {\n      setTimeout(() => {\n        sideNavInner.classList.remove(menuVisibilityVisible);\n        bottomWrapper.classList.remove(menuVisibilityVisible);\n      }, this.ANIMATION_DURATION);\n    }\n  };\n\n  private setMobileMenuAriaAttributes = (menuOpen: boolean) => {\n    if (this.menuButton !== null) {\n      this.menuButton.setAttribute(\"aria-expanded\", `${menuOpen}`);\n      this.menuButton.setAttribute(\n        \"aria-label\",\n        `${menuOpen ? \"Close\" : \"Open\"} navigation menu`\n      );\n    }\n  };\n\n  private setAndRemoveNoWrapAfterMenuExpanded = () => {\n    const appTitle =\n      this.el.shadowRoot.querySelector(\".title-link ic-typography\") ||\n      this.el.querySelector(\"[slot='app-title']\");\n\n    appTitle.classList.add(\"ic-typography-no-wrap\");\n\n    setTimeout(() => {\n      appTitle.classList.remove(\"ic-typography-no-wrap\");\n    }, this.ANIMATION_DURATION);\n  };\n\n  private toggleMenuExpanded = (): void => {\n    this.menuExpanded = !this.menuExpanded;\n\n    if (this.menuExpanded) {\n      this.setAndRemoveNoWrapAfterMenuExpanded();\n      this.el.shadowRoot\n        .querySelector(\".app-title-inner-wrapper\")\n        .classList.add(\"app-title-show\");\n    } else {\n      this.el.style.setProperty(\"--navigation-item-width\", \"320px\");\n      this.el.shadowRoot\n        .querySelector(\".app-title-inner-wrapper\")\n        .classList.remove(\"app-title-show\");\n\n      this.el.addEventListener(\"transitionend\", (e) => {\n        if (e.propertyName === \"width\") {\n          this.el.style.setProperty(\"--navigation-item-width\", null);\n        }\n      });\n    }\n\n    this.arrangeSlottedNavigationItem(this.menuExpanded);\n\n    this.displayTooltipWithExpandedLongLabel(this.menuExpanded);\n\n    if (this.collapsedIconLabels) {\n      this.animateCollapsedIconLabels();\n    }\n\n    this.setExpandedButtonHeight();\n    this.emitSideNavigationExpanded({ sideNavExpanded: this.menuExpanded });\n  };\n\n  /**\n   * In order to style nested slotted elements (e.g. using React Router components), this method\n   * rearranges the a tag and labels and adds inline styling expand/collapsed animations as external CSS classes are not\n   * do not take affect.\n   * @param menuExpanded boolean - true or false depending on side navigation state\n   */\n  private arrangeSlottedNavigationItem = (menuExpanded?: boolean) => {\n    const navItems = this.el.querySelectorAll(\"ic-navigation-item\");\n    navItems.forEach((navItem) => {\n      const isNamedSlot = isSlotUsed(navItem, \"navigation-item\");\n      const isUnnamedSlot =\n        navItem.children[0] && !navItem.children[0].getAttribute(\"slot\");\n      if (isNamedSlot || isUnnamedSlot) {\n        let navItemSlot;\n        if (isNamedSlot) {\n          navItemSlot = navItem.querySelector(\"[slot='navigation-item']\");\n        } else {\n          navItemSlot = navItem.children[0];\n        }\n        const iconWrapper = document.createElement(\"div\");\n        const icon = navItemSlot.querySelector(\"svg\");\n        const label = navItem.textContent.trim();\n        const icTypography = document.createElement(\"ic-typography\");\n        icTypography.classList.add(\n          \"ic-typography-label\",\n          \"hydrated\",\n          \"navigation-item-side-nav-slotted-text\"\n        );\n\n        iconWrapper.style.height = \"var(--ic-space-lg)\";\n        iconWrapper.append(icon);\n\n        navItemSlot.textContent = \"\";\n\n        icTypography.textContent = label;\n\n        navItemSlot.append(iconWrapper);\n        navItemSlot.append(icTypography);\n\n        if (this.collapsedIconLabels) {\n          this.styleSlottedCollapsedIconLabels(menuExpanded, icTypography);\n        } else {\n          this.styleSlottedIconLabels(menuExpanded, icTypography);\n        }\n      }\n    });\n  };\n\n  private styleSlottedCollapsedIconLabels = (\n    menuExpanded: boolean,\n    icTypography: HTMLIcTypographyElement\n  ) => {\n    if (menuExpanded) {\n      icTypography.style.marginTop = \"0\";\n      icTypography.style.whiteSpace = \"nowrap\";\n      icTypography.style.overflow = \"hidden\";\n      icTypography.style.textOverflow = \"ellipsis\";\n    } else {\n      icTypography.style.marginTop = \"10px\";\n      icTypography.style.whiteSpace = \"nowrap\";\n      icTypography.style.overflow = \"hidden\";\n      icTypography.style.textOverflow = \"ellipsis\";\n    }\n  };\n\n  private setExpandedButtonHeight = () => {\n    const appStatusWrapper = this.el.shadowRoot.querySelector(\n      \"#side-navigation > .bottom-wrapper > .bottom-side-nav > .app-status-wrapper\"\n    ) as HTMLDivElement;\n\n    if (appStatusWrapper.offsetHeight !== 0) {\n      this.el.style.setProperty(\n        \"--sm-side-navigation-bottom-bar-height\",\n        `${appStatusWrapper.offsetHeight}px`\n      );\n    }\n  };\n\n  private styleSlottedIconLabels = (\n    menuExpanded: boolean,\n    icTypography: HTMLSpanElement\n  ) => {\n    if (menuExpanded) {\n      icTypography.style.opacity = \"1\";\n      icTypography.style.visibility = \"visible\";\n      icTypography.style.transition =\n        \"visibility 0s, opacity var(--ic-easing-transition-slow)\";\n    } else {\n      icTypography.style.opacity = \"0\";\n      icTypography.style.visibility = \"hidden\";\n      icTypography.style.transition =\n        \"visibility 0s, opacity var(--ic-easing-transition-slow)\";\n    }\n  };\n\n  private transitionHandler = (type: string) => {\n    const primaryNavigationWrapper = this.el.shadowRoot.querySelector(\n      \".primary-navigation\"\n    );\n\n    const secondaryNavigationWrapper = this.el.shadowRoot.querySelector(\n      \".bottom-wrapper > .secondary-navigation\"\n    );\n\n    const classToRemove =\n      type === \"start\"\n        ? this.COLLAPSED_ICON_LABELS_END\n        : this.COLLAPSED_ICON_LABELS_START;\n\n    const classToAdd =\n      type === \"start\"\n        ? this.COLLAPSED_ICON_LABELS_START\n        : this.COLLAPSED_ICON_LABELS_END;\n\n    if (primaryNavigationWrapper) {\n      primaryNavigationWrapper.classList.remove(classToRemove);\n      primaryNavigationWrapper.classList.add(classToAdd);\n    }\n\n    if (secondaryNavigationWrapper) {\n      secondaryNavigationWrapper.classList.remove(classToRemove);\n      secondaryNavigationWrapper.classList.add(classToAdd);\n    }\n  };\n\n  private transitionEndHandler = () => {\n    this.transitionHandler(\"end\");\n  };\n\n  private animateCollapsedIconLabels = () => {\n    this.transitionHandler(\"start\");\n    this.transitionEndHandler();\n\n    this.el.addEventListener(\"transitionend\", this.transitionEndHandler);\n  };\n\n  private paddingIconWidth = (\n    navItems: HTMLIcNavigationItemElement[]\n  ): number => {\n    const navItemLink =\n      (navItems[0].shadowRoot &&\n        (navItems[0].shadowRoot.querySelector(\"ic-tooltip a\") ||\n          navItems[0].shadowRoot.querySelector(\"ic-tooltip div\"))) ||\n      navItems[0].querySelector(\"a\") ||\n      navItems[0].querySelector(\"div\");\n    const navItemSVG = navItems[0].querySelector(\"svg\");\n\n    const navStyles = {\n      gap: window.getComputedStyle(navItemLink).gap,\n      iconWidth: window.getComputedStyle(navItemSVG).width,\n      paddingLeft: window.getComputedStyle(navItemLink).paddingLeft,\n    };\n\n    return Object.values(navStyles).reduce((prev, curr) => {\n      return (prev += parseInt(curr));\n    }, 0);\n  };\n\n  private displayTooltipWithExpandedLongLabel = (menuExpanded: boolean) => {\n    let timer;\n\n    if (menuExpanded) {\n      timer = setTimeout(() => {\n        const sideNavWidth = this.el.clientWidth;\n\n        const navigationItems: HTMLIcNavigationItemElement[] = Array.from(\n          this.el.querySelectorAll(this.IC_NAVIGATION_ITEM)\n        );\n\n        const paddingIconDelta = navigationItems.length\n          ? this.paddingIconWidth(navigationItems)\n          : 0;\n\n        navigationItems.forEach(\n          (navigationItem: HTMLIcNavigationItemElement) => {\n            const icTypographyScrollWidth =\n              (\n                navigationItem.shadowRoot &&\n                navigationItem.shadowRoot.querySelector(\n                  \"ic-tooltip .link ic-typography.ic-typography-label\"\n                )\n              )?.scrollWidth ||\n              navigationItem.querySelector(\"ic-typography.ic-typography-label\")\n                ?.scrollWidth;\n\n            if (icTypographyScrollWidth > sideNavWidth - paddingIconDelta) {\n              navigationItem.setAttribute(\"display-navigation-tooltip\", \"true\");\n            }\n          }\n        );\n      }, this.ANIMATION_DURATION);\n    } else {\n      clearTimeout(timer);\n\n      const navigationItems: HTMLIcNavigationItemElement[] = Array.from(\n        this.el.querySelectorAll(this.IC_NAVIGATION_ITEM)\n      );\n      navigationItems.forEach((navigationItem: HTMLIcNavigationItemElement) => {\n        navigationItem.setAttribute(\"display-navigation-tooltip\", \"false\");\n      });\n    }\n  };\n\n  private setMenuExpanded = (expanded: boolean): void => {\n    this.menuExpanded = expanded;\n  };\n\n  /**\n   * As the mobile top bar is fixed, a padding top is required\n   * to push main content down the height of the mobile top bar\n   * @param value - padding-top css value\n   */\n  private setParentPaddingTop = (value: string) => {\n    this.el.parentElement.style.setProperty(\"padding-top\", value);\n  };\n\n  private setParentPaddingLeft = (value: string) => {\n    this.el.parentElement.style.setProperty(\"padding-left\", value);\n  };\n\n  private renderAppTitle = (isAppNameSubtitleVariant: boolean) => {\n    const displayShortAppTitle =\n      this.deviceSize <= DEVICE_SIZES.S && !isEmptyString(this.shortAppTitle);\n    return (\n      <ic-typography\n        variant={\n          displayShortAppTitle || isAppNameSubtitleVariant\n            ? \"subtitle-small\"\n            : \"h3\"\n        }\n        aria-label={\n          displayShortAppTitle\n            ? `${this.appTitle} (${this.shortAppTitle})`\n            : undefined\n        }\n      >\n        <h1>{displayShortAppTitle ? this.shortAppTitle : this.appTitle}</h1>\n      </ic-typography>\n    );\n  };\n\n  private resizeObserverCallback = (currSize: number) => {\n    this.deviceSize = currSize;\n\n    const isSmallAndDisableTopBar =\n      currSize === DEVICE_SIZES.S && !this.disableTopBarBehaviour;\n\n    if (!this.disableAutoParentStyling) {\n      const topBarHeight =\n        this.el.shadowRoot.querySelector(\".top-bar\")?.scrollHeight;\n      this.setParentPaddingTop(\n        isSmallAndDisableTopBar ? `${topBarHeight}px` : \"0\"\n      );\n      if (isSmallAndDisableTopBar) this.setParentPaddingLeft(\"0\");\n      if (isSmallAndDisableTopBar && this.inline) {\n        this.el.parentElement.style.setProperty(\n          \"height\",\n          `calc(100% - ${topBarHeight}px)`\n        );\n      } else if (!isSmallAndDisableTopBar) {\n        this.el.parentElement.style.setProperty(\"height\", \"100%\");\n      }\n    }\n\n    if (!this.disableAutoParentStyling) {\n      const paddingLeft = `calc(var(--ic-space-xxl) ${\n        this.collapsedIconLabels ? \"* 2\" : \"+ var(--ic-space-xs)\"\n      })`;\n\n      if (currSize > DEVICE_SIZES.L) {\n        this.setParentPaddingTop(\"0\");\n        this.setParentPaddingLeft(\"0\");\n      } else if (\n        (currSize > DEVICE_SIZES.S || this.disableTopBarBehaviour) &&\n        currSize <= DEVICE_SIZES.M &&\n        this.static\n      ) {\n        this.setParentPaddingLeft(paddingLeft);\n      } else if (\n        (currSize > DEVICE_SIZES.S || this.disableTopBarBehaviour) &&\n        currSize <= DEVICE_SIZES.L\n      ) {\n        this.setParentPaddingLeft(\n          this.static && this.menuExpanded\n            ? \"calc(var(--ic-space-xl) * 10)\"\n            : paddingLeft\n        );\n      }\n    }\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      const currSize = getCurrentDeviceSize();\n      this.deviceSizeAppTitle = currSize;\n      this.resizeObserverCallback(currSize);\n    });\n\n    this.resizeObserver.observe(document.body, { box: \"content-box\" });\n  };\n\n  private setCollapsedIconLabels = () => {\n    const navigationItems: HTMLIcNavigationItemElement[] = Array.from(\n      this.el.querySelectorAll(this.IC_NAVIGATION_ITEM)\n    );\n    navigationItems.forEach((navigationItem: HTMLIcNavigationItemElement) => {\n      navigationItem.setAttribute(\"collapsed-icon-label\", \"true\");\n    });\n  };\n\n  private styleSlottedCollapsedIconLabel = () => {\n    const dynamicSlottedIcTypographyComps: HTMLIcTypographyElement[] =\n      Array.from(\n        this.el.querySelectorAll(\".navigation-item-side-nav-slotted-text\")\n      );\n\n    dynamicSlottedIcTypographyComps.forEach((icTypography) => {\n      if (\n        icTypography?.parentElement?.parentElement?.classList.contains(\n          \"navigation-item-side-nav-collapsed-with-label\"\n        )\n      ) {\n        icTypography.style.whiteSpace = \"nowrap\";\n        icTypography.style.overflow = \"hidden\";\n        icTypography.style.textOverflow = \"ellipsis\";\n        icTypography.style.marginTop = \"10px\";\n      }\n    });\n  };\n\n  private renderTopBar = ({\n    isSDevice,\n    foregroundColor,\n    menuOpen,\n    href,\n    isAppNameSubtitleVariant,\n  }: IcTopBar) => {\n    const hasTitle = this.appTitle !== \"\" && isPropDefined(this.appTitle);\n\n    const Component = isSlotUsed(this.el, \"app-title\") ? \"div\" : \"a\";\n\n    const attrs = Component == \"a\" && {\n      href: href,\n    };\n\n    return (\n      <div\n        class={{\n          \"top-bar\": true,\n          [this.foregroundColor]: true,\n        }}\n      >\n        {isSDevice && (\n          <nav\n            aria-labelledby=\"menu-navigation-toggle-button-landmark\"\n            aria-hidden=\"false\"\n          >\n            <ic-button\n              aria-label=\"Open navigation menu\"\n              class=\"menu-button\"\n              id=\"menu-button\"\n              variant=\"secondary\"\n              size=\"small\"\n              full-width=\"true\"\n              appearance={foregroundColor}\n              onClick={this.toggleMenu}\n              ariaOwnsId=\"side-navigation\"\n              aria-haspopup=\"true\"\n              aria-expanded=\"false\"\n              ref={(el) => (this.menuButton = el)}\n            >\n              <span\n                class=\"mobile-top-bar-menu-icon\"\n                slot=\"icon\"\n                innerHTML={menuOpen ? closeIcon : menuIcon}\n              ></span>\n              {menuOpen ? \"Close\" : \"Menu\"}\n            </ic-button>\n            <span\n              id=\"menu-navigation-toggle-button-landmark\"\n              class=\"navigation-landmark-title\"\n              aria-hidden=\"true\"\n            >\n              Navigation menu toggle button\n            </span>\n          </nav>\n        )}\n        <div class=\"app-title-wrapper\">\n          {(hasTitle || isSlotUsed(this.el, \"app-title\")) && (\n            <Component {...attrs} class=\"title-link\">\n              <div class=\"app-icon-container\" aria-hidden=\"true\">\n                <slot name=\"app-icon\"></slot>\n              </div>\n              <div class=\"app-title-inner-wrapper\">\n                {isSlotUsed(this.el, \"app-title\") ? (\n                  <slot name=\"app-title\"></slot>\n                ) : (\n                  this.renderAppTitle(isAppNameSubtitleVariant)\n                )}\n              </div>\n            </Component>\n          )}\n        </div>\n      </div>\n    );\n  };\n\n  render() {\n    const {\n      appTitle,\n      menuOpen,\n      foregroundColor,\n      menuExpanded,\n      href,\n      status,\n      version,\n      collapsedIconLabels,\n      inline,\n    } = this;\n\n    const isSDevice =\n      !this.disableTopBarBehaviour && this.deviceSize === DEVICE_SIZES.S;\n    const isMdDevice = this.deviceSize === DEVICE_SIZES.M;\n    const isLgDevice = this.deviceSize >= DEVICE_SIZES.L;\n    const isAppNameSubtitleVariant = this.deviceSizeAppTitle === DEVICE_SIZES.S;\n    const displayExpandBtn =\n      isMdDevice || this.disableTopBarBehaviour || (isLgDevice && !this.static);\n\n    const topBarProps: IcTopBar = {\n      isSDevice,\n      foregroundColor,\n      menuOpen,\n      href,\n      isAppNameSubtitleVariant,\n      appTitle,\n    };\n\n    return (\n      <Host\n        class={{\n          \"xs-menu-open\": menuOpen && isSDevice,\n          \"xs-menu-close\": !menuOpen && isSDevice,\n          \"sm-collapsed\": !isSDevice && !menuExpanded,\n          \"sm-expanded\": !isSDevice && menuExpanded,\n          \"side-display\":\n            this.deviceSize > DEVICE_SIZES.S || this.disableTopBarBehaviour,\n          [IcThemeForegroundEnum.Dark]:\n            foregroundColor === IcThemeForegroundEnum.Dark,\n          [\"collapsed-labels\"]:\n            !isSDevice && !menuExpanded && collapsedIconLabels,\n          [\"inline\"]: inline,\n        }}\n      >\n        {isSDevice && this.renderTopBar({ ...topBarProps })}\n        <div class=\"side-navigation\" id=\"side-navigation\">\n          {!isSDevice && this.renderTopBar({ ...topBarProps })}\n          <div class=\"side-navigation-inner\">\n            {isSlotUsed(this.el, \"primary-navigation\") && (\n              <nav\n                class=\"primary-navigation\"\n                aria-labelledby=\"primary-navigation-landmark\"\n              >\n                <span\n                  aria-hidden=\"true\"\n                  class=\"navigation-landmark-title\"\n                  id=\"primary-navigation-landmark\"\n                >\n                  Primary\n                </span>\n                <ul class=\"navigation-list\">\n                  <slot name=\"primary-navigation\"></slot>\n                </ul>\n              </nav>\n            )}\n          </div>\n          <div\n            class={{\n              [\"bottom-wrapper\"]: true,\n              [\"classification-spacing\"]: hasClassificationBanner(),\n            }}\n          >\n            {isSlotUsed(this.el, \"secondary-navigation\") && (\n              <nav\n                class=\"secondary-navigation\"\n                aria-labelledby=\"secondary-navigation-landmark\"\n              >\n                <span\n                  aria-hidden=\"true\"\n                  class=\"navigation-landmark-title\"\n                  id=\"secondary-navigation-landmark\"\n                >\n                  Secondary\n                </span>\n                <ul class=\"navigation-list\">\n                  <slot name=\"secondary-navigation\"></slot>\n                </ul>\n              </nav>\n            )}\n            <div class=\"bottom-side-nav\">\n              {this.hasSecondaryNavigation && <ic-divider></ic-divider>}\n              {displayExpandBtn && (\n                <button\n                  class=\"menu-expand-button\"\n                  innerHTML={chevronIcon}\n                  onClick={this.toggleMenuExpanded}\n                  aria-label={`${\n                    menuExpanded ? \"Collapse\" : \"Expand\"\n                  } side navigation`}\n                ></button>\n              )}\n              <div class=\"app-status-wrapper\">\n                {status !== \"\" && (\n                  <div\n                    class={{\n                      [\"app-status\"]: true,\n                    }}\n                  >\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                {version !== \"\" && (\n                  <ic-typography\n                    variant=\"label\"\n                    class=\"app-version\"\n                    aria-label=\"app version\"\n                  >\n                    {version}\n                  </ic-typography>\n                )}\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/core/p-72b350bc.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["CONTEXT_ID_ATTR","TabContext","this","newTabPanels","newTabs","emitEvents","tabIndex","tabLabel","el","querySelectorAll","textContent","trim","icTabSelect","emit","tabSelect","linkTabs","tabs","forEach","tab","index","tabId","contextId","tabPanelId","setAttribute","tabPosition","tabGroup","tabPanels","appearance","IcThemeForegroundEnum","Light","getChildren","querySelector","Array","from","children","filter","child","tagName","enabledTabs","getEnabledTabs","keydownHandler","event","isManual","activationType","enabledTabIndex","findIndex","focusedTabIndex","selectedTab","keyboardFunction","keyboardFocusTab","keyboardSelectTab","preventDefault","key","length","setInitialTab","selectedTabIndex","undefined","firstEnabledTabIndex","configureTabs","selected","tabPanel","hidden","disabled","newIndex","focus","watchAppearanceHandler","updateSelectedTab","newValue","componentDidLoad","addEventListener","componentWillUpdate","disconnectedCallback","removeEventListener","tabClickHandler","detail","position","stopImmediatePropagation","tabCreatedHandler","ev","setFocus","push","tabEnabledHandler","tabRemovedHandler","hadFocus","render","h"],"sources":["src/components/ic-tab-context/ic-tab-context.tsx"],"sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Listen,\n  Prop,\n  State,\n  h,\n  Watch,\n  Method,\n} from \"@stencil/core\";\nimport {\n  IcActivationTypes,\n  IcThemeForegroundNoDefault,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\n\nimport {\n  IcTabClickEventDetail,\n  IcTabSelectEventDetail,\n} from \"../ic-tab/ic-tab.types\";\n\nconst CONTEXT_ID_ATTR = \"context-id\";\n\n@Component({\n  tag: \"ic-tab-context\",\n})\nexport class TabContext {\n  private enabledTabs: HTMLIcTabElement[];\n  private focusedTabIndex: number;\n  private newTabPanels: HTMLIcTabPanelElement[] = [];\n  private newTabs: HTMLIcTabElement[] = [];\n  private tabs: HTMLIcTabElement[];\n  private tabGroup: HTMLIcTabGroupElement;\n  private tabPanels: HTMLIcTabPanelElement[];\n\n  @Element() el: HTMLIcTabContextElement;\n\n  @State() selectedTab: number | null;\n\n  /**\n   * Determines whether tabs have to be manually activated (by pressing 'Enter' or 'Space') when they receive focus using keyboard navigation.\n   */\n  @Prop() activationType?: IcActivationTypes = \"automatic\";\n\n  /**\n   * The appearance of the tab context, e.g dark, or light.\n   */\n  @Prop() appearance?: IcThemeForegroundNoDefault = \"dark\";\n  @Watch(\"appearance\")\n  watchAppearanceHandler(): void {\n    this.tabs.forEach((tab, index) => {\n      tab.appearance = this.appearance;\n      this.tabPanels[index].appearance = this.appearance;\n    });\n    this.tabGroup.appearance = this.appearance;\n  }\n\n  /**\n   * The unique context needed if using multiple tabs inside one another i.e. rendering another set of tabs inside a tab panel.\n   */\n  @Prop({ reflect: true }) contextId?: string = \"default\";\n\n  /**\n   * The selected tab to be controlled by the user. Must be used alongside the icTabSelect event to manage tab selection.\n   */\n  @Prop() selectedTabIndex?: number;\n\n  @Watch(\"selectedTabIndex\")\n  updateSelectedTab(newValue: number): void {\n    this.selectedTab = newValue;\n  }\n\n  /**\n   * Emitted when a user selects a tab.\n   */\n  @Event({ bubbles: false }) icTabSelect: EventEmitter<IcTabSelectEventDetail>;\n\n  /**\n   * @deprecated This event should not be used anymore. Use icTabSelect instead.\n   */\n  @Event({ bubbles: false }) tabSelect: EventEmitter<IcTabSelectEventDetail>;\n\n  componentDidLoad(): void {\n    if (this.selectedTabIndex !== undefined) {\n      this.selectedTab = this.selectedTabIndex;\n    }\n    this.getChildren();\n    this.linkTabs();\n    this.tabGroup.addEventListener(\"keydown\", this.keydownHandler);\n    this.setInitialTab();\n    this.configureTabs();\n  }\n\n  componentWillUpdate(): void {\n    this.configureTabs();\n  }\n\n  disconnectedCallback(): void {\n    this.tabGroup.removeEventListener(\"keydown\", this.keydownHandler);\n  }\n\n  @Listen(\"tabClick\")\n  tabClickHandler(event: CustomEvent<IcTabClickEventDetail>): void {\n    if (\n      this.selectedTabIndex === undefined &&\n      event.detail.contextId === this.contextId\n    ) {\n      this.selectedTab = event.detail.position;\n    }\n    this.emitEvents(event.detail.position);\n    event.stopImmediatePropagation();\n  }\n\n  @Listen(\"tabCreated\")\n  @Listen(\"tabPanelCreated\")\n  tabCreatedHandler(ev: CustomEvent): void {\n    if (this.tabs && this.tabPanels) {\n      (ev.detail.setFocus ? this.newTabs : this.newTabPanels).push(ev.detail);\n      if (this.newTabs.length === this.newTabPanels.length) {\n        this.tabs.push(...this.newTabs);\n        this.tabPanels.push(...this.newTabPanels);\n        this.enabledTabs = this.getEnabledTabs();\n        this.linkTabs();\n        if (!this.tabs[this.selectedTab] || !this.tabPanels[this.selectedTab])\n          this.setInitialTab();\n        this.configureTabs();\n        this.newTabs = [];\n        this.newTabPanels = [];\n      }\n    }\n  }\n\n  @Listen(\"tabEnabled\")\n  tabEnabledHandler(): void {\n    this.enabledTabs = this.getEnabledTabs();\n  }\n\n  /**\n   * @internal Used to set tab/tab panel IDs when a tab/tab panel has been removed\n   */\n  @Method()\n  async tabRemovedHandler(hadFocus?: boolean): Promise<void> {\n    this.getChildren();\n    this.linkTabs();\n    if (this.tabs[this.selectedTab] && this.tabPanels[this.selectedTab]) {\n      this.tabs[this.selectedTab].selected = true;\n      this.tabPanels[this.selectedTab].hidden = false;\n    } else {\n      this.setInitialTab();\n    }\n\n    if (hadFocus) {\n      this.tabs[this.selectedTab].setFocus();\n    }\n  }\n\n  private emitEvents = (tabIndex: number) => {\n    const tabLabel = this.el\n      .querySelectorAll(\"ic-tab\")\n      // eslint-disable-next-line no-unexpected-multiline\n      [tabIndex].textContent.trim();\n    this.icTabSelect.emit({ tabIndex, tabLabel });\n    this.tabSelect.emit({ tabIndex, tabLabel });\n  };\n\n  /** Sets attributes to link tab-group, tabs and tab-panels */\n  private linkTabs = () => {\n    this.tabs.forEach((tab, index) => {\n      const tabId = `ic-tab-${index}-context-${this.contextId}`;\n      const tabPanelId = `ic-tab-panel-${index}-context-${this.contextId}`;\n      tab.setAttribute(\"id\", tabId);\n      tab.tabId = `ic-tab--${index}-context-${this.contextId}`;\n      tab.tabPosition = index;\n      tab.setAttribute(\"aria-controls\", tabPanelId);\n      tab.setAttribute(CONTEXT_ID_ATTR, this.contextId);\n      this.tabGroup.setAttribute(CONTEXT_ID_ATTR, this.contextId);\n      this.tabPanels[index].setAttribute(\"id\", tabPanelId);\n      this.tabPanels[index].setAttribute(\"aria-labelledby\", tabId);\n      this.tabPanels[index].setAttribute(CONTEXT_ID_ATTR, this.contextId);\n\n      if (this.appearance === IcThemeForegroundEnum.Light) {\n        tab.appearance = this.appearance;\n        this.tabPanels[index].appearance = this.appearance;\n      }\n    });\n\n    if (this.appearance === IcThemeForegroundEnum.Light) {\n      this.tabGroup.appearance = this.appearance;\n    }\n  };\n\n  /**\n   * Gets tabs and tabpanels with the same context ID using querySelector to selector the children in relation to the host\n   */\n  private getChildren = (): void => {\n    this.tabGroup = this.el.querySelector(\"ic-tab-group\");\n    this.tabs = Array.from(this.tabGroup.querySelectorAll(\"ic-tab\"));\n    this.tabPanels = Array.from(this.el.children).filter(\n      (child) => child.tagName === \"IC-TAB-PANEL\"\n    ) as HTMLIcTabPanelElement[];\n    this.enabledTabs = this.getEnabledTabs();\n  };\n\n  private keydownHandler = (event: KeyboardEvent) => {\n    const isManual = this.activationType === \"manual\";\n    const enabledTabIndex = this.enabledTabs.findIndex(\n      (tab) =>\n        tab.tabId ===\n        this.tabs[isManual ? this.focusedTabIndex : this.selectedTab].tabId\n    );\n    const keyboardFunction = isManual\n      ? this.keyboardFocusTab\n      : this.keyboardSelectTab;\n    let preventDefault = true;\n    switch (event.key) {\n      case \"Home\":\n        keyboardFunction(0);\n        break;\n      case \"End\":\n        keyboardFunction(this.enabledTabs.length - 1);\n        break;\n      case \"ArrowRight\":\n        keyboardFunction(\n          enabledTabIndex < this.enabledTabs.length - 1\n            ? enabledTabIndex + 1\n            : 0\n        );\n        break;\n      case \"ArrowLeft\":\n        keyboardFunction(\n          (enabledTabIndex > 0 ? enabledTabIndex : this.enabledTabs.length) - 1\n        );\n        break;\n      default:\n        if (isManual && (event.key === \"Enter\" || event.key === \" \")) {\n          this.keyboardSelectTab(this.focusedTabIndex);\n        } else {\n          preventDefault = false;\n        }\n    }\n    if (preventDefault) event.preventDefault();\n  };\n\n  /** Sets the tab that is selected on initial render */\n  private setInitialTab = (): void => {\n    if (this.selectedTabIndex !== undefined) {\n      this.selectedTab = this.selectedTabIndex;\n      this.focusedTabIndex = this.selectedTabIndex;\n    } else {\n      const firstEnabledTabIndex = this.tabs.findIndex(\n        (tab) => tab.tabId === this.enabledTabs[0].tabId\n      );\n      this.selectedTab = firstEnabledTabIndex;\n      this.focusedTabIndex = firstEnabledTabIndex;\n    }\n  };\n\n  /** Passes the selected tab to the tab and tab panel components */\n  private configureTabs = () => {\n    this.enabledTabs.forEach((tab) => {\n      tab.selected = tab.tabPosition === this.selectedTab;\n    });\n    this.tabPanels.forEach((tabPanel, index) => {\n      tabPanel.hidden = index !== this.selectedTab;\n    });\n  };\n\n  private getEnabledTabs = () =>\n    Array.from(this.tabs).filter((child) => !child.disabled);\n\n  /** Sets focus on tab and selects it */\n  private keyboardSelectTab = (enabledTabIndex: number) => {\n    const newIndex = this.tabs.findIndex(\n      (tab) => tab.tabId === this.enabledTabs[enabledTabIndex].tabId\n    );\n    this.enabledTabs[enabledTabIndex].focus();\n    if (this.selectedTabIndex === undefined) {\n      this.selectedTab = newIndex;\n    } else {\n      this.emitEvents(newIndex);\n    }\n  };\n\n  /** Sets focus on tab without selecting it (for manual activation) */\n  private keyboardFocusTab = (enabledTabIndex: number) => {\n    this.enabledTabs[enabledTabIndex].focus();\n    this.focusedTabIndex = this.tabs.findIndex(\n      (tab) => tab.tabId === this.enabledTabs[enabledTabIndex].tabId\n    );\n  };\n\n  render() {\n    return <slot></slot>;\n  }\n}\n"],"mappings":"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"}

package/dist/core/p-836e71de.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["icHorizontalScrollCss","SCROLL_DELAY_MS","HorizontalScroll","this","buttonStateSet","focusHandler","event","itemFocusHandler","Array","from","items","indexOf","target","resizeObserverCallback","el","clientWidth","itemsContainerEl","scrollWidth","itemOverflow","elementOverflowsX","lastItemVisible","offsetWidth","scrollLeft","runResizeObserver","resizeObserver","ResizeObserver","observe","scrollItemIntoView","getCurrentLeftItem","scrollRight","longScrollRight","scrollDelay","window","setTimeout","longScrollLeft","leftArrowMouseDownHandler","e","preventDefault","rightArrowMouseDownHandler","arrowMouseUpHandler","clearTimeout","index","itemOffsets","findIndex","Math","round","scrollHandler","isScrolling","scrollStopped","firstItemVisible","componentWillLoad","children","addEventListener","getSlotElements","forEach","item","focusTrigger","componentDidLoad","runningTotal","map","checkResizeObserver","scrollArrows","shadowRoot","querySelectorAll","arrow","disconnectedCallback","undefined","disconnect","removeEventListener","itemPosition","newScrollPos","render","appearance","h","Host","class","IcThemeForegroundEnum","Dark","Light","role","variant","innerHTML","LeftArrow","disabled","tabindex","onClick","onMouseDown","RightArrow"],"sources":["src/components/ic-horizontal-scroll/ic-horizontal-scroll.css?tag=ic-horizontal-scroll&encapsulation=shadow","src/components/ic-horizontal-scroll/ic-horizontal-scroll.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  --border-bottom-color: var(--ic-architectural-300);\n  --splitter-color: var(--ic-architectural-100);\n\n  display: flex;\n  max-width: 100%;\n}\n\n:host(.light) {\n  --splitter-color: var(--ic-keyline-lighten-rgb);\n}\n\n:host(.dark) {\n  --splitter-color: var(--ic-keyline-darken-rgb);\n}\n\n/* Slotted items container element */\n::slotted(*) {\n  overflow-x: scroll;\n  overflow-y: hidden;\n  scroll-behavior: smooth;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n  margin: calc(var(--ic-space-xs) * -1) !important;\n  padding: var(--ic-space-xs) !important;\n}\n\n:host(.visible) ::slotted(*) {\n  margin: calc(var(--ic-space-xs) * -1) 0 !important;\n  padding: var(--ic-space-xs) !important;\n}\n\n.tabs-container::-webkit-scrollbar {\n  display: none;\n}\n\n.scroll-container-left,\n.scroll-container-right {\n  display: flex;\n}\n\n.scroll-container-left {\n  margin-left: var(--ic-space-xxs);\n}\n\n.scroll-container-right {\n  margin-right: var(--ic-space-xxs);\n}\n\n.hidden {\n  display: none;\n}\n\n.scroll-arrow {\n  margin: var(--ic-space-xxs) 0;\n}\n\n.disabled .ic-tooltip-container {\n  display: none !important;\n}\n\n.scroll-splitter-left,\n.scroll-splitter-right {\n  display: flex;\n  height: var(--ic-space-lg);\n  width: var(--ic-space-1px);\n  margin-top: var(--ic-space-xs);\n  border-radius: var(--ic-space-1px);\n  background-color: var(--splitter-color);\n}\n\n.scroll-splitter-left {\n  margin-left: calc(var(--ic-space-xxs) - var(--ic-space-1px));\n}\n\n.scroll-splitter-right {\n  margin-right: calc(var(--ic-space-xxs) - var(--ic-space-1px));\n}\n\n.disabled .scroll-splitter-left,\n.disabled .scroll-splitter-right {\n  background-color: transparent;\n}\n\n.disabled ic-button > svg {\n  color: var(--ic-keyline-darken-rgb);\n}\n\n:host(.dark) .disabled ic-button > svg,\n:host(.light) .disabled ic-button > svg {\n  color: var(--splitter-color) !important;\n}\n","import {\n  Component,\n  Element,\n  h,\n  Host,\n  State,\n  Method,\n  Prop,\n} from \"@stencil/core\";\n\nimport LeftArrow from \"./assets/left-arrow.svg\";\nimport RightArrow from \"./assets/right-arrow.svg\";\nimport { getSlotElements } from \"../../utils/helpers\";\n\nimport { checkResizeObserver, elementOverflowsX } from \"../../utils/helpers\";\nimport { IcThemeForeground, IcThemeForegroundEnum } from \"../../utils/types\";\n\nconst SCROLL_DELAY_MS = 200;\n\n@Component({\n  tag: \"ic-horizontal-scroll\",\n  styleUrl: \"./ic-horizontal-scroll.css\",\n  shadow: true,\n})\nexport class HorizontalScroll {\n  private buttonStateSet: boolean = false;\n  private isScrolling: number;\n  private itemOffsets: number[];\n  private items: HTMLElement[];\n  private itemsContainerEl: HTMLElement;\n  private resizeObserver: ResizeObserver;\n  private scrollDelay: number;\n\n  @Element() el: HTMLIcHorizontalScrollElement;\n\n  @State() firstItemVisible: boolean = true;\n  @State() itemOverflow: boolean = false;\n  @State() lastItemVisible: boolean = false;\n\n  /**\n   * The appearance of the horizontal scroll, e.g. dark, light or the default.\n   */\n  @Prop() appearance?: IcThemeForeground = \"default\";\n\n  /**\n   * @internal The name of the event that triggers focus handler logic.\n   */\n  @Prop() focusTrigger?: string = \"focus\";\n\n  componentWillLoad(): void {\n    this.itemsContainerEl = this.el.children[0] as HTMLElement;\n    this.itemsContainerEl.addEventListener(\"scroll\", this.scrollHandler);\n    this.items = getSlotElements(this.itemsContainerEl) as HTMLElement[];\n    this.items.forEach((item) => {\n      if (item.addEventListener) {\n        item.addEventListener(this.focusTrigger, this.focusHandler);\n      }\n    });\n  }\n\n  componentDidLoad(): void {\n    let runningTotal = 0;\n    this.itemOffsets = this.items.map((item) => {\n      runningTotal += item.offsetWidth;\n      return runningTotal;\n    });\n\n    checkResizeObserver(this.runResizeObserver);\n\n    // Add event listener to scroll containers as mouse events are not fired on disabled elements (ic-button's <button>)\n    // 'mouseleave' needed in case the user moves their mouse while holding the arrow buttons\n    // - 'mouseup' otherwise not detected and scrolling not stopped\n    const scrollArrows = Array.from(\n      this.el.shadowRoot.querySelectorAll(\"div\")\n    ) as HTMLElement[];\n    [\"mouseup\", \"mouseleave\"].forEach((event) => {\n      scrollArrows.forEach((arrow) =>\n        arrow.addEventListener(event, this.arrowMouseUpHandler)\n      );\n    });\n  }\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== undefined) {\n      this.resizeObserver.disconnect();\n    }\n\n    const scrollArrows = Array.from(\n      this.el.shadowRoot.querySelectorAll(\"div\")\n    ) as HTMLElement[];\n    [\"mouseup\", \"mouseleave\"].forEach((event) => {\n      scrollArrows.forEach((arrow) =>\n        arrow.removeEventListener(event, this.arrowMouseUpHandler)\n      );\n    });\n\n    this.items.forEach((item) => {\n      if (item.removeEventListener) {\n        item.removeEventListener(this.focusTrigger, this.focusHandler);\n      }\n    });\n\n    this.itemsContainerEl.removeEventListener(\"scroll\", this.scrollHandler);\n  }\n\n  /**\n   * @internal if side scrolling enabled, scrolls the specified item into view.\n   */\n  @Method()\n  async scrollItemIntoView(itemPosition: number): Promise<void> {\n    this.firstItemVisible = itemPosition <= 0;\n    const newScrollPos =\n      itemPosition <= 0 ? 0 : this.itemOffsets[itemPosition - 1];\n    this.lastItemVisible =\n      this.itemsContainerEl.offsetWidth + newScrollPos >=\n      this.itemsContainerEl.scrollWidth;\n    this.buttonStateSet = true;\n    this.itemsContainerEl.scrollLeft = newScrollPos;\n  }\n\n  private focusHandler = (event: FocusEvent) => {\n    this.itemFocusHandler(\n      Array.from(this.items).indexOf(event.target as HTMLElement)\n    );\n  };\n\n  private itemFocusHandler(itemPosition: number): void {\n    if (this.itemOverflow) {\n      this.scrollItemIntoView(itemPosition);\n    }\n  }\n\n  private resizeObserverCallback = () => {\n    if (this.el.clientWidth >= this.itemsContainerEl.scrollWidth) {\n      this.itemOverflow = false;\n    } else {\n      this.itemOverflow = elementOverflowsX(this.itemsContainerEl);\n    }\n\n    if (this.itemOverflow) {\n      this.lastItemVisible =\n        this.itemsContainerEl.offsetWidth + this.itemsContainerEl.scrollLeft >=\n        this.itemsContainerEl.scrollWidth;\n    }\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.resizeObserverCallback();\n    });\n    this.resizeObserver.observe(this.itemsContainerEl);\n  };\n\n  private scrollLeft = () => {\n    this.scrollItemIntoView(this.getCurrentLeftItem() - 1);\n  };\n\n  private scrollRight = () => {\n    this.scrollItemIntoView(this.getCurrentLeftItem() + 1);\n  };\n\n  private longScrollRight = () => {\n    this.scrollRight();\n    this.scrollDelay = window.setTimeout(this.longScrollRight, SCROLL_DELAY_MS);\n  };\n\n  private longScrollLeft = () => {\n    this.scrollLeft();\n    this.scrollDelay = window.setTimeout(this.longScrollLeft, SCROLL_DELAY_MS);\n  };\n\n  private leftArrowMouseDownHandler = (e: MouseEvent) => {\n    e.preventDefault();\n    this.scrollDelay = window.setTimeout(this.longScrollLeft, SCROLL_DELAY_MS);\n  };\n\n  private rightArrowMouseDownHandler = (e: MouseEvent) => {\n    e.preventDefault();\n    this.scrollDelay = window.setTimeout(this.longScrollRight, SCROLL_DELAY_MS);\n  };\n\n  private arrowMouseUpHandler = () => {\n    window.clearTimeout(this.scrollDelay);\n  };\n\n  private getCurrentLeftItem = (): number => {\n    const index = this.itemOffsets.findIndex(\n      (el) => el > Math.round(this.itemsContainerEl.scrollLeft)\n    );\n    return index < 0 ? 0 : index;\n  };\n\n  private scrollHandler = () => {\n    window.clearTimeout(this.isScrolling);\n    // Set a timeout to run after scrolling ends\n    this.isScrolling = window.setTimeout(this.scrollStopped, 50);\n  };\n\n  private scrollStopped = () => {\n    // If scrollItemIntoView has been called, the button states will already be set\n    // Can't just handle it here as it causes strange jumping behaviour in positioning\n    const scrollLeft = Math.round(this.itemsContainerEl.scrollLeft);\n    if (this.buttonStateSet === false) {\n      this.firstItemVisible = scrollLeft === 0;\n      this.lastItemVisible =\n        this.itemsContainerEl.offsetWidth + scrollLeft >=\n        this.itemsContainerEl.scrollWidth;\n    }\n    this.buttonStateSet = false;\n  };\n\n  render() {\n    const { appearance, firstItemVisible, lastItemVisible, itemOverflow } =\n      this;\n\n    return (\n      <Host\n        class={{\n          [\"visible\"]: itemOverflow,\n          [\"dark\"]: this.appearance === IcThemeForegroundEnum.Dark,\n          [\"light\"]: this.appearance === IcThemeForegroundEnum.Light,\n        }}\n      >\n        <div\n          aria-hidden=\"true\"\n          class={{\n            [\"scroll-container-left\"]: true,\n            [\"hidden\"]: !itemOverflow,\n            [\"disabled\"]: firstItemVisible,\n          }}\n          role=\"tab\"\n        >\n          <ic-button\n            class=\"scroll-arrow\"\n            variant=\"icon\"\n            aria-label=\"Scroll left\"\n            appearance={appearance}\n            innerHTML={LeftArrow}\n            disabled={firstItemVisible}\n            tabindex=\"-1\"\n            onClick={this.scrollLeft}\n            onMouseDown={this.leftArrowMouseDownHandler}\n          ></ic-button>\n          <span class=\"scroll-splitter-left\"></span>\n        </div>\n        <slot></slot>\n        <div\n          aria-hidden=\"true\"\n          class={{\n            [\"scroll-container-right\"]: true,\n            [\"hidden\"]: !itemOverflow,\n            [\"disabled\"]: lastItemVisible,\n          }}\n          role=\"tab\"\n        >\n          <span class=\"scroll-splitter-right\"></span>\n          <ic-button\n            class=\"scroll-arrow\"\n            variant=\"icon\"\n            aria-label=\"Scroll right\"\n            appearance={appearance}\n            innerHTML={RightArrow}\n            disabled={lastItemVisible}\n            tabindex=\"-1\"\n            onClick={this.scrollRight}\n            onMouseDown={this.rightArrowMouseDownHandler}\n          ></ic-button>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/core/p-936ab032.entry.js

@@ -1,2 +0,0 @@
-import{r as i,c as t,h as e,H as a,g as o}from"./p-6b5e91e2.js";import{i as n,D as s,b as r,e as d,z as c}from"./p-fef9e8c9.js";import{C as l}from"./p-3b185c32.js";import{O as v}from"./p-426ec638.js";import"./p-26b7b18f.js";const h='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block}:host(:focus-within){z-index:var(--ic-z-index-navigation-item)}svg{width:var(--ic-space-xl);fill:var(--ic-theme-text)}.svg{margin-left:auto}.chevron-container svg,.chevron-container .svg{width:var(--ic-space-lg);height:var(--ic-space-lg)}.chevron-container{flex-grow:1}:host(.expandable.navigation-item) .link,:host(.expandable.navigation-item) ::slotted(a){padding-right:0}:host(.navigation-item) .link,:host(.navigation-item) ::slotted(a){height:calc(100% - var(--ic-space-xxs));width:-moz-fit-content;width:fit-content;color:var(--ic-theme-text);display:flex;align-items:center;justify-content:center;padding:0 var(--ic-space-md) var(--ic-space-xxs);text-decoration:none;transition:var(--ic-easing-transition-fast);position:relative;white-space:nowrap}:host(.navigation-item) ::slotted(a){height:100%;font:var(--ic-font-label) !important;letter-spacing:var(--ic-font-letter-spacing-0pt025) !important;padding:0 var(--ic-space-md) !important}:host(.navigation-item-selected) .link::after,:host(.navigation-item-selected) ::slotted(a.active)::after,:host(.navigation-item-top-nav) ::slotted(a.active)::after{content:"";height:0.25rem;width:100%;position:absolute;bottom:0;background-color:var(--ic-theme-text)}:host(.navigation-item-selected.navigation-item-page-header) ::slotted(a.active)::after,:host(.navigation-item-selected.navigation-item-page-header) .link::after,:host(.navigation-item.navigation-item-page-header) ::slotted(a.active)::after,:host(.navigation-item-top-nav-child) ::slotted(a.active)::after{content:none}:host(.navigation-item-side-menu-selected) .link,:host(.navigation-item-side-menu) ::slotted(a.active),:host(.navigation-item-top-nav-child) ::slotted(a.active){box-shadow:none}:host(.navigation-item) .link:hover:not(:focus){background-color:var(--ic-theme-hover);cursor:pointer}:host(.navigation-item:not(.navigation-item-page-header,.navigation-item-side-menu)) ::slotted(a:hover:not(:focus)){background-color:var(--ic-theme-hover) !important}:host(.navigation-item:not(.navigation-item-top-nav-child,.navigation-item-side-menu,.navigation-item-top-nav-child-selected .navigation-item-side-menu-selected)) .focus-indicator:focus-within{box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius)}:host(.navigation-item) .link:focus,:host(.navigation-item) ::slotted(a:focus){box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);outline:var(--ic-hc-focus-outline)}:host(.navigation-item-selected) .link:focus,:host(.navigation-item) ::slotted(a.active:focus){box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);outline:var(--ic-hc-focus-outline)}:host(.navigation-item-selected.dark) .link:focus,:host(.navigation-item.dark) ::slotted(a.active:focus){box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);outline:var(--ic-hc-focus-outline)}:host(.navigation-item) .link:active:not(:focus),:host(.navigation-item) ::slotted(a:active:not(:focus)){background-color:var(--ic-theme-active)}:host(.navigation-item-side-menu) .link,:host(.navigation-item-side-menu) ::slotted(a){min-height:2.5rem;height:auto;width:100%;box-sizing:border-box;color:var(--ic-color-primary-text);display:flex;align-items:center;justify-content:flex-start;text-decoration:none;text-wrap:wrap;white-space:normal;transition:box-shadow var(--ic-transition-duration-fast),\n    border-radius var(--ic-transition-duration-fast)}:host(.navigation-item-side-menu) ::slotted(a){font:var(--ic-font-body) !important;letter-spacing:var(--ic-font-letter-spacing-0pt005) !important;transition:box-shadow var(--ic-easing-transition-fast),\n    background-color var(--ic-easing-transition-fast)}:host(.navigation-item-side-menu) .link:hover:not(:focus){background-color:var(--ic-action-dark-bg-hover)}:host(.navigation-item-side-menu) ::slotted(a:hover:not(:focus)){background-color:var(--ic-action-dark-bg-hover) !important}:host(.navigation-item-side-menu) .focus-indicator:focus-within{box-shadow:none}:host(.navigation-item-side-menu) .link:focus,:host(.navigation-item-side-menu) ::slotted(a:focus){box-shadow:var(--ic-border-focus-inset) !important;width:auto;border-radius:var(--ic-border-radius-inset) !important}:host(.navigation-item-side-menu-selected) .link,:host(.navigation-item-side-menu-selected) ::slotted(a){transition:box-shadow var(--ic-easing-transition-slow),\n    background-color var(--ic-easing-transition-slow)}:host(.navigation-item-side-menu-selected) .link:focus,:host(.navigation-item-side-menu) ::slotted(a.active:focus),:host(.navigation-item-top-nav-child) ::slotted(a.active:focus){margin-left:var(--ic-space-xs) !important;padding-left:var(--ic-space-xs) !important}:host(.navigation-item-top-nav-child) .link,:host(.navigation-item-top-nav-child) ::slotted(a){height:2.5rem;width:-moz-fit-content;width:fit-content;min-width:9.063rem;color:var(--ic-color-primary-text);display:flex;align-items:center;justify-content:flex-start;padding:0 var(--ic-space-md) !important;text-decoration:none;position:relative;transition:box-shadow var(--ic-transition-duration-fast),\n    border-radius var(--ic-transition-duration-slow)}:host(.navigation-item-top-nav-child) ::slotted(a){font:var(--ic-font-body) !important;letter-spacing:var(--ic-font-letter-spacing-0pt005) !important}:host(.navigation-item-top-nav-child) .link:hover:not(:focus){background-color:var(--ic-action-dark-bg-hover) !important}:host(.navigation-item-top-nav-child) ::slotted(a:hover):not(:focus){background-color:var(--ic-action-dark-bg-hover) !important}:host(.navigation-item-top-nav-child) .link:focus,:host(.navigation-item-top-nav-child) ::slotted(a:focus){z-index:1;outline:var(--ic-hc-focus-outline);border-radius:var(--ic-border-radius-inset);box-shadow:var(--ic-border-focus-inset);transition:border-radius 0s, box-shadow var(--ic-transition-duration-fast)}:host(.navigation-item-top-nav-child) ::slotted(a.active:focus){box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset)}:host(.navigation-item-side-menu) .link:active:not(:focus){background-color:var(--ic-action-dark-bg-active)}:host(.navigation-item-top-nav-child) .link:active:not(:focus),:host(.navigation-item-top-nav-child) ::slotted(a:active):not(:focus){outline:var(--ic-hc-focus-outline);background-color:var(--ic-action-dark-bg-active)}:host(.navigation-item-top-nav-child) ::slotted(a:active):not(:focus),:host(.navigation-item-side-menu) ::slotted(a:active):not(:focus){background-color:var(--ic-action-dark-bg-active) !important}:host(.navigation-item-side-menu-selected) *,:host(.navigation-item-top-nav-child-selected) *,:host(.navigation-item-side-menu) ::slotted(a.active),:host(.navigation-item-top-nav-child) ::slotted(a.active){font-weight:700 !important}:host(.navigation-item-top-nav-child) ::slotted(a.active)::before,:host(.navigation-item-top-nav-child-selected) .link::before,:host(.navigation-item-side-menu-selected) .link::before,:host(.navigation-item-side-menu) ::slotted(a.active)::before,:host(.navigation-item-side-menu-selected) .link:focus::before,:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before{content:"";position:absolute;left:0;width:var(--ic-space-xs);height:inherit;min-height:2.5rem;background-color:var(--ic-action-default);transition:left 0s}:host(.navigation-item-top-nav-child-selected) .link::before,:host(.navigation-item-side-menu-selected) .link::before,:host(.navigation-item-side-menu-selected) .link:focus::before{margin-top:0.25rem}:host(.navigation-item-top-nav-child-selected) .link:focus{margin-left:var(--ic-space-xs);margin-right:calc(-1 * var(--ic-space-xs));padding-left:var(--ic-space-xs) !important}:host(.navigation-item-top-nav-child-selected) .link:focus::before{left:calc(-1 * var(--ic-space-xs));z-index:1}:host(.navigation-item-side-menu-selected) .link::before,:host(.navigation-item-side-menu) ::slotted(a.active)::before,:host(.navigation-item-side-menu-selected) .link:focus::before,:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before{z-index:1}:host(.navigation-item-side-menu-selected) .link:focus::before,:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before,:host(.navigation-item-top-nav-child) ::slotted(a.active:focus)::before{left:calc(-1 * var(--ic-space-xs))}:host(.navigation-item-side-menu-selected) .link::after{display:none}:host(.navigation-item-side-nav-collapsed) .link{height:100%}:host(.navigation-item-side-nav-collapsed) ::slotted(svg),:host(.navigation-item-side-nav-collapsed-with-label) ::slotted(svg){margin:auto;pointer-events:none}:host(.navigation-item-side-nav-collapsed) .icon,:host(.navigation-item-side-nav-collapsed-with-label) .icon,:host(.navigation-item-side-nav-collapsed-with-label) ic-typography{align-items:center;padding:0;margin:auto 0;width:-moz-fit-content;width:fit-content;pointer-events:none}:host(.navigation-item-side-nav-collapsed-with-label) ic-typography{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;text-align:center}:host(.navigation-item-side-nav-collapsed-with-label) .link,:host(.navigation-item-side-nav-collapsed-with-label) ::slotted(a){display:flex;flex-direction:column;height:-moz-fit-content;height:fit-content;padding:var(--ic-space-xs) !important;gap:var(--ic-space-xxs)}:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label) .link,:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label) ::slotted(a){height:auto !important;gap:0;width:auto;padding:var(--ic-space-xs) !important}:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label) ::slotted(a){display:block;text-align:center}:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label) .link ic-typography{opacity:1;min-width:-moz-min-content;min-width:min-content}:host(.navigation-item-side-nav-collapsed) svg,:host(.navigation-item-side-nav-collapsed-with-label) svg{display:none}::slotted(svg){fill:var(--ic-theme-text);width:var(--ic-space-lg);margin-left:var(--ic-space-md)}.icon{height:var(--ic-space-lg);width:var(--ic-space-xxl);margin-left:calc(-1 * var(--ic-space-md));flex:0 1 0%;position:relative}.icon>::slotted(*){margin-left:var(--ic-space-md) !important}:host(.navigation-item-side-nav-collapsed) .icon>::slotted(*){margin:auto !important}:host(.navigation-item-side-nav) .link,:host(.navigation-item-side-nav) ::slotted(a){height:var(--navigation-item-height, 56px);min-height:var(--navigation-item-min-height);width:var(--navigation-item-width, auto);justify-content:var(--navigation-item-justify-content);display:flex;gap:var(--ic-space-xs);box-sizing:border-box;color:var(--navigation-item-child-color) !important;text-decoration:none !important;white-space:nowrap;padding-top:var(--ic-space-md) !important;padding-bottom:var(--ic-space-md) !important;text-wrap:wrap}:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link,:host(.navigation-item-side-nav.navigation-item-top-nav-child) ::slotted(a){height:var(--navigation-item-child-height);width:var(--navigation-group-width);color:var(--navigation-item-child-color) !important;display:flex;gap:0.625rem;box-sizing:border-box;min-width:0;transition:box-shadow var(--ic-easing-transition-fast);text-decoration:none !important;white-space:nowrap}:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link:focus,:host(.navigation-item-side-nav.navigation-item-top-nav-child) ::slotted(a:focus){box-shadow:var(--ic-border-focus-dark)}:host(.navigation-item-side-nav.navigation-item-side-menu) .link:active{background-color:var(--navigation-item-child-active)}:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link:active,:host(.navigation-item-side-nav.navigation-item-top-nav-child) ::slotted(a:active){background-color:var(--navigation-item-child-active)}:host(.navigation-item-side-nav) a.link ic-typography,:host(.navigation-item-side-nav.navigation-item-top-nav-child) a.link ic-typography,:host(.navigation-item-side-nav) div.link ic-typography,:host(.navigation-item-side-nav.navigation-item-top-nav-child) div.link ic-typography,.navigation-item-side-nav-slotted-text{opacity:var(--navigation-item-label-opacity);transition:opacity var(--ic-easing-transition-slow);white-space:wrap;text-overflow:ellipsis;overflow:hidden}:host(.navigation-item-side-nav.navigation-item-selected) .link,:host(.navigation-item-side-nav.navigation-item) ::slotted(a.active){box-shadow:inset 0.313rem 0 0 var(--ic-theme-text)}:host(.navigation-item-side-nav.navigation-item-selected) .link::before,:host(.navigation-item-side-nav) ::slotted(a.active)::before{content:"";display:block;position:absolute;inset:0 0 0 0.313rem;border-radius:0.688rem !important;transition:var(--ic-easing-transition-slow)}:host(.navigation-item-side-nav.navigation-item-selected) .link:focus::before,:host(.navigation-item-side-nav) ::slotted(a.active:focus)::before{box-shadow:var(--ic-border-focus-inset)}:host(:not(.navigation-item-side-nav-collapsed).navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label) .link{opacity:var(--navigation-item-label-opacity);height:auto}:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label) .link,:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label) ::slotted(a){min-width:var(--navigation-group-item-min-width);padding:var(--ic-space-xs) !important;height:auto;gap:0}:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label) ::slotted(a){display:block}:host(.navigation-item-side-nav.navigation-item-selected) .link::after,:host(.navigation-item-side-nav) ::slotted(a.active)::after{display:none}:host(.navigation-item-side-nav.navigation-item) .link:focus,:host(.navigation-item-side-nav.navigation-item) ::slotted(a:focus){box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset);background-color:transparent}:host(.navigation-item-side-nav.navigation-item-selected) .link:focus,:host(.navigation-item-side-nav) ::slotted(a.active:focus){margin:0 auto;box-shadow:inset 0.313rem 0 0 var(--ic-theme-text);border-radius:0}:host(.navigation-item-side-nav.navigation-item) .link:hover:not(:focus){background-color:var(--ic-theme-hover) !important}:host(.navigation-item-page-header).link,:host(.navigation-item-page-header) a,:host(.navigation-item-page-header) ::slotted(a){height:2.5rem !important;color:var(--ic-color-primary-text) !important;transition:all var(--ic-easing-transition-fast) !important;box-shadow:rgba(23 89 188 / 0%) !important}:host(.navigation-item-page-header.navigation-item-selected) .link::after,:host(.navigation-item-page-header) ::slotted(a.active)::after{content:" " !important;position:absolute;bottom:0;left:0;right:0;height:var(--ic-space-xxs);background-color:var(--ic-action-default) !important}:host(.navigation-item-page-header) .link:hover,:host(.navigation-item-page-header) ::slotted(.link:hover),:host(.navigation-item-page-header) ::slotted(a:hover),:host(.navigation-item-page-header) .link:hover:not(:focus){background-color:var(--ic-action-default-bg-hover) !important;cursor:pointer}:host(.navigation-item-page-header) .link:focus,:host(.navigation-item-page-header) ::slotted(a:focus){box-shadow:var(--ic-border-focus)}:host(.navigation-item-page-header) .link:active,:host(.navigation-item-page-header) ::slotted(a:active){background-color:var(--ic-action-default-bg-active) !important}:host(.navigation-item-page-header.navigation-item-selected) .link:focus::after,:host(.navigation-item-page-header) ::slotted(a.active:focus)::after{border-bottom-left-radius:var(--ic-border-radius);border-bottom-right-radius:var(--ic-border-radius)}:host(.navigation-item-page-header.navigation-item-selected.with-transition) .link,:host(.navigation-item-page-header.navigation-item-selected.with-transition) ::slotted(a.active){transition:all var(--ic-easing-transition-fast),\n    border-color var(--ic-transition-duration-fast)}:host(.navigation-item-page-header) ::slotted(a.active)::before,:host(.navigation-item-page-header) ::slotted(a.active:focus)::before,:host(.navigation-item-page-header.navigation-item-selected) .link:focus::before{display:none}.open-in-new-icon{flex:1}.open-in-new-icon svg{margin-top:var(--ic-space-xxs);padding-left:var(--ic-space-xxs)}:host(.navigation-item-side-nav) .open-in-new-icon{margin-left:calc(-1 * var(--ic-space-xs))}:host(.navigation-item-top-nav) .open-in-new-icon svg,:host(.navigation-item-page-header) .open-in-new-icon svg,:host(.navigation-item-side-nav) .open-in-new-icon svg{height:0.875rem;width:0.875rem}:host(.navigation-item-side-menu) .open-in-new-icon svg,:host(.navigation-item-top-nav-child) .open-in-new-icon svg{height:var(--ic-space-md);width:var(--ic-space-md)}:host(.navigation-item-page-header) .open-in-new-icon svg,:host(.navigation-item-top-nav-child) .open-in-new-icon svg,:host(.navigation-item-side-menu) .open-in-new-icon svg{fill:var(--ic-color-primary-text)}@media (forced-colors: active){.open-in-new-icon svg{fill:currentcolor}}';const m=class{constructor(a){i(this,a);this.childBlur=t(this,"childBlur",7);this.navItemClicked=t(this,"navItemClicked",7);this.isInitialRender=true;this.displayDefaultNavigationItem=(i,t,a,o,s,r,d)=>{const c=this.isTopNavChild||this.inTopNavSideMenu?"body":"label";const h=this.expandable&&e("div",{class:{svg:true},innerHTML:l});const m=this.el.querySelector('[slot="icon"]')&&e("div",{class:"icon"},e("slot",{name:"icon"}),n(this.el,"badge")&&e("slot",{name:"badge"}));if(i!==""){return e("a",{href:i,target:a,rel:o,hreflang:t,referrerPolicy:s,download:r!==false?r:null,class:"link",ref:i=>this.itemEl=i,part:"link"},m,e("ic-typography",{variant:c},d),e("div",{class:"chevron-container"},h),a==="_blank"&&e("span",{class:"open-in-new-icon",innerHTML:v}))}return e("div",{tabindex:"0",class:"link",ref:i=>this.itemEl=i},m,e("ic-typography",{variant:c},d),h)};this.topNavResizedHandler=({detail:i})=>{var t;const{size:e}=i;if(e!==this.deviceSize){this.deviceSize=e;this.inTopNavSideMenu=e<=(((t=this.parentEl)===null||t===void 0?void 0:t.customMobileBreakpoint)||s.L)}};this.sideNavExpandHandler=({detail:i})=>{const{sideNavExpanded:t,sideNavMobile:e}=i;this.sideNavExpanded=t;this.isSideNavMobile=e};this.handleBlur=({relatedTarget:i})=>{if(i===null||i.tagName!=="IC-NAVIGATION-ITEM"){this.childBlur.emit()}};this.handleClick=()=>{this.navItemClicked.emit()};this.generateTooltipLabel=()=>{if(this.label){return this.label}if(this.navigationSlot){return this.navigationSlot.textContent}if(this.el.children[0]){return this.el.children[0].textContent}return""};this.renderNavigationItemContent=()=>{if(this.label){return this.displayDefaultNavigationItem(this.href,this.hreflang,this.target,this.rel,this.referrerpolicy,this.download,this.label)}if(this.navigationSlot){return e("slot",{name:"navigation-item"})}return e("slot",null)};this.deviceSize=s.XL;this.focusStyle=r();this.inTopNavSideMenu=false;this.isSideNavMobile=false;this.isTopNavChild=false;this.navigationType=undefined;this.parentEl=undefined;this.sideNavExpanded=false;this.collapsedIconLabel=false;this.displayNavigationTooltip=false;this.download=false;this.expandable=false;this.href="";this.hreflang=undefined;this.label=undefined;this.rel=undefined;this.referrerpolicy=undefined;this.selected=false;this.target=undefined}disconnectedCallback(){if(this.navigationType==="side"){this.parentEl.removeEventListener("sideNavExpanded",this.sideNavExpandHandler)}else if(this.navigationType==="top"){this.parentEl.removeEventListener("topNavResized",this.topNavResizedHandler)}}componentWillLoad(){const{navType:i,parent:t}=c(this.el);this.navigationType=i;this.parentEl=t;this.deviceSize=d();if(this.navigationType==="side"){this.parentEl.addEventListener("sideNavExpanded",this.sideNavExpandHandler)}else if(this.navigationType==="top"){this.parentEl.addEventListener("topNavResized",this.topNavResizedHandler);if(this.el.parentElement.tagName==="IC-NAVIGATION-GROUP")this.isTopNavChild=true;if(this.deviceSize<=this.parentEl.customMobileBreakpoint)this.inTopNavSideMenu=true}this.navigationSlot=this.el.querySelector('[slot="navigation-item"]');if(this.navigationSlot){this.navigationSlot.ariaLabel=this.navigationSlot.textContent.trim()}}componentDidUpdate(){this.isInitialRender=false}themeChangeHandler({detail:i}){this.focusStyle=i.mode}async setFocus(){var i;(i=this.itemEl)===null||i===void 0?void 0:i.focus()}render(){const{inTopNavSideMenu:i,isTopNavChild:t,selected:o}=this;return e(a,{class:{["navigation-item"]:true,["navigation-item-top-nav"]:!i&&this.navigationType==="top",["navigation-item-top-nav-child-selected"]:t&&!i&&o,[this.focusStyle]:!i&&!t||this.navigationType==="side"&&t,["navigation-item-selected"]:!t&&o,["navigation-item-side-menu"]:i,["navigation-item-side-menu-selected"]:i&&o,["navigation-item-top-nav-child"]:t&&!i,["navigation-item-page-header"]:this.navigationType==="page-header",["with-transition"]:!this.isInitialRender,["navigation-item-side-nav"]:this.navigationType==="side",["navigation-item-side-nav-collapsed"]:(!this.sideNavExpanded||this.displayNavigationTooltip)&&this.navigationType==="side",["navigation-item-side-nav-collapsed-with-label"]:!this.sideNavExpanded&&this.navigationType==="side"&&this.collapsedIconLabel&&!this.isSideNavMobile,["expandable"]:this.expandable},onBlur:t&&!i?this.handleBlur:null,onClick:this.handleClick,"aria-current":o?"page":null,role:"listitem"},e("ic-tooltip",{label:this.generateTooltipLabel(),target:"navigation-item",placement:"right",class:{["tooltip-navigation-item"]:true,["tooltip-navigation-item-side-nav-collapsed"]:(!this.sideNavExpanded||this.displayNavigationTooltip)&&this.navigationType==="side",["tooltip-long-label-navigation-item-side-nav-expanded"]:this.el.hasAttribute("[display-navigation-tooltip = 'true']")}},this.renderNavigationItemContent()))}static get delegatesFocus(){return true}get el(){return o(this)}};m.style=h;export{m as ic_navigation_item};
-//# sourceMappingURL=p-936ab032.entry.js.map