npm - @ukic/web-components - Versions diffs - 3.0.0-alpha.13 → 3.0.0-alpha.14 - Mend

@ukic/web-components 3.0.0-alpha.13 → 3.0.0-alpha.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (158) hide show

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

	@@ -1 +1 @@
1	- {"file":"ic-navigation-group.js","mappings":"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","names":[],"sources":["src/components/ic-navigation-group/ic-navigation-group.css?tag=ic-navigation-group&encapsulation=shadow","src/components/ic-navigation-group/ic-navigation-group.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/*\n @prop --ic-z-index-navigation-item: z-index of navigation group item\n /\n\n:host {\n display: block;\n\n --ic-typography-color: currentcolor;\n}\n\n:host(.in-side-menu) {\n border-bottom: var(--ic-border-width) solid\n var(--ic-divider-background-monochrome);\n padding: var(--ic-space-md) 0;\n}\n\n:host .navigation-group {\n height: 100%;\n width: fit-content;\n color: var(--ic-brand-text-color);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 var(--ic-space-md) var(--ic-space-xxs);\n transition: var(--ic-easing-transition-slow);\n position: relative;\n background: none;\n border: none;\n white-space: nowrap;\n}\n\n:host(.in-side-menu) .navigation-group {\n height: 2.5rem;\n width: 100%;\n text-align: left;\n}\n\n:host(.in-side-menu) .navigation-group .ic-typography-label {\n width: 11.875rem;\n}\n\n:host(.in-side-menu) .navigation-group-side-menu {\n color: var(--ic-top-navigation-nav-group-link);\n justify-content: flex-start;\n padding: 0 var(--ic-space-md) 0 var(--ic-space-md);\n}\n\n:host(.in-side-menu) .navigation-group-side-menu-collapsed,\n:host(.in-side-menu) .navigation-group-side-menu-expanded {\n color: var(--ic-top-navigation-nav-group-link);\n justify-content: flex-start;\n padding-left: var(--ic-space-md);\n}\n\n:host(.in-side-menu) .navigation-group-side-menu-expanded {\n margin-bottom: var(--ic-space-xs);\n}\n\n:host(.in-side-menu) .navigation-group-side-menu-collapsed::after,\n:host(.in-side-menu) .navigation-group-side-menu-expanded::after {\n border-style: solid;\n border-width: 0.125em 0.125em 0 0;\n content: \"\";\n display: inline-block;\n height: 0.45em;\n left: 0.75em;\n position: relative;\n top: -0.1em;\n transform: rotate(135deg);\n vertical-align: top;\n width: 0.45em;\n}\n\n:host(.in-side-menu) .navigation-group-side-menu-expanded::after {\n top: 0.15em;\n transform: rotate(-45deg);\n}\n\n:host .navigation-group:hover,\n:host .navigation-group:active,\n:host .selected {\n background-color: var(--ic-architectural-20);\n color: var(--ic-color-text-primary-light);\n outline: none;\n cursor: pointer;\n}\n\n:host(:not(.in-side-menu)) .navigation-group:focus {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n outline: var(--ic-hc-focus-outline);\n z-index: var(--ic-z-index-navigation-item);\n transition: box-shadow var(--ic-easing-transition-fast);\n}\n\n:host(.in-side-menu) .navigation-group-side-menu:hover,\n:host(.in-side-menu) .navigation-group-side-menu:focus {\n background-color: var(--ic-top-navigation-nav-group-hover);\n color: var(--ic-top-navigation-nav-group-link);\n cursor: auto;\n box-shadow: none;\n outline: none;\n}\n\n:host(.in-side-menu) .navigation-group-side-menu:active {\n background-color: var(--ic-top-navigation-nav-group-pressed);\n color: var(--ic-top-navigation-nav-group-link);\n}\n\n:host(.in-side-menu) .navigation-group-side-menu:focus {\n outline: var(--ic-hc-focus-outline);\n}\n\n:host(.in-side-menu) .navigation-group-side-menu-expanded:hover:not(:focus),\n:host(.in-side-menu) .navigation-group-side-menu-collapsed:hover:not(:focus) {\n background-color: var(--ic-action-dark-bg-hover);\n color: var(--ic-action-default);\n cursor: pointer;\n}\n\n:host(.in-side-menu) .navigation-group-side-menu-expanded:active:not(:focus),\n:host(.in-side-menu) .navigation-group-side-menu-collapsed:active:not(:focus) {\n background-color: var(--ic-action-dark-bg-pressed);\n color: var(--ic-action-default);\n}\n\n:host(.in-side-menu) .navigation-group-side-menu-expanded:focus,\n:host(.in-side-menu) .navigation-group-side-menu-collapsed:focus {\n color: var(--ic-action-default);\n box-shadow: var(--ic-border-focus-inset);\n border-radius: var(--ic-border-radius-inset);\n outline: var(--ic-hc-focus-outline);\n}\n\n:host .navigation-group-dropdown {\n background-color: var(--ic-top-navigation-menu-background);\n border-bottom: var(--ic-space-1px) solid var(--ic-top-navigation-menu-border);\n position: absolute;\n left: 0;\n right: 0;\n padding: var(--ic-space-xs) var(--ic-space-md);\n box-shadow: 0 0.375rem 0.5rem -0.375rem rgba(0 0 0 / 20%);\n z-index: calc(var(--ic-z-index-navigation-item) - 1);\n}\n\n:host .navigation-group-dropdown-items-list {\n list-style: none;\n display: flex;\n flex-flow: column wrap;\n align-content: flex-start;\n padding-left: var(--ic-space-md);\n max-height: 16.5rem;\n}\n\n:host .chevron-toggle-icon-wrapper {\n display: flex;\n align-items: center;\n}\n\n:host .chevron-toggle-icon-wrapper svg {\n transform: rotate(90deg);\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n}\n\n:host .chevron-toggle-icon-closed svg {\n transform: rotate(-90deg);\n}\n\n:host(.ic-navigation-group-expanded) .grouped-links-wrapper {\n height: var(--navigation-child-items-height, auto) !important;\n transition: var(--ic-easing-transition-slow);\n overflow: hidden;\n}\n\n:host(.ic-navigation-group-side-nav) .link,\n:host(.ic-navigation-group-side-nav) ::slotted(a) {\n height: var(--navigation-child-items-height, auto);\n}\n\n:host(.ic-navigation-group-collapsed) .grouped-links-wrapper {\n height: 0;\n transition: var(--ic-easing-transition-slow);\n overflow: hidden;\n}\n\n:host(.ic-navigation-group-side-nav) .navigation-group {\n height: var(--navigation-group-height);\n width: var(--navigation-group-width);\n justify-content: var(--navigation-group-justify-content);\n padding-right: var(--navigation-group-expand-toggle-padding);\n}\n\n:host(.ic-navigation-group-side-nav) .navigation-group:hover,\n:host(.ic-navigation-group-side-nav) .navigation-group:active,\n:host(.ic-navigation-group-side-nav) .selected {\n background-color: var(--navigation-group-hover);\n color: var(--navigation-group-text-hover);\n}\n\n:host(.ic-navigation-group-side-nav) .navigation-group:focus {\n box-shadow: var(--ic-border-focus-inset);\n border-radius: var(--ic-border-radius-inset);\n background: none;\n}\n\n:host(.ic-navigation-group-side-nav) .ic-typography-caption {\n position: var(--navigation-group-title-position);\n left: var(--navigation-group-title-position-left);\n white-space: nowrap;\n}\n","import {\n Component,\n Element,\n Host,\n Prop,\n State,\n Listen,\n h,\n Method,\n Event,\n EventEmitter,\n} from \"@stencil/core\";\n\nimport {\n DEVICE_SIZES,\n getCurrentDeviceSize,\n getBrandForegroundAppearance,\n getNavItemParentDetails,\n} from \"../../utils/helpers\";\nimport {\n IcNavType,\n IcBrand,\n IcBrandForeground,\n IcBrandForegroundNoDefault,\n IcThemeMode,\n} from \"../../utils/types\";\n\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\nimport { IcNavigationOpenEventDetail } from \"./ic-navigation-group.types\";\n\n@Component({\n tag: \"ic-navigation-group\",\n styleUrl: \"ic-navigation-group.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class NavigationGroup {\n private allGroupedNavigationItems: HTMLIcNavigationItemElement[] = [];\n private collapsedNavItemsHeight: string;\n private dropdown?: HTMLElement;\n private DYNAMIC_GROUPED_LINKS_HEIGHT_MS = 100;\n private expandedNavItemsHeight: string;\n private groupEl?: HTMLElement;\n private IC_NAVIGATION_ITEM = \"ic-navigation-item\";\n private isSideNavExpanded: boolean;\n private mouseGate: boolean = false;\n private nodeName = \"IC-NAVIGATION-GROUP\";\n private GROUPED_LINKS_WRAPPER_CLASS = \".grouped-links-wrapper\";\n\n @Element() el: HTMLIcNavigationGroupElement;\n\n @State() deviceSize: number = DEVICE_SIZES.XL;\n @State() dropdownOpen: boolean = false;\n @State() expanded: boolean = true;\n @State() focusStyle: IcBrandForegroundNoDefault \| IcBrandForeground =\n getBrandForegroundAppearance();\n @State() inTopNavSideMenu: boolean = false;\n @State() navigationType: IcNavType \| \"\";\n @State() parentEl: HTMLElement \| null;\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 /\n Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n /\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n /\n @internal Emitted when a navigation group opens.\n /\n @Event() navigationGroupOpened: EventEmitter<IcNavigationOpenEventDetail>;\n\n disconnectedCallback(): void {\n if (this.navigationType === \"side\") {\n this.parentEl?.removeEventListener(\n \"icSideNavExpanded\",\n this.sideNavExpandHandler as EventListener\n );\n } else if (this.navigationType === \"top\") {\n this.parentEl?.removeEventListener(\n \"icTopNavResized\",\n this.topNavResizedHandler as EventListener\n );\n }\n }\n\n componentWillLoad(): void {\n this.deviceSize = getCurrentDeviceSize();\n const { navType, parent } = getNavItemParentDetails(this.el);\n this.navigationType = navType;\n this.parentEl = parent;\n\n if (this.navigationType === \"side\") {\n this.parentEl?.addEventListener(\n \"icSideNavExpanded\",\n this.sideNavExpandHandler as EventListener\n );\n } else if (this.navigationType === \"top\") {\n this.parentEl?.addEventListener(\n \"icTopNavResized\",\n this.topNavResizedHandler as EventListener\n );\n if (\n this.deviceSize <=\n (this.parentEl as HTMLIcTopNavigationElement).customMobileBreakpoint!\n )\n this.inTopNavSideMenu = true;\n }\n }\n\n componentDidLoad(): void {\n this.allGroupedNavigationItems = Array.from(\n this.el.querySelectorAll(this.IC_NAVIGATION_ITEM)\n );\n\n /\n debounce is required as the incorrect height was retrieved instantly after\n * componentDidLoad is invoked.\n /\n setTimeout(\n () => this.setInitialGroupedLinksWrapperHeight(),\n this.DYNAMIC_GROUPED_LINKS_HEIGHT_MS\n );\n }\n\n @Listen(\"childBlur\")\n childBlurHandler(): void {\n this.hideDropdown();\n }\n\n @Listen(\"navigationGroupOpened\", { target: \"document\" })\n handleNavigationGroupOpened(event: CustomEvent): void {\n if (event.detail.source !== this.el) {\n this.hideDropdown();\n }\n }\n\n @Listen(\"navItemClicked\")\n navItemClickHandler(): void {\n this.hideDropdown();\n }\n\n @Listen(\"brandChange\", { target: \"document\" })\n brandChangeHandler(ev: CustomEvent<IcBrand>): void {\n this.focusStyle = ev.detail.mode;\n }\n\n /\n Sets focus on the nav item.\n /\n @Method()\n async setFocus(): Promise<void> {\n if (this.groupEl) {\n this.groupEl.focus();\n }\n }\n\n private sideNavExpandHandler = (event: CustomEvent): void => {\n this.isSideNavExpanded = event.detail.sideNavExpanded;\n const linkWrapper = this.el.shadowRoot?.querySelector(\n this.GROUPED_LINKS_WRAPPER_CLASS\n ) as HTMLElement;\n\n if (!linkWrapper) return;\n\n if (this.isSideNavExpanded) {\n if (this.expanded && this.expandedNavItemsHeight) {\n this.setGroupedLinksElementHeight(\n linkWrapper,\n this.expandedNavItemsHeight\n );\n } else if (this.expanded) {\n setTimeout(() => {\n this.expandedNavItemsHeight = this.getNavigationChildItemsHeight();\n\n this.setGroupedLinksElementHeight(\n linkWrapper,\n this.expandedNavItemsHeight\n );\n }, this.DYNAMIC_GROUPED_LINKS_HEIGHT_MS);\n }\n } else {\n if (this.expanded && this.collapsedNavItemsHeight) {\n this.setGroupedLinksElementHeight(\n linkWrapper,\n this.collapsedNavItemsHeight\n );\n } else if (this.expanded) {\n setTimeout(() => {\n this.collapsedNavItemsHeight = this.getNavigationChildItemsHeight();\n\n this.setGroupedLinksElementHeight(\n linkWrapper,\n this.collapsedNavItemsHeight\n );\n }, this.DYNAMIC_GROUPED_LINKS_HEIGHT_MS);\n }\n }\n };\n\n private topNavResizedHandler = ({\n detail,\n }: CustomEvent<{ size: number }>): void => {\n const { size } = detail;\n if (size !== this.deviceSize) {\n this.deviceSize = size;\n this.inTopNavSideMenu =\n size <=\n ((this.parentEl as HTMLIcTopNavigationElement)\n ?.customMobileBreakpoint \|\| DEVICE_SIZES.L);\n }\n };\n\n private toggleDropdown() {\n this.dropdownOpen = !this.dropdownOpen;\n }\n\n private setGroupedNavItemTabIndex = (tabIndexValue: string) => {\n this.el\n .querySelectorAll(this.IC_NAVIGATION_ITEM)\n .forEach((navigationItem) => {\n const navItem =\n navigationItem.shadowRoot?.querySelector(\"a\") \|\|\n navigationItem.querySelector(\"a\");\n if (navItem) {\n navItem.setAttribute(\"tabindex\", tabIndexValue);\n }\n });\n };\n\n private toggleGroupedLinkWrapperHeight = (\n wrapper: HTMLElement,\n expanded: boolean\n ) => {\n if (!wrapper) return;\n\n if (expanded) {\n if (this.isSideNavExpanded) {\n this.setGroupedLinksElementHeight(wrapper, this.expandedNavItemsHeight);\n } else {\n this.setGroupedLinksElementHeight(\n wrapper,\n this.collapsedNavItemsHeight\n );\n }\n this.setGroupedNavItemTabIndex(\"0\");\n } else {\n wrapper.style.setProperty(\"--navigation-child-items-height\", \"0\");\n this.setGroupedNavItemTabIndex(\"-1\");\n }\n };\n\n private toggleExpanded = () => {\n this.expanded = !this.expanded;\n const linkWrapper = this.el.shadowRoot?.querySelector(\n this.GROUPED_LINKS_WRAPPER_CLASS\n ) as HTMLElement;\n this.toggleGroupedLinkWrapperHeight(linkWrapper, this.expanded);\n };\n\n private showDropdown() {\n if (!this.dropdownOpen) {\n this.navigationGroupOpened.emit({\n source: this.el,\n });\n\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 : undefined}\n ref={(el) => (this.dropdown = el)}\n >\n <nav\n class={{\n [\"navigation-group-dropdown-items\"]: !this.inTopNavSideMenu,\n }}\n >\n <ul>\n <slot></slot>\n </ul>\n </nav>\n </div>\n );\n\n private renderGroupedLinks = (): HTMLDivElement => (\n <ul class=\"grouped-links-wrapper\">\n <slot></slot>\n </ul>\n );\n\n /\n Gets the total height of navigation links to improve\n * smoothness of expand/collapse animations\n */\n private getNavigationChildItemsHeight = (): string => {\n let navigationChildItemsHeight = 0;\n this.allGroupedNavigationItems.forEach((navItem) => {\n navigationChildItemsHeight += navItem.offsetHeight;\n });\n\n return `${navigationChildItemsHeight}px`;\n };\n\n private setInitialGroupedLinksWrapperHeight = () => {\n const linkWrapper = this.el.shadowRoot?.querySelector(\n this.GROUPED_LINKS_WRAPPER_CLASS\n ) as HTMLElement;\n\n if (!linkWrapper) return;\n\n if (\n !this.isSideNavExpanded &&\n !this.collapsedNavItemsHeight &&\n this.expanded\n ) {\n this.collapsedNavItemsHeight = this.getNavigationChildItemsHeight();\n this.setGroupedLinksElementHeight(\n linkWrapper,\n this.collapsedNavItemsHeight\n );\n }\n\n if (this.isSideNavExpanded && this.expanded) {\n this.expandedNavItemsHeight = this.getNavigationChildItemsHeight();\n this.setGroupedLinksElementHeight(\n linkWrapper,\n this.expandedNavItemsHeight\n );\n }\n };\n\n private renderNavigationItems = (): HTMLDivElement \| null => {\n if (this.dropdownOpen \|\| (this.inTopNavSideMenu && !this.expandable)) {\n return this.renderDropdownGroupedLinks();\n }\n\n if (this.navigationType !== \"top\") {\n return this.renderGroupedLinks();\n }\n\n return null;\n };\n\n private setGroupedLinksElementHeight(\n groupedNavItemWrapper: HTMLElement,\n height: string\n ) {\n groupedNavItemWrapper.style.setProperty(\n \"--navigation-child-items-height\",\n height\n );\n }\n\n render() {\n const { label, dropdownOpen, inTopNavSideMenu, expandable } = this;\n\n return (\n <Host\n class={{\n [\"in-side-menu\"]: inTopNavSideMenu,\n \"ic-navigation-group-expanded\": this.expanded,\n \"ic-navigation-group-collapsed\": !this.expanded,\n [\"ic-navigation-group-side-nav\"]: this.navigationType === \"side\",\n [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n }}\n role=\"listitem\"\n >\n <button\n onMouseEnter={\n !inTopNavSideMenu && this.navigationType === \"top\"\n ? this.handleMouseEnter\n : undefined\n }\n onMouseLeave={\n this.navigationType === \"top\" ? this.handleMouseLeave : undefined\n }\n tabindex={inTopNavSideMenu && !expandable ? \"-1\" : \"0\"}\n onBlur={this.handleBlur}\n onClick={expandable ? this.handleClick : undefined}\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}`}\n aria-haspopup={`${\n !inTopNavSideMenu && this.navigationType === \"top\"\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 </button>\n {this.renderNavigationItems()}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-navigation-group.js","mappings":"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","names":[],"sources":["src/components/ic-navigation-group/ic-navigation-group.css?tag=ic-navigation-group&encapsulation=shadow","src/components/ic-navigation-group/ic-navigation-group.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/*\n @prop --ic-z-index-navigation-item: z-index of navigation group item\n /\n\n:host {\n display: block;\n\n --ic-typography-color: currentcolor;\n}\n\n:host(.in-side-menu) {\n border-bottom: var(--ic-border-width) solid\n var(--ic-divider-background-monochrome);\n padding: var(--ic-space-md) 0;\n}\n\n:host .navigation-group {\n height: 100%;\n width: fit-content;\n color: var(--ic-brand-text-color);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 var(--ic-space-md) var(--ic-space-xxs);\n transition: var(--ic-easing-transition-slow);\n position: relative;\n background: none;\n border: none;\n white-space: nowrap;\n}\n\n:host(.in-side-menu) .navigation-group {\n height: 2.5rem;\n width: 100%;\n text-align: left;\n}\n\n:host(.in-side-menu) .navigation-group .ic-typography-label {\n width: 11.875rem;\n}\n\n:host(.in-side-menu) .navigation-group-side-menu {\n color: var(--ic-top-navigation-nav-group-link);\n justify-content: flex-start;\n padding: 0 var(--ic-space-md) 0 var(--ic-space-md);\n}\n\n:host(.in-side-menu) .navigation-group-side-menu-collapsed,\n:host(.in-side-menu) .navigation-group-side-menu-expanded {\n color: var(--ic-top-navigation-nav-group-link);\n justify-content: flex-start;\n padding-left: var(--ic-space-md);\n}\n\n:host(.in-side-menu) .navigation-group-side-menu-expanded {\n margin-bottom: var(--ic-space-xs);\n}\n\n:host(.in-side-menu) .navigation-group-side-menu-collapsed::after,\n:host(.in-side-menu) .navigation-group-side-menu-expanded::after {\n border-style: solid;\n border-width: 0.125em 0.125em 0 0;\n content: \"\";\n display: inline-block;\n height: 0.45em;\n left: 0.75em;\n position: relative;\n top: -0.1em;\n transform: rotate(135deg);\n vertical-align: top;\n width: 0.45em;\n}\n\n:host(.in-side-menu) .navigation-group-side-menu-expanded::after {\n top: 0.15em;\n transform: rotate(-45deg);\n}\n\n:host .navigation-group:hover,\n:host .navigation-group:active,\n:host .selected {\n background-color: var(--ic-architectural-20);\n color: var(--ic-color-text-primary-light);\n outline: none;\n cursor: pointer;\n}\n\n:host(:not(.in-side-menu)) .navigation-group:focus {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n outline: var(--ic-hc-focus-outline);\n z-index: var(--ic-z-index-navigation-item);\n transition: box-shadow var(--ic-easing-transition-fast);\n}\n\n:host(.in-side-menu) .navigation-group-side-menu:hover,\n:host(.in-side-menu) .navigation-group-side-menu:focus {\n background-color: var(--ic-top-navigation-nav-group-hover);\n color: var(--ic-top-navigation-nav-group-link);\n cursor: auto;\n box-shadow: none;\n outline: none;\n}\n\n:host(.in-side-menu) .navigation-group-side-menu:active {\n background-color: var(--ic-top-navigation-nav-group-pressed);\n color: var(--ic-top-navigation-nav-group-link);\n}\n\n:host(.in-side-menu) .navigation-group-side-menu:focus {\n outline: var(--ic-hc-focus-outline);\n}\n\n:host(.in-side-menu) .navigation-group-side-menu-expanded:hover:not(:focus),\n:host(.in-side-menu) .navigation-group-side-menu-collapsed:hover:not(:focus) {\n background-color: var(--ic-action-dark-bg-hover);\n color: var(--ic-action-default);\n cursor: pointer;\n}\n\n:host(.in-side-menu) .navigation-group-side-menu-expanded:active:not(:focus),\n:host(.in-side-menu) .navigation-group-side-menu-collapsed:active:not(:focus) {\n background-color: var(--ic-action-dark-bg-pressed);\n color: var(--ic-action-default);\n}\n\n:host(.in-side-menu) .navigation-group-side-menu-expanded:focus,\n:host(.in-side-menu) .navigation-group-side-menu-collapsed:focus {\n color: var(--ic-action-default);\n box-shadow: var(--ic-border-focus-inset);\n border-radius: var(--ic-border-radius-inset);\n outline: var(--ic-hc-focus-outline);\n}\n\n:host .navigation-group-dropdown {\n background-color: var(--ic-top-navigation-menu-background);\n border-bottom: var(--ic-space-1px) solid var(--ic-top-navigation-menu-border);\n position: absolute;\n left: 0;\n right: 0;\n padding: var(--ic-space-xs) var(--ic-space-md);\n box-shadow: 0 0.375rem 0.5rem -0.375rem rgba(0 0 0 / 20%);\n z-index: calc(var(--ic-z-index-navigation-item) - 1);\n}\n\n:host .navigation-group-dropdown-items-list {\n list-style: none;\n display: flex;\n flex-flow: column wrap;\n align-content: flex-start;\n padding-left: var(--ic-space-md);\n max-height: 16.5rem;\n}\n\n:host .chevron-toggle-icon-wrapper {\n display: flex;\n align-items: center;\n}\n\n:host .chevron-toggle-icon-wrapper svg {\n transform: rotate(90deg);\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n}\n\n:host .chevron-toggle-icon-closed svg {\n transform: rotate(-90deg);\n}\n\n:host(.ic-navigation-group-expanded) .grouped-links-wrapper {\n height: var(--navigation-child-items-height, auto) !important;\n transition: var(--ic-easing-transition-slow);\n overflow: hidden;\n}\n\n:host(.ic-navigation-group-side-nav) .link,\n:host(.ic-navigation-group-side-nav) ::slotted(a) {\n height: var(--navigation-child-items-height, auto);\n}\n\n:host(.ic-navigation-group-collapsed) .grouped-links-wrapper {\n height: 0;\n transition: var(--ic-easing-transition-slow);\n overflow: hidden;\n}\n\n:host(.ic-navigation-group-side-nav) .navigation-group {\n height: var(--navigation-group-height);\n width: var(--navigation-group-width);\n justify-content: var(--navigation-group-justify-content);\n padding-right: var(--navigation-group-expand-toggle-padding);\n}\n\n:host(.ic-navigation-group-side-nav) .navigation-group:hover,\n:host(.ic-navigation-group-side-nav) .navigation-group:active,\n:host(.ic-navigation-group-side-nav) .selected {\n background-color: var(--navigation-group-hover);\n color: var(--navigation-group-text-hover);\n}\n\n:host(.ic-navigation-group-side-nav) .navigation-group:focus {\n box-shadow: var(--ic-border-focus-inset);\n border-radius: var(--ic-border-radius-inset);\n background: none;\n}\n\n:host(.ic-navigation-group-side-nav) .ic-typography-caption {\n position: var(--navigation-group-title-position);\n left: var(--navigation-group-title-position-left);\n white-space: nowrap;\n}\n","import {\n Component,\n Element,\n Host,\n Prop,\n State,\n Listen,\n h,\n Method,\n Event,\n EventEmitter,\n} from \"@stencil/core\";\n\nimport {\n DEVICE_SIZES,\n getCurrentDeviceSize,\n getBrandForegroundAppearance,\n getNavItemParentDetails,\n} from \"../../utils/helpers\";\nimport {\n IcNavType,\n IcBrand,\n IcBrandForeground,\n IcBrandForegroundNoDefault,\n IcThemeMode,\n} from \"../../utils/types\";\n\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\nimport {\n IcNavigationExpandEventDetail,\n IcNavigationOpenEventDetail,\n} from \"./ic-navigation-group.types\";\n\n@Component({\n tag: \"ic-navigation-group\",\n styleUrl: \"ic-navigation-group.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class NavigationGroup {\n private allGroupedNavigationItems: HTMLIcNavigationItemElement[] = [];\n private collapsedNavItemsHeight: string;\n private dropdown?: HTMLElement;\n private DYNAMIC_GROUPED_LINKS_HEIGHT_MS = 100;\n private expandedNavItemsHeight: string;\n private groupEl?: HTMLElement;\n private IC_NAVIGATION_ITEM = \"ic-navigation-item\";\n private isSideNavExpanded: boolean;\n private mouseGate: boolean = false;\n private nodeName = \"IC-NAVIGATION-GROUP\";\n private GROUPED_LINKS_WRAPPER_CLASS = \".grouped-links-wrapper\";\n\n @Element() el: HTMLIcNavigationGroupElement;\n\n @State() deviceSize: number = DEVICE_SIZES.XL;\n @State() dropdownOpen: boolean = false;\n @State() expanded: boolean = true;\n @State() focusStyle: IcBrandForegroundNoDefault \| IcBrandForeground =\n getBrandForegroundAppearance();\n @State() inTopNavSideMenu: boolean = false;\n @State() navigationType: IcNavType \| \"\";\n @State() parentEl: HTMLElement \| null;\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 /\n Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n /\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n /\n @internal Emitted when a navigation group is opened - when within an ic-top-navigation at large screen sizes.\n /\n @Event() navigationGroupOpened: EventEmitter<IcNavigationOpenEventDetail>;\n\n /\n @internal Emitted when a navigation group is expanded - when within an ic-top-navigation at small screen sizes.\n /\n @Event() navigationGroupExpanded: EventEmitter<IcNavigationExpandEventDetail>;\n\n disconnectedCallback(): void {\n if (this.navigationType === \"side\") {\n this.parentEl?.removeEventListener(\n \"icSideNavExpanded\",\n this.sideNavExpandHandler as EventListener\n );\n } else if (this.navigationType === \"top\") {\n this.parentEl?.removeEventListener(\n \"icTopNavResized\",\n this.topNavResizedHandler as EventListener\n );\n }\n }\n\n componentWillLoad(): void {\n this.deviceSize = getCurrentDeviceSize();\n const { navType, parent } = getNavItemParentDetails(this.el);\n this.navigationType = navType;\n this.parentEl = parent;\n\n if (this.navigationType === \"side\") {\n this.parentEl?.addEventListener(\n \"icSideNavExpanded\",\n this.sideNavExpandHandler as EventListener\n );\n } else if (this.navigationType === \"top\") {\n this.parentEl?.addEventListener(\n \"icTopNavResized\",\n this.topNavResizedHandler as EventListener\n );\n if (\n this.deviceSize <=\n (this.parentEl as HTMLIcTopNavigationElement).customMobileBreakpoint!\n )\n this.inTopNavSideMenu = true;\n }\n }\n\n componentDidLoad(): void {\n this.allGroupedNavigationItems = Array.from(\n this.el.querySelectorAll(this.IC_NAVIGATION_ITEM)\n );\n\n /\n debounce is required as the incorrect height was retrieved instantly after\n * componentDidLoad is invoked.\n /\n setTimeout(\n () => this.setInitialGroupedLinksWrapperHeight(),\n this.DYNAMIC_GROUPED_LINKS_HEIGHT_MS\n );\n }\n\n @Listen(\"childBlur\")\n childBlurHandler(): void {\n this.hideDropdown();\n }\n\n @Listen(\"navigationGroupOpened\", { target: \"document\" })\n handleNavigationGroupOpened(event: CustomEvent): void {\n if (event.detail.source !== this.el) {\n this.hideDropdown();\n }\n }\n\n @Listen(\"navItemClicked\")\n navItemClickHandler(): void {\n this.hideDropdown();\n }\n\n @Listen(\"brandChange\", { target: \"document\" })\n brandChangeHandler(ev: CustomEvent<IcBrand>): void {\n this.focusStyle = ev.detail.mode;\n }\n\n /\n Sets focus on the nav item.\n /\n @Method()\n async setFocus(): Promise<void> {\n if (this.groupEl) {\n this.groupEl.focus();\n }\n }\n\n private sideNavExpandHandler = (event: CustomEvent): void => {\n this.isSideNavExpanded = event.detail.sideNavExpanded;\n const linkWrapper = this.el.shadowRoot?.querySelector(\n this.GROUPED_LINKS_WRAPPER_CLASS\n ) as HTMLElement;\n\n if (!linkWrapper) return;\n\n if (this.isSideNavExpanded) {\n if (this.expanded && this.expandedNavItemsHeight) {\n this.setGroupedLinksElementHeight(\n linkWrapper,\n this.expandedNavItemsHeight\n );\n } else if (this.expanded) {\n setTimeout(() => {\n this.expandedNavItemsHeight = this.getNavigationChildItemsHeight();\n\n this.setGroupedLinksElementHeight(\n linkWrapper,\n this.expandedNavItemsHeight\n );\n }, this.DYNAMIC_GROUPED_LINKS_HEIGHT_MS);\n }\n } else {\n if (this.expanded && this.collapsedNavItemsHeight) {\n this.setGroupedLinksElementHeight(\n linkWrapper,\n this.collapsedNavItemsHeight\n );\n } else if (this.expanded) {\n setTimeout(() => {\n this.collapsedNavItemsHeight = this.getNavigationChildItemsHeight();\n\n this.setGroupedLinksElementHeight(\n linkWrapper,\n this.collapsedNavItemsHeight\n );\n }, this.DYNAMIC_GROUPED_LINKS_HEIGHT_MS);\n }\n }\n };\n\n private topNavResizedHandler = ({\n detail,\n }: CustomEvent<{ size: number }>): void => {\n const { size } = detail;\n if (size !== this.deviceSize) {\n this.deviceSize = size;\n this.inTopNavSideMenu =\n size <=\n ((this.parentEl as HTMLIcTopNavigationElement)\n ?.customMobileBreakpoint \|\| DEVICE_SIZES.L);\n }\n };\n\n private toggleDropdown() {\n this.dropdownOpen = !this.dropdownOpen;\n this.inTopNavSideMenu &&\n this.navigationGroupExpanded.emit({ expanded: this.dropdownOpen });\n }\n\n private setGroupedNavItemTabIndex = (tabIndexValue: string) => {\n this.el\n .querySelectorAll(this.IC_NAVIGATION_ITEM)\n .forEach((navigationItem) => {\n const navItem =\n navigationItem.shadowRoot?.querySelector(\"a\") \|\|\n navigationItem.querySelector(\"a\");\n if (navItem) {\n navItem.setAttribute(\"tabindex\", tabIndexValue);\n }\n });\n };\n\n private toggleGroupedLinkWrapperHeight = (\n wrapper: HTMLElement,\n expanded: boolean\n ) => {\n if (!wrapper) return;\n\n if (expanded) {\n if (this.isSideNavExpanded) {\n this.setGroupedLinksElementHeight(wrapper, this.expandedNavItemsHeight);\n } else {\n this.setGroupedLinksElementHeight(\n wrapper,\n this.collapsedNavItemsHeight\n );\n }\n this.setGroupedNavItemTabIndex(\"0\");\n } else {\n wrapper.style.setProperty(\"--navigation-child-items-height\", \"0\");\n this.setGroupedNavItemTabIndex(\"-1\");\n }\n };\n\n private toggleExpanded = () => {\n this.expanded = !this.expanded;\n const linkWrapper = this.el.shadowRoot?.querySelector(\n this.GROUPED_LINKS_WRAPPER_CLASS\n ) as HTMLElement;\n this.toggleGroupedLinkWrapperHeight(linkWrapper, this.expanded);\n };\n\n private showDropdown() {\n if (!this.dropdownOpen) {\n this.navigationGroupOpened.emit({\n source: this.el,\n });\n\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 : undefined}\n ref={(el) => (this.dropdown = el)}\n >\n <nav\n class={{\n [\"navigation-group-dropdown-items\"]: !this.inTopNavSideMenu,\n }}\n >\n <ul>\n <slot></slot>\n </ul>\n </nav>\n </div>\n );\n\n private renderGroupedLinks = (): HTMLDivElement => (\n <ul class=\"grouped-links-wrapper\">\n <slot></slot>\n </ul>\n );\n\n /\n Gets the total height of navigation links to improve\n * smoothness of expand/collapse animations\n */\n private getNavigationChildItemsHeight = (): string => {\n let navigationChildItemsHeight = 0;\n this.allGroupedNavigationItems.forEach((navItem) => {\n navigationChildItemsHeight += navItem.offsetHeight;\n });\n\n return `${navigationChildItemsHeight}px`;\n };\n\n private setInitialGroupedLinksWrapperHeight = () => {\n const linkWrapper = this.el.shadowRoot?.querySelector(\n this.GROUPED_LINKS_WRAPPER_CLASS\n ) as HTMLElement;\n\n if (!linkWrapper) return;\n\n if (\n !this.isSideNavExpanded &&\n !this.collapsedNavItemsHeight &&\n this.expanded\n ) {\n this.collapsedNavItemsHeight = this.getNavigationChildItemsHeight();\n this.setGroupedLinksElementHeight(\n linkWrapper,\n this.collapsedNavItemsHeight\n );\n }\n\n if (this.isSideNavExpanded && this.expanded) {\n this.expandedNavItemsHeight = this.getNavigationChildItemsHeight();\n this.setGroupedLinksElementHeight(\n linkWrapper,\n this.expandedNavItemsHeight\n );\n }\n };\n\n private renderNavigationItems = (): HTMLDivElement \| null => {\n if (this.dropdownOpen \|\| (this.inTopNavSideMenu && !this.expandable)) {\n return this.renderDropdownGroupedLinks();\n }\n\n if (this.navigationType !== \"top\") {\n return this.renderGroupedLinks();\n }\n\n return null;\n };\n\n private setGroupedLinksElementHeight(\n groupedNavItemWrapper: HTMLElement,\n height: string\n ) {\n groupedNavItemWrapper.style.setProperty(\n \"--navigation-child-items-height\",\n height\n );\n }\n\n render() {\n const { label, dropdownOpen, inTopNavSideMenu, expandable } = this;\n\n return (\n <Host\n class={{\n [\"in-side-menu\"]: inTopNavSideMenu,\n \"ic-navigation-group-expanded\": this.expanded,\n \"ic-navigation-group-collapsed\": !this.expanded,\n [\"ic-navigation-group-side-nav\"]: this.navigationType === \"side\",\n [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n }}\n role=\"listitem\"\n >\n <button\n onMouseEnter={\n !inTopNavSideMenu && this.navigationType === \"top\"\n ? this.handleMouseEnter\n : undefined\n }\n onMouseLeave={\n this.navigationType === \"top\" ? this.handleMouseLeave : undefined\n }\n tabindex={inTopNavSideMenu && !expandable ? \"-1\" : \"0\"}\n onBlur={this.handleBlur}\n onClick={expandable ? this.handleClick : undefined}\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}`}\n aria-haspopup={`${\n !inTopNavSideMenu && this.navigationType === \"top\"\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 </button>\n {this.renderNavigationItems()}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/ic-navigation-menu2.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { M as getSlotContent, N as getSlot, i as isSlotUsed } from './helpers.js';
+import { M as getSlot, N as getSlotContent, i as isSlotUsed } from './helpers.js';
 import { d as defineCustomElement$4 } from './ic-button2.js';
 import { d as defineCustomElement$3 } from './ic-loading-indicator2.js';
 import { d as defineCustomElement$2 } from './ic-tooltip2.js';
@@ -8,6 +8,8 @@ import { d as defineCustomElement$1 } from './ic-typography2.js';
 const icNavigationMenuCss = ":host{display:block;position:fixed;top:0;left:0;width:100%;min-height:100% !important;background:rgb(0 0 0 / 60%);z-index:var(--ic-z-index-navigation-menu)}.popout-modal{position:absolute;inset:0}.popout-menu{position:fixed;top:0;right:0;width:16rem;bottom:0;background-color:var(--ic-top-navigation-menu-background);color:var(--ic-top-navigation-nav-item);--ic-typography-color:var(--ic-top-navigation-nav-item);box-shadow:var(--ic-elevation-overlay);overflow-y:auto;overflow-x:hidden}:host(.inline) .popout-menu{position:absolute}.menu-close-button-container{position:relative;left:11.875rem;padding:var(--ic-space-md) 0}.nav-group-first{padding-bottom:0}.menu-buttons-container{padding:var(--ic-space-sm) 0;border-bottom:var(--ic-border-width) solid var(--ic-architectural-200)}.menu-buttons-container-nav-item-above{margin-top:var(--ic-space-md);border-top:var(--ic-border-width) solid var(--ic-architectural-200)}.menu-status-version-container{display:flex;flex-wrap:wrap;gap:var(--ic-space-xs);padding:var(--ic-space-md) var(--ic-space-md) var(--ic-space-xl)}.status-version-no-buttons{border-top:var(--ic-space-1px) solid var(--ic-architectural-200)}.menu-status{background-color:var(--ic-status-tag-neutral);--ic-typography-color:var(--ic-status-tag-text);border-radius:var(--ic-space-md);width:-moz-fit-content;width:fit-content;padding:var(--ic-space-xxs) var(--ic-space-sm)}.menu-version{border-radius:var(--ic-space-md);background-color:var(--ic-status-tag-outlined-background-neutral);--ic-typography-color:var(--ic-color-text-primary-light);padding:var(--ic-space-xxs) var(--ic-space-sm)}.menu-status-text,.menu-version-text{overflow-wrap:break-word}.navigation-landmark-text{position:absolute;width:var(--ic-space-1px);height:var(--ic-space-1px);padding:0;margin:calc(-1 * var(--ic-space-1px));overflow:hidden}";
 const IcNavigationMenuStyle0 = icNavigationMenuCss;
+const NAV_GROUP_TAG = "IC-NAVIGATION-GROUP";
+const NAV_ITEM_TAG = "IC-NAVIGATION-ITEM";
 const NavigationMenu = /*@__PURE__*/ proxyCustomElement(class NavigationMenu extends HTMLElement {
     constructor() {
         super();
@@ -31,6 +33,21 @@ const NavigationMenu = /*@__PURE__*/ proxyCustomElement(class NavigationMenu ext
          * The version info to display.
          */
         this.version = "";
+        this.setLastTabStop = (lastNavGroupExpanded) => {
+            let lastEl = this.navigationEls[this.navigationEls.length - 1];
+            if (lastEl.tagName === NAV_GROUP_TAG && lastNavGroupExpanded) {
+                const childNavItems = lastEl.children;
+                lastEl = childNavItems[childNavItems.length - 1];
+            }
+            if (lastEl.tagName === NAV_ITEM_TAG) {
+                //check for slotted content i.e. react router link
+                const slotContent = getSlot(lastEl, "navigation-item");
+                if (slotContent !== null) {
+                    lastEl = slotContent;
+                }
+            }
+            this.lastTabStop = lastEl;
+        };
         this.closeMenu = () => {
             this.icNavigationMenuClose.emit();
         };
@@ -43,8 +60,8 @@ const NavigationMenu = /*@__PURE__*/ proxyCustomElement(class NavigationMenu ext
             if (this.lastTabStop !== null) {
                 switch (this.lastTabStop.tagName) {
                     case "IC-NAVIGATION-BUTTON":
-                    case "IC-NAVIGATION-ITEM":
-                    case "IC-NAVIGATION-GROUP":
+                    case NAV_ITEM_TAG:
+                    case NAV_GROUP_TAG:
                         focusEl = this.lastTabStop;
                         focusEl.focus();
                         break;
@@ -57,15 +74,20 @@ const NavigationMenu = /*@__PURE__*/ proxyCustomElement(class NavigationMenu ext
     }
     componentWillLoad() {
         this.navBarEl = document.querySelector("ic-top-navigation");
-        const navigationEls = getSlotContent(this.el, "navigation");
-        if (navigationEls) {
+        this.navigationEls = getSlotContent(this.el, "navigation");
+        if (this.navigationEls) {
             this.hasNavigation = true;
-            const lastEl = navigationEls[navigationEls.length - 1];
-            if (lastEl.tagName === "IC-NAVIGATION-ITEM") {
+            const lastEl = this.navigationEls[this.navigationEls.length - 1];
+            if (lastEl.tagName === NAV_ITEM_TAG) {
                 this.navItemAboveButtons = true;
             }
-            const firstEl = navigationEls[0];
-            if (firstEl.tagName === "IC-NAVIGATION-GROUP") {
+            else if (lastEl.tagName === NAV_GROUP_TAG) {
+                lastEl.addEventListener("navigationGroupExpanded", ((event) => {
+                    this.setLastTabStop(event.detail.expanded);
+                }));
+            }
+            const firstEl = this.navigationEls[0];
+            if (firstEl.tagName === NAV_GROUP_TAG) {
                 this.navGroupFirst = true;
             }
         }
@@ -75,16 +97,8 @@ const NavigationMenu = /*@__PURE__*/ proxyCustomElement(class NavigationMenu ext
             this.lastTabStop = buttonContent[buttonContent.length - 1];
         }
         else {
-            if (this.hasNavigation && navigationEls) {
-                const lastEl = navigationEls[navigationEls.length - 1];
-                //check for slotted content i.e. react router link
-                const slotContent = getSlot(lastEl, "navigation-item");
-                if (slotContent !== null) {
-                    this.lastTabStop = slotContent;
-                }
-                else {
-                    this.lastTabStop = lastEl;
-                }
+            if (this.hasNavigation && this.navigationEls) {
+                this.setLastTabStop(false);
             }
         }
     }
@@ -117,16 +131,16 @@ const NavigationMenu = /*@__PURE__*/ proxyCustomElement(class NavigationMenu ext
         }
     }
     render() {
-        return (h(Host, { key: 'e9ecbbb6dd588afa6020ebdc5fd4b9f3b9d6d17d', class: { [`ic-theme-${this.theme}`]: this.theme !== "inherit" } }, h("div", { key: 'a11a0b572d3134f644b81a65b2183f3831cf7eef', class: "popout-modal", onClick: this.closeMenu }), h("div", { key: 'ff9724d8a0b3bf3071d9cfc9b44bcbbe1a63592e', class: "popout-menu", role: "dialog", "aria-modal": "true", "aria-label": `${this.hasNavigation ? "Navigation" : "App"} menu` }, h("span", { key: '59a95028fc7047fbc0b25a8bf1c8b702758ff0c7', "aria-hidden": "true", id: "navigation-landmark-text", class: "navigation-landmark-text" }, "Main navigation"), h("nav", { key: '925162fcf3432baaabfac61766b0833a65ff7413', "aria-labelledby": "navigation-landmark-text", "aria-hidden": this.hasNavigation ? "false" : "true" }, h("div", { key: '4c8aefb471b0f993ec4789662adae82798cfe364', class: {
+        return (h(Host, { key: 'ac20556d28ccb50fa78fdb0a14e6096e1793d808', class: { [`ic-theme-${this.theme}`]: this.theme !== "inherit" } }, h("div", { key: 'e429e9f4554ee2f40aa8b4e44c2cb3bc4dbb448e', class: "popout-modal", onClick: this.closeMenu }), h("div", { key: '9fb05be7a68bea1bc06cca1034f0ae77dd09797e', class: "popout-menu", role: "dialog", "aria-modal": "true", "aria-label": `${this.hasNavigation ? "Navigation" : "App"} menu` }, h("span", { key: 'e0ac3dfe4995af4270ab21f5f559ef86e9eae2de', "aria-hidden": "true", id: "navigation-landmark-text", class: "navigation-landmark-text" }, "Main navigation"), h("nav", { key: '3d1b37adb6d60d486f97eddf28324f69049924a3', "aria-labelledby": "navigation-landmark-text", "aria-hidden": this.hasNavigation ? "false" : "true" }, h("div", { key: '45b00dbad25c373903c39d5cfca30717fa865150', class: {
                 ["menu-close-button-container"]: true,
                 ["nav-group-first"]: this.navGroupFirst,
-            } }, h("ic-button", { key: '5f51478c203469b9dd182c2b53f5f47de12d7cf3', ref: (el) => (this.closeButton = el), id: "menu-close-button", class: "menu-close-button", variant: "icon", size: "large", "aria-label": `Close ${this.hasNavigation ? "navigation" : "app"} menu`, onClick: this.closeMenu }, h("svg", { key: 'a27d75cdc971183b31193d2e8b5476f4fc4af2fc', width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '9df95971b7e3d2ddc31c7e6c610a33087da046fe', d: "M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z" })))), this.hasNavigation && h("slot", { key: 'c5ea5be8dff71b36b4933f899877370ba2c93709', name: "navigation" })), this.hasButtons && (h("div", { key: 'e620a0c3deb6adf1f892fda537b759757bf84d42', class: {
+            } }, h("ic-button", { key: '4da3bf37bc5a3ee5622e05053828dd0991445084', ref: (el) => (this.closeButton = el), id: "menu-close-button", class: "menu-close-button", variant: "icon", size: "large", "aria-label": `Close ${this.hasNavigation ? "navigation" : "app"} menu`, onClick: this.closeMenu }, h("svg", { key: 'cb90b4946f8f649ceb98915ff2a57f234b5f8ed4', width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'a49a4b42ddf2c9060070cd93eaba2a55c3e474cb', d: "M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z" })))), this.hasNavigation && h("slot", { key: '78878e2499e04a899f93bbe4b9a6a2a9aff080ab', name: "navigation" })), this.hasButtons && (h("div", { key: 'cb8eb1bf24e483d5ad4aad20dadb926e106eb2c2', class: {
                 ["menu-buttons-container"]: true,
                 ["menu-buttons-container-nav-item-above"]: this.navItemAboveButtons,
-            } }, h("slot", { key: 'd5050cea88cc2a0e9ceebcf7c299d2cfba25d30b', name: "buttons" }))), (this.status !== "" || this.version !== "") && (h("div", { key: '26bb00f5b7a9b926be7c20d6855874997595a395', class: {
+            } }, h("slot", { key: '1d36a228ba3a62686f9939df9c8dd6e29289ebb8', name: "buttons" }))), (this.status !== "" || this.version !== "") && (h("div", { key: 'c4b0d0c4140644eea60d24eac6bd845c21965969', class: {
                 ["menu-status-version-container"]: true,
                 ["status-version-no-buttons"]: !this.hasButtons,
-            } }, this.status !== "" && (h("div", { key: '44f8e916cb8cda5d2708c94f4a682f8617b09a03', class: "menu-status" }, h("ic-typography", { key: 'eed2bd09e04fc12e76505b50da937bbd9eaed88d', variant: "label-uppercase", "aria-label": "app tag", class: "menu-status-text" }, this.status))), this.version !== "" && (h("div", { key: '53cd05a0b7f707e37840ffa6c5f97ede69f3a2eb', class: "menu-version" }, h("ic-typography", { key: '3821ec288d9553aa73ad8ee23fd968121eab643d', variant: "label", class: "menu-version-text", "aria-label": "app version" }, this.version))))))));
+            } }, this.status !== "" && (h("div", { key: '02add8908b41c544f2d01f0c780812d06ea749a9', class: "menu-status" }, h("ic-typography", { key: '11311c3647663e911e45bd8de112f6e0ca895b11', variant: "label-uppercase", "aria-label": "app tag", class: "menu-status-text" }, this.status))), this.version !== "" && (h("div", { key: 'c65a3bcac0289629f181fac381693ea648811312', class: "menu-version" }, h("ic-typography", { key: '4de53de27365201c2cff5500c0b0d17da4628faa', variant: "label", class: "menu-version-text", "aria-label": "app version" }, this.version))))))));
     }
     get el() { return this; }
     static get style() { return IcNavigationMenuStyle0; }

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

	@@ -1 +1 @@
1	- {"file":"ic-navigation-menu2.js","mappings":"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","names":[],"sources":["src/components/ic-navigation-menu/ic-navigation-menu.css?tag=ic-navigation-menu&encapsulation=shadow","src/components/ic-navigation-menu/ic-navigation-menu.tsx"],"sourcesContent":["/*\n @prop --ic-z-index-navigation-menu: z-index of navigation menu\n /\n\n:host {\n display: block;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n min-height: 100% !important;\n background: rgb(0 0 0 / 60%);\n z-index: var(--ic-z-index-navigation-menu);\n}\n\n.popout-modal {\n position: absolute;\n inset: 0;\n}\n\n.popout-menu {\n position: fixed;\n top: 0;\n right: 0;\n width: 16rem;\n bottom: 0;\n background-color: var(--ic-top-navigation-menu-background);\n color: var(--ic-top-navigation-nav-item);\n\n --ic-typography-color: var(--ic-top-navigation-nav-item);\n\n box-shadow: var(--ic-elevation-overlay);\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n:host(.inline) .popout-menu {\n position: absolute;\n}\n\n.menu-close-button-container {\n position: relative;\n left: 11.875rem;\n padding: var(--ic-space-md) 0;\n}\n\n.nav-group-first {\n padding-bottom: 0;\n}\n\n.menu-buttons-container {\n padding: var(--ic-space-sm) 0;\n border-bottom: var(--ic-border-width) solid var(--ic-architectural-200);\n}\n\n.menu-buttons-container-nav-item-above {\n margin-top: var(--ic-space-md);\n border-top: var(--ic-border-width) solid var(--ic-architectural-200);\n}\n\n.menu-status-version-container {\n display: flex;\n flex-wrap: wrap;\n gap: var(--ic-space-xs);\n padding: var(--ic-space-md) var(--ic-space-md) var(--ic-space-xl);\n}\n\n.status-version-no-buttons {\n border-top: var(--ic-space-1px) solid var(--ic-architectural-200);\n}\n\n.menu-status {\n background-color: var(--ic-status-tag-neutral);\n\n --ic-typography-color: var(--ic-status-tag-text);\n\n border-radius: var(--ic-space-md);\n width: fit-content;\n padding: var(--ic-space-xxs) var(--ic-space-sm);\n}\n\n.menu-version {\n border-radius: var(--ic-space-md);\n background-color: var(--ic-status-tag-outlined-background-neutral);\n\n --ic-typography-color: var(--ic-color-text-primary-light);\n\n padding: var(--ic-space-xxs) var(--ic-space-sm);\n}\n\n.menu-status-text,\n.menu-version-text {\n overflow-wrap: break-word;\n}\n\n.navigation-landmark-text {\n position: absolute;\n width: var(--ic-space-1px);\n height: var(--ic-space-1px);\n padding: 0;\n margin: calc(-1 var(--ic-space-1px));\n overflow: hidden;\n}\n","import {\n Component,\n Element,\n Host,\n Prop,\n h,\n Event,\n EventEmitter,\n Listen,\n} from \"@stencil/core\";\nimport { IcThemeMode } from \"../../utils/types\";\nimport { getSlot, getSlotContent, isSlotUsed } from \"../../utils/helpers\";\n\n/*\n @slot navigation - Content will be rendered at top of panel.\n * @slot buttons - Content will be rendered above version info and below navigation.\n /\n@Component({\n tag: \"ic-navigation-menu\",\n styleUrl: \"ic-navigation-menu.css\",\n shadow: true,\n})\nexport class NavigationMenu {\n private closeButton?: HTMLIcButtonElement;\n private hasButtons: boolean = false;\n private hasNavigation: boolean = false;\n private lastTabStop: HTMLElement \| null = null;\n private navBarEl: HTMLIcTopNavigationElement \| null;\n private navGroupFirst: boolean = false;\n private navItemAboveButtons: boolean = false;\n\n @Element() el: HTMLIcNavigationMenuElement;\n\n /\n The status info to display.\n /\n @Prop() status?: string = \"\";\n\n /\n Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n /\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n /\n The version info to display.\n /\n @Prop() version?: string = \"\";\n\n /\n @internal - Emitted when the menu is closed.\n */\n @Event() icNavigationMenuClose: EventEmitter<void>;\n\n componentWillLoad(): void {\n this.navBarEl = document.querySelector(\"ic-top-navigation\");\n const navigationEls = getSlotContent(this.el, \"navigation\");\n if (navigationEls) {\n this.hasNavigation = true;\n const lastEl = navigationEls[navigationEls.length - 1] as HTMLElement;\n if (lastEl.tagName === \"IC-NAVIGATION-ITEM\") {\n this.navItemAboveButtons = true;\n }\n const firstEl = navigationEls[0] as HTMLElement;\n if (firstEl.tagName === \"IC-NAVIGATION-GROUP\") {\n this.navGroupFirst = true;\n }\n }\n const buttonContent = getSlotContent(this.el, \"buttons\");\n\n if (buttonContent !== null) {\n this.hasButtons = true;\n this.lastTabStop = buttonContent[buttonContent.length - 1] as HTMLElement;\n } else {\n if (this.hasNavigation && navigationEls) {\n const lastEl = navigationEls[navigationEls.length - 1] as HTMLElement;\n //check for slotted content i.e. react router link\n const slotContent = getSlot(lastEl, \"navigation-item\");\n if (slotContent !== null) {\n this.lastTabStop = slotContent as HTMLElement;\n } else {\n this.lastTabStop = lastEl;\n }\n }\n }\n }\n\n componentDidLoad(): void {\n this.focusCloseButton();\n }\n\n componentWillRender(): void {\n this.hasNavigation = isSlotUsed(this.el, \"navigation\");\n this.hasButtons = isSlotUsed(this.el, \"buttons\");\n }\n\n @Listen(\"navItemClicked\")\n navItemClickHandler(): void {\n this.closeMenu();\n }\n\n @Listen(\"keydown\", { target: \"document\" })\n handleKeyDown(ev: KeyboardEvent): void {\n if (ev.key === \"Tab\") {\n if (ev.shiftKey) {\n if (document.activeElement === this.navBarEl) {\n ev.preventDefault();\n this.focusLastTabStop();\n }\n } else if (\n document.activeElement === this.lastTabStop \|\|\n this.lastTabStop === null\n ) {\n ev.preventDefault();\n this.focusCloseButton();\n }\n } else if (ev.key === \"Escape\") {\n this.closeMenu();\n }\n }\n\n private closeMenu = () => {\n this.icNavigationMenuClose.emit();\n };\n\n private focusCloseButton = () => {\n this.closeButton?.focus();\n };\n\n private focusLastTabStop = () => {\n let focusEl;\n if (this.lastTabStop !== null) {\n switch (this.lastTabStop.tagName) {\n case \"IC-NAVIGATION-BUTTON\":\n case \"IC-NAVIGATION-ITEM\":\n case \"IC-NAVIGATION-GROUP\":\n focusEl = this.lastTabStop as HTMLElement;\n focusEl.focus();\n break;\n case \"A\":\n this.lastTabStop.focus();\n break;\n }\n }\n };\n\n render() {\n return (\n <Host class={{ [`ic-theme-${this.theme}`]: this.theme !== \"inherit\" }}>\n <div class=\"popout-modal\" onClick={this.closeMenu}></div>\n <div\n class=\"popout-menu\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-label={`${this.hasNavigation ? \"Navigation\" : \"App\"} menu`}\n >\n <span\n aria-hidden=\"true\"\n id=\"navigation-landmark-text\"\n class=\"navigation-landmark-text\"\n >\n Main navigation\n </span>\n <nav\n aria-labelledby=\"navigation-landmark-text\"\n aria-hidden={this.hasNavigation ? \"false\" : \"true\"}\n >\n <div\n class={{\n [\"menu-close-button-container\"]: true,\n [\"nav-group-first\"]: this.navGroupFirst,\n }}\n >\n <ic-button\n ref={(el) => (this.closeButton = el)}\n id=\"menu-close-button\"\n class=\"menu-close-button\"\n variant=\"icon\"\n size=\"large\"\n aria-label={`Close ${\n this.hasNavigation ? \"navigation\" : \"app\"\n } menu`}\n onClick={this.closeMenu}\n >\n <svg\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 14 14\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z\" />\n </svg>\n </ic-button>\n </div>\n {this.hasNavigation && <slot name=\"navigation\"></slot>}\n </nav>\n {this.hasButtons && (\n <div\n class={{\n [\"menu-buttons-container\"]: true,\n [\"menu-buttons-container-nav-item-above\"]:\n this.navItemAboveButtons,\n }}\n >\n <slot name=\"buttons\"></slot>\n </div>\n )}\n {(this.status !== \"\" \|\| this.version !== \"\") && (\n <div\n class={{\n [\"menu-status-version-container\"]: true,\n [\"status-version-no-buttons\"]: !this.hasButtons,\n }}\n >\n {this.status !== \"\" && (\n <div class=\"menu-status\">\n <ic-typography\n variant=\"label-uppercase\"\n aria-label=\"app tag\"\n class=\"menu-status-text\"\n >\n {this.status}\n </ic-typography>\n </div>\n )}\n {this.version !== \"\" && (\n <div class=\"menu-version\">\n <ic-typography\n variant=\"label\"\n class=\"menu-version-text\"\n aria-label=\"app version\"\n >\n {this.version}\n </ic-typography>\n </div>\n )}\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-navigation-menu2.js","mappings":"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","names":[],"sources":["src/components/ic-navigation-menu/ic-navigation-menu.css?tag=ic-navigation-menu&encapsulation=shadow","src/components/ic-navigation-menu/ic-navigation-menu.tsx"],"sourcesContent":["/*\n @prop --ic-z-index-navigation-menu: z-index of navigation menu\n /\n\n:host {\n display: block;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n min-height: 100% !important;\n background: rgb(0 0 0 / 60%);\n z-index: var(--ic-z-index-navigation-menu);\n}\n\n.popout-modal {\n position: absolute;\n inset: 0;\n}\n\n.popout-menu {\n position: fixed;\n top: 0;\n right: 0;\n width: 16rem;\n bottom: 0;\n background-color: var(--ic-top-navigation-menu-background);\n color: var(--ic-top-navigation-nav-item);\n\n --ic-typography-color: var(--ic-top-navigation-nav-item);\n\n box-shadow: var(--ic-elevation-overlay);\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n:host(.inline) .popout-menu {\n position: absolute;\n}\n\n.menu-close-button-container {\n position: relative;\n left: 11.875rem;\n padding: var(--ic-space-md) 0;\n}\n\n.nav-group-first {\n padding-bottom: 0;\n}\n\n.menu-buttons-container {\n padding: var(--ic-space-sm) 0;\n border-bottom: var(--ic-border-width) solid var(--ic-architectural-200);\n}\n\n.menu-buttons-container-nav-item-above {\n margin-top: var(--ic-space-md);\n border-top: var(--ic-border-width) solid var(--ic-architectural-200);\n}\n\n.menu-status-version-container {\n display: flex;\n flex-wrap: wrap;\n gap: var(--ic-space-xs);\n padding: var(--ic-space-md) var(--ic-space-md) var(--ic-space-xl);\n}\n\n.status-version-no-buttons {\n border-top: var(--ic-space-1px) solid var(--ic-architectural-200);\n}\n\n.menu-status {\n background-color: var(--ic-status-tag-neutral);\n\n --ic-typography-color: var(--ic-status-tag-text);\n\n border-radius: var(--ic-space-md);\n width: fit-content;\n padding: var(--ic-space-xxs) var(--ic-space-sm);\n}\n\n.menu-version {\n border-radius: var(--ic-space-md);\n background-color: var(--ic-status-tag-outlined-background-neutral);\n\n --ic-typography-color: var(--ic-color-text-primary-light);\n\n padding: var(--ic-space-xxs) var(--ic-space-sm);\n}\n\n.menu-status-text,\n.menu-version-text {\n overflow-wrap: break-word;\n}\n\n.navigation-landmark-text {\n position: absolute;\n width: var(--ic-space-1px);\n height: var(--ic-space-1px);\n padding: 0;\n margin: calc(-1 var(--ic-space-1px));\n overflow: hidden;\n}\n","import {\n Component,\n Element,\n Host,\n Prop,\n h,\n Event,\n EventEmitter,\n Listen,\n} from \"@stencil/core\";\nimport { IcThemeMode } from \"../../utils/types\";\nimport { getSlot, getSlotContent, isSlotUsed } from \"../../utils/helpers\";\n\nconst NAV_GROUP_TAG = \"IC-NAVIGATION-GROUP\";\nconst NAV_ITEM_TAG = \"IC-NAVIGATION-ITEM\";\n\n/*\n @slot navigation - Content will be rendered at top of panel.\n * @slot buttons - Content will be rendered above version info and below navigation.\n /\n@Component({\n tag: \"ic-navigation-menu\",\n styleUrl: \"ic-navigation-menu.css\",\n shadow: true,\n})\nexport class NavigationMenu {\n private closeButton?: HTMLIcButtonElement;\n private hasButtons: boolean = false;\n private hasNavigation: boolean = false;\n private lastTabStop: HTMLElement \| null = null;\n private navBarEl: HTMLIcTopNavigationElement \| null;\n private navGroupFirst: boolean = false;\n private navigationEls: HTMLElement[];\n private navItemAboveButtons: boolean = false;\n\n @Element() el: HTMLIcNavigationMenuElement;\n\n /\n The status info to display.\n /\n @Prop() status?: string = \"\";\n\n /\n Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n /\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n /\n The version info to display.\n /\n @Prop() version?: string = \"\";\n\n /\n @internal - Emitted when the menu is closed.\n */\n @Event() icNavigationMenuClose: EventEmitter<void>;\n\n componentWillLoad(): void {\n this.navBarEl = document.querySelector(\"ic-top-navigation\");\n this.navigationEls = getSlotContent(this.el, \"navigation\") as HTMLElement[];\n\n if (this.navigationEls) {\n this.hasNavigation = true;\n const lastEl = this.navigationEls[this.navigationEls.length - 1];\n if (lastEl.tagName === NAV_ITEM_TAG) {\n this.navItemAboveButtons = true;\n } else if (lastEl.tagName === NAV_GROUP_TAG) {\n lastEl.addEventListener(\"navigationGroupExpanded\", ((\n event: CustomEvent\n ) => {\n this.setLastTabStop(event.detail.expanded);\n }) as EventListener);\n }\n const firstEl = this.navigationEls[0];\n if (firstEl.tagName === NAV_GROUP_TAG) {\n this.navGroupFirst = true;\n }\n }\n const buttonContent = getSlotContent(this.el, \"buttons\");\n\n if (buttonContent !== null) {\n this.hasButtons = true;\n this.lastTabStop = buttonContent[buttonContent.length - 1] as HTMLElement;\n } else {\n if (this.hasNavigation && this.navigationEls) {\n this.setLastTabStop(false);\n }\n }\n }\n\n componentDidLoad(): void {\n this.focusCloseButton();\n }\n\n componentWillRender(): void {\n this.hasNavigation = isSlotUsed(this.el, \"navigation\");\n this.hasButtons = isSlotUsed(this.el, \"buttons\");\n }\n\n @Listen(\"navItemClicked\")\n navItemClickHandler(): void {\n this.closeMenu();\n }\n\n @Listen(\"keydown\", { target: \"document\" })\n handleKeyDown(ev: KeyboardEvent): void {\n if (ev.key === \"Tab\") {\n if (ev.shiftKey) {\n if (document.activeElement === this.navBarEl) {\n ev.preventDefault();\n this.focusLastTabStop();\n }\n } else if (\n document.activeElement === this.lastTabStop \|\|\n this.lastTabStop === null\n ) {\n ev.preventDefault();\n this.focusCloseButton();\n }\n } else if (ev.key === \"Escape\") {\n this.closeMenu();\n }\n }\n\n private setLastTabStop = (lastNavGroupExpanded: boolean) => {\n let lastEl = this.navigationEls[\n this.navigationEls.length - 1\n ] as HTMLElement;\n\n if (lastEl.tagName === NAV_GROUP_TAG && lastNavGroupExpanded) {\n const childNavItems = lastEl.children;\n lastEl = childNavItems[childNavItems.length - 1] as HTMLElement;\n }\n\n if (lastEl.tagName === NAV_ITEM_TAG) {\n //check for slotted content i.e. react router link\n const slotContent = getSlot(lastEl, \"navigation-item\");\n if (slotContent !== null) {\n lastEl = slotContent as HTMLElement;\n }\n }\n\n this.lastTabStop = lastEl;\n };\n\n private closeMenu = () => {\n this.icNavigationMenuClose.emit();\n };\n\n private focusCloseButton = () => {\n this.closeButton?.focus();\n };\n\n private focusLastTabStop = () => {\n let focusEl;\n if (this.lastTabStop !== null) {\n switch (this.lastTabStop.tagName) {\n case \"IC-NAVIGATION-BUTTON\":\n case NAV_ITEM_TAG:\n case NAV_GROUP_TAG:\n focusEl = this.lastTabStop as HTMLElement;\n focusEl.focus();\n break;\n case \"A\":\n this.lastTabStop.focus();\n break;\n }\n }\n };\n\n render() {\n return (\n <Host class={{ [`ic-theme-${this.theme}`]: this.theme !== \"inherit\" }}>\n <div class=\"popout-modal\" onClick={this.closeMenu}></div>\n <div\n class=\"popout-menu\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-label={`${this.hasNavigation ? \"Navigation\" : \"App\"} menu`}\n >\n <span\n aria-hidden=\"true\"\n id=\"navigation-landmark-text\"\n class=\"navigation-landmark-text\"\n >\n Main navigation\n </span>\n <nav\n aria-labelledby=\"navigation-landmark-text\"\n aria-hidden={this.hasNavigation ? \"false\" : \"true\"}\n >\n <div\n class={{\n [\"menu-close-button-container\"]: true,\n [\"nav-group-first\"]: this.navGroupFirst,\n }}\n >\n <ic-button\n ref={(el) => (this.closeButton = el)}\n id=\"menu-close-button\"\n class=\"menu-close-button\"\n variant=\"icon\"\n size=\"large\"\n aria-label={`Close ${\n this.hasNavigation ? \"navigation\" : \"app\"\n } menu`}\n onClick={this.closeMenu}\n >\n <svg\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 14 14\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z\" />\n </svg>\n </ic-button>\n </div>\n {this.hasNavigation && <slot name=\"navigation\"></slot>}\n </nav>\n {this.hasButtons && (\n <div\n class={{\n [\"menu-buttons-container\"]: true,\n [\"menu-buttons-container-nav-item-above\"]:\n this.navItemAboveButtons,\n }}\n >\n <slot name=\"buttons\"></slot>\n </div>\n )}\n {(this.status !== \"\" \|\| this.version !== \"\") && (\n <div\n class={{\n [\"menu-status-version-container\"]: true,\n [\"status-version-no-buttons\"]: !this.hasButtons,\n }}\n >\n {this.status !== \"\" && (\n <div class=\"menu-status\">\n <ic-typography\n variant=\"label-uppercase\"\n aria-label=\"app tag\"\n class=\"menu-status-text\"\n >\n {this.status}\n </ic-typography>\n </div>\n )}\n {this.version !== \"\" && (\n <div class=\"menu-version\">\n <ic-typography\n variant=\"label\"\n class=\"menu-version-text\"\n aria-label=\"app version\"\n >\n {this.version}\n </ic-typography>\n </div>\n )}\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/ic-popover-menu.js CHANGED Viewed

@@ -175,6 +175,7 @@ const PopoverMenu = /*@__PURE__*/ proxyCustomElement(class PopoverMenu extends H
             this.el.getAttribute(this.ARIA_LABEL) === null) {
             console.error(`No aria-label specified for popover menu component - aria-label required`);
         }
+        this.watchOpenHandler();
     }
     componentWillRender() {
         this.anchorEl = this.findAnchorEl(this.anchor);
@@ -274,17 +275,17 @@ const PopoverMenu = /*@__PURE__*/ proxyCustomElement(class PopoverMenu extends H
         }
     }
     render() {
-        return (h(Host, { key: '0d600ea25ae46dca927e100d1c0f321afff64b01', class: {
+        return (h(Host, { key: '22d7146fb66905fd58370ecdb03dcbe750d5c287', class: {
                 ["ic-popover-menu-open"]: !!this.open,
                 [`ic-theme-${this.theme}`]: this.theme !== "inherit",
-            } }, h("div", { key: 'c94ec7dcd89b7a9bcfed03d5def6cf1be0243d50', id: this.parentPopover === undefined
+            } }, h("div", { key: '63efc4505ce4a676839c259b174604c79b0e7781', id: this.parentPopover === undefined
                 ? `ic-popover-submenu-${this.submenuId}`
                 : "", class: {
                 menu: true,
-            } }, h("span", { key: 'a01071126c2bbd39f26e837988efabdd07fd3da8', class: {
+            } }, h("span", { key: '14860cdc189b85398dd92dce52907869d8223598', class: {
                 "opening-from-parent": this.openingFromParent,
                 "opening-from-child": this.openingFromChild,
-            } }, isPropDefined(this.submenuId) && (h("span", { key: 'c5f225a965cb77832d77ad895e6feb070f61fc33' }, h("span", { key: '1d5e3ff2f1c52e10bc8646ba04858be20b40c8c2', role: "menu" }, h("ic-menu-item", { key: '4b3f0324f21ed33b24df68cb72ea16d5704b97b4', class: "ic-popover-submenu-back-button", ref: (el) => (this.backButton = el), label: "Back", onClick: this.handleBackButtonClick, id: `ic-popover-submenu-back-button-${this.submenuLevel}` }, h("svg", { key: 'cb9d8fdcef344a5d8659516de8baac5856b776bf', slot: "icon", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "submenu-back-icon" }, h("path", { key: '1d79d4c02b06b5651878ebf11d4a6d6428a6f45e', d: "M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z", fill: "currentColor" })))), h("ic-typography", { key: '594d0374d03ec7764afe48b2e8d5959f39eb761d', variant: "subtitle-small", class: "parent-label" }, this.parentLabel))), h("ul", { key: '7fa43dcda50ed5740f3922955e26c08946377f2e', class: "button", "aria-label": this.getMenuAriaLabel(), role: "menu" }, h("slot", { key: '25da236864fe2afd3f94fe53a41b180566490e1f' }))))));
+            } }, isPropDefined(this.submenuId) && (h("span", { key: '8e7a29c0d1159c156313247279c9b4bfb3e6ada4' }, h("span", { key: 'c2f9aa89fb51c822714ba71d078add0f55e529b1', role: "menu" }, h("ic-menu-item", { key: '619dc3d8ba9dd9d479623d67fad0e3bc0d45f113', class: "ic-popover-submenu-back-button", ref: (el) => (this.backButton = el), label: "Back", onClick: this.handleBackButtonClick, id: `ic-popover-submenu-back-button-${this.submenuLevel}` }, h("svg", { key: '61974e7d25308ab26ee4759243ba2f577f0e7ca8', slot: "icon", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "submenu-back-icon" }, h("path", { key: '11e3b1b7496c19deeb22af35d4033e33d9c71b15', d: "M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z", fill: "currentColor" })))), h("ic-typography", { key: '4f55d2cdc04fdc15157a76176339d8cb6548b3f2', variant: "subtitle-small", class: "parent-label" }, this.parentLabel))), h("ul", { key: 'ad2855ce0d5366fdf3a9ecaff58fba23edaee6f9', class: "button", "aria-label": this.getMenuAriaLabel(), role: "menu" }, h("slot", { key: '1f8122018db85fc386bc24fdb710de976d967240' }))))));
     }
     static get delegatesFocus() { return true; }
     get el() { return this; }

package/dist/components/ic-popover-menu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-popover-menu.js","mappings":"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","names":[],"sources":["src/components/ic-popover-menu/ic-popover-menu.css?tag=ic-popover-menu&encapsulation=shadow","src/components/ic-popover-menu/ic-popover-menu.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/*\n @prop --ic-z-index-popover: z-index of popover menu. \n* @prop --max-height: Maximum height of the popover menu.\n* @prop --popover-width: Default width of the popover menu.\n/\n\n@media (prefers-reduced-motion: no-preference) {\n :host .opening-from-parent {\n animation: slide-in var(--ic-transition-duration-slow) ease-in-out;\n }\n\n :host .opening-from-child {\n animation: slide-out var(--ic-transition-duration-slow) ease-in-out;\n }\n}\n\n:host {\n border-radius: var(--ic-border-radius);\n color: var(--ic-popover-nav-text);\n\n --ic-typography-color: var(--ic-popover-nav-text);\n\n position: relative;\n z-index: var(--ic-z-index-popover);\n box-sizing: border-box;\n box-shadow: var(--ic-elevation-overlay);\n display: none;\n}\n\n:host(.on-dialog) {\n inset: auto !important;\n}\n\n:host(.on-dialog-fix-translate) {\n transform: translate(0, var(--ic-space-xs)) !important;\n}\n\n:host(.on-dialog-translate-y) {\n transform: translate(0, calc(-1 var(--translate-y))) !important;\n}\n\n.menu {\n border: var(--ic-border-default);\n border-color: var(--ic-popover-border);\n border-radius: var(--ic-border-radius);\n background-color: var(--ic-popover-background);\n visibility: hidden;\n height: 0;\n}\n\n.button {\n text-decoration: none;\n list-style-type: none;\n}\n\n:host(:focus-within) {\n box-shadow: var(--ic-border-focus);\n}\n\n.menu:focus-visible {\n outline: none;\n}\n\n:host(.ic-popover-menu-open) {\n display: block;\n min-width: calc(20rem - var(--ic-space-xl));\n width: var(--popover-width, 20rem);\n max-width: calc(100vw - var(--ic-space-xl));\n}\n\n:host(.ic-popover-menu-open) .menu {\n visibility: visible;\n height: fit-content;\n max-height: var(--max-height, fit-content);\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n.parent-label {\n --ic-typography-color: var(--ic-popover-parent-label);\n\n margin: var(--ic-space-xs) var(--ic-space-xs) 0;\n}\n\n@keyframes slide-in {\n from {\n opacity: 0;\n transform: translateX(10rem);\n }\n\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n\n@keyframes slide-out {\n from {\n opacity: 0;\n transform: translateX(-10rem);\n }\n\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n","import {\n Component,\n Element,\n Host,\n h,\n Prop,\n Listen,\n Watch,\n State,\n Method,\n Event,\n EventEmitter,\n} from \"@stencil/core\";\nimport { getSlotElements, isPropDefined } from \"../../utils/helpers\";\nimport { createPopper, Instance as PopperInstance } from \"@popperjs/core\";\nimport { IcThemeMode } from \"../../utils/types\";\n\n@Component({\n tag: \"ic-popover-menu\",\n styleUrl: \"ic-popover-menu.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class PopoverMenu {\n private anchorEl: HTMLElement \| null;\n private ARIA_LABEL: string = \"aria-label\";\n private backButton?: HTMLIcMenuItemElement;\n private currentFocus: number;\n private popoverMenuEls: HTMLIcMenuItemElement[] = [];\n private popperInstance: PopperInstance \| null;\n\n @Element() el: HTMLIcPopoverMenuElement;\n\n @State() openingFromChild: boolean = false;\n @State() openingFromParent: boolean = false;\n\n /*\n The ID of the element the popover menu will anchor itself to. This is required unless the popover is a submenu.\n /\n @Prop() anchor?: string;\n\n /\n @internal The parent popover menu of a child popover menu.\n /\n @Prop() parentLabel?: string;\n\n /\n @internal The parent popover menu of a child popover menu.\n /\n @Prop() parentPopover?: HTMLIcPopoverMenuElement;\n\n /\n The unique identifier for a popover submenu.\n /\n @Prop() submenuId?: string;\n\n /\n @internal The level of menu being displayed.\n /\n @Prop() submenuLevel?: number = 1;\n\n /\n Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n /\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n /\n If `true`, the popover menu will be displayed.\n /\n @Prop({ reflect: true, mutable: true }) open?: boolean \| undefined =\n undefined;\n\n @Watch(\"open\")\n watchOpenHandler(): void {\n const popoverArr = this.el.parentElement?.querySelectorAll(\n `ic-popover-menu`\n ) as NodeListOf<HTMLIcPopoverMenuElement>;\n if (this.open) {\n if (popoverArr.length > 0) {\n popoverArr.forEach((popover) => {\n if (popover !== this.el) {\n popover.open = false;\n }\n });\n }\n if (\n this.parentPopover !== undefined &&\n !this.popoverMenuEls.some((menuItem) => menuItem.id)\n ) {\n this.backButton && this.popoverMenuEls.unshift(this.backButton);\n }\n\n this.currentFocus = 0;\n // Needed so that anchorEl isn't always focused\n setTimeout(this.setButtonFocus, 50);\n } else if (this.popperInstance) {\n if (popoverArr.length > 0) {\n popoverArr.forEach((popover) => {\n if (popover !== this.el) {\n popover.open = false;\n }\n });\n }\n this.popperInstance.destroy();\n this.popperInstance = null;\n }\n }\n\n /\n Emitted when the popover menu is closed.\n /\n @Event() icPopoverClosed: EventEmitter<HTMLIcMenuItemElement>;\n\n disconnectedCallback(): void {\n if (this.popperInstance) {\n this.popperInstance.destroy();\n this.popperInstance = null;\n }\n }\n\n componentDidLoad(): void {\n const slotWrapper = this.el.shadowRoot?.querySelector(\"ul.button\");\n if (slotWrapper) {\n const popoverMenuElements = getSlotElements(slotWrapper);\n\n if (popoverMenuElements !== null) {\n this.addMenuItems(popoverMenuElements);\n }\n }\n\n if (\n this.submenuId === undefined &&\n this.el.getAttribute(this.ARIA_LABEL) === null\n ) {\n console.error(\n `No aria-label specified for popover menu component - aria-label required`\n );\n }\n }\n\n componentWillRender(): void {\n this.anchorEl = this.findAnchorEl(this.anchor);\n }\n\n componentDidRender(): void {\n if (this.open && !this.popperInstance) {\n this.initPopperJS();\n }\n }\n\n @Listen(\"handleMenuItemClick\")\n handleMenuItemClick(ev: CustomEvent<HTMLIcMenuItemElement>): void {\n if (!ev.detail.submenuTriggerFor && ev.detail.label !== \"Back\") {\n this.closeMenu(false, ev.detail);\n }\n }\n\n // This is listening for the event emitted when a menu item is acting as a trigger button\n @Listen(\"triggerPopoverMenuInstance\", { capture: true })\n handleSubmenuChange(ev: Event): void {\n // Finds the trigger menu item that has emitted the event\n const target = ev.target as HTMLIcMenuItemElement;\n this.open = false;\n\n // Find the popover menu that the menu item triggers (i.e. submenu-trigger-for === submenu-id).\n const childEl = document.querySelector(\n `ic-popover-menu[submenu-id=${target.submenuTriggerFor}]`\n ) as HTMLIcPopoverMenuElement;\n // Set the parent popover menu of the submenu and open the submenu\n childEl.parentPopover = this.el;\n childEl.anchor = this.anchor;\n childEl.ariaLabel = this.el.getAttribute(this.ARIA_LABEL);\n childEl.openFromParent();\n childEl.submenuLevel = this.submenuLevel! + 1;\n // Set the label in the submenu using the label of the menu item that has emitted the event\n childEl.parentLabel = target.label;\n }\n\n @Listen(\"click\", { target: \"document\" })\n handleClick(ev: Event): void {\n if (this.open && this.isNotPopoverMenuEl(ev)) {\n // If menu is open and the next click on the document is not a popover El, close the popover\n this.closeMenu();\n }\n }\n\n // Manages the keyboard navigation in the popover menu\n @Listen(\"keydown\", {})\n handleKeyDown(ev: KeyboardEvent): void {\n switch (ev.key) {\n case \"ArrowDown\":\n case \"ArrowUp\":\n ev.preventDefault();\n this.currentFocus = this.getNextItemToSelect(\n this.currentFocus,\n ev.key === \"ArrowDown\"\n );\n this.setButtonFocus();\n break;\n case \"Home\":\n //Sets home focus as first element, or back button\n this.currentFocus = 0;\n this.setButtonFocus();\n break;\n case \"End\":\n //Sets end focus as last element\n this.currentFocus = this.popoverMenuEls.length - 1;\n this.setButtonFocus();\n break;\n case \"Escape\":\n case \"Tab\":\n ev.preventDefault();\n if (this.open) {\n this.closeMenu(true);\n this.el.blur();\n }\n break;\n }\n }\n\n /\n @internal Opens the menu from the child menu.\n /\n @Method()\n async openFromChild(): Promise<void> {\n this.open = true;\n this.openingFromChild = true;\n\n setTimeout(() => (this.openingFromChild = false), 1000);\n }\n\n /\n @internal Opens the menu from the parent menu.\n /\n @Method()\n async openFromParent(): Promise<void> {\n this.open = true;\n this.openingFromParent = true;\n\n setTimeout(() => (this.openingFromParent = false), 1000);\n }\n\n private setButtonFocus = () => {\n this.popoverMenuEls[this.currentFocus]?.focus();\n };\n\n // Checks that the popover menu has an anchor\n private findAnchorEl = (anchor: string \| undefined): HTMLElement \| null => {\n let anchorElement: HTMLElement \| null = null;\n if (!anchor) {\n this.submenuId === undefined &&\n console.error(\"No anchor specified for popover component\");\n } else {\n anchorElement = document.querySelector(\n anchor.indexOf(\"#\") === 0 ? anchor : \"#\" + anchor\n );\n if (anchorElement === null) {\n console.error(`Popover anchor element '${anchor}' not found`);\n }\n }\n return anchorElement;\n };\n\n private isNotPopoverMenuEl = (ev: Event) => {\n const { id, tagName } = ev.target as HTMLElement;\n return (\n id !== this.anchor &&\n tagName !== \"IC-MENU-ITEM\" &&\n tagName !== \"IC-MENU-GROUP\" &&\n tagName !== \"IC-POPOVER-MENU\"\n );\n };\n\n /\n @internal Close the menu, emit icPopoverClosed of the root popover\n * @param setFocusToAnchor when true return focus to anchor element when menu is closed\n */\n @Method()\n async closeMenu(\n setFocusToAnchor = false,\n menuElement?: HTMLIcMenuItemElement\n ): Promise<void> {\n this.open = false;\n if (this.parentPopover) {\n this.parentPopover.closeMenu(setFocusToAnchor, menuElement);\n } else {\n if (setFocusToAnchor) {\n this.anchorEl?.focus();\n }\n this.icPopoverClosed.emit(menuElement);\n }\n }\n\n private getNextItemToSelect = (\n currentItem: number,\n movingDown: boolean\n ): number => {\n const numButtons = this.popoverMenuEls.length - 1;\n\n if (currentItem < 1) {\n currentItem = 0;\n }\n\n let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n\n // Check if wrap around necessary\n if (nextItem < 0) {\n nextItem = numButtons;\n } else if (nextItem > numButtons) {\n nextItem = 0;\n }\n\n return nextItem;\n };\n\n private addMenuItems = (elements: Element[] \| NodeListOf<ChildNode>) => {\n for (let i = 0; i < elements.length; i++) {\n const el = elements[i] as HTMLIcMenuItemElement;\n if (el.tagName === \"IC-MENU-ITEM\") {\n this.popoverMenuEls.push(el);\n } else if (el.tagName === \"IC-MENU-GROUP\") {\n const groupSlotWrapper = el.shadowRoot?.querySelector(\n \".menu-items-wrapper\"\n );\n if (groupSlotWrapper) {\n const menuGroupElements = getSlotElements(groupSlotWrapper);\n menuGroupElements && this.addMenuItems(menuGroupElements);\n }\n }\n }\n };\n\n private getMenuAriaLabel = (): string \| null => {\n const ariaLabel = this.el.getAttribute(this.ARIA_LABEL);\n\n if (isPropDefined(this.submenuId)) {\n return `${ariaLabel}, within nested level ${this.submenuLevel} ${this.parentLabel} submenu,`;\n } else {\n return ariaLabel;\n }\n };\n\n private handleBackButtonClick = (): void => {\n this.parentPopover?.openFromChild();\n this.open = false;\n };\n\n private initPopperJS = () => {\n if (this.anchorEl) {\n this.popperInstance = createPopper(this.anchorEl, this.el, {\n placement: \"bottom-start\",\n modifiers: [\n {\n name: \"offset\",\n options: {\n offset: [0, 4],\n },\n },\n {\n name: \"flip\",\n options: {\n fallbackPlacements: [\"top-start\", \"top-end\", \"bottom-end\"],\n rootBoundary: \"viewport\",\n },\n },\n ],\n });\n }\n };\n\n render() {\n return (\n <Host\n class={{\n [\"ic-popover-menu-open\"]: !!this.open,\n [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n }}\n >\n <div\n id={\n this.parentPopover === undefined\n ? `ic-popover-submenu-${this.submenuId}`\n : \"\"\n }\n class={{\n menu: true,\n }}\n >\n <span\n class={{\n \"opening-from-parent\": this.openingFromParent,\n \"opening-from-child\": this.openingFromChild,\n }}\n >\n {isPropDefined(this.submenuId) && (\n <span>\n <span role=\"menu\">\n <ic-menu-item\n class=\"ic-popover-submenu-back-button\"\n ref={(el) => (this.backButton = el)}\n label=\"Back\"\n onClick={this.handleBackButtonClick}\n id={`ic-popover-submenu-back-button-${this.submenuLevel}`}\n >\n <svg\n slot=\"icon\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"submenu-back-icon\"\n >\n <path\n d=\"M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z\"\n fill=\"currentColor\"\n />\n </svg>\n </ic-menu-item>\n </span>\n <ic-typography variant=\"subtitle-small\" class=\"parent-label\">\n {this.parentLabel}\n </ic-typography>\n </span>\n )}\n <ul class=\"button\" aria-label={this.getMenuAriaLabel()} role=\"menu\">\n <slot></slot>\n </ul>\n </span>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-popover-menu.js","mappings":"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","names":[],"sources":["src/components/ic-popover-menu/ic-popover-menu.css?tag=ic-popover-menu&encapsulation=shadow","src/components/ic-popover-menu/ic-popover-menu.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/*\n @prop --ic-z-index-popover: z-index of popover menu. \n* @prop --max-height: Maximum height of the popover menu.\n* @prop --popover-width: Default width of the popover menu.\n/\n\n@media (prefers-reduced-motion: no-preference) {\n :host .opening-from-parent {\n animation: slide-in var(--ic-transition-duration-slow) ease-in-out;\n }\n\n :host .opening-from-child {\n animation: slide-out var(--ic-transition-duration-slow) ease-in-out;\n }\n}\n\n:host {\n border-radius: var(--ic-border-radius);\n color: var(--ic-popover-nav-text);\n\n --ic-typography-color: var(--ic-popover-nav-text);\n\n position: relative;\n z-index: var(--ic-z-index-popover);\n box-sizing: border-box;\n box-shadow: var(--ic-elevation-overlay);\n display: none;\n}\n\n:host(.on-dialog) {\n inset: auto !important;\n}\n\n:host(.on-dialog-fix-translate) {\n transform: translate(0, var(--ic-space-xs)) !important;\n}\n\n:host(.on-dialog-translate-y) {\n transform: translate(0, calc(-1 var(--translate-y))) !important;\n}\n\n.menu {\n border: var(--ic-border-default);\n border-color: var(--ic-popover-border);\n border-radius: var(--ic-border-radius);\n background-color: var(--ic-popover-background);\n visibility: hidden;\n height: 0;\n}\n\n.button {\n text-decoration: none;\n list-style-type: none;\n}\n\n:host(:focus-within) {\n box-shadow: var(--ic-border-focus);\n}\n\n.menu:focus-visible {\n outline: none;\n}\n\n:host(.ic-popover-menu-open) {\n display: block;\n min-width: calc(20rem - var(--ic-space-xl));\n width: var(--popover-width, 20rem);\n max-width: calc(100vw - var(--ic-space-xl));\n}\n\n:host(.ic-popover-menu-open) .menu {\n visibility: visible;\n height: fit-content;\n max-height: var(--max-height, fit-content);\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n.parent-label {\n --ic-typography-color: var(--ic-popover-parent-label);\n\n margin: var(--ic-space-xs) var(--ic-space-xs) 0;\n}\n\n@keyframes slide-in {\n from {\n opacity: 0;\n transform: translateX(10rem);\n }\n\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n\n@keyframes slide-out {\n from {\n opacity: 0;\n transform: translateX(-10rem);\n }\n\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n","import {\n Component,\n Element,\n Host,\n h,\n Prop,\n Listen,\n Watch,\n State,\n Method,\n Event,\n EventEmitter,\n} from \"@stencil/core\";\nimport { getSlotElements, isPropDefined } from \"../../utils/helpers\";\nimport { createPopper, Instance as PopperInstance } from \"@popperjs/core\";\nimport { IcThemeMode } from \"../../utils/types\";\n\n@Component({\n tag: \"ic-popover-menu\",\n styleUrl: \"ic-popover-menu.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class PopoverMenu {\n private anchorEl: HTMLElement \| null;\n private ARIA_LABEL: string = \"aria-label\";\n private backButton?: HTMLIcMenuItemElement;\n private currentFocus: number;\n private popoverMenuEls: HTMLIcMenuItemElement[] = [];\n private popperInstance: PopperInstance \| null;\n\n @Element() el: HTMLIcPopoverMenuElement;\n\n @State() openingFromChild: boolean = false;\n @State() openingFromParent: boolean = false;\n\n /*\n The ID of the element the popover menu will anchor itself to. This is required unless the popover is a submenu.\n /\n @Prop() anchor?: string;\n\n /\n @internal The parent popover menu of a child popover menu.\n /\n @Prop() parentLabel?: string;\n\n /\n @internal The parent popover menu of a child popover menu.\n /\n @Prop() parentPopover?: HTMLIcPopoverMenuElement;\n\n /\n The unique identifier for a popover submenu.\n /\n @Prop() submenuId?: string;\n\n /\n @internal The level of menu being displayed.\n /\n @Prop() submenuLevel?: number = 1;\n\n /\n Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n /\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n /\n If `true`, the popover menu will be displayed.\n /\n @Prop({ reflect: true, mutable: true }) open?: boolean \| undefined =\n undefined;\n\n @Watch(\"open\")\n watchOpenHandler(): void {\n const popoverArr = this.el.parentElement?.querySelectorAll(\n `ic-popover-menu`\n ) as NodeListOf<HTMLIcPopoverMenuElement>;\n if (this.open) {\n if (popoverArr.length > 0) {\n popoverArr.forEach((popover) => {\n if (popover !== this.el) {\n popover.open = false;\n }\n });\n }\n if (\n this.parentPopover !== undefined &&\n !this.popoverMenuEls.some((menuItem) => menuItem.id)\n ) {\n this.backButton && this.popoverMenuEls.unshift(this.backButton);\n }\n\n this.currentFocus = 0;\n // Needed so that anchorEl isn't always focused\n setTimeout(this.setButtonFocus, 50);\n } else if (this.popperInstance) {\n if (popoverArr.length > 0) {\n popoverArr.forEach((popover) => {\n if (popover !== this.el) {\n popover.open = false;\n }\n });\n }\n this.popperInstance.destroy();\n this.popperInstance = null;\n }\n }\n\n /\n Emitted when the popover menu is closed.\n /\n @Event() icPopoverClosed: EventEmitter<HTMLIcMenuItemElement>;\n\n disconnectedCallback(): void {\n if (this.popperInstance) {\n this.popperInstance.destroy();\n this.popperInstance = null;\n }\n }\n\n componentDidLoad(): void {\n const slotWrapper = this.el.shadowRoot?.querySelector(\"ul.button\");\n if (slotWrapper) {\n const popoverMenuElements = getSlotElements(slotWrapper);\n\n if (popoverMenuElements !== null) {\n this.addMenuItems(popoverMenuElements);\n }\n }\n\n if (\n this.submenuId === undefined &&\n this.el.getAttribute(this.ARIA_LABEL) === null\n ) {\n console.error(\n `No aria-label specified for popover menu component - aria-label required`\n );\n }\n\n this.watchOpenHandler();\n }\n\n componentWillRender(): void {\n this.anchorEl = this.findAnchorEl(this.anchor);\n }\n\n componentDidRender(): void {\n if (this.open && !this.popperInstance) {\n this.initPopperJS();\n }\n }\n\n @Listen(\"handleMenuItemClick\")\n handleMenuItemClick(ev: CustomEvent<HTMLIcMenuItemElement>): void {\n if (!ev.detail.submenuTriggerFor && ev.detail.label !== \"Back\") {\n this.closeMenu(false, ev.detail);\n }\n }\n\n // This is listening for the event emitted when a menu item is acting as a trigger button\n @Listen(\"triggerPopoverMenuInstance\", { capture: true })\n handleSubmenuChange(ev: Event): void {\n // Finds the trigger menu item that has emitted the event\n const target = ev.target as HTMLIcMenuItemElement;\n this.open = false;\n\n // Find the popover menu that the menu item triggers (i.e. submenu-trigger-for === submenu-id).\n const childEl = document.querySelector(\n `ic-popover-menu[submenu-id=${target.submenuTriggerFor}]`\n ) as HTMLIcPopoverMenuElement;\n // Set the parent popover menu of the submenu and open the submenu\n childEl.parentPopover = this.el;\n childEl.anchor = this.anchor;\n childEl.ariaLabel = this.el.getAttribute(this.ARIA_LABEL);\n childEl.openFromParent();\n childEl.submenuLevel = this.submenuLevel! + 1;\n // Set the label in the submenu using the label of the menu item that has emitted the event\n childEl.parentLabel = target.label;\n }\n\n @Listen(\"click\", { target: \"document\" })\n handleClick(ev: Event): void {\n if (this.open && this.isNotPopoverMenuEl(ev)) {\n // If menu is open and the next click on the document is not a popover El, close the popover\n this.closeMenu();\n }\n }\n\n // Manages the keyboard navigation in the popover menu\n @Listen(\"keydown\", {})\n handleKeyDown(ev: KeyboardEvent): void {\n switch (ev.key) {\n case \"ArrowDown\":\n case \"ArrowUp\":\n ev.preventDefault();\n this.currentFocus = this.getNextItemToSelect(\n this.currentFocus,\n ev.key === \"ArrowDown\"\n );\n this.setButtonFocus();\n break;\n case \"Home\":\n //Sets home focus as first element, or back button\n this.currentFocus = 0;\n this.setButtonFocus();\n break;\n case \"End\":\n //Sets end focus as last element\n this.currentFocus = this.popoverMenuEls.length - 1;\n this.setButtonFocus();\n break;\n case \"Escape\":\n case \"Tab\":\n ev.preventDefault();\n if (this.open) {\n this.closeMenu(true);\n this.el.blur();\n }\n break;\n }\n }\n\n /\n @internal Opens the menu from the child menu.\n /\n @Method()\n async openFromChild(): Promise<void> {\n this.open = true;\n this.openingFromChild = true;\n\n setTimeout(() => (this.openingFromChild = false), 1000);\n }\n\n /\n @internal Opens the menu from the parent menu.\n /\n @Method()\n async openFromParent(): Promise<void> {\n this.open = true;\n this.openingFromParent = true;\n\n setTimeout(() => (this.openingFromParent = false), 1000);\n }\n\n private setButtonFocus = () => {\n this.popoverMenuEls[this.currentFocus]?.focus();\n };\n\n // Checks that the popover menu has an anchor\n private findAnchorEl = (anchor: string \| undefined): HTMLElement \| null => {\n let anchorElement: HTMLElement \| null = null;\n if (!anchor) {\n this.submenuId === undefined &&\n console.error(\"No anchor specified for popover component\");\n } else {\n anchorElement = document.querySelector(\n anchor.indexOf(\"#\") === 0 ? anchor : \"#\" + anchor\n );\n if (anchorElement === null) {\n console.error(`Popover anchor element '${anchor}' not found`);\n }\n }\n return anchorElement;\n };\n\n private isNotPopoverMenuEl = (ev: Event) => {\n const { id, tagName } = ev.target as HTMLElement;\n return (\n id !== this.anchor &&\n tagName !== \"IC-MENU-ITEM\" &&\n tagName !== \"IC-MENU-GROUP\" &&\n tagName !== \"IC-POPOVER-MENU\"\n );\n };\n\n /\n @internal Close the menu, emit icPopoverClosed of the root popover\n * @param setFocusToAnchor when true return focus to anchor element when menu is closed\n */\n @Method()\n async closeMenu(\n setFocusToAnchor = false,\n menuElement?: HTMLIcMenuItemElement\n ): Promise<void> {\n this.open = false;\n if (this.parentPopover) {\n this.parentPopover.closeMenu(setFocusToAnchor, menuElement);\n } else {\n if (setFocusToAnchor) {\n this.anchorEl?.focus();\n }\n this.icPopoverClosed.emit(menuElement);\n }\n }\n\n private getNextItemToSelect = (\n currentItem: number,\n movingDown: boolean\n ): number => {\n const numButtons = this.popoverMenuEls.length - 1;\n\n if (currentItem < 1) {\n currentItem = 0;\n }\n\n let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n\n // Check if wrap around necessary\n if (nextItem < 0) {\n nextItem = numButtons;\n } else if (nextItem > numButtons) {\n nextItem = 0;\n }\n\n return nextItem;\n };\n\n private addMenuItems = (elements: Element[] \| NodeListOf<ChildNode>) => {\n for (let i = 0; i < elements.length; i++) {\n const el = elements[i] as HTMLIcMenuItemElement;\n if (el.tagName === \"IC-MENU-ITEM\") {\n this.popoverMenuEls.push(el);\n } else if (el.tagName === \"IC-MENU-GROUP\") {\n const groupSlotWrapper = el.shadowRoot?.querySelector(\n \".menu-items-wrapper\"\n );\n if (groupSlotWrapper) {\n const menuGroupElements = getSlotElements(groupSlotWrapper);\n menuGroupElements && this.addMenuItems(menuGroupElements);\n }\n }\n }\n };\n\n private getMenuAriaLabel = (): string \| null => {\n const ariaLabel = this.el.getAttribute(this.ARIA_LABEL);\n\n if (isPropDefined(this.submenuId)) {\n return `${ariaLabel}, within nested level ${this.submenuLevel} ${this.parentLabel} submenu,`;\n } else {\n return ariaLabel;\n }\n };\n\n private handleBackButtonClick = (): void => {\n this.parentPopover?.openFromChild();\n this.open = false;\n };\n\n private initPopperJS = () => {\n if (this.anchorEl) {\n this.popperInstance = createPopper(this.anchorEl, this.el, {\n placement: \"bottom-start\",\n modifiers: [\n {\n name: \"offset\",\n options: {\n offset: [0, 4],\n },\n },\n {\n name: \"flip\",\n options: {\n fallbackPlacements: [\"top-start\", \"top-end\", \"bottom-end\"],\n rootBoundary: \"viewport\",\n },\n },\n ],\n });\n }\n };\n\n render() {\n return (\n <Host\n class={{\n [\"ic-popover-menu-open\"]: !!this.open,\n [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n }}\n >\n <div\n id={\n this.parentPopover === undefined\n ? `ic-popover-submenu-${this.submenuId}`\n : \"\"\n }\n class={{\n menu: true,\n }}\n >\n <span\n class={{\n \"opening-from-parent\": this.openingFromParent,\n \"opening-from-child\": this.openingFromChild,\n }}\n >\n {isPropDefined(this.submenuId) && (\n <span>\n <span role=\"menu\">\n <ic-menu-item\n class=\"ic-popover-submenu-back-button\"\n ref={(el) => (this.backButton = el)}\n label=\"Back\"\n onClick={this.handleBackButtonClick}\n id={`ic-popover-submenu-back-button-${this.submenuLevel}`}\n >\n <svg\n slot=\"icon\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"submenu-back-icon\"\n >\n <path\n d=\"M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z\"\n fill=\"currentColor\"\n />\n </svg>\n </ic-menu-item>\n </span>\n <ic-typography variant=\"subtitle-small\" class=\"parent-label\">\n {this.parentLabel}\n </ic-typography>\n </span>\n )}\n <ul class=\"button\" aria-label={this.getMenuAriaLabel()} role=\"menu\">\n <slot></slot>\n </ul>\n </span>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}