@ukic/web-components 3.0.0-alpha.4 → 3.0.0-alpha.5

package/dist/core/p-65a16de9.entry.js.map

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

package/dist/core/p-76263187.entry.js

@@ -1,2 +0,0 @@
-import{r as o,h as t,H as r}from"./p-6b5e91e2.js";import{a as e}from"./p-b7eb8ef9.js";const i=":host{display:block;margin-bottom:var(--ic-space-md);border-bottom:var(--ic-space-1px) solid var(--ic-tab-bottom-border)}:host(.ic-tab-group-monochrome){border-bottom:var(--ic-space-1px) solid\n    var(--ic-tab-bottom-border-monochrome)}:host(.ic-tab-group-inline){margin-bottom:0;border-bottom:none}.tabs-container{display:flex;flex-direction:row}.tabs-container::-webkit-scrollbar{display:none}";const s=class{constructor(t){o(this,t);this.handleHorizontalScrollAppearance=()=>{if(this.theme==="dark"||this.theme==="inherit"&&window.matchMedia("(prefers-color-scheme: dark)").matches){return"light"}else if(this.monochrome){return"dark"}else{return"default"}};this.inline=false;this.label=undefined;this.monochrome=false;this.theme="inherit"}componentDidLoad(){e([{prop:this.label,propName:"label"}],"Tab Group")}render(){const{theme:o,label:e,monochrome:i}=this;return t(r,{role:"tablist","aria-label":e,class:{["ic-tab-group-inline"]:this.inline,[`ic-theme-${o}`]:o!=="inherit",["ic-tab-group-monochrome"]:i}},t("ic-horizontal-scroll",{appearance:this.handleHorizontalScrollAppearance(),"focus-trigger":"tabFocus"},t("div",{class:"tabs-container"},t("slot",null))))}static get delegatesFocus(){return true}};s.style=i;export{s as ic_tab_group};
-//# sourceMappingURL=p-76263187.entry.js.map

package/dist/core/p-76263187.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["icTabGroupCss","TabGroup","this","handleHorizontalScrollAppearance","theme","window","matchMedia","matches","monochrome","componentDidLoad","onComponentRequiredPropUndefined","prop","label","propName","render","h","Host","role","class","inline","appearance"],"sources":["src/components/ic-tab-group/ic-tab-group.css?tag=ic-tab-group&encapsulation=shadow","src/components/ic-tab-group/ic-tab-group.tsx"],"sourcesContent":[":host {\n  display: block;\n  margin-bottom: var(--ic-space-md);\n  border-bottom: var(--ic-space-1px) solid var(--ic-tab-bottom-border);\n}\n\n:host(.ic-tab-group-monochrome) {\n  border-bottom: var(--ic-space-1px) solid\n    var(--ic-tab-bottom-border-monochrome);\n}\n\n:host(.ic-tab-group-inline) {\n  margin-bottom: 0;\n  border-bottom: none;\n}\n\n.tabs-container {\n  display: flex;\n  flex-direction: row;\n}\n\n.tabs-container::-webkit-scrollbar {\n  display: none;\n}\n","import { Component, Host, Prop, h } from \"@stencil/core\";\n\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\nimport { IcThemeMode } from \"../../utils/types\";\n\n@Component({\n  tag: \"ic-tab-group\",\n  styleUrl: \"ic-tab-group.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class TabGroup {\n  /**\n   * If `true`, the tabs and tab panels will be positioned separately.\n   */\n  @Prop({ reflect: true }) inline?: boolean = false;\n\n  /**\n   * The label to describe the purpose of the set of tabs to screen reader users.\n   */\n  @Prop() label!: string;\n\n  /** @internal Determines whether black variant of the tabs should be displayed. */\n  @Prop() monochrome?: boolean = false;\n\n  /** @internal Determines whether the light or dark variant of the tabs should be displayed. */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Tab Group\"\n    );\n  }\n\n  /**\n   * Temporary function to handle horizontal scroll appearance until other dark mode work is completed.\n   */\n  private handleHorizontalScrollAppearance = () => {\n    if (\n      this.theme === \"dark\" ||\n      (this.theme === \"inherit\" &&\n        window.matchMedia(\"(prefers-color-scheme: dark)\").matches)\n    ) {\n      return \"light\";\n    } else if (this.monochrome) {\n      return \"dark\";\n    } else {\n      return \"default\";\n    }\n  };\n\n  render() {\n    const { theme, label, monochrome } = this;\n\n    return (\n      <Host\n        role=\"tablist\"\n        aria-label={label}\n        class={{\n          [\"ic-tab-group-inline\"]: this.inline,\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n          [\"ic-tab-group-monochrome\"]: monochrome,\n        }}\n      >\n        <ic-horizontal-scroll\n          appearance={this.handleHorizontalScrollAppearance()}\n          focus-trigger=\"tabFocus\"\n        >\n          <div class=\"tabs-container\">\n            <slot></slot>\n          </div>\n        </ic-horizontal-scroll>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sFAAA,MAAMA,EAAgB,+Y,MCYTC,EAAQ,M,yBA2BXC,KAAAC,iCAAmC,KACzC,GACED,KAAKE,QAAU,QACdF,KAAKE,QAAU,WACdC,OAAOC,WAAW,gCAAgCC,QACpD,CACA,MAAO,O,MACF,GAAIL,KAAKM,WAAY,CAC1B,MAAO,M,KACF,CACL,MAAO,S,eAjCiC,M,qCAQb,M,WAGD,S,CAE9B,gBAAAC,GACEC,EACE,CAAC,CAAEC,KAAMT,KAAKU,MAAOC,SAAU,UAC/B,Y,CAqBJ,MAAAC,GACE,MAAMV,MAAEA,EAAKQ,MAAEA,EAAKJ,WAAEA,GAAeN,KAErC,OACEa,EAACC,EAAI,CACHC,KAAK,UAAS,aACFL,EACZM,MAAO,CACL,CAAC,uBAAwBhB,KAAKiB,OAC9B,CAAC,YAAYf,KAAUA,IAAU,UACjC,CAAC,2BAA4BI,IAG/BO,EAAA,wBACEK,WAAYlB,KAAKC,mCAAkC,gBACrC,YAEdY,EAAA,OAAKG,MAAM,kBACTH,EAAA,e"}

package/dist/core/p-78c1f1cc.entry.js

@@ -1,2 +0,0 @@
-import{r as i,c as t,h as e,f as a,H as o,g as n}from"./p-6b5e91e2.js";import{i as s,D as r,g as d,e as c,x as l}from"./p-b7eb8ef9.js";import{C as v}from"./p-3b185c32.js";import{O as h}from"./p-426ec638.js";const m='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block}:host(:focus-within){z-index:var(--ic-z-index-navigation-item)}svg{width:var(--ic-space-xl);fill:var(--ic-theme-text)}.svg{margin-left:auto}.chevron-container svg,.chevron-container .svg{width:var(--ic-space-lg);height:var(--ic-space-lg)}.chevron-container{flex-grow:1}:host(.expandable.navigation-item) .link,:host(.expandable.navigation-item) ::slotted(a){padding-right:0}:host(.navigation-item) .link,:host(.navigation-item) ::slotted(a){height:calc(100% - var(--ic-space-xxs));width:-moz-fit-content;width:fit-content;color:var(--ic-theme-text);display:flex;align-items:center;justify-content:center;padding:0 var(--ic-space-md) var(--ic-space-xxs);text-decoration:none;transition:var(--ic-easing-transition-fast);position:relative;white-space:nowrap}:host(.navigation-item) ::slotted(a){height:100%;font:var(--ic-font-label) !important;letter-spacing:var(--ic-font-letter-spacing-0pt025) !important;padding:0 var(--ic-space-md) !important}:host(.navigation-item-selected) .link::after,:host(.navigation-item-selected) ::slotted(a.active)::after,:host(.navigation-item-top-nav) ::slotted(a.active)::after{content:"";height:0.25rem;width:100%;position:absolute;bottom:0;background-color:var(--ic-theme-text)}:host(.navigation-item-selected.navigation-item-page-header) ::slotted(a.active)::after,:host(.navigation-item-selected.navigation-item-page-header) .link::after,:host(.navigation-item.navigation-item-page-header) ::slotted(a.active)::after,:host(.navigation-item-top-nav-child) ::slotted(a.active)::after{content:none}:host(.navigation-item-side-menu-selected) .link,:host(.navigation-item-side-menu) ::slotted(a.active),:host(.navigation-item-top-nav-child) ::slotted(a.active){box-shadow:none}:host(.navigation-item) .link:hover:not(:focus){background-color:var(--ic-theme-hover);cursor:pointer}:host(.navigation-item:not(.navigation-item-page-header,.navigation-item-side-menu)) ::slotted(a:hover:not(:focus)){background-color:var(--ic-theme-hover) !important}:host(.navigation-item:not(.navigation-item-top-nav-child,.navigation-item-side-menu,.navigation-item-top-nav-child-selected .navigation-item-side-menu-selected)) .focus-indicator:focus-within{box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius)}:host(.navigation-item) .link:focus,:host(.navigation-item) ::slotted(a:focus){box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);outline:var(--ic-hc-focus-outline)}:host(.navigation-item-selected) .link:focus,:host(.navigation-item) ::slotted(a.active:focus){box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);outline:var(--ic-hc-focus-outline)}:host(.navigation-item-selected.dark) .link:focus,:host(.navigation-item.dark) ::slotted(a.active:focus){box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);outline:var(--ic-hc-focus-outline)}:host(.navigation-item) .link:active:not(:focus),:host(.navigation-item) ::slotted(a:active:not(:focus)){background-color:var(--ic-theme-active)}:host(.navigation-item-side-menu) .link,:host(.navigation-item-side-menu) ::slotted(a){min-height:2.5rem;height:auto;width:100%;box-sizing:border-box;color:var(--ic-color-text-primary-light);--ic-typography-color:var(--ic-color-text-primary-light);display:flex;align-items:center;justify-content:flex-start;text-decoration:none;text-wrap:wrap;white-space:normal;transition:box-shadow var(--ic-transition-duration-fast),\n    border-radius var(--ic-transition-duration-fast)}:host(.navigation-item-side-menu) ::slotted(a){font:var(--ic-font-body) !important;letter-spacing:var(--ic-font-letter-spacing-0pt005) !important;transition:box-shadow var(--ic-easing-transition-fast),\n    background-color var(--ic-easing-transition-fast)}:host(.navigation-item-side-menu) .link:hover:not(:focus){background-color:var(--ic-action-dark-bg-hover)}:host(.navigation-item-side-menu) ::slotted(a:hover:not(:focus)){background-color:var(--ic-action-dark-bg-hover) !important}:host(.navigation-item-side-menu) .focus-indicator:focus-within{box-shadow:none}:host(.navigation-item-side-menu) .link:focus,:host(.navigation-item-side-menu) ::slotted(a:focus){box-shadow:var(--ic-border-focus-inset) !important;width:auto;border-radius:var(--ic-border-radius-inset) !important}:host(.navigation-item-side-menu-selected) .link,:host(.navigation-item-side-menu-selected) ::slotted(a){transition:box-shadow var(--ic-easing-transition-slow),\n    background-color var(--ic-easing-transition-slow)}:host(.navigation-item-side-menu-selected) .link:focus,:host(.navigation-item-side-menu) ::slotted(a.active:focus),:host(.navigation-item-top-nav-child) ::slotted(a.active:focus){margin-left:var(--ic-space-xs) !important;padding-left:var(--ic-space-xs) !important}:host(.navigation-item-top-nav-child) .link,:host(.navigation-item-top-nav-child) ::slotted(a){height:2.5rem;width:-moz-fit-content;width:fit-content;min-width:9.063rem;color:var(--ic-color-text-primary);display:flex;align-items:center;justify-content:flex-start;padding:0 var(--ic-space-md) !important;text-decoration:none;position:relative;transition:box-shadow var(--ic-transition-duration-fast),\n    border-radius var(--ic-transition-duration-slow)}:host(.navigation-item-top-nav-child) ::slotted(a){font:var(--ic-font-body) !important;letter-spacing:var(--ic-font-letter-spacing-0pt005) !important}:host(.navigation-item-top-nav-child) .link:hover:not(:focus){background-color:var(--ic-action-dark-bg-hover) !important}:host(.navigation-item-top-nav-child) ::slotted(a:hover):not(:focus){background-color:var(--ic-action-dark-bg-hover) !important}:host(.navigation-item-top-nav-child) .link:focus,:host(.navigation-item-top-nav-child) ::slotted(a:focus){z-index:1;outline:var(--ic-hc-focus-outline);border-radius:var(--ic-border-radius-inset);box-shadow:var(--ic-border-focus-inset);transition:border-radius 0s, box-shadow var(--ic-transition-duration-fast)}:host(.navigation-item-top-nav-child) ::slotted(a.active:focus){box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset)}:host(.navigation-item-side-menu) .link:active:not(:focus){background-color:var(--ic-action-dark-bg-pressed)}:host(.navigation-item-top-nav-child) .link:active:not(:focus),:host(.navigation-item-top-nav-child) ::slotted(a:active):not(:focus){outline:var(--ic-hc-focus-outline);background-color:var(--ic-action-dark-bg-pressed)}:host(.navigation-item-top-nav-child) ::slotted(a:active):not(:focus),:host(.navigation-item-side-menu) ::slotted(a:active):not(:focus){background-color:var(--ic-action-dark-bg-pressed) !important}:host(.navigation-item-side-menu-selected) *,:host(.navigation-item-top-nav-child-selected) *,:host(.navigation-item-side-menu) ::slotted(a.active),:host(.navigation-item-top-nav-child) ::slotted(a.active){font-weight:700 !important}:host(.navigation-item-top-nav-child) ::slotted(a.active)::before,:host(.navigation-item-top-nav-child-selected) .link::before,:host(.navigation-item-side-menu-selected) .link::before,:host(.navigation-item-side-menu) ::slotted(a.active)::before,:host(.navigation-item-side-menu-selected) .link:focus::before,:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before{content:"";position:absolute;left:0;width:var(--ic-space-xs);height:inherit;min-height:2.5rem;background-color:var(--ic-action-default);transition:left 0s}:host(.navigation-item-top-nav-child-selected) .link::before,:host(.navigation-item-side-menu-selected) .link::before,:host(.navigation-item-side-menu-selected) .link:focus::before{margin-top:0.25rem}:host(.navigation-item-top-nav-child-selected) .link:focus{margin-left:var(--ic-space-xs);margin-right:calc(-1 * var(--ic-space-xs));padding-left:var(--ic-space-xs) !important}:host(.navigation-item-top-nav-child-selected) .link:focus::before{left:calc(-1 * var(--ic-space-xs));z-index:1}:host(.navigation-item-side-menu-selected) .link::before,:host(.navigation-item-side-menu) ::slotted(a.active)::before,:host(.navigation-item-side-menu-selected) .link:focus::before,:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before{z-index:1}:host(.navigation-item-side-menu-selected) .link:focus::before,:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before,:host(.navigation-item-top-nav-child) ::slotted(a.active:focus)::before{left:calc(-1 * var(--ic-space-xs))}:host(.navigation-item-side-menu-selected) .link::after{display:none}:host(.navigation-item-side-nav-collapsed) .link{height:100%}:host(.navigation-item-side-nav-collapsed) ::slotted(svg),:host(.navigation-item-side-nav-collapsed-with-label) ::slotted(svg){margin:auto;pointer-events:none}:host(.navigation-item-side-nav-collapsed) .icon,:host(.navigation-item-side-nav-collapsed-with-label) .icon,:host(.navigation-item-side-nav-collapsed-with-label) ic-typography{align-items:center;padding:0;margin:auto 0;width:-moz-fit-content;width:fit-content;pointer-events:none}:host(.navigation-item-side-nav-collapsed-with-label) ic-typography{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;text-align:center}:host(.navigation-item-side-nav-collapsed-with-label) .link,:host(.navigation-item-side-nav-collapsed-with-label) ::slotted(a){display:flex;flex-direction:column;height:-moz-fit-content;height:fit-content;padding:var(--ic-space-xs) !important;gap:var(--ic-space-xxs)}:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label) .link,:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label) ::slotted(a){height:auto !important;gap:0;width:auto;padding:var(--ic-space-xs) !important}:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label) ::slotted(a){display:block;text-align:center}:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label) .link ic-typography{opacity:1;min-width:-moz-min-content;min-width:min-content}:host(.navigation-item-side-nav-collapsed) svg,:host(.navigation-item-side-nav-collapsed-with-label) svg{display:none}::slotted(svg){fill:var(--ic-theme-text);width:var(--ic-space-lg);margin-left:var(--ic-space-md)}.icon{height:var(--ic-space-lg);width:var(--ic-space-xxl);margin-left:calc(-1 * var(--ic-space-md));flex:0 1 0%;position:relative}.icon>::slotted(*){margin-left:var(--ic-space-md) !important}:host(.navigation-item-side-nav-collapsed) .icon>::slotted(*){margin:auto !important}:host(.navigation-item-side-nav) .link,:host(.navigation-item-side-nav) ::slotted(a){height:var(--navigation-item-height, 56px);min-height:var(--navigation-item-min-height);width:var(--navigation-item-width, auto);justify-content:var(--navigation-item-justify-content);display:flex;gap:var(--ic-space-xs);box-sizing:border-box;color:var(--navigation-item-child-color) !important;text-decoration:none !important;white-space:nowrap;padding-top:var(--ic-space-md) !important;padding-bottom:var(--ic-space-md) !important;text-wrap:wrap}:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link,:host(.navigation-item-side-nav.navigation-item-top-nav-child) ::slotted(a){height:var(--navigation-item-child-height);width:var(--navigation-group-width);color:var(--navigation-item-child-color) !important;display:flex;gap:0.625rem;box-sizing:border-box;min-width:0;transition:box-shadow var(--ic-easing-transition-fast);text-decoration:none !important;white-space:nowrap}:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link:focus,:host(.navigation-item-side-nav.navigation-item-top-nav-child) ::slotted(a:focus){box-shadow:var(--ic-border-focus-dark)}:host(.navigation-item-side-nav.navigation-item-side-menu) .link:active{background-color:var(--navigation-item-child-active)}:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link:active,:host(.navigation-item-side-nav.navigation-item-top-nav-child) ::slotted(a:active){background-color:var(--navigation-item-child-active)}:host(.navigation-item-side-nav) a.link ic-typography,:host(.navigation-item-side-nav.navigation-item-top-nav-child) a.link ic-typography,:host(.navigation-item-side-nav) div.link ic-typography,:host(.navigation-item-side-nav.navigation-item-top-nav-child) div.link ic-typography,.navigation-item-side-nav-slotted-text{opacity:var(--navigation-item-label-opacity);transition:opacity var(--ic-easing-transition-slow);white-space:wrap;text-overflow:ellipsis;overflow:hidden}:host(.navigation-item-side-nav.navigation-item-selected) .link,:host(.navigation-item-side-nav.navigation-item) ::slotted(a.active){box-shadow:inset 0.313rem 0 0 var(--ic-theme-text)}:host(.navigation-item-side-nav.navigation-item-selected) .link::before,:host(.navigation-item-side-nav) ::slotted(a.active)::before{content:"";display:block;position:absolute;inset:0 0 0 0.313rem;border-radius:0.688rem !important;transition:var(--ic-easing-transition-slow)}:host(.navigation-item-side-nav.navigation-item-selected) .link:focus::before,:host(.navigation-item-side-nav) ::slotted(a.active:focus)::before{box-shadow:var(--ic-border-focus-inset)}:host(:not(.navigation-item-side-nav-collapsed).navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label) .link{opacity:var(--navigation-item-label-opacity);height:auto}:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label) .link,:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label) ::slotted(a){min-width:var(--navigation-group-item-min-width);padding:var(--ic-space-xs) !important;height:auto;gap:0}:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label) ::slotted(a){display:block}:host(.navigation-item-side-nav.navigation-item-selected) .link::after,:host(.navigation-item-side-nav) ::slotted(a.active)::after{display:none}:host(.navigation-item-side-nav.navigation-item) .link:focus,:host(.navigation-item-side-nav.navigation-item) ::slotted(a:focus){box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset);background-color:transparent}:host(.navigation-item-side-nav.navigation-item-selected) .link:focus,:host(.navigation-item-side-nav) ::slotted(a.active:focus){margin:0 auto;box-shadow:inset 0.313rem 0 0 var(--ic-theme-text);border-radius:0}:host(.navigation-item-side-nav.navigation-item) .link:hover:not(:focus){background-color:var(--ic-theme-hover) !important}:host(.navigation-item-page-header).link,:host(.navigation-item-page-header) a,:host(.navigation-item-page-header) ::slotted(a){height:2.5rem !important;color:var(--ic-color-text-primary) !important;transition:all var(--ic-easing-transition-fast) !important;box-shadow:rgba(23 89 188 / 0%) !important}:host(.navigation-item-page-header.navigation-item-selected) .link::after,:host(.navigation-item-page-header) ::slotted(a.active)::after{content:" " !important;position:absolute;bottom:0;left:0;right:0;height:var(--ic-space-xxs);background-color:var(--ic-action-default) !important}:host(.navigation-item-page-header) .link:hover,:host(.navigation-item-page-header) ::slotted(.link:hover),:host(.navigation-item-page-header) ::slotted(a:hover),:host(.navigation-item-page-header) .link:hover:not(:focus){background-color:var(--ic-action-default-bg-hover) !important;cursor:pointer}:host(.navigation-item-page-header) .link:focus,:host(.navigation-item-page-header) ::slotted(a:focus){box-shadow:var(--ic-border-focus)}:host(.navigation-item-page-header) .link:active,:host(.navigation-item-page-header) ::slotted(a:active){background-color:var(--ic-action-default-bg-active) !important}:host(.navigation-item-page-header.navigation-item-selected) .link:focus::after,:host(.navigation-item-page-header) ::slotted(a.active:focus)::after{border-bottom-left-radius:var(--ic-border-radius);border-bottom-right-radius:var(--ic-border-radius)}:host(.navigation-item-page-header.navigation-item-selected.with-transition) .link,:host(.navigation-item-page-header.navigation-item-selected.with-transition) ::slotted(a.active){transition:all var(--ic-easing-transition-fast),\n    border-color var(--ic-transition-duration-fast)}:host(.navigation-item-page-header) ::slotted(a.active)::before,:host(.navigation-item-page-header) ::slotted(a.active:focus)::before,:host(.navigation-item-page-header.navigation-item-selected) .link:focus::before{display:none}.open-in-new-icon{flex:1}.open-in-new-icon svg{margin-top:var(--ic-space-xxs);padding-left:var(--ic-space-xxs)}:host(.navigation-item-side-nav) .open-in-new-icon{margin-left:calc(-1 * var(--ic-space-xs))}:host(.navigation-item-top-nav) .open-in-new-icon svg,:host(.navigation-item-page-header) .open-in-new-icon svg,:host(.navigation-item-side-nav) .open-in-new-icon svg{height:0.875rem;width:0.875rem}:host(.navigation-item-side-menu) .open-in-new-icon svg,:host(.navigation-item-top-nav-child) .open-in-new-icon svg{height:var(--ic-space-md);width:var(--ic-space-md)}:host(.navigation-item-page-header) .open-in-new-icon svg,:host(.navigation-item-top-nav-child) .open-in-new-icon svg,:host(.navigation-item-side-menu) .open-in-new-icon svg{fill:var(--ic-color-text-primary)}@media (forced-colors: active){.open-in-new-icon svg{fill:currentcolor}}';const g=class{constructor(o){i(this,o);this.childBlur=t(this,"childBlur",7);this.navItemClicked=t(this,"navItemClicked",7);this.isInitialRender=true;this.hostMutationObserver=null;this.ARIA_LABEL_STRING="aria-label";this.displayDefaultNavigationItem=(i,t,a,o,n,r,d)=>{const c=this.isTopNavChild||this.inTopNavSideMenu?"body":"label";const l=this.expandable&&e("div",{class:{svg:true},innerHTML:v});const m=this.el.querySelector('[slot="icon"]')&&e("div",{class:"icon"},e("slot",{name:"icon"}),s(this.el,"badge")&&e("slot",{name:"badge"}));if(i!==""){return e("a",{href:i,target:a,rel:o,hreflang:t,referrerPolicy:n,download:r!==false?r:null,class:"link",ref:i=>this.itemEl=i,part:"link","aria-label":this.ariaLabel?this.ariaLabel:null},m,e("ic-typography",{variant:c},d),e("div",{class:"chevron-container"},l),a==="_blank"&&e("span",{class:"open-in-new-icon",innerHTML:h}))}return e("div",{tabindex:"0",class:"link",ref:i=>this.itemEl=i},m,e("ic-typography",{variant:c},d),l)};this.topNavResizedHandler=({detail:i})=>{var t;const{size:e}=i;if(e!==this.deviceSize){this.deviceSize=e;this.inTopNavSideMenu=e<=(((t=this.parentEl)===null||t===void 0?void 0:t.customMobileBreakpoint)||r.L)}};this.sideNavExpandHandler=({detail:i})=>{const{sideNavExpanded:t,sideNavMobile:e}=i;this.sideNavExpanded=t;this.isSideNavMobile=e};this.handleBlur=({relatedTarget:i})=>{if(i===null||i.tagName!=="IC-NAVIGATION-ITEM"){this.childBlur.emit()}};this.handleClick=()=>{this.navItemClicked.emit()};this.hostMutationCallback=i=>{let t=false;i.forEach((({attributeName:i})=>{if(i===this.ARIA_LABEL_STRING){this.ariaLabel=this.el.getAttribute(i);t=true}}));if(t){a(this)}};this.generateTooltipLabel=()=>{if(this.label){return this.label}if(this.navigationSlot){return this.navigationSlot.textContent}if(this.el.children[0]){return this.el.children[0].textContent}return""};this.renderNavigationItemContent=()=>{if(this.label){return this.displayDefaultNavigationItem(this.href,this.hreflang,this.target,this.rel,this.referrerpolicy,this.download,this.label)}if(this.navigationSlot){return e("slot",{name:"navigation-item"})}return e("slot",null)};this.deviceSize=r.XL;this.focusStyle=d();this.inTopNavSideMenu=false;this.isSideNavMobile=false;this.isTopNavChild=false;this.navigationType=undefined;this.parentEl=undefined;this.sideNavExpanded=false;this.ariaLabel="";this.collapsedIconLabel=false;this.displayNavigationTooltip=false;this.download=false;this.expandable=false;this.href="";this.hreflang=undefined;this.label=undefined;this.rel=undefined;this.referrerpolicy=undefined;this.selected=false;this.target=undefined}disconnectedCallback(){var i;if(this.navigationType==="side"){this.parentEl.removeEventListener("icSideNavExpanded",this.sideNavExpandHandler)}else if(this.navigationType==="top"){this.parentEl.removeEventListener("icTopNavResized",this.topNavResizedHandler)}(i=this.hostMutationObserver)===null||i===void 0?void 0:i.disconnect()}componentWillLoad(){const{navType:i,parent:t}=l(this.el);this.navigationType=i;this.parentEl=t;this.deviceSize=c();if(this.navigationType==="side"){this.parentEl.addEventListener("icSideNavExpanded",this.sideNavExpandHandler)}else if(this.navigationType==="top"){this.parentEl.addEventListener("icTopNavResized",this.topNavResizedHandler);if(this.el.parentElement.tagName==="IC-NAVIGATION-GROUP")this.isTopNavChild=true;if(this.deviceSize<=this.parentEl.customMobileBreakpoint)this.inTopNavSideMenu=true}this.navigationSlot=this.el.querySelector('[slot="navigation-item"]');if(this.navigationSlot){this.navigationSlot.ariaLabel=this.navigationSlot.textContent.trim()}if(this.el.hasAttribute(this.ARIA_LABEL_STRING)){this.ariaLabel=this.el.getAttribute(this.ARIA_LABEL_STRING)}}componentDidLoad(){this.hostMutationObserver=new MutationObserver(this.hostMutationCallback);this.hostMutationObserver.observe(this.el,{attributes:true})}componentDidUpdate(){this.isInitialRender=false}themeChangeHandler({detail:i}){this.focusStyle=i.mode}async setFocus(){var i;(i=this.itemEl)===null||i===void 0?void 0:i.focus()}render(){const{inTopNavSideMenu:i,isTopNavChild:t,selected:a}=this;return e(o,{class:{["navigation-item"]:true,["navigation-item-top-nav"]:!i&&this.navigationType==="top",["navigation-item-top-nav-child-selected"]:t&&!i&&a,[this.focusStyle]:!i&&!t||this.navigationType==="side"&&t,["navigation-item-selected"]:!t&&a,["navigation-item-side-menu"]:i,["navigation-item-side-menu-selected"]:i&&a,["navigation-item-top-nav-child"]:t&&!i,["navigation-item-page-header"]:this.navigationType==="page-header",["with-transition"]:!this.isInitialRender,["navigation-item-side-nav"]:this.navigationType==="side",["navigation-item-side-nav-collapsed"]:(!this.sideNavExpanded||this.displayNavigationTooltip)&&this.navigationType==="side",["navigation-item-side-nav-collapsed-with-label"]:!this.sideNavExpanded&&this.navigationType==="side"&&this.collapsedIconLabel&&!this.isSideNavMobile,["expandable"]:this.expandable},onBlur:t&&!i?this.handleBlur:null,onClick:this.handleClick,"aria-current":a?"page":null,role:"listitem"},e("ic-tooltip",{label:this.generateTooltipLabel(),target:"navigation-item",placement:"right",class:{["tooltip-navigation-item"]:true,["tooltip-navigation-item-side-nav-collapsed"]:(!this.sideNavExpanded||this.displayNavigationTooltip)&&this.navigationType==="side",["tooltip-long-label-navigation-item-side-nav-expanded"]:this.el.hasAttribute("[display-navigation-tooltip = 'true']")}},this.renderNavigationItemContent()))}static get delegatesFocus(){return true}get el(){return n(this)}};g.style=m;export{g as ic_navigation_item};
-//# sourceMappingURL=p-78c1f1cc.entry.js.map

package/dist/core/p-78c1f1cc.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["icNavigationItemCss","NavigationItem","this","isInitialRender","hostMutationObserver","ARIA_LABEL_STRING","displayDefaultNavigationItem","href","hreflang","target","rel","referrerpolicy","download","label","variant","isTopNavChild","inTopNavSideMenu","ChevronIconComponent","expandable","h","class","svg","innerHTML","chevronIcon","IconComponent","el","querySelector","name","isSlotUsed","referrerPolicy","ref","itemEl","part","ariaLabel","OpenInNew","tabindex","topNavResizedHandler","detail","size","deviceSize","_a","parentEl","customMobileBreakpoint","DEVICE_SIZES","L","sideNavExpandHandler","sideNavExpanded","sideNavMobile","isSideNavMobile","handleBlur","relatedTarget","tagName","childBlur","emit","handleClick","navItemClicked","hostMutationCallback","mutationList","forceComponentUpdate","forEach","attributeName","getAttribute","forceUpdate","generateTooltipLabel","navigationSlot","textContent","children","renderNavigationItemContent","XL","getThemeForegroundColor","disconnectedCallback","navigationType","removeEventListener","disconnect","componentWillLoad","navType","parent","getNavItemParentDetails","getCurrentDeviceSize","addEventListener","parentElement","trim","hasAttribute","componentDidLoad","MutationObserver","observe","attributes","componentDidUpdate","themeChangeHandler","focusStyle","mode","setFocus","focus","render","selected","Host","displayNavigationTooltip","collapsedIconLabel","onBlur","onClick","role","placement"],"sources":["src/components/ic-navigation-item/ic-navigation-item.css?tag=ic-navigation-item&encapsulation=shadow","src/components/ic-navigation-item/ic-navigation-item.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/**\n * @prop --ic-z-index-navigation-item: z-index of navigation item\n */\n\n:host {\n  display: block;\n}\n\n:host(:focus-within) {\n  z-index: var(--ic-z-index-navigation-item);\n}\n\n/* chevron */\nsvg {\n  width: var(--ic-space-xl);\n  fill: var(--ic-theme-text);\n}\n\n.svg {\n  margin-left: auto;\n}\n\n.chevron-container svg,\n.chevron-container .svg {\n  width: var(--ic-space-lg);\n  height: var(--ic-space-lg);\n}\n\n.chevron-container {\n  flex-grow: 1;\n}\n\n:host(.expandable.navigation-item) .link,\n:host(.expandable.navigation-item) ::slotted(a) {\n  padding-right: 0;\n}\n\n:host(.navigation-item) .link,\n:host(.navigation-item) ::slotted(a) {\n  height: calc(100% - var(--ic-space-xxs));\n  width: fit-content;\n  color: var(--ic-theme-text);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 var(--ic-space-md) var(--ic-space-xxs);\n  text-decoration: none;\n  transition: var(--ic-easing-transition-fast);\n  position: relative;\n  white-space: nowrap;\n}\n\n:host(.navigation-item) ::slotted(a) {\n  height: 100%;\n  font: var(--ic-font-label) !important;\n  letter-spacing: var(--ic-font-letter-spacing-0pt025) !important;\n  padding: 0 var(--ic-space-md) !important;\n}\n\n:host(.navigation-item-selected) .link::after,\n:host(.navigation-item-selected) ::slotted(a.active)::after,\n:host(.navigation-item-top-nav) ::slotted(a.active)::after {\n  content: \"\";\n  height: 0.25rem;\n  width: 100%;\n  position: absolute;\n  bottom: 0;\n  background-color: var(--ic-theme-text);\n}\n\n:host(.navigation-item-selected.navigation-item-page-header)\n  ::slotted(a.active)::after,\n:host(.navigation-item-selected.navigation-item-page-header) .link::after,\n:host(.navigation-item.navigation-item-page-header) ::slotted(a.active)::after,\n:host(.navigation-item-top-nav-child) ::slotted(a.active)::after {\n  content: none;\n}\n\n:host(.navigation-item-side-menu-selected) .link,\n:host(.navigation-item-side-menu) ::slotted(a.active),\n:host(.navigation-item-top-nav-child) ::slotted(a.active) {\n  box-shadow: none;\n}\n\n:host(.navigation-item) .link:hover:not(:focus) {\n  background-color: var(--ic-theme-hover);\n  cursor: pointer;\n}\n\n:host(\n    .navigation-item:not(\n        .navigation-item-page-header,\n        .navigation-item-side-menu\n      )\n  )\n  ::slotted(a:hover:not(:focus)) {\n  background-color: var(--ic-theme-hover) !important;\n}\n\n:host(\n    .navigation-item:not(\n        .navigation-item-top-nav-child,\n        .navigation-item-side-menu,\n        .navigation-item-top-nav-child-selected\n          .navigation-item-side-menu-selected\n      )\n  )\n  .focus-indicator:focus-within {\n  box-shadow: var(--ic-border-focus);\n  border-radius: var(--ic-border-radius);\n}\n\n:host(.navigation-item) .link:focus,\n:host(.navigation-item) ::slotted(a:focus) {\n  box-shadow: var(--ic-border-focus);\n  border-radius: var(--ic-border-radius);\n  outline: var(--ic-hc-focus-outline);\n}\n\n:host(.navigation-item-selected) .link:focus,\n:host(.navigation-item) ::slotted(a.active:focus) {\n  box-shadow: var(--ic-border-focus);\n  border-radius: var(--ic-border-radius);\n  outline: var(--ic-hc-focus-outline);\n}\n\n:host(.navigation-item-selected.dark) .link:focus,\n:host(.navigation-item.dark) ::slotted(a.active:focus) {\n  box-shadow: var(--ic-border-focus);\n  border-radius: var(--ic-border-radius);\n  outline: var(--ic-hc-focus-outline);\n}\n\n:host(.navigation-item) .link:active:not(:focus),\n:host(.navigation-item) ::slotted(a:active:not(:focus)) {\n  background-color: var(--ic-theme-active);\n}\n\n:host(.navigation-item-side-menu) .link,\n:host(.navigation-item-side-menu) ::slotted(a) {\n  min-height: 2.5rem;\n  height: auto;\n  width: 100%;\n  box-sizing: border-box;\n  color: var(--ic-color-text-primary-light);\n\n  --ic-typography-color: var(--ic-color-text-primary-light);\n\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  text-decoration: none;\n  text-wrap: wrap;\n  white-space: normal;\n  transition: box-shadow var(--ic-transition-duration-fast),\n    border-radius var(--ic-transition-duration-fast);\n}\n\n:host(.navigation-item-side-menu) ::slotted(a) {\n  font: var(--ic-font-body) !important;\n  letter-spacing: var(--ic-font-letter-spacing-0pt005) !important;\n  transition: box-shadow var(--ic-easing-transition-fast),\n    background-color var(--ic-easing-transition-fast);\n}\n\n:host(.navigation-item-side-menu) .link:hover:not(:focus) {\n  background-color: var(--ic-action-dark-bg-hover);\n}\n\n:host(.navigation-item-side-menu) ::slotted(a:hover:not(:focus)) {\n  background-color: var(--ic-action-dark-bg-hover) !important;\n}\n\n:host(.navigation-item-side-menu) .focus-indicator:focus-within {\n  box-shadow: none;\n}\n\n:host(.navigation-item-side-menu) .link:focus,\n:host(.navigation-item-side-menu) ::slotted(a:focus) {\n  box-shadow: var(--ic-border-focus-inset) !important;\n  width: auto;\n  border-radius: var(--ic-border-radius-inset) !important;\n}\n\n:host(.navigation-item-side-menu-selected) .link,\n:host(.navigation-item-side-menu-selected) ::slotted(a) {\n  transition: box-shadow var(--ic-easing-transition-slow),\n    background-color var(--ic-easing-transition-slow);\n}\n\n:host(.navigation-item-side-menu-selected) .link:focus,\n:host(.navigation-item-side-menu) ::slotted(a.active:focus),\n:host(.navigation-item-top-nav-child) ::slotted(a.active:focus) {\n  margin-left: var(--ic-space-xs) !important;\n  padding-left: var(--ic-space-xs) !important;\n}\n\n:host(.navigation-item-top-nav-child) .link,\n:host(.navigation-item-top-nav-child) ::slotted(a) {\n  height: 2.5rem;\n  width: fit-content;\n  min-width: 9.063rem;\n  color: var(--ic-color-text-primary);\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  padding: 0 var(--ic-space-md) !important;\n  text-decoration: none;\n  position: relative;\n  transition: box-shadow var(--ic-transition-duration-fast),\n    border-radius var(--ic-transition-duration-slow);\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a) {\n  font: var(--ic-font-body) !important;\n  letter-spacing: var(--ic-font-letter-spacing-0pt005) !important;\n}\n\n:host(.navigation-item-top-nav-child) .link:hover:not(:focus) {\n  background-color: var(--ic-action-dark-bg-hover) !important;\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a:hover):not(:focus) {\n  background-color: var(--ic-action-dark-bg-hover) !important;\n}\n\n:host(.navigation-item-top-nav-child) .link:focus,\n:host(.navigation-item-top-nav-child) ::slotted(a:focus) {\n  z-index: 1;\n  outline: var(--ic-hc-focus-outline);\n  border-radius: var(--ic-border-radius-inset);\n  box-shadow: var(--ic-border-focus-inset);\n  transition: border-radius 0s, box-shadow var(--ic-transition-duration-fast);\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a.active:focus) {\n  box-shadow: var(--ic-border-focus-inset);\n  border-radius: var(--ic-border-radius-inset);\n}\n\n:host(.navigation-item-side-menu) .link:active:not(:focus) {\n  background-color: var(--ic-action-dark-bg-pressed);\n}\n\n:host(.navigation-item-top-nav-child) .link:active:not(:focus),\n:host(.navigation-item-top-nav-child) ::slotted(a:active):not(:focus) {\n  outline: var(--ic-hc-focus-outline);\n  background-color: var(--ic-action-dark-bg-pressed);\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a:active):not(:focus),\n:host(.navigation-item-side-menu) ::slotted(a:active):not(:focus) {\n  background-color: var(--ic-action-dark-bg-pressed) !important;\n}\n\n:host(.navigation-item-side-menu-selected) *,\n:host(.navigation-item-top-nav-child-selected) *,\n:host(.navigation-item-side-menu) ::slotted(a.active),\n:host(.navigation-item-top-nav-child) ::slotted(a.active) {\n  font-weight: 700 !important;\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a.active)::before,\n:host(.navigation-item-top-nav-child-selected) .link::before,\n:host(.navigation-item-side-menu-selected) .link::before,\n:host(.navigation-item-side-menu) ::slotted(a.active)::before,\n:host(.navigation-item-side-menu-selected) .link:focus::before,\n:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  width: var(--ic-space-xs);\n  height: inherit;\n  min-height: 2.5rem;\n  background-color: var(--ic-action-default);\n  transition: left 0s;\n}\n\n:host(.navigation-item-top-nav-child-selected) .link::before,\n:host(.navigation-item-side-menu-selected) .link::before,\n:host(.navigation-item-side-menu-selected) .link:focus::before {\n  margin-top: 0.25rem;\n}\n\n:host(.navigation-item-top-nav-child-selected) .link:focus {\n  margin-left: var(--ic-space-xs);\n  margin-right: calc(-1 * var(--ic-space-xs));\n  padding-left: var(--ic-space-xs) !important;\n}\n\n:host(.navigation-item-top-nav-child-selected) .link:focus::before {\n  left: calc(-1 * var(--ic-space-xs));\n  z-index: 1;\n}\n\n:host(.navigation-item-side-menu-selected) .link::before,\n:host(.navigation-item-side-menu) ::slotted(a.active)::before,\n:host(.navigation-item-side-menu-selected) .link:focus::before,\n:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before {\n  z-index: 1;\n}\n\n:host(.navigation-item-side-menu-selected) .link:focus::before,\n:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before,\n:host(.navigation-item-top-nav-child) ::slotted(a.active:focus)::before {\n  left: calc(-1 * var(--ic-space-xs));\n}\n\n:host(.navigation-item-side-menu-selected) .link::after {\n  display: none;\n}\n\n:host(.navigation-item-side-nav-collapsed) .link {\n  height: 100%;\n}\n\n:host(.navigation-item-side-nav-collapsed) ::slotted(svg),\n:host(.navigation-item-side-nav-collapsed-with-label) ::slotted(svg) {\n  margin: auto;\n  pointer-events: none;\n}\n\n:host(.navigation-item-side-nav-collapsed) .icon,\n:host(.navigation-item-side-nav-collapsed-with-label) .icon,\n:host(.navigation-item-side-nav-collapsed-with-label) ic-typography {\n  align-items: center;\n  padding: 0;\n  margin: auto 0;\n  width: fit-content;\n  pointer-events: none;\n}\n\n:host(.navigation-item-side-nav-collapsed-with-label) ic-typography {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  width: 100%;\n  text-align: center;\n}\n\n:host(.navigation-item-side-nav-collapsed-with-label) .link,\n:host(.navigation-item-side-nav-collapsed-with-label) ::slotted(a) {\n  display: flex;\n  flex-direction: column;\n  height: fit-content;\n  padding: var(--ic-space-xs) !important;\n  gap: var(--ic-space-xxs);\n}\n\n:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label)\n  .link,\n:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label)\n  ::slotted(a) {\n  height: auto !important;\n  gap: 0;\n  width: auto;\n  padding: var(--ic-space-xs) !important;\n}\n\n:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label)\n  ::slotted(a) {\n  display: block;\n  text-align: center;\n}\n\n:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label)\n  .link\n  ic-typography {\n  opacity: 1;\n  min-width: min-content;\n}\n\n:host(.navigation-item-side-nav-collapsed) svg,\n:host(.navigation-item-side-nav-collapsed-with-label) svg {\n  display: none;\n}\n\n::slotted(svg) {\n  fill: var(--ic-theme-text);\n  width: var(--ic-space-lg);\n  margin-left: var(--ic-space-md);\n}\n\n.icon {\n  height: var(--ic-space-lg);\n  width: var(--ic-space-xxl);\n  margin-left: calc(-1 * var(--ic-space-md));\n  flex: 0 1 0%;\n  position: relative;\n}\n\n.icon > ::slotted(*) {\n  margin-left: var(--ic-space-md) !important;\n}\n\n:host(.navigation-item-side-nav-collapsed) .icon > ::slotted(*) {\n  margin: auto !important;\n}\n\n:host(.navigation-item-side-nav) .link,\n:host(.navigation-item-side-nav) ::slotted(a) {\n  height: var(--navigation-item-height, 56px);\n  min-height: var(--navigation-item-min-height);\n  width: var(--navigation-item-width, auto);\n  justify-content: var(--navigation-item-justify-content);\n  display: flex;\n  gap: var(--ic-space-xs);\n  box-sizing: border-box;\n  color: var(--navigation-item-child-color) !important;\n  text-decoration: none !important;\n  white-space: nowrap;\n  padding-top: var(--ic-space-md) !important;\n  padding-bottom: var(--ic-space-md) !important;\n  text-wrap: wrap;\n}\n\n:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link,\n:host(.navigation-item-side-nav.navigation-item-top-nav-child) ::slotted(a) {\n  height: var(--navigation-item-child-height);\n  width: var(--navigation-group-width);\n  color: var(--navigation-item-child-color) !important;\n  display: flex;\n  gap: 0.625rem;\n  box-sizing: border-box;\n  min-width: 0;\n  transition: box-shadow var(--ic-easing-transition-fast);\n  text-decoration: none !important;\n  white-space: nowrap;\n}\n\n:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link:focus,\n:host(.navigation-item-side-nav.navigation-item-top-nav-child)\n  ::slotted(a:focus) {\n  box-shadow: var(--ic-border-focus-dark);\n}\n\n:host(.navigation-item-side-nav.navigation-item-side-menu) .link:active {\n  background-color: var(--navigation-item-child-active);\n}\n\n:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link:active,\n:host(.navigation-item-side-nav.navigation-item-top-nav-child)\n  ::slotted(a:active) {\n  background-color: var(--navigation-item-child-active);\n}\n\n:host(.navigation-item-side-nav) a.link ic-typography,\n:host(.navigation-item-side-nav.navigation-item-top-nav-child)\n  a.link\n  ic-typography,\n:host(.navigation-item-side-nav) div.link ic-typography,\n:host(.navigation-item-side-nav.navigation-item-top-nav-child)\n  div.link\n  ic-typography,\n.navigation-item-side-nav-slotted-text {\n  opacity: var(--navigation-item-label-opacity);\n  transition: opacity var(--ic-easing-transition-slow);\n  white-space: wrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link,\n:host(.navigation-item-side-nav.navigation-item) ::slotted(a.active) {\n  box-shadow: inset 0.313rem 0 0 var(--ic-theme-text);\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link::before,\n:host(.navigation-item-side-nav) ::slotted(a.active)::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  inset: 0 0 0 0.313rem;\n  border-radius: 0.688rem !important;\n  transition: var(--ic-easing-transition-slow);\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link:focus::before,\n:host(.navigation-item-side-nav) ::slotted(a.active:focus)::before {\n  box-shadow: var(--ic-border-focus-inset);\n}\n\n:host(\n    :not(\n        .navigation-item-side-nav-collapsed\n      ).navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label\n  )\n  .link {\n  opacity: var(--navigation-item-label-opacity);\n  height: auto;\n}\n\n:host(\n    .navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label\n  )\n  .link,\n:host(\n    .navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label\n  )\n  ::slotted(a) {\n  min-width: var(--navigation-group-item-min-width);\n  padding: var(--ic-space-xs) !important;\n  height: auto;\n  gap: 0;\n}\n\n:host(\n    .navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label\n  )\n  ::slotted(a) {\n  display: block;\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link::after,\n:host(.navigation-item-side-nav) ::slotted(a.active)::after {\n  display: none;\n}\n\n:host(.navigation-item-side-nav.navigation-item) .link:focus,\n:host(.navigation-item-side-nav.navigation-item) ::slotted(a:focus) {\n  box-shadow: var(--ic-border-focus-inset);\n  border-radius: var(--ic-border-radius-inset);\n  background-color: transparent;\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link:focus,\n:host(.navigation-item-side-nav) ::slotted(a.active:focus) {\n  margin: 0 auto;\n  box-shadow: inset 0.313rem 0 0 var(--ic-theme-text);\n  border-radius: 0;\n}\n\n:host(.navigation-item-side-nav.navigation-item) .link:hover:not(:focus) {\n  background-color: var(--ic-theme-hover) !important;\n}\n\n:host(.navigation-item-page-header).link,\n:host(.navigation-item-page-header) a,\n:host(.navigation-item-page-header) ::slotted(a) {\n  height: 2.5rem !important;\n  color: var(--ic-color-text-primary) !important;\n  transition: all var(--ic-easing-transition-fast) !important;\n  box-shadow: rgba(23 89 188 / 0%) !important;\n}\n\n:host(.navigation-item-page-header.navigation-item-selected) .link::after,\n:host(.navigation-item-page-header) ::slotted(a.active)::after {\n  content: \" \" !important;\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: var(--ic-space-xxs);\n  background-color: var(--ic-action-default) !important;\n}\n\n:host(.navigation-item-page-header) .link:hover,\n:host(.navigation-item-page-header) ::slotted(.link:hover),\n:host(.navigation-item-page-header) ::slotted(a:hover),\n:host(.navigation-item-page-header) .link:hover:not(:focus) {\n  background-color: var(--ic-action-default-bg-hover) !important;\n  cursor: pointer;\n}\n\n:host(.navigation-item-page-header) .link:focus,\n:host(.navigation-item-page-header) ::slotted(a:focus) {\n  box-shadow: var(--ic-border-focus);\n}\n\n:host(.navigation-item-page-header) .link:active,\n:host(.navigation-item-page-header) ::slotted(a:active) {\n  background-color: var(--ic-action-default-bg-active) !important;\n}\n\n:host(.navigation-item-page-header.navigation-item-selected) .link:focus::after,\n:host(.navigation-item-page-header) ::slotted(a.active:focus)::after {\n  border-bottom-left-radius: var(--ic-border-radius);\n  border-bottom-right-radius: var(--ic-border-radius);\n}\n\n:host(.navigation-item-page-header.navigation-item-selected.with-transition)\n  .link,\n:host(.navigation-item-page-header.navigation-item-selected.with-transition)\n  ::slotted(a.active) {\n  transition: all var(--ic-easing-transition-fast),\n    border-color var(--ic-transition-duration-fast);\n}\n\n:host(.navigation-item-page-header) ::slotted(a.active)::before,\n:host(.navigation-item-page-header) ::slotted(a.active:focus)::before,\n:host(.navigation-item-page-header.navigation-item-selected)\n  .link:focus::before {\n  display: none;\n}\n\n.open-in-new-icon {\n  flex: 1;\n}\n\n.open-in-new-icon svg {\n  margin-top: var(--ic-space-xxs);\n  padding-left: var(--ic-space-xxs);\n}\n\n:host(.navigation-item-side-nav) .open-in-new-icon {\n  margin-left: calc(-1 * var(--ic-space-xs));\n}\n\n:host(.navigation-item-top-nav) .open-in-new-icon svg,\n:host(.navigation-item-page-header) .open-in-new-icon svg,\n:host(.navigation-item-side-nav) .open-in-new-icon svg {\n  height: 0.875rem;\n  width: 0.875rem;\n}\n\n:host(.navigation-item-side-menu) .open-in-new-icon svg,\n:host(.navigation-item-top-nav-child) .open-in-new-icon svg {\n  height: var(--ic-space-md);\n  width: var(--ic-space-md);\n}\n\n:host(.navigation-item-page-header) .open-in-new-icon svg,\n:host(.navigation-item-top-nav-child) .open-in-new-icon svg,\n:host(.navigation-item-side-menu) .open-in-new-icon svg {\n  fill: var(--ic-color-text-primary);\n}\n\n@media (forced-colors: active) {\n  .open-in-new-icon svg {\n    fill: currentcolor;\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  forceUpdate,\n  Listen,\n  Method,\n  h,\n  Host,\n  Prop,\n  State,\n} from \"@stencil/core\";\n\nimport {\n  DEVICE_SIZES,\n  getCurrentDeviceSize,\n  getThemeForegroundColor,\n  getNavItemParentDetails,\n  isSlotUsed,\n} from \"../../utils/helpers\";\nimport {\n  IcNavType,\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundNoDefault,\n} from \"../../utils/types\";\n\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\n\nimport OpenInNew from \"../../assets/OpenInNew.svg\";\nimport { IcExpandedDetail } from \"../ic-side-navigation/ic-side-navigation.types\";\n\n/**\n * @part link - The `<a>` within ic-navigation-item\n * @slot badge - Badge component overlaying the top right of the icon.\n * @slot icon - Content will be displayed to the left of the label for expanded navigation items, and in replacement of the label for collapsed navigation items.\n */\n\n@Component({\n  tag: \"ic-navigation-item\",\n  styleUrl: \"ic-navigation-item.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class NavigationItem {\n  private navigationSlot: HTMLElement;\n  private isInitialRender: boolean = true;\n  private itemEl: HTMLElement;\n  private hostMutationObserver: MutationObserver = null;\n  private ARIA_LABEL_STRING = \"aria-label\";\n\n  @Element() el: HTMLIcNavigationItemElement;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() focusStyle: IcThemeForegroundNoDefault | IcThemeForeground =\n    getThemeForegroundColor();\n  @State() inTopNavSideMenu: boolean = false;\n  @State() isSideNavMobile: boolean = false;\n  @State() isTopNavChild: boolean = false;\n  @State() navigationType: IcNavType | \"\";\n  @State() parentEl: HTMLElement;\n  @State() sideNavExpanded: boolean = false;\n  @State() ariaLabel: string = \"\";\n\n  /**\n   * @internal If `true`, the icon and label will be displayed when side navigation is collapsed.\n   */\n  @Prop() collapsedIconLabel: boolean = false;\n\n  /**\n   * @internal If `true`, the navigation item will be displayed within a tooltip.\n   */\n  @Prop() displayNavigationTooltip: boolean = false;\n\n  /**\n   * If `true`, the user can save the linked URL instead of navigating to it.\n   */\n  @Prop() download?: string | boolean = false;\n\n  /**\n   *  @internal If `true`, the navigation item will be expandable.\n   */\n  @Prop() expandable: boolean = false;\n\n  /**\n   * The destination of the navigation item.\n   */\n  @Prop() href: string = \"\";\n\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string;\n\n  /**\n   * The label of the navigation item.\n   */\n  @Prop() label: string;\n\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n\n  /**\n   *  If `true`, the navigation item will be set in a selected state.\n   */\n  @Prop() selected: boolean = false;\n\n  /**\n   *  The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n\n  /**\n   * @internal - Emitted when item loses focus.\n   */\n  @Event() childBlur: EventEmitter<void>;\n\n  /**\n   * @internal - Emitted when navigation item clicked.\n   */\n  @Event() navItemClicked: EventEmitter<void>;\n\n  disconnectedCallback(): void {\n    if (this.navigationType === \"side\") {\n      this.parentEl.removeEventListener(\n        \"icSideNavExpanded\",\n        this.sideNavExpandHandler\n      );\n    } else if (this.navigationType === \"top\") {\n      this.parentEl.removeEventListener(\n        \"icTopNavResized\",\n        this.topNavResizedHandler\n      );\n    }\n    this.hostMutationObserver?.disconnect();\n  }\n\n  componentWillLoad(): void {\n    const { navType, parent } = getNavItemParentDetails(this.el);\n    this.navigationType = navType;\n    this.parentEl = parent;\n    this.deviceSize = getCurrentDeviceSize();\n\n    if (this.navigationType === \"side\") {\n      this.parentEl.addEventListener(\n        \"icSideNavExpanded\",\n        this.sideNavExpandHandler\n      );\n    } else if (this.navigationType === \"top\") {\n      this.parentEl.addEventListener(\n        \"icTopNavResized\",\n        this.topNavResizedHandler\n      );\n      if (this.el.parentElement.tagName === \"IC-NAVIGATION-GROUP\")\n        this.isTopNavChild = true;\n      if (\n        this.deviceSize <=\n        (this.parentEl as HTMLIcTopNavigationElement).customMobileBreakpoint\n      )\n        this.inTopNavSideMenu = true;\n    }\n\n    this.navigationSlot = this.el.querySelector('[slot=\"navigation-item\"]');\n    if (this.navigationSlot) {\n      this.navigationSlot.ariaLabel = this.navigationSlot.textContent.trim();\n    }\n\n    if (this.el.hasAttribute(this.ARIA_LABEL_STRING)) {\n      this.ariaLabel = this.el.getAttribute(this.ARIA_LABEL_STRING);\n    }\n  }\n\n  componentDidLoad(): void {\n    this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n    this.hostMutationObserver.observe(this.el, {\n      attributes: true,\n    });\n  }\n\n  componentDidUpdate(): void {\n    this.isInitialRender = false;\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler({ detail }: CustomEvent<IcTheme>): void {\n    this.focusStyle = detail.mode;\n  }\n\n  /**\n   * Sets focus on the nav item.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.itemEl?.focus();\n  }\n\n  private displayDefaultNavigationItem = (\n    href: string,\n    hreflang: string,\n    target: string,\n    rel: string,\n    referrerpolicy: ReferrerPolicy,\n    download: string | boolean,\n    label: string\n  ): HTMLElement => {\n    const variant =\n      this.isTopNavChild || this.inTopNavSideMenu ? \"body\" : \"label\";\n    const ChevronIconComponent = this.expandable && (\n      <div class={{ svg: true }} innerHTML={chevronIcon}></div>\n    );\n    const IconComponent = this.el.querySelector('[slot=\"icon\"]') && (\n      <div class=\"icon\">\n        <slot name=\"icon\"></slot>\n        {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n      </div>\n    );\n\n    if (href !== \"\") {\n      return (\n        <a\n          href={href}\n          target={target}\n          rel={rel}\n          hreflang={hreflang}\n          referrerPolicy={referrerpolicy}\n          download={download !== false ? download : null}\n          class=\"link\"\n          ref={(el) => (this.itemEl = el)}\n          part=\"link\"\n          aria-label={this.ariaLabel ? this.ariaLabel : null}\n        >\n          {IconComponent}\n\n          <ic-typography variant={variant}>{label}</ic-typography>\n          <div class=\"chevron-container\">{ChevronIconComponent}</div>\n          {target === \"_blank\" && (\n            <span class=\"open-in-new-icon\" innerHTML={OpenInNew} />\n          )}\n        </a>\n      );\n    }\n\n    return (\n      <div tabindex=\"0\" class=\"link\" ref={(el) => (this.itemEl = el)}>\n        {IconComponent}\n        <ic-typography variant={variant}>{label}</ic-typography>\n        {ChevronIconComponent}\n      </div>\n    );\n  };\n\n  private topNavResizedHandler = ({\n    detail,\n  }: CustomEvent<{ size: number }>): void => {\n    const { size } = detail;\n    if (size !== this.deviceSize) {\n      this.deviceSize = size;\n      this.inTopNavSideMenu =\n        size <=\n        ((this.parentEl as HTMLIcTopNavigationElement)\n          ?.customMobileBreakpoint || DEVICE_SIZES.L);\n    }\n  };\n\n  private sideNavExpandHandler = ({\n    detail,\n  }: CustomEvent<IcExpandedDetail>): void => {\n    const { sideNavExpanded, sideNavMobile } = detail;\n    this.sideNavExpanded = sideNavExpanded;\n    this.isSideNavMobile = sideNavMobile;\n  };\n\n  private handleBlur = ({ relatedTarget }: FocusEvent) => {\n    if (\n      relatedTarget === null ||\n      (relatedTarget as HTMLElement).tagName !== \"IC-NAVIGATION-ITEM\"\n    ) {\n      this.childBlur.emit();\n    }\n  };\n\n  private handleClick = () => {\n    this.navItemClicked.emit();\n  };\n\n  // triggered when attributes of host element change\n  private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n    let forceComponentUpdate = false;\n    mutationList.forEach(({ attributeName }) => {\n      if (attributeName === this.ARIA_LABEL_STRING) {\n        this.ariaLabel = this.el.getAttribute(attributeName);\n        forceComponentUpdate = true;\n      }\n    });\n    if (forceComponentUpdate) {\n      forceUpdate(this);\n    }\n  };\n\n  private generateTooltipLabel = () => {\n    if (this.label) {\n      return this.label;\n    }\n\n    if (this.navigationSlot) {\n      return this.navigationSlot.textContent;\n    }\n\n    if (this.el.children[0]) {\n      return this.el.children[0].textContent;\n    }\n\n    return \"\";\n  };\n\n  private renderNavigationItemContent = () => {\n    if (this.label) {\n      return this.displayDefaultNavigationItem(\n        this.href,\n        this.hreflang,\n        this.target,\n        this.rel,\n        this.referrerpolicy,\n        this.download,\n        this.label\n      );\n    }\n\n    if (this.navigationSlot) {\n      return <slot name=\"navigation-item\"></slot>;\n    }\n    return <slot></slot>;\n  };\n\n  render() {\n    const { inTopNavSideMenu, isTopNavChild, selected } = this;\n\n    return (\n      <Host\n        class={{\n          [\"navigation-item\"]: true,\n          [\"navigation-item-top-nav\"]:\n            !inTopNavSideMenu && this.navigationType === \"top\",\n          [\"navigation-item-top-nav-child-selected\"]:\n            isTopNavChild && !inTopNavSideMenu && selected,\n          [this.focusStyle]:\n            (!inTopNavSideMenu && !isTopNavChild) ||\n            (this.navigationType === \"side\" && isTopNavChild),\n          [\"navigation-item-selected\"]: !isTopNavChild && selected,\n          [\"navigation-item-side-menu\"]: inTopNavSideMenu,\n          [\"navigation-item-side-menu-selected\"]: inTopNavSideMenu && selected,\n          [\"navigation-item-top-nav-child\"]: isTopNavChild && !inTopNavSideMenu,\n          [\"navigation-item-page-header\"]:\n            this.navigationType === \"page-header\",\n          [\"with-transition\"]: !this.isInitialRender,\n          [\"navigation-item-side-nav\"]: this.navigationType === \"side\",\n          [\"navigation-item-side-nav-collapsed\"]:\n            (!this.sideNavExpanded || this.displayNavigationTooltip) &&\n            this.navigationType === \"side\",\n          [\"navigation-item-side-nav-collapsed-with-label\"]:\n            !this.sideNavExpanded &&\n            this.navigationType === \"side\" &&\n            this.collapsedIconLabel &&\n            !this.isSideNavMobile,\n          [\"expandable\"]: this.expandable,\n        }}\n        onBlur={isTopNavChild && !inTopNavSideMenu ? this.handleBlur : null}\n        onClick={this.handleClick}\n        aria-current={selected ? \"page\" : null}\n        role=\"listitem\"\n      >\n        {/* Tooltip enabled by applying navigation-item-side-nav-collapsed class to host */}\n        <ic-tooltip\n          label={this.generateTooltipLabel()}\n          target=\"navigation-item\"\n          placement=\"right\"\n          class={{\n            [\"tooltip-navigation-item\"]: true,\n            [\"tooltip-navigation-item-side-nav-collapsed\"]:\n              (!this.sideNavExpanded || this.displayNavigationTooltip) &&\n              this.navigationType === \"side\",\n            [\"tooltip-long-label-navigation-item-side-nav-expanded\"]:\n              this.el.hasAttribute(\"[display-navigation-tooltip = 'true']\"),\n          }}\n        >\n          {this.renderNavigationItemContent()}\n        </ic-tooltip>\n      </Host>\n    );\n  }\n}\n"],"mappings":"+MAAA,MAAMA,EAAsB,qhmB,MC8CfC,EAAc,M,6GAEjBC,KAAAC,gBAA2B,KAE3BD,KAAAE,qBAAyC,KACzCF,KAAAG,kBAAoB,aA0JpBH,KAAAI,6BAA+B,CACrCC,EACAC,EACAC,EACAC,EACAC,EACAC,EACAC,KAEA,MAAMC,EACJZ,KAAKa,eAAiBb,KAAKc,iBAAmB,OAAS,QACzD,MAAMC,EAAuBf,KAAKgB,YAChCC,EAAA,OAAKC,MAAO,CAAEC,IAAK,MAAQC,UAAWC,IAExC,MAAMC,EAAgBtB,KAAKuB,GAAGC,cAAc,kBAC1CP,EAAA,OAAKC,MAAM,QACTD,EAAA,QAAMQ,KAAK,SACVC,EAAW1B,KAAKuB,GAAI,UAAYN,EAAA,QAAMQ,KAAK,WAIhD,GAAIpB,IAAS,GAAI,CACf,OACEY,EAAA,KACEZ,KAAMA,EACNE,OAAQA,EACRC,IAAKA,EACLF,SAAUA,EACVqB,eAAgBlB,EAChBC,SAAUA,IAAa,MAAQA,EAAW,KAC1CQ,MAAM,OACNU,IAAML,GAAQvB,KAAK6B,OAASN,EAC5BO,KAAK,OAAM,aACC9B,KAAK+B,UAAY/B,KAAK+B,UAAY,MAE7CT,EAEDL,EAAA,iBAAeL,QAASA,GAAUD,GAClCM,EAAA,OAAKC,MAAM,qBAAqBH,GAC/BR,IAAW,UACVU,EAAA,QAAMC,MAAM,mBAAmBE,UAAWY,I,CAMlD,OACEf,EAAA,OAAKgB,SAAS,IAAIf,MAAM,OAAOU,IAAML,GAAQvB,KAAK6B,OAASN,GACxDD,EACDL,EAAA,iBAAeL,QAASA,GAAUD,GACjCI,EACG,EAIFf,KAAAkC,qBAAuB,EAC7BC,a,MAEA,MAAMC,KAAEA,GAASD,EACjB,GAAIC,IAASpC,KAAKqC,WAAY,CAC5BrC,KAAKqC,WAAaD,EAClBpC,KAAKc,iBACHsB,MACCE,EAACtC,KAAKuC,YAAuC,MAAAD,SAAA,SAAAA,EAC1CE,yBAA0BC,EAAaC,E,GAIzC1C,KAAA2C,qBAAuB,EAC7BR,aAEA,MAAMS,gBAAEA,EAAeC,cAAEA,GAAkBV,EAC3CnC,KAAK4C,gBAAkBA,EACvB5C,KAAK8C,gBAAkBD,CAAa,EAG9B7C,KAAA+C,WAAa,EAAGC,oBACtB,GACEA,IAAkB,MACjBA,EAA8BC,UAAY,qBAC3C,CACAjD,KAAKkD,UAAUC,M,GAIXnD,KAAAoD,YAAc,KACpBpD,KAAKqD,eAAeF,MAAM,EAIpBnD,KAAAsD,qBAAwBC,IAC9B,IAAIC,EAAuB,MAC3BD,EAAaE,SAAQ,EAAGC,oBACtB,GAAIA,IAAkB1D,KAAKG,kBAAmB,CAC5CH,KAAK+B,UAAY/B,KAAKuB,GAAGoC,aAAaD,GACtCF,EAAuB,I,KAG3B,GAAIA,EAAsB,CACxBI,EAAY5D,K,GAIRA,KAAA6D,qBAAuB,KAC7B,GAAI7D,KAAKW,MAAO,CACd,OAAOX,KAAKW,K,CAGd,GAAIX,KAAK8D,eAAgB,CACvB,OAAO9D,KAAK8D,eAAeC,W,CAG7B,GAAI/D,KAAKuB,GAAGyC,SAAS,GAAI,CACvB,OAAOhE,KAAKuB,GAAGyC,SAAS,GAAGD,W,CAG7B,MAAO,EAAE,EAGH/D,KAAAiE,4BAA8B,KACpC,GAAIjE,KAAKW,MAAO,CACd,OAAOX,KAAKI,6BACVJ,KAAKK,KACLL,KAAKM,SACLN,KAAKO,OACLP,KAAKQ,IACLR,KAAKS,eACLT,KAAKU,SACLV,KAAKW,M,CAIT,GAAIX,KAAK8D,eAAgB,CACvB,OAAO7C,EAAA,QAAMQ,KAAK,mB,CAEpB,OAAOR,EAAA,YAAa,E,gBA7RQwB,EAAayB,G,gBAEzCC,I,sBACmC,M,qBACD,M,mBACF,M,2EAGE,M,eACP,G,wBAKS,M,8BAKM,M,cAKN,M,gBAKR,M,UAKP,G,4GAyBK,M,sBAiB5B,oBAAAC,G,MACE,GAAIpE,KAAKqE,iBAAmB,OAAQ,CAClCrE,KAAKuC,SAAS+B,oBACZ,oBACAtE,KAAK2C,qB,MAEF,GAAI3C,KAAKqE,iBAAmB,MAAO,CACxCrE,KAAKuC,SAAS+B,oBACZ,kBACAtE,KAAKkC,qB,EAGTI,EAAAtC,KAAKE,wBAAoB,MAAAoC,SAAA,SAAAA,EAAEiC,Y,CAG7B,iBAAAC,GACE,MAAMC,QAAEA,EAAOC,OAAEA,GAAWC,EAAwB3E,KAAKuB,IACzDvB,KAAKqE,eAAiBI,EACtBzE,KAAKuC,SAAWmC,EAChB1E,KAAKqC,WAAauC,IAElB,GAAI5E,KAAKqE,iBAAmB,OAAQ,CAClCrE,KAAKuC,SAASsC,iBACZ,oBACA7E,KAAK2C,qB,MAEF,GAAI3C,KAAKqE,iBAAmB,MAAO,CACxCrE,KAAKuC,SAASsC,iBACZ,kBACA7E,KAAKkC,sBAEP,GAAIlC,KAAKuB,GAAGuD,cAAc7B,UAAY,sBACpCjD,KAAKa,cAAgB,KACvB,GACEb,KAAKqC,YACJrC,KAAKuC,SAAwCC,uBAE9CxC,KAAKc,iBAAmB,I,CAG5Bd,KAAK8D,eAAiB9D,KAAKuB,GAAGC,cAAc,4BAC5C,GAAIxB,KAAK8D,eAAgB,CACvB9D,KAAK8D,eAAe/B,UAAY/B,KAAK8D,eAAeC,YAAYgB,M,CAGlE,GAAI/E,KAAKuB,GAAGyD,aAAahF,KAAKG,mBAAoB,CAChDH,KAAK+B,UAAY/B,KAAKuB,GAAGoC,aAAa3D,KAAKG,kB,EAI/C,gBAAA8E,GACEjF,KAAKE,qBAAuB,IAAIgF,iBAAiBlF,KAAKsD,sBACtDtD,KAAKE,qBAAqBiF,QAAQnF,KAAKuB,GAAI,CACzC6D,WAAY,M,CAIhB,kBAAAC,GACErF,KAAKC,gBAAkB,K,CAIzB,kBAAAqF,EAAmBnD,OAAEA,IACnBnC,KAAKuF,WAAapD,EAAOqD,I,CAO3B,cAAMC,G,OACJnD,EAAAtC,KAAK6B,UAAM,MAAAS,SAAA,SAAAA,EAAEoD,O,CA6If,MAAAC,GACE,MAAM7E,iBAAEA,EAAgBD,cAAEA,EAAa+E,SAAEA,GAAa5F,KAEtD,OACEiB,EAAC4E,EAAI,CACH3E,MAAO,CACL,CAAC,mBAAoB,KACrB,CAAC,4BACEJ,GAAoBd,KAAKqE,iBAAmB,MAC/C,CAAC,0CACCxD,IAAkBC,GAAoB8E,EACxC,CAAC5F,KAAKuF,aACFzE,IAAqBD,GACtBb,KAAKqE,iBAAmB,QAAUxD,EACrC,CAAC,6BAA8BA,GAAiB+E,EAChD,CAAC,6BAA8B9E,EAC/B,CAAC,sCAAuCA,GAAoB8E,EAC5D,CAAC,iCAAkC/E,IAAkBC,EACrD,CAAC,+BACCd,KAAKqE,iBAAmB,cAC1B,CAAC,oBAAqBrE,KAAKC,gBAC3B,CAAC,4BAA6BD,KAAKqE,iBAAmB,OACtD,CAAC,wCACGrE,KAAK4C,iBAAmB5C,KAAK8F,2BAC/B9F,KAAKqE,iBAAmB,OAC1B,CAAC,kDACErE,KAAK4C,iBACN5C,KAAKqE,iBAAmB,QACxBrE,KAAK+F,qBACJ/F,KAAK8C,gBACR,CAAC,cAAe9C,KAAKgB,YAEvBgF,OAAQnF,IAAkBC,EAAmBd,KAAK+C,WAAa,KAC/DkD,QAASjG,KAAKoD,YAAW,eACXwC,EAAW,OAAS,KAClCM,KAAK,YAGLjF,EAAA,cACEN,MAAOX,KAAK6D,uBACZtD,OAAO,kBACP4F,UAAU,QACVjF,MAAO,CACL,CAAC,2BAA4B,KAC7B,CAAC,gDACGlB,KAAK4C,iBAAmB5C,KAAK8F,2BAC/B9F,KAAKqE,iBAAmB,OAC1B,CAAC,wDACCrE,KAAKuB,GAAGyD,aAAa,2CAGxBhF,KAAKiE,+B"}

package/dist/core/p-79d0be03.entry.js

@@ -1,2 +0,0 @@
-import{r as i,c as e,h as t,H as c,g as s}from"./p-6b5e91e2.js";import{k as a,j as o,r,a as n,l,n as h}from"./p-b7eb8ef9.js";const d='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:inline-block}input{overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}.ic-switch-container{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ic-space-xxs);cursor:pointer}.ic-switch-label{margin-left:var(--ic-space-xxs);margin-bottom:var(--ic-space-sm)}.ic-switch-label-small{margin-bottom:0.625rem}.ic-switch-toggle{display:flex;align-items:center;justify-content:space-around;width:4rem;height:var(--ic-space-xl);position:relative;border-radius:100vw;background-color:var(--ic-switch-unchecked-bg);border:var(--ic-border-width) solid var(--ic-switch-unchecked);box-sizing:border-box;transition:var(--ic-transition-duration-fast)}.ic-switch-line-break{flex:1 0 100%}.ic-switch-checked-status{padding-left:var(--ic-space-xxs);width:var(--ic-space-lg);color:var(--ic-switch-help-text)}.ic-switch-toggle::before{content:"";width:1.333rem;height:1.333rem;border-radius:50%;position:absolute;z-index:2;top:50%;left:0.333rem;transform:translate(0, -50%);background-color:var(--ic-switch-unchecked);transition:var(--ic-transition-duration-slow)}.ic-switch-icon{display:inline-block;vertical-align:middle;width:0.625rem;height:0.625rem}.ic-switch-icon-circle,.ic-switch-icon-line{stroke-width:1}.ic-switch-icon-circle{stroke:var(--ic-switch-indicator-off)}.ic-switch-icon-line{stroke:var(--ic-switch-indicator-on)}@media (prefers-reduced-motion: reduce){.ic-switch-toggle::before{transition-duration:0ms}}.ic-switch-input:checked+.ic-switch-toggle{background-color:var(--ic-switch-checked-bg);border:none}.ic-switch-input:checked+.ic-switch-toggle::before{transform:translate(var(--ic-space-xl), -50%);background-color:var(--ic-switch-checked)}.ic-switch-input:not([disabled])+.ic-switch-toggle:hover::before{box-shadow:0 0 0 0.75rem var(--ic-switch-unchecked-bg-hover)}.ic-switch-input:not([disabled])+.ic-switch-toggle:active::before{box-shadow:0 0 0 0.75rem var(--ic-switch-unchecked-bg-pressed)}.ic-switch-input:not([disabled]):checked+.ic-switch-toggle:hover::before{box-shadow:0 0 0 0.75rem var(--ic-switch-checked-bg-hover)}.ic-switch-input:not([disabled]):checked+.ic-switch-toggle:active::before{box-shadow:0 0 0 0.75rem var(--ic-switch-checked-bg-pressed)}.ic-switch-input:focus:not([disabled])+.ic-switch-toggle,.ic-switch-input:focus-visible:not([disabled])+.ic-switch-toggle{box-shadow:var(--ic-border-focus)}.ic-switch-disabled{cursor:default}.ic-switch-disabled .ic-switch-icon-circle{stroke:var(--ic-switch-indicator-off-disabled)}.ic-switch-disabled .ic-switch-icon-line{stroke:var(--ic-switch-indicator-on-disabled)}.ic-switch-input:disabled+.ic-switch-toggle{background-color:var(--ic-switch-unchecked-bg-disabled);border:var(--ic-space-1px) dashed var(--ic-switch-unchecked-outline-disabled)}.ic-switch-input:disabled~.ic-switch-checked-status{color:var(--ic-architectural-300)}.ic-switch-input:disabled+.ic-switch-toggle::before{background-color:var(--ic-switch-unchecked-disabled)}.ic-switch-input:disabled:checked+.ic-switch-toggle{background-color:var(--ic-switch-checked-bg-disabled);border:var(--ic-border-width) dashed\n    var(--ic-switch-checked-outline-disabled)}.ic-switch-input:disabled:checked+.ic-switch-toggle::before{background-color:var(--ic-switch-checked)}.ic-switch-small{gap:var(--ic-space-xxxs)}.ic-switch-small .ic-switch-checked-status{padding-left:0.375rem}.ic-switch-small .ic-switch-toggle{width:var(--ic-space-xxl);height:var(--ic-space-lg)}.ic-switch-small .ic-switch-toggle::before{width:var(--ic-space-md);height:var(--ic-space-md);left:var(--ic-space-xxs)}.ic-switch-small .ic-switch-input:checked+.ic-switch-toggle::before{transform:translate(var(--ic-space-lg), -50%)}::slotted(*){margin-left:var(--ic-space-sm)}::slotted(svg){fill:var(--ic-switch-icon)}@media (forced-colors: active){.ic-switch-toggle::before,.ic-switch-input:checked+.ic-switch-toggle{border:var(--ic-border-hc)}.ic-switch-input:focus+.ic-switch-toggle{border-color:highlight;outline:var(--ic-space-xxxs) solid highlight}.ic-switch-input:checked+.ic-switch-toggle::before{transform:translate(calc(var(--ic-space-xl) - 0.125rem), -50%)}.ic-switch-input:disabled+.ic-switch-toggle,.ic-switch-input:disabled:checked+.ic-switch-toggle,.ic-switch-input:disabled+.ic-switch-toggle::before{border-color:GrayText}.ic-switch-input:disabled~.ic-switch-checked-status{color:GrayText}.ic-switch-disabled .ic-switch-icon-circle,.ic-switch-disabled .ic-switch-icon-line{stroke:GrayText}}';let b=0;const p=class{constructor(t){i(this,t);this.icBlur=e(this,"icBlur",7);this.icChange=e(this,"icChange",7);this.icFocus=e(this,"icFocus",7);this.inputId=`ic-switch-input-${b++}`;this.handleChange=()=>{this.checkedState=!this.checkedState;this.icChange.emit({checked:this.checkedState,value:this.value})};this.onFocus=()=>{this.icFocus.emit()};this.onBlur=()=>{this.icBlur.emit()};this.handleFormReset=()=>{this.checkedState=this.initiallyChecked};this.checkedState=false;this.initiallyChecked=this.checked;this.checked=false;this.disabled=false;this.helperText="";this.hideLabel=false;this.label=undefined;this.name=this.inputId;this.showState=false;this.size="medium";this.theme="inherit";this.value="on"}checkedChangeHandler(){this.checkedState=this.checked}disconnectedCallback(){a(this.el,this.handleFormReset)}componentWillLoad(){this.checkedState=this.checked;o(this.el,this.handleFormReset);r(this.disabled,this.el)}componentDidLoad(){n([{prop:this.label,propName:"label"}],"Switch")}async setFocus(){if(this.el.shadowRoot.querySelector("input")){this.el.shadowRoot.querySelector("input").focus()}}render(){const{label:i,checkedState:e,size:s,disabled:a,name:o,showState:r,value:n,hideLabel:d,helperText:b,inputId:p,theme:w}=this;l(true,this.el,o,e?n:"",a);const u=h(p,b!=="",false);return t(c,{class:{[`ic-theme-${w}`]:w!=="inherit"}},t("label",{class:{["ic-switch-container"]:true,["ic-switch-disabled"]:a,["ic-switch-small"]:s==="small"},htmlFor:p},!d&&t("ic-input-label",{for:p,label:i,helperText:b,readonly:true,disabled:a,class:{["ic-switch-label"]:true,["ic-switch-label-small"]:s==="small"}}),!d&&t("span",{class:"ic-switch-line-break"}),t("input",{checked:e,disabled:a,"aria-label":i,"aria-checked":e?"true":"false","aria-describedby":u,role:"switch",class:"ic-switch-input",type:"checkbox",name:"toggle",id:p,onFocus:this.onFocus,onBlur:this.onBlur,onChange:this.handleChange}),t("span",{class:"ic-switch-toggle"},t("svg",{class:"ic-switch-icon","aria-hidden":"true",focusable:"false",viewBox:"0 0 10 10",xmlns:"http://www.w3.org/2000/svg"},t("line",{class:"ic-switch-icon-line",x1:"9",y1:s==="small"?"2":"1",x2:"9",y2:s==="small"?"8":"9"})),t("svg",{class:"ic-switch-icon","aria-hidden":"true",focusable:"false",viewBox:"0 0 10 10",xmlns:"http://www.w3.org/2000/svg"},t("circle",{class:"ic-switch-icon-circle",fill:"none",cx:"5",cy:"5",r:s==="small"?"3.335":"4.445"}))),t("slot",{name:"right-adornment"}),r&&t("ic-typography",{"aria-hidden":"true",variant:"label",class:"ic-switch-checked-status"},e?"On":"Off")))}static get delegatesFocus(){return true}get el(){return s(this)}static get watchers(){return{checked:["checkedChangeHandler"]}}};p.style=d;export{p as ic_switch};
-//# sourceMappingURL=p-79d0be03.entry.js.map

package/dist/core/p-79d0be03.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["icSwitchCss","inputIds","Switch","this","inputId","handleChange","checkedState","icChange","emit","checked","value","onFocus","icFocus","onBlur","icBlur","handleFormReset","initiallyChecked","checkedChangeHandler","disconnectedCallback","removeFormResetListener","el","componentWillLoad","addFormResetListener","removeDisabledFalse","disabled","componentDidLoad","onComponentRequiredPropUndefined","prop","label","propName","setFocus","shadowRoot","querySelector","focus","render","size","name","showState","hideLabel","helperText","theme","renderHiddenInput","describedBy","getInputDescribedByText","h","Host","class","htmlFor","for","readonly","role","type","id","onChange","focusable","viewBox","xmlns","x1","y1","x2","y2","fill","cx","cy","r","variant"],"sources":["src/components/ic-switch/ic-switch.css?tag=ic-switch&encapsulation=shadow","src/components/ic-switch/ic-switch.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: inline-block;\n}\n\ninput {\n  overflow: hidden;\n  appearance: none;\n}\n\n.ic-switch-container {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--ic-space-xxs);\n  cursor: pointer;\n}\n\n.ic-switch-label {\n  margin-left: var(--ic-space-xxs);\n  margin-bottom: var(--ic-space-sm);\n}\n\n.ic-switch-label-small {\n  margin-bottom: 0.625rem;\n}\n\n.ic-switch-toggle {\n  display: flex;\n  align-items: center;\n  justify-content: space-around;\n  width: 4rem;\n  height: var(--ic-space-xl);\n  position: relative;\n  border-radius: 100vw;\n  background-color: var(--ic-switch-unchecked-bg);\n  border: var(--ic-border-width) solid var(--ic-switch-unchecked);\n  box-sizing: border-box;\n  transition: var(--ic-transition-duration-fast);\n}\n\n.ic-switch-line-break {\n  flex: 1 0 100%;\n}\n\n.ic-switch-checked-status {\n  padding-left: var(--ic-space-xxs);\n  width: var(--ic-space-lg);\n  color: var(--ic-switch-help-text);\n}\n\n.ic-switch-toggle::before {\n  content: \"\";\n  width: 1.333rem;\n  height: 1.333rem;\n  border-radius: 50%;\n  position: absolute;\n  z-index: 2;\n  top: 50%;\n  left: 0.333rem;\n  transform: translate(0, -50%);\n  background-color: var(--ic-switch-unchecked);\n  transition: var(--ic-transition-duration-slow);\n}\n\n.ic-switch-icon {\n  display: inline-block;\n  vertical-align: middle;\n  width: 0.625rem;\n  height: 0.625rem;\n}\n\n.ic-switch-icon-circle,\n.ic-switch-icon-line {\n  stroke-width: 1;\n}\n\n.ic-switch-icon-circle {\n  stroke: var(--ic-switch-indicator-off);\n}\n\n.ic-switch-icon-line {\n  stroke: var(--ic-switch-indicator-on);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .ic-switch-toggle::before {\n    transition-duration: 0ms;\n  }\n}\n\n.ic-switch-input:checked + .ic-switch-toggle {\n  background-color: var(--ic-switch-checked-bg);\n  border: none;\n}\n\n.ic-switch-input:checked + .ic-switch-toggle::before {\n  transform: translate(var(--ic-space-xl), -50%);\n  background-color: var(--ic-switch-checked);\n}\n\n.ic-switch-input:not([disabled]) + .ic-switch-toggle:hover::before {\n  box-shadow: 0 0 0 0.75rem var(--ic-switch-unchecked-bg-hover);\n}\n\n.ic-switch-input:not([disabled]) + .ic-switch-toggle:active::before {\n  box-shadow: 0 0 0 0.75rem var(--ic-switch-unchecked-bg-pressed);\n}\n\n.ic-switch-input:not([disabled]):checked + .ic-switch-toggle:hover::before {\n  box-shadow: 0 0 0 0.75rem var(--ic-switch-checked-bg-hover);\n}\n\n.ic-switch-input:not([disabled]):checked + .ic-switch-toggle:active::before {\n  box-shadow: 0 0 0 0.75rem var(--ic-switch-checked-bg-pressed);\n}\n\n.ic-switch-input:focus:not([disabled]) + .ic-switch-toggle,\n.ic-switch-input:focus-visible:not([disabled]) + .ic-switch-toggle {\n  box-shadow: var(--ic-border-focus);\n}\n\n.ic-switch-disabled {\n  cursor: default;\n}\n\n.ic-switch-disabled .ic-switch-icon-circle {\n  stroke: var(--ic-switch-indicator-off-disabled);\n}\n\n.ic-switch-disabled .ic-switch-icon-line {\n  stroke: var(--ic-switch-indicator-on-disabled);\n}\n\n.ic-switch-input:disabled + .ic-switch-toggle {\n  background-color: var(--ic-switch-unchecked-bg-disabled);\n  border: var(--ic-space-1px) dashed var(--ic-switch-unchecked-outline-disabled);\n}\n\n.ic-switch-input:disabled ~ .ic-switch-checked-status {\n  color: var(--ic-architectural-300);\n}\n\n.ic-switch-input:disabled + .ic-switch-toggle::before {\n  background-color: var(--ic-switch-unchecked-disabled);\n}\n\n.ic-switch-input:disabled:checked + .ic-switch-toggle {\n  background-color: var(--ic-switch-checked-bg-disabled);\n  border: var(--ic-border-width) dashed\n    var(--ic-switch-checked-outline-disabled);\n}\n\n.ic-switch-input:disabled:checked + .ic-switch-toggle::before {\n  background-color: var(--ic-switch-checked);\n}\n\n.ic-switch-small {\n  gap: var(--ic-space-xxxs);\n}\n\n.ic-switch-small .ic-switch-checked-status {\n  padding-left: 0.375rem;\n}\n\n.ic-switch-small .ic-switch-toggle {\n  width: var(--ic-space-xxl);\n  height: var(--ic-space-lg);\n}\n\n.ic-switch-small .ic-switch-toggle::before {\n  width: var(--ic-space-md);\n  height: var(--ic-space-md);\n  left: var(--ic-space-xxs);\n}\n\n.ic-switch-small .ic-switch-input:checked + .ic-switch-toggle::before {\n  transform: translate(var(--ic-space-lg), -50%);\n}\n\n::slotted(*) {\n  margin-left: var(--ic-space-sm);\n}\n\n::slotted(svg) {\n  fill: var(--ic-switch-icon);\n}\n\n@media (forced-colors: active) {\n  .ic-switch-toggle::before,\n  .ic-switch-input:checked + .ic-switch-toggle {\n    border: var(--ic-border-hc);\n  }\n\n  .ic-switch-input:focus + .ic-switch-toggle {\n    border-color: highlight;\n    outline: var(--ic-space-xxxs) solid highlight;\n  }\n\n  .ic-switch-input:checked + .ic-switch-toggle::before {\n    transform: translate(calc(var(--ic-space-xl) - 0.125rem), -50%);\n  }\n\n  .ic-switch-input:disabled + .ic-switch-toggle,\n  .ic-switch-input:disabled:checked + .ic-switch-toggle,\n  .ic-switch-input:disabled + .ic-switch-toggle::before {\n    border-color: GrayText;\n  }\n\n  .ic-switch-input:disabled ~ .ic-switch-checked-status {\n    color: GrayText;\n  }\n\n  .ic-switch-disabled .ic-switch-icon-circle,\n  .ic-switch-disabled .ic-switch-icon-line {\n    stroke: GrayText;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  getInputDescribedByText,\n  onComponentRequiredPropUndefined,\n  renderHiddenInput,\n  addFormResetListener,\n  removeFormResetListener,\n  removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport { IcSwitchChangeEventDetail } from \"./ic-switch.types\";\nimport { IcSizesNoLarge, IcThemeMode } from \"../../utils/types\";\n\nlet inputIds = 0;\n\n/**\n * @slot right-adornment - Content is placed to the right of switch before state label.\n */\n@Component({\n  tag: \"ic-switch\",\n  styleUrl: \"ic-switch.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class Switch {\n  private inputId = `ic-switch-input-${inputIds++}`;\n\n  @Element() el: HTMLIcSwitchElement;\n\n  @State() checkedState: boolean = false;\n  @State() initiallyChecked = this.checked;\n\n  /**\n   * If `true`, the switch will display as checked.\n   */\n  @Prop() checked?: boolean = false;\n\n  @Watch(\"checked\")\n  checkedChangeHandler(): void {\n    this.checkedState = this.checked;\n  }\n\n  /**\n   * If `true`, the disabled state will be set.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * The helper text that will be displayed for additional field guidance.\n   */\n  @Prop() helperText?: string = \"\";\n\n  /**\n   * If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n   */\n  @Prop() hideLabel?: boolean = false;\n\n  /**\n   * The aria-label applied to the switch when no visual 'name' is provided.\n   */\n  @Prop() label!: string;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name?: string = this.inputId;\n\n  /**\n   * If `true`, the switch will render the On/Off state text.\n   */\n  @Prop() showState?: boolean = false;\n\n  /**\n   * The size of the switch component.\n   */\n  @Prop() size?: IcSizesNoLarge = \"medium\";\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  /**\n   * The value of the toggle does not mean if it's checked or not, use the `checked`\n   * property for that.\n   *\n   * The value of a toggle is analogous to the value of a `<input type=\"checkbox\">`,\n   * it's only used when the toggle participates in a native `<form>`.\n   */\n  @Prop() value?: string | null = \"on\";\n\n  /**\n   * Emitted when the toggle loses focus.\n   */\n  @Event() icBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the value property has changed.\n   */\n  @Event() icChange!: EventEmitter<IcSwitchChangeEventDetail>;\n\n  /**\n   * Emitted when the toggle has focus.\n   */\n  @Event() icFocus!: EventEmitter<void>;\n\n  disconnectedCallback(): void {\n    removeFormResetListener(this.el, this.handleFormReset);\n  }\n\n  componentWillLoad(): void {\n    this.checkedState = this.checked;\n    addFormResetListener(this.el, this.handleFormReset);\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Switch\"\n    );\n  }\n\n  /**\n   * Sets focus on the switch.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.el.shadowRoot.querySelector(\"input\")) {\n      this.el.shadowRoot.querySelector(\"input\").focus();\n    }\n  }\n\n  private handleChange = () => {\n    this.checkedState = !this.checkedState;\n    this.icChange.emit({\n      checked: this.checkedState,\n      value: this.value,\n    });\n  };\n\n  private onFocus = () => {\n    this.icFocus.emit();\n  };\n\n  private onBlur = () => {\n    this.icBlur.emit();\n  };\n\n  private handleFormReset = (): void => {\n    this.checkedState = this.initiallyChecked;\n  };\n\n  render() {\n    const {\n      label,\n      checkedState,\n      size,\n      disabled,\n      name,\n      showState,\n      value,\n      hideLabel,\n      helperText,\n      inputId,\n      theme,\n    } = this;\n\n    renderHiddenInput(true, this.el, name, checkedState ? value : \"\", disabled);\n\n    const describedBy = getInputDescribedByText(\n      inputId,\n      helperText !== \"\",\n      false\n    );\n\n    return (\n      <Host\n        class={{\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n      >\n        <label\n          class={{\n            [\"ic-switch-container\"]: true,\n            [\"ic-switch-disabled\"]: disabled,\n            [\"ic-switch-small\"]: size === \"small\",\n          }}\n          htmlFor={inputId}\n        >\n          {!hideLabel && (\n            <ic-input-label\n              for={inputId}\n              label={label}\n              helperText={helperText}\n              readonly={true}\n              disabled={disabled}\n              class={{\n                [\"ic-switch-label\"]: true,\n                [\"ic-switch-label-small\"]: size === \"small\",\n              }}\n            ></ic-input-label>\n          )}\n          {!hideLabel && <span class=\"ic-switch-line-break\"></span>}\n          <input\n            checked={checkedState}\n            disabled={disabled}\n            aria-label={label}\n            aria-checked={checkedState ? \"true\" : \"false\"}\n            aria-describedby={describedBy}\n            role=\"switch\"\n            class=\"ic-switch-input\"\n            type=\"checkbox\"\n            name=\"toggle\"\n            id={inputId}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onChange={this.handleChange}\n          />\n          <span class=\"ic-switch-toggle\">\n            <svg\n              class=\"ic-switch-icon\"\n              aria-hidden=\"true\"\n              focusable=\"false\"\n              viewBox=\"0 0 10 10\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <line\n                class=\"ic-switch-icon-line\"\n                x1=\"9\"\n                y1={size === \"small\" ? \"2\" : \"1\"}\n                x2=\"9\"\n                y2={size === \"small\" ? \"8\" : \"9\"}\n              />\n            </svg>\n            <svg\n              class=\"ic-switch-icon\"\n              aria-hidden=\"true\"\n              focusable=\"false\"\n              viewBox=\"0 0 10 10\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <circle\n                class=\"ic-switch-icon-circle\"\n                fill=\"none\"\n                cx=\"5\"\n                cy=\"5\"\n                r={size === \"small\" ? \"3.335\" : \"4.445\"}\n              />\n            </svg>\n          </span>\n          <slot name=\"right-adornment\"></slot>\n          {showState && (\n            <ic-typography\n              aria-hidden=\"true\"\n              variant=\"label\"\n              class=\"ic-switch-checked-status\"\n            >\n              {checkedState ? \"On\" : \"Off\"}\n            </ic-typography>\n          )}\n        </label>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/core/p-85173458.entry.js

@@ -1,2 +0,0 @@
-import{r as n,f as e,h as t,H as i,g as o}from"./p-6b5e91e2.js";import{c as a,r,i as s,a as c,h as d,I as l}from"./p-b7eb8ef9.js";import{C as h}from"./p-3b185c32.js";const b='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */\n\n/* Document\n   ========================================================================== */\n\n/**\n * 1. Correct the line height in all browsers.\n * 2. Prevent adjustments of font size after orientation changes in iOS.\n */\n\nhtml {\n  line-height: 1.15; /* 1 */\n  -webkit-text-size-adjust: 100%; /* 2 */\n}\n\n/* Sections\n     ========================================================================== */\n\n/**\n   * Remove the margin in all browsers.\n   */\n\nbody {\n  margin: 0;\n}\n\n/**\n   * Render the `main` element consistently in IE.\n   */\n\nmain {\n  display: block;\n}\n\n/**\n   * Correct the font size and margin on `h1` elements within `section` and\n   * `article` contexts in Chrome, Firefox, and Safari.\n   */\n\nh1 {\n  font-size: 2em;\n  margin: 0.67em 0;\n}\n\n/* Grouping content\n     ========================================================================== */\n\n/**\n   * 1. Add the correct box sizing in Firefox.\n   * 2. Show the overflow in Edge and IE.\n   */\n\nhr {\n  box-sizing: content-box; /* 1 */\n  height: 0; /* 1 */\n  overflow: visible; /* 2 */\n}\n\n/**\n   * 1. Correct the inheritance and scaling of font size in all browsers.\n   * 2. Correct the odd `em` font sizing in all browsers.\n   */\n\npre {\n  font-family: monospace, monospace; /* 1 */\n  font-size: 1em; /* 2 */\n}\n\n/* Text-level semantics\n     ========================================================================== */\n\n/**\n   * Remove the gray background on active links in IE 10.\n   */\n\na {\n  background-color: transparent;\n}\n\n/**\n   * 1. Remove the bottom border in Chrome 57-\n   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n   */\n\nabbr[title] {\n  border-bottom: none; /* 1 */\n  text-decoration: underline; /* 2 */\n  -webkit-text-decoration: underline dotted;\n          text-decoration: underline dotted; /* 2 */\n}\n\n/**\n   * Add the correct font weight in Chrome, Edge, and Safari.\n   */\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\n/**\n   * 1. Correct the inheritance and scaling of font size in all browsers.\n   * 2. Correct the odd `em` font sizing in all browsers.\n   */\n\ncode,\nkbd,\nsamp {\n  font-family: monospace, monospace; /* 1 */\n  font-size: 1em; /* 2 */\n}\n\n/**\n   * Add the correct font size in all browsers.\n   */\n\nsmall {\n  font-size: 80%;\n}\n\n/**\n   * Prevent `sub` and `sup` elements from affecting the line height in\n   * all browsers.\n   */\n\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\n/* Embedded content\n     ========================================================================== */\n\n/**\n   * Remove the border on images inside links in IE 10.\n   */\n\nimg {\n  border-style: none;\n}\n\n/* Forms\n     ========================================================================== */\n\n/**\n   * 1. Change the font styles in all browsers.\n   * 2. Remove the margin in Firefox and Safari.\n   */\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit; /* 1 */\n  font-size: 100%; /* 1 */\n  line-height: 1.15; /* 1 */\n  margin: 0; /* 2 */\n}\n\n/**\n   * Show the overflow in IE.\n   * 1. Show the overflow in Edge.\n   */\n\nbutton,\ninput {\n  /* 1 */\n  overflow: visible;\n}\n\n/**\n   * Remove the inheritance of text transform in Edge, Firefox, and IE.\n   * 1. Remove the inheritance of text transform in Firefox.\n   */\n\nbutton,\nselect {\n  /* 1 */\n  text-transform: none;\n}\n\n/**\n   * Correct the inability to style clickable types in iOS and Safari.\n   */\n\nbutton,\n[type="button"],\n[type="reset"],\n[type="submit"] {\n  -webkit-appearance: button;\n}\n\n/**\n   * Remove the inner border and padding in Firefox.\n   */\n\nbutton::-moz-focus-inner,\n[type="button"]::-moz-focus-inner,\n[type="reset"]::-moz-focus-inner,\n[type="submit"]::-moz-focus-inner {\n  border-style: none;\n  padding: 0;\n}\n\n/**\n   * Restore the focus styles unset by the previous rule.\n   */\n\nbutton:-moz-focusring,\n[type="button"]:-moz-focusring,\n[type="reset"]:-moz-focusring,\n[type="submit"]:-moz-focusring {\n  outline: 1px dotted ButtonText;\n}\n\n/**\n   * Correct the padding in Firefox.\n   */\n\nfieldset {\n  padding: 0.35em 0.75em 0.625em;\n}\n\n/**\n   * 1. Correct the text wrapping in Edge and IE.\n   * 2. Correct the color inheritance from `fieldset` elements in IE.\n   * 3. Remove the padding so developers are not caught out when they zero out\n   *    `fieldset` elements in all browsers.\n   */\n\nlegend {\n  box-sizing: border-box; /* 1 */\n  color: inherit; /* 2 */\n  display: table; /* 1 */\n  max-width: 100%; /* 1 */\n  padding: 0; /* 3 */\n  white-space: normal; /* 1 */\n}\n\n/**\n   * Add the correct vertical alignment in Chrome, Firefox, and Opera.\n   */\n\nprogress {\n  vertical-align: baseline;\n}\n\n/**\n   * Remove the default vertical scrollbar in IE 10+.\n   */\n\ntextarea {\n  overflow: auto;\n}\n\n/**\n   * 1. Add the correct box sizing in IE 10.\n   * 2. Remove the padding in IE 10.\n   */\n\n[type="checkbox"],\n[type="radio"] {\n  box-sizing: border-box; /* 1 */\n  padding: 0; /* 2 */\n}\n\n/**\n   * Correct the cursor style of increment and decrement buttons in Chrome.\n   */\n\n[type="number"]::-webkit-inner-spin-button,\n[type="number"]::-webkit-outer-spin-button {\n  height: auto;\n}\n\n/**\n   * 1. Correct the odd appearance in Chrome and Safari.\n   * 2. Correct the outline style in Safari.\n   */\n\n[type="search"] {\n  -webkit-appearance: textfield; /* 1 */\n  outline-offset: -2px; /* 2 */\n}\n\n/**\n   * Remove the inner padding in Chrome and Safari on macOS.\n   */\n\n[type="search"]::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n/**\n   * 1. Correct the inability to style clickable types in iOS and Safari.\n   * 2. Change font properties to `inherit` in Safari.\n   */\n\n::-webkit-file-upload-button {\n  -webkit-appearance: button; /* 1 */\n  font: inherit; /* 2 */\n}\n\n/* Interactive\n     ========================================================================== */\n\n/*\n   * Add the correct display in Edge, IE 10+, and Firefox.\n   */\n\ndetails {\n  display: block;\n}\n\n/*\n   * Add the correct display in all browsers.\n   */\n\nsummary {\n  display: list-item;\n}\n\n/* Misc\n     ========================================================================== */\n\n/**\n   * Add the correct display in IE 10+.\n   */\n\ntemplate {\n  display: none;\n}\n\n/**\n   * Add the correct display in IE 10.\n   */\n\n[hidden] {\n  display: none;\n}\n\nhtml,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo {\n  margin: 0;\n  padding: 0;\n  border: 0;\n  font-size: 100%;\n  font-style: inherit;\n  vertical-align: baseline;\n}\n\n\n:host {\n  display: flex;\n}\n\na {\n  text-decoration: none !important;\n  color: var(--ic-card-text) !important;\n}\n\nbutton {\n  border: none;\n  background-color: transparent;\n  outline: var(--ic-hc-focus-outline);\n}\n\n.card {\n  display: flex;\n  flex-direction: column;\n  border: var(--ic-border-default);\n  border-radius: var(--ic-border-radius);\n  box-sizing: border-box;\n  padding: var(--ic-space-md);\n  text-align: left;\n  color: var(--ic-card-text);\n  transition: var(--ic-easing-transition-fast);\n  position: relative;\n  width: inherit;\n  min-width: -moz-fit-content;\n  min-width: fit-content;\n  height: -moz-fit-content;\n  height: fit-content;\n  min-height: 100%;\n\n  ::slotted(svg) {\n    fill: var(--ic-card-text);\n  }\n  &.dark {\n    border: var(--ic-border-width) solid\n      var(--ic-color-border-neutral-pressed-dark);\n  }\n  &.fullwidth {\n    width: 100%;\n  }\n  &.clickable {\n    &:hover {\n      background-color: var(--ic-card-clickable-focus-hover-bg);\n      border: var(--ic-border-hover);\n      cursor: pointer;\n    }\n    &.focussed,\n    &:focus {\n      background-color: var(--ic-card-clickable-focus-hover-bg);\n      box-shadow: var(--ic-border-focus);\n      outline: var(--ic-hc-focus-outline);\n      border: var(--ic-border-pressed-default);\n    }\n    &:active {\n      background-color: var(--ic-card-clickable-active-bg);\n      box-shadow: var(--ic-border-focus);\n\n      .card-title {\n        text-decoration: none;\n      }\n    }\n    .card-title {\n      --ic-typography-color: var(--ic-card-clickable-text);\n\n      color: var(--ic-card-clickable-text);\n      text-decoration: underline;\n      text-decoration-thickness: var(--ic-space-1px);\n    }\n  }\n  &.disabled {\n    border: var(--ic-border-disabled);\n\n    .card-message,\n    .subheading,\n    .card-title {\n      --ic-typography-color: var(--ic-card-disabled-text);\n    }\n    .card-title {\n      text-decoration: underline;\n      text-decoration-thickness: var(--ic-space-1px);\n      text-decoration-color: var(--ic-card-disabled-text);\n      color: var(--ic-card-disabled-text);\n    }\n    ::slotted(svg) {\n      fill: var(--ic-card-disabled-text);\n    }\n  }\n}\n\n.card-header {\n  display: flex;\n  align-items: center;\n}\n\n.icon {\n  display: flex;\n  align-items: center;\n  padding-right: var(--ic-space-xs);\n}\n\n.card.clickable:hover .card-title,\n.card.clickable:focus .card-title,\n.card.clickable.focussed .card-title {\n  display: inline-block;\n  border-bottom: 0.25rem solid !important;\n  margin-bottom: -0.25rem !important;\n  text-decoration: none;\n}\n\n@supports (text-underline-offset: 25%) {\n  .card.clickable:hover .card-title,\n  .card.clickable:focus .card-title,\n  .card.clickable.focussed .card-title {\n    text-decoration-line: underline;\n    text-decoration-thickness: 25%;\n    text-underline-offset: 25%;\n    border-bottom: 0 !important;\n    margin-bottom: 0 !important;\n  }\n}\n\n.subheading {\n  margin-top: var(--ic-space-xxs);\n}\n\n.adornment {\n  margin-top: var(--ic-space-xxs);\n}\n\n.card-message {\n  margin-top: var(--ic-space-md);\n  align-items: left;\n}\n\n.interaction-button {\n  margin-left: auto;\n}\n\n.image-top {\n  margin-bottom: var(--ic-space-md);\n  display: flex;\n  justify-content: center;\n}\n\n.image-mid {\n  margin-top: var(--ic-space-md);\n  display: flex;\n  justify-content: center;\n}\n\n.interaction-area {\n  display: flex;\n  flex-grow: 1;\n  gap: var(--ic-space-md);\n  margin-top: var(--ic-space-md);\n  align-items: flex-end;\n}\n\n.interaction-controls {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: var(--ic-space-sm);\n}\n\n.toggle-button {\n  color: var(--ic-card-toggle-button);\n  width: 2.5rem;\n  height: 2.5rem;\n  padding: var(--ic-space-xs);\n  margin: var(--ic-space-1px) 0;\n  min-width: 0;\n  cursor: pointer;\n  transition: var(--ic-easing-transition-fast);\n  border-radius: var(--ic-border-radius);\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  background: none;\n  border: none;\n  box-sizing: border-box;\n  white-space: nowrap;\n  vertical-align: middle;\n\n  &:hover {\n    background-color: var(--ic-card-clickable-focus-hover-bg);\n    color: var(--ic-card-toggle-button-focus-hover);\n  }\n  &:focus {\n    box-shadow: var(--ic-border-focus);\n  }\n  &:active:not(:focus) {\n    background-color: var(--ic-card-clickable-active-bg);\n    color: var(--ic-card-toggle-button-active);\n  }\n\n  svg {\n    pointer-events: none;\n    width: 100% !important;\n    height: 100% !important;\n    fill: currentcolor !important;\n  }\n}\n\n#ic-tooltip-expand-button {\n  margin-left: auto;\n  position: relative;\n}\n\n.toggle-button-closed svg {\n  transform: rotate(90deg);\n}\n\n.toggle-button-expanded svg {\n  transform: rotate(-90deg);\n}\n\n.expanded-content {\n  margin-top: var(--ic-space-md);\n}\n\n/** High Contrast **/\n@media (forced-colors: active) {\n  .card {\n    ::slotted(svg) {\n      fill: currentcolor;\n    }\n    &.disabled {\n      border-color: GrayText !important;\n\n      ::slotted(svg) {\n        fill: GrayText !important;\n      }\n      .card-message,\n      .subheading,\n      .card-title {\n        color: GrayText;\n\n        --ic-typography-color: GrayText;\n      }\n    }\n  }\n}\n';const m=class{constructor(t){n(this,t);this.hostMutationObserver=null;this.parentFocussed=()=>{this.isFocussed=true};this.parentBlurred=()=>{this.isFocussed=false};this.toggleExpanded=()=>{this.areaExpanded=!this.areaExpanded};this.hostMutationCallback=n=>{if(n.some((({type:n,addedNodes:e,removedNodes:t})=>n==="childList"?a(e,t,["message","adornment","expanded-content","image-top","image-mid","icon","interaction-button","badge","interaction-controls"]):false))){e(this)}};this.appearance="default";this.areaExpanded=false;this.isFocussed=false;this.parentEl=null;this.parentIsAnchorTag=false;this.clickable=false;this.disabled=false;this.expandable=false;this.fullWidth=false;this.heading=undefined;this.href=undefined;this.hreflang="";this.message="";this.referrerpolicy=undefined;this.rel=undefined;this.subheading=undefined;this.target=undefined;this.theme="inherit"}disconnectedCallback(){var n;if(this.parentIsAnchorTag){this.parentEl.removeEventListener("focus",this.parentFocussed);this.parentEl.removeEventListener("blur",this.parentBlurred)}(n=this.hostMutationObserver)===null||n===void 0?void 0:n.disconnect()}componentWillLoad(){this.parentEl=this.el.parentElement;if(this.parentEl.tagName==="A"){this.clickable=true;this.parentIsAnchorTag=true;this.parentEl.classList.add("ic-card-wrapper-link");this.parentEl.addEventListener("focus",this.parentFocussed);this.parentEl.addEventListener("blur",this.parentBlurred)}r(this.disabled,this.el)}componentDidLoad(){!s(this.el,"heading")&&c([{prop:this.heading,propName:"heading"}],"Card");this.updateTheme();this.hostMutationObserver=new MutationObserver(this.hostMutationCallback);this.hostMutationObserver.observe(this.el,{childList:true})}handleHostClick(n){if(this.disabled){n.stopImmediatePropagation()}}themeChangeHandler(n){this.updateTheme(n.detail.mode)}async setFocus(){if(this.el.shadowRoot.querySelector("a")){this.el.shadowRoot.querySelector("a").focus()}else if(this.el.shadowRoot.querySelector("button")){this.el.shadowRoot.querySelector("button").focus()}}updateTheme(n=null){const e=d(this.el,n);if(e!==l.Default){this.appearance=e}}render(){const{appearance:n,clickable:e,disabled:o,expandable:a,fullWidth:r,heading:c,isFocussed:d,message:b,href:m,hreflang:p,parentIsAnchorTag:g,referrerpolicy:u,rel:f,subheading:v,target:x,theme:y}=this;const k=g||!e?"div":m===undefined?"button":"a";const w=k=="a"&&{href:m,hrefLang:p,referrerPolicy:u,rel:f,target:x};return t(i,{class:{[`ic-theme-${y}`]:y!=="inherit"}},t(k,Object.assign({class:{card:true,clickable:e&&!o,disabled:o,fullwidth:r,focussed:d,dark:n===l.Dark},tabindex:e&&!g?0:null,"aria-disabled":o?"true":null,disabled:o?true:null},w),s(this.el,"image-top")&&t("div",{class:"image-top"},t("slot",{name:"image-top"})),t("div",{class:"card-header"},s(this.el,"icon")&&t("div",{class:"icon"},t("slot",{name:"icon"})),t("div",{class:"card-title"},t("slot",{name:"heading"},t("ic-typography",{variant:"h4"},t("p",null,c)))),s(this.el,"interaction-button")&&t("div",{class:"interaction-button"},t("slot",{name:"interaction-button"}))),(v||s(this.el,"subheading"))&&t("div",{class:"subheading"},t("slot",{name:"subheading"},t("ic-typography",{variant:"subtitle-small"},v))),s(this.el,"adornment")&&t("div",{class:"adornment"},t("slot",{name:"adornment"})),s(this.el,"image-mid")&&t("div",{class:"image-mid"},t("slot",{name:"image-mid"})),(b||s(this.el,"message"))&&t("div",{class:"card-message"},b&&t("ic-typography",{variant:"body"},b),s(this.el,"message")&&t("slot",{name:"message"})),(s(this.el,"interaction-controls")||a)&&t("div",{class:"interaction-area"},t("div",{class:"interaction-controls"},t("slot",{name:"interaction-controls"})),a&&t("ic-tooltip",{id:"ic-tooltip-expand-button",label:"Toggle expandable area",silent:true},t("button",{class:{"toggle-button":true,[`toggle-button-${this.areaExpanded?"expanded":"closed"}`]:true},"aria-label":"Toggle expandable area","aria-expanded":`${this.areaExpanded}`,"aria-controls":this.areaExpanded?"expanded-content-area":null,onClick:this.toggleExpanded,innerHTML:h}))),s(this.el,"expanded-content")&&this.areaExpanded&&t("div",{class:"expanded-content",id:"expanded-content-area"},t("slot",{name:"expanded-content"})),s(this.el,"badge")&&t("slot",{name:"badge"})))}get el(){return o(this)}};m.style=b;export{m as ic_card_vertical};
-//# sourceMappingURL=p-85173458.entry.js.map

package/dist/core/p-85173458.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["icCardVerticalCss","CardVertical","this","hostMutationObserver","parentFocussed","isFocussed","parentBlurred","toggleExpanded","areaExpanded","hostMutationCallback","mutationList","some","type","addedNodes","removedNodes","checkSlotInChildMutations","forceUpdate","disconnectedCallback","parentIsAnchorTag","parentEl","removeEventListener","_a","disconnect","componentWillLoad","el","parentElement","tagName","clickable","classList","add","addEventListener","removeDisabledFalse","disabled","componentDidLoad","isSlotUsed","onComponentRequiredPropUndefined","prop","heading","propName","updateTheme","MutationObserver","observe","childList","handleHostClick","event","stopImmediatePropagation","themeChangeHandler","ev","detail","mode","setFocus","shadowRoot","querySelector","focus","newTheme","foregroundColor","getThemeFromContext","IcThemeForegroundEnum","Default","appearance","render","expandable","fullWidth","message","href","hreflang","referrerpolicy","rel","subheading","target","theme","Component","undefined","attrs","hrefLang","referrerPolicy","h","Host","class","Object","assign","card","fullwidth","focussed","dark","Dark","tabindex","name","variant","id","label","silent","onClick","innerHTML","chevronIcon"],"sources":["src/components/ic-card-vertical/ic-card-vertical.css?tag=ic-card-vertical&encapsulation=shadow","src/components/ic-card-vertical/ic-card-vertical.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: flex;\n}\n\na {\n  text-decoration: none !important;\n  color: var(--ic-card-text) !important;\n}\n\nbutton {\n  border: none;\n  background-color: transparent;\n  outline: var(--ic-hc-focus-outline);\n}\n\n.card {\n  display: flex;\n  flex-direction: column;\n  border: var(--ic-border-default);\n  border-radius: var(--ic-border-radius);\n  box-sizing: border-box;\n  padding: var(--ic-space-md);\n  text-align: left;\n  color: var(--ic-card-text);\n  transition: var(--ic-easing-transition-fast);\n  position: relative;\n  width: inherit;\n  min-width: fit-content;\n  height: fit-content;\n  min-height: 100%;\n\n  ::slotted(svg) {\n    fill: var(--ic-card-text);\n  }\n  &.dark {\n    border: var(--ic-border-width) solid\n      var(--ic-color-border-neutral-pressed-dark);\n  }\n  &.fullwidth {\n    width: 100%;\n  }\n  &.clickable {\n    &:hover {\n      background-color: var(--ic-card-clickable-focus-hover-bg);\n      border: var(--ic-border-hover);\n      cursor: pointer;\n    }\n    &.focussed,\n    &:focus {\n      background-color: var(--ic-card-clickable-focus-hover-bg);\n      box-shadow: var(--ic-border-focus);\n      outline: var(--ic-hc-focus-outline);\n      border: var(--ic-border-pressed-default);\n    }\n    &:active {\n      background-color: var(--ic-card-clickable-active-bg);\n      box-shadow: var(--ic-border-focus);\n\n      .card-title {\n        text-decoration: none;\n      }\n    }\n    .card-title {\n      --ic-typography-color: var(--ic-card-clickable-text);\n\n      color: var(--ic-card-clickable-text);\n      text-decoration: underline;\n      text-decoration-thickness: var(--ic-space-1px);\n    }\n  }\n  &.disabled {\n    border: var(--ic-border-disabled);\n\n    .card-message,\n    .subheading,\n    .card-title {\n      --ic-typography-color: var(--ic-card-disabled-text);\n    }\n    .card-title {\n      text-decoration: underline;\n      text-decoration-thickness: var(--ic-space-1px);\n      text-decoration-color: var(--ic-card-disabled-text);\n      color: var(--ic-card-disabled-text);\n    }\n    ::slotted(svg) {\n      fill: var(--ic-card-disabled-text);\n    }\n  }\n}\n\n.card-header {\n  display: flex;\n  align-items: center;\n}\n\n.icon {\n  display: flex;\n  align-items: center;\n  padding-right: var(--ic-space-xs);\n}\n\n.card.clickable:hover .card-title,\n.card.clickable:focus .card-title,\n.card.clickable.focussed .card-title {\n  display: inline-block;\n  border-bottom: 0.25rem solid !important;\n  margin-bottom: -0.25rem !important;\n  text-decoration: none;\n}\n\n@supports (text-underline-offset: 25%) {\n  .card.clickable:hover .card-title,\n  .card.clickable:focus .card-title,\n  .card.clickable.focussed .card-title {\n    text-decoration-line: underline;\n    text-decoration-thickness: 25%;\n    text-underline-offset: 25%;\n    border-bottom: 0 !important;\n    margin-bottom: 0 !important;\n  }\n}\n\n.subheading {\n  margin-top: var(--ic-space-xxs);\n}\n\n.adornment {\n  margin-top: var(--ic-space-xxs);\n}\n\n.card-message {\n  margin-top: var(--ic-space-md);\n  align-items: left;\n}\n\n.interaction-button {\n  margin-left: auto;\n}\n\n.image-top {\n  margin-bottom: var(--ic-space-md);\n  display: flex;\n  justify-content: center;\n}\n\n.image-mid {\n  margin-top: var(--ic-space-md);\n  display: flex;\n  justify-content: center;\n}\n\n.interaction-area {\n  display: flex;\n  flex-grow: 1;\n  gap: var(--ic-space-md);\n  margin-top: var(--ic-space-md);\n  align-items: flex-end;\n}\n\n.interaction-controls {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: var(--ic-space-sm);\n}\n\n.toggle-button {\n  color: var(--ic-card-toggle-button);\n  width: 2.5rem;\n  height: 2.5rem;\n  padding: var(--ic-space-xs);\n  margin: var(--ic-space-1px) 0;\n  min-width: 0;\n  cursor: pointer;\n  transition: var(--ic-easing-transition-fast);\n  border-radius: var(--ic-border-radius);\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  background: none;\n  border: none;\n  box-sizing: border-box;\n  white-space: nowrap;\n  vertical-align: middle;\n\n  &:hover {\n    background-color: var(--ic-card-clickable-focus-hover-bg);\n    color: var(--ic-card-toggle-button-focus-hover);\n  }\n  &:focus {\n    box-shadow: var(--ic-border-focus);\n  }\n  &:active:not(:focus) {\n    background-color: var(--ic-card-clickable-active-bg);\n    color: var(--ic-card-toggle-button-active);\n  }\n\n  svg {\n    pointer-events: none;\n    width: 100% !important;\n    height: 100% !important;\n    fill: currentcolor !important;\n  }\n}\n\n#ic-tooltip-expand-button {\n  margin-left: auto;\n  position: relative;\n}\n\n.toggle-button-closed svg {\n  transform: rotate(90deg);\n}\n\n.toggle-button-expanded svg {\n  transform: rotate(-90deg);\n}\n\n.expanded-content {\n  margin-top: var(--ic-space-md);\n}\n\n/** High Contrast **/\n@media (forced-colors: active) {\n  .card {\n    ::slotted(svg) {\n      fill: currentcolor;\n    }\n    &.disabled {\n      border-color: GrayText !important;\n\n      ::slotted(svg) {\n        fill: GrayText !important;\n      }\n      .card-message,\n      .subheading,\n      .card-title {\n        color: GrayText;\n\n        --ic-typography-color: GrayText;\n      }\n    }\n  }\n}\n","import {\n  Component,\n  Element,\n  Listen,\n  Prop,\n  State,\n  h,\n  Method,\n  forceUpdate,\n  Host,\n} from \"@stencil/core\";\nimport {\n  onComponentRequiredPropUndefined,\n  isSlotUsed,\n  getThemeFromContext,\n  removeDisabledFalse,\n  checkSlotInChildMutations,\n} from \"../../utils/helpers\";\nimport {\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n  IcThemeMode,\n} from \"../../utils/types\";\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\n\n/**\n * @slot heading - Content will be placed at the top of the card to the right of the icon.\n * @slot message - Content will be placed in the main body of the card.\n * @slot subheading - Content will be placed below the card heading.\n * @slot adornment - Content will be placed below the card subheading.\n * @slot image-top - Content will be placed at the top of the card above all other content.\n * @slot image-mid - Content will be placed below the card heading section.\n * @slot icon - Content will be placed to the left of the card heading.\n * @slot interaction-button - Content will be placed in the top right corner of the heading section.\n * @slot interaction-controls - Content will be placed below the card message.\n * @slot expanded-content - Content will be placed below the interaction controls but will not initially be rendered.\n * @slot badge - Badge component overlaying the top right of the card.\n */\n@Component({\n  tag: \"ic-card-vertical\",\n  styleUrl: \"ic-card-vertical.css\",\n  shadow: true,\n})\nexport class CardVertical {\n  private hostMutationObserver: MutationObserver = null;\n\n  @Element() el: HTMLIcCardVerticalElement;\n\n  @State() appearance?: IcThemeForeground = \"default\";\n  @State() areaExpanded: boolean = false;\n  @State() isFocussed: boolean = false;\n  @State() parentEl: HTMLElement | null = null;\n  @State() parentIsAnchorTag: boolean = false;\n\n  /**\n   * If `true`, the card will be a clickable variant, instead of static.\n   */\n  @Prop({ mutable: true }) clickable?: boolean = false;\n\n  /**\n   * If `true`, the card will be disabled if it is clickable.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   *  If `true`, the card will have an expandable area and expansion toggle button.\n   */\n  @Prop() expandable?: boolean = false;\n\n  /**\n   *  If `true`, the card will fill the width of the container.\n   */\n  @Prop() fullWidth?: boolean = false;\n\n  /**\n   * The heading for the card. This is required, unless a slotted heading is used.\n   */\n  @Prop() heading?: string;\n\n  /**\n   * The URL that the clickable card link points to. If set, the clickable card will render as an \"a\" tag, otherwise it will render as a button.\n   */\n  @Prop() href?: string;\n\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string = \"\";\n\n  /**\n   * The main body message of the card.\n   */\n  @Prop() message?: string = \"\";\n\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n\n  /**\n   * The subheading for the card.\n   */\n  @Prop() subheading?: string;\n\n  /**\n   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  disconnectedCallback(): void {\n    if (this.parentIsAnchorTag) {\n      this.parentEl.removeEventListener(\"focus\", this.parentFocussed);\n      this.parentEl.removeEventListener(\"blur\", this.parentBlurred);\n    }\n\n    this.hostMutationObserver?.disconnect();\n  }\n\n  componentWillLoad(): void {\n    this.parentEl = this.el.parentElement;\n\n    if (this.parentEl.tagName === \"A\") {\n      this.clickable = true;\n      this.parentIsAnchorTag = true;\n      this.parentEl.classList.add(\"ic-card-wrapper-link\");\n      this.parentEl.addEventListener(\"focus\", this.parentFocussed);\n      this.parentEl.addEventListener(\"blur\", this.parentBlurred);\n    }\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  componentDidLoad(): void {\n    !isSlotUsed(this.el, \"heading\") &&\n      onComponentRequiredPropUndefined(\n        [{ prop: this.heading, propName: \"heading\" }],\n        \"Card\"\n      );\n    this.updateTheme();\n\n    this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n    this.hostMutationObserver.observe(this.el, {\n      childList: true,\n    });\n  }\n\n  @Listen(\"click\", { capture: true })\n  handleHostClick(event: Event): void {\n    if (this.disabled) {\n      event.stopImmediatePropagation();\n    }\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent<IcTheme>): void {\n    this.updateTheme(ev.detail.mode);\n  }\n\n  /**\n   * Sets focus on the card.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.el.shadowRoot.querySelector(\"a\")) {\n      this.el.shadowRoot.querySelector(\"a\").focus();\n    } else if (this.el.shadowRoot.querySelector(\"button\")) {\n      this.el.shadowRoot.querySelector(\"button\").focus();\n    }\n  }\n\n  private parentFocussed = (): void => {\n    this.isFocussed = true;\n  };\n\n  private parentBlurred = (): void => {\n    this.isFocussed = false;\n  };\n\n  private updateTheme(newTheme: IcThemeForeground = null): void {\n    const foregroundColor = getThemeFromContext(this.el, newTheme);\n\n    if (foregroundColor !== IcThemeForegroundEnum.Default) {\n      this.appearance = foregroundColor;\n    }\n  }\n\n  private toggleExpanded = (): void => {\n    this.areaExpanded = !this.areaExpanded;\n  };\n\n  private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n    if (\n      mutationList.some(({ type, addedNodes, removedNodes }) =>\n        type === \"childList\"\n          ? checkSlotInChildMutations(addedNodes, removedNodes, [\n              \"message\",\n              \"adornment\",\n              \"expanded-content\",\n              \"image-top\",\n              \"image-mid\",\n              \"icon\",\n              \"interaction-button\",\n              \"badge\",\n              \"interaction-controls\",\n            ])\n          : false\n      )\n    ) {\n      forceUpdate(this);\n    }\n  };\n\n  render() {\n    const {\n      appearance,\n      clickable,\n      disabled,\n      expandable,\n      fullWidth,\n      heading,\n      isFocussed,\n      message,\n      href,\n      hreflang,\n      parentIsAnchorTag,\n      referrerpolicy,\n      rel,\n      subheading,\n      target,\n      theme,\n    } = this;\n\n    const Component =\n      parentIsAnchorTag || !clickable\n        ? \"div\"\n        : href === undefined\n        ? \"button\"\n        : \"a\";\n\n    const attrs = Component == \"a\" && {\n      href: href,\n      hrefLang: hreflang,\n      referrerPolicy: referrerpolicy,\n      rel: rel,\n      target: target,\n    };\n\n    return (\n      <Host\n        class={{\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n      >\n        <Component\n          class={{\n            card: true,\n            clickable: clickable && !disabled,\n            disabled,\n            fullwidth: fullWidth,\n            focussed: isFocussed,\n            dark: appearance === IcThemeForegroundEnum.Dark,\n          }}\n          tabindex={clickable && !parentIsAnchorTag ? 0 : null}\n          aria-disabled={disabled ? \"true\" : null}\n          disabled={disabled ? true : null}\n          {...attrs}\n        >\n          {isSlotUsed(this.el, \"image-top\") && (\n            <div class=\"image-top\">\n              <slot name=\"image-top\"></slot>\n            </div>\n          )}\n          <div class=\"card-header\">\n            {isSlotUsed(this.el, \"icon\") && (\n              <div class=\"icon\">\n                <slot name=\"icon\" />\n              </div>\n            )}\n            <div class=\"card-title\">\n              <slot name=\"heading\">\n                <ic-typography variant=\"h4\">\n                  <p>{heading}</p>\n                </ic-typography>\n              </slot>\n            </div>\n            {isSlotUsed(this.el, \"interaction-button\") && (\n              <div class=\"interaction-button\">\n                <slot name=\"interaction-button\"></slot>\n              </div>\n            )}\n          </div>\n          {(subheading || isSlotUsed(this.el, \"subheading\")) && (\n            <div class=\"subheading\">\n              <slot name=\"subheading\">\n                <ic-typography variant=\"subtitle-small\">\n                  {subheading}\n                </ic-typography>\n              </slot>\n            </div>\n          )}\n          {isSlotUsed(this.el, \"adornment\") && (\n            <div class=\"adornment\">\n              <slot name=\"adornment\"></slot>\n            </div>\n          )}\n          {isSlotUsed(this.el, \"image-mid\") && (\n            <div class=\"image-mid\">\n              <slot name=\"image-mid\"></slot>\n            </div>\n          )}\n          {(message || isSlotUsed(this.el, \"message\")) && (\n            <div class=\"card-message\">\n              {message && (\n                <ic-typography variant=\"body\">{message}</ic-typography>\n              )}\n              {isSlotUsed(this.el, \"message\") && <slot name=\"message\"></slot>}\n            </div>\n          )}\n          {(isSlotUsed(this.el, \"interaction-controls\") || expandable) && (\n            <div class=\"interaction-area\">\n              <div class=\"interaction-controls\">\n                <slot name=\"interaction-controls\"></slot>\n              </div>\n              {expandable && (\n                <ic-tooltip\n                  id=\"ic-tooltip-expand-button\"\n                  label=\"Toggle expandable area\"\n                  silent\n                >\n                  <button\n                    class={{\n                      \"toggle-button\": true,\n                      [`toggle-button-${\n                        this.areaExpanded ? \"expanded\" : \"closed\"\n                      }`]: true,\n                    }}\n                    aria-label=\"Toggle expandable area\"\n                    aria-expanded={`${this.areaExpanded}`}\n                    aria-controls={\n                      this.areaExpanded ? \"expanded-content-area\" : null\n                    }\n                    onClick={this.toggleExpanded}\n                    innerHTML={chevronIcon}\n                  ></button>\n                </ic-tooltip>\n              )}\n            </div>\n          )}\n          {isSlotUsed(this.el, \"expanded-content\") && this.areaExpanded && (\n            <div class=\"expanded-content\" id=\"expanded-content-area\">\n              <slot name=\"expanded-content\"></slot>\n            </div>\n          )}\n          {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n        </Component>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/core/p-979c2792.entry.js

@@ -1,2 +0,0 @@
-import{r as e,f as t,h as i,H as n,g as o}from"./p-6b5e91e2.js";import{c as a,g as r,s,i as c,a as h,d,I as l}from"./p-b7eb8ef9.js";const m='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;background-color:var(--ic-theme-tertiary);--hero-heading-bottom-margin:var(--ic-space-md)}:host(.ic-hero-dark){background-color:var(--ic-theme-secondary);--ic-hero-heading:var(--ic-color-text-primary-light);--ic-hero-body:var(--ic-color-text-primary-light);--ic-hero-secondary-heading:var(--ic-color-text-primary-light)}.heading{--ic-typography-color:var(--ic-hero-heading)}.subheading{--ic-typography-color:var(--ic-hero-body)}.secondary-container{--ic-typography-color:var(--ic-hero-secondary-heading)}:host(.has-background-image){background-repeat:no-repeat;background-position:right -6.25rem;background-size:auto calc(100% + 6.25rem);box-shadow:var(--ic-elevation-inset)}@media (prefers-reduced-motion){:host(.has-background-image){background-position:right -6.25rem !important}}ic-typography.heading-bottom-spacing{margin-bottom:var(--hero-heading-bottom-margin)}.section-container{display:flex;align-items:center;height:100%}.left-container{padding:var(--ic-space-xl) 0}.left-container:not(.left-container-full-width){flex-basis:50%}.left-container-full-width{width:100%}.right-container{flex-basis:50%}.interaction-container{display:flex;gap:var(--ic-space-md);margin-top:var(--ic-space-lg);flex-wrap:wrap}.secondary-container{display:flex;flex-direction:column;justify-content:center;border-left:var(--ic-space-xxxs) solid var(--ic-hero-keyline)}.secondary-subheading{margin-top:var(--ic-space-xxs)}:host([content-aligned="left"]) .left-container,:host([content-aligned="left"]) .interaction-container{justify-content:flex-start;text-align:left}:host([content-aligned="center"]) .left-container,:host([content-aligned="center"]) .interaction-container{justify-content:center;text-align:center}@media (min-width: 992px){.left-container-full-width{width:66.6%}}@media (min-width: 1044px){:host,.section-container{min-height:13rem}:host(.ic-hero-small),:host(.ic-hero-small) .section-container{min-height:10.813rem}.left-container:not(.left-container-full-width){flex-basis:66.6%}.left-container{min-height:9rem}.right-container{flex-basis:33.3%;margin-left:3.125rem}.secondary-container{min-height:9rem}.secondary-heading,.secondary-subheading{margin-left:3.938rem}}@media (min-width: 801px) and (max-width: 1043px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:16rem}:host(.ic-hero-small),:host(.ic-hero-small) .section-container{min-height:15rem}:host(.secondary-heading),:host(.secondary-heading) .section-container{min-height:14rem}.left-container{min-height:10rem}.secondary-container{min-height:10rem}.secondary-heading,.secondary-subheading{margin-left:5.922rem}.right-container{margin-left:3.125rem}}@media (min-width: 641px) and (max-width: 800px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:16rem}:host(.ic-hero-small),:host(.ic-hero-small) .section-container{min-height:15rem}:host(.secondary-heading),:host(.secondary-heading) .section-container{min-height:14rem}.left-container{min-height:10rem}.secondary-container{min-height:10rem}.secondary-heading,.secondary-subheading{margin-left:2.125rem}.right-container{margin-left:3.125rem}}@media (min-width: 481px) and (max-width: 640px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:13rem}:host(.ic-hero-small),:host(.ic-hero-small) .section-container{min-height:10.813rem}:host(.secondary-heading),:host(.secondary-heading) .section-container{min-height:17.5rem}:host(.secondary-heading) .section-container,:host(.ic-hero-small) .section-container,.section-container{flex-direction:column;align-items:flex-start}.left-container{height:-moz-fit-content;height:fit-content}.secondary-container{height:-moz-fit-content;height:fit-content;border:none}.right-container{margin-bottom:2.5rem}}@media (max-width: 480px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:12rem}:host,.right-container{margin-bottom:var(--ic-space-md)}:host(.ic-hero-small),:host(.ic-hero-small) .section-container{min-height:10.813rem}:host(.secondary-heading),:host(.secondary-heading) .section-container{min-height:16.5rem}:host(.secondary-heading) .section-container,:host(.ic-hero-small) .section-container,.section-container{flex-direction:column;align-items:flex-start}.left-container{height:-moz-fit-content;height:fit-content}.secondary-container{height:-moz-fit-content;height:fit-content;border:none}}';const g=class{constructor(i){e(this,i);this.hostMutationObserver=null;this.hostMutationCallback=e=>{if(e.some((({type:e,addedNodes:t,removedNodes:i})=>e==="childList"?a(t,i,"secondary"):false))){t(this)}};this.foregroundColor=r();this.rightContent=false;this.leftContentFullWidth=!this.rightContent&&this.secondaryHeading===undefined;this.scrollFactor="right -100px";this.aligned="left";this.backgroundImage=undefined;this.contentAligned="left";this.disableBackgroundParallax=false;this.heading=undefined;this.secondaryHeading=undefined;this.secondarySubheading=undefined;this.size="medium";this.subheading=undefined}disconnectedCallback(){var e;(e=this.hostMutationObserver)===null||e===void 0?void 0:e.disconnect()}componentWillLoad(){this.rightContent=s(this.el,"secondary")}componentDidLoad(){!c(this.el,"heading")&&h([{prop:this.heading,propName:"heading"}],"Hero");this.hostMutationObserver=new MutationObserver(this.hostMutationCallback);this.hostMutationObserver.observe(this.el,{childList:true})}componentWillRender(){this.rightContent=s(this.el,"secondary")}themeChangeHandler(e){const t=e.detail;this.foregroundColor=t.mode}doScroll(){if(this.disableBackgroundParallax){return}const e=document.scrollingElement.scrollTop;const t=.4;const i=-100+e*t;this.scrollFactor="right "+i+"px"}render(){const{aligned:e,size:t,heading:o,subheading:a,secondaryHeading:r,secondarySubheading:s,foregroundColor:c,backgroundImage:h,scrollFactor:m}=this;let g={};if(d(h)){g={"background-image":"url("+h+")","background-position":m}}return i(n,{class:{[`ic-hero-${l.Dark}`]:c===l.Dark,["has-background-image"]:h!==undefined,["ic-hero-small"]:t==="small",["secondary-heading"]:!!r},style:g},i("ic-section-container",{aligned:e,fullHeight:true,class:"section-container"},i("div",{class:{["left-container"]:true,["left-container-full-width"]:this.leftContentFullWidth}},i("div",{class:"heading"},i("slot",{name:"heading"},i("ic-typography",{variant:t==="small"?"h2":"h1",class:{["heading-bottom-spacing"]:t!=="small"}},i("h2",null,o)))),i("div",{class:"subheading"},i("slot",{name:"subheading"},i("ic-typography",{variant:"body"},a))),i("div",{class:"interaction-container"},i("slot",{name:"interaction"}))),(d(r)||this.rightContent)&&i("div",{class:"right-container"},i("slot",{name:"secondary"},r&&i("div",{class:"secondary-container"},i("div",{class:"secondary-heading"},i("ic-typography",{variant:"h4"},i("h3",null,r))),i("div",{class:"secondary-subheading"},i("ic-typography",{variant:"subtitle-small"},s)))))))}get el(){return o(this)}};g.style=m;export{g as ic_hero};
-//# sourceMappingURL=p-979c2792.entry.js.map

package/dist/core/p-979c2792.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["icHeroCss","Hero","this","hostMutationObserver","hostMutationCallback","mutationList","some","type","addedNodes","removedNodes","checkSlotInChildMutations","forceUpdate","getThemeForegroundColor","rightContent","secondaryHeading","undefined","disconnectedCallback","_a","disconnect","componentWillLoad","slotHasContent","el","componentDidLoad","isSlotUsed","onComponentRequiredPropUndefined","prop","heading","propName","MutationObserver","observe","childList","componentWillRender","themeChangeHandler","ev","theme","detail","foregroundColor","mode","doScroll","disableBackgroundParallax","scrolltotop","document","scrollingElement","scrollTop","factor","y","scrollFactor","render","aligned","size","subheading","secondarySubheading","backgroundImage","style","isPropDefined","h","Host","class","IcThemeForegroundEnum","Dark","fullHeight","leftContentFullWidth","name","variant"],"sources":["src/components/ic-hero/ic-hero.css?tag=ic-hero&encapsulation=shadow","src/components/ic-hero/ic-hero.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: block;\n  background-color: var(--ic-theme-tertiary);\n\n  --hero-heading-bottom-margin: var(--ic-space-md);\n}\n\n:host(.ic-hero-dark) {\n  background-color: var(--ic-theme-secondary);\n\n  --ic-hero-heading: var(--ic-color-text-primary-light);\n  --ic-hero-body: var(--ic-color-text-primary-light);\n  --ic-hero-secondary-heading: var(--ic-color-text-primary-light);\n}\n\n.heading {\n  --ic-typography-color: var(--ic-hero-heading);\n}\n\n.subheading {\n  --ic-typography-color: var(--ic-hero-body);\n}\n\n.secondary-container {\n  --ic-typography-color: var(--ic-hero-secondary-heading);\n}\n\n:host(.has-background-image) {\n  background-repeat: no-repeat;\n  background-position: right -6.25rem;\n  background-size: auto calc(100% + 6.25rem);\n  box-shadow: var(--ic-elevation-inset);\n}\n\n@media (prefers-reduced-motion) {\n  :host(.has-background-image) {\n    background-position: right -6.25rem !important;\n  }\n}\n\nic-typography.heading-bottom-spacing {\n  margin-bottom: var(--hero-heading-bottom-margin);\n}\n\n.section-container {\n  display: flex;\n  align-items: center;\n  height: 100%;\n}\n\n.left-container {\n  padding: var(--ic-space-xl) 0;\n}\n\n.left-container:not(.left-container-full-width) {\n  flex-basis: 50%;\n}\n\n.left-container-full-width {\n  width: 100%;\n}\n\n.right-container {\n  flex-basis: 50%;\n}\n\n.interaction-container {\n  display: flex;\n  gap: var(--ic-space-md);\n  margin-top: var(--ic-space-lg);\n  flex-wrap: wrap;\n}\n\n.secondary-container {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  border-left: var(--ic-space-xxxs) solid var(--ic-hero-keyline);\n}\n\n.secondary-subheading {\n  margin-top: var(--ic-space-xxs);\n}\n\n:host([content-aligned=\"left\"]) .left-container,\n:host([content-aligned=\"left\"]) .interaction-container {\n  justify-content: flex-start;\n  text-align: left;\n}\n\n:host([content-aligned=\"center\"]) .left-container,\n:host([content-aligned=\"center\"]) .interaction-container {\n  justify-content: center;\n  text-align: center;\n}\n\n@media (min-width: 992px) {\n  .left-container-full-width {\n    width: 66.6%;\n  }\n}\n\n@media (min-width: 1044px) {\n  :host,\n  .section-container {\n    min-height: 13rem;\n  }\n\n  :host(.ic-hero-small),\n  :host(.ic-hero-small) .section-container {\n    min-height: 10.813rem;\n  }\n\n  .left-container:not(.left-container-full-width) {\n    flex-basis: 66.6%;\n  }\n\n  .left-container {\n    min-height: 9rem;\n  }\n\n  .right-container {\n    flex-basis: 33.3%;\n    margin-left: 3.125rem;\n  }\n\n  .secondary-container {\n    min-height: 9rem;\n  }\n\n  .secondary-heading,\n  .secondary-subheading {\n    margin-left: 3.938rem;\n  }\n}\n\n@media (min-width: 801px) and (max-width: 1043px) {\n  :host(.has-background-image) {\n    background-image: none !important;\n  }\n\n  :host,\n  .section-container {\n    min-height: 16rem;\n  }\n\n  :host(.ic-hero-small),\n  :host(.ic-hero-small) .section-container {\n    min-height: 15rem;\n  }\n\n  :host(.secondary-heading),\n  :host(.secondary-heading) .section-container {\n    min-height: 14rem;\n  }\n\n  .left-container {\n    min-height: 10rem;\n  }\n\n  .secondary-container {\n    min-height: 10rem;\n  }\n\n  .secondary-heading,\n  .secondary-subheading {\n    margin-left: 5.922rem;\n  }\n\n  .right-container {\n    margin-left: 3.125rem;\n  }\n}\n\n@media (min-width: 641px) and (max-width: 800px) {\n  :host(.has-background-image) {\n    background-image: none !important;\n  }\n\n  :host,\n  .section-container {\n    min-height: 16rem;\n  }\n\n  :host(.ic-hero-small),\n  :host(.ic-hero-small) .section-container {\n    min-height: 15rem;\n  }\n\n  :host(.secondary-heading),\n  :host(.secondary-heading) .section-container {\n    min-height: 14rem;\n  }\n\n  .left-container {\n    min-height: 10rem;\n  }\n\n  .secondary-container {\n    min-height: 10rem;\n  }\n\n  .secondary-heading,\n  .secondary-subheading {\n    margin-left: 2.125rem;\n  }\n\n  .right-container {\n    margin-left: 3.125rem;\n  }\n}\n\n@media (min-width: 481px) and (max-width: 640px) {\n  :host(.has-background-image) {\n    background-image: none !important;\n  }\n\n  :host,\n  .section-container {\n    min-height: 13rem;\n  }\n\n  :host(.ic-hero-small),\n  :host(.ic-hero-small) .section-container {\n    min-height: 10.813rem;\n  }\n\n  :host(.secondary-heading),\n  :host(.secondary-heading) .section-container {\n    min-height: 17.5rem;\n  }\n\n  :host(.secondary-heading) .section-container,\n  :host(.ic-hero-small) .section-container,\n  .section-container {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  .left-container {\n    height: fit-content;\n  }\n\n  .secondary-container {\n    height: fit-content;\n    border: none;\n  }\n\n  .right-container {\n    margin-bottom: 2.5rem;\n  }\n}\n\n@media (max-width: 480px) {\n  :host(.has-background-image) {\n    background-image: none !important;\n  }\n\n  :host,\n  .section-container {\n    min-height: 12rem;\n  }\n\n  :host,\n  .right-container {\n    margin-bottom: var(--ic-space-md);\n  }\n\n  :host(.ic-hero-small),\n  :host(.ic-hero-small) .section-container {\n    min-height: 10.813rem;\n  }\n\n  :host(.secondary-heading),\n  :host(.secondary-heading) .section-container {\n    min-height: 16.5rem;\n  }\n\n  :host(.secondary-heading) .section-container,\n  :host(.ic-hero-small) .section-container,\n  .section-container {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  .left-container {\n    height: fit-content;\n  }\n\n  .secondary-container {\n    height: fit-content;\n    border: none;\n  }\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  State,\n  Listen,\n  forceUpdate,\n} from \"@stencil/core\";\nimport {\n  IcAlignment,\n  IcSizesNoLarge,\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport {\n  slotHasContent,\n  getThemeForegroundColor,\n  onComponentRequiredPropUndefined,\n  isPropDefined,\n  isSlotUsed,\n  checkSlotInChildMutations,\n} from \"../../utils/helpers\";\nimport { IcHeroContentAlignments } from \"./ic-hero.types\";\n\n/**\n * @slot heading - Content will be rendered in the title area, in place of the heading.\n * @slot subheading - Content will be rendered in the title area, in place of the subheading.\n * @slot interaction - Content will be rendered in the interaction area, adjacent to the title area.\n * @slot secondary - Content will be rendered in the secondary content area.\n */\n\n@Component({\n  tag: \"ic-hero\",\n  styleUrl: \"ic-hero.css\",\n  shadow: true,\n})\nexport class Hero {\n  private hostMutationObserver: MutationObserver = null;\n\n  @Element() el: HTMLIcHeroElement;\n\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n  @State() rightContent: boolean = false;\n  // set by above state\n  @State() leftContentFullWidth: boolean =\n    !this.rightContent && this.secondaryHeading === undefined;\n  @State() scrollFactor: string = \"right -100px\";\n\n  /**\n   * The alignment of the hero.\n   */\n  @Prop() aligned: IcAlignment = \"left\";\n\n  /**\n   * The optional background image.\n   */\n  @Prop() backgroundImage?: string;\n\n  /**\n   * The alignment of the hero content.\n   */\n  @Prop() contentAligned: IcHeroContentAlignments = \"left\";\n\n  /**\n   * If `true`, the background image (if set) will not scroll using a parallax effect.\n   */\n  @Prop() disableBackgroundParallax?: boolean = false;\n\n  /**\n   * The heading of the hero. An <h2> level heading.\n   */\n  @Prop() heading: string;\n\n  /**\n   * The optional secondary heading, an <h3> level heading. Replaced by slotted right content.\n   */\n  @Prop() secondaryHeading?: string;\n\n  /**\n   * The optional secondary subheading, replaced by slotted right content.\n   */\n  @Prop() secondarySubheading?: string;\n\n  /**\n   * The size of the hero component.\n   */\n  @Prop() size?: IcSizesNoLarge = \"medium\";\n\n  /**\n   * The description for the hero.\n   */\n  @Prop() subheading?: string;\n\n  disconnectedCallback(): void {\n    this.hostMutationObserver?.disconnect();\n  }\n\n  componentWillLoad(): void {\n    this.rightContent = slotHasContent(this.el, \"secondary\");\n  }\n\n  componentDidLoad(): void {\n    !isSlotUsed(this.el, \"heading\") &&\n      onComponentRequiredPropUndefined(\n        [{ prop: this.heading, propName: \"heading\" }],\n        \"Hero\"\n      );\n\n    this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n    this.hostMutationObserver.observe(this.el, {\n      childList: true,\n    });\n  }\n\n  componentWillRender(): void {\n    this.rightContent = slotHasContent(this.el, \"secondary\");\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.foregroundColor = theme.mode;\n  }\n\n  @Listen(\"scroll\", { target: \"document\" })\n  doScroll(): void {\n    if (this.disableBackgroundParallax) {\n      return;\n    }\n\n    const scrolltotop = document.scrollingElement.scrollTop;\n    const factor = 0.4;\n    const y = -100 + scrolltotop * factor;\n    this.scrollFactor = \"right \" + y + \"px\";\n  }\n\n  private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n    if (\n      mutationList.some(({ type, addedNodes, removedNodes }) =>\n        type === \"childList\"\n          ? checkSlotInChildMutations(addedNodes, removedNodes, \"secondary\")\n          : false\n      )\n    ) {\n      forceUpdate(this);\n    }\n  };\n\n  render() {\n    const {\n      aligned,\n      size,\n      heading,\n      subheading,\n      secondaryHeading,\n      secondarySubheading,\n      foregroundColor,\n      backgroundImage,\n      scrollFactor,\n    } = this;\n\n    let style = {};\n\n    if (isPropDefined(backgroundImage)) {\n      style = {\n        \"background-image\": \"url(\" + backgroundImage + \")\",\n        \"background-position\": scrollFactor,\n      };\n    }\n\n    return (\n      <Host\n        class={{\n          [`ic-hero-${IcThemeForegroundEnum.Dark}`]:\n            foregroundColor === IcThemeForegroundEnum.Dark,\n          [\"has-background-image\"]: backgroundImage !== undefined,\n          [\"ic-hero-small\"]: size === \"small\",\n          [\"secondary-heading\"]: !!secondaryHeading,\n        }}\n        style={style}\n      >\n        <ic-section-container\n          aligned={aligned}\n          fullHeight\n          class=\"section-container\"\n        >\n          <div\n            class={{\n              [\"left-container\"]: true,\n              [\"left-container-full-width\"]: this.leftContentFullWidth,\n            }}\n          >\n            <div class=\"heading\">\n              <slot name=\"heading\">\n                <ic-typography\n                  variant={size === \"small\" ? \"h2\" : \"h1\"}\n                  class={{\n                    [\"heading-bottom-spacing\"]: size !== \"small\",\n                  }}\n                >\n                  <h2>{heading}</h2>\n                </ic-typography>\n              </slot>\n            </div>\n            <div class=\"subheading\">\n              <slot name=\"subheading\">\n                <ic-typography variant=\"body\">{subheading}</ic-typography>\n              </slot>\n            </div>\n            <div class=\"interaction-container\">\n              <slot name=\"interaction\"></slot>\n            </div>\n          </div>\n          {(isPropDefined(secondaryHeading) || this.rightContent) && (\n            <div class=\"right-container\">\n              <slot name=\"secondary\">\n                {secondaryHeading && (\n                  <div class=\"secondary-container\">\n                    <div class=\"secondary-heading\">\n                      <ic-typography variant=\"h4\">\n                        <h3>{secondaryHeading}</h3>\n                      </ic-typography>\n                    </div>\n                    <div class=\"secondary-subheading\">\n                      <ic-typography variant=\"subtitle-small\">\n                        {secondarySubheading}\n                      </ic-typography>\n                    </div>\n                  </div>\n                )}\n              </slot>\n            </div>\n          )}\n        </ic-section-container>\n      </Host>\n    );\n  }\n}\n"],"mappings":"oIAAA,MAAMA,EAAY,guN,MCuCLC,EAAI,M,yBACPC,KAAAC,qBAAyC,KAmGzCD,KAAAE,qBAAwBC,IAC9B,GACEA,EAAaC,MAAK,EAAGC,OAAMC,aAAYC,kBACrCF,IAAS,YACLG,EAA0BF,EAAYC,EAAc,aACpD,QAEN,CACAE,EAAYT,K,wBAvG8BU,I,kBACb,M,2BAG9BV,KAAKW,cAAgBX,KAAKY,mBAAqBC,U,kBAClB,e,aAKD,O,mDAUmB,O,+BAKJ,M,oGAoBd,S,0BAOhC,oBAAAC,G,OACEC,EAAAf,KAAKC,wBAAoB,MAAAc,SAAA,SAAAA,EAAEC,Y,CAG7B,iBAAAC,GACEjB,KAAKW,aAAeO,EAAelB,KAAKmB,GAAI,Y,CAG9C,gBAAAC,IACGC,EAAWrB,KAAKmB,GAAI,YACnBG,EACE,CAAC,CAAEC,KAAMvB,KAAKwB,QAASC,SAAU,YACjC,QAGJzB,KAAKC,qBAAuB,IAAIyB,iBAAiB1B,KAAKE,sBACtDF,KAAKC,qBAAqB0B,QAAQ3B,KAAKmB,GAAI,CACzCS,UAAW,M,CAIf,mBAAAC,GACE7B,KAAKW,aAAeO,EAAelB,KAAKmB,GAAI,Y,CAI9C,kBAAAW,CAAmBC,GACjB,MAAMC,EAAiBD,EAAGE,OAC1BjC,KAAKkC,gBAAkBF,EAAMG,I,CAI/B,QAAAC,GACE,GAAIpC,KAAKqC,0BAA2B,CAClC,M,CAGF,MAAMC,EAAcC,SAASC,iBAAiBC,UAC9C,MAAMC,EAAS,GACf,MAAMC,GAAK,IAAML,EAAcI,EAC/B1C,KAAK4C,aAAe,SAAWD,EAAI,I,CAerC,MAAAE,GACE,MAAMC,QACJA,EAAOC,KACPA,EAAIvB,QACJA,EAAOwB,WACPA,EAAUpC,iBACVA,EAAgBqC,oBAChBA,EAAmBf,gBACnBA,EAAegB,gBACfA,EAAeN,aACfA,GACE5C,KAEJ,IAAImD,EAAQ,GAEZ,GAAIC,EAAcF,GAAkB,CAClCC,EAAQ,CACN,mBAAoB,OAASD,EAAkB,IAC/C,sBAAuBN,E,CAI3B,OACES,EAACC,EAAI,CACHC,MAAO,CACL,CAAC,WAAWC,EAAsBC,QAChCvB,IAAoBsB,EAAsBC,KAC5C,CAAC,wBAAyBP,IAAoBrC,UAC9C,CAAC,iBAAkBkC,IAAS,QAC5B,CAAC,uBAAwBnC,GAE3BuC,MAAOA,GAEPE,EAAA,wBACEP,QAASA,EACTY,WAAU,KACVH,MAAM,qBAENF,EAAA,OACEE,MAAO,CACL,CAAC,kBAAmB,KACpB,CAAC,6BAA8BvD,KAAK2D,uBAGtCN,EAAA,OAAKE,MAAM,WACTF,EAAA,QAAMO,KAAK,WACTP,EAAA,iBACEQ,QAASd,IAAS,QAAU,KAAO,KACnCQ,MAAO,CACL,CAAC,0BAA2BR,IAAS,UAGvCM,EAAA,UAAK7B,MAIX6B,EAAA,OAAKE,MAAM,cACTF,EAAA,QAAMO,KAAK,cACTP,EAAA,iBAAeQ,QAAQ,QAAQb,KAGnCK,EAAA,OAAKE,MAAM,yBACTF,EAAA,QAAMO,KAAK,mBAGbR,EAAcxC,IAAqBZ,KAAKW,eACxC0C,EAAA,OAAKE,MAAM,mBACTF,EAAA,QAAMO,KAAK,aACRhD,GACCyC,EAAA,OAAKE,MAAM,uBACTF,EAAA,OAAKE,MAAM,qBACTF,EAAA,iBAAeQ,QAAQ,MACrBR,EAAA,UAAKzC,KAGTyC,EAAA,OAAKE,MAAM,wBACTF,EAAA,iBAAeQ,QAAQ,kBACpBZ,Q"}

package/dist/core/p-97fb2bdf.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as e,g as i}from"./p-6b5e91e2.js";import{o,a as n}from"./p-b7eb8ef9.js";const s=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true">\n    <path d="M0 8L1.41 9.41L7 3.83V16H9V3.83L14.58 9.42L16 8L8 0L0 8Z"/>\n</svg>\n`;const a='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;position:absolute;right:0}ic-button{height:2.5rem;align-items:center;background-color:var(--ic-architectural-white);border-radius:5rem;box-shadow:var(--ic-elevation-overlay);visibility:hidden;opacity:0;position:fixed;right:var(--ic-space-md);bottom:var(--ic-space-md);transition:visibility 0s linear var(--ic-transition-duration-slow),\n    opacity var(--ic-transition-duration-slow);z-index:var(--ic-z-index-back-to-top)}ic-button::part(button){border-radius:5rem;border:var(--ic-border-width) solid var(--ic-action-default)}ic-button.show{visibility:visible;opacity:1;transition:visibility 0s linear 0s,\n    opacity var(--ic-transition-duration-slow),\n    box-shadow var(--ic-easing-transition-fast)}ic-button.by-footer{position:relative;right:var(--ic-space-md);bottom:3.5rem}ic-button.offset-banner{margin-bottom:var(--ic-space-lg)}.ic-back-to-top-icon{padding-top:var(--ic-space-xxs);padding-right:var(--ic-space-xs)}.ic-back-to-top-icon>svg{height:var(--ic-space-md);width:var(--ic-space-md)}.icon-only{width:2.5rem}.icon-only .ic-back-to-top-icon>svg{padding-left:calc(var(--ic-space-xs) - var(--ic-space-1px))}@media (forced-colors: active){.icon-only .ic-back-to-top-icon>svg{padding-left:calc(var(--ic-space-xs) - var(--ic-space-xxxs))}}';const r="Back to top";const c=class{constructor(e){t(this,e);this.topObserver=null;this.getObservedEl=()=>document.querySelector("#ic-back-to-top-target");this.setTargetElVisible=t=>{this.targetElVisible=t};this.setFooterVisible=t=>{this.checkForClassificationBanner();this.footerVisible=typeof window!=="undefined"&&window.scrollY===0?false:t};this.targetElObserverCallback=t=>{this.setTargetElVisible(t[0].isIntersecting)};this.footerObserverCallback=t=>{this.setFooterVisible(t[0].isIntersecting)};this.findTargetEl=t=>{let e=null;if(t===null||t===undefined){console.log("Error: No target ID specified for back to top component - defaulting to top of page")}else{e=document.querySelector(`${t.startsWith("#")?"":"#"}${t}`);if(e===null){console.log(`Error: Back to top target element '${t}' not found - defaulting to top of page`)}}return e};this.createTopObserver=t=>{this.targetEl=this.findTargetEl(t);let e;if(this.topObserver!==null){const t=this.getObservedEl();if(t!==null){this.topObserver.unobserve(t);t.remove()}}if(this.targetEl===null){e=document.body;this.targetEl=e.firstElementChild;this.isTargetElNull=true}else{e=this.targetEl.parentNode;this.isTargetElNull=false}const i=document.createElement("div");i.setAttribute("id","ic-back-to-top-target");i.setAttribute("tabindex","-1");e.insertBefore(i,this.targetEl);const o=getComputedStyle(this.targetEl).marginTop;this.topObserver=new IntersectionObserver(this.targetElObserverCallback,{threshold:[0],rootMargin:`${o} 0px 0px 0px`});this.topObserver.observe(i)};this.handleClick=()=>{if(this.isTargetElNull){window.scrollTo(0,0)}else{this.targetEl.scrollIntoView()}this.getObservedEl().focus()};this.checkForClassificationBanner=()=>{const t=document.querySelectorAll("ic-classification-banner:not([inline='true'])");this.bannerOffset=t.length>0};this.bannerOffset=false;this.footerVisible=false;this.targetElVisible=true;this.target=undefined;this.variant="default"}watchPropHandler(t,e){o(e,t,(()=>{this.createTopObserver(t)}))}componentWillLoad(){this.createTopObserver(this.target);this.checkForClassificationBanner();let t=document.querySelectorAll("ic-footer");if(t.length===0){t=document.querySelectorAll("footer")}if(t.length){const e=t[t.length-1];const i=this.bannerOffset?.15:0;const o=new IntersectionObserver(this.footerObserverCallback,{threshold:[i]});o.observe(e)}}componentDidLoad(){n([{prop:this.target,propName:"target"}],"Back to Top")}render(){const{variant:t,bannerOffset:i,targetElVisible:o,footerVisible:n}=this;const a=t==="icon"?"icon":"tertiary";const c=t==="icon"?"large":"medium";const l=t==="icon"?"":r;return e("ic-button",{"aria-label":r,variant:a,size:c,onClick:this.handleClick,class:{["offset-banner"]:i,["show"]:!o,["by-footer"]:n,["icon-only"]:t==="icon"}},e("span",{class:"ic-back-to-top-icon",innerHTML:s}),l)}static get delegatesFocus(){return true}get el(){return i(this)}static get watchers(){return{target:["watchPropHandler"]}}};c.style=a;export{c as ic_back_to_top};
-//# sourceMappingURL=p-97fb2bdf.entry.js.map