npm - @ukic/web-components - Versions diffs - 2.8.0 → 2.9.0 - Mend

@ukic/web-components 2.8.0 → 2.9.0

Files changed (1070) hide show

package/dist/esm/ic-navigation-item.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-navigation-item.entry.js","mappings":"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","names":["chevronIcon"],"sources":["src/components/ic-navigation-item/ic-navigation-item.css?tag=ic-navigation-item&encapsulation=shadow","src/components/ic-navigation-item/ic-navigation-item.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/*\n @prop --ic-z-index-navigation-item: z-index of navigation item\n /\n\n:host {\n display: block;\n}\n\n:host(:focus-within) {\n z-index: var(--ic-z-index-navigation-item);\n}\n\n/ chevron /\nsvg {\n width: var(--ic-space-xl);\n fill: var(--ic-theme-text);\n}\n\n.svg {\n margin-left: auto;\n}\n\n.chevron-container svg,\n.chevron-container .svg {\n width: var(--ic-space-lg);\n height: var(--ic-space-lg);\n}\n\n.chevron-container {\n flex-grow: 1;\n}\n\n:host(.expandable.navigation-item) .link,\n:host(.expandable.navigation-item) ::slotted(a) {\n padding-right: 0;\n}\n\n:host(.navigation-item) .link,\n:host(.navigation-item) ::slotted(a) {\n height: calc(100% - var(--ic-space-xxs));\n width: fit-content;\n color: var(--ic-theme-text);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 var(--ic-space-md) var(--ic-space-xxs);\n text-decoration: none;\n transition: var(--ic-easing-transition-fast);\n position: relative;\n white-space: nowrap;\n}\n\n:host(.navigation-item) ::slotted(a) {\n height: 100%;\n font: var(--ic-font-label) !important;\n letter-spacing: var(--ic-font-letter-spacing-0pt025) !important;\n padding: 0 var(--ic-space-md) !important;\n}\n\n:host(.navigation-item-selected) .link::after,\n:host(.navigation-item-selected) ::slotted(a.active)::after,\n:host(.navigation-item-top-nav) ::slotted(a.active)::after {\n content: \"\";\n height: 0.25rem;\n width: 100%;\n position: absolute;\n bottom: 0;\n background-color: var(--ic-theme-text);\n}\n\n:host(.navigation-item-selected.navigation-item-page-header)\n ::slotted(a.active)::after,\n:host(.navigation-item-selected.navigation-item-page-header) .link::after,\n:host(.navigation-item.navigation-item-page-header) ::slotted(a.active)::after,\n:host(.navigation-item-top-nav-child) ::slotted(a.active)::after {\n content: none;\n}\n\n:host(.navigation-item-side-menu-selected) .link,\n:host(.navigation-item-side-menu) ::slotted(a.active),\n:host(.navigation-item-top-nav-child) ::slotted(a.active) {\n box-shadow: none;\n}\n\n:host(.navigation-item) .link:hover:not(:focus) {\n background-color: var(--ic-theme-hover);\n cursor: pointer;\n}\n\n:host(.navigation-item:not(.navigation-item-page-header, .navigation-item-side-menu))\n ::slotted(a:hover:not(:focus)) {\n background-color: var(--ic-theme-hover) !important;\n}\n\n:host(.navigation-item:not(.navigation-item-top-nav-child, .navigation-item-side-menu, .navigation-item-top-nav-child-selected\n .navigation-item-side-menu-selected))\n .focus-indicator:focus-within {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n}\n\n:host(.navigation-item) .link:focus,\n:host(.navigation-item) ::slotted(a:focus) {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n outline: var(--ic-hc-focus-outline);\n}\n\n:host(.navigation-item-selected) .link:focus,\n:host(.navigation-item) ::slotted(a.active:focus) {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n outline: var(--ic-hc-focus-outline);\n}\n\n:host(.navigation-item-selected.dark) .link:focus,\n:host(.navigation-item.dark) ::slotted(a.active:focus) {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n outline: var(--ic-hc-focus-outline);\n}\n\n:host(.navigation-item) .link:active:not(:focus),\n:host(.navigation-item) ::slotted(a:active:not(:focus)) {\n background-color: var(--ic-theme-active);\n}\n\n:host(.navigation-item-side-menu) .link,\n:host(.navigation-item-side-menu) ::slotted(a) {\n min-height: 2.5rem;\n width: 100%;\n box-sizing: border-box;\n color: var(--ic-color-primary-text);\n display: flex;\n align-items: center;\n justify-content: flex-start;\n text-decoration: none;\n text-wrap: wrap;\n white-space: normal;\n transition: box-shadow var(--ic-transition-duration-fast),\n border-radius var(--ic-transition-duration-fast);\n}\n\n:host(.navigation-item-side-menu) ::slotted(a) {\n font: var(--ic-font-body) !important;\n letter-spacing: var(--ic-font-letter-spacing-0pt005) !important;\n transition: box-shadow var(--ic-easing-transition-fast),\n background-color var(--ic-easing-transition-fast);\n}\n\n:host(.navigation-item-side-menu) .link:hover:not(:focus) {\n background-color: var(--ic-action-dark-bg-hover);\n}\n\n:host(.navigation-item-side-menu) ::slotted(a:hover:not(:focus)) {\n background-color: var(--ic-action-dark-bg-hover) !important;\n}\n\n:host(.navigation-item-side-menu) .focus-indicator:focus-within {\n box-shadow: none;\n}\n\n:host(.navigation-item-side-menu) .link:focus,\n:host(.navigation-item-side-menu) ::slotted(a:focus) {\n box-shadow: var(--ic-border-focus-inset) !important;\n width: auto;\n border-radius: var(--ic-border-radius-inset) !important;\n}\n\n:host(.navigation-item-side-menu-selected) .link,\n:host(.navigation-item-side-menu-selected) ::slotted(a) {\n transition: box-shadow var(--ic-easing-transition-slow),\n background-color var(--ic-easing-transition-slow);\n}\n\n:host(.navigation-item-side-menu-selected) .link:focus,\n:host(.navigation-item-side-menu) ::slotted(a.active:focus),\n:host(.navigation-item-top-nav-child) ::slotted(a.active:focus) {\n margin-left: var(--ic-space-xs) !important;\n padding-left: var(--ic-space-xs) !important;\n}\n\n:host(.navigation-item-top-nav-child) .link,\n:host(.navigation-item-top-nav-child) ::slotted(a) {\n height: 2.5rem;\n width: fit-content;\n min-width: 9.063rem;\n color: var(--ic-color-primary-text);\n display: flex;\n align-items: center;\n justify-content: flex-start;\n padding: 0 var(--ic-space-md) !important;\n text-decoration: none;\n position: relative;\n transition: box-shadow var(--ic-transition-duration-fast),\n border-radius var(--ic-transition-duration-slow);\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a) {\n font: var(--ic-font-body) !important;\n letter-spacing: var(--ic-font-letter-spacing-0pt005) !important;\n}\n\n:host(.navigation-item-top-nav-child) .link:hover:not(:focus) {\n background-color: var(--ic-action-dark-bg-hover) !important;\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a:hover):not(:focus) {\n background-color: var(--ic-action-dark-bg-hover) !important;\n}\n\n:host(.navigation-item-top-nav-child) .link:focus,\n:host(.navigation-item-top-nav-child) ::slotted(a:focus) {\n z-index: 1;\n outline: var(--ic-hc-focus-outline);\n border-radius: var(--ic-border-radius-inset);\n box-shadow: var(--ic-border-focus-inset);\n transition: border-radius 0s, box-shadow var(--ic-transition-duration-fast);\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a.active:focus) {\n box-shadow: var(--ic-border-focus-inset);\n border-radius: var(--ic-border-radius-inset);\n}\n\n:host(.navigation-item-side-menu) .link:active:not(:focus) {\n background-color: var(--ic-action-dark-bg-active);\n}\n\n:host(.navigation-item-top-nav-child) .link:active:not(:focus),\n:host(.navigation-item-top-nav-child) ::slotted(a:active):not(:focus) {\n outline: var(--ic-hc-focus-outline);\n background-color: var(--ic-action-dark-bg-active);\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a:active):not(:focus),\n:host(.navigation-item-side-menu) ::slotted(a:active):not(:focus) {\n background-color: var(--ic-action-dark-bg-active) !important;\n}\n\n:host(.navigation-item-side-menu-selected) ,\n:host(.navigation-item-top-nav-child-selected) ,\n:host(.navigation-item-side-menu) ::slotted(a.active),\n:host(.navigation-item-top-nav-child) ::slotted(a.active) {\n font-weight: 700 !important;\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a.active)::before,\n:host(.navigation-item-top-nav-child-selected) .link::before,\n:host(.navigation-item-side-menu-selected) .link::before,\n:host(.navigation-item-side-menu) ::slotted(a.active)::before,\n:host(.navigation-item-side-menu-selected) .link:focus::before,\n:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before {\n content: \"\";\n position: absolute;\n left: 0;\n width: var(--ic-space-xs);\n height: inherit;\n min-height: 2.5rem;\n background-color: var(--ic-action-default);\n transition: left 0s;\n}\n\n:host(.navigation-item-top-nav-child-selected) .link::before,\n:host(.navigation-item-side-menu-selected) .link::before,\n:host(.navigation-item-side-menu-selected) .link:focus::before {\n margin-top: 0.25rem;\n}\n\n:host(.navigation-item-top-nav-child-selected) .link:focus {\n margin-left: var(--ic-space-xs);\n margin-right: calc(-1 var(--ic-space-xs));\n padding-left: var(--ic-space-xs) !important;\n}\n\n:host(.navigation-item-top-nav-child-selected) .link:focus::before {\n left: calc(-1 * var(--ic-space-xs));\n z-index: 1;\n}\n\n:host(.navigation-item-side-menu-selected) .link::before,\n:host(.navigation-item-side-menu) ::slotted(a.active)::before,\n:host(.navigation-item-side-menu-selected) .link:focus::before,\n:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before {\n z-index: 1;\n}\n\n:host(.navigation-item-side-menu-selected) .link:focus::before,\n:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before,\n:host(.navigation-item-top-nav-child) ::slotted(a.active:focus)::before {\n left: calc(-1 * var(--ic-space-xs));\n}\n\n:host(.navigation-item-side-menu-selected) .link::after {\n display: none;\n}\n\n:host(.navigation-item-side-nav-collapsed) .link {\n height: 100%;\n}\n\n:host(.navigation-item-side-nav-collapsed) ::slotted(svg),\n:host(.navigation-item-side-nav-collapsed-with-label) ::slotted(svg) {\n margin: auto;\n pointer-events: none;\n}\n\n:host(.navigation-item-side-nav-collapsed) .icon,\n:host(.navigation-item-side-nav-collapsed-with-label) .icon,\n:host(.navigation-item-side-nav-collapsed-with-label) ic-typography {\n align-items: center;\n padding: 0;\n margin: auto 0;\n width: fit-content;\n pointer-events: none;\n}\n\n:host(.navigation-item-side-nav-collapsed-with-label) ic-typography {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 100%;\n text-align: center;\n}\n\n:host(.navigation-item-side-nav-collapsed-with-label) .link,\n:host(.navigation-item-side-nav-collapsed-with-label) ::slotted(a) {\n display: flex;\n flex-direction: column;\n height: fit-content;\n padding: var(--ic-space-xs) !important;\n gap: var(--ic-space-xxs);\n}\n\n:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label)\n .link,\n:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label)\n ::slotted(a) {\n height: auto !important;\n gap: 0;\n width: auto;\n padding: var(--ic-space-xs) !important;\n}\n\n:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label)\n ::slotted(a) {\n display: block;\n text-align: center;\n}\n\n:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label)\n .link\n ic-typography {\n opacity: 1;\n min-width: min-content;\n}\n\n:host(.navigation-item-side-nav-collapsed) svg,\n:host(.navigation-item-side-nav-collapsed-with-label) svg {\n display: none;\n}\n\n::slotted(svg) {\n fill: var(--ic-theme-text);\n width: var(--ic-space-lg);\n margin-left: var(--ic-space-md);\n}\n\n.icon {\n height: var(--ic-space-lg);\n width: var(--ic-space-xxl);\n margin-left: calc(-1 * var(--ic-space-md));\n flex: 0 1 0%;\n position: relative;\n}\n\n.icon > ::slotted() {\n margin-left: var(--ic-space-md) !important;\n}\n\n:host(.navigation-item-side-nav-collapsed) .icon > ::slotted() {\n margin: auto !important;\n}\n\n:host(.navigation-item-side-nav) .link,\n:host(.navigation-item-side-nav) ::slotted(a) {\n height: var(--navigation-item-height, 56px);\n min-height: var(--navigation-item-min-height);\n width: var(--navigation-item-width, auto);\n justify-content: var(--navigation-item-justify-content);\n display: flex;\n gap: var(--ic-space-xs);\n box-sizing: border-box;\n color: var(--navigation-item-child-color) !important;\n text-decoration: none !important;\n white-space: nowrap;\n padding-top: var(--ic-space-md) !important;\n padding-bottom: var(--ic-space-md) !important;\n text-wrap: wrap;\n}\n\n:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link,\n:host(.navigation-item-side-nav.navigation-item-top-nav-child) ::slotted(a) {\n height: var(--navigation-item-child-height);\n width: var(--navigation-group-width);\n color: var(--navigation-item-child-color) !important;\n display: flex;\n gap: 0.625rem;\n box-sizing: border-box;\n min-width: 0;\n transition: box-shadow var(--ic-easing-transition-fast);\n text-decoration: none !important;\n white-space: nowrap;\n}\n\n:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link:focus,\n:host(.navigation-item-side-nav.navigation-item-top-nav-child)\n ::slotted(a:focus) {\n box-shadow: var(--ic-border-focus-dark);\n}\n\n:host(.navigation-item-side-nav.navigation-item-side-menu) .link:active {\n background-color: var(--navigation-item-child-active);\n}\n\n:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link:active,\n:host(.navigation-item-side-nav.navigation-item-top-nav-child)\n ::slotted(a:active) {\n background-color: var(--navigation-item-child-active);\n}\n\n:host(.navigation-item-side-nav) a.link ic-typography,\n:host(.navigation-item-side-nav.navigation-item-top-nav-child)\n a.link\n ic-typography,\n:host(.navigation-item-side-nav) div.link ic-typography,\n:host(.navigation-item-side-nav.navigation-item-top-nav-child)\n div.link\n ic-typography,\n.navigation-item-side-nav-slotted-text {\n opacity: var(--navigation-item-label-opacity);\n transition: opacity var(--ic-easing-transition-slow);\n white-space: wrap;\n text-overflow: ellipsis;\n overflow: hidden;\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link,\n:host(.navigation-item-side-nav.navigation-item) ::slotted(a.active) {\n box-shadow: inset 0.313rem 0 0 var(--ic-theme-text);\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link::before,\n:host(.navigation-item-side-nav) ::slotted(a.active)::before {\n content: \"\";\n display: block;\n position: absolute;\n inset: 0 0 0 0.313rem;\n border-radius: 0.688rem !important;\n transition: var(--ic-easing-transition-slow);\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link:focus::before,\n:host(.navigation-item-side-nav) ::slotted(a.active:focus)::before {\n box-shadow: var(--ic-border-focus-inset);\n}\n\n:host(:not(.navigation-item-side-nav-collapsed).navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label)\n .link {\n opacity: var(--navigation-item-label-opacity);\n height: auto;\n}\n\n:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label)\n .link,\n:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label)\n ::slotted(a) {\n min-width: var(--navigation-group-item-min-width);\n padding: var(--ic-space-xs) !important;\n height: auto;\n gap: 0;\n}\n\n:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label)\n ::slotted(a) {\n display: block;\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link::after,\n:host(.navigation-item-side-nav) ::slotted(a.active)::after {\n display: none;\n}\n\n:host(.navigation-item-side-nav.navigation-item) .link:focus,\n:host(.navigation-item-side-nav.navigation-item) ::slotted(a:focus) {\n box-shadow: var(--ic-border-focus-inset);\n border-radius: var(--ic-border-radius-inset);\n background-color: transparent;\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link:focus,\n:host(.navigation-item-side-nav) ::slotted(a.active:focus) {\n margin: 0 auto;\n box-shadow: inset 0.313rem 0 0 var(--ic-theme-text);\n border-radius: 0;\n}\n\n:host(.navigation-item-side-nav.navigation-item) .link:hover:not(:focus) {\n background-color: var(--ic-theme-hover) !important;\n}\n\n:host(.navigation-item-page-header).link,\n:host(.navigation-item-page-header) a,\n:host(.navigation-item-page-header) ::slotted(a) {\n height: 2.5rem !important;\n color: var(--ic-color-primary-text) !important;\n transition: all var(--ic-easing-transition-fast) !important;\n box-shadow: rgba(23 89 188 / 0%) !important;\n}\n\n:host(.navigation-item-page-header.navigation-item-selected) .link::after,\n:host(.navigation-item-page-header) ::slotted(a.active)::after {\n content: \" \" !important;\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: var(--ic-space-xxs);\n background-color: var(--ic-action-default) !important;\n}\n\n:host(.navigation-item-page-header) .link:hover,\n:host(.navigation-item-page-header) ::slotted(.link:hover),\n:host(.navigation-item-page-header) ::slotted(a:hover),\n:host(.navigation-item-page-header) .link:hover:not(:focus) {\n background-color: var(--ic-action-default-bg-hover) !important;\n cursor: pointer;\n}\n\n:host(.navigation-item-page-header) .link:focus,\n:host(.navigation-item-page-header) ::slotted(a:focus) {\n box-shadow: var(--ic-border-focus);\n}\n\n:host(.navigation-item-page-header) .link:active,\n:host(.navigation-item-page-header) ::slotted(a:active) {\n background-color: var(--ic-action-default-bg-active) !important;\n}\n\n:host(.navigation-item-page-header.navigation-item-selected) .link:focus::after,\n:host(.navigation-item-page-header) ::slotted(a.active:focus)::after {\n border-bottom-left-radius: var(--ic-border-radius);\n border-bottom-right-radius: var(--ic-border-radius);\n}\n\n:host(.navigation-item-page-header.navigation-item-selected.with-transition)\n .link,\n:host(.navigation-item-page-header.navigation-item-selected.with-transition)\n ::slotted(a.active) {\n transition: all var(--ic-easing-transition-fast),\n border-color var(--ic-transition-duration-fast);\n}\n\n:host(.navigation-item-page-header) ::slotted(a.active)::before,\n:host(.navigation-item-page-header) ::slotted(a.active:focus)::before,\n:host(.navigation-item-page-header.navigation-item-selected)\n .link:focus::before {\n display: none;\n}\n\n.open-in-new-icon {\n flex: 1;\n}\n\n.open-in-new-icon svg {\n margin-top: var(--ic-space-xxs);\n padding-left: var(--ic-space-xxs);\n}\n\n:host(.navigation-item-side-nav) .open-in-new-icon {\n margin-left: calc(-1 * var(--ic-space-xs));\n}\n\n:host(.navigation-item-top-nav) .open-in-new-icon svg,\n:host(.navigation-item-page-header) .open-in-new-icon svg,\n:host(.navigation-item-side-nav) .open-in-new-icon svg {\n height: 0.875rem;\n width: 0.875rem;\n}\n\n:host(.navigation-item-side-menu) .open-in-new-icon svg,\n:host(.navigation-item-top-nav-child) .open-in-new-icon svg {\n height: var(--ic-space-md);\n width: var(--ic-space-md);\n}\n\n:host(.navigation-item-page-header) .open-in-new-icon svg,\n:host(.navigation-item-top-nav-child) .open-in-new-icon svg,\n:host(.navigation-item-side-menu) .open-in-new-icon svg {\n fill: var(--ic-color-primary-text);\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Listen,\n Method,\n h,\n Host,\n Prop,\n State,\n} from \"@stencil/core\";\n\nimport {\n DEVICE_SIZES,\n getCurrentDeviceSize,\n getThemeForegroundColor,\n getParentElementType,\n getNavItemParentDetails,\n isSlotUsed,\n} from \"../../utils/helpers\";\nimport { IcNavType, IcTheme } from \"../../utils/types\";\n\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\n\nimport OpenInNew from \"../../assets/OpenInNew.svg\";\n\n/*\n @part link - The `<a>` within ic-navigation-item\n * @slot badge - Badge component overlaying the top right of the icon.\n /\n\n@Component({\n tag: \"ic-navigation-item\",\n styleUrl: \"ic-navigation-item.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class NavigationItem {\n private navigationSlot: HTMLElement;\n private isInitialRender: boolean = true;\n private itemEl: HTMLElement;\n\n @Element() el: HTMLIcNavigationItemElement;\n\n @State() deviceSize: number = DEVICE_SIZES.XL;\n @State() focusStyle = getThemeForegroundColor();\n @State() inTopNavSideMenu: boolean = false;\n @State() isSideNavMobile: boolean = false;\n @State() isTopNavChild: boolean = false;\n @State() navigationType: IcNavType \| \"\";\n @State() parentEl: HTMLElement;\n @State() sideNavExpanded: boolean = false;\n\n /\n @internal If `true`, the icon and label will be displayed when side navigation is collapsed.\n /\n @Prop() collapsedIconLabel: boolean = false;\n\n /\n @internal If `true`, the navigation item will be displayed within a tooltip.\n /\n @Prop() displayNavigationTooltip: boolean = false;\n\n /\n If `true`, the user can save the linked URL instead of navigating to it.\n /\n @Prop() download?: string \| boolean = false;\n\n /\n @internal If `true`, the navigation item will be expandable.\n /\n @Prop() expandable: boolean = false;\n\n /\n The destination of the navigation item.\n /\n @Prop() href: string = \"\";\n\n /\n The human language of the linked URL.\n /\n @Prop() hreflang?: string;\n\n /\n The label of the navigation item.\n /\n @Prop() label: string;\n\n /\n The relationship of the linked URL as space-separated link types.\n /\n @Prop() rel?: string;\n\n /\n How much of the referrer to send when following the link.\n /\n @Prop() referrerpolicy?: ReferrerPolicy;\n\n /\n If `true`, the navigation item will be set in a selected state.\n /\n @Prop() selected: boolean = false;\n\n /\n The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n /\n @Prop() target?: string;\n\n /\n @internal - Emitted when item loses focus.\n /\n @Event() childBlur: EventEmitter<void>;\n\n /\n @internal - Emitted when navigation item clicked.\n /\n @Event() navItemClicked: EventEmitter<void>;\n\n disconnectedCallback(): void {\n if (this.navigationType === \"side\") {\n this.parentEl.removeEventListener(\n \"sideNavExpanded\",\n this.sideNavExpandHandler\n );\n } else if (this.navigationType === \"top\") {\n this.parentEl.removeEventListener(\n \"topNavResized\",\n this.topNavResizedHandler\n );\n }\n }\n\n componentWillLoad(): void {\n const navParentDetails = getNavItemParentDetails(this.el);\n this.navigationType = navParentDetails.navType;\n this.parentEl = navParentDetails.parent;\n\n if (this.navigationType === \"side\") {\n this.parentEl.addEventListener(\n \"sideNavExpanded\",\n this.sideNavExpandHandler\n );\n } else if (this.navigationType === \"top\") {\n this.parentEl.addEventListener(\n \"topNavResized\",\n this.topNavResizedHandler\n );\n }\n\n if (\n getParentElementType(this.el) === \"IC-NAVIGATION-GROUP\" &&\n this.navigationType === \"top\"\n ) {\n this.isTopNavChild = true;\n }\n\n this.deviceSize = getCurrentDeviceSize();\n if (this.deviceSize <= DEVICE_SIZES.L && this.navigationType === \"top\") {\n this.inTopNavSideMenu = true;\n }\n\n this.navigationSlot = this.el.querySelector('[slot=\"navigation-item\"]');\n if (this.navigationSlot) {\n this.navigationSlot.ariaLabel = this.navigationSlot.textContent.trim();\n }\n }\n\n componentDidUpdate(): void {\n this.isInitialRender = false;\n }\n\n @Listen(\"themeChange\", { target: \"document\" })\n themeChangeHandler(ev: CustomEvent): void {\n const theme: IcTheme = ev.detail;\n this.focusStyle = theme.mode;\n }\n\n /\n Sets focus on the nav item.\n /\n @Method()\n async setFocus(): Promise<void> {\n if (this.itemEl) {\n this.itemEl.focus();\n }\n }\n\n private displayDefaultNavigationItem = (\n href: string,\n hreflang: string,\n target: string,\n rel: string,\n referrerpolicy: ReferrerPolicy,\n download: string \| boolean,\n label: string\n ): HTMLElement => {\n const variant =\n this.isTopNavChild \|\| this.inTopNavSideMenu ? \"body\" : \"label\";\n const ChevronIconComponent = this.expandable && (\n <div class={{ svg: true }} innerHTML={chevronIcon}></div>\n );\n const IconComponent = this.el.querySelector('[slot=\"icon\"]') && (\n <div class=\"icon\">\n <slot name=\"icon\"></slot>\n {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n </div>\n );\n\n if (href !== \"\") {\n return (\n <a\n href={href}\n target={target}\n rel={rel}\n hreflang={hreflang}\n referrerPolicy={referrerpolicy}\n download={download !== false ? download : null}\n class=\"link\"\n ref={(el) => (this.itemEl = el)}\n part=\"link\"\n >\n {IconComponent}\n\n <ic-typography variant={variant}>{label}</ic-typography>\n <div class=\"chevron-container\">{ChevronIconComponent}</div>\n {target === \"_blank\" && (\n <span class=\"open-in-new-icon\" innerHTML={OpenInNew} />\n )}\n </a>\n );\n }\n\n return (\n <div tabindex=\"0\" class=\"link\" ref={(el) => (this.itemEl = el)}>\n {IconComponent}\n <ic-typography variant={variant}>{label}</ic-typography>\n {ChevronIconComponent}\n </div>\n );\n };\n\n private topNavResizedHandler = (ev: CustomEvent): void => {\n const newSize = ev.detail.size;\n if (newSize !== this.deviceSize) {\n this.deviceSize = newSize;\n this.inTopNavSideMenu = newSize <= DEVICE_SIZES.L;\n }\n };\n\n private sideNavExpandHandler = (ev: CustomEvent): void => {\n const { sideNavExpanded, sideNavMobile } = ev.detail;\n this.sideNavExpanded = sideNavExpanded;\n this.isSideNavMobile = sideNavMobile;\n };\n\n private handleBlur = (ev: FocusEvent) => {\n if (ev.relatedTarget !== null) {\n const target = ev.relatedTarget as HTMLElement;\n if (target.tagName === \"IC-NAVIGATION-ITEM\") {\n return;\n }\n }\n this.childBlur.emit();\n };\n\n private handleClick = () => {\n this.navItemClicked.emit();\n };\n\n private generateTooltipLabel = () => {\n if (this.label) {\n return this.label;\n }\n\n if (this.navigationSlot) {\n return this.navigationSlot.textContent;\n }\n\n if (this.el.children[0]) {\n return this.el.children[0].textContent;\n }\n\n return \"\";\n };\n\n private renderNavigationItemContent = () => {\n if (this.label) {\n return this.displayDefaultNavigationItem(\n this.href,\n this.hreflang,\n this.target,\n this.rel,\n this.referrerpolicy,\n this.download,\n this.label\n );\n }\n\n if (this.navigationSlot) {\n return <slot name=\"navigation-item\"></slot>;\n }\n return <slot></slot>;\n };\n\n render() {\n const { inTopNavSideMenu, isTopNavChild, selected } = this;\n\n return (\n <Host\n class={{\n [\"navigation-item\"]: true,\n [\"navigation-item-top-nav\"]:\n !inTopNavSideMenu && this.navigationType === \"top\",\n [\"navigation-item-top-nav-child-selected\"]:\n isTopNavChild && !inTopNavSideMenu && selected,\n [this.focusStyle]:\n (!inTopNavSideMenu && !isTopNavChild) \|\|\n (this.navigationType === \"side\" && isTopNavChild),\n [\"navigation-item-selected\"]: !isTopNavChild && selected,\n [\"navigation-item-side-menu\"]: inTopNavSideMenu,\n [\"navigation-item-side-menu-selected\"]: inTopNavSideMenu && selected,\n [\"navigation-item-top-nav-child\"]: isTopNavChild && !inTopNavSideMenu,\n [\"navigation-item-page-header\"]:\n this.navigationType === \"page-header\",\n [\"with-transition\"]: !this.isInitialRender,\n [\"navigation-item-side-nav\"]: this.navigationType === \"side\",\n [\"navigation-item-side-nav-collapsed\"]:\n (!this.sideNavExpanded \|\| this.displayNavigationTooltip) &&\n this.navigationType === \"side\",\n [\"navigation-item-side-nav-collapsed-with-label\"]:\n !this.sideNavExpanded &&\n this.navigationType === \"side\" &&\n this.collapsedIconLabel &&\n !this.isSideNavMobile,\n [\"expandable\"]: this.expandable,\n }}\n onBlur={isTopNavChild && !inTopNavSideMenu ? this.handleBlur : null}\n onClick={this.handleClick}\n aria-current={selected ? \"page\" : null}\n role=\"listitem\"\n >\n {/ Tooltip enabled by applying navigation-item-side-nav-collapsed class to host */}\n <ic-tooltip\n label={this.generateTooltipLabel()}\n target=\"navigation-item\"\n placement=\"right\"\n class={{\n [\"tooltip-navigation-item\"]: true,\n [\"tooltip-navigation-item-side-nav-collapsed\"]:\n (!this.sideNavExpanded \|\| this.displayNavigationTooltip) &&\n this.navigationType === \"side\",\n [\"tooltip-long-label-navigation-item-side-nav-expanded\"]:\n this.el.hasAttribute(\"[display-navigation-tooltip = 'true']\"),\n }}\n >\n {this.renderNavigationItemContent()}\n </ic-tooltip>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-navigation-item.entry.js","mappings":"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","names":["chevronIcon"],"sources":["src/components/ic-navigation-item/ic-navigation-item.css?tag=ic-navigation-item&encapsulation=shadow","src/components/ic-navigation-item/ic-navigation-item.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/*\n @prop --ic-z-index-navigation-item: z-index of navigation item\n /\n\n:host {\n display: block;\n}\n\n:host(:focus-within) {\n z-index: var(--ic-z-index-navigation-item);\n}\n\n/ chevron /\nsvg {\n width: var(--ic-space-xl);\n fill: var(--ic-theme-text);\n}\n\n.svg {\n margin-left: auto;\n}\n\n.chevron-container svg,\n.chevron-container .svg {\n width: var(--ic-space-lg);\n height: var(--ic-space-lg);\n}\n\n.chevron-container {\n flex-grow: 1;\n}\n\n:host(.expandable.navigation-item) .link,\n:host(.expandable.navigation-item) ::slotted(a) {\n padding-right: 0;\n}\n\n:host(.navigation-item) .link,\n:host(.navigation-item) ::slotted(a) {\n height: calc(100% - var(--ic-space-xxs));\n width: fit-content;\n color: var(--ic-theme-text);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 var(--ic-space-md) var(--ic-space-xxs);\n text-decoration: none;\n transition: var(--ic-easing-transition-fast);\n position: relative;\n white-space: nowrap;\n}\n\n:host(.navigation-item) ::slotted(a) {\n height: 100%;\n font: var(--ic-font-label) !important;\n letter-spacing: var(--ic-font-letter-spacing-0pt025) !important;\n padding: 0 var(--ic-space-md) !important;\n}\n\n:host(.navigation-item-selected) .link::after,\n:host(.navigation-item-selected) ::slotted(a.active)::after,\n:host(.navigation-item-top-nav) ::slotted(a.active)::after {\n content: \"\";\n height: 0.25rem;\n width: 100%;\n position: absolute;\n bottom: 0;\n background-color: var(--ic-theme-text);\n}\n\n:host(.navigation-item-selected.navigation-item-page-header)\n ::slotted(a.active)::after,\n:host(.navigation-item-selected.navigation-item-page-header) .link::after,\n:host(.navigation-item.navigation-item-page-header) ::slotted(a.active)::after,\n:host(.navigation-item-top-nav-child) ::slotted(a.active)::after {\n content: none;\n}\n\n:host(.navigation-item-side-menu-selected) .link,\n:host(.navigation-item-side-menu) ::slotted(a.active),\n:host(.navigation-item-top-nav-child) ::slotted(a.active) {\n box-shadow: none;\n}\n\n:host(.navigation-item) .link:hover:not(:focus) {\n background-color: var(--ic-theme-hover);\n cursor: pointer;\n}\n\n:host(.navigation-item:not(.navigation-item-page-header, .navigation-item-side-menu))\n ::slotted(a:hover:not(:focus)) {\n background-color: var(--ic-theme-hover) !important;\n}\n\n:host(.navigation-item:not(.navigation-item-top-nav-child, .navigation-item-side-menu, .navigation-item-top-nav-child-selected\n .navigation-item-side-menu-selected))\n .focus-indicator:focus-within {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n}\n\n:host(.navigation-item) .link:focus,\n:host(.navigation-item) ::slotted(a:focus) {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n outline: var(--ic-hc-focus-outline);\n}\n\n:host(.navigation-item-selected) .link:focus,\n:host(.navigation-item) ::slotted(a.active:focus) {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n outline: var(--ic-hc-focus-outline);\n}\n\n:host(.navigation-item-selected.dark) .link:focus,\n:host(.navigation-item.dark) ::slotted(a.active:focus) {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n outline: var(--ic-hc-focus-outline);\n}\n\n:host(.navigation-item) .link:active:not(:focus),\n:host(.navigation-item) ::slotted(a:active:not(:focus)) {\n background-color: var(--ic-theme-active);\n}\n\n:host(.navigation-item-side-menu) .link,\n:host(.navigation-item-side-menu) ::slotted(a) {\n min-height: 2.5rem;\n width: 100%;\n box-sizing: border-box;\n color: var(--ic-color-primary-text);\n display: flex;\n align-items: center;\n justify-content: flex-start;\n text-decoration: none;\n text-wrap: wrap;\n white-space: normal;\n transition: box-shadow var(--ic-transition-duration-fast),\n border-radius var(--ic-transition-duration-fast);\n}\n\n:host(.navigation-item-side-menu) ::slotted(a) {\n font: var(--ic-font-body) !important;\n letter-spacing: var(--ic-font-letter-spacing-0pt005) !important;\n transition: box-shadow var(--ic-easing-transition-fast),\n background-color var(--ic-easing-transition-fast);\n}\n\n:host(.navigation-item-side-menu) .link:hover:not(:focus) {\n background-color: var(--ic-action-dark-bg-hover);\n}\n\n:host(.navigation-item-side-menu) ::slotted(a:hover:not(:focus)) {\n background-color: var(--ic-action-dark-bg-hover) !important;\n}\n\n:host(.navigation-item-side-menu) .focus-indicator:focus-within {\n box-shadow: none;\n}\n\n:host(.navigation-item-side-menu) .link:focus,\n:host(.navigation-item-side-menu) ::slotted(a:focus) {\n box-shadow: var(--ic-border-focus-inset) !important;\n width: auto;\n border-radius: var(--ic-border-radius-inset) !important;\n}\n\n:host(.navigation-item-side-menu-selected) .link,\n:host(.navigation-item-side-menu-selected) ::slotted(a) {\n transition: box-shadow var(--ic-easing-transition-slow),\n background-color var(--ic-easing-transition-slow);\n}\n\n:host(.navigation-item-side-menu-selected) .link:focus,\n:host(.navigation-item-side-menu) ::slotted(a.active:focus),\n:host(.navigation-item-top-nav-child) ::slotted(a.active:focus) {\n margin-left: var(--ic-space-xs) !important;\n padding-left: var(--ic-space-xs) !important;\n}\n\n:host(.navigation-item-top-nav-child) .link,\n:host(.navigation-item-top-nav-child) ::slotted(a) {\n height: 2.5rem;\n width: fit-content;\n min-width: 9.063rem;\n color: var(--ic-color-primary-text);\n display: flex;\n align-items: center;\n justify-content: flex-start;\n padding: 0 var(--ic-space-md) !important;\n text-decoration: none;\n position: relative;\n transition: box-shadow var(--ic-transition-duration-fast),\n border-radius var(--ic-transition-duration-slow);\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a) {\n font: var(--ic-font-body) !important;\n letter-spacing: var(--ic-font-letter-spacing-0pt005) !important;\n}\n\n:host(.navigation-item-top-nav-child) .link:hover:not(:focus) {\n background-color: var(--ic-action-dark-bg-hover) !important;\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a:hover):not(:focus) {\n background-color: var(--ic-action-dark-bg-hover) !important;\n}\n\n:host(.navigation-item-top-nav-child) .link:focus,\n:host(.navigation-item-top-nav-child) ::slotted(a:focus) {\n z-index: 1;\n outline: var(--ic-hc-focus-outline);\n border-radius: var(--ic-border-radius-inset);\n box-shadow: var(--ic-border-focus-inset);\n transition: border-radius 0s, box-shadow var(--ic-transition-duration-fast);\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a.active:focus) {\n box-shadow: var(--ic-border-focus-inset);\n border-radius: var(--ic-border-radius-inset);\n}\n\n:host(.navigation-item-side-menu) .link:active:not(:focus) {\n background-color: var(--ic-action-dark-bg-active);\n}\n\n:host(.navigation-item-top-nav-child) .link:active:not(:focus),\n:host(.navigation-item-top-nav-child) ::slotted(a:active):not(:focus) {\n outline: var(--ic-hc-focus-outline);\n background-color: var(--ic-action-dark-bg-active);\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a:active):not(:focus),\n:host(.navigation-item-side-menu) ::slotted(a:active):not(:focus) {\n background-color: var(--ic-action-dark-bg-active) !important;\n}\n\n:host(.navigation-item-side-menu-selected) ,\n:host(.navigation-item-top-nav-child-selected) ,\n:host(.navigation-item-side-menu) ::slotted(a.active),\n:host(.navigation-item-top-nav-child) ::slotted(a.active) {\n font-weight: 700 !important;\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a.active)::before,\n:host(.navigation-item-top-nav-child-selected) .link::before,\n:host(.navigation-item-side-menu-selected) .link::before,\n:host(.navigation-item-side-menu) ::slotted(a.active)::before,\n:host(.navigation-item-side-menu-selected) .link:focus::before,\n:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before {\n content: \"\";\n position: absolute;\n left: 0;\n width: var(--ic-space-xs);\n height: inherit;\n min-height: 2.5rem;\n background-color: var(--ic-action-default);\n transition: left 0s;\n}\n\n:host(.navigation-item-top-nav-child-selected) .link::before,\n:host(.navigation-item-side-menu-selected) .link::before,\n:host(.navigation-item-side-menu-selected) .link:focus::before {\n margin-top: 0.25rem;\n}\n\n:host(.navigation-item-top-nav-child-selected) .link:focus {\n margin-left: var(--ic-space-xs);\n margin-right: calc(-1 var(--ic-space-xs));\n padding-left: var(--ic-space-xs) !important;\n}\n\n:host(.navigation-item-top-nav-child-selected) .link:focus::before {\n left: calc(-1 * var(--ic-space-xs));\n z-index: 1;\n}\n\n:host(.navigation-item-side-menu-selected) .link::before,\n:host(.navigation-item-side-menu) ::slotted(a.active)::before,\n:host(.navigation-item-side-menu-selected) .link:focus::before,\n:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before {\n z-index: 1;\n}\n\n:host(.navigation-item-side-menu-selected) .link:focus::before,\n:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before,\n:host(.navigation-item-top-nav-child) ::slotted(a.active:focus)::before {\n left: calc(-1 * var(--ic-space-xs));\n}\n\n:host(.navigation-item-side-menu-selected) .link::after {\n display: none;\n}\n\n:host(.navigation-item-side-nav-collapsed) .link {\n height: 100%;\n}\n\n:host(.navigation-item-side-nav-collapsed) ::slotted(svg),\n:host(.navigation-item-side-nav-collapsed-with-label) ::slotted(svg) {\n margin: auto;\n pointer-events: none;\n}\n\n:host(.navigation-item-side-nav-collapsed) .icon,\n:host(.navigation-item-side-nav-collapsed-with-label) .icon,\n:host(.navigation-item-side-nav-collapsed-with-label) ic-typography {\n align-items: center;\n padding: 0;\n margin: auto 0;\n width: fit-content;\n pointer-events: none;\n}\n\n:host(.navigation-item-side-nav-collapsed-with-label) ic-typography {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 100%;\n text-align: center;\n}\n\n:host(.navigation-item-side-nav-collapsed-with-label) .link,\n:host(.navigation-item-side-nav-collapsed-with-label) ::slotted(a) {\n display: flex;\n flex-direction: column;\n height: fit-content;\n padding: var(--ic-space-xs) !important;\n gap: var(--ic-space-xxs);\n}\n\n:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label)\n .link,\n:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label)\n ::slotted(a) {\n height: auto !important;\n gap: 0;\n width: auto;\n padding: var(--ic-space-xs) !important;\n}\n\n:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label)\n ::slotted(a) {\n display: block;\n text-align: center;\n}\n\n:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label)\n .link\n ic-typography {\n opacity: 1;\n min-width: min-content;\n}\n\n:host(.navigation-item-side-nav-collapsed) svg,\n:host(.navigation-item-side-nav-collapsed-with-label) svg {\n display: none;\n}\n\n::slotted(svg) {\n fill: var(--ic-theme-text);\n width: var(--ic-space-lg);\n margin-left: var(--ic-space-md);\n}\n\n.icon {\n height: var(--ic-space-lg);\n width: var(--ic-space-xxl);\n margin-left: calc(-1 * var(--ic-space-md));\n flex: 0 1 0%;\n position: relative;\n}\n\n.icon > ::slotted() {\n margin-left: var(--ic-space-md) !important;\n}\n\n:host(.navigation-item-side-nav-collapsed) .icon > ::slotted() {\n margin: auto !important;\n}\n\n:host(.navigation-item-side-nav) .link,\n:host(.navigation-item-side-nav) ::slotted(a) {\n height: var(--navigation-item-height, 56px);\n min-height: var(--navigation-item-min-height);\n width: var(--navigation-item-width, auto);\n justify-content: var(--navigation-item-justify-content);\n display: flex;\n gap: var(--ic-space-xs);\n box-sizing: border-box;\n color: var(--navigation-item-child-color) !important;\n text-decoration: none !important;\n white-space: nowrap;\n padding-top: var(--ic-space-md) !important;\n padding-bottom: var(--ic-space-md) !important;\n text-wrap: wrap;\n}\n\n:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link,\n:host(.navigation-item-side-nav.navigation-item-top-nav-child) ::slotted(a) {\n height: var(--navigation-item-child-height);\n width: var(--navigation-group-width);\n color: var(--navigation-item-child-color) !important;\n display: flex;\n gap: 0.625rem;\n box-sizing: border-box;\n min-width: 0;\n transition: box-shadow var(--ic-easing-transition-fast);\n text-decoration: none !important;\n white-space: nowrap;\n}\n\n:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link:focus,\n:host(.navigation-item-side-nav.navigation-item-top-nav-child)\n ::slotted(a:focus) {\n box-shadow: var(--ic-border-focus-dark);\n}\n\n:host(.navigation-item-side-nav.navigation-item-side-menu) .link:active {\n background-color: var(--navigation-item-child-active);\n}\n\n:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link:active,\n:host(.navigation-item-side-nav.navigation-item-top-nav-child)\n ::slotted(a:active) {\n background-color: var(--navigation-item-child-active);\n}\n\n:host(.navigation-item-side-nav) a.link ic-typography,\n:host(.navigation-item-side-nav.navigation-item-top-nav-child)\n a.link\n ic-typography,\n:host(.navigation-item-side-nav) div.link ic-typography,\n:host(.navigation-item-side-nav.navigation-item-top-nav-child)\n div.link\n ic-typography,\n.navigation-item-side-nav-slotted-text {\n opacity: var(--navigation-item-label-opacity);\n transition: opacity var(--ic-easing-transition-slow);\n white-space: wrap;\n text-overflow: ellipsis;\n overflow: hidden;\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link,\n:host(.navigation-item-side-nav.navigation-item) ::slotted(a.active) {\n box-shadow: inset 0.313rem 0 0 var(--ic-theme-text);\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link::before,\n:host(.navigation-item-side-nav) ::slotted(a.active)::before {\n content: \"\";\n display: block;\n position: absolute;\n inset: 0 0 0 0.313rem;\n border-radius: 0.688rem !important;\n transition: var(--ic-easing-transition-slow);\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link:focus::before,\n:host(.navigation-item-side-nav) ::slotted(a.active:focus)::before {\n box-shadow: var(--ic-border-focus-inset);\n}\n\n:host(:not(.navigation-item-side-nav-collapsed).navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label)\n .link {\n opacity: var(--navigation-item-label-opacity);\n height: auto;\n}\n\n:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label)\n .link,\n:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label)\n ::slotted(a) {\n min-width: var(--navigation-group-item-min-width);\n padding: var(--ic-space-xs) !important;\n height: auto;\n gap: 0;\n}\n\n:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label)\n ::slotted(a) {\n display: block;\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link::after,\n:host(.navigation-item-side-nav) ::slotted(a.active)::after {\n display: none;\n}\n\n:host(.navigation-item-side-nav.navigation-item) .link:focus,\n:host(.navigation-item-side-nav.navigation-item) ::slotted(a:focus) {\n box-shadow: var(--ic-border-focus-inset);\n border-radius: var(--ic-border-radius-inset);\n background-color: transparent;\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link:focus,\n:host(.navigation-item-side-nav) ::slotted(a.active:focus) {\n margin: 0 auto;\n box-shadow: inset 0.313rem 0 0 var(--ic-theme-text);\n border-radius: 0;\n}\n\n:host(.navigation-item-side-nav.navigation-item) .link:hover:not(:focus) {\n background-color: var(--ic-theme-hover) !important;\n}\n\n:host(.navigation-item-page-header).link,\n:host(.navigation-item-page-header) a,\n:host(.navigation-item-page-header) ::slotted(a) {\n height: 2.5rem !important;\n color: var(--ic-color-primary-text) !important;\n transition: all var(--ic-easing-transition-fast) !important;\n box-shadow: rgba(23 89 188 / 0%) !important;\n}\n\n:host(.navigation-item-page-header.navigation-item-selected) .link::after,\n:host(.navigation-item-page-header) ::slotted(a.active)::after {\n content: \" \" !important;\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: var(--ic-space-xxs);\n background-color: var(--ic-action-default) !important;\n}\n\n:host(.navigation-item-page-header) .link:hover,\n:host(.navigation-item-page-header) ::slotted(.link:hover),\n:host(.navigation-item-page-header) ::slotted(a:hover),\n:host(.navigation-item-page-header) .link:hover:not(:focus) {\n background-color: var(--ic-action-default-bg-hover) !important;\n cursor: pointer;\n}\n\n:host(.navigation-item-page-header) .link:focus,\n:host(.navigation-item-page-header) ::slotted(a:focus) {\n box-shadow: var(--ic-border-focus);\n}\n\n:host(.navigation-item-page-header) .link:active,\n:host(.navigation-item-page-header) ::slotted(a:active) {\n background-color: var(--ic-action-default-bg-active) !important;\n}\n\n:host(.navigation-item-page-header.navigation-item-selected) .link:focus::after,\n:host(.navigation-item-page-header) ::slotted(a.active:focus)::after {\n border-bottom-left-radius: var(--ic-border-radius);\n border-bottom-right-radius: var(--ic-border-radius);\n}\n\n:host(.navigation-item-page-header.navigation-item-selected.with-transition)\n .link,\n:host(.navigation-item-page-header.navigation-item-selected.with-transition)\n ::slotted(a.active) {\n transition: all var(--ic-easing-transition-fast),\n border-color var(--ic-transition-duration-fast);\n}\n\n:host(.navigation-item-page-header) ::slotted(a.active)::before,\n:host(.navigation-item-page-header) ::slotted(a.active:focus)::before,\n:host(.navigation-item-page-header.navigation-item-selected)\n .link:focus::before {\n display: none;\n}\n\n.open-in-new-icon {\n flex: 1;\n}\n\n.open-in-new-icon svg {\n margin-top: var(--ic-space-xxs);\n padding-left: var(--ic-space-xxs);\n}\n\n:host(.navigation-item-side-nav) .open-in-new-icon {\n margin-left: calc(-1 * var(--ic-space-xs));\n}\n\n:host(.navigation-item-top-nav) .open-in-new-icon svg,\n:host(.navigation-item-page-header) .open-in-new-icon svg,\n:host(.navigation-item-side-nav) .open-in-new-icon svg {\n height: 0.875rem;\n width: 0.875rem;\n}\n\n:host(.navigation-item-side-menu) .open-in-new-icon svg,\n:host(.navigation-item-top-nav-child) .open-in-new-icon svg {\n height: var(--ic-space-md);\n width: var(--ic-space-md);\n}\n\n:host(.navigation-item-page-header) .open-in-new-icon svg,\n:host(.navigation-item-top-nav-child) .open-in-new-icon svg,\n:host(.navigation-item-side-menu) .open-in-new-icon svg {\n fill: var(--ic-color-primary-text);\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Listen,\n Method,\n h,\n Host,\n Prop,\n State,\n} from \"@stencil/core\";\n\nimport {\n DEVICE_SIZES,\n getCurrentDeviceSize,\n getThemeForegroundColor,\n getParentElementType,\n getNavItemParentDetails,\n isSlotUsed,\n} from \"../../utils/helpers\";\nimport { IcNavType, IcTheme } from \"../../utils/types\";\n\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\n\nimport OpenInNew from \"../../assets/OpenInNew.svg\";\n\n/*\n @part link - The `<a>` within ic-navigation-item\n * @slot badge - Badge component overlaying the top right of the icon.\n /\n\n@Component({\n tag: \"ic-navigation-item\",\n styleUrl: \"ic-navigation-item.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class NavigationItem {\n private navigationSlot: HTMLElement;\n private isInitialRender: boolean = true;\n private itemEl: HTMLElement;\n\n @Element() el: HTMLIcNavigationItemElement;\n\n @State() deviceSize: number = DEVICE_SIZES.XL;\n @State() focusStyle = getThemeForegroundColor();\n @State() inTopNavSideMenu: boolean = false;\n @State() isSideNavMobile: boolean = false;\n @State() isTopNavChild: boolean = false;\n @State() navigationType: IcNavType \| \"\";\n @State() parentEl: HTMLElement;\n @State() sideNavExpanded: boolean = false;\n\n /\n @internal If `true`, the icon and label will be displayed when side navigation is collapsed.\n /\n @Prop() collapsedIconLabel: boolean = false;\n\n /\n @internal If `true`, the navigation item will be displayed within a tooltip.\n /\n @Prop() displayNavigationTooltip: boolean = false;\n\n /\n If `true`, the user can save the linked URL instead of navigating to it.\n /\n @Prop() download?: string \| boolean = false;\n\n /\n @internal If `true`, the navigation item will be expandable.\n /\n @Prop() expandable: boolean = false;\n\n /\n The destination of the navigation item.\n /\n @Prop() href: string = \"\";\n\n /\n The human language of the linked URL.\n /\n @Prop() hreflang?: string;\n\n /\n The label of the navigation item.\n /\n @Prop() label: string;\n\n /\n The relationship of the linked URL as space-separated link types.\n /\n @Prop() rel?: string;\n\n /\n How much of the referrer to send when following the link.\n /\n @Prop() referrerpolicy?: ReferrerPolicy;\n\n /\n If `true`, the navigation item will be set in a selected state.\n /\n @Prop() selected: boolean = false;\n\n /\n The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n /\n @Prop() target?: string;\n\n /\n @internal - Emitted when item loses focus.\n /\n @Event() childBlur: EventEmitter<void>;\n\n /\n @internal - Emitted when navigation item clicked.\n /\n @Event() navItemClicked: EventEmitter<void>;\n\n disconnectedCallback(): void {\n if (this.navigationType === \"side\") {\n this.parentEl.removeEventListener(\n \"sideNavExpanded\",\n this.sideNavExpandHandler\n );\n } else if (this.navigationType === \"top\") {\n this.parentEl.removeEventListener(\n \"topNavResized\",\n this.topNavResizedHandler\n );\n }\n }\n\n componentWillLoad(): void {\n const navParentDetails = getNavItemParentDetails(this.el);\n this.navigationType = navParentDetails.navType;\n this.parentEl = navParentDetails.parent;\n\n if (this.navigationType === \"side\") {\n this.parentEl.addEventListener(\n \"sideNavExpanded\",\n this.sideNavExpandHandler\n );\n } else if (this.navigationType === \"top\") {\n this.parentEl.addEventListener(\n \"topNavResized\",\n this.topNavResizedHandler\n );\n }\n\n if (\n getParentElementType(this.el) === \"IC-NAVIGATION-GROUP\" &&\n this.navigationType === \"top\"\n ) {\n this.isTopNavChild = true;\n }\n\n this.deviceSize = getCurrentDeviceSize();\n if (this.deviceSize <= DEVICE_SIZES.L && this.navigationType === \"top\") {\n this.inTopNavSideMenu = true;\n }\n\n this.navigationSlot = this.el.querySelector('[slot=\"navigation-item\"]');\n if (this.navigationSlot) {\n this.navigationSlot.ariaLabel = this.navigationSlot.textContent.trim();\n }\n }\n\n componentDidUpdate(): void {\n this.isInitialRender = false;\n }\n\n @Listen(\"themeChange\", { target: \"document\" })\n themeChangeHandler(ev: CustomEvent): void {\n const theme: IcTheme = ev.detail;\n this.focusStyle = theme.mode;\n }\n\n /\n Sets focus on the nav item.\n /\n @Method()\n async setFocus(): Promise<void> {\n if (this.itemEl) {\n this.itemEl.focus();\n }\n }\n\n private displayDefaultNavigationItem = (\n href: string,\n hreflang: string,\n target: string,\n rel: string,\n referrerpolicy: ReferrerPolicy,\n download: string \| boolean,\n label: string\n ): HTMLElement => {\n const variant =\n this.isTopNavChild \|\| this.inTopNavSideMenu ? \"body\" : \"label\";\n const ChevronIconComponent = this.expandable && (\n <div class={{ svg: true }} innerHTML={chevronIcon}></div>\n );\n const IconComponent = this.el.querySelector('[slot=\"icon\"]') && (\n <div class=\"icon\">\n <slot name=\"icon\"></slot>\n {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n </div>\n );\n\n if (href !== \"\") {\n return (\n <a\n href={href}\n target={target}\n rel={rel}\n hreflang={hreflang}\n referrerPolicy={referrerpolicy}\n download={download !== false ? download : null}\n class=\"link\"\n ref={(el) => (this.itemEl = el)}\n part=\"link\"\n >\n {IconComponent}\n\n <ic-typography variant={variant}>{label}</ic-typography>\n <div class=\"chevron-container\">{ChevronIconComponent}</div>\n {target === \"_blank\" && (\n <span class=\"open-in-new-icon\" innerHTML={OpenInNew} />\n )}\n </a>\n );\n }\n\n return (\n <div tabindex=\"0\" class=\"link\" ref={(el) => (this.itemEl = el)}>\n {IconComponent}\n <ic-typography variant={variant}>{label}</ic-typography>\n {ChevronIconComponent}\n </div>\n );\n };\n\n private topNavResizedHandler = (ev: CustomEvent): void => {\n const newSize = ev.detail.size;\n if (newSize !== this.deviceSize) {\n this.deviceSize = newSize;\n this.inTopNavSideMenu = newSize <= DEVICE_SIZES.L;\n }\n };\n\n private sideNavExpandHandler = (ev: CustomEvent): void => {\n const { sideNavExpanded, sideNavMobile } = ev.detail;\n this.sideNavExpanded = sideNavExpanded;\n this.isSideNavMobile = sideNavMobile;\n };\n\n private handleBlur = (ev: FocusEvent) => {\n if (ev.relatedTarget !== null) {\n const target = ev.relatedTarget as HTMLElement;\n if (target.tagName === \"IC-NAVIGATION-ITEM\") {\n return;\n }\n }\n this.childBlur.emit();\n };\n\n private handleClick = () => {\n this.navItemClicked.emit();\n };\n\n private generateTooltipLabel = () => {\n if (this.label) {\n return this.label;\n }\n\n if (this.navigationSlot) {\n return this.navigationSlot.textContent;\n }\n\n if (this.el.children[0]) {\n return this.el.children[0].textContent;\n }\n\n return \"\";\n };\n\n private renderNavigationItemContent = () => {\n if (this.label) {\n return this.displayDefaultNavigationItem(\n this.href,\n this.hreflang,\n this.target,\n this.rel,\n this.referrerpolicy,\n this.download,\n this.label\n );\n }\n\n if (this.navigationSlot) {\n return <slot name=\"navigation-item\"></slot>;\n }\n return <slot></slot>;\n };\n\n render() {\n const { inTopNavSideMenu, isTopNavChild, selected } = this;\n\n return (\n <Host\n class={{\n [\"navigation-item\"]: true,\n [\"navigation-item-top-nav\"]:\n !inTopNavSideMenu && this.navigationType === \"top\",\n [\"navigation-item-top-nav-child-selected\"]:\n isTopNavChild && !inTopNavSideMenu && selected,\n [this.focusStyle]:\n (!inTopNavSideMenu && !isTopNavChild) \|\|\n (this.navigationType === \"side\" && isTopNavChild),\n [\"navigation-item-selected\"]: !isTopNavChild && selected,\n [\"navigation-item-side-menu\"]: inTopNavSideMenu,\n [\"navigation-item-side-menu-selected\"]: inTopNavSideMenu && selected,\n [\"navigation-item-top-nav-child\"]: isTopNavChild && !inTopNavSideMenu,\n [\"navigation-item-page-header\"]:\n this.navigationType === \"page-header\",\n [\"with-transition\"]: !this.isInitialRender,\n [\"navigation-item-side-nav\"]: this.navigationType === \"side\",\n [\"navigation-item-side-nav-collapsed\"]:\n (!this.sideNavExpanded \|\| this.displayNavigationTooltip) &&\n this.navigationType === \"side\",\n [\"navigation-item-side-nav-collapsed-with-label\"]:\n !this.sideNavExpanded &&\n this.navigationType === \"side\" &&\n this.collapsedIconLabel &&\n !this.isSideNavMobile,\n [\"expandable\"]: this.expandable,\n }}\n onBlur={isTopNavChild && !inTopNavSideMenu ? this.handleBlur : null}\n onClick={this.handleClick}\n aria-current={selected ? \"page\" : null}\n role=\"listitem\"\n >\n {/ Tooltip enabled by applying navigation-item-side-nav-collapsed class to host */}\n <ic-tooltip\n label={this.generateTooltipLabel()}\n target=\"navigation-item\"\n placement=\"right\"\n class={{\n [\"tooltip-navigation-item\"]: true,\n [\"tooltip-navigation-item-side-nav-collapsed\"]:\n (!this.sideNavExpanded \|\| this.displayNavigationTooltip) &&\n this.navigationType === \"side\",\n [\"tooltip-long-label-navigation-item-side-nav-expanded\"]:\n this.el.hasAttribute(\"[display-navigation-tooltip = 'true']\"),\n }}\n >\n {this.renderNavigationItemContent()}\n </ic-tooltip>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/ic-navigation-menu.entry.js CHANGED Viewed

@@ -1,120 +1,120 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-813020f1.js';
-import { A as getSlotContent, L as getSlot, i as isSlotUsed } from './helpers-24f6e762.js';
-import './types-b2398b37.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-05003e1c.js';
+import { A as getSlotContent, L as getSlot, i as isSlotUsed } from './helpers-c597f246.js';
+import './types-6f6b41a5.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-architectural-20);color:var(--ic-color-primary-text);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-architectural-500);color:var(--ic-color-white-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-architectural-100);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 NavigationMenu = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.icNavigationMenuClose = createEvent(this, "icNavigationMenuClose", 7);
-    this.closeButton = null;
-    this.hasButtons = false;
-    this.hasNavigation = false;
-    this.lastTabStop = null;
-    this.navGroupFirst = false;
-    this.navItemAboveButtons = false;
-    this.closeMenu = () => {
-      this.icNavigationMenuClose.emit();
-    };
-    this.focusCloseButton = () => {
-      if (this.closeButton.focus) {
-        this.closeButton.focus();
-      }
-    };
-    this.focusLastTabStop = () => {
-      let focusEl;
-      if (this.lastTabStop !== null) {
-        switch (this.lastTabStop.tagName) {
-          case "IC-NAVIGATION-BUTTON":
-          case "IC-NAVIGATION-ITEM":
-          case "IC-NAVIGATION-GROUP":
-            focusEl = this.lastTabStop;
-            focusEl.focus();
-            break;
-          case "A":
-            this.lastTabStop.focus();
-            break;
-        }
-      }
-    };
-    this.status = "";
-    this.version = "";
-  }
-  componentWillLoad() {
-    this.navBarEl = document.querySelector("ic-top-navigation");
-    const navigationEls = getSlotContent(this.el, "navigation");
-    if (navigationEls) {
-      this.hasNavigation = true;
-      const lastEl = navigationEls[navigationEls.length - 1];
-      if (lastEl.tagName === "IC-NAVIGATION-ITEM") {
-        this.navItemAboveButtons = true;
-      }
-      const firstEl = navigationEls[0];
-      if (firstEl.tagName === "IC-NAVIGATION-GROUP") {
-        this.navGroupFirst = true;
-      }
-    }
-    const buttonContent = getSlotContent(this.el, "buttons");
-    if (buttonContent !== null) {
-      this.hasButtons = true;
-      this.lastTabStop = buttonContent[buttonContent.length - 1];
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.icNavigationMenuClose = createEvent(this, "icNavigationMenuClose", 7);
+        this.closeButton = null;
+        this.hasButtons = false;
+        this.hasNavigation = false;
+        this.lastTabStop = null;
+        this.navGroupFirst = false;
+        this.navItemAboveButtons = false;
+        this.closeMenu = () => {
+            this.icNavigationMenuClose.emit();
+        };
+        this.focusCloseButton = () => {
+            if (this.closeButton.focus) {
+                this.closeButton.focus();
+            }
+        };
+        this.focusLastTabStop = () => {
+            let focusEl;
+            if (this.lastTabStop !== null) {
+                switch (this.lastTabStop.tagName) {
+                    case "IC-NAVIGATION-BUTTON":
+                    case "IC-NAVIGATION-ITEM":
+                    case "IC-NAVIGATION-GROUP":
+                        focusEl = this.lastTabStop;
+                        focusEl.focus();
+                        break;
+                    case "A":
+                        this.lastTabStop.focus();
+                        break;
+                }
+            }
+        };
+        this.status = "";
+        this.version = "";
     }
-    else {
-      if (this.hasNavigation) {
-        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;
+    componentWillLoad() {
+        this.navBarEl = document.querySelector("ic-top-navigation");
+        const navigationEls = getSlotContent(this.el, "navigation");
+        if (navigationEls) {
+            this.hasNavigation = true;
+            const lastEl = navigationEls[navigationEls.length - 1];
+            if (lastEl.tagName === "IC-NAVIGATION-ITEM") {
+                this.navItemAboveButtons = true;
+            }
+            const firstEl = navigationEls[0];
+            if (firstEl.tagName === "IC-NAVIGATION-GROUP") {
+                this.navGroupFirst = true;
+            }
+        }
+        const buttonContent = getSlotContent(this.el, "buttons");
+        if (buttonContent !== null) {
+            this.hasButtons = true;
+            this.lastTabStop = buttonContent[buttonContent.length - 1];
         }
         else {
-          this.lastTabStop = lastEl;
+            if (this.hasNavigation) {
+                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;
+                }
+            }
         }
-      }
     }
-  }
-  componentDidLoad() {
-    this.focusCloseButton();
-  }
-  componentWillRender() {
-    this.hasNavigation = isSlotUsed(this.el, "navigation");
-    this.hasButtons = isSlotUsed(this.el, "buttons");
-  }
-  navItemClickHandler() {
-    this.closeMenu();
-  }
-  handleKeyDown(ev) {
-    if (ev.key === "Tab") {
-      if (ev.shiftKey) {
-        if (document.activeElement === this.navBarEl) {
-          ev.preventDefault();
-          this.focusLastTabStop();
-        }
-      }
-      else if (document.activeElement === this.lastTabStop ||
-        this.lastTabStop === null) {
-        ev.preventDefault();
+    componentDidLoad() {
         this.focusCloseButton();
-      }
     }
-    else if (ev.key === "Escape") {
-      this.closeMenu();
+    componentWillRender() {
+        this.hasNavigation = isSlotUsed(this.el, "navigation");
+        this.hasButtons = isSlotUsed(this.el, "buttons");
+    }
+    navItemClickHandler() {
+        this.closeMenu();
+    }
+    handleKeyDown(ev) {
+        if (ev.key === "Tab") {
+            if (ev.shiftKey) {
+                if (document.activeElement === this.navBarEl) {
+                    ev.preventDefault();
+                    this.focusLastTabStop();
+                }
+            }
+            else if (document.activeElement === this.lastTabStop ||
+                this.lastTabStop === null) {
+                ev.preventDefault();
+                this.focusCloseButton();
+            }
+        }
+        else if (ev.key === "Escape") {
+            this.closeMenu();
+        }
+    }
+    render() {
+        return (h(Host, null, h("div", { class: "popout-modal", onClick: this.closeMenu }), h("div", { class: "popout-menu", role: "dialog", "aria-modal": "true", "aria-label": `${this.hasNavigation ? "Navigation" : "App"} menu` }, h("span", { "aria-hidden": "true", id: "navigation-landmark-text", class: "navigation-landmark-text" }, "Main navigation"), h("nav", { "aria-labelledby": "navigation-landmark-text", "aria-hidden": this.hasNavigation ? "false" : "true" }, h("div", { class: {
+                ["menu-close-button-container"]: true,
+                ["nav-group-first"]: this.navGroupFirst,
+            } }, h("ic-button", { 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", { slot: "icon", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("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", fill: "#1759BC" })))), this.hasNavigation && h("slot", { name: "navigation" })), this.hasButtons && (h("div", { class: {
+                ["menu-buttons-container"]: true,
+                ["menu-buttons-container-nav-item-above"]: this.navItemAboveButtons,
+            } }, h("slot", { name: "buttons" }))), (this.status !== "" || this.version !== "") && (h("div", { class: {
+                ["menu-status-version-container"]: true,
+                ["status-version-no-buttons"]: !this.hasButtons,
+            } }, this.status !== "" && (h("div", { class: "menu-status" }, h("ic-typography", { variant: "label-uppercase", "aria-label": "app tag", class: "menu-status-text" }, this.status))), this.version !== "" && (h("div", { class: "menu-version" }, h("ic-typography", { variant: "label", class: "menu-version-text", "aria-label": "app version" }, this.version))))))));
     }
-  }
-  render() {
-    return (h(Host, null, h("div", { class: "popout-modal", onClick: this.closeMenu }), h("div", { class: "popout-menu", role: "dialog", "aria-modal": "true", "aria-label": `${this.hasNavigation ? "Navigation" : "App"} menu` }, h("span", { "aria-hidden": "true", id: "navigation-landmark-text", class: "navigation-landmark-text" }, "Main navigation"), h("nav", { "aria-labelledby": "navigation-landmark-text", "aria-hidden": this.hasNavigation ? "false" : "true" }, h("div", { class: {
-        ["menu-close-button-container"]: true,
-        ["nav-group-first"]: this.navGroupFirst,
-      } }, h("ic-button", { 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", { slot: "icon", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("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", fill: "#1759BC" })))), this.hasNavigation && h("slot", { name: "navigation" })), this.hasButtons && (h("div", { class: {
-        ["menu-buttons-container"]: true,
-        ["menu-buttons-container-nav-item-above"]: this.navItemAboveButtons,
-      } }, h("slot", { name: "buttons" }))), (this.status !== "" || this.version !== "") && (h("div", { class: {
-        ["menu-status-version-container"]: true,
-        ["status-version-no-buttons"]: !this.hasButtons,
-      } }, this.status !== "" && (h("div", { class: "menu-status" }, h("ic-typography", { variant: "label-uppercase", "aria-label": "app tag", class: "menu-status-text" }, this.status))), this.version !== "" && (h("div", { class: "menu-version" }, h("ic-typography", { variant: "label", class: "menu-version-text", "aria-label": "app version" }, this.version))))))));
-  }
-  get el() { return getElement(this); }
+    get el() { return getElement(this); }
 };
 NavigationMenu.style = icNavigationMenuCss;

package/dist/esm/ic-navigation-menu.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-navigation-menu.entry.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-architectural-20);\n color: var(--ic-color-primary-text);\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-architectural-500);\n color: var(--ic-color-white-text);\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-architectural-100);\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\";\n\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 = null;\n private hasButtons: boolean = false;\n private hasNavigation: boolean = false;\n private lastTabStop: HTMLElement = null;\n private navBarEl: HTMLIcTopNavigationElement;\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 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) {\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 if (this.closeButton.focus) {\n this.closeButton.focus();\n }\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>\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 slot=\"icon\"\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\n 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 fill=\"#1759BC\"\n />\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-menu.entry.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-architectural-20);\n color: var(--ic-color-primary-text);\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-architectural-500);\n color: var(--ic-color-white-text);\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-architectural-100);\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\";\n\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 = null;\n private hasButtons: boolean = false;\n private hasNavigation: boolean = false;\n private lastTabStop: HTMLElement = null;\n private navBarEl: HTMLIcTopNavigationElement;\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 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) {\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 if (this.closeButton.focus) {\n this.closeButton.focus();\n }\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>\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 slot=\"icon\"\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\n 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 fill=\"#1759BC\"\n />\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}