@ukic/web-components 2.1.0-beta.2 → 2.1.0-beta.4

package/dist/core/{p-2b5c9143.entry.js.map → p-8470c255.entry.js.map}

@@ -1 +1 @@
-{"version":3,"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"],"names":["icSideNavigationCss","SideNavigation","this","ANIMATION_DURATION","parseInt","getCssProperty","emitSideNavigationExpanded","objDetails","event","CustomEvent","detail","sideNavExpanded","sideNavMobile","el","dispatchEvent","toggleMenu","menuOpen","setMobileMenuAriaAttributes","setToggleMenuFlyoutMenuVisibility","sideNav","shadowRoot","querySelector","sideNavInner","bottomWrapper","classList","add","setTimeout","remove","nativeButton","setAttribute","setAndRemoveNoWrapAfterMenuExpanded","appTitle","toggleMenuExpanded","menuExpanded","arrangeSlottedNavigationItem","displayTooltipWithExpandedLongLabel","collapsedIconLabels","animateCollapsedIconLabels","navItems","querySelectorAll","forEach","navItem","hasUsedSlot","isSlotUsed","navItemSlot","iconWrapper","document","createElement","icon","label","textContent","trim","icTypography","className","append","styleSlottedCollapsedIconLabels","styleSlottedIconLabels","style","marginTop","whiteSpace","overflow","textOverflow","opacity","visibility","transition","primaryNavigationWrapper","secondaryNavigationWrapper","addEventListener","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","setProperty","setParentPaddingLeft","resizeObserver","resizeObserverCallback","currSize","deviceSize","DEVICE_SIZES","S","disableAutoParentStyling","topBarHeight","scrollHeight","inline","L","static","runResizeObserver","ResizeObserver","getCurrentDeviceSize","deviceSizeAppTitle","observe","body","box","setCollapsedIconLabels","styleSlottedCollapsedIconLabel","dynamicSlottedIcTypographyComps","contains","renderTopBar","isSDevice","foregroundColor","href","isAppNameSubtitleVariant","h","class","top-bar","[object Object]","aria-labelledby","aria-hidden","aria-label","id","variant","size","full-width","appearance","onClick","aria-owns","aria-haspopup","aria-expanded","slot","innerHTML","closeIcon","menuIcon","name","getThemeForegroundColor","XL","ev","theme","mode","hasSecondaryNavigation","checkResizeObserver","onComponentRequiredPropUndefined","prop","propName","disconnect","status","version","isMdDevice","M","isLgDevice","displayExpandBtn","topBarProps","Host","xs-menu-open","xs-menu-close","sm-collapsed","sm-expanded","IcThemeForegroundEnum","Dark","assign","hasClassificationBanner","chevronIcon"],"mappings":"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","sourcesContent":[":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: 56px;\n  --sm-side-navigation-collapsed-labels-width: 96px;\n  --sm-side-navigation-expand-transition-duration: var(\n    --ic-transition-duration-slow\n  );\n  --side-navigation-width: 320px;\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}\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  visibility: hidden;\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(.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(.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  position: sticky;\n  bottom: 0;\n  left: 0;\n  z-index: 2;\n  box-shadow: -3px -3px 8px rgb(0 0 0 / 20%);\n  background-color: var(--ic-theme-primary);\n  display: flex;\n  flex-direction: column;\n  visibility: hidden;\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@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: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\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  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: 104px;\n}\n\n.app-status-wrapper {\n  position: absolute;\n  right: var(--ic-space-md);\n  top: 0;\n  bottom: 0;\n  width: auto;\n  display: flex;\n  align-items: center;\n  pointer-events: none;\n}\n\n.app-status-wrapper .app-version {\n  max-width: 100px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.app-status-wrapper .app-status {\n  border-radius: 80px;\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  margin-right: var(--ic-space-xs);\n  max-width: 100px;\n}\n\n.app-status-wrapper .app-status-text {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-width: 96px;\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: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n}\n\n/* Navigation Group */\n\n::slotted(ic-navigation-group) {\n  --navigation-group-height: 44px;\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: 56px;\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: 4px;\n}\n\n/* Navigation Items */\n\n::slotted(ic-navigation-item),\n::slotted(ic-navigation-group) {\n  --navigation-item-height: 56px;\n  --navigation-item-width: auto;\n  --navigation-item-justify-content: flex-start;\n}\n\n/* Toggle Chevron */\n\n.bottom-side-nav {\n  position: relative;\n  align-content: flex-end;\n  height: var(--sm-side-navigation-top-bar-height);\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  display: none;\n}\n\n.menu-visibility-visible {\n  visibility: visible;\n}\n\n.menu-visibility-hidden {\n  visibility: hidden;\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: 577px) {\n  :host {\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(.static) {\n    position: relative;\n    left: auto;\n    top: auto;\n    bottom: auto;\n  }\n\n  .app-icon-container {\n    padding: var(--ic-space-xxs) 0;\n  }\n\n  .top-bar {\n    --side-navigation-height: var(--sm-side-navigation-top-bar-height);\n\n    position: relative;\n    padding: 0;\n    box-shadow: -3px 3px 8px rgb(0 0 0 / 20%);\n  }\n\n  :host(.inline) .top-bar {\n    position: sticky;\n  }\n\n  :host(.anchor-right) .top-bar {\n    box-shadow: 3px 3px 8px rgb(0 0 0 / 20%);\n  }\n\n  :host(.anchor-right) .bottom-wrapper {\n    box-shadow: 3px -3px 8px rgb(0 0 0 / 20%);\n  }\n\n  .side-navigation,\n  .top-bar {\n    width: var(--sm-side-navigation-top-bar-height);\n  }\n\n  :host(.sm-collapsed) {\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) {\n    width: var(--sm-side-navigation-collapsed-labels-width);\n  }\n\n  :host(.sm-expanded) {\n    width: var(--side-navigation-width);\n    transition: width var(--ic-easing-transition-slow);\n    box-shadow: var(--ic-elevation-overlay);\n  }\n\n  .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-navigation {\n    position: relative;\n  }\n\n  :host(.anchor-right) .side-navigation {\n    left: auto;\n    right: 0;\n  }\n\n  .side-navigation-inner {\n    width: 100%;\n    visibility: visible;\n  }\n\n  .bottom-wrapper {\n    visibility: visible;\n  }\n\n  .app-title-wrapper {\n    margin-left: 0;\n    border-left: none;\n    padding: var(--ic-space-sm);\n  }\n\n  .app-title-wrapper ::slotted(svg) {\n    height: var(--ic-space-lg);\n    width: var(--ic-space-lg);\n  }\n\n  .app-title-wrapper ic-typography {\n    margin: calc(-1 * 4.5px) 0 calc(-1 * 4.5px) var(--ic-space-md);\n    font-weight: var(--ic-font-weight-semibold);\n  }\n\n  :host(.sm-collapsed) .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) ic-typography {\n    position: relative;\n    left: 0;\n  }\n\n  :host(.sm-expanded) :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) :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) :is(.side-navigation, .top-bar) {\n    left: auto;\n    right: 0;\n  }\n\n  .app-status-wrapper,\n  :host(.sm-collapsed) .app-status-wrapper {\n    display: none;\n  }\n\n  :host(.sm-expanded) .app-status-wrapper {\n    display: flex;\n  }\n\n  .bottom-side-nav {\n    justify-items: flex-end;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .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  .bottom-side-nav .menu-expand-button svg {\n    justify-items: flex-start;\n    align-self: center;\n  }\n\n  .bottom-side-nav .menu-expand-button:hover {\n    background-color: var(--ic-theme-hover);\n  }\n\n  :host .bottom-side-nav {\n    outline: none;\n  }\n\n  :host .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) .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) .bottom-side-nav .menu-expand-button svg {\n    transform: scaleX(-1);\n    transition: transform var(--ic-easing-transition-slow);\n  }\n\n  :host(.anchor-right.sm-collapsed) .bottom-side-nav .menu-expand-button svg {\n    transform: scaleX(-1);\n  }\n\n  :host(.anchor-right.sm-expanded) .bottom-side-nav .menu-expand-button svg {\n    transform: scaleX(1);\n  }\n\n  :host(.sm-collapsed) ::slotted(ic-navigation-item) {\n    --navigation-item-label-opacity: 1;\n  }\n\n  :host(.sm-collapsed) ::slotted(ic-navigation-item),\n  :host(.sm-collapsed) ::slotted(ic-navigation-group) {\n    --navigation-item-label-opacity: 0;\n  }\n\n  :host(.sm-expanded) ::slotted(ic-navigation-item),\n  :host(.sm-expanded) ::slotted(ic-navigation-group) {\n    --navigation-item-label-opacity: 1;\n  }\n\n  :host(.sm-collapsed) ::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) ::slotted(ic-navigation-group) {\n    --navigation-group-title-position: relative;\n    --navigation-group-title-position-left: 0;\n    --navigation-group-expand-toggle-padding: 4px;\n    --navigation-group-title-opacity: flex;\n  }\n\n  :host(.sm-collapsed.collapsed-labels) .side-navigation,\n  :host(.sm-collapsed.collapsed-labels) .top-bar {\n    width: var(--sm-side-navigation-collapsed-labels-width);\n  }\n\n  :host(.sm-collapsed.collapsed-labels) .menu-expand-button {\n    padding: 0;\n  }\n\n  :host(.sm-collapsed.collapsed-labels) .app-title-wrapper {\n    width: 100%;\n    justify-content: center;\n  }\n\n  :host(.sm-collapsed.collapsed-labels) ::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: 16px;\n  }\n\n  :host(.collapsed-labels) .bottom-side-nav .menu-expand-button {\n    justify-content: center;\n  }\n\n  :host .collapsed-icon-labels-start {\n    visibility: hidden;\n    opacity: 0;\n  }\n\n  :host .collapsed-icon-labels-end {\n    visibility: visible;\n    opacity: 1;\n    transition: visibility 0s, opacity var(--ic-easing-transition-slow);\n  }\n}\n\n@media screen and (min-width: 993px) {\n  :host {\n    position: sticky;\n    left: auto;\n    top: 0;\n    bottom: 0;\n  }\n\n  :host(.sm-expanded) {\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  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} 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} from \"../../utils/helpers\";\nimport {\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport { IcTopBar } 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 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  @Element() el: HTMLIcSideNavigationElement;\n  /**\n   * The title of the app to be displayed.\n   */\n  @Prop() appTitle!: string;\n  /**\n   * The status of the app to be displayed.\n   */\n  @Prop() status: string;\n  /**\n   * The version of the app to be displayed.\n   */\n  @Prop() version: string;\n  /**\n   * If `true`, the side navigation will load in an expanded state.\n   */\n  @Prop() expanded: boolean = false;\n  /**\n   * The URL that the app title link points to.\n   */\n  @Prop() href: string = \"/\";\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   * If `true`, the icon and label will appear when side navigation is collapsed.\n   */\n  @Prop() collapsedIconLabels: boolean = false;\n  /**\n   * If `true`, side navigation will be contained by its parent element.\n   */\n  @Prop() inline: boolean = false;\n\n  /**\n   * If `true`, automatic parent wrapper styling will be disabled.\n   */\n  @Prop() disableAutoParentStyling: boolean = false;\n\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n  @State() menuOpen: boolean = false;\n  @State() menuExpanded: boolean = false;\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() deviceSizeAppTitle = DEVICE_SIZES.S;\n  @State() hasSecondaryNavigation: boolean = false;\n\n  private ANIMATION_DURATION =\n    parseInt(getCssProperty(\"--ic-transition-duration-slow\")) || 0;\n\n  @Listen(\"icThemeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.foregroundColor = theme.mode;\n  }\n\n  private emitSideNavigationExpanded = (objDetails: {\n    sideNavExpanded: boolean;\n    sideNavMobile?: boolean;\n  }): void => {\n    const event = new CustomEvent(\"sideNavExpanded\", {\n      detail: {\n        sideNavExpanded: objDetails.sideNavExpanded,\n        sideNavMobile: objDetails.sideNavMobile,\n      },\n    });\n    this.el.dispatchEvent(event);\n  };\n\n  private toggleMenu = (): void => {\n    this.menuOpen = !this.menuOpen;\n    this.setMobileMenuAriaAttributes(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    if (menuOpen) {\n      bottomWrapper.classList.add(\"menu-visibility-visible\");\n      sideNavInner.classList.add(\"menu-visibility-visible\");\n    } else {\n      setTimeout(() => {\n        sideNavInner.classList.remove(\"menu-visibility-visible\");\n        bottomWrapper.classList.remove(\"menu-visibility-visible\");\n      }, this.ANIMATION_DURATION);\n    }\n  };\n\n  private setMobileMenuAriaAttributes = (menuOpen: boolean) => {\n    const nativeButton = this.el.shadowRoot\n      .querySelector(\"#menu-button\")\n      .shadowRoot.querySelector(\"button\");\n\n    if (menuOpen) {\n      nativeButton.setAttribute(\"aria-expanded\", \"true\");\n      nativeButton.setAttribute(\"aria-label\", \"Close navigation menu\");\n    } else {\n      nativeButton.setAttribute(\"aria-expanded\", \"false\");\n      nativeButton.setAttribute(\"aria-label\", \"Open navigation menu\");\n    }\n  };\n\n  private setAndRemoveNoWrapAfterMenuExpanded = () => {\n    const appTitle = this.el.shadowRoot.querySelector(\n      \".title-link ic-typography\"\n    );\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    }\n\n    this.arrangeSlottedNavigationItem(this.menuExpanded);\n\n    this.displayTooltipWithExpandedLongLabel(this.menuExpanded);\n\n    if (this.collapsedIconLabels) {\n      this.animateCollapsedIconLabels();\n    }\n\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/collaped animations as external CSS classes are not\n   * do not take affect.\n   * @param menuExpanded boolean - true or false depending on seide navigation state\n   */\n  private arrangeSlottedNavigationItem = (menuExpanded?: boolean) => {\n    const navItems = this.el.querySelectorAll(\"ic-navigation-item\");\n\n    navItems.forEach((navItem) => {\n      const hasUsedSlot = isSlotUsed(navItem, \"navigation-item\");\n\n      if (hasUsedSlot) {\n        const navItemSlot = navItem.querySelector(\"[slot='navigation-item']\");\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.className = \"icon-container\";\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 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 animateCollapsedIconLabels = () => {\n    const primaryNavigationWrapper = this.el.shadowRoot.querySelector(\n      \".primary-navigation\"\n    );\n    const secondaryNavigationWrapper = this.el.shadowRoot.querySelector(\n      \".bottom-wrapper > .secondary-navigation\"\n    );\n\n    if (primaryNavigationWrapper) {\n      primaryNavigationWrapper.classList.remove(\"collapsed-icon-labels-end\");\n      primaryNavigationWrapper.classList.add(\"collapsed-icon-labels-start\");\n    }\n\n    if (secondaryNavigationWrapper) {\n      secondaryNavigationWrapper.classList.remove(\"collapsed-icon-labels-end\");\n      secondaryNavigationWrapper.classList.add(\"collapsed-icon-labels-start\");\n    }\n\n    this.el.addEventListener(\"transitionend\", () => {\n      if (primaryNavigationWrapper) {\n        primaryNavigationWrapper.classList.remove(\n          \"collapsed-icon-labels-start\"\n        );\n        primaryNavigationWrapper.classList.add(\"collapsed-icon-labels-end\");\n      }\n\n      if (secondaryNavigationWrapper) {\n        secondaryNavigationWrapper.classList.remove(\n          \"collapsed-icon-labels-start\"\n        );\n        secondaryNavigationWrapper.classList.add(\"collapsed-icon-labels-end\");\n      }\n    });\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].querySelector(\"a\");\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(\"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(\"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 resizeObserver: ResizeObserver = null;\n\n  private resizeObserverCallback = (currSize: number) => {\n    if (currSize !== this.deviceSize) {\n      this.deviceSize = currSize;\n\n      if (currSize === DEVICE_SIZES.S) {\n        if (!this.disableAutoParentStyling) {\n          const topBarHeight =\n            this.el.shadowRoot.querySelector(\".top-bar\").scrollHeight;\n          this.setParentPaddingTop(`${topBarHeight}px`);\n          this.setParentPaddingLeft(\"0\");\n\n          if (this.inline) {\n            this.el.parentElement.style.setProperty(\n              \"height\",\n              `calc(100% - ${topBarHeight}px)`\n            );\n          }\n        }\n        this.emitSideNavigationExpanded({\n          sideNavExpanded: this.menuExpanded,\n          sideNavMobile: true,\n        });\n      } else {\n        if (!this.disableAutoParentStyling) {\n          this.setParentPaddingTop(\"0\");\n          this.el.parentElement.style.setProperty(\"height\", \"100%\");\n        }\n        this.emitSideNavigationExpanded({\n          sideNavExpanded: this.menuExpanded,\n          sideNavMobile: false,\n        });\n      }\n\n      if (currSize > DEVICE_SIZES.L) {\n        if (!this.disableAutoParentStyling) {\n          this.setParentPaddingTop(\"0\");\n          this.setParentPaddingLeft(\"0\");\n        }\n      } else if (\n        currSize > DEVICE_SIZES.S &&\n        currSize <= DEVICE_SIZES.L &&\n        !this.static &&\n        !this.disableAutoParentStyling\n      ) {\n        if (this.collapsedIconLabels) {\n          this.setParentPaddingLeft(\"calc(var(--ic-space-xxl) * 2)\");\n        } else {\n          this.setParentPaddingLeft(\n            \"calc(var(--ic-space-xxl) + var(--ic-space-xs))\"\n          );\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(\"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    appTitle,\n  }: IcTopBar) => (\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            aria-owns=\"side-navigation\"\n            aria-haspopup=\"true\"\n            aria-expanded=\"false\"\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        <a href={href} class=\"title-link\">\n          <div class=\"app-icon-container\" aria-hidden=\"true\">\n            <slot name=\"app-icon\"></slot>\n          </div>\n          <ic-typography\n            variant={isAppNameSubtitleVariant ? \"subtitle-small\" : \"h3\"}\n          >\n            {appTitle}\n          </ic-typography>\n        </a>\n      </div>\n    </div>\n  );\n\n  componentWillLoad(): void {\n    if (this.expanded) {\n      this.setMenuExpanded(true);\n    } else {\n      this.setMenuExpanded(false);\n    }\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: this.deviceSize === DEVICE_SIZES.S,\n    });\n\n    checkResizeObserver(this.runResizeObserver);\n    this.arrangeSlottedNavigationItem();\n    this.styleSlottedCollapsedIconLabel();\n    this.displayTooltipWithExpandedLongLabel(this.menuExpanded);\n\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\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 = 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 = isMdDevice || (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          [IcThemeForegroundEnum.Dark]:\n            foregroundColor === IcThemeForegroundEnum.Dark,\n          [\"collapsed-labels\"]:\n            !isSDevice && !menuExpanded && collapsedIconLabels,\n          [\"static\"]: this.static,\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"]}
+{"version":3,"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"],"names":["icSideNavigationCss","SideNavigation","this","ANIMATION_DURATION","parseInt","getCssProperty","emitSideNavigationExpanded","objDetails","event","CustomEvent","detail","sideNavExpanded","sideNavMobile","el","dispatchEvent","toggleMenu","menuOpen","setMobileMenuAriaAttributes","setToggleMenuFlyoutMenuVisibility","sideNav","shadowRoot","querySelector","sideNavInner","bottomWrapper","classList","add","setTimeout","remove","nativeButton","setAttribute","setAndRemoveNoWrapAfterMenuExpanded","appTitle","toggleMenuExpanded","menuExpanded","arrangeSlottedNavigationItem","displayTooltipWithExpandedLongLabel","collapsedIconLabels","animateCollapsedIconLabels","navItems","querySelectorAll","forEach","navItem","hasUsedSlot","isSlotUsed","navItemSlot","iconWrapper","document","createElement","icon","label","textContent","trim","icTypography","className","append","styleSlottedCollapsedIconLabels","styleSlottedIconLabels","style","marginTop","whiteSpace","overflow","textOverflow","opacity","visibility","transition","primaryNavigationWrapper","secondaryNavigationWrapper","addEventListener","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","setProperty","setParentPaddingLeft","resizeObserver","resizeObserverCallback","currSize","deviceSize","DEVICE_SIZES","S","disableAutoParentStyling","topBarHeight","scrollHeight","inline","L","static","runResizeObserver","ResizeObserver","getCurrentDeviceSize","deviceSizeAppTitle","observe","body","box","setCollapsedIconLabels","styleSlottedCollapsedIconLabel","dynamicSlottedIcTypographyComps","contains","renderTopBar","isSDevice","foregroundColor","href","isAppNameSubtitleVariant","h","class","top-bar","[object Object]","aria-labelledby","aria-hidden","aria-label","id","variant","size","full-width","appearance","onClick","aria-owns","aria-haspopup","aria-expanded","slot","innerHTML","closeIcon","menuIcon","name","getThemeForegroundColor","XL","ev","theme","mode","hasSecondaryNavigation","checkResizeObserver","onComponentRequiredPropUndefined","prop","propName","disconnect","status","version","isMdDevice","M","isLgDevice","displayExpandBtn","topBarProps","Host","xs-menu-open","xs-menu-close","sm-collapsed","sm-expanded","IcThemeForegroundEnum","Dark","assign","hasClassificationBanner","chevronIcon"],"mappings":"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","sourcesContent":[":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: 56px;\n  --sm-side-navigation-collapsed-labels-width: 96px;\n  --sm-side-navigation-expand-transition-duration: var(\n    --ic-transition-duration-slow\n  );\n  --side-navigation-width: 320px;\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}\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  visibility: hidden;\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(.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(.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  position: sticky;\n  bottom: 0;\n  left: 0;\n  z-index: 2;\n  box-shadow: -3px -3px 8px rgb(0 0 0 / 20%);\n  background-color: var(--ic-theme-primary);\n  display: flex;\n  flex-direction: column;\n  visibility: hidden;\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@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: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\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  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: 104px;\n}\n\n.app-status-wrapper {\n  position: absolute;\n  right: var(--ic-space-md);\n  top: 0;\n  bottom: 0;\n  width: auto;\n  display: flex;\n  align-items: center;\n  pointer-events: none;\n}\n\n.app-status-wrapper .app-version {\n  max-width: 100px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.app-status-wrapper .app-status {\n  border-radius: 80px;\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  margin-right: var(--ic-space-xs);\n  max-width: 100px;\n}\n\n.app-status-wrapper .app-status-text {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-width: 96px;\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: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n}\n\n/* Navigation Group */\n\n::slotted(ic-navigation-group) {\n  --navigation-group-height: 44px;\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: 56px;\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: 4px;\n}\n\n/* Navigation Items */\n\n::slotted(ic-navigation-item),\n::slotted(ic-navigation-group) {\n  --navigation-item-height: 56px;\n  --navigation-item-width: auto;\n  --navigation-item-justify-content: flex-start;\n}\n\n/* Toggle Chevron */\n\n.bottom-side-nav {\n  position: relative;\n  align-content: flex-end;\n  height: var(--sm-side-navigation-top-bar-height);\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  display: none;\n}\n\n.menu-visibility-visible {\n  visibility: visible;\n}\n\n.menu-visibility-hidden {\n  visibility: hidden;\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: 577px) {\n  :host {\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(.static) {\n    position: relative;\n    left: auto;\n    top: auto;\n    bottom: auto;\n  }\n\n  .app-icon-container {\n    padding: var(--ic-space-xxs) 0;\n  }\n\n  .top-bar {\n    --side-navigation-height: var(--sm-side-navigation-top-bar-height);\n\n    position: relative;\n    padding: 0;\n    box-shadow: -3px 3px 8px rgb(0 0 0 / 20%);\n  }\n\n  :host(.inline) .top-bar {\n    position: sticky;\n  }\n\n  :host(.anchor-right) .top-bar {\n    box-shadow: 3px 3px 8px rgb(0 0 0 / 20%);\n  }\n\n  :host(.anchor-right) .bottom-wrapper {\n    box-shadow: 3px -3px 8px rgb(0 0 0 / 20%);\n  }\n\n  .side-navigation,\n  .top-bar {\n    width: var(--sm-side-navigation-top-bar-height);\n  }\n\n  :host(.sm-collapsed) {\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) {\n    width: var(--sm-side-navigation-collapsed-labels-width);\n  }\n\n  :host(.sm-expanded) {\n    width: var(--side-navigation-width);\n    transition: width var(--ic-easing-transition-slow);\n    box-shadow: var(--ic-elevation-overlay);\n  }\n\n  .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-navigation {\n    position: relative;\n  }\n\n  :host(.anchor-right) .side-navigation {\n    left: auto;\n    right: 0;\n  }\n\n  .side-navigation-inner {\n    width: 100%;\n    visibility: visible;\n  }\n\n  .bottom-wrapper {\n    visibility: visible;\n  }\n\n  .app-title-wrapper {\n    margin-left: 0;\n    border-left: none;\n    padding: var(--ic-space-sm);\n  }\n\n  .app-title-wrapper ::slotted(svg) {\n    height: var(--ic-space-lg);\n    width: var(--ic-space-lg);\n  }\n\n  .app-title-wrapper ic-typography {\n    margin: calc(-1 * 4.5px) 0 calc(-1 * 4.5px) var(--ic-space-md);\n    font-weight: var(--ic-font-weight-semibold);\n  }\n\n  :host(.sm-collapsed) .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) ic-typography {\n    position: relative;\n    left: 0;\n  }\n\n  :host(.sm-expanded) :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) :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) :is(.side-navigation, .top-bar) {\n    left: auto;\n    right: 0;\n  }\n\n  .app-status-wrapper,\n  :host(.sm-collapsed) .app-status-wrapper {\n    display: none;\n  }\n\n  :host(.sm-expanded) .app-status-wrapper {\n    display: flex;\n  }\n\n  .bottom-side-nav {\n    justify-items: flex-end;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .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  .bottom-side-nav .menu-expand-button svg {\n    justify-items: flex-start;\n    align-self: center;\n  }\n\n  .bottom-side-nav .menu-expand-button:hover {\n    background-color: var(--ic-theme-hover);\n  }\n\n  :host .bottom-side-nav {\n    outline: none;\n  }\n\n  :host .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) .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) .bottom-side-nav .menu-expand-button svg {\n    transform: scaleX(-1);\n    transition: transform var(--ic-easing-transition-slow);\n  }\n\n  :host(.anchor-right.sm-collapsed) .bottom-side-nav .menu-expand-button svg {\n    transform: scaleX(-1);\n  }\n\n  :host(.anchor-right.sm-expanded) .bottom-side-nav .menu-expand-button svg {\n    transform: scaleX(1);\n  }\n\n  :host(.sm-collapsed) ::slotted(ic-navigation-item) {\n    --navigation-item-label-opacity: 1;\n  }\n\n  :host(.sm-collapsed) ::slotted(ic-navigation-item),\n  :host(.sm-collapsed) ::slotted(ic-navigation-group) {\n    --navigation-item-label-opacity: 0;\n  }\n\n  :host(.sm-expanded) ::slotted(ic-navigation-item),\n  :host(.sm-expanded) ::slotted(ic-navigation-group) {\n    --navigation-item-label-opacity: 1;\n  }\n\n  :host(.sm-collapsed) ::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) ::slotted(ic-navigation-group) {\n    --navigation-group-title-position: relative;\n    --navigation-group-title-position-left: 0;\n    --navigation-group-expand-toggle-padding: 4px;\n    --navigation-group-title-opacity: flex;\n  }\n\n  :host(.sm-collapsed.collapsed-labels) .side-navigation,\n  :host(.sm-collapsed.collapsed-labels) .top-bar {\n    width: var(--sm-side-navigation-collapsed-labels-width);\n  }\n\n  :host(.sm-collapsed.collapsed-labels) .menu-expand-button {\n    padding: 0;\n  }\n\n  :host(.sm-collapsed.collapsed-labels) .app-title-wrapper {\n    width: 100%;\n    justify-content: center;\n  }\n\n  :host(.sm-collapsed.collapsed-labels) ::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: 16px;\n  }\n\n  :host(.collapsed-labels) .bottom-side-nav .menu-expand-button {\n    justify-content: center;\n  }\n\n  :host .collapsed-icon-labels-start {\n    visibility: hidden;\n    opacity: 0;\n  }\n\n  :host .collapsed-icon-labels-end {\n    visibility: visible;\n    opacity: 1;\n    transition: visibility 0s, opacity var(--ic-easing-transition-slow);\n  }\n}\n\n@media screen and (min-width: 993px) {\n  :host {\n    position: sticky;\n    left: auto;\n    top: 0;\n    bottom: 0;\n  }\n\n  :host(.sm-expanded) {\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  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} 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} from \"../../utils/helpers\";\nimport {\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport { IcTopBar } 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 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  @Element() el: HTMLIcSideNavigationElement;\n  /**\n   * The title of the app to be displayed.\n   */\n  @Prop() appTitle!: string;\n  /**\n   * The status of the app to be displayed.\n   */\n  @Prop() status: string;\n  /**\n   * The version of the app to be displayed.\n   */\n  @Prop() version: string;\n  /**\n   * If `true`, the side navigation will load in an expanded state.\n   */\n  @Prop() expanded: boolean = false;\n  /**\n   * The URL that the app title link points to.\n   */\n  @Prop() href: string = \"/\";\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   * If `true`, the icon and label will appear when side navigation is collapsed.\n   */\n  @Prop() collapsedIconLabels: boolean = false;\n  /**\n   * @internal If `true`, side navigation will be contained by its parent element.\n   */\n  @Prop() inline: boolean = false;\n\n  /**\n   * If `true`, automatic parent wrapper styling will be disabled.\n   */\n  @Prop() disableAutoParentStyling: boolean = false;\n\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n  @State() menuOpen: boolean = false;\n  @State() menuExpanded: boolean = false;\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() deviceSizeAppTitle = DEVICE_SIZES.S;\n  @State() hasSecondaryNavigation: boolean = false;\n\n  private ANIMATION_DURATION =\n    parseInt(getCssProperty(\"--ic-transition-duration-slow\")) || 0;\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.foregroundColor = theme.mode;\n  }\n\n  private emitSideNavigationExpanded = (objDetails: {\n    sideNavExpanded: boolean;\n    sideNavMobile?: boolean;\n  }): void => {\n    const event = new CustomEvent(\"sideNavExpanded\", {\n      detail: {\n        sideNavExpanded: objDetails.sideNavExpanded,\n        sideNavMobile: objDetails.sideNavMobile,\n      },\n    });\n    this.el.dispatchEvent(event);\n  };\n\n  private toggleMenu = (): void => {\n    this.menuOpen = !this.menuOpen;\n    this.setMobileMenuAriaAttributes(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    if (menuOpen) {\n      bottomWrapper.classList.add(\"menu-visibility-visible\");\n      sideNavInner.classList.add(\"menu-visibility-visible\");\n    } else {\n      setTimeout(() => {\n        sideNavInner.classList.remove(\"menu-visibility-visible\");\n        bottomWrapper.classList.remove(\"menu-visibility-visible\");\n      }, this.ANIMATION_DURATION);\n    }\n  };\n\n  private setMobileMenuAriaAttributes = (menuOpen: boolean) => {\n    const nativeButton = this.el.shadowRoot\n      .querySelector(\"#menu-button\")\n      .shadowRoot.querySelector(\"button\");\n\n    if (menuOpen) {\n      nativeButton.setAttribute(\"aria-expanded\", \"true\");\n      nativeButton.setAttribute(\"aria-label\", \"Close navigation menu\");\n    } else {\n      nativeButton.setAttribute(\"aria-expanded\", \"false\");\n      nativeButton.setAttribute(\"aria-label\", \"Open navigation menu\");\n    }\n  };\n\n  private setAndRemoveNoWrapAfterMenuExpanded = () => {\n    const appTitle = this.el.shadowRoot.querySelector(\n      \".title-link ic-typography\"\n    );\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    }\n\n    this.arrangeSlottedNavigationItem(this.menuExpanded);\n\n    this.displayTooltipWithExpandedLongLabel(this.menuExpanded);\n\n    if (this.collapsedIconLabels) {\n      this.animateCollapsedIconLabels();\n    }\n\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/collaped animations as external CSS classes are not\n   * do not take affect.\n   * @param menuExpanded boolean - true or false depending on seide navigation state\n   */\n  private arrangeSlottedNavigationItem = (menuExpanded?: boolean) => {\n    const navItems = this.el.querySelectorAll(\"ic-navigation-item\");\n\n    navItems.forEach((navItem) => {\n      const hasUsedSlot = isSlotUsed(navItem, \"navigation-item\");\n\n      if (hasUsedSlot) {\n        const navItemSlot = navItem.querySelector(\"[slot='navigation-item']\");\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.className = \"icon-container\";\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 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 animateCollapsedIconLabels = () => {\n    const primaryNavigationWrapper = this.el.shadowRoot.querySelector(\n      \".primary-navigation\"\n    );\n    const secondaryNavigationWrapper = this.el.shadowRoot.querySelector(\n      \".bottom-wrapper > .secondary-navigation\"\n    );\n\n    if (primaryNavigationWrapper) {\n      primaryNavigationWrapper.classList.remove(\"collapsed-icon-labels-end\");\n      primaryNavigationWrapper.classList.add(\"collapsed-icon-labels-start\");\n    }\n\n    if (secondaryNavigationWrapper) {\n      secondaryNavigationWrapper.classList.remove(\"collapsed-icon-labels-end\");\n      secondaryNavigationWrapper.classList.add(\"collapsed-icon-labels-start\");\n    }\n\n    this.el.addEventListener(\"transitionend\", () => {\n      if (primaryNavigationWrapper) {\n        primaryNavigationWrapper.classList.remove(\n          \"collapsed-icon-labels-start\"\n        );\n        primaryNavigationWrapper.classList.add(\"collapsed-icon-labels-end\");\n      }\n\n      if (secondaryNavigationWrapper) {\n        secondaryNavigationWrapper.classList.remove(\n          \"collapsed-icon-labels-start\"\n        );\n        secondaryNavigationWrapper.classList.add(\"collapsed-icon-labels-end\");\n      }\n    });\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].querySelector(\"a\");\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(\"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(\"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 resizeObserver: ResizeObserver = null;\n\n  private resizeObserverCallback = (currSize: number) => {\n    if (currSize !== this.deviceSize) {\n      this.deviceSize = currSize;\n\n      if (currSize === DEVICE_SIZES.S) {\n        if (!this.disableAutoParentStyling) {\n          const topBarHeight =\n            this.el.shadowRoot.querySelector(\".top-bar\").scrollHeight;\n          this.setParentPaddingTop(`${topBarHeight}px`);\n          this.setParentPaddingLeft(\"0\");\n\n          if (this.inline) {\n            this.el.parentElement.style.setProperty(\n              \"height\",\n              `calc(100% - ${topBarHeight}px)`\n            );\n          }\n        }\n        this.emitSideNavigationExpanded({\n          sideNavExpanded: this.menuExpanded,\n          sideNavMobile: true,\n        });\n      } else {\n        if (!this.disableAutoParentStyling) {\n          this.setParentPaddingTop(\"0\");\n          this.el.parentElement.style.setProperty(\"height\", \"100%\");\n        }\n        this.emitSideNavigationExpanded({\n          sideNavExpanded: this.menuExpanded,\n          sideNavMobile: false,\n        });\n      }\n\n      if (currSize > DEVICE_SIZES.L) {\n        if (!this.disableAutoParentStyling) {\n          this.setParentPaddingTop(\"0\");\n          this.setParentPaddingLeft(\"0\");\n        }\n      } else if (\n        currSize > DEVICE_SIZES.S &&\n        currSize <= DEVICE_SIZES.L &&\n        !this.static &&\n        !this.disableAutoParentStyling\n      ) {\n        if (this.collapsedIconLabels) {\n          this.setParentPaddingLeft(\"calc(var(--ic-space-xxl) * 2)\");\n        } else {\n          this.setParentPaddingLeft(\n            \"calc(var(--ic-space-xxl) + var(--ic-space-xs))\"\n          );\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(\"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    appTitle,\n  }: IcTopBar) => (\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            aria-owns=\"side-navigation\"\n            aria-haspopup=\"true\"\n            aria-expanded=\"false\"\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        <a href={href} class=\"title-link\">\n          <div class=\"app-icon-container\" aria-hidden=\"true\">\n            <slot name=\"app-icon\"></slot>\n          </div>\n          <ic-typography\n            variant={isAppNameSubtitleVariant ? \"subtitle-small\" : \"h3\"}\n          >\n            {appTitle}\n          </ic-typography>\n        </a>\n      </div>\n    </div>\n  );\n\n  componentWillLoad(): void {\n    if (this.expanded) {\n      this.setMenuExpanded(true);\n    } else {\n      this.setMenuExpanded(false);\n    }\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: this.deviceSize === DEVICE_SIZES.S,\n    });\n\n    checkResizeObserver(this.runResizeObserver);\n    this.arrangeSlottedNavigationItem();\n    this.styleSlottedCollapsedIconLabel();\n    this.displayTooltipWithExpandedLongLabel(this.menuExpanded);\n\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\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 = 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 = isMdDevice || (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          [IcThemeForegroundEnum.Dark]:\n            foregroundColor === IcThemeForegroundEnum.Dark,\n          [\"collapsed-labels\"]:\n            !isSDevice && !menuExpanded && collapsedIconLabels,\n          [\"static\"]: this.static,\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"]}

package/dist/core/p-89a925f8.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as i,h as e,H as o,g as a}from"./p-f9370be6.js";import{b as r,m as n,n as s,a as c}from"./p-a8ac8f72.js";import{I as l}from"./p-6f57b13c.js";import{c as d}from"./p-ec26fc38.js";const h='/*! 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}:host{display:inline-block;--button-default:var(--ic-action-default);--button-default-hover:var(--ic-action-default-hover);--button-default-active:var(--ic-action-default-active);--button-default-background-hover:var(--ic-action-default-bg-hover);--button-default-background-active:var(--ic-action-default-bg-active);--icon-width:100%;--icon-height:100%}.button{font-family:var(--ic-font-body-family);text-decoration:none;font-weight:600;font-size:14px;transition:var(--ic-easing-transition-fast);border-radius:var(--ic-border-radius);min-width:100px;display:inline-flex;gap:var(--ic-space-xs);flex-direction:row;justify-content:center;align-items:center;background:none;border:none;box-sizing:border-box;white-space:nowrap;vertical-align:middle}.button:hover{cursor:pointer}.button:focus,:host .button:focus{box-shadow:var(--ic-border-focus)}:host(.light) .button:focus{box-shadow:var(--ic-border-focus)}.button:focus-visible{outline:var(--ic-hc-focus-outline)}:host(.dark) .button{--button-default:var(--ic-action-dark);--button-default-hover:var(--ic-action-dark);--button-default-active:var(--ic-action-dark);--button-default-background-hover:var(--ic-action-dark-bg-hover);--button-default-background-active:var(--ic-action-dark-bg-active)}:host(.light) .button{--button-default:var(--ic-action-light);--button-default-hover:var(--ic-action-light);--button-default-active:var(--ic-action-light);--button-default-background-hover:var(--ic-action-light-bg-hover);--button-default-background-active:var(--ic-action-light-bg-active)}:host(.button-variant-primary.light) .button{color:var(--ic-color-primary-text);--button-default-hover:var(--ic-action-light-hover);--button-default-active:var(--ic-action-light-active)}:host(.button-variant-primary.dark) .button{--button-default-hover:var(--ic-action-dark-hover);--button-default-active:var(--ic-action-dark-active)}:host(.disabled),:host(.disabled) .button,:host(.loading),:host(.loading) .button{pointer-events:none}:host(.button-variant-primary) .button{color:var(--ic-architectural-white);background-color:var(--button-default)}:host(.button-variant-primary) .button:hover:not(:focus){background-color:var(--button-default-hover)}:host(.button-variant-primary) .button:active:not(:focus),:host(.button-variant-primary.loading) .button{background-color:var(--button-default-active)}:host(.button-variant-primary.disabled) .button{background:var(--ic-architectural-200);color:var(--ic-architectural-300)}:host(.button-variant-primary.light.disabled) .button{background:var(--ic-architectural-600);color:var(--ic-architectural-500)}:host(.button-variant-secondary) .button{border:1px solid var(--button-default);color:var(--button-default)}:host(.button-variant-secondary) .button:hover:not(:focus){background-color:var(--button-default-background-hover);border-color:var(--button-default-hover);color:var(--button-default-hover)}:host(.button-variant-secondary) .button:active:not(:focus){border-color:var(--button-default-active);background-color:var(--button-default-background-active);color:var(--button-default-active)}:host(.button-variant-secondary.loading) .button{border-color:var(--button-default-active);background-color:var(--button-default-background-active);color:var(--button-default-active)}:host(.button-variant-secondary.disabled) .button,:host(.button-variant-secondary.disabled) .button:hover,:host(.button-variant-secondary.disabled) .button:active{border-color:var(--ic-architectural-300);color:var(--ic-architectural-300);background:none}:host(.button-variant-secondary.light.disabled) .button,:host(.button-variant-secondary.light.disabled) .button:hover,:host(.button-variant-secondary.light.disabled) .button:active{border-color:var(--ic-architectural-500);color:var(--ic-architectural-500);background:none}:host(.button-variant-tertiary) .button{color:var(--button-default)}:host(.button-variant-tertiary) .button:hover:not(:focus){background-color:var(--button-default-background-hover);color:var(--button-default-hover)}:host(.button-variant-tertiary) .button:active:not(:focus),:host(.button-variant-tertiary.loading) .button{background-color:var(--button-default-background-active);color:var(--button-default-active)}:host(.button-variant-tertiary.disabled) .button,:host(.button-variant-tertiary.disabled) .button:hover,:host(.button-variant-tertiary.disabled) .button:active{border-color:var(--ic-architectural-300);color:var(--ic-architectural-300);background:none}:host(.button-variant-tertiary.light.disabled) .button,:host(.button-variant-tertiary.light.disabled) .button:hover,:host(.button-variant-tertiary.light.disabled) .button:active{border-color:var(--ic-architectural-500);color:var(--ic-architectural-500);background:none}:host(.button-variant-icon) .button{color:var(--button-default);min-width:0}:host(.button-variant-icon) .button:hover:not(:focus){background-color:var(--button-default-background-hover);color:var(--button-default-hover)}:host(.button-variant-icon) .button:active:not(:focus),:host(.button-variant-icon.loading) .button{background-color:var(--button-default-background-active);color:var(--button-default-active)}:host(.button-variant-icon.disabled) .button,:host(.button-variant-icon.disabled) .button:hover,:host(.button-variant-icon.disabled) .button:active{color:var(--ic-architectural-300);background:none}:host(.button-variant-destructive) .button{color:var(--ic-architectural-white);background-color:var(--ic-action-destructive);text-transform:uppercase}:host(.button-variant-destructive) .button:hover:not(:focus){background-color:var(--ic-action-destructive-hover)}:host(.button-variant-destructive) .button:active:not(:focus),:host(.button-variant-destructive.loading) .button{background-color:var(--ic-action-destructive-active)}:host(.button-variant-destructive.disabled) .button{background:var(--ic-architectural-200);color:var(--ic-architectural-300)}:host(.button-size-default) .button{height:40px;padding:var(--ic-space-xs) var(--ic-space-md)}:host(.button-size-small) .button{height:var(--ic-space-xl);padding:var(--ic-space-xxs) var(--ic-space-md)}:host(.button-size-large) .button{height:var(--ic-space-xxl);padding:var(--ic-space-sm) var(--ic-space-md)}:host(.button-size-default.button-variant-icon) .button{height:var(--ic-space-xl);width:var(--ic-space-xl);padding:6px}:host(.button-size-small.button-variant-icon) .button{height:var(--ic-space-lg);width:var(--ic-space-lg);padding:var(--ic-space-xxs)}:host(.button-size-large.button-variant-icon) .button{height:40px;width:40px;padding:var(--ic-space-xs)}:host(.full-width),:host(.full-width) .button{width:100%}div.loading-container{position:relative;align-items:center}ic-loading-indicator{--outer-color:transparent}@keyframes loading-animation{0%{width:0%;left:0%}25%{width:0%;left:0%;opacity:0}50%{width:100%;left:0%;opacity:1}75%{width:0%;left:100%}100%{width:0%;left:100%;opacity:0}}div.icon-container{box-sizing:border-box;width:var(--ic-space-lg);height:var(--ic-space-lg);display:flex;justify-content:center;align-items:center}::slotted(svg){width:var(--icon-width) !important;height:var(--icon-height) !important;fill:currentcolor !important;pointer-events:none}:host(.button-variant-icon) .button .icon-container{margin:0;pointer-events:none}:host(.search-submit-button) ::slotted(svg){--icon-height:20px;--icon-width:20px}:host(.search-submit-button-small) ::slotted(svg){--icon-height:16px;--icon-width:16px}:host(.clear-button){margin:0 var(--ic-space-xxs)}:host(.clear-button) .button:focus{box-shadow:none}:host(.search-submit-button) .button:focus{box-shadow:none}:host(.search-submit-button) .button:not(:active):focus{box-shadow:none;background-color:var(--ic-action-default-bg-hover)}:host(.search-submit-button){display:flex;align-items:center;margin:0 var(--ic-space-xxs)}:host(.menu-close-button) ::slotted(svg){--icon-height:14px;--icon-width:14px}:host(.popout-menu-button) .button{justify-content:left;border-radius:0;white-space:pre-line;text-align:start}:host(.popout-menu-button) div.icon-container{flex:none}:host(.popout-menu-button) .button:focus{box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset)}.ic-button-describedby{display:none}:host .ic-tooltip{display:block}@media (forced-colors: active){.button{border:2px solid transparent}}';var u=undefined&&undefined.__rest||function(t,i){var e={};for(var o in t)if(Object.prototype.hasOwnProperty.call(t,o)&&i.indexOf(o)<0)e[o]=t[o];if(t!=null&&typeof Object.getOwnPropertySymbols==="function")for(var a=0,o=Object.getOwnPropertySymbols(t);a<o.length;a++){if(i.indexOf(o[a])<0&&Object.prototype.propertyIsEnumerable.call(t,o[a]))e[o[a]]=t[o[a]]}return e};let b=0;const p=class{constructor(e){t(this,e);this.icFocus=i(this,"icFocus",7);this.icBlur=i(this,"icBlur",7);this.calculatedWidth=68;this.inheritedAttributes={};this.hasTooltip=false;this.buttonIdNum=b++;this.handleClick=()=>{if((this.el.type==="submit"||this.el.type==="reset")&&!!this.el.closest("FORM")){this.handleHiddenFormButtonClick(this.el.closest("FORM"))}};this.onFocus=()=>{this.icFocus.emit()};this.onBlur=()=>{this.icBlur.emit()};this.disabled=false;this.loading=false;this.type="button";this.href=undefined;this.target=undefined;this.rel=undefined;this.download=false;this.hreflang=undefined;this.referrerpolicy=undefined;this.variant="primary";this.size="default";this.fullWidth=false;this.disableTooltip=false;this.tooltipPlacement="bottom";this.appearance="default"}calculateWidth(){this.calculatedWidth=this.el.offsetWidth-2*this.el.offsetLeft}handleHostClick(t){if(this.disabled||this.loading){t.stopImmediatePropagation()}}themeChangeHandler(t){const i=t.detail;this.updateTheme(i.mode)}async setFocus(){if(this.buttonEl){this.buttonEl.focus()}}async updateAriaLabel(t){if(this.hasTooltip){this.tooltipEl.label=t;this.buttonEl.setAttribute("aria-label",t)}}getLoadingBarWidth(){return{width:`${this.calculatedWidth.toString()}px`}}hasIconSlot(){const t=this.el.querySelector(`[slot="icon"]`);if(t!=null){return true}return false}handleHiddenFormButtonClick(t){const i=document.createElement("button");i.setAttribute("type",this.el.type);i.style.display="none";t.appendChild(i);i.click();i.remove()}updateTheme(t=null){const i=r(this.el,t||null);if(i!==l.Default){this.appearance=i}}componentWillLoad(){this.inheritedAttributes=n(this.el,[...s,"aria-expanded","title"]);const t=this.el.id;this.id=t!==undefined?t:null;this.hasTooltip=this.variant==="icon"}componentDidLoad(){this.calculateWidth();this.updateTheme()}render(){const t=this.href&&"a"||"button";const i=this.inheritedAttributes,{title:a,"aria-label":r}=i,n=u(i,["title","aria-label"]);const s=t==="button"?{type:this.type,disabled:this.disabled}:{download:this.download!==false?this.download:null,href:this.href,rel:this.rel,target:this.target,referrerpolicy:this.referrerpolicy,hreflang:this.hreflang};const c=a&&a;const d=this.hasTooltip?{}:{title:c};let h="";if(this.hasTooltip){if(c!==undefined){h=c}else if(r!==null){h=r}}let b=null;let p=null;if(this.hasTooltip){p=this.id!==null?`ic-button-with-tooltip-${this.id}`:`ic-button-with-tooltip-${this.buttonIdNum}`;b=`ic-tooltip-${p}`}const v=()=>e(t,Object.assign({class:"button","aria-disabled":this.loading||this.disabled?"true":null,"aria-label":this.loading?"Loading":r},s,n,d,{onFocus:this.onFocus,onBlur:this.onBlur,ref:t=>this.buttonEl=t,id:p,"aria-describedby":b}),this.hasIconSlot()&&!this.loading&&e("div",{class:"icon-container"},e("slot",{name:"icon"})),this.loading?e("div",{class:"loading-container",style:this.getLoadingBarWidth()},e("ic-loading-indicator",{type:"linear",appearance:this.variant==="primary"||this.variant==="destructive"||this.appearance===l.Dark||this.appearance===l.Light?"light":"dark"})):e("slot",null));return e(o,{class:{["disabled"]:this.disabled&&!this.loading,[`button-variant-${this.variant}`]:true,[`button-size-${this.size}`]:true,["loading"]:this.loading,["dark"]:this.appearance===l.Dark,["light"]:this.appearance===l.Light,["full-width"]:this.fullWidth},onClick:this.handleClick},this.hasTooltip&&e("ic-tooltip",{class:{["tooltip-disabled"]:this.disableTooltip},ref:t=>this.tooltipEl=t,label:h,target:p,placement:this.tooltipPlacement},e(v,null)),!this.hasTooltip&&e(v,null))}get el(){return a(this)}static get watchers(){return{loading:["calculateWidth"]}}};p.style=h;const v='/*! 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}:host{display:block;--linear-border-radius:4px;--inner-color:var(--ic-action-default);--outer-color:var(--ic-architectural-100);--label-color:var(--ic-color-primary-text);--margin:none;--linear-line-height:var(--ic-space-xs)}:host(.light){--inner-color:var(--ic-architectural-white);--outer-color:var(--ic-architectural-800);--label-color:var(--ic-architectural-white)}.ic-loading-container{display:flex;flex-direction:column;justify-content:center;align-items:center}:host([size="small"]){--circular-diameter:40px;--linear-line-height:var(--ic-space-xxs)}:host([size="default"]){--circular-diameter:80px}:host([size="large"]){--circular-diameter:120px}:host([size="icon"]){display:inline-block;--margin:var(--ic-space-xxxs);--circular-diameter:20px}:host([label]){--margin:0 0 var(--ic-space-xs) 0}.ic-loading-label{white-space:nowrap;color:var(--label-color);margin-left:var(--label-margin-left)}.ic-loading-circular-outer{height:var(--circular-diameter);width:var(--circular-diameter)}.ic-loading-circular-outer.indeterminate{animation:circular-animation 1s linear;animation-iteration-count:infinite}@keyframes circular-animation{100%{transform:rotate(360deg)}}.ic-loading-circular-outer,.ic-loading-linear-outer{margin:var(--margin)}.ic-loading-linear-outer{background-color:var(--outer-color);height:var(--linear-line-height);width:100%;border-radius:var(--linear-border-radius);overflow:hidden}.ic-loading-linear-inner{position:relative;height:100%;background-color:var(--inner-color);border-radius:var(--linear-border-radius)}.indeterminate>.ic-loading-linear-inner{animation:linear-animation 2s infinite}.determinate>.ic-loading-linear-inner{transition:width 0.5s;width:var(--linear-width)}:host([full-width]){--linear-border-radius:none}@keyframes linear-animation{0%{width:0%;left:-1%}25%{width:0%;left:-1%}50%{width:101%;left:-1%}75%{width:0%;left:101%}100%{width:0%;left:101%}}.ic-loading-circular-svg{position:relative;width:100%;height:100%;transform:rotate(-90deg)}.ic-loading-circular-svg circle{width:100%;height:100%;fill:none;stroke:var(--outer-color);stroke-width:var(--circular-line-width);stroke-linecap:round}.ic-loading-circular-svg circle:nth-child(2){--circular-indeterminate:calc(\n    (0.25 * var(--stroke-dasharray)) - var(--stroke-dasharray)\n  );stroke-dasharray:var(--stroke-dasharray), var(--stroke-dasharray);stroke-dashoffset:var(--stroke-dashoffset, var(--circular-indeterminate));stroke:var(--compact-step-inner-color, var(--inner-color))}:host([inner-label]) .ic-loading-circular-inner{display:grid}:host([inner-label]) .ic-loading-circular-svg,.inner-text{grid-column:1;grid-row:1}:host(.not-required.compact-step-progress-indicator) .ic-loading-circular-svg circle:nth-child(2){stroke:var(--ic-architectural-300)}.inner-text{display:flex;align-items:center;justify-content:center;width:var(--ic-space-lg);height:inherit;overflow:hidden;margin:auto;color:var(--ic-theme-primary)}:host(.not-required.compact-step-progress-indicator) .inner-text{color:var(--ic-color-tertiary-text)}@media (forced-colors: active){.indeterminate>.ic-loading-circular-inner{forced-color-adjust:none}.ic-loading-linear-outer{border:var(--ic-hc-border)}.ic-loading-linear-inner{background-color:canvastext}.ic-loading-circular-svg circle{stroke:Background}.ic-loading-circular-svg circle:nth-child(2){stroke:canvastext}:host(.not-required.compact-step-progress-indicator) .ic-loading-circular-svg circle:nth-child(2){stroke:GrayText}}';const f=class{constructor(i){t(this,i);this.updateCircularProgressMeter=()=>{if(!this.indeterminate){this.circularMeter.style.setProperty("--progress-value",String(this.progress))}};this.getLabel=(t,i)=>new Promise((()=>{setInterval((()=>{if(t<this.labelList.length-1){t++}else{t=0}i(this.labelList[t])}),this.labelDuration)}));this.getLabelVariant=()=>{var t;let i="h4";const e=(t=this.outerElement)===null||t===void 0?void 0:t.offsetWidth;if(this.size==="small"||this.type==="circular"&&e<60){i="label"}else if(this.size==="large"||this.type==="circular"&&e>=120){i="h2"}return i};this.setCircleLineWidth=()=>{const{offsetWidth:t}=this.outerElement;if(this.host.classList.contains("compact-step-progress-indicator")){this.compactStepCircularLineWidth=40}if(t||this.compactStepCircularLineWidth===40){this.circularLineWidth=(this.compactStepCircularLineWidth===40?this.compactStepCircularLineWidth:t)*.1;this.circularDiameter=this.compactStepCircularLineWidth===40?this.compactStepCircularLineWidth:t;this.outerElement.style.setProperty("--circular-line-width",`${this.circularLineWidth}px`)}};this.setLinearDeterminateWidth=()=>{if(!this.innerElement)return;const t=Math.min(this.max,Math.max(this.min,this.progress));const i=(t-this.min)/(this.max-this.min);this.showSecond=i>.5;if(this.showSecond){this.innerElement.classList.remove("clip")}else{this.innerElement.classList.add("clip")}this.innerElement.style.setProperty("--linear-width",`${i*100}%`)};this.calcOuterClass=()=>{let t=`ic-loading-${this.type}-outer`;t+=this.indeterminate?" indeterminate":" determinate";return t};this.updateLabel=()=>{if(this.label!==undefined){this.labelList=this.label.split("/");const t=0;this.indicatorLabel=this.labelList[t];if(this.labelList.length>1){this.getLabel(t,(t=>{this.indicatorLabel=t}))}}};this.setCircleXY=()=>{if(this.circularDiameter>0){const t=this.circularDiameter/2;const i=t;const e=t;const o=t-this.circularLineWidth/2;this.setDashSteps(o);return{x:i,y:e,r:o}}return{x:0,y:0,r:0}};this.setDashSteps=t=>{const i=2*Math.PI*t;const e=Math.min(Math.max(this.progress,this.min),this.max);const o=-1-(e-this.min)/(this.max-this.min);this.circularMeter.style.setProperty("--stroke-dasharray",`${i}px`);if(!this.indeterminate){this.circularMeter.style.setProperty("--circular-steps-max",String(this.max));this.circularMeter.style.setProperty("--stroke-dashoffset",`${o*i}px`)}};this.progress=undefined;this.min=0;this.max=100;this.label=undefined;this.description="Loading";this.innerLabel=undefined;this.labelDuration=8e3;this.size="default";this.type="circular";this.fullWidth=false;this.appearance="dark";this.indicatorLabel=undefined;this.indeterminate=undefined;this.showSecond=false;this.circularLineWidth=undefined;this.compactStepCircularLineWidth=0;this.circularDiameter=undefined}watchPropHandler(){this.updateLabel()}watchProgressHandler(){if(this.type==="circular"){this.updateCircularProgressMeter()}}componentWillLoad(){this.indeterminate=this.progress===undefined;this.updateLabel()}componentDidLoad(){if(this.type==="circular"){this.setCircleLineWidth();this.circularMeter=this.host.shadowRoot.querySelector(".ic-loading-circular-svg circle:nth-child(2)");this.updateCircularProgressMeter()}if(Number(this.progress)>=0&&this.type==="linear"){this.setLinearDeterminateWidth()}}componentWillUpdate(){this.indeterminate=this.progress===undefined}componentDidUpdate(){if(Number(this.progress)>=0&&this.type==="linear"){this.setLinearDeterminateWidth()}}render(){const{appearance:t,label:i,description:a,size:r}=this;const{x:n,y:s,r:c}=this.setCircleXY();return e(o,{class:{["light"]:t===l.Light}},e("div",{class:"ic-loading-container"},e("div",{ref:t=>this.outerElement=t,class:this.calcOuterClass(),role:"progressbar","aria-labelledby":this.label&&this.size!=="icon"&&"ic-loading-label","aria-label":a,"aria-valuenow":this.progress,"aria-valuemin":this.min,"aria-valuemax":this.max},e("div",{ref:t=>this.innerElement=t,class:`ic-loading-${this.type}-inner`},this.innerLabel&&this.innerLabel!==undefined&&this.size==="small"&&e("ic-typography",{variant:"subtitle-small",class:"inner-text"},this.innerLabel),this.type==="circular"&&e("svg",{class:"ic-loading-circular-svg",viewBox:`0 0 ${this.circularDiameter||0} ${this.circularDiameter||0}`},e("circle",{cx:`${n}`,cy:`${s}`,r:`${c}`}),e("circle",{cx:`${n}`,cy:`${s}`,r:`${c}`})))),i&&r!=="icon"&&e("ic-typography",{id:"ic-loading-label",class:"ic-loading-label",role:"status",variant:this.getLabelVariant()},e("p",null,this.indicatorLabel))))}get host(){return a(this)}static get watchers(){return{label:["watchPropHandler"],progress:["watchProgressHandler"]}}};f.style=v;const m='/*! 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}:host(.ic-tooltip) .ic-tooltip-container{background-color:var(--ic-architectural-800);color:#ffff;text-align:center;padding:var(--ic-space-xxxs) 10px;border-radius:var(--ic-border-radius);position:absolute;max-width:320px;display:none;z-index:calc(var(--ic-z-index-overlay) / 2);box-shadow:var(--ic-elevation-overlay)}:host(.tooltip-navigation-item:not(.tooltip-navigation-item-side-nav-collapsed)) .ic-tooltip-container,:host(.tooltip-disabled) .ic-tooltip-container{display:none !important}:host(.tooltip-long-label-navigation-item-side-nav-expanded) .ic-tooltip-container[data-show]{display:block !important}:host(.ic-tooltip) .ic-tooltip-arrow,:host(.ic-tooltip) .ic-tooltip-arrow::before{position:absolute;background:inherit;width:var(--ic-space-md);height:var(--ic-space-md)}:host(.ic-tooltip) .ic-tooltip-arrow{visibility:hidden}:host(.ic-tooltip) .ic-tooltip-arrow::before{visibility:visible;content:""}:host(.ic-tooltip) .ic-tooltip-container[data-show]{display:block}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^="top"]>.ic-tooltip-arrow{bottom:calc(-1 * var(--ic-space-md))}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^="top"]>.ic-tooltip-arrow::before{border-radius:0 0 var(--ic-border-radius) var(--ic-border-radius);left:0;height:var(--ic-space-xxs)}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^="bottom"]>.ic-tooltip-arrow{top:calc(-1 * var(--ic-space-xxs))}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^="bottom"]>.ic-tooltip-arrow::before{border-radius:var(--ic-border-radius) var(--ic-border-radius) 0 0;left:0;height:var(--ic-space-xxs)}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^="left"]>.ic-tooltip-arrow{right:var(--ic-space-xxxs)}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^="left"]>.ic-tooltip-arrow::before{border-radius:0 var(--ic-border-radius) var(--ic-border-radius) 0}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^="right"]>.ic-tooltip-arrow{left:-14px}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^="right"]>.ic-tooltip-arrow::before{border-radius:var(--ic-border-radius) 0 0 var(--ic-border-radius)}:host([target="ic-button-with-tooltip-search-submit-button"]) .ic-tooltip-container,:host([target="ic-button-with-tooltip-clear-button"]) .ic-tooltip-container{z-index:calc(var(--ic-z-index-popup-menu) + 1)}@media (forced-colors: active){:host(.ic-tooltip) .ic-tooltip-container{border:var(--ic-hc-border)}}';const g=class{constructor(i){t(this,i);this.mouseOverTool=false;this.showEvents=this.disableHover?["click"]:["mouseenter","focusin"];this.instantHideEvents=["focusout"];this.delayedHideEvents=["mouseleave"];this.show=t=>{this.toolTip.setAttribute("data-show","");t.setOptions((t=>Object.assign(Object.assign({},t),{modifiers:[...t.modifiers,{name:"eventListeners",enabled:true}]})));t.update()};this.hide=t=>{this.toolTip.removeAttribute("data-show");t.setOptions((t=>Object.assign(Object.assign({},t),{modifiers:[...t.modifiers,{name:"eventListeners",enabled:false}]})))};this.checkCloseTooltip=t=>{setTimeout((()=>{if(!this.mouseOverTool){this.hide(t)}}),100)};this.mouseEnterTooltip=()=>{this.mouseOverTool=true};this.mouseLeaveTooltip=t=>{this.mouseOverTool=false;this.checkCloseTooltip(t)};this.handleKeyDown=t=>{if(t==="Escape"){this.hide(this.popperInstance)}};this.manageEventListeners=t=>{const i=t==="add"?"addEventListener":"removeEventListener";this.showEvents.forEach((t=>{this.el[i](t,(()=>this.show(this.popperInstance)));this.toolTip[i](t,(()=>this.mouseEnterTooltip()))}));this.instantHideEvents.forEach((t=>{this.el[i](t,(()=>this.hide(this.popperInstance)))}));this.delayedHideEvents.forEach((t=>{this.el[i](t,(()=>this.checkCloseTooltip(this.popperInstance)));this.toolTip[i](t,(()=>this.mouseLeaveTooltip(this.popperInstance)))}));document[i]("keydown",(t=>this.handleKeyDown(t.key)))};this.screenReaderOnlyStyles={position:"absolute",left:"-10000px",top:"auto",width:"1px",height:"1px",overflow:"hidden"};this.target=undefined;this.placement="bottom";this.label=undefined;this.disableHover=false}updateLabel(t){const i=this.el.previousElementSibling;if(i!==null){i.innerText=t}}componentDidLoad(){this.popperInstance=d(this.el,this.toolTip,{placement:this.placement,modifiers:[{name:"offset",options:{offset:[0,10]}},{name:"arrow",options:{element:this.arrow}}]});this.manageEventListeners("add");c([{prop:this.label,propName:"label"}],"Tooltip");if(this.target!==undefined){const t=document.createElement("span");t.id=`ic-tooltip-${this.target}`;t.innerText=this.label;t.classList.add("ic-tooltip-label");Object.assign(t.style,this.screenReaderOnlyStyles);this.el.insertAdjacentElement("beforebegin",t)}}disconnectedCallback(){this.manageEventListeners("remove")}render(){const{label:t}=this;return e(o,{class:{"ic-tooltip":true}},e("div",{ref:t=>this.toolTip=t,role:"tooltip",class:"ic-tooltip-container"},e("ic-typography",{variant:"caption"},t),e("div",{ref:t=>this.arrow=t,class:"ic-tooltip-arrow","data-popper-arrow":true})),e("slot",null))}get el(){return a(this)}static get watchers(){return{label:["updateLabel"]}}};g.style=m;export{p as ic_button,f as ic_loading_indicator,g as ic_tooltip};
+//# sourceMappingURL=p-89a925f8.entry.js.map

package/dist/core/p-89a925f8.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/ic-button/ic-button.css?tag=ic-button&encapsulation=shadow","src/components/ic-button/ic-button.tsx","src/components/ic-loading-indicator/ic-loading-indicator.css?tag=ic-loading-indicator&encapsulation=shadow","src/components/ic-loading-indicator/ic-loading-indicator.tsx","src/components/ic-tooltip/ic-tooltip.css?tag=ic-tooltip&encapsulation=shadow","src/components/ic-tooltip/ic-tooltip.tsx"],"names":["icButtonCss","buttonIds","Button","this","calculatedWidth","inheritedAttributes","hasTooltip","buttonIdNum","handleClick","el","type","closest","handleHiddenFormButtonClick","onFocus","icFocus","emit","onBlur","icBlur","[object Object]","offsetWidth","offsetLeft","event","disabled","loading","stopImmediatePropagation","ev","theme","detail","updateTheme","mode","buttonEl","focus","newValue","tooltipEl","label","setAttribute","width","toString","iconEl","querySelector","form","hiddenFormButton","document","createElement","style","display","appendChild","click","remove","newTheme","foregroundColor","getThemeFromContext","IcThemeForegroundEnum","Default","appearance","inheritAttributes","IC_INHERITED_ARIA","id","undefined","variant","calculateWidth","TagType","href","_a","title","aria-label","ariaLabel","restInheritedAttributes","__rest","buttonAttrs","download","rel","target","referrerpolicy","hreflang","newTitle","titleAttr","tooltipText","describedBy","buttonId","ButtonContent","h","Object","assign","class","aria-disabled","ref","aria-describedby","hasIconSlot","name","getLoadingBarWidth","Dark","Light","Host","size","fullWidth","onClick","disableTooltip","placement","tooltipPlacement","icLoadingIndicatorCss","LoadingIndicator","updateCircularProgressMeter","indeterminate","circularMeter","setProperty","String","progress","getLabel","labelIndex","setLabel","Promise","setInterval","labelList","length","labelDuration","getLabelVariant","outerElement","setCircleLineWidth","host","classList","contains","compactStepCircularLineWidth","circularLineWidth","circularDiameter","setLinearDeterminateWidth","innerElement","Math","min","max","proportion","showSecond","add","calcOuterClass","cls","updateLabel","split","indicatorLabel","setCircleXY","r","x","y","nextRadius","setDashSteps","radius","dashArray","PI","shadowRoot","Number","description","role","aria-labelledby","aria-valuenow","aria-valuemin","aria-valuemax","innerLabel","viewBox","cx","cy","icTooltipCss","Tooltip","mouseOverTool","showEvents","disableHover","instantHideEvents","delayedHideEvents","show","popper","toolTip","setOptions","options","modifiers","enabled","update","hide","removeAttribute","checkCloseTooltip","setTimeout","mouseEnterTooltip","mouseLeaveTooltip","handleKeyDown","key","popperInstance","manageEventListeners","action","method","forEach","screenReaderOnlyStyles","position","left","top","height","overflow","describedBySpan","previousElementSibling","innerText","createPopper","offset","element","arrow","onComponentRequiredPropUndefined","prop","propName","ariaDescribedBy","insertAdjacentElement","ic-tooltip","data-popper-arrow"],"mappings":"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","sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: inline-block;\n\n  --button-default: var(--ic-action-default);\n  --button-default-hover: var(--ic-action-default-hover);\n  --button-default-active: var(--ic-action-default-active);\n  --button-default-background-hover: var(--ic-action-default-bg-hover);\n  --button-default-background-active: var(--ic-action-default-bg-active);\n  --icon-width: 100%;\n  --icon-height: 100%;\n}\n\n.button {\n  font-family: var(--ic-font-body-family);\n  text-decoration: none;\n  font-weight: 600;\n  font-size: 14px;\n  transition: var(--ic-easing-transition-fast);\n  border-radius: var(--ic-border-radius);\n  min-width: 100px;\n  display: inline-flex;\n  gap: var(--ic-space-xs);\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  background: none;\n  border: none;\n  box-sizing: border-box;\n  white-space: nowrap;\n  vertical-align: middle;\n}\n\n.button:hover {\n  cursor: pointer;\n}\n\n.button:focus,\n:host .button:focus {\n  box-shadow: var(--ic-border-focus);\n}\n\n:host(.light) .button:focus {\n  box-shadow: var(--ic-border-focus);\n}\n\n.button:focus-visible {\n  outline: var(--ic-hc-focus-outline);\n}\n\n:host(.dark) .button {\n  --button-default: var(--ic-action-dark);\n  --button-default-hover: var(--ic-action-dark);\n  --button-default-active: var(--ic-action-dark);\n  --button-default-background-hover: var(--ic-action-dark-bg-hover);\n  --button-default-background-active: var(--ic-action-dark-bg-active);\n}\n\n:host(.light) .button {\n  --button-default: var(--ic-action-light);\n  --button-default-hover: var(--ic-action-light);\n  --button-default-active: var(--ic-action-light);\n  --button-default-background-hover: var(--ic-action-light-bg-hover);\n  --button-default-background-active: var(--ic-action-light-bg-active);\n}\n\n:host(.button-variant-primary.light) .button {\n  color: var(--ic-color-primary-text);\n\n  --button-default-hover: var(--ic-action-light-hover);\n  --button-default-active: var(--ic-action-light-active);\n}\n\n:host(.button-variant-primary.dark) .button {\n  --button-default-hover: var(--ic-action-dark-hover);\n  --button-default-active: var(--ic-action-dark-active);\n}\n\n:host(.disabled),\n:host(.disabled) .button,\n:host(.loading),\n:host(.loading) .button {\n  pointer-events: none;\n}\n\n/* Variants */\n\n/* Primary */\n\n:host(.button-variant-primary) .button {\n  color: var(--ic-architectural-white);\n  background-color: var(--button-default);\n}\n\n:host(.button-variant-primary) .button:hover:not(:focus) {\n  background-color: var(--button-default-hover);\n}\n\n:host(.button-variant-primary) .button:active:not(:focus),\n:host(.button-variant-primary.loading) .button {\n  background-color: var(--button-default-active);\n}\n\n:host(.button-variant-primary.disabled) .button {\n  background: var(--ic-architectural-200);\n  color: var(--ic-architectural-300);\n}\n\n:host(.button-variant-primary.light.disabled) .button {\n  background: var(--ic-architectural-600);\n  color: var(--ic-architectural-500);\n}\n\n/* Secondary */\n\n:host(.button-variant-secondary) .button {\n  border: 1px solid var(--button-default);\n  color: var(--button-default);\n}\n\n:host(.button-variant-secondary) .button:hover:not(:focus) {\n  background-color: var(--button-default-background-hover);\n  border-color: var(--button-default-hover);\n  color: var(--button-default-hover);\n}\n\n:host(.button-variant-secondary) .button:active:not(:focus) {\n  border-color: var(--button-default-active);\n  background-color: var(--button-default-background-active);\n  color: var(--button-default-active);\n}\n\n:host(.button-variant-secondary.loading) .button {\n  border-color: var(--button-default-active);\n  background-color: var(--button-default-background-active);\n  color: var(--button-default-active);\n}\n\n:host(.button-variant-secondary.disabled) .button,\n:host(.button-variant-secondary.disabled) .button:hover,\n:host(.button-variant-secondary.disabled) .button:active {\n  border-color: var(--ic-architectural-300);\n  color: var(--ic-architectural-300);\n  background: none;\n}\n\n:host(.button-variant-secondary.light.disabled) .button,\n:host(.button-variant-secondary.light.disabled) .button:hover,\n:host(.button-variant-secondary.light.disabled) .button:active {\n  border-color: var(--ic-architectural-500);\n  color: var(--ic-architectural-500);\n  background: none;\n}\n\n/* Tertiary */\n\n:host(.button-variant-tertiary) .button {\n  color: var(--button-default);\n}\n\n:host(.button-variant-tertiary) .button:hover:not(:focus) {\n  background-color: var(--button-default-background-hover);\n  color: var(--button-default-hover);\n}\n\n:host(.button-variant-tertiary) .button:active:not(:focus),\n:host(.button-variant-tertiary.loading) .button {\n  background-color: var(--button-default-background-active);\n  color: var(--button-default-active);\n}\n\n:host(.button-variant-tertiary.disabled) .button,\n:host(.button-variant-tertiary.disabled) .button:hover,\n:host(.button-variant-tertiary.disabled) .button:active {\n  border-color: var(--ic-architectural-300);\n  color: var(--ic-architectural-300);\n  background: none;\n}\n\n:host(.button-variant-tertiary.light.disabled) .button,\n:host(.button-variant-tertiary.light.disabled) .button:hover,\n:host(.button-variant-tertiary.light.disabled) .button:active {\n  border-color: var(--ic-architectural-500);\n  color: var(--ic-architectural-500);\n  background: none;\n}\n\n/* Icon */\n\n:host(.button-variant-icon) .button {\n  color: var(--button-default);\n  min-width: 0;\n}\n\n:host(.button-variant-icon) .button:hover:not(:focus) {\n  background-color: var(--button-default-background-hover);\n  color: var(--button-default-hover);\n}\n\n:host(.button-variant-icon) .button:active:not(:focus),\n:host(.button-variant-icon.loading) .button {\n  background-color: var(--button-default-background-active);\n  color: var(--button-default-active);\n}\n\n:host(.button-variant-icon.disabled) .button,\n:host(.button-variant-icon.disabled) .button:hover,\n:host(.button-variant-icon.disabled) .button:active {\n  color: var(--ic-architectural-300);\n  background: none;\n}\n\n/* Destructive */\n\n:host(.button-variant-destructive) .button {\n  color: var(--ic-architectural-white);\n  background-color: var(--ic-action-destructive);\n  text-transform: uppercase;\n}\n\n:host(.button-variant-destructive) .button:hover:not(:focus) {\n  background-color: var(--ic-action-destructive-hover);\n}\n\n:host(.button-variant-destructive) .button:active:not(:focus),\n:host(.button-variant-destructive.loading) .button {\n  background-color: var(--ic-action-destructive-active);\n}\n\n:host(.button-variant-destructive.disabled) .button {\n  background: var(--ic-architectural-200);\n  color: var(--ic-architectural-300);\n}\n\n/* Sizing */\n\n:host(.button-size-default) .button {\n  height: 40px;\n  padding: var(--ic-space-xs) var(--ic-space-md);\n}\n\n:host(.button-size-small) .button {\n  height: var(--ic-space-xl);\n  padding: var(--ic-space-xxs) var(--ic-space-md);\n}\n\n:host(.button-size-large) .button {\n  height: var(--ic-space-xxl);\n  padding: var(--ic-space-sm) var(--ic-space-md);\n}\n\n:host(.button-size-default.button-variant-icon) .button {\n  height: var(--ic-space-xl);\n  width: var(--ic-space-xl);\n  padding: 6px;\n}\n\n:host(.button-size-small.button-variant-icon) .button {\n  height: var(--ic-space-lg);\n  width: var(--ic-space-lg);\n  padding: var(--ic-space-xxs);\n}\n\n:host(.button-size-large.button-variant-icon) .button {\n  height: 40px;\n  width: 40px;\n  padding: var(--ic-space-xs);\n}\n\n/* Width */\n:host(.full-width),\n:host(.full-width) .button {\n  width: 100%;\n}\n\n/* Loading */\n\ndiv.loading-container {\n  position: relative;\n  align-items: center;\n}\n\nic-loading-indicator {\n  --outer-color: transparent;\n}\n\n@keyframes loading-animation {\n  0% {\n    width: 0%;\n    left: 0%;\n  }\n\n  25% {\n    width: 0%;\n    left: 0%;\n    opacity: 0;\n  }\n\n  50% {\n    width: 100%;\n    left: 0%;\n    opacity: 1;\n  }\n\n  75% {\n    width: 0%;\n    left: 100%;\n  }\n\n  100% {\n    width: 0%;\n    left: 100%;\n    opacity: 0;\n  }\n}\n\n/* Icons */\n\ndiv.icon-container {\n  box-sizing: border-box;\n  width: var(--ic-space-lg);\n  height: var(--ic-space-lg);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n::slotted(svg) {\n  width: var(--icon-width) !important;\n  height: var(--icon-height) !important;\n  fill: currentcolor !important;\n  pointer-events: none;\n}\n\n:host(.button-variant-icon) .button .icon-container {\n  margin: 0;\n  pointer-events: none;\n}\n\n/** SEARCH **/\n\n:host(.search-submit-button) ::slotted(svg) {\n  --icon-height: 20px;\n  --icon-width: 20px;\n}\n\n:host(.search-submit-button-small) ::slotted(svg) {\n  --icon-height: 16px;\n  --icon-width: 16px;\n}\n\n:host(.clear-button) {\n  margin: 0 var(--ic-space-xxs);\n}\n\n:host(.clear-button) .button:focus {\n  box-shadow: none;\n}\n\n:host(.search-submit-button) .button:focus {\n  box-shadow: none;\n}\n\n:host(.search-submit-button) .button:not(:active):focus {\n  box-shadow: none;\n  background-color: var(--ic-action-default-bg-hover);\n}\n\n:host(.search-submit-button) {\n  display: flex;\n  align-items: center;\n  margin: 0 var(--ic-space-xxs);\n}\n\n:host(.menu-close-button) ::slotted(svg) {\n  --icon-height: 14px;\n  --icon-width: 14px;\n}\n\n:host(.popout-menu-button) .button {\n  justify-content: left;\n  border-radius: 0;\n  white-space: pre-line;\n  text-align: start;\n}\n\n:host(.popout-menu-button) div.icon-container {\n  flex: none;\n}\n\n:host(.popout-menu-button) .button:focus {\n  box-shadow: var(--ic-border-focus-inset);\n  border-radius: var(--ic-border-radius-inset);\n}\n\n.ic-button-describedby {\n  display: none;\n}\n\n:host .ic-tooltip {\n  display: block;\n}\n\n/** High Contrast **/\n@media (forced-colors: active) {\n  .button {\n    border: 2px solid transparent;\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  Watch,\n  h,\n} from \"@stencil/core\";\n\nimport { getThemeFromContext, inheritAttributes } from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n  IcButtonSizes,\n  IcButtonTypes,\n  IcButtonVariants,\n  IcButtonTooltipPlacement,\n} from \"./ic-button.types\";\nimport {\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\n\nlet buttonIds = 0;\n\n/**\n * @slot icon - Content will be placed to the left of the button label.\n */\n@Component({\n  tag: \"ic-button\",\n  styleUrl: \"ic-button.css\",\n  shadow: true,\n})\nexport class Button {\n  @Element() el: HTMLIcButtonElement;\n  /**\n   * If `true`, the button will be in disabled state.\n   */\n  @Prop() disabled?: boolean = false;\n  /**\n   * If `true`, the button will be in loading state.\n   */\n  @Prop() loading?: boolean = false;\n  /**\n   * The type of the button.\n   */\n  @Prop() type?: IcButtonTypes = \"button\";\n  /**\n   * The URL that the link points to. This will render the button as an \"a\" tag.\n   */\n  @Prop() href?: string;\n  /**\n   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n  /**\n   * If `true`, the user can save the linked URL instead of navigating to it.\n   */\n  @Prop() download?: string | boolean = false;\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string;\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n  /**\n   * The variant of the button to be displayed.\n   */\n  @Prop() variant?: IcButtonVariants = \"primary\";\n  /**\n   * The size of the button to be displayed.\n   */\n  @Prop() size?: IcButtonSizes = \"default\";\n  /**\n   * If `true`, the button will fill the width of the container.\n   */\n  @Prop() fullWidth?: boolean = false;\n  /**\n   * If `true`, the ic-tooltip which is shown for icon variant will be disabled. Title or aria-label must be set if this prop is not applied.\n   */\n  @Prop() disableTooltip?: boolean = false;\n  /**\n   * The position of the tooltip in relation to the button.\n   */\n  @Prop() tooltipPlacement?: IcButtonTooltipPlacement = \"bottom\";\n  /**\n   * The appearance of the button, e.g. dark, light, or the default.\n   */\n  @Prop({ mutable: true }) appearance?: IcThemeForeground = \"default\";\n  /**\n   * Emitted when button has focus\n   */\n  @Event() icFocus!: EventEmitter<void>;\n  /**\n   * Emitted when button has blur\n   */\n  @Event() icBlur!: EventEmitter<void>;\n\n  // CalculatedWidth must have a default value, since width is only calculated once button is rendered (with text).\n  private calculatedWidth: number = 68;\n  private inheritedAttributes: { [k: string]: unknown } = {};\n  private buttonEl: HTMLElement;\n  private hasTooltip: boolean = false;\n  private buttonIdNum = buttonIds++;\n  private tooltipEl: HTMLIcTooltipElement;\n  private id: string;\n\n  @Watch(\"loading\")\n  calculateWidth(): void {\n    // Assume even padding on left and right\n    this.calculatedWidth = this.el.offsetWidth - 2 * this.el.offsetLeft;\n  }\n\n  @Listen(\"click\", { capture: true })\n  handleHostClick(event: Event): void {\n    if (this.disabled || this.loading) {\n      event.stopImmediatePropagation();\n    }\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.updateTheme(theme.mode);\n  }\n\n  /**\n   * Sets focus on the native `button`\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.buttonEl) {\n      this.buttonEl.focus();\n    }\n  }\n\n  /**\n   * @internal Updates tooltip/aria-label text - needed as can't watch an ARIA attribute change.\n   */\n  @Method()\n  async updateAriaLabel(newValue: string): Promise<void> {\n    if (this.hasTooltip) {\n      this.tooltipEl.label = newValue;\n      this.buttonEl.setAttribute(\"aria-label\", newValue);\n    }\n  }\n\n  private getLoadingBarWidth(): { [key: string]: string } {\n    return { width: `${this.calculatedWidth.toString()}px` };\n  }\n\n  private hasIconSlot(): boolean {\n    const iconEl = this.el.querySelector(`[slot=\"icon\"]`);\n    if (iconEl != null) {\n      return true;\n    }\n    return false;\n  }\n\n  private handleHiddenFormButtonClick(form: HTMLFormElement): void {\n    const hiddenFormButton = document.createElement(\"button\");\n\n    hiddenFormButton.setAttribute(\"type\", this.el.type);\n    hiddenFormButton.style.display = \"none\";\n\n    form.appendChild(hiddenFormButton);\n\n    hiddenFormButton.click();\n    hiddenFormButton.remove();\n  }\n\n  private handleClick = (): void => {\n    if (\n      (this.el.type === \"submit\" || this.el.type === \"reset\") &&\n      !!this.el.closest(\"FORM\")\n    ) {\n      this.handleHiddenFormButtonClick(this.el.closest(\"FORM\"));\n    }\n  };\n\n  private onFocus = () => {\n    this.icFocus.emit();\n  };\n\n  private onBlur = () => {\n    this.icBlur.emit();\n  };\n\n  private updateTheme(newTheme: IcThemeForeground = null): void {\n    const foregroundColor = getThemeFromContext(this.el, newTheme || null);\n\n    if (foregroundColor !== IcThemeForegroundEnum.Default) {\n      this.appearance = foregroundColor;\n    }\n  }\n\n  componentWillLoad(): void {\n    this.inheritedAttributes = inheritAttributes(this.el, [\n      ...IC_INHERITED_ARIA,\n      \"aria-expanded\",\n      \"title\",\n    ]);\n\n    const id = this.el.id;\n    this.id = id !== undefined ? id : null;\n    this.hasTooltip = this.variant === \"icon\";\n  }\n\n  componentDidLoad(): void {\n    this.calculateWidth();\n    this.updateTheme();\n  }\n\n  render() {\n    const TagType = (this.href && \"a\") || \"button\";\n    const {\n      title,\n      \"aria-label\": ariaLabel,\n      ...restInheritedAttributes\n    } = this.inheritedAttributes;\n    const buttonAttrs =\n      TagType === \"button\"\n        ? { type: this.type, disabled: this.disabled }\n        : {\n            download: this.download !== false ? this.download : null,\n            href: this.href,\n            rel: this.rel,\n            target: this.target,\n            referrerpolicy: this.referrerpolicy,\n            hreflang: this.hreflang,\n          };\n    const newTitle = title && (title as string);\n    const titleAttr = this.hasTooltip ? {} : { title: newTitle };\n    let tooltipText = \"\";\n    if (this.hasTooltip) {\n      if (newTitle !== undefined) {\n        tooltipText = newTitle;\n      } else if (ariaLabel !== null) {\n        tooltipText = ariaLabel as string;\n      }\n    }\n\n    let describedBy: string = null;\n    let buttonId: string = null;\n    if (this.hasTooltip) {\n      buttonId =\n        this.id !== null\n          ? `ic-button-with-tooltip-${this.id}`\n          : `ic-button-with-tooltip-${this.buttonIdNum}`;\n      describedBy = `ic-tooltip-${buttonId}`;\n    }\n\n    const ButtonContent = () => {\n      return (\n        <TagType\n          class=\"button\"\n          aria-disabled={this.loading || this.disabled ? \"true\" : null}\n          aria-label={this.loading ? \"Loading\" : ariaLabel}\n          {...buttonAttrs}\n          {...restInheritedAttributes}\n          {...titleAttr}\n          onFocus={this.onFocus}\n          onBlur={this.onBlur}\n          ref={(el) => (this.buttonEl = el)}\n          id={buttonId}\n          aria-describedby={describedBy}\n        >\n          {this.hasIconSlot() && !this.loading && (\n            <div class=\"icon-container\">\n              <slot name=\"icon\" />\n            </div>\n          )}\n          {this.loading ? (\n            <div class=\"loading-container\" style={this.getLoadingBarWidth()}>\n              <ic-loading-indicator\n                type=\"linear\"\n                appearance={\n                  this.variant === \"primary\" ||\n                  this.variant === \"destructive\" ||\n                  this.appearance === IcThemeForegroundEnum.Dark ||\n                  this.appearance === IcThemeForegroundEnum.Light\n                    ? \"light\"\n                    : \"dark\"\n                }\n              ></ic-loading-indicator>\n            </div>\n          ) : (\n            <slot />\n          )}\n        </TagType>\n      );\n    };\n\n    return (\n      <Host\n        class={{\n          [\"disabled\"]: this.disabled && !this.loading,\n          [`button-variant-${this.variant}`]: true,\n          [`button-size-${this.size}`]: true,\n          [\"loading\"]: this.loading,\n          [\"dark\"]: this.appearance === IcThemeForegroundEnum.Dark,\n          [\"light\"]: this.appearance === IcThemeForegroundEnum.Light,\n          [\"full-width\"]: this.fullWidth,\n        }}\n        onClick={this.handleClick}\n      >\n        {this.hasTooltip && (\n          <ic-tooltip\n            class={{ [\"tooltip-disabled\"]: this.disableTooltip }}\n            ref={(el) => (this.tooltipEl = el)}\n            label={tooltipText}\n            target={buttonId}\n            placement={this.tooltipPlacement}\n          >\n            <ButtonContent />\n          </ic-tooltip>\n        )}\n\n        {!this.hasTooltip && <ButtonContent />}\n      </Host>\n    );\n  }\n}\n","@import \"../../global/normalize.css\";\n\n:host {\n  /**\n   * @prop --circular-diameter: Diameter of the circular-indicator\n   */\n\n  display: block;\n\n  --linear-border-radius: 4px;\n  --inner-color: var(--ic-action-default);\n  --outer-color: var(--ic-architectural-100);\n  --label-color: var(--ic-color-primary-text);\n  --margin: none;\n  --linear-line-height: var(--ic-space-xs);\n}\n\n:host(.light) {\n  --inner-color: var(--ic-architectural-white);\n  --outer-color: var(--ic-architectural-800);\n  --label-color: var(--ic-architectural-white);\n}\n\n.ic-loading-container {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n\n:host([size=\"small\"]) {\n  --circular-diameter: 40px;\n  --linear-line-height: var(--ic-space-xxs);\n}\n\n:host([size=\"default\"]) {\n  --circular-diameter: 80px;\n}\n\n:host([size=\"large\"]) {\n  --circular-diameter: 120px;\n}\n\n:host([size=\"icon\"]) {\n  display: inline-block;\n\n  --margin: var(--ic-space-xxxs);\n  --circular-diameter: 20px;\n}\n\n:host([label]) {\n  --margin: 0 0 var(--ic-space-xs) 0;\n}\n\n.ic-loading-label {\n  white-space: nowrap;\n  color: var(--label-color);\n  margin-left: var(--label-margin-left);\n}\n\n.ic-loading-circular-outer {\n  height: var(--circular-diameter);\n  width: var(--circular-diameter);\n}\n\n.ic-loading-circular-outer.indeterminate {\n  animation: circular-animation 1s linear;\n  animation-iteration-count: infinite;\n}\n\n@keyframes circular-animation {\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.ic-loading-circular-outer,\n.ic-loading-linear-outer {\n  margin: var(--margin);\n}\n\n.ic-loading-linear-outer {\n  background-color: var(--outer-color);\n  height: var(--linear-line-height);\n  width: 100%;\n  border-radius: var(--linear-border-radius);\n  overflow: hidden;\n}\n\n.ic-loading-linear-inner {\n  position: relative;\n  height: 100%;\n  background-color: var(--inner-color);\n  border-radius: var(--linear-border-radius);\n}\n\n.indeterminate > .ic-loading-linear-inner {\n  animation: linear-animation 2s infinite;\n}\n\n.determinate > .ic-loading-linear-inner {\n  transition: width 0.5s;\n  width: var(--linear-width);\n}\n\n:host([full-width]) {\n  --linear-border-radius: none;\n}\n\n@keyframes linear-animation {\n  0% {\n    width: 0%;\n    left: -1%;\n  }\n\n  25% {\n    width: 0%;\n    left: -1%;\n  }\n\n  50% {\n    width: 101%;\n    left: -1%;\n  }\n\n  75% {\n    width: 0%;\n    left: 101%;\n  }\n\n  100% {\n    width: 0%;\n    left: 101%;\n  }\n}\n\n.ic-loading-circular-svg {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  transform: rotate(-90deg);\n}\n\n.ic-loading-circular-svg circle {\n  width: 100%;\n  height: 100%;\n  fill: none;\n  stroke: var(--outer-color);\n  stroke-width: var(--circular-line-width);\n  stroke-linecap: round;\n}\n\n/* --stroke-dash-array calculated via dashArray method */\n.ic-loading-circular-svg circle:nth-child(2) {\n  --circular-indeterminate: calc(\n    (0.25 * var(--stroke-dasharray)) - var(--stroke-dasharray)\n  );\n\n  stroke-dasharray: var(--stroke-dasharray), var(--stroke-dasharray);\n  stroke-dashoffset: var(--stroke-dashoffset, var(--circular-indeterminate));\n  stroke: var(--compact-step-inner-color, var(--inner-color));\n}\n\n:host([inner-label]) .ic-loading-circular-inner {\n  display: grid;\n}\n\n:host([inner-label]) .ic-loading-circular-svg,\n.inner-text {\n  grid-column: 1;\n  grid-row: 1;\n}\n\n:host(.not-required.compact-step-progress-indicator)\n  .ic-loading-circular-svg\n  circle:nth-child(2) {\n  stroke: var(--ic-architectural-300);\n}\n\n.inner-text {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--ic-space-lg);\n  height: inherit;\n  overflow: hidden;\n  margin: auto;\n  color: var(--ic-theme-primary);\n}\n\n:host(.not-required.compact-step-progress-indicator) .inner-text {\n  color: var(--ic-color-tertiary-text);\n}\n\n/** High Contrast **/\n@media (forced-colors: active) {\n  .indeterminate > .ic-loading-circular-inner {\n    forced-color-adjust: none;\n  }\n\n  .ic-loading-linear-outer {\n    border: var(--ic-hc-border);\n  }\n\n  .ic-loading-linear-inner {\n    background-color: canvastext;\n  }\n\n  .ic-loading-circular-svg circle {\n    stroke: Background;\n  }\n\n  .ic-loading-circular-svg circle:nth-child(2) {\n    stroke: canvastext;\n  }\n\n  :host(.not-required.compact-step-progress-indicator)\n    .ic-loading-circular-svg\n    circle:nth-child(2) {\n    stroke: GrayText;\n  }\n}\n","import { Component, Element, h, Host, Prop, State, Watch } from \"@stencil/core\";\nimport {\n  IcLoadingCircleXYR,\n  IcLoadingSizes,\n  IcLoadingTypes,\n} from \"./ic-loading-indicator.types\";\nimport {\n  IcThemeForegroundEnum,\n  IcThemeForegroundNoDefault,\n} from \"../../utils/types\";\n\n@Component({\n  tag: \"ic-loading-indicator\",\n  styleUrl: \"ic-loading-indicator.css\",\n  shadow: true,\n})\nexport class LoadingIndicator {\n  @Element() host: HTMLIcLoadingIndicatorElement;\n\n  /**\n   * The current amount of progress made.\n   * If not provided, component acts as an indeterminate loading indicator.\n   */\n  @Prop() progress?: number;\n\n  /**\n   * The minimum value that the progress value can take.\n   * Used to calculate the proportional width of the progress bar.\n   */\n  @Prop() min?: number = 0;\n\n  /**\n   * The maximum value that the progress value can take.\n   * Used to calculate the proportional width of the progress bar.\n   */\n  @Prop() max?: number = 100;\n\n  /**\n   * The label to be displayed beneath the loading indicator.\n   * Display a changing label by separating multiple messages with forward slashes.\n   */\n  @Prop() label?: string;\n\n  /**\n   * The description that will be set as the aria-label of the loading indicator when not using a visible label.\n   */\n  @Prop() description?: string = \"Loading\";\n\n  /**\n   * @internal The step number of a compact step, managed by ic-step.\n   */\n  @Prop() innerLabel?: number;\n\n  /**\n   * The time in milliseconds before the label changes.\n   */\n  @Prop() labelDuration?: number = 8000;\n\n  /**\n   * The size of the loading indicator.\n   */\n  @Prop({ reflect: true }) size?: IcLoadingSizes = \"default\";\n\n  /**\n   * The type of indicator, either linear or circular.\n   */\n  @Prop({ reflect: true }) type?: IcLoadingTypes = \"circular\";\n\n  /**\n   * If `true`, when linear, the full-width variant (i.e. without a border radius) will be displayed.\n   */\n  @Prop({ reflect: true }) fullWidth?: boolean = false;\n\n  /**\n   * The appearance of the loading indicator, e.g. dark or light.\n   */\n  @Prop() appearance?: IcThemeForegroundNoDefault = \"dark\";\n\n  @State() indicatorLabel: string;\n  @State() indeterminate: boolean;\n  @State() showSecond: boolean = false;\n  @State() circularLineWidth: number;\n  @State() compactStepCircularLineWidth: number = 0;\n\n  @State() circularDiameter: number;\n\n  @Watch(\"label\")\n  watchPropHandler(): void {\n    this.updateLabel();\n  }\n\n  @Watch(\"progress\")\n  watchProgressHandler(): void {\n    if (this.type === \"circular\") {\n      this.updateCircularProgressMeter();\n    }\n  }\n\n  private outerElement?: HTMLDivElement;\n  private innerElement?: HTMLDivElement;\n  private labelList: string[];\n  private circularMeter: SVGCircleElement;\n\n  private updateCircularProgressMeter = () => {\n    if (!this.indeterminate) {\n      this.circularMeter.style.setProperty(\n        \"--progress-value\",\n        String(this.progress)\n      );\n    }\n  };\n\n  private getLabel = (\n    labelIndex: number,\n    setLabel: (label: string) => void\n  ) => {\n    return new Promise(() => {\n      setInterval(() => {\n        if (labelIndex < this.labelList.length - 1) {\n          labelIndex++;\n        } else {\n          labelIndex = 0;\n        }\n        setLabel(this.labelList[labelIndex]);\n      }, this.labelDuration);\n    });\n  };\n\n  private getLabelVariant = () => {\n    let variant: \"label\" | \"h4\" | \"h2\" = \"h4\";\n    const width = this.outerElement?.offsetWidth;\n    if (this.size === \"small\" || (this.type === \"circular\" && width < 60)) {\n      variant = \"label\";\n    } else if (\n      this.size === \"large\" ||\n      (this.type === \"circular\" && width >= 120)\n    ) {\n      variant = \"h2\";\n    }\n    return variant;\n  };\n\n  // Sets the circular indicator line width - accounting for the circle size being altered using the CSS custom property\n  private setCircleLineWidth = () => {\n    const { offsetWidth: width } = this.outerElement;\n    if (this.host.classList.contains(\"compact-step-progress-indicator\")) {\n      this.compactStepCircularLineWidth = 40;\n    }\n    if (width || this.compactStepCircularLineWidth === 40) {\n      this.circularLineWidth =\n        (this.compactStepCircularLineWidth === 40\n          ? this.compactStepCircularLineWidth\n          : width) * 0.1;\n      this.circularDiameter =\n        this.compactStepCircularLineWidth === 40\n          ? this.compactStepCircularLineWidth\n          : width;\n      this.outerElement.style.setProperty(\n        \"--circular-line-width\",\n        `${this.circularLineWidth}px`\n      );\n    }\n  };\n\n  private setLinearDeterminateWidth = () => {\n    if (!this.innerElement) return;\n    // Ensure progress cannot be out of bounds\n\n    const progress = Math.min(this.max, Math.max(this.min, this.progress));\n    const proportion = (progress - this.min) / (this.max - this.min);\n    this.showSecond = proportion > 0.5;\n    if (this.showSecond) {\n      this.innerElement.classList.remove(\"clip\");\n    } else {\n      this.innerElement.classList.add(\"clip\");\n    }\n    this.innerElement.style.setProperty(\n      \"--linear-width\",\n      `${proportion * 100}%`\n    );\n  };\n\n  private calcOuterClass = (): string => {\n    let cls = `ic-loading-${this.type}-outer`;\n    cls += this.indeterminate ? \" indeterminate\" : \" determinate\";\n    return cls;\n  };\n\n  private updateLabel = (): void => {\n    if (this.label !== undefined) {\n      this.labelList = this.label.split(\"/\");\n      const labelIndex = 0;\n      this.indicatorLabel = this.labelList[labelIndex];\n      if (this.labelList.length > 1) {\n        this.getLabel(labelIndex, (label) => {\n          this.indicatorLabel = label;\n        });\n      }\n    }\n  };\n\n  private setCircleXY = (): IcLoadingCircleXYR => {\n    if (this.circularDiameter > 0) {\n      const r = this.circularDiameter / 2;\n      const x = r;\n      const y = r;\n      const nextRadius = r - this.circularLineWidth / 2;\n      this.setDashSteps(nextRadius);\n\n      return { x, y, r: nextRadius };\n    }\n    return { x: 0, y: 0, r: 0 };\n  };\n\n  private setDashSteps = (radius: number) => {\n    const dashArray = 2 * Math.PI * radius;\n    const progress = Math.min(Math.max(this.progress, this.min), this.max);\n    const proportion = -1 - (progress - this.min) / (this.max - this.min);\n\n    this.circularMeter.style.setProperty(\n      \"--stroke-dasharray\",\n      `${dashArray}px`\n    );\n\n    if (!this.indeterminate) {\n      this.circularMeter.style.setProperty(\n        \"--circular-steps-max\",\n        String(this.max)\n      );\n      this.circularMeter.style.setProperty(\n        \"--stroke-dashoffset\",\n        `${proportion * dashArray}px`\n      );\n    }\n  };\n\n  componentWillLoad(): void {\n    this.indeterminate = this.progress === undefined;\n    this.updateLabel();\n  }\n\n  componentDidLoad(): void {\n    if (this.type === \"circular\") {\n      this.setCircleLineWidth();\n      this.circularMeter = this.host.shadowRoot.querySelector(\n        \".ic-loading-circular-svg circle:nth-child(2)\"\n      );\n      this.updateCircularProgressMeter();\n    }\n\n    if (Number(this.progress) >= 0 && this.type === \"linear\") {\n      this.setLinearDeterminateWidth();\n    }\n  }\n\n  componentWillUpdate(): void {\n    this.indeterminate = this.progress === undefined;\n  }\n\n  componentDidUpdate(): void {\n    if (Number(this.progress) >= 0 && this.type === \"linear\") {\n      this.setLinearDeterminateWidth();\n    }\n  }\n\n  render() {\n    const { appearance, label, description, size } = this;\n    const { x, y, r } = this.setCircleXY();\n\n    return (\n      <Host class={{ [\"light\"]: appearance === IcThemeForegroundEnum.Light }}>\n        <div class=\"ic-loading-container\">\n          <div\n            ref={(el) => (this.outerElement = el as HTMLDivElement)}\n            class={this.calcOuterClass()}\n            role=\"progressbar\"\n            aria-labelledby={\n              this.label && this.size !== \"icon\" && \"ic-loading-label\"\n            }\n            aria-label={description}\n            aria-valuenow={this.progress}\n            aria-valuemin={this.min}\n            aria-valuemax={this.max}\n          >\n            <div\n              ref={(el) => (this.innerElement = el as HTMLDivElement)}\n              class={`ic-loading-${this.type}-inner`}\n            >\n              {this.innerLabel &&\n                this.innerLabel !== undefined &&\n                this.size === \"small\" && (\n                  <ic-typography variant=\"subtitle-small\" class=\"inner-text\">\n                    {this.innerLabel}\n                  </ic-typography>\n                )}\n              {this.type === \"circular\" && (\n                <svg\n                  class=\"ic-loading-circular-svg\"\n                  viewBox={`0 0 ${this.circularDiameter || 0} ${\n                    this.circularDiameter || 0\n                  }`}\n                >\n                  <circle cx={`${x}`} cy={`${y}`} r={`${r}`}></circle>\n                  <circle cx={`${x}`} cy={`${y}`} r={`${r}`}></circle>\n                </svg>\n              )}\n            </div>\n          </div>\n          {label && size !== \"icon\" && (\n            <ic-typography\n              id=\"ic-loading-label\"\n              class=\"ic-loading-label\"\n              role=\"status\"\n              variant={this.getLabelVariant()}\n            >\n              <p>{this.indicatorLabel}</p>\n            </ic-typography>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n","@import \"../../global/normalize.css\";\n\n:host(.ic-tooltip) .ic-tooltip-container {\n  background-color: var(--ic-architectural-800);\n  color: #ffff;\n  text-align: center;\n  padding: var(--ic-space-xxxs) 10px;\n  border-radius: var(--ic-border-radius);\n  position: absolute;\n  max-width: 320px;\n  display: none;\n  z-index: calc(var(--ic-z-index-overlay) / 2);\n  box-shadow: var(--ic-elevation-overlay);\n}\n\n:host(.tooltip-navigation-item:not(.tooltip-navigation-item-side-nav-collapsed))\n  .ic-tooltip-container,\n:host(.tooltip-disabled) .ic-tooltip-container {\n  display: none !important;\n}\n\n:host(.tooltip-long-label-navigation-item-side-nav-expanded)\n  .ic-tooltip-container[data-show] {\n  display: block !important;\n}\n\n:host(.ic-tooltip) .ic-tooltip-arrow,\n:host(.ic-tooltip) .ic-tooltip-arrow::before {\n  position: absolute;\n  background: inherit;\n  width: var(--ic-space-md);\n  height: var(--ic-space-md);\n}\n\n:host(.ic-tooltip) .ic-tooltip-arrow {\n  visibility: hidden;\n}\n\n:host(.ic-tooltip) .ic-tooltip-arrow::before {\n  visibility: visible;\n  content: \"\";\n}\n\n:host(.ic-tooltip) .ic-tooltip-container[data-show] {\n  display: block;\n}\n\n:host(.ic-tooltip)\n  .ic-tooltip-container[data-popper-placement^=\"top\"]\n  > .ic-tooltip-arrow {\n  bottom: calc(-1 * var(--ic-space-md));\n}\n\n:host(.ic-tooltip)\n  .ic-tooltip-container[data-popper-placement^=\"top\"]\n  > .ic-tooltip-arrow::before {\n  border-radius: 0 0 var(--ic-border-radius) var(--ic-border-radius);\n  left: 0;\n  height: var(--ic-space-xxs);\n}\n\n:host(.ic-tooltip)\n  .ic-tooltip-container[data-popper-placement^=\"bottom\"]\n  > .ic-tooltip-arrow {\n  top: calc(-1 * var(--ic-space-xxs));\n}\n\n:host(.ic-tooltip)\n  .ic-tooltip-container[data-popper-placement^=\"bottom\"]\n  > .ic-tooltip-arrow::before {\n  border-radius: var(--ic-border-radius) var(--ic-border-radius) 0 0;\n  left: 0;\n  height: var(--ic-space-xxs);\n}\n\n:host(.ic-tooltip)\n  .ic-tooltip-container[data-popper-placement^=\"left\"]\n  > .ic-tooltip-arrow {\n  right: var(--ic-space-xxxs);\n}\n\n:host(.ic-tooltip)\n  .ic-tooltip-container[data-popper-placement^=\"left\"]\n  > .ic-tooltip-arrow::before {\n  border-radius: 0 var(--ic-border-radius) var(--ic-border-radius) 0;\n}\n\n:host(.ic-tooltip)\n  .ic-tooltip-container[data-popper-placement^=\"right\"]\n  > .ic-tooltip-arrow {\n  left: -14px;\n}\n\n:host(.ic-tooltip)\n  .ic-tooltip-container[data-popper-placement^=\"right\"]\n  > .ic-tooltip-arrow::before {\n  border-radius: var(--ic-border-radius) 0 0 var(--ic-border-radius);\n}\n\n:host([target=\"ic-button-with-tooltip-search-submit-button\"])\n  .ic-tooltip-container,\n:host([target=\"ic-button-with-tooltip-clear-button\"]) .ic-tooltip-container {\n  z-index: calc(var(--ic-z-index-popup-menu) + 1);\n}\n\n@media (forced-colors: active) {\n  :host(.ic-tooltip) .ic-tooltip-container {\n    border: var(--ic-hc-border);\n  }\n}\n","import { Component, Element, Host, Prop, h, Watch } from \"@stencil/core\";\nimport { Instance, createPopper } from \"@popperjs/core\";\nimport { IcTooltipPlacements } from \"./ic-tooltip.types\";\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-tooltip\",\n  styleUrl: \"ic-tooltip.css\",\n  shadow: true,\n})\nexport class Tooltip {\n  @Element() el: HTMLIcTooltipElement;\n\n  /**\n   * The ID of the element the tooltip is describing - for when aria-labelledby or aria-describedby is used.\n   */\n  @Prop({ reflect: true }) target?: string;\n\n  /**\n   * The position of the tool-tip in relation to the parent element.\n   */\n  @Prop() placement?: IcTooltipPlacements = \"bottom\";\n\n  /**\n   * The text to display on the tooltip.\n   */\n  @Prop() label!: string;\n\n  /**\n   * If `true`, the tooltip will not be displayed on hover, it will require a click.\n   */\n  @Prop() disableHover?: boolean = false;\n\n  @Watch(\"label\")\n  updateLabel(newValue: string): void {\n    const describedBySpan = this.el.previousElementSibling as HTMLElement;\n    if (describedBySpan !== null) {\n      describedBySpan.innerText = newValue;\n    }\n  }\n\n  private toolTip: HTMLDivElement;\n  private arrow: HTMLDivElement;\n  private mouseOverTool: boolean = false;\n  private showEvents = this.disableHover\n    ? [\"click\"]\n    : [\"mouseenter\", \"focusin\"];\n  private instantHideEvents = [\"focusout\"];\n  private delayedHideEvents = [\"mouseleave\"];\n  private popperInstance: Instance;\n\n  private show = (popper: Instance) => {\n    this.toolTip.setAttribute(\"data-show\", \"\");\n    popper.setOptions((options) => ({\n      ...options,\n      modifiers: [\n        ...options.modifiers,\n        { name: \"eventListeners\", enabled: true },\n      ],\n    }));\n    popper.update();\n  };\n\n  private hide = (popper: Instance) => {\n    this.toolTip.removeAttribute(\"data-show\");\n    popper.setOptions((options) => ({\n      ...options,\n      modifiers: [\n        ...options.modifiers,\n        { name: \"eventListeners\", enabled: false },\n      ],\n    }));\n  };\n\n  private checkCloseTooltip = (popper: Instance) => {\n    setTimeout(() => {\n      if (!this.mouseOverTool) {\n        this.hide(popper);\n      }\n    }, 100);\n  };\n\n  private mouseEnterTooltip = () => {\n    this.mouseOverTool = true;\n  };\n\n  private mouseLeaveTooltip = (popper: Instance) => {\n    this.mouseOverTool = false;\n    this.checkCloseTooltip(popper);\n  };\n\n  private handleKeyDown = (key: string) => {\n    if (key === \"Escape\") {\n      this.hide(this.popperInstance);\n    }\n  };\n\n  private manageEventListeners = (action: \"add\" | \"remove\") => {\n    const method =\n      action === \"add\" ? \"addEventListener\" : \"removeEventListener\";\n\n    this.showEvents.forEach((event) => {\n      this.el[method](event, () => this.show(this.popperInstance));\n      this.toolTip[method](event, () => this.mouseEnterTooltip());\n    });\n\n    this.instantHideEvents.forEach((event) => {\n      this.el[method](event, () => this.hide(this.popperInstance));\n    });\n\n    this.delayedHideEvents.forEach((event) => {\n      this.el[method](event, () => this.checkCloseTooltip(this.popperInstance));\n      this.toolTip[method](event, () =>\n        this.mouseLeaveTooltip(this.popperInstance)\n      );\n    });\n\n    document[method](\"keydown\", (event: KeyboardEvent) =>\n      this.handleKeyDown(event.key)\n    );\n  };\n\n  private screenReaderOnlyStyles = {\n    position: \"absolute\",\n    left: \"-10000px\",\n    top: \"auto\",\n    width: \"1px\",\n    height: \"1px\",\n    overflow: \"hidden\",\n  };\n\n  componentDidLoad(): void {\n    this.popperInstance = createPopper(this.el, this.toolTip, {\n      placement: this.placement,\n      modifiers: [\n        {\n          name: \"offset\",\n          options: {\n            offset: [0, 10],\n          },\n        },\n        {\n          name: \"arrow\",\n          options: {\n            element: this.arrow,\n          },\n        },\n      ],\n    });\n\n    this.manageEventListeners(\"add\");\n\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Tooltip\"\n    );\n\n    if (this.target !== undefined) {\n      const ariaDescribedBy = document.createElement(\"span\");\n      ariaDescribedBy.id = `ic-tooltip-${this.target}`;\n      ariaDescribedBy.innerText = this.label;\n      ariaDescribedBy.classList.add(\"ic-tooltip-label\");\n      Object.assign(ariaDescribedBy.style, this.screenReaderOnlyStyles);\n\n      this.el.insertAdjacentElement(\"beforebegin\", ariaDescribedBy);\n    }\n  }\n\n  disconnectedCallback(): void {\n    this.manageEventListeners(\"remove\");\n  }\n\n  render() {\n    const { label } = this;\n    return (\n      <Host class={{ \"ic-tooltip\": true }}>\n        <div\n          ref={(el) => (this.toolTip = el as HTMLDivElement)}\n          role=\"tooltip\"\n          class=\"ic-tooltip-container\"\n        >\n          <ic-typography variant=\"caption\">{label}</ic-typography>\n          <div\n            ref={(el) => (this.arrow = el as HTMLDivElement)}\n            class=\"ic-tooltip-arrow\"\n            data-popper-arrow\n          ></div>\n        </div>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/core/{p-ecfb2e6b.entry.js → p-930cd4cc.entry.js}

@@ -1,2 +1,2 @@
-import{r as i,h as t,H as e,g as o}from"./p-f9370be6.js";import{D as n,k as s,g as a,p as r}from"./p-23831891.js";import{c as d}from"./p-e28af65b.js";import"./p-6f57b13c.js";const h='/*! 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}:host{display:block}:host(.in-side-menu){border-bottom:1px solid var(--ic-architectural-200);padding:var(--ic-space-md) 0}:host .navigation-group{height:100%;width:-moz-fit-content;width:fit-content;color:var(--ic-theme-text);display:flex;align-items:center;justify-content:center;padding:0 var(--ic-space-md);transition:var(--ic-easing-transition-slow);position:relative;background:none;border:none}:host(.in-side-menu) .navigation-group{height:40px;width:100%;text-align:left}:host(.in-side-menu) .navigation-group .ic-typography-label{width:190px}:host(.in-side-menu) .navigation-group-side-menu{color:var(--ic-action-default);justify-content:flex-start;padding:0 var(--ic-space-md) 0 var(--ic-space-md)}:host(.in-side-menu) .navigation-group-side-menu-collapsed,:host(.in-side-menu) .navigation-group-side-menu-expanded{color:var(--ic-action-default);justify-content:flex-start;padding-left:var(--ic-space-md)}:host(.in-side-menu) .navigation-group-side-menu-expanded{margin-bottom:var(--ic-space-xs)}:host(.in-side-menu) .navigation-group-side-menu-collapsed::after,:host(.in-side-menu) .navigation-group-side-menu-expanded::after{border-style:solid;border-width:0.125em 0.125em 0 0;content:"";display:inline-block;height:0.45em;left:0.75em;position:relative;top:-0.1em;transform:rotate(135deg);vertical-align:top;width:0.45em}:host(.in-side-menu) .navigation-group-side-menu-expanded::after{top:0.15em;transform:rotate(-45deg)}:host .navigation-group:hover,:host .navigation-group:active,:host .selected{background-color:var(--ic-architectural-20);color:var(--ic-color-primary-text);outline:none;cursor:pointer}:host(:not(.in-side-menu)) .navigation-group:focus{box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);outline:var(--ic-hc-focus-outline);z-index:1;transition:box-shadow var(--ic-easing-transition-fast)}:host(.in-side-menu) .navigation-group-side-menu:hover,:host(.in-side-menu) .navigation-group-side-menu:active,:host(.in-side-menu) .navigation-group-side-menu:focus{background-color:var(--ic-architectural-20);color:var(--ic-action-default);cursor:auto;box-shadow:none;outline:none}:host(.in-side-menu) .navigation-group-side-menu:focus{outline:var(--ic-hc-focus-outline)}:host(.in-side-menu) .navigation-group-side-menu-expanded:hover:not(:focus),:host(.in-side-menu) .navigation-group-side-menu-collapsed:hover:not(:focus){background-color:var(--ic-action-dark-bg-hover);color:var(--ic-action-default);cursor:pointer}:host(.in-side-menu) .navigation-group-side-menu-expanded:active:not(:focus),:host(.in-side-menu) .navigation-group-side-menu-collapsed:active:not(:focus){background-color:var(--ic-action-dark-bg-active);color:var(--ic-action-default)}:host(.in-side-menu) .navigation-group-side-menu-expanded:focus,:host(.in-side-menu) .navigation-group-side-menu-collapsed:focus{color:var(--ic-action-default);box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset);outline:var(--ic-hc-focus-outline)}:host .navigation-group-dropdown{background-color:var(--ic-architectural-20);border-bottom:1px solid var(--ic-architectural-300);position:absolute;left:0;right:0;padding:var(--ic-space-xs) var(--ic-space-md);box-shadow:0 6px 8px -6px rgba(0 0 0 / 20%)}:host .navigation-group-dropdown-items-list{list-style:none;display:flex;flex-flow:column wrap;align-content:flex-start;padding-left:var(--ic-space-md);max-height:264px}:host .chevron-toggle-icon-wrapper{display:flex;align-items:center}:host .chevron-toggle-icon-wrapper svg{transform:rotate(90deg)}:host .chevron-toggle-icon-closed svg{transform:rotate(-90deg)}:host(.expanded) .grouped-links-wrapper{height:var(--navigation-child-items-height, auto);transition:var(--ic-easing-transition-slow);overflow:hidden}:host(.collapsed) .grouped-links-wrapper{height:var(--navigation-child-items-height, 0);transition:var(--ic-easing-transition-slow);overflow:hidden}:host(.navigation-group-side-nav) .navigation-group{height:var(--navigation-group-height);width:var(--navigation-group-width);justify-content:var(--navigation-group-justify-content);padding-right:var(--navigation-group-expand-toggle-padding)}:host(.navigation-group-side-nav) .navigation-group:hover,:host(.navigation-group-side-nav) .navigation-group:active,:host(.navigation-group-side-nav) .selected{background-color:var(--navigation-group-hover);color:var(--navigation-group-text-hover)}:host(.navigation-group-side-nav) .navigation-group:focus{box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset);background:none}:host(.navigation-group-side-nav) .ic-typography-caption{position:var(--navigation-group-title-position);left:var(--navigation-group-title-position-left);white-space:nowrap}.menu-visibility-visible{visibility:visible}.menu-visibility-hidden{visibility:hidden}';const c=class{constructor(e){i(this,e);this.DYNAMIC_GROUPED_LINKS_HEIGHT_MS=50;this.sideNavExpandHandler=()=>{setTimeout((()=>this.setInitialGroupedLinksWrapperHeight()),this.DYNAMIC_GROUPED_LINKS_HEIGHT_MS)};this.topNavResizedHandler=i=>{const t=i.detail.size;if(t!==this.deviceSize){this.deviceSize=t;this.inTopNavSideMenu=t<=n.L}};this.setGroupedNavItemTabIndex=i=>{this.el.querySelectorAll("ic-navigation-item").forEach((t=>{const e=t.shadowRoot.querySelector("a")||t.querySelector("a");if(e){e.setAttribute("tabindex",i)}}))};this.toggleGroupedLinkWrapperHeight=(i,t)=>{if(i){if(t){i.setAttribute("style",`--navigation-child-items-height: ${this.getNavigationChildItemsHeight()}`);this.setGroupedNavItemTabIndex("0")}else{i.setAttribute("style",`--navigation-child-items-height: 0`);this.setGroupedNavItemTabIndex("-1")}}};this.toggleExpanded=()=>{this.expanded=!this.expanded;const i=this.el.shadowRoot.querySelector(".grouped-links-wrapper");this.toggleGroupedLinkWrapperHeight(i,this.expanded)};this.handleClick=i=>{if(this.navigationType==="top"&&i.detail){this.toggleDropdown()}else{this.toggleExpanded()}};this.handleBlur=i=>{const t=i.relatedTarget;if(!this.el.contains(t)){this.hideDropdown()}};this.handleTopNavKeydown=i=>{if(!this.inTopNavSideMenu&&i.key==="Escape"){this.hideDropdown();this.el.blur()}else if(i.key===" "||i.key==="Enter"){this.toggleDropdown()}};this.handleKeydown=i=>{if(i.key==="Enter"||i.key==="Space"){switch(this.navigationType){case"top":this.handleTopNavKeydown(i);break;case"side":this.toggleExpanded();i.preventDefault();break;default:this.toggleExpanded();break}}};this.handleMouseLeave=i=>{const t=i.relatedTarget;if(!this.el.contains(t)&&t!==this.dropdown&&document.activeElement!==this.el&&!this.el.contains(document.activeElement)){this.hideDropdown()}};this.triggerShowDropdown=()=>{this.showDropdown()};this.renderDropdownGroupedLinks=()=>t("div",{class:{["navigation-group-dropdown"]:!this.inTopNavSideMenu,["navigation-group-dropdown-side-menu"]:this.inTopNavSideMenu,["selected"]:this.dropdownOpen&&!this.inTopNavSideMenu},onMouseLeave:!this.inTopNavSideMenu?this.handleMouseLeave:null,ref:i=>this.dropdown=i},t("nav",{class:{["navigation-group-dropdown-items"]:!this.inTopNavSideMenu}},t("ul",null,t("slot",null))));this.renderGroupedLinks=()=>t("ul",{class:"grouped-links-wrapper"},t("slot",null));this.getNavigationChildItemsHeight=()=>{const i=this.el.querySelectorAll("ic-navigation-item").length||0;const t=this.el.querySelector("ic-navigation-item")||null;if(this.navigationType==="side"&&!!i&&t){return`${parseInt(getComputedStyle(t).height)*i}px`}return"auto"};this.setInitialGroupedLinksWrapperHeight=()=>{const i=this.el.shadowRoot.querySelector(".grouped-links-wrapper");if(i&&this.expanded){i.setAttribute("style",`--navigation-child-items-height: ${this.getNavigationChildItemsHeight()}`)}};this.renderNavigationItems=()=>{if(this.dropdownOpen||this.inTopNavSideMenu&&!this.expandable){return this.renderDropdownGroupedLinks()}if(this.navigationType!=="top"){return this.renderGroupedLinks()}return null};this.label=undefined;this.expandable=false;this.dropdownOpen=false;this.inTopNavSideMenu=false;this.deviceSize=n.XL;this.focusStyle=s();this.navigationType=undefined;this.parentEl=undefined;this.expanded=true}childBlurHandler(){this.hideDropdown()}navItemClickHandler(){this.hideDropdown()}themeChangeHandler(i){const t=i.detail;this.focusStyle=t.mode}async setFocus(){if(this.groupEl){this.groupEl.focus()}}toggleDropdown(){this.dropdownOpen=!this.dropdownOpen}showDropdown(){if(!this.dropdownOpen){this.toggleDropdown()}}hideDropdown(){if(this.dropdownOpen){this.toggleDropdown()}}componentWillLoad(){this.deviceSize=a();const i=r(this.el);this.navigationType=i.navType;this.parentEl=i.parent;if(this.deviceSize<=n.L&&this.navigationType==="top"){this.inTopNavSideMenu=true}if(this.navigationType==="side"){this.parentEl.addEventListener("sideNavExpanded",this.sideNavExpandHandler)}else if(this.navigationType==="top"){this.parentEl.addEventListener("topNavResized",this.topNavResizedHandler)}}componentDidLoad(){setTimeout((()=>this.setInitialGroupedLinksWrapperHeight()),this.DYNAMIC_GROUPED_LINKS_HEIGHT_MS)}disconnectedCallback(){if(this.navigationType==="side"){this.parentEl.removeEventListener("sideNavExpanded",this.sideNavExpandHandler)}else if(this.navigationType==="top"){this.parentEl.removeEventListener("topNavResized",this.topNavResizedHandler)}}render(){const{label:i,dropdownOpen:o,inTopNavSideMenu:n,expandable:s}=this;const a=!n||s?"button":"div";return t(e,{class:{["in-side-menu"]:n,expanded:this.expanded,collapsed:!this.expanded,["navigation-group-side-nav"]:this.navigationType==="side"},role:"listitem"},t(a,{tabindex:n&&!s?"-1":"0",onMouseOver:!n&&this.navigationType==="top"?this.triggerShowDropdown:null,onMouseLeave:this.navigationType==="top"&&this.handleMouseLeave,onBlur:this.handleBlur,onClick:s?this.handleClick:null,onKeyDown:this.handleKeydown,class:{["navigation-group"]:true,[this.focusStyle]:!n,["navigation-group-side-menu"]:n&&!s,["navigation-group-side-menu-collapsed"]:n&&s&&!o,["navigation-group-side-menu-expanded"]:n&&s&&o,["selected"]:o&&!n},ref:i=>this.groupEl=i,"aria-expanded":o||this.expanded?"true":"false","aria-haspopup":!n&&this.navigationType==="top"?"true":"false"},t("ic-typography",{variant:this.navigationType==="side"?"caption":"label"},i),this.navigationType==="side"&&s&&t("div",{class:{"chevron-toggle-icon-wrapper":true,"chevron-toggle-icon-closed":this.expanded},innerHTML:d})),this.renderNavigationItems())}get el(){return o(this)}};c.style=h;export{c as ic_navigation_group};
-//# sourceMappingURL=p-ecfb2e6b.entry.js.map
+import{r as i,h as t,H as e,g as o}from"./p-f9370be6.js";import{D as n,k as s,g as a,p as r}from"./p-a8ac8f72.js";import{c as d}from"./p-e28af65b.js";import"./p-6f57b13c.js";const h='/*! 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}:host{display:block}:host(.in-side-menu){border-bottom:1px solid var(--ic-architectural-200);padding:var(--ic-space-md) 0}:host .navigation-group{height:100%;width:-moz-fit-content;width:fit-content;color:var(--ic-theme-text);display:flex;align-items:center;justify-content:center;padding:0 var(--ic-space-md);transition:var(--ic-easing-transition-slow);position:relative;background:none;border:none}:host(.in-side-menu) .navigation-group{height:40px;width:100%;text-align:left}:host(.in-side-menu) .navigation-group .ic-typography-label{width:190px}:host(.in-side-menu) .navigation-group-side-menu{color:var(--ic-action-default);justify-content:flex-start;padding:0 var(--ic-space-md) 0 var(--ic-space-md)}:host(.in-side-menu) .navigation-group-side-menu-collapsed,:host(.in-side-menu) .navigation-group-side-menu-expanded{color:var(--ic-action-default);justify-content:flex-start;padding-left:var(--ic-space-md)}:host(.in-side-menu) .navigation-group-side-menu-expanded{margin-bottom:var(--ic-space-xs)}:host(.in-side-menu) .navigation-group-side-menu-collapsed::after,:host(.in-side-menu) .navigation-group-side-menu-expanded::after{border-style:solid;border-width:0.125em 0.125em 0 0;content:"";display:inline-block;height:0.45em;left:0.75em;position:relative;top:-0.1em;transform:rotate(135deg);vertical-align:top;width:0.45em}:host(.in-side-menu) .navigation-group-side-menu-expanded::after{top:0.15em;transform:rotate(-45deg)}:host .navigation-group:hover,:host .navigation-group:active,:host .selected{background-color:var(--ic-architectural-20);color:var(--ic-color-primary-text);outline:none;cursor:pointer}:host(:not(.in-side-menu)) .navigation-group:focus{box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);outline:var(--ic-hc-focus-outline);z-index:1;transition:box-shadow var(--ic-easing-transition-fast)}:host(.in-side-menu) .navigation-group-side-menu:hover,:host(.in-side-menu) .navigation-group-side-menu:active,:host(.in-side-menu) .navigation-group-side-menu:focus{background-color:var(--ic-architectural-20);color:var(--ic-action-default);cursor:auto;box-shadow:none;outline:none}:host(.in-side-menu) .navigation-group-side-menu:focus{outline:var(--ic-hc-focus-outline)}:host(.in-side-menu) .navigation-group-side-menu-expanded:hover:not(:focus),:host(.in-side-menu) .navigation-group-side-menu-collapsed:hover:not(:focus){background-color:var(--ic-action-dark-bg-hover);color:var(--ic-action-default);cursor:pointer}:host(.in-side-menu) .navigation-group-side-menu-expanded:active:not(:focus),:host(.in-side-menu) .navigation-group-side-menu-collapsed:active:not(:focus){background-color:var(--ic-action-dark-bg-active);color:var(--ic-action-default)}:host(.in-side-menu) .navigation-group-side-menu-expanded:focus,:host(.in-side-menu) .navigation-group-side-menu-collapsed:focus{color:var(--ic-action-default);box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset);outline:var(--ic-hc-focus-outline)}:host .navigation-group-dropdown{background-color:var(--ic-architectural-20);border-bottom:1px solid var(--ic-architectural-300);position:absolute;left:0;right:0;padding:var(--ic-space-xs) var(--ic-space-md);box-shadow:0 6px 8px -6px rgba(0 0 0 / 20%)}:host .navigation-group-dropdown-items-list{list-style:none;display:flex;flex-flow:column wrap;align-content:flex-start;padding-left:var(--ic-space-md);max-height:264px}:host .chevron-toggle-icon-wrapper{display:flex;align-items:center}:host .chevron-toggle-icon-wrapper svg{transform:rotate(90deg)}:host .chevron-toggle-icon-closed svg{transform:rotate(-90deg)}:host(.expanded) .grouped-links-wrapper{height:var(--navigation-child-items-height, auto);transition:var(--ic-easing-transition-slow);overflow:hidden}:host(.collapsed) .grouped-links-wrapper{height:var(--navigation-child-items-height, 0);transition:var(--ic-easing-transition-slow);overflow:hidden}:host(.navigation-group-side-nav) .navigation-group{height:var(--navigation-group-height);width:var(--navigation-group-width);justify-content:var(--navigation-group-justify-content);padding-right:var(--navigation-group-expand-toggle-padding)}:host(.navigation-group-side-nav) .navigation-group:hover,:host(.navigation-group-side-nav) .navigation-group:active,:host(.navigation-group-side-nav) .selected{background-color:var(--navigation-group-hover);color:var(--navigation-group-text-hover)}:host(.navigation-group-side-nav) .navigation-group:focus{box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset);background:none}:host(.navigation-group-side-nav) .ic-typography-caption{position:var(--navigation-group-title-position);left:var(--navigation-group-title-position-left);white-space:nowrap}.menu-visibility-visible{visibility:visible}.menu-visibility-hidden{visibility:hidden}';const c=class{constructor(e){i(this,e);this.DYNAMIC_GROUPED_LINKS_HEIGHT_MS=50;this.sideNavExpandHandler=()=>{setTimeout((()=>this.setInitialGroupedLinksWrapperHeight()),this.DYNAMIC_GROUPED_LINKS_HEIGHT_MS)};this.topNavResizedHandler=i=>{const t=i.detail.size;if(t!==this.deviceSize){this.deviceSize=t;this.inTopNavSideMenu=t<=n.L}};this.setGroupedNavItemTabIndex=i=>{this.el.querySelectorAll("ic-navigation-item").forEach((t=>{const e=t.shadowRoot.querySelector("a")||t.querySelector("a");if(e){e.setAttribute("tabindex",i)}}))};this.toggleGroupedLinkWrapperHeight=(i,t)=>{if(i){if(t){i.setAttribute("style",`--navigation-child-items-height: ${this.getNavigationChildItemsHeight()}`);this.setGroupedNavItemTabIndex("0")}else{i.setAttribute("style",`--navigation-child-items-height: 0`);this.setGroupedNavItemTabIndex("-1")}}};this.toggleExpanded=()=>{this.expanded=!this.expanded;const i=this.el.shadowRoot.querySelector(".grouped-links-wrapper");this.toggleGroupedLinkWrapperHeight(i,this.expanded)};this.handleClick=i=>{if(this.navigationType==="top"&&i.detail){this.toggleDropdown()}else{this.toggleExpanded()}};this.handleBlur=i=>{const t=i.relatedTarget;if(!this.el.contains(t)){this.hideDropdown()}};this.handleTopNavKeydown=i=>{if(!this.inTopNavSideMenu&&i.key==="Escape"){this.hideDropdown();this.el.blur()}else if(i.key===" "||i.key==="Enter"){this.toggleDropdown()}};this.handleKeydown=i=>{if(i.key==="Enter"||i.key==="Space"){switch(this.navigationType){case"top":this.handleTopNavKeydown(i);break;case"side":this.toggleExpanded();i.preventDefault();break;default:this.toggleExpanded();break}}};this.handleMouseLeave=i=>{const t=i.relatedTarget;if(!this.el.contains(t)&&t!==this.dropdown&&document.activeElement!==this.el&&!this.el.contains(document.activeElement)){this.hideDropdown()}};this.triggerShowDropdown=()=>{this.showDropdown()};this.renderDropdownGroupedLinks=()=>t("div",{class:{["navigation-group-dropdown"]:!this.inTopNavSideMenu,["navigation-group-dropdown-side-menu"]:this.inTopNavSideMenu,["selected"]:this.dropdownOpen&&!this.inTopNavSideMenu},onMouseLeave:!this.inTopNavSideMenu?this.handleMouseLeave:null,ref:i=>this.dropdown=i},t("nav",{class:{["navigation-group-dropdown-items"]:!this.inTopNavSideMenu}},t("ul",null,t("slot",null))));this.renderGroupedLinks=()=>t("ul",{class:"grouped-links-wrapper"},t("slot",null));this.getNavigationChildItemsHeight=()=>{const i=this.el.querySelectorAll("ic-navigation-item").length||0;const t=this.el.querySelector("ic-navigation-item")||null;if(this.navigationType==="side"&&!!i&&t){return`${parseInt(getComputedStyle(t).height)*i}px`}return"auto"};this.setInitialGroupedLinksWrapperHeight=()=>{const i=this.el.shadowRoot.querySelector(".grouped-links-wrapper");if(i&&this.expanded){i.setAttribute("style",`--navigation-child-items-height: ${this.getNavigationChildItemsHeight()}`)}};this.renderNavigationItems=()=>{if(this.dropdownOpen||this.inTopNavSideMenu&&!this.expandable){return this.renderDropdownGroupedLinks()}if(this.navigationType!=="top"){return this.renderGroupedLinks()}return null};this.label=undefined;this.expandable=false;this.dropdownOpen=false;this.inTopNavSideMenu=false;this.deviceSize=n.XL;this.focusStyle=s();this.navigationType=undefined;this.parentEl=undefined;this.expanded=true}childBlurHandler(){this.hideDropdown()}navItemClickHandler(){this.hideDropdown()}themeChangeHandler(i){const t=i.detail;this.focusStyle=t.mode}async setFocus(){if(this.groupEl){this.groupEl.focus()}}toggleDropdown(){this.dropdownOpen=!this.dropdownOpen}showDropdown(){if(!this.dropdownOpen){this.toggleDropdown()}}hideDropdown(){if(this.dropdownOpen){this.toggleDropdown()}}componentWillLoad(){this.deviceSize=a();const i=r(this.el);this.navigationType=i.navType;this.parentEl=i.parent;if(this.deviceSize<=n.L&&this.navigationType==="top"){this.inTopNavSideMenu=true}if(this.navigationType==="side"){this.parentEl.addEventListener("sideNavExpanded",this.sideNavExpandHandler)}else if(this.navigationType==="top"){this.parentEl.addEventListener("topNavResized",this.topNavResizedHandler)}}componentDidLoad(){setTimeout((()=>this.setInitialGroupedLinksWrapperHeight()),this.DYNAMIC_GROUPED_LINKS_HEIGHT_MS)}disconnectedCallback(){if(this.navigationType==="side"){this.parentEl.removeEventListener("sideNavExpanded",this.sideNavExpandHandler)}else if(this.navigationType==="top"){this.parentEl.removeEventListener("topNavResized",this.topNavResizedHandler)}}render(){const{label:i,dropdownOpen:o,inTopNavSideMenu:n,expandable:s}=this;const a=!n||s?"button":"div";return t(e,{class:{["in-side-menu"]:n,expanded:this.expanded,collapsed:!this.expanded,["navigation-group-side-nav"]:this.navigationType==="side"},role:"listitem"},t(a,{tabindex:n&&!s?"-1":"0",onMouseOver:!n&&this.navigationType==="top"?this.triggerShowDropdown:null,onMouseLeave:this.navigationType==="top"&&this.handleMouseLeave,onBlur:this.handleBlur,onClick:s?this.handleClick:null,onKeyDown:this.handleKeydown,class:{["navigation-group"]:true,[this.focusStyle]:!n,["navigation-group-side-menu"]:n&&!s,["navigation-group-side-menu-collapsed"]:n&&s&&!o,["navigation-group-side-menu-expanded"]:n&&s&&o,["selected"]:o&&!n},ref:i=>this.groupEl=i,"aria-expanded":o||this.expanded?"true":"false","aria-haspopup":!n&&this.navigationType==="top"?"true":"false"},t("ic-typography",{variant:this.navigationType==="side"?"caption":"label"},i),this.navigationType==="side"&&s&&t("div",{class:{"chevron-toggle-icon-wrapper":true,"chevron-toggle-icon-closed":this.expanded},innerHTML:d})),this.renderNavigationItems())}get el(){return o(this)}};c.style=h;export{c as ic_navigation_group};
+//# sourceMappingURL=p-930cd4cc.entry.js.map