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

package/dist/core/p-7fbf2d3e.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  width: 100%;\n}\n\n.primary-navigation {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n\n  /* Hide scrollbar when required but keep functionality */\n  scrollbar-width: none;\n}\n\n.primary-navigation::-webkit-scrollbar {\n  display: none;\n}\n\n.primary-navigation,\n.secondary-navigation {\n  overflow-x: hidden;\n}\n\n.bottom-side-nav .menu-expand-button {\n  position: absolute;\n  display: none;\n}\n\n.menu-visibility-visible {\n  visibility: visible;\n  width: 100%;\n}\n\n.app-title-show {\n  min-width: 15.5rem;\n}\n\n:host(.side-display) {\n  display: flex;\n  flex-direction: column;\n  height: 100vh;\n  position: var(--side-navigation-position);\n  left: 0;\n  top: 0;\n  bottom: 0;\n}\n\n:host(.side-display) .app-icon-container {\n  height: 40px;\n  display: flex;\n  align-items: center;\n}\n\n:host(.side-display) .top-bar {\n  --side-navigation-height: var(--sm-side-navigation-top-bar-height);\n\n  position: relative;\n  padding: 0;\n  box-shadow: -0.188rem 0.188rem 0.5rem rgb(0 0 0 / 20%);\n}\n\n:host(.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-91cf9b2b.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as i,H as a,g as e}from"./p-6b5e91e2.js";import{a as s,T as r,U as l,F as n,X as o,Y as c,Q as p}from"./p-b7eb8ef9.js";const d="ic-input-label{margin-bottom:var(--ic-space-xs)}ic-input-label.with-helper{margin-bottom:var(--ic-space-xxxs)}ic-input-label.ic-input-label-readonly{--ic-typography-color:var(--ic-color-text-tertiary)}ic-input-label .helpertext{margin-top:var(--ic-space-xxxs);padding-bottom:var(--ic-input-label-helpertext-padding, 0)}ic-input-label .helpertext-normal{--ic-typography-color:var(--ic-color-text-secondary)}ic-input-label .helpertext-readonly{--ic-typography-color:var(--ic-color-text-tertiary)}ic-input-label .readonly-label{--ic-typography-color:var(--ic-color-text-secondary)}ic-input-label .error-label{--ic-typography-color:var(--ic-status-error-default)}ic-input-label .dark{--ic-typography-color:var(--ic-architectural-white)}";const h=class{constructor(i){t(this,i);this.appearance="default";this.disabled=false;this.for=undefined;this.helperText="";this.hideLabel=false;this.label=undefined;this.readonly=false;this.required=false;this.status="";this.useLabelTag=true}componentDidLoad(){s([{prop:this.label,propName:"label"}],"Input Label")}render(){const{disabled:t,readonly:e,label:s,required:l,helperText:n,status:o,hideLabel:c,appearance:p,useLabelTag:d}=this;const h=l?s+" *":s;const u=e||!d?`${h}`:i("label",{htmlFor:this.for},h);const v=r(this.for);return i(a,{class:{["ic-input-label-disabled"]:t,["ic-input-label-readonly"]:e,["with-helper"]:n!==""}},!c&&i("ic-typography",{variant:"label",class:{["readonly-label"]:e,["error-label"]:o==="error"&&!(e||t),["dark"]:p==="dark"}},u),n!==""&&i("ic-typography",{variant:"caption",class:{["helpertext"]:true,["helpertext-normal"]:!t&&!e,["helpertext-readonly"]:e}},i("span",{id:v},n)))}};h.style=d;const u="ic-input-validation{width:var(--input-width, 20rem);margin-top:var(--ic-space-xs);display:flex}ic-input-validation.ic-input-validation-full-width{width:100%}ic-input-validation span.status-icon{padding-right:var(--ic-space-xxs)}ic-input-validation span.status-icon>svg{height:1.25rem;width:1.25rem}ic-input-validation span.icon-success>svg{fill:var(--ic-status-success-default)}ic-input-validation span.icon-error>svg{fill:var(--ic-status-error-default)}ic-input-validation span.icon-warning>svg{fill:var(--ic-status-warning-default)}ic-input-validation .statustext{flex-grow:1}";const v={[n.Warning]:o,[n.Error]:c,[n.Success]:p};const b=class{constructor(i){t(this,i);this.ariaLiveMode="polite";this.for=undefined;this.fullWidth=false;this.message=undefined;this.status=""}componentDidLoad(){s([{prop:this.message,propName:"message"}],"Input Validation")}render(){const t=this.status!==""?v[this.status]:"";const e=l(this.for);return i(a,{class:{[`ic-input-validation-${this.status}`]:this.status!=="",["ic-input-validation-full-width"]:this.fullWidth}},t!==""&&i("span",{class:{["status-icon"]:true,[`icon-${this.status}`]:true},innerHTML:t}),i("ic-typography",{variant:"caption",class:"statustext"},i("span",{"aria-live":this.ariaLiveMode,id:e},this.message)),i("slot",{name:"validation-message-adornment"}))}get el(){return e(this)}};b.style=u;export{h as ic_input_label,b as ic_input_validation};
-//# sourceMappingURL=p-91cf9b2b.entry.js.map

package/dist/core/p-91cf9b2b.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["icInputLabelCss","InputLabel","componentDidLoad","onComponentRequiredPropUndefined","prop","this","label","propName","render","disabled","readonly","required","helperText","status","hideLabel","appearance","useLabelTag","labelText","labelContent","h","htmlFor","for","id","getInputHelperTextID","Host","class","variant","icInputValidationCss","icon","IcInformationStatus","Warning","warningIcon","Error","errorIcon","Success","successIcon","InputValidation","message","displayIcon","getInputValidationTextID","fullWidth","innerHTML","ariaLiveMode","name"],"sources":["src/components/ic-input-label/ic-input-label.css?tag=ic-input-label","src/components/ic-input-label/ic-input-label.tsx","src/components/ic-input-validation/ic-input-validation.css?tag=ic-input-validation","src/components/ic-input-validation/ic-input-validation.tsx"],"sourcesContent":["ic-input-label {\n  margin-bottom: var(--ic-space-xs);\n}\n\nic-input-label.with-helper {\n  margin-bottom: var(--ic-space-xxxs);\n}\n\nic-input-label.ic-input-label-readonly {\n  --ic-typography-color: var(--ic-color-text-tertiary);\n}\n\nic-input-label .helpertext {\n  margin-top: var(--ic-space-xxxs);\n  padding-bottom: var(--ic-input-label-helpertext-padding, 0);\n}\n\nic-input-label .helpertext-normal {\n  --ic-typography-color: var(--ic-color-text-secondary);\n}\n\nic-input-label .helpertext-readonly {\n  --ic-typography-color: var(--ic-color-text-tertiary);\n}\n\nic-input-label .readonly-label {\n  --ic-typography-color: var(--ic-color-text-secondary);\n}\n\nic-input-label .error-label {\n  --ic-typography-color: var(--ic-status-error-default);\n}\n\nic-input-label .dark {\n  --ic-typography-color: var(--ic-architectural-white);\n}\n\n/* Add back in after storybook has the `color-scheme: light dark` code */\n\n/* @media (prefers-color-scheme: dark) and (not (forced-colors: active)) {\n  ic-input-label,\n  ic-input-label .helpertext-normal,\n  ic-input-label .readonly-label,\n  ic-input-label .helpertext-readonly {\n    color: var(--ic-architectural-white);\n  }\n} */\n","import { Component, Host, Prop, h } from \"@stencil/core\";\n\nimport {\n  getInputHelperTextID,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-input-label\",\n  styleUrl: \"./ic-input-label.css\",\n})\nexport class InputLabel {\n  /**\n   * The appearance of the input label.\n   */\n  @Prop() appearance?: \"dark\" | \"default\" = \"default\";\n\n  /**\n   * If `true`, the disabled state will be set.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * The ID of the form element the label is bound to.\n   */\n  @Prop() for: string;\n\n  /**\n   * The helper text that will be displayed.\n   */\n  @Prop() helperText: string = \"\";\n\n  /**\n   * The label will be visually hidden.\n   */\n  @Prop() hideLabel: boolean = false;\n\n  /**\n   * The text content of the label.\n   */\n  @Prop() label!: string;\n\n  /**\n   * If `true`, the readonly state will be set.\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * If `true`, the input label will require a value.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * The status of the label - e.g. 'error'.\n   */\n  @Prop() status: \"error\" | \"\" = \"\";\n\n  /**\n   * @internal If `true`, wraps label text in label tag\n   */\n  @Prop() useLabelTag: boolean = true;\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Input Label\"\n    );\n  }\n\n  render() {\n    const {\n      disabled,\n      readonly,\n      label,\n      required,\n      helperText,\n      status,\n      hideLabel,\n      appearance,\n      useLabelTag,\n    } = this;\n    const labelText = required ? label + \" *\" : label;\n    const labelContent =\n      readonly || !useLabelTag ? (\n        `${labelText}`\n      ) : (\n        <label htmlFor={this.for}>{labelText}</label>\n      );\n\n    const id = getInputHelperTextID(this.for);\n\n    return (\n      <Host\n        class={{\n          [\"ic-input-label-disabled\"]: disabled,\n          [\"ic-input-label-readonly\"]: readonly,\n          [\"with-helper\"]: helperText !== \"\",\n        }}\n      >\n        {!hideLabel && (\n          <ic-typography\n            variant=\"label\"\n            class={{\n              [\"readonly-label\"]: readonly,\n              [\"error-label\"]: status === \"error\" && !(readonly || disabled),\n              [\"dark\"]: appearance === \"dark\",\n            }}\n          >\n            {labelContent}\n          </ic-typography>\n        )}\n\n        {helperText !== \"\" && (\n          <ic-typography\n            variant=\"caption\"\n            class={{\n              [\"helpertext\"]: true,\n              [\"helpertext-normal\"]: !disabled && !readonly,\n              [\"helpertext-readonly\"]: readonly,\n            }}\n          >\n            <span id={id}>{helperText}</span>\n          </ic-typography>\n        )}\n      </Host>\n    );\n  }\n}\n","ic-input-validation {\n  width: var(--input-width, 20rem);\n  margin-top: var(--ic-space-xs);\n  display: flex;\n}\n\nic-input-validation.ic-input-validation-full-width {\n  width: 100%;\n}\n\nic-input-validation span.status-icon {\n  padding-right: var(--ic-space-xxs);\n}\n\nic-input-validation span.status-icon > svg {\n  height: 1.25rem;\n  width: 1.25rem;\n}\n\nic-input-validation span.icon-success > svg {\n  fill: var(--ic-status-success-default);\n}\n\nic-input-validation span.icon-error > svg {\n  fill: var(--ic-status-error-default);\n}\n\nic-input-validation span.icon-warning > svg {\n  fill: var(--ic-status-warning-default);\n}\n\nic-input-validation .statustext {\n  flex-grow: 1;\n}\n","import { Element, Component, Host, Prop, h } from \"@stencil/core\";\n\nimport {\n  IcInformationStatus,\n  IcInformationStatusOrEmpty,\n} from \"../../utils/types\";\nimport errorIcon from \"../../assets/error-icon.svg\";\nimport successIcon from \"../../assets/success-icon.svg\";\nimport warningIcon from \"../../assets/warning-icon.svg\";\n\nimport {\n  getInputValidationTextID,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcAriaLiveModeVariants } from \"./ic-input-validation.types\";\n\nconst icon = {\n  [IcInformationStatus.Warning]: warningIcon,\n  [IcInformationStatus.Error]: errorIcon,\n  [IcInformationStatus.Success]: successIcon,\n};\n\n/**\n * @slot validation-message-adornment - Content will be placed to the right of the validation message.\n */\n@Component({\n  tag: \"ic-input-validation\",\n  styleUrl: \"ic-input-validation.css\",\n})\nexport class InputValidation {\n  @Element() el: HTMLIcInputValidationElement;\n\n  /**\n   *  The ARIA live mode to apply to the message.\n   */\n  @Prop() ariaLiveMode: IcAriaLiveModeVariants = \"polite\";\n\n  /**\n   * The ID of the form element the validation is bound to.\n   */\n  @Prop() for: string;\n\n  /**\n   *  If `true`, the input validation will fill the width of the container.\n   */\n  @Prop() fullWidth: boolean = false;\n\n  /**\n   * The validation message to display.\n   */\n  @Prop() message!: string;\n\n  /**\n   * The status of the validation - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() status: IcInformationStatusOrEmpty = \"\";\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.message, propName: \"message\" }],\n      \"Input Validation\"\n    );\n  }\n\n  render() {\n    const displayIcon = this.status !== \"\" ? icon[this.status] : \"\";\n    const id = getInputValidationTextID(this.for);\n    return (\n      <Host\n        class={{\n          [`ic-input-validation-${this.status}`]: this.status !== \"\",\n          [\"ic-input-validation-full-width\"]: this.fullWidth,\n        }}\n      >\n        {displayIcon !== \"\" && (\n          <span\n            class={{\n              [\"status-icon\"]: true,\n              [`icon-${this.status}`]: true,\n            }}\n            innerHTML={displayIcon}\n          />\n        )}\n\n        <ic-typography variant=\"caption\" class=\"statustext\">\n          <span aria-live={this.ariaLiveMode} id={id}>\n            {this.message}\n          </span>\n        </ic-typography>\n\n        <slot name=\"validation-message-adornment\"></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"uIAAA,MAAMA,EAAkB,+tB,MCWXC,EAAU,M,yCAIqB,U,cAKd,M,mCAUC,G,eAKA,M,mCAUD,M,cAKA,M,YAKG,G,iBAKA,I,CAE/B,gBAAAC,GACEC,EACE,CAAC,CAAEC,KAAMC,KAAKC,MAAOC,SAAU,UAC/B,c,CAIJ,MAAAC,GACE,MAAMC,SACJA,EAAQC,SACRA,EAAQJ,MACRA,EAAKK,SACLA,EAAQC,WACRA,EAAUC,OACVA,EAAMC,UACNA,EAASC,WACTA,EAAUC,YACVA,GACEX,KACJ,MAAMY,EAAYN,EAAWL,EAAQ,KAAOA,EAC5C,MAAMY,EACJR,IAAaM,EAAW,GACnBC,IAEHE,EAAA,SAAOC,QAASf,KAAKgB,KAAMJ,GAG/B,MAAMK,EAAKC,EAAqBlB,KAAKgB,KAErC,OACEF,EAACK,EAAI,CACHC,MAAO,CACL,CAAC,2BAA4BhB,EAC7B,CAAC,2BAA4BC,EAC7B,CAAC,eAAgBE,IAAe,MAGhCE,GACAK,EAAA,iBACEO,QAAQ,QACRD,MAAO,CACL,CAAC,kBAAmBf,EACpB,CAAC,eAAgBG,IAAW,WAAaH,GAAYD,GACrD,CAAC,QAASM,IAAe,SAG1BG,GAIJN,IAAe,IACdO,EAAA,iBACEO,QAAQ,UACRD,MAAO,CACL,CAAC,cAAe,KAChB,CAAC,sBAAuBhB,IAAaC,EACrC,CAAC,uBAAwBA,IAG3BS,EAAA,QAAMG,GAAIA,GAAKV,I,aCzH3B,MAAMe,EAAuB,qkBCgB7B,MAAMC,EAAO,CACX,CAACC,EAAoBC,SAAUC,EAC/B,CAACF,EAAoBG,OAAQC,EAC7B,CAACJ,EAAoBK,SAAUC,G,MAUpBC,EAAe,M,2CAMqB,S,kCAUlB,M,mCAUgB,E,CAE7C,gBAAAlC,GACEC,EACE,CAAC,CAAEC,KAAMC,KAAKgC,QAAS9B,SAAU,YACjC,mB,CAIJ,MAAAC,GACE,MAAM8B,EAAcjC,KAAKQ,SAAW,GAAKe,EAAKvB,KAAKQ,QAAU,GAC7D,MAAMS,EAAKiB,EAAyBlC,KAAKgB,KACzC,OACEF,EAACK,EAAI,CACHC,MAAO,CACL,CAAC,uBAAuBpB,KAAKQ,UAAWR,KAAKQ,SAAW,GACxD,CAAC,kCAAmCR,KAAKmC,YAG1CF,IAAgB,IACfnB,EAAA,QACEM,MAAO,CACL,CAAC,eAAgB,KACjB,CAAC,QAAQpB,KAAKQ,UAAW,MAE3B4B,UAAWH,IAIfnB,EAAA,iBAAeO,QAAQ,UAAUD,MAAM,cACrCN,EAAA,oBAAiBd,KAAKqC,aAAcpB,GAAIA,GACrCjB,KAAKgC,UAIVlB,EAAA,QAAMwB,KAAK,iC"}

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

@@ -1,2 +0,0 @@
-import{r as e,c as i,h as t,H as a,g as o}from"./p-6b5e91e2.js";import{k as r,i as c,j as n,r as s,a as d,s as l,d as h}from"./p-b7eb8ef9.js";const p='/*! 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}ic-radio-option{display:flex;flex-direction:column;width:-moz-fit-content;width:fit-content}.additional-field-wrapper ic-text-field{margin-top:calc(var(--ic-space-sm) / 2);margin-left:var(--ic-space-xl)}ic-radio-option.ic-radio-option-disabled{--ic-typography-color:var(--ic-architectural-200)}.container input:focus+span.checkmark,.container:active input:focus+span.checkmark,:host(:focus) .container input:checked+span.checkmark{box-shadow:var(--ic-border-focus)}.container{display:grid;grid-template-columns:min-content auto;position:relative;cursor:pointer;align-items:center;margin:var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs)}.container.disabled,.container.disabled input:disabled{cursor:default}.container input{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-block;position:absolute;cursor:pointer;height:var(--ic-space-lg);width:var(--ic-space-lg);border-radius:50%;border:none}.checkmark{display:block;position:relative;top:0;left:0;height:var(--ic-space-lg);width:var(--ic-space-lg);background-color:var(--ic-architectural-white);border:var(--ic-border-default);border-radius:50%;transition:var(--ic-easing-transition-fast);box-sizing:border-box}.container input:checked~.checkmark::after{display:inline-block}.container:hover input~.checkmark{background-color:var(--ic-action-default-bg-hover-no-alpha);box-shadow:0 0 0 0.25rem var(--ic-action-default-bg-hover);border:var(--ic-border-width) solid var(--ic-action-default)}.container:active input~.checkmark{background-color:var(--ic-action-default-bg-active-no-alpha);border:var(--ic-border-width) solid var(--ic-action-default-pressed);box-shadow:0 0 0 0.25rem var(--ic-action-default-bg-active)}.container:active input:checked~.checkmark{background-color:var(--ic-action-default-bg-active);border:0.125rem solid var(--ic-action-default-pressed);box-shadow:0 0 0 0.25rem var(--ic-action-default-bg-active)}.container:active input:checked~.checkmark::after{background-color:var(--ic-action-default-pressed)}.container input:checked~.checkmark{border:0.125rem solid var(--ic-action-default)}.container input:checked:disabled~.checkmark{background-color:var(--ic-architectural-white);border:0.125rem solid var(--ic-architectural-200)}.container input:disabled~.checkmark{border:var(--ic-border-width) dashed var(--ic-architectural-200)}.container input:disabled~.checkmark::after{background:var(--ic-architectural-200)}.container:hover input:disabled~.checkmark{background-color:var(--ic-architectural-white);box-shadow:none;border:0.125rem solid none}.container:active input:disabled~.checkmark::after{background-color:var(--ic-architectural-200)}.container .checkmark::after{content:"";position:absolute;display:none;top:calc(50% - var(--ic-space-xs));left:calc(50% - var(--ic-space-xs));width:var(--ic-space-md);height:var(--ic-space-md);border-radius:50%;background:var(--ic-action-default)}.radio-label{margin-left:var(--ic-space-md)}.additional-field-wrapper{margin-left:var(--ic-space-xs)}.branch-corner{color:var(--ic-action-default);height:var(--ic-space-md);width:var(--ic-space-xl);border-radius:0 0 0 0.188rem;border-bottom:0.125rem solid var(--ic-action-default);border-left:0.125rem solid var(--ic-action-default);margin-left:calc(-1 * var(--ic-space-1px))}.dynamic-container{display:flex;position:relative;margin:var(--ic-space-xxxs) 0 var(--ic-space-xxs) var(--ic-space-md);gap:var(--ic-space-xs)}.dynamic-container.hidden{display:none}.dynamic-text{color:var(--ic-action-default);--ic-typography-color:var(--ic-action-default);margin-top:calc(var(--ic-space-sm) / 2);margin-bottom:var(--ic-space-xs);border-radius:2%}@media (max-width: 576px){ic-text-field{--input-width:100%}}@media (forced-colors: active){.container input:checked~.checkmark,.container:active input:checked~.checkmark{border-color:Highlight}.container input:checked~.checkmark::after,.container:active input:checked~.checkmark::after{background-color:Highlight}.container input:disabled~.checkmark,.container input:checked:disabled~.checkmark{border-color:GrayText}.container input:disabled~.checkmark::after,.container:active input:disabled~.checkmark::after{background-color:GrayText}}';const u="additional-field";const b=class{constructor(t){e(this,t);this.icCheck=i(this,"icCheck",7);this.icSelectedChange=i(this,"icSelectedChange",7);this.defaultRadioValue="";this.hasAdditionalField=false;this.skipFocus=false;this.handleClick=e=>{const i=e.target.matches(".dynamic-container, .dynamic-container *");if(!this.disabled&&!i){e.stopPropagation();if(this.skipFocus===false){this.radioElement.focus()}this.skipFocus=false;if(this.hasAdditionalField){this.value=this.getAdditionalField().value||this.defaultRadioValue}this.icCheck.emit({value:this.value})}};this.handleKeyDown=e=>{const i=["IC-DATE-INPUT","IC-DATE-PICKER"];if(this.getAdditionalField()==document.activeElement&&i.includes(this.getAdditionalField().nodeName)){e.stopPropagation()}};this.handleFormReset=()=>{this.skipFocus=true;this.selected=this.initiallySelected};this.additionalFieldDisplay="static";this.disabled=false;this.dynamicText="This selection requires additional answers";this.form=undefined;this.groupLabel=undefined;this.label=undefined;this.name=undefined;this.value=undefined;this.selected=false;this.initiallySelected=this.selected}watchSelectedHandler(){this.icSelectedChange.emit()}disconnectedCallback(){r(this.el,this.handleFormReset)}componentWillLoad(){if(c(this.el,u)){this.hasAdditionalField=true;this.getAdditionalField()}this.defaultRadioValue=this.value;n(this.el,this.handleFormReset);s(this.disabled,this.el)}componentDidLoad(){d([{prop:this.value,propName:"value"}],"Radio Option")}componentWillRender(){const e=l(this.el,u);if(e&&!this.hasAdditionalField){this.hasAdditionalField=true;this.getAdditionalField()}else if(!e&&this.hasAdditionalField){this.hasAdditionalField=false}}componentDidRender(){if(this.additionalFieldDisplay==="static"){const e=this.getAdditionalField();if(!this.selected||this.disabled){e===null||e===void 0?void 0:e.setAttribute("disabled","")}else{e===null||e===void 0?void 0:e.removeAttribute("disabled")}}}additionalFieldValueHandler(e){if(this.selected){this.value=e.detail.value||this.defaultRadioValue;this.icCheck.emit({value:this.value})}e.stopImmediatePropagation()}async setFocus(){var e;(e=this.radioElement)===null||e===void 0?void 0:e.focus()}async setTabIndex(e){this.radioElement.tabIndex=e}getAdditionalField(){const e=this.el.querySelector('[slot="additional-field"]');if(e)e.hiddenInput=false;return e}render(){const{additionalFieldDisplay:e,disabled:i,dynamicText:o,form:r,groupLabel:c,handleClick:n,handleKeyDown:s,hasAdditionalField:d,label:l,name:p,selected:b,value:m}=this;const f=`ic-radio-option-${h(l)||m}-${c}`;return t(a,{onClick:n,onKeyDown:s,class:{["ic-radio-option-disabled"]:i}},t("div",{class:{container:true,disabled:i}},t("div",null,t("input",{tabindex:b?"0":"-1",type:"radio",name:p,id:f,value:m,disabled:i?true:null,checked:b,ref:e=>this.radioElement=e,form:r}),t("span",{class:"checkmark"})),t("ic-typography",{class:"radio-label",variant:"body"},t("label",{htmlFor:f},l))),d&&t("div",{class:{"dynamic-container":true,hidden:e==="dynamic"&&!b}},e==="dynamic"&&t("div",{class:"branch-corner"}),t("div",null,e==="dynamic"&&t("ic-typography",{variant:"caption"},t("p",{class:"dynamic-text"},o)),t("div",{class:{"additional-field-wrapper":e==="static"}},t("slot",{name:u})))))}get el(){return o(this)}static get watchers(){return{selected:["watchSelectedHandler"]}}};b.style=p;export{b as ic_radio_option};
-//# sourceMappingURL=p-ac4b7329.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["icRadioOptionCss","ADDITIONAL_FIELD","RadioOption","this","defaultRadioValue","hasAdditionalField","skipFocus","handleClick","event","clickedAdditionalField","target","matches","disabled","stopPropagation","radioElement","focus","value","getAdditionalField","icCheck","emit","handleKeyDown","preventPropagationElements","document","activeElement","includes","nodeName","handleFormReset","selected","initiallySelected","watchSelectedHandler","icSelectedChange","disconnectedCallback","removeFormResetListener","el","componentWillLoad","isSlotUsed","addFormResetListener","removeDisabledFalse","componentDidLoad","onComponentRequiredPropUndefined","prop","propName","componentWillRender","hasSlot","slotHasContent","componentDidRender","additionalFieldDisplay","additionalField","setAttribute","removeAttribute","additionalFieldValueHandler","detail","stopImmediatePropagation","setFocus","_a","setTabIndex","tabIndex","querySelector","hiddenInput","render","dynamicText","form","groupLabel","label","name","id","isPropDefined","h","Host","onClick","onKeyDown","class","container","tabindex","type","checked","ref","variant","htmlFor","hidden"],"sources":["src/components/ic-radio-option/ic-radio-option.css?tag=ic-radio-option","src/components/ic-radio-option/ic-radio-option.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\nic-radio-option {\n  display: flex;\n  flex-direction: column;\n  width: fit-content;\n}\n\n.additional-field-wrapper ic-text-field {\n  margin-top: calc(var(--ic-space-sm) / 2);\n  margin-left: var(--ic-space-xl);\n}\n\n/* The label turns grey when disabled  */\nic-radio-option.ic-radio-option-disabled {\n  --ic-typography-color: var(--ic-architectural-200);\n}\n\n/* Focus states */\n\n.container input:focus + span.checkmark,\n.container:active input:focus + span.checkmark,\n:host(:focus) .container input:checked + span.checkmark {\n  box-shadow: var(--ic-border-focus);\n}\n\n/* The container */\n.container {\n  display: grid;\n  grid-template-columns: min-content auto;\n  position: relative;\n  cursor: pointer;\n  align-items: center;\n  margin: var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs);\n}\n\n.container.disabled,\n.container.disabled input:disabled {\n  cursor: default;\n}\n\n/* Hide the browser's default radio button */\n.container input {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  display: inline-block;\n  position: absolute;\n  cursor: pointer;\n  height: var(--ic-space-lg);\n  width: var(--ic-space-lg);\n  border-radius: 50%;\n  border: none;\n}\n\n/* Create a custom radio button */\n.checkmark {\n  display: block;\n  position: relative;\n  top: 0;\n  left: 0;\n  height: var(--ic-space-lg);\n  width: var(--ic-space-lg);\n  background-color: var(--ic-architectural-white);\n  border: var(--ic-border-default);\n  border-radius: 50%;\n  transition: var(--ic-easing-transition-fast);\n  box-sizing: border-box;\n}\n\n/* Show the indicator (dot/circle) when checked */\n.container input:checked ~ .checkmark::after {\n  display: inline-block;\n}\n\n/* On mouse-over, add a light blue background color */\n.container:hover input ~ .checkmark {\n  background-color: var(--ic-action-default-bg-hover-no-alpha);\n  box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-hover);\n  border: var(--ic-border-width) solid var(--ic-action-default);\n}\n\n/* When pressed, adds the active colours */\n.container:active input ~ .checkmark {\n  background-color: var(--ic-action-default-bg-active-no-alpha);\n  border: var(--ic-border-width) solid var(--ic-action-default-pressed);\n  box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-active);\n}\n\n/* When pressed, adds the active colours */\n.container:active input:checked ~ .checkmark {\n  background-color: var(--ic-action-default-bg-active);\n  border: 0.125rem solid var(--ic-action-default-pressed);\n  box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-active);\n}\n\n/* When pressed and selected, adds the active colours */\n.container:active input:checked ~ .checkmark::after {\n  background-color: var(--ic-action-default-pressed);\n}\n\n/* When the radio button is checked */\n.container input:checked ~ .checkmark {\n  border: 0.125rem solid var(--ic-action-default);\n}\n\n/* When the radio button is checked and disabled */\n.container input:checked:disabled ~ .checkmark {\n  background-color: var(--ic-architectural-white);\n  border: 0.125rem solid var(--ic-architectural-200);\n}\n\n/* When the radio button is disabled */\n.container input:disabled ~ .checkmark {\n  border: var(--ic-border-width) dashed var(--ic-architectural-200);\n}\n\n/* When the radio button is disabled */\n.container input:disabled ~ .checkmark::after {\n  background: var(--ic-architectural-200);\n}\n\n/* On mouse-over inactive */\n.container:hover input:disabled ~ .checkmark {\n  background-color: var(--ic-architectural-white);\n  box-shadow: none;\n  border: 0.125rem solid none;\n}\n\n.container:active input:disabled ~ .checkmark::after {\n  background-color: var(--ic-architectural-200);\n}\n\n/* Style the indicator (dot/circle) */\n.container .checkmark::after {\n  content: \"\";\n  position: absolute;\n  display: none;\n  top: calc(50% - var(--ic-space-xs));\n  left: calc(50% - var(--ic-space-xs));\n  width: var(--ic-space-md);\n  height: var(--ic-space-md);\n  border-radius: 50%;\n  background: var(--ic-action-default);\n}\n\n.radio-label {\n  margin-left: var(--ic-space-md);\n}\n\n.additional-field-wrapper {\n  margin-left: var(--ic-space-xs);\n}\n\n/* The line */\n.branch-corner {\n  color: var(--ic-action-default);\n  height: var(--ic-space-md);\n  width: var(--ic-space-xl);\n  border-radius: 0 0 0 0.188rem;\n  border-bottom: 0.125rem solid var(--ic-action-default);\n  border-left: 0.125rem solid var(--ic-action-default);\n  margin-left: calc(-1 * var(--ic-space-1px));\n}\n\n/* The dynamic container */\n.dynamic-container {\n  display: flex;\n  position: relative;\n  margin: var(--ic-space-xxxs) 0 var(--ic-space-xxs) var(--ic-space-md);\n  gap: var(--ic-space-xs);\n}\n\n.dynamic-container.hidden {\n  display: none;\n}\n\n.dynamic-text {\n  color: var(--ic-action-default);\n\n  --ic-typography-color: var(--ic-action-default);\n\n  margin-top: calc(var(--ic-space-sm) / 2);\n  margin-bottom: var(--ic-space-xs);\n  border-radius: 2%;\n}\n\n@media (max-width: 576px) {\n  ic-text-field {\n    --input-width: 100%;\n  }\n}\n\n@media (forced-colors: active) {\n  /* Styles here only apply to Forced Colors Mode */\n\n  .container input:checked ~ .checkmark,\n  .container:active input:checked ~ .checkmark {\n    border-color: Highlight;\n  }\n\n  .container input:checked ~ .checkmark::after,\n  .container:active input:checked ~ .checkmark::after {\n    background-color: Highlight;\n  }\n\n  .container input:disabled ~ .checkmark,\n  .container input:checked:disabled ~ .checkmark {\n    border-color: GrayText;\n  }\n\n  .container input:disabled ~ .checkmark::after,\n  .container:active input:disabled ~ .checkmark::after {\n    background-color: GrayText;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  Listen,\n  State,\n  Method,\n  Watch,\n} from \"@stencil/core\";\nimport { IcAdditionalFieldTypes, IcValueEventDetail } from \"../../utils/types\";\nimport {\n  onComponentRequiredPropUndefined,\n  addFormResetListener,\n  removeFormResetListener,\n  removeDisabledFalse,\n  isPropDefined,\n  isSlotUsed,\n  slotHasContent,\n} from \"../../utils/helpers\";\n\nconst ADDITIONAL_FIELD = \"additional-field\";\n\n/**\n * @slot additional-field - Content to displayed alongside a radio option.\n */\n@Component({\n  tag: \"ic-radio-option\",\n  styleUrl: \"ic-radio-option.css\",\n})\nexport class RadioOption {\n  private defaultRadioValue: string = \"\";\n  private hasAdditionalField: boolean = false;\n  private radioElement: HTMLInputElement;\n  private skipFocus = false;\n\n  @Element() el: HTMLIcRadioOptionElement;\n\n  /**\n   * The style of additionalField that will be displayed if used.\n   */\n  @Prop({ reflect: true }) additionalFieldDisplay: IcAdditionalFieldTypes =\n    \"static\";\n\n  /**\n   * If `true`, the disabled state will be set.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * The text to be displayed when dynamic.\n   */\n  @Prop() dynamicText: string = \"This selection requires additional answers\";\n\n  /**\n   * The <form> element to associate the radio with.\n   */\n  @Prop() form?: string;\n\n  /**\n   * The group label for the radio option.\n   */\n  @Prop() groupLabel: string;\n\n  /**\n   * The label for the radio option.\n   */\n  @Prop() label?: string;\n\n  /**\n   * The name for the radio option.\n   */\n  @Prop() name: string;\n\n  /**\n   * The value for the radio option.\n   */\n  @Prop({ mutable: true }) value!: string;\n\n  /**\n   * If `true`, the radio option will be displayed in a selected state.\n   */\n  @Prop({ reflect: true, mutable: true }) selected?: boolean = false;\n  @State() initiallySelected = this.selected;\n\n  @Watch(\"selected\")\n  watchSelectedHandler(): void {\n    this.icSelectedChange.emit();\n  }\n\n  /**\n   * Emitted when the radio option is selected.\n   */\n  @Event() icCheck: EventEmitter<IcValueEventDetail>;\n\n  /**\n   * Emitted when the radio option is selected or deselected.\n   */\n  @Event() icSelectedChange: EventEmitter<void>;\n\n  disconnectedCallback(): void {\n    removeFormResetListener(this.el, this.handleFormReset);\n  }\n\n  componentWillLoad(): void {\n    if (isSlotUsed(this.el, ADDITIONAL_FIELD)) {\n      this.hasAdditionalField = true;\n      this.getAdditionalField();\n    }\n\n    this.defaultRadioValue = this.value;\n\n    addFormResetListener(this.el, this.handleFormReset);\n\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.value, propName: \"value\" }],\n      \"Radio Option\"\n    );\n  }\n\n  componentWillRender(): void {\n    const hasSlot = slotHasContent(this.el, ADDITIONAL_FIELD);\n    if (hasSlot && !this.hasAdditionalField) {\n      this.hasAdditionalField = true;\n      this.getAdditionalField();\n    } else if (!hasSlot && this.hasAdditionalField) {\n      this.hasAdditionalField = false;\n    }\n  }\n\n  componentDidRender(): void {\n    if (this.additionalFieldDisplay === \"static\") {\n      const additionalField = this.getAdditionalField();\n      if (!this.selected || this.disabled) {\n        additionalField?.setAttribute(\"disabled\", \"\");\n      } else {\n        additionalField?.removeAttribute(\"disabled\");\n      }\n    }\n  }\n\n  @Listen(\"icChange\")\n  additionalFieldValueHandler(event: CustomEvent<{ value: string }>): void {\n    if (this.selected) {\n      this.value = event.detail.value || this.defaultRadioValue;\n      this.icCheck.emit({\n        value: this.value,\n      });\n    }\n\n    event.stopImmediatePropagation();\n  }\n\n  /**\n   * Sets focus on the radio option.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.radioElement?.focus();\n  }\n\n  /**\n   * @internal Sets the tabIndex of the radio option.\n   */\n  @Method()\n  async setTabIndex(value: number): Promise<void> {\n    this.radioElement.tabIndex = value;\n  }\n\n  private getAdditionalField(): HTMLIcTextFieldElement {\n    const additionalField = this.el.querySelector(\n      '[slot=\"additional-field\"]'\n    ) as HTMLIcTextFieldElement;\n    if (additionalField) additionalField.hiddenInput = false;\n    return additionalField;\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    const clickedAdditionalField = (event.target as Element).matches(\n      \".dynamic-container, .dynamic-container *\"\n    );\n\n    if (!this.disabled && !clickedAdditionalField) {\n      event.stopPropagation();\n      if (this.skipFocus === false) {\n        this.radioElement.focus();\n      }\n      this.skipFocus = false;\n\n      if (this.hasAdditionalField) {\n        this.value = this.getAdditionalField().value || this.defaultRadioValue;\n      }\n\n      this.icCheck.emit({\n        value: this.value,\n      });\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    const preventPropagationElements = [\"IC-DATE-INPUT\", \"IC-DATE-PICKER\"];\n\n    if (\n      this.getAdditionalField() == document.activeElement &&\n      preventPropagationElements.includes(this.getAdditionalField().nodeName)\n    ) {\n      event.stopPropagation();\n    }\n  };\n\n  private handleFormReset = (): void => {\n    this.skipFocus = true;\n    this.selected = this.initiallySelected;\n  };\n\n  render() {\n    const {\n      additionalFieldDisplay,\n      disabled,\n      dynamicText,\n      form,\n      groupLabel,\n      handleClick,\n      handleKeyDown,\n      hasAdditionalField,\n      label,\n      name,\n      selected,\n      value,\n    } = this;\n\n    const id = `ic-radio-option-${isPropDefined(label) || value}-${groupLabel}`;\n\n    return (\n      <Host\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n        class={{ [\"ic-radio-option-disabled\"]: disabled }}\n      >\n        <div class={{ container: true, disabled }}>\n          <div>\n            <input\n              tabindex={selected ? \"0\" : \"-1\"}\n              type=\"radio\"\n              name={name}\n              id={id}\n              value={value}\n              disabled={disabled ? true : null}\n              checked={selected}\n              ref={(el) => (this.radioElement = el)}\n              form={form}\n            ></input>\n            <span class=\"checkmark\"></span>\n          </div>\n          <ic-typography class=\"radio-label\" variant=\"body\">\n            <label htmlFor={id}>{label}</label>\n          </ic-typography>\n        </div>\n\n        {hasAdditionalField && (\n          <div\n            class={{\n              \"dynamic-container\": true,\n              hidden: additionalFieldDisplay === \"dynamic\" && !selected,\n            }}\n          >\n            {additionalFieldDisplay === \"dynamic\" && (\n              <div class=\"branch-corner\"></div>\n            )}\n            <div>\n              {additionalFieldDisplay === \"dynamic\" && (\n                <ic-typography variant=\"caption\">\n                  <p class=\"dynamic-text\">{dynamicText}</p>\n                </ic-typography>\n              )}\n              <div\n                class={{\n                  \"additional-field-wrapper\":\n                    additionalFieldDisplay === \"static\",\n                }}\n              >\n                <slot name={ADDITIONAL_FIELD}></slot>\n              </div>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

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

@@ -1 +0,0 @@
-{"version":3,"names":["icClassificationBannerCss","classificationText","default","official","secret","ClassificationBanner","render","inline","upTo","this","country","additionalSelectors","classification","h","Host","class","variant"],"sources":["src/components/ic-classification-banner/ic-classification-banner.css?tag=ic-classification-banner&encapsulation=shadow","src/components/ic-classification-banner/ic-classification-banner.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/**\n * @prop --ic-z-index-classification-banner: z-index of classification banner\n */\n\n:host {\n  position: fixed;\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  height: var(--ic-space-lg);\n  z-index: var(--ic-z-index-classification-banner);\n\n  --ic-typography-color: currentcolor;\n\n  /* classification official */\n  --ic-color-classification-official: var(--ic-color-classification-blue);\n  --ic-color-classification-official-foreground: #fff;\n\n  /* classification secret */\n  --ic-color-classification-secret: var(--ic-color-classification-yellow);\n  --ic-color-classification-secret-foreground: #000;\n\n  /* classification top secret */\n  --ic-color-classification-top-secret: var(--ic-color-classification-red);\n  --ic-color-classification-top-secret-foreground: #fff;\n\n  /* classification not set */\n  --ic-color-classification-not-set: var(--ic-color-classification-grey);\n  --ic-color-classification-not-set-foreground: #fff;\n}\n\n:host(.ic-classification-banner-inline) {\n  position: static;\n  left: auto;\n  bottom: auto;\n}\n\n.classification-banner {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  padding: var(--ic-space-xxxs) var(--ic-space-md);\n}\n\n.default {\n  background-color: var(--ic-color-classification-not-set);\n  color: var(--ic-color-classification-not-set-foreground);\n}\n\n.official,\n.official-sensitive {\n  background-color: var(--ic-color-classification-official);\n  color: var(--ic-color-classification-official-foreground);\n}\n\n.secret {\n  background-color: var(--ic-color-classification-secret);\n  color: var(--ic-color-classification-secret-foreground);\n}\n\n.top-secret {\n  background-color: var(--ic-color-classification-top-secret);\n  color: var(--ic-color-classification-top-secret-foreground);\n}\n\n.offscreen {\n  position: absolute;\n  left: -9999px;\n  background-color: #fff;\n  color: #000;\n  text-transform: none;\n}\n\n@media (forced-colors: active) {\n  .classification-banner {\n    border: var(--ic-border-hc);\n  }\n}\n","import { Component, Prop, h, Host } from \"@stencil/core\";\nimport { IcProtectiveMarkings } from \"./ic-classification-banner.types\";\n\nconst classificationText = {\n  default: \"protective marking not set\",\n  official: \"official\",\n  \"official-sensitive\": \"official sensitive\",\n  secret: \"secret\",\n  \"top-secret\": \"top secret\",\n};\n\n@Component({\n  tag: \"ic-classification-banner\",\n  styleUrl: \"ic-classification-banner.css\",\n  shadow: true,\n})\nexport class ClassificationBanner {\n  /**\n   * The additional information that will be displayed after the classification.\n   */\n  @Prop() additionalSelectors?: string = \"\";\n  /**\n   * The classification level to be displayed - also determines the banner and text colour.\n   */\n  @Prop() classification?: IcProtectiveMarkings = \"default\";\n  /**\n   * The optional text that will be displayed before classification to specify relevant country/countries.\n   */\n  @Prop() country?: string = \"uk\";\n  /**\n   * If `true`, the banner will appear inline with the page, instead of sticking to the bottom of the page.\n   */\n  @Prop() inline?: boolean = false;\n  /**\n   * If `true`, \"Up to\" will be displayed before the classification and country.\n   */\n  @Prop() upTo?: boolean = false;\n\n  render() {\n    const { inline, upTo } = this;\n\n    // In case of unrecognized props, fallback to default\n    let { country, additionalSelectors, classification } = this;\n    if (!country) country = \"\";\n    if (!additionalSelectors) additionalSelectors = \"\";\n    if (\n      !classification ||\n      (classification && !classificationText[classification])\n    )\n      classification = \"default\";\n\n    return (\n      <Host class={{ [\"ic-classification-banner-inline\"]: inline }}>\n        <banner\n          aria-label=\"Protective marking\"\n          class={{\n            [\"classification-banner\"]: true,\n            [`${classification}`]: classification,\n          }}\n        >\n          {classification !== \"default\" ? (\n            <span class=\"offscreen\">\n              The protective marking of this page is:{\" \"}\n            </span>\n          ) : null}\n          <ic-typography variant=\"caption-uppercase\">\n            {classification === \"default\"\n              ? classificationText[classification]\n              : `${upTo ? \"up to\" : \"\"} \n               ${country} \n               ${classificationText[classification]} \n               ${additionalSelectors}`}\n          </ic-typography>\n        </banner>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAA4B,y3HCGlC,MAAMC,EAAqB,CACzBC,QAAS,6BACTC,SAAU,WACV,qBAAsB,qBACtBC,OAAQ,SACR,aAAc,c,MAQHC,EAAoB,M,kDAIQ,G,oBAIS,U,aAIrB,K,YAIA,M,UAIF,K,CAEzB,MAAAC,GACE,MAAMC,OAAEA,EAAMC,KAAEA,GAASC,KAGzB,IAAIC,QAAEA,EAAOC,oBAAEA,EAAmBC,eAAEA,GAAmBH,KACvD,IAAKC,EAASA,EAAU,GACxB,IAAKC,EAAqBA,EAAsB,GAChD,IACGC,GACAA,IAAmBX,EAAmBW,GAEvCA,EAAiB,UAEnB,OACEC,EAACC,EAAI,CAACC,MAAO,CAAE,CAAC,mCAAoCR,IAClDM,EAAA,uBACa,qBACXE,MAAO,CACL,CAAC,yBAA0B,KAC3B,CAAC,GAAGH,KAAmBA,IAGxBA,IAAmB,UAClBC,EAAA,QAAME,MAAM,aAAW,0CACmB,KAExC,KACJF,EAAA,iBAAeG,QAAQ,qBACpBJ,IAAmB,UAChBX,EAAmBW,GACnB,GAAGJ,EAAO,QAAU,uBACnBE,sBACAT,EAAmBW,uBACnBD,M"}

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

@@ -1,2 +0,0 @@
-import{r as e,c as t,h as o,H as i,g as r}from"./p-6b5e91e2.js";import{e as n,t as a,g as s,f as c,i as l,u as d,I as p}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;--footer-compliance-padding:1rem 0}:host(.ic-footer-sparse){--footer-links-padding:1.5rem 0;--footer-logo-margin-bottom:calc(var(--ic-space-md) + var(--ic-space-xxs));--footer-link-inner-flex-direction:row}:host(.ic-footer-small){--footer-links-padding:0 0;--footer-logo-margin-bottom:var(--ic-space-md);--footer-link-inner-flex-direction:column}:host(.ic-footer-foreground-light){--footer-theme-secondary:var(--ic-theme-secondary);--footer-theme-tertiary:var(--ic-theme-tertiary);--footer-keyline:var(--ic-border-keyline-lighten)}:host(.ic-footer-foreground-dark){--footer-theme-secondary:var(--ic-theme-secondary-light);--footer-theme-tertiary:var(--ic-theme-tertiary-light);--footer-keyline:var(--ic-border-keyline-darken)}:host(.ic-footer-small.ic-footer-ungrouped){--footer-links-padding:var(--ic-space-md) 0 0 0}footer{display:flex;flex-direction:column;width:100%}.footer-description{background-color:var(--footer-theme-secondary);color:var(--ic-theme-text);--ic-typography-color:var(--ic-theme-text);border-bottom:var(--footer-keyline)}.footer-description-inner{padding:1rem 0}.footer-links{padding:var(--footer-links-padding);background-color:var(--footer-theme-secondary);color:var(--ic-theme-text);--ic-typography-color:var(--ic-theme-text)}.footer-links-inner{display:flex;flex-direction:var(--footer-link-inner-flex-direction)}.footer-compliance{background-color:var(--footer-theme-tertiary);color:var(--ic-theme-text);--ic-typography-color:var(--ic-theme-text)}.footer-compliance-inner{padding:var(--footer-compliance-padding)}.footer-logo{margin-bottom:var(--footer-logo-margin-bottom);display:flex;gap:var(--ic-space-xxl)}.footer-logo>::slotted(){margin-right:var(--ic-space-md)}.footer-caption{margin-bottom:var(--ic-space-md)}.classification-spacing{margin-bottom:var(--ic-space-lg)}@media (forced-colors: active){footer{border-top:var(--ic-border-hc)}}';const f=class{constructor(o){e(this,o);this.footerResized=t(this,"footerResized",7);this.resizeObserver=null;this.resizeObserverCallback=e=>{if(e!==this.deviceSize){this.deviceSize=e}this.footerResized.emit()};this.runResizeObserver=()=>{this.resizeObserver=new ResizeObserver((()=>{const e=n();this.resizeObserverCallback(e)}));this.resizeObserver.observe(this.footerEl)};this.deviceSize=a.XL;this.foregroundColor=s();this.aligned="left";this.breakpoint="medium";this.caption=undefined;this.copyright=true;this.description=undefined;this.groupLinks=false}disconnectedCallback(){if(this.resizeObserver!==null){this.resizeObserver.disconnect()}}componentWillLoad(){this.deviceSize=n()}componentDidLoad(){c(this.runResizeObserver)}themeChangeHandler(e){const t=e.detail;this.foregroundColor=t.mode}isSmall(){const e=this.breakpoint;return e==="extra small"?this.deviceSize<a.XS:e==="small"?this.deviceSize<a.S:e==="medium"?this.deviceSize<a.M:e==="large"?this.deviceSize<a.L:e==="extra large"?this.deviceSize<a.XL:false}render(){const{aligned:e,caption:t,copyright:r,description:n,groupLinks:s,foregroundColor:c}=this;const m=this.isSmall();return o(i,{class:{["ic-footer"]:true,[`ic-footer-${m?"small":"sparse"}`]:true,[`ic-footer-${s?"grouped":"ungrouped"}`]:true,[`ic-footer-foreground-${c}`]:true,[`ic-footer-${p.Dark}`]:c===p.Dark,[`ic-footer-${p.Light}`]:c===p.Light}},o("footer",{ref:e=>this.footerEl=e},(l(this.el,"description")||n)&&o("div",{class:"footer-description"},o("ic-section-container",{aligned:e,fullHeight:true},o("div",{class:"footer-description-inner"},o("ic-typography",{variant:"body"},o("slot",{name:"description"},n))))),l(this.el,"link")&&o("div",{class:"footer-links"},s&&m?o("div",{class:"footer-links-inner",role:"list"},o("slot",{name:"link"})):o("ic-section-container",{fullHeight:true,aligned:e},o("div",{class:"footer-links-inner",role:"list"},o("slot",{name:"link"})))),o("div",{class:"footer-compliance"},o("ic-section-container",{aligned:e,fullHeight:true},o("div",{class:"footer-compliance-inner"},l(this.el,"logo")&&o("div",{class:"footer-logo"},o("slot",{name:"logo"})),(l(this.el,"caption")||t)&&o("div",{class:"footer-caption"},o("ic-typography",{variant:this.deviceSize<=a.M?"caption":"body"},o("slot",{name:"caption"},t))),r&&o("div",{class:{["footer-copyright"]:true,["classification-spacing"]:d()}},o("ic-typography",{variant:this.deviceSize<=a.M?"caption-uppercase":"label-uppercase"},"© Crown Copyright")))))))}get el(){return r(this)}};f.style=m;export{f as ic_footer};
-//# sourceMappingURL=p-b17c94b7.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["icFooterCss","Footer","this","resizeObserver","resizeObserverCallback","currSize","deviceSize","footerResized","emit","runResizeObserver","ResizeObserver","getCurrentDeviceSize","observe","footerEl","IC_DEVICE_SIZES","XL","getThemeForegroundColor","disconnectedCallback","disconnect","componentWillLoad","componentDidLoad","checkResizeObserver","themeChangeHandler","ev","theme","detail","foregroundColor","mode","isSmall","bp","breakpoint","XS","S","M","L","render","aligned","caption","copyright","description","groupLinks","small","h","Host","class","IcThemeForegroundEnum","Dark","Light","ref","isSlotUsed","el","fullHeight","variant","name","role","hasClassificationBanner"],"sources":["src/components/ic-footer/ic-footer.css?tag=ic-footer&encapsulation=shadow","src/components/ic-footer/ic-footer.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: block;\n\n  --footer-compliance-padding: 1rem 0;\n}\n\n:host(.ic-footer-sparse) {\n  --footer-links-padding: 1.5rem 0;\n  --footer-logo-margin-bottom: calc(var(--ic-space-md) + var(--ic-space-xxs));\n  --footer-link-inner-flex-direction: row;\n}\n\n:host(.ic-footer-small) {\n  --footer-links-padding: 0 0;\n  --footer-logo-margin-bottom: var(--ic-space-md);\n  --footer-link-inner-flex-direction: column;\n}\n\n:host(.ic-footer-foreground-light) {\n  --footer-theme-secondary: var(--ic-theme-secondary);\n  --footer-theme-tertiary: var(--ic-theme-tertiary);\n  --footer-keyline: var(--ic-border-keyline-lighten);\n}\n\n:host(.ic-footer-foreground-dark) {\n  --footer-theme-secondary: var(--ic-theme-secondary-light);\n  --footer-theme-tertiary: var(--ic-theme-tertiary-light);\n  --footer-keyline: var(--ic-border-keyline-darken);\n}\n\n:host(.ic-footer-small.ic-footer-ungrouped) {\n  --footer-links-padding: var(--ic-space-md) 0 0 0;\n}\n\n/* Main inner footer element */\nfooter {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n\n/* Description */\n\n.footer-description {\n  background-color: var(--footer-theme-secondary);\n  color: var(--ic-theme-text);\n\n  --ic-typography-color: var(--ic-theme-text);\n\n  border-bottom: var(--footer-keyline);\n}\n\n.footer-description-inner {\n  padding: 1rem 0;\n}\n\n/* Links */\n\n.footer-links {\n  padding: var(--footer-links-padding);\n  background-color: var(--footer-theme-secondary);\n  color: var(--ic-theme-text);\n\n  --ic-typography-color: var(--ic-theme-text);\n}\n\n.footer-links-inner {\n  display: flex;\n  flex-direction: var(--footer-link-inner-flex-direction);\n}\n\n/* Compliance */\n\n.footer-compliance {\n  background-color: var(--footer-theme-tertiary);\n  color: var(--ic-theme-text);\n\n  --ic-typography-color: var(--ic-theme-text);\n}\n\n.footer-compliance-inner {\n  padding: var(--footer-compliance-padding);\n}\n\n.footer-logo {\n  margin-bottom: var(--footer-logo-margin-bottom);\n  display: flex;\n  gap: var(--ic-space-xxl);\n}\n\n.footer-logo > ::slotted() {\n  margin-right: var(--ic-space-md);\n}\n\n.footer-caption {\n  margin-bottom: var(--ic-space-md);\n}\n\n.classification-spacing {\n  margin-bottom: var(--ic-space-lg);\n}\n\n@media (forced-colors: active) {\n  footer {\n    border-top: var(--ic-border-hc);\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Prop,\n  State,\n  h,\n  Host,\n  Listen,\n} from \"@stencil/core\";\nimport { IC_DEVICE_SIZES } from \"../../utils/constants\";\nimport {\n  getCurrentDeviceSize,\n  getThemeForegroundColor,\n  checkResizeObserver,\n  hasClassificationBanner,\n  isSlotUsed,\n} from \"../../utils/helpers\";\nimport {\n  IcAlignment,\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport { IcFooterBreakpoints } from \"./ic-footer.types\";\n\n/**\n * @slot description - Content will be rendered at the top of the footer.\n * @slot link - Content will be rendered between description and logos.\n * @slot logo - Content will be rendered underneath footer links.\n * @slot caption - Content will be rendered above Crown Copyright.\n */\n\n@Component({\n  tag: \"ic-footer\",\n  styleUrl: \"ic-footer.css\",\n  shadow: true,\n})\nexport class Footer {\n  private footerEl: HTMLElement;\n  private resizeObserver: ResizeObserver = null;\n\n  @Element() el: HTMLIcFooterElement;\n\n  @State() deviceSize: number = IC_DEVICE_SIZES.XL;\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n\n  /**\n   * The alignment of the section containers used within the footer.\n   */\n  @Prop() aligned?: IcAlignment = \"left\";\n\n  /**\n   * The screen size breakpoint at which to switch to the small layout.\n   */\n  @Prop() breakpoint?: IcFooterBreakpoints = \"medium\";\n\n  /**\n   * The caption displayed at the bottom of the footer.\n   */\n  @Prop() caption: string;\n\n  /**\n   * If `true`, the footer will display the crown copyright at the bottom.\n   */\n  @Prop() copyright: boolean = true;\n\n  /**\n   * The description displayed at the top of the footer.\n   */\n  @Prop() description: string;\n\n  /**\n   * If `true`, the footer will be set up to handle link groups instead of standalone links.\n   */\n  @Prop() groupLinks?: boolean = false;\n\n  /**\n   *  @internal Triggers on page resize and triggers style changes in footer links and link groups\n   */\n  @Event() footerResized: EventEmitter<void>;\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  componentWillLoad(): void {\n    this.deviceSize = getCurrentDeviceSize();\n  }\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.foregroundColor = theme.mode;\n  }\n\n  private isSmall() {\n    const bp = this.breakpoint;\n\n    return bp === \"extra small\"\n      ? this.deviceSize < IC_DEVICE_SIZES.XS\n      : bp === \"small\"\n      ? this.deviceSize < IC_DEVICE_SIZES.S\n      : bp === \"medium\"\n      ? this.deviceSize < IC_DEVICE_SIZES.M\n      : bp === \"large\"\n      ? this.deviceSize < IC_DEVICE_SIZES.L\n      : bp === \"extra large\"\n      ? this.deviceSize < IC_DEVICE_SIZES.XL\n      : false;\n  }\n\n  private resizeObserverCallback = (currSize: number) => {\n    if (currSize !== this.deviceSize) {\n      this.deviceSize = currSize;\n    }\n    this.footerResized.emit();\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      const currSize = getCurrentDeviceSize();\n      this.resizeObserverCallback(currSize);\n    });\n\n    this.resizeObserver.observe(this.footerEl);\n  };\n\n  render() {\n    const {\n      aligned,\n      caption,\n      copyright,\n      description,\n      groupLinks,\n      foregroundColor,\n    } = this;\n    const small = this.isSmall();\n\n    return (\n      <Host\n        class={{\n          [\"ic-footer\"]: true,\n          [`ic-footer-${small ? \"small\" : \"sparse\"}`]: true,\n          [`ic-footer-${groupLinks ? \"grouped\" : \"ungrouped\"}`]: true,\n          [`ic-footer-foreground-${foregroundColor}`]: true,\n          // Slots will be able to infer their own color\n          [`ic-footer-${IcThemeForegroundEnum.Dark}`]:\n            foregroundColor === IcThemeForegroundEnum.Dark,\n          [`ic-footer-${IcThemeForegroundEnum.Light}`]:\n            foregroundColor === IcThemeForegroundEnum.Light,\n        }}\n      >\n        <footer ref={(footerEl) => (this.footerEl = footerEl)}>\n          {/* Description */}\n          {(isSlotUsed(this.el, \"description\") || description) && (\n            <div class=\"footer-description\">\n              <ic-section-container aligned={aligned} fullHeight={true}>\n                <div class=\"footer-description-inner\">\n                  <ic-typography variant=\"body\">\n                    <slot name=\"description\">{description}</slot>\n                  </ic-typography>\n                </div>\n              </ic-section-container>\n            </div>\n          )}\n\n          {/* Links */}\n          {isSlotUsed(this.el, \"link\") && (\n            <div class=\"footer-links\">\n              {groupLinks && small ? (\n                <div class=\"footer-links-inner\" role=\"list\">\n                  <slot name=\"link\" />\n                </div>\n              ) : (\n                <ic-section-container fullHeight aligned={aligned}>\n                  <div class=\"footer-links-inner\" role=\"list\">\n                    <slot name=\"link\" />\n                  </div>\n                </ic-section-container>\n              )}\n            </div>\n          )}\n\n          {/* Compliance (logo, caption, copyright) */}\n          <div class=\"footer-compliance\">\n            <ic-section-container aligned={aligned} fullHeight={true}>\n              <div class=\"footer-compliance-inner\">\n                {isSlotUsed(this.el, \"logo\") && (\n                  <div class=\"footer-logo\">\n                    {/* Logo */}\n                    <slot name=\"logo\" />\n                  </div>\n                )}\n                {(isSlotUsed(this.el, \"caption\") || caption) && (\n                  <div class=\"footer-caption\">\n                    <ic-typography\n                      variant={\n                        this.deviceSize <= IC_DEVICE_SIZES.M\n                          ? \"caption\"\n                          : \"body\"\n                      }\n                    >\n                      <slot name=\"caption\">{caption}</slot>\n                    </ic-typography>\n                  </div>\n                )}\n                {copyright && (\n                  <div\n                    class={{\n                      [\"footer-copyright\"]: true,\n                      [\"classification-spacing\"]: hasClassificationBanner(),\n                    }}\n                  >\n                    <ic-typography\n                      variant={\n                        this.deviceSize <= IC_DEVICE_SIZES.M\n                          ? \"caption-uppercase\"\n                          : \"label-uppercase\"\n                      }\n                    >\n                      &copy; Crown Copyright\n                    </ic-typography>\n                  </div>\n                )}\n              </div>\n            </ic-section-container>\n          </div>\n        </footer>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

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

@@ -1 +0,0 @@
-{"version":3,"names":["icMenuItemCss","MenuItem","this","handleClick","e","isPropDefined","submenuTriggerFor","triggerPopoverMenuInstance","emit","variant","preventDefault","toggleChecked","handleMenuItemClick","label","hasSubMenu","el","getMenuItemAriaLabel","ariaLabel","description","keyboardShortcut","classList","contains","parentEl","parentElement","tagName","componentWillLoad","removeDisabledFalse","disabled","componentDidLoad","onComponentRequiredPropUndefined","prop","propName","handleHostClick","stopImmediatePropagation","render","MenuItemInformation","h","class","Host","role","undefined","fullWidth","onClick","href","hreflang","target","rel","referrerpolicy","ariaControlsId","ariaOwnsId","isSlotUsed","name","innerHTML","Check","Chevron"],"sources":["src/components/ic-menu-item/ic-menu-item.css?tag=ic-menu-item&encapsulation=shadow","src/components/ic-menu-item/ic-menu-item.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\nli {\n  list-style: none;\n  padding: 0;\n}\n\n:host ::part(button) {\n  color: var(--ic-popover-menu-item-check);\n  padding: calc(var(--ic-space-xxxs) / 2);\n  display: flex;\n  align-items: flex-start;\n  gap: var(--ic-space-xs);\n  border-radius: 0;\n  min-height: 2.5rem;\n  height: auto;\n}\n\n.focus-border {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--ic-space-xs);\n  border-radius: var(--ic-border-radius);\n  margin: calc(var(--ic-space-xxxs) / 2);\n  padding: var(--ic-space-xxs);\n  border: var(--ic-space-xxxs) dashed transparent;\n\n  --icon-height: auto;\n}\n\n:host(.ic-menu-item-disabled) ::part(button) {\n  color: var(--ic-popover-menu-item-check-disabled) !important;\n\n  --ic-typography-color: var(--ic-popover-menu-item-check-disabled) !important;\n\n  pointer-events: none;\n}\n\n:host(.ic-menu-item-disabled) .menu-item-label,\n:host(.ic-menu-item-disabled) .shortcut,\n:host(.ic-menu-item-disabled) .menu-item-description {\n  --ic-typography-color: var(--ic-popover-menu-item-label-disabled) !important;\n}\n\n:host([variant=\"destructive\"]) ::part(button) {\n  color: var(--ic-popover-menu-destructive-item-icon);\n\n  --ic-typography-color: var(--ic-popover-menu-destructive-item-label);\n}\n\n:host ::part(button):hover {\n  background-color: var(--ic-popover-background-hover);\n}\n\n:host ::part(button):focus-visible,\n:host ::part(button):focus {\n  color: var(--ic-popover-menu-item-icon-focused);\n\n  --ic-typography-color: purple;\n\n  background-color: var(--ic-popover-background-focus);\n  box-shadow: none;\n}\n\n:host(.ic-menu-item-disabled) ::part(button):focus-visible,\n:host(.ic-menu-item-disabled) ::part(button):focus {\n  color: var(--ic-popover-menu-item-icon-disabled) !important;\n\n  --ic-typography-color: orange !important;\n}\n\n:host([variant=\"destructive\"]) ::part(button):focus-visible,\n:host([variant=\"destructive\"]) ::part(button):focus {\n  background-color: var(--ic-popover-destructive-background-focus);\n}\n\nic-button:focus-within .menu-item-label,\nic-button:focus-within .shortcut,\nic-button:focus-within .menu-item-description {\n  --ic-typography-color: var(--ic-popover-menu-item-label-focused);\n}\n\n:host(.ic-menu-item-disabled) ic-button:focus-within .focus-border {\n  border-color: var(--ic-popover-menu-border);\n}\n\n:host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-label,\n:host(.ic-menu-item-disabled) ic-button:focus-within .shortcut,\n:host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-description {\n  --ic-typography-color: var(--ic-popover-menu-item-label-disabled) !important;\n}\n\n:host ::part(button):active {\n  background-color: var(--ic-popover-background-pressed);\n  color: var(--ic-popover-menu-item-label) !important;\n\n  --ic-typography-color: var(--ic-popover-menu-item-label) !important;\n}\n\n:host([variant=\"destructive\"]) ::part(button):active {\n  background-color: var(--ic-popover-background-pressed);\n  color: var(--ic-popover-menu-destructive-item-label) !important;\n\n  --ic-typography-color: var(\n    --ic-popover-menu-destructive-item-label\n  ) !important;\n}\n\n.menu-item-info {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  align-items: baseline;\n  white-space: pre-line;\n  text-align: left;\n}\n\n.menu-labels {\n  display: flex;\n  align-items: baseline;\n  gap: var(--ic-space-xs);\n}\n\n.menu-item-description {\n  --ic-typography-color: var(--ic-popover-menu-item-description);\n}\n\n.shortcut {\n  --ic-typography-color: var(--ic-popover-menu-item-shortcut);\n\n  display: flex;\n  flex: min-content;\n}\n\n:host([variant=\"destructive\"]) .menu-item-label {\n  text-transform: uppercase;\n  font-weight: 600;\n  letter-spacing: 0.025em;\n}\n\nic-button:active .menu-item-label {\n  --ic-typography-color: var(--ic-popover-menu-item-label);\n}\n\nic-button:active .menu-item-description {\n  --ic-typography-color: var(--ic-popover-menu-item-description);\n}\n\nic-button:active .shortcut {\n  --ic-typography-color: var(--ic-popover-menu-item-shortcut);\n}\n\n:host([variant=\"destructive\"]) ic-button:active .menu-item-label {\n  --ic-typography-color: var(\n    --ic-popover-menu-destructive-item-label\n  ) !important;\n}\n\n.icon,\n.check-icon,\n.submenu-icon,\n.icon ::slotted(svg),\n.check-icon svg,\n.submenu-icon svg {\n  width: var(--ic-space-lg);\n  height: var(--ic-space-lg);\n}\n\n.check-icon.hide {\n  visibility: hidden;\n}\n\n/** High Contrast **/\n@media (forced-colors: active) {\n  :host ::part(button) {\n    border: canvas;\n  }\n\n  :host ::part(button):focus-visible {\n    outline: var(--ic-space-xxxs) solid transparent;\n  }\n\n  .focus-border {\n    border-color: canvas;\n  }\n\n  :host(.ic-menu-item-disabled) ic-button:focus-within .focus-border {\n    border-color: GrayText;\n  }\n\n  :host(.ic-menu-item-disabled) .menu-item-info,\n  :host(.ic-menu-item-disabled) .menu-item-label,\n  :host(.ic-menu-item-disabled) .shortcut,\n  :host(.ic-menu-item-disabled) .menu-item-description,\n  :host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-info,\n  :host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-label,\n  :host(.ic-menu-item-disabled) ic-button:focus-within .shortcut,\n  :host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-description {\n    --ic-typography-color: GrayText !important;\n  }\n\n  :host(.ic-menu-item-disabled) ::part(button):focus-visible,\n  :host(.ic-menu-item-disabled) ::part(button):focus {\n    outline-color: GrayText !important;\n  }\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  State,\n  Event,\n  EventEmitter,\n  Listen,\n} from \"@stencil/core\";\nimport {\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  removeDisabledFalse,\n  isPropDefined,\n} from \"../../utils/helpers\";\nimport { IcMenuItemVariants } from \"./ic-menu-item.types\";\nimport Check from \"../../assets/check-icon.svg\";\nimport Chevron from \"../../assets/chevron-icon.svg\";\n\n/**\n * @slot icon - Content will be placed to the left of the menu item label.\n */\n\n@Component({\n  tag: \"ic-menu-item\",\n  styleUrl: \"ic-menu-item.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class MenuItem {\n  @Element() el: HTMLIcMenuItemElement;\n\n  @State() toggleChecked: boolean = false;\n\n  /**\n   * The description displayed in the menu item, below the label.\n   */\n  @Prop() description?: string;\n\n  /**\n   * If `true`, the menu item will be in disabled state.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * The URL that the link points to. This will render the menu item as an \"a\" tag.\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 describing the keyboard shortcut for a menu item's action.\n   */\n  @Prop() keyboardShortcut?: string;\n\n  /**\n   * The label to display in the menu item.\n   */\n  @Prop() label!: 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   * This references the popover menu instance that the menu item is a trigger for. If this prop is set, then the variant will always be default.\n   */\n  @Prop() submenuTriggerFor?: 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   * The variant of the menu item.\n   */\n  @Prop({ mutable: true, reflect: true }) variant: IcMenuItemVariants =\n    \"default\";\n\n  /**\n   * @internal Emitted when item loses focus.\n   */\n  @Event() childBlur: EventEmitter<void>;\n\n  /**\n   * @internal Emitted when the user clicks a menu item.\n   */\n  @Event() handleMenuItemClick: EventEmitter<{\n    label: string;\n    hasSubMenu: boolean;\n  }>;\n\n  /**\n   * @internal Emitted when the user clicks a menu item that triggers a popover menu instance.\n   */\n  @Event() triggerPopoverMenuInstance: EventEmitter<void>;\n\n  componentWillLoad(): void {\n    // This ensures that trigger menu items are always set to the default variant\n    if (isPropDefined(this.submenuTriggerFor) && this.variant !== \"default\") {\n      this.variant = \"default\";\n    }\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Menu Item\"\n    );\n  }\n\n  @Listen(\"click\", { capture: true })\n  handleHostClick(e: Event): void {\n    if (this.disabled) {\n      e.stopImmediatePropagation();\n    }\n  }\n\n  private handleClick = (e: Event): void => {\n    if (isPropDefined(this.submenuTriggerFor)) {\n      this.triggerPopoverMenuInstance.emit();\n    } else if (this.variant === \"toggle\") {\n      e.preventDefault();\n      this.toggleChecked = !this.toggleChecked;\n    }\n    this.handleMenuItemClick.emit({\n      label: this.label,\n      hasSubMenu: !!this.el.submenuTriggerFor,\n    });\n  };\n\n  private getMenuItemAriaLabel = (): string => {\n    let ariaLabel = this.label;\n\n    if (isPropDefined(this.description)) {\n      ariaLabel = `${ariaLabel}, ${this.description}`;\n    }\n\n    if (isPropDefined(this.keyboardShortcut)) {\n      ariaLabel = `${ariaLabel}, ${this.keyboardShortcut}`;\n    }\n\n    if (this.variant === \"destructive\") {\n      ariaLabel = `${ariaLabel}, destructive`;\n    }\n\n    if (isPropDefined(this.submenuTriggerFor)) {\n      ariaLabel = `${ariaLabel}, triggers submenu`;\n    }\n\n    if (this.el.classList.contains(\"ic-popover-submenu-back-button\")) {\n      ariaLabel = \"Go back to parent menu\";\n    }\n    const parentEl = this.el.parentElement;\n\n    if (\n      parentEl.tagName === \"IC-MENU-GROUP\" &&\n      (parentEl as HTMLIcMenuGroupElement).label\n    ) {\n      return `${ariaLabel}, ${\n        (parentEl as HTMLIcMenuGroupElement).label\n      } menu group`;\n    } else {\n      return ariaLabel;\n    }\n  };\n\n  render() {\n    // A sub-component to layout the menu information correctly in ic-button\n    const MenuItemInformation = () => {\n      return (\n        <div class=\"menu-item-info\">\n          <div class=\"menu-labels\">\n            <ic-typography class=\"menu-item-label\">{this.label}</ic-typography>\n            {this.keyboardShortcut && (\n              <ic-typography variant=\"caption\" class=\"shortcut\">\n                {this.keyboardShortcut}\n              </ic-typography>\n            )}\n          </div>\n          {this.description && (\n            <ic-typography class=\"menu-item-description\" variant=\"caption\">\n              {this.description}\n            </ic-typography>\n          )}\n        </div>\n      );\n    };\n\n    return (\n      <Host\n        class={{\n          [\"ic-menu-item-disabled\"]: this.disabled,\n        }}\n      >\n        <li\n          role={this.variant === \"toggle\" ? \"menuitemcheckbox\" : \"menuitem\"}\n          aria-disabled={`${this.disabled}`}\n          aria-checked={\n            this.variant === \"toggle\" ? this.toggleChecked : undefined\n          }\n        >\n          <ic-button\n            fullWidth\n            variant=\"tertiary\"\n            onClick={this.handleClick}\n            href={isPropDefined(this.href)}\n            hreflang={isPropDefined(this.hreflang)}\n            target={isPropDefined(this.target)}\n            rel={isPropDefined(this.rel)}\n            referrerpolicy={\n              this.referrerpolicy !== undefined ? this.referrerpolicy : null\n            }\n            aria-disabled={`${this.disabled}`}\n            aria-label={this.getMenuItemAriaLabel()}\n            ariaControlsId={\n              isPropDefined(this.submenuTriggerFor)\n                ? `ic-popover-submenu-${this.submenuTriggerFor}`\n                : false\n            }\n            aria-haspopup={\n              isPropDefined(this.submenuTriggerFor) ||\n              this.el.classList.contains(\"ic-popover-submenu-back-button\")\n                ? \"menu\"\n                : false\n            }\n            ariaOwnsId={\n              isPropDefined(this.submenuTriggerFor)\n                ? `ic-popover-submenu-${this.submenuTriggerFor}`\n                : false\n            }\n          >\n            <div class=\"focus-border\">\n              {isSlotUsed(this.el, \"icon\") && (\n                <span class=\"icon\">\n                  <slot name=\"icon\"></slot>\n                </span>\n              )}\n              <MenuItemInformation />\n              {this.variant === \"toggle\" && (\n                <span\n                  class={{\n                    [\"check-icon\"]: true,\n                    [\"hide\"]: !this.toggleChecked,\n                  }}\n                  aria-hidden=\"true\"\n                  innerHTML={Check}\n                />\n              )}\n              {isPropDefined(this.submenuTriggerFor) && (\n                <span\n                  class={{ [\"submenu-icon\"]: true }}\n                  aria-hidden=\"true\"\n                  innerHTML={Chevron}\n                />\n              )}\n            </div>\n          </ic-button>\n        </li>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

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

@@ -1,2 +0,0 @@
-import{r as t,h as e,H as i,g as o}from"./p-6b5e91e2.js";import{i as a}from"./p-b7eb8ef9.js";const n='/*! 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}.label-container{padding:var(--ic-space-xs);display:flex;justify-content:space-between;align-items:center}:host(.ic-accordion-group-small) .label-container{padding:var(--ic-space-xxs) var(--ic-space-xs)}:host(.ic-accordion-group-large) .label-container{padding:var(--ic-space-sm) var(--ic-space-xs)}:host(.ic-accordion-group-light){color:var(--ic-color-white-text);--ic-typography-color:var(--ic-color-white-text)}:host(.ic-accordion-group.ic-accordion-group-dark) ::slotted(ic-accordion){color:var(--ic-color-white-text);--ic-typography-color:var(--ic-color-white-text)}';let s=0;const r=class{constructor(e){t(this,e);this.accordionGroupId=`ic-accordion-group-${s++}`;this.handleExpanded=()=>{if(this.areAllAccordionsOpen){this.expanded=false;this.accordions.forEach((t=>{t.expanded=this.expanded}))}else{this.expanded=true;this.accordions.forEach((t=>{t.expanded=this.expanded}))}this.setExpandedToAreAllAccordionsOpen()};this.linkAccordions=()=>{this.accordions.forEach((t=>{t.setAttribute("context-id",this.accordionGroupId)}))};this.setExpandedToAreAllAccordionsOpen=()=>{this.areAllAccordionsOpen=this.accordions.every((t=>!!t.expanded))};this.accordionOpenBtnText=()=>!this.areAllAccordionsOpen?"See all":"Hide all";this.accordions=undefined;this.areAllAccordionsOpen=undefined;this.accessibleButtonLabel="accordions";this.appearance="default";this.expanded=false;this.label="";this.singleExpansion=false;this.size="medium"}watchAppearanceHandler(){this.accordions.forEach((t=>{t.appearance=this.appearance}))}watchExpandedHandler(){this.handleExpanded()}componentDidLoad(){const t=this.el.children;this.accordions=Array.from(t).filter((t=>t.tagName==="IC-ACCORDION"));this.linkAccordions();this.accordions.forEach((t=>{t.appearance=this.appearance}));this.accordions.forEach((t=>{t.size=this.size}));if(this.expanded){this.accordions.forEach((t=>{t.expanded=true}));this.setExpandedToAreAllAccordionsOpen()}else{this.setExpandedToAreAllAccordionsOpen();this.expanded=this.areAllAccordionsOpen}}handleAccordionClicked(t){if(!this.singleExpansion){this.setExpandedToAreAllAccordionsOpen()}else{this.accordions.forEach((e=>{if(e.expanded&&t.detail.id!==e.id){e.expanded=false}}))}}async setFocus(){const t=this.singleExpansion?this.accordions[0]:this.allButtonEl;t.setFocus()}render(){const{appearance:t,size:o,label:n,singleExpansion:s,accessibleButtonLabel:r}=this;return e(i,{"context-id":this.accordionGroupId,class:{[`ic-accordion-group-${t}`]:true,[`ic-accordion-group-${o}`]:true,["ic-accordion-group"]:true}},e("div",{class:"label-container"},e("ic-typography",{variant:"h4"},e("h3",null,a(this.el,"label")?e("slot",{name:"label"}):n)),!s&&e("ic-button",{ref:t=>this.allButtonEl=t,appearance:t==="light"?"light":"default",onClick:this.handleExpanded,variant:"tertiary","aria-label":`${this.accordionOpenBtnText()} ${r}`},this.accordionOpenBtnText())),e("slot",null))}get el(){return o(this)}static get watchers(){return{appearance:["watchAppearanceHandler"],expanded:["watchExpandedHandler"]}}};r.style=n;export{r as ic_accordion_group};
-//# sourceMappingURL=p-b95a72a3.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["icAccordionGroupCss","accordionGroupIds","AccordionGroup","this","accordionGroupId","handleExpanded","areAllAccordionsOpen","expanded","accordions","forEach","acc","setExpandedToAreAllAccordionsOpen","linkAccordions","accordion","setAttribute","every","accordionOpenBtnText","watchAppearanceHandler","appearance","watchExpandedHandler","componentDidLoad","accordionDirectChildren","el","children","Array","from","filter","child","tagName","size","handleAccordionClicked","event","singleExpansion","detail","id","setFocus","focusEl","allButtonEl","render","label","accessibleButtonLabel","h","Host","class","variant","isSlotUsed","name","ref","onClick"],"sources":["src/components/ic-accordion-group/ic-accordion-group.css?tag=ic-accordion-group&encapsulation=shadow","src/components/ic-accordion-group/ic-accordion-group.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n.label-container {\n  padding: var(--ic-space-xs);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n:host(.ic-accordion-group-small) .label-container {\n  padding: var(--ic-space-xxs) var(--ic-space-xs);\n}\n\n:host(.ic-accordion-group-large) .label-container {\n  padding: var(--ic-space-sm) var(--ic-space-xs);\n}\n\n:host(.ic-accordion-group-light) {\n  color: var(--ic-color-white-text);\n\n  --ic-typography-color: var(--ic-color-white-text);\n}\n\n:host(.ic-accordion-group.ic-accordion-group-dark) ::slotted(ic-accordion) {\n  color: var(--ic-color-white-text);\n\n  --ic-typography-color: var(--ic-color-white-text);\n}\n","import {\n  Component,\n  Element,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Method,\n  Watch,\n} from \"@stencil/core\";\nimport { IcThemeForeground, IcSizes } from \"../../utils/types\";\nimport { isSlotUsed } from \"../../utils/helpers\";\n\nlet accordionGroupIds = 0;\n\n/**\n * @slot label - Content is placed as the accordion group title.\n */\n@Component({\n  tag: \"ic-accordion-group\",\n  styleUrl: \"ic-accordion-group.css\",\n  shadow: true,\n})\nexport class AccordionGroup {\n  private accordionGroupId = `ic-accordion-group-${accordionGroupIds++}`;\n  private allButtonEl: HTMLIcButtonElement;\n\n  @Element() el: HTMLIcAccordionGroupElement;\n\n  @State() accordions: HTMLIcAccordionElement[];\n\n  @State() areAllAccordionsOpen: boolean;\n\n  /**\n   * The accessible button label to provide more context to the 'See all/Hide all' button for screen reader users.\n   */\n  @Prop() accessibleButtonLabel: string = \"accordions\";\n\n  /**\n   * The appearance of the accordion group, e.g dark, or light.\n   */\n  @Prop() appearance: IcThemeForeground = \"default\";\n  @Watch(\"appearance\")\n  watchAppearanceHandler() {\n    this.accordions.forEach((acc) => {\n      acc.appearance = this.appearance;\n    });\n  }\n\n  /**\n   * If `true`, the accordion will load in an expanded state.\n   */\n  @Prop({ mutable: true }) expanded: boolean = false;\n  @Watch(\"expanded\")\n  watchExpandedHandler() {\n    this.handleExpanded();\n  }\n\n  /**\n   * The header for the accordion group.\n   */\n  @Prop() label: string = \"\";\n\n  /**\n   * If `true`, only one accordion will open at a time.\n   */\n  @Prop() singleExpansion: boolean = false;\n\n  /**\n   * The size of the accordion.\n   */\n  @Prop() size?: IcSizes = \"medium\";\n\n  componentDidLoad(): void {\n    const accordionDirectChildren = (this.el as HTMLElement).children;\n    this.accordions = Array.from(accordionDirectChildren).filter(\n      (child) => child.tagName === \"IC-ACCORDION\"\n    ) as HTMLIcAccordionElement[];\n    this.linkAccordions();\n    this.accordions.forEach((acc) => {\n      acc.appearance = this.appearance;\n    });\n    this.accordions.forEach((acc) => {\n      acc.size = this.size;\n    });\n    if (this.expanded) {\n      this.accordions.forEach((acc) => {\n        acc.expanded = true;\n      });\n      this.setExpandedToAreAllAccordionsOpen();\n    } else {\n      this.setExpandedToAreAllAccordionsOpen();\n      this.expanded = this.areAllAccordionsOpen;\n    }\n  }\n\n  @Listen(\"accordionClicked\")\n  handleAccordionClicked(event: CustomEvent): void {\n    if (!this.singleExpansion) {\n      // 'See all' should be visible until all accordions are open, then 'Hide all' should be visible\n      this.setExpandedToAreAllAccordionsOpen();\n    } else {\n      this.accordions.forEach((acc) => {\n        if (acc.expanded && event.detail.id !== acc.id) {\n          acc.expanded = false;\n        }\n      });\n    }\n  }\n\n  /**\n   * Sets the focus on first focusable element in the accordion group. If the \"See/Hide all\" button is present, it will be focused.\n   * Otherwise, the first accordion will be focused.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    const focusEl = this.singleExpansion\n      ? this.accordions[0]\n      : this.allButtonEl;\n    focusEl.setFocus();\n  }\n\n  private handleExpanded = () => {\n    if (this.areAllAccordionsOpen) {\n      this.expanded = false;\n      this.accordions.forEach((acc) => {\n        acc.expanded = this.expanded;\n      });\n    } else {\n      this.expanded = true;\n      this.accordions.forEach((acc) => {\n        acc.expanded = this.expanded;\n      });\n    }\n    this.setExpandedToAreAllAccordionsOpen();\n  };\n\n  private linkAccordions = () => {\n    this.accordions.forEach((accordion) => {\n      accordion.setAttribute(\"context-id\", this.accordionGroupId);\n    });\n  };\n\n  private setExpandedToAreAllAccordionsOpen = () => {\n    this.areAllAccordionsOpen = this.accordions.every(\n      (accordion) => !!accordion.expanded\n    );\n  };\n\n  private accordionOpenBtnText = () => {\n    return !this.areAllAccordionsOpen ? \"See all\" : \"Hide all\";\n  };\n\n  render() {\n    const { appearance, size, label, singleExpansion, accessibleButtonLabel } =\n      this;\n    return (\n      <Host\n        context-id={this.accordionGroupId}\n        class={{\n          [`ic-accordion-group-${appearance}`]: true,\n          [`ic-accordion-group-${size}`]: true,\n          [\"ic-accordion-group\"]: true,\n        }}\n      >\n        <div class=\"label-container\">\n          <ic-typography variant=\"h4\">\n            <h3>\n              {isSlotUsed(this.el, \"label\") ? <slot name=\"label\" /> : label}\n            </h3>\n          </ic-typography>\n          {!singleExpansion && (\n            <ic-button\n              ref={(el) => (this.allButtonEl = el)}\n              appearance={appearance === \"light\" ? \"light\" : \"default\"}\n              onClick={this.handleExpanded}\n              variant=\"tertiary\"\n              aria-label={`${this.accordionOpenBtnText()} ${accessibleButtonLabel}`}\n            >\n              {this.accordionOpenBtnText()}\n            </ic-button>\n          )}\n        </div>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6FAAA,MAAMA,EAAsB,+5FCc5B,IAAIC,EAAoB,E,MAUXC,EAAc,M,yBACjBC,KAAAC,iBAAmB,sBAAsBH,MAkGzCE,KAAAE,eAAiB,KACvB,GAAIF,KAAKG,qBAAsB,CAC7BH,KAAKI,SAAW,MAChBJ,KAAKK,WAAWC,SAASC,IACvBA,EAAIH,SAAWJ,KAAKI,QAAQ,G,KAEzB,CACLJ,KAAKI,SAAW,KAChBJ,KAAKK,WAAWC,SAASC,IACvBA,EAAIH,SAAWJ,KAAKI,QAAQ,G,CAGhCJ,KAAKQ,mCAAmC,EAGlCR,KAAAS,eAAiB,KACvBT,KAAKK,WAAWC,SAASI,IACvBA,EAAUC,aAAa,aAAcX,KAAKC,iBAAiB,GAC3D,EAGID,KAAAQ,kCAAoC,KAC1CR,KAAKG,qBAAuBH,KAAKK,WAAWO,OACzCF,KAAgBA,EAAUN,UAC5B,EAGKJ,KAAAa,qBAAuB,KACrBb,KAAKG,qBAAuB,UAAY,W,yFAlHV,a,gBAKA,U,cAWK,M,WASrB,G,qBAKW,M,UAKV,Q,CA5BzB,sBAAAW,GACEd,KAAKK,WAAWC,SAASC,IACvBA,EAAIQ,WAAaf,KAAKe,UAAU,G,CASpC,oBAAAC,GACEhB,KAAKE,gB,CAkBP,gBAAAe,GACE,MAAMC,EAA2BlB,KAAKmB,GAAmBC,SACzDpB,KAAKK,WAAagB,MAAMC,KAAKJ,GAAyBK,QACnDC,GAAUA,EAAMC,UAAY,iBAE/BzB,KAAKS,iBACLT,KAAKK,WAAWC,SAASC,IACvBA,EAAIQ,WAAaf,KAAKe,UAAU,IAElCf,KAAKK,WAAWC,SAASC,IACvBA,EAAImB,KAAO1B,KAAK0B,IAAI,IAEtB,GAAI1B,KAAKI,SAAU,CACjBJ,KAAKK,WAAWC,SAASC,IACvBA,EAAIH,SAAW,IAAI,IAErBJ,KAAKQ,mC,KACA,CACLR,KAAKQ,oCACLR,KAAKI,SAAWJ,KAAKG,oB,EAKzB,sBAAAwB,CAAuBC,GACrB,IAAK5B,KAAK6B,gBAAiB,CAEzB7B,KAAKQ,mC,KACA,CACLR,KAAKK,WAAWC,SAASC,IACvB,GAAIA,EAAIH,UAAYwB,EAAME,OAAOC,KAAOxB,EAAIwB,GAAI,CAC9CxB,EAAIH,SAAW,K,MAWvB,cAAM4B,GACJ,MAAMC,EAAUjC,KAAK6B,gBACjB7B,KAAKK,WAAW,GAChBL,KAAKkC,YACTD,EAAQD,U,CAkCV,MAAAG,GACE,MAAMpB,WAAEA,EAAUW,KAAEA,EAAIU,MAAEA,EAAKP,gBAAEA,EAAeQ,sBAAEA,GAChDrC,KACF,OACEsC,EAACC,EAAI,cACSvC,KAAKC,iBACjBuC,MAAO,CACL,CAAC,sBAAsBzB,KAAe,KACtC,CAAC,sBAAsBW,KAAS,KAChC,CAAC,sBAAuB,OAG1BY,EAAA,OAAKE,MAAM,mBACTF,EAAA,iBAAeG,QAAQ,MACrBH,EAAA,UACGI,EAAW1C,KAAKmB,GAAI,SAAWmB,EAAA,QAAMK,KAAK,UAAaP,KAG1DP,GACAS,EAAA,aACEM,IAAMzB,GAAQnB,KAAKkC,YAAcf,EACjCJ,WAAYA,IAAe,QAAU,QAAU,UAC/C8B,QAAS7C,KAAKE,eACduC,QAAQ,WAAU,aACN,GAAGzC,KAAKa,0BAA0BwB,KAE7CrC,KAAKa,yBAIZyB,EAAA,a"}

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

@@ -1,2 +0,0 @@
-import{r as e,f as t,h as n,H as i,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);--ic-typography-color:var(--ic-theme-text);--hero-heading-bottom-margin:var(--ic-space-md)}:host(.ic-hero-dark){background-color:var(--ic-theme-secondary)}: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-theme-text)}.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(n){e(this,n);this.hostMutationObserver=null;this.hostMutationCallback=e=>{if(e.some((({type:e,addedNodes:t,removedNodes:n})=>e==="childList"?a(t,n,"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 n=-100+e*t;this.scrollFactor="right "+n+"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 n(i,{class:{[`ic-hero-${l.Dark}`]:c===l.Dark,["has-background-image"]:h!==undefined,["ic-hero-small"]:t==="small",["secondary-heading"]:!!r},style:g},n("ic-section-container",{aligned:e,fullHeight:true,class:"section-container"},n("div",{class:{["left-container"]:true,["left-container-full-width"]:this.leftContentFullWidth}},n("div",{class:"heading"},n("slot",{name:"heading"},n("ic-typography",{variant:t==="small"?"h2":"h1",class:{["heading-bottom-spacing"]:t!=="small"}},n("h2",null,o)))),n("div",{class:"subheading"},n("slot",{name:"subheading"},n("ic-typography",{variant:"body"},a))),n("div",{class:"interaction-container"},n("slot",{name:"interaction"}))),(d(r)||this.rightContent)&&n("div",{class:"right-container"},n("slot",{name:"secondary"},r&&n("div",{class:"secondary-container"},n("div",{class:"secondary-heading"},n("ic-typography",{variant:"h4"},n("h3",null,r))),n("div",{class:"secondary-subheading"},n("ic-typography",{variant:"subtitle-small"},s)))))))}get el(){return o(this)}};g.style=m;export{g as ic_hero};
-//# sourceMappingURL=p-b997064c.entry.js.map

package/dist/core/p-b997064c.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  --ic-typography-color: var(--ic-theme-text);\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\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-theme-text);\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,26M,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-cf7db84a.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as e,h as i,H as o,g as n}from"./p-6b5e91e2.js";import{i as a}from"./p-b7eb8ef9.js";import{C as s}from"./p-3b185c32.js";const r='/*! 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;border-bottom:var(--ic-border-default);--ic-typography-color:currentcolor}:host ic-typography,:host .expand-chevron{color:var(--ic-color-text-primary)}:host(.ic-accordion-light) ic-typography,:host(.ic-accordion-light) .expanded-content,:host(.ic-accordion-light) .icon-container,:host(.ic-accordion-light) .expand-chevron{color:var(--ic-architectural-white)}:host(.ic-accordion-disabled) ic-typography,:host(.ic-accordion-disabled) .icon-container,:host(.ic-accordion-disabled) .expand-chevron{color:var(--ic-architectural-500)}.section-button.small{padding:var(--ic-space-xxs) var(--ic-space-xs)}.section-button.large{padding:var(--ic-space-sm) var(--ic-space-xs)}:host(:first-of-type){border-top:var(--ic-border-default)}:focus{outline:none}.section-button{background-color:transparent;display:flex;align-items:center;width:100%;padding:var(--ic-space-xs);font-weight:var(--ic-font-weight-bold);border:none}.section-header{text-align:left;flex:1 0}button:hover:enabled{background-color:var(--ic-action-dark-bg-hover);cursor:pointer}button:active{background-color:var(--ic-action-dark-bg-pressed)}button:focus{box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);transition:var(--ic-transition-duration-fast)}button:disabled{pointer-events:none}.icon-container{margin:0 var(--ic-space-xs) 0 0;display:flex;align-items:center;width:var(--ic-space-lg);height:var(--ic-space-lg)}::slotted(svg){width:var(--ic-space-md);height:var(--ic-space-md)}.expand-chevron{width:var(--ic-space-lg);height:var(--ic-space-lg);margin-left:calc(var(--ic-space-xl) + var(--ic-space-xs));transform:rotate(90deg);justify-self:end}.content-expanded-chevron{transform:rotate(-90deg)}.expanded-content{height:0;overflow:hidden;display:flex;flex-direction:column;visibility:var(--ic-expanded-content-visibility, hidden)}.expanded-content-inner{padding:var(--ic-space-xs)}.expanded-content-opened{overflow:visible}@media (forced-colors: active){button:focus{border:var(--ic-border-hc) !important}}';let c=0;const d=class{constructor(i){t(this,i);this.accordionClicked=e(this,"accordionClicked",7);this.accordionId=`ic-accordion-${c++}`;this.CONTENT_VISIBILITY_PROPERTY="--ic-expanded-content-visibility";this.toggleExpanded=()=>{this.expanded=!this.expanded;this.accordionClicked.emit({id:this.accordionId})};this.setAccordionAnimation=(t,e,i,o)=>{t.style.transitionDuration=`${e}ms`;t.style.transitionProperty=i;t.style.transitionDelay=o};this.setExpandedContentStyle=(t,e)=>{if(t.propertyName==="height"&&e.clientHeight>0){e.classList.add("expanded-content-opened");e.style.height="auto"}};this.hideExpandedContent=(t,e)=>{if(t.propertyName==="height"&&e.clientHeight===0){e.style.setProperty(this.CONTENT_VISIBILITY_PROPERTY,"hidden")}};this.animateExpandedContent=()=>{const t=this.expandedContentEl.scrollHeight;if(t>0&&this.expanded){this.expandedContentEl.style.setProperty(this.CONTENT_VISIBILITY_PROPERTY,"visible");this.expandedContentEl.style.height=`${t}px`;this.setAccordionAnimation(this.expandedContentEl,"300","height","ease-out");this.expandedContentEl.addEventListener("transitionend",(t=>{this.setExpandedContentStyle(t,this.expandedContentEl)}))}else if(!this.expanded){this.expandedContentEl.style.height=`${this.expandedContentEl.scrollHeight}px`;if(this.expandedContentEl.scrollHeight>0&&!this.expanded){this.expandedContentEl.style.height="0";this.setAccordionAnimation(this.expandedContentEl,"300","height","ease-in");this.expandedContentEl.classList.remove("expanded-content-opened")}this.expandedContentEl.addEventListener("transitionend",(t=>{this.hideExpandedContent(t,this.expandedContentEl)}))}};this.appearance="default";this.disabled=false;this.expanded=false;this.heading="";this.message="";this.size="medium"}handleExpandedWatch(){this.animateExpandedContent()}async setFocus(){if(this.accordionBtnHeading){this.accordionBtnHeading.focus()}}disconnectedCallback(){if(this.expandedContentEl){this.expandedContentEl.removeEventListener("transitionend",(t=>this.setExpandedContentStyle(t,this.expandedContentEl)),true);this.expandedContentEl.removeEventListener("transitionend",(t=>this.hideExpandedContent(t,this.expandedContentEl)),true)}}componentDidLoad(){if(this.expanded){this.expandedContentEl.style.height="auto";this.expandedContentEl.style.setProperty(this.CONTENT_VISIBILITY_PROPERTY,"visible")}}render(){const{appearance:t,size:e,disabled:n,expanded:r}=this;return i(o,{id:this.accordionId,class:{[`ic-accordion-${t}`]:true,["ic-accordion-disabled"]:n},"aria-disabled":n?"true":"false"},i("button",{ref:t=>this.accordionBtnHeading=t,id:`${this.accordionId}-button`,disabled:n,tabindex:n?-1:0,class:{[`${e}`]:true,["section-button"]:true,["section-button-open"]:r&&!n},"aria-expanded":`${r}`,"aria-controls":"expanded-content-area",onClick:this.toggleExpanded},a(this.el,"icon")&&i("div",{class:"icon-container"},i("slot",{name:"icon"})),i("ic-typography",{variant:"subtitle-large",class:"section-header"},a(this.el,"heading")?i("slot",{name:"heading"}):this.heading),i("span",{class:{["expand-chevron"]:true,["content-expanded-chevron"]:r&&!n},"aria-hidden":"true",innerHTML:s})),i("div",{class:{["expanded-content"]:true},"aria-labelledby":`${this.accordionId}-button`,role:"region","aria-hidden":`${!r}`,id:"expanded-content-area",ref:t=>this.expandedContentEl=t},i("div",{class:"expanded-content-inner"},this.message?i("ic-typography",{variant:"body"},this.message):i("slot",null))))}get el(){return n(this)}static get watchers(){return{expanded:["handleExpandedWatch"]}}};d.style=r;export{d as ic_accordion};
-//# sourceMappingURL=p-cf7db84a.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["icAccordionCss","accordionIds","Accordion","this","accordionId","CONTENT_VISIBILITY_PROPERTY","toggleExpanded","expanded","accordionClicked","emit","id","setAccordionAnimation","el","duration","property","delay","style","transitionDuration","transitionProperty","transitionDelay","setExpandedContentStyle","ev","expandedContent","propertyName","clientHeight","classList","add","height","hideExpandedContent","setProperty","animateExpandedContent","elementHeight","expandedContentEl","scrollHeight","addEventListener","e","remove","handleExpandedWatch","setFocus","accordionBtnHeading","focus","disconnectedCallback","removeEventListener","componentDidLoad","render","appearance","size","disabled","h","Host","class","ref","tabindex","onClick","isSlotUsed","name","variant","innerHTML","chevronIcon","role","message"],"sources":["src/components/ic-accordion/ic-accordion.css?tag=ic-accordion&encapsulation=shadow","src/components/ic-accordion/ic-accordion.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: block;\n  border-bottom: var(--ic-border-default);\n\n  --ic-typography-color: currentcolor;\n}\n\n:host ic-typography,\n:host .expand-chevron {\n  color: var(--ic-color-text-primary);\n}\n\n:host(.ic-accordion-light) ic-typography,\n:host(.ic-accordion-light) .expanded-content,\n:host(.ic-accordion-light) .icon-container,\n:host(.ic-accordion-light) .expand-chevron {\n  color: var(--ic-architectural-white);\n}\n\n:host(.ic-accordion-disabled) ic-typography,\n:host(.ic-accordion-disabled) .icon-container,\n:host(.ic-accordion-disabled) .expand-chevron {\n  color: var(--ic-architectural-500);\n}\n\n.section-button.small {\n  padding: var(--ic-space-xxs) var(--ic-space-xs);\n}\n\n.section-button.large {\n  padding: var(--ic-space-sm) var(--ic-space-xs);\n}\n\n:host(:first-of-type) {\n  border-top: var(--ic-border-default);\n}\n\n:focus {\n  outline: none;\n}\n\n.section-button {\n  background-color: transparent;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  padding: var(--ic-space-xs);\n  font-weight: var(--ic-font-weight-bold);\n  border: none;\n}\n\n.section-header {\n  text-align: left;\n  flex: 1 0;\n}\n\nbutton:hover:enabled {\n  background-color: var(--ic-action-dark-bg-hover);\n  cursor: pointer;\n}\n\nbutton:active {\n  background-color: var(--ic-action-dark-bg-pressed);\n}\n\nbutton:focus {\n  box-shadow: var(--ic-border-focus);\n  border-radius: var(--ic-border-radius);\n  transition: var(--ic-transition-duration-fast);\n}\n\nbutton:disabled {\n  pointer-events: none;\n}\n\n.icon-container {\n  margin: 0 var(--ic-space-xs) 0 0;\n  display: flex;\n  align-items: center;\n  width: var(--ic-space-lg);\n  height: var(--ic-space-lg);\n}\n\n::slotted(svg) {\n  width: var(--ic-space-md);\n  height: var(--ic-space-md);\n}\n\n.expand-chevron {\n  width: var(--ic-space-lg);\n  height: var(--ic-space-lg);\n  margin-left: calc(var(--ic-space-xl) + var(--ic-space-xs));\n  transform: rotate(90deg);\n  justify-self: end;\n}\n\n.content-expanded-chevron {\n  transform: rotate(-90deg);\n}\n\n.expanded-content {\n  height: 0;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  visibility: var(--ic-expanded-content-visibility, hidden);\n}\n\n.expanded-content-inner {\n  padding: var(--ic-space-xs);\n}\n\n.expanded-content-opened {\n  overflow: visible;\n}\n\n@media (forced-colors: active) {\n  button:focus {\n    border: var(--ic-border-hc) !important;\n  }\n}\n","import {\n  Component,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Watch,\n  Method,\n} from \"@stencil/core\";\nimport { isSlotUsed } from \"../../utils/helpers\";\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\nimport { IcThemeForeground, IcSizes } from \"../../utils/types\";\n\nlet accordionIds = 0;\n\n/**\n * @slot heading - Content is placed as the accordion heading.\n * @slot icon - Content is placed to the left of the heading.\n */\n\n@Component({\n  tag: \"ic-accordion\",\n  styleUrl: \"ic-accordion.css\",\n  shadow: true,\n})\nexport class Accordion {\n  private accordionId = `ic-accordion-${accordionIds++}`;\n  private expandedContentEl: HTMLDivElement;\n  private accordionBtnHeading: HTMLButtonElement;\n  private CONTENT_VISIBILITY_PROPERTY = \"--ic-expanded-content-visibility\";\n\n  @Element() el: HTMLIcAccordionElement;\n  /**\n   * @internal Determines whether the light or dark variant of the accordion should be displayed.\n   */\n  @Prop() appearance?: IcThemeForeground = \"default\";\n\n  /**\n   * If `true`, the accordion will be disabled.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * If `true`, the accordion appears expanded.\n   */\n  @Prop({ mutable: true }) expanded: boolean = false;\n\n  /**\n   * The section header outlining section content.\n   */\n  @Prop() heading?: string = \"\";\n\n  /**\n   * The main body message of the accordion.\n   */\n  @Prop() message?: string = \"\";\n\n  /**\n   * The size of the accordion.\n   */\n  @Prop() size?: IcSizes = \"medium\";\n\n  /**\n   * @internal Emitted when accordion is clicked.\n   */\n  @Event() accordionClicked: EventEmitter<{ id: string }>;\n\n  // Every time expanded is set via toggleExpanded or accordionGroup, animate to open or close\n  @Watch(\"expanded\")\n  handleExpandedWatch(): void {\n    this.animateExpandedContent();\n  }\n\n  /**\n   * Sets focus on accordion heading.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.accordionBtnHeading) {\n      this.accordionBtnHeading.focus();\n    }\n  }\n\n  disconnectedCallback(): void {\n    if (this.expandedContentEl) {\n      this.expandedContentEl.removeEventListener(\n        \"transitionend\",\n        (e) => this.setExpandedContentStyle(e, this.expandedContentEl),\n        true\n      );\n      this.expandedContentEl.removeEventListener(\n        \"transitionend\",\n        (e) => this.hideExpandedContent(e, this.expandedContentEl),\n        true\n      );\n    }\n  }\n\n  componentDidLoad(): void {\n    // So accordion opens by default if expanded set to true\n    if (this.expanded) {\n      this.expandedContentEl.style.height = \"auto\";\n      this.expandedContentEl.style.setProperty(\n        this.CONTENT_VISIBILITY_PROPERTY,\n        \"visible\"\n      );\n    }\n  }\n\n  private toggleExpanded = (): void => {\n    this.expanded = !this.expanded;\n    this.accordionClicked.emit({ id: this.accordionId });\n  };\n\n  // Set accordion animation\n  private setAccordionAnimation = (\n    el: HTMLElement,\n    duration: string,\n    property: string,\n    delay: string\n  ) => {\n    el.style.transitionDuration = `${duration}ms`;\n    el.style.transitionProperty = property;\n    el.style.transitionDelay = delay;\n  };\n\n  private setExpandedContentStyle = (\n    ev: TransitionEvent,\n    expandedContent: HTMLDivElement\n  ) => {\n    if (ev.propertyName === \"height\" && expandedContent.clientHeight > 0) {\n      expandedContent.classList.add(\"expanded-content-opened\");\n      expandedContent.style.height = \"auto\";\n    }\n  };\n\n  private hideExpandedContent = (\n    ev: TransitionEvent,\n    expandedContent: HTMLDivElement\n  ) => {\n    if (ev.propertyName === \"height\" && expandedContent.clientHeight === 0) {\n      expandedContent.style.setProperty(\n        this.CONTENT_VISIBILITY_PROPERTY,\n        \"hidden\"\n      );\n    }\n  };\n\n  private animateExpandedContent = () => {\n    const elementHeight = this.expandedContentEl.scrollHeight;\n    if (elementHeight > 0 && this.expanded) {\n      this.expandedContentEl.style.setProperty(\n        this.CONTENT_VISIBILITY_PROPERTY,\n        \"visible\"\n      );\n      this.expandedContentEl.style.height = `${elementHeight}px`;\n      this.setAccordionAnimation(\n        this.expandedContentEl,\n        \"300\",\n        \"height\",\n        \"ease-out\"\n      );\n\n      this.expandedContentEl.addEventListener(\n        \"transitionend\",\n        (e: TransitionEvent) => {\n          this.setExpandedContentStyle(e, this.expandedContentEl);\n        }\n      );\n    } else if (!this.expanded) {\n      this.expandedContentEl.style.height = `${this.expandedContentEl.scrollHeight}px`;\n      if (this.expandedContentEl.scrollHeight > 0 && !this.expanded) {\n        this.expandedContentEl.style.height = \"0\";\n        this.setAccordionAnimation(\n          this.expandedContentEl,\n          \"300\",\n          \"height\",\n          \"ease-in\"\n        );\n        this.expandedContentEl.classList.remove(\"expanded-content-opened\");\n      }\n      this.expandedContentEl.addEventListener(\"transitionend\", (e) => {\n        this.hideExpandedContent(e, this.expandedContentEl);\n      });\n    }\n  };\n\n  render() {\n    const { appearance, size, disabled, expanded } = this;\n    return (\n      <Host\n        id={this.accordionId}\n        class={{\n          [`ic-accordion-${appearance}`]: true,\n          [\"ic-accordion-disabled\"]: disabled,\n        }}\n        aria-disabled={disabled ? \"true\" : \"false\"}\n      >\n        <button\n          ref={(el) => (this.accordionBtnHeading = el)}\n          id={`${this.accordionId}-button`}\n          disabled={disabled}\n          tabindex={disabled ? -1 : 0}\n          class={{\n            [`${size}`]: true,\n            [\"section-button\"]: true,\n            [\"section-button-open\"]: expanded && !disabled,\n          }}\n          aria-expanded={`${expanded}`}\n          aria-controls=\"expanded-content-area\"\n          onClick={this.toggleExpanded}\n        >\n          {isSlotUsed(this.el, \"icon\") && (\n            <div class=\"icon-container\">\n              <slot name=\"icon\" />\n            </div>\n          )}\n          <ic-typography variant=\"subtitle-large\" class=\"section-header\">\n            {isSlotUsed(this.el, \"heading\") ? (\n              <slot name=\"heading\" />\n            ) : (\n              this.heading\n            )}\n          </ic-typography>\n          <span\n            class={{\n              [\"expand-chevron\"]: true,\n              [\"content-expanded-chevron\"]: expanded && !disabled,\n            }}\n            aria-hidden=\"true\"\n            innerHTML={chevronIcon}\n          />\n        </button>\n        <div\n          class={{\n            [\"expanded-content\"]: true,\n          }}\n          aria-labelledby={`${this.accordionId}-button`}\n          role=\"region\"\n          aria-hidden={`${!expanded}`}\n          id=\"expanded-content-area\"\n          ref={(el) => (this.expandedContentEl = el)}\n        >\n          <div class=\"expanded-content-inner\">\n            {this.message ? (\n              <ic-typography variant=\"body\">{this.message}</ic-typography>\n            ) : (\n              <slot />\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

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

@@ -1 +0,0 @@
-{"version":3,"names":["icFooterLinkCss","FooterLink","DEVICE_SIZES","XL","small","grouped","getThemeForegroundColor","componentWillLoad","this","footerConfig","inferConfig","el","footerResizeHandler","footerThemeChangeHandler","ev","theme","detail","foregroundColor","mode","e","parentElement","classList","contains","render","href","hreflang","referrerpolicy","rel","target","download","h","Host","class","role"],"sources":["src/components/ic-footer-link/ic-footer-link.css?tag=ic-footer-link&encapsulation=shadow","src/components/ic-footer-link/ic-footer-link.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host(.footer-link-ungrouped-sparse) {\n  --footer-link-margin-left: 0;\n  --footer-link-margin-right: 2.5rem;\n  --footer-link-margin-bottom: 0;\n}\n\n:host(.footer-link-ungrouped-small) {\n  --footer-link-margin-left: 0;\n  --footer-link-margin-right: 0;\n  --footer-link-margin-bottom: var(--ic-space-md);\n}\n\n:host(.footer-link-grouped-sparse) {\n  --footer-link-margin-left: 0;\n  --footer-link-margin-right: 0;\n  --footer-link-margin-bottom: var(--ic-space-md);\n}\n\n:host(.footer-link-grouped-small) {\n  --footer-link-margin-left: var(--ic-space-md);\n  --footer-link-margin-right: 0;\n  --footer-link-margin-bottom: var(--ic-space-md);\n}\n\n:host(.footer-link) {\n  margin-left: var(--footer-link-margin-left);\n  margin-right: var(--footer-link-margin-right);\n  margin-bottom: var(--footer-link-margin-bottom);\n}\n\n.ic-link-open-in-new-icon {\n  vertical-align: middle;\n  margin-left: var(--ic-space-xxs);\n}\n\n.ic-link > .ic-link-open-in-new-icon {\n  fill: var(--ic-color-hyperlink-default);\n}\n\n.ic-link-open-in-new-icon > svg {\n  width: var(--ic-space-md);\n  height: var(--ic-space-md);\n  fill: currentcolor;\n}\n\n.ic-link:visited > .ic-link-open-in-new-icon {\n  fill: var(--ic-color-hyperlink-visited);\n}\n\n.ic-link.light:visited > .ic-link-open-in-new-icon {\n  fill: var(--ic-color-hyperlink-contrast-visited);\n}\n\n:host(.breadcrumb-link) .ic-link {\n  display: var(--breadcrumb-link-display);\n  align-items: var(--breadcrumb-link-align-items);\n  gap: var(--breadcrumb-link-gap);\n}\n\n:host(.breadcrumb-link) .ic-link ::slotted(.back-icon) {\n  height: var(--ic-space-lg);\n  width: var(--ic-space-lg);\n}\n\n:host(.breadcrumb-link.current-page) a,\n:host(.breadcrumb-link.current-page) ::slotted(a) {\n  font-weight: normal;\n  color: inherit;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n}\n\n:host(.breadcrumb-link.current-page) .ic-link,\n:host(.breadcrumb-link.current-page) ::slotted(a:focus) {\n  outline: var(--ic-hc-focus-outline);\n  text-decoration: none;\n}\n\n:host(.breadcrumb-link.current-page) .ic-link:visited {\n  color: var(--ic-color-text-primary);\n}\n\n:host(.footer-link-light) ::part(link),\n:host(.footer-link-dark) ::part(link) {\n  color: var(--ic-theme-text);\n}\n\n:host(.footer-link-light) ::slotted(svg),\n:host(.footer-link-dark) ::slotted(svg) {\n  fill: var(--ic-theme-text);\n}\n\n@media (forced-colors: active) {\n  :host(.footer-link-light) ::slotted(svg),\n  :host(.footer-link-dark) ::slotted(svg) {\n    fill: currentcolor;\n  }\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Listen,\n  Prop,\n  h,\n  State,\n} from \"@stencil/core\";\nimport { DEVICE_SIZES, getThemeForegroundColor } from \"../../utils/helpers\";\nimport { IcTheme, IcThemeForeground } from \"../../utils/types\";\n\ntype FooterConfig = { small: boolean; grouped: boolean };\n\n@Component({\n  tag: \"ic-footer-link\",\n  styleUrl: \"ic-footer-link.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class FooterLink {\n  @Element() el: HTMLIcFooterLinkElement;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() footerConfig: FooterConfig = { small: false, grouped: false };\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\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   * The URL that the link points to.\n   */\n  @Prop() href?: string = null;\n\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: 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 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  componentWillLoad(): void {\n    this.footerConfig = this.inferConfig(this.el);\n  }\n\n  @Listen(\"footerResized\", { target: \"document\" })\n  footerResizeHandler(): void {\n    this.footerConfig = this.inferConfig(this.el);\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  footerThemeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.foregroundColor = theme.mode;\n  }\n\n  private inferConfig(e: HTMLElement): FooterConfig {\n    if (e.parentElement !== null) {\n      if (e.parentElement.classList.contains(\"ic-footer\")) {\n        return {\n          small: e.parentElement.classList.contains(\"ic-footer-small\"),\n          grouped: e.parentElement.classList.contains(\"ic-footer-grouped\"),\n        };\n      } else {\n        return this.inferConfig(e.parentElement);\n      }\n    } else {\n      return { small: false, grouped: false };\n    }\n  }\n\n  render() {\n    const {\n      footerConfig,\n      href,\n      hreflang,\n      referrerpolicy,\n      rel,\n      target,\n      download,\n    } = this;\n    const { small, grouped } = footerConfig;\n\n    return (\n      <Host\n        class={{\n          \"footer-link\": true,\n          [`footer-link-${grouped ? \"grouped\" : \"ungrouped\"}-${\n            small ? \"small\" : \"sparse\"\n          }`]: true,\n          [`footer-link-${this.foregroundColor}`]: true,\n        }}\n        role=\"listitem\"\n      >\n        <ic-link\n          href={href}\n          hreflang={hreflang}\n          referrerpolicy={referrerpolicy}\n          rel={rel}\n          download={download !== false ? download : null}\n          target={target}\n        >\n          <slot />\n        </ic-link>\n      </Host>\n    );\n  }\n}\n"],"mappings":"oGAAA,MAAMA,EAAkB,89I,MCqBXC,EAAU,M,yCAGSC,EAAaC,G,kBACL,CAAEC,MAAO,MAAOC,QAAS,O,qBACjBC,I,cAKR,M,UAKd,K,+FAsBxB,iBAAAC,GACEC,KAAKC,aAAeD,KAAKE,YAAYF,KAAKG,G,CAI5C,mBAAAC,GACEJ,KAAKC,aAAeD,KAAKE,YAAYF,KAAKG,G,CAI5C,wBAAAE,CAAyBC,GACvB,MAAMC,EAAiBD,EAAGE,OAC1BR,KAAKS,gBAAkBF,EAAMG,I,CAGvB,WAAAR,CAAYS,GAClB,GAAIA,EAAEC,gBAAkB,KAAM,CAC5B,GAAID,EAAEC,cAAcC,UAAUC,SAAS,aAAc,CACnD,MAAO,CACLlB,MAAOe,EAAEC,cAAcC,UAAUC,SAAS,mBAC1CjB,QAASc,EAAEC,cAAcC,UAAUC,SAAS,qB,KAEzC,CACL,OAAOd,KAAKE,YAAYS,EAAEC,c,MAEvB,CACL,MAAO,CAAEhB,MAAO,MAAOC,QAAS,M,EAIpC,MAAAkB,GACE,MAAMd,aACJA,EAAYe,KACZA,EAAIC,SACJA,EAAQC,eACRA,EAAcC,IACdA,EAAGC,OACHA,EAAMC,SACNA,GACErB,KACJ,MAAMJ,MAAEA,EAAKC,QAAEA,GAAYI,EAE3B,OACEqB,EAACC,EAAI,CACHC,MAAO,CACL,cAAe,KACf,CAAC,eAAe3B,EAAU,UAAY,eACpCD,EAAQ,QAAU,YACf,KACL,CAAC,eAAeI,KAAKS,mBAAoB,MAE3CgB,KAAK,YAELH,EAAA,WACEN,KAAMA,EACNC,SAAUA,EACVC,eAAgBA,EAChBC,IAAKA,EACLE,SAAUA,IAAa,MAAQA,EAAW,KAC1CD,OAAQA,GAERE,EAAA,c"}