npm - @ukic/web-components - Versions diffs - 2.31.0 → 2.32.0 - Mend

@ukic/web-components 2.31.0 → 2.32.0

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 (89) hide show

package/dist/core/{p-7e739287.entry.js.map → p-74a7b421.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["icSideNavigationCss","SideNavigation","this","ANIMATION_DURATION","parseInt","getCssProperty","IC_NAVIGATION_ITEM","resizeObserver","COLLAPSED_ICON_LABELS_END","COLLAPSED_ICON_LABELS_START","menuButton","emitSideNavigationExpanded","objDetails","sideNavExpanded","emit","sideNavMobile","toggleMenu","menuOpen","setMobileMenuAriaAttributes","arrangeSlottedNavigationItem","setToggleMenuFlyoutMenuVisibility","sideNav","el","shadowRoot","querySelector","sideNavInner","bottomWrapper","menuVisibilityVisible","classList","add","setTimeout","remove","setAttribute","setAndRemoveNoWrapAfterMenuExpanded","appTitle","toggleMenuExpanded","menuExpanded","style","setProperty","addEventListener","e","propertyName","displayTooltipWithExpandedLongLabel","collapsedIconLabels","animateCollapsedIconLabels","setExpandedButtonHeight","navItems","querySelectorAll","forEach","navItem","isNamedSlot","isSlotUsed","isUnnamedSlot","children","getAttribute","navItemSlot","iconWrapper","document","createElement","icon","label","textContent","trim","icTypography","height","append","styleSlottedCollapsedIconLabels","styleSlottedIconLabels","marginTop","whiteSpace","overflow","textOverflow","appStatusWrapper","offsetHeight","opacity","visibility","transition","transitionHandler","type","primaryNavigationWrapper","secondaryNavigationWrapper","classToRemove","classToAdd","transitionEndHandler","paddingIconWidth","navItemLink","navItemSVG","navStyles","gap","window","getComputedStyle","iconWidth","width","paddingLeft","Object","values","reduce","prev","curr","timer","sideNavWidth","clientWidth","navigationItems","Array","from","paddingIconDelta","length","navigationItem","icTypographyScrollWidth","_a","scrollWidth","_b","clearTimeout","setMenuExpanded","expanded","setParentPaddingTop","value","parentElement","setParentPaddingLeft","renderAppTitle","isAppNameSubtitleVariant","displayShortAppTitle","deviceSize","DEVICE_SIZES","S","isEmptyString","shortAppTitle","h","variant","undefined","resizeObserverCallback","currSize","isSmallAndDisableTopBar","disableTopBarBehaviour","disableAutoParentStyling","topBarHeight","scrollHeight","inline","L","M","static","runResizeObserver","ResizeObserver","getCurrentDeviceSize","deviceSizeAppTitle","observe","body","box","setCollapsedIconLabels","styleSlottedCollapsedIconLabel","dynamicSlottedIcTypographyComps","contains","renderTopBar","isSDevice","foregroundColor","href","hasTitle","isPropDefined","Component","attrs","class","id","size","appearance","onClick","ariaOwnsId","ref","slot","innerHTML","closeIcon","menuIcon","assign","name","getThemeForegroundColor","watchExpandedHandler","componentWillLoad","hasSecondaryNavigation","componentDidLoad","checkResizeObserver","onComponentRequiredPropUndefined","prop","propName","disconnectedCallback","disconnect","removeEventListener","themeChangeHandler","detail","mode","render","status","version","isMdDevice","isLgDevice","displayExpandBtn","topBarProps","Host","IcThemeForegroundEnum","Dark","hasClassificationBanner","chevronIcon"],"sources":["src/components/ic-side-navigation/ic-side-navigation.css?tag=ic-side-navigation&encapsulation=shadow","src/components/ic-side-navigation/ic-side-navigation.tsx"],"sourcesContent":["/*\n @prop --ic-z-index-side-navigation: z-index of side navigation panel\n /\n\n:host {\n display: block;\n\n --side-navigation-position: fixed;\n --side-navigation-position-left: 0;\n --side-navigation-position-top: var(--ic-space-xxl);\n --side-navigation-height: var(--ic-space-xxl);\n --sm-side-navigation-top-bar-height: 3.5rem;\n --sm-side-navigation-collapsed-labels-width: 6rem;\n --sm-side-navigation-expand-transition-duration: var(\n --ic-transition-duration-slow\n );\n --side-navigation-width: 20rem;\n --sm-side-navigation-bottom-bar-height: 3.5rem;\n\n z-index: var(--ic-z-index-side-navigation);\n}\n\n:host > {\n box-sizing: border-box;\n}\n\n.side-navigation {\n display: flex;\n flex-direction: column;\n width: var(--side-navigation-width);\n color: var(--ic-theme-text);\n position: var(--side-navigation-position);\n top: var(--side-navigation-position-top);\n left: calc(var(--side-navigation-width) * -1);\n bottom: 0;\n background-color: var(--ic-theme-primary);\n z-index: var(--ic-z-index-side-navigation);\n}\n\n:host(.inline) .side-navigation {\n position: absolute;\n height: 100%;\n}\n\n:host(.anchor-right) .side-navigation {\n right: calc(var(--side-navigation-width) * -1);\n}\n\n.classification-spacing {\n margin-bottom: var(--ic-space-lg);\n}\n\n.navigation-list {\n padding: 0;\n margin: 0;\n list-style: none;\n}\n\n.side-navigation-inner {\n background-color: var(--ic-theme-primary);\n display: flex;\n flex-direction: column;\n flex: 1 1 0;\n overflow: auto;\n}\n\n:host(.inline) .side-navigation-inner {\n flex: 1;\n}\n\n:host(.xs-menu-open) .side-navigation {\n transition: left var(--ic-easing-transition-slow);\n left: 0;\n}\n\n:host(:has(.xs-menu-open, .xs-menu-close)) ::slotted(ic-navigation-item) {\n --navigation-item-side-nav-right: var(--ic-space-xl);\n}\n\n:host(.xs-menu-close) .side-navigation {\n left: calc(var(--side-navigation-width) * -1);\n transition: left var(--ic-easing-transition-slow);\n}\n\n:host(.xs-menu-close) .side-navigation > * {\n visibility: hidden;\n}\n\n:host(.anchor-right.xs-menu-open) .side-navigation {\n right: 0;\n left: auto;\n}\n\n:host(.anchor-right.xs-menu-close) .side-navigation {\n right: calc(var(--side-navigation-width) * -1);\n left: auto;\n transition: right var(--ic-easing-transition-slow);\n}\n\n.bottom-wrapper {\n border-top: var(--ic-keyline-lighten);\n bottom: 0;\n left: 0;\n z-index: 2;\n box-shadow: -0.188rem -0.188rem 0.5rem rgb(0 0 0 / 20%);\n background-color: var(--ic-theme-primary);\n display: flex;\n flex-direction: column;\n}\n\n:host(.inline) .bottom-wrapper {\n position: sticky;\n}\n\n:host(.dark) .bottom-wrapper {\n border-top: var(--ic-keyline-darken);\n}\n\n/* Mobile Top Bar /\n\n.top-bar {\n display: flex;\n flex-direction: row;\n align-items: center;\n min-height: var(--side-navigation-height);\n padding: var(--ic-space-xs);\n box-sizing: border-box;\n background-color: var(--ic-theme-primary);\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n border-bottom: var(--ic-keyline-darken);\n box-shadow: var(--ic-elevation-overlay);\n z-index: 2;\n overflow: hidden;\n visibility: visible;\n}\n\n:host(.inline) .top-bar {\n position: absolute;\n}\n\n.top-bar.dark a:focus {\n box-shadow: var(--ic-border-focus);\n}\n\n.top-bar.light {\n border-bottom: var(--ic-keyline-lighten);\n}\n\n.app-title-wrapper {\n display: flex;\n margin-left: var(--ic-space-xs);\n border-left: var(--ic-keyline-darken);\n padding-left: var(--ic-space-xxs);\n color: var(--ic-theme-text);\n align-items: center;\n}\n\n.app-title-wrapper ic-typography h1 {\n margin: 0;\n}\n\n@media screen and (min-width: 340px) {\n .app-title-wrapper ic-typography {\n margin-left: var(--ic-space-xs);\n }\n}\n\n:host .title-link {\n display: flex;\n align-items: center;\n transition: box-shadow var(--ic-easing-transition-fast),\n background-color var(--ic-easing-transition-fast);\n text-decoration: none;\n padding: var(--ic-space-xxs);\n color: var(--ic-theme-text);\n}\n\n:host .title-link:visited,\n:host .title-link:active {\n color: var(--ic-theme-text);\n}\n\nslot[name=\"app-title\"]::slotted(a),\nslot[name=\"app-icon\"]::slotted(a) {\n color: var(--ic-theme-text);\n outline: none;\n text-decoration: none;\n display: flex;\n}\n\nslot[name=\"app-title\"]::slotted(ic-typography),\nslot[name=\"app-title\"]::slotted(a) {\n margin-left: var(--ic-space-xs) !important;\n}\n\nslot[name=\"app-title\"]::slotted(a) {\n font: var(--ic-font-subtitle-small);\n}\n\n@media screen and (min-width: 577px) {\n :host(.sm-collapsed) slot[name=\"app-title\"]::slotted(ic-typography),\n :host(.sm-collapsed) slot[name=\"app-title\"]::slotted(a) {\n position: absolute;\n left: -9999px;\n opacity: 0;\n transition: opacity var(--ic-easing-transition-slow);\n }\n\n :host(.sm-expanded) slot[name=\"app-title\"]::slotted(a) {\n font: var(--ic-font-h3) !important;\n font-weight: var(--ic-font-weight-semibold) !important;\n margin-left: var(--ic-space-xs) !important;\n }\n}\n\n:host .title-link:hover {\n border-radius: var(--ic-border-radius);\n background-color: var(--ic-theme-hover);\n}\n\n:host .title-link:active {\n background-color: var(--ic-theme-active);\n}\n\n:host .title-link:focus,\n:host .title-link:focus-within {\n border-radius: var(--ic-border-radius);\n box-shadow: var(--ic-border-focus);\n outline: var(--ic-hc-focus-outline);\n background-color: transparent;\n}\n\n:host .title-link ic-typography {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.app-title-wrapper ::slotted(svg) {\n fill: var(--ic-theme-text);\n}\n\n.app-icon-container {\n display: none;\n}\n\n.button-label {\n display: flex;\n align-items: center;\n}\n\n.mobile-top-bar-menu-icon {\n display: flex;\n}\n\n.menu-button {\n width: 6.5rem;\n}\n\n.app-status-wrapper {\n inset: 0 var(--ic-space-sm) 0 3.5rem;\n width: auto;\n display: flex;\n gap: var(--ic-space-xs);\n padding: var(--ic-space-sm) 0;\n justify-content: flex-end;\n align-items: flex-end;\n pointer-events: none;\n height: fit-content;\n margin: 0 var(--ic-space-xs);\n}\n\n.app-status-wrapper .app-version {\n display: flex;\n overflow-wrap: break-word;\n padding-bottom: var(--ic-space-xxs);\n}\n\n.app-status-wrapper .app-status {\n display: flex;\n border-radius: 1rem;\n background-color: var(--ic-theme-text);\n color: var(--ic-color-primary-text);\n padding: var(--ic-space-xxs) var(--ic-space-lg);\n min-width: 1rem;\n}\n\n.app-status-wrapper .app-status-text {\n overflow-wrap: break-word;\n}\n\n:host(.dark) .app-status-wrapper .app-status {\n color: var(--ic-color-white-text);\n}\n\n.navigation-landmark-title {\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\n/* Navigation Group /\n\n::slotted(ic-navigation-group) {\n --navigation-group-height: 2.75rem;\n --navigation-group-width: 100%;\n --navigation-group-justify-content: space-between;\n --navigation-group-hover: var(--ic-theme-hover);\n --navigation-group-text-hover: var(--ic-theme-text);\n --navigation-item-child-height: 3.5rem;\n --navigation-item-child-active: var(--ic-action-dark-bg-active);\n --navigation-item-child-color: var(--ic-theme-text);\n --navigation-group-expand-toggle-padding: 0.25rem;\n}\n\n/ Navigation Items /\n\n::slotted(ic-navigation-item),\n::slotted(ic-navigation-group) {\n --navigation-item-justify-content: flex-start;\n --navigation-item-min-height: 56px;\n --navigation-item-height: auto;\n}\n\n/ Toggle Chevron /\n\n.bottom-side-nav {\n position: relative;\n align-content: flex-end;\n min-height: var(--sm-side-navigation-top-bar-height);\n}\n\n.bottom-side-nav ic-divider {\n position: absolute;\n top: 0;\n width: 100%;\n}\n\n.primary-navigation {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n\n / Hide scrollbar when required but keep functionality /\n scrollbar-width: none;\n}\n\n.primary-navigation::-webkit-scrollbar {\n display: none;\n}\n\n.primary-navigation,\n.secondary-navigation {\n overflow-x: hidden;\n}\n\n.bottom-side-nav .menu-expand-button {\n position: absolute;\n display: none;\n}\n\n.menu-visibility-visible {\n visibility: visible;\n width: 100%;\n}\n\n.app-title-show {\n min-width: 15.5rem;\n}\n\n:host(.side-display) {\n display: flex;\n flex-direction: column;\n height: 100vh;\n position: var(--side-navigation-position);\n left: 0;\n top: 0;\n bottom: 0;\n}\n\n:host(.side-display) .app-icon-container {\n height: 40px;\n display: flex;\n align-items: center;\n}\n\n:host(.side-display) .top-bar {\n --side-navigation-height: var(--sm-side-navigation-top-bar-height);\n\n position: relative;\n padding: 0;\n box-shadow: -0.188rem 0.188rem 0.5rem rgb(0 0 0 / 20%);\n}\n\n:host(.inline.side-display) .top-bar {\n position: sticky;\n}\n\n:host(.anchor-right.side-display) .top-bar {\n box-shadow: 0.188rem 0.188rem 0.5rem rgb(0 0 0 / 20%);\n}\n\n:host(.anchor-right.side-display) .bottom-wrapper {\n box-shadow: 0.188rem -0.188rem 0.5rem rgb(0 0 0 / 20%);\n}\n\n:host(.side-display) .side-navigation,\n:host(.side-display) .top-bar {\n width: var(--sm-side-navigation-top-bar-height);\n}\n\n:host(.sm-collapsed.side-display) {\n width: var(--sm-side-navigation-top-bar-height);\n transition: width var(--ic-easing-transition-slow);\n}\n\n:host(.sm-collapsed.collapsed-labels.side-display) {\n width: var(--sm-side-navigation-collapsed-labels-width);\n}\n\n:host(.sm-expanded.side-display) {\n width: var(--side-navigation-width);\n transition: width var(--ic-easing-transition-slow);\n box-shadow: var(--ic-elevation-overlay);\n}\n\n:host(.side-display) .side-navigation {\n --side-navigation-position-top: 0;\n\n flex: 1;\n position: relative;\n top: auto;\n left: auto;\n bottom: auto;\n}\n\n:host(.inline.side-display) .side-navigation {\n position: relative;\n}\n\n:host(.anchor-right.side-display) .side-navigation {\n left: auto;\n right: 0;\n}\n\n:host(.side-display) .app-title-wrapper {\n margin-left: 0;\n border-left: none;\n padding: var(--ic-space-xs) var(--ic-space-sm);\n}\n\n:host(.side-display) .app-title-wrapper ::slotted(svg) {\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n}\n\n:host(.side-display) .app-title-wrapper ic-typography {\n font-weight: var(--ic-font-weight-semibold);\n}\n\n:host(.sm-collapsed.side-display) .app-title-wrapper ic-typography {\n position: absolute;\n left: -9999px;\n opacity: 0;\n transition: opacity var(--ic-easing-transition-slow);\n}\n\n:host(.sm-expanded.side-display) ic-typography {\n position: relative;\n left: 0;\n}\n\n:host(.sm-expanded.side-display) :is(.side-navigation, .top-bar) {\n width: var(--side-navigation-width);\n transition: width var(--ic-easing-transition-slow);\n}\n\n:host(.sm-collapsed.side-display) :is(.side-navigation, .top-bar) {\n width: var(--sm-side-navigation-top-bar-height);\n transition: width var(--ic-easing-transition-slow);\n}\n\n:host(.anchor-right.sm-expanded.side-display) :is(.side-navigation, .top-bar) {\n left: auto;\n right: 0;\n}\n\n:host(.side-display) .app-status-wrapper,\n:host(.sm-collapsed.side-display) .app-status-wrapper {\n display: none;\n margin-left: 0;\n}\n\n:host(.sm-expanded.side-display) .app-status-wrapper {\n display: flex;\n max-width: 16rem;\n margin-right: calc(var(--ic-space-xxxs) + var(--ic-space-xs));\n}\n\n:host(.side-display) .bottom-side-nav {\n justify-items: flex-end;\n align-items: flex-end;\n justify-content: flex-end;\n display: flex;\n outline: none;\n}\n\n:host(.side-display) .bottom-side-nav .menu-expand-button {\n padding-left: var(--ic-space-md);\n height: var(--sm-side-navigation-top-bar-height);\n width: 100%;\n color: var(--ic-theme-text);\n background-color: transparent;\n outline: var(--ic-hc-focus-outline);\n border: none;\n cursor: pointer;\n display: flex;\n transition: var(--ic-easing-transition-fast);\n}\n\n:host(.sm-expanded.side-display) .bottom-side-nav .menu-expand-button {\n height: 100%;\n}\n\n:host(.side-display) .bottom-side-nav .menu-expand-button svg {\n justify-items: flex-start;\n align-self: center;\n display: inline-block;\n width: var(--ic-space-lg);\n height: var(--ic-space-lg);\n}\n\n:host(.side-display) .bottom-side-nav .menu-expand-button:hover {\n background-color: var(--ic-theme-hover);\n}\n\n:host(.side-display) .bottom-side-nav .menu-expand-button: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(.sm-collapsed.side-display) .bottom-side-nav .menu-expand-button svg {\n transform: scaleX(1);\n transition: transform var(--ic-easing-transition-slow);\n}\n\n:host(.sm-expanded.side-display) .bottom-side-nav .menu-expand-button svg {\n transform: scaleX(-1);\n transition: transform var(--ic-easing-transition-slow);\n align-self: flex-end;\n margin-bottom: 0.875rem;\n}\n\n:host(.anchor-right.sm-collapsed.side-display)\n .bottom-side-nav\n .menu-expand-button\n svg {\n transform: scaleX(-1);\n}\n\n:host(.anchor-right.sm-expanded.side-display)\n .bottom-side-nav\n .menu-expand-button\n svg {\n transform: scaleX(1);\n}\n\n:host(.sm-collapsed.side-display) ::slotted(ic-navigation-item) {\n --navigation-item-label-opacity: 1;\n}\n\n:host(.sm-collapsed.side-display) ::slotted(ic-navigation-item),\n:host(.sm-collapsed.side-display) ::slotted(ic-navigation-group) {\n --navigation-item-label-opacity: 0;\n --navigation-item-min-height: 56px;\n --navigation-item-height: 56px;\n}\n\n:host(.sm-expanded.side-display) ::slotted(ic-navigation-item),\n:host(.sm-expanded.side-display) ::slotted(ic-navigation-group) {\n --navigation-item-label-opacity: 1;\n --navigation-item-height: auto;\n --navigation-item-min-height: 56px;\n --navigation-item-width: 320px;\n --navigation-item-side-nav-right: var(--ic-space-xl);\n}\n\n:host(.sm-collapsed.side-display) ::slotted(ic-navigation-group) {\n --navigation-group-title-position: absolute;\n --navigation-group-title-position-left: -9999px;\n --navigation-group-title-opacity: none;\n}\n\n:host(.sm-expanded.side-display) ::slotted(ic-navigation-group) {\n --navigation-group-title-position: relative;\n --navigation-group-title-position-left: 0;\n --navigation-group-expand-toggle-padding: 0.25rem;\n --navigation-group-title-opacity: flex;\n}\n\n:host(.sm-collapsed.collapsed-labels.side-display) .side-navigation,\n:host(.sm-collapsed.collapsed-labels.side-display) .top-bar {\n width: var(--sm-side-navigation-collapsed-labels-width);\n}\n\n:host(.sm-collapsed.collapsed-labels.side-display) .menu-expand-button {\n padding: 0;\n}\n\n:host(.sm-collapsed.collapsed-labels.side-display) .app-title-wrapper {\n width: 100%;\n justify-content: center;\n}\n\n:host(.sm-collapsed.collapsed-labels.side-display)\n ::slotted(ic-navigation-group) {\n --navigation-group-justify-content: center;\n --navigation-item-label-opacity: 1;\n --navigation-group-item-min-width: 100%;\n --navigation-group-expand-toggle-padding: 1rem;\n}\n\n:host(.collapsed-labels.side-display) .bottom-side-nav .menu-expand-button {\n justify-content: center;\n}\n\n:host(.side-display) .collapsed-icon-labels-start {\n visibility: hidden;\n opacity: 0;\n}\n\n:host(.side-display) .collapsed-icon-labels-end {\n visibility: visible;\n opacity: 1;\n transition: visibility 0s, opacity var(--ic-easing-transition-slow);\n}\n\n/ Media Queries /\n\n@media screen and (min-width: 340px) {\n .app-icon-container {\n display: flex;\n }\n}\n\n@media screen and (min-width: 993px) {\n :host(.side-display) {\n position: sticky;\n left: auto;\n top: 0;\n bottom: 0;\n }\n\n :host(.sm-expanded.side-display) {\n box-shadow: none;\n }\n}\n\n@media (forced-colors: active) {\n .side-navigation,\n .top-bar {\n border-right: var(--ic-hc-border);\n }\n\n .menu-expand-button {\n color: Highlight !important;\n }\n\n slot[name=\"app-icon\"]::slotted(svg) {\n fill: currentcolor;\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n State,\n Element,\n Listen,\n Event,\n EventEmitter,\n Watch,\n} from \"@stencil/core\";\n\nimport menuIcon from \"../../assets/hamburger-menu-icon.svg\";\nimport closeIcon from \"../../assets/close-icon.svg\";\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\nimport {\n getCurrentDeviceSize,\n DEVICE_SIZES,\n checkResizeObserver,\n isSlotUsed,\n getThemeForegroundColor,\n getCssProperty,\n hasClassificationBanner,\n onComponentRequiredPropUndefined,\n isEmptyString,\n isPropDefined,\n} from \"../../utils/helpers\";\nimport {\n IcTheme,\n IcThemeForeground,\n IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport { IcTopBar, IcExpandedDetail } from \"./ic-side-navigation.types\";\n\n/\n @slot app-icon - Content will be rendered adjacent to the app title at the very top of the side navigation.\n * @slot app-title - Handle routing by nesting a route in the app title.\n * @slot primary-navigation - Content will be rendered at the top of the side navigation.\n * @slot secondary-navigation - Content will be rendered at the bottom of the side navigation.\n /\n\n@Component({\n tag: \"ic-side-navigation\",\n styleUrl: \"ic-side-navigation.css\",\n shadow: true,\n})\nexport class SideNavigation {\n private ANIMATION_DURATION =\n parseInt(getCssProperty(\"--ic-transition-duration-slow\")) \|\| 0;\n private IC_NAVIGATION_ITEM: string = \"ic-navigation-item\";\n private resizeObserver: ResizeObserver = null;\n private COLLAPSED_ICON_LABELS_END = \"collapsed-icon-labels-end\";\n private COLLAPSED_ICON_LABELS_START = \"collapsed-icon-labels-start\";\n private menuButton: HTMLIcButtonElement = null;\n\n @Element() el: HTMLIcSideNavigationElement;\n\n @State() deviceSize: number = getCurrentDeviceSize();\n @State() deviceSizeAppTitle: number = DEVICE_SIZES.S;\n @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n @State() hasSecondaryNavigation: boolean = false;\n @State() menuExpanded: boolean = false;\n @State() menuOpen: boolean = false;\n\n /\n The app title to be displayed. This is required, unless a slotted app title link is used.\n /\n @Prop() appTitle: string;\n\n /\n If `true`, the icon and label will appear when side navigation is collapsed.\n /\n @Prop() collapsedIconLabels: boolean = false;\n\n /\n If `true`, automatic parent wrapper styling will be disabled.\n /\n @Prop() disableAutoParentStyling: boolean = false;\n\n /\n If `true`, the side navigation will not display as a top bar on small devices.\n /\n @Prop() disableTopBarBehaviour: boolean = false;\n\n /\n If `true`, the side navigation will display in an expanded state.\n /\n @Prop() expanded: boolean = false;\n\n @Watch(\"expanded\")\n watchExpandedHandler(): void {\n this.setMenuExpanded(this.expanded);\n }\n\n /\n The URL that the app title link points to.\n /\n @Prop() href: string = \"/\";\n\n /\n @internal If `true`, side navigation will be contained by its parent element.\n /\n @Prop() inline: boolean = false;\n\n /\n The short title of the app to be displayed at small screen sizes in place of the app title.\n /\n @Prop() shortAppTitle: string = \"\";\n\n /\n If `true`, the menu expand button will be removed (PLEASE NOTE: This takes effect on screen sizes 992px and above).\n /\n @Prop() static: boolean = false;\n\n /\n The status of the app to be displayed.\n /\n @Prop() status: string;\n\n /\n The version of the app to be displayed.\n /\n @Prop() version: string;\n\n /\n Emitted when the side navigation is collapsed and expanded.\n /\n @Event() sideNavExpanded: EventEmitter<IcExpandedDetail>;\n\n componentWillLoad(): void {\n this.setMenuExpanded(this.expanded);\n\n if (this.collapsedIconLabels) {\n this.setCollapsedIconLabels();\n }\n\n this.hasSecondaryNavigation = isSlotUsed(this.el, \"secondary-navigation\");\n }\n\n componentDidLoad(): void {\n this.emitSideNavigationExpanded({\n sideNavExpanded: this.menuExpanded,\n sideNavMobile:\n this.deviceSize === DEVICE_SIZES.S && !this.disableTopBarBehaviour,\n });\n\n checkResizeObserver(this.runResizeObserver);\n this.styleSlottedCollapsedIconLabel();\n this.arrangeSlottedNavigationItem(this.menuExpanded);\n this.displayTooltipWithExpandedLongLabel(this.menuExpanded);\n\n this.setExpandedButtonHeight();\n\n !isSlotUsed(this.el, \"app-title\") &&\n onComponentRequiredPropUndefined(\n [{ prop: this.appTitle, propName: \"app-title\" }],\n \"Side Navigation\"\n );\n }\n\n disconnectedCallback(): void {\n if (this.resizeObserver !== null) {\n this.resizeObserver.disconnect();\n }\n\n this.el?.removeEventListener(\"transitionend\", this.transitionEndHandler);\n }\n\n @Listen(\"themeChange\", { target: \"document\" })\n themeChangeHandler({ detail }: CustomEvent): void {\n this.foregroundColor = (detail as IcTheme).mode;\n }\n\n private emitSideNavigationExpanded = (objDetails: {\n sideNavExpanded: boolean;\n sideNavMobile?: boolean;\n }): void => {\n this.sideNavExpanded.emit({\n sideNavExpanded: objDetails.sideNavExpanded,\n sideNavMobile: objDetails.sideNavMobile,\n });\n };\n\n private toggleMenu = (): void => {\n this.menuOpen = !this.menuOpen;\n this.setMobileMenuAriaAttributes(this.menuOpen);\n\n this.arrangeSlottedNavigationItem(this.menuOpen);\n\n this.setToggleMenuFlyoutMenuVisibility(this.menuOpen);\n\n this.emitSideNavigationExpanded({\n sideNavExpanded: this.menuOpen,\n sideNavMobile: true,\n });\n };\n\n private setToggleMenuFlyoutMenuVisibility = (menuOpen: boolean) => {\n const sideNav = this.el.shadowRoot.querySelector(\n \"#side-navigation\"\n ) as HTMLDivElement;\n const sideNavInner = sideNav.querySelector(\n \".side-navigation-inner\"\n ) as HTMLElement;\n const bottomWrapper = sideNav.querySelector(\n \".bottom-wrapper\"\n ) as HTMLElement;\n\n const menuVisibilityVisible = \"menu-visibility-visible\";\n\n if (menuOpen) {\n bottomWrapper.classList.add(menuVisibilityVisible);\n sideNavInner.classList.add(menuVisibilityVisible);\n } else {\n setTimeout(() => {\n sideNavInner.classList.remove(menuVisibilityVisible);\n bottomWrapper.classList.remove(menuVisibilityVisible);\n }, this.ANIMATION_DURATION);\n }\n };\n\n private setMobileMenuAriaAttributes = (menuOpen: boolean) => {\n if (this.menuButton !== null) {\n this.menuButton.setAttribute(\"aria-expanded\", `${menuOpen}`);\n this.menuButton.setAttribute(\n \"aria-label\",\n `${menuOpen ? \"Close\" : \"Open\"} navigation menu`\n );\n }\n };\n\n private setAndRemoveNoWrapAfterMenuExpanded = () => {\n const appTitle =\n this.el.shadowRoot.querySelector(\".title-link ic-typography\") \|\|\n this.el.querySelector(\"[slot='app-title']\");\n\n appTitle.classList.add(\"ic-typography-no-wrap\");\n\n setTimeout(() => {\n appTitle.classList.remove(\"ic-typography-no-wrap\");\n }, this.ANIMATION_DURATION);\n };\n\n private toggleMenuExpanded = (): void => {\n this.menuExpanded = !this.menuExpanded;\n\n if (this.menuExpanded) {\n this.setAndRemoveNoWrapAfterMenuExpanded();\n this.el.shadowRoot\n .querySelector(\".app-title-inner-wrapper\")\n .classList.add(\"app-title-show\");\n } else {\n this.el.style.setProperty(\"--navigation-item-width\", \"320px\");\n this.el.shadowRoot\n .querySelector(\".app-title-inner-wrapper\")\n .classList.remove(\"app-title-show\");\n\n this.el.addEventListener(\"transitionend\", (e) => {\n if (e.propertyName === \"width\") {\n this.el.style.setProperty(\"--navigation-item-width\", null);\n }\n });\n }\n\n this.arrangeSlottedNavigationItem(this.menuExpanded);\n\n this.displayTooltipWithExpandedLongLabel(this.menuExpanded);\n\n if (this.collapsedIconLabels) {\n this.animateCollapsedIconLabels();\n }\n\n this.setExpandedButtonHeight();\n this.emitSideNavigationExpanded({ sideNavExpanded: this.menuExpanded });\n };\n\n /\n In order to style nested slotted elements (e.g. using React Router components), this method\n * rearranges the a tag and labels and adds inline styling expand/collapsed animations as external CSS classes are not\n * do not take affect.\n * @param menuExpanded boolean - true or false depending on side navigation state\n /\n private arrangeSlottedNavigationItem = (menuExpanded?: boolean) => {\n const navItems = this.el.querySelectorAll(\"ic-navigation-item\");\n navItems.forEach((navItem) => {\n const isNamedSlot = isSlotUsed(navItem, \"navigation-item\");\n const isUnnamedSlot =\n navItem.children[0] && !navItem.children[0].getAttribute(\"slot\");\n if (isNamedSlot \|\| isUnnamedSlot) {\n let navItemSlot;\n if (isNamedSlot) {\n navItemSlot = navItem.querySelector(\"[slot='navigation-item']\");\n } else {\n navItemSlot = navItem.children[0];\n }\n const iconWrapper = document.createElement(\"div\");\n const icon = navItemSlot.querySelector(\"svg\");\n const label = navItem.textContent.trim();\n const icTypography = document.createElement(\"ic-typography\");\n icTypography.classList.add(\n \"ic-typography-label\",\n \"hydrated\",\n \"navigation-item-side-nav-slotted-text\"\n );\n\n iconWrapper.style.height = \"var(--ic-space-lg)\";\n iconWrapper.append(icon);\n\n navItemSlot.textContent = \"\";\n\n icTypography.textContent = label;\n\n navItemSlot.append(iconWrapper);\n navItemSlot.append(icTypography);\n\n if (this.collapsedIconLabels) {\n this.styleSlottedCollapsedIconLabels(menuExpanded, icTypography);\n } else {\n this.styleSlottedIconLabels(menuExpanded, icTypography);\n }\n }\n });\n };\n\n private styleSlottedCollapsedIconLabels = (\n menuExpanded: boolean,\n icTypography: HTMLIcTypographyElement\n ) => {\n if (menuExpanded) {\n icTypography.style.marginTop = \"0\";\n icTypography.style.whiteSpace = \"nowrap\";\n icTypography.style.overflow = \"hidden\";\n icTypography.style.textOverflow = \"ellipsis\";\n } else {\n icTypography.style.marginTop = \"10px\";\n icTypography.style.whiteSpace = \"nowrap\";\n icTypography.style.overflow = \"hidden\";\n icTypography.style.textOverflow = \"ellipsis\";\n }\n };\n\n private setExpandedButtonHeight = () => {\n const appStatusWrapper = this.el.shadowRoot.querySelector(\n \"#side-navigation > .bottom-wrapper > .bottom-side-nav > .app-status-wrapper\"\n ) as HTMLDivElement;\n\n if (appStatusWrapper.offsetHeight !== 0) {\n this.el.style.setProperty(\n \"--sm-side-navigation-bottom-bar-height\",\n `${appStatusWrapper.offsetHeight}px`\n );\n }\n };\n\n private styleSlottedIconLabels = (\n menuExpanded: boolean,\n icTypography: HTMLSpanElement\n ) => {\n if (menuExpanded) {\n icTypography.style.opacity = \"1\";\n icTypography.style.visibility = \"visible\";\n icTypography.style.transition =\n \"visibility 0s, opacity var(--ic-easing-transition-slow)\";\n } else {\n icTypography.style.opacity = \"0\";\n icTypography.style.visibility = \"hidden\";\n icTypography.style.transition =\n \"visibility 0s, opacity var(--ic-easing-transition-slow)\";\n }\n };\n\n private transitionHandler = (type: string) => {\n const primaryNavigationWrapper = this.el.shadowRoot.querySelector(\n \".primary-navigation\"\n );\n\n const secondaryNavigationWrapper = this.el.shadowRoot.querySelector(\n \".bottom-wrapper > .secondary-navigation\"\n );\n\n const classToRemove =\n type === \"start\"\n ? this.COLLAPSED_ICON_LABELS_END\n : this.COLLAPSED_ICON_LABELS_START;\n\n const classToAdd =\n type === \"start\"\n ? this.COLLAPSED_ICON_LABELS_START\n : this.COLLAPSED_ICON_LABELS_END;\n\n if (primaryNavigationWrapper) {\n primaryNavigationWrapper.classList.remove(classToRemove);\n primaryNavigationWrapper.classList.add(classToAdd);\n }\n\n if (secondaryNavigationWrapper) {\n secondaryNavigationWrapper.classList.remove(classToRemove);\n secondaryNavigationWrapper.classList.add(classToAdd);\n }\n };\n\n private transitionEndHandler = () => {\n this.transitionHandler(\"end\");\n };\n\n private animateCollapsedIconLabels = () => {\n this.transitionHandler(\"start\");\n this.transitionEndHandler();\n\n this.el.addEventListener(\"transitionend\", this.transitionEndHandler);\n };\n\n private paddingIconWidth = (\n navItems: HTMLIcNavigationItemElement[]\n ): number => {\n const navItemLink =\n (navItems[0].shadowRoot &&\n (navItems[0].shadowRoot.querySelector(\"ic-tooltip a\") \|\|\n navItems[0].shadowRoot.querySelector(\"ic-tooltip div\"))) \|\|\n navItems[0].querySelector(\"a\") \|\|\n navItems[0].querySelector(\"div\");\n const navItemSVG = navItems[0].querySelector(\"svg\");\n\n const navStyles = {\n gap: window.getComputedStyle(navItemLink).gap,\n iconWidth: window.getComputedStyle(navItemSVG).width,\n paddingLeft: window.getComputedStyle(navItemLink).paddingLeft,\n };\n\n return Object.values(navStyles).reduce((prev, curr) => {\n return (prev += parseInt(curr));\n }, 0);\n };\n\n private displayTooltipWithExpandedLongLabel = (menuExpanded: boolean) => {\n let timer;\n\n if (menuExpanded) {\n timer = setTimeout(() => {\n const sideNavWidth = this.el.clientWidth;\n\n const navigationItems: HTMLIcNavigationItemElement[] = Array.from(\n this.el.querySelectorAll(this.IC_NAVIGATION_ITEM)\n );\n\n const paddingIconDelta = navigationItems.length\n ? this.paddingIconWidth(navigationItems)\n : 0;\n\n navigationItems.forEach(\n (navigationItem: HTMLIcNavigationItemElement) => {\n const icTypographyScrollWidth =\n (\n navigationItem.shadowRoot &&\n navigationItem.shadowRoot.querySelector(\n \"ic-tooltip .link ic-typography.ic-typography-label\"\n )\n )?.scrollWidth \|\|\n navigationItem.querySelector(\"ic-typography.ic-typography-label\")\n ?.scrollWidth;\n\n if (icTypographyScrollWidth > sideNavWidth - paddingIconDelta) {\n navigationItem.setAttribute(\"display-navigation-tooltip\", \"true\");\n }\n }\n );\n }, this.ANIMATION_DURATION);\n } else {\n clearTimeout(timer);\n\n const navigationItems: HTMLIcNavigationItemElement[] = Array.from(\n this.el.querySelectorAll(this.IC_NAVIGATION_ITEM)\n );\n navigationItems.forEach((navigationItem: HTMLIcNavigationItemElement) => {\n navigationItem.setAttribute(\"display-navigation-tooltip\", \"false\");\n });\n }\n };\n\n private setMenuExpanded = (expanded: boolean): void => {\n this.menuExpanded = expanded;\n };\n\n /\n As the mobile top bar is fixed, a padding top is required\n * to push main content down the height of the mobile top bar\n * @param value - padding-top css value\n /\n private setParentPaddingTop = (value: string) => {\n this.el.parentElement.style.setProperty(\"padding-top\", value);\n };\n\n private setParentPaddingLeft = (value: string) => {\n this.el.parentElement.style.setProperty(\"padding-left\", value);\n };\n\n private renderAppTitle = (isAppNameSubtitleVariant: boolean) => {\n const displayShortAppTitle =\n this.deviceSize <= DEVICE_SIZES.S && !isEmptyString(this.shortAppTitle);\n return (\n <ic-typography\n variant={\n displayShortAppTitle \|\| isAppNameSubtitleVariant\n ? \"subtitle-small\"\n : \"h3\"\n }\n aria-label={\n displayShortAppTitle\n ? `${this.appTitle} (${this.shortAppTitle})`\n : undefined\n }\n >\n <h1>{displayShortAppTitle ? this.shortAppTitle : this.appTitle}</h1>\n </ic-typography>\n );\n };\n\n private resizeObserverCallback = (currSize: number) => {\n this.deviceSize = currSize;\n\n const isSmallAndDisableTopBar =\n currSize === DEVICE_SIZES.S && !this.disableTopBarBehaviour;\n\n if (!this.disableAutoParentStyling) {\n const topBarHeight =\n this.el.shadowRoot.querySelector(\".top-bar\")?.scrollHeight;\n this.setParentPaddingTop(\n isSmallAndDisableTopBar ? `${topBarHeight}px` : \"0\"\n );\n if (isSmallAndDisableTopBar) this.setParentPaddingLeft(\"0\");\n if (isSmallAndDisableTopBar && this.inline) {\n this.el.parentElement.style.setProperty(\n \"height\",\n `calc(100% - ${topBarHeight}px)`\n );\n } else if (!isSmallAndDisableTopBar) {\n this.el.parentElement.style.setProperty(\"height\", \"100%\");\n }\n }\n\n if (!this.disableAutoParentStyling) {\n const paddingLeft = `calc(var(--ic-space-xxl) ${\n this.collapsedIconLabels ? \" 2\" : \"+ var(--ic-space-xs)\"\n })`;\n\n if (currSize > DEVICE_SIZES.L) {\n this.setParentPaddingTop(\"0\");\n this.setParentPaddingLeft(\"0\");\n } else if (\n (currSize > DEVICE_SIZES.S \|\| this.disableTopBarBehaviour) &&\n currSize <= DEVICE_SIZES.M &&\n this.static\n ) {\n this.setParentPaddingLeft(paddingLeft);\n } else if (\n (currSize > DEVICE_SIZES.S \|\| this.disableTopBarBehaviour) &&\n currSize <= DEVICE_SIZES.L\n ) {\n this.setParentPaddingLeft(\n this.static && this.menuExpanded\n ? \"calc(var(--ic-space-xl) * 10)\"\n : paddingLeft\n );\n }\n }\n };\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n const currSize = getCurrentDeviceSize();\n this.deviceSizeAppTitle = currSize;\n this.resizeObserverCallback(currSize);\n });\n\n this.resizeObserver.observe(document.body, { box: \"content-box\" });\n };\n\n private setCollapsedIconLabels = () => {\n const navigationItems: HTMLIcNavigationItemElement[] = Array.from(\n this.el.querySelectorAll(this.IC_NAVIGATION_ITEM)\n );\n navigationItems.forEach((navigationItem: HTMLIcNavigationItemElement) => {\n navigationItem.setAttribute(\"collapsed-icon-label\", \"true\");\n });\n };\n\n private styleSlottedCollapsedIconLabel = () => {\n const dynamicSlottedIcTypographyComps: HTMLIcTypographyElement[] =\n Array.from(\n this.el.querySelectorAll(\".navigation-item-side-nav-slotted-text\")\n );\n\n dynamicSlottedIcTypographyComps.forEach((icTypography) => {\n if (\n icTypography?.parentElement?.parentElement?.classList.contains(\n \"navigation-item-side-nav-collapsed-with-label\"\n )\n ) {\n icTypography.style.whiteSpace = \"nowrap\";\n icTypography.style.overflow = \"hidden\";\n icTypography.style.textOverflow = \"ellipsis\";\n icTypography.style.marginTop = \"10px\";\n }\n });\n };\n\n private renderTopBar = ({\n isSDevice,\n foregroundColor,\n menuOpen,\n href,\n isAppNameSubtitleVariant,\n }: IcTopBar) => {\n const hasTitle = this.appTitle !== \"\" && isPropDefined(this.appTitle);\n\n const Component = isSlotUsed(this.el, \"app-title\") ? \"div\" : \"a\";\n\n const attrs = Component == \"a\" && {\n href: href,\n };\n\n return (\n <div\n class={{\n \"top-bar\": true,\n [this.foregroundColor]: true,\n }}\n >\n {isSDevice && (\n <nav\n aria-labelledby=\"menu-navigation-toggle-button-landmark\"\n aria-hidden=\"false\"\n >\n <ic-button\n aria-label=\"Open navigation menu\"\n class=\"menu-button\"\n id=\"menu-button\"\n variant=\"secondary\"\n size=\"small\"\n full-width=\"true\"\n appearance={foregroundColor}\n onClick={this.toggleMenu}\n ariaOwnsId=\"side-navigation\"\n aria-haspopup=\"true\"\n aria-expanded=\"false\"\n ref={(el) => (this.menuButton = el)}\n >\n <span\n class=\"mobile-top-bar-menu-icon\"\n slot=\"icon\"\n innerHTML={menuOpen ? closeIcon : menuIcon}\n ></span>\n {menuOpen ? \"Close\" : \"Menu\"}\n </ic-button>\n <span\n id=\"menu-navigation-toggle-button-landmark\"\n class=\"navigation-landmark-title\"\n aria-hidden=\"true\"\n >\n Navigation menu toggle button\n </span>\n </nav>\n )}\n <div class=\"app-title-wrapper\">\n {(hasTitle \|\| isSlotUsed(this.el, \"app-title\")) && (\n <Component {...attrs} class=\"title-link\">\n <div class=\"app-icon-container\" aria-hidden=\"true\">\n <slot name=\"app-icon\"></slot>\n </div>\n <div class=\"app-title-inner-wrapper\">\n {isSlotUsed(this.el, \"app-title\") ? (\n <slot name=\"app-title\"></slot>\n ) : (\n this.renderAppTitle(isAppNameSubtitleVariant)\n )}\n </div>\n </Component>\n )}\n </div>\n </div>\n );\n };\n\n render() {\n const {\n appTitle,\n menuOpen,\n foregroundColor,\n menuExpanded,\n href,\n status,\n version,\n collapsedIconLabels,\n inline,\n } = this;\n\n const isSDevice =\n !this.disableTopBarBehaviour && this.deviceSize === DEVICE_SIZES.S;\n const isMdDevice = this.deviceSize === DEVICE_SIZES.M;\n const isLgDevice = this.deviceSize >= DEVICE_SIZES.L;\n const isAppNameSubtitleVariant = this.deviceSizeAppTitle === DEVICE_SIZES.S;\n const displayExpandBtn =\n isMdDevice \|\| this.disableTopBarBehaviour \|\| (isLgDevice && !this.static);\n\n const topBarProps: IcTopBar = {\n isSDevice,\n foregroundColor,\n menuOpen,\n href,\n isAppNameSubtitleVariant,\n appTitle,\n };\n\n return (\n <Host\n class={{\n \"xs-menu-open\": menuOpen && isSDevice,\n \"xs-menu-close\": !menuOpen && isSDevice,\n \"sm-collapsed\": !isSDevice && !menuExpanded,\n \"sm-expanded\": !isSDevice && menuExpanded,\n \"side-display\":\n this.deviceSize > DEVICE_SIZES.S \|\| this.disableTopBarBehaviour,\n [IcThemeForegroundEnum.Dark]:\n foregroundColor === IcThemeForegroundEnum.Dark,\n [\"collapsed-labels\"]:\n !isSDevice && !menuExpanded && collapsedIconLabels,\n [\"inline\"]: inline,\n }}\n >\n {isSDevice && this.renderTopBar({ ...topBarProps })}\n <div class=\"side-navigation\" id=\"side-navigation\">\n {!isSDevice && this.renderTopBar({ ...topBarProps })}\n <div class=\"side-navigation-inner\">\n {isSlotUsed(this.el, \"primary-navigation\") && (\n <nav\n class=\"primary-navigation\"\n aria-labelledby=\"primary-navigation-landmark\"\n >\n <span\n aria-hidden=\"true\"\n class=\"navigation-landmark-title\"\n id=\"primary-navigation-landmark\"\n >\n Primary\n </span>\n <ul class=\"navigation-list\">\n <slot name=\"primary-navigation\"></slot>\n </ul>\n </nav>\n )}\n </div>\n <div\n class={{\n [\"bottom-wrapper\"]: true,\n [\"classification-spacing\"]: hasClassificationBanner(),\n }}\n >\n {isSlotUsed(this.el, \"secondary-navigation\") && (\n <nav\n class=\"secondary-navigation\"\n aria-labelledby=\"secondary-navigation-landmark\"\n >\n <span\n aria-hidden=\"true\"\n class=\"navigation-landmark-title\"\n id=\"secondary-navigation-landmark\"\n >\n Secondary\n </span>\n <ul class=\"navigation-list\">\n <slot name=\"secondary-navigation\"></slot>\n </ul>\n </nav>\n )}\n <div class=\"bottom-side-nav\">\n {this.hasSecondaryNavigation && <ic-divider></ic-divider>}\n {displayExpandBtn && (\n <button\n class=\"menu-expand-button\"\n innerHTML={chevronIcon}\n onClick={this.toggleMenuExpanded}\n aria-label={`${\n menuExpanded ? \"Collapse\" : \"Expand\"\n } side navigation`}\n ></button>\n )}\n <div class=\"app-status-wrapper\">\n {status !== \"\" && (\n <div\n class={{\n [\"app-status\"]: true,\n }}\n >\n <ic-typography\n aria-label=\"app tag\"\n variant=\"label-uppercase\"\n class=\"app-status-text\"\n >\n {status}\n </ic-typography>\n </div>\n )}\n {version !== \"\" && (\n <ic-typography\n variant=\"label\"\n class=\"app-version\"\n aria-label=\"app version\"\n >\n {version}\n </ic-typography>\n )}\n </div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"0fAAA,MAAMA,EAAsB,kpa,MC+CfC,EAAc,M,0EACjBC,KAAAC,mBACNC,SAASC,EAAe,mCAAqC,EACvDH,KAAAI,mBAA6B,qBAC7BJ,KAAAK,eAAiC,KACjCL,KAAAM,0BAA4B,4BAC5BN,KAAAO,4BAA8B,8BAC9BP,KAAAQ,WAAkC,KAwHlCR,KAAAS,2BAA8BC,IAIpCV,KAAKW,gBAAgBC,KAAK,CACxBD,gBAAiBD,EAAWC,gBAC5BE,cAAeH,EAAWG,eAC1B,EAGIb,KAAAc,WAAa,KACnBd,KAAKe,UAAYf,KAAKe,SACtBf,KAAKgB,4BAA4BhB,KAAKe,UAEtCf,KAAKiB,6BAA6BjB,KAAKe,UAEvCf,KAAKkB,kCAAkClB,KAAKe,UAE5Cf,KAAKS,2BAA2B,CAC9BE,gBAAiBX,KAAKe,SACtBF,cAAe,MACf,EAGIb,KAAAkB,kCAAqCH,IAC3C,MAAMI,EAAUnB,KAAKoB,GAAGC,WAAWC,cACjC,oBAEF,MAAMC,EAAeJ,EAAQG,cAC3B,0BAEF,MAAME,EAAgBL,EAAQG,cAC5B,mBAGF,MAAMG,EAAwB,0BAE9B,GAAIV,EAAU,CACZS,EAAcE,UAAUC,IAAIF,GAC5BF,EAAaG,UAAUC,IAAIF,E,KACtB,CACLG,YAAW,KACTL,EAAaG,UAAUG,OAAOJ,GAC9BD,EAAcE,UAAUG,OAAOJ,EAAsB,GACpDzB,KAAKC,mB,GAIJD,KAAAgB,4BAA+BD,IACrC,GAAIf,KAAKQ,aAAe,KAAM,CAC5BR,KAAKQ,WAAWsB,aAAa,gBAAiB,GAAGf,KACjDf,KAAKQ,WAAWsB,aACd,aACA,GAAGf,EAAW,QAAU,yB,GAKtBf,KAAA+B,oCAAsC,KAC5C,MAAMC,EACJhC,KAAKoB,GAAGC,WAAWC,cAAc,8BACjCtB,KAAKoB,GAAGE,cAAc,sBAExBU,EAASN,UAAUC,IAAI,yBAEvBC,YAAW,KACTI,EAASN,UAAUG,OAAO,wBAAwB,GACjD7B,KAAKC,mBAAmB,EAGrBD,KAAAiC,mBAAqB,KAC3BjC,KAAKkC,cAAgBlC,KAAKkC,aAE1B,GAAIlC,KAAKkC,aAAc,CACrBlC,KAAK+B,sCACL/B,KAAKoB,GAAGC,WACLC,cAAc,4BACdI,UAAUC,IAAI,iB,KACZ,CACL3B,KAAKoB,GAAGe,MAAMC,YAAY,0BAA2B,SACrDpC,KAAKoB,GAAGC,WACLC,cAAc,4BACdI,UAAUG,OAAO,kBAEpB7B,KAAKoB,GAAGiB,iBAAiB,iBAAkBC,IACzC,GAAIA,EAAEC,eAAiB,QAAS,CAC9BvC,KAAKoB,GAAGe,MAAMC,YAAY,0BAA2B,K,KAK3DpC,KAAKiB,6BAA6BjB,KAAKkC,cAEvClC,KAAKwC,oCAAoCxC,KAAKkC,cAE9C,GAAIlC,KAAKyC,oBAAqB,CAC5BzC,KAAK0C,4B,CAGP1C,KAAK2C,0BACL3C,KAAKS,2BAA2B,CAAEE,gBAAiBX,KAAKkC,cAAe,EASjElC,KAAAiB,6BAAgCiB,IACtC,MAAMU,EAAW5C,KAAKoB,GAAGyB,iBAAiB,sBAC1CD,EAASE,SAASC,IAChB,MAAMC,EAAcC,EAAWF,EAAS,mBACxC,MAAMG,EACJH,EAAQI,SAAS,KAAOJ,EAAQI,SAAS,GAAGC,aAAa,QAC3D,GAAIJ,GAAeE,EAAe,CAChC,IAAIG,EACJ,GAAIL,EAAa,CACfK,EAAcN,EAAQzB,cAAc,2B,KAC/B,CACL+B,EAAcN,EAAQI,SAAS,E,CAEjC,MAAMG,EAAcC,SAASC,cAAc,OAC3C,MAAMC,EAAOJ,EAAY/B,cAAc,OACvC,MAAMoC,EAAQX,EAAQY,YAAYC,OAClC,MAAMC,EAAeN,SAASC,cAAc,iBAC5CK,EAAanC,UAAUC,IACrB,sBACA,WACA,yCAGF2B,EAAYnB,MAAM2B,OAAS,qBAC3BR,EAAYS,OAAON,GAEnBJ,EAAYM,YAAc,GAE1BE,EAAaF,YAAcD,EAE3BL,EAAYU,OAAOT,GACnBD,EAAYU,OAAOF,GAEnB,GAAI7D,KAAKyC,oBAAqB,CAC5BzC,KAAKgE,gCAAgC9B,EAAc2B,E,KAC9C,CACL7D,KAAKiE,uBAAuB/B,EAAc2B,E,KAG9C,EAGI7D,KAAAgE,gCAAkC,CACxC9B,EACA2B,KAEA,GAAI3B,EAAc,CAChB2B,EAAa1B,MAAM+B,UAAY,IAC/BL,EAAa1B,MAAMgC,WAAa,SAChCN,EAAa1B,MAAMiC,SAAW,SAC9BP,EAAa1B,MAAMkC,aAAe,U,KAC7B,CACLR,EAAa1B,MAAM+B,UAAY,OAC/BL,EAAa1B,MAAMgC,WAAa,SAChCN,EAAa1B,MAAMiC,SAAW,SAC9BP,EAAa1B,MAAMkC,aAAe,U,GAI9BrE,KAAA2C,wBAA0B,KAChC,MAAM2B,EAAmBtE,KAAKoB,GAAGC,WAAWC,cAC1C,+EAGF,GAAIgD,EAAiBC,eAAiB,EAAG,CACvCvE,KAAKoB,GAAGe,MAAMC,YACZ,yCACA,GAAGkC,EAAiBC,iB,GAKlBvE,KAAAiE,uBAAyB,CAC/B/B,EACA2B,KAEA,GAAI3B,EAAc,CAChB2B,EAAa1B,MAAMqC,QAAU,IAC7BX,EAAa1B,MAAMsC,WAAa,UAChCZ,EAAa1B,MAAMuC,WACjB,yD,KACG,CACLb,EAAa1B,MAAMqC,QAAU,IAC7BX,EAAa1B,MAAMsC,WAAa,SAChCZ,EAAa1B,MAAMuC,WACjB,yD,GAIE1E,KAAA2E,kBAAqBC,IAC3B,MAAMC,EAA2B7E,KAAKoB,GAAGC,WAAWC,cAClD,uBAGF,MAAMwD,EAA6B9E,KAAKoB,GAAGC,WAAWC,cACpD,2CAGF,MAAMyD,EACJH,IAAS,QACL5E,KAAKM,0BACLN,KAAKO,4BAEX,MAAMyE,EACJJ,IAAS,QACL5E,KAAKO,4BACLP,KAAKM,0BAEX,GAAIuE,EAA0B,CAC5BA,EAAyBnD,UAAUG,OAAOkD,GAC1CF,EAAyBnD,UAAUC,IAAIqD,E,CAGzC,GAAIF,EAA4B,CAC9BA,EAA2BpD,UAAUG,OAAOkD,GAC5CD,EAA2BpD,UAAUC,IAAIqD,E,GAIrChF,KAAAiF,qBAAuB,KAC7BjF,KAAK2E,kBAAkB,MAAM,EAGvB3E,KAAA0C,2BAA6B,KACnC1C,KAAK2E,kBAAkB,SACvB3E,KAAKiF,uBAELjF,KAAKoB,GAAGiB,iBAAiB,gBAAiBrC,KAAKiF,qBAAqB,EAG9DjF,KAAAkF,iBACNtC,IAEA,MAAMuC,EACHvC,EAAS,GAAGvB,aACVuB,EAAS,GAAGvB,WAAWC,cAAc,iBACpCsB,EAAS,GAAGvB,WAAWC,cAAc,oBACzCsB,EAAS,GAAGtB,cAAc,MAC1BsB,EAAS,GAAGtB,cAAc,OAC5B,MAAM8D,EAAaxC,EAAS,GAAGtB,cAAc,OAE7C,MAAM+D,EAAY,CAChBC,IAAKC,OAAOC,iBAAiBL,GAAaG,IAC1CG,UAAWF,OAAOC,iBAAiBJ,GAAYM,MAC/CC,YAAaJ,OAAOC,iBAAiBL,GAAaQ,aAGpD,OAAOC,OAAOC,OAAOR,GAAWS,QAAO,CAACC,EAAMC,IACpCD,GAAQ7F,SAAS8F,IACxB,EAAE,EAGChG,KAAAwC,oCAAuCN,IAC7C,IAAI+D,EAEJ,GAAI/D,EAAc,CAChB+D,EAAQrE,YAAW,KACjB,MAAMsE,EAAelG,KAAKoB,GAAG+E,YAE7B,MAAMC,EAAiDC,MAAMC,KAC3DtG,KAAKoB,GAAGyB,iBAAiB7C,KAAKI,qBAGhC,MAAMmG,EAAmBH,EAAgBI,OACrCxG,KAAKkF,iBAAiBkB,GACtB,EAEJA,EAAgBtD,SACb2D,I,QACC,MAAMC,IACJC,EACEF,EAAepF,YACfoF,EAAepF,WAAWC,cACxB,yDAEH,MAAAqF,SAAA,SAAAA,EAAEC,gBACHC,EAAAJ,EAAenF,cAAc,wCAAoC,MAAAuF,SAAA,SAAAA,EAC7DD,aAEN,GAAIF,EAA0BR,EAAeK,EAAkB,CAC7DE,EAAe3E,aAAa,6BAA8B,O,IAG/D,GACA9B,KAAKC,mB,KACH,CACL6G,aAAab,GAEb,MAAMG,EAAiDC,MAAMC,KAC3DtG,KAAKoB,GAAGyB,iBAAiB7C,KAAKI,qBAEhCgG,EAAgBtD,SAAS2D,IACvBA,EAAe3E,aAAa,6BAA8B,QAAQ,G,GAKhE9B,KAAA+G,gBAAmBC,IACzBhH,KAAKkC,aAAe8E,CAAQ,EAQtBhH,KAAAiH,oBAAuBC,IAC7BlH,KAAKoB,GAAG+F,cAAchF,MAAMC,YAAY,cAAe8E,EAAM,EAGvDlH,KAAAoH,qBAAwBF,IAC9BlH,KAAKoB,GAAG+F,cAAchF,MAAMC,YAAY,eAAgB8E,EAAM,EAGxDlH,KAAAqH,eAAkBC,IACxB,MAAMC,EACJvH,KAAKwH,YAAcC,EAAaC,IAAMC,EAAc3H,KAAK4H,eAC3D,OACEC,EAAA,iBACEC,QACEP,GAAwBD,EACpB,iBACA,KAAI,aAGRC,EACI,GAAGvH,KAAKgC,aAAahC,KAAK4H,iBAC1BG,WAGNF,EAAA,UAAKN,EAAuBvH,KAAK4H,cAAgB5H,KAAKgC,UACxC,EAIZhC,KAAAgI,uBAA0BC,I,MAChCjI,KAAKwH,WAAaS,EAElB,MAAMC,EACJD,IAAaR,EAAaC,IAAM1H,KAAKmI,uBAEvC,IAAKnI,KAAKoI,yBAA0B,CAClC,MAAMC,GACJ1B,EAAA3G,KAAKoB,GAAGC,WAAWC,cAAc,eAAW,MAAAqF,SAAA,SAAAA,EAAE2B,aAChDtI,KAAKiH,oBACHiB,EAA0B,GAAGG,MAAmB,KAElD,GAAIH,EAAyBlI,KAAKoH,qBAAqB,KACvD,GAAIc,GAA2BlI,KAAKuI,OAAQ,CAC1CvI,KAAKoB,GAAG+F,cAAchF,MAAMC,YAC1B,SACA,eAAeiG,O,MAEZ,IAAKH,EAAyB,CACnClI,KAAKoB,GAAG+F,cAAchF,MAAMC,YAAY,SAAU,O,EAItD,IAAKpC,KAAKoI,yBAA0B,CAClC,MAAMzC,EAAc,4BAClB3F,KAAKyC,oBAAsB,MAAQ,0BAGrC,GAAIwF,EAAWR,EAAae,EAAG,CAC7BxI,KAAKiH,oBAAoB,KACzBjH,KAAKoH,qBAAqB,I,MACrB,IACJa,EAAWR,EAAaC,GAAK1H,KAAKmI,yBACnCF,GAAYR,EAAagB,GACzBzI,KAAK0I,OACL,CACA1I,KAAKoH,qBAAqBzB,E,MACrB,IACJsC,EAAWR,EAAaC,GAAK1H,KAAKmI,yBACnCF,GAAYR,EAAae,EACzB,CACAxI,KAAKoH,qBACHpH,KAAK0I,QAAU1I,KAAKkC,aAChB,gCACAyD,E,IAMJ3F,KAAA2I,kBAAoB,KAC1B3I,KAAKK,eAAiB,IAAIuI,gBAAe,KACvC,MAAMX,EAAWY,IACjB7I,KAAK8I,mBAAqBb,EAC1BjI,KAAKgI,uBAAuBC,EAAS,IAGvCjI,KAAKK,eAAe0I,QAAQxF,SAASyF,KAAM,CAAEC,IAAK,eAAgB,EAG5DjJ,KAAAkJ,uBAAyB,KAC/B,MAAM9C,EAAiDC,MAAMC,KAC3DtG,KAAKoB,GAAGyB,iBAAiB7C,KAAKI,qBAEhCgG,EAAgBtD,SAAS2D,IACvBA,EAAe3E,aAAa,uBAAwB,OAAO,GAC3D,EAGI9B,KAAAmJ,+BAAiC,KACvC,MAAMC,EACJ/C,MAAMC,KACJtG,KAAKoB,GAAGyB,iBAAiB,2CAG7BuG,EAAgCtG,SAASe,I,QACvC,IACEgD,GAAAF,EAAA9C,IAAY,MAAZA,SAAY,SAAZA,EAAcsD,iBAAa,MAAAR,SAAA,SAAAA,EAAEQ,iBAAa,MAAAN,SAAA,SAAAA,EAAEnF,UAAU2H,SACpD,iDAEF,CACAxF,EAAa1B,MAAMgC,WAAa,SAChCN,EAAa1B,MAAMiC,SAAW,SAC9BP,EAAa1B,MAAMkC,aAAe,WAClCR,EAAa1B,MAAM+B,UAAY,M,IAEjC,EAGIlE,KAAAsJ,aAAe,EACrBC,YACAC,kBACAzI,WACA0I,OACAnC,+BAEA,MAAMoC,EAAW1J,KAAKgC,WAAa,IAAM2H,EAAc3J,KAAKgC,UAE5D,MAAM4H,EAAY3G,EAAWjD,KAAKoB,GAAI,aAAe,MAAQ,IAE7D,MAAMyI,EAAQD,GAAa,KAAO,CAChCH,KAAMA,GAGR,OACE5B,EAAA,OACEiC,MAAO,CACL,UAAW,KACX,CAAC9J,KAAKwJ,iBAAkB,OAGzBD,GACC1B,EAAA,yBACkB,yCAAwC,cAC5C,SAEZA,EAAA,0BACa,uBACXiC,MAAM,cACNC,GAAG,cACHjC,QAAQ,YACRkC,KAAK,QAAO,aACD,OACXC,WAAYT,EACZU,QAASlK,KAAKc,WACdqJ,WAAW,kBAAiB,gBACd,OAAM,gBACN,QACdC,IAAMhJ,GAAQpB,KAAKQ,WAAaY,GAEhCyG,EAAA,QACEiC,MAAM,2BACNO,KAAK,OACLC,UAAWvJ,EAAWwJ,EAAYC,IAEnCzJ,EAAW,QAAU,QAExB8G,EAAA,QACEkC,GAAG,yCACHD,MAAM,4BAA2B,cACrB,QAAM,kCAMxBjC,EAAA,OAAKiC,MAAM,sBACPJ,GAAYzG,EAAWjD,KAAKoB,GAAI,eAChCyG,EAAC+B,EAAShE,OAAA6E,OAAA,GAAKZ,EAAK,CAAEC,MAAM,eAC1BjC,EAAA,OAAKiC,MAAM,qBAAoB,cAAa,QAC1CjC,EAAA,QAAM6C,KAAK,cAEb7C,EAAA,OAAKiC,MAAM,2BACR7G,EAAWjD,KAAKoB,GAAI,aACnByG,EAAA,QAAM6C,KAAK,cAEX1K,KAAKqH,eAAeC,MAM1B,E,gBA9mBoBuB,I,wBACQpB,EAAaC,E,qBACLiD,I,4BACH,M,kBACV,M,cACJ,M,iDAUU,M,8BAKK,M,4BAKF,M,cAKd,M,UAUL,I,YAKG,M,mBAKM,G,YAKN,M,6CAtB1B,oBAAAC,GACE5K,KAAK+G,gBAAgB/G,KAAKgH,S,CAsC5B,iBAAA6D,GACE7K,KAAK+G,gBAAgB/G,KAAKgH,UAE1B,GAAIhH,KAAKyC,oBAAqB,CAC5BzC,KAAKkJ,wB,CAGPlJ,KAAK8K,uBAAyB7H,EAAWjD,KAAKoB,GAAI,uB,CAGpD,gBAAA2J,GACE/K,KAAKS,2BAA2B,CAC9BE,gBAAiBX,KAAKkC,aACtBrB,cACEb,KAAKwH,aAAeC,EAAaC,IAAM1H,KAAKmI,yBAGhD6C,EAAoBhL,KAAK2I,mBACzB3I,KAAKmJ,iCACLnJ,KAAKiB,6BAA6BjB,KAAKkC,cACvClC,KAAKwC,oCAAoCxC,KAAKkC,cAE9ClC,KAAK2C,2BAEJM,EAAWjD,KAAKoB,GAAI,cACnB6J,EACE,CAAC,CAAEC,KAAMlL,KAAKgC,SAAUmJ,SAAU,cAClC,kB,CAIN,oBAAAC,G,MACE,GAAIpL,KAAKK,iBAAmB,KAAM,CAChCL,KAAKK,eAAegL,Y,EAGtB1E,EAAA3G,KAAKoB,MAAE,MAAAuF,SAAA,SAAAA,EAAE2E,oBAAoB,gBAAiBtL,KAAKiF,qB,CAIrD,kBAAAsG,EAAmBC,OAAEA,IACnBxL,KAAKwJ,gBAAmBgC,EAAmBC,I,CAigB7C,MAAAC,GACE,MAAM1J,SACJA,EAAQjB,SACRA,EAAQyI,gBACRA,EAAetH,aACfA,EAAYuH,KACZA,EAAIkC,OACJA,EAAMC,QACNA,EAAOnJ,oBACPA,EAAmB8F,OACnBA,GACEvI,KAEJ,MAAMuJ,GACHvJ,KAAKmI,wBAA0BnI,KAAKwH,aAAeC,EAAaC,EACnE,MAAMmE,EAAa7L,KAAKwH,aAAeC,EAAagB,EACpD,MAAMqD,EAAa9L,KAAKwH,YAAcC,EAAae,EACnD,MAAMlB,EAA2BtH,KAAK8I,qBAAuBrB,EAAaC,EAC1E,MAAMqE,EACJF,GAAc7L,KAAKmI,wBAA2B2D,IAAe9L,KAAK0I,OAEpE,MAAMsD,EAAwB,CAC5BzC,YACAC,kBACAzI,WACA0I,OACAnC,2BACAtF,YAGF,OACE6F,EAACoE,EAAI,CACHnC,MAAO,CACL,eAAgB/I,GAAYwI,EAC5B,iBAAkBxI,GAAYwI,EAC9B,gBAAiBA,IAAcrH,EAC/B,eAAgBqH,GAAarH,EAC7B,eACElC,KAAKwH,WAAaC,EAAaC,GAAK1H,KAAKmI,uBAC3C,CAAC+D,EAAsBC,MACrB3C,IAAoB0C,EAAsBC,KAC5C,CAAC,qBACE5C,IAAcrH,GAAgBO,EACjC,CAAC,UAAW8F,IAGbgB,GAAavJ,KAAKsJ,aAAY1D,OAAA6E,OAAA,GAAMuB,IACrCnE,EAAA,OAAKiC,MAAM,kBAAkBC,GAAG,oBAC5BR,GAAavJ,KAAKsJ,aAAY1D,OAAA6E,OAAA,GAAMuB,IACtCnE,EAAA,OAAKiC,MAAM,yBACR7G,EAAWjD,KAAKoB,GAAI,uBACnByG,EAAA,OACEiC,MAAM,qBAAoB,kBACV,+BAEhBjC,EAAA,sBACc,OACZiC,MAAM,4BACNC,GAAG,+BAA6B,WAIlClC,EAAA,MAAIiC,MAAM,mBACRjC,EAAA,QAAM6C,KAAK,0BAKnB7C,EAAA,OACEiC,MAAO,CACL,CAAC,kBAAmB,KACpB,CAAC,0BAA2BsC,MAG7BnJ,EAAWjD,KAAKoB,GAAI,yBACnByG,EAAA,OACEiC,MAAM,uBAAsB,kBACZ,iCAEhBjC,EAAA,sBACc,OACZiC,MAAM,4BACNC,GAAG,iCAA+B,aAIpClC,EAAA,MAAIiC,MAAM,mBACRjC,EAAA,QAAM6C,KAAK,2BAIjB7C,EAAA,OAAKiC,MAAM,mBACR9J,KAAK8K,wBAA0BjD,EAAA,mBAC/BkE,GACClE,EAAA,UACEiC,MAAM,qBACNQ,UAAW+B,EACXnC,QAASlK,KAAKiC,mBAAkB,aACpB,GACVC,EAAe,WAAa,6BAIlC2F,EAAA,OAAKiC,MAAM,sBACR6B,IAAW,IACV9D,EAAA,OACEiC,MAAO,CACL,CAAC,cAAe,OAGlBjC,EAAA,8BACa,UACXC,QAAQ,kBACRgC,MAAM,mBAEL6B,IAINC,IAAY,IACX/D,EAAA,iBACEC,QAAQ,QACRgC,MAAM,cAAa,aACR,eAEV8B,O"}
1	+ {"version":3,"names":["icSideNavigationCss","SideNavigation","this","ANIMATION_DURATION","parseInt","getCssProperty","IC_NAVIGATION_ITEM","resizeObserver","COLLAPSED_ICON_LABELS_END","COLLAPSED_ICON_LABELS_START","menuButton","emitSideNavigationExpanded","objDetails","sideNavExpanded","emit","sideNavMobile","toggleMenu","menuOpen","setMobileMenuAriaAttributes","arrangeSlottedNavigationItem","setToggleMenuFlyoutMenuVisibility","sideNav","el","shadowRoot","querySelector","sideNavInner","bottomWrapper","menuVisibilityVisible","classList","add","setTimeout","remove","setAttribute","setAndRemoveNoWrapAfterMenuExpanded","appTitle","toggleMenuExpanded","expanded","deviceSize","DEVICE_SIZES","S","menuExpanded","style","setProperty","addEventListener","e","propertyName","displayTooltipWithExpandedLongLabel","collapsedIconLabels","animateCollapsedIconLabels","setExpandedButtonHeight","navItems","querySelectorAll","forEach","navItem","isNamedSlot","isSlotUsed","isUnnamedSlot","children","getAttribute","navItemSlot","iconWrapper","document","createElement","icon","label","textContent","trim","icTypography","height","append","styleSlottedCollapsedIconLabels","styleSlottedIconLabels","marginTop","whiteSpace","overflow","textOverflow","appStatusWrapper","offsetHeight","opacity","visibility","transition","transitionHandler","type","primaryNavigationWrapper","secondaryNavigationWrapper","classToRemove","classToAdd","transitionEndHandler","paddingIconWidth","navItemLink","navItemSVG","navStyles","gap","window","getComputedStyle","iconWidth","width","paddingLeft","Object","values","reduce","prev","curr","timer","sideNavWidth","clientWidth","navigationItems","Array","from","paddingIconDelta","length","navigationItem","icTypographyScrollWidth","_a","scrollWidth","_b","clearTimeout","setMenuExpanded","setParentPaddingTop","value","parentElement","setParentPaddingLeft","renderAppTitle","isAppNameSubtitleVariant","displayShortAppTitle","isEmptyString","shortAppTitle","h","variant","undefined","resizeObserverCallback","currSize","isSmallAndDisableTopBar","disableTopBarBehaviour","disableAutoParentStyling","topBarHeight","scrollHeight","inline","L","M","static","runResizeObserver","ResizeObserver","getCurrentDeviceSize","deviceSizeAppTitle","observe","body","box","setCollapsedIconLabels","styleSlottedCollapsedIconLabel","dynamicSlottedIcTypographyComps","contains","renderTopBar","isSDevice","foregroundColor","href","hasTitle","isPropDefined","Component","attrs","class","id","size","appearance","onClick","ariaOwnsId","ref","slot","innerHTML","closeIcon","menuIcon","assign","name","getThemeForegroundColor","watchExpandedHandler","componentWillLoad","hasSecondaryNavigation","componentDidLoad","checkResizeObserver","onComponentRequiredPropUndefined","prop","propName","disconnectedCallback","disconnect","removeEventListener","themeChangeHandler","detail","mode","render","status","version","isMdDevice","isLgDevice","displayExpandBtn","topBarProps","Host","IcThemeForegroundEnum","Dark","hasClassificationBanner","chevronIcon"],"sources":["src/components/ic-side-navigation/ic-side-navigation.css?tag=ic-side-navigation&encapsulation=shadow","src/components/ic-side-navigation/ic-side-navigation.tsx"],"sourcesContent":["/*\n @prop --ic-z-index-side-navigation: z-index of side navigation panel\n /\n\n:host {\n display: block;\n\n --side-navigation-position: fixed;\n --side-navigation-position-left: 0;\n --side-navigation-position-top: var(--ic-space-xxl);\n --side-navigation-height: var(--ic-space-xxl);\n --sm-side-navigation-top-bar-height: 3.5rem;\n --sm-side-navigation-collapsed-labels-width: 6rem;\n --sm-side-navigation-expand-transition-duration: var(\n --ic-transition-duration-slow\n );\n --side-navigation-width: 20rem;\n --sm-side-navigation-bottom-bar-height: 3.5rem;\n\n z-index: var(--ic-z-index-side-navigation);\n}\n\n:host > {\n box-sizing: border-box;\n}\n\n.side-navigation {\n display: flex;\n flex-direction: column;\n width: var(--side-navigation-width);\n color: var(--ic-theme-text);\n position: var(--side-navigation-position);\n top: var(--side-navigation-position-top);\n left: calc(var(--side-navigation-width) * -1);\n bottom: 0;\n background-color: var(--ic-theme-primary);\n z-index: var(--ic-z-index-side-navigation);\n}\n\n:host(.inline) .side-navigation {\n position: absolute;\n height: 100%;\n}\n\n:host(.anchor-right) .side-navigation {\n right: calc(var(--side-navigation-width) * -1);\n}\n\n.classification-spacing {\n margin-bottom: var(--ic-space-lg);\n}\n\n.navigation-list {\n padding: 0;\n margin: 0;\n list-style: none;\n}\n\n.side-navigation-inner {\n background-color: var(--ic-theme-primary);\n display: flex;\n flex-direction: column;\n flex: 1 1 0;\n overflow: auto;\n}\n\n:host(.inline) .side-navigation-inner {\n flex: 1;\n}\n\n:host(.xs-menu-open) .side-navigation {\n transition: left var(--ic-easing-transition-slow);\n left: 0;\n}\n\n:host(:has(.xs-menu-open, .xs-menu-close)) ::slotted(ic-navigation-item) {\n --navigation-item-side-nav-right: var(--ic-space-xl);\n}\n\n:host(.xs-menu-close) .side-navigation {\n left: calc(var(--side-navigation-width) * -1);\n transition: left var(--ic-easing-transition-slow);\n}\n\n:host(.xs-menu-close) .side-navigation > * {\n visibility: hidden;\n}\n\n:host(.anchor-right.xs-menu-open) .side-navigation {\n right: 0;\n left: auto;\n}\n\n:host(.anchor-right.xs-menu-close) .side-navigation {\n right: calc(var(--side-navigation-width) * -1);\n left: auto;\n transition: right var(--ic-easing-transition-slow);\n}\n\n.bottom-wrapper {\n border-top: var(--ic-keyline-lighten);\n bottom: 0;\n left: 0;\n z-index: 2;\n box-shadow: -0.188rem -0.188rem 0.5rem rgb(0 0 0 / 20%);\n background-color: var(--ic-theme-primary);\n display: flex;\n flex-direction: column;\n}\n\n:host(.inline) .bottom-wrapper {\n position: sticky;\n}\n\n:host(.dark) .bottom-wrapper {\n border-top: var(--ic-keyline-darken);\n}\n\n/* Mobile Top Bar /\n\n.top-bar {\n display: flex;\n flex-direction: row;\n align-items: center;\n min-height: var(--side-navigation-height);\n padding: var(--ic-space-xs);\n box-sizing: border-box;\n background-color: var(--ic-theme-primary);\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n border-bottom: var(--ic-keyline-darken);\n box-shadow: var(--ic-elevation-overlay);\n z-index: 2;\n overflow: hidden;\n visibility: visible;\n}\n\n:host(.inline) .top-bar {\n position: absolute;\n}\n\n.top-bar.dark a:focus {\n box-shadow: var(--ic-border-focus);\n}\n\n.top-bar.light {\n border-bottom: var(--ic-keyline-lighten);\n}\n\n.app-title-wrapper {\n display: flex;\n margin-left: var(--ic-space-xs);\n border-left: var(--ic-keyline-darken);\n padding-left: var(--ic-space-xxs);\n color: var(--ic-theme-text);\n align-items: center;\n}\n\n.app-title-wrapper ic-typography h1 {\n margin: 0;\n}\n\n@media screen and (min-width: 340px) {\n .app-title-wrapper ic-typography {\n margin-left: var(--ic-space-xs);\n }\n}\n\n:host .title-link {\n display: flex;\n align-items: center;\n transition: box-shadow var(--ic-easing-transition-fast),\n background-color var(--ic-easing-transition-fast);\n text-decoration: none;\n padding: var(--ic-space-xxs);\n color: var(--ic-theme-text);\n}\n\n:host .title-link:visited,\n:host .title-link:active {\n color: var(--ic-theme-text);\n}\n\nslot[name=\"app-title\"]::slotted(a),\nslot[name=\"app-icon\"]::slotted(a) {\n color: var(--ic-theme-text);\n outline: none;\n text-decoration: none;\n display: flex;\n}\n\nslot[name=\"app-title\"]::slotted(ic-typography),\nslot[name=\"app-title\"]::slotted(a) {\n margin-left: var(--ic-space-xs) !important;\n}\n\nslot[name=\"app-title\"]::slotted(a) {\n font: var(--ic-font-subtitle-small);\n}\n\n@media screen and (min-width: 577px) {\n :host(.sm-collapsed) slot[name=\"app-title\"]::slotted(ic-typography),\n :host(.sm-collapsed) slot[name=\"app-title\"]::slotted(a) {\n position: absolute;\n left: -9999px;\n opacity: 0;\n transition: opacity var(--ic-easing-transition-slow);\n }\n\n :host(.sm-expanded) slot[name=\"app-title\"]::slotted(a) {\n font: var(--ic-font-h3) !important;\n font-weight: var(--ic-font-weight-semibold) !important;\n margin-left: var(--ic-space-xs) !important;\n }\n}\n\n:host .title-link:hover {\n border-radius: var(--ic-border-radius);\n background-color: var(--ic-theme-hover);\n}\n\n:host .title-link:active {\n background-color: var(--ic-theme-active);\n}\n\n:host .title-link:focus,\n:host .title-link:focus-within {\n border-radius: var(--ic-border-radius);\n box-shadow: var(--ic-border-focus);\n outline: var(--ic-hc-focus-outline);\n background-color: transparent;\n}\n\n:host .title-link ic-typography {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.app-title-wrapper ::slotted(svg) {\n fill: var(--ic-theme-text);\n}\n\n.app-icon-container {\n display: none;\n}\n\n.button-label {\n display: flex;\n align-items: center;\n}\n\n.mobile-top-bar-menu-icon {\n display: flex;\n}\n\n.menu-button {\n width: 6.5rem;\n}\n\n.app-status-wrapper {\n inset: 0 var(--ic-space-sm) 0 3.5rem;\n width: auto;\n display: flex;\n gap: var(--ic-space-xs);\n padding: var(--ic-space-sm) 0;\n justify-content: flex-end;\n align-items: flex-end;\n pointer-events: none;\n height: fit-content;\n margin: 0 var(--ic-space-xs);\n}\n\n.app-status-wrapper .app-version {\n display: flex;\n overflow-wrap: break-word;\n padding-bottom: var(--ic-space-xxs);\n}\n\n.app-status-wrapper .app-status {\n display: flex;\n border-radius: 1rem;\n background-color: var(--ic-theme-text);\n color: var(--ic-color-primary-text);\n padding: var(--ic-space-xxs) var(--ic-space-lg);\n min-width: 1rem;\n}\n\n.app-status-wrapper .app-status-text {\n overflow-wrap: break-word;\n}\n\n:host(.dark) .app-status-wrapper .app-status {\n color: var(--ic-color-white-text);\n}\n\n.navigation-landmark-title {\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\n/* Navigation Group /\n\n::slotted(ic-navigation-group) {\n --navigation-group-height: 2.75rem;\n --navigation-group-width: 100%;\n --navigation-group-justify-content: space-between;\n --navigation-group-hover: var(--ic-theme-hover);\n --navigation-group-text-hover: var(--ic-theme-text);\n --navigation-item-child-height: 3.5rem;\n --navigation-item-child-active: var(--ic-action-dark-bg-active);\n --navigation-item-child-color: var(--ic-theme-text);\n --navigation-group-expand-toggle-padding: 0.25rem;\n}\n\n/ Navigation Items /\n\n::slotted(ic-navigation-item),\n::slotted(ic-navigation-group) {\n --navigation-item-justify-content: flex-start;\n --navigation-item-min-height: 56px;\n --navigation-item-height: auto;\n}\n\n/ Toggle Chevron /\n\n.bottom-side-nav {\n position: relative;\n align-content: flex-end;\n min-height: var(--sm-side-navigation-top-bar-height);\n}\n\n.bottom-side-nav ic-divider {\n position: absolute;\n top: 0;\n width: 100%;\n}\n\n.primary-navigation {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n\n / Hide scrollbar when required but keep functionality /\n scrollbar-width: none;\n}\n\n.primary-navigation::-webkit-scrollbar {\n display: none;\n}\n\n.primary-navigation,\n.secondary-navigation {\n overflow-x: hidden;\n}\n\n.bottom-side-nav .menu-expand-button {\n position: absolute;\n display: none;\n}\n\n.menu-visibility-visible {\n visibility: visible;\n width: 100%;\n}\n\n.app-title-show {\n min-width: 15.5rem;\n}\n\n:host(.side-display) {\n display: flex;\n flex-direction: column;\n height: 100vh;\n position: var(--side-navigation-position);\n left: 0;\n top: 0;\n bottom: 0;\n}\n\n:host(.side-display) .app-icon-container {\n height: 40px;\n display: flex;\n align-items: center;\n}\n\n:host(.side-display) .top-bar {\n --side-navigation-height: var(--sm-side-navigation-top-bar-height);\n\n position: relative;\n padding: 0;\n box-shadow: -0.188rem 0.188rem 0.5rem rgb(0 0 0 / 20%);\n}\n\n:host(.inline.side-display) .top-bar {\n position: sticky;\n}\n\n:host(.anchor-right.side-display) .top-bar {\n box-shadow: 0.188rem 0.188rem 0.5rem rgb(0 0 0 / 20%);\n}\n\n:host(.anchor-right.side-display) .bottom-wrapper {\n box-shadow: 0.188rem -0.188rem 0.5rem rgb(0 0 0 / 20%);\n}\n\n:host(.side-display) .side-navigation,\n:host(.side-display) .top-bar {\n width: var(--sm-side-navigation-top-bar-height);\n}\n\n:host(.sm-collapsed.side-display) {\n width: var(--sm-side-navigation-top-bar-height);\n transition: width var(--ic-easing-transition-slow);\n}\n\n:host(.sm-collapsed.collapsed-labels.side-display) {\n width: var(--sm-side-navigation-collapsed-labels-width);\n}\n\n:host(.sm-expanded.side-display) {\n width: var(--side-navigation-width);\n transition: width var(--ic-easing-transition-slow);\n box-shadow: var(--ic-elevation-overlay);\n}\n\n:host(.side-display) .side-navigation {\n --side-navigation-position-top: 0;\n\n flex: 1;\n position: relative;\n top: auto;\n left: auto;\n bottom: auto;\n}\n\n:host(.inline.side-display) .side-navigation {\n position: relative;\n}\n\n:host(.anchor-right.side-display) .side-navigation {\n left: auto;\n right: 0;\n}\n\n:host(.side-display) .app-title-wrapper {\n margin-left: 0;\n border-left: none;\n padding: var(--ic-space-xs) var(--ic-space-sm);\n}\n\n:host(.side-display) .app-title-wrapper ::slotted(svg) {\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n}\n\n:host(.side-display) .app-title-wrapper ic-typography {\n font-weight: var(--ic-font-weight-semibold);\n}\n\n:host(.sm-collapsed.side-display) .app-title-wrapper ic-typography {\n position: absolute;\n left: -9999px;\n opacity: 0;\n transition: opacity var(--ic-easing-transition-slow);\n}\n\n:host(.sm-expanded.side-display) ic-typography {\n position: relative;\n left: 0;\n}\n\n:host(.sm-expanded.side-display) :is(.side-navigation, .top-bar) {\n width: var(--side-navigation-width);\n transition: width var(--ic-easing-transition-slow);\n}\n\n:host(.sm-collapsed.side-display) :is(.side-navigation, .top-bar) {\n width: var(--sm-side-navigation-top-bar-height);\n transition: width var(--ic-easing-transition-slow);\n}\n\n:host(.anchor-right.sm-expanded.side-display) :is(.side-navigation, .top-bar) {\n left: auto;\n right: 0;\n}\n\n:host(.side-display) .app-status-wrapper,\n:host(.sm-collapsed.side-display) .app-status-wrapper {\n display: none;\n margin-left: 0;\n}\n\n:host(.sm-expanded.side-display) .app-status-wrapper {\n display: flex;\n max-width: 16rem;\n margin-right: calc(var(--ic-space-xxxs) + var(--ic-space-xs));\n}\n\n:host(.side-display) .bottom-side-nav {\n justify-items: flex-end;\n align-items: flex-end;\n justify-content: flex-end;\n display: flex;\n outline: none;\n}\n\n:host(.side-display) .bottom-side-nav .menu-expand-button {\n padding-left: var(--ic-space-md);\n height: var(--sm-side-navigation-top-bar-height);\n width: 100%;\n color: var(--ic-theme-text);\n background-color: transparent;\n outline: var(--ic-hc-focus-outline);\n border: none;\n cursor: pointer;\n display: flex;\n transition: var(--ic-easing-transition-fast);\n}\n\n:host(.sm-expanded.side-display) .bottom-side-nav .menu-expand-button {\n height: 100%;\n}\n\n:host(.side-display) .bottom-side-nav .menu-expand-button svg {\n justify-items: flex-start;\n align-self: center;\n display: inline-block;\n width: var(--ic-space-lg);\n height: var(--ic-space-lg);\n}\n\n:host(.side-display) .bottom-side-nav .menu-expand-button:hover {\n background-color: var(--ic-theme-hover);\n}\n\n:host(.side-display) .bottom-side-nav .menu-expand-button: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(.sm-collapsed.side-display) .bottom-side-nav .menu-expand-button svg {\n transform: scaleX(1);\n transition: transform var(--ic-easing-transition-slow);\n}\n\n:host(.sm-expanded.side-display) .bottom-side-nav .menu-expand-button svg {\n transform: scaleX(-1);\n transition: transform var(--ic-easing-transition-slow);\n align-self: flex-end;\n margin-bottom: 0.875rem;\n}\n\n:host(.anchor-right.sm-collapsed.side-display)\n .bottom-side-nav\n .menu-expand-button\n svg {\n transform: scaleX(-1);\n}\n\n:host(.anchor-right.sm-expanded.side-display)\n .bottom-side-nav\n .menu-expand-button\n svg {\n transform: scaleX(1);\n}\n\n:host(.sm-collapsed.side-display) ::slotted(ic-navigation-item) {\n --navigation-item-label-opacity: 1;\n}\n\n:host(.sm-collapsed.side-display) ::slotted(ic-navigation-item),\n:host(.sm-collapsed.side-display) ::slotted(ic-navigation-group) {\n --navigation-item-label-opacity: 0;\n --navigation-item-min-height: 56px;\n --navigation-item-height: 56px;\n}\n\n:host(.sm-expanded.side-display) ::slotted(ic-navigation-item),\n:host(.sm-expanded.side-display) ::slotted(ic-navigation-group) {\n --navigation-item-label-opacity: 1;\n --navigation-item-height: auto;\n --navigation-item-min-height: 56px;\n --navigation-item-width: 320px;\n --navigation-item-side-nav-right: var(--ic-space-xl);\n}\n\n:host(.sm-collapsed.side-display) ::slotted(ic-navigation-group) {\n --navigation-group-title-position: absolute;\n --navigation-group-title-position-left: -9999px;\n --navigation-group-title-opacity: none;\n}\n\n:host(.sm-expanded.side-display) ::slotted(ic-navigation-group) {\n --navigation-group-title-position: relative;\n --navigation-group-title-position-left: 0;\n --navigation-group-expand-toggle-padding: 0.25rem;\n --navigation-group-title-opacity: flex;\n}\n\n:host(.sm-collapsed.collapsed-labels.side-display) .side-navigation,\n:host(.sm-collapsed.collapsed-labels.side-display) .top-bar {\n width: var(--sm-side-navigation-collapsed-labels-width);\n}\n\n:host(.sm-collapsed.collapsed-labels.side-display) .menu-expand-button {\n padding: 0;\n}\n\n:host(.sm-collapsed.collapsed-labels.side-display) .app-title-wrapper {\n width: 100%;\n justify-content: center;\n}\n\n:host(.sm-collapsed.collapsed-labels.side-display)\n ::slotted(ic-navigation-group) {\n --navigation-group-justify-content: center;\n --navigation-item-label-opacity: 1;\n --navigation-group-item-min-width: 100%;\n --navigation-group-expand-toggle-padding: 1rem;\n}\n\n:host(.collapsed-labels.side-display) .bottom-side-nav .menu-expand-button {\n justify-content: center;\n}\n\n:host(.side-display) .collapsed-icon-labels-start {\n visibility: hidden;\n opacity: 0;\n}\n\n:host(.side-display) .collapsed-icon-labels-end {\n visibility: visible;\n opacity: 1;\n transition: visibility 0s, opacity var(--ic-easing-transition-slow);\n}\n\n/ Media Queries /\n\n@media screen and (min-width: 340px) {\n .app-icon-container {\n display: flex;\n }\n}\n\n@media screen and (min-width: 993px) {\n :host(.side-display) {\n position: sticky;\n left: auto;\n top: 0;\n bottom: 0;\n }\n\n :host(.sm-expanded.side-display) {\n box-shadow: none;\n }\n}\n\n@media (forced-colors: active) {\n .side-navigation,\n .top-bar {\n border-right: var(--ic-hc-border);\n }\n\n .menu-expand-button {\n color: Highlight !important;\n }\n\n slot[name=\"app-icon\"]::slotted(svg) {\n fill: currentcolor;\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n State,\n Element,\n Listen,\n Event,\n EventEmitter,\n Watch,\n} from \"@stencil/core\";\n\nimport menuIcon from \"../../assets/hamburger-menu-icon.svg\";\nimport closeIcon from \"../../assets/close-icon.svg\";\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\nimport {\n getCurrentDeviceSize,\n DEVICE_SIZES,\n checkResizeObserver,\n isSlotUsed,\n getThemeForegroundColor,\n getCssProperty,\n hasClassificationBanner,\n onComponentRequiredPropUndefined,\n isEmptyString,\n isPropDefined,\n} from \"../../utils/helpers\";\nimport {\n IcTheme,\n IcThemeForeground,\n IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport { IcTopBar, IcExpandedDetail } from \"./ic-side-navigation.types\";\n\n/\n @slot app-icon - Content will be rendered adjacent to the app title at the very top of the side navigation.\n * @slot app-title - Handle routing by nesting a route in the app title.\n * @slot primary-navigation - Content will be rendered at the top of the side navigation.\n * @slot secondary-navigation - Content will be rendered at the bottom of the side navigation.\n /\n\n@Component({\n tag: \"ic-side-navigation\",\n styleUrl: \"ic-side-navigation.css\",\n shadow: true,\n})\nexport class SideNavigation {\n private ANIMATION_DURATION =\n parseInt(getCssProperty(\"--ic-transition-duration-slow\")) \|\| 0;\n private IC_NAVIGATION_ITEM: string = \"ic-navigation-item\";\n private resizeObserver: ResizeObserver = null;\n private COLLAPSED_ICON_LABELS_END = \"collapsed-icon-labels-end\";\n private COLLAPSED_ICON_LABELS_START = \"collapsed-icon-labels-start\";\n private menuButton: HTMLIcButtonElement = null;\n\n @Element() el: HTMLIcSideNavigationElement;\n\n @State() deviceSize: number = getCurrentDeviceSize();\n @State() deviceSizeAppTitle: number = DEVICE_SIZES.S;\n @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n @State() hasSecondaryNavigation: boolean = false;\n @State() menuExpanded: boolean = false;\n @State() menuOpen: boolean = false;\n\n /\n The app title to be displayed. This is required, unless a slotted app title link is used.\n /\n @Prop() appTitle: string;\n\n /\n If `true`, the icon and label will appear when side navigation is collapsed.\n /\n @Prop() collapsedIconLabels: boolean = false;\n\n /\n If `true`, automatic parent wrapper styling will be disabled.\n /\n @Prop() disableAutoParentStyling: boolean = false;\n\n /\n If `true`, the side navigation will not display as a top bar on small devices.\n /\n @Prop() disableTopBarBehaviour: boolean = false;\n\n /\n If `true`, the side navigation will display in an expanded state.\n /\n @Prop() expanded: boolean = false;\n\n @Watch(\"expanded\")\n watchExpandedHandler(): void {\n this.toggleMenuExpanded(this.expanded);\n }\n\n /\n The URL that the app title link points to.\n /\n @Prop() href: string = \"/\";\n\n /\n @internal If `true`, side navigation will be contained by its parent element.\n /\n @Prop() inline: boolean = false;\n\n /\n The short title of the app to be displayed at small screen sizes in place of the app title.\n /\n @Prop() shortAppTitle: string = \"\";\n\n /\n If `true`, the menu expand button will be removed (PLEASE NOTE: This takes effect on screen sizes 992px and above).\n /\n @Prop() static: boolean = false;\n\n /\n The status of the app to be displayed.\n /\n @Prop() status: string;\n\n /\n The version of the app to be displayed.\n /\n @Prop() version: string;\n\n /\n Emitted when the side navigation is collapsed and expanded.\n /\n @Event() sideNavExpanded: EventEmitter<IcExpandedDetail>;\n\n componentWillLoad(): void {\n this.setMenuExpanded(this.expanded);\n\n if (this.collapsedIconLabels) {\n this.setCollapsedIconLabels();\n }\n\n this.hasSecondaryNavigation = isSlotUsed(this.el, \"secondary-navigation\");\n }\n\n componentDidLoad(): void {\n this.emitSideNavigationExpanded({\n sideNavExpanded: this.menuExpanded,\n sideNavMobile:\n this.deviceSize === DEVICE_SIZES.S && !this.disableTopBarBehaviour,\n });\n\n checkResizeObserver(this.runResizeObserver);\n this.styleSlottedCollapsedIconLabel();\n this.arrangeSlottedNavigationItem(this.menuExpanded);\n this.displayTooltipWithExpandedLongLabel(this.menuExpanded);\n\n this.setExpandedButtonHeight();\n\n !isSlotUsed(this.el, \"app-title\") &&\n onComponentRequiredPropUndefined(\n [{ prop: this.appTitle, propName: \"app-title\" }],\n \"Side Navigation\"\n );\n }\n\n disconnectedCallback(): void {\n if (this.resizeObserver !== null) {\n this.resizeObserver.disconnect();\n }\n\n this.el?.removeEventListener(\"transitionend\", this.transitionEndHandler);\n }\n\n @Listen(\"themeChange\", { target: \"document\" })\n themeChangeHandler({ detail }: CustomEvent): void {\n this.foregroundColor = (detail as IcTheme).mode;\n }\n\n private emitSideNavigationExpanded = (objDetails: {\n sideNavExpanded: boolean;\n sideNavMobile?: boolean;\n }): void => {\n this.sideNavExpanded.emit({\n sideNavExpanded: objDetails.sideNavExpanded,\n sideNavMobile: objDetails.sideNavMobile,\n });\n };\n\n private toggleMenu = (): void => {\n this.menuOpen = !this.menuOpen;\n this.setMobileMenuAriaAttributes(this.menuOpen);\n\n this.arrangeSlottedNavigationItem(this.menuOpen);\n\n this.setToggleMenuFlyoutMenuVisibility(this.menuOpen);\n\n this.emitSideNavigationExpanded({\n sideNavExpanded: this.menuOpen,\n sideNavMobile: true,\n });\n };\n\n private setToggleMenuFlyoutMenuVisibility = (menuOpen: boolean) => {\n const sideNav = this.el.shadowRoot.querySelector(\n \"#side-navigation\"\n ) as HTMLDivElement;\n const sideNavInner = sideNav.querySelector(\n \".side-navigation-inner\"\n ) as HTMLElement;\n const bottomWrapper = sideNav.querySelector(\n \".bottom-wrapper\"\n ) as HTMLElement;\n\n const menuVisibilityVisible = \"menu-visibility-visible\";\n\n if (menuOpen) {\n bottomWrapper.classList.add(menuVisibilityVisible);\n sideNavInner.classList.add(menuVisibilityVisible);\n } else {\n setTimeout(() => {\n sideNavInner.classList.remove(menuVisibilityVisible);\n bottomWrapper.classList.remove(menuVisibilityVisible);\n }, this.ANIMATION_DURATION);\n }\n };\n\n private setMobileMenuAriaAttributes = (menuOpen: boolean) => {\n if (this.menuButton !== null) {\n this.menuButton.setAttribute(\"aria-expanded\", `${menuOpen}`);\n this.menuButton.setAttribute(\n \"aria-label\",\n `${menuOpen ? \"Close\" : \"Open\"} navigation menu`\n );\n }\n };\n\n private setAndRemoveNoWrapAfterMenuExpanded = () => {\n const appTitle =\n this.el.shadowRoot.querySelector(\".title-link ic-typography\") \|\|\n this.el.querySelector(\"[slot='app-title']\");\n\n appTitle.classList.add(\"ic-typography-no-wrap\");\n\n setTimeout(() => {\n appTitle.classList.remove(\"ic-typography-no-wrap\");\n }, this.ANIMATION_DURATION);\n };\n\n private toggleMenuExpanded = (expanded: boolean): void => {\n if (this.deviceSize > DEVICE_SIZES.S) {\n this.menuExpanded = expanded;\n }\n\n if (this.menuExpanded) {\n this.setAndRemoveNoWrapAfterMenuExpanded();\n this.el.shadowRoot\n .querySelector(\".app-title-inner-wrapper\")\n .classList.add(\"app-title-show\");\n } else {\n this.el.style.setProperty(\"--navigation-item-width\", \"320px\");\n this.el.shadowRoot\n .querySelector(\".app-title-inner-wrapper\")\n .classList.remove(\"app-title-show\");\n\n this.el.addEventListener(\"transitionend\", (e) => {\n if (e.propertyName === \"width\") {\n this.el.style.setProperty(\"--navigation-item-width\", null);\n }\n });\n }\n\n this.arrangeSlottedNavigationItem(this.menuExpanded);\n\n this.displayTooltipWithExpandedLongLabel(this.menuExpanded);\n\n if (this.collapsedIconLabels) {\n this.animateCollapsedIconLabels();\n }\n\n this.setExpandedButtonHeight();\n this.emitSideNavigationExpanded({ sideNavExpanded: this.menuExpanded });\n };\n\n /\n In order to style nested slotted elements (e.g. using React Router components), this method\n * rearranges the a tag and labels and adds inline styling expand/collapsed animations as external CSS classes are not\n * do not take affect.\n * @param menuExpanded boolean - true or false depending on side navigation state\n /\n private arrangeSlottedNavigationItem = (menuExpanded?: boolean) => {\n const navItems = this.el.querySelectorAll(\"ic-navigation-item\");\n navItems.forEach((navItem) => {\n const isNamedSlot = isSlotUsed(navItem, \"navigation-item\");\n const isUnnamedSlot =\n navItem.children[0] && !navItem.children[0].getAttribute(\"slot\");\n if (isNamedSlot \|\| isUnnamedSlot) {\n let navItemSlot;\n if (isNamedSlot) {\n navItemSlot = navItem.querySelector(\"[slot='navigation-item']\");\n } else {\n navItemSlot = navItem.children[0];\n }\n const iconWrapper = document.createElement(\"div\");\n const icon = navItemSlot.querySelector(\"svg\");\n const label = navItem.textContent.trim();\n const icTypography = document.createElement(\"ic-typography\");\n icTypography.classList.add(\n \"ic-typography-label\",\n \"hydrated\",\n \"navigation-item-side-nav-slotted-text\"\n );\n\n iconWrapper.style.height = \"var(--ic-space-lg)\";\n iconWrapper.append(icon);\n\n navItemSlot.textContent = \"\";\n\n icTypography.textContent = label;\n\n navItemSlot.append(iconWrapper);\n navItemSlot.append(icTypography);\n\n if (this.collapsedIconLabels) {\n this.styleSlottedCollapsedIconLabels(menuExpanded, icTypography);\n } else {\n this.styleSlottedIconLabels(menuExpanded, icTypography);\n }\n }\n });\n };\n\n private styleSlottedCollapsedIconLabels = (\n menuExpanded: boolean,\n icTypography: HTMLIcTypographyElement\n ) => {\n if (menuExpanded) {\n icTypography.style.marginTop = \"0\";\n icTypography.style.whiteSpace = \"nowrap\";\n icTypography.style.overflow = \"hidden\";\n icTypography.style.textOverflow = \"ellipsis\";\n } else {\n icTypography.style.marginTop = \"10px\";\n icTypography.style.whiteSpace = \"nowrap\";\n icTypography.style.overflow = \"hidden\";\n icTypography.style.textOverflow = \"ellipsis\";\n }\n };\n\n private setExpandedButtonHeight = () => {\n const appStatusWrapper = this.el.shadowRoot.querySelector(\n \"#side-navigation > .bottom-wrapper > .bottom-side-nav > .app-status-wrapper\"\n ) as HTMLDivElement;\n\n if (appStatusWrapper.offsetHeight !== 0) {\n this.el.style.setProperty(\n \"--sm-side-navigation-bottom-bar-height\",\n `${appStatusWrapper.offsetHeight}px`\n );\n }\n };\n\n private styleSlottedIconLabels = (\n menuExpanded: boolean,\n icTypography: HTMLSpanElement\n ) => {\n if (menuExpanded) {\n icTypography.style.opacity = \"1\";\n icTypography.style.visibility = \"visible\";\n icTypography.style.transition =\n \"visibility 0s, opacity var(--ic-easing-transition-slow)\";\n } else {\n icTypography.style.opacity = \"0\";\n icTypography.style.visibility = \"hidden\";\n icTypography.style.transition =\n \"visibility 0s, opacity var(--ic-easing-transition-slow)\";\n }\n };\n\n private transitionHandler = (type: string) => {\n const primaryNavigationWrapper = this.el.shadowRoot.querySelector(\n \".primary-navigation\"\n );\n\n const secondaryNavigationWrapper = this.el.shadowRoot.querySelector(\n \".bottom-wrapper > .secondary-navigation\"\n );\n\n const classToRemove =\n type === \"start\"\n ? this.COLLAPSED_ICON_LABELS_END\n : this.COLLAPSED_ICON_LABELS_START;\n\n const classToAdd =\n type === \"start\"\n ? this.COLLAPSED_ICON_LABELS_START\n : this.COLLAPSED_ICON_LABELS_END;\n\n if (primaryNavigationWrapper) {\n primaryNavigationWrapper.classList.remove(classToRemove);\n primaryNavigationWrapper.classList.add(classToAdd);\n }\n\n if (secondaryNavigationWrapper) {\n secondaryNavigationWrapper.classList.remove(classToRemove);\n secondaryNavigationWrapper.classList.add(classToAdd);\n }\n };\n\n private transitionEndHandler = () => {\n this.transitionHandler(\"end\");\n };\n\n private animateCollapsedIconLabels = () => {\n this.transitionHandler(\"start\");\n this.transitionEndHandler();\n\n this.el.addEventListener(\"transitionend\", this.transitionEndHandler);\n };\n\n private paddingIconWidth = (\n navItems: HTMLIcNavigationItemElement[]\n ): number => {\n const navItemLink =\n (navItems[0].shadowRoot &&\n (navItems[0].shadowRoot.querySelector(\"ic-tooltip a\") \|\|\n navItems[0].shadowRoot.querySelector(\"ic-tooltip div\"))) \|\|\n navItems[0].querySelector(\"a\") \|\|\n navItems[0].querySelector(\"div\");\n const navItemSVG = navItems[0].querySelector(\"svg\");\n\n const navStyles = {\n gap: window.getComputedStyle(navItemLink).gap,\n iconWidth: window.getComputedStyle(navItemSVG).width,\n paddingLeft: window.getComputedStyle(navItemLink).paddingLeft,\n };\n\n return Object.values(navStyles).reduce((prev, curr) => {\n return (prev += parseInt(curr));\n }, 0);\n };\n\n private displayTooltipWithExpandedLongLabel = (menuExpanded: boolean) => {\n let timer;\n\n if (menuExpanded) {\n timer = setTimeout(() => {\n const sideNavWidth = this.el.clientWidth;\n\n const navigationItems: HTMLIcNavigationItemElement[] = Array.from(\n this.el.querySelectorAll(this.IC_NAVIGATION_ITEM)\n );\n\n const paddingIconDelta = navigationItems.length\n ? this.paddingIconWidth(navigationItems)\n : 0;\n\n navigationItems.forEach(\n (navigationItem: HTMLIcNavigationItemElement) => {\n const icTypographyScrollWidth =\n (\n navigationItem.shadowRoot &&\n navigationItem.shadowRoot.querySelector(\n \"ic-tooltip .link ic-typography.ic-typography-label\"\n )\n )?.scrollWidth \|\|\n navigationItem.querySelector(\"ic-typography.ic-typography-label\")\n ?.scrollWidth;\n\n if (icTypographyScrollWidth > sideNavWidth - paddingIconDelta) {\n navigationItem.setAttribute(\"display-navigation-tooltip\", \"true\");\n }\n }\n );\n }, this.ANIMATION_DURATION);\n } else {\n clearTimeout(timer);\n\n const navigationItems: HTMLIcNavigationItemElement[] = Array.from(\n this.el.querySelectorAll(this.IC_NAVIGATION_ITEM)\n );\n navigationItems.forEach((navigationItem: HTMLIcNavigationItemElement) => {\n navigationItem.setAttribute(\"display-navigation-tooltip\", \"false\");\n });\n }\n };\n\n private setMenuExpanded = (expanded: boolean): void => {\n this.menuExpanded = expanded;\n };\n\n /\n As the mobile top bar is fixed, a padding top is required\n * to push main content down the height of the mobile top bar\n * @param value - padding-top css value\n /\n private setParentPaddingTop = (value: string) => {\n this.el.parentElement.style.setProperty(\"padding-top\", value);\n };\n\n private setParentPaddingLeft = (value: string) => {\n this.el.parentElement.style.setProperty(\"padding-left\", value);\n };\n\n private renderAppTitle = (isAppNameSubtitleVariant: boolean) => {\n const displayShortAppTitle =\n this.deviceSize <= DEVICE_SIZES.S && !isEmptyString(this.shortAppTitle);\n return (\n <ic-typography\n variant={\n displayShortAppTitle \|\| isAppNameSubtitleVariant\n ? \"subtitle-small\"\n : \"h3\"\n }\n aria-label={\n displayShortAppTitle\n ? `${this.appTitle} (${this.shortAppTitle})`\n : undefined\n }\n >\n <h1>{displayShortAppTitle ? this.shortAppTitle : this.appTitle}</h1>\n </ic-typography>\n );\n };\n\n private resizeObserverCallback = (currSize: number) => {\n this.deviceSize = currSize;\n\n const isSmallAndDisableTopBar =\n currSize === DEVICE_SIZES.S && !this.disableTopBarBehaviour;\n\n if (!this.disableAutoParentStyling) {\n const topBarHeight =\n this.el.shadowRoot.querySelector(\".top-bar\")?.scrollHeight;\n this.setParentPaddingTop(\n isSmallAndDisableTopBar ? `${topBarHeight}px` : \"0\"\n );\n if (isSmallAndDisableTopBar) this.setParentPaddingLeft(\"0\");\n if (isSmallAndDisableTopBar && this.inline) {\n this.el.parentElement.style.setProperty(\n \"height\",\n `calc(100% - ${topBarHeight}px)`\n );\n } else if (!isSmallAndDisableTopBar) {\n this.el.parentElement.style.setProperty(\"height\", \"100%\");\n }\n }\n\n if (!this.disableAutoParentStyling) {\n const paddingLeft = `calc(var(--ic-space-xxl) ${\n this.collapsedIconLabels ? \" 2\" : \"+ var(--ic-space-xs)\"\n })`;\n\n if (currSize > DEVICE_SIZES.L) {\n this.setParentPaddingTop(\"0\");\n this.setParentPaddingLeft(\"0\");\n } else if (\n (currSize > DEVICE_SIZES.S \|\| this.disableTopBarBehaviour) &&\n currSize <= DEVICE_SIZES.M &&\n this.static\n ) {\n this.setParentPaddingLeft(paddingLeft);\n } else if (\n (currSize > DEVICE_SIZES.S \|\| this.disableTopBarBehaviour) &&\n currSize <= DEVICE_SIZES.L\n ) {\n this.setParentPaddingLeft(\n this.static && this.menuExpanded\n ? \"calc(var(--ic-space-xl) * 10)\"\n : paddingLeft\n );\n }\n }\n };\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n const currSize = getCurrentDeviceSize();\n this.deviceSizeAppTitle = currSize;\n this.resizeObserverCallback(currSize);\n });\n\n this.resizeObserver.observe(document.body, { box: \"content-box\" });\n };\n\n private setCollapsedIconLabels = () => {\n const navigationItems: HTMLIcNavigationItemElement[] = Array.from(\n this.el.querySelectorAll(this.IC_NAVIGATION_ITEM)\n );\n navigationItems.forEach((navigationItem: HTMLIcNavigationItemElement) => {\n navigationItem.setAttribute(\"collapsed-icon-label\", \"true\");\n });\n };\n\n private styleSlottedCollapsedIconLabel = () => {\n const dynamicSlottedIcTypographyComps: HTMLIcTypographyElement[] =\n Array.from(\n this.el.querySelectorAll(\".navigation-item-side-nav-slotted-text\")\n );\n\n dynamicSlottedIcTypographyComps.forEach((icTypography) => {\n if (\n icTypography?.parentElement?.parentElement?.classList.contains(\n \"navigation-item-side-nav-collapsed-with-label\"\n )\n ) {\n icTypography.style.whiteSpace = \"nowrap\";\n icTypography.style.overflow = \"hidden\";\n icTypography.style.textOverflow = \"ellipsis\";\n icTypography.style.marginTop = \"10px\";\n }\n });\n };\n\n private renderTopBar = ({\n isSDevice,\n foregroundColor,\n menuOpen,\n href,\n isAppNameSubtitleVariant,\n }: IcTopBar) => {\n const hasTitle = this.appTitle !== \"\" && isPropDefined(this.appTitle);\n\n const Component = isSlotUsed(this.el, \"app-title\") ? \"div\" : \"a\";\n\n const attrs = Component == \"a\" && {\n href: href,\n };\n\n return (\n <div\n class={{\n \"top-bar\": true,\n [this.foregroundColor]: true,\n }}\n >\n {isSDevice && (\n <nav\n aria-labelledby=\"menu-navigation-toggle-button-landmark\"\n aria-hidden=\"false\"\n >\n <ic-button\n aria-label=\"Open navigation menu\"\n class=\"menu-button\"\n id=\"menu-button\"\n variant=\"secondary\"\n size=\"small\"\n full-width=\"true\"\n appearance={foregroundColor}\n onClick={this.toggleMenu}\n ariaOwnsId=\"side-navigation\"\n aria-haspopup=\"true\"\n aria-expanded=\"false\"\n ref={(el) => (this.menuButton = el)}\n >\n <span\n class=\"mobile-top-bar-menu-icon\"\n slot=\"icon\"\n innerHTML={menuOpen ? closeIcon : menuIcon}\n ></span>\n {menuOpen ? \"Close\" : \"Menu\"}\n </ic-button>\n <span\n id=\"menu-navigation-toggle-button-landmark\"\n class=\"navigation-landmark-title\"\n aria-hidden=\"true\"\n >\n Navigation menu toggle button\n </span>\n </nav>\n )}\n <div class=\"app-title-wrapper\">\n {(hasTitle \|\| isSlotUsed(this.el, \"app-title\")) && (\n <Component {...attrs} class=\"title-link\">\n <div class=\"app-icon-container\" aria-hidden=\"true\">\n <slot name=\"app-icon\"></slot>\n </div>\n <div class=\"app-title-inner-wrapper\">\n {isSlotUsed(this.el, \"app-title\") ? (\n <slot name=\"app-title\"></slot>\n ) : (\n this.renderAppTitle(isAppNameSubtitleVariant)\n )}\n </div>\n </Component>\n )}\n </div>\n </div>\n );\n };\n\n render() {\n const {\n appTitle,\n menuOpen,\n foregroundColor,\n menuExpanded,\n href,\n status,\n version,\n collapsedIconLabels,\n inline,\n } = this;\n\n const isSDevice =\n !this.disableTopBarBehaviour && this.deviceSize === DEVICE_SIZES.S;\n const isMdDevice = this.deviceSize === DEVICE_SIZES.M;\n const isLgDevice = this.deviceSize >= DEVICE_SIZES.L;\n const isAppNameSubtitleVariant = this.deviceSizeAppTitle === DEVICE_SIZES.S;\n const displayExpandBtn =\n isMdDevice \|\| this.disableTopBarBehaviour \|\| (isLgDevice && !this.static);\n\n const topBarProps: IcTopBar = {\n isSDevice,\n foregroundColor,\n menuOpen,\n href,\n isAppNameSubtitleVariant,\n appTitle,\n };\n\n return (\n <Host\n class={{\n \"xs-menu-open\": menuOpen && isSDevice,\n \"xs-menu-close\": !menuOpen && isSDevice,\n \"sm-collapsed\": !isSDevice && !menuExpanded,\n \"sm-expanded\": !isSDevice && menuExpanded,\n \"side-display\":\n this.deviceSize > DEVICE_SIZES.S \|\| this.disableTopBarBehaviour,\n [IcThemeForegroundEnum.Dark]:\n foregroundColor === IcThemeForegroundEnum.Dark,\n [\"collapsed-labels\"]:\n !isSDevice && !menuExpanded && collapsedIconLabels,\n [\"inline\"]: inline,\n }}\n >\n {isSDevice && this.renderTopBar({ ...topBarProps })}\n <div class=\"side-navigation\" id=\"side-navigation\">\n {!isSDevice && this.renderTopBar({ ...topBarProps })}\n <div class=\"side-navigation-inner\">\n {isSlotUsed(this.el, \"primary-navigation\") && (\n <nav\n class=\"primary-navigation\"\n aria-labelledby=\"primary-navigation-landmark\"\n >\n <span\n aria-hidden=\"true\"\n class=\"navigation-landmark-title\"\n id=\"primary-navigation-landmark\"\n >\n Primary\n </span>\n <ul class=\"navigation-list\">\n <slot name=\"primary-navigation\"></slot>\n </ul>\n </nav>\n )}\n </div>\n <div\n class={{\n [\"bottom-wrapper\"]: true,\n [\"classification-spacing\"]: hasClassificationBanner(),\n }}\n >\n {isSlotUsed(this.el, \"secondary-navigation\") && (\n <nav\n class=\"secondary-navigation\"\n aria-labelledby=\"secondary-navigation-landmark\"\n >\n <span\n aria-hidden=\"true\"\n class=\"navigation-landmark-title\"\n id=\"secondary-navigation-landmark\"\n >\n Secondary\n </span>\n <ul class=\"navigation-list\">\n <slot name=\"secondary-navigation\"></slot>\n </ul>\n </nav>\n )}\n <div class=\"bottom-side-nav\">\n {this.hasSecondaryNavigation && <ic-divider></ic-divider>}\n {displayExpandBtn && (\n <button\n class=\"menu-expand-button\"\n innerHTML={chevronIcon}\n onClick={() => this.toggleMenuExpanded(!this.menuExpanded)}\n aria-label={`${\n menuExpanded ? \"Collapse\" : \"Expand\"\n } side navigation`}\n ></button>\n )}\n <div class=\"app-status-wrapper\">\n {status !== \"\" && (\n <div\n class={{\n [\"app-status\"]: true,\n }}\n >\n <ic-typography\n aria-label=\"app tag\"\n variant=\"label-uppercase\"\n class=\"app-status-text\"\n >\n {status}\n </ic-typography>\n </div>\n )}\n {version !== \"\" && (\n <ic-typography\n variant=\"label\"\n class=\"app-version\"\n aria-label=\"app version\"\n >\n {version}\n </ic-typography>\n )}\n </div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}

package/dist/core/{p-32fa7c28.entry.js → p-9feec47e.entry.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{r as t,c as e,h as i,H as o,g as s}from"./p-6b5e91e2.js";import{A as n,d as a}from"./p-fef9e8c9.js";import{c as r}from"./p-68a5aaff.js";import"./p-26b7b18f.js";const l='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}@media (prefers-reduced-motion: no-preference){:host .opening-from-parent{animation:slide-in var(--ic-transition-duration-slow) ease-in-out}:host .opening-from-child{animation:slide-out var(--ic-transition-duration-slow) ease-in-out}}:host{border-radius:var(--ic-border-radius);color:var(--ic-color-primary-text);background-color:var(--ic-architectural-white);position:relative;z-index:var(--ic-z-index-popover);box-sizing:border-box;box-shadow:var(--ic-elevation-overlay);display:none}:host(.on-dialog){inset:auto !important}:host(.on-dialog-fix-translate){transform:translate(0, var(--ic-space-xs)) !important}:host(.on-dialog-translate-y){transform:translate(0, calc(-1 * var(--translate-y))) !important}.menu{border:var(--ic-border-default);border-radius:var(--ic-border-radius);background-color:var(--ic-architectural-white);visibility:hidden;height:0}.button{text-decoration:none;list-style-type:none}:host(:focus-within){box-shadow:var(--ic-border-focus)}.menu:focus-visible{outline:none}:host(.open){display:block;min-width:calc(20rem - var(--ic-space-xl));width:var(--popover-width, 20rem);max-width:calc(100vw - var(--ic-space-xl))}:host(.open) .menu{visibility:visible;height:-moz-fit-content;height:fit-content;max-height:var(--max-height, -moz-fit-content);max-height:var(--max-height, fit-content);overflow-y:auto;overflow-x:hidden}.parent-label{color:var(--ic-color-tertiary-text);margin:var(--ic-space-xs) var(--ic-space-xs) 0}@keyframes slide-in{from{opacity:0;transform:translateX(10rem)}to{opacity:1;transform:translateX(0)}}@keyframes slide-out{from{opacity:0;transform:translateX(-10rem)}to{opacity:1;transform:translateX(0)}}';const h=class{constructor(i){t(this,i);this.icPopoverClosed=e(this,"icPopoverClosed",7);this.ARIA_LABEL="aria-label";this.popoverMenuEls=[];this.setButtonFocus=()=>{var t;(t=this.popoverMenuEls[this.currentFocus])===null||t===void 0?void 0:t.focus()};this.findAnchorEl=t=>{let e=null;if(!t){this.submenuId===undefined&&console.error("No anchor specified for popover component")}else{e=document.querySelector(t.indexOf("#")===0?t:"#"+t);if(e===null){console.error(`Popover anchor element '${t}' not found`)}}return e};this.isNotPopoverMenuEl=t=>{const{id:e,tagName:i}=t.target;return e!==this.anchor&&i!=="IC-MENU-ITEM"&&i!=="IC-MENU-GROUP"&&i!=="IC-POPOVER-MENU"};this.getNextItemToSelect=(t,e)=>{const i=this.popoverMenuEls.length-1;if(t<1){t=0}let o=e?t+1:t-1;if(o<0){o=i}else if(o>i){o=0}return o};this.addMenuItems=t=>{for(let e=0;e<t.length;e++){const i=t[e];if(i.tagName==="IC-MENU-ITEM"){this.popoverMenuEls.push(i)}else if(i.tagName==="IC-MENU-GROUP"){const t=i.shadowRoot.querySelector(".menu-items-wrapper");const e=n(t);this.addMenuItems(e)}}};this.getMenuAriaLabel=()=>{const t=this.el.getAttribute(this.ARIA_LABEL);if(a(this.submenuId)){return`${t}, within nested level ${this.submenuLevel} ${this.parentLabel} submenu,`}else{return t}};this.handleBackButtonClick=()=>{this.parentPopover.openFromChild();this.open=false};this.initPopperJS=()=>{this.popperInstance=r(this.anchorEl,this.el,{placement:"bottom-start",modifiers:[{name:"offset",options:{offset:[0,4]}},{name:"flip",options:{fallbackPlacements:["top-start","top-end","bottom-end"],rootBoundary:"viewport"}}]})};this.openingFromChild=false;this.openingFromParent=false;this.anchor=undefined;this.parentLabel=undefined;this.parentPopover=undefined;this.submenuId=undefined;this.submenuLevel=1;this.open=undefined}watchOpenHandler(){if(this.open){if(this.parentPopover!==undefined&&!this.popoverMenuEls.some((t=>t.id))){this.popoverMenuEls.unshift(this.backButton)}this.currentFocus=0;setTimeout(this.setButtonFocus,50)}else if(this.popperInstance){this.popperInstance.destroy();this.popperInstance=null}}disconnectedCallback(){if(this.popperInstance){this.popperInstance.destroy();this.popperInstance=null}}componentDidLoad(){const t=this.el.shadowRoot.querySelector("ul.button");const e=n(t);if(e!==null){this.addMenuItems(e)}if(this.submenuId===undefined&&this.el.getAttribute(this.ARIA_LABEL)===null){console.error(`No aria-label specified for popover menu component - aria-label required`)}}componentWillRender(){this.anchorEl=this.findAnchorEl(this.anchor)}componentDidRender(){if(this.open&&!this.popperInstance){this.initPopperJS()}}handleMenuItemClick(t){if(!t.detail.hasSubMenu&&t.detail.label!=="Back"){this.closeMenu()}}handleSubmenuChange(t){const e=t.target;this.open=false;const i=document.querySelector(`ic-popover-menu[submenu-id=${e.submenuTriggerFor}]`);i.parentPopover=this.el;i.anchor=this.anchor;i.ariaLabel=this.el.getAttribute(this.ARIA_LABEL);i.openFromParent();i.submenuLevel=this.submenuLevel+1;i.parentLabel=e.label}handleClick(t){if(this.open&&this.isNotPopoverMenuEl(t)){this.closeMenu()}}handleKeyDown(t){switch(t.key){case"ArrowDown":case"ArrowUp":t.preventDefault();this.currentFocus=this.getNextItemToSelect(this.currentFocus,t.key==="ArrowDown");this.setButtonFocus();break;case"Home":this.currentFocus=0;this.setButtonFocus();break;case"End":this.currentFocus=this.popoverMenuEls.length-1;this.setButtonFocus();break;case"Escape":case"Tab":t.preventDefault();if(this.open){this.closeMenu(true);this.el.blur()}break}}async openFromChild(){this.open=true;this.openingFromChild=true;setTimeout((()=>this.openingFromChild=false),1e3)}async openFromParent(){this.open=true;this.openingFromParent=true;setTimeout((()=>this.openingFromParent=false),1e3)}async closeMenu(t=false){var e;this.open=false;if(this.parentPopover){this.parentPopover.closeMenu(t)}else{if(t){(e=this.anchorEl)===null||e===void 0?void 0:e.focus()}this.icPopoverClosed.emit()}}render(){return i(o,{class:{open:this.open}},i("div",{id:this.parentPopover===undefined?`ic-popover-submenu-${this.submenuId}`:"",class:{menu:true},tabindex:open?"0":"-1"},i("span",{class:{"opening-from-parent":this.openingFromParent,"opening-from-child":this.openingFromChild}},a(this.submenuId)&&i("span",null,i("span",{role:"menu"},i("ic-menu-item",{class:"ic-popover-submenu-back-button",ref:t=>this.backButton=t,label:"Back",onClick:this.handleBackButtonClick,id:`ic-popover-submenu-back-button-${this.submenuLevel}`},i("svg",{slot:"icon",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",class:"submenu-back-icon"},i("path",{d:"M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z",fill:"currentColor"})))),i("ic-typography",{variant:"subtitle-small",class:"parent-label"},this.parentLabel)),i("ul",{class:"button","aria-label":this.getMenuAriaLabel(),role:"menu"},i("slot",null)))))}static get delegatesFocus(){return true}get el(){return s(this)}static get watchers(){return{open:["watchOpenHandler"]}}};h.style=l;export{h as ic_popover_menu};
-//# sourceMappingURL=p-32fa7c28.entry.js.map
+import{r as t,c as e,h as i,H as o,g as s}from"./p-6b5e91e2.js";import{A as n,d as a}from"./p-fef9e8c9.js";import{c as r}from"./p-68a5aaff.js";import"./p-26b7b18f.js";const l='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}@media (prefers-reduced-motion: no-preference){:host .opening-from-parent{animation:slide-in var(--ic-transition-duration-slow) ease-in-out}:host .opening-from-child{animation:slide-out var(--ic-transition-duration-slow) ease-in-out}}:host{border-radius:var(--ic-border-radius);color:var(--ic-color-primary-text);background-color:var(--ic-architectural-white);position:relative;z-index:var(--ic-z-index-popover);box-sizing:border-box;box-shadow:var(--ic-elevation-overlay);display:none}:host(.on-dialog){inset:auto !important}:host(.on-dialog-fix-translate){transform:translate(0, var(--ic-space-xs)) !important}:host(.on-dialog-translate-y){transform:translate(0, calc(-1 * var(--translate-y))) !important}.menu{border:var(--ic-border-default);border-radius:var(--ic-border-radius);background-color:var(--ic-architectural-white);visibility:hidden;height:0}.button{text-decoration:none;list-style-type:none}:host(:focus-within){box-shadow:var(--ic-border-focus)}.menu:focus-visible{outline:none}:host(.open){display:block;min-width:calc(20rem - var(--ic-space-xl));width:var(--popover-width, 20rem);max-width:calc(100vw - var(--ic-space-xl))}:host(.open) .menu{visibility:visible;height:-moz-fit-content;height:fit-content;max-height:var(--max-height, -moz-fit-content);max-height:var(--max-height, fit-content);overflow-y:auto;overflow-x:hidden}.parent-label{color:var(--ic-color-tertiary-text);margin:var(--ic-space-xs) var(--ic-space-xs) 0}@keyframes slide-in{from{opacity:0;transform:translateX(10rem)}to{opacity:1;transform:translateX(0)}}@keyframes slide-out{from{opacity:0;transform:translateX(-10rem)}to{opacity:1;transform:translateX(0)}}';const h=class{constructor(i){t(this,i);this.icPopoverClosed=e(this,"icPopoverClosed",7);this.ARIA_LABEL="aria-label";this.popoverMenuEls=[];this.setButtonFocus=()=>{var t;(t=this.popoverMenuEls[this.currentFocus])===null||t===void 0?void 0:t.focus()};this.findAnchorEl=t=>{let e=null;if(!t){this.submenuId===undefined&&console.error("No anchor specified for popover component")}else{e=document.querySelector(t.indexOf("#")===0?t:"#"+t);if(e===null){console.error(`Popover anchor element '${t}' not found`)}}return e};this.isNotPopoverMenuEl=t=>{const{id:e,tagName:i}=t.target;return e!==this.anchor&&i!=="IC-MENU-ITEM"&&i!=="IC-MENU-GROUP"&&i!=="IC-POPOVER-MENU"};this.getNextItemToSelect=(t,e)=>{const i=this.popoverMenuEls.length-1;if(t<1){t=0}let o=e?t+1:t-1;if(o<0){o=i}else if(o>i){o=0}return o};this.addMenuItems=t=>{for(let e=0;e<t.length;e++){const i=t[e];if(i.tagName==="IC-MENU-ITEM"){this.popoverMenuEls.push(i)}else if(i.tagName==="IC-MENU-GROUP"){const t=i.shadowRoot.querySelector(".menu-items-wrapper");const e=n(t);this.addMenuItems(e)}}};this.getMenuAriaLabel=()=>{const t=this.el.getAttribute(this.ARIA_LABEL);if(a(this.submenuId)){return`${t}, within nested level ${this.submenuLevel} ${this.parentLabel} submenu,`}else{return t}};this.handleBackButtonClick=()=>{this.parentPopover.openFromChild();this.open=false};this.initPopperJS=()=>{this.popperInstance=r(this.anchorEl,this.el,{placement:"bottom-start",modifiers:[{name:"offset",options:{offset:[0,4]}},{name:"flip",options:{fallbackPlacements:["top-start","top-end","bottom-end"],rootBoundary:"viewport"}}]})};this.openingFromChild=false;this.openingFromParent=false;this.anchor=undefined;this.parentLabel=undefined;this.parentPopover=undefined;this.submenuId=undefined;this.submenuLevel=1;this.open=undefined}watchOpenHandler(){if(this.open){if(this.parentPopover!==undefined&&!this.popoverMenuEls.some((t=>t.id))){this.popoverMenuEls.unshift(this.backButton)}this.currentFocus=0;setTimeout(this.setButtonFocus,50)}else if(this.popperInstance){this.popperInstance.destroy();this.popperInstance=null}}disconnectedCallback(){if(this.popperInstance){this.popperInstance.destroy();this.popperInstance=null}}componentDidLoad(){const t=this.el.shadowRoot.querySelector("ul.button");const e=n(t);if(e!==null){this.addMenuItems(e)}if(this.submenuId===undefined&&this.el.getAttribute(this.ARIA_LABEL)===null){console.error(`No aria-label specified for popover menu component - aria-label required`)}}componentWillRender(){this.anchorEl=this.findAnchorEl(this.anchor)}componentDidRender(){if(this.open&&!this.popperInstance){this.initPopperJS()}}handleMenuItemClick(t){if(!t.detail.submenuTriggerFor&&t.detail.label!=="Back"){this.closeMenu(false,t.detail)}}handleSubmenuChange(t){const e=t.target;this.open=false;const i=document.querySelector(`ic-popover-menu[submenu-id=${e.submenuTriggerFor}]`);i.parentPopover=this.el;i.anchor=this.anchor;i.ariaLabel=this.el.getAttribute(this.ARIA_LABEL);i.openFromParent();i.submenuLevel=this.submenuLevel+1;i.parentLabel=e.label}handleClick(t){if(this.open&&this.isNotPopoverMenuEl(t)){this.closeMenu()}}handleKeyDown(t){switch(t.key){case"ArrowDown":case"ArrowUp":t.preventDefault();this.currentFocus=this.getNextItemToSelect(this.currentFocus,t.key==="ArrowDown");this.setButtonFocus();break;case"Home":this.currentFocus=0;this.setButtonFocus();break;case"End":this.currentFocus=this.popoverMenuEls.length-1;this.setButtonFocus();break;case"Escape":case"Tab":t.preventDefault();if(this.open){this.closeMenu(true);this.el.blur()}break}}async openFromChild(){this.open=true;this.openingFromChild=true;setTimeout((()=>this.openingFromChild=false),1e3)}async openFromParent(){this.open=true;this.openingFromParent=true;setTimeout((()=>this.openingFromParent=false),1e3)}async closeMenu(t=false,e){var i;this.open=false;if(this.parentPopover){this.parentPopover.closeMenu(t,e)}else{if(t){(i=this.anchorEl)===null||i===void 0?void 0:i.focus()}this.icPopoverClosed.emit(e)}}render(){return i(o,{class:{open:this.open}},i("div",{id:this.parentPopover===undefined?`ic-popover-submenu-${this.submenuId}`:"",class:{menu:true},tabindex:open?"0":"-1"},i("span",{class:{"opening-from-parent":this.openingFromParent,"opening-from-child":this.openingFromChild}},a(this.submenuId)&&i("span",null,i("span",{role:"menu"},i("ic-menu-item",{class:"ic-popover-submenu-back-button",ref:t=>this.backButton=t,label:"Back",onClick:this.handleBackButtonClick,id:`ic-popover-submenu-back-button-${this.submenuLevel}`},i("svg",{slot:"icon",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",class:"submenu-back-icon"},i("path",{d:"M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z",fill:"currentColor"})))),i("ic-typography",{variant:"subtitle-small",class:"parent-label"},this.parentLabel)),i("ul",{class:"button","aria-label":this.getMenuAriaLabel(),role:"menu"},i("slot",null)))))}static get delegatesFocus(){return true}get el(){return s(this)}static get watchers(){return{open:["watchOpenHandler"]}}};h.style=l;export{h as ic_popover_menu};
+//# sourceMappingURL=p-9feec47e.entry.js.map

package/dist/core/p-9feec47e.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["icPopoverMenuCss","PopoverMenu","this","ARIA_LABEL","popoverMenuEls","setButtonFocus","_a","currentFocus","focus","findAnchorEl","anchor","anchorElement","submenuId","undefined","console","error","document","querySelector","indexOf","isNotPopoverMenuEl","ev","id","tagName","target","getNextItemToSelect","currentItem","movingDown","numButtons","length","nextItem","addMenuItems","elements","i","el","push","groupSlotWrapper","shadowRoot","menuGroupElements","getSlotElements","getMenuAriaLabel","ariaLabel","getAttribute","isPropDefined","submenuLevel","parentLabel","handleBackButtonClick","parentPopover","openFromChild","open","initPopperJS","popperInstance","createPopper","anchorEl","placement","modifiers","name","options","offset","fallbackPlacements","rootBoundary","watchOpenHandler","some","menuItem","unshift","backButton","setTimeout","destroy","disconnectedCallback","componentDidLoad","slotWrapper","popoverMenuElements","componentWillRender","componentDidRender","handleMenuItemClick","detail","submenuTriggerFor","label","closeMenu","handleSubmenuChange","childEl","openFromParent","handleClick","handleKeyDown","key","preventDefault","blur","openingFromChild","openingFromParent","setFocusToAnchor","menuElement","icPopoverClosed","emit","render","h","Host","class","menu","tabindex","role","ref","onClick","slot","viewBox","fill","xmlns","d","variant"],"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-color-primary-text);\n background-color: var(--ic-architectural-white);\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-radius: var(--ic-border-radius);\n background-color: var(--ic-architectural-white);\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(.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(.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 color: var(--ic-color-tertiary-text);\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\";\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;\n private ARIA_LABEL: string = \"aria-label\";\n private backButton: HTMLIcMenuItemElement;\n private currentFocus: number;\n private popoverMenuEls: HTMLIcMenuItemElement[] = [];\n private popperInstance: PopperInstance;\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 * If `true`, the popover menu will be displayed.\n */\n @Prop({ reflect: true, mutable: true }) open: boolean = undefined;\n\n @Watch(\"open\")\n watchOpenHandler(): void {\n if (this.open) {\n if (\n this.parentPopover !== undefined &&\n !this.popoverMenuEls.some((menuItem) => menuItem.id)\n ) {\n 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 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 const popoverMenuElements = getSlotElements(slotWrapper);\n\n if (popoverMenuElements !== null) {\n this.addMenuItems(popoverMenuElements);\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): HTMLElement => {\n let anchorElement: HTMLElement = 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 const menuGroupElements = getSlotElements(groupSlotWrapper);\n\n this.addMenuItems(menuGroupElements);\n }\n }\n };\n\n private getMenuAriaLabel = (): string => {\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 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 render() {\n return (\n <Host class={{ open: this.open }}>\n <div\n id={\n this.parentPopover === undefined\n ? `ic-popover-submenu-${this.submenuId}`\n : \"\"\n }\n class={{\n menu: true,\n }}\n tabindex={open ? \"0\" : \"-1\"}\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"],"mappings":"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"}