@ukic/web-components 2.1.0-beta.14 → 2.1.0-beta.16

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

@@ -4,6 +4,9 @@ import chevronIcon from "../../assets/chevron-icon.svg";
 export class NavigationGroup {
   constructor() {
     this.DYNAMIC_GROUPED_LINKS_HEIGHT_MS = 50;
+    this.IC_NAVIGATION_ITEM = "ic-navigation-item";
+    this.nodeName = "IC-NAVIGATION-GROUP";
+    this.mouseGate = false;
     this.sideNavExpandHandler = () => {
       setTimeout(() => this.setInitialGroupedLinksWrapperHeight(), this.DYNAMIC_GROUPED_LINKS_HEIGHT_MS);
     };
@@ -15,7 +18,9 @@ export class NavigationGroup {
       }
     };
     this.setGroupedNavItemTabIndex = (tabIndexValue) => {
-      this.el.querySelectorAll("ic-navigation-item").forEach((navigationItem) => {
+      this.el
+        .querySelectorAll(this.IC_NAVIGATION_ITEM)
+        .forEach((navigationItem) => {
         const navItem = navigationItem.shadowRoot.querySelector("a") ||
           navigationItem.querySelector("a");
         if (navItem) {
@@ -55,16 +60,15 @@ export class NavigationGroup {
       }
     };
     this.handleTopNavKeydown = (ev) => {
-      if (!this.inTopNavSideMenu && ev.key === "Escape") {
-        this.hideDropdown();
-        this.el.blur();
-      }
-      else if (ev.key === " " || ev.key === "Enter") {
+      if (ev.key === " " || ev.key === "Enter") {
         this.toggleDropdown();
       }
+      else if (!this.inTopNavSideMenu && ev.key === "Escape") {
+        this.hideDropdown();
+      }
     };
     this.handleKeydown = (ev) => {
-      if (ev.key === "Enter" || ev.key === "Space") {
+      if (ev.key === "Enter" || ev.key === " " || ev.key === "Escape") {
         switch (this.navigationType) {
           case "top":
             this.handleTopNavKeydown(ev);
@@ -80,16 +84,40 @@ export class NavigationGroup {
       }
     };
     this.handleMouseLeave = (ev) => {
-      const target = ev.relatedTarget;
-      if (!this.el.contains(target) &&
-        target !== this.dropdown &&
+      const relTarget = ev.relatedTarget;
+      this.mouseGate = false;
+      if (!this.el.contains(relTarget) &&
+        relTarget !== this.dropdown &&
         document.activeElement !== this.el &&
-        !this.el.contains(document.activeElement)) {
+        !this.el.contains(document.activeElement) &&
+        relTarget.nodeName === this.nodeName &&
+        this.dropdownOpen === true) {
+        this.mouseGate = true;
         this.hideDropdown();
       }
+      else if (!this.el.contains(relTarget) &&
+        relTarget !== this.dropdown &&
+        !this.el.contains(document.activeElement)) {
+        this.mouseGate = false;
+        setTimeout(() => {
+          this.dropdownOpen ? this.hideDropdown() : null;
+        }, 500);
+      }
     };
-    this.triggerShowDropdown = () => {
-      this.showDropdown();
+    this.handleMouseEnter = (ev) => {
+      const relTarget = ev.relatedTarget;
+      document.addEventListener("keydown", this.handleKeydown);
+      if (relTarget.nodeName === this.nodeName && this.mouseGate === true) {
+        this.showDropdown();
+      }
+      else if (this.dropdownOpen === false &&
+        relTarget !== null &&
+        this.mouseGate === false) {
+        this.mouseGate = true;
+        setTimeout(() => {
+          this.mouseGate && this.showDropdown();
+        }, 500);
+      }
     };
     this.renderDropdownGroupedLinks = () => (h("div", { class: {
         ["navigation-group-dropdown"]: !this.inTopNavSideMenu,
@@ -104,8 +132,8 @@ export class NavigationGroup {
      * smoothness of expand/collapse animations
      */
     this.getNavigationChildItemsHeight = () => {
-      const navigationItemLength = this.el.querySelectorAll("ic-navigation-item").length || 0;
-      const navigationItem = this.el.querySelector("ic-navigation-item") || null;
+      const navigationItemLength = this.el.querySelectorAll(this.IC_NAVIGATION_ITEM).length || 0;
+      const navigationItem = this.el.querySelector(this.IC_NAVIGATION_ITEM) || null;
       if (this.navigationType === "side" &&
         !!navigationItemLength &&
         navigationItem) {
@@ -165,6 +193,7 @@ export class NavigationGroup {
     }
   }
   hideDropdown() {
+    document.removeEventListener("keydown", this.handleKeydown);
     if (this.dropdownOpen) {
       this.toggleDropdown();
     }
@@ -207,9 +236,9 @@ export class NavigationGroup {
         expanded: this.expanded,
         collapsed: !this.expanded,
         ["navigation-group-side-nav"]: this.navigationType === "side",
-      }, role: "listitem" }, h(NavigationGroupElement, { tabindex: inTopNavSideMenu && !expandable ? "-1" : "0", onMouseOver: !inTopNavSideMenu && this.navigationType === "top"
-        ? this.triggerShowDropdown
-        : null, onMouseLeave: this.navigationType === "top" && this.handleMouseLeave, onBlur: this.handleBlur, onClick: expandable ? this.handleClick : null, onKeyDown: this.handleKeydown, class: {
+      }, role: "listitem" }, h(NavigationGroupElement, { onMouseEnter: !inTopNavSideMenu &&
+        this.navigationType === "top" &&
+        this.handleMouseEnter, onMouseLeave: this.navigationType === "top" && this.handleMouseLeave, tabindex: inTopNavSideMenu && !expandable ? "-1" : "0", onBlur: this.handleBlur, onClick: expandable ? this.handleClick : null, onKeyDown: this.handleKeydown, class: {
         ["navigation-group"]: true,
         [this.focusStyle]: !inTopNavSideMenu,
         ["navigation-group-side-menu"]: inTopNavSideMenu && !expandable,

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  @Element() el: HTMLIcNavigationGroupElement;\n\n  /**\n   * The label to display on the group.\n   */\n  @Prop() label: string;\n\n  /**\n   *  If `true`, the group will be expandable in the side menu.\n   */\n  @Prop() expandable: boolean = false;\n\n  @State() dropdownOpen: boolean = false;\n\n  @State() inTopNavSideMenu: boolean = false;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n\n  @State() focusStyle = getThemeForegroundColor();\n\n  @State() navigationType: IcNavType | \"\";\n\n  @State() parentEl: HTMLElement;\n\n  @State() expanded: boolean = true;\n\n  private groupEl: HTMLElement;\n  private dropdown: HTMLElement;\n  private DYNAMIC_GROUPED_LINKS_HEIGHT_MS = 50;\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 = (): void => {\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.querySelectorAll(\"ic-navigation-item\").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\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    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 (!this.inTopNavSideMenu && ev.key === \"Escape\") {\n      this.hideDropdown();\n      this.el.blur();\n    } else if (ev.key === \" \" || ev.key === \"Enter\") {\n      this.toggleDropdown();\n    }\n  };\n\n  private handleKeydown = (ev: KeyboardEvent) => {\n    if (ev.key === \"Enter\" || ev.key === \"Space\") {\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 target = ev.relatedTarget as HTMLElement;\n    if (\n      !this.el.contains(target) &&\n      target !== this.dropdown &&\n      document.activeElement !== this.el &&\n      !this.el.contains(document.activeElement)\n    ) {\n      this.hideDropdown();\n    }\n  };\n\n  private triggerShowDropdown = () => {\n    this.showDropdown();\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    const navigationItemLength =\n      this.el.querySelectorAll(\"ic-navigation-item\").length || 0;\n    const navigationItem = this.el.querySelector(\"ic-navigation-item\") || null;\n\n    if (\n      this.navigationType === \"side\" &&\n      !!navigationItemLength &&\n      navigationItem\n    ) {\n      return `${\n        parseInt(getComputedStyle(navigationItem).height) * navigationItemLength\n      }px`;\n    }\n\n    return \"auto\";\n  };\n\n  private setInitialGroupedLinksWrapperHeight = () => {\n    const linkWrapper = this.el.shadowRoot.querySelector(\n      \".grouped-links-wrapper\"\n    ) as HTMLElement;\n\n    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  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    /**\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  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  render() {\n    const { label, dropdownOpen, inTopNavSideMenu, expandable } = this;\n\n    const NavigationGroupElement =\n      !inTopNavSideMenu || expandable ? \"button\" : \"div\";\n\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          tabindex={inTopNavSideMenu && !expandable ? \"-1\" : \"0\"}\n          onMouseOver={\n            !inTopNavSideMenu && this.navigationType === \"top\"\n              ? this.triggerShowDropdown\n              : null\n          }\n          onMouseLeave={this.navigationType === \"top\" && this.handleMouseLeave}\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":"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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  @Element() el: HTMLIcNavigationGroupElement;\n\n  /**\n   * The label to display on the group.\n   */\n  @Prop() label: string;\n\n  /**\n   *  If `true`, the group will be expandable in the side menu.\n   */\n  @Prop() expandable: boolean = false;\n\n  @State() dropdownOpen: boolean = false;\n\n  @State() inTopNavSideMenu: boolean = false;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n\n  @State() focusStyle = getThemeForegroundColor();\n\n  @State() navigationType: IcNavType | \"\";\n\n  @State() parentEl: HTMLElement;\n\n  @State() expanded: boolean = true;\n\n  private groupEl: HTMLElement;\n  private dropdown: HTMLElement;\n  private DYNAMIC_GROUPED_LINKS_HEIGHT_MS = 50;\n  private IC_NAVIGATION_ITEM = \"ic-navigation-item\";\n  private nodeName = \"IC-NAVIGATION-GROUP\";\n  private mouseGate: boolean = false;\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 = (): void => {\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    const navigationItemLength =\n      this.el.querySelectorAll(this.IC_NAVIGATION_ITEM).length || 0;\n    const navigationItem =\n      this.el.querySelector(this.IC_NAVIGATION_ITEM) || null;\n\n    if (\n      this.navigationType === \"side\" &&\n      !!navigationItemLength &&\n      navigationItem\n    ) {\n      return `${\n        parseInt(getComputedStyle(navigationItem).height) * navigationItemLength\n      }px`;\n    }\n\n    return \"auto\";\n  };\n\n  private setInitialGroupedLinksWrapperHeight = () => {\n    const linkWrapper = this.el.shadowRoot.querySelector(\n      \".grouped-links-wrapper\"\n    ) as HTMLElement;\n\n    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  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    /**\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  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  render() {\n    const { label, dropdownOpen, inTopNavSideMenu, expandable } = this;\n\n    const NavigationGroupElement =\n      !inTopNavSideMenu || expandable ? \"button\" : \"div\";\n\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-group/ic-navigation-group.spec.js

@@ -0,0 +1,309 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { waitForNavGroupLoad } from "../../testspec.setup";
+import { NavigationItem } from "../ic-navigation-item/ic-navigation-item";
+import { SideNavigation } from "../ic-side-navigation/ic-side-navigation";
+import { TopNavigation } from "../ic-top-navigation/ic-top-navigation";
+import { DEVICE_SIZES } from "../../utils/helpers";
+import { NavigationGroup } from "./ic-navigation-group";
+import * as helpers from "../../utils/helpers";
+import { waitForTimeout } from "../../testspec.setup";
+const ev = {
+  relatedTarget: {
+    nodeName: "IC-NAVIGATION-GROUP",
+  },
+  target: {
+    nodeName: "IC-NAVIGATION-GROUP",
+  },
+};
+const timeOut = 1000;
+describe("ic-navigation-group", () => {
+  it("should render with label", async () => {
+    const page = await newSpecPage({
+      components: [NavigationGroup],
+      html: `<ic-navigation-group label="Group label"></ic-navigation-group>`,
+    });
+    await waitForNavGroupLoad();
+    expect(page.root).toMatchSnapshot("renders-with-label");
+  });
+  it("should test handleMouseEnter", async () => {
+    const page = await newSpecPage({
+      components: [NavigationGroup],
+      html: `<ic-navigation-group label="Group label"></ic-navigation-group>`,
+    });
+    await waitForNavGroupLoad();
+    page.rootInstance.mouseGate = true;
+    expect(page.rootInstance.dropdownOpen).toBe(false);
+    await page.rootInstance.handleMouseEnter(ev);
+    await waitForTimeout(timeOut);
+    await page.waitForChanges();
+    expect(page.rootInstance.dropdownOpen).toBe(true);
+    await page.rootInstance.hideDropdown();
+    await page.waitForChanges();
+    expect(page.rootInstance.dropdownOpen).toBe(false);
+    ev.relatedTarget.nodeName = "ANOTHER-NAME";
+    page.rootInstance.mouseGate = false;
+    await page.rootInstance.handleMouseEnter(ev);
+    await waitForTimeout(timeOut);
+    await page.waitForChanges();
+    expect(page.rootInstance.mouseGate).toBe(true);
+    jest.spyOn(document, "addEventListener");
+    await page.rootInstance.handleMouseEnter(ev);
+    await waitForTimeout(timeOut);
+    await page.waitForChanges();
+    expect(document.addEventListener).toHaveBeenCalledTimes(1);
+    await page.rootInstance.showDropdown();
+    await page.waitForChanges();
+    await page.rootInstance.childBlurHandler();
+    await page.waitForChanges();
+    expect(page.rootInstance.dropdownOpen).toBe(false);
+    await page.rootInstance.showDropdown();
+    await page.waitForChanges();
+    expect(page.rootInstance.dropdownOpen).toBe(true);
+    await page.rootInstance.navItemClickHandler();
+    await page.waitForChanges();
+    expect(page.rootInstance.dropdownOpen).toBe(false);
+    ev.relatedTarget.nodeName = "IC-NAVIGATION-GROUP";
+  });
+  it("should test toggleExpanded", async () => {
+    const page = await newSpecPage({
+      components: [NavigationGroup, NavigationItem],
+      html: `<ic-navigation-group label="Group label">
+        <ic-navigation-item href="/" label="Home"></ic-navigation-item>
+      </ic-navigation-group>`,
+    });
+    await waitForNavGroupLoad();
+    expect(page.rootInstance.expanded).toBe(true);
+    await page.rootInstance.toggleExpanded();
+    await page.waitForChanges();
+    expect(page.rootInstance.expanded).toBe(false);
+    await page.rootInstance.toggleExpanded();
+    await page.waitForChanges();
+    expect(page.rootInstance.expanded).toBe(true);
+  });
+  it("should test click handler", async () => {
+    const page = await newSpecPage({
+      components: [NavigationGroup, NavigationItem],
+      html: `<ic-navigation-group label="Group label">
+        <ic-navigation-item href="/" label="Home"></ic-navigation-item>
+      </ic-navigation-group>`,
+    });
+    await waitForNavGroupLoad();
+    expect(page.rootInstance.expanded).toBe(true);
+    await page.rootInstance.handleClick();
+    await page.waitForChanges();
+    expect(page.rootInstance.expanded).toBe(false);
+    expect(page.rootInstance.dropdownOpen).toBe(false);
+    page.rootInstance.navigationType = "top";
+    await page.rootInstance.handleClick({ detail: { something: "set" } });
+    await page.waitForChanges();
+    expect(page.rootInstance.dropdownOpen).toBe(true);
+  });
+  it("should test top nav key down handler", async () => {
+    const page = await newSpecPage({
+      components: [NavigationGroup, NavigationItem],
+      html: `<ic-navigation-group label="Group label">
+        <ic-navigation-item href="/" label="Home"></ic-navigation-item>
+      </ic-navigation-group>`,
+    });
+    await waitForNavGroupLoad();
+    expect(page.rootInstance.dropdownOpen).toBe(false);
+    await page.rootInstance.showDropdown();
+    await page.waitForChanges();
+    expect(page.rootInstance.dropdownOpen).toBe(true);
+    await page.rootInstance.handleTopNavKeydown({ key: "Escape" });
+    await page.waitForChanges();
+    expect(page.rootInstance.dropdownOpen).toBe(false);
+    await page.rootInstance.handleTopNavKeydown({ key: "Enter" });
+    await page.waitForChanges();
+    expect(page.rootInstance.dropdownOpen).toBe(true);
+  });
+  it("should test handleBlur function", async () => {
+    const page = await newSpecPage({
+      components: [NavigationGroup, NavigationItem],
+      html: `<ic-navigation-group label="Group label">
+      <ic-navigation-item href="/" label="Home"></ic-navigation-item>
+      <ic-navigation-item href="/" label="andAway"></ic-navigation-item>
+      <ic-navigation-item href="/" label="closerEachDay"></ic-navigation-item>
+      </ic-navigation-group>`,
+    });
+    await waitForNavGroupLoad();
+    await page.rootInstance.showDropdown();
+    await page.waitForChanges();
+    expect(page.rootInstance.dropdownOpen).toBe(true);
+    await page.rootInstance.handleBlur(ev);
+    await page.waitForChanges();
+    expect(page.rootInstance.dropdownOpen).toBe(false);
+  });
+  it("should test handleMouseLeave function", async () => {
+    const page = await newSpecPage({
+      components: [NavigationGroup, NavigationItem],
+      html: `<ic-navigation-group label="Group label">
+        <ic-navigation-item href="/" label="Home"></ic-navigation-item>
+        <ic-navigation-item href="/" label="andAway"></ic-navigation-item>
+      </ic-navigation-group>`,
+    });
+    await waitForNavGroupLoad();
+    ev.target.nodeName = "IC-NOT-NAV-GROUP";
+    await page.rootInstance.showDropdown();
+    await page.waitForChanges();
+    expect(page.rootInstance.dropdownOpen).toBe(true);
+    await page.rootInstance.handleMouseLeave(ev);
+    await waitForTimeout(600);
+    await page.waitForChanges();
+    expect(page.rootInstance.dropdownOpen).toBe(false);
+    // check other branch of 'if'
+    ev.relatedTarget.nodeName = "IC-NOT-NAV-GROUP";
+    await page.rootInstance.showDropdown();
+    await page.waitForChanges();
+    expect(page.rootInstance.dropdownOpen).toBe(true);
+    await page.rootInstance.handleMouseLeave(ev);
+    await waitForTimeout(timeOut);
+    await page.waitForChanges();
+    expect(page.rootInstance.dropdownOpen).toBe(false);
+    // check if null value called
+    await page.rootInstance.handleMouseLeave(ev);
+    await waitForTimeout(timeOut);
+    await page.waitForChanges();
+    expect(page.rootInstance.dropdownOpen).toBe(false);
+    ev.relatedTarget.nodeName = "IC-NAVIGATION-GROUP";
+    ev.target.nodeName = "IC-NAVIGATION-GROUP";
+  });
+  it("should test key down handler", async () => {
+    const page = await newSpecPage({
+      components: [NavigationGroup, NavigationItem],
+      html: `<ic-navigation-group label="Group label">
+        <ic-navigation-item href="/" label="Home"></ic-navigation-item>
+      </ic-navigation-group>`,
+    });
+    await waitForNavGroupLoad();
+    expect(page.rootInstance.expanded).toBe(true);
+    await page.rootInstance.handleKeydown({ key: "Enter" });
+    await page.waitForChanges();
+    expect(page.rootInstance.expanded).toBe(false);
+    page.rootInstance.navigationType = "side";
+    await page.rootInstance.handleKeydown({
+      key: " ",
+      preventDefault: () => null,
+    });
+    await page.waitForChanges();
+    await waitForTimeout(600);
+    expect(page.rootInstance.expanded).toBe(true);
+    expect(page.rootInstance.dropdownOpen).toBe(false);
+    page.rootInstance.navigationType = "top";
+    await page.waitForChanges();
+    await page.rootInstance.handleKeydown({ key: "Enter" });
+    await page.waitForChanges();
+    expect(page.rootInstance.dropdownOpen).toBe(true);
+  });
+  it("should test theme change", async () => {
+    const page = await newSpecPage({
+      components: [NavigationGroup],
+      html: `<ic-navigation-group label="Group label"></ic-navigation-group>`,
+    });
+    await waitForNavGroupLoad();
+    await page.rootInstance.themeChangeHandler({ detail: { mode: "dark" } });
+    await page.waitForChanges();
+    expect(page.rootInstance.focusStyle).toBe("dark");
+    await page.rootInstance.themeChangeHandler({ detail: { mode: "light" } });
+    await page.waitForChanges();
+    expect(page.rootInstance.focusStyle).toBe("light");
+  });
+  it("should test inside side navigation", async () => {
+    const page = await newSpecPage({
+      components: [SideNavigation, NavigationGroup, NavigationItem],
+      html: `<ic-side-navigation version="v0.0.0" app-title="ACME" status="BETA" collapsed-icon-labels="true">
+      <ic-navigation-group
+            slot="primary-navigation"
+            label="Second navigation group"
+            expandable="true"
+          >
+        <ic-navigation-item href="/" label="Home"></ic-navigation-item>
+      </ic-navigation-group>
+    </ic-side-navigation>`,
+    });
+    await waitForNavGroupLoad();
+    // test disconnected callback
+    page.setContent("");
+  });
+  it("should test top nav resize handler", async () => {
+    const page = await newSpecPage({
+      components: [NavigationGroup],
+      html: `<ic-navigation-group label="Group label"></ic-navigation-group>`,
+    });
+    await waitForNavGroupLoad();
+    await page.rootInstance.topNavResizedHandler({
+      detail: { size: DEVICE_SIZES.S },
+    });
+    await page.waitForChanges();
+    expect(page.rootInstance.deviceSize).toBe(DEVICE_SIZES.S);
+    expect(page.rootInstance.inTopNavSideMenu).toBe(true);
+  });
+  it("should test side nav expand handler", async () => {
+    const page = await newSpecPage({
+      components: [NavigationGroup],
+      html: `<ic-navigation-group label="Group label"></ic-navigation-group>`,
+    });
+    await waitForNavGroupLoad();
+    await page.rootInstance.sideNavExpandHandler();
+    await page.waitForChanges();
+    await waitForNavGroupLoad();
+    const style = page.root.shadowRoot
+      .querySelector(".grouped-links-wrapper")
+      .getAttribute("style");
+    expect(style).toBe("--navigation-child-items-height: auto;");
+  });
+  it("should test setting nav item tab index", async () => {
+    const page = await newSpecPage({
+      components: [NavigationGroup, NavigationItem],
+      html: `<ic-navigation-group
+            label="Navigation group"
+          >
+        <ic-navigation-item href="/" label="Home"></ic-navigation-item>
+      </ic-navigation-group>`,
+    });
+    await waitForNavGroupLoad();
+    let navItemLink = page.root
+      .querySelector("ic-navigation-item")
+      .shadowRoot.querySelector("a");
+    expect(navItemLink.tabIndex).toBe(-1);
+    await page.rootInstance.setGroupedNavItemTabIndex("0");
+    await page.waitForChanges();
+    navItemLink = page.root
+      .querySelector("ic-navigation-item")
+      .shadowRoot.querySelector("a");
+    expect(navItemLink.tabIndex).toBe(0);
+  });
+  it("should call other methods ", async () => {
+    const page = await newSpecPage({
+      components: [NavigationGroup],
+      html: `<ic-navigation-group label="Group label"></ic-navigation-group>`,
+    });
+    await waitForNavGroupLoad();
+    await page.root.setFocus();
+  });
+  // NOTE: This must go last as mocks getCurrentDeviceSize function, which will apply to all subsequent tests
+  it("should test inside top navigation", async () => {
+    const myfunc = jest.fn().mockReturnValue(DEVICE_SIZES.S);
+    Object.defineProperty(helpers, "getCurrentDeviceSize", {
+      value: myfunc,
+    });
+    const page = await newSpecPage({
+      components: [TopNavigation, NavigationGroup, NavigationItem],
+      html: `<ic-top-navigation
+        app-title="ApplicationName"
+      >
+        <ic-navigation-group
+          slot="navigation"
+          label="Navigation group"
+          expandable="true"
+        >
+          <ic-navigation-item label="Navigation 1" href="/"></ic-navigation-item>
+        </ic-navigation-group>
+      </ic-top-navigation>`,
+    });
+    await waitForNavGroupLoad();
+    // test disconnected callback
+    page.setContent("");
+  });
+});
+//# sourceMappingURL=ic-navigation-group.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-navigation-group.spec.js","sourceRoot":"","sources":["../../../src/components/ic-navigation-group/ic-navigation-group.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAC1E,OAAO,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAC1E,OAAO,EAAE,aAAa,EAAE,MAAM,wCAAwC,CAAC;AACvE,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,KAAK,OAAO,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtD,MAAM,EAAE,GAAG;EACT,aAAa,EAAE;IACb,QAAQ,EAAE,qBAAqB;GAChC;EACD,MAAM,EAAE;IACN,QAAQ,EAAE,qBAAqB;GAChC;CACF,CAAC;AAEF,MAAM,OAAO,GAAG,IAAI,CAAC;AAErB,QAAQ,CAAC,qBAAqB,EAAE,GAAG,EAAE;EACnC,EAAE,CAAC,0BAA0B,EAAE,KAAK,IAAI,EAAE;IACxC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;MAC7B,IAAI,EAAE,iEAAiE;KACxE,CAAC,CAAC;IACH,MAAM,mBAAmB,EAAE,CAAC;IAC5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,oBAAoB,CAAC,CAAC;EAC1D,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,8BAA8B,EAAE,KAAK,IAAI,EAAE;IAC5C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;MAC7B,IAAI,EAAE,iEAAiE;KACxE,CAAC,CAAC;IACH,MAAM,mBAAmB,EAAE,CAAC;IAC5B,IAAI,CAAC,YAAY,CAAC,SAAS,GAAG,IAAI,CAAC;IACnC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACnD,MAAM,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,EAAE,CAAC,CAAC;IAC7C,MAAM,cAAc,CAAC,OAAO,CAAC,CAAC;IAC9B,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAClD,MAAM,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,CAAC;IACvC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAEnD,EAAE,CAAC,aAAa,CAAC,QAAQ,GAAG,cAAc,CAAC;IAC3C,IAAI,CAAC,YAAY,CAAC,SAAS,GAAG,KAAK,CAAC;IACpC,MAAM,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,EAAE,CAAC,CAAC;IAC7C,MAAM,cAAc,CAAC,OAAO,CAAC,CAAC;IAC9B,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAE/C,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,kBAAkB,CAAC,CAAC;IAEzC,MAAM,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,EAAE,CAAC,CAAC;IAC7C,MAAM,cAAc,CAAC,OAAO,CAAC,CAAC;IAC9B,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,CAAC,QAAQ,CAAC,gBAAgB,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC;IAE3D,MAAM,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,CAAC;IACvC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,IAAI,CAAC,YAAY,CAAC,gBAAgB,EAAE,CAAC;IAC3C,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAEnD,MAAM,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,CAAC;IACvC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAElD,MAAM,IAAI,CAAC,YAAY,CAAC,mBAAmB,EAAE,CAAC;IAC9C,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACnD,EAAE,CAAC,aAAa,CAAC,QAAQ,GAAG,qBAAqB,CAAC;EACpD,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,4BAA4B,EAAE,KAAK,IAAI,EAAE;IAC1C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,eAAe,EAAE,cAAc,CAAC;MAC7C,IAAI,EAAE;;6BAEiB;KACxB,CAAC,CAAC;IACH,MAAM,mBAAmB,EAAE,CAAC;IAE5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC9C,MAAM,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,CAAC;IACzC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC/C,MAAM,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,CAAC;IACzC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EAChD,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,2BAA2B,EAAE,KAAK,IAAI,EAAE;IACzC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,eAAe,EAAE,cAAc,CAAC;MAC7C,IAAI,EAAE;;6BAEiB;KACxB,CAAC,CAAC;IACH,MAAM,mBAAmB,EAAE,CAAC;IAE5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC9C,MAAM,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,CAAC;IACtC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAE/C,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACnD,IAAI,CAAC,YAAY,CAAC,cAAc,GAAG,KAAK,CAAC;IACzC,MAAM,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE,MAAM,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC;IACtE,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EACpD,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,sCAAsC,EAAE,KAAK,IAAI,EAAE;IACpD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,eAAe,EAAE,cAAc,CAAC;MAC7C,IAAI,EAAE;;6BAEiB;KACxB,CAAC,CAAC;IACH,MAAM,mBAAmB,EAAE,CAAC;IAE5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACnD,MAAM,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,CAAC;IACvC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAClD,MAAM,IAAI,CAAC,YAAY,CAAC,mBAAmB,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,CAAC;IAC/D,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACnD,MAAM,IAAI,CAAC,YAAY,CAAC,mBAAmB,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,CAAC,CAAC;IAC9D,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EACpD,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,iCAAiC,EAAE,KAAK,IAAI,EAAE;IAC/C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,eAAe,EAAE,cAAc,CAAC;MAC7C,IAAI,EAAE;;;;6BAIiB;KACxB,CAAC,CAAC;IAEH,MAAM,mBAAmB,EAAE,CAAC;IAC5B,MAAM,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,CAAC;IACvC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAClD,MAAM,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EACrD,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,uCAAuC,EAAE,KAAK,IAAI,EAAE;IACrD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,eAAe,EAAE,cAAc,CAAC;MAC7C,IAAI,EAAE;;;6BAGiB;KACxB,CAAC,CAAC;IACH,MAAM,mBAAmB,EAAE,CAAC;IAC5B,EAAE,CAAC,MAAM,CAAC,QAAQ,GAAG,kBAAkB,CAAC;IAExC,MAAM,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,CAAC;IACvC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAClD,MAAM,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,EAAE,CAAC,CAAC;IAC7C,MAAM,cAAc,CAAC,GAAG,CAAC,CAAC;IAC1B,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACnD,6BAA6B;IAC7B,EAAE,CAAC,aAAa,CAAC,QAAQ,GAAG,kBAAkB,CAAC;IAC/C,MAAM,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,CAAC;IACvC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAClD,MAAM,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,EAAE,CAAC,CAAC;IAC7C,MAAM,cAAc,CAAC,OAAO,CAAC,CAAC;IAC9B,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACnD,6BAA6B;IAC7B,MAAM,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,EAAE,CAAC,CAAC;IAC7C,MAAM,cAAc,CAAC,OAAO,CAAC,CAAC;IAC9B,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACnD,EAAE,CAAC,aAAa,CAAC,QAAQ,GAAG,qBAAqB,CAAC;IAClD,EAAE,CAAC,MAAM,CAAC,QAAQ,GAAG,qBAAqB,CAAC;EAC7C,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,8BAA8B,EAAE,KAAK,IAAI,EAAE;IAC5C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,eAAe,EAAE,cAAc,CAAC;MAC7C,IAAI,EAAE;;6BAEiB;KACxB,CAAC,CAAC;IACH,MAAM,mBAAmB,EAAE,CAAC;IAE5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC9C,MAAM,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,CAAC,CAAC;IACxD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAE/C,IAAI,CAAC,YAAY,CAAC,cAAc,GAAG,MAAM,CAAC;IAC1C,MAAM,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC;MACpC,GAAG,EAAE,GAAG;MACR,cAAc,EAAE,GAAS,EAAE,CAAC,IAAI;KACjC,CAAC,CAAC;IACH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,cAAc,CAAC,GAAG,CAAC,CAAC;IAC1B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAE9C,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACnD,IAAI,CAAC,YAAY,CAAC,cAAc,GAAG,KAAK,CAAC;IACzC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,CAAC,CAAC;IACxD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EACpD,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,0BAA0B,EAAE,KAAK,IAAI,EAAE;IACxC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;MAC7B,IAAI,EAAE,iEAAiE;KACxE,CAAC,CAAC;IACH,MAAM,mBAAmB,EAAE,CAAC;IAC5B,MAAM,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC;IACzE,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAElD,MAAM,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,CAAC,CAAC;IAC1E,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;EACrD,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,oCAAoC,EAAE,KAAK,IAAI,EAAE;IAClD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC;MAC7D,IAAI,EAAE;;;;;;;;0BAQc;KACrB,CAAC,CAAC;IACH,MAAM,mBAAmB,EAAE,CAAC;IAE5B,6BAA6B;IAC7B,IAAI,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;EACtB,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,oCAAoC,EAAE,KAAK,IAAI,EAAE;IAClD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;MAC7B,IAAI,EAAE,iEAAiE;KACxE,CAAC,CAAC;IACH,MAAM,mBAAmB,EAAE,CAAC;IAE5B,MAAM,IAAI,CAAC,YAAY,CAAC,oBAAoB,CAAC;MAC3C,MAAM,EAAE,EAAE,IAAI,EAAE,YAAY,CAAC,CAAC,EAAE;KACjC,CAAC,CAAC;IACH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;IAC1D,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EACxD,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,qCAAqC,EAAE,KAAK,IAAI,EAAE;IACnD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;MAC7B,IAAI,EAAE,iEAAiE;KACxE,CAAC,CAAC;IACH,MAAM,mBAAmB,EAAE,CAAC;IAC5B,MAAM,IAAI,CAAC,YAAY,CAAC,oBAAoB,EAAE,CAAC;IAC/C,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,mBAAmB,EAAE,CAAC;IAC5B,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU;OAC/B,aAAa,CAAC,wBAAwB,CAAC;OACvC,YAAY,CAAC,OAAO,CAAC,CAAC;IACzB,MAAM,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,wCAAwC,CAAC,CAAC;EAC/D,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,wCAAwC,EAAE,KAAK,IAAI,EAAE;IACtD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,eAAe,EAAE,cAAc,CAAC;MAC7C,IAAI,EAAE;;;;6BAIiB;KACxB,CAAC,CAAC;IACH,MAAM,mBAAmB,EAAE,CAAC;IAE5B,IAAI,WAAW,GAAG,IAAI,CAAC,IAAI;OACxB,aAAa,CAAC,oBAAoB,CAAC;OACnC,UAAU,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IACjC,MAAM,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;IAEtC,MAAM,IAAI,CAAC,YAAY,CAAC,yBAAyB,CAAC,GAAG,CAAC,CAAC;IACvD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,WAAW,GAAG,IAAI,CAAC,IAAI;OACpB,aAAa,CAAC,oBAAoB,CAAC;OACnC,UAAU,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAEjC,MAAM,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;EACvC,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,4BAA4B,EAAE,KAAK,IAAI,EAAE;IAC1C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;MAC7B,IAAI,EAAE,iEAAiE;KACxE,CAAC,CAAC;IACH,MAAM,mBAAmB,EAAE,CAAC;IAC5B,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;EAC7B,CAAC,CAAC,CAAC;EAEH,2GAA2G;EAC3G,EAAE,CAAC,mCAAmC,EAAE,KAAK,IAAI,EAAE;IACjD,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;IACzD,MAAM,CAAC,cAAc,CAAC,OAAO,EAAE,sBAAsB,EAAE;MACrD,KAAK,EAAE,MAAM;KACd,CAAC,CAAC;IAEH,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,aAAa,EAAE,eAAe,EAAE,cAAc,CAAC;MAC5D,IAAI,EAAE;;;;;;;;;;2BAUe;KACtB,CAAC,CAAC;IACH,MAAM,mBAAmB,EAAE,CAAC;IAE5B,6BAA6B;IAC7B,IAAI,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;EACtB,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { waitForNavGroupLoad } from \"../../testspec.setup\";\nimport { NavigationItem } from \"../ic-navigation-item/ic-navigation-item\";\nimport { SideNavigation } from \"../ic-side-navigation/ic-side-navigation\";\nimport { TopNavigation } from \"../ic-top-navigation/ic-top-navigation\";\nimport { DEVICE_SIZES } from \"../../utils/helpers\";\nimport { NavigationGroup } from \"./ic-navigation-group\";\nimport * as helpers from \"../../utils/helpers\";\nimport { waitForTimeout } from \"../../testspec.setup\";\n\nconst ev = {\n  relatedTarget: {\n    nodeName: \"IC-NAVIGATION-GROUP\",\n  },\n  target: {\n    nodeName: \"IC-NAVIGATION-GROUP\",\n  },\n};\n\nconst timeOut = 1000;\n\ndescribe(\"ic-navigation-group\", () => {\n  it(\"should render with label\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationGroup],\n      html: `<ic-navigation-group label=\"Group label\"></ic-navigation-group>`,\n    });\n    await waitForNavGroupLoad();\n    expect(page.root).toMatchSnapshot(\"renders-with-label\");\n  });\n\n  it(\"should test handleMouseEnter\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationGroup],\n      html: `<ic-navigation-group label=\"Group label\"></ic-navigation-group>`,\n    });\n    await waitForNavGroupLoad();\n    page.rootInstance.mouseGate = true;\n    expect(page.rootInstance.dropdownOpen).toBe(false);\n    await page.rootInstance.handleMouseEnter(ev);\n    await waitForTimeout(timeOut);\n    await page.waitForChanges();\n    expect(page.rootInstance.dropdownOpen).toBe(true);\n    await page.rootInstance.hideDropdown();\n    await page.waitForChanges();\n    expect(page.rootInstance.dropdownOpen).toBe(false);\n\n    ev.relatedTarget.nodeName = \"ANOTHER-NAME\";\n    page.rootInstance.mouseGate = false;\n    await page.rootInstance.handleMouseEnter(ev);\n    await waitForTimeout(timeOut);\n    await page.waitForChanges();\n    expect(page.rootInstance.mouseGate).toBe(true);\n\n    jest.spyOn(document, \"addEventListener\");\n\n    await page.rootInstance.handleMouseEnter(ev);\n    await waitForTimeout(timeOut);\n    await page.waitForChanges();\n\n    expect(document.addEventListener).toHaveBeenCalledTimes(1);\n\n    await page.rootInstance.showDropdown();\n    await page.waitForChanges();\n\n    await page.rootInstance.childBlurHandler();\n    await page.waitForChanges();\n    expect(page.rootInstance.dropdownOpen).toBe(false);\n\n    await page.rootInstance.showDropdown();\n    await page.waitForChanges();\n    expect(page.rootInstance.dropdownOpen).toBe(true);\n\n    await page.rootInstance.navItemClickHandler();\n    await page.waitForChanges();\n    expect(page.rootInstance.dropdownOpen).toBe(false);\n    ev.relatedTarget.nodeName = \"IC-NAVIGATION-GROUP\";\n  });\n\n  it(\"should test toggleExpanded\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationGroup, NavigationItem],\n      html: `<ic-navigation-group label=\"Group label\">\n        <ic-navigation-item href=\"/\" label=\"Home\"></ic-navigation-item>\n      </ic-navigation-group>`,\n    });\n    await waitForNavGroupLoad();\n\n    expect(page.rootInstance.expanded).toBe(true);\n    await page.rootInstance.toggleExpanded();\n    await page.waitForChanges();\n    expect(page.rootInstance.expanded).toBe(false);\n    await page.rootInstance.toggleExpanded();\n    await page.waitForChanges();\n    expect(page.rootInstance.expanded).toBe(true);\n  });\n\n  it(\"should test click handler\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationGroup, NavigationItem],\n      html: `<ic-navigation-group label=\"Group label\">\n        <ic-navigation-item href=\"/\" label=\"Home\"></ic-navigation-item>\n      </ic-navigation-group>`,\n    });\n    await waitForNavGroupLoad();\n\n    expect(page.rootInstance.expanded).toBe(true);\n    await page.rootInstance.handleClick();\n    await page.waitForChanges();\n    expect(page.rootInstance.expanded).toBe(false);\n\n    expect(page.rootInstance.dropdownOpen).toBe(false);\n    page.rootInstance.navigationType = \"top\";\n    await page.rootInstance.handleClick({ detail: { something: \"set\" } });\n    await page.waitForChanges();\n    expect(page.rootInstance.dropdownOpen).toBe(true);\n  });\n\n  it(\"should test top nav key down handler\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationGroup, NavigationItem],\n      html: `<ic-navigation-group label=\"Group label\">\n        <ic-navigation-item href=\"/\" label=\"Home\"></ic-navigation-item>\n      </ic-navigation-group>`,\n    });\n    await waitForNavGroupLoad();\n\n    expect(page.rootInstance.dropdownOpen).toBe(false);\n    await page.rootInstance.showDropdown();\n    await page.waitForChanges();\n    expect(page.rootInstance.dropdownOpen).toBe(true);\n    await page.rootInstance.handleTopNavKeydown({ key: \"Escape\" });\n    await page.waitForChanges();\n    expect(page.rootInstance.dropdownOpen).toBe(false);\n    await page.rootInstance.handleTopNavKeydown({ key: \"Enter\" });\n    await page.waitForChanges();\n    expect(page.rootInstance.dropdownOpen).toBe(true);\n  });\n\n  it(\"should test handleBlur function\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationGroup, NavigationItem],\n      html: `<ic-navigation-group label=\"Group label\">\n      <ic-navigation-item href=\"/\" label=\"Home\"></ic-navigation-item>\n      <ic-navigation-item href=\"/\" label=\"andAway\"></ic-navigation-item>\n      <ic-navigation-item href=\"/\" label=\"closerEachDay\"></ic-navigation-item>\n      </ic-navigation-group>`,\n    });\n\n    await waitForNavGroupLoad();\n    await page.rootInstance.showDropdown();\n    await page.waitForChanges();\n    expect(page.rootInstance.dropdownOpen).toBe(true);\n    await page.rootInstance.handleBlur(ev);\n    await page.waitForChanges();\n    expect(page.rootInstance.dropdownOpen).toBe(false);\n  });\n\n  it(\"should test handleMouseLeave function\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationGroup, NavigationItem],\n      html: `<ic-navigation-group label=\"Group label\">\n        <ic-navigation-item href=\"/\" label=\"Home\"></ic-navigation-item>\n        <ic-navigation-item href=\"/\" label=\"andAway\"></ic-navigation-item>\n      </ic-navigation-group>`,\n    });\n    await waitForNavGroupLoad();\n    ev.target.nodeName = \"IC-NOT-NAV-GROUP\";\n\n    await page.rootInstance.showDropdown();\n    await page.waitForChanges();\n    expect(page.rootInstance.dropdownOpen).toBe(true);\n    await page.rootInstance.handleMouseLeave(ev);\n    await waitForTimeout(600);\n    await page.waitForChanges();\n    expect(page.rootInstance.dropdownOpen).toBe(false);\n    // check other branch of 'if'\n    ev.relatedTarget.nodeName = \"IC-NOT-NAV-GROUP\";\n    await page.rootInstance.showDropdown();\n    await page.waitForChanges();\n    expect(page.rootInstance.dropdownOpen).toBe(true);\n    await page.rootInstance.handleMouseLeave(ev);\n    await waitForTimeout(timeOut);\n    await page.waitForChanges();\n    expect(page.rootInstance.dropdownOpen).toBe(false);\n    // check if null value called\n    await page.rootInstance.handleMouseLeave(ev);\n    await waitForTimeout(timeOut);\n    await page.waitForChanges();\n    expect(page.rootInstance.dropdownOpen).toBe(false);\n    ev.relatedTarget.nodeName = \"IC-NAVIGATION-GROUP\";\n    ev.target.nodeName = \"IC-NAVIGATION-GROUP\";\n  });\n\n  it(\"should test key down handler\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationGroup, NavigationItem],\n      html: `<ic-navigation-group label=\"Group label\">\n        <ic-navigation-item href=\"/\" label=\"Home\"></ic-navigation-item>\n      </ic-navigation-group>`,\n    });\n    await waitForNavGroupLoad();\n\n    expect(page.rootInstance.expanded).toBe(true);\n    await page.rootInstance.handleKeydown({ key: \"Enter\" });\n    await page.waitForChanges();\n    expect(page.rootInstance.expanded).toBe(false);\n\n    page.rootInstance.navigationType = \"side\";\n    await page.rootInstance.handleKeydown({\n      key: \" \",\n      preventDefault: (): void => null,\n    });\n    await page.waitForChanges();\n    await waitForTimeout(600);\n    expect(page.rootInstance.expanded).toBe(true);\n\n    expect(page.rootInstance.dropdownOpen).toBe(false);\n    page.rootInstance.navigationType = \"top\";\n    await page.waitForChanges();\n    await page.rootInstance.handleKeydown({ key: \"Enter\" });\n    await page.waitForChanges();\n    expect(page.rootInstance.dropdownOpen).toBe(true);\n  });\n\n  it(\"should test theme change\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationGroup],\n      html: `<ic-navigation-group label=\"Group label\"></ic-navigation-group>`,\n    });\n    await waitForNavGroupLoad();\n    await page.rootInstance.themeChangeHandler({ detail: { mode: \"dark\" } });\n    await page.waitForChanges();\n    expect(page.rootInstance.focusStyle).toBe(\"dark\");\n\n    await page.rootInstance.themeChangeHandler({ detail: { mode: \"light\" } });\n    await page.waitForChanges();\n    expect(page.rootInstance.focusStyle).toBe(\"light\");\n  });\n\n  it(\"should test inside side navigation\", async () => {\n    const page = await newSpecPage({\n      components: [SideNavigation, NavigationGroup, NavigationItem],\n      html: `<ic-side-navigation version=\"v0.0.0\" app-title=\"ACME\" status=\"BETA\" collapsed-icon-labels=\"true\">\n      <ic-navigation-group\n            slot=\"primary-navigation\"\n            label=\"Second navigation group\"\n            expandable=\"true\"\n          >\n        <ic-navigation-item href=\"/\" label=\"Home\"></ic-navigation-item>\n      </ic-navigation-group>\n    </ic-side-navigation>`,\n    });\n    await waitForNavGroupLoad();\n\n    // test disconnected callback\n    page.setContent(\"\");\n  });\n\n  it(\"should test top nav resize handler\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationGroup],\n      html: `<ic-navigation-group label=\"Group label\"></ic-navigation-group>`,\n    });\n    await waitForNavGroupLoad();\n\n    await page.rootInstance.topNavResizedHandler({\n      detail: { size: DEVICE_SIZES.S },\n    });\n    await page.waitForChanges();\n    expect(page.rootInstance.deviceSize).toBe(DEVICE_SIZES.S);\n    expect(page.rootInstance.inTopNavSideMenu).toBe(true);\n  });\n\n  it(\"should test side nav expand handler\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationGroup],\n      html: `<ic-navigation-group label=\"Group label\"></ic-navigation-group>`,\n    });\n    await waitForNavGroupLoad();\n    await page.rootInstance.sideNavExpandHandler();\n    await page.waitForChanges();\n    await waitForNavGroupLoad();\n    const style = page.root.shadowRoot\n      .querySelector(\".grouped-links-wrapper\")\n      .getAttribute(\"style\");\n    expect(style).toBe(\"--navigation-child-items-height: auto;\");\n  });\n\n  it(\"should test setting nav item tab index\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationGroup, NavigationItem],\n      html: `<ic-navigation-group\n            label=\"Navigation group\"\n          >\n        <ic-navigation-item href=\"/\" label=\"Home\"></ic-navigation-item>\n      </ic-navigation-group>`,\n    });\n    await waitForNavGroupLoad();\n\n    let navItemLink = page.root\n      .querySelector(\"ic-navigation-item\")\n      .shadowRoot.querySelector(\"a\");\n    expect(navItemLink.tabIndex).toBe(-1);\n\n    await page.rootInstance.setGroupedNavItemTabIndex(\"0\");\n    await page.waitForChanges();\n    navItemLink = page.root\n      .querySelector(\"ic-navigation-item\")\n      .shadowRoot.querySelector(\"a\");\n\n    expect(navItemLink.tabIndex).toBe(0);\n  });\n\n  it(\"should call other methods \", async () => {\n    const page = await newSpecPage({\n      components: [NavigationGroup],\n      html: `<ic-navigation-group label=\"Group label\"></ic-navigation-group>`,\n    });\n    await waitForNavGroupLoad();\n    await page.root.setFocus();\n  });\n\n  // NOTE: This must go last as mocks getCurrentDeviceSize function, which will apply to all subsequent tests\n  it(\"should test inside top navigation\", async () => {\n    const myfunc = jest.fn().mockReturnValue(DEVICE_SIZES.S);\n    Object.defineProperty(helpers, \"getCurrentDeviceSize\", {\n      value: myfunc,\n    });\n\n    const page = await newSpecPage({\n      components: [TopNavigation, NavigationGroup, NavigationItem],\n      html: `<ic-top-navigation\n        app-title=\"ApplicationName\"\n      >\n        <ic-navigation-group\n          slot=\"navigation\"\n          label=\"Navigation group\"\n          expandable=\"true\"\n        >\n          <ic-navigation-item label=\"Navigation 1\" href=\"/\"></ic-navigation-item>\n        </ic-navigation-group>\n      </ic-top-navigation>`,\n    });\n    await waitForNavGroupLoad();\n\n    // test disconnected callback\n    page.setContent(\"\");\n  });\n});\n"]}

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

@@ -940,9 +940,15 @@ svg {
   box-shadow: rgba(23 89 188 / 0%) !important;
 }
 
-:host(.navigation-item-page-header.navigation-item-selected) .link,
-:host(.navigation-item-page-header) ::slotted(a.active) {
-  box-shadow: inset 0 calc(-1 * var(--ic-space-xxs)) 0 var(--ic-action-default);
+: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,
@@ -963,10 +969,10 @@ svg {
   background-color: var(--ic-action-default-bg-active) !important;
 }
 
-:host(.navigation-item-page-header.navigation-item-selected) .link:focus,
-:host(.navigation-item-page-header) ::slotted(a.active:focus) {
-  box-shadow: var(--ic-border-focus),
-    inset 0 calc(-1 * var(--ic-space-xxs)) 0 var(--ic-action-default);
+: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)