@ukic/web-components 2.1.0-beta.17 → 2.1.0-beta.18

package/dist/cjs/ic-side-navigation.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ic-side-navigation.entry.cjs.js","mappings":"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","names":["getCssProperty","isSlotUsed","DEVICE_SIZES","getCurrentDeviceSize","h","closeIcon","getThemeForegroundColor","checkResizeObserver","onComponentRequiredPropUndefined","Host","IcThemeForegroundEnum","hasClassificationBanner","chevronIcon"],"sources":["./src/components/ic-side-navigation/ic-side-navigation.css?tag=ic-side-navigation&encapsulation=shadow","./src/components/ic-side-navigation/ic-side-navigation.tsx"],"sourcesContent":["/**\n * @prop --ic-z-index-side-navigation: z-index of side navigation panel\n */\n\n:host {\n  display: block;\n\n  --side-navigation-position: fixed;\n  --side-navigation-position-left: 0;\n  --side-navigation-position-top: var(--ic-space-xxl);\n  --side-navigation-height: var(--ic-space-xxl);\n  --sm-side-navigation-top-bar-height: 3.5rem;\n  --sm-side-navigation-collapsed-labels-width: 6rem;\n  --sm-side-navigation-expand-transition-duration: var(\n    --ic-transition-duration-slow\n  );\n  --side-navigation-width: 20rem;\n  --sm-side-navigation-bottom-bar-height: 3.5rem;\n\n  z-index: var(--ic-z-index-side-navigation);\n}\n\n:host > * {\n  box-sizing: border-box;\n}\n\n.side-navigation {\n  display: flex;\n  flex-direction: column;\n  width: var(--side-navigation-width);\n  color: var(--ic-theme-text);\n  position: var(--side-navigation-position);\n  top: var(--side-navigation-position-top);\n  left: calc(var(--side-navigation-width) * -1);\n  bottom: 0;\n  background-color: var(--ic-theme-primary);\n  z-index: var(--ic-z-index-side-navigation);\n}\n\n:host(.inline) .side-navigation {\n  position: absolute;\n  height: 100%;\n}\n\n:host(.anchor-right) .side-navigation {\n  right: calc(var(--side-navigation-width) * -1);\n}\n\n.classification-spacing {\n  margin-bottom: var(--ic-space-lg);\n}\n\n.navigation-list {\n  padding: 0;\n  margin: 0;\n  list-style: none;\n}\n\n.side-navigation-inner {\n  background-color: var(--ic-theme-primary);\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 0;\n  overflow: auto;\n  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  bottom: 0;\n  left: 0;\n  z-index: 2;\n  box-shadow: -0.188rem -0.188rem 0.5rem rgb(0 0 0 / 20%);\n  background-color: var(--ic-theme-primary);\n  display: flex;\n  flex-direction: column;\n  visibility: hidden;\n}\n\n:host(.inline) .bottom-wrapper {\n  position: sticky;\n}\n\n:host(.dark) .bottom-wrapper {\n  border-top: var(--ic-keyline-darken);\n}\n\n/* Mobile Top Bar */\n\n.top-bar {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  min-height: var(--side-navigation-height);\n  padding: var(--ic-space-xs);\n  box-sizing: border-box;\n  background-color: var(--ic-theme-primary);\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  border-bottom: var(--ic-keyline-darken);\n  box-shadow: var(--ic-elevation-overlay);\n  z-index: 2;\n  overflow: hidden;\n  visibility: visible;\n}\n\n:host(.inline) .top-bar {\n  position: absolute;\n}\n\n.top-bar.dark a:focus {\n  box-shadow: var(--ic-border-focus);\n}\n\n.top-bar.light {\n  border-bottom: var(--ic-keyline-lighten);\n}\n\n.app-title-wrapper {\n  display: flex;\n  margin-left: var(--ic-space-xs);\n  border-left: var(--ic-keyline-darken);\n  padding-left: var(--ic-space-xxs);\n  color: var(--ic-theme-text);\n  align-items: center;\n}\n\n@media screen and (min-width: 340px) {\n  .app-title-wrapper ic-typography {\n    margin-left: var(--ic-space-xs);\n  }\n}\n\n:host .title-link {\n  display: flex;\n  align-items: center;\n  transition: box-shadow var(--ic-easing-transition-fast),\n    background-color var(--ic-easing-transition-fast);\n  text-decoration: none;\n  padding: var(--ic-space-xxs);\n  color: var(--ic-theme-text);\n}\n\n:host .title-link:visited,\n:host .title-link:active {\n  color: var(--ic-theme-text);\n}\n\nslot[name=\"app-title\"]::slotted(a),\nslot[name=\"app-icon\"]::slotted(a) {\n  color: var(--ic-theme-text);\n  outline: none;\n  text-decoration: none;\n}\n\n:host .title-link:hover {\n  border-radius: var(--ic-border-radius);\n  background-color: var(--ic-theme-hover);\n}\n\n:host .title-link:active {\n  background-color: var(--ic-theme-active);\n}\n\n:host .title-link:focus,\n:host .title-link:focus-within {\n  border-radius: var(--ic-border-radius);\n  box-shadow: var(--ic-border-focus);\n  outline: var(--ic-hc-focus-outline);\n  background-color: transparent;\n}\n\n:host .title-link ic-typography {\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n.app-title-wrapper ::slotted(svg) {\n  fill: var(--ic-theme-text);\n}\n\n.app-icon-container {\n  display: none;\n}\n\n.button-label {\n  display: flex;\n  align-items: center;\n}\n\n.mobile-top-bar-menu-icon {\n  display: flex;\n}\n\n.menu-button {\n  width: 6.5rem;\n}\n\n.app-status-wrapper {\n  inset: 0 var(--ic-space-sm) 0 3.5rem;\n  width: auto;\n  display: flex;\n  gap: var(--ic-space-xs);\n  padding: var(--ic-space-sm) 0;\n  justify-content: flex-end;\n  align-items: flex-end;\n  pointer-events: none;\n  height: fit-content;\n  margin: 0 var(--ic-space-xs);\n}\n\n.app-status-wrapper .app-version {\n  display: flex;\n  overflow-wrap: break-word;\n  padding-bottom: var(--ic-space-xxs);\n}\n\n.app-status-wrapper .app-status {\n  display: flex;\n  border-radius: 1rem;\n  background-color: var(--ic-theme-text);\n  color: var(--ic-color-primary-text);\n  padding: var(--ic-space-xxs) var(--ic-space-lg);\n  min-width: 1rem;\n}\n\n.app-status-wrapper .app-status-text {\n  overflow-wrap: break-word;\n}\n\n:host(.dark) .app-status-wrapper .app-status {\n  color: var(--ic-color-white-text);\n}\n\n.navigation-landmark-title {\n  position: absolute;\n  width: var(--ic-space-1px);\n  height: var(--ic-space-1px);\n  padding: 0;\n  margin: calc(-1 * var(--ic-space-1px));\n  overflow: hidden;\n}\n\n/* Navigation Group */\n\n::slotted(ic-navigation-group) {\n  --navigation-group-height: 2.75rem;\n  --navigation-group-width: 100%;\n  --navigation-group-justify-content: space-between;\n  --navigation-group-hover: var(--ic-theme-hover);\n  --navigation-group-text-hover: var(--ic-theme-text);\n  --navigation-item-child-height: 3.5rem;\n  --navigation-item-child-active: var(--ic-action-dark-bg-active);\n  --navigation-item-child-color: var(--ic-theme-text);\n  --navigation-group-expand-toggle-padding: 0.25rem;\n}\n\n/* Navigation Items */\n\n::slotted(ic-navigation-item),\n::slotted(ic-navigation-group) {\n  --navigation-item-height: 3.5rem;\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  min-height: var(--sm-side-navigation-top-bar-height);\n}\n\n.bottom-side-nav ic-divider {\n  position: absolute;\n  top: 0;\n  width: 100%;\n}\n\n.primary-navigation {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n\n  /* Hide scrollbar when required but keep functionality */\n  scrollbar-width: none;\n}\n\n.primary-navigation::-webkit-scrollbar {\n  display: none;\n}\n\n.primary-navigation,\n.secondary-navigation {\n  overflow-x: hidden;\n}\n\n.bottom-side-nav .menu-expand-button {\n  position: absolute;\n  display: none;\n}\n\n.menu-visibility-visible {\n  visibility: visible;\n}\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  .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: -0.188rem 0.188rem 0.5rem 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: 0.188rem 0.188rem 0.5rem rgb(0 0 0 / 20%);\n  }\n\n  :host(.anchor-right) .bottom-wrapper {\n    box-shadow: 0.188rem -0.188rem 0.5rem 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 * 0.281rem) 0 calc(-1 * 0.281rem) 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    margin-left: 0;\n  }\n\n  :host(.sm-expanded) .app-status-wrapper {\n    display: flex;\n    max-width: 16rem;\n    margin-right: calc(var(--ic-space-xxxs) + var(--ic-space-xs));\n  }\n\n  .bottom-side-nav {\n    justify-items: flex-end;\n    align-items: flex-end;\n    justify-content: flex-end;\n    display: flex;\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  :host(.sm-expanded) .bottom-side-nav .menu-expand-button {\n    height: 100%;\n  }\n\n  .bottom-side-nav .menu-expand-button svg {\n    justify-items: flex-start;\n    align-self: center;\n    display: inline-block;\n    width: var(--ic-space-lg);\n    height: var(--ic-space-lg);\n  }\n\n  .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    align-self: flex-end;\n    margin-bottom: 0.875rem;\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: 0.25rem;\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: 1rem;\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 app-title - Handle routing by nesting a route in the app title.\n * @slot primary-navigation - Content will be rendered at the top of the side navigation.\n * @slot secondary-navigation - Content will be rendered at the bottom of the side navigation.\n */\n\n@Component({\n  tag: \"ic-side-navigation\",\n  styleUrl: \"ic-side-navigation.css\",\n  shadow: true,\n})\nexport class SideNavigation {\n  private ANIMATION_DURATION =\n    parseInt(getCssProperty(\"--ic-transition-duration-slow\")) || 0;\n  private IC_NAVIGATION_ITEM: string = \"ic-navigation-item\";\n  private resizeObserver: ResizeObserver = null;\n  private COLLAPSED_ICON_LABELS_END = \"collapsed-icon-labels-end\";\n  private COLLAPSED_ICON_LABELS_START = \"collapsed-icon-labels-start\";\n\n  @Element() el: HTMLIcSideNavigationElement;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() deviceSizeAppTitle = DEVICE_SIZES.S;\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n  @State() hasSecondaryNavigation: boolean = false;\n  @State() menuExpanded: boolean = false;\n  @State() menuOpen: boolean = false;\n\n  /**\n   * The app title to be displayed. This is required, unless a slotted app title link is used.\n   */\n  @Prop() appTitle: string;\n\n  /**\n   * If `true`, the icon and label will appear when side navigation is collapsed.\n   */\n  @Prop() collapsedIconLabels: boolean = false;\n\n  /**\n   * If `true`, automatic parent wrapper styling will be disabled.\n   */\n  @Prop() disableAutoParentStyling: boolean = false;\n\n  /**\n   * If `true`, the side navigation will load in an expanded state.\n   */\n  @Prop() expanded: boolean = false;\n\n  /**\n   * The URL that the app title link points to.\n   */\n  @Prop() href: string = \"/\";\n\n  /**\n   * @internal If `true`, side navigation will be contained by its parent element.\n   */\n  @Prop() inline: boolean = false;\n\n  /**\n   * If `true`, the menu expand button will be removed (PLEASE NOTE: This takes effect on screen sizes 992px and above).\n   */\n  @Prop() static: boolean = false;\n\n  /**\n   * The status of the app to be displayed.\n   */\n  @Prop() status: string;\n\n  /**\n   * The version of the app to be displayed.\n   */\n  @Prop() version: string;\n\n  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.styleSlottedCollapsedIconLabel();\n    this.arrangeSlottedNavigationItem(this.menuExpanded);\n    this.displayTooltipWithExpandedLongLabel(this.menuExpanded);\n\n    this.setExpandedButtonHeight();\n\n    !isSlotUsed(this.el, \"app-title\") &&\n      onComponentRequiredPropUndefined(\n        [{ prop: this.appTitle, propName: \"app-title\" }],\n        \"Side Navigation\"\n      );\n  }\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n\n    this.el.removeEventListener(\"transitionend\", this.transitionEndHandler);\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(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.arrangeSlottedNavigationItem(this.menuOpen);\n\n    this.setToggleMenuFlyoutMenuVisibility(this.menuOpen);\n\n    this.emitSideNavigationExpanded({\n      sideNavExpanded: this.menuOpen,\n      sideNavMobile: true,\n    });\n  };\n\n  private setToggleMenuFlyoutMenuVisibility = (menuOpen: boolean) => {\n    const sideNav = this.el.shadowRoot.querySelector(\n      \"#side-navigation\"\n    ) as HTMLDivElement;\n    const sideNavInner = sideNav.querySelector(\n      \".side-navigation-inner\"\n    ) as HTMLElement;\n    const bottomWrapper = sideNav.querySelector(\n      \".bottom-wrapper\"\n    ) as HTMLElement;\n\n    const menuVisibilityVisible = \"menu-visibility-visible\";\n\n    if (menuOpen) {\n      bottomWrapper.classList.add(menuVisibilityVisible);\n      sideNavInner.classList.add(menuVisibilityVisible);\n    } else {\n      setTimeout(() => {\n        sideNavInner.classList.remove(menuVisibilityVisible);\n        bottomWrapper.classList.remove(menuVisibilityVisible);\n      }, this.ANIMATION_DURATION);\n    }\n  };\n\n  private setMobileMenuAriaAttributes = (menuOpen: boolean) => {\n    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.setExpandedButtonHeight();\n    this.emitSideNavigationExpanded({ sideNavExpanded: this.menuExpanded });\n  };\n\n  /**\n   * In order to style nested slotted elements (e.g. using React Router components), this method\n   * rearranges the a tag and labels and adds inline styling expand/collaped animations as external CSS classes are not\n   * do not take affect.\n   * @param menuExpanded boolean - true or false depending on side navigation state\n   */\n  private arrangeSlottedNavigationItem = (menuExpanded?: boolean) => {\n    const navItems = this.el.querySelectorAll(\"ic-navigation-item\");\n\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 setExpandedButtonHeight = () => {\n    const appStatusWrapper = this.el.shadowRoot.querySelector(\n      \"#side-navigation > .bottom-wrapper > .bottom-side-nav > .app-status-wrapper\"\n    ) as HTMLDivElement;\n\n    if (appStatusWrapper.offsetHeight !== 0) {\n      this.el.style.setProperty(\n        \"--sm-side-navigation-bottom-bar-height\",\n        `${appStatusWrapper.offsetHeight}px`\n      );\n    }\n  };\n\n  private styleSlottedIconLabels = (\n    menuExpanded: boolean,\n    icTypography: HTMLSpanElement\n  ) => {\n    if (menuExpanded) {\n      icTypography.style.opacity = \"1\";\n      icTypography.style.visibility = \"visible\";\n      icTypography.style.transition =\n        \"visibility 0s, opacity var(--ic-easing-transition-slow)\";\n    } else {\n      icTypography.style.opacity = \"0\";\n      icTypography.style.visibility = \"hidden\";\n      icTypography.style.transition =\n        \"visibility 0s, opacity var(--ic-easing-transition-slow)\";\n    }\n  };\n\n  private transitionEndHandler = () => {\n    const primaryNavigationWrapper = this.el.shadowRoot.querySelector(\n      \".primary-navigation\"\n    );\n\n    const secondaryNavigationWrapper = this.el.shadowRoot.querySelector(\n      \".bottom-wrapper > .secondary-navigation\"\n    );\n\n    if (primaryNavigationWrapper) {\n      primaryNavigationWrapper.classList.remove(this.COLLAPSED_ICON_LABELS_END);\n      primaryNavigationWrapper.classList.add(this.COLLAPSED_ICON_LABELS_START);\n    }\n\n    if (secondaryNavigationWrapper) {\n      secondaryNavigationWrapper.classList.remove(\n        this.COLLAPSED_ICON_LABELS_END\n      );\n      secondaryNavigationWrapper.classList.add(\n        this.COLLAPSED_ICON_LABELS_START\n      );\n    }\n  };\n\n  private animateCollapsedIconLabels = () => {\n    this.transitionEndHandler();\n\n    this.el.addEventListener(\"transitionend\", this.transitionEndHandler);\n  };\n\n  private paddingIconWidth = (\n    navItems: HTMLIcNavigationItemElement[]\n  ): number => {\n    const navItemLink =\n      (navItems[0].shadowRoot &&\n        navItems[0].shadowRoot.querySelector(\"ic-tooltip a\")) ||\n      navItems[0].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(this.IC_NAVIGATION_ITEM)\n        );\n\n        const paddingIconDelta = navigationItems.length\n          ? this.paddingIconWidth(navigationItems)\n          : 0;\n\n        navigationItems.forEach(\n          (navigationItem: HTMLIcNavigationItemElement) => {\n            const icTypographyScrollWidth =\n              (\n                navigationItem.shadowRoot &&\n                navigationItem.shadowRoot.querySelector(\n                  \"ic-tooltip .link ic-typography.ic-typography-label\"\n                )\n              )?.scrollWidth ||\n              navigationItem.querySelector(\"ic-typography.ic-typography-label\")\n                ?.scrollWidth;\n\n            if (icTypographyScrollWidth > sideNavWidth - paddingIconDelta) {\n              navigationItem.setAttribute(\"display-navigation-tooltip\", \"true\");\n            }\n          }\n        );\n      }, this.ANIMATION_DURATION);\n    } else {\n      clearTimeout(timer);\n\n      const navigationItems: HTMLIcNavigationItemElement[] = Array.from(\n        this.el.querySelectorAll(this.IC_NAVIGATION_ITEM)\n      );\n      navigationItems.forEach((navigationItem: HTMLIcNavigationItemElement) => {\n        navigationItem.setAttribute(\"display-navigation-tooltip\", \"false\");\n      });\n    }\n  };\n\n  private setMenuExpanded = (expanded: boolean): void => {\n    this.menuExpanded = expanded;\n  };\n\n  /**\n   * As the mobile top bar is fixed, a padding top is required\n   * to push main content down the height of the mobile top bar\n   * @param value - padding-top css value\n   */\n  private setParentPaddingTop = (value: string) => {\n    this.el.parentElement.style.setProperty(\"padding-top\", value);\n  };\n\n  private setParentPaddingLeft = (value: string) => {\n    this.el.parentElement.style.setProperty(\"padding-left\", value);\n  };\n\n  private resizeObserverCallback = (currSize: number) => {\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    let paddingLeft;\n\n    if (this.collapsedIconLabels) {\n      paddingLeft = \"calc(var(--ic-space-xxl) * 2)\";\n    } else {\n      paddingLeft = \"calc(var(--ic-space-xxl) + var(--ic-space-xs))\";\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.M &&\n      this.static &&\n      !this.disableAutoParentStyling\n    ) {\n      this.setParentPaddingLeft(paddingLeft);\n    } else if (\n      currSize > DEVICE_SIZES.S &&\n      currSize <= DEVICE_SIZES.L &&\n      !this.disableAutoParentStyling\n    ) {\n      if (this.static) {\n        this.setParentPaddingLeft(\"calc(var(--ic-space-xl) * 10)\");\n      } else {\n        this.setParentPaddingLeft(paddingLeft);\n      }\n    }\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      const currSize = getCurrentDeviceSize();\n      this.deviceSizeAppTitle = currSize;\n      this.resizeObserverCallback(currSize);\n    });\n\n    this.resizeObserver.observe(document.body, { box: \"content-box\" });\n  };\n\n  private setCollapsedIconLabels = () => {\n    const navigationItems: HTMLIcNavigationItemElement[] = Array.from(\n      this.el.querySelectorAll(this.IC_NAVIGATION_ITEM)\n    );\n    navigationItems.forEach((navigationItem: HTMLIcNavigationItemElement) => {\n      navigationItem.setAttribute(\"collapsed-icon-label\", \"true\");\n    });\n  };\n\n  private styleSlottedCollapsedIconLabel = () => {\n    const dynamicSlottedIcTypographyComps: HTMLIcTypographyElement[] =\n      Array.from(\n        this.el.querySelectorAll(\".navigation-item-side-nav-slotted-text\")\n      );\n\n    dynamicSlottedIcTypographyComps.forEach((icTypography) => {\n      if (\n        icTypography?.parentElement?.parentElement?.classList.contains(\n          \"navigation-item-side-nav-collapsed-with-label\"\n        )\n      ) {\n        icTypography.style.whiteSpace = \"nowrap\";\n        icTypography.style.overflow = \"hidden\";\n        icTypography.style.textOverflow = \"ellipsis\";\n        icTypography.style.marginTop = \"10px\";\n      }\n    });\n  };\n\n  private renderTopBar = ({\n    isSDevice,\n    foregroundColor,\n    menuOpen,\n    href,\n    isAppNameSubtitleVariant,\n    appTitle,\n  }: IcTopBar) => {\n    const hasTitle = this.appTitle !== \"\" && this.appTitle !== undefined;\n\n    const Component = isSlotUsed(this.el, \"app-title\") ? \"div\" : \"a\";\n\n    const attrs = Component == \"a\" && {\n      href: href,\n    };\n\n    return (\n      <div\n        class={{\n          \"top-bar\": true,\n          [this.foregroundColor]: true,\n        }}\n      >\n        {isSDevice && (\n          <nav\n            aria-labelledby=\"menu-navigation-toggle-button-landmark\"\n            aria-hidden=\"false\"\n          >\n            <ic-button\n              aria-label=\"Open navigation menu\"\n              class=\"menu-button\"\n              id=\"menu-button\"\n              variant=\"secondary\"\n              size=\"small\"\n              full-width=\"true\"\n              appearance={foregroundColor}\n              onClick={this.toggleMenu}\n              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          {(hasTitle || isSlotUsed(this.el, \"app-title\")) && (\n            <Component {...attrs} class=\"title-link\">\n              <div class=\"app-icon-container\" aria-hidden=\"true\">\n                <slot name=\"app-icon\"></slot>\n              </div>\n              <ic-typography\n                variant={isAppNameSubtitleVariant ? \"subtitle-small\" : \"h3\"}\n              >\n                {isSlotUsed(this.el, \"app-title\") ? (\n                  <slot name=\"app-title\"></slot>\n                ) : (\n                  appTitle\n                )}\n              </ic-typography>\n            </Component>\n          )}\n        </div>\n      </div>\n    );\n  };\n\n  render() {\n    const {\n      appTitle,\n      menuOpen,\n      foregroundColor,\n      menuExpanded,\n      href,\n      status,\n      version,\n      collapsedIconLabels,\n      inline,\n    } = this;\n\n    const isSDevice = 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          [\"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}
+{"file":"ic-side-navigation.entry.cjs.js","mappings":"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","names":["getCssProperty","isSlotUsed","DEVICE_SIZES","getCurrentDeviceSize","h","closeIcon","getThemeForegroundColor","checkResizeObserver","onComponentRequiredPropUndefined","Host","IcThemeForegroundEnum","hasClassificationBanner","chevronIcon"],"sources":["./src/components/ic-side-navigation/ic-side-navigation.css?tag=ic-side-navigation&encapsulation=shadow","./src/components/ic-side-navigation/ic-side-navigation.tsx"],"sourcesContent":["/**\n * @prop --ic-z-index-side-navigation: z-index of side navigation panel\n */\n\n:host {\n  display: block;\n\n  --side-navigation-position: fixed;\n  --side-navigation-position-left: 0;\n  --side-navigation-position-top: var(--ic-space-xxl);\n  --side-navigation-height: var(--ic-space-xxl);\n  --sm-side-navigation-top-bar-height: 3.5rem;\n  --sm-side-navigation-collapsed-labels-width: 6rem;\n  --sm-side-navigation-expand-transition-duration: var(\n    --ic-transition-duration-slow\n  );\n  --side-navigation-width: 20rem;\n  --sm-side-navigation-bottom-bar-height: 3.5rem;\n\n  z-index: var(--ic-z-index-side-navigation);\n}\n\n:host > * {\n  box-sizing: border-box;\n}\n\n.side-navigation {\n  display: flex;\n  flex-direction: column;\n  width: var(--side-navigation-width);\n  color: var(--ic-theme-text);\n  position: var(--side-navigation-position);\n  top: var(--side-navigation-position-top);\n  left: calc(var(--side-navigation-width) * -1);\n  bottom: 0;\n  background-color: var(--ic-theme-primary);\n  z-index: var(--ic-z-index-side-navigation);\n}\n\n:host(.inline) .side-navigation {\n  position: absolute;\n  height: 100%;\n}\n\n:host(.anchor-right) .side-navigation {\n  right: calc(var(--side-navigation-width) * -1);\n}\n\n.classification-spacing {\n  margin-bottom: var(--ic-space-lg);\n}\n\n.navigation-list {\n  padding: 0;\n  margin: 0;\n  list-style: none;\n}\n\n.side-navigation-inner {\n  background-color: var(--ic-theme-primary);\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 0;\n  overflow: auto;\n}\n\n:host(.inline) .side-navigation-inner {\n  flex: 1;\n}\n\n:host(.xs-menu-open) .side-navigation {\n  transition: left var(--ic-easing-transition-slow);\n  left: 0;\n}\n\n:host(.xs-menu-close) .side-navigation {\n  left: calc(var(--side-navigation-width) * -1);\n  transition: left var(--ic-easing-transition-slow);\n}\n\n:host(.xs-menu-close) .side-navigation > * {\n  visibility: hidden;\n}\n\n:host(.anchor-right.xs-menu-open) .side-navigation {\n  right: 0;\n  left: auto;\n}\n\n:host(.anchor-right.xs-menu-close) .side-navigation {\n  right: calc(var(--side-navigation-width) * -1);\n  left: auto;\n  transition: right var(--ic-easing-transition-slow);\n}\n\n.bottom-wrapper {\n  border-top: var(--ic-keyline-lighten);\n  bottom: 0;\n  left: 0;\n  z-index: 2;\n  box-shadow: -0.188rem -0.188rem 0.5rem rgb(0 0 0 / 20%);\n  background-color: var(--ic-theme-primary);\n  display: flex;\n  flex-direction: column;\n}\n\n:host(.inline) .bottom-wrapper {\n  position: sticky;\n}\n\n:host(.dark) .bottom-wrapper {\n  border-top: var(--ic-keyline-darken);\n}\n\n/* Mobile Top Bar */\n\n.top-bar {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  min-height: var(--side-navigation-height);\n  padding: var(--ic-space-xs);\n  box-sizing: border-box;\n  background-color: var(--ic-theme-primary);\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  border-bottom: var(--ic-keyline-darken);\n  box-shadow: var(--ic-elevation-overlay);\n  z-index: 2;\n  overflow: hidden;\n  visibility: visible;\n}\n\n:host(.inline) .top-bar {\n  position: absolute;\n}\n\n.top-bar.dark a:focus {\n  box-shadow: var(--ic-border-focus);\n}\n\n.top-bar.light {\n  border-bottom: var(--ic-keyline-lighten);\n}\n\n.app-title-wrapper {\n  display: flex;\n  margin-left: var(--ic-space-xs);\n  border-left: var(--ic-keyline-darken);\n  padding-left: var(--ic-space-xxs);\n  color: var(--ic-theme-text);\n  align-items: center;\n}\n\n@media screen and (min-width: 340px) {\n  .app-title-wrapper ic-typography {\n    margin-left: var(--ic-space-xs);\n  }\n}\n\n:host .title-link {\n  display: flex;\n  align-items: center;\n  transition: box-shadow var(--ic-easing-transition-fast),\n    background-color var(--ic-easing-transition-fast);\n  text-decoration: none;\n  padding: var(--ic-space-xxs);\n  color: var(--ic-theme-text);\n}\n\n:host .title-link:visited,\n:host .title-link:active {\n  color: var(--ic-theme-text);\n}\n\nslot[name=\"app-title\"]::slotted(a),\nslot[name=\"app-icon\"]::slotted(a) {\n  color: var(--ic-theme-text);\n  outline: none;\n  text-decoration: none;\n}\n\n:host .title-link:hover {\n  border-radius: var(--ic-border-radius);\n  background-color: var(--ic-theme-hover);\n}\n\n:host .title-link:active {\n  background-color: var(--ic-theme-active);\n}\n\n:host .title-link:focus,\n:host .title-link:focus-within {\n  border-radius: var(--ic-border-radius);\n  box-shadow: var(--ic-border-focus);\n  outline: var(--ic-hc-focus-outline);\n  background-color: transparent;\n}\n\n:host .title-link ic-typography {\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n.app-title-wrapper ::slotted(svg) {\n  fill: var(--ic-theme-text);\n}\n\n.app-icon-container {\n  display: none;\n}\n\n.button-label {\n  display: flex;\n  align-items: center;\n}\n\n.mobile-top-bar-menu-icon {\n  display: flex;\n}\n\n.menu-button {\n  width: 6.5rem;\n}\n\n.app-status-wrapper {\n  inset: 0 var(--ic-space-sm) 0 3.5rem;\n  width: auto;\n  display: flex;\n  gap: var(--ic-space-xs);\n  padding: var(--ic-space-sm) 0;\n  justify-content: flex-end;\n  align-items: flex-end;\n  pointer-events: none;\n  height: fit-content;\n  margin: 0 var(--ic-space-xs);\n}\n\n.app-status-wrapper .app-version {\n  display: flex;\n  overflow-wrap: break-word;\n  padding-bottom: var(--ic-space-xxs);\n}\n\n.app-status-wrapper .app-status {\n  display: flex;\n  border-radius: 1rem;\n  background-color: var(--ic-theme-text);\n  color: var(--ic-color-primary-text);\n  padding: var(--ic-space-xxs) var(--ic-space-lg);\n  min-width: 1rem;\n}\n\n.app-status-wrapper .app-status-text {\n  overflow-wrap: break-word;\n}\n\n:host(.dark) .app-status-wrapper .app-status {\n  color: var(--ic-color-white-text);\n}\n\n.navigation-landmark-title {\n  position: absolute;\n  width: var(--ic-space-1px);\n  height: var(--ic-space-1px);\n  padding: 0;\n  margin: calc(-1 * var(--ic-space-1px));\n  overflow: hidden;\n}\n\n/* Navigation Group */\n\n::slotted(ic-navigation-group) {\n  --navigation-group-height: 2.75rem;\n  --navigation-group-width: 100%;\n  --navigation-group-justify-content: space-between;\n  --navigation-group-hover: var(--ic-theme-hover);\n  --navigation-group-text-hover: var(--ic-theme-text);\n  --navigation-item-child-height: 3.5rem;\n  --navigation-item-child-active: var(--ic-action-dark-bg-active);\n  --navigation-item-child-color: var(--ic-theme-text);\n  --navigation-group-expand-toggle-padding: 0.25rem;\n}\n\n/* Navigation Items */\n\n::slotted(ic-navigation-item),\n::slotted(ic-navigation-group) {\n  --navigation-item-height: 3.5rem;\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  min-height: var(--sm-side-navigation-top-bar-height);\n}\n\n.bottom-side-nav ic-divider {\n  position: absolute;\n  top: 0;\n  width: 100%;\n}\n\n.primary-navigation {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n\n  /* Hide scrollbar when required but keep functionality */\n  scrollbar-width: none;\n}\n\n.primary-navigation::-webkit-scrollbar {\n  display: none;\n}\n\n.primary-navigation,\n.secondary-navigation {\n  overflow-x: hidden;\n}\n\n.bottom-side-nav .menu-expand-button {\n  position: absolute;\n  display: none;\n}\n\n.menu-visibility-visible {\n  visibility: visible;\n  width: 100%;\n}\n\n/* 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  .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: -0.188rem 0.188rem 0.5rem 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: 0.188rem 0.188rem 0.5rem rgb(0 0 0 / 20%);\n  }\n\n  :host(.anchor-right) .bottom-wrapper {\n    box-shadow: 0.188rem -0.188rem 0.5rem 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  .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 * 0.281rem) 0 calc(-1 * 0.281rem) 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    margin-left: 0;\n  }\n\n  :host(.sm-expanded) .app-status-wrapper {\n    display: flex;\n    max-width: 16rem;\n    margin-right: calc(var(--ic-space-xxxs) + var(--ic-space-xs));\n  }\n\n  .bottom-side-nav {\n    justify-items: flex-end;\n    align-items: flex-end;\n    justify-content: flex-end;\n    display: flex;\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  :host(.sm-expanded) .bottom-side-nav .menu-expand-button {\n    height: 100%;\n  }\n\n  .bottom-side-nav .menu-expand-button svg {\n    justify-items: flex-start;\n    align-self: center;\n    display: inline-block;\n    width: var(--ic-space-lg);\n    height: var(--ic-space-lg);\n  }\n\n  .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    align-self: flex-end;\n    margin-bottom: 0.875rem;\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: 0.25rem;\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: 1rem;\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 app-title - Handle routing by nesting a route in the app title.\n * @slot primary-navigation - Content will be rendered at the top of the side navigation.\n * @slot secondary-navigation - Content will be rendered at the bottom of the side navigation.\n */\n\n@Component({\n  tag: \"ic-side-navigation\",\n  styleUrl: \"ic-side-navigation.css\",\n  shadow: true,\n})\nexport class SideNavigation {\n  private ANIMATION_DURATION =\n    parseInt(getCssProperty(\"--ic-transition-duration-slow\")) || 0;\n  private IC_NAVIGATION_ITEM: string = \"ic-navigation-item\";\n  private resizeObserver: ResizeObserver = null;\n  private COLLAPSED_ICON_LABELS_END = \"collapsed-icon-labels-end\";\n  private COLLAPSED_ICON_LABELS_START = \"collapsed-icon-labels-start\";\n\n  @Element() el: HTMLIcSideNavigationElement;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() deviceSizeAppTitle = DEVICE_SIZES.S;\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n  @State() hasSecondaryNavigation: boolean = false;\n  @State() menuExpanded: boolean = false;\n  @State() menuOpen: boolean = false;\n\n  /**\n   * The app title to be displayed. This is required, unless a slotted app title link is used.\n   */\n  @Prop() appTitle: string;\n\n  /**\n   * If `true`, the icon and label will appear when side navigation is collapsed.\n   */\n  @Prop() collapsedIconLabels: boolean = false;\n\n  /**\n   * If `true`, automatic parent wrapper styling will be disabled.\n   */\n  @Prop() disableAutoParentStyling: boolean = false;\n\n  /**\n   * If `true`, the side navigation will load in an expanded state.\n   */\n  @Prop() expanded: boolean = false;\n\n  /**\n   * The URL that the app title link points to.\n   */\n  @Prop() href: string = \"/\";\n\n  /**\n   * @internal If `true`, side navigation will be contained by its parent element.\n   */\n  @Prop() inline: boolean = false;\n\n  /**\n   * If `true`, the menu expand button will be removed (PLEASE NOTE: This takes effect on screen sizes 992px and above).\n   */\n  @Prop() static: boolean = false;\n\n  /**\n   * The status of the app to be displayed.\n   */\n  @Prop() status: string;\n\n  /**\n   * The version of the app to be displayed.\n   */\n  @Prop() version: string;\n\n  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.styleSlottedCollapsedIconLabel();\n    this.arrangeSlottedNavigationItem(this.menuExpanded);\n    this.displayTooltipWithExpandedLongLabel(this.menuExpanded);\n\n    this.setExpandedButtonHeight();\n\n    !isSlotUsed(this.el, \"app-title\") &&\n      onComponentRequiredPropUndefined(\n        [{ prop: this.appTitle, propName: \"app-title\" }],\n        \"Side Navigation\"\n      );\n  }\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n\n    this.el.removeEventListener(\"transitionend\", this.transitionEndHandler);\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(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.arrangeSlottedNavigationItem(this.menuOpen);\n\n    this.setToggleMenuFlyoutMenuVisibility(this.menuOpen);\n\n    this.emitSideNavigationExpanded({\n      sideNavExpanded: this.menuOpen,\n      sideNavMobile: true,\n    });\n  };\n\n  private setToggleMenuFlyoutMenuVisibility = (menuOpen: boolean) => {\n    const sideNav = this.el.shadowRoot.querySelector(\n      \"#side-navigation\"\n    ) as HTMLDivElement;\n    const sideNavInner = sideNav.querySelector(\n      \".side-navigation-inner\"\n    ) as HTMLElement;\n    const bottomWrapper = sideNav.querySelector(\n      \".bottom-wrapper\"\n    ) as HTMLElement;\n\n    const menuVisibilityVisible = \"menu-visibility-visible\";\n\n    if (menuOpen) {\n      bottomWrapper.classList.add(menuVisibilityVisible);\n      sideNavInner.classList.add(menuVisibilityVisible);\n    } else {\n      setTimeout(() => {\n        sideNavInner.classList.remove(menuVisibilityVisible);\n        bottomWrapper.classList.remove(menuVisibilityVisible);\n      }, this.ANIMATION_DURATION);\n    }\n  };\n\n  private setMobileMenuAriaAttributes = (menuOpen: boolean) => {\n    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.setExpandedButtonHeight();\n    this.emitSideNavigationExpanded({ sideNavExpanded: this.menuExpanded });\n  };\n\n  /**\n   * In order to style nested slotted elements (e.g. using React Router components), this method\n   * rearranges the a tag and labels and adds inline styling expand/collaped animations as external CSS classes are not\n   * do not take affect.\n   * @param menuExpanded boolean - true or false depending on side navigation state\n   */\n  private arrangeSlottedNavigationItem = (menuExpanded?: boolean) => {\n    const navItems = this.el.querySelectorAll(\"ic-navigation-item\");\n\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.style.height = \"var(--ic-space-lg)\";\n        iconWrapper.append(icon);\n\n        navItemSlot.textContent = \"\";\n\n        icTypography.textContent = label;\n\n        navItemSlot.append(iconWrapper);\n        navItemSlot.append(icTypography);\n\n        if (this.collapsedIconLabels) {\n          this.styleSlottedCollapsedIconLabels(menuExpanded, icTypography);\n        } else {\n          this.styleSlottedIconLabels(menuExpanded, icTypography);\n        }\n      }\n    });\n  };\n\n  private styleSlottedCollapsedIconLabels = (\n    menuExpanded: boolean,\n    icTypography: HTMLIcTypographyElement\n  ) => {\n    if (menuExpanded) {\n      icTypography.style.marginTop = \"0\";\n      icTypography.style.whiteSpace = \"nowrap\";\n      icTypography.style.overflow = \"hidden\";\n      icTypography.style.textOverflow = \"ellipsis\";\n    } else {\n      icTypography.style.marginTop = \"10px\";\n      icTypography.style.whiteSpace = \"nowrap\";\n      icTypography.style.overflow = \"hidden\";\n      icTypography.style.textOverflow = \"ellipsis\";\n    }\n  };\n\n  private setExpandedButtonHeight = () => {\n    const appStatusWrapper = this.el.shadowRoot.querySelector(\n      \"#side-navigation > .bottom-wrapper > .bottom-side-nav > .app-status-wrapper\"\n    ) as HTMLDivElement;\n\n    if (appStatusWrapper.offsetHeight !== 0) {\n      this.el.style.setProperty(\n        \"--sm-side-navigation-bottom-bar-height\",\n        `${appStatusWrapper.offsetHeight}px`\n      );\n    }\n  };\n\n  private styleSlottedIconLabels = (\n    menuExpanded: boolean,\n    icTypography: HTMLSpanElement\n  ) => {\n    if (menuExpanded) {\n      icTypography.style.opacity = \"1\";\n      icTypography.style.visibility = \"visible\";\n      icTypography.style.transition =\n        \"visibility 0s, opacity var(--ic-easing-transition-slow)\";\n    } else {\n      icTypography.style.opacity = \"0\";\n      icTypography.style.visibility = \"hidden\";\n      icTypography.style.transition =\n        \"visibility 0s, opacity var(--ic-easing-transition-slow)\";\n    }\n  };\n\n  private transitionHandler = (type: string) => {\n    const primaryNavigationWrapper = this.el.shadowRoot.querySelector(\n      \".primary-navigation\"\n    );\n\n    const secondaryNavigationWrapper = this.el.shadowRoot.querySelector(\n      \".bottom-wrapper > .secondary-navigation\"\n    );\n\n    const classToRemove =\n      type === \"start\"\n        ? this.COLLAPSED_ICON_LABELS_END\n        : this.COLLAPSED_ICON_LABELS_START;\n\n    const classToAdd =\n      type === \"start\"\n        ? this.COLLAPSED_ICON_LABELS_START\n        : this.COLLAPSED_ICON_LABELS_END;\n\n    if (primaryNavigationWrapper) {\n      primaryNavigationWrapper.classList.remove(classToRemove);\n      primaryNavigationWrapper.classList.add(classToAdd);\n    }\n\n    if (secondaryNavigationWrapper) {\n      secondaryNavigationWrapper.classList.remove(classToRemove);\n      secondaryNavigationWrapper.classList.add(classToAdd);\n    }\n  };\n\n  private transitionEndHandler = () => {\n    this.transitionHandler(\"end\");\n  };\n\n  private animateCollapsedIconLabels = () => {\n    this.transitionHandler(\"start\");\n    this.transitionEndHandler();\n\n    this.el.addEventListener(\"transitionend\", this.transitionEndHandler);\n  };\n\n  private paddingIconWidth = (\n    navItems: HTMLIcNavigationItemElement[]\n  ): number => {\n    const navItemLink =\n      (navItems[0].shadowRoot &&\n        navItems[0].shadowRoot.querySelector(\"ic-tooltip a\")) ||\n      navItems[0].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(this.IC_NAVIGATION_ITEM)\n        );\n\n        const paddingIconDelta = navigationItems.length\n          ? this.paddingIconWidth(navigationItems)\n          : 0;\n\n        navigationItems.forEach(\n          (navigationItem: HTMLIcNavigationItemElement) => {\n            const icTypographyScrollWidth =\n              (\n                navigationItem.shadowRoot &&\n                navigationItem.shadowRoot.querySelector(\n                  \"ic-tooltip .link ic-typography.ic-typography-label\"\n                )\n              )?.scrollWidth ||\n              navigationItem.querySelector(\"ic-typography.ic-typography-label\")\n                ?.scrollWidth;\n\n            if (icTypographyScrollWidth > sideNavWidth - paddingIconDelta) {\n              navigationItem.setAttribute(\"display-navigation-tooltip\", \"true\");\n            }\n          }\n        );\n      }, this.ANIMATION_DURATION);\n    } else {\n      clearTimeout(timer);\n\n      const navigationItems: HTMLIcNavigationItemElement[] = Array.from(\n        this.el.querySelectorAll(this.IC_NAVIGATION_ITEM)\n      );\n      navigationItems.forEach((navigationItem: HTMLIcNavigationItemElement) => {\n        navigationItem.setAttribute(\"display-navigation-tooltip\", \"false\");\n      });\n    }\n  };\n\n  private setMenuExpanded = (expanded: boolean): void => {\n    this.menuExpanded = expanded;\n  };\n\n  /**\n   * As the mobile top bar is fixed, a padding top is required\n   * to push main content down the height of the mobile top bar\n   * @param value - padding-top css value\n   */\n  private setParentPaddingTop = (value: string) => {\n    this.el.parentElement.style.setProperty(\"padding-top\", value);\n  };\n\n  private setParentPaddingLeft = (value: string) => {\n    this.el.parentElement.style.setProperty(\"padding-left\", value);\n  };\n\n  private resizeObserverCallback = (currSize: number) => {\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    let paddingLeft;\n\n    if (this.collapsedIconLabels) {\n      paddingLeft = \"calc(var(--ic-space-xxl) * 2)\";\n    } else {\n      paddingLeft = \"calc(var(--ic-space-xxl) + var(--ic-space-xs))\";\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.M &&\n      this.static &&\n      !this.disableAutoParentStyling\n    ) {\n      this.setParentPaddingLeft(paddingLeft);\n    } else if (\n      currSize > DEVICE_SIZES.S &&\n      currSize <= DEVICE_SIZES.L &&\n      !this.disableAutoParentStyling\n    ) {\n      if (this.static && this.menuExpanded) {\n        this.setParentPaddingLeft(\"calc(var(--ic-space-xl) * 10)\");\n      } else {\n        this.setParentPaddingLeft(paddingLeft);\n      }\n    }\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      const currSize = getCurrentDeviceSize();\n      this.deviceSizeAppTitle = currSize;\n      this.resizeObserverCallback(currSize);\n    });\n\n    this.resizeObserver.observe(document.body, { box: \"content-box\" });\n  };\n\n  private setCollapsedIconLabels = () => {\n    const navigationItems: HTMLIcNavigationItemElement[] = Array.from(\n      this.el.querySelectorAll(this.IC_NAVIGATION_ITEM)\n    );\n    navigationItems.forEach((navigationItem: HTMLIcNavigationItemElement) => {\n      navigationItem.setAttribute(\"collapsed-icon-label\", \"true\");\n    });\n  };\n\n  private styleSlottedCollapsedIconLabel = () => {\n    const dynamicSlottedIcTypographyComps: HTMLIcTypographyElement[] =\n      Array.from(\n        this.el.querySelectorAll(\".navigation-item-side-nav-slotted-text\")\n      );\n\n    dynamicSlottedIcTypographyComps.forEach((icTypography) => {\n      if (\n        icTypography?.parentElement?.parentElement?.classList.contains(\n          \"navigation-item-side-nav-collapsed-with-label\"\n        )\n      ) {\n        icTypography.style.whiteSpace = \"nowrap\";\n        icTypography.style.overflow = \"hidden\";\n        icTypography.style.textOverflow = \"ellipsis\";\n        icTypography.style.marginTop = \"10px\";\n      }\n    });\n  };\n\n  private renderTopBar = ({\n    isSDevice,\n    foregroundColor,\n    menuOpen,\n    href,\n    isAppNameSubtitleVariant,\n    appTitle,\n  }: IcTopBar) => {\n    const hasTitle = this.appTitle !== \"\" && this.appTitle !== undefined;\n\n    const Component = isSlotUsed(this.el, \"app-title\") ? \"div\" : \"a\";\n\n    const attrs = Component == \"a\" && {\n      href: href,\n    };\n\n    return (\n      <div\n        class={{\n          \"top-bar\": true,\n          [this.foregroundColor]: true,\n        }}\n      >\n        {isSDevice && (\n          <nav\n            aria-labelledby=\"menu-navigation-toggle-button-landmark\"\n            aria-hidden=\"false\"\n          >\n            <ic-button\n              aria-label=\"Open navigation menu\"\n              class=\"menu-button\"\n              id=\"menu-button\"\n              variant=\"secondary\"\n              size=\"small\"\n              full-width=\"true\"\n              appearance={foregroundColor}\n              onClick={this.toggleMenu}\n              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          {(hasTitle || isSlotUsed(this.el, \"app-title\")) && (\n            <Component {...attrs} class=\"title-link\">\n              <div class=\"app-icon-container\" aria-hidden=\"true\">\n                <slot name=\"app-icon\"></slot>\n              </div>\n              <ic-typography\n                variant={isAppNameSubtitleVariant ? \"subtitle-small\" : \"h3\"}\n              >\n                {isSlotUsed(this.el, \"app-title\") ? (\n                  <slot name=\"app-title\"></slot>\n                ) : (\n                  appTitle\n                )}\n              </ic-typography>\n            </Component>\n          )}\n        </div>\n      </div>\n    );\n  };\n\n  render() {\n    const {\n      appTitle,\n      menuOpen,\n      foregroundColor,\n      menuExpanded,\n      href,\n      status,\n      version,\n      collapsedIconLabels,\n      inline,\n    } = this;\n\n    const isSDevice = 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          [\"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}

package/dist/cjs/ic-top-navigation.cjs.entry.js

@@ -88,6 +88,7 @@ const TopNavigation = class {
     this.contentAligned = "full-width";
     this.href = "/";
     this.inline = false;
+    this.shortAppTitle = "";
     this.status = "";
     this.version = "";
     this.appTitle = undefined;
@@ -198,7 +199,8 @@ const TopNavigation = class {
     return (index.h(index.Host, { class: {
         ["fullwidth-searchbar"]: this.hasFullWidthSearchBar,
         [types.IcThemeForegroundEnum.Dark]: this.foregroundColor === types.IcThemeForegroundEnum.Dark,
-      } }, index.h("div", { class: "top-navigation" }, index.h("ic-section-container", { aligned: this.contentAligned, "full-height": true }, index.h("header", { role: "banner" }, index.h("div", { class: "top-panel-container" }, index.h("div", { class: "app-details-container" }, (hasTitle || helpers.isSlotUsed(this.el, "app-title")) && (index.h(Component, Object.assign({ class: "title-link" }, attrs), this.hasAppIcon && (index.h("div", { class: "app-icon-container", "aria-hidden": "true" }, index.h("slot", { name: "app-icon" }))), index.h("ic-typography", { variant: appTitleVariant }, index.h("h1", { class: "title-wrap" }, helpers.isSlotUsed(this.el, "app-title") ? (index.h("slot", { name: "app-title" })) : (this.appTitle))))), this.status !== "" && (index.h("div", { class: "app-status" }, index.h("ic-typography", { "aria-label": "app tag", variant: "label-uppercase", class: "app-status-text" }, this.status))), this.version !== "" && (index.h("div", { class: "app-version" }, index.h("ic-typography", { variant: "label", class: "app-version-text", "aria-label": "app version" }, this.version)))), (this.hasSearchSlotContent || hasMenuContent) && (index.h("div", { class: "search-menu-container" }, index.h("div", { class: "search-actions-container" }, this.deviceSize > helpers.DEVICE_SIZES.L && (index.h("slot", { name: "search" })), this.hasSearchSlotContent &&
+      } }, index.h("div", { class: "top-navigation" }, index.h("ic-section-container", { aligned: this.contentAligned, "full-height": true }, index.h("header", { role: "banner" }, index.h("div", { class: "top-panel-container" }, index.h("div", { class: "app-details-container" }, (hasTitle || helpers.isSlotUsed(this.el, "app-title")) && (index.h(Component, Object.assign({ class: "title-link" }, attrs), this.hasAppIcon && (index.h("div", { class: "app-icon-container", "aria-hidden": "true" }, index.h("slot", { name: "app-icon" }))), this.deviceSize <= helpers.DEVICE_SIZES.S &&
+      !helpers.isEmptyString(this.shortAppTitle) ? (index.h("ic-typography", { variant: "subtitle-small", "aria-label": `${this.appTitle} (${this.shortAppTitle})` }, index.h("h1", null, this.shortAppTitle))) : (index.h("ic-typography", { variant: appTitleVariant }, index.h("h1", { class: "title-wrap" }, helpers.isSlotUsed(this.el, "app-title") ? (index.h("slot", { name: "app-title" })) : (this.appTitle)))))), this.status !== "" && (index.h("div", { class: "app-status" }, index.h("ic-typography", { "aria-label": "app tag", variant: "label-uppercase", class: "app-status-text" }, this.status))), this.version !== "" && (index.h("div", { class: "app-version" }, index.h("ic-typography", { variant: "label", class: "app-version-text", "aria-label": "app version" }, this.version)))), (this.hasSearchSlotContent || hasMenuContent) && (index.h("div", { class: "search-menu-container" }, index.h("div", { class: "search-actions-container" }, this.deviceSize > helpers.DEVICE_SIZES.L && (index.h("slot", { name: "search" })), this.hasSearchSlotContent &&
       this.deviceSize <= helpers.DEVICE_SIZES.L && (index.h("ic-button", { id: "search-toggle-button", ref: (el) => (this.mobileSearchButtonEl = el), onMouseDown: this.searchButtonMouseDownHandler, variant: "icon", size: searchButtonSize, "aria-label": mobileSearchButtonTitle, appearance: this.foregroundColor, onClick: this.searchButtonClickHandler }, index.h("slot", { name: "toggle-icon", slot: "icon" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#ffffff" }, index.h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), index.h("path", { d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" }))))), this.hasIconButtons && this.deviceSize > helpers.DEVICE_SIZES.L && (index.h("div", { class: "icon-buttons-container" }, index.h("slot", { name: "buttons" }))), hasMenuContent && this.deviceSize <= helpers.DEVICE_SIZES.L && (index.h("div", { class: "menu-button-container" }, index.h("span", { id: "navigation-landmark-button-text", class: "navigation-landmark-button-text", "aria-hidden": "true" }, "Main navigation button"), index.h("nav", { "aria-labelledby": "navigation-landmark-button-text", "aria-hidden": this.navMenuVisible ? "true" : "false" }, index.h("ic-button", { id: "menu-button", appearance: this.foregroundColor, variant: "secondary", "aria-expanded": this.menuOpen ? "true" : "false", "aria-haspopup": "true", "aria-label": `Open ${this.hasNavigation ? "navigation" : "app"} menu`, size: menuSize, onClick: this.menuButtonClick }, "Menu", index.h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#ffffff", slot: "icon" }, index.h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), index.h("path", { d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" })))))))))), this.mobileSearchBarVisible && (index.h("div", { class: "search-bar-container" }, index.h("slot", { name: "search" }))), this.hasNavigation && this.deviceSize > helpers.DEVICE_SIZES.L && (index.h("div", { class: "navigation-tabs" }, index.h("span", { id: "navigation-landmark-text", class: "navigation-landmark-text", "aria-hidden": "true" }, "Main navigation"), index.h("nav", { "aria-labelledby": "navigation-landmark-text", class: "nav-panel-container" }, index.h("ic-horizontal-scroll", { appearance: this.foregroundColor }, index.h("ul", { class: "navigation-item-list", tabindex: "-1" }, index.h("slot", { name: "navigation" }))))))))), this.navMenuVisible && (index.h("ic-navigation-menu", { version: this.version, status: this.status, class: {
         ["inline"]: this.inline,
       } }, index.h("div", { class: "menu-buttons-slot", slot: "buttons" }, index.h("slot", { name: "buttons" })), index.h("ul", { slot: "navigation" }, index.h("slot", { name: "navigation" }))))));

package/dist/cjs/ic-top-navigation.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ic-top-navigation.entry.cjs.js","mappings":"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","names":["getSlot","DEVICE_SIZES","getCurrentDeviceSize","getThemeForegroundColor","onComponentPropUndefinedChange","isSlotUsed","checkResizeObserver","onComponentRequiredPropUndefined","h","Host","IcThemeForegroundEnum"],"sources":["./src/components/ic-top-navigation/ic-top-navigation.css?tag=ic-top-navigation&encapsulation=shadow","./src/components/ic-top-navigation/ic-top-navigation.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: block;\n  color: var(--ic-theme-text);\n  width: 100%;\n  position: relative;\n}\n\n:host .top-navigation {\n  background-color: var(--ic-theme-primary);\n  height: max-content;\n}\n\n:host(.fullwidth-searchbar) slot[name=\"search\"]::slotted(form) {\n  width: 100%;\n}\n\n:host .title-link {\n  display: inline-flex;\n  align-items: center;\n  text-decoration: none;\n  padding: var(--ic-space-xxs);\n  transition: var(--ic-easing-transition-fast);\n}\n\n:host .title-link,\n:host .title-link:visited,\n:host .title-link:active,\n:host .title-link ::slotted(a),\n:host .title-link:visited ::slotted(a),\n:host .title-link:active ::slotted(a) {\n  color: var(--ic-theme-text);\n  text-decoration: none;\n  outline: none;\n}\n\n:host .title-link:hover:not(:focus) {\n  background-color: var(--ic-theme-hover);\n}\n\n:host .title-link:active:not(:focus) {\n  background-color: var(--ic-theme-active);\n}\n\n:host .title-link:hover {\n  border-radius: var(--ic-border-radius);\n}\n\n:host .title-link:focus,\n:host .title-link:focus-within {\n  border-radius: var(--ic-border-radius);\n  box-shadow: var(--ic-border-focus);\n  outline: var(--ic-hc-focus-outline);\n}\n\n:host .title-link ic-typography {\n  font-weight: 600;\n}\n\n:host .nav-panel-container {\n  border-top: var(--ic-keyline-lighten);\n  padding: 0 var(--ic-space-lg);\n  margin-left: calc(-1 * var(--section-container-margin));\n  margin-right: calc(-1 * var(--section-container-margin));\n  display: flex;\n}\n\n:host(.dark) .nav-panel-container {\n  border-top: var(--ic-keyline-darken);\n}\n\n.top-panel-container {\n  display: flex;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n\n.navigation-tabs {\n  margin-top: calc(-1 * var(--ic-space-1px));\n}\n\n.app-details-container {\n  display: flex;\n  align-items: center;\n  flex: 1 1 auto;\n  margin-right: var(--ic-space-md);\n}\n\n.app-icon-container {\n  display: flex;\n  padding-right: var(--ic-space-xs);\n}\n\n.icon-buttons-container {\n  display: flex;\n  margin-left: var(--ic-space-md);\n}\n\n.icon-buttons-container ::slotted(nav) {\n  display: flex;\n}\n\n.title-wrap {\n  overflow-wrap: break-word;\n  word-wrap: break-word;\n  -ms-word-break: break-all;\n  word-break: break-word;\n  hyphens: auto;\n}\n\n:host .app-status {\n  border-radius: var(--ic-space-md);\n  background-color: var(--ic-architectural-white);\n  color: var(--ic-color-primary-text);\n  padding: var(--ic-space-xxs) var(--ic-space-lg);\n  margin-left: var(--ic-space-md);\n  flex: 1 1 0;\n  max-width: fit-content;\n}\n\n:host(.dark) .app-status {\n  background-color: var(--ic-theme-text);\n  color: var(--ic-color-white-text);\n}\n\n:host .app-version {\n  border-radius: var(--ic-space-md);\n  background-color: var(--ic-theme-active);\n  padding: var(--ic-space-xxs) var(--ic-space-sm);\n  margin-left: var(--ic-space-xs);\n  flex: 1 1 0;\n  max-width: fit-content;\n}\n\nslot[name=\"app-icon\"]::slotted(svg) {\n  fill: var(--ic-theme-text);\n  width: 2em;\n  height: 2em;\n}\n\nslot[name=\"toggle-icon\"] svg {\n  fill: var(--ic-theme-text);\n}\n\n.search-menu-container {\n  justify-content: right;\n  display: flex;\n  align-items: center;\n}\n\n.menu-button-container {\n  margin-left: var(--ic-space-md);\n}\n\n.menu-button-container .navigation-landmark-button-text {\n  position: absolute;\n  left: -10000px;\n  top: auto;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n}\n\n.search-actions-container {\n  display: flex;\n}\n\n.menu-buttons-slot {\n  display: flex;\n  flex-direction: column;\n}\n\n.navigation-landmark-text {\n  position: absolute;\n  width: var(--ic-space-1px);\n  height: var(--ic-space-1px);\n  padding: 0;\n  margin: calc(-1 * var(--ic-space-1px));\n  overflow: hidden;\n}\n\n.navigation-item-list {\n  display: flex;\n  list-style: none;\n  height: 2.75rem;\n}\n\n.navigation-item-list::-webkit-scrollbar {\n  display: none;\n}\n\n:host ic-section-container {\n  padding-bottom: 0 !important;\n  padding-top: 0 !important;\n}\n\n@media screen and (min-width: 993px) {\n  .app-details-container {\n    margin-right: var(--ic-space-lg);\n  }\n}\n\n/* large */\n@media screen and (max-width: 1200px) {\n  :host .nav-panel-container {\n    padding: 0 var(--ic-space-md);\n  }\n}\n\n/* medium */\n@media screen and (max-width: 992px) {\n  :host .nav-panel-container,\n  :host .app-status,\n  :host .app-version {\n    display: none;\n  }\n\n  :host .title-link {\n    margin-right: var(--ic-space-xs);\n  }\n\n  .search-menu-container {\n    max-width: 10rem;\n  }\n\n  .search-bar-container {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-top: var(--ic-keyline-darken);\n    height: 4rem;\n    padding-left: var(--ic-space-md);\n    padding-right: var(--ic-space-md);\n    margin-left: calc(-1 * var(--section-container-margin));\n    margin-right: calc(-1 * var(--section-container-margin));\n  }\n}\n\n/* x small */\n@media screen and (max-width: 576px) {\n  :host .title-link {\n    margin-right: var(--ic-space-xxxs);\n    word-break: break-word;\n    hyphens: none;\n  }\n\n  .top-panel-container {\n    min-height: 2.5rem;\n  }\n\n  .searchbox-inline {\n    display: none;\n  }\n\n  .search-bar-container {\n    margin-top: 0;\n    height: 3.5rem;\n    padding-left: var(--ic-space-xs);\n    padding-right: var(--ic-space-xs);\n  }\n\n  .menu-button-container {\n    margin-left: var(--ic-space-sm);\n  }\n\n  slot[name=\"app-icon\"]::slotted(svg) {\n    width: 1.5em;\n    height: 1.5em;\n  }\n\n  slot[name=\"toggle-icon\"] svg {\n    width: 1.5em;\n    height: 1.5em;\n  }\n}\n\n@media (forced-colors: active) {\n  :host .top-navigation {\n    border-bottom: var(--ic-hc-border);\n  }\n\n  .app-status,\n  .app-version {\n    border: var(--ic-hc-border);\n  }\n\n  slot[name=\"app-icon\"]::slotted(svg) {\n    fill: currentcolor;\n  }\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  State,\n  Listen,\n  Event,\n  EventEmitter,\n  Watch,\n} from \"@stencil/core\";\n\nimport {\n  IcTypographyVariants,\n  IcAlignment,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n  IcTheme,\n} from \"../../utils/types\";\nimport {\n  checkResizeObserver,\n  DEVICE_SIZES,\n  getCurrentDeviceSize,\n  getThemeForegroundColor,\n  getSlot,\n  onComponentPropUndefinedChange,\n  onComponentRequiredPropUndefined,\n  isSlotUsed,\n} from \"../../utils/helpers\";\n\n/**\n * @slot app-icon - Content will be rendered to left of app title.\n * @slot app-title - Handle routing by nesting a route in the app title.\n * @slot search - Content will be rendered in search area to left of buttons.\n * @slot toggle-icon - Icon to be displayed on the button to toggle search slot content on smaller devices\n * @slot navigation - Content will be rendered in navigation panel.\n * @slot buttons - Content will be rendered to right of search bar.\n */\n@Component({\n  tag: \"ic-top-navigation\",\n  styleUrl: \"ic-top-navigation.css\",\n  shadow: true,\n})\nexport class TopNavigation {\n  private hasAppIcon: boolean = false;\n  private hasIconButtons: boolean = false;\n  private hasNavigation: boolean = false;\n  private hasSearchSlotContent: boolean = false;\n  private mobileSearchButtonEl: HTMLIcButtonElement;\n  private resizeObserver: ResizeObserver = null;\n  private searchBar: HTMLIcSearchBarElement = null;\n\n  @Element() el: HTMLIcTopNavigationElement;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n  @State() hasFullWidthSearchBar: boolean = false;\n  @State() menuOpen: boolean = false;\n  @State() mobileSearchBarVisible: boolean = false;\n  @State() mobileSearchHiddenOnBlur: boolean = false;\n  @State() navMenuVisible: boolean = false;\n  @State() searchButtonClick: boolean = false;\n  @State() searchValue: string = \"\";\n\n  /**\n   * The alignment of the top navigation content.\n   */\n  @Prop() contentAligned: IcAlignment = \"full-width\";\n  /**\n   *  The URL to navigate to when the app title is clicked.\n   */\n  @Prop() href: string = \"/\";\n\n  /**\n   * If `true`, the flyout navigation menu on small devices will be contained by the parent element.\n   */\n  @Prop() inline: boolean = false;\n\n  /**\n   * The status info to be displayed.\n   */\n  @Prop() status: string = \"\";\n\n  /**\n   * The version info to be displayed.\n   */\n  @Prop() version: string = \"\";\n\n  /**\n   * The app title to be displayed. This is required, unless a slotted app title link is used.\n   */\n  @Prop() appTitle: string;\n  @Watch(\"appTitle\")\n  watchPropHandler(newValue: string, oldValue: string): void {\n    //added for gatsby rehydration issue where prop is initially undefined but then changes to actual value\n    //this watch can be removed once gatbsy hydration issue is resolved\n    onComponentPropUndefinedChange(\n      oldValue,\n      newValue,\n      this.initialiseSearchBar\n    );\n  }\n\n  /**\n   * @internal - Emitted when the menu is closed.\n   */\n  @Event() icNavigationMenuClosed: EventEmitter<void>;\n\n  /**\n   * @internal - Emitted when the menu is opened.\n   */\n  @Event() icNavigationMenuOpened: EventEmitter<void>;\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  componentWillLoad(): void {\n    this.hasAppIcon = isSlotUsed(this.el, \"app-icon\");\n    this.hasNavigation = isSlotUsed(this.el, \"navigation\");\n    this.hasIconButtons = isSlotUsed(this.el, \"buttons\");\n    this.hasSearchSlotContent = isSlotUsed(this.el, \"search\");\n    this.deviceSize = getCurrentDeviceSize();\n    this.initialiseSearchBar();\n  }\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\n    !isSlotUsed(this.el, \"app-title\") &&\n      onComponentRequiredPropUndefined(\n        [{ prop: this.appTitle, propName: \"app-title\" }],\n        \"Top Navigation\"\n      );\n  }\n\n  componentWillRender(): void {\n    this.hasNavigation = isSlotUsed(this.el, \"navigation\");\n    this.hasSearchSlotContent = isSlotUsed(this.el, \"search\");\n    this.hasIconButtons = isSlotUsed(this.el, \"buttons\");\n    this.hasAppIcon = isSlotUsed(this.el, \"app-icon\");\n  }\n\n  @Listen(\"icNavigationMenuClose\", {})\n  navBarMenuCloseHandler(): void {\n    this.showNavMenu(false);\n    const menuBtn = this.el.shadowRoot.querySelector(\n      \"#menu-button\"\n    ) as HTMLElement;\n    menuBtn.focus();\n  }\n\n  @Listen(\"icSearchBarBlur\", {})\n  searchInputBlurHandler(ev: CustomEvent): void {\n    if (ev.detail !== null) {\n      if (this.mobileSearchBarVisible && !this.searchButtonClick) {\n        //don't hide if blur was triggered by click on search button - let the click handler toggle the state\n        this.toggleSearchBar();\n      }\n      this.searchValue = ev.detail.value;\n    }\n  }\n\n  @Listen(\"icChange\", {})\n  searchValueChangeHandler(ev: CustomEvent): void {\n    this.searchValue = ev.detail.value;\n  }\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 initialiseSearchBar = () => {\n    if (this.hasSearchSlotContent) {\n      const slot = getSlot(this.el, \"search\");\n      if (slot && slot.tagName === \"IC-SEARCH-BAR\") {\n        this.searchBar = slot as HTMLIcSearchBarElement;\n      } else if (slot && slot.tagName === \"FORM\") {\n        this.searchBar = slot.querySelector(\n          \"ic-search-bar\"\n        ) as HTMLIcSearchBarElement;\n      }\n\n      if (this.searchBar !== null) {\n        this.searchBar.hideLabel = true;\n      }\n    }\n  };\n\n  private toggleSearchBar(): void {\n    this.mobileSearchBarVisible = !this.mobileSearchBarVisible;\n\n    if (this.searchBar !== null) {\n      if (this.mobileSearchBarVisible) {\n        this.mobileSearchButtonEl.updateAriaLabel(\"Hide search\");\n        this.hasFullWidthSearchBar = true;\n        this.searchBar.fullWidth = true;\n        setTimeout(() => {\n          this.searchBar.focus();\n        }, 100);\n      } else {\n        this.mobileSearchButtonEl.updateAriaLabel(\"Show search\");\n        this.hasFullWidthSearchBar = false;\n        this.searchBar.fullWidth = false;\n      }\n    }\n  }\n\n  private emitTopNavResized = (size: number): void => {\n    const event = new CustomEvent(\"topNavResized\", { detail: { size: size } });\n    this.el.dispatchEvent(event);\n  };\n\n  private menuButtonClick = () => {\n    this.showNavMenu(true);\n  };\n\n  private showNavMenu(show: boolean): void {\n    this.navMenuVisible = show;\n    if (show) {\n      this.icNavigationMenuOpened.emit();\n      document.body.style.height = \"100%\";\n      document.body.style.overflow = \"hidden\";\n    } else {\n      this.icNavigationMenuClosed.emit();\n      document.body.style.height = \"auto\";\n      document.body.style.overflow = \"auto\";\n    }\n  }\n\n  private searchButtonMouseDownHandler = () => {\n    this.searchButtonClick = true;\n  };\n\n  private searchButtonClickHandler = () => {\n    this.toggleSearchBar();\n    this.searchButtonClick = false;\n  };\n\n  private resizeObserverCallback = (currSize: number) => {\n    if (currSize !== this.deviceSize) {\n      this.deviceSize = currSize;\n      if (currSize > DEVICE_SIZES.L) {\n        this.showNavMenu(false);\n        if (this.mobileSearchBarVisible) {\n          this.toggleSearchBar();\n        }\n      }\n      this.emitTopNavResized(currSize);\n      if (\n        document.activeElement !== null &&\n        document.activeElement !== undefined &&\n        document.activeElement.tagName === \"IC-SEARCH-BAR\"\n      ) {\n        this.searchBar.setAttribute(\"hidden\", \"true\");\n        //remove attribute again as this trigger a redraw & applies css\n        this.searchBar.removeAttribute(\"hidden\");\n        setTimeout(() => {\n          this.searchBar.focus();\n        }, 100);\n      }\n    }\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      const currSize = getCurrentDeviceSize();\n      this.resizeObserverCallback(currSize);\n    });\n\n    this.resizeObserver.observe(this.el);\n  };\n\n  render() {\n    const hasMenuContent =\n      this.hasNavigation ||\n      this.hasIconButtons ||\n      this.status !== \"\" ||\n      this.version !== \"\";\n\n    const searchButtonSize =\n      this.deviceSize <= DEVICE_SIZES.S ? \"default\" : \"large\";\n\n    let appTitleVariant: IcTypographyVariants = \"h3\";\n\n    const hasTitle = this.appTitle !== \"\" && this.appTitle !== undefined;\n\n    if (this.deviceSize <= DEVICE_SIZES.L) {\n      appTitleVariant = \"h4\";\n      if (this.deviceSize <= DEVICE_SIZES.S) {\n        appTitleVariant = \"subtitle-small\";\n      }\n    }\n\n    const mobileSearchButtonTitle = this.mobileSearchBarVisible\n      ? \"Hide search\"\n      : \"Show search\";\n    const menuSize = this.deviceSize <= DEVICE_SIZES.S ? \"small\" : \"default\";\n\n    const Component = isSlotUsed(this.el, \"app-title\") ? \"div\" : \"a\";\n\n    const attrs = Component == \"a\" && {\n      href: this.href,\n    };\n\n    return (\n      <Host\n        class={{\n          [\"fullwidth-searchbar\"]: this.hasFullWidthSearchBar,\n          [IcThemeForegroundEnum.Dark]:\n            this.foregroundColor === IcThemeForegroundEnum.Dark,\n        }}\n      >\n        <div class=\"top-navigation\">\n          <ic-section-container aligned={this.contentAligned} full-height>\n            <header role=\"banner\">\n              <div class=\"top-panel-container\">\n                <div class=\"app-details-container\">\n                  {(hasTitle || isSlotUsed(this.el, \"app-title\")) && (\n                    <Component class=\"title-link\" {...attrs}>\n                      {this.hasAppIcon && (\n                        <div class=\"app-icon-container\" aria-hidden=\"true\">\n                          <slot name=\"app-icon\" />\n                        </div>\n                      )}\n                      <ic-typography variant={appTitleVariant}>\n                        <h1 class=\"title-wrap\">\n                          {isSlotUsed(this.el, \"app-title\") ? (\n                            <slot name=\"app-title\"></slot>\n                          ) : (\n                            this.appTitle\n                          )}\n                        </h1>\n                      </ic-typography>\n                    </Component>\n                  )}\n                  {this.status !== \"\" && (\n                    <div class=\"app-status\">\n                      <ic-typography\n                        aria-label=\"app tag\"\n                        variant=\"label-uppercase\"\n                        class=\"app-status-text\"\n                      >\n                        {this.status}\n                      </ic-typography>\n                    </div>\n                  )}\n                  {this.version !== \"\" && (\n                    <div class=\"app-version\">\n                      <ic-typography\n                        variant=\"label\"\n                        class=\"app-version-text\"\n                        aria-label=\"app version\"\n                      >\n                        {this.version}\n                      </ic-typography>\n                    </div>\n                  )}\n                </div>\n\n                {(this.hasSearchSlotContent || hasMenuContent) && (\n                  <div class=\"search-menu-container\">\n                    <div class=\"search-actions-container\">\n                      {this.deviceSize > DEVICE_SIZES.L && (\n                        <slot name=\"search\"></slot>\n                      )}\n\n                      {this.hasSearchSlotContent &&\n                        this.deviceSize <= DEVICE_SIZES.L && (\n                          <ic-button\n                            id=\"search-toggle-button\"\n                            ref={(el) => (this.mobileSearchButtonEl = el)}\n                            onMouseDown={this.searchButtonMouseDownHandler}\n                            variant=\"icon\"\n                            size={searchButtonSize}\n                            aria-label={mobileSearchButtonTitle}\n                            appearance={this.foregroundColor}\n                            onClick={this.searchButtonClickHandler}\n                          >\n                            <slot name=\"toggle-icon\" slot=\"icon\">\n                              <svg\n                                xmlns=\"http://www.w3.org/2000/svg\"\n                                viewBox=\"0 0 24 24\"\n                                fill=\"#ffffff\"\n                              >\n                                <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n                                <path d=\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\" />\n                              </svg>\n                            </slot>\n                          </ic-button>\n                        )}\n\n                      {this.hasIconButtons && this.deviceSize > DEVICE_SIZES.L && (\n                        <div class=\"icon-buttons-container\">\n                          <slot name=\"buttons\"></slot>\n                        </div>\n                      )}\n                      {hasMenuContent && this.deviceSize <= DEVICE_SIZES.L && (\n                        <div class=\"menu-button-container\">\n                          <span\n                            id=\"navigation-landmark-button-text\"\n                            class=\"navigation-landmark-button-text\"\n                            aria-hidden=\"true\"\n                          >\n                            Main navigation button\n                          </span>\n                          <nav\n                            aria-labelledby=\"navigation-landmark-button-text\"\n                            aria-hidden={this.navMenuVisible ? \"true\" : \"false\"}\n                          >\n                            <ic-button\n                              id=\"menu-button\"\n                              appearance={this.foregroundColor}\n                              variant=\"secondary\"\n                              aria-expanded={this.menuOpen ? \"true\" : \"false\"}\n                              aria-haspopup=\"true\"\n                              aria-label={`Open ${\n                                this.hasNavigation ? \"navigation\" : \"app\"\n                              } menu`}\n                              size={menuSize}\n                              onClick={this.menuButtonClick}\n                            >\n                              Menu\n                              <svg\n                                xmlns=\"http://www.w3.org/2000/svg\"\n                                height=\"24px\"\n                                viewBox=\"0 0 24 24\"\n                                width=\"24px\"\n                                fill=\"#ffffff\"\n                                slot=\"icon\"\n                              >\n                                <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n                                <path d=\"M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z\" />\n                              </svg>\n                            </ic-button>\n                          </nav>\n                        </div>\n                      )}\n                    </div>\n                  </div>\n                )}\n              </div>\n\n              {this.mobileSearchBarVisible && (\n                <div class=\"search-bar-container\">\n                  <slot name=\"search\"></slot>\n                </div>\n              )}\n\n              {this.hasNavigation && this.deviceSize > DEVICE_SIZES.L && (\n                <div class=\"navigation-tabs\">\n                  <span\n                    id=\"navigation-landmark-text\"\n                    class=\"navigation-landmark-text\"\n                    aria-hidden=\"true\"\n                  >\n                    Main navigation\n                  </span>\n                  <nav\n                    aria-labelledby=\"navigation-landmark-text\"\n                    class=\"nav-panel-container\"\n                  >\n                    <ic-horizontal-scroll appearance={this.foregroundColor}>\n                      <ul class=\"navigation-item-list\" tabindex=\"-1\">\n                        <slot name=\"navigation\"></slot>\n                      </ul>\n                    </ic-horizontal-scroll>\n                  </nav>\n                </div>\n              )}\n            </header>\n          </ic-section-container>\n        </div>\n        {this.navMenuVisible && (\n          <ic-navigation-menu\n            version={this.version}\n            status={this.status}\n            class={{\n              [\"inline\"]: this.inline,\n            }}\n          >\n            <div class=\"menu-buttons-slot\" slot=\"buttons\">\n              <slot name=\"buttons\"></slot>\n            </div>\n            <ul slot=\"navigation\">\n              <slot name=\"navigation\"></slot>\n            </ul>\n          </ic-navigation-menu>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-top-navigation.entry.cjs.js","mappings":"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","names":["getSlot","DEVICE_SIZES","getCurrentDeviceSize","getThemeForegroundColor","onComponentPropUndefinedChange","isSlotUsed","checkResizeObserver","onComponentRequiredPropUndefined","h","Host","IcThemeForegroundEnum","isEmptyString"],"sources":["./src/components/ic-top-navigation/ic-top-navigation.css?tag=ic-top-navigation&encapsulation=shadow","./src/components/ic-top-navigation/ic-top-navigation.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: block;\n  color: var(--ic-theme-text);\n  width: 100%;\n  position: relative;\n}\n\n:host .top-navigation {\n  background-color: var(--ic-theme-primary);\n  height: max-content;\n}\n\n:host(.fullwidth-searchbar) slot[name=\"search\"]::slotted(form) {\n  width: 100%;\n}\n\n:host .title-link {\n  display: inline-flex;\n  align-items: center;\n  text-decoration: none;\n  padding: var(--ic-space-xxs);\n  transition: var(--ic-easing-transition-fast);\n}\n\n:host .title-link,\n:host .title-link:visited,\n:host .title-link:active,\n:host .title-link ::slotted(a),\n:host .title-link:visited ::slotted(a),\n:host .title-link:active ::slotted(a) {\n  color: var(--ic-theme-text);\n  text-decoration: none;\n  outline: none;\n}\n\n:host .title-link:hover:not(:focus) {\n  background-color: var(--ic-theme-hover);\n}\n\n:host .title-link:active:not(:focus) {\n  background-color: var(--ic-theme-active);\n}\n\n:host .title-link:hover {\n  border-radius: var(--ic-border-radius);\n}\n\n:host .title-link:focus,\n:host .title-link:focus-within {\n  border-radius: var(--ic-border-radius);\n  box-shadow: var(--ic-border-focus);\n  outline: var(--ic-hc-focus-outline);\n}\n\n:host .title-link ic-typography {\n  font-weight: 600;\n}\n\n:host .nav-panel-container {\n  border-top: var(--ic-keyline-lighten);\n  padding: 0 var(--ic-space-lg);\n  margin-left: calc(-1 * var(--section-container-margin));\n  margin-right: calc(-1 * var(--section-container-margin));\n  display: flex;\n}\n\n:host(.dark) .nav-panel-container {\n  border-top: var(--ic-keyline-darken);\n}\n\n.top-panel-container {\n  display: flex;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n\n.navigation-tabs {\n  margin-top: calc(-1 * var(--ic-space-1px));\n}\n\n.app-details-container {\n  display: flex;\n  align-items: center;\n  flex: 1 1 auto;\n  margin-right: var(--ic-space-md);\n}\n\n.app-icon-container {\n  display: flex;\n  padding-right: var(--ic-space-xs);\n}\n\n.icon-buttons-container {\n  display: flex;\n  margin-left: var(--ic-space-md);\n}\n\n.icon-buttons-container ::slotted(nav) {\n  display: flex;\n}\n\n.title-wrap {\n  overflow-wrap: break-word;\n  word-wrap: break-word;\n  -ms-word-break: break-all;\n  word-break: break-word;\n  hyphens: auto;\n}\n\n:host .app-status {\n  border-radius: var(--ic-space-md);\n  background-color: var(--ic-architectural-white);\n  color: var(--ic-color-primary-text);\n  padding: var(--ic-space-xxs) var(--ic-space-lg);\n  margin-left: var(--ic-space-md);\n  flex: 1 1 0;\n  max-width: fit-content;\n}\n\n:host(.dark) .app-status {\n  background-color: var(--ic-theme-text);\n  color: var(--ic-color-white-text);\n}\n\n:host .app-version {\n  border-radius: var(--ic-space-md);\n  background-color: var(--ic-theme-active);\n  padding: var(--ic-space-xxs) var(--ic-space-sm);\n  margin-left: var(--ic-space-xs);\n  flex: 1 1 0;\n  max-width: fit-content;\n}\n\nslot[name=\"app-icon\"]::slotted(svg) {\n  fill: var(--ic-theme-text);\n  width: 2em;\n  height: 2em;\n}\n\nslot[name=\"toggle-icon\"] svg {\n  fill: var(--ic-theme-text);\n}\n\n.search-menu-container {\n  justify-content: right;\n  display: flex;\n  align-items: center;\n}\n\n.menu-button-container {\n  margin-left: var(--ic-space-md);\n}\n\n.menu-button-container .navigation-landmark-button-text {\n  position: absolute;\n  left: -10000px;\n  top: auto;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n}\n\n.search-actions-container {\n  display: flex;\n}\n\n.menu-buttons-slot {\n  display: flex;\n  flex-direction: column;\n}\n\n.navigation-landmark-text {\n  position: absolute;\n  width: var(--ic-space-1px);\n  height: var(--ic-space-1px);\n  padding: 0;\n  margin: calc(-1 * var(--ic-space-1px));\n  overflow: hidden;\n}\n\n.navigation-item-list {\n  display: flex;\n  list-style: none;\n  height: 2.75rem;\n}\n\n.navigation-item-list::-webkit-scrollbar {\n  display: none;\n}\n\n:host ic-section-container {\n  padding-bottom: 0 !important;\n  padding-top: 0 !important;\n}\n\n@media screen and (min-width: 993px) {\n  .app-details-container {\n    margin-right: var(--ic-space-lg);\n  }\n}\n\n/* large */\n@media screen and (max-width: 1200px) {\n  :host .nav-panel-container {\n    padding: 0 var(--ic-space-md);\n  }\n}\n\n/* medium */\n@media screen and (max-width: 992px) {\n  :host .nav-panel-container,\n  :host .app-status,\n  :host .app-version {\n    display: none;\n  }\n\n  :host .title-link {\n    margin-right: var(--ic-space-xs);\n  }\n\n  .search-menu-container {\n    max-width: 10rem;\n  }\n\n  .search-bar-container {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-top: var(--ic-keyline-darken);\n    height: 4rem;\n    padding-left: var(--ic-space-md);\n    padding-right: var(--ic-space-md);\n    margin-left: calc(-1 * var(--section-container-margin));\n    margin-right: calc(-1 * var(--section-container-margin));\n  }\n}\n\n/* x small */\n@media screen and (max-width: 576px) {\n  :host .title-link {\n    margin-right: var(--ic-space-xxxs);\n    word-break: break-word;\n    hyphens: none;\n  }\n\n  .top-panel-container {\n    min-height: 2.5rem;\n  }\n\n  .searchbox-inline {\n    display: none;\n  }\n\n  .search-bar-container {\n    margin-top: 0;\n    height: 3.5rem;\n    padding-left: var(--ic-space-xs);\n    padding-right: var(--ic-space-xs);\n  }\n\n  .menu-button-container {\n    margin-left: var(--ic-space-sm);\n  }\n\n  slot[name=\"app-icon\"]::slotted(svg) {\n    width: 1.5em;\n    height: 1.5em;\n  }\n\n  slot[name=\"toggle-icon\"] svg {\n    width: 1.5em;\n    height: 1.5em;\n  }\n}\n\n@media (forced-colors: active) {\n  :host .top-navigation {\n    border-bottom: var(--ic-hc-border);\n  }\n\n  .app-status,\n  .app-version {\n    border: var(--ic-hc-border);\n  }\n\n  slot[name=\"app-icon\"]::slotted(svg) {\n    fill: currentcolor;\n  }\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  State,\n  Listen,\n  Event,\n  EventEmitter,\n  Watch,\n} from \"@stencil/core\";\n\nimport {\n  IcTypographyVariants,\n  IcAlignment,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n  IcTheme,\n} from \"../../utils/types\";\nimport {\n  checkResizeObserver,\n  DEVICE_SIZES,\n  getCurrentDeviceSize,\n  getThemeForegroundColor,\n  getSlot,\n  onComponentPropUndefinedChange,\n  onComponentRequiredPropUndefined,\n  isSlotUsed,\n  isEmptyString,\n} from \"../../utils/helpers\";\n\n/**\n * @slot app-icon - Content will be rendered to left of app title.\n * @slot app-title - Handle routing by nesting a route in the app title.\n * @slot search - Content will be rendered in search area to left of buttons.\n * @slot toggle-icon - Icon to be displayed on the button to toggle search slot content on smaller devices\n * @slot navigation - Content will be rendered in navigation panel.\n * @slot buttons - Content will be rendered to right of search bar.\n */\n@Component({\n  tag: \"ic-top-navigation\",\n  styleUrl: \"ic-top-navigation.css\",\n  shadow: true,\n})\nexport class TopNavigation {\n  private hasAppIcon: boolean = false;\n  private hasIconButtons: boolean = false;\n  private hasNavigation: boolean = false;\n  private hasSearchSlotContent: boolean = false;\n  private mobileSearchButtonEl: HTMLIcButtonElement;\n  private resizeObserver: ResizeObserver = null;\n  private searchBar: HTMLIcSearchBarElement = null;\n\n  @Element() el: HTMLIcTopNavigationElement;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n  @State() hasFullWidthSearchBar: boolean = false;\n  @State() menuOpen: boolean = false;\n  @State() mobileSearchBarVisible: boolean = false;\n  @State() mobileSearchHiddenOnBlur: boolean = false;\n  @State() navMenuVisible: boolean = false;\n  @State() searchButtonClick: boolean = false;\n  @State() searchValue: string = \"\";\n\n  /**\n   * The alignment of the top navigation content.\n   */\n  @Prop() contentAligned: IcAlignment = \"full-width\";\n  /**\n   *  The URL to navigate to when the app title is clicked.\n   */\n  @Prop() href: string = \"/\";\n\n  /**\n   * If `true`, the flyout navigation menu on small devices will be contained by the parent element.\n   */\n  @Prop() inline: boolean = false;\n\n  /**\n   * The short title of the app to be displayed at small screen sizes in place of the app title.\n   */\n  @Prop() shortAppTitle: string = \"\";\n\n  /**\n   * The status info to be displayed.\n   */\n  @Prop() status: string = \"\";\n\n  /**\n   * The version info to be displayed.\n   */\n  @Prop() version: string = \"\";\n\n  /**\n   * The app title to be displayed. This is required, unless a slotted app title link is used.\n   */\n  @Prop() appTitle: string;\n  @Watch(\"appTitle\")\n  watchPropHandler(newValue: string, oldValue: string): void {\n    //added for gatsby rehydration issue where prop is initially undefined but then changes to actual value\n    //this watch can be removed once gatbsy hydration issue is resolved\n    onComponentPropUndefinedChange(\n      oldValue,\n      newValue,\n      this.initialiseSearchBar\n    );\n  }\n\n  /**\n   * @internal - Emitted when the menu is closed.\n   */\n  @Event() icNavigationMenuClosed: EventEmitter<void>;\n\n  /**\n   * @internal - Emitted when the menu is opened.\n   */\n  @Event() icNavigationMenuOpened: EventEmitter<void>;\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  componentWillLoad(): void {\n    this.hasAppIcon = isSlotUsed(this.el, \"app-icon\");\n    this.hasNavigation = isSlotUsed(this.el, \"navigation\");\n    this.hasIconButtons = isSlotUsed(this.el, \"buttons\");\n    this.hasSearchSlotContent = isSlotUsed(this.el, \"search\");\n    this.deviceSize = getCurrentDeviceSize();\n    this.initialiseSearchBar();\n  }\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\n    !isSlotUsed(this.el, \"app-title\") &&\n      onComponentRequiredPropUndefined(\n        [{ prop: this.appTitle, propName: \"app-title\" }],\n        \"Top Navigation\"\n      );\n  }\n\n  componentWillRender(): void {\n    this.hasNavigation = isSlotUsed(this.el, \"navigation\");\n    this.hasSearchSlotContent = isSlotUsed(this.el, \"search\");\n    this.hasIconButtons = isSlotUsed(this.el, \"buttons\");\n    this.hasAppIcon = isSlotUsed(this.el, \"app-icon\");\n  }\n\n  @Listen(\"icNavigationMenuClose\", {})\n  navBarMenuCloseHandler(): void {\n    this.showNavMenu(false);\n    const menuBtn = this.el.shadowRoot.querySelector(\n      \"#menu-button\"\n    ) as HTMLElement;\n    menuBtn.focus();\n  }\n\n  @Listen(\"icSearchBarBlur\", {})\n  searchInputBlurHandler(ev: CustomEvent): void {\n    if (ev.detail !== null) {\n      if (this.mobileSearchBarVisible && !this.searchButtonClick) {\n        //don't hide if blur was triggered by click on search button - let the click handler toggle the state\n        this.toggleSearchBar();\n      }\n      this.searchValue = ev.detail.value;\n    }\n  }\n\n  @Listen(\"icChange\", {})\n  searchValueChangeHandler(ev: CustomEvent): void {\n    this.searchValue = ev.detail.value;\n  }\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 initialiseSearchBar = () => {\n    if (this.hasSearchSlotContent) {\n      const slot = getSlot(this.el, \"search\");\n      if (slot && slot.tagName === \"IC-SEARCH-BAR\") {\n        this.searchBar = slot as HTMLIcSearchBarElement;\n      } else if (slot && slot.tagName === \"FORM\") {\n        this.searchBar = slot.querySelector(\n          \"ic-search-bar\"\n        ) as HTMLIcSearchBarElement;\n      }\n\n      if (this.searchBar !== null) {\n        this.searchBar.hideLabel = true;\n      }\n    }\n  };\n\n  private toggleSearchBar(): void {\n    this.mobileSearchBarVisible = !this.mobileSearchBarVisible;\n\n    if (this.searchBar !== null) {\n      if (this.mobileSearchBarVisible) {\n        this.mobileSearchButtonEl.updateAriaLabel(\"Hide search\");\n        this.hasFullWidthSearchBar = true;\n        this.searchBar.fullWidth = true;\n        setTimeout(() => {\n          this.searchBar.focus();\n        }, 100);\n      } else {\n        this.mobileSearchButtonEl.updateAriaLabel(\"Show search\");\n        this.hasFullWidthSearchBar = false;\n        this.searchBar.fullWidth = false;\n      }\n    }\n  }\n\n  private emitTopNavResized = (size: number): void => {\n    const event = new CustomEvent(\"topNavResized\", { detail: { size: size } });\n    this.el.dispatchEvent(event);\n  };\n\n  private menuButtonClick = () => {\n    this.showNavMenu(true);\n  };\n\n  private showNavMenu(show: boolean): void {\n    this.navMenuVisible = show;\n    if (show) {\n      this.icNavigationMenuOpened.emit();\n      document.body.style.height = \"100%\";\n      document.body.style.overflow = \"hidden\";\n    } else {\n      this.icNavigationMenuClosed.emit();\n      document.body.style.height = \"auto\";\n      document.body.style.overflow = \"auto\";\n    }\n  }\n\n  private searchButtonMouseDownHandler = () => {\n    this.searchButtonClick = true;\n  };\n\n  private searchButtonClickHandler = () => {\n    this.toggleSearchBar();\n    this.searchButtonClick = false;\n  };\n\n  private resizeObserverCallback = (currSize: number) => {\n    if (currSize !== this.deviceSize) {\n      this.deviceSize = currSize;\n      if (currSize > DEVICE_SIZES.L) {\n        this.showNavMenu(false);\n        if (this.mobileSearchBarVisible) {\n          this.toggleSearchBar();\n        }\n      }\n      this.emitTopNavResized(currSize);\n      if (\n        document.activeElement !== null &&\n        document.activeElement !== undefined &&\n        document.activeElement.tagName === \"IC-SEARCH-BAR\"\n      ) {\n        this.searchBar.setAttribute(\"hidden\", \"true\");\n        //remove attribute again as this trigger a redraw & applies css\n        this.searchBar.removeAttribute(\"hidden\");\n        setTimeout(() => {\n          this.searchBar.focus();\n        }, 100);\n      }\n    }\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      const currSize = getCurrentDeviceSize();\n      this.resizeObserverCallback(currSize);\n    });\n\n    this.resizeObserver.observe(this.el);\n  };\n\n  render() {\n    const hasMenuContent =\n      this.hasNavigation ||\n      this.hasIconButtons ||\n      this.status !== \"\" ||\n      this.version !== \"\";\n\n    const searchButtonSize =\n      this.deviceSize <= DEVICE_SIZES.S ? \"default\" : \"large\";\n\n    let appTitleVariant: IcTypographyVariants = \"h3\";\n\n    const hasTitle = this.appTitle !== \"\" && this.appTitle !== undefined;\n\n    if (this.deviceSize <= DEVICE_SIZES.L) {\n      appTitleVariant = \"h4\";\n      if (this.deviceSize <= DEVICE_SIZES.S) {\n        appTitleVariant = \"subtitle-small\";\n      }\n    }\n\n    const mobileSearchButtonTitle = this.mobileSearchBarVisible\n      ? \"Hide search\"\n      : \"Show search\";\n    const menuSize = this.deviceSize <= DEVICE_SIZES.S ? \"small\" : \"default\";\n\n    const Component = isSlotUsed(this.el, \"app-title\") ? \"div\" : \"a\";\n\n    const attrs = Component == \"a\" && {\n      href: this.href,\n    };\n\n    return (\n      <Host\n        class={{\n          [\"fullwidth-searchbar\"]: this.hasFullWidthSearchBar,\n          [IcThemeForegroundEnum.Dark]:\n            this.foregroundColor === IcThemeForegroundEnum.Dark,\n        }}\n      >\n        <div class=\"top-navigation\">\n          <ic-section-container aligned={this.contentAligned} full-height>\n            <header role=\"banner\">\n              <div class=\"top-panel-container\">\n                <div class=\"app-details-container\">\n                  {(hasTitle || isSlotUsed(this.el, \"app-title\")) && (\n                    <Component class=\"title-link\" {...attrs}>\n                      {this.hasAppIcon && (\n                        <div class=\"app-icon-container\" aria-hidden=\"true\">\n                          <slot name=\"app-icon\" />\n                        </div>\n                      )}\n                      {this.deviceSize <= DEVICE_SIZES.S &&\n                      !isEmptyString(this.shortAppTitle) ? (\n                        <ic-typography\n                          variant=\"subtitle-small\"\n                          aria-label={`${this.appTitle} (${this.shortAppTitle})`}\n                        >\n                          <h1>{this.shortAppTitle}</h1>\n                        </ic-typography>\n                      ) : (\n                        <ic-typography variant={appTitleVariant}>\n                          <h1 class=\"title-wrap\">\n                            {isSlotUsed(this.el, \"app-title\") ? (\n                              <slot name=\"app-title\"></slot>\n                            ) : (\n                              this.appTitle\n                            )}\n                          </h1>\n                        </ic-typography>\n                      )}\n                    </Component>\n                  )}\n                  {this.status !== \"\" && (\n                    <div class=\"app-status\">\n                      <ic-typography\n                        aria-label=\"app tag\"\n                        variant=\"label-uppercase\"\n                        class=\"app-status-text\"\n                      >\n                        {this.status}\n                      </ic-typography>\n                    </div>\n                  )}\n                  {this.version !== \"\" && (\n                    <div class=\"app-version\">\n                      <ic-typography\n                        variant=\"label\"\n                        class=\"app-version-text\"\n                        aria-label=\"app version\"\n                      >\n                        {this.version}\n                      </ic-typography>\n                    </div>\n                  )}\n                </div>\n\n                {(this.hasSearchSlotContent || hasMenuContent) && (\n                  <div class=\"search-menu-container\">\n                    <div class=\"search-actions-container\">\n                      {this.deviceSize > DEVICE_SIZES.L && (\n                        <slot name=\"search\"></slot>\n                      )}\n\n                      {this.hasSearchSlotContent &&\n                        this.deviceSize <= DEVICE_SIZES.L && (\n                          <ic-button\n                            id=\"search-toggle-button\"\n                            ref={(el) => (this.mobileSearchButtonEl = el)}\n                            onMouseDown={this.searchButtonMouseDownHandler}\n                            variant=\"icon\"\n                            size={searchButtonSize}\n                            aria-label={mobileSearchButtonTitle}\n                            appearance={this.foregroundColor}\n                            onClick={this.searchButtonClickHandler}\n                          >\n                            <slot name=\"toggle-icon\" slot=\"icon\">\n                              <svg\n                                xmlns=\"http://www.w3.org/2000/svg\"\n                                viewBox=\"0 0 24 24\"\n                                fill=\"#ffffff\"\n                              >\n                                <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n                                <path d=\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\" />\n                              </svg>\n                            </slot>\n                          </ic-button>\n                        )}\n\n                      {this.hasIconButtons && this.deviceSize > DEVICE_SIZES.L && (\n                        <div class=\"icon-buttons-container\">\n                          <slot name=\"buttons\"></slot>\n                        </div>\n                      )}\n                      {hasMenuContent && this.deviceSize <= DEVICE_SIZES.L && (\n                        <div class=\"menu-button-container\">\n                          <span\n                            id=\"navigation-landmark-button-text\"\n                            class=\"navigation-landmark-button-text\"\n                            aria-hidden=\"true\"\n                          >\n                            Main navigation button\n                          </span>\n                          <nav\n                            aria-labelledby=\"navigation-landmark-button-text\"\n                            aria-hidden={this.navMenuVisible ? \"true\" : \"false\"}\n                          >\n                            <ic-button\n                              id=\"menu-button\"\n                              appearance={this.foregroundColor}\n                              variant=\"secondary\"\n                              aria-expanded={this.menuOpen ? \"true\" : \"false\"}\n                              aria-haspopup=\"true\"\n                              aria-label={`Open ${\n                                this.hasNavigation ? \"navigation\" : \"app\"\n                              } menu`}\n                              size={menuSize}\n                              onClick={this.menuButtonClick}\n                            >\n                              Menu\n                              <svg\n                                xmlns=\"http://www.w3.org/2000/svg\"\n                                height=\"24px\"\n                                viewBox=\"0 0 24 24\"\n                                width=\"24px\"\n                                fill=\"#ffffff\"\n                                slot=\"icon\"\n                              >\n                                <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n                                <path d=\"M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z\" />\n                              </svg>\n                            </ic-button>\n                          </nav>\n                        </div>\n                      )}\n                    </div>\n                  </div>\n                )}\n              </div>\n\n              {this.mobileSearchBarVisible && (\n                <div class=\"search-bar-container\">\n                  <slot name=\"search\"></slot>\n                </div>\n              )}\n\n              {this.hasNavigation && this.deviceSize > DEVICE_SIZES.L && (\n                <div class=\"navigation-tabs\">\n                  <span\n                    id=\"navigation-landmark-text\"\n                    class=\"navigation-landmark-text\"\n                    aria-hidden=\"true\"\n                  >\n                    Main navigation\n                  </span>\n                  <nav\n                    aria-labelledby=\"navigation-landmark-text\"\n                    class=\"nav-panel-container\"\n                  >\n                    <ic-horizontal-scroll appearance={this.foregroundColor}>\n                      <ul class=\"navigation-item-list\" tabindex=\"-1\">\n                        <slot name=\"navigation\"></slot>\n                      </ul>\n                    </ic-horizontal-scroll>\n                  </nav>\n                </div>\n              )}\n            </header>\n          </ic-section-container>\n        </div>\n        {this.navMenuVisible && (\n          <ic-navigation-menu\n            version={this.version}\n            status={this.status}\n            class={{\n              [\"inline\"]: this.inline,\n            }}\n          >\n            <div class=\"menu-buttons-slot\" slot=\"buttons\">\n              <slot name=\"buttons\"></slot>\n            </div>\n            <ul slot=\"navigation\">\n              <slot name=\"navigation\"></slot>\n            </ul>\n          </ic-navigation-menu>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}