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

package/dist/components/ic-side-navigation.js.map

@@ -1 +1 @@
-{"file":"ic-side-navigation.js","mappings":"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","names":[],"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":[":host {\n  display: block;\n\n  --side-navigation-position: fixed;\n  --side-navigation-position-left: 0;\n  --side-navigation-position-top: var(--ic-space-xxl);\n  --side-navigation-height: var(--ic-space-xxl);\n  --sm-side-navigation-top-bar-height: 56px;\n  --sm-side-navigation-collapsed-labels-width: 96px;\n  --sm-side-navigation-expand-transition-duration: var(\n    --ic-transition-duration-slow\n  );\n  --side-navigation-width: 320px;\n}\n\n:host > * {\n  box-sizing: border-box;\n}\n\n.side-navigation {\n  display: flex;\n  flex-direction: column;\n  width: var(--side-navigation-width);\n  color: var(--ic-theme-text);\n  position: var(--side-navigation-position);\n  top: var(--side-navigation-position-top);\n  left: calc(var(--side-navigation-width) * -1);\n  bottom: 0;\n  background-color: var(--ic-theme-primary);\n}\n\n:host(.inline) .side-navigation {\n  position: absolute;\n  height: 100%;\n}\n\n:host(.anchor-right) .side-navigation {\n  right: calc(var(--side-navigation-width) * -1);\n}\n\n.classification-spacing {\n  margin-bottom: var(--ic-space-lg);\n}\n\n.navigation-list {\n  padding: 0;\n  margin: 0;\n  list-style: none;\n}\n\n.side-navigation-inner {\n  background-color: var(--ic-theme-primary);\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 0;\n  overflow: auto;\n  visibility: hidden;\n}\n\n:host(.inline) .side-navigation-inner {\n  flex: 1;\n}\n\n:host(.xs-menu-open) .side-navigation {\n  transition: left var(--ic-easing-transition-slow);\n  left: 0;\n}\n\n:host(.xs-menu-close) .side-navigation {\n  left: calc(var(--side-navigation-width) * -1);\n  transition: left var(--ic-easing-transition-slow);\n}\n\n:host(.anchor-right.xs-menu-open) .side-navigation {\n  right: 0;\n  left: auto;\n}\n\n:host(.anchor-right.xs-menu-close) .side-navigation {\n  right: calc(var(--side-navigation-width) * -1);\n  left: auto;\n  transition: right var(--ic-easing-transition-slow);\n}\n\n.bottom-wrapper {\n  border-top: var(--ic-keyline-lighten);\n  position: sticky;\n  bottom: 0;\n  left: 0;\n  z-index: 2;\n  box-shadow: -3px -3px 8px rgb(0 0 0 / 20%);\n  background-color: var(--ic-theme-primary);\n  display: flex;\n  flex-direction: column;\n  visibility: hidden;\n}\n\n:host(.dark) .bottom-wrapper {\n  border-top: var(--ic-keyline-darken);\n}\n\n/* Mobile Top Bar */\n\n.top-bar {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  min-height: var(--side-navigation-height);\n  padding: var(--ic-space-xs);\n  box-sizing: border-box;\n  background-color: var(--ic-theme-primary);\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  border-bottom: var(--ic-keyline-darken);\n  box-shadow: var(--ic-elevation-overlay);\n  z-index: 2;\n  overflow: hidden;\n  visibility: visible;\n}\n\n:host(.inline) .top-bar {\n  position: absolute;\n}\n\n.top-bar.dark a:focus {\n  box-shadow: var(--ic-border-focus);\n}\n\n.top-bar.light {\n  border-bottom: var(--ic-keyline-lighten);\n}\n\n.app-title-wrapper {\n  display: flex;\n  margin-left: var(--ic-space-xs);\n  border-left: var(--ic-keyline-darken);\n  padding-left: var(--ic-space-xxs);\n  color: var(--ic-theme-text);\n  align-items: center;\n}\n\n@media screen and (min-width: 340px) {\n  .app-title-wrapper ic-typography {\n    margin-left: var(--ic-space-xs);\n  }\n}\n\n:host .title-link:link {\n  display: flex;\n  align-items: center;\n  transition: box-shadow var(--ic-easing-transition-fast),\n    background-color var(--ic-easing-transition-fast);\n  text-decoration: none;\n  padding: var(--ic-space-xxs);\n  color: var(--ic-theme-text);\n}\n\n:host .title-link:visited,\n:host .title-link:active {\n  color: var(--ic-theme-text);\n}\n\n:host .title-link:hover {\n  border-radius: var(--ic-border-radius);\n  background-color: var(--ic-theme-hover);\n}\n\n:host .title-link:active {\n  background-color: var(--ic-theme-active);\n}\n\n:host .title-link:focus {\n  border-radius: var(--ic-border-radius);\n  box-shadow: var(--ic-border-focus);\n  outline: var(--ic-hc-focus-outline);\n  background-color: transparent;\n}\n\n:host .title-link ic-typography {\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n.app-title-wrapper ::slotted(svg) {\n  fill: var(--ic-theme-text);\n}\n\n.app-icon-container {\n  display: none;\n}\n\n.button-label {\n  display: flex;\n  align-items: center;\n}\n\n.mobile-top-bar-menu-icon {\n  display: flex;\n}\n\n.menu-button {\n  width: 104px;\n}\n\n.app-status-wrapper {\n  position: absolute;\n  right: var(--ic-space-md);\n  top: 0;\n  bottom: 0;\n  width: auto;\n  display: flex;\n  align-items: center;\n  pointer-events: none;\n}\n\n.app-status-wrapper .app-version {\n  max-width: 100px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.app-status-wrapper .app-status {\n  border-radius: 80px;\n  background-color: var(--ic-theme-text);\n  color: var(--ic-color-primary-text);\n  padding: var(--ic-space-xxs) var(--ic-space-lg);\n  margin-right: var(--ic-space-xs);\n  max-width: 100px;\n}\n\n.app-status-wrapper .app-status-text {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-width: 96px;\n}\n\n:host(.dark) .app-status-wrapper .app-status {\n  color: var(--ic-color-white-text);\n}\n\n.navigation-landmark-title {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n}\n\n/* Navigation Group */\n\n::slotted(ic-navigation-group) {\n  --navigation-group-height: 44px;\n  --navigation-group-width: 100%;\n  --navigation-group-justify-content: space-between;\n  --navigation-group-hover: var(--ic-theme-hover);\n  --navigation-group-text-hover: var(--ic-theme-text);\n  --navigation-item-child-height: 56px;\n  --navigation-item-child-active: var(--ic-action-dark-bg-active);\n  --navigation-item-child-color: var(--ic-theme-text);\n  --navigation-group-expand-toggle-padding: 4px;\n}\n\n/* Navigation Items */\n\n::slotted(ic-navigation-item),\n::slotted(ic-navigation-group) {\n  --navigation-item-height: 56px;\n  --navigation-item-width: auto;\n  --navigation-item-justify-content: flex-start;\n}\n\n/* Toggle Chevron */\n\n.bottom-side-nav {\n  position: relative;\n  align-content: flex-end;\n  height: var(--sm-side-navigation-top-bar-height);\n}\n\n.primary-navigation {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n\n  /* Hide scrollbar when required but keep functionality */\n  scrollbar-width: none;\n}\n\n.primary-navigation::-webkit-scrollbar {\n  display: none;\n}\n\n.primary-navigation,\n.secondary-navigation {\n  overflow-x: hidden;\n}\n\n.bottom-side-nav .menu-expand-button {\n  display: none;\n}\n\n.menu-visibility-visible {\n  visibility: visible;\n}\n\n.menu-visibility-hidden {\n  visibility: hidden;\n}\n\n/* Media Queries */\n\n@media screen and (min-width: 340px) {\n  .app-icon-container {\n    display: flex;\n  }\n}\n\n@media screen and (min-width: 577px) {\n  :host {\n    display: flex;\n    flex-direction: column;\n    height: 100vh;\n    position: var(--side-navigation-position);\n    left: 0;\n    top: 0;\n    bottom: 0;\n  }\n\n  :host(.static) {\n    position: relative;\n    left: auto;\n    top: auto;\n    bottom: auto;\n  }\n\n  .app-icon-container {\n    padding: var(--ic-space-xxs) 0;\n  }\n\n  .top-bar {\n    --side-navigation-height: var(--sm-side-navigation-top-bar-height);\n\n    position: relative;\n    padding: 0;\n    box-shadow: -3px 3px 8px rgb(0 0 0 / 20%);\n  }\n\n  :host(.inline) .top-bar {\n    position: sticky;\n  }\n\n  :host(.anchor-right) .top-bar {\n    box-shadow: 3px 3px 8px rgb(0 0 0 / 20%);\n  }\n\n  :host(.anchor-right) .bottom-wrapper {\n    box-shadow: 3px -3px 8px rgb(0 0 0 / 20%);\n  }\n\n  .side-navigation,\n  .top-bar {\n    width: var(--sm-side-navigation-top-bar-height);\n  }\n\n  :host(.sm-collapsed) {\n    width: var(--sm-side-navigation-top-bar-height);\n    transition: width var(--ic-easing-transition-slow);\n  }\n\n  :host(.sm-collapsed.collapsed-labels) {\n    width: var(--sm-side-navigation-collapsed-labels-width);\n  }\n\n  :host(.sm-expanded) {\n    width: var(--side-navigation-width);\n    transition: width var(--ic-easing-transition-slow);\n    box-shadow: var(--ic-elevation-overlay);\n  }\n\n  .side-navigation {\n    --side-navigation-position-top: 0;\n\n    flex: 1;\n    position: relative;\n    top: auto;\n    left: auto;\n    bottom: auto;\n  }\n\n  :host(.inline) .side-navigation {\n    position: relative;\n  }\n\n  :host(.anchor-right) .side-navigation {\n    left: auto;\n    right: 0;\n  }\n\n  .side-navigation-inner {\n    width: 100%;\n    visibility: visible;\n  }\n\n  .bottom-wrapper {\n    visibility: visible;\n  }\n\n  .app-title-wrapper {\n    margin-left: 0;\n    border-left: none;\n    padding: var(--ic-space-sm);\n  }\n\n  .app-title-wrapper ::slotted(svg) {\n    height: var(--ic-space-lg);\n    width: var(--ic-space-lg);\n  }\n\n  .app-title-wrapper ic-typography {\n    margin: calc(-1 * 4.5px) 0 calc(-1 * 4.5px) var(--ic-space-md);\n    font-weight: var(--ic-font-weight-semibold);\n  }\n\n  :host(.sm-collapsed) .app-title-wrapper ic-typography {\n    position: absolute;\n    left: -9999px;\n    opacity: 0;\n    transition: opacity var(--ic-easing-transition-slow);\n  }\n\n  :host(.sm-expanded) ic-typography {\n    position: relative;\n    left: 0;\n  }\n\n  :host(.sm-expanded) :is(.side-navigation, .top-bar) {\n    width: var(--side-navigation-width);\n    transition: width var(--ic-easing-transition-slow);\n  }\n\n  :host(.sm-collapsed) :is(.side-navigation, .top-bar) {\n    width: var(--sm-side-navigation-top-bar-height);\n    transition: width var(--ic-easing-transition-slow);\n  }\n\n  :host(.anchor-right.sm-expanded) :is(.side-navigation, .top-bar) {\n    left: auto;\n    right: 0;\n  }\n\n  .app-status-wrapper,\n  :host(.sm-collapsed) .app-status-wrapper {\n    display: none;\n  }\n\n  :host(.sm-expanded) .app-status-wrapper {\n    display: flex;\n  }\n\n  .bottom-side-nav {\n    justify-items: flex-end;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .bottom-side-nav .menu-expand-button {\n    padding-left: var(--ic-space-md);\n    height: var(--sm-side-navigation-top-bar-height);\n    width: 100%;\n    color: var(--ic-theme-text);\n    background-color: transparent;\n    outline: var(--ic-hc-focus-outline);\n    border: none;\n    cursor: pointer;\n    display: flex;\n    transition: var(--ic-easing-transition-fast);\n  }\n\n  .bottom-side-nav .menu-expand-button svg {\n    justify-items: flex-start;\n    align-self: center;\n  }\n\n  .bottom-side-nav .menu-expand-button:hover {\n    background-color: var(--ic-theme-hover);\n  }\n\n  :host .bottom-side-nav {\n    outline: none;\n  }\n\n  :host .bottom-side-nav .menu-expand-button:focus {\n    box-shadow: var(--ic-border-focus-inset);\n    border-radius: var(--ic-border-radius-inset);\n    background-color: transparent;\n  }\n\n  :host(.sm-collapsed) .bottom-side-nav .menu-expand-button svg {\n    transform: scaleX(1);\n    transition: transform var(--ic-easing-transition-slow);\n  }\n\n  :host(.sm-expanded) .bottom-side-nav .menu-expand-button svg {\n    transform: scaleX(-1);\n    transition: transform var(--ic-easing-transition-slow);\n  }\n\n  :host(.anchor-right.sm-collapsed) .bottom-side-nav .menu-expand-button svg {\n    transform: scaleX(-1);\n  }\n\n  :host(.anchor-right.sm-expanded) .bottom-side-nav .menu-expand-button svg {\n    transform: scaleX(1);\n  }\n\n  :host(.sm-collapsed) ::slotted(ic-navigation-item) {\n    --navigation-item-label-opacity: 1;\n  }\n\n  :host(.sm-collapsed) ::slotted(ic-navigation-item),\n  :host(.sm-collapsed) ::slotted(ic-navigation-group) {\n    --navigation-item-label-opacity: 0;\n  }\n\n  :host(.sm-expanded) ::slotted(ic-navigation-item),\n  :host(.sm-expanded) ::slotted(ic-navigation-group) {\n    --navigation-item-label-opacity: 1;\n  }\n\n  :host(.sm-collapsed) ::slotted(ic-navigation-group) {\n    --navigation-group-title-position: absolute;\n    --navigation-group-title-position-left: -9999px;\n    --navigation-group-title-opacity: none;\n  }\n\n  :host(.sm-expanded) ::slotted(ic-navigation-group) {\n    --navigation-group-title-position: relative;\n    --navigation-group-title-position-left: 0;\n    --navigation-group-expand-toggle-padding: 4px;\n    --navigation-group-title-opacity: flex;\n  }\n\n  :host(.sm-collapsed.collapsed-labels) .side-navigation,\n  :host(.sm-collapsed.collapsed-labels) .top-bar {\n    width: var(--sm-side-navigation-collapsed-labels-width);\n  }\n\n  :host(.sm-collapsed.collapsed-labels) .menu-expand-button {\n    padding: 0;\n  }\n\n  :host(.sm-collapsed.collapsed-labels) .app-title-wrapper {\n    width: 100%;\n    justify-content: center;\n  }\n\n  :host(.sm-collapsed.collapsed-labels) ::slotted(ic-navigation-group) {\n    --navigation-group-justify-content: center;\n    --navigation-item-label-opacity: 1;\n    --navigation-group-item-min-width: 100%;\n    --navigation-group-expand-toggle-padding: 16px;\n  }\n\n  :host(.collapsed-labels) .bottom-side-nav .menu-expand-button {\n    justify-content: center;\n  }\n\n  :host .collapsed-icon-labels-start {\n    visibility: hidden;\n    opacity: 0;\n  }\n\n  :host .collapsed-icon-labels-end {\n    visibility: visible;\n    opacity: 1;\n    transition: visibility 0s, opacity var(--ic-easing-transition-slow);\n  }\n}\n\n@media screen and (min-width: 993px) {\n  :host {\n    position: sticky;\n    left: auto;\n    top: 0;\n    bottom: 0;\n  }\n\n  :host(.sm-expanded) {\n    box-shadow: none;\n  }\n}\n\n@media (forced-colors: active) {\n  .side-navigation,\n  .top-bar {\n    border-right: var(--ic-hc-border);\n  }\n\n  slot[name=\"app-icon\"]::slotted(svg) {\n    fill: currentcolor;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Element,\n  Listen,\n} from \"@stencil/core\";\n\nimport menuIcon from \"../../assets/hamburger-menu-icon.svg\";\nimport closeIcon from \"../../assets/close-icon.svg\";\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\nimport {\n  getCurrentDeviceSize,\n  DEVICE_SIZES,\n  checkResizeObserver,\n  isSlotUsed,\n  getThemeForegroundColor,\n  getCssProperty,\n  hasClassificationBanner,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport {\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport { IcTopBar } from \"./ic-side-navigation.types\";\n\n/**\n * @slot app-icon - Content will be rendered adjacent to the app title at the very top of the side navigation.\n * @slot primary-navigation - Content will be rendered at the top of the side navigation.\n * @slot secondary-navigation - Content will be rendered at the bottom of the side navigation.\n */\n\n@Component({\n  tag: \"ic-side-navigation\",\n  styleUrl: \"ic-side-navigation.css\",\n  shadow: true,\n})\nexport class SideNavigation {\n  @Element() el: HTMLIcSideNavigationElement;\n  /**\n   * The title of the app to be displayed.\n   */\n  @Prop() appTitle!: string;\n  /**\n   * The status of the app to be displayed.\n   */\n  @Prop() status: string;\n  /**\n   * The version of the app to be displayed.\n   */\n  @Prop() version: string;\n  /**\n   * If `true`, the side navigation will load in an expanded state.\n   */\n  @Prop() expanded: boolean = false;\n  /**\n   * The URL that the app title link points to.\n   */\n  @Prop() href: string = \"/\";\n  /**\n   * If `true`, the menu expand button will be removed (PLEASE NOTE: This takes effect on screen sizes 992px and above).\n   */\n  @Prop() static: boolean = false;\n  /**\n   * If `true`, the icon and label will appear when side navigation is collapsed.\n   */\n  @Prop() collapsedIconLabels: boolean = false;\n  /**\n   * If `true`, side navigation will be contained by its parent element.\n   */\n  @Prop() inline: boolean = false;\n\n  /**\n   * If `true`, automatic parent wrapper styling will be disabled.\n   */\n  @Prop() disableAutoParentStyling: boolean = false;\n\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n  @State() menuOpen: boolean = false;\n  @State() menuExpanded: boolean = false;\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() deviceSizeAppTitle = DEVICE_SIZES.S;\n  @State() hasSecondaryNavigation: boolean = false;\n\n  private ANIMATION_DURATION =\n    parseInt(getCssProperty(\"--ic-transition-duration-slow\")) || 0;\n\n  @Listen(\"icThemeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.foregroundColor = theme.mode;\n  }\n\n  private emitSideNavigationExpanded = (objDetails: {\n    sideNavExpanded: boolean;\n    sideNavMobile?: boolean;\n  }): void => {\n    const event = new CustomEvent(\"sideNavExpanded\", {\n      detail: {\n        sideNavExpanded: objDetails.sideNavExpanded,\n        sideNavMobile: objDetails.sideNavMobile,\n      },\n    });\n    this.el.dispatchEvent(event);\n  };\n\n  private toggleMenu = (): void => {\n    this.menuOpen = !this.menuOpen;\n    this.setMobileMenuAriaAttributes(this.menuOpen);\n\n    this.setToggleMenuFlyoutMenuVisibility(this.menuOpen);\n\n    this.emitSideNavigationExpanded({\n      sideNavExpanded: this.menuOpen,\n      sideNavMobile: true,\n    });\n  };\n\n  private setToggleMenuFlyoutMenuVisibility = (menuOpen: boolean) => {\n    const sideNav = this.el.shadowRoot.querySelector(\n      \"#side-navigation\"\n    ) as HTMLDivElement;\n    const sideNavInner = sideNav.querySelector(\n      \".side-navigation-inner\"\n    ) as HTMLElement;\n    const bottomWrapper = sideNav.querySelector(\n      \".bottom-wrapper\"\n    ) as HTMLElement;\n\n    if (menuOpen) {\n      bottomWrapper.classList.add(\"menu-visibility-visible\");\n      sideNavInner.classList.add(\"menu-visibility-visible\");\n    } else {\n      setTimeout(() => {\n        sideNavInner.classList.remove(\"menu-visibility-visible\");\n        bottomWrapper.classList.remove(\"menu-visibility-visible\");\n      }, this.ANIMATION_DURATION);\n    }\n  };\n\n  private setMobileMenuAriaAttributes = (menuOpen: boolean) => {\n    const nativeButton = this.el.shadowRoot\n      .querySelector(\"#menu-button\")\n      .shadowRoot.querySelector(\"button\");\n\n    if (menuOpen) {\n      nativeButton.setAttribute(\"aria-expanded\", \"true\");\n      nativeButton.setAttribute(\"aria-label\", \"Close navigation menu\");\n    } else {\n      nativeButton.setAttribute(\"aria-expanded\", \"false\");\n      nativeButton.setAttribute(\"aria-label\", \"Open navigation menu\");\n    }\n  };\n\n  private setAndRemoveNoWrapAfterMenuExpanded = () => {\n    const appTitle = this.el.shadowRoot.querySelector(\n      \".title-link ic-typography\"\n    );\n\n    appTitle.classList.add(\"ic-typography-no-wrap\");\n\n    setTimeout(() => {\n      appTitle.classList.remove(\"ic-typography-no-wrap\");\n    }, this.ANIMATION_DURATION);\n  };\n\n  private toggleMenuExpanded = (): void => {\n    this.menuExpanded = !this.menuExpanded;\n\n    if (this.menuExpanded) {\n      this.setAndRemoveNoWrapAfterMenuExpanded();\n    }\n\n    this.arrangeSlottedNavigationItem(this.menuExpanded);\n\n    this.displayTooltipWithExpandedLongLabel(this.menuExpanded);\n\n    if (this.collapsedIconLabels) {\n      this.animateCollapsedIconLabels();\n    }\n\n    this.emitSideNavigationExpanded({ sideNavExpanded: this.menuExpanded });\n  };\n\n  /**\n   * In order to style nested slotted elements (e.g. using React Router components), this method\n   * rearranges the a tag and labels and adds inline styling expand/collaped animations as external CSS classes are not\n   * do not take affect.\n   * @param menuExpanded boolean - true or false depending on seide navigation state\n   */\n  private arrangeSlottedNavigationItem = (menuExpanded?: boolean) => {\n    const navItems = this.el.querySelectorAll(\"ic-navigation-item\");\n\n    navItems.forEach((navItem) => {\n      const hasUsedSlot = isSlotUsed(navItem, \"navigation-item\");\n\n      if (hasUsedSlot) {\n        const navItemSlot = navItem.querySelector(\"[slot='navigation-item']\");\n        const iconWrapper = document.createElement(\"div\");\n        const icon = navItemSlot.querySelector(\"svg\");\n        const label = navItem.textContent.trim();\n        const icTypography = document.createElement(\"ic-typography\");\n        icTypography.classList.add(\n          \"ic-typography-label\",\n          \"hydrated\",\n          \"navigation-item-side-nav-slotted-text\"\n        );\n\n        iconWrapper.className = \"icon-container\";\n        iconWrapper.append(icon);\n\n        navItemSlot.textContent = \"\";\n\n        icTypography.textContent = label;\n\n        navItemSlot.append(iconWrapper);\n        navItemSlot.append(icTypography);\n\n        if (this.collapsedIconLabels) {\n          this.styleSlottedCollapsedIconLabels(menuExpanded, icTypography);\n        } else {\n          this.styleSlottedIconLabels(menuExpanded, icTypography);\n        }\n      }\n    });\n  };\n\n  private styleSlottedCollapsedIconLabels = (\n    menuExpanded: boolean,\n    icTypography: HTMLIcTypographyElement\n  ) => {\n    if (menuExpanded) {\n      icTypography.style.marginTop = \"0\";\n      icTypography.style.whiteSpace = \"nowrap\";\n      icTypography.style.overflow = \"hidden\";\n      icTypography.style.textOverflow = \"ellipsis\";\n    } else {\n      icTypography.style.marginTop = \"10px\";\n      icTypography.style.whiteSpace = \"nowrap\";\n      icTypography.style.overflow = \"hidden\";\n      icTypography.style.textOverflow = \"ellipsis\";\n    }\n  };\n\n  private styleSlottedIconLabels = (\n    menuExpanded: boolean,\n    icTypography: HTMLSpanElement\n  ) => {\n    if (menuExpanded) {\n      icTypography.style.opacity = \"1\";\n      icTypography.style.visibility = \"visible\";\n      icTypography.style.transition =\n        \"visibility 0s, opacity var(--ic-easing-transition-slow)\";\n    } else {\n      icTypography.style.opacity = \"0\";\n      icTypography.style.visibility = \"hidden\";\n      icTypography.style.transition =\n        \"visibility 0s, opacity var(--ic-easing-transition-slow)\";\n    }\n  };\n\n  private animateCollapsedIconLabels = () => {\n    const primaryNavigationWrapper = this.el.shadowRoot.querySelector(\n      \".primary-navigation\"\n    );\n    const secondaryNavigationWrapper = this.el.shadowRoot.querySelector(\n      \".bottom-wrapper > .secondary-navigation\"\n    );\n\n    if (primaryNavigationWrapper) {\n      primaryNavigationWrapper.classList.remove(\"collapsed-icon-labels-end\");\n      primaryNavigationWrapper.classList.add(\"collapsed-icon-labels-start\");\n    }\n\n    if (secondaryNavigationWrapper) {\n      secondaryNavigationWrapper.classList.remove(\"collapsed-icon-labels-end\");\n      secondaryNavigationWrapper.classList.add(\"collapsed-icon-labels-start\");\n    }\n\n    this.el.addEventListener(\"transitionend\", () => {\n      if (primaryNavigationWrapper) {\n        primaryNavigationWrapper.classList.remove(\n          \"collapsed-icon-labels-start\"\n        );\n        primaryNavigationWrapper.classList.add(\"collapsed-icon-labels-end\");\n      }\n\n      if (secondaryNavigationWrapper) {\n        secondaryNavigationWrapper.classList.remove(\n          \"collapsed-icon-labels-start\"\n        );\n        secondaryNavigationWrapper.classList.add(\"collapsed-icon-labels-end\");\n      }\n    });\n  };\n\n  private paddingIconWidth = (\n    navItems: HTMLIcNavigationItemElement[]\n  ): number => {\n    const navItemLink =\n      (navItems[0].shadowRoot &&\n        navItems[0].shadowRoot.querySelector(\"ic-tooltip a\")) ||\n      navItems[0].querySelector(\"a\");\n    const navItemSVG = navItems[0].querySelector(\"svg\");\n\n    const navStyles = {\n      gap: window.getComputedStyle(navItemLink).gap,\n      iconWidth: window.getComputedStyle(navItemSVG).width,\n      paddingLeft: window.getComputedStyle(navItemLink).paddingLeft,\n    };\n\n    return Object.values(navStyles).reduce((prev, curr) => {\n      return (prev += parseInt(curr));\n    }, 0);\n  };\n\n  private displayTooltipWithExpandedLongLabel = (menuExpanded: boolean) => {\n    let timer;\n\n    if (menuExpanded) {\n      timer = setTimeout(() => {\n        const sideNavWidth = this.el.clientWidth;\n\n        const navigationItems: HTMLIcNavigationItemElement[] = Array.from(\n          this.el.querySelectorAll(\"ic-navigation-item\")\n        );\n\n        const paddingIconDelta = navigationItems.length\n          ? this.paddingIconWidth(navigationItems)\n          : 0;\n\n        navigationItems.forEach(\n          (navigationItem: HTMLIcNavigationItemElement) => {\n            const icTypographyScrollWidth =\n              (\n                navigationItem.shadowRoot &&\n                navigationItem.shadowRoot.querySelector(\n                  \"ic-tooltip .link ic-typography.ic-typography-label\"\n                )\n              )?.scrollWidth ||\n              navigationItem.querySelector(\"ic-typography.ic-typography-label\")\n                ?.scrollWidth;\n\n            if (icTypographyScrollWidth > sideNavWidth - paddingIconDelta) {\n              navigationItem.setAttribute(\"display-navigation-tooltip\", \"true\");\n            }\n          }\n        );\n      }, this.ANIMATION_DURATION);\n    } else {\n      clearTimeout(timer);\n\n      const navigationItems: HTMLIcNavigationItemElement[] = Array.from(\n        this.el.querySelectorAll(\"ic-navigation-item\")\n      );\n      navigationItems.forEach((navigationItem: HTMLIcNavigationItemElement) => {\n        navigationItem.setAttribute(\"display-navigation-tooltip\", \"false\");\n      });\n    }\n  };\n\n  private setMenuExpanded = (expanded: boolean): void => {\n    this.menuExpanded = expanded;\n  };\n\n  /**\n   * As the mobile top bar is fixed, a padding top is required\n   * to push main content down the height of the mobile top bar\n   * @param value - padding-top css value\n   */\n  private setParentPaddingTop = (value: string) => {\n    this.el.parentElement.style.setProperty(\"padding-top\", value);\n  };\n\n  private setParentPaddingLeft = (value: string) => {\n    this.el.parentElement.style.setProperty(\"padding-left\", value);\n  };\n\n  private resizeObserver: ResizeObserver = null;\n\n  private resizeObserverCallback = (currSize: number) => {\n    if (currSize !== this.deviceSize) {\n      this.deviceSize = currSize;\n\n      if (currSize === DEVICE_SIZES.S) {\n        if (!this.disableAutoParentStyling) {\n          const topBarHeight =\n            this.el.shadowRoot.querySelector(\".top-bar\").scrollHeight;\n          this.setParentPaddingTop(`${topBarHeight}px`);\n          this.setParentPaddingLeft(\"0\");\n\n          if (this.inline) {\n            this.el.parentElement.style.setProperty(\n              \"height\",\n              `calc(100% - ${topBarHeight}px)`\n            );\n          }\n        }\n        this.emitSideNavigationExpanded({\n          sideNavExpanded: this.menuExpanded,\n          sideNavMobile: true,\n        });\n      } else {\n        if (!this.disableAutoParentStyling) {\n          this.setParentPaddingTop(\"0\");\n          this.el.parentElement.style.setProperty(\"height\", \"100%\");\n        }\n        this.emitSideNavigationExpanded({\n          sideNavExpanded: this.menuExpanded,\n          sideNavMobile: false,\n        });\n      }\n\n      if (currSize > DEVICE_SIZES.L) {\n        if (!this.disableAutoParentStyling) {\n          this.setParentPaddingTop(\"0\");\n          this.setParentPaddingLeft(\"0\");\n        }\n      } else if (\n        currSize > DEVICE_SIZES.S &&\n        currSize <= DEVICE_SIZES.L &&\n        !this.static &&\n        !this.disableAutoParentStyling\n      ) {\n        if (this.collapsedIconLabels) {\n          this.setParentPaddingLeft(\"calc(var(--ic-space-xxl) * 2)\");\n        } else {\n          this.setParentPaddingLeft(\n            \"calc(var(--ic-space-xxl) + var(--ic-space-xs))\"\n          );\n        }\n      }\n    }\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      const currSize = getCurrentDeviceSize();\n      this.deviceSizeAppTitle = currSize;\n      this.resizeObserverCallback(currSize);\n    });\n\n    this.resizeObserver.observe(document.body, { box: \"content-box\" });\n  };\n\n  private setCollapsedIconLabels = () => {\n    const navigationItems: HTMLIcNavigationItemElement[] = Array.from(\n      this.el.querySelectorAll(\"ic-navigation-item\")\n    );\n    navigationItems.forEach((navigationItem: HTMLIcNavigationItemElement) => {\n      navigationItem.setAttribute(\"collapsed-icon-label\", \"true\");\n    });\n  };\n\n  private styleSlottedCollapsedIconLabel = () => {\n    const dynamicSlottedIcTypographyComps: HTMLIcTypographyElement[] =\n      Array.from(\n        this.el.querySelectorAll(\".navigation-item-side-nav-slotted-text\")\n      );\n\n    dynamicSlottedIcTypographyComps.forEach((icTypography) => {\n      if (\n        icTypography?.parentElement?.parentElement?.classList.contains(\n          \"navigation-item-side-nav-collapsed-with-label\"\n        )\n      ) {\n        icTypography.style.whiteSpace = \"nowrap\";\n        icTypography.style.overflow = \"hidden\";\n        icTypography.style.textOverflow = \"ellipsis\";\n        icTypography.style.marginTop = \"10px\";\n      }\n    });\n  };\n\n  private renderTopBar = ({\n    isSDevice,\n    foregroundColor,\n    menuOpen,\n    href,\n    isAppNameSubtitleVariant,\n    appTitle,\n  }: IcTopBar) => (\n    <div\n      class={{\n        \"top-bar\": true,\n        [this.foregroundColor]: true,\n      }}\n    >\n      {isSDevice && (\n        <nav\n          aria-labelledby=\"menu-navigation-toggle-button-landmark\"\n          aria-hidden=\"false\"\n        >\n          <ic-button\n            aria-label=\"Open navigation menu\"\n            class=\"menu-button\"\n            id=\"menu-button\"\n            variant=\"secondary\"\n            size=\"small\"\n            full-width=\"true\"\n            appearance={foregroundColor}\n            onClick={this.toggleMenu}\n            aria-owns=\"side-navigation\"\n            aria-haspopup=\"true\"\n            aria-expanded=\"false\"\n          >\n            <span\n              class=\"mobile-top-bar-menu-icon\"\n              slot=\"icon\"\n              innerHTML={menuOpen ? closeIcon : menuIcon}\n            ></span>\n            {menuOpen ? \"Close\" : \"Menu\"}\n          </ic-button>\n          <span\n            id=\"menu-navigation-toggle-button-landmark\"\n            class=\"navigation-landmark-title\"\n            aria-hidden=\"true\"\n          >\n            Navigation menu toggle button\n          </span>\n        </nav>\n      )}\n      <div class=\"app-title-wrapper\">\n        <a href={href} class=\"title-link\">\n          <div class=\"app-icon-container\" aria-hidden=\"true\">\n            <slot name=\"app-icon\"></slot>\n          </div>\n          <ic-typography\n            variant={isAppNameSubtitleVariant ? \"subtitle-small\" : \"h3\"}\n          >\n            {appTitle}\n          </ic-typography>\n        </a>\n      </div>\n    </div>\n  );\n\n  componentWillLoad(): void {\n    if (this.expanded) {\n      this.setMenuExpanded(true);\n    } else {\n      this.setMenuExpanded(false);\n    }\n\n    if (this.collapsedIconLabels) {\n      this.setCollapsedIconLabels();\n    }\n\n    this.hasSecondaryNavigation = isSlotUsed(this.el, \"secondary-navigation\");\n  }\n\n  componentDidLoad(): void {\n    this.emitSideNavigationExpanded({\n      sideNavExpanded: this.menuExpanded,\n      sideNavMobile: this.deviceSize === DEVICE_SIZES.S,\n    });\n\n    checkResizeObserver(this.runResizeObserver);\n    this.arrangeSlottedNavigationItem();\n    this.styleSlottedCollapsedIconLabel();\n    this.displayTooltipWithExpandedLongLabel(this.menuExpanded);\n\n    onComponentRequiredPropUndefined(\n      [{ prop: this.appTitle, propName: \"app-title\" }],\n      \"Side Navigation\"\n    );\n  }\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  render() {\n    const {\n      appTitle,\n      menuOpen,\n      foregroundColor,\n      menuExpanded,\n      href,\n      status,\n      version,\n      collapsedIconLabels,\n      inline,\n    } = this;\n\n    const isSDevice = this.deviceSize === DEVICE_SIZES.S;\n    const isMdDevice = this.deviceSize === DEVICE_SIZES.M;\n    const isLgDevice = this.deviceSize >= DEVICE_SIZES.L;\n    const isAppNameSubtitleVariant = this.deviceSizeAppTitle === DEVICE_SIZES.S;\n    const displayExpandBtn = isMdDevice || (isLgDevice && !this.static);\n\n    const topBarProps: IcTopBar = {\n      isSDevice,\n      foregroundColor,\n      menuOpen,\n      href,\n      isAppNameSubtitleVariant,\n      appTitle,\n    };\n\n    return (\n      <Host\n        class={{\n          \"xs-menu-open\": menuOpen && isSDevice,\n          \"xs-menu-close\": !menuOpen && isSDevice,\n          \"sm-collapsed\": !isSDevice && !menuExpanded,\n          \"sm-expanded\": !isSDevice && menuExpanded,\n          [IcThemeForegroundEnum.Dark]:\n            foregroundColor === IcThemeForegroundEnum.Dark,\n          [\"collapsed-labels\"]:\n            !isSDevice && !menuExpanded && collapsedIconLabels,\n          [\"static\"]: this.static,\n          [\"inline\"]: inline,\n        }}\n      >\n        {isSDevice && this.renderTopBar({ ...topBarProps })}\n        <div class=\"side-navigation\" id=\"side-navigation\">\n          {!isSDevice && this.renderTopBar({ ...topBarProps })}\n          <div class=\"side-navigation-inner\">\n            {isSlotUsed(this.el, \"primary-navigation\") && (\n              <nav\n                class=\"primary-navigation\"\n                aria-labelledby=\"primary-navigation-landmark\"\n              >\n                <span\n                  aria-hidden=\"true\"\n                  class=\"navigation-landmark-title\"\n                  id=\"primary-navigation-landmark\"\n                >\n                  Primary\n                </span>\n                <ul class=\"navigation-list\">\n                  <slot name=\"primary-navigation\"></slot>\n                </ul>\n              </nav>\n            )}\n          </div>\n          <div\n            class={{\n              [\"bottom-wrapper\"]: true,\n              [\"classification-spacing\"]: hasClassificationBanner(),\n            }}\n          >\n            {isSlotUsed(this.el, \"secondary-navigation\") && (\n              <nav\n                class=\"secondary-navigation\"\n                aria-labelledby=\"secondary-navigation-landmark\"\n              >\n                <span\n                  aria-hidden=\"true\"\n                  class=\"navigation-landmark-title\"\n                  id=\"secondary-navigation-landmark\"\n                >\n                  Secondary\n                </span>\n                <ul class=\"navigation-list\">\n                  <slot name=\"secondary-navigation\"></slot>\n                </ul>\n              </nav>\n            )}\n            <div class=\"bottom-side-nav\">\n              {this.hasSecondaryNavigation && <ic-divider></ic-divider>}\n              {displayExpandBtn && (\n                <button\n                  class=\"menu-expand-button\"\n                  innerHTML={chevronIcon}\n                  onClick={this.toggleMenuExpanded}\n                  aria-label={`${\n                    menuExpanded ? \"Collapse\" : \"Expand\"\n                  } side navigation`}\n                ></button>\n              )}\n              <div class=\"app-status-wrapper\">\n                {status !== \"\" && (\n                  <div\n                    class={{\n                      [\"app-status\"]: true,\n                    }}\n                  >\n                    <ic-typography\n                      aria-label=\"app tag\"\n                      variant=\"label-uppercase\"\n                      class=\"app-status-text\"\n                    >\n                      {status}\n                    </ic-typography>\n                  </div>\n                )}\n                {version !== \"\" && (\n                  <ic-typography\n                    variant=\"label\"\n                    class=\"app-version\"\n                    aria-label=\"app version\"\n                  >\n                    {version}\n                  </ic-typography>\n                )}\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-side-navigation.js","mappings":"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","names":[],"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":[":host {\n  display: block;\n\n  --side-navigation-position: fixed;\n  --side-navigation-position-left: 0;\n  --side-navigation-position-top: var(--ic-space-xxl);\n  --side-navigation-height: var(--ic-space-xxl);\n  --sm-side-navigation-top-bar-height: 56px;\n  --sm-side-navigation-collapsed-labels-width: 96px;\n  --sm-side-navigation-expand-transition-duration: var(\n    --ic-transition-duration-slow\n  );\n  --side-navigation-width: 320px;\n}\n\n:host > * {\n  box-sizing: border-box;\n}\n\n.side-navigation {\n  display: flex;\n  flex-direction: column;\n  width: var(--side-navigation-width);\n  color: var(--ic-theme-text);\n  position: var(--side-navigation-position);\n  top: var(--side-navigation-position-top);\n  left: calc(var(--side-navigation-width) * -1);\n  bottom: 0;\n  background-color: var(--ic-theme-primary);\n}\n\n:host(.inline) .side-navigation {\n  position: absolute;\n  height: 100%;\n}\n\n:host(.anchor-right) .side-navigation {\n  right: calc(var(--side-navigation-width) * -1);\n}\n\n.classification-spacing {\n  margin-bottom: var(--ic-space-lg);\n}\n\n.navigation-list {\n  padding: 0;\n  margin: 0;\n  list-style: none;\n}\n\n.side-navigation-inner {\n  background-color: var(--ic-theme-primary);\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 0;\n  overflow: auto;\n  visibility: hidden;\n}\n\n:host(.inline) .side-navigation-inner {\n  flex: 1;\n}\n\n:host(.xs-menu-open) .side-navigation {\n  transition: left var(--ic-easing-transition-slow);\n  left: 0;\n}\n\n:host(.xs-menu-close) .side-navigation {\n  left: calc(var(--side-navigation-width) * -1);\n  transition: left var(--ic-easing-transition-slow);\n}\n\n:host(.anchor-right.xs-menu-open) .side-navigation {\n  right: 0;\n  left: auto;\n}\n\n:host(.anchor-right.xs-menu-close) .side-navigation {\n  right: calc(var(--side-navigation-width) * -1);\n  left: auto;\n  transition: right var(--ic-easing-transition-slow);\n}\n\n.bottom-wrapper {\n  border-top: var(--ic-keyline-lighten);\n  position: sticky;\n  bottom: 0;\n  left: 0;\n  z-index: 2;\n  box-shadow: -3px -3px 8px rgb(0 0 0 / 20%);\n  background-color: var(--ic-theme-primary);\n  display: flex;\n  flex-direction: column;\n  visibility: hidden;\n}\n\n:host(.dark) .bottom-wrapper {\n  border-top: var(--ic-keyline-darken);\n}\n\n/* Mobile Top Bar */\n\n.top-bar {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  min-height: var(--side-navigation-height);\n  padding: var(--ic-space-xs);\n  box-sizing: border-box;\n  background-color: var(--ic-theme-primary);\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  border-bottom: var(--ic-keyline-darken);\n  box-shadow: var(--ic-elevation-overlay);\n  z-index: 2;\n  overflow: hidden;\n  visibility: visible;\n}\n\n:host(.inline) .top-bar {\n  position: absolute;\n}\n\n.top-bar.dark a:focus {\n  box-shadow: var(--ic-border-focus);\n}\n\n.top-bar.light {\n  border-bottom: var(--ic-keyline-lighten);\n}\n\n.app-title-wrapper {\n  display: flex;\n  margin-left: var(--ic-space-xs);\n  border-left: var(--ic-keyline-darken);\n  padding-left: var(--ic-space-xxs);\n  color: var(--ic-theme-text);\n  align-items: center;\n}\n\n@media screen and (min-width: 340px) {\n  .app-title-wrapper ic-typography {\n    margin-left: var(--ic-space-xs);\n  }\n}\n\n:host .title-link:link {\n  display: flex;\n  align-items: center;\n  transition: box-shadow var(--ic-easing-transition-fast),\n    background-color var(--ic-easing-transition-fast);\n  text-decoration: none;\n  padding: var(--ic-space-xxs);\n  color: var(--ic-theme-text);\n}\n\n:host .title-link:visited,\n:host .title-link:active {\n  color: var(--ic-theme-text);\n}\n\n:host .title-link:hover {\n  border-radius: var(--ic-border-radius);\n  background-color: var(--ic-theme-hover);\n}\n\n:host .title-link:active {\n  background-color: var(--ic-theme-active);\n}\n\n:host .title-link:focus {\n  border-radius: var(--ic-border-radius);\n  box-shadow: var(--ic-border-focus);\n  outline: var(--ic-hc-focus-outline);\n  background-color: transparent;\n}\n\n:host .title-link ic-typography {\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n.app-title-wrapper ::slotted(svg) {\n  fill: var(--ic-theme-text);\n}\n\n.app-icon-container {\n  display: none;\n}\n\n.button-label {\n  display: flex;\n  align-items: center;\n}\n\n.mobile-top-bar-menu-icon {\n  display: flex;\n}\n\n.menu-button {\n  width: 104px;\n}\n\n.app-status-wrapper {\n  position: absolute;\n  right: var(--ic-space-md);\n  top: 0;\n  bottom: 0;\n  width: auto;\n  display: flex;\n  align-items: center;\n  pointer-events: none;\n}\n\n.app-status-wrapper .app-version {\n  max-width: 100px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.app-status-wrapper .app-status {\n  border-radius: 80px;\n  background-color: var(--ic-theme-text);\n  color: var(--ic-color-primary-text);\n  padding: var(--ic-space-xxs) var(--ic-space-lg);\n  margin-right: var(--ic-space-xs);\n  max-width: 100px;\n}\n\n.app-status-wrapper .app-status-text {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-width: 96px;\n}\n\n:host(.dark) .app-status-wrapper .app-status {\n  color: var(--ic-color-white-text);\n}\n\n.navigation-landmark-title {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n}\n\n/* Navigation Group */\n\n::slotted(ic-navigation-group) {\n  --navigation-group-height: 44px;\n  --navigation-group-width: 100%;\n  --navigation-group-justify-content: space-between;\n  --navigation-group-hover: var(--ic-theme-hover);\n  --navigation-group-text-hover: var(--ic-theme-text);\n  --navigation-item-child-height: 56px;\n  --navigation-item-child-active: var(--ic-action-dark-bg-active);\n  --navigation-item-child-color: var(--ic-theme-text);\n  --navigation-group-expand-toggle-padding: 4px;\n}\n\n/* Navigation Items */\n\n::slotted(ic-navigation-item),\n::slotted(ic-navigation-group) {\n  --navigation-item-height: 56px;\n  --navigation-item-width: auto;\n  --navigation-item-justify-content: flex-start;\n}\n\n/* Toggle Chevron */\n\n.bottom-side-nav {\n  position: relative;\n  align-content: flex-end;\n  height: var(--sm-side-navigation-top-bar-height);\n}\n\n.primary-navigation {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n\n  /* Hide scrollbar when required but keep functionality */\n  scrollbar-width: none;\n}\n\n.primary-navigation::-webkit-scrollbar {\n  display: none;\n}\n\n.primary-navigation,\n.secondary-navigation {\n  overflow-x: hidden;\n}\n\n.bottom-side-nav .menu-expand-button {\n  display: none;\n}\n\n.menu-visibility-visible {\n  visibility: visible;\n}\n\n.menu-visibility-hidden {\n  visibility: hidden;\n}\n\n/* Media Queries */\n\n@media screen and (min-width: 340px) {\n  .app-icon-container {\n    display: flex;\n  }\n}\n\n@media screen and (min-width: 577px) {\n  :host {\n    display: flex;\n    flex-direction: column;\n    height: 100vh;\n    position: var(--side-navigation-position);\n    left: 0;\n    top: 0;\n    bottom: 0;\n  }\n\n  :host(.static) {\n    position: relative;\n    left: auto;\n    top: auto;\n    bottom: auto;\n  }\n\n  .app-icon-container {\n    padding: var(--ic-space-xxs) 0;\n  }\n\n  .top-bar {\n    --side-navigation-height: var(--sm-side-navigation-top-bar-height);\n\n    position: relative;\n    padding: 0;\n    box-shadow: -3px 3px 8px rgb(0 0 0 / 20%);\n  }\n\n  :host(.inline) .top-bar {\n    position: sticky;\n  }\n\n  :host(.anchor-right) .top-bar {\n    box-shadow: 3px 3px 8px rgb(0 0 0 / 20%);\n  }\n\n  :host(.anchor-right) .bottom-wrapper {\n    box-shadow: 3px -3px 8px rgb(0 0 0 / 20%);\n  }\n\n  .side-navigation,\n  .top-bar {\n    width: var(--sm-side-navigation-top-bar-height);\n  }\n\n  :host(.sm-collapsed) {\n    width: var(--sm-side-navigation-top-bar-height);\n    transition: width var(--ic-easing-transition-slow);\n  }\n\n  :host(.sm-collapsed.collapsed-labels) {\n    width: var(--sm-side-navigation-collapsed-labels-width);\n  }\n\n  :host(.sm-expanded) {\n    width: var(--side-navigation-width);\n    transition: width var(--ic-easing-transition-slow);\n    box-shadow: var(--ic-elevation-overlay);\n  }\n\n  .side-navigation {\n    --side-navigation-position-top: 0;\n\n    flex: 1;\n    position: relative;\n    top: auto;\n    left: auto;\n    bottom: auto;\n  }\n\n  :host(.inline) .side-navigation {\n    position: relative;\n  }\n\n  :host(.anchor-right) .side-navigation {\n    left: auto;\n    right: 0;\n  }\n\n  .side-navigation-inner {\n    width: 100%;\n    visibility: visible;\n  }\n\n  .bottom-wrapper {\n    visibility: visible;\n  }\n\n  .app-title-wrapper {\n    margin-left: 0;\n    border-left: none;\n    padding: var(--ic-space-sm);\n  }\n\n  .app-title-wrapper ::slotted(svg) {\n    height: var(--ic-space-lg);\n    width: var(--ic-space-lg);\n  }\n\n  .app-title-wrapper ic-typography {\n    margin: calc(-1 * 4.5px) 0 calc(-1 * 4.5px) var(--ic-space-md);\n    font-weight: var(--ic-font-weight-semibold);\n  }\n\n  :host(.sm-collapsed) .app-title-wrapper ic-typography {\n    position: absolute;\n    left: -9999px;\n    opacity: 0;\n    transition: opacity var(--ic-easing-transition-slow);\n  }\n\n  :host(.sm-expanded) ic-typography {\n    position: relative;\n    left: 0;\n  }\n\n  :host(.sm-expanded) :is(.side-navigation, .top-bar) {\n    width: var(--side-navigation-width);\n    transition: width var(--ic-easing-transition-slow);\n  }\n\n  :host(.sm-collapsed) :is(.side-navigation, .top-bar) {\n    width: var(--sm-side-navigation-top-bar-height);\n    transition: width var(--ic-easing-transition-slow);\n  }\n\n  :host(.anchor-right.sm-expanded) :is(.side-navigation, .top-bar) {\n    left: auto;\n    right: 0;\n  }\n\n  .app-status-wrapper,\n  :host(.sm-collapsed) .app-status-wrapper {\n    display: none;\n  }\n\n  :host(.sm-expanded) .app-status-wrapper {\n    display: flex;\n  }\n\n  .bottom-side-nav {\n    justify-items: flex-end;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .bottom-side-nav .menu-expand-button {\n    padding-left: var(--ic-space-md);\n    height: var(--sm-side-navigation-top-bar-height);\n    width: 100%;\n    color: var(--ic-theme-text);\n    background-color: transparent;\n    outline: var(--ic-hc-focus-outline);\n    border: none;\n    cursor: pointer;\n    display: flex;\n    transition: var(--ic-easing-transition-fast);\n  }\n\n  .bottom-side-nav .menu-expand-button svg {\n    justify-items: flex-start;\n    align-self: center;\n  }\n\n  .bottom-side-nav .menu-expand-button:hover {\n    background-color: var(--ic-theme-hover);\n  }\n\n  :host .bottom-side-nav {\n    outline: none;\n  }\n\n  :host .bottom-side-nav .menu-expand-button:focus {\n    box-shadow: var(--ic-border-focus-inset);\n    border-radius: var(--ic-border-radius-inset);\n    background-color: transparent;\n  }\n\n  :host(.sm-collapsed) .bottom-side-nav .menu-expand-button svg {\n    transform: scaleX(1);\n    transition: transform var(--ic-easing-transition-slow);\n  }\n\n  :host(.sm-expanded) .bottom-side-nav .menu-expand-button svg {\n    transform: scaleX(-1);\n    transition: transform var(--ic-easing-transition-slow);\n  }\n\n  :host(.anchor-right.sm-collapsed) .bottom-side-nav .menu-expand-button svg {\n    transform: scaleX(-1);\n  }\n\n  :host(.anchor-right.sm-expanded) .bottom-side-nav .menu-expand-button svg {\n    transform: scaleX(1);\n  }\n\n  :host(.sm-collapsed) ::slotted(ic-navigation-item) {\n    --navigation-item-label-opacity: 1;\n  }\n\n  :host(.sm-collapsed) ::slotted(ic-navigation-item),\n  :host(.sm-collapsed) ::slotted(ic-navigation-group) {\n    --navigation-item-label-opacity: 0;\n  }\n\n  :host(.sm-expanded) ::slotted(ic-navigation-item),\n  :host(.sm-expanded) ::slotted(ic-navigation-group) {\n    --navigation-item-label-opacity: 1;\n  }\n\n  :host(.sm-collapsed) ::slotted(ic-navigation-group) {\n    --navigation-group-title-position: absolute;\n    --navigation-group-title-position-left: -9999px;\n    --navigation-group-title-opacity: none;\n  }\n\n  :host(.sm-expanded) ::slotted(ic-navigation-group) {\n    --navigation-group-title-position: relative;\n    --navigation-group-title-position-left: 0;\n    --navigation-group-expand-toggle-padding: 4px;\n    --navigation-group-title-opacity: flex;\n  }\n\n  :host(.sm-collapsed.collapsed-labels) .side-navigation,\n  :host(.sm-collapsed.collapsed-labels) .top-bar {\n    width: var(--sm-side-navigation-collapsed-labels-width);\n  }\n\n  :host(.sm-collapsed.collapsed-labels) .menu-expand-button {\n    padding: 0;\n  }\n\n  :host(.sm-collapsed.collapsed-labels) .app-title-wrapper {\n    width: 100%;\n    justify-content: center;\n  }\n\n  :host(.sm-collapsed.collapsed-labels) ::slotted(ic-navigation-group) {\n    --navigation-group-justify-content: center;\n    --navigation-item-label-opacity: 1;\n    --navigation-group-item-min-width: 100%;\n    --navigation-group-expand-toggle-padding: 16px;\n  }\n\n  :host(.collapsed-labels) .bottom-side-nav .menu-expand-button {\n    justify-content: center;\n  }\n\n  :host .collapsed-icon-labels-start {\n    visibility: hidden;\n    opacity: 0;\n  }\n\n  :host .collapsed-icon-labels-end {\n    visibility: visible;\n    opacity: 1;\n    transition: visibility 0s, opacity var(--ic-easing-transition-slow);\n  }\n}\n\n@media screen and (min-width: 993px) {\n  :host {\n    position: sticky;\n    left: auto;\n    top: 0;\n    bottom: 0;\n  }\n\n  :host(.sm-expanded) {\n    box-shadow: none;\n  }\n}\n\n@media (forced-colors: active) {\n  .side-navigation,\n  .top-bar {\n    border-right: var(--ic-hc-border);\n  }\n\n  slot[name=\"app-icon\"]::slotted(svg) {\n    fill: currentcolor;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Element,\n  Listen,\n} from \"@stencil/core\";\n\nimport menuIcon from \"../../assets/hamburger-menu-icon.svg\";\nimport closeIcon from \"../../assets/close-icon.svg\";\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\nimport {\n  getCurrentDeviceSize,\n  DEVICE_SIZES,\n  checkResizeObserver,\n  isSlotUsed,\n  getThemeForegroundColor,\n  getCssProperty,\n  hasClassificationBanner,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport {\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport { IcTopBar } from \"./ic-side-navigation.types\";\n\n/**\n * @slot app-icon - Content will be rendered adjacent to the app title at the very top of the side navigation.\n * @slot primary-navigation - Content will be rendered at the top of the side navigation.\n * @slot secondary-navigation - Content will be rendered at the bottom of the side navigation.\n */\n\n@Component({\n  tag: \"ic-side-navigation\",\n  styleUrl: \"ic-side-navigation.css\",\n  shadow: true,\n})\nexport class SideNavigation {\n  @Element() el: HTMLIcSideNavigationElement;\n  /**\n   * The title of the app to be displayed.\n   */\n  @Prop() appTitle!: string;\n  /**\n   * The status of the app to be displayed.\n   */\n  @Prop() status: string;\n  /**\n   * The version of the app to be displayed.\n   */\n  @Prop() version: string;\n  /**\n   * If `true`, the side navigation will load in an expanded state.\n   */\n  @Prop() expanded: boolean = false;\n  /**\n   * The URL that the app title link points to.\n   */\n  @Prop() href: string = \"/\";\n  /**\n   * If `true`, the menu expand button will be removed (PLEASE NOTE: This takes effect on screen sizes 992px and above).\n   */\n  @Prop() static: boolean = false;\n  /**\n   * If `true`, the icon and label will appear when side navigation is collapsed.\n   */\n  @Prop() collapsedIconLabels: boolean = false;\n  /**\n   * @internal If `true`, side navigation will be contained by its parent element.\n   */\n  @Prop() inline: boolean = false;\n\n  /**\n   * If `true`, automatic parent wrapper styling will be disabled.\n   */\n  @Prop() disableAutoParentStyling: boolean = false;\n\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n  @State() menuOpen: boolean = false;\n  @State() menuExpanded: boolean = false;\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() deviceSizeAppTitle = DEVICE_SIZES.S;\n  @State() hasSecondaryNavigation: boolean = false;\n\n  private ANIMATION_DURATION =\n    parseInt(getCssProperty(\"--ic-transition-duration-slow\")) || 0;\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.foregroundColor = theme.mode;\n  }\n\n  private emitSideNavigationExpanded = (objDetails: {\n    sideNavExpanded: boolean;\n    sideNavMobile?: boolean;\n  }): void => {\n    const event = new CustomEvent(\"sideNavExpanded\", {\n      detail: {\n        sideNavExpanded: objDetails.sideNavExpanded,\n        sideNavMobile: objDetails.sideNavMobile,\n      },\n    });\n    this.el.dispatchEvent(event);\n  };\n\n  private toggleMenu = (): void => {\n    this.menuOpen = !this.menuOpen;\n    this.setMobileMenuAriaAttributes(this.menuOpen);\n\n    this.setToggleMenuFlyoutMenuVisibility(this.menuOpen);\n\n    this.emitSideNavigationExpanded({\n      sideNavExpanded: this.menuOpen,\n      sideNavMobile: true,\n    });\n  };\n\n  private setToggleMenuFlyoutMenuVisibility = (menuOpen: boolean) => {\n    const sideNav = this.el.shadowRoot.querySelector(\n      \"#side-navigation\"\n    ) as HTMLDivElement;\n    const sideNavInner = sideNav.querySelector(\n      \".side-navigation-inner\"\n    ) as HTMLElement;\n    const bottomWrapper = sideNav.querySelector(\n      \".bottom-wrapper\"\n    ) as HTMLElement;\n\n    if (menuOpen) {\n      bottomWrapper.classList.add(\"menu-visibility-visible\");\n      sideNavInner.classList.add(\"menu-visibility-visible\");\n    } else {\n      setTimeout(() => {\n        sideNavInner.classList.remove(\"menu-visibility-visible\");\n        bottomWrapper.classList.remove(\"menu-visibility-visible\");\n      }, this.ANIMATION_DURATION);\n    }\n  };\n\n  private setMobileMenuAriaAttributes = (menuOpen: boolean) => {\n    const nativeButton = this.el.shadowRoot\n      .querySelector(\"#menu-button\")\n      .shadowRoot.querySelector(\"button\");\n\n    if (menuOpen) {\n      nativeButton.setAttribute(\"aria-expanded\", \"true\");\n      nativeButton.setAttribute(\"aria-label\", \"Close navigation menu\");\n    } else {\n      nativeButton.setAttribute(\"aria-expanded\", \"false\");\n      nativeButton.setAttribute(\"aria-label\", \"Open navigation menu\");\n    }\n  };\n\n  private setAndRemoveNoWrapAfterMenuExpanded = () => {\n    const appTitle = this.el.shadowRoot.querySelector(\n      \".title-link ic-typography\"\n    );\n\n    appTitle.classList.add(\"ic-typography-no-wrap\");\n\n    setTimeout(() => {\n      appTitle.classList.remove(\"ic-typography-no-wrap\");\n    }, this.ANIMATION_DURATION);\n  };\n\n  private toggleMenuExpanded = (): void => {\n    this.menuExpanded = !this.menuExpanded;\n\n    if (this.menuExpanded) {\n      this.setAndRemoveNoWrapAfterMenuExpanded();\n    }\n\n    this.arrangeSlottedNavigationItem(this.menuExpanded);\n\n    this.displayTooltipWithExpandedLongLabel(this.menuExpanded);\n\n    if (this.collapsedIconLabels) {\n      this.animateCollapsedIconLabels();\n    }\n\n    this.emitSideNavigationExpanded({ sideNavExpanded: this.menuExpanded });\n  };\n\n  /**\n   * In order to style nested slotted elements (e.g. using React Router components), this method\n   * rearranges the a tag and labels and adds inline styling expand/collaped animations as external CSS classes are not\n   * do not take affect.\n   * @param menuExpanded boolean - true or false depending on seide navigation state\n   */\n  private arrangeSlottedNavigationItem = (menuExpanded?: boolean) => {\n    const navItems = this.el.querySelectorAll(\"ic-navigation-item\");\n\n    navItems.forEach((navItem) => {\n      const hasUsedSlot = isSlotUsed(navItem, \"navigation-item\");\n\n      if (hasUsedSlot) {\n        const navItemSlot = navItem.querySelector(\"[slot='navigation-item']\");\n        const iconWrapper = document.createElement(\"div\");\n        const icon = navItemSlot.querySelector(\"svg\");\n        const label = navItem.textContent.trim();\n        const icTypography = document.createElement(\"ic-typography\");\n        icTypography.classList.add(\n          \"ic-typography-label\",\n          \"hydrated\",\n          \"navigation-item-side-nav-slotted-text\"\n        );\n\n        iconWrapper.className = \"icon-container\";\n        iconWrapper.append(icon);\n\n        navItemSlot.textContent = \"\";\n\n        icTypography.textContent = label;\n\n        navItemSlot.append(iconWrapper);\n        navItemSlot.append(icTypography);\n\n        if (this.collapsedIconLabels) {\n          this.styleSlottedCollapsedIconLabels(menuExpanded, icTypography);\n        } else {\n          this.styleSlottedIconLabels(menuExpanded, icTypography);\n        }\n      }\n    });\n  };\n\n  private styleSlottedCollapsedIconLabels = (\n    menuExpanded: boolean,\n    icTypography: HTMLIcTypographyElement\n  ) => {\n    if (menuExpanded) {\n      icTypography.style.marginTop = \"0\";\n      icTypography.style.whiteSpace = \"nowrap\";\n      icTypography.style.overflow = \"hidden\";\n      icTypography.style.textOverflow = \"ellipsis\";\n    } else {\n      icTypography.style.marginTop = \"10px\";\n      icTypography.style.whiteSpace = \"nowrap\";\n      icTypography.style.overflow = \"hidden\";\n      icTypography.style.textOverflow = \"ellipsis\";\n    }\n  };\n\n  private styleSlottedIconLabels = (\n    menuExpanded: boolean,\n    icTypography: HTMLSpanElement\n  ) => {\n    if (menuExpanded) {\n      icTypography.style.opacity = \"1\";\n      icTypography.style.visibility = \"visible\";\n      icTypography.style.transition =\n        \"visibility 0s, opacity var(--ic-easing-transition-slow)\";\n    } else {\n      icTypography.style.opacity = \"0\";\n      icTypography.style.visibility = \"hidden\";\n      icTypography.style.transition =\n        \"visibility 0s, opacity var(--ic-easing-transition-slow)\";\n    }\n  };\n\n  private animateCollapsedIconLabels = () => {\n    const primaryNavigationWrapper = this.el.shadowRoot.querySelector(\n      \".primary-navigation\"\n    );\n    const secondaryNavigationWrapper = this.el.shadowRoot.querySelector(\n      \".bottom-wrapper > .secondary-navigation\"\n    );\n\n    if (primaryNavigationWrapper) {\n      primaryNavigationWrapper.classList.remove(\"collapsed-icon-labels-end\");\n      primaryNavigationWrapper.classList.add(\"collapsed-icon-labels-start\");\n    }\n\n    if (secondaryNavigationWrapper) {\n      secondaryNavigationWrapper.classList.remove(\"collapsed-icon-labels-end\");\n      secondaryNavigationWrapper.classList.add(\"collapsed-icon-labels-start\");\n    }\n\n    this.el.addEventListener(\"transitionend\", () => {\n      if (primaryNavigationWrapper) {\n        primaryNavigationWrapper.classList.remove(\n          \"collapsed-icon-labels-start\"\n        );\n        primaryNavigationWrapper.classList.add(\"collapsed-icon-labels-end\");\n      }\n\n      if (secondaryNavigationWrapper) {\n        secondaryNavigationWrapper.classList.remove(\n          \"collapsed-icon-labels-start\"\n        );\n        secondaryNavigationWrapper.classList.add(\"collapsed-icon-labels-end\");\n      }\n    });\n  };\n\n  private paddingIconWidth = (\n    navItems: HTMLIcNavigationItemElement[]\n  ): number => {\n    const navItemLink =\n      (navItems[0].shadowRoot &&\n        navItems[0].shadowRoot.querySelector(\"ic-tooltip a\")) ||\n      navItems[0].querySelector(\"a\");\n    const navItemSVG = navItems[0].querySelector(\"svg\");\n\n    const navStyles = {\n      gap: window.getComputedStyle(navItemLink).gap,\n      iconWidth: window.getComputedStyle(navItemSVG).width,\n      paddingLeft: window.getComputedStyle(navItemLink).paddingLeft,\n    };\n\n    return Object.values(navStyles).reduce((prev, curr) => {\n      return (prev += parseInt(curr));\n    }, 0);\n  };\n\n  private displayTooltipWithExpandedLongLabel = (menuExpanded: boolean) => {\n    let timer;\n\n    if (menuExpanded) {\n      timer = setTimeout(() => {\n        const sideNavWidth = this.el.clientWidth;\n\n        const navigationItems: HTMLIcNavigationItemElement[] = Array.from(\n          this.el.querySelectorAll(\"ic-navigation-item\")\n        );\n\n        const paddingIconDelta = navigationItems.length\n          ? this.paddingIconWidth(navigationItems)\n          : 0;\n\n        navigationItems.forEach(\n          (navigationItem: HTMLIcNavigationItemElement) => {\n            const icTypographyScrollWidth =\n              (\n                navigationItem.shadowRoot &&\n                navigationItem.shadowRoot.querySelector(\n                  \"ic-tooltip .link ic-typography.ic-typography-label\"\n                )\n              )?.scrollWidth ||\n              navigationItem.querySelector(\"ic-typography.ic-typography-label\")\n                ?.scrollWidth;\n\n            if (icTypographyScrollWidth > sideNavWidth - paddingIconDelta) {\n              navigationItem.setAttribute(\"display-navigation-tooltip\", \"true\");\n            }\n          }\n        );\n      }, this.ANIMATION_DURATION);\n    } else {\n      clearTimeout(timer);\n\n      const navigationItems: HTMLIcNavigationItemElement[] = Array.from(\n        this.el.querySelectorAll(\"ic-navigation-item\")\n      );\n      navigationItems.forEach((navigationItem: HTMLIcNavigationItemElement) => {\n        navigationItem.setAttribute(\"display-navigation-tooltip\", \"false\");\n      });\n    }\n  };\n\n  private setMenuExpanded = (expanded: boolean): void => {\n    this.menuExpanded = expanded;\n  };\n\n  /**\n   * As the mobile top bar is fixed, a padding top is required\n   * to push main content down the height of the mobile top bar\n   * @param value - padding-top css value\n   */\n  private setParentPaddingTop = (value: string) => {\n    this.el.parentElement.style.setProperty(\"padding-top\", value);\n  };\n\n  private setParentPaddingLeft = (value: string) => {\n    this.el.parentElement.style.setProperty(\"padding-left\", value);\n  };\n\n  private resizeObserver: ResizeObserver = null;\n\n  private resizeObserverCallback = (currSize: number) => {\n    if (currSize !== this.deviceSize) {\n      this.deviceSize = currSize;\n\n      if (currSize === DEVICE_SIZES.S) {\n        if (!this.disableAutoParentStyling) {\n          const topBarHeight =\n            this.el.shadowRoot.querySelector(\".top-bar\").scrollHeight;\n          this.setParentPaddingTop(`${topBarHeight}px`);\n          this.setParentPaddingLeft(\"0\");\n\n          if (this.inline) {\n            this.el.parentElement.style.setProperty(\n              \"height\",\n              `calc(100% - ${topBarHeight}px)`\n            );\n          }\n        }\n        this.emitSideNavigationExpanded({\n          sideNavExpanded: this.menuExpanded,\n          sideNavMobile: true,\n        });\n      } else {\n        if (!this.disableAutoParentStyling) {\n          this.setParentPaddingTop(\"0\");\n          this.el.parentElement.style.setProperty(\"height\", \"100%\");\n        }\n        this.emitSideNavigationExpanded({\n          sideNavExpanded: this.menuExpanded,\n          sideNavMobile: false,\n        });\n      }\n\n      if (currSize > DEVICE_SIZES.L) {\n        if (!this.disableAutoParentStyling) {\n          this.setParentPaddingTop(\"0\");\n          this.setParentPaddingLeft(\"0\");\n        }\n      } else if (\n        currSize > DEVICE_SIZES.S &&\n        currSize <= DEVICE_SIZES.L &&\n        !this.static &&\n        !this.disableAutoParentStyling\n      ) {\n        if (this.collapsedIconLabels) {\n          this.setParentPaddingLeft(\"calc(var(--ic-space-xxl) * 2)\");\n        } else {\n          this.setParentPaddingLeft(\n            \"calc(var(--ic-space-xxl) + var(--ic-space-xs))\"\n          );\n        }\n      }\n    }\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      const currSize = getCurrentDeviceSize();\n      this.deviceSizeAppTitle = currSize;\n      this.resizeObserverCallback(currSize);\n    });\n\n    this.resizeObserver.observe(document.body, { box: \"content-box\" });\n  };\n\n  private setCollapsedIconLabels = () => {\n    const navigationItems: HTMLIcNavigationItemElement[] = Array.from(\n      this.el.querySelectorAll(\"ic-navigation-item\")\n    );\n    navigationItems.forEach((navigationItem: HTMLIcNavigationItemElement) => {\n      navigationItem.setAttribute(\"collapsed-icon-label\", \"true\");\n    });\n  };\n\n  private styleSlottedCollapsedIconLabel = () => {\n    const dynamicSlottedIcTypographyComps: HTMLIcTypographyElement[] =\n      Array.from(\n        this.el.querySelectorAll(\".navigation-item-side-nav-slotted-text\")\n      );\n\n    dynamicSlottedIcTypographyComps.forEach((icTypography) => {\n      if (\n        icTypography?.parentElement?.parentElement?.classList.contains(\n          \"navigation-item-side-nav-collapsed-with-label\"\n        )\n      ) {\n        icTypography.style.whiteSpace = \"nowrap\";\n        icTypography.style.overflow = \"hidden\";\n        icTypography.style.textOverflow = \"ellipsis\";\n        icTypography.style.marginTop = \"10px\";\n      }\n    });\n  };\n\n  private renderTopBar = ({\n    isSDevice,\n    foregroundColor,\n    menuOpen,\n    href,\n    isAppNameSubtitleVariant,\n    appTitle,\n  }: IcTopBar) => (\n    <div\n      class={{\n        \"top-bar\": true,\n        [this.foregroundColor]: true,\n      }}\n    >\n      {isSDevice && (\n        <nav\n          aria-labelledby=\"menu-navigation-toggle-button-landmark\"\n          aria-hidden=\"false\"\n        >\n          <ic-button\n            aria-label=\"Open navigation menu\"\n            class=\"menu-button\"\n            id=\"menu-button\"\n            variant=\"secondary\"\n            size=\"small\"\n            full-width=\"true\"\n            appearance={foregroundColor}\n            onClick={this.toggleMenu}\n            aria-owns=\"side-navigation\"\n            aria-haspopup=\"true\"\n            aria-expanded=\"false\"\n          >\n            <span\n              class=\"mobile-top-bar-menu-icon\"\n              slot=\"icon\"\n              innerHTML={menuOpen ? closeIcon : menuIcon}\n            ></span>\n            {menuOpen ? \"Close\" : \"Menu\"}\n          </ic-button>\n          <span\n            id=\"menu-navigation-toggle-button-landmark\"\n            class=\"navigation-landmark-title\"\n            aria-hidden=\"true\"\n          >\n            Navigation menu toggle button\n          </span>\n        </nav>\n      )}\n      <div class=\"app-title-wrapper\">\n        <a href={href} class=\"title-link\">\n          <div class=\"app-icon-container\" aria-hidden=\"true\">\n            <slot name=\"app-icon\"></slot>\n          </div>\n          <ic-typography\n            variant={isAppNameSubtitleVariant ? \"subtitle-small\" : \"h3\"}\n          >\n            {appTitle}\n          </ic-typography>\n        </a>\n      </div>\n    </div>\n  );\n\n  componentWillLoad(): void {\n    if (this.expanded) {\n      this.setMenuExpanded(true);\n    } else {\n      this.setMenuExpanded(false);\n    }\n\n    if (this.collapsedIconLabels) {\n      this.setCollapsedIconLabels();\n    }\n\n    this.hasSecondaryNavigation = isSlotUsed(this.el, \"secondary-navigation\");\n  }\n\n  componentDidLoad(): void {\n    this.emitSideNavigationExpanded({\n      sideNavExpanded: this.menuExpanded,\n      sideNavMobile: this.deviceSize === DEVICE_SIZES.S,\n    });\n\n    checkResizeObserver(this.runResizeObserver);\n    this.arrangeSlottedNavigationItem();\n    this.styleSlottedCollapsedIconLabel();\n    this.displayTooltipWithExpandedLongLabel(this.menuExpanded);\n\n    onComponentRequiredPropUndefined(\n      [{ prop: this.appTitle, propName: \"app-title\" }],\n      \"Side Navigation\"\n    );\n  }\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  render() {\n    const {\n      appTitle,\n      menuOpen,\n      foregroundColor,\n      menuExpanded,\n      href,\n      status,\n      version,\n      collapsedIconLabels,\n      inline,\n    } = this;\n\n    const isSDevice = this.deviceSize === DEVICE_SIZES.S;\n    const isMdDevice = this.deviceSize === DEVICE_SIZES.M;\n    const isLgDevice = this.deviceSize >= DEVICE_SIZES.L;\n    const isAppNameSubtitleVariant = this.deviceSizeAppTitle === DEVICE_SIZES.S;\n    const displayExpandBtn = isMdDevice || (isLgDevice && !this.static);\n\n    const topBarProps: IcTopBar = {\n      isSDevice,\n      foregroundColor,\n      menuOpen,\n      href,\n      isAppNameSubtitleVariant,\n      appTitle,\n    };\n\n    return (\n      <Host\n        class={{\n          \"xs-menu-open\": menuOpen && isSDevice,\n          \"xs-menu-close\": !menuOpen && isSDevice,\n          \"sm-collapsed\": !isSDevice && !menuExpanded,\n          \"sm-expanded\": !isSDevice && menuExpanded,\n          [IcThemeForegroundEnum.Dark]:\n            foregroundColor === IcThemeForegroundEnum.Dark,\n          [\"collapsed-labels\"]:\n            !isSDevice && !menuExpanded && collapsedIconLabels,\n          [\"static\"]: this.static,\n          [\"inline\"]: inline,\n        }}\n      >\n        {isSDevice && this.renderTopBar({ ...topBarProps })}\n        <div class=\"side-navigation\" id=\"side-navigation\">\n          {!isSDevice && this.renderTopBar({ ...topBarProps })}\n          <div class=\"side-navigation-inner\">\n            {isSlotUsed(this.el, \"primary-navigation\") && (\n              <nav\n                class=\"primary-navigation\"\n                aria-labelledby=\"primary-navigation-landmark\"\n              >\n                <span\n                  aria-hidden=\"true\"\n                  class=\"navigation-landmark-title\"\n                  id=\"primary-navigation-landmark\"\n                >\n                  Primary\n                </span>\n                <ul class=\"navigation-list\">\n                  <slot name=\"primary-navigation\"></slot>\n                </ul>\n              </nav>\n            )}\n          </div>\n          <div\n            class={{\n              [\"bottom-wrapper\"]: true,\n              [\"classification-spacing\"]: hasClassificationBanner(),\n            }}\n          >\n            {isSlotUsed(this.el, \"secondary-navigation\") && (\n              <nav\n                class=\"secondary-navigation\"\n                aria-labelledby=\"secondary-navigation-landmark\"\n              >\n                <span\n                  aria-hidden=\"true\"\n                  class=\"navigation-landmark-title\"\n                  id=\"secondary-navigation-landmark\"\n                >\n                  Secondary\n                </span>\n                <ul class=\"navigation-list\">\n                  <slot name=\"secondary-navigation\"></slot>\n                </ul>\n              </nav>\n            )}\n            <div class=\"bottom-side-nav\">\n              {this.hasSecondaryNavigation && <ic-divider></ic-divider>}\n              {displayExpandBtn && (\n                <button\n                  class=\"menu-expand-button\"\n                  innerHTML={chevronIcon}\n                  onClick={this.toggleMenuExpanded}\n                  aria-label={`${\n                    menuExpanded ? \"Collapse\" : \"Expand\"\n                  } side navigation`}\n                ></button>\n              )}\n              <div class=\"app-status-wrapper\">\n                {status !== \"\" && (\n                  <div\n                    class={{\n                      [\"app-status\"]: true,\n                    }}\n                  >\n                    <ic-typography\n                      aria-label=\"app tag\"\n                      variant=\"label-uppercase\"\n                      class=\"app-status-text\"\n                    >\n                      {status}\n                    </ic-typography>\n                  </div>\n                )}\n                {version !== \"\" && (\n                  <ic-typography\n                    variant=\"label\"\n                    class=\"app-version\"\n                    aria-label=\"app version\"\n                  >\n                    {version}\n                  </ic-typography>\n                )}\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/ic-step.js

@@ -1,67 +1,168 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { c as checkIcon } from './check-icon.js';
+import { d as defineCustomElement$3 } from './ic-loading-indicator2.js';
 import { d as defineCustomElement$2 } from './ic-typography2.js';
 
-const icStepCss = ":host{display:flex;flex:auto}:host(.last-step){flex-grow:initial}.step{display:flex;flex-direction:column;flex:1 1 0}.step-top{display:flex;width:100%;align-items:center;align-self:flex-start;height:40px}.step-icon{display:flex;justify-content:center;align-items:center;border-radius:50%}.step-icon-inner{width:var(--ic-space-xl);height:var(--ic-space-xl);display:flex;justify-content:center;align-items:center;border-radius:50%}.current{color:var(--ic-theme-primary)}.step-title-area{margin:var(--ic-space-xs) 0;padding-right:var(--ic-space-xs)}.step-title,.step-subtitle{width:-moz-fit-content;width:fit-content}.step-subtitle{color:var(--ic-color-tertiary-text)}.current .step-subtitle{color:var(--ic-color-primary-text)}.completed{color:var(--ic-status-success)}.active .step-icon-inner{box-shadow:inset var(--ic-architectural-200) 0 0 0 2px}.current .step-icon-inner{background-color:var(--ic-theme-primary);color:white}.disabled{color:var(--ic-architectural-200)}.disabled .step-icon{border:1px dashed var(--ic-architectural-200);width:calc(var(--ic-space-xl) - var(--ic-space-xxxs));height:calc(var(--ic-space-xl) - var(--ic-space-xxxs))}.disabled .step-title-area{color:var(--ic-color-tertiary-text)}.completed .step-icon-inner{background:var(--ic-status-success);box-shadow:inset var(--ic-status-success) 0 0 0 var(--ic-space-xxxs);border-radius:100%}.current .step-icon{border:var(--ic-space-xxxs) solid var(--ic-theme-primary);padding:var(--ic-space-xxxs);margin:0 calc(-1 * var(--ic-space-xxxs));}.step-connect{height:var(--ic-space-xxxs);background-color:var(--ic-architectural-200);margin:0 var(--ic-space-xs);border-radius:var(--ic-space-xxs);width:100%}.aligned-full-width.step-connect{min-width:100px;width:100%}.disabled .step-connect{height:0;background-color:rgb(0 0 0 / 0%);border-top:2px dashed var(--ic-architectural-200);border-radius:0}.completed .step-connect{background-color:var(--ic-status-success)}.step-connect-inner{width:70%;display:flex;flex:auto;height:var(--ic-space-xxxs);border-radius:var(--ic-space-xxs);background-color:var(--ic-theme-primary)}.check-icon{padding-top:var(--ic-space-xxs)}.check-icon svg{width:16px;height:16px}.check-icon>svg>path{fill:white}@media (forced-colors: active){.step-connect:not(.disabled .step-connect){border:var(--ic-hc-border)}.active .step-icon-inner,.completed .step-icon-inner,.current .step-icon-inner{forced-color-adjust:none;box-shadow:inset canvastext 0 0 0 2px;background-color:transparent;color:canvastext}.current .step-icon{padding:0;border:none}.disabled,.disabled .step-title-area{color:Graytext}.step-connect-inner,.completed .step-connect{background-color:canvastext}.check-icon>svg>path{fill:canvastext}}";
+const warningIcon = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.99935 4.32666L13.0193 13H2.97935L7.99935 4.32666ZM7.99935 1.66666L0.666016 14.3333H15.3327L7.99935 1.66666ZM8.66602 11H7.33268V12.3333H8.66602V11ZM8.66602 6.99999H7.33268V9.66666H8.66602V6.99999Z" fill="currentColor"/>
+</svg>`;
+
+const icStepCss = ":host{display:flex;flex:auto}.step{display:flex;flex:1 1 0}.step-icon{display:flex;justify-content:center}.step-title,.step-subtitle,.step-status,.next-step{white-space:pre-line}.visually-hidden{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}:host(.compact){-moz-column-gap:var(--ic-space-sm);column-gap:var(--ic-space-sm);--compact-step-inner-color:var(--ic-theme-primary);--compact-step-circular-line-width:var(--ic-space-xxs)}:host(.compact) .step{-moz-column-gap:var(--ic-space-sm);column-gap:var(--ic-space-sm)}:host(.compact) .step:not(.current){display:none;opacity:0;visibility:hidden}.compact-step-progress-indicator{margin:var(--ic-space-xs) 0 0}:host(.compact) .step-title-area{display:flex;flex-direction:column;width:228px}.info-line{display:flex;-moz-column-gap:var(--ic-space-xs);column-gap:var(--ic-space-xs)}.step-status{display:flex;color:var(--ic-color-secondary-text);-moz-column-gap:var(--ic-space-xxxs);column-gap:var(--ic-space-xxxs)}.compact-step-completed .step-status{color:var(--ic-status-success)}.compact-step-disabled :is(.step-title,.step-status){color:var(--ic-color-tertiary-text)}.step-num{color:var(--ic-color-secondary-text);white-space:nowrap}:host(.compact) .step-icon{margin:var(--ic-space-xxxs)}:host(.compact) .step-icon svg{width:16px;height:16px}:host(.default) .step{flex-direction:column}:host(.default.last-step){flex-grow:initial}.step-top{display:flex;width:100%;align-items:center;align-self:flex-start;height:40px}:host(.default) .step-icon{border-radius:50%}.step-icon-inner{width:var(--ic-space-xl);height:var(--ic-space-xl);display:flex;justify-content:center;align-items:center;border-radius:50%}:host(.default) .current{color:var(--ic-theme-primary)}:host(.default) .step-title-area{margin:var(--ic-space-xs) 0;padding-right:var(--ic-space-xs);width:100%}:host(.default) .step-title,.step-subtitle{width:-moz-fit-content;width:fit-content}.step-subtitle{color:var(--ic-color-tertiary-text)}.current .step-subtitle{color:var(--ic-color-primary-text)}:host(.default) .completed{color:var(--ic-status-success)}.active .step-icon-inner{box-shadow:inset var(--ic-architectural-200) 0 0 0 2px}.current .step-icon-inner{background-color:var(--ic-theme-primary);color:white}.disabled{color:var(--ic-architectural-200)}.disabled .step-icon-inner{border:1px dashed var(--ic-architectural-200);width:calc(var(--ic-space-xl) - var(--ic-space-xxxs));height:calc(var(--ic-space-xl) - var(--ic-space-xxxs))}.disabled .step-title-area{color:var(--ic-color-tertiary-text)}.completed .step-icon-inner{background:var(--ic-status-success);box-shadow:inset var(--ic-status-success) 0 0 0 var(--ic-space-xxxs);border-radius:100%}:host(.default) .current .step-icon{border:var(--ic-space-xxxs) solid var(--ic-theme-primary);padding:var(--ic-space-xxxs);margin:0 calc(-1 * var(--ic-space-xxxs));}.step-connect{height:var(--ic-space-xxxs);background-color:var(--ic-architectural-200);margin:0 var(--ic-space-xs);border-radius:var(--ic-space-xxs);width:100%}.aligned-full-width.step-connect{min-width:100px;width:100%}.disabled .step-connect{height:0;background-color:rgb(0 0 0 / 0%);border-top:2px dashed var(--ic-architectural-200);border-radius:0}.completed .step-connect{background-color:var(--ic-status-success)}.step-connect-inner{width:70%;display:flex;flex:auto;height:var(--ic-space-xxxs);border-radius:var(--ic-space-xxs);background-color:var(--ic-theme-primary)}.step-icon-inner .check-icon{padding-top:var(--ic-space-xxs)}.step-icon-inner .check-icon svg{width:var(--ic-space-md);height:auto}.step-icon-inner .check-icon>svg>path{fill:var(--ic-color-white-text)}@media (forced-colors: active){.compact-step-disabled :is(.step-title,.step-status){color:GrayText}.step-connect:not(.disabled .step-connect){border:var(--ic-hc-border)}.active .step-icon-inner,.completed .step-icon-inner,.current .step-icon-inner{forced-color-adjust:none;box-shadow:inset canvastext 0 0 0 2px;background-color:transparent;color:canvastext}:host(.default) .current .step-icon{padding:0;border:none}.disabled,.disabled .step-title-area{color:GrayText}.step-connect-inner,.completed .step-connect{background-color:canvastext}.step-icon-inner .check-icon>svg>path{fill:canvastext}}";
 
 const Step = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.stepType = "active";
+    this.variant = undefined;
     this.stepTitle = undefined;
     this.stepSubtitle = undefined;
+    this.stepStatus = undefined;
+    this.stepType = "active";
+    this.current = false;
+    this.compactStepStyling = undefined;
     this.stepNum = undefined;
     this.lastStep = undefined;
+    this.lastStepNum = undefined;
+    this.nextStepTitle = undefined;
+    this.progress = undefined;
   }
-  render() {
-    let icon;
-    if (this.stepType !== "completed") {
-      icon = (h("ic-typography", { variant: "subtitle-small" }, h("span", { class: "step-icon-inner", "aria-hidden": "true" }, this.stepNum)));
+  stepTypeChangeHandler() {
+    if (this.variant === "compact" && this.stepType === "current") {
+      this.current = true;
     }
     else {
-      icon = (h("div", { class: "step-icon-inner", "aria-hidden": "true" }, h("span", { class: "check-icon", innerHTML: checkIcon })));
+      this.current = false;
     }
+  }
+  render() {
+    // ARIA LABEL
     let ariaLabel = "";
     if (this.stepType === "completed") {
       ariaLabel = ". Completed step";
     }
     else if (this.stepType === "disabled") {
-      ariaLabel = ". Disabled step";
+      ariaLabel = ". Non-required step";
+    }
+    else if (this.stepStatus === "required") {
+      ariaLabel = ". Required step";
+    }
+    else if (this.stepStatus === "optional") {
+      ariaLabel = ". Optional step";
+    }
+    // STEP STATUS
+    let stepStatus;
+    if (this.stepStatus) {
+      stepStatus = this.stepStatus[0].toUpperCase() + this.stepStatus.slice(1);
+    }
+    // STEP TYPE
+    let stepType;
+    if (this.stepType === "disabled" ||
+      this.compactStepStyling === "disabled") {
+      stepType = "Not required";
+    }
+    else if (this.compactStepStyling === "completed") {
+      stepType = "Completed";
     }
+    // STATUS ICON FOR COMPACT STEP
+    let statusIcon;
+    if (this.stepType === "completed" ||
+      this.compactStepStyling === "completed") {
+      statusIcon = (h("span", { class: "check-icon step-icon", "aria-hidden": "true", innerHTML: checkIcon }));
+    }
+    else if (this.stepType === "disabled" ||
+      this.compactStepStyling === "disabled") {
+      statusIcon = (h("span", { class: "warning-icon step-icon", "aria-hidden": "true", innerHTML: warningIcon }));
+    }
+    // COMPACT STEP COMPONENT
+    const compactStep = (h("div", { class: {
+        ["step"]: true,
+        ["current"]: this.current,
+        [`compact-step-${this.compactStepStyling}`]: !!this.compactStepStyling,
+      } }, h("ic-loading-indicator", { class: {
+        "compact-step-progress-indicator": true,
+        "not-required": this.stepType === "disabled" ||
+          this.compactStepStyling === "disabled",
+      }, "aria-hidden": "true", size: "small", "inner-label": this.stepNum, progress: this.progress }), h("div", { class: "step-title-area" }, h("ic-typography", { variant: "h4", class: "step-title" }, this.stepTitle), h("div", { class: "info-line" }, h("ic-typography", { variant: "caption", class: "step-num" }, `${this.stepNum} of ${this.lastStepNum}`, h("span", { class: "visually-hidden" }, " steps")), (this.stepSubtitle ||
+      this.stepType === "completed" ||
+      this.stepType === "disabled" ||
+      (this.variant === "compact" &&
+        !!this.compactStepStyling &&
+        this.compactStepStyling !== "active") ||
+      !!this.stepStatus) && (h("div", { class: "step-status" }, statusIcon && statusIcon, (this.stepSubtitle || stepType) && (h("ic-typography", { variant: "caption" }, this.stepSubtitle !== null &&
+      this.stepSubtitle !== undefined
+      ? this.stepSubtitle
+      : this.stepType === "disabled" ||
+        (this.variant === "compact" &&
+          this.compactStepStyling === "disabled") ||
+        this.stepType === "completed" ||
+        (this.variant === "compact" &&
+          this.compactStepStyling === "completed")
+        ? stepType
+        : this.stepStatus && stepStatus))))), this.lastStep ? (h("ic-typography", { variant: "subtitle-small", class: "next-step" }, "Last step")) : (this.nextStepTitle !== undefined && (h("ic-typography", { variant: "subtitle-small", class: "next-step" }, "Next", h("span", { class: "visually-hidden" }, " step is"), ":", " ", this.nextStepTitle))))));
+    // ICON FOR DEFAULT STEP
+    let icon;
+    if (this.stepType !== "completed") {
+      icon = (h("ic-typography", { variant: "subtitle-small" }, h("span", { class: "step-icon-inner", "aria-hidden": "true" }, this.stepNum)));
+    }
+    else {
+      icon = (h("div", { class: "step-icon-inner", "aria-hidden": "true" }, h("span", { class: "check-icon", innerHTML: checkIcon })));
+    }
+    // STEP CONNECT FOR DEFAULT STEP
     const partialBar = this.stepType === "current" && (h("div", { class: "step-connect-inner" }));
     const finalStep = !this.lastStep && (h("div", { class: {
         ["step-connect"]: true,
-        ["aligned-full-width"]: this.el.parentElement.classList.contains("aligned-full-width"),
+        ["aligned-full-width"]: this.el.parentElement.classList.contains("default") &&
+          !this.el.parentElement.classList.contains("aligned-left"),
       } }, partialBar));
-    return (h(Host, { role: "listitem", "aria-label": `Step ${this.stepNum}${ariaLabel}`, "aria-current": this.stepType == "current" ? "step" : null, class: {
-        ["aligned-full-width"]: this.el.parentElement.classList.contains("aligned-full-width"),
-      } }, h("div", { class: {
+    // DEFAULT STEP COMPONENT
+    const defaultStep = (h("div", { class: {
         ["step"]: true,
         [`${this.stepType}`]: true,
-      } }, h("div", { class: "step-top" }, h("div", { class: "step-icon" }, icon), finalStep), (this.stepTitle || this.stepSubtitle) && (h("div", { class: "step-title-area" }, this.stepTitle && (h("ic-typography", { variant: "subtitle-large", class: "step-title" }, this.stepTitle)), this.stepSubtitle && (h("ic-typography", { variant: "caption", class: "step-subtitle" }, this.stepSubtitle)))))));
+      } }, h("div", { class: "step-top" }, h("div", { class: "step-icon" }, icon), finalStep), (this.stepTitle || this.stepSubtitle || this.stepStatus) && (h("div", { class: "step-title-area" }, this.stepTitle && (h("ic-typography", { variant: "subtitle-large", class: "step-title" }, this.stepTitle)), this.stepTitle && (this.stepSubtitle || this.stepStatus) && (h("ic-typography", { variant: "caption", class: "step-subtitle" }, this.stepSubtitle !== null && this.stepSubtitle !== undefined
+      ? this.stepSubtitle
+      : stepStatus))))));
+    return (h(Host, { role: "listitem", "aria-label": `Step ${this.stepNum}${ariaLabel}`, "aria-current": (this.current || this.stepType === "current") && "step", class: {
+        ["aligned-full-width"]: this.el.parentElement.classList.contains("default") &&
+          !this.el.parentElement.classList.contains("aligned-left"),
+        [`${this.variant}`]: true,
+      } }, this.variant === "compact" ? compactStep : defaultStep));
   }
   get el() { return this; }
+  static get watchers() { return {
+    "stepType": ["stepTypeChangeHandler"]
+  }; }
   static get style() { return icStepCss; }
 }, [1, "ic-step", {
-    "stepType": [1, "step-type"],
+    "variant": [1],
     "stepTitle": [1, "step-title"],
     "stepSubtitle": [1, "step-subtitle"],
+    "stepStatus": [1, "step-status"],
+    "stepType": [1, "step-type"],
+    "current": [1028],
+    "compactStepStyling": [1, "compact-step-styling"],
     "stepNum": [2, "step-num"],
-    "lastStep": [4, "last-step"]
+    "lastStep": [4, "last-step"],
+    "lastStepNum": [2, "last-step-num"],
+    "nextStepTitle": [1, "next-step-title"],
+    "progress": [2]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["ic-step", "ic-typography"];
+  const components = ["ic-step", "ic-loading-indicator", "ic-typography"];
   components.forEach(tagName => { switch (tagName) {
     case "ic-step":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, Step);
       }
       break;
+    case "ic-loading-indicator":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
     case "ic-typography":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();

package/dist/components/ic-step.js.map

@@ -1 +1 @@
-{"file":"ic-step.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,uoFAAuoF;;MCS5oF,IAAI;;;;;oBAKkB,QAAQ;;;;;;EAsBzC,MAAM;IACJ,IAAI,IAAI,CAAC;IACT,IAAI,IAAI,CAAC,QAAQ,KAAK,WAAW,EAAE;MACjC,IAAI,IACF,qBAAe,OAAO,EAAC,gBAAgB,IACrC,YAAM,KAAK,EAAC,iBAAiB,iBAAa,MAAM,IAC7C,IAAI,CAAC,OAAO,CACR,CACO,CACjB,CAAC;KACH;SAAM;MACL,IAAI,IACF,WAAK,KAAK,EAAC,iBAAiB,iBAAa,MAAM,IAC7C,YAAM,KAAK,EAAC,YAAY,EAAC,SAAS,EAAE,SAAS,GAAS,CAClD,CACP,CAAC;KACH;IAED,IAAI,SAAS,GAAG,EAAE,CAAC;IAEnB,IAAI,IAAI,CAAC,QAAQ,KAAK,WAAW,EAAE;MACjC,SAAS,GAAG,kBAAkB,CAAC;KAChC;SAAM,IAAI,IAAI,CAAC,QAAQ,KAAK,UAAU,EAAE;MACvC,SAAS,GAAG,iBAAiB,CAAC;KAC/B;IAED,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,KAC5C,WAAK,KAAK,EAAC,oBAAoB,GAAO,CACvC,CAAC;IACF,MAAM,SAAS,GAAG,CAAC,IAAI,CAAC,QAAQ,KAC9B,WACE,KAAK,EAAE;QACL,CAAC,cAAc,GAAG,IAAI;QACtB,CAAC,oBAAoB,GACnB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,oBAAoB,CAAC;OACjE,IAEA,UAAU,CACP,CACP,CAAC;IAEF,QACE,EAAC,IAAI,IACH,IAAI,EAAC,UAAU,gBACH,QAAQ,IAAI,CAAC,OAAO,GAAG,SAAS,EAAE,kBAChC,IAAI,CAAC,QAAQ,IAAI,SAAS,GAAG,MAAM,GAAG,IAAI,EACxD,KAAK,EAAE;QACL,CAAC,oBAAoB,GACnB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,oBAAoB,CAAC;OACjE,IAED,WACE,KAAK,EAAE;QACL,CAAC,MAAM,GAAG,IAAI;QACd,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,IAAI;OAC3B,IAED,WAAK,KAAK,EAAC,UAAU,IACnB,WAAK,KAAK,EAAC,WAAW,IAAE,IAAI,CAAO,EAClC,SAAS,CACN,EACL,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,YAAY,MACnC,WAAK,KAAK,EAAC,iBAAiB,IACzB,IAAI,CAAC,SAAS,KACb,qBAAe,OAAO,EAAC,gBAAgB,EAAC,KAAK,EAAC,YAAY,IACvD,IAAI,CAAC,SAAS,CACD,CACjB,EACA,IAAI,CAAC,YAAY,KAChB,qBAAe,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,eAAe,IACnD,IAAI,CAAC,YAAY,CACJ,CACjB,CACG,CACP,CACG,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/ic-step/ic-step.css?tag=ic-step&encapsulation=shadow","./src/components/ic-step/ic-step.tsx"],"sourcesContent":[":host {\n  display: flex;\n  flex: auto;\n}\n\n:host(.last-step) {\n  flex-grow: initial;\n}\n\n.step {\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 0;\n}\n\n.step-top {\n  display: flex;\n  width: 100%;\n  align-items: center;\n  align-self: flex-start;\n  height: 40px;\n}\n\n.step-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n}\n\n.step-icon-inner {\n  width: var(--ic-space-xl);\n  height: var(--ic-space-xl);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n}\n\n.current {\n  color: var(--ic-theme-primary);\n}\n\n.step-title-area {\n  margin: var(--ic-space-xs) 0;\n  padding-right: var(--ic-space-xs);\n}\n\n.step-title,\n.step-subtitle {\n  width: fit-content;\n}\n\n.step-subtitle {\n  color: var(--ic-color-tertiary-text);\n}\n\n.current .step-subtitle {\n  color: var(--ic-color-primary-text);\n}\n\n.completed {\n  color: var(--ic-status-success);\n}\n\n.active .step-icon-inner {\n  box-shadow: inset var(--ic-architectural-200) 0 0 0 2px;\n}\n\n.current .step-icon-inner {\n  background-color: var(--ic-theme-primary);\n  color: white;\n}\n\n.disabled {\n  color: var(--ic-architectural-200);\n}\n\n.disabled .step-icon {\n  border: 1px dashed var(--ic-architectural-200);\n  width: calc(var(--ic-space-xl) - var(--ic-space-xxxs));\n  height: calc(var(--ic-space-xl) - var(--ic-space-xxxs));\n}\n\n.disabled .step-title-area {\n  color: var(--ic-color-tertiary-text);\n}\n\n.completed .step-icon-inner {\n  background: var(--ic-status-success);\n  box-shadow: inset var(--ic-status-success) 0 0 0 var(--ic-space-xxxs);\n  border-radius: 100%;\n}\n\n.current .step-icon {\n  border: var(--ic-space-xxxs) solid var(--ic-theme-primary);\n  padding: var(--ic-space-xxxs);\n  margin: 0 calc(-1 * var(--ic-space-xxxs)); /* compensating for the circle being bigger than other steps */\n}\n\n.step-connect {\n  height: var(--ic-space-xxxs);\n  background-color: var(--ic-architectural-200);\n  margin: 0 var(--ic-space-xs);\n  border-radius: var(--ic-space-xxs);\n  width: 100%;\n}\n\n.aligned-full-width.step-connect {\n  min-width: 100px;\n  width: 100%;\n}\n\n.disabled .step-connect {\n  height: 0;\n  background-color: rgb(0 0 0 / 0%);\n  border-top: 2px dashed var(--ic-architectural-200);\n  border-radius: 0;\n}\n\n.completed .step-connect {\n  background-color: var(--ic-status-success);\n}\n\n.step-connect-inner {\n  width: 70%;\n  display: flex;\n  flex: auto;\n  height: var(--ic-space-xxxs);\n  border-radius: var(--ic-space-xxs);\n  background-color: var(--ic-theme-primary);\n}\n\n.check-icon {\n  padding-top: var(--ic-space-xxs);\n}\n\n.check-icon svg {\n  width: 16px;\n  height: 16px;\n}\n\n.check-icon > svg > path {\n  fill: white;\n}\n\n/** High Contrast **/\n@media (forced-colors: active) {\n  .step-connect:not(.disabled .step-connect) {\n    border: var(--ic-hc-border);\n  }\n\n  .active .step-icon-inner,\n  .completed .step-icon-inner,\n  .current .step-icon-inner {\n    forced-color-adjust: none;\n    box-shadow: inset canvastext 0 0 0 2px;\n    background-color: transparent;\n    color: canvastext;\n  }\n\n  .current .step-icon {\n    padding: 0;\n    border: none;\n  }\n\n  .disabled,\n  .disabled .step-title-area {\n    color: Graytext;\n  }\n\n  .step-connect-inner,\n  .completed .step-connect {\n    background-color: canvastext;\n  }\n\n  .check-icon > svg > path {\n    fill: canvastext;\n  }\n}\n","import { Component, Host, h, Prop, Element } from \"@stencil/core\";\nimport checkIcon from \"../../assets/check-icon.svg\";\nimport { IcStepTypes } from \"./ic-step.types\";\n\n@Component({\n  tag: \"ic-step\",\n  styleUrl: \"ic-step.css\",\n  shadow: true,\n})\nexport class Step {\n  @Element() el: HTMLIcStepElement;\n  /**\n   * The state of the step within the stepper.\n   */\n  @Prop() stepType?: IcStepTypes = \"active\";\n\n  /**\n   * The name of the step within the stepper.\n   */\n  @Prop() stepTitle?: string;\n\n  /**\n   * The additional information about the step.\n   */\n  @Prop() stepSubtitle?: string;\n\n  /**\n   * @internal The step number, managed by ic-stepper.\n   */\n  @Prop() stepNum?: number;\n\n  /**\n   * @internal If `true`, the step will be marked as being the last one in the series. This is managed by ic-stepper.\n   */\n  @Prop() lastStep?: boolean;\n\n  render() {\n    let icon;\n    if (this.stepType !== \"completed\") {\n      icon = (\n        <ic-typography variant=\"subtitle-small\">\n          <span class=\"step-icon-inner\" aria-hidden=\"true\">\n            {this.stepNum}\n          </span>\n        </ic-typography>\n      );\n    } else {\n      icon = (\n        <div class=\"step-icon-inner\" aria-hidden=\"true\">\n          <span class=\"check-icon\" innerHTML={checkIcon}></span>\n        </div>\n      );\n    }\n\n    let ariaLabel = \"\";\n\n    if (this.stepType === \"completed\") {\n      ariaLabel = \". Completed step\";\n    } else if (this.stepType === \"disabled\") {\n      ariaLabel = \". Disabled step\";\n    }\n\n    const partialBar = this.stepType === \"current\" && (\n      <div class=\"step-connect-inner\"></div>\n    );\n    const finalStep = !this.lastStep && (\n      <div\n        class={{\n          [\"step-connect\"]: true,\n          [\"aligned-full-width\"]:\n            this.el.parentElement.classList.contains(\"aligned-full-width\"),\n        }}\n      >\n        {partialBar}\n      </div>\n    );\n\n    return (\n      <Host\n        role=\"listitem\"\n        aria-label={`Step ${this.stepNum}${ariaLabel}`}\n        aria-current={this.stepType == \"current\" ? \"step\" : null}\n        class={{\n          [\"aligned-full-width\"]:\n            this.el.parentElement.classList.contains(\"aligned-full-width\"),\n        }}\n      >\n        <div\n          class={{\n            [\"step\"]: true,\n            [`${this.stepType}`]: true,\n          }}\n        >\n          <div class=\"step-top\">\n            <div class=\"step-icon\">{icon}</div>\n            {finalStep}\n          </div>\n          {(this.stepTitle || this.stepSubtitle) && (\n            <div class=\"step-title-area\">\n              {this.stepTitle && (\n                <ic-typography variant=\"subtitle-large\" class=\"step-title\">\n                  {this.stepTitle}\n                </ic-typography>\n              )}\n              {this.stepSubtitle && (\n                <ic-typography variant=\"caption\" class=\"step-subtitle\">\n                  {this.stepSubtitle}\n                </ic-typography>\n              )}\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-step.js","mappings":"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","names":[],"sources":["./src/components/ic-step/ic-step.css?tag=ic-step&encapsulation=shadow","./src/components/ic-step/ic-step.tsx"],"sourcesContent":["/* SHARED STYLING */\n:host {\n  display: flex;\n  flex: auto;\n}\n\n.step {\n  display: flex;\n  flex: 1 1 0;\n}\n\n.step-icon {\n  display: flex;\n  justify-content: center;\n}\n\n.step-title,\n.step-subtitle,\n.step-status,\n.next-step {\n  white-space: pre-line;\n}\n\n.visually-hidden {\n  position: absolute;\n  left: -10000px;\n  top: auto;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n}\n\n/* COMPACT STEP STYLING */\n:host(.compact) {\n  column-gap: var(--ic-space-sm);\n\n  --compact-step-inner-color: var(--ic-theme-primary);\n  --compact-step-circular-line-width: var(--ic-space-xxs);\n}\n\n:host(.compact) .step {\n  column-gap: var(--ic-space-sm);\n}\n\n:host(.compact) .step:not(.current) {\n  display: none;\n  opacity: 0;\n  visibility: hidden;\n}\n\n.compact-step-progress-indicator {\n  margin: var(--ic-space-xs) 0 0;\n}\n\n:host(.compact) .step-title-area {\n  display: flex;\n  flex-direction: column;\n  width: 228px;\n}\n\n.info-line {\n  display: flex;\n  column-gap: var(--ic-space-xs);\n}\n\n.step-status {\n  display: flex;\n  color: var(--ic-color-secondary-text);\n  column-gap: var(--ic-space-xxxs);\n}\n\n.compact-step-completed .step-status {\n  color: var(--ic-status-success);\n}\n\n.compact-step-disabled :is(.step-title, .step-status) {\n  color: var(--ic-color-tertiary-text);\n}\n\n.step-num {\n  color: var(--ic-color-secondary-text);\n  white-space: nowrap;\n}\n\n:host(.compact) .step-icon {\n  margin: var(--ic-space-xxxs);\n}\n\n:host(.compact) .step-icon svg {\n  width: 16px;\n  height: 16px;\n}\n\n/* DEFAULT STEP STYLING */\n:host(.default) .step {\n  flex-direction: column;\n}\n\n:host(.default.last-step) {\n  flex-grow: initial;\n}\n\n.step-top {\n  display: flex;\n  width: 100%;\n  align-items: center;\n  align-self: flex-start;\n  height: 40px;\n}\n\n:host(.default) .step-icon {\n  border-radius: 50%;\n}\n\n.step-icon-inner {\n  width: var(--ic-space-xl);\n  height: var(--ic-space-xl);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n}\n\n:host(.default) .current {\n  color: var(--ic-theme-primary);\n}\n\n:host(.default) .step-title-area {\n  margin: var(--ic-space-xs) 0;\n  padding-right: var(--ic-space-xs);\n  width: 100%;\n}\n\n:host(.default) .step-title,\n.step-subtitle {\n  width: fit-content;\n}\n\n.step-subtitle {\n  color: var(--ic-color-tertiary-text);\n}\n\n.current .step-subtitle {\n  color: var(--ic-color-primary-text);\n}\n\n:host(.default) .completed {\n  color: var(--ic-status-success);\n}\n\n.active .step-icon-inner {\n  box-shadow: inset var(--ic-architectural-200) 0 0 0 2px;\n}\n\n.current .step-icon-inner {\n  background-color: var(--ic-theme-primary);\n  color: white;\n}\n\n.disabled {\n  color: var(--ic-architectural-200);\n}\n\n.disabled .step-icon-inner {\n  border: 1px dashed var(--ic-architectural-200);\n  width: calc(var(--ic-space-xl) - var(--ic-space-xxxs));\n  height: calc(var(--ic-space-xl) - var(--ic-space-xxxs));\n}\n\n.disabled .step-title-area {\n  color: var(--ic-color-tertiary-text);\n}\n\n.completed .step-icon-inner {\n  background: var(--ic-status-success);\n  box-shadow: inset var(--ic-status-success) 0 0 0 var(--ic-space-xxxs);\n  border-radius: 100%;\n}\n\n:host(.default) .current .step-icon {\n  border: var(--ic-space-xxxs) solid var(--ic-theme-primary);\n  padding: var(--ic-space-xxxs);\n  margin: 0 calc(-1 * var(--ic-space-xxxs));\n  /* compensating for the circle being bigger than other steps */\n}\n\n.step-connect {\n  height: var(--ic-space-xxxs);\n  background-color: var(--ic-architectural-200);\n  margin: 0 var(--ic-space-xs);\n  border-radius: var(--ic-space-xxs);\n  width: 100%;\n}\n\n.aligned-full-width.step-connect {\n  min-width: 100px;\n  width: 100%;\n}\n\n.disabled .step-connect {\n  height: 0;\n  background-color: rgb(0 0 0 / 0%);\n  border-top: 2px dashed var(--ic-architectural-200);\n  border-radius: 0;\n}\n\n.completed .step-connect {\n  background-color: var(--ic-status-success);\n}\n\n.step-connect-inner {\n  width: 70%;\n  display: flex;\n  flex: auto;\n  height: var(--ic-space-xxxs);\n  border-radius: var(--ic-space-xxs);\n  background-color: var(--ic-theme-primary);\n}\n\n.step-icon-inner .check-icon {\n  padding-top: var(--ic-space-xxs);\n}\n\n.step-icon-inner .check-icon svg {\n  width: var(--ic-space-md);\n  height: auto;\n}\n\n.step-icon-inner .check-icon > svg > path {\n  fill: var(--ic-color-white-text);\n}\n\n/** High Contrast **/\n@media (forced-colors: active) {\n  /* COMPACT STEP */\n  .compact-step-disabled :is(.step-title, .step-status) {\n    color: GrayText;\n  }\n\n  /* DEFAULT STEP */\n  .step-connect:not(.disabled .step-connect) {\n    border: var(--ic-hc-border);\n  }\n\n  .active .step-icon-inner,\n  .completed .step-icon-inner,\n  .current .step-icon-inner {\n    forced-color-adjust: none;\n    box-shadow: inset canvastext 0 0 0 2px;\n    background-color: transparent;\n    color: canvastext;\n  }\n\n  :host(.default) .current .step-icon {\n    padding: 0;\n    border: none;\n  }\n\n  .disabled,\n  .disabled .step-title-area {\n    color: GrayText;\n  }\n\n  .step-connect-inner,\n  .completed .step-connect {\n    background-color: canvastext;\n  }\n\n  .step-icon-inner .check-icon > svg > path {\n    fill: canvastext;\n  }\n}\n","import { Component, Host, h, Prop, Element, Watch } from \"@stencil/core\";\nimport checkIcon from \"../../assets/check-icon.svg\";\nimport warningIcon from \"../../assets/warning-icon-outline.svg\";\nimport { IcStepVariants, IcStepStatuses, IcStepTypes } from \"./ic-step.types\";\n\n@Component({\n  tag: \"ic-step\",\n  styleUrl: \"ic-step.css\",\n  shadow: true,\n})\nexport class Step {\n  @Element() el: HTMLIcStepElement;\n  /**\n   * @internal The variant of the step. This is managed by ic-stepper.\n   */\n  @Prop() variant!: IcStepVariants;\n\n  /**\n   * The title of the step within the stepper.\n   */\n  @Prop() stepTitle?: string;\n\n  /**\n   * Additional information about the step. Use this prop to override the default step status messaging displayed when selecting a step type or step status.\n   */\n  @Prop() stepSubtitle?: string;\n\n  /**\n   * The status of the step. Use this prop to display a status message on the step if it is required or optional.\n   */\n  @Prop() stepStatus?: IcStepStatuses;\n\n  /**\n   * The state of the step within the stepper.\n   */\n  @Prop() stepType?: IcStepTypes = \"active\";\n\n  /**\n   * @internal If `true`, and a compact stepper  is being used, the current step will be the only step in view.\n   */\n  @Prop({ mutable: true }) current?: boolean = false;\n\n  /**\n   * @internal If a compact stepper is being used, this sets the styling of the step.\n   */\n  @Prop() compactStepStyling?: IcStepTypes;\n\n  /**\n   * @internal The step number, managed by ic-stepper.\n   */\n  @Prop() stepNum?: number;\n\n  /**\n   * @internal If `true`, the step will be marked as being the last one in the series. This is managed by ic-stepper.\n   */\n  @Prop() lastStep!: boolean;\n\n  /**\n   * @internal The step number of the final step. This is managed by ic-stepper.\n   */\n  @Prop() lastStepNum?: number;\n\n  /**\n   * @internal The name of the next step. This is managed by ic-stepper.\n   */\n  @Prop() nextStepTitle?: string;\n\n  /**\n   * @internal The progress of the next step, calculated by dividing the current step number by the total number of steps. This is managed by ic-stepper.\n   */\n  @Prop() progress?: number;\n\n  @Watch(\"stepType\")\n  stepTypeChangeHandler(): void {\n    if (this.variant === \"compact\" && this.stepType === \"current\") {\n      this.current = true;\n    } else {\n      this.current = false;\n    }\n  }\n\n  render() {\n    // ARIA LABEL\n    let ariaLabel = \"\";\n\n    if (this.stepType === \"completed\") {\n      ariaLabel = \". Completed step\";\n    } else if (this.stepType === \"disabled\") {\n      ariaLabel = \". Non-required step\";\n    } else if (this.stepStatus === \"required\") {\n      ariaLabel = \". Required step\";\n    } else if (this.stepStatus === \"optional\") {\n      ariaLabel = \". Optional step\";\n    }\n\n    // STEP STATUS\n    let stepStatus;\n    if (this.stepStatus) {\n      stepStatus = this.stepStatus[0].toUpperCase() + this.stepStatus.slice(1);\n    }\n\n    // STEP TYPE\n    let stepType;\n    if (\n      this.stepType === \"disabled\" ||\n      this.compactStepStyling === \"disabled\"\n    ) {\n      stepType = \"Not required\";\n    } else if (this.compactStepStyling === \"completed\") {\n      stepType = \"Completed\";\n    }\n\n    // STATUS ICON FOR COMPACT STEP\n    let statusIcon;\n    if (\n      this.stepType === \"completed\" ||\n      this.compactStepStyling === \"completed\"\n    ) {\n      statusIcon = (\n        <span\n          class=\"check-icon step-icon\"\n          aria-hidden=\"true\"\n          innerHTML={checkIcon}\n        ></span>\n      );\n    } else if (\n      this.stepType === \"disabled\" ||\n      this.compactStepStyling === \"disabled\"\n    ) {\n      statusIcon = (\n        <span\n          class=\"warning-icon step-icon\"\n          aria-hidden=\"true\"\n          innerHTML={warningIcon}\n        ></span>\n      );\n    }\n\n    // COMPACT STEP COMPONENT\n    const compactStep = (\n      <div\n        class={{\n          [\"step\"]: true,\n          [\"current\"]: this.current,\n          [`compact-step-${this.compactStepStyling}`]:\n            !!this.compactStepStyling,\n        }}\n      >\n        <ic-loading-indicator\n          class={{\n            \"compact-step-progress-indicator\": true,\n            \"not-required\":\n              this.stepType === \"disabled\" ||\n              this.compactStepStyling === \"disabled\",\n          }}\n          aria-hidden=\"true\"\n          size=\"small\"\n          inner-label={this.stepNum}\n          progress={this.progress}\n        ></ic-loading-indicator>\n        <div class=\"step-title-area\">\n          <ic-typography variant=\"h4\" class=\"step-title\">\n            {this.stepTitle}\n          </ic-typography>\n          <div class=\"info-line\">\n            <ic-typography variant=\"caption\" class=\"step-num\">\n              {`${this.stepNum} of ${this.lastStepNum}`}\n              <span class=\"visually-hidden\"> steps</span>\n            </ic-typography>\n            {(this.stepSubtitle ||\n              this.stepType === \"completed\" ||\n              this.stepType === \"disabled\" ||\n              (this.variant === \"compact\" &&\n                !!this.compactStepStyling &&\n                this.compactStepStyling !== \"active\") ||\n              !!this.stepStatus) && (\n              <div class=\"step-status\">\n                {statusIcon && statusIcon}\n                {(this.stepSubtitle || stepType) && (\n                  <ic-typography variant=\"caption\">\n                    {this.stepSubtitle !== null &&\n                    this.stepSubtitle !== undefined\n                      ? this.stepSubtitle\n                      : this.stepType === \"disabled\" ||\n                        (this.variant === \"compact\" &&\n                          this.compactStepStyling === \"disabled\") ||\n                        this.stepType === \"completed\" ||\n                        (this.variant === \"compact\" &&\n                          this.compactStepStyling === \"completed\")\n                      ? stepType\n                      : this.stepStatus && stepStatus}\n                  </ic-typography>\n                )}\n              </div>\n            )}\n          </div>\n          {this.lastStep ? (\n            <ic-typography variant=\"subtitle-small\" class=\"next-step\">\n              Last step\n            </ic-typography>\n          ) : (\n            this.nextStepTitle !== undefined && (\n              <ic-typography variant=\"subtitle-small\" class=\"next-step\">\n                Next<span class=\"visually-hidden\"> step is</span>:{\" \"}\n                {this.nextStepTitle}\n              </ic-typography>\n            )\n          )}\n        </div>\n      </div>\n    );\n\n    // ICON FOR DEFAULT STEP\n    let icon;\n    if (this.stepType !== \"completed\") {\n      icon = (\n        <ic-typography variant=\"subtitle-small\">\n          <span class=\"step-icon-inner\" aria-hidden=\"true\">\n            {this.stepNum}\n          </span>\n        </ic-typography>\n      );\n    } else {\n      icon = (\n        <div class=\"step-icon-inner\" aria-hidden=\"true\">\n          <span class=\"check-icon\" innerHTML={checkIcon}></span>\n        </div>\n      );\n    }\n\n    // STEP CONNECT FOR DEFAULT STEP\n    const partialBar = this.stepType === \"current\" && (\n      <div class=\"step-connect-inner\"></div>\n    );\n\n    const finalStep = !this.lastStep && (\n      <div\n        class={{\n          [\"step-connect\"]: true,\n          [\"aligned-full-width\"]:\n            this.el.parentElement.classList.contains(\"default\") &&\n            !this.el.parentElement.classList.contains(\"aligned-left\"),\n        }}\n      >\n        {partialBar}\n      </div>\n    );\n\n    // DEFAULT STEP COMPONENT\n    const defaultStep = (\n      <div\n        class={{\n          [\"step\"]: true,\n          [`${this.stepType}`]: true,\n        }}\n      >\n        <div class=\"step-top\">\n          <div class=\"step-icon\">{icon}</div>\n          {finalStep}\n        </div>\n        {(this.stepTitle || this.stepSubtitle || this.stepStatus) && (\n          <div class=\"step-title-area\">\n            {this.stepTitle && (\n              <ic-typography variant=\"subtitle-large\" class=\"step-title\">\n                {this.stepTitle}\n              </ic-typography>\n            )}\n            {this.stepTitle && (this.stepSubtitle || this.stepStatus) && (\n              <ic-typography variant=\"caption\" class=\"step-subtitle\">\n                {this.stepSubtitle !== null && this.stepSubtitle !== undefined\n                  ? this.stepSubtitle\n                  : stepStatus}\n              </ic-typography>\n            )}\n          </div>\n        )}\n      </div>\n    );\n\n    return (\n      <Host\n        role=\"listitem\"\n        aria-label={`Step ${this.stepNum}${ariaLabel}`}\n        aria-current={(this.current || this.stepType === \"current\") && \"step\"}\n        class={{\n          [\"aligned-full-width\"]:\n            this.el.parentElement.classList.contains(\"default\") &&\n            !this.el.parentElement.classList.contains(\"aligned-left\"),\n          [`${this.variant}`]: true,\n        }}\n      >\n        {this.variant === \"compact\" ? compactStep : defaultStep}\n      </Host>\n    );\n  }\n}\n"],"version":3}