npm - @ukic/web-components - Versions diffs - 2.1.0-beta.9 → 2.2.0 - Mend

@ukic/web-components 2.1.0-beta.9 → 2.2.0

Files changed (1175) hide show

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

	@@ -1 +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"]}
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 dropdown: HTMLElement;\n private DYNAMIC_GROUPED_LINKS_HEIGHT_MS = 50;\n private groupEl: HTMLElement;\n private IC_NAVIGATION_ITEM = \"ic-navigation-item\";\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 /\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 = (): 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 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.test.a11y.js → test/a11y/ic-navigation-group.test.a11y.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import { fixture } from "@open-wc/testing-helpers";
 import { axe } from "jest-axe";
-import { checkShadowElementRendersCorrectly } from "../../utils/testa11y.helpers";
+import { checkShadowElementRendersCorrectly } from "../../../../utils/testa11y.helpers";
 describe("ic-navigation-group", () => {
   it("passes accessibility", async () => {
     const el = await fixture(`<ic-navigation-group label="Test label"></ic-navigation-group>`);

package/dist/collection/components/ic-navigation-group/test/a11y/ic-navigation-group.test.a11y.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ic-navigation-group.test.a11y.js","sourceRoot":"","sources":["../../../../../src/components/ic-navigation-group/test/a11y/ic-navigation-group.test.a11y.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,kCAAkC,EAAE,MAAM,oCAAoC,CAAC;AAExF,QAAQ,CAAC,qBAAqB,EAAE,GAAG,EAAE;EACnC,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB,gEAAgE,CACjE,CAAC;IACF,kCAAkC,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,CACJ,MAAM,GAAG,CAAC,EAAE,EAAE;MACZ,wDAAwD;MACxD,KAAK,EAAE;QACL,sBAAsB,EAAE;UACtB,OAAO,EAAE,KAAK;SACf;OACF;KACF,CAAC,CACH,CAAC,kBAAkB,EAAE,CAAC;EACzB,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { fixture } from \"@open-wc/testing-helpers\";\nimport { axe } from \"jest-axe\";\nimport { checkShadowElementRendersCorrectly } from \"../../../../utils/testa11y.helpers\";\n\ndescribe(\"ic-navigation-group\", () => {\n it(\"passes accessibility\", async () => {\n const el = await fixture(\n `<ic-navigation-group label=\"Test label\"></ic-navigation-group>`\n );\n checkShadowElementRendersCorrectly(el);\n expect(\n await axe(el, {\n // Rule met by wrapping slot in parent component in <ul>\n rules: {\n \"aria-required-parent\": {\n enabled: false,\n },\n },\n })\n ).toHaveNoViolations();\n });\n});\n"]}

package/dist/collection/components/ic-navigation-group/test/basic/ic-navigation-group.spec.js ADDED Viewed

@@ -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/test/basic/ic-navigation-group.spec.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ic-navigation-group.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-navigation-group/test/basic/ic-navigation-group.spec.ts"],"names":[],"mappings":"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","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 CHANGED Viewed

@@ -459,12 +459,12 @@ svg {
   fill: var(--ic-theme-text);
 }
-ic-typography {
-  flex: 1;
+.svg {
+  margin-left: auto;
 }
-:host([expandable].navigation-item) .link,
-:host([expandable].navigation-item) ::slotted(a) {
+:host(.expandable.navigation-item) .link,
+:host(.expandable.navigation-item) ::slotted(a) {
   padding-right: 0;
 }
@@ -563,12 +563,14 @@ ic-typography {
 :host(.navigation-item-side-menu) ::slotted(a) {
   height: 2.5rem;
   width: 100%;
+  box-sizing: border-box;
   color: var(--ic-color-primary-text);
   display: flex;
   align-items: center;
   justify-content: flex-start;
   text-decoration: none;
-  transition: var(--ic-transition-duration-fast);
+  transition: box-shadow var(--ic-transition-duration-fast),
+    border-radius var(--ic-transition-duration-fast);
 }
 :host(.navigation-item-side-menu) ::slotted(a) {
@@ -688,6 +690,7 @@ ic-typography {
   left: 0;
   width: var(--ic-space-xs);
   height: 2.5rem;
+  margin-top: 0.25rem;
   margin-right: 0.313rem;
   background-color: var(--ic-action-default);
   transition: left 0s;
@@ -792,6 +795,7 @@ ic-typography {
 }
 .icon {
+  height: var(--ic-space-lg);
   width: var(--ic-space-xxl);
   margin-left: calc(-1 * var(--ic-space-md));
   flex: 0 1 0%;
@@ -853,6 +857,10 @@ ic-typography {
 :host(.navigation-item-side-nav.navigation-item-top-nav-child)
   a.link
   ic-typography,
+:host(.navigation-item-side-nav) div.link ic-typography,
+:host(.navigation-item-side-nav.navigation-item-top-nav-child)
+  div.link
+  ic-typography,
 .navigation-item-side-nav-slotted-text {
   opacity: var(--navigation-item-label-opacity);
   transition: opacity var(--ic-easing-transition-slow);
@@ -871,11 +879,8 @@ ic-typography {
   content: "";
   display: block;
   position: absolute;
-  top: 0;
-  right: 0;
-  left: 0.313rem;
+  inset: 0 0 0 0.313rem;
   border-radius: 0.688rem !important;
-  bottom: 0;
   transition: var(--ic-easing-transition-slow);
 }
@@ -937,9 +942,15 @@ ic-typography {
   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,
@@ -960,10 +971,10 @@ ic-typography {
   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)
@@ -980,3 +991,35 @@ ic-typography {
   .link:focus::before {
   display: none;
 }
+.open-in-new-icon {
+  flex: 1;
+}
+.open-in-new-icon svg {
+  margin-top: var(--ic-space-xxs);
+  padding-left: var(--ic-space-xxs);
+}
+:host(.navigation-item-side-nav) .open-in-new-icon {
+  margin-left: calc(-1 * var(--ic-space-xs));
+}
+:host(.navigation-item-top-nav) .open-in-new-icon svg,
+:host(.navigation-item-page-header) .open-in-new-icon svg,
+:host(.navigation-item-side-nav) .open-in-new-icon svg {
+  height: 0.875rem;
+  width: 0.875rem;
+}
+:host(.navigation-item-side-menu) .open-in-new-icon svg,
+:host(.navigation-item-top-nav-child) .open-in-new-icon svg {
+  height: var(--ic-space-md);
+  width: var(--ic-space-md);
+}
+:host(.navigation-item-page-header) .open-in-new-icon svg,
+:host(.navigation-item-top-nav-child) .open-in-new-icon svg,
+:host(.navigation-item-side-menu) .open-in-new-icon svg {
+  fill: var(--ic-color-primary-text);
+}