@ukic/web-components 2.4.0 → 2.5.0

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

@@ -4,21 +4,38 @@ import chevronIcon from "../../assets/chevron-icon.svg";
 export class NavigationGroup {
   constructor() {
     this.allGroupedNavigationItems = [];
-    this.DYNAMIC_GROUPED_LINKS_HEIGHT_MS = 50;
+    this.DYNAMIC_GROUPED_LINKS_HEIGHT_MS = 100;
     this.IC_NAVIGATION_ITEM = "ic-navigation-item";
     this.mouseGate = false;
     this.nodeName = "IC-NAVIGATION-GROUP";
+    this.GROUPED_LINKS_WRAPPER_CLASS = ".grouped-links-wrapper";
     this.sideNavExpandHandler = (event) => {
       this.isSideNavExpanded = event.detail.sideNavExpanded;
-      if (this.isCollapsedLabelVariant === undefined) {
-        this.isCollapsedLabelVariant = !!event.target.getAttribute("collapsed-icon-labels");
+      const linkWrapper = this.el.shadowRoot.querySelector(this.GROUPED_LINKS_WRAPPER_CLASS);
+      if (!linkWrapper)
+        return;
+      if (this.isSideNavExpanded) {
+        if (this.expanded && this.expandedNavItemsHeight) {
+          this.setGroupedLinksElementHeight(linkWrapper, this.expandedNavItemsHeight);
+        }
+        else if (this.expanded) {
+          setTimeout(() => {
+            this.expandedNavItemsHeight = this.getNavigationChildItemsHeight();
+            this.setGroupedLinksElementHeight(linkWrapper, this.expandedNavItemsHeight);
+          }, this.DYNAMIC_GROUPED_LINKS_HEIGHT_MS);
+        }
       }
-      // Store sum of heights on all collapsed icon label items
-      if (this.isCollapsedLabelVariant && !this.isSideNavExpanded) {
-        this.collapsedIconLabelsNavigationItemsHeight =
-          this.getNavigationChildItemsHeight();
+      else {
+        if (this.expanded && this.collapsedNavItemsHeight) {
+          this.setGroupedLinksElementHeight(linkWrapper, this.collapsedNavItemsHeight);
+        }
+        else if (this.expanded) {
+          setTimeout(() => {
+            this.collapsedNavItemsHeight = this.getNavigationChildItemsHeight();
+            this.setGroupedLinksElementHeight(linkWrapper, this.collapsedNavItemsHeight);
+          }, this.DYNAMIC_GROUPED_LINKS_HEIGHT_MS);
+        }
       }
-      setTimeout(() => this.setInitialGroupedLinksWrapperHeight(), this.DYNAMIC_GROUPED_LINKS_HEIGHT_MS);
     };
     this.topNavResizedHandler = (ev) => {
       const newSize = ev.detail.size;
@@ -39,20 +56,25 @@ export class NavigationGroup {
       });
     };
     this.toggleGroupedLinkWrapperHeight = (wrapper, expanded) => {
-      if (wrapper) {
-        if (expanded) {
-          wrapper.setAttribute("style", `--navigation-child-items-height: ${this.getNavigationChildItemsHeight()}`);
-          this.setGroupedNavItemTabIndex("0");
+      if (!wrapper)
+        return;
+      if (expanded) {
+        if (this.isSideNavExpanded) {
+          this.setGroupedLinksElementHeight(wrapper, this.expandedNavItemsHeight);
         }
         else {
-          wrapper.setAttribute("style", `--navigation-child-items-height: 0`);
-          this.setGroupedNavItemTabIndex("-1");
+          this.setGroupedLinksElementHeight(wrapper, this.collapsedNavItemsHeight);
         }
+        this.setGroupedNavItemTabIndex("0");
+      }
+      else {
+        wrapper.style.setProperty("--navigation-child-items-height", "0");
+        this.setGroupedNavItemTabIndex("-1");
       }
     };
     this.toggleExpanded = () => {
       this.expanded = !this.expanded;
-      const linkWrapper = this.el.shadowRoot.querySelector(".grouped-links-wrapper");
+      const linkWrapper = this.el.shadowRoot.querySelector(this.GROUPED_LINKS_WRAPPER_CLASS);
       this.toggleGroupedLinkWrapperHeight(linkWrapper, this.expanded);
     };
     this.handleClick = (ev) => {
@@ -144,24 +166,23 @@ export class NavigationGroup {
     this.getNavigationChildItemsHeight = () => {
       let navigationChildItemsHeight = 0;
       this.allGroupedNavigationItems.forEach((navItem) => {
-        navigationChildItemsHeight += navItem.clientHeight;
+        navigationChildItemsHeight += navItem.offsetHeight;
       });
       return `${navigationChildItemsHeight}px`;
     };
     this.setInitialGroupedLinksWrapperHeight = () => {
-      const linkWrapper = this.el.shadowRoot.querySelector(".grouped-links-wrapper");
-      if (linkWrapper &&
-        this.expanded &&
-        !this.isSideNavExpanded &&
-        this.isCollapsedLabelVariant) {
-        /**
-         * Collapsed icon labels height is different depending on if ic-side-navigation is collapsed or expanded.
-         * If collapsed, use collapsedIconLabelsNavigationItemsHeight which is set on initial load.
-         */
-        linkWrapper.setAttribute("style", `--navigation-child-items-height: ${this.collapsedIconLabelsNavigationItemsHeight}px`);
+      const linkWrapper = this.el.shadowRoot.querySelector(this.GROUPED_LINKS_WRAPPER_CLASS);
+      if (!linkWrapper)
+        return;
+      if (!this.isSideNavExpanded &&
+        !this.collapsedNavItemsHeight &&
+        this.expanded) {
+        this.collapsedNavItemsHeight = this.getNavigationChildItemsHeight();
+        this.setGroupedLinksElementHeight(linkWrapper, this.collapsedNavItemsHeight);
       }
-      else if (linkWrapper && this.expanded) {
-        linkWrapper.setAttribute("style", `--navigation-child-items-height: ${this.getNavigationChildItemsHeight()}`);
+      if (this.isSideNavExpanded && this.expanded) {
+        this.expandedNavItemsHeight = this.getNavigationChildItemsHeight();
+        this.setGroupedLinksElementHeight(linkWrapper, this.expandedNavItemsHeight);
       }
     };
     this.renderNavigationItems = () => {
@@ -246,6 +267,9 @@ export class NavigationGroup {
       this.toggleDropdown();
     }
   }
+  setGroupedLinksElementHeight(groupedNavItemWrapper, height) {
+    groupedNavItemWrapper.style.setProperty("--navigation-child-items-height", height);
+  }
   render() {
     const { label, dropdownOpen, inTopNavSideMenu, expandable } = this;
     const NavigationGroupElement = !inTopNavSideMenu || expandable ? "button" : "div";

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

@@ -1 +1 @@
-{"version":3,"file":"ic-navigation-group.js","sourceRoot":"","sources":["../../../src/components/ic-navigation-group/ic-navigation-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  State,\n  Listen,\n  h,\n  Method,\n} from \"@stencil/core\";\n\nimport {\n  DEVICE_SIZES,\n  getCurrentDeviceSize,\n  getThemeForegroundColor,\n  getNavItemParentDetails,\n} from \"../../utils/helpers\";\nimport { IcNavType, IcTheme } from \"../../utils/types\";\n\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\n\n@Component({\n  tag: \"ic-navigation-group\",\n  styleUrl: \"ic-navigation-group.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class NavigationGroup {\n  private allGroupedNavigationItems: HTMLIcNavigationItemElement[] = [];\n  private collapsedIconLabelsNavigationItemsHeight: string;\n  private dropdown: HTMLElement;\n  private DYNAMIC_GROUPED_LINKS_HEIGHT_MS = 50;\n  private groupEl: HTMLElement;\n  private IC_NAVIGATION_ITEM = \"ic-navigation-item\";\n  private isCollapsedLabelVariant: boolean;\n  private isSideNavExpanded: boolean;\n  private mouseGate: boolean = false;\n  private nodeName = \"IC-NAVIGATION-GROUP\";\n\n  @Element() el: HTMLIcNavigationGroupElement;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() dropdownOpen: boolean = false;\n  @State() expanded: boolean = true;\n  @State() focusStyle = getThemeForegroundColor();\n  @State() inTopNavSideMenu: boolean = false;\n  @State() navigationType: IcNavType | \"\";\n  @State() parentEl: HTMLElement;\n\n  /**\n   *  If `true`, the group will be expandable in the side menu.\n   */\n  @Prop() expandable: boolean = false;\n\n  /**\n   * The label to display on the group.\n   */\n  @Prop() label: string;\n\n  disconnectedCallback(): void {\n    if (this.navigationType === \"side\") {\n      this.parentEl.removeEventListener(\n        \"sideNavExpanded\",\n        this.sideNavExpandHandler\n      );\n    } else if (this.navigationType === \"top\") {\n      this.parentEl.removeEventListener(\n        \"topNavResized\",\n        this.topNavResizedHandler\n      );\n    }\n  }\n\n  componentWillLoad(): void {\n    this.deviceSize = getCurrentDeviceSize();\n    const navParentDetails = getNavItemParentDetails(this.el);\n    this.navigationType = navParentDetails.navType;\n    this.parentEl = navParentDetails.parent;\n    if (this.deviceSize <= DEVICE_SIZES.L && this.navigationType === \"top\") {\n      this.inTopNavSideMenu = true;\n    }\n\n    if (this.navigationType === \"side\") {\n      this.parentEl.addEventListener(\n        \"sideNavExpanded\",\n        this.sideNavExpandHandler\n      );\n    } else if (this.navigationType === \"top\") {\n      this.parentEl.addEventListener(\n        \"topNavResized\",\n        this.topNavResizedHandler\n      );\n    }\n  }\n\n  componentDidLoad(): void {\n    this.allGroupedNavigationItems = Array.from(\n      this.el.querySelectorAll(this.IC_NAVIGATION_ITEM)\n    );\n\n    /**\n     * debounce is required as the incorrect height was retrieved instantly after\n     * componentDidLoad is invoked.\n     */\n    setTimeout(\n      () => this.setInitialGroupedLinksWrapperHeight(),\n      this.DYNAMIC_GROUPED_LINKS_HEIGHT_MS\n    );\n  }\n\n  @Listen(\"childBlur\")\n  childBlurHandler(): void {\n    this.hideDropdown();\n  }\n\n  @Listen(\"navItemClicked\")\n  navItemClickHandler(): void {\n    this.hideDropdown();\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.focusStyle = theme.mode;\n  }\n\n  /**\n   * Sets focus on the nav item.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.groupEl) {\n      this.groupEl.focus();\n    }\n  }\n\n  private sideNavExpandHandler = (event?: CustomEvent): void => {\n    this.isSideNavExpanded = event.detail.sideNavExpanded;\n\n    if (this.isCollapsedLabelVariant === undefined) {\n      this.isCollapsedLabelVariant = !!(\n        event.target as HTMLIcSideNavigationElement\n      ).getAttribute(\"collapsed-icon-labels\");\n    }\n\n    // Store sum of heights on all collapsed icon label items\n    if (this.isCollapsedLabelVariant && !this.isSideNavExpanded) {\n      this.collapsedIconLabelsNavigationItemsHeight =\n        this.getNavigationChildItemsHeight();\n    }\n\n    setTimeout(\n      () => this.setInitialGroupedLinksWrapperHeight(),\n      this.DYNAMIC_GROUPED_LINKS_HEIGHT_MS\n    );\n  };\n\n  private topNavResizedHandler = (ev: CustomEvent): void => {\n    const newSize = ev.detail.size;\n    if (newSize !== this.deviceSize) {\n      this.deviceSize = newSize;\n      this.inTopNavSideMenu = newSize <= DEVICE_SIZES.L;\n    }\n  };\n\n  private toggleDropdown() {\n    this.dropdownOpen = !this.dropdownOpen;\n  }\n\n  private setGroupedNavItemTabIndex = (tabIndexValue: string) => {\n    this.el\n      .querySelectorAll(this.IC_NAVIGATION_ITEM)\n      .forEach((navigationItem) => {\n        const navItem =\n          navigationItem.shadowRoot.querySelector(\"a\") ||\n          navigationItem.querySelector(\"a\");\n        if (navItem) {\n          navItem.setAttribute(\"tabindex\", tabIndexValue);\n        }\n      });\n  };\n\n  private toggleGroupedLinkWrapperHeight = (\n    wrapper: HTMLElement,\n    expanded: boolean\n  ) => {\n    if (wrapper) {\n      if (expanded) {\n        wrapper.setAttribute(\n          \"style\",\n          `--navigation-child-items-height: ${this.getNavigationChildItemsHeight()}`\n        );\n        this.setGroupedNavItemTabIndex(\"0\");\n      } else {\n        wrapper.setAttribute(\"style\", `--navigation-child-items-height: 0`);\n        this.setGroupedNavItemTabIndex(\"-1\");\n      }\n    }\n  };\n\n  private toggleExpanded = () => {\n    this.expanded = !this.expanded;\n    const linkWrapper = this.el.shadowRoot.querySelector(\n      \".grouped-links-wrapper\"\n    ) as HTMLElement;\n    this.toggleGroupedLinkWrapperHeight(linkWrapper, this.expanded);\n  };\n\n  private showDropdown() {\n    if (!this.dropdownOpen) {\n      this.toggleDropdown();\n    }\n  }\n\n  private hideDropdown() {\n    document.removeEventListener(\"keydown\", this.handleKeydown);\n    if (this.dropdownOpen) {\n      this.toggleDropdown();\n    }\n  }\n\n  private handleClick = (ev: MouseEvent) => {\n    if (this.navigationType === \"top\" && ev.detail) {\n      this.toggleDropdown();\n    } else {\n      this.toggleExpanded();\n    }\n  };\n\n  private handleBlur = (ev: FocusEvent) => {\n    const target = ev.relatedTarget as HTMLElement;\n    if (!this.el.contains(target)) {\n      this.hideDropdown();\n    }\n  };\n\n  private handleTopNavKeydown = (ev: KeyboardEvent) => {\n    if (ev.key === \" \" || ev.key === \"Enter\") {\n      this.toggleDropdown();\n    } else if (!this.inTopNavSideMenu && ev.key === \"Escape\") {\n      this.hideDropdown();\n    }\n  };\n\n  private handleKeydown = (ev: KeyboardEvent) => {\n    if (ev.key === \"Enter\" || ev.key === \" \" || ev.key === \"Escape\") {\n      switch (this.navigationType) {\n        case \"top\":\n          this.handleTopNavKeydown(ev as KeyboardEvent);\n          break;\n        case \"side\":\n          this.toggleExpanded();\n          ev.preventDefault();\n          break;\n        default:\n          this.toggleExpanded();\n          break;\n      }\n    }\n  };\n\n  private handleMouseLeave = (ev: MouseEvent) => {\n    const relTarget = ev.relatedTarget as HTMLElement;\n\n    this.mouseGate = false;\n\n    if (\n      !this.el.contains(relTarget) &&\n      relTarget !== this.dropdown &&\n      document.activeElement !== this.el &&\n      !this.el.contains(document.activeElement) &&\n      relTarget.nodeName === this.nodeName &&\n      this.dropdownOpen === true\n    ) {\n      this.mouseGate = true;\n      this.hideDropdown();\n    } else if (\n      !this.el.contains(relTarget) &&\n      relTarget !== this.dropdown &&\n      !this.el.contains(document.activeElement)\n    ) {\n      this.mouseGate = false;\n      setTimeout(() => {\n        this.dropdownOpen ? this.hideDropdown() : null;\n      }, 500);\n    }\n  };\n\n  private handleMouseEnter = (ev: MouseEvent) => {\n    const relTarget = ev.relatedTarget as HTMLElement;\n    document.addEventListener(\"keydown\", this.handleKeydown);\n\n    if (relTarget.nodeName === this.nodeName && this.mouseGate === true) {\n      this.showDropdown();\n    } else if (\n      this.dropdownOpen === false &&\n      relTarget !== null &&\n      this.mouseGate === false\n    ) {\n      this.mouseGate = true;\n      setTimeout(() => {\n        this.mouseGate && this.showDropdown();\n      }, 500);\n    }\n  };\n\n  private renderDropdownGroupedLinks = (): HTMLDivElement => (\n    <div\n      class={{\n        [\"navigation-group-dropdown\"]: !this.inTopNavSideMenu,\n        [\"navigation-group-dropdown-side-menu\"]: this.inTopNavSideMenu,\n        [\"selected\"]: this.dropdownOpen && !this.inTopNavSideMenu,\n      }}\n      onMouseLeave={!this.inTopNavSideMenu ? this.handleMouseLeave : null}\n      ref={(el) => (this.dropdown = el)}\n    >\n      <nav\n        class={{\n          [\"navigation-group-dropdown-items\"]: !this.inTopNavSideMenu,\n        }}\n      >\n        <ul>\n          <slot></slot>\n        </ul>\n      </nav>\n    </div>\n  );\n\n  private renderGroupedLinks = (): HTMLDivElement => (\n    <ul class=\"grouped-links-wrapper\">\n      <slot></slot>\n    </ul>\n  );\n\n  /**\n   * Gets the total height of navigation links to improve\n   * smoothness of expand/collapse animations\n   */\n  private getNavigationChildItemsHeight = (): string => {\n    let navigationChildItemsHeight = 0;\n    this.allGroupedNavigationItems.forEach((navItem) => {\n      navigationChildItemsHeight += navItem.clientHeight;\n    });\n\n    return `${navigationChildItemsHeight}px`;\n  };\n\n  private setInitialGroupedLinksWrapperHeight = () => {\n    const linkWrapper = this.el.shadowRoot.querySelector(\n      \".grouped-links-wrapper\"\n    ) as HTMLElement;\n\n    if (\n      linkWrapper &&\n      this.expanded &&\n      !this.isSideNavExpanded &&\n      this.isCollapsedLabelVariant\n    ) {\n      /**\n       * Collapsed icon labels height is different depending on if ic-side-navigation is collapsed or expanded.\n       * If collapsed, use collapsedIconLabelsNavigationItemsHeight which is set on initial load.\n       */\n      linkWrapper.setAttribute(\n        \"style\",\n        `--navigation-child-items-height: ${this.collapsedIconLabelsNavigationItemsHeight}px`\n      );\n    } else if (linkWrapper && this.expanded) {\n      linkWrapper.setAttribute(\n        \"style\",\n        `--navigation-child-items-height: ${this.getNavigationChildItemsHeight()}`\n      );\n    }\n  };\n\n  private renderNavigationItems = (): HTMLDivElement | null => {\n    if (this.dropdownOpen || (this.inTopNavSideMenu && !this.expandable)) {\n      return this.renderDropdownGroupedLinks();\n    }\n\n    if (this.navigationType !== \"top\") {\n      return this.renderGroupedLinks();\n    }\n\n    return null;\n  };\n\n  render() {\n    const { label, dropdownOpen, inTopNavSideMenu, expandable } = this;\n    const NavigationGroupElement =\n      !inTopNavSideMenu || expandable ? \"button\" : \"div\";\n    return (\n      <Host\n        class={{\n          [\"in-side-menu\"]: inTopNavSideMenu,\n          expanded: this.expanded,\n          collapsed: !this.expanded,\n          [\"navigation-group-side-nav\"]: this.navigationType === \"side\",\n        }}\n        role=\"listitem\"\n      >\n        <NavigationGroupElement\n          onMouseEnter={\n            !inTopNavSideMenu &&\n            this.navigationType === \"top\" &&\n            this.handleMouseEnter\n          }\n          onMouseLeave={this.navigationType === \"top\" && this.handleMouseLeave}\n          tabindex={inTopNavSideMenu && !expandable ? \"-1\" : \"0\"}\n          onBlur={this.handleBlur}\n          onClick={expandable ? this.handleClick : null}\n          onKeyDown={this.handleKeydown}\n          class={{\n            [\"navigation-group\"]: true,\n            [this.focusStyle]: !inTopNavSideMenu,\n            [\"navigation-group-side-menu\"]: inTopNavSideMenu && !expandable,\n            [\"navigation-group-side-menu-collapsed\"]:\n              inTopNavSideMenu && expandable && !dropdownOpen,\n            [\"navigation-group-side-menu-expanded\"]:\n              inTopNavSideMenu && expandable && dropdownOpen,\n            [\"selected\"]: dropdownOpen && !inTopNavSideMenu,\n          }}\n          ref={(el) => (this.groupEl = el)}\n          aria-expanded={dropdownOpen || this.expanded ? \"true\" : \"false\"}\n          aria-haspopup={\n            !inTopNavSideMenu && this.navigationType === \"top\"\n              ? \"true\"\n              : \"false\"\n          }\n        >\n          <ic-typography\n            variant={this.navigationType === \"side\" ? \"caption\" : \"label\"}\n          >\n            {label}\n          </ic-typography>\n          {this.navigationType === \"side\" && expandable && (\n            <div\n              class={{\n                \"chevron-toggle-icon-wrapper\": true,\n                \"chevron-toggle-icon-closed\": this.expanded,\n              }}\n              innerHTML={chevronIcon}\n            ></div>\n          )}\n        </NavigationGroupElement>\n        {this.renderNavigationItems()}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-navigation-group.js","sourceRoot":"","sources":["../../../src/components/ic-navigation-group/ic-navigation-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,MAAM,EACN,CAAC,EACD,MAAM,GACP,MAAM,eAAe,CAAC;AAEvB,OAAO,EACL,YAAY,EACZ,oBAAoB,EACpB,uBAAuB,EACvB,uBAAuB,GACxB,MAAM,qBAAqB,CAAC;AAG7B,OAAO,WAAW,MAAM,+BAA+B,CAAC;AAQxD,MAAM,OAAO,eAAe;;IAClB,8BAAyB,GAAkC,EAAE,CAAC;IAG9D,oCAA+B,GAAG,GAAG,CAAC;IAGtC,uBAAkB,GAAG,oBAAoB,CAAC;IAE1C,cAAS,GAAY,KAAK,CAAC;IAC3B,aAAQ,GAAG,qBAAqB,CAAC;IACjC,gCAA2B,GAAG,wBAAwB,CAAC;IAmGvD,yBAAoB,GAAG,CAAC,KAAmB,EAAQ,EAAE;MAC3D,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC,MAAM,CAAC,eAAe,CAAC;MACtD,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAClD,IAAI,CAAC,2BAA2B,CAClB,CAAC;MAEjB,IAAI,CAAC,WAAW;QAAE,OAAO;MAEzB,IAAI,IAAI,CAAC,iBAAiB,EAAE;QAC1B,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,sBAAsB,EAAE;UAChD,IAAI,CAAC,4BAA4B,CAC/B,WAAW,EACX,IAAI,CAAC,sBAAsB,CAC5B,CAAC;SACH;aAAM,IAAI,IAAI,CAAC,QAAQ,EAAE;UACxB,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,6BAA6B,EAAE,CAAC;YAEnE,IAAI,CAAC,4BAA4B,CAC/B,WAAW,EACX,IAAI,CAAC,sBAAsB,CAC5B,CAAC;UACJ,CAAC,EAAE,IAAI,CAAC,+BAA+B,CAAC,CAAC;SAC1C;OACF;WAAM;QACL,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,uBAAuB,EAAE;UACjD,IAAI,CAAC,4BAA4B,CAC/B,WAAW,EACX,IAAI,CAAC,uBAAuB,CAC7B,CAAC;SACH;aAAM,IAAI,IAAI,CAAC,QAAQ,EAAE;UACxB,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC,6BAA6B,EAAE,CAAC;YAEpE,IAAI,CAAC,4BAA4B,CAC/B,WAAW,EACX,IAAI,CAAC,uBAAuB,CAC7B,CAAC;UACJ,CAAC,EAAE,IAAI,CAAC,+BAA+B,CAAC,CAAC;SAC1C;OACF;IACH,CAAC,CAAC;IAEM,yBAAoB,GAAG,CAAC,EAAe,EAAQ,EAAE;MACvD,MAAM,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC;MAC/B,IAAI,OAAO,KAAK,IAAI,CAAC,UAAU,EAAE;QAC/B,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC;QAC1B,IAAI,CAAC,gBAAgB,GAAG,OAAO,IAAI,YAAY,CAAC,CAAC,CAAC;OACnD;IACH,CAAC,CAAC;IAMM,8BAAyB,GAAG,CAAC,aAAqB,EAAE,EAAE;MAC5D,IAAI,CAAC,EAAE;SACJ,gBAAgB,CAAC,IAAI,CAAC,kBAAkB,CAAC;SACzC,OAAO,CAAC,CAAC,cAAc,EAAE,EAAE;QAC1B,MAAM,OAAO,GACX,cAAc,CAAC,UAAU,CAAC,aAAa,CAAC,GAAG,CAAC;UAC5C,cAAc,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QACpC,IAAI,OAAO,EAAE;UACX,OAAO,CAAC,YAAY,CAAC,UAAU,EAAE,aAAa,CAAC,CAAC;SACjD;MACH,CAAC,CAAC,CAAC;IACP,CAAC,CAAC;IAEM,mCAA8B,GAAG,CACvC,OAAoB,EACpB,QAAiB,EACjB,EAAE;MACF,IAAI,CAAC,OAAO;QAAE,OAAO;MAErB,IAAI,QAAQ,EAAE;QACZ,IAAI,IAAI,CAAC,iBAAiB,EAAE;UAC1B,IAAI,CAAC,4BAA4B,CAAC,OAAO,EAAE,IAAI,CAAC,sBAAsB,CAAC,CAAC;SACzE;aAAM;UACL,IAAI,CAAC,4BAA4B,CAC/B,OAAO,EACP,IAAI,CAAC,uBAAuB,CAC7B,CAAC;SACH;QACD,IAAI,CAAC,yBAAyB,CAAC,GAAG,CAAC,CAAC;OACrC;WAAM;QACL,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,iCAAiC,EAAE,GAAG,CAAC,CAAC;QAClE,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,CAAC;OACtC;IACH,CAAC,CAAC;IAEM,mBAAc,GAAG,GAAG,EAAE;MAC5B,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;MAC/B,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAClD,IAAI,CAAC,2BAA2B,CAClB,CAAC;MACjB,IAAI,CAAC,8BAA8B,CAAC,WAAW,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IAClE,CAAC,CAAC;IAeM,gBAAW,GAAG,CAAC,EAAc,EAAE,EAAE;MACvC,IAAI,IAAI,CAAC,cAAc,KAAK,KAAK,IAAI,EAAE,CAAC,MAAM,EAAE;QAC9C,IAAI,CAAC,cAAc,EAAE,CAAC;OACvB;WAAM;QACL,IAAI,CAAC,cAAc,EAAE,CAAC;OACvB;IACH,CAAC,CAAC;IAEM,eAAU,GAAG,CAAC,EAAc,EAAE,EAAE;MACtC,MAAM,MAAM,GAAG,EAAE,CAAC,aAA4B,CAAC;MAC/C,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE;QAC7B,IAAI,CAAC,YAAY,EAAE,CAAC;OACrB;IACH,CAAC,CAAC;IAEM,wBAAmB,GAAG,CAAC,EAAiB,EAAE,EAAE;MAClD,IAAI,EAAE,CAAC,GAAG,KAAK,GAAG,IAAI,EAAE,CAAC,GAAG,KAAK,OAAO,EAAE;QACxC,IAAI,CAAC,cAAc,EAAE,CAAC;OACvB;WAAM,IAAI,CAAC,IAAI,CAAC,gBAAgB,IAAI,EAAE,CAAC,GAAG,KAAK,QAAQ,EAAE;QACxD,IAAI,CAAC,YAAY,EAAE,CAAC;OACrB;IACH,CAAC,CAAC;IAEM,kBAAa,GAAG,CAAC,EAAiB,EAAE,EAAE;MAC5C,IAAI,EAAE,CAAC,GAAG,KAAK,OAAO,IAAI,EAAE,CAAC,GAAG,KAAK,GAAG,IAAI,EAAE,CAAC,GAAG,KAAK,QAAQ,EAAE;QAC/D,QAAQ,IAAI,CAAC,cAAc,EAAE;UAC3B,KAAK,KAAK;YACR,IAAI,CAAC,mBAAmB,CAAC,EAAmB,CAAC,CAAC;YAC9C,MAAM;UACR,KAAK,MAAM;YACT,IAAI,CAAC,cAAc,EAAE,CAAC;YACtB,EAAE,CAAC,cAAc,EAAE,CAAC;YACpB,MAAM;UACR;YACE,IAAI,CAAC,cAAc,EAAE,CAAC;YACtB,MAAM;SACT;OACF;IACH,CAAC,CAAC;IAEM,qBAAgB,GAAG,CAAC,EAAc,EAAE,EAAE;MAC5C,MAAM,SAAS,GAAG,EAAE,CAAC,aAA4B,CAAC;MAElD,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;MAEvB,IACE,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,SAAS,CAAC;QAC5B,SAAS,KAAK,IAAI,CAAC,QAAQ;QAC3B,QAAQ,CAAC,aAAa,KAAK,IAAI,CAAC,EAAE;QAClC,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC;QACzC,SAAS,CAAC,QAAQ,KAAK,IAAI,CAAC,QAAQ;QACpC,IAAI,CAAC,YAAY,KAAK,IAAI,EAC1B;QACA,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACtB,IAAI,CAAC,YAAY,EAAE,CAAC;OACrB;WAAM,IACL,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,SAAS,CAAC;QAC5B,SAAS,KAAK,IAAI,CAAC,QAAQ;QAC3B,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,EACzC;QACA,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACvB,UAAU,CAAC,GAAG,EAAE;UACd,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;QACjD,CAAC,EAAE,GAAG,CAAC,CAAC;OACT;IACH,CAAC,CAAC;IAEM,qBAAgB,GAAG,CAAC,EAAc,EAAE,EAAE;MAC5C,MAAM,SAAS,GAAG,EAAE,CAAC,aAA4B,CAAC;MAClD,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;MAEzD,IAAI,SAAS,CAAC,QAAQ,KAAK,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,SAAS,KAAK,IAAI,EAAE;QACnE,IAAI,CAAC,YAAY,EAAE,CAAC;OACrB;WAAM,IACL,IAAI,CAAC,YAAY,KAAK,KAAK;QAC3B,SAAS,KAAK,IAAI;QAClB,IAAI,CAAC,SAAS,KAAK,KAAK,EACxB;QACA,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACtB,UAAU,CAAC,GAAG,EAAE;UACd,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;QACxC,CAAC,EAAE,GAAG,CAAC,CAAC;OACT;IACH,CAAC,CAAC;IAEM,+BAA0B,GAAG,GAAmB,EAAE,CAAC,CACzD,WACE,KAAK,EAAE;QACL,CAAC,2BAA2B,CAAC,EAAE,CAAC,IAAI,CAAC,gBAAgB;QACrD,CAAC,qCAAqC,CAAC,EAAE,IAAI,CAAC,gBAAgB;QAC9D,CAAC,UAAU,CAAC,EAAE,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,gBAAgB;OAC1D,EACD,YAAY,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,EACnE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;MAEjC,WACE,KAAK,EAAE;UACL,CAAC,iCAAiC,CAAC,EAAE,CAAC,IAAI,CAAC,gBAAgB;SAC5D;QAED;UACE,eAAa,CACV,CACD,CACF,CACP,CAAC;IAEM,uBAAkB,GAAG,GAAmB,EAAE,CAAC,CACjD,UAAI,KAAK,EAAC,uBAAuB;MAC/B,eAAa,CACV,CACN,CAAC;IAEF;;;OAGG;IACK,kCAA6B,GAAG,GAAW,EAAE;MACnD,IAAI,0BAA0B,GAAG,CAAC,CAAC;MACnC,IAAI,CAAC,yBAAyB,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;QACjD,0BAA0B,IAAI,OAAO,CAAC,YAAY,CAAC;MACrD,CAAC,CAAC,CAAC;MAEH,OAAO,GAAG,0BAA0B,IAAI,CAAC;IAC3C,CAAC,CAAC;IAEM,wCAAmC,GAAG,GAAG,EAAE;MACjD,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAClD,IAAI,CAAC,2BAA2B,CAClB,CAAC;MAEjB,IAAI,CAAC,WAAW;QAAE,OAAO;MAEzB,IACE,CAAC,IAAI,CAAC,iBAAiB;QACvB,CAAC,IAAI,CAAC,uBAAuB;QAC7B,IAAI,CAAC,QAAQ,EACb;QACA,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC,6BAA6B,EAAE,CAAC;QACpE,IAAI,CAAC,4BAA4B,CAC/B,WAAW,EACX,IAAI,CAAC,uBAAuB,CAC7B,CAAC;OACH;MAED,IAAI,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,QAAQ,EAAE;QAC3C,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,6BAA6B,EAAE,CAAC;QACnE,IAAI,CAAC,4BAA4B,CAC/B,WAAW,EACX,IAAI,CAAC,sBAAsB,CAC5B,CAAC;OACH;IACH,CAAC,CAAC;IAEM,0BAAqB,GAAG,GAA0B,EAAE;MAC1D,IAAI,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,gBAAgB,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE;QACpE,OAAO,IAAI,CAAC,0BAA0B,EAAE,CAAC;OAC1C;MAED,IAAI,IAAI,CAAC,cAAc,KAAK,KAAK,EAAE;QACjC,OAAO,IAAI,CAAC,kBAAkB,EAAE,CAAC;OAClC;MAED,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;sBAlX4B,YAAY,CAAC,EAAE;wBACZ,KAAK;oBACT,IAAI;sBACX,uBAAuB,EAAE;4BACV,KAAK;;;sBAOZ,KAAK;;;EAOnC,oBAAoB;IAClB,IAAI,IAAI,CAAC,cAAc,KAAK,MAAM,EAAE;MAClC,IAAI,CAAC,QAAQ,CAAC,mBAAmB,CAC/B,iBAAiB,EACjB,IAAI,CAAC,oBAAoB,CAC1B,CAAC;KACH;SAAM,IAAI,IAAI,CAAC,cAAc,KAAK,KAAK,EAAE;MACxC,IAAI,CAAC,QAAQ,CAAC,mBAAmB,CAC/B,eAAe,EACf,IAAI,CAAC,oBAAoB,CAC1B,CAAC;KACH;EACH,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,UAAU,GAAG,oBAAoB,EAAE,CAAC;IACzC,MAAM,gBAAgB,GAAG,uBAAuB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAC1D,IAAI,CAAC,cAAc,GAAG,gBAAgB,CAAC,OAAO,CAAC;IAC/C,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,MAAM,CAAC;IACxC,IAAI,IAAI,CAAC,UAAU,IAAI,YAAY,CAAC,CAAC,IAAI,IAAI,CAAC,cAAc,KAAK,KAAK,EAAE;MACtE,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;KAC9B;IAED,IAAI,IAAI,CAAC,cAAc,KAAK,MAAM,EAAE;MAClC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAC5B,iBAAiB,EACjB,IAAI,CAAC,oBAAoB,CAC1B,CAAC;KACH;SAAM,IAAI,IAAI,CAAC,cAAc,KAAK,KAAK,EAAE;MACxC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAC5B,eAAe,EACf,IAAI,CAAC,oBAAoB,CAC1B,CAAC;KACH;EACH,CAAC;EAED,gBAAgB;IACd,IAAI,CAAC,yBAAyB,GAAG,KAAK,CAAC,IAAI,CACzC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAClD,CAAC;IAEF;;;OAGG;IACH,UAAU,CACR,GAAG,EAAE,CAAC,IAAI,CAAC,mCAAmC,EAAE,EAChD,IAAI,CAAC,+BAA+B,CACrC,CAAC;EACJ,CAAC;EAGD,gBAAgB;IACd,IAAI,CAAC,YAAY,EAAE,CAAC;EACtB,CAAC;EAGD,mBAAmB;IACjB,IAAI,CAAC,YAAY,EAAE,CAAC;EACtB,CAAC;EAGD,kBAAkB,CAAC,EAAe;IAChC,MAAM,KAAK,GAAY,EAAE,CAAC,MAAM,CAAC;IACjC,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC;EAC/B,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,QAAQ;IACZ,IAAI,IAAI,CAAC,OAAO,EAAE;MAChB,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;KACtB;EACH,CAAC;EAqDO,cAAc;IACpB,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC;EACzC,CAAC;EA6CO,YAAY;IAClB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,cAAc,EAAE,CAAC;KACvB;EACH,CAAC;EAEO,YAAY;IAClB,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IAC5D,IAAI,IAAI,CAAC,YAAY,EAAE;MACrB,IAAI,CAAC,cAAc,EAAE,CAAC;KACvB;EACH,CAAC;EAwKO,4BAA4B,CAClC,qBAAkC,EAClC,MAAc;IAEd,qBAAqB,CAAC,KAAK,CAAC,WAAW,CACrC,iCAAiC,EACjC,MAAM,CACP,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,MAAM,EAAE,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;IACnE,MAAM,sBAAsB,GAC1B,CAAC,gBAAgB,IAAI,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC;IACrD,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,CAAC,cAAc,CAAC,EAAE,gBAAgB;QAClC,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,SAAS,EAAE,CAAC,IAAI,CAAC,QAAQ;QACzB,CAAC,2BAA2B,CAAC,EAAE,IAAI,CAAC,cAAc,KAAK,MAAM;OAC9D,EACD,IAAI,EAAC,UAAU;MAEf,EAAC,sBAAsB,IACrB,YAAY,EACV,CAAC,gBAAgB;UACjB,IAAI,CAAC,cAAc,KAAK,KAAK;UAC7B,IAAI,CAAC,gBAAgB,EAEvB,YAAY,EAAE,IAAI,CAAC,cAAc,KAAK,KAAK,IAAI,IAAI,CAAC,gBAAgB,EACpE,QAAQ,EAAE,gBAAgB,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,EACtD,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,EAC7C,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,KAAK,EAAE;UACL,CAAC,kBAAkB,CAAC,EAAE,IAAI;UAC1B,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,CAAC,gBAAgB;UACpC,CAAC,4BAA4B,CAAC,EAAE,gBAAgB,IAAI,CAAC,UAAU;UAC/D,CAAC,sCAAsC,CAAC,EACtC,gBAAgB,IAAI,UAAU,IAAI,CAAC,YAAY;UACjD,CAAC,qCAAqC,CAAC,EACrC,gBAAgB,IAAI,UAAU,IAAI,YAAY;UAChD,CAAC,UAAU,CAAC,EAAE,YAAY,IAAI,CAAC,gBAAgB;SAChD,EACD,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,mBACjB,YAAY,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,mBAE7D,CAAC,gBAAgB,IAAI,IAAI,CAAC,cAAc,KAAK,KAAK;UAChD,CAAC,CAAC,MAAM;UACR,CAAC,CAAC,OAAO;QAGb,qBACE,OAAO,EAAE,IAAI,CAAC,cAAc,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,IAE5D,KAAK,CACQ;QACf,IAAI,CAAC,cAAc,KAAK,MAAM,IAAI,UAAU,IAAI,CAC/C,WACE,KAAK,EAAE;YACL,6BAA6B,EAAE,IAAI;YACnC,4BAA4B,EAAE,IAAI,CAAC,QAAQ;WAC5C,EACD,SAAS,EAAE,WAAW,GACjB,CACR,CACsB;MACxB,IAAI,CAAC,qBAAqB,EAAE,CACxB,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  State,\n  Listen,\n  h,\n  Method,\n} from \"@stencil/core\";\n\nimport {\n  DEVICE_SIZES,\n  getCurrentDeviceSize,\n  getThemeForegroundColor,\n  getNavItemParentDetails,\n} from \"../../utils/helpers\";\nimport { IcNavType, IcTheme } from \"../../utils/types\";\n\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\n@Component({\n  tag: \"ic-navigation-group\",\n  styleUrl: \"ic-navigation-group.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class NavigationGroup {\n  private allGroupedNavigationItems: HTMLIcNavigationItemElement[] = [];\n  private collapsedNavItemsHeight: string;\n  private dropdown: HTMLElement;\n  private DYNAMIC_GROUPED_LINKS_HEIGHT_MS = 100;\n  private expandedNavItemsHeight: string;\n  private groupEl: HTMLElement;\n  private IC_NAVIGATION_ITEM = \"ic-navigation-item\";\n  private isSideNavExpanded: boolean;\n  private mouseGate: boolean = false;\n  private nodeName = \"IC-NAVIGATION-GROUP\";\n  private GROUPED_LINKS_WRAPPER_CLASS = \".grouped-links-wrapper\";\n\n  @Element() el: HTMLIcNavigationGroupElement;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() dropdownOpen: boolean = false;\n  @State() expanded: boolean = true;\n  @State() focusStyle = getThemeForegroundColor();\n  @State() inTopNavSideMenu: boolean = false;\n  @State() navigationType: IcNavType | \"\";\n  @State() parentEl: HTMLElement;\n\n  /**\n   *  If `true`, the group will be expandable in the side menu.\n   */\n  @Prop() expandable: boolean = false;\n\n  /**\n   * The label to display on the group.\n   */\n  @Prop() label: string;\n\n  disconnectedCallback(): void {\n    if (this.navigationType === \"side\") {\n      this.parentEl.removeEventListener(\n        \"sideNavExpanded\",\n        this.sideNavExpandHandler\n      );\n    } else if (this.navigationType === \"top\") {\n      this.parentEl.removeEventListener(\n        \"topNavResized\",\n        this.topNavResizedHandler\n      );\n    }\n  }\n\n  componentWillLoad(): void {\n    this.deviceSize = getCurrentDeviceSize();\n    const navParentDetails = getNavItemParentDetails(this.el);\n    this.navigationType = navParentDetails.navType;\n    this.parentEl = navParentDetails.parent;\n    if (this.deviceSize <= DEVICE_SIZES.L && this.navigationType === \"top\") {\n      this.inTopNavSideMenu = true;\n    }\n\n    if (this.navigationType === \"side\") {\n      this.parentEl.addEventListener(\n        \"sideNavExpanded\",\n        this.sideNavExpandHandler\n      );\n    } else if (this.navigationType === \"top\") {\n      this.parentEl.addEventListener(\n        \"topNavResized\",\n        this.topNavResizedHandler\n      );\n    }\n  }\n\n  componentDidLoad(): void {\n    this.allGroupedNavigationItems = Array.from(\n      this.el.querySelectorAll(this.IC_NAVIGATION_ITEM)\n    );\n\n    /**\n     * debounce is required as the incorrect height was retrieved instantly after\n     * componentDidLoad is invoked.\n     */\n    setTimeout(\n      () => this.setInitialGroupedLinksWrapperHeight(),\n      this.DYNAMIC_GROUPED_LINKS_HEIGHT_MS\n    );\n  }\n\n  @Listen(\"childBlur\")\n  childBlurHandler(): void {\n    this.hideDropdown();\n  }\n\n  @Listen(\"navItemClicked\")\n  navItemClickHandler(): void {\n    this.hideDropdown();\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.focusStyle = theme.mode;\n  }\n\n  /**\n   * Sets focus on the nav item.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.groupEl) {\n      this.groupEl.focus();\n    }\n  }\n\n  private sideNavExpandHandler = (event?: CustomEvent): void => {\n    this.isSideNavExpanded = event.detail.sideNavExpanded;\n    const linkWrapper = this.el.shadowRoot.querySelector(\n      this.GROUPED_LINKS_WRAPPER_CLASS\n    ) as HTMLElement;\n\n    if (!linkWrapper) return;\n\n    if (this.isSideNavExpanded) {\n      if (this.expanded && this.expandedNavItemsHeight) {\n        this.setGroupedLinksElementHeight(\n          linkWrapper,\n          this.expandedNavItemsHeight\n        );\n      } else if (this.expanded) {\n        setTimeout(() => {\n          this.expandedNavItemsHeight = this.getNavigationChildItemsHeight();\n\n          this.setGroupedLinksElementHeight(\n            linkWrapper,\n            this.expandedNavItemsHeight\n          );\n        }, this.DYNAMIC_GROUPED_LINKS_HEIGHT_MS);\n      }\n    } else {\n      if (this.expanded && this.collapsedNavItemsHeight) {\n        this.setGroupedLinksElementHeight(\n          linkWrapper,\n          this.collapsedNavItemsHeight\n        );\n      } else if (this.expanded) {\n        setTimeout(() => {\n          this.collapsedNavItemsHeight = this.getNavigationChildItemsHeight();\n\n          this.setGroupedLinksElementHeight(\n            linkWrapper,\n            this.collapsedNavItemsHeight\n          );\n        }, this.DYNAMIC_GROUPED_LINKS_HEIGHT_MS);\n      }\n    }\n  };\n\n  private topNavResizedHandler = (ev: CustomEvent): void => {\n    const newSize = ev.detail.size;\n    if (newSize !== this.deviceSize) {\n      this.deviceSize = newSize;\n      this.inTopNavSideMenu = newSize <= DEVICE_SIZES.L;\n    }\n  };\n\n  private toggleDropdown() {\n    this.dropdownOpen = !this.dropdownOpen;\n  }\n\n  private setGroupedNavItemTabIndex = (tabIndexValue: string) => {\n    this.el\n      .querySelectorAll(this.IC_NAVIGATION_ITEM)\n      .forEach((navigationItem) => {\n        const navItem =\n          navigationItem.shadowRoot.querySelector(\"a\") ||\n          navigationItem.querySelector(\"a\");\n        if (navItem) {\n          navItem.setAttribute(\"tabindex\", tabIndexValue);\n        }\n      });\n  };\n\n  private toggleGroupedLinkWrapperHeight = (\n    wrapper: HTMLElement,\n    expanded: boolean\n  ) => {\n    if (!wrapper) return;\n\n    if (expanded) {\n      if (this.isSideNavExpanded) {\n        this.setGroupedLinksElementHeight(wrapper, this.expandedNavItemsHeight);\n      } else {\n        this.setGroupedLinksElementHeight(\n          wrapper,\n          this.collapsedNavItemsHeight\n        );\n      }\n      this.setGroupedNavItemTabIndex(\"0\");\n    } else {\n      wrapper.style.setProperty(\"--navigation-child-items-height\", \"0\");\n      this.setGroupedNavItemTabIndex(\"-1\");\n    }\n  };\n\n  private toggleExpanded = () => {\n    this.expanded = !this.expanded;\n    const linkWrapper = this.el.shadowRoot.querySelector(\n      this.GROUPED_LINKS_WRAPPER_CLASS\n    ) as HTMLElement;\n    this.toggleGroupedLinkWrapperHeight(linkWrapper, this.expanded);\n  };\n\n  private showDropdown() {\n    if (!this.dropdownOpen) {\n      this.toggleDropdown();\n    }\n  }\n\n  private hideDropdown() {\n    document.removeEventListener(\"keydown\", this.handleKeydown);\n    if (this.dropdownOpen) {\n      this.toggleDropdown();\n    }\n  }\n\n  private handleClick = (ev: MouseEvent) => {\n    if (this.navigationType === \"top\" && ev.detail) {\n      this.toggleDropdown();\n    } else {\n      this.toggleExpanded();\n    }\n  };\n\n  private handleBlur = (ev: FocusEvent) => {\n    const target = ev.relatedTarget as HTMLElement;\n    if (!this.el.contains(target)) {\n      this.hideDropdown();\n    }\n  };\n\n  private handleTopNavKeydown = (ev: KeyboardEvent) => {\n    if (ev.key === \" \" || ev.key === \"Enter\") {\n      this.toggleDropdown();\n    } else if (!this.inTopNavSideMenu && ev.key === \"Escape\") {\n      this.hideDropdown();\n    }\n  };\n\n  private handleKeydown = (ev: KeyboardEvent) => {\n    if (ev.key === \"Enter\" || ev.key === \" \" || ev.key === \"Escape\") {\n      switch (this.navigationType) {\n        case \"top\":\n          this.handleTopNavKeydown(ev as KeyboardEvent);\n          break;\n        case \"side\":\n          this.toggleExpanded();\n          ev.preventDefault();\n          break;\n        default:\n          this.toggleExpanded();\n          break;\n      }\n    }\n  };\n\n  private handleMouseLeave = (ev: MouseEvent) => {\n    const relTarget = ev.relatedTarget as HTMLElement;\n\n    this.mouseGate = false;\n\n    if (\n      !this.el.contains(relTarget) &&\n      relTarget !== this.dropdown &&\n      document.activeElement !== this.el &&\n      !this.el.contains(document.activeElement) &&\n      relTarget.nodeName === this.nodeName &&\n      this.dropdownOpen === true\n    ) {\n      this.mouseGate = true;\n      this.hideDropdown();\n    } else if (\n      !this.el.contains(relTarget) &&\n      relTarget !== this.dropdown &&\n      !this.el.contains(document.activeElement)\n    ) {\n      this.mouseGate = false;\n      setTimeout(() => {\n        this.dropdownOpen ? this.hideDropdown() : null;\n      }, 500);\n    }\n  };\n\n  private handleMouseEnter = (ev: MouseEvent) => {\n    const relTarget = ev.relatedTarget as HTMLElement;\n    document.addEventListener(\"keydown\", this.handleKeydown);\n\n    if (relTarget.nodeName === this.nodeName && this.mouseGate === true) {\n      this.showDropdown();\n    } else if (\n      this.dropdownOpen === false &&\n      relTarget !== null &&\n      this.mouseGate === false\n    ) {\n      this.mouseGate = true;\n      setTimeout(() => {\n        this.mouseGate && this.showDropdown();\n      }, 500);\n    }\n  };\n\n  private renderDropdownGroupedLinks = (): HTMLDivElement => (\n    <div\n      class={{\n        [\"navigation-group-dropdown\"]: !this.inTopNavSideMenu,\n        [\"navigation-group-dropdown-side-menu\"]: this.inTopNavSideMenu,\n        [\"selected\"]: this.dropdownOpen && !this.inTopNavSideMenu,\n      }}\n      onMouseLeave={!this.inTopNavSideMenu ? this.handleMouseLeave : null}\n      ref={(el) => (this.dropdown = el)}\n    >\n      <nav\n        class={{\n          [\"navigation-group-dropdown-items\"]: !this.inTopNavSideMenu,\n        }}\n      >\n        <ul>\n          <slot></slot>\n        </ul>\n      </nav>\n    </div>\n  );\n\n  private renderGroupedLinks = (): HTMLDivElement => (\n    <ul class=\"grouped-links-wrapper\">\n      <slot></slot>\n    </ul>\n  );\n\n  /**\n   * Gets the total height of navigation links to improve\n   * smoothness of expand/collapse animations\n   */\n  private getNavigationChildItemsHeight = (): string => {\n    let navigationChildItemsHeight = 0;\n    this.allGroupedNavigationItems.forEach((navItem) => {\n      navigationChildItemsHeight += navItem.offsetHeight;\n    });\n\n    return `${navigationChildItemsHeight}px`;\n  };\n\n  private setInitialGroupedLinksWrapperHeight = () => {\n    const linkWrapper = this.el.shadowRoot.querySelector(\n      this.GROUPED_LINKS_WRAPPER_CLASS\n    ) as HTMLElement;\n\n    if (!linkWrapper) return;\n\n    if (\n      !this.isSideNavExpanded &&\n      !this.collapsedNavItemsHeight &&\n      this.expanded\n    ) {\n      this.collapsedNavItemsHeight = this.getNavigationChildItemsHeight();\n      this.setGroupedLinksElementHeight(\n        linkWrapper,\n        this.collapsedNavItemsHeight\n      );\n    }\n\n    if (this.isSideNavExpanded && this.expanded) {\n      this.expandedNavItemsHeight = this.getNavigationChildItemsHeight();\n      this.setGroupedLinksElementHeight(\n        linkWrapper,\n        this.expandedNavItemsHeight\n      );\n    }\n  };\n\n  private renderNavigationItems = (): HTMLDivElement | null => {\n    if (this.dropdownOpen || (this.inTopNavSideMenu && !this.expandable)) {\n      return this.renderDropdownGroupedLinks();\n    }\n\n    if (this.navigationType !== \"top\") {\n      return this.renderGroupedLinks();\n    }\n\n    return null;\n  };\n\n  private setGroupedLinksElementHeight(\n    groupedNavItemWrapper: HTMLElement,\n    height: string\n  ) {\n    groupedNavItemWrapper.style.setProperty(\n      \"--navigation-child-items-height\",\n      height\n    );\n  }\n\n  render() {\n    const { label, dropdownOpen, inTopNavSideMenu, expandable } = this;\n    const NavigationGroupElement =\n      !inTopNavSideMenu || expandable ? \"button\" : \"div\";\n    return (\n      <Host\n        class={{\n          [\"in-side-menu\"]: inTopNavSideMenu,\n          expanded: this.expanded,\n          collapsed: !this.expanded,\n          [\"navigation-group-side-nav\"]: this.navigationType === \"side\",\n        }}\n        role=\"listitem\"\n      >\n        <NavigationGroupElement\n          onMouseEnter={\n            !inTopNavSideMenu &&\n            this.navigationType === \"top\" &&\n            this.handleMouseEnter\n          }\n          onMouseLeave={this.navigationType === \"top\" && this.handleMouseLeave}\n          tabindex={inTopNavSideMenu && !expandable ? \"-1\" : \"0\"}\n          onBlur={this.handleBlur}\n          onClick={expandable ? this.handleClick : null}\n          onKeyDown={this.handleKeydown}\n          class={{\n            [\"navigation-group\"]: true,\n            [this.focusStyle]: !inTopNavSideMenu,\n            [\"navigation-group-side-menu\"]: inTopNavSideMenu && !expandable,\n            [\"navigation-group-side-menu-collapsed\"]:\n              inTopNavSideMenu && expandable && !dropdownOpen,\n            [\"navigation-group-side-menu-expanded\"]:\n              inTopNavSideMenu && expandable && dropdownOpen,\n            [\"selected\"]: dropdownOpen && !inTopNavSideMenu,\n          }}\n          ref={(el) => (this.groupEl = el)}\n          aria-expanded={dropdownOpen || this.expanded ? \"true\" : \"false\"}\n          aria-haspopup={\n            !inTopNavSideMenu && this.navigationType === \"top\"\n              ? \"true\"\n              : \"false\"\n          }\n        >\n          <ic-typography\n            variant={this.navigationType === \"side\" ? \"caption\" : \"label\"}\n          >\n            {label}\n          </ic-typography>\n          {this.navigationType === \"side\" && expandable && (\n            <div\n              class={{\n                \"chevron-toggle-icon-wrapper\": true,\n                \"chevron-toggle-icon-closed\": this.expanded,\n              }}\n              innerHTML={chevronIcon}\n            ></div>\n          )}\n        </NavigationGroupElement>\n        {this.renderNavigationItems()}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-navigation-item/ic-navigation-item.css

@@ -463,6 +463,16 @@ 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;
@@ -769,6 +779,8 @@ svg {
   ::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)
@@ -813,8 +825,9 @@ svg {
 
 :host(.navigation-item-side-nav) .link,
 :host(.navigation-item-side-nav) ::slotted(a) {
-  height: var(--navigation-item-height);
-  width: var(--navigation-item-width);
+  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);
@@ -822,7 +835,9 @@ svg {
   color: var(--navigation-item-child-color) !important;
   text-decoration: none !important;
   white-space: nowrap;
-  padding: 0 var(--ic-space-md);
+  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,
@@ -869,7 +884,6 @@ svg {
   white-space: wrap;
   text-overflow: ellipsis;
   overflow: hidden;
-  min-width: 256px;
 }
 
 :host(.navigation-item-side-nav.navigation-item-selected) .link,

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

@@ -13,7 +13,7 @@ export class NavigationItem {
       const ChevronIconComponent = this.expandable && (h("div", { class: { svg: true }, innerHTML: chevronIcon }));
       const IconComponent = this.el.querySelector('[slot="icon"]') && (h("div", { class: "icon" }, " ", h("slot", { name: "icon" }), " "));
       if (href !== "") {
-        return (h("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, h("ic-typography", { variant: variant }, label), ChevronIconComponent, target === "_blank" && (h("span", { class: "open-in-new-icon", innerHTML: OpenInNew }))));
+        return (h("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, h("ic-typography", { variant: variant }, label), h("div", { class: "chevron-container" }, ChevronIconComponent), target === "_blank" && (h("span", { class: "open-in-new-icon", innerHTML: OpenInNew }))));
       }
       return (h("div", { tabindex: "0", class: "link", ref: (el) => (this.itemEl = el) }, IconComponent, h("ic-typography", { variant: variant }, label), ChevronIconComponent));
     };
@@ -41,6 +41,27 @@ export class NavigationItem {
     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 h("slot", { name: "navigation-item" });
+      }
+      return h("slot", null);
+    };
     this.deviceSize = DEVICE_SIZES.XL;
     this.focusStyle = getThemeForegroundColor();
     this.inTopNavSideMenu = false;
@@ -108,7 +129,7 @@ export class NavigationItem {
     }
   }
   render() {
-    const { href, hreflang, target, rel, referrerpolicy, download, label, inTopNavSideMenu, isTopNavChild, selected, navigationSlot, } = this;
+    const { inTopNavSideMenu, isTopNavChild, selected } = this;
     return (h(Host, { class: {
         ["navigation-item"]: true,
         ["navigation-item-top-nav"]: !inTopNavSideMenu && this.navigationType === "top",
@@ -129,12 +150,12 @@ export class NavigationItem {
           this.collapsedIconLabel &&
           !this.isSideNavMobile,
         ["expandable"]: this.expandable,
-      }, onBlur: isTopNavChild && !inTopNavSideMenu ? this.handleBlur : null, onClick: this.handleClick, "aria-current": selected ? "page" : null, role: "listitem" }, h("ic-tooltip", { label: label || navigationSlot.textContent, target: "navigation-item", placement: "right", class: {
+      }, onBlur: isTopNavChild && !inTopNavSideMenu ? this.handleBlur : null, onClick: this.handleClick, "aria-current": selected ? "page" : null, role: "listitem" }, h("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']"),
-      } }, navigationSlot ? (h("slot", { name: "navigation-item" })) : (this.displayDefaultNavigationItem(href, hreflang, target, rel, referrerpolicy, download, label)))));
+      } }, this.renderNavigationItemContent())));
   }
   static get is() { return "ic-navigation-item"; }
   static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"ic-navigation-item.js","sourceRoot":"","sources":["../../../src/components/ic-navigation-item/ic-navigation-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Listen,\n  Method,\n  h,\n  Host,\n  Prop,\n  State,\n} from \"@stencil/core\";\n\nimport {\n  DEVICE_SIZES,\n  getCurrentDeviceSize,\n  getThemeForegroundColor,\n  getParentElementType,\n  getNavItemParentDetails,\n} from \"../../utils/helpers\";\nimport { IcNavType, IcTheme } from \"../../utils/types\";\n\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\n\nimport OpenInNew from \"../../assets/OpenInNew.svg\";\n\n/**\n * @part link - The `<a>` within ic-navigation-item\n */\n\n@Component({\n  tag: \"ic-navigation-item\",\n  styleUrl: \"ic-navigation-item.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class NavigationItem {\n  private navigationSlot: HTMLElement;\n  private isInitialRender: boolean = true;\n  private itemEl: HTMLElement;\n\n  @Element() el: HTMLIcNavigationItemElement;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() focusStyle = getThemeForegroundColor();\n  @State() inTopNavSideMenu: boolean = false;\n  @State() isSideNavMobile: boolean = false;\n  @State() isTopNavChild: boolean = false;\n  @State() navigationType: IcNavType | \"\";\n  @State() parentEl: HTMLElement;\n  @State() sideNavExpanded: boolean = false;\n\n  /**\n   * @internal If `true`, the icon and label will be displayed when side navigation is collapsed.\n   */\n  @Prop() collapsedIconLabel: boolean = false;\n\n  /**\n   * @internal If `true`, the navigation item will be displayed within a tooltip.\n   */\n  @Prop() displayNavigationTooltip: boolean = false;\n\n  /**\n   * If `true`, the user can save the linked URL instead of navigating to it.\n   */\n  @Prop() download?: string | boolean = false;\n\n  /**\n   *  @internal If `true`, the navigation item will be expandable.\n   */\n  @Prop() expandable: boolean = false;\n\n  /**\n   * The destination of the navigation item.\n   */\n  @Prop() href: string = \"\";\n\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string;\n\n  /**\n   * The label of the navigation item.\n   */\n  @Prop() label: string;\n\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n\n  /**\n   *  If `true`, the navigation item will be set in a selected state.\n   */\n  @Prop() selected: boolean = false;\n\n  /**\n   *  The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n\n  /**\n   * @internal - Emitted when item loses focus.\n   */\n  @Event() childBlur: EventEmitter<void>;\n\n  /**\n   * @internal - Emitted when navigation item clicked.\n   */\n  @Event() navItemClicked: EventEmitter<void>;\n\n  disconnectedCallback(): void {\n    if (this.navigationType === \"side\") {\n      this.parentEl.removeEventListener(\n        \"sideNavExpanded\",\n        this.sideNavExpandHandler\n      );\n    } else if (this.navigationType === \"top\") {\n      this.parentEl.removeEventListener(\n        \"topNavResized\",\n        this.topNavResizedHandler\n      );\n    }\n  }\n\n  componentWillLoad(): void {\n    const navParentDetails = getNavItemParentDetails(this.el);\n    this.navigationType = navParentDetails.navType;\n    this.parentEl = navParentDetails.parent;\n\n    if (this.navigationType === \"side\") {\n      this.parentEl.addEventListener(\n        \"sideNavExpanded\",\n        this.sideNavExpandHandler\n      );\n    } else if (this.navigationType === \"top\") {\n      this.parentEl.addEventListener(\n        \"topNavResized\",\n        this.topNavResizedHandler\n      );\n    }\n\n    if (\n      getParentElementType(this.el) === \"IC-NAVIGATION-GROUP\" &&\n      this.navigationType === \"top\"\n    ) {\n      this.isTopNavChild = true;\n    }\n\n    this.deviceSize = getCurrentDeviceSize();\n    if (this.deviceSize <= DEVICE_SIZES.L && this.navigationType === \"top\") {\n      this.inTopNavSideMenu = true;\n    }\n\n    this.navigationSlot = this.el.querySelector('[slot=\"navigation-item\"]');\n    if (this.navigationSlot) {\n      this.navigationSlot.ariaLabel = this.navigationSlot.textContent.trim();\n    }\n  }\n\n  componentDidUpdate(): void {\n    this.isInitialRender = false;\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.focusStyle = theme.mode;\n  }\n\n  /**\n   * Sets focus on the nav item.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.itemEl) {\n      this.itemEl.focus();\n    }\n  }\n\n  private displayDefaultNavigationItem = (\n    href: string,\n    hreflang: string,\n    target: string,\n    rel: string,\n    referrerpolicy: ReferrerPolicy,\n    download: string | boolean,\n    label: string\n  ): HTMLElement => {\n    const variant =\n      this.isTopNavChild || this.inTopNavSideMenu ? \"body\" : \"label\";\n    const ChevronIconComponent = this.expandable && (\n      <div class={{ svg: true }} innerHTML={chevronIcon}></div>\n    );\n    const IconComponent = this.el.querySelector('[slot=\"icon\"]') && (\n      <div class=\"icon\">\n        {\" \"}\n        <slot name=\"icon\"></slot>{\" \"}\n      </div>\n    );\n\n    if (href !== \"\") {\n      return (\n        <a\n          href={href}\n          target={target}\n          rel={rel}\n          hreflang={hreflang}\n          referrerPolicy={referrerpolicy}\n          download={download !== false ? download : null}\n          class=\"link\"\n          ref={(el) => (this.itemEl = el)}\n          part=\"link\"\n        >\n          {IconComponent}\n\n          <ic-typography variant={variant}>{label}</ic-typography>\n          {ChevronIconComponent}\n          {target === \"_blank\" && (\n            <span class=\"open-in-new-icon\" innerHTML={OpenInNew} />\n          )}\n        </a>\n      );\n    }\n\n    return (\n      <div tabindex=\"0\" class=\"link\" ref={(el) => (this.itemEl = el)}>\n        {IconComponent}\n        <ic-typography variant={variant}>{label}</ic-typography>\n        {ChevronIconComponent}\n      </div>\n    );\n  };\n\n  private topNavResizedHandler = (ev: CustomEvent): void => {\n    const newSize = ev.detail.size;\n    if (newSize !== this.deviceSize) {\n      this.deviceSize = newSize;\n      this.inTopNavSideMenu = newSize <= DEVICE_SIZES.L;\n    }\n  };\n\n  private sideNavExpandHandler = (ev: CustomEvent): void => {\n    const { sideNavExpanded, sideNavMobile } = ev.detail;\n    this.sideNavExpanded = sideNavExpanded;\n    this.isSideNavMobile = sideNavMobile;\n  };\n\n  private handleBlur = (ev: FocusEvent) => {\n    if (ev.relatedTarget !== null) {\n      const target = ev.relatedTarget as HTMLElement;\n      if (target.tagName === \"IC-NAVIGATION-ITEM\") {\n        return;\n      }\n    }\n    this.childBlur.emit();\n  };\n\n  private handleClick = () => {\n    this.navItemClicked.emit();\n  };\n\n  render() {\n    const {\n      href,\n      hreflang,\n      target,\n      rel,\n      referrerpolicy,\n      download,\n      label,\n      inTopNavSideMenu,\n      isTopNavChild,\n      selected,\n      navigationSlot,\n    } = this;\n\n    return (\n      <Host\n        class={{\n          [\"navigation-item\"]: true,\n          [\"navigation-item-top-nav\"]:\n            !inTopNavSideMenu && this.navigationType === \"top\",\n          [\"navigation-item-top-nav-child-selected\"]:\n            isTopNavChild && !inTopNavSideMenu && selected,\n          [this.focusStyle]:\n            (!inTopNavSideMenu && !isTopNavChild) ||\n            (this.navigationType === \"side\" && isTopNavChild),\n          [\"navigation-item-selected\"]: !isTopNavChild && selected,\n          [\"navigation-item-side-menu\"]: inTopNavSideMenu,\n          [\"navigation-item-side-menu-selected\"]: inTopNavSideMenu && selected,\n          [\"navigation-item-top-nav-child\"]: isTopNavChild && !inTopNavSideMenu,\n          [\"navigation-item-page-header\"]:\n            this.navigationType === \"page-header\",\n          [\"with-transition\"]: !this.isInitialRender,\n          [\"navigation-item-side-nav\"]: this.navigationType === \"side\",\n          [\"navigation-item-side-nav-collapsed\"]:\n            (!this.sideNavExpanded || this.displayNavigationTooltip) &&\n            this.navigationType === \"side\",\n          [\"navigation-item-side-nav-collapsed-with-label\"]:\n            !this.sideNavExpanded &&\n            this.navigationType === \"side\" &&\n            this.collapsedIconLabel &&\n            !this.isSideNavMobile,\n          [\"expandable\"]: this.expandable,\n        }}\n        onBlur={isTopNavChild && !inTopNavSideMenu ? this.handleBlur : null}\n        onClick={this.handleClick}\n        aria-current={selected ? \"page\" : null}\n        role=\"listitem\"\n      >\n        {/* Tooltip enabled by applying navigation-item-side-nav-collapsed class to host */}\n        <ic-tooltip\n          label={label || navigationSlot.textContent}\n          target=\"navigation-item\"\n          placement=\"right\"\n          class={{\n            [\"tooltip-navigation-item\"]: true,\n            [\"tooltip-navigation-item-side-nav-collapsed\"]:\n              (!this.sideNavExpanded || this.displayNavigationTooltip) &&\n              this.navigationType === \"side\",\n            [\"tooltip-long-label-navigation-item-side-nav-expanded\"]:\n              this.el.hasAttribute(\"[display-navigation-tooltip = 'true']\"),\n          }}\n        >\n          {navigationSlot ? (\n            <slot name=\"navigation-item\"></slot>\n          ) : (\n            this.displayDefaultNavigationItem(\n              href,\n              hreflang,\n              target,\n              rel,\n              referrerpolicy,\n              download,\n              label\n            )\n          )}\n        </ic-tooltip>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-navigation-item.js","sourceRoot":"","sources":["../../../src/components/ic-navigation-item/ic-navigation-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Listen,\n  Method,\n  h,\n  Host,\n  Prop,\n  State,\n} from \"@stencil/core\";\n\nimport {\n  DEVICE_SIZES,\n  getCurrentDeviceSize,\n  getThemeForegroundColor,\n  getParentElementType,\n  getNavItemParentDetails,\n} from \"../../utils/helpers\";\nimport { IcNavType, IcTheme } from \"../../utils/types\";\n\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\n\nimport OpenInNew from \"../../assets/OpenInNew.svg\";\n\n/**\n * @part link - The `<a>` within ic-navigation-item\n */\n\n@Component({\n  tag: \"ic-navigation-item\",\n  styleUrl: \"ic-navigation-item.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class NavigationItem {\n  private navigationSlot: HTMLElement;\n  private isInitialRender: boolean = true;\n  private itemEl: HTMLElement;\n\n  @Element() el: HTMLIcNavigationItemElement;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() focusStyle = getThemeForegroundColor();\n  @State() inTopNavSideMenu: boolean = false;\n  @State() isSideNavMobile: boolean = false;\n  @State() isTopNavChild: boolean = false;\n  @State() navigationType: IcNavType | \"\";\n  @State() parentEl: HTMLElement;\n  @State() sideNavExpanded: boolean = false;\n\n  /**\n   * @internal If `true`, the icon and label will be displayed when side navigation is collapsed.\n   */\n  @Prop() collapsedIconLabel: boolean = false;\n\n  /**\n   * @internal If `true`, the navigation item will be displayed within a tooltip.\n   */\n  @Prop() displayNavigationTooltip: boolean = false;\n\n  /**\n   * If `true`, the user can save the linked URL instead of navigating to it.\n   */\n  @Prop() download?: string | boolean = false;\n\n  /**\n   *  @internal If `true`, the navigation item will be expandable.\n   */\n  @Prop() expandable: boolean = false;\n\n  /**\n   * The destination of the navigation item.\n   */\n  @Prop() href: string = \"\";\n\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string;\n\n  /**\n   * The label of the navigation item.\n   */\n  @Prop() label: string;\n\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n\n  /**\n   *  If `true`, the navigation item will be set in a selected state.\n   */\n  @Prop() selected: boolean = false;\n\n  /**\n   *  The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n\n  /**\n   * @internal - Emitted when item loses focus.\n   */\n  @Event() childBlur: EventEmitter<void>;\n\n  /**\n   * @internal - Emitted when navigation item clicked.\n   */\n  @Event() navItemClicked: EventEmitter<void>;\n\n  disconnectedCallback(): void {\n    if (this.navigationType === \"side\") {\n      this.parentEl.removeEventListener(\n        \"sideNavExpanded\",\n        this.sideNavExpandHandler\n      );\n    } else if (this.navigationType === \"top\") {\n      this.parentEl.removeEventListener(\n        \"topNavResized\",\n        this.topNavResizedHandler\n      );\n    }\n  }\n\n  componentWillLoad(): void {\n    const navParentDetails = getNavItemParentDetails(this.el);\n    this.navigationType = navParentDetails.navType;\n    this.parentEl = navParentDetails.parent;\n\n    if (this.navigationType === \"side\") {\n      this.parentEl.addEventListener(\n        \"sideNavExpanded\",\n        this.sideNavExpandHandler\n      );\n    } else if (this.navigationType === \"top\") {\n      this.parentEl.addEventListener(\n        \"topNavResized\",\n        this.topNavResizedHandler\n      );\n    }\n\n    if (\n      getParentElementType(this.el) === \"IC-NAVIGATION-GROUP\" &&\n      this.navigationType === \"top\"\n    ) {\n      this.isTopNavChild = true;\n    }\n\n    this.deviceSize = getCurrentDeviceSize();\n    if (this.deviceSize <= DEVICE_SIZES.L && this.navigationType === \"top\") {\n      this.inTopNavSideMenu = true;\n    }\n\n    this.navigationSlot = this.el.querySelector('[slot=\"navigation-item\"]');\n    if (this.navigationSlot) {\n      this.navigationSlot.ariaLabel = this.navigationSlot.textContent.trim();\n    }\n  }\n\n  componentDidUpdate(): void {\n    this.isInitialRender = false;\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.focusStyle = theme.mode;\n  }\n\n  /**\n   * Sets focus on the nav item.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.itemEl) {\n      this.itemEl.focus();\n    }\n  }\n\n  private displayDefaultNavigationItem = (\n    href: string,\n    hreflang: string,\n    target: string,\n    rel: string,\n    referrerpolicy: ReferrerPolicy,\n    download: string | boolean,\n    label: string\n  ): HTMLElement => {\n    const variant =\n      this.isTopNavChild || this.inTopNavSideMenu ? \"body\" : \"label\";\n    const ChevronIconComponent = this.expandable && (\n      <div class={{ svg: true }} innerHTML={chevronIcon}></div>\n    );\n    const IconComponent = this.el.querySelector('[slot=\"icon\"]') && (\n      <div class=\"icon\">\n        {\" \"}\n        <slot name=\"icon\"></slot>{\" \"}\n      </div>\n    );\n\n    if (href !== \"\") {\n      return (\n        <a\n          href={href}\n          target={target}\n          rel={rel}\n          hreflang={hreflang}\n          referrerPolicy={referrerpolicy}\n          download={download !== false ? download : null}\n          class=\"link\"\n          ref={(el) => (this.itemEl = el)}\n          part=\"link\"\n        >\n          {IconComponent}\n\n          <ic-typography variant={variant}>{label}</ic-typography>\n          <div class=\"chevron-container\">{ChevronIconComponent}</div>\n          {target === \"_blank\" && (\n            <span class=\"open-in-new-icon\" innerHTML={OpenInNew} />\n          )}\n        </a>\n      );\n    }\n\n    return (\n      <div tabindex=\"0\" class=\"link\" ref={(el) => (this.itemEl = el)}>\n        {IconComponent}\n        <ic-typography variant={variant}>{label}</ic-typography>\n        {ChevronIconComponent}\n      </div>\n    );\n  };\n\n  private topNavResizedHandler = (ev: CustomEvent): void => {\n    const newSize = ev.detail.size;\n    if (newSize !== this.deviceSize) {\n      this.deviceSize = newSize;\n      this.inTopNavSideMenu = newSize <= DEVICE_SIZES.L;\n    }\n  };\n\n  private sideNavExpandHandler = (ev: CustomEvent): void => {\n    const { sideNavExpanded, sideNavMobile } = ev.detail;\n    this.sideNavExpanded = sideNavExpanded;\n    this.isSideNavMobile = sideNavMobile;\n  };\n\n  private handleBlur = (ev: FocusEvent) => {\n    if (ev.relatedTarget !== null) {\n      const target = ev.relatedTarget as HTMLElement;\n      if (target.tagName === \"IC-NAVIGATION-ITEM\") {\n        return;\n      }\n    }\n    this.childBlur.emit();\n  };\n\n  private handleClick = () => {\n    this.navItemClicked.emit();\n  };\n\n  private generateTooltipLabel = () => {\n    if (this.label) {\n      return this.label;\n    }\n\n    if (this.navigationSlot) {\n      return this.navigationSlot.textContent;\n    }\n\n    if (this.el.children[0]) {\n      return this.el.children[0].textContent;\n    }\n\n    return \"\";\n  };\n\n  private renderNavigationItemContent = () => {\n    if (this.label) {\n      return this.displayDefaultNavigationItem(\n        this.href,\n        this.hreflang,\n        this.target,\n        this.rel,\n        this.referrerpolicy,\n        this.download,\n        this.label\n      );\n    }\n\n    if (this.navigationSlot) {\n      return <slot name=\"navigation-item\"></slot>;\n    }\n    return <slot></slot>;\n  };\n\n  render() {\n    const { inTopNavSideMenu, isTopNavChild, selected } = this;\n\n    return (\n      <Host\n        class={{\n          [\"navigation-item\"]: true,\n          [\"navigation-item-top-nav\"]:\n            !inTopNavSideMenu && this.navigationType === \"top\",\n          [\"navigation-item-top-nav-child-selected\"]:\n            isTopNavChild && !inTopNavSideMenu && selected,\n          [this.focusStyle]:\n            (!inTopNavSideMenu && !isTopNavChild) ||\n            (this.navigationType === \"side\" && isTopNavChild),\n          [\"navigation-item-selected\"]: !isTopNavChild && selected,\n          [\"navigation-item-side-menu\"]: inTopNavSideMenu,\n          [\"navigation-item-side-menu-selected\"]: inTopNavSideMenu && selected,\n          [\"navigation-item-top-nav-child\"]: isTopNavChild && !inTopNavSideMenu,\n          [\"navigation-item-page-header\"]:\n            this.navigationType === \"page-header\",\n          [\"with-transition\"]: !this.isInitialRender,\n          [\"navigation-item-side-nav\"]: this.navigationType === \"side\",\n          [\"navigation-item-side-nav-collapsed\"]:\n            (!this.sideNavExpanded || this.displayNavigationTooltip) &&\n            this.navigationType === \"side\",\n          [\"navigation-item-side-nav-collapsed-with-label\"]:\n            !this.sideNavExpanded &&\n            this.navigationType === \"side\" &&\n            this.collapsedIconLabel &&\n            !this.isSideNavMobile,\n          [\"expandable\"]: this.expandable,\n        }}\n        onBlur={isTopNavChild && !inTopNavSideMenu ? this.handleBlur : null}\n        onClick={this.handleClick}\n        aria-current={selected ? \"page\" : null}\n        role=\"listitem\"\n      >\n        {/* Tooltip enabled by applying navigation-item-side-nav-collapsed class to host */}\n        <ic-tooltip\n          label={this.generateTooltipLabel()}\n          target=\"navigation-item\"\n          placement=\"right\"\n          class={{\n            [\"tooltip-navigation-item\"]: true,\n            [\"tooltip-navigation-item-side-nav-collapsed\"]:\n              (!this.sideNavExpanded || this.displayNavigationTooltip) &&\n              this.navigationType === \"side\",\n            [\"tooltip-long-label-navigation-item-side-nav-expanded\"]:\n              this.el.hasAttribute(\"[display-navigation-tooltip = 'true']\"),\n          }}\n        >\n          {this.renderNavigationItemContent()}\n        </ic-tooltip>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-radio-group/ic-radio-group.css

@@ -465,7 +465,7 @@ ic-input-label ic-typography {
   margin-bottom: calc(var(--ic-space-sm) / 2);
 }
 
-.radio-buttons-container {
+:host .radio-buttons-container {
   display: flex;
   flex-direction: column;
   gap: var(--ic-space-xxs);
@@ -475,12 +475,12 @@ ic-input-label ic-typography {
   gap: var(--ic-space-xxxs);
 }
 
-:host([orientation="horizontal"]) .radio-buttons-container {
+:host .radio-buttons-container.horizontal {
   display: flex;
   flex-direction: row;
   gap: calc(var(--ic-space-xl) + var(--ic-space-xs));
 }
 
-:host(.small[orientation="horizontal"]) .radio-buttons-container {
+:host(.small) .radio-buttons-container.horizontal {
   gap: var(--ic-space-xl);
 }

package/dist/collection/components/ic-radio-group/ic-radio-group.js

@@ -1,7 +1,14 @@
 import { Host, h, } from "@stencil/core";
-import { hasValidationStatus, isSlotUsed, onComponentRequiredPropUndefined, removeDisabledFalse, renderHiddenInput, } from "../../utils/helpers";
+import { hasValidationStatus, isSlotUsed, onComponentRequiredPropUndefined, removeDisabledFalse, renderHiddenInput, checkResizeObserver, } from "../../utils/helpers";
 export class RadioGroup {
   constructor() {
+    this.resizeObserver = null;
+    this.runResizeObserver = () => {
+      this.resizeObserver = new ResizeObserver(() => {
+        this.checkOrientation();
+      });
+      this.resizeObserver.observe(this.host);
+    };
     this.handleKeyDown = (event) => {
       switch (event.key) {
         case "ArrowDown":
@@ -35,6 +42,8 @@ export class RadioGroup {
       return nextItem;
     };
     this.checkedValue = "";
+    this.currentOrientation = undefined;
+    this.initialOrientation = undefined;
     this.selectedChild = -1;
     this.disabled = false;
     this.helperText = undefined;
@@ -47,8 +56,18 @@ export class RadioGroup {
     this.validationStatus = "";
     this.validationText = "";
   }
+  orientationChangeHandler() {
+    this.initialOrientation = this.orientation;
+  }
+  disconnectedCallback() {
+    if (this.resizeObserver !== null) {
+      this.resizeObserver.disconnect();
+    }
+  }
   componentWillLoad() {
     removeDisabledFalse(this.disabled, this.host);
+    this.orientationChangeHandler();
+    this.currentOrientation = this.initialOrientation;
   }
   componentDidLoad() {
     this.radioOptions = Array.from(this.host.querySelectorAll("ic-radio-option"));
@@ -65,14 +84,15 @@ export class RadioGroup {
     });
     this.radioOptions[0].shadowRoot.querySelector("input").tabIndex =
       this.selectedChild > 0 ? -1 : 0;
-    if (this.orientation === "horizontal" &&
+    if (this.initialOrientation === "horizontal" &&
       this.radioOptions !== undefined &&
       (this.radioOptions.length > 2 ||
         (this.radioOptions.length === 2 &&
           (isSlotUsed(this.radioOptions[0], "additional-field") ||
             isSlotUsed(this.radioOptions[1], "additional-field"))))) {
-      this.orientation = "vertical";
+      this.currentOrientation = "vertical";
     }
+    checkResizeObserver(this.runResizeObserver);
     onComponentRequiredPropUndefined([
       { prop: this.label, propName: "label" },
       { prop: this.name, propName: "name" },
@@ -107,9 +127,32 @@ export class RadioGroup {
       this.selectedChild = selectedOption;
     }
   }
+  checkOrientation() {
+    if (this.initialOrientation === "horizontal") {
+      let totalWidth = 0;
+      const radioOptionGap = 40;
+      for (let i = 0; i < this.radioOptions.length; i++) {
+        totalWidth += this.radioOptions[i].clientWidth;
+        if (i < this.radioOptions.length - 1) {
+          totalWidth += radioOptionGap;
+        }
+      }
+      if (this.currentOrientation === "horizontal" &&
+        totalWidth > this.radioContainer.clientWidth) {
+        this.currentOrientation = "vertical";
+      }
+      else if (this.currentOrientation === "vertical" &&
+        totalWidth < this.radioContainer.clientWidth) {
+        this.currentOrientation = "horizontal";
+      }
+    }
+  }
   render() {
     renderHiddenInput(true, this.host, this.name, this.checkedValue, this.disabled);
-    return (h(Host, { onKeyDown: this.handleKeyDown, class: { small: this.small } }, h("div", { role: "radiogroup", "aria-label": `${this.label}${this.required ? ", required" : ""}` }, !this.hideLabel && (h("ic-input-label", { class: { [`${this.validationStatus}`]: true }, label: this.label, helperText: this.helperText, required: this.required, disabled: this.disabled })), h("div", { class: "radio-buttons-container" }, h("slot", null))), hasValidationStatus(this.validationStatus, this.disabled) && (h("ic-input-validation", { ariaLiveMode: "polite", status: this.validationStatus, message: this.validationText }))));
+    return (h(Host, { onKeyDown: this.handleKeyDown, class: { small: this.small } }, h("div", { role: "radiogroup", "aria-label": `${this.label}${this.required ? ", required" : ""}` }, !this.hideLabel && (h("ic-input-label", { class: { [`${this.validationStatus}`]: true }, label: this.label, helperText: this.helperText, required: this.required, disabled: this.disabled })), h("div", { class: {
+        "radio-buttons-container": true,
+        horizontal: this.currentOrientation === "horizontal",
+      }, ref: (el) => (this.radioContainer = el) }, h("slot", null))), hasValidationStatus(this.validationStatus, this.disabled) && (h("ic-input-validation", { ariaLiveMode: "polite", status: this.validationStatus, message: this.validationText }))));
   }
   static get is() { return "ic-radio-group"; }
   static get encapsulation() { return "shadow"; }
@@ -214,7 +257,7 @@ export class RadioGroup {
       },
       "orientation": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "IcOrientation",
           "resolved": "\"horizontal\" | \"vertical\"",
@@ -233,7 +276,7 @@ export class RadioGroup {
           "text": "The orientation of the radio buttons in the radio group. If there are more than two radio buttons in a radio group or either of the radio buttons use the `additional-field` slot, then the orientation will always be vertical."
         },
         "attribute": "orientation",
-        "reflect": true,
+        "reflect": false,
         "defaultValue": "\"vertical\""
       },
       "required": {
@@ -319,6 +362,8 @@ export class RadioGroup {
   static get states() {
     return {
       "checkedValue": {},
+      "currentOrientation": {},
+      "initialOrientation": {},
       "selectedChild": {}
     };
   }
@@ -347,6 +392,12 @@ export class RadioGroup {
       }];
   }
   static get elementRef() { return "host"; }
+  static get watchers() {
+    return [{
+        "propName": "orientation",
+        "methodName": "orientationChangeHandler"
+      }];
+  }
   static get listeners() {
     return [{
         "name": "icCheck",