@ukic/web-components 2.0.0-alpha.124 → 2.0.0

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

@@ -1 +1 @@
-{"file":"ic-navigation-item.js","mappings":"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","names":[],"sources":["./src/components/ic-navigation-item/ic-navigation-item.css?tag=ic-navigation-item&encapsulation=shadow","./src/components/ic-navigation-item/ic-navigation-item.tsx"],"sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n  display: block;\n}\n\n:host(:focus-within) {\n  z-index: 1;\n}\n\n/* chevron */\nsvg {\n  width: var(--ic-space-xl);\n  fill: var(--ic-theme-text);\n}\n\nic-typography {\n  flex: 1;\n}\n\n:host([expandable].navigation-item) .link,\n:host([expandable].navigation-item) ::slotted(a) {\n  padding-right: 0;\n}\n\n:host(.navigation-item) .link,\n:host(.navigation-item) ::slotted(a) {\n  height: 100%;\n  width: fit-content;\n  color: var(--ic-theme-text);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 var(--ic-space-md);\n  text-decoration: none;\n  transition: var(--ic-easing-transition-fast);\n  position: relative;\n}\n\n:host(.navigation-item) ::slotted(a) {\n  font: var(--ic-font-label) !important;\n  letter-spacing: var(--ic-font-letter-spacing-0pt025) !important;\n  padding: 0 var(--ic-space-md) !important;\n}\n\n:host(.navigation-item-selected) .link::after,\n:host(.navigation-item-selected) ::slotted(a.active)::after,\n:host(.navigation-item-top-nav) ::slotted(a.active)::after {\n  content: \"\";\n  height: 4px;\n  width: 100%;\n  position: absolute;\n  bottom: 0;\n  background-color: var(--ic-theme-text);\n}\n\n:host(.navigation-item-selected.navigation-item-page-header)\n  ::slotted(a.active)::after,\n:host(.navigation-item-selected.navigation-item-page-header) .link::after,\n:host(.navigation-item.navigation-item-page-header) ::slotted(a.active)::after,\n:host(.navigation-item-top-nav-child) ::slotted(a.active)::after {\n  content: none;\n}\n\n:host(.navigation-item-side-menu-selected) .link,\n:host(.navigation-item-side-menu) ::slotted(a.active),\n:host(.navigation-item-top-nav-child) ::slotted(a.active) {\n  box-shadow: none;\n}\n\n:host(.navigation-item) .link:hover:not(:focus) {\n  background-color: var(--ic-theme-hover);\n  cursor: pointer;\n}\n\n:host(.navigation-item:not(.navigation-item-page-header, .navigation-item-side-menu))\n  ::slotted(a:hover:not(:focus)) {\n  background-color: var(--ic-theme-hover) !important;\n}\n\n:host(.navigation-item:not(.navigation-item-top-nav-child, .navigation-item-side-menu, .navigation-item-top-nav-child-selected\n      .navigation-item-side-menu-selected))\n  .focus-indicator:focus-within {\n  box-shadow: var(--ic-border-focus);\n  border-radius: var(--ic-border-radius);\n}\n\n:host(.navigation-item) .link:focus,\n:host(.navigation-item) ::slotted(a:focus) {\n  box-shadow: var(--ic-border-focus);\n  border-radius: var(--ic-border-radius);\n  outline: none;\n}\n\n:host(.navigation-item-selected) .link:focus,\n:host(.navigation-item) ::slotted(a.active:focus) {\n  box-shadow: var(--ic-border-focus);\n  border-radius: var(--ic-border-radius);\n  outline: none;\n}\n\n:host(.navigation-item-selected.dark) .link:focus,\n:host(.navigation-item.dark) ::slotted(a.active:focus) {\n  box-shadow: var(--ic-border-focus);\n  border-radius: var(--ic-border-radius);\n  outline: none;\n}\n\n:host(.navigation-item) .link:active:not(:focus),\n:host(.navigation-item) ::slotted(a:active:not(:focus)) {\n  background-color: var(--ic-theme-active);\n}\n\n:host(.navigation-item-side-menu) .link,\n:host(.navigation-item-side-menu) ::slotted(a) {\n  height: 40px;\n  width: 100%;\n  color: var(--ic-color-primary-text);\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  text-decoration: none;\n  transition: var(--ic-transition-duration-fast);\n}\n\n:host(.navigation-item-side-menu) ::slotted(a) {\n  font: var(--ic-font-body) !important;\n  letter-spacing: var(--ic-font-letter-spacing-0pt005) !important;\n  transition: box-shadow var(--ic-easing-transition-fast),\n    background-color var(--ic-easing-transition-fast);\n}\n\n:host(.navigation-item-side-menu) .link:hover:not(:focus) {\n  background-color: var(--ic-action-dark-bg-hover);\n}\n\n:host(.navigation-item-side-menu) ::slotted(a:hover:not(:focus)) {\n  background-color: var(--ic-action-dark-bg-hover) !important;\n}\n\n:host(.navigation-item-side-menu) .focus-indicator:focus-within {\n  box-shadow: none;\n}\n\n:host(.navigation-item-side-menu) .link:focus,\n:host(.navigation-item-side-menu) ::slotted(a:focus) {\n  box-shadow: var(--ic-border-focus-inset) !important;\n  padding-right: var(--ic-space-lg);\n  width: auto;\n  border-radius: var(--ic-border-radius-inset) !important;\n}\n\n:host(.navigation-item-side-menu-selected) .link,\n:host(.navigation-item-side-menu-selected) ::slotted(a) {\n  transition: box-shadow var(--ic-easing-transition-slow),\n    background-color var(--ic-easing-transition-slow);\n}\n\n:host(.navigation-item-side-menu-selected) .link:focus,\n:host(.navigation-item-side-menu) ::slotted(a.active:focus),\n:host(.navigation-item-top-nav-child) ::slotted(a.active:focus) {\n  margin-left: var(--ic-space-xs) !important;\n  padding-left: var(--ic-space-xs) !important;\n}\n\n:host(.navigation-item-top-nav-child) .link,\n:host(.navigation-item-top-nav-child) ::slotted(a) {\n  height: 40px;\n  width: fit-content;\n  min-width: 145px;\n  color: var(--ic-color-primary-text);\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  padding: 0 var(--ic-space-md) !important;\n  text-decoration: none;\n  position: relative;\n  transition: box-shadow var(--ic-transition-duration-fast),\n    border-radius var(--ic-transition-duration-slow);\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a) {\n  font: var(--ic-font-body) !important;\n  letter-spacing: var(--ic-font-letter-spacing-0pt005) !important;\n}\n\n:host(.navigation-item-top-nav-child) .link:hover:not(:focus) {\n  background-color: var(--ic-action-dark-bg-hover) !important;\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a:hover):not(:focus) {\n  background-color: var(--ic-action-dark-bg-hover) !important;\n}\n\n:host(.navigation-item-top-nav-child) .link:focus,\n:host(.navigation-item-top-nav-child) ::slotted(a:focus) {\n  z-index: 1;\n  outline: none;\n  border-radius: var(--ic-border-radius-inset);\n  box-shadow: var(--ic-border-focus-inset);\n  transition: border-radius 0s, box-shadow var(--ic-transition-duration-fast);\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a.active:focus) {\n  box-shadow: var(--ic-border-focus-inset);\n  border-radius: var(--ic-border-radius-inset);\n}\n\n:host(.navigation-item-side-menu) .link:active:not(:focus) {\n  background-color: var(--ic-action-dark-bg-active);\n}\n\n:host(.navigation-item-top-nav-child) .link:active:not(:focus),\n:host(.navigation-item-top-nav-child) ::slotted(a:active):not(:focus) {\n  outline: none;\n  background-color: var(--ic-action-dark-bg-active);\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a:active):not(:focus),\n:host(.navigation-item-side-menu) ::slotted(a:active):not(:focus) {\n  background-color: var(--ic-action-dark-bg-active) !important;\n}\n\n:host(.navigation-item-side-menu-selected) *,\n:host(.navigation-item-top-nav-child-selected) *,\n:host(.navigation-item-side-menu) ::slotted(a.active),\n:host(.navigation-item-top-nav-child) ::slotted(a.active) {\n  font-weight: 700 !important;\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a.active)::before,\n:host(.navigation-item-top-nav-child-selected) .link::before,\n:host(.navigation-item-side-menu-selected) .link::before,\n:host(.navigation-item-side-menu) ::slotted(a.active)::before,\n:host(.navigation-item-side-menu-selected) .link:focus::before,\n:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  width: var(--ic-space-xs);\n  height: 40px;\n  margin-right: 5px;\n  background-color: var(--ic-action-default);\n  transition: left 0s;\n}\n\n:host(.navigation-item-top-nav-child-selected) .link:focus {\n  margin-left: var(--ic-space-xs);\n  margin-right: calc(-1 * var(--ic-space-xs));\n  padding-left: var(--ic-space-xs) !important;\n}\n\n:host(.navigation-item-top-nav-child-selected) .link:focus::before {\n  left: calc(-1 * var(--ic-space-xs));\n  z-index: 1;\n}\n\n:host(.navigation-item-side-menu-selected) .link::before,\n:host(.navigation-item-side-menu) ::slotted(a.active)::before,\n:host(.navigation-item-side-menu-selected) .link:focus::before,\n:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before {\n  z-index: 1;\n}\n\n:host(.navigation-item-side-menu-selected) .link:focus::before,\n:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before,\n:host(.navigation-item-top-nav-child) ::slotted(a.active:focus)::before {\n  left: calc(-1 * var(--ic-space-xs));\n}\n\n:host(.navigation-item-side-menu-selected) .link::after {\n  display: none;\n}\n\n:host(.navigation-item-side-nav-collapsed) .link {\n  height: 100%;\n}\n\n:host(.navigation-item-side-nav-collapsed) ::slotted(svg),\n:host(.navigation-item-side-nav-collapsed-with-label) ::slotted(svg) {\n  margin: auto;\n  pointer-events: none;\n}\n\n:host(.navigation-item-side-nav-collapsed) .icon,\n:host(.navigation-item-side-nav-collapsed-with-label) .icon,\n:host(.navigation-item-side-nav-collapsed-with-label) ic-typography {\n  align-items: center;\n  padding: 0;\n  margin: auto 0;\n  width: fit-content;\n  pointer-events: none;\n}\n\n:host(.navigation-item-side-nav-collapsed-with-label) ic-typography {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  width: 100%;\n  text-align: center;\n}\n\n:host(.navigation-item-side-nav-collapsed-with-label) .link,\n:host(.navigation-item-side-nav-collapsed-with-label) ::slotted(a) {\n  display: flex;\n  flex-direction: column;\n  height: fit-content;\n  padding: var(--ic-space-xs) !important;\n  gap: var(--ic-space-xxs);\n}\n\n:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label)\n  .link,\n:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label)\n  ::slotted(a) {\n  height: auto !important;\n  gap: 0;\n}\n\n:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label)\n  ::slotted(a) {\n  display: block;\n  text-align: center;\n}\n\n:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label)\n  .link\n  ic-typography {\n  opacity: 1;\n}\n\n:host(.navigation-item-side-nav-collapsed) svg,\n:host(.navigation-item-side-nav-collapsed-with-label) svg {\n  display: none;\n}\n\n::slotted(svg) {\n  fill: var(--ic-theme-text);\n  width: var(--ic-space-lg);\n  margin-left: var(--ic-space-md);\n}\n\n.icon {\n  width: var(--ic-space-xxl);\n  margin-left: calc(-1 * var(--ic-space-md));\n  flex: 0 1 0%;\n}\n\n:host(.navigation-item-side-nav) .link,\n:host(.navigation-item-side-nav) ::slotted(a) {\n  height: var(--navigation-item-height);\n  width: var(--navigation-item-width);\n  justify-content: var(--navigation-item-justify-content);\n  display: flex;\n  gap: var(--ic-space-xs);\n  box-sizing: border-box;\n  color: var(--navigation-item-child-color) !important;\n  text-decoration: none !important;\n  white-space: nowrap;\n}\n\n:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link,\n:host(.navigation-item-side-nav.navigation-item-top-nav-child) ::slotted(a) {\n  height: var(--navigation-item-child-height);\n  width: var(--navigation-group-width);\n  color: var(--navigation-item-child-color) !important;\n  display: flex;\n  gap: 10px;\n  box-sizing: border-box;\n  min-width: 0;\n  transition: box-shadow var(--ic-easing-transition-fast);\n  text-decoration: none !important;\n  white-space: nowrap;\n}\n\n:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link:focus,\n:host(.navigation-item-side-nav.navigation-item-top-nav-child)\n  ::slotted(a:focus) {\n  box-shadow: var(--ic-border-focus-dark);\n}\n\n:host(.navigation-item-side-nav.navigation-item-side-menu) .link:active {\n  background-color: var(--navigation-item-child-active);\n}\n\n:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link:active,\n:host(.navigation-item-side-nav.navigation-item-top-nav-child)\n  ::slotted(a:active) {\n  background-color: var(--navigation-item-child-active);\n}\n\n:host(.navigation-item-side-nav) a.link ic-typography,\n:host(.navigation-item-side-nav.navigation-item-top-nav-child)\n  a.link\n  ic-typography,\n.navigation-item-side-nav-slotted-text {\n  opacity: var(--navigation-item-label-opacity);\n  transition: opacity var(--ic-easing-transition-slow);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link,\n:host(.navigation-item-side-nav.navigation-item) ::slotted(a.active) {\n  box-shadow: inset 5px 0 0 var(--ic-theme-text);\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link::before,\n:host(.navigation-item-side-nav) ::slotted(a.active)::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 5px;\n  border-radius: 11px !important;\n  bottom: 0;\n  transition: var(--ic-easing-transition-slow);\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link:focus::before,\n:host(.navigation-item-side-nav) ::slotted(a.active:focus)::before {\n  box-shadow: var(--ic-border-focus-inset);\n}\n\n:host(:not(.navigation-item-side-nav-collapsed).navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label)\n  .link {\n  opacity: var(--navigation-item-label-opacity);\n  height: auto;\n}\n\n:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label)\n  .link,\n:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label)\n  ::slotted(a) {\n  min-width: var(--navigation-group-item-min-width);\n  padding: var(--ic-space-xs) !important;\n  height: auto;\n  gap: 0;\n}\n\n:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label)\n  ::slotted(a) {\n  display: block;\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link::after,\n:host(.navigation-item-side-nav) ::slotted(a.active)::after {\n  display: none;\n}\n\n:host(.navigation-item-side-nav.navigation-item) .link:focus,\n:host(.navigation-item-side-nav.navigation-item) ::slotted(a:focus) {\n  box-shadow: var(--ic-border-focus-inset);\n  border-radius: var(--ic-border-radius-inset);\n  background-color: transparent;\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link:focus,\n:host(.navigation-item-side-nav) ::slotted(a.active:focus) {\n  margin: 0 auto;\n  box-shadow: inset 5px 0 0 var(--ic-theme-text);\n  border-radius: 0;\n}\n\n:host(.navigation-item-side-nav.navigation-item) .link:hover:not(:focus) {\n  background-color: var(--ic-theme-hover) !important;\n}\n\n:host(.navigation-item-page-header).link,\n:host(.navigation-item-page-header) a,\n:host(.navigation-item-page-header) ::slotted(a) {\n  height: 44px !important;\n  color: var(--ic-color-primary-text) !important;\n  transition: all var(--ic-easing-transition-fast) !important;\n  box-shadow: rgba(23 89 188 / 0%) !important;\n}\n\n:host(.navigation-item-page-header.navigation-item-selected) .link,\n:host(.navigation-item-page-header) ::slotted(a.active) {\n  box-shadow: inset 0 calc(-1 * var(--ic-space-xxs)) 0 var(--ic-action-default);\n}\n\n:host(.navigation-item-page-header) .link:hover,\n:host(.navigation-item-page-header) ::slotted(.link:hover),\n:host(.navigation-item-page-header) ::slotted(a:hover),\n:host(.navigation-item-page-header) .link:hover:not(:focus) {\n  background-color: var(--ic-action-default-bg-hover) !important;\n  cursor: pointer;\n}\n\n:host(.navigation-item-page-header) .link:focus,\n:host(.navigation-item-page-header) ::slotted(a:focus) {\n  box-shadow: var(--ic-border-focus);\n}\n\n:host(.navigation-item-page-header) .link:active,\n:host(.navigation-item-page-header) ::slotted(a:active) {\n  background-color: var(--ic-action-default-bg-active) !important;\n}\n\n:host(.navigation-item-page-header.navigation-item-selected) .link:focus,\n:host(.navigation-item-page-header) ::slotted(a.active:focus) {\n  box-shadow: var(--ic-border-focus),\n    inset 0 calc(-1 * var(--ic-space-xxs)) 0 var(--ic-action-default);\n}\n\n:host(.navigation-item-page-header.navigation-item-selected.with-transition)\n  .link,\n:host(.navigation-item-page-header.navigation-item-selected.with-transition)\n  ::slotted(a.active) {\n  transition: all var(--ic-easing-transition-fast),\n    border-color var(--ic-transition-duration-fast);\n}\n\n:host(.navigation-item-page-header) ::slotted(a.active)::before,\n:host(.navigation-item-page-header) ::slotted(a.active:focus)::before,\n:host(.navigation-item-page-header.navigation-item-selected)\n  .link:focus::before {\n  display: none;\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Listen,\n  Method,\n  h,\n  Host,\n  Prop,\n  State,\n} from \"@stencil/core\";\n\nimport {\n  DEVICE_SIZES,\n  getCurrentDeviceSize,\n  getThemeForegroundColor,\n  getParentElementType,\n  getNavItemParentDetails,\n} from \"../../utils/helpers\";\nimport { IcNavType, IcTheme } from \"../../utils/types\";\n\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\n\n/**\n * @part link - The `<a>` within ic-navigation-item\n */\n\n@Component({\n  tag: \"ic-navigation-item\",\n  styleUrl: \"ic-navigation-item.css\",\n  shadow: true,\n})\nexport class NavigationItem {\n  @Element() el: HTMLIcNavigationItemElement;\n\n  /**\n   *  Label of the navigation item\n   */\n  @Prop() label: string;\n\n  /**\n   *  Destination of the navigation item\n   */\n  @Prop() href: string = \"\";\n\n  /**\n   *  If true, sets the navigation item in a selected state\n   */\n  @Prop() selected: boolean = false;\n\n  /**\n   *  @internal Whether the navigation item is expandable\n   */\n  @Prop() expandable: boolean = false;\n  /**\n   * @internal display navigation item within tooltip\n   */\n  @Prop() displayNavigationTooltip: boolean = false;\n  /**\n   * @internal display icon and label when side navigation is collapsed\n   */\n  @Prop() collapsedIconLabel: boolean = false;\n\n  @State() isTopNavChild: boolean = false;\n  @State() inTopNavSideMenu: boolean = false;\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() focusStyle = getThemeForegroundColor();\n  @State() navigationType: IcNavType | \"\";\n  @State() parentEl: HTMLElement;\n  @State() sideNavExpanded: boolean = false;\n  @State() isSideNavMobile: boolean = false;\n\n  private itemEl: HTMLElement;\n  private navigationSlot: HTMLElement;\n\n  /**\n   * @internal - Emitted when item loses focus.\n   */\n  @Event() childBlur: EventEmitter<void>;\n\n  /**\n   * @internal - Emitted when navigation item clicked.\n   */\n  @Event() icNavItemClicked: EventEmitter<void>;\n\n  @Listen(\"icThemeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.focusStyle = theme.mode;\n  }\n\n  private topNavResizedHandler = (ev: CustomEvent): void => {\n    const newSize = ev.detail.size;\n    if (newSize !== this.deviceSize) {\n      this.deviceSize = newSize;\n      this.inTopNavSideMenu = newSize <= DEVICE_SIZES.L;\n    }\n  };\n\n  private sideNavExpandHandler = (ev: CustomEvent): void => {\n    const { sideNavExpanded, sideNavMobile } = ev.detail;\n    this.sideNavExpanded = sideNavExpanded;\n    this.isSideNavMobile = sideNavMobile;\n  };\n\n  /**\n   * Sets focus on the nav item\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.itemEl) {\n      this.itemEl.focus();\n    }\n  }\n\n  private handleBlur = (ev: FocusEvent) => {\n    if (ev.relatedTarget !== null) {\n      const target = ev.relatedTarget as HTMLElement;\n      if (target.tagName === \"IC-NAVIGATION-ITEM\") {\n        return;\n      }\n    }\n    this.childBlur.emit();\n  };\n\n  private handleClick = () => {\n    this.icNavItemClicked.emit();\n  };\n\n  componentWillLoad(): void {\n    const navParentDetails = getNavItemParentDetails(this.el);\n    this.navigationType = navParentDetails.navType;\n    this.parentEl = navParentDetails.parent;\n\n    if (this.navigationType === \"side\") {\n      this.parentEl.addEventListener(\n        \"sideNavExpanded\",\n        this.sideNavExpandHandler\n      );\n    } else if (this.navigationType === \"top\") {\n      this.parentEl.addEventListener(\n        \"topNavResized\",\n        this.topNavResizedHandler\n      );\n    }\n\n    if (\n      getParentElementType(this.el) === \"IC-NAVIGATION-GROUP\" &&\n      this.navigationType === \"top\"\n    ) {\n      this.isTopNavChild = true;\n    }\n\n    this.deviceSize = getCurrentDeviceSize();\n    if (this.deviceSize <= DEVICE_SIZES.L && this.navigationType === \"top\") {\n      this.inTopNavSideMenu = true;\n    }\n\n    this.navigationSlot = this.el.querySelector('[slot=\"navigation-item\"]');\n    if (this.navigationSlot) {\n      this.navigationSlot.ariaLabel = this.navigationSlot.textContent.trim();\n    }\n  }\n\n  private isInitialRender: boolean = true;\n\n  componentDidUpdate(): void {\n    this.isInitialRender = false;\n  }\n\n  disconnectedCallback(): void {\n    if (this.navigationType === \"side\") {\n      this.parentEl.removeEventListener(\n        \"sideNavExpanded\",\n        this.sideNavExpandHandler\n      );\n    } else if (this.navigationType === \"top\") {\n      this.parentEl.removeEventListener(\n        \"topNavResized\",\n        this.topNavResizedHandler\n      );\n    }\n  }\n\n  private displayDefaultNavigationItem = (\n    href: string,\n    label: string\n  ): HTMLElement => {\n    const variant =\n      this.isTopNavChild || this.inTopNavSideMenu ? \"body\" : \"label\";\n    const tooltipId = \"ic-tooltip-navigation-item\";\n    const ChevronIconComponent = this.expandable && (\n      <div class={{ svg: true }} innerHTML={chevronIcon}></div>\n    );\n    const IconComponent = this.el.querySelector('[slot=\"icon\"]') && (\n      <div class=\"icon\">\n        {\" \"}\n        <slot name=\"icon\"></slot>{\" \"}\n      </div>\n    );\n\n    if (href !== \"\") {\n      return (\n        <a\n          href={href}\n          class=\"link\"\n          ref={(el) => (this.itemEl = el)}\n          part=\"link\"\n          aria-labelledby={tooltipId}\n        >\n          {IconComponent}\n\n          <ic-typography variant={variant}>{label}</ic-typography>\n          {ChevronIconComponent}\n        </a>\n      );\n    }\n\n    return (\n      <div\n        tabindex=\"0\"\n        class=\"link\"\n        ref={(el) => (this.itemEl = el)}\n        aria-labelledby={tooltipId}\n      >\n        {IconComponent}\n        <ic-typography variant={variant}>{label}</ic-typography>\n        {ChevronIconComponent}\n      </div>\n    );\n  };\n\n  render() {\n    const {\n      href,\n      label,\n      inTopNavSideMenu,\n      isTopNavChild,\n      selected,\n      navigationSlot,\n    } = this;\n\n    return (\n      <Host\n        class={{\n          [\"navigation-item\"]: true,\n          [\"navigation-item-top-nav\"]:\n            !inTopNavSideMenu && this.navigationType === \"top\",\n          [\"navigation-item-top-nav-child-selected\"]:\n            isTopNavChild && !inTopNavSideMenu && selected,\n          [this.focusStyle]:\n            (!inTopNavSideMenu && !isTopNavChild) ||\n            (this.navigationType === \"side\" && isTopNavChild),\n          [\"navigation-item-selected\"]: !isTopNavChild && selected,\n          [\"navigation-item-side-menu\"]: inTopNavSideMenu,\n          [\"navigation-item-side-menu-selected\"]: inTopNavSideMenu && selected,\n          [\"navigation-item-top-nav-child\"]: isTopNavChild && !inTopNavSideMenu,\n          [\"navigation-item-page-header\"]:\n            this.navigationType === \"page-header\",\n          [\"with-transition\"]: !this.isInitialRender,\n          [\"navigation-item-side-nav\"]: this.navigationType === \"side\",\n          [\"navigation-item-side-nav-collapsed\"]:\n            (!this.sideNavExpanded || this.displayNavigationTooltip) &&\n            this.navigationType === \"side\",\n          [\"navigation-item-side-nav-collapsed-with-label\"]:\n            !this.sideNavExpanded &&\n            this.navigationType === \"side\" &&\n            this.collapsedIconLabel &&\n            !this.isSideNavMobile,\n        }}\n        onBlur={isTopNavChild && !inTopNavSideMenu ? this.handleBlur : null}\n        onClick={this.handleClick}\n        aria-current={selected ? \"page\" : null}\n        role=\"listitem\"\n      >\n        {/* Tooltip enabled by applying navigation-item-side-nav-collapsed class to host */}\n        <ic-tooltip\n          label={label || navigationSlot.textContent}\n          elementId=\"navigation-item\"\n          placement=\"right\"\n          class={{\n            [\"tooltip-navigation-item\"]: true,\n            [\"tooltip-navigation-item-side-nav-collapsed\"]:\n              (!this.sideNavExpanded || this.displayNavigationTooltip) &&\n              this.navigationType === \"side\",\n            [\"tooltip-long-label-navigation-item-side-nav-expanded\"]:\n              this.el.hasAttribute(\"[display-navigation-tooltip = 'true']\"),\n          }}\n        >\n          {navigationSlot ? (\n            <slot name=\"navigation-item\"></slot>\n          ) : (\n            this.displayDefaultNavigationItem(href, label)\n          )}\n        </ic-tooltip>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-navigation-item.js","mappings":"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","names":[],"sources":["./src/components/ic-navigation-item/ic-navigation-item.css?tag=ic-navigation-item&encapsulation=shadow","./src/components/ic-navigation-item/ic-navigation-item.tsx"],"sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n  display: block;\n}\n\n:host(:focus-within) {\n  z-index: 1;\n}\n\n/* chevron */\nsvg {\n  width: var(--ic-space-xl);\n  fill: var(--ic-theme-text);\n}\n\nic-typography {\n  flex: 1;\n}\n\n:host([expandable].navigation-item) .link,\n:host([expandable].navigation-item) ::slotted(a) {\n  padding-right: 0;\n}\n\n:host(.navigation-item) .link,\n:host(.navigation-item) ::slotted(a) {\n  height: 100%;\n  width: fit-content;\n  color: var(--ic-theme-text);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 var(--ic-space-md);\n  text-decoration: none;\n  transition: var(--ic-easing-transition-fast);\n  position: relative;\n}\n\n:host(.navigation-item) ::slotted(a) {\n  font: var(--ic-font-label) !important;\n  letter-spacing: var(--ic-font-letter-spacing-0pt025) !important;\n  padding: 0 var(--ic-space-md) !important;\n}\n\n:host(.navigation-item-selected) .link::after,\n:host(.navigation-item-selected) ::slotted(a.active)::after,\n:host(.navigation-item-top-nav) ::slotted(a.active)::after {\n  content: \"\";\n  height: 4px;\n  width: 100%;\n  position: absolute;\n  bottom: 0;\n  background-color: var(--ic-theme-text);\n}\n\n:host(.navigation-item-selected.navigation-item-page-header)\n  ::slotted(a.active)::after,\n:host(.navigation-item-selected.navigation-item-page-header) .link::after,\n:host(.navigation-item.navigation-item-page-header) ::slotted(a.active)::after,\n:host(.navigation-item-top-nav-child) ::slotted(a.active)::after {\n  content: none;\n}\n\n:host(.navigation-item-side-menu-selected) .link,\n:host(.navigation-item-side-menu) ::slotted(a.active),\n:host(.navigation-item-top-nav-child) ::slotted(a.active) {\n  box-shadow: none;\n}\n\n:host(.navigation-item) .link:hover:not(:focus) {\n  background-color: var(--ic-theme-hover);\n  cursor: pointer;\n}\n\n:host(.navigation-item:not(.navigation-item-page-header, .navigation-item-side-menu))\n  ::slotted(a:hover:not(:focus)) {\n  background-color: var(--ic-theme-hover) !important;\n}\n\n:host(.navigation-item:not(.navigation-item-top-nav-child, .navigation-item-side-menu, .navigation-item-top-nav-child-selected\n      .navigation-item-side-menu-selected))\n  .focus-indicator:focus-within {\n  box-shadow: var(--ic-border-focus);\n  border-radius: var(--ic-border-radius);\n}\n\n:host(.navigation-item) .link:focus,\n:host(.navigation-item) ::slotted(a:focus) {\n  box-shadow: var(--ic-border-focus);\n  border-radius: var(--ic-border-radius);\n  outline: none;\n}\n\n:host(.navigation-item-selected) .link:focus,\n:host(.navigation-item) ::slotted(a.active:focus) {\n  box-shadow: var(--ic-border-focus);\n  border-radius: var(--ic-border-radius);\n  outline: none;\n}\n\n:host(.navigation-item-selected.dark) .link:focus,\n:host(.navigation-item.dark) ::slotted(a.active:focus) {\n  box-shadow: var(--ic-border-focus);\n  border-radius: var(--ic-border-radius);\n  outline: none;\n}\n\n:host(.navigation-item) .link:active:not(:focus),\n:host(.navigation-item) ::slotted(a:active:not(:focus)) {\n  background-color: var(--ic-theme-active);\n}\n\n:host(.navigation-item-side-menu) .link,\n:host(.navigation-item-side-menu) ::slotted(a) {\n  height: 40px;\n  width: 100%;\n  color: var(--ic-color-primary-text);\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  text-decoration: none;\n  transition: var(--ic-transition-duration-fast);\n}\n\n:host(.navigation-item-side-menu) ::slotted(a) {\n  font: var(--ic-font-body) !important;\n  letter-spacing: var(--ic-font-letter-spacing-0pt005) !important;\n  transition: box-shadow var(--ic-easing-transition-fast),\n    background-color var(--ic-easing-transition-fast);\n}\n\n:host(.navigation-item-side-menu) .link:hover:not(:focus) {\n  background-color: var(--ic-action-dark-bg-hover);\n}\n\n:host(.navigation-item-side-menu) ::slotted(a:hover:not(:focus)) {\n  background-color: var(--ic-action-dark-bg-hover) !important;\n}\n\n:host(.navigation-item-side-menu) .focus-indicator:focus-within {\n  box-shadow: none;\n}\n\n:host(.navigation-item-side-menu) .link:focus,\n:host(.navigation-item-side-menu) ::slotted(a:focus) {\n  box-shadow: var(--ic-border-focus-inset) !important;\n  padding-right: var(--ic-space-lg);\n  width: auto;\n  border-radius: var(--ic-border-radius-inset) !important;\n}\n\n:host(.navigation-item-side-menu-selected) .link,\n:host(.navigation-item-side-menu-selected) ::slotted(a) {\n  transition: box-shadow var(--ic-easing-transition-slow),\n    background-color var(--ic-easing-transition-slow);\n}\n\n:host(.navigation-item-side-menu-selected) .link:focus,\n:host(.navigation-item-side-menu) ::slotted(a.active:focus),\n:host(.navigation-item-top-nav-child) ::slotted(a.active:focus) {\n  margin-left: var(--ic-space-xs) !important;\n  padding-left: var(--ic-space-xs) !important;\n}\n\n:host(.navigation-item-top-nav-child) .link,\n:host(.navigation-item-top-nav-child) ::slotted(a) {\n  height: 40px;\n  width: fit-content;\n  min-width: 145px;\n  color: var(--ic-color-primary-text);\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  padding: 0 var(--ic-space-md) !important;\n  text-decoration: none;\n  position: relative;\n  transition: box-shadow var(--ic-transition-duration-fast),\n    border-radius var(--ic-transition-duration-slow);\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a) {\n  font: var(--ic-font-body) !important;\n  letter-spacing: var(--ic-font-letter-spacing-0pt005) !important;\n}\n\n:host(.navigation-item-top-nav-child) .link:hover:not(:focus) {\n  background-color: var(--ic-action-dark-bg-hover) !important;\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a:hover):not(:focus) {\n  background-color: var(--ic-action-dark-bg-hover) !important;\n}\n\n:host(.navigation-item-top-nav-child) .link:focus,\n:host(.navigation-item-top-nav-child) ::slotted(a:focus) {\n  z-index: 1;\n  outline: none;\n  border-radius: var(--ic-border-radius-inset);\n  box-shadow: var(--ic-border-focus-inset);\n  transition: border-radius 0s, box-shadow var(--ic-transition-duration-fast);\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a.active:focus) {\n  box-shadow: var(--ic-border-focus-inset);\n  border-radius: var(--ic-border-radius-inset);\n}\n\n:host(.navigation-item-side-menu) .link:active:not(:focus) {\n  background-color: var(--ic-action-dark-bg-active);\n}\n\n:host(.navigation-item-top-nav-child) .link:active:not(:focus),\n:host(.navigation-item-top-nav-child) ::slotted(a:active):not(:focus) {\n  outline: none;\n  background-color: var(--ic-action-dark-bg-active);\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a:active):not(:focus),\n:host(.navigation-item-side-menu) ::slotted(a:active):not(:focus) {\n  background-color: var(--ic-action-dark-bg-active) !important;\n}\n\n:host(.navigation-item-side-menu-selected) *,\n:host(.navigation-item-top-nav-child-selected) *,\n:host(.navigation-item-side-menu) ::slotted(a.active),\n:host(.navigation-item-top-nav-child) ::slotted(a.active) {\n  font-weight: 700 !important;\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a.active)::before,\n:host(.navigation-item-top-nav-child-selected) .link::before,\n:host(.navigation-item-side-menu-selected) .link::before,\n:host(.navigation-item-side-menu) ::slotted(a.active)::before,\n:host(.navigation-item-side-menu-selected) .link:focus::before,\n:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  width: var(--ic-space-xs);\n  height: 40px;\n  margin-right: 5px;\n  background-color: var(--ic-action-default);\n  transition: left 0s;\n}\n\n:host(.navigation-item-top-nav-child-selected) .link:focus {\n  margin-left: var(--ic-space-xs);\n  margin-right: calc(-1 * var(--ic-space-xs));\n  padding-left: var(--ic-space-xs) !important;\n}\n\n:host(.navigation-item-top-nav-child-selected) .link:focus::before {\n  left: calc(-1 * var(--ic-space-xs));\n  z-index: 1;\n}\n\n:host(.navigation-item-side-menu-selected) .link::before,\n:host(.navigation-item-side-menu) ::slotted(a.active)::before,\n:host(.navigation-item-side-menu-selected) .link:focus::before,\n:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before {\n  z-index: 1;\n}\n\n:host(.navigation-item-side-menu-selected) .link:focus::before,\n:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before,\n:host(.navigation-item-top-nav-child) ::slotted(a.active:focus)::before {\n  left: calc(-1 * var(--ic-space-xs));\n}\n\n:host(.navigation-item-side-menu-selected) .link::after {\n  display: none;\n}\n\n:host(.navigation-item-side-nav-collapsed) .link {\n  height: 100%;\n}\n\n:host(.navigation-item-side-nav-collapsed) ::slotted(svg),\n:host(.navigation-item-side-nav-collapsed-with-label) ::slotted(svg) {\n  margin: auto;\n  pointer-events: none;\n}\n\n:host(.navigation-item-side-nav-collapsed) .icon,\n:host(.navigation-item-side-nav-collapsed-with-label) .icon,\n:host(.navigation-item-side-nav-collapsed-with-label) ic-typography {\n  align-items: center;\n  padding: 0;\n  margin: auto 0;\n  width: fit-content;\n  pointer-events: none;\n}\n\n:host(.navigation-item-side-nav-collapsed-with-label) ic-typography {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  width: 100%;\n  text-align: center;\n}\n\n:host(.navigation-item-side-nav-collapsed-with-label) .link,\n:host(.navigation-item-side-nav-collapsed-with-label) ::slotted(a) {\n  display: flex;\n  flex-direction: column;\n  height: fit-content;\n  padding: var(--ic-space-xs) !important;\n  gap: var(--ic-space-xxs);\n}\n\n:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label)\n  .link,\n:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label)\n  ::slotted(a) {\n  height: auto !important;\n  gap: 0;\n}\n\n:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label)\n  ::slotted(a) {\n  display: block;\n  text-align: center;\n}\n\n:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label)\n  .link\n  ic-typography {\n  opacity: 1;\n}\n\n:host(.navigation-item-side-nav-collapsed) svg,\n:host(.navigation-item-side-nav-collapsed-with-label) svg {\n  display: none;\n}\n\n::slotted(svg) {\n  fill: var(--ic-theme-text);\n  width: var(--ic-space-lg);\n  margin-left: var(--ic-space-md);\n}\n\n.icon {\n  width: var(--ic-space-xxl);\n  margin-left: calc(-1 * var(--ic-space-md));\n  flex: 0 1 0%;\n}\n\n:host(.navigation-item-side-nav) .link,\n:host(.navigation-item-side-nav) ::slotted(a) {\n  height: var(--navigation-item-height);\n  width: var(--navigation-item-width);\n  justify-content: var(--navigation-item-justify-content);\n  display: flex;\n  gap: var(--ic-space-xs);\n  box-sizing: border-box;\n  color: var(--navigation-item-child-color) !important;\n  text-decoration: none !important;\n  white-space: nowrap;\n}\n\n:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link,\n:host(.navigation-item-side-nav.navigation-item-top-nav-child) ::slotted(a) {\n  height: var(--navigation-item-child-height);\n  width: var(--navigation-group-width);\n  color: var(--navigation-item-child-color) !important;\n  display: flex;\n  gap: 10px;\n  box-sizing: border-box;\n  min-width: 0;\n  transition: box-shadow var(--ic-easing-transition-fast);\n  text-decoration: none !important;\n  white-space: nowrap;\n}\n\n:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link:focus,\n:host(.navigation-item-side-nav.navigation-item-top-nav-child)\n  ::slotted(a:focus) {\n  box-shadow: var(--ic-border-focus-dark);\n}\n\n:host(.navigation-item-side-nav.navigation-item-side-menu) .link:active {\n  background-color: var(--navigation-item-child-active);\n}\n\n:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link:active,\n:host(.navigation-item-side-nav.navigation-item-top-nav-child)\n  ::slotted(a:active) {\n  background-color: var(--navigation-item-child-active);\n}\n\n:host(.navigation-item-side-nav) a.link ic-typography,\n:host(.navigation-item-side-nav.navigation-item-top-nav-child)\n  a.link\n  ic-typography,\n.navigation-item-side-nav-slotted-text {\n  opacity: var(--navigation-item-label-opacity);\n  transition: opacity var(--ic-easing-transition-slow);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link,\n:host(.navigation-item-side-nav.navigation-item) ::slotted(a.active) {\n  box-shadow: inset 5px 0 0 var(--ic-theme-text);\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link::before,\n:host(.navigation-item-side-nav) ::slotted(a.active)::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 5px;\n  border-radius: 11px !important;\n  bottom: 0;\n  transition: var(--ic-easing-transition-slow);\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link:focus::before,\n:host(.navigation-item-side-nav) ::slotted(a.active:focus)::before {\n  box-shadow: var(--ic-border-focus-inset);\n}\n\n:host(:not(.navigation-item-side-nav-collapsed).navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label)\n  .link {\n  opacity: var(--navigation-item-label-opacity);\n  height: auto;\n}\n\n:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label)\n  .link,\n:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label)\n  ::slotted(a) {\n  min-width: var(--navigation-group-item-min-width);\n  padding: var(--ic-space-xs) !important;\n  height: auto;\n  gap: 0;\n}\n\n:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label)\n  ::slotted(a) {\n  display: block;\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link::after,\n:host(.navigation-item-side-nav) ::slotted(a.active)::after {\n  display: none;\n}\n\n:host(.navigation-item-side-nav.navigation-item) .link:focus,\n:host(.navigation-item-side-nav.navigation-item) ::slotted(a:focus) {\n  box-shadow: var(--ic-border-focus-inset);\n  border-radius: var(--ic-border-radius-inset);\n  background-color: transparent;\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link:focus,\n:host(.navigation-item-side-nav) ::slotted(a.active:focus) {\n  margin: 0 auto;\n  box-shadow: inset 5px 0 0 var(--ic-theme-text);\n  border-radius: 0;\n}\n\n:host(.navigation-item-side-nav.navigation-item) .link:hover:not(:focus) {\n  background-color: var(--ic-theme-hover) !important;\n}\n\n:host(.navigation-item-page-header).link,\n:host(.navigation-item-page-header) a,\n:host(.navigation-item-page-header) ::slotted(a) {\n  height: 44px !important;\n  color: var(--ic-color-primary-text) !important;\n  transition: all var(--ic-easing-transition-fast) !important;\n  box-shadow: rgba(23 89 188 / 0%) !important;\n}\n\n:host(.navigation-item-page-header.navigation-item-selected) .link,\n:host(.navigation-item-page-header) ::slotted(a.active) {\n  box-shadow: inset 0 calc(-1 * var(--ic-space-xxs)) 0 var(--ic-action-default);\n}\n\n:host(.navigation-item-page-header) .link:hover,\n:host(.navigation-item-page-header) ::slotted(.link:hover),\n:host(.navigation-item-page-header) ::slotted(a:hover),\n:host(.navigation-item-page-header) .link:hover:not(:focus) {\n  background-color: var(--ic-action-default-bg-hover) !important;\n  cursor: pointer;\n}\n\n:host(.navigation-item-page-header) .link:focus,\n:host(.navigation-item-page-header) ::slotted(a:focus) {\n  box-shadow: var(--ic-border-focus);\n}\n\n:host(.navigation-item-page-header) .link:active,\n:host(.navigation-item-page-header) ::slotted(a:active) {\n  background-color: var(--ic-action-default-bg-active) !important;\n}\n\n:host(.navigation-item-page-header.navigation-item-selected) .link:focus,\n:host(.navigation-item-page-header) ::slotted(a.active:focus) {\n  box-shadow: var(--ic-border-focus),\n    inset 0 calc(-1 * var(--ic-space-xxs)) 0 var(--ic-action-default);\n}\n\n:host(.navigation-item-page-header.navigation-item-selected.with-transition)\n  .link,\n:host(.navigation-item-page-header.navigation-item-selected.with-transition)\n  ::slotted(a.active) {\n  transition: all var(--ic-easing-transition-fast),\n    border-color var(--ic-transition-duration-fast);\n}\n\n:host(.navigation-item-page-header) ::slotted(a.active)::before,\n:host(.navigation-item-page-header) ::slotted(a.active:focus)::before,\n:host(.navigation-item-page-header.navigation-item-selected)\n  .link:focus::before {\n  display: none;\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Listen,\n  Method,\n  h,\n  Host,\n  Prop,\n  State,\n} from \"@stencil/core\";\n\nimport {\n  DEVICE_SIZES,\n  getCurrentDeviceSize,\n  getThemeForegroundColor,\n  getParentElementType,\n  getNavItemParentDetails,\n} from \"../../utils/helpers\";\nimport { IcNavType, IcTheme } from \"../../utils/types\";\n\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\n\n/**\n * @part link - The `<a>` within ic-navigation-item\n */\n\n@Component({\n  tag: \"ic-navigation-item\",\n  styleUrl: \"ic-navigation-item.css\",\n  shadow: true,\n})\nexport class NavigationItem {\n  @Element() el: HTMLIcNavigationItemElement;\n\n  /**\n   *  Label of the navigation item\n   */\n  @Prop() label: string;\n\n  /**\n   *  Destination of the navigation item\n   */\n  @Prop() href: string = \"\";\n\n  /**\n   *  If true, sets the navigation item in a selected state\n   */\n  @Prop() selected: boolean = false;\n\n  /**\n   *  @internal Whether the navigation item is expandable\n   */\n  @Prop() expandable: boolean = false;\n  /**\n   * @internal display navigation item within tooltip\n   */\n  @Prop() displayNavigationTooltip: boolean = false;\n  /**\n   * @internal display icon and label when side navigation is collapsed\n   */\n  @Prop() collapsedIconLabel: boolean = false;\n\n  @State() isTopNavChild: boolean = false;\n  @State() inTopNavSideMenu: boolean = false;\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() focusStyle = getThemeForegroundColor();\n  @State() navigationType: IcNavType | \"\";\n  @State() parentEl: HTMLElement;\n  @State() sideNavExpanded: boolean = false;\n  @State() isSideNavMobile: boolean = false;\n\n  private itemEl: HTMLElement;\n  private navigationSlot: HTMLElement;\n\n  /**\n   * @internal - Emitted when item loses focus.\n   */\n  @Event() childBlur: EventEmitter<void>;\n\n  /**\n   * @internal - Emitted when navigation item clicked.\n   */\n  @Event() icNavItemClicked: EventEmitter<void>;\n\n  @Listen(\"icThemeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.focusStyle = theme.mode;\n  }\n\n  private topNavResizedHandler = (ev: CustomEvent): void => {\n    const newSize = ev.detail.size;\n    if (newSize !== this.deviceSize) {\n      this.deviceSize = newSize;\n      this.inTopNavSideMenu = newSize <= DEVICE_SIZES.L;\n    }\n  };\n\n  private sideNavExpandHandler = (ev: CustomEvent): void => {\n    const { sideNavExpanded, sideNavMobile } = ev.detail;\n    this.sideNavExpanded = sideNavExpanded;\n    this.isSideNavMobile = sideNavMobile;\n  };\n\n  /**\n   * Sets focus on the nav item\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.itemEl) {\n      this.itemEl.focus();\n    }\n  }\n\n  private handleBlur = (ev: FocusEvent) => {\n    if (ev.relatedTarget !== null) {\n      const target = ev.relatedTarget as HTMLElement;\n      if (target.tagName === \"IC-NAVIGATION-ITEM\") {\n        return;\n      }\n    }\n    this.childBlur.emit();\n  };\n\n  private handleClick = () => {\n    this.icNavItemClicked.emit();\n  };\n\n  componentWillLoad(): void {\n    const navParentDetails = getNavItemParentDetails(this.el);\n    this.navigationType = navParentDetails.navType;\n    this.parentEl = navParentDetails.parent;\n\n    if (this.navigationType === \"side\") {\n      this.parentEl.addEventListener(\n        \"sideNavExpanded\",\n        this.sideNavExpandHandler\n      );\n    } else if (this.navigationType === \"top\") {\n      this.parentEl.addEventListener(\n        \"topNavResized\",\n        this.topNavResizedHandler\n      );\n    }\n\n    if (\n      getParentElementType(this.el) === \"IC-NAVIGATION-GROUP\" &&\n      this.navigationType === \"top\"\n    ) {\n      this.isTopNavChild = true;\n    }\n\n    this.deviceSize = getCurrentDeviceSize();\n    if (this.deviceSize <= DEVICE_SIZES.L && this.navigationType === \"top\") {\n      this.inTopNavSideMenu = true;\n    }\n\n    this.navigationSlot = this.el.querySelector('[slot=\"navigation-item\"]');\n    if (this.navigationSlot) {\n      this.navigationSlot.ariaLabel = this.navigationSlot.textContent.trim();\n    }\n  }\n\n  private isInitialRender: boolean = true;\n\n  componentDidUpdate(): void {\n    this.isInitialRender = false;\n  }\n\n  disconnectedCallback(): void {\n    if (this.navigationType === \"side\") {\n      this.parentEl.removeEventListener(\n        \"sideNavExpanded\",\n        this.sideNavExpandHandler\n      );\n    } else if (this.navigationType === \"top\") {\n      this.parentEl.removeEventListener(\n        \"topNavResized\",\n        this.topNavResizedHandler\n      );\n    }\n  }\n\n  private displayDefaultNavigationItem = (\n    href: string,\n    label: string\n  ): HTMLElement => {\n    const variant =\n      this.isTopNavChild || this.inTopNavSideMenu ? \"body\" : \"label\";\n    const tooltipId = \"ic-tooltip-navigation-item\";\n    const ChevronIconComponent = this.expandable && (\n      <div class={{ svg: true }} innerHTML={chevronIcon}></div>\n    );\n    const IconComponent = this.el.querySelector('[slot=\"icon\"]') && (\n      <div class=\"icon\">\n        {\" \"}\n        <slot name=\"icon\"></slot>{\" \"}\n      </div>\n    );\n\n    if (href !== \"\") {\n      return (\n        <a\n          href={href}\n          class=\"link\"\n          ref={(el) => (this.itemEl = el)}\n          part=\"link\"\n          aria-labelledby={tooltipId}\n        >\n          {IconComponent}\n\n          <ic-typography variant={variant}>{label}</ic-typography>\n          {ChevronIconComponent}\n        </a>\n      );\n    }\n\n    return (\n      <div\n        tabindex=\"0\"\n        class=\"link\"\n        ref={(el) => (this.itemEl = el)}\n        aria-labelledby={tooltipId}\n      >\n        {IconComponent}\n        <ic-typography variant={variant}>{label}</ic-typography>\n        {ChevronIconComponent}\n      </div>\n    );\n  };\n\n  render() {\n    const {\n      href,\n      label,\n      inTopNavSideMenu,\n      isTopNavChild,\n      selected,\n      navigationSlot,\n    } = this;\n\n    return (\n      <Host\n        class={{\n          [\"navigation-item\"]: true,\n          [\"navigation-item-top-nav\"]:\n            !inTopNavSideMenu && this.navigationType === \"top\",\n          [\"navigation-item-top-nav-child-selected\"]:\n            isTopNavChild && !inTopNavSideMenu && selected,\n          [this.focusStyle]:\n            (!inTopNavSideMenu && !isTopNavChild) ||\n            (this.navigationType === \"side\" && isTopNavChild),\n          [\"navigation-item-selected\"]: !isTopNavChild && selected,\n          [\"navigation-item-side-menu\"]: inTopNavSideMenu,\n          [\"navigation-item-side-menu-selected\"]: inTopNavSideMenu && selected,\n          [\"navigation-item-top-nav-child\"]: isTopNavChild && !inTopNavSideMenu,\n          [\"navigation-item-page-header\"]:\n            this.navigationType === \"page-header\",\n          [\"with-transition\"]: !this.isInitialRender,\n          [\"navigation-item-side-nav\"]: this.navigationType === \"side\",\n          [\"navigation-item-side-nav-collapsed\"]:\n            (!this.sideNavExpanded || this.displayNavigationTooltip) &&\n            this.navigationType === \"side\",\n          [\"navigation-item-side-nav-collapsed-with-label\"]:\n            !this.sideNavExpanded &&\n            this.navigationType === \"side\" &&\n            this.collapsedIconLabel &&\n            !this.isSideNavMobile,\n        }}\n        onBlur={isTopNavChild && !inTopNavSideMenu ? this.handleBlur : null}\n        onClick={this.handleClick}\n        aria-current={selected ? \"page\" : null}\n        role=\"listitem\"\n      >\n        {/* Tooltip enabled by applying navigation-item-side-nav-collapsed class to host */}\n        <ic-tooltip\n          label={label || navigationSlot.textContent}\n          target=\"navigation-item\"\n          placement=\"right\"\n          class={{\n            [\"tooltip-navigation-item\"]: true,\n            [\"tooltip-navigation-item-side-nav-collapsed\"]:\n              (!this.sideNavExpanded || this.displayNavigationTooltip) &&\n              this.navigationType === \"side\",\n            [\"tooltip-long-label-navigation-item-side-nav-expanded\"]:\n              this.el.hasAttribute(\"[display-navigation-tooltip = 'true']\"),\n          }}\n        >\n          {navigationSlot ? (\n            <slot name=\"navigation-item\"></slot>\n          ) : (\n            this.displayDefaultNavigationItem(href, label)\n          )}\n        </ic-tooltip>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/ic-navigation-menu2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { p as getSlotContent, B as getSlot, i as isSlotUsed } from './helpers.js';
+import { n as getSlotContent, A as getSlot, i as isSlotUsed } from './helpers.js';
 import { d as defineCustomElement$4 } from './ic-button2.js';
 import { d as defineCustomElement$3 } from './ic-loading-indicator2.js';
 import { d as defineCustomElement$2 } from './ic-tooltip2.js';
@@ -117,7 +117,7 @@ const NavigationMenu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     return (h(Host, null, h("div", { class: "popout-modal", onClick: this.closeMenu }), h("div", { class: "popout-menu", role: "dialog", "aria-modal": "true", "aria-label": `${this.hasNavigation ? "Navigation" : "App"} menu` }, h("span", { "aria-hidden": "true", id: "navigation-landmark-text", class: "navigation-landmark-text" }, "Main navigation"), h("nav", { "aria-labelledby": "navigation-landmark-text", "aria-hidden": this.hasNavigation ? "false" : "true" }, h("div", { class: {
         ["menu-close-button-container"]: true,
         ["nav-group-first"]: this.navGroupFirst,
-      } }, h("ic-button", { ref: (el) => (this.closeButton = el), id: "menu-close-button", class: "menu-close-button", variant: "icon", size: "emphasis", "aria-label": `Close ${this.hasNavigation ? "navigation" : "app"} menu`, onClick: this.closeMenu }, h("svg", { slot: "icon", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z", fill: "#1759BC" })))), this.hasNavigation && h("slot", { name: "navigation" })), this.hasButtons && (h("div", { class: {
+      } }, h("ic-button", { ref: (el) => (this.closeButton = el), id: "menu-close-button", class: "menu-close-button", variant: "icon", size: "large", "aria-label": `Close ${this.hasNavigation ? "navigation" : "app"} menu`, onClick: this.closeMenu }, h("svg", { slot: "icon", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z", fill: "#1759BC" })))), this.hasNavigation && h("slot", { name: "navigation" })), this.hasButtons && (h("div", { class: {
         ["menu-buttons-container"]: true,
         ["menu-buttons-container-nav-item-above"]: this.navItemAboveButtons,
       } }, h("slot", { name: "buttons" }))), (this.status !== "" || this.version !== "") && (h("div", { class: "menu-status-version-container" }, this.status !== "" && (h("div", { class: "menu-status" }, h("ic-typography", { variant: "label-uppercase", "aria-label": "app tag", class: "menu-status-text" }, this.status))), this.version !== "" && (h("div", { class: "menu-version" }, h("ic-typography", { variant: "label", class: "menu-version-text", "aria-label": "app version" }, this.version))))))));

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

@@ -1 +1 @@
-{"file":"ic-navigation-menu2.js","mappings":"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","names":[],"sources":["./src/components/ic-navigation-menu/ic-navigation-menu.css?tag=ic-navigation-menu&encapsulation=shadow","./src/components/ic-navigation-menu/ic-navigation-menu.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.popout-modal {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n}\n\n.popout-menu {\n  position: fixed;\n  top: 0;\n  right: 0;\n  width: 256px;\n  bottom: 0;\n  background-color: var(--ic-architectural-20);\n  color: var(--ic-color-primary-text);\n  box-shadow: var(--ic-elevation-overlay);\n  overflow-y: auto;\n  overflow-x: hidden;\n  z-index: calc(var(--ic-z-index-overlay) / 2);\n}\n\n:host(.inline) .popout-menu {\n  position: absolute;\n}\n\n.menu-close-button-container {\n  position: relative;\n  left: 190px;\n  padding: var(--ic-space-md) 0;\n}\n\n.nav-group-first {\n  padding-bottom: 0;\n}\n\n.menu-buttons-container {\n  padding: var(--ic-space-sm) 0;\n  border-bottom: 1px solid var(--ic-architectural-200);\n}\n\n.menu-buttons-container-nav-item-above {\n  margin-top: var(--ic-space-md);\n  border-top: 1px solid var(--ic-architectural-200);\n}\n\n.menu-status-version-container {\n  display: inline-flex;\n  margin: var(--ic-space-md) var(--ic-space-md) var(--ic-space-xl);\n}\n\n.menu-status {\n  background-color: var(--ic-architectural-500);\n  color: var(--ic-color-white-text);\n  border-radius: 80px;\n  width: fit-content;\n  padding: var(--ic-space-xxs) var(--ic-space-sm);\n  margin-right: var(--ic-space-xs);\n}\n\n.menu-version {\n  border-radius: 16px;\n  background-color: var(--ic-architectural-100);\n  padding: var(--ic-space-xxs) var(--ic-space-sm);\n}\n\n.menu-status-text,\n.menu-version-text {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-width: 90px;\n}\n\n.navigation-landmark-text {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  Event,\n  EventEmitter,\n  Listen,\n} from \"@stencil/core\";\n\nimport { getSlot, getSlotContent, isSlotUsed } from \"../../utils/helpers\";\n\n/**\n * @slot navigation - Content will be rendered at top of panel.\n * @slot buttons - Content will be rendered above version info and below navigation.\n */\n@Component({\n  tag: \"ic-navigation-menu\",\n  styleUrl: \"ic-navigation-menu.css\",\n  shadow: true,\n})\nexport class NavigationMenu {\n  @Element() el: HTMLIcNavigationMenuElement;\n\n  /**\n   *  Version info to display\n   */\n  @Prop() version: string = \"\";\n\n  /**\n   *  Status info to display\n   */\n  @Prop() status: string = \"\";\n\n  /**\n   * @internal - Emitted when the menu is closed.\n   */\n  @Event() icNavigationMenuClose: EventEmitter<void>;\n\n  @Listen(\"icNavItemClicked\")\n  navItemClickHandler(): void {\n    this.closeMenu();\n  }\n\n  @Listen(\"keydown\", { target: \"document\" })\n  handleKeyDown(ev: KeyboardEvent): void {\n    if (ev.key === \"Tab\") {\n      if (ev.shiftKey) {\n        if (document.activeElement === this.navBarEl) {\n          ev.preventDefault();\n          this.focusLastTabStop();\n        }\n      } else if (\n        document.activeElement === this.lastTabStop ||\n        this.lastTabStop === null\n      ) {\n        ev.preventDefault();\n        this.focusCloseButton();\n      }\n    } else if (ev.key === \"Escape\") {\n      this.closeMenu();\n    }\n  }\n\n  private hasButtons: boolean = false;\n  private hasNavigation: boolean = false;\n  private navItemAboveButtons: boolean = false;\n  private navGroupFirst: boolean = false;\n  private lastTabStop: HTMLElement = null;\n  private closeButton: HTMLIcButtonElement = null;\n  private navBarEl: HTMLIcTopNavigationElement;\n\n  private closeMenu = () => {\n    this.icNavigationMenuClose.emit();\n  };\n\n  private focusCloseButton = () => {\n    if (this.closeButton.setFocus) {\n      this.closeButton.setFocus();\n    }\n  };\n\n  private focusLastTabStop = () => {\n    let focusEl;\n    if (this.lastTabStop !== null) {\n      switch (this.lastTabStop.tagName) {\n        case \"IC-NAVIGATION-BUTTON\":\n          focusEl = this.lastTabStop as HTMLIcNavigationButtonElement;\n          focusEl.setFocus();\n          break;\n        case \"IC-NAVIGATION-ITEM\":\n          focusEl = this.lastTabStop as HTMLIcNavigationItemElement;\n          focusEl.setFocus();\n          break;\n        case \"IC-NAVIGATION-GROUP\":\n          focusEl = this.lastTabStop as HTMLIcNavigationGroupElement;\n          focusEl.setFocus();\n          break;\n        case \"A\":\n          this.lastTabStop.focus();\n          break;\n      }\n    }\n  };\n\n  componentWillLoad(): void {\n    this.navBarEl = document.querySelector(\"ic-top-navigation\");\n    const navigationEls = getSlotContent(this.el, \"navigation\");\n    if (navigationEls) {\n      this.hasNavigation = true;\n      const lastEl = navigationEls[navigationEls.length - 1] as HTMLElement;\n      if (lastEl.tagName === \"IC-NAVIGATION-ITEM\") {\n        this.navItemAboveButtons = true;\n      }\n      const firstEl = navigationEls[0] as HTMLElement;\n      if (firstEl.tagName === \"IC-NAVIGATION-GROUP\") {\n        this.navGroupFirst = true;\n      }\n    }\n    const buttonContent = getSlotContent(this.el, \"buttons\");\n\n    if (buttonContent !== null) {\n      this.hasButtons = true;\n      this.lastTabStop = buttonContent[buttonContent.length - 1] as HTMLElement;\n    } else {\n      if (this.hasNavigation) {\n        const lastEl = navigationEls[navigationEls.length - 1] as HTMLElement;\n        //check for slotted content i.e. react router link\n        const slotContent = getSlot(lastEl, \"navigation-item\");\n        if (slotContent !== null) {\n          this.lastTabStop = slotContent as HTMLElement;\n        } else {\n          this.lastTabStop = lastEl;\n        }\n      }\n    }\n  }\n\n  componentDidLoad(): void {\n    this.focusCloseButton();\n  }\n\n  componentWillRender(): void {\n    this.hasNavigation = isSlotUsed(this.el, \"navigation\");\n    this.hasButtons = isSlotUsed(this.el, \"buttons\");\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"popout-modal\" onClick={this.closeMenu}></div>\n        <div\n          class=\"popout-menu\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-label={`${this.hasNavigation ? \"Navigation\" : \"App\"} menu`}\n        >\n          <span\n            aria-hidden=\"true\"\n            id=\"navigation-landmark-text\"\n            class=\"navigation-landmark-text\"\n          >\n            Main navigation\n          </span>\n          <nav\n            aria-labelledby=\"navigation-landmark-text\"\n            aria-hidden={this.hasNavigation ? \"false\" : \"true\"}\n          >\n            <div\n              class={{\n                [\"menu-close-button-container\"]: true,\n                [\"nav-group-first\"]: this.navGroupFirst,\n              }}\n            >\n              <ic-button\n                ref={(el) => (this.closeButton = el)}\n                id=\"menu-close-button\"\n                class=\"menu-close-button\"\n                variant=\"icon\"\n                size=\"emphasis\"\n                aria-label={`Close ${\n                  this.hasNavigation ? \"navigation\" : \"app\"\n                } menu`}\n                onClick={this.closeMenu}\n              >\n                <svg\n                  slot=\"icon\"\n                  width=\"14\"\n                  height=\"14\"\n                  viewBox=\"0 0 14 14\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path\n                    d=\"M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z\"\n                    fill=\"#1759BC\"\n                  />\n                </svg>\n              </ic-button>\n            </div>\n            {this.hasNavigation && <slot name=\"navigation\"></slot>}\n          </nav>\n          {this.hasButtons && (\n            <div\n              class={{\n                [\"menu-buttons-container\"]: true,\n                [\"menu-buttons-container-nav-item-above\"]:\n                  this.navItemAboveButtons,\n              }}\n            >\n              <slot name=\"buttons\"></slot>\n            </div>\n          )}\n          {(this.status !== \"\" || this.version !== \"\") && (\n            <div class=\"menu-status-version-container\">\n              {this.status !== \"\" && (\n                <div class=\"menu-status\">\n                  <ic-typography\n                    variant=\"label-uppercase\"\n                    aria-label=\"app tag\"\n                    class=\"menu-status-text\"\n                  >\n                    {this.status}\n                  </ic-typography>\n                </div>\n              )}\n              {this.version !== \"\" && (\n                <div class=\"menu-version\">\n                  <ic-typography\n                    variant=\"label\"\n                    class=\"menu-version-text\"\n                    aria-label=\"app version\"\n                  >\n                    {this.version}\n                  </ic-typography>\n                </div>\n              )}\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-navigation-menu2.js","mappings":"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","names":[],"sources":["./src/components/ic-navigation-menu/ic-navigation-menu.css?tag=ic-navigation-menu&encapsulation=shadow","./src/components/ic-navigation-menu/ic-navigation-menu.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.popout-modal {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n}\n\n.popout-menu {\n  position: fixed;\n  top: 0;\n  right: 0;\n  width: 256px;\n  bottom: 0;\n  background-color: var(--ic-architectural-20);\n  color: var(--ic-color-primary-text);\n  box-shadow: var(--ic-elevation-overlay);\n  overflow-y: auto;\n  overflow-x: hidden;\n  z-index: calc(var(--ic-z-index-overlay) / 2);\n}\n\n:host(.inline) .popout-menu {\n  position: absolute;\n}\n\n.menu-close-button-container {\n  position: relative;\n  left: 190px;\n  padding: var(--ic-space-md) 0;\n}\n\n.nav-group-first {\n  padding-bottom: 0;\n}\n\n.menu-buttons-container {\n  padding: var(--ic-space-sm) 0;\n  border-bottom: 1px solid var(--ic-architectural-200);\n}\n\n.menu-buttons-container-nav-item-above {\n  margin-top: var(--ic-space-md);\n  border-top: 1px solid var(--ic-architectural-200);\n}\n\n.menu-status-version-container {\n  display: inline-flex;\n  margin: var(--ic-space-md) var(--ic-space-md) var(--ic-space-xl);\n}\n\n.menu-status {\n  background-color: var(--ic-architectural-500);\n  color: var(--ic-color-white-text);\n  border-radius: 80px;\n  width: fit-content;\n  padding: var(--ic-space-xxs) var(--ic-space-sm);\n  margin-right: var(--ic-space-xs);\n}\n\n.menu-version {\n  border-radius: 16px;\n  background-color: var(--ic-architectural-100);\n  padding: var(--ic-space-xxs) var(--ic-space-sm);\n}\n\n.menu-status-text,\n.menu-version-text {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-width: 90px;\n}\n\n.navigation-landmark-text {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  Event,\n  EventEmitter,\n  Listen,\n} from \"@stencil/core\";\n\nimport { getSlot, getSlotContent, isSlotUsed } from \"../../utils/helpers\";\n\n/**\n * @slot navigation - Content will be rendered at top of panel.\n * @slot buttons - Content will be rendered above version info and below navigation.\n */\n@Component({\n  tag: \"ic-navigation-menu\",\n  styleUrl: \"ic-navigation-menu.css\",\n  shadow: true,\n})\nexport class NavigationMenu {\n  @Element() el: HTMLIcNavigationMenuElement;\n\n  /**\n   *  Version info to display\n   */\n  @Prop() version: string = \"\";\n\n  /**\n   *  Status info to display\n   */\n  @Prop() status: string = \"\";\n\n  /**\n   * @internal - Emitted when the menu is closed.\n   */\n  @Event() icNavigationMenuClose: EventEmitter<void>;\n\n  @Listen(\"icNavItemClicked\")\n  navItemClickHandler(): void {\n    this.closeMenu();\n  }\n\n  @Listen(\"keydown\", { target: \"document\" })\n  handleKeyDown(ev: KeyboardEvent): void {\n    if (ev.key === \"Tab\") {\n      if (ev.shiftKey) {\n        if (document.activeElement === this.navBarEl) {\n          ev.preventDefault();\n          this.focusLastTabStop();\n        }\n      } else if (\n        document.activeElement === this.lastTabStop ||\n        this.lastTabStop === null\n      ) {\n        ev.preventDefault();\n        this.focusCloseButton();\n      }\n    } else if (ev.key === \"Escape\") {\n      this.closeMenu();\n    }\n  }\n\n  private hasButtons: boolean = false;\n  private hasNavigation: boolean = false;\n  private navItemAboveButtons: boolean = false;\n  private navGroupFirst: boolean = false;\n  private lastTabStop: HTMLElement = null;\n  private closeButton: HTMLIcButtonElement = null;\n  private navBarEl: HTMLIcTopNavigationElement;\n\n  private closeMenu = () => {\n    this.icNavigationMenuClose.emit();\n  };\n\n  private focusCloseButton = () => {\n    if (this.closeButton.setFocus) {\n      this.closeButton.setFocus();\n    }\n  };\n\n  private focusLastTabStop = () => {\n    let focusEl;\n    if (this.lastTabStop !== null) {\n      switch (this.lastTabStop.tagName) {\n        case \"IC-NAVIGATION-BUTTON\":\n          focusEl = this.lastTabStop as HTMLIcNavigationButtonElement;\n          focusEl.setFocus();\n          break;\n        case \"IC-NAVIGATION-ITEM\":\n          focusEl = this.lastTabStop as HTMLIcNavigationItemElement;\n          focusEl.setFocus();\n          break;\n        case \"IC-NAVIGATION-GROUP\":\n          focusEl = this.lastTabStop as HTMLIcNavigationGroupElement;\n          focusEl.setFocus();\n          break;\n        case \"A\":\n          this.lastTabStop.focus();\n          break;\n      }\n    }\n  };\n\n  componentWillLoad(): void {\n    this.navBarEl = document.querySelector(\"ic-top-navigation\");\n    const navigationEls = getSlotContent(this.el, \"navigation\");\n    if (navigationEls) {\n      this.hasNavigation = true;\n      const lastEl = navigationEls[navigationEls.length - 1] as HTMLElement;\n      if (lastEl.tagName === \"IC-NAVIGATION-ITEM\") {\n        this.navItemAboveButtons = true;\n      }\n      const firstEl = navigationEls[0] as HTMLElement;\n      if (firstEl.tagName === \"IC-NAVIGATION-GROUP\") {\n        this.navGroupFirst = true;\n      }\n    }\n    const buttonContent = getSlotContent(this.el, \"buttons\");\n\n    if (buttonContent !== null) {\n      this.hasButtons = true;\n      this.lastTabStop = buttonContent[buttonContent.length - 1] as HTMLElement;\n    } else {\n      if (this.hasNavigation) {\n        const lastEl = navigationEls[navigationEls.length - 1] as HTMLElement;\n        //check for slotted content i.e. react router link\n        const slotContent = getSlot(lastEl, \"navigation-item\");\n        if (slotContent !== null) {\n          this.lastTabStop = slotContent as HTMLElement;\n        } else {\n          this.lastTabStop = lastEl;\n        }\n      }\n    }\n  }\n\n  componentDidLoad(): void {\n    this.focusCloseButton();\n  }\n\n  componentWillRender(): void {\n    this.hasNavigation = isSlotUsed(this.el, \"navigation\");\n    this.hasButtons = isSlotUsed(this.el, \"buttons\");\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"popout-modal\" onClick={this.closeMenu}></div>\n        <div\n          class=\"popout-menu\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-label={`${this.hasNavigation ? \"Navigation\" : \"App\"} menu`}\n        >\n          <span\n            aria-hidden=\"true\"\n            id=\"navigation-landmark-text\"\n            class=\"navigation-landmark-text\"\n          >\n            Main navigation\n          </span>\n          <nav\n            aria-labelledby=\"navigation-landmark-text\"\n            aria-hidden={this.hasNavigation ? \"false\" : \"true\"}\n          >\n            <div\n              class={{\n                [\"menu-close-button-container\"]: true,\n                [\"nav-group-first\"]: this.navGroupFirst,\n              }}\n            >\n              <ic-button\n                ref={(el) => (this.closeButton = el)}\n                id=\"menu-close-button\"\n                class=\"menu-close-button\"\n                variant=\"icon\"\n                size=\"large\"\n                aria-label={`Close ${\n                  this.hasNavigation ? \"navigation\" : \"app\"\n                } menu`}\n                onClick={this.closeMenu}\n              >\n                <svg\n                  slot=\"icon\"\n                  width=\"14\"\n                  height=\"14\"\n                  viewBox=\"0 0 14 14\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path\n                    d=\"M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z\"\n                    fill=\"#1759BC\"\n                  />\n                </svg>\n              </ic-button>\n            </div>\n            {this.hasNavigation && <slot name=\"navigation\"></slot>}\n          </nav>\n          {this.hasButtons && (\n            <div\n              class={{\n                [\"menu-buttons-container\"]: true,\n                [\"menu-buttons-container-nav-item-above\"]:\n                  this.navItemAboveButtons,\n              }}\n            >\n              <slot name=\"buttons\"></slot>\n            </div>\n          )}\n          {(this.status !== \"\" || this.version !== \"\") && (\n            <div class=\"menu-status-version-container\">\n              {this.status !== \"\" && (\n                <div class=\"menu-status\">\n                  <ic-typography\n                    variant=\"label-uppercase\"\n                    aria-label=\"app tag\"\n                    class=\"menu-status-text\"\n                  >\n                    {this.status}\n                  </ic-typography>\n                </div>\n              )}\n              {this.version !== \"\" && (\n                <div class=\"menu-version\">\n                  <ic-typography\n                    variant=\"label\"\n                    class=\"menu-version-text\"\n                    aria-label=\"app version\"\n                  >\n                    {this.version}\n                  </ic-typography>\n                </div>\n              )}\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/ic-page-header.js

@@ -3,7 +3,7 @@ import { g as getCurrentDeviceSize, D as DEVICE_SIZES, c as checkResizeObserver,
 import { d as defineCustomElement$3 } from './ic-section-container2.js';
 import { d as defineCustomElement$2 } from './ic-typography2.js';
 
-const icPageHeaderCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block}:host(.sticky){position:sticky;top:0;box-shadow:var(--ic-elevation-overlay)}header{background-color:var(--ic-architectural-40)}header.border-bottom{border-bottom:1px solid var(--ic-architectural-300)}header.tabs{padding-top:var(--ic-space-md)}.breadcrumb-area{margin-bottom:var(--ic-space-md)}.main-content{display:grid;grid-template-columns:auto 1fr;grid-template-areas:\"title-area action-area\"\n    \"input-area action-area\";-moz-column-gap:var(--ic-space-md);column-gap:var(--ic-space-md);justify-content:space-between;width:100%}.title-area{display:flex;flex-direction:column;flex:1;min-width:304px;grid-area:title-area}.header-content{display:flex;align-items:center;width:100%;flex-wrap:wrap;row-gap:var(--ic-space-xs);-moz-column-gap:var(--ic-space-md);column-gap:var(--ic-space-md)}.heading{display:inline-block;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}.subheading.dense{margin-top:var(--ic-space-xs)}.action-area{display:flex;gap:var(--ic-space-md);flex-flow:row wrap;justify-self:end;justify-content:flex-end;height:-moz-fit-content;height:fit-content;grid-area:action-area}.input-area,.navigation-area{margin-top:var(--ic-space-md);width:100%}.tabs-slot{display:flex;overflow-x:auto;padding:8px;margin:-8px}.input-area{grid-area:input-area}@media screen and (max-width: 576px){.main-content{grid-template-areas:\"title-area\"\n      \"action-area\"\n      \"input-area\";justify-content:flex-start}.action-area{min-width:100%;margin-top:var(--ic-space-md);justify-content:start}}@media screen and (min-width: 992px){:host(.sticky-desktop){position:sticky;top:0;box-shadow:var(--ic-elevation-overlay)}}";
+const icPageHeaderCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block}:host(.sticky){position:sticky;top:0;box-shadow:var(--ic-elevation-overlay)}header{background-color:var(--ic-architectural-40)}header.border-bottom{border-bottom:1px solid var(--ic-architectural-300)}header.tabs{padding-top:var(--ic-space-md)}.breadcrumb-area{margin-bottom:var(--ic-space-md)}.main-content{display:grid;grid-template-columns:auto 1fr;grid-template-areas:\"title-area action-area\"\n    \"input-area action-area\";-moz-column-gap:var(--ic-space-md);column-gap:var(--ic-space-md);justify-content:space-between;width:100%}.title-area{display:flex;flex-direction:column;flex:1;min-width:304px;grid-area:title-area}.header-content{display:flex;align-items:center;width:100%;flex-wrap:wrap;row-gap:var(--ic-space-xs);-moz-column-gap:var(--ic-space-md);column-gap:var(--ic-space-md)}.heading{display:inline-block;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}.subheading.small{margin-top:var(--ic-space-xs)}.action-area{display:flex;gap:var(--ic-space-md);flex-flow:row wrap;justify-self:end;justify-content:flex-end;height:-moz-fit-content;height:fit-content;grid-area:action-area}.input-area,.navigation-area{margin-top:var(--ic-space-md);width:100%}.tabs-slot{display:flex;overflow-x:auto;padding:8px;margin:-8px}.input-area{grid-area:input-area}@media screen and (max-width: 576px){.main-content{grid-template-areas:\"title-area\"\n      \"action-area\"\n      \"input-area\";justify-content:flex-start}.action-area{min-width:100%;margin-top:var(--ic-space-md);justify-content:start}}@media screen and (min-width: 992px){:host(.sticky-desktop){position:sticky;top:0;box-shadow:var(--ic-elevation-overlay)}}";
 
 const PageHeader = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -66,7 +66,7 @@ const PageHeader = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.heading = undefined;
     this.subheading = undefined;
     this.aligned = "left";
-    this.dense = false;
+    this.small = false;
     this.border = true;
     this.sticky = false;
     this.stickyDesktopOnly = false;
@@ -87,14 +87,14 @@ const PageHeader = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     }
   }
   render() {
-    const { dense, border, heading, subheading, aligned, sticky, stickyDesktopOnly, } = this;
+    const { small, border, heading, subheading, aligned, sticky, stickyDesktopOnly, } = this;
     return (h(Host, { class: {
         ["sticky"]: sticky,
         ["sticky-desktop"]: !sticky && stickyDesktopOnly,
       } }, h("header", { class: {
         ["border-bottom"]: border,
         ["tabs"]: isSlotUsed(this.el, "tabs"),
-      } }, h("ic-section-container", { aligned: aligned, fullHeight: isSlotUsed(this.el, "tabs") }, isSlotUsed(this.el, "breadcrumbs") && (h("div", { class: "breadcrumb-area" }, h("slot", { name: "breadcrumbs" }))), h("div", { class: "main-content" }, h("div", { class: "title-area" }, h("div", { class: "header-content" }, h("slot", { name: "heading" }, h("ic-typography", { variant: dense ? "h4" : "h2", class: "heading" }, h("h2", null, heading))), h("slot", { name: "heading-adornment" })), h("div", null, h("slot", { name: "subheading" }, subheading && (h("ic-typography", { variant: "body", class: { ["subheading"]: true, ["dense"]: dense } }, subheading))))), isSlotUsed(this.el, "actions") && (h("div", { class: "action-area" }, h("slot", { name: "actions" }))), isSlotUsed(this.el, "input") && (h("div", { class: "input-area" }, h("slot", { name: "input" })))), (isSlotUsed(this.el, "stepper") ||
+      } }, h("ic-section-container", { aligned: aligned, fullHeight: isSlotUsed(this.el, "tabs") }, isSlotUsed(this.el, "breadcrumbs") && (h("div", { class: "breadcrumb-area" }, h("slot", { name: "breadcrumbs" }))), h("div", { class: "main-content" }, h("div", { class: "title-area" }, h("div", { class: "header-content" }, h("slot", { name: "heading" }, h("ic-typography", { variant: small ? "h4" : "h2", class: "heading" }, h("h2", null, heading))), h("slot", { name: "heading-adornment" })), h("div", null, h("slot", { name: "subheading" }, subheading && (h("ic-typography", { variant: "body", class: { ["subheading"]: true, ["small"]: small } }, subheading))))), isSlotUsed(this.el, "actions") && (h("div", { class: "action-area" }, h("slot", { name: "actions" }))), isSlotUsed(this.el, "input") && (h("div", { class: "input-area" }, h("slot", { name: "input" })))), (isSlotUsed(this.el, "stepper") ||
       isSlotUsed(this.el, "tabs")) && (h("div", { class: "navigation-area" }, isSlotUsed(this.el, "stepper") &&
       !isSlotUsed(this.el, "tabs") && h("slot", { name: "stepper" }), isSlotUsed(this.el, "tabs") && (h("nav", { class: "tabs-slot", "aria-label": "navigation-landmark-page-header" }, h("slot", { name: "tabs" })))))))));
   }
@@ -104,7 +104,7 @@ const PageHeader = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "heading": [1],
     "subheading": [1],
     "aligned": [1],
-    "dense": [4],
+    "small": [4],
     "border": [4],
     "sticky": [4],
     "stickyDesktopOnly": [4, "sticky-desktop-only"],

package/dist/components/ic-page-header.js.map

@@ -1 +1 @@
-{"file":"ic-page-header.js","mappings":"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","names":[],"sources":["./src/components/ic-page-header/ic-page-header.css?tag=ic-page-header&encapsulation=shadow","./src/components/ic-page-header/ic-page-header.tsx"],"sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n  display: block;\n}\n\n:host(.sticky) {\n  position: sticky;\n  top: 0;\n  box-shadow: var(--ic-elevation-overlay);\n}\n\nheader {\n  background-color: var(--ic-architectural-40);\n}\n\nheader.border-bottom {\n  border-bottom: 1px solid var(--ic-architectural-300);\n}\n\nheader.tabs {\n  padding-top: var(--ic-space-md);\n}\n\n.breadcrumb-area {\n  margin-bottom: var(--ic-space-md);\n}\n\n.main-content {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  grid-template-areas:\n    \"title-area action-area\"\n    \"input-area action-area\";\n  column-gap: var(--ic-space-md);\n  justify-content: space-between;\n  width: 100%;\n}\n\n.title-area {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-width: 304px;\n  grid-area: title-area;\n}\n\n.header-content {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  flex-wrap: wrap;\n  row-gap: var(--ic-space-xs);\n  column-gap: var(--ic-space-md);\n}\n\n.heading {\n  display: inline-block;\n  overflow-wrap: break-word;\n  hyphens: auto;\n}\n\n.subheading.dense {\n  margin-top: var(--ic-space-xs);\n}\n\n.action-area {\n  display: flex;\n  gap: var(--ic-space-md);\n  flex-flow: row wrap;\n  justify-self: end;\n  justify-content: flex-end;\n  height: fit-content;\n  grid-area: action-area;\n}\n\n.input-area,\n.navigation-area {\n  margin-top: var(--ic-space-md);\n  width: 100%;\n}\n\n.tabs-slot {\n  display: flex;\n  overflow-x: auto;\n  padding: 8px;\n  margin: -8px;\n}\n\n.input-area {\n  grid-area: input-area;\n}\n\n@media screen and (max-width: 576px) {\n  .main-content {\n    grid-template-areas:\n      \"title-area\"\n      \"action-area\"\n      \"input-area\";\n    justify-content: flex-start;\n  }\n\n  .action-area {\n    min-width: 100%;\n    margin-top: var(--ic-space-md);\n    justify-content: start;\n  }\n}\n\n@media screen and (min-width: 992px) {\n  :host(.sticky-desktop) {\n    position: sticky;\n    top: 0;\n    box-shadow: var(--ic-elevation-overlay);\n  }\n}\n","import { Component, Host, h, Prop, Element, State } from \"@stencil/core\";\n\nimport { IcAlignment } from \"../../utils/types\";\n\nimport {\n  isSlotUsed,\n  DEVICE_SIZES,\n  getCurrentDeviceSize,\n  checkResizeObserver,\n} from \"../../utils/helpers\";\n\n/**\n * @slot breadcrumbs - Content will be rendered in the breadcrumb area, above the title and action areas.\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 heading-adornment - Content will be rendered in the title area, adjacent to the heading.\n * @slot actions - Content will be rendered in the action area, adjacent to the title area.\n * @slot input - Content will be rendered in the input area, below the title area and adjacent to the action area.\n * @slot stepper - Content will be rendered in the navigation area, below the title and action areas. Note: stepper slot cannot be used when the tabs slot is being used.\n * @slot tabs - Content will be rendered in the navigation area, below the title and action areas. Note: the stepper slot cannot be used when the tabs slot is being used.\n */\n\n@Component({\n  tag: \"ic-page-header\",\n  styleUrl: \"ic-page-header.css\",\n  shadow: true,\n})\nexport class PageHeader {\n  @Element() el: HTMLIcPageHeaderElement;\n  /**\n   * The title to render on the component.\n   */\n  @Prop() heading?: string;\n  /**\n   * The subtitle to render on the component.\n   */\n  @Prop() subheading?: string;\n  /**\n   * How the component should be aligned.\n   */\n  @Prop() aligned?: IcAlignment = \"left\";\n  /**\n   * Whether the component uses dense styling.\n   */\n  @Prop() dense?: boolean = false;\n  /**\n   * Set whether the bottom border is used\n   */\n  @Prop() border?: boolean = true;\n  /**\n   * Set whether the header is sticky at all breakpoints\n   */\n  @Prop() sticky?: boolean = false;\n  /** Set whether the header is only sticky for viewport widths of 992px and above\n   */\n  @Prop() stickyDesktopOnly?: boolean = false;\n  /** Set whether the reading pattern and tab order change in the action area for viewport widths of above 576px and when actions have not wrapped\n   */\n  @Prop() reverseOrder?: boolean = false;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n\n  @State() areButtonsReversed: boolean = false;\n\n  @State() actionContent: Node[];\n\n  private resizeObserver: ResizeObserver = null;\n\n  private resizeObserverCallback = () => {\n    if (this.reverseOrder) {\n      this.applyReverseOrder();\n    }\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.resizeObserverCallback();\n    });\n    this.resizeObserver.observe(this.el);\n  };\n\n  private applyReverseOrder = (): void => {\n    const currSize = getCurrentDeviceSize();\n    if (currSize !== this.deviceSize) {\n      this.deviceSize = currSize;\n    }\n\n    const actionArea = this.el.shadowRoot.querySelector(\n      \"div.action-area\"\n    ) as HTMLElement;\n    const actionHeights: number[] = [];\n\n    /* For each button in the actions slot, check the height of the button and push this number into the actionHeights array and then find the greatest number in this array (i.e. find the height of the tallest button) */\n    for (let i = 0; i < this.actionContent.length; i++) {\n      const action = this.actionContent[i] as HTMLElement;\n      let actionHeight = action.offsetHeight;\n      if (actionHeight === undefined) {\n        actionHeight = 0;\n      }\n      actionHeights.push(actionHeight);\n    }\n\n    const max = Math.max(...actionHeights);\n\n    /* The smallest breakpoint displays buttons in the same order the user has slotted them in. When the device size is larger than the small breakpoiint then the order of the button reverses due to best practice for reading patterns. If the device size is larger than the small breakpoint and the buttons have started to wrap then they follow the order the user has slotted them in. This logic is programmed based on the height of the action-area div that wraps the actions slot. If the height of the action-area div is taller than the height of the tallest button, then it is assumed that the taller height is caused by the buttons wrapping */\n    let actionAreaHeight = actionArea.offsetHeight;\n\n    if (actionAreaHeight === undefined) {\n      actionAreaHeight = 0;\n    }\n\n    if (\n      this.deviceSize > DEVICE_SIZES.S &&\n      actionAreaHeight <= max &&\n      !this.areButtonsReversed\n    ) {\n      this.actionContent = this.actionContent.reverse();\n      this.actionContent.forEach((btn: string | Node) => {\n        this.el.append(btn);\n      });\n      this.areButtonsReversed = !this.areButtonsReversed;\n    } else if (\n      ((this.deviceSize > DEVICE_SIZES.S && actionAreaHeight > max) ||\n        this.deviceSize <= DEVICE_SIZES.S) &&\n      this.areButtonsReversed\n    ) {\n      this.actionContent = this.actionContent.reverse();\n      this.actionContent.forEach((btn: string | Node) => {\n        this.el.append(btn);\n      });\n      this.areButtonsReversed = !this.areButtonsReversed;\n    }\n  };\n\n  componentWillLoad(): void {\n    this.actionContent = Array.from(\n      this.el.querySelectorAll(`[slot=\"actions\"]`)\n    );\n  }\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\n  }\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  render() {\n    const {\n      dense,\n      border,\n      heading,\n      subheading,\n      aligned,\n      sticky,\n      stickyDesktopOnly,\n    } = this;\n\n    return (\n      <Host\n        class={{\n          [\"sticky\"]: sticky,\n          [\"sticky-desktop\"]: !sticky && stickyDesktopOnly,\n        }}\n      >\n        <header\n          class={{\n            [\"border-bottom\"]: border,\n            [\"tabs\"]: isSlotUsed(this.el, \"tabs\"),\n          }}\n        >\n          <ic-section-container\n            aligned={aligned}\n            fullHeight={isSlotUsed(this.el, \"tabs\")}\n          >\n            {isSlotUsed(this.el, \"breadcrumbs\") && (\n              <div class=\"breadcrumb-area\">\n                <slot name=\"breadcrumbs\" />\n              </div>\n            )}\n            <div class=\"main-content\">\n              <div class=\"title-area\">\n                <div class=\"header-content\">\n                  <slot name=\"heading\">\n                    <ic-typography\n                      variant={dense ? \"h4\" : \"h2\"}\n                      class=\"heading\"\n                    >\n                      <h2>{heading}</h2>\n                    </ic-typography>\n                  </slot>\n                  <slot name=\"heading-adornment\" />\n                </div>\n                <div>\n                  <slot name=\"subheading\">\n                    {subheading && (\n                      <ic-typography\n                        variant=\"body\"\n                        class={{ [\"subheading\"]: true, [\"dense\"]: dense }}\n                      >\n                        {subheading}\n                      </ic-typography>\n                    )}\n                  </slot>\n                </div>\n              </div>\n              {isSlotUsed(this.el, \"actions\") && (\n                <div class=\"action-area\">\n                  <slot name=\"actions\" />\n                </div>\n              )}\n              {isSlotUsed(this.el, \"input\") && (\n                <div class=\"input-area\">\n                  <slot name=\"input\" />\n                </div>\n              )}\n            </div>\n\n            {(isSlotUsed(this.el, \"stepper\") ||\n              isSlotUsed(this.el, \"tabs\")) && (\n              <div class=\"navigation-area\">\n                {isSlotUsed(this.el, \"stepper\") &&\n                  !isSlotUsed(this.el, \"tabs\") && <slot name=\"stepper\" />}\n                {isSlotUsed(this.el, \"tabs\") && (\n                  <nav\n                    class=\"tabs-slot\"\n                    aria-label=\"navigation-landmark-page-header\"\n                  >\n                    <slot name=\"tabs\" />\n                  </nav>\n                )}\n              </div>\n            )}\n          </ic-section-container>\n        </header>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-page-header.js","mappings":"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","names":[],"sources":["./src/components/ic-page-header/ic-page-header.css?tag=ic-page-header&encapsulation=shadow","./src/components/ic-page-header/ic-page-header.tsx"],"sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n  display: block;\n}\n\n:host(.sticky) {\n  position: sticky;\n  top: 0;\n  box-shadow: var(--ic-elevation-overlay);\n}\n\nheader {\n  background-color: var(--ic-architectural-40);\n}\n\nheader.border-bottom {\n  border-bottom: 1px solid var(--ic-architectural-300);\n}\n\nheader.tabs {\n  padding-top: var(--ic-space-md);\n}\n\n.breadcrumb-area {\n  margin-bottom: var(--ic-space-md);\n}\n\n.main-content {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  grid-template-areas:\n    \"title-area action-area\"\n    \"input-area action-area\";\n  column-gap: var(--ic-space-md);\n  justify-content: space-between;\n  width: 100%;\n}\n\n.title-area {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-width: 304px;\n  grid-area: title-area;\n}\n\n.header-content {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  flex-wrap: wrap;\n  row-gap: var(--ic-space-xs);\n  column-gap: var(--ic-space-md);\n}\n\n.heading {\n  display: inline-block;\n  overflow-wrap: break-word;\n  hyphens: auto;\n}\n\n.subheading.small {\n  margin-top: var(--ic-space-xs);\n}\n\n.action-area {\n  display: flex;\n  gap: var(--ic-space-md);\n  flex-flow: row wrap;\n  justify-self: end;\n  justify-content: flex-end;\n  height: fit-content;\n  grid-area: action-area;\n}\n\n.input-area,\n.navigation-area {\n  margin-top: var(--ic-space-md);\n  width: 100%;\n}\n\n.tabs-slot {\n  display: flex;\n  overflow-x: auto;\n  padding: 8px;\n  margin: -8px;\n}\n\n.input-area {\n  grid-area: input-area;\n}\n\n@media screen and (max-width: 576px) {\n  .main-content {\n    grid-template-areas:\n      \"title-area\"\n      \"action-area\"\n      \"input-area\";\n    justify-content: flex-start;\n  }\n\n  .action-area {\n    min-width: 100%;\n    margin-top: var(--ic-space-md);\n    justify-content: start;\n  }\n}\n\n@media screen and (min-width: 992px) {\n  :host(.sticky-desktop) {\n    position: sticky;\n    top: 0;\n    box-shadow: var(--ic-elevation-overlay);\n  }\n}\n","import { Component, Host, h, Prop, Element, State } from \"@stencil/core\";\n\nimport { IcAlignment } from \"../../utils/types\";\n\nimport {\n  isSlotUsed,\n  DEVICE_SIZES,\n  getCurrentDeviceSize,\n  checkResizeObserver,\n} from \"../../utils/helpers\";\n\n/**\n * @slot breadcrumbs - Content will be rendered in the breadcrumb area, above the title and action areas.\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 heading-adornment - Content will be rendered in the title area, adjacent to the heading.\n * @slot actions - Content will be rendered in the action area, adjacent to the title area.\n * @slot input - Content will be rendered in the input area, below the title area and adjacent to the action area.\n * @slot stepper - Content will be rendered in the navigation area, below the title and action areas. Note: stepper slot cannot be used when the tabs slot is being used.\n * @slot tabs - Content will be rendered in the navigation area, below the title and action areas. Note: the stepper slot cannot be used when the tabs slot is being used.\n */\n\n@Component({\n  tag: \"ic-page-header\",\n  styleUrl: \"ic-page-header.css\",\n  shadow: true,\n})\nexport class PageHeader {\n  @Element() el: HTMLIcPageHeaderElement;\n  /**\n   * The title to render on the component.\n   */\n  @Prop() heading?: string;\n  /**\n   * The subtitle to render on the component.\n   */\n  @Prop() subheading?: string;\n  /**\n   * How the component should be aligned.\n   */\n  @Prop() aligned?: IcAlignment = \"left\";\n  /**\n   * Whether the component uses small styling.\n   */\n  @Prop() small?: boolean = false;\n  /**\n   * Set whether the bottom border is used\n   */\n  @Prop() border?: boolean = true;\n  /**\n   * Set whether the header is sticky at all breakpoints\n   */\n  @Prop() sticky?: boolean = false;\n  /** Set whether the header is only sticky for viewport widths of 992px and above\n   */\n  @Prop() stickyDesktopOnly?: boolean = false;\n  /** Set whether the reading pattern and tab order change in the action area for viewport widths of above 576px and when actions have not wrapped\n   */\n  @Prop() reverseOrder?: boolean = false;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n\n  @State() areButtonsReversed: boolean = false;\n\n  @State() actionContent: Node[];\n\n  private resizeObserver: ResizeObserver = null;\n\n  private resizeObserverCallback = () => {\n    if (this.reverseOrder) {\n      this.applyReverseOrder();\n    }\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.resizeObserverCallback();\n    });\n    this.resizeObserver.observe(this.el);\n  };\n\n  private applyReverseOrder = (): void => {\n    const currSize = getCurrentDeviceSize();\n    if (currSize !== this.deviceSize) {\n      this.deviceSize = currSize;\n    }\n\n    const actionArea = this.el.shadowRoot.querySelector(\n      \"div.action-area\"\n    ) as HTMLElement;\n    const actionHeights: number[] = [];\n\n    /* For each button in the actions slot, check the height of the button and push this number into the actionHeights array and then find the greatest number in this array (i.e. find the height of the tallest button) */\n    for (let i = 0; i < this.actionContent.length; i++) {\n      const action = this.actionContent[i] as HTMLElement;\n      let actionHeight = action.offsetHeight;\n      if (actionHeight === undefined) {\n        actionHeight = 0;\n      }\n      actionHeights.push(actionHeight);\n    }\n\n    const max = Math.max(...actionHeights);\n\n    /* The smallest breakpoint displays buttons in the same order the user has slotted them in. When the device size is larger than the small breakpoiint then the order of the button reverses due to best practice for reading patterns. If the device size is larger than the small breakpoint and the buttons have started to wrap then they follow the order the user has slotted them in. This logic is programmed based on the height of the action-area div that wraps the actions slot. If the height of the action-area div is taller than the height of the tallest button, then it is assumed that the taller height is caused by the buttons wrapping */\n    let actionAreaHeight = actionArea.offsetHeight;\n\n    if (actionAreaHeight === undefined) {\n      actionAreaHeight = 0;\n    }\n\n    if (\n      this.deviceSize > DEVICE_SIZES.S &&\n      actionAreaHeight <= max &&\n      !this.areButtonsReversed\n    ) {\n      this.actionContent = this.actionContent.reverse();\n      this.actionContent.forEach((btn: string | Node) => {\n        this.el.append(btn);\n      });\n      this.areButtonsReversed = !this.areButtonsReversed;\n    } else if (\n      ((this.deviceSize > DEVICE_SIZES.S && actionAreaHeight > max) ||\n        this.deviceSize <= DEVICE_SIZES.S) &&\n      this.areButtonsReversed\n    ) {\n      this.actionContent = this.actionContent.reverse();\n      this.actionContent.forEach((btn: string | Node) => {\n        this.el.append(btn);\n      });\n      this.areButtonsReversed = !this.areButtonsReversed;\n    }\n  };\n\n  componentWillLoad(): void {\n    this.actionContent = Array.from(\n      this.el.querySelectorAll(`[slot=\"actions\"]`)\n    );\n  }\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\n  }\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  render() {\n    const {\n      small,\n      border,\n      heading,\n      subheading,\n      aligned,\n      sticky,\n      stickyDesktopOnly,\n    } = this;\n\n    return (\n      <Host\n        class={{\n          [\"sticky\"]: sticky,\n          [\"sticky-desktop\"]: !sticky && stickyDesktopOnly,\n        }}\n      >\n        <header\n          class={{\n            [\"border-bottom\"]: border,\n            [\"tabs\"]: isSlotUsed(this.el, \"tabs\"),\n          }}\n        >\n          <ic-section-container\n            aligned={aligned}\n            fullHeight={isSlotUsed(this.el, \"tabs\")}\n          >\n            {isSlotUsed(this.el, \"breadcrumbs\") && (\n              <div class=\"breadcrumb-area\">\n                <slot name=\"breadcrumbs\" />\n              </div>\n            )}\n            <div class=\"main-content\">\n              <div class=\"title-area\">\n                <div class=\"header-content\">\n                  <slot name=\"heading\">\n                    <ic-typography\n                      variant={small ? \"h4\" : \"h2\"}\n                      class=\"heading\"\n                    >\n                      <h2>{heading}</h2>\n                    </ic-typography>\n                  </slot>\n                  <slot name=\"heading-adornment\" />\n                </div>\n                <div>\n                  <slot name=\"subheading\">\n                    {subheading && (\n                      <ic-typography\n                        variant=\"body\"\n                        class={{ [\"subheading\"]: true, [\"small\"]: small }}\n                      >\n                        {subheading}\n                      </ic-typography>\n                    )}\n                  </slot>\n                </div>\n              </div>\n              {isSlotUsed(this.el, \"actions\") && (\n                <div class=\"action-area\">\n                  <slot name=\"actions\" />\n                </div>\n              )}\n              {isSlotUsed(this.el, \"input\") && (\n                <div class=\"input-area\">\n                  <slot name=\"input\" />\n                </div>\n              )}\n            </div>\n\n            {(isSlotUsed(this.el, \"stepper\") ||\n              isSlotUsed(this.el, \"tabs\")) && (\n              <div class=\"navigation-area\">\n                {isSlotUsed(this.el, \"stepper\") &&\n                  !isSlotUsed(this.el, \"tabs\") && <slot name=\"stepper\" />}\n                {isSlotUsed(this.el, \"tabs\") && (\n                  <nav\n                    class=\"tabs-slot\"\n                    aria-label=\"navigation-landmark-page-header\"\n                  >\n                    <slot name=\"tabs\" />\n                  </nav>\n                )}\n              </div>\n            )}\n          </ic-section-container>\n        </header>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/ic-radio-group.js

@@ -50,7 +50,7 @@ const RadioGroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.hideLabel = false;
     this.disabled = false;
     this.helperText = undefined;
-    this.dense = false;
+    this.small = false;
     this.validationStatus = "";
     this.validationText = "";
     this.checkedValue = "";
@@ -104,7 +104,7 @@ const RadioGroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "hideLabel": [4, "hide-label"],
     "disabled": [4],
     "helperText": [1, "helper-text"],
-    "dense": [4],
+    "small": [4],
     "validationStatus": [1, "validation-status"],
     "validationText": [1, "validation-text"],
     "checkedValue": [32],

package/dist/components/ic-radio-group.js.map

@@ -1 +1 @@
-{"file":"ic-radio-group.js","mappings":"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","names":[],"sources":["./src/components/ic-radio-group/ic-radio-group.css?tag=ic-radio-group&encapsulation=shadow","./src/components/ic-radio-group/ic-radio-group.tsx"],"sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n  display: block;\n}\n\nic-input-label.error {\n  color: var(--ic-status-error);\n}\n\nic-input-label ic-typography {\n  margin-bottom: var(--ic-space-sm);\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Listen,\n  Element,\n  Event,\n  EventEmitter,\n} from \"@stencil/core\";\nimport {\n  hasValidationStatus,\n  onComponentRequiredPropUndefined,\n  renderHiddenInput,\n} from \"../../utils/helpers\";\nimport { IcInformationStatusOrEmpty } from \"../../utils/types\";\nimport { IcValueEventDetail } from \"../../interface\";\n\n@Component({\n  tag: \"ic-radio-group\",\n  styleUrl: \"ic-radio-group.css\",\n  shadow: true,\n})\nexport class RadioGroup {\n  private radioOptions: HTMLIcRadioOptionElement[];\n\n  @Element() host: HTMLIcRadioGroupElement;\n\n  /**\n   * Provide a label for the input.\n   */\n  @Prop() label!: string;\n\n  /**\n   * Provide a name for the input.\n   */\n  @Prop() name!: string;\n\n  /**\n   * Specify if the input requires a value.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Hides the label and applies the required label value as an aria-label.\n   */\n  @Prop() hideLabel: boolean = false;\n\n  /**\n   * Specify whether the input is disabled.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Provide helper text to display additional field guidance.\n   */\n  @Prop() helperText: string;\n\n  /**\n   * Specify whether dense styling is to be applied to the element.\n   */\n  @Prop() dense: boolean = false;\n  /**\n   * Provide validation status - 'error'\n   */\n  @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n  /**\n   * Provide validation text - 'error'\n   */\n  @Prop() validationText: string = \"\";\n  /**\n   * Provide checked state\n   */\n  @State() checkedValue: string = \"\";\n  @State() selectedChild: number = -1;\n\n  /**\n   * Emitted when a user selects a radio.\n   */\n  @Event() icChange: EventEmitter<IcValueEventDetail>;\n\n  @Listen(\"radioOptionSelect\")\n  selectHandler(event: CustomEvent<IcValueEventDetail>): void {\n    this.checkedValue = event.detail.value;\n    this.icChange.emit({ value: this.checkedValue });\n\n    if (this.radioOptions !== undefined) {\n      this.radioOptions.forEach((radioOption, index) => {\n        radioOption.selected = this.checkedValue === radioOption.value;\n        if (radioOption.selected) {\n          this.selectedChild = index;\n        }\n      });\n      this.radioOptions[0].shadowRoot.querySelector(\"input\").tabIndex =\n        this.selectedChild > 0 ? -1 : 0;\n    }\n  }\n\n  private handleKeyDown = (event: KeyboardEvent): void => {\n    switch (event.key) {\n      case \"ArrowDown\":\n      case \"ArrowRight\":\n        this.radioOptions[\n          this.getNextItemToSelect(this.selectedChild, true)\n        ].selected = true;\n        event.preventDefault();\n        break;\n      case \"ArrowUp\":\n      case \"ArrowLeft\":\n        this.radioOptions[\n          this.getNextItemToSelect(this.selectedChild, false)\n        ].selected = true;\n        event.preventDefault();\n    }\n  };\n\n  private getNextItemToSelect = (\n    currentItem: number,\n    movingDown: boolean\n  ): number => {\n    const numRadios = this.radioOptions.length - 1;\n\n    if (currentItem < 1) {\n      currentItem = 0;\n    }\n\n    let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n\n    //check if wrap around necessary\n    if (nextItem < 0) {\n      nextItem = numRadios;\n    } else if (nextItem > numRadios) {\n      nextItem = 0;\n    }\n\n    //if next item is disabled then find next\n    if (this.radioOptions[nextItem].disabled) {\n      nextItem = this.getNextItemToSelect(nextItem, movingDown);\n    }\n\n    return nextItem;\n  };\n\n  componentDidLoad(): void {\n    this.radioOptions = Array.from(\n      this.host.querySelectorAll(\"ic-radio-option\")\n    );\n\n    this.radioOptions.forEach((radioOption, index) => {\n      if (!radioOption.selected) {\n        radioOption.selected = this.checkedValue === radioOption.value;\n      }\n      radioOption.name = this.name;\n      radioOption.groupLabel = this.label;\n      if (radioOption.selected) {\n        this.selectedChild = index;\n        this.checkedValue = radioOption.value;\n      }\n    });\n    this.radioOptions[0].shadowRoot.querySelector(\"input\").tabIndex =\n      this.selectedChild > 0 ? -1 : 0;\n\n    onComponentRequiredPropUndefined(\n      [\n        { prop: this.label, propName: \"label\" },\n        { prop: this.name, propName: \"name\" },\n      ],\n      \"Radio Group\"\n    );\n  }\n\n  render() {\n    const hadValidationStatus = hasValidationStatus(\n      this.validationStatus,\n      this.disabled\n    );\n\n    renderHiddenInput(\n      true,\n      this.host,\n      this.name,\n      this.checkedValue,\n      this.disabled\n    );\n\n    return (\n      <Host onKeyDown={this.handleKeyDown}>\n        <div\n          role=\"radiogroup\"\n          aria-label={`${this.label}${this.required ? \", required\" : \"\"}`}\n        >\n          {!this.hideLabel && (\n            <ic-input-label\n              class={{ [`${this.validationStatus}`]: true }}\n              label={this.label}\n              helperText={this.helperText}\n              required={this.required}\n              disabled={this.disabled}\n            ></ic-input-label>\n          )}\n          <slot></slot>\n        </div>\n        <ic-input-validation\n          ariaLiveMode=\"polite\"\n          status={hadValidationStatus ? this.validationStatus : \"\"}\n          message={hadValidationStatus ? this.validationText : \"\"}\n        ></ic-input-validation>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-radio-group.js","mappings":"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","names":[],"sources":["./src/components/ic-radio-group/ic-radio-group.css?tag=ic-radio-group&encapsulation=shadow","./src/components/ic-radio-group/ic-radio-group.tsx"],"sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n  display: block;\n}\n\nic-input-label.error {\n  color: var(--ic-status-error);\n}\n\nic-input-label ic-typography {\n  margin-bottom: var(--ic-space-sm);\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Listen,\n  Element,\n  Event,\n  EventEmitter,\n} from \"@stencil/core\";\nimport {\n  hasValidationStatus,\n  onComponentRequiredPropUndefined,\n  renderHiddenInput,\n} from \"../../utils/helpers\";\nimport { IcInformationStatusOrEmpty } from \"../../utils/types\";\nimport { IcValueEventDetail } from \"../../interface\";\n\n@Component({\n  tag: \"ic-radio-group\",\n  styleUrl: \"ic-radio-group.css\",\n  shadow: true,\n})\nexport class RadioGroup {\n  private radioOptions: HTMLIcRadioOptionElement[];\n\n  @Element() host: HTMLIcRadioGroupElement;\n\n  /**\n   * Provide a label for the input.\n   */\n  @Prop() label!: string;\n\n  /**\n   * Provide a name for the input.\n   */\n  @Prop() name!: string;\n\n  /**\n   * Specify if the input requires a value.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Hides the label and applies the required label value as an aria-label.\n   */\n  @Prop() hideLabel: boolean = false;\n\n  /**\n   * Specify whether the input is disabled.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Provide helper text to display additional field guidance.\n   */\n  @Prop() helperText: string;\n\n  /**\n   * Specify whether small styling is to be applied to the element.\n   */\n  @Prop() small: boolean = false;\n  /**\n   * Provide validation status - 'error'\n   */\n  @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n  /**\n   * Provide validation text - 'error'\n   */\n  @Prop() validationText: string = \"\";\n  /**\n   * Provide checked state\n   */\n  @State() checkedValue: string = \"\";\n  @State() selectedChild: number = -1;\n\n  /**\n   * Emitted when a user selects a radio.\n   */\n  @Event() icChange: EventEmitter<IcValueEventDetail>;\n\n  @Listen(\"radioOptionSelect\")\n  selectHandler(event: CustomEvent<IcValueEventDetail>): void {\n    this.checkedValue = event.detail.value;\n    this.icChange.emit({ value: this.checkedValue });\n\n    if (this.radioOptions !== undefined) {\n      this.radioOptions.forEach((radioOption, index) => {\n        radioOption.selected = this.checkedValue === radioOption.value;\n        if (radioOption.selected) {\n          this.selectedChild = index;\n        }\n      });\n      this.radioOptions[0].shadowRoot.querySelector(\"input\").tabIndex =\n        this.selectedChild > 0 ? -1 : 0;\n    }\n  }\n\n  private handleKeyDown = (event: KeyboardEvent): void => {\n    switch (event.key) {\n      case \"ArrowDown\":\n      case \"ArrowRight\":\n        this.radioOptions[\n          this.getNextItemToSelect(this.selectedChild, true)\n        ].selected = true;\n        event.preventDefault();\n        break;\n      case \"ArrowUp\":\n      case \"ArrowLeft\":\n        this.radioOptions[\n          this.getNextItemToSelect(this.selectedChild, false)\n        ].selected = true;\n        event.preventDefault();\n    }\n  };\n\n  private getNextItemToSelect = (\n    currentItem: number,\n    movingDown: boolean\n  ): number => {\n    const numRadios = this.radioOptions.length - 1;\n\n    if (currentItem < 1) {\n      currentItem = 0;\n    }\n\n    let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n\n    //check if wrap around necessary\n    if (nextItem < 0) {\n      nextItem = numRadios;\n    } else if (nextItem > numRadios) {\n      nextItem = 0;\n    }\n\n    //if next item is disabled then find next\n    if (this.radioOptions[nextItem].disabled) {\n      nextItem = this.getNextItemToSelect(nextItem, movingDown);\n    }\n\n    return nextItem;\n  };\n\n  componentDidLoad(): void {\n    this.radioOptions = Array.from(\n      this.host.querySelectorAll(\"ic-radio-option\")\n    );\n\n    this.radioOptions.forEach((radioOption, index) => {\n      if (!radioOption.selected) {\n        radioOption.selected = this.checkedValue === radioOption.value;\n      }\n      radioOption.name = this.name;\n      radioOption.groupLabel = this.label;\n      if (radioOption.selected) {\n        this.selectedChild = index;\n        this.checkedValue = radioOption.value;\n      }\n    });\n    this.radioOptions[0].shadowRoot.querySelector(\"input\").tabIndex =\n      this.selectedChild > 0 ? -1 : 0;\n\n    onComponentRequiredPropUndefined(\n      [\n        { prop: this.label, propName: \"label\" },\n        { prop: this.name, propName: \"name\" },\n      ],\n      \"Radio Group\"\n    );\n  }\n\n  render() {\n    const hadValidationStatus = hasValidationStatus(\n      this.validationStatus,\n      this.disabled\n    );\n\n    renderHiddenInput(\n      true,\n      this.host,\n      this.name,\n      this.checkedValue,\n      this.disabled\n    );\n\n    return (\n      <Host onKeyDown={this.handleKeyDown}>\n        <div\n          role=\"radiogroup\"\n          aria-label={`${this.label}${this.required ? \", required\" : \"\"}`}\n        >\n          {!this.hideLabel && (\n            <ic-input-label\n              class={{ [`${this.validationStatus}`]: true }}\n              label={this.label}\n              helperText={this.helperText}\n              required={this.required}\n              disabled={this.disabled}\n            ></ic-input-label>\n          )}\n          <slot></slot>\n        </div>\n        <ic-input-validation\n          ariaLiveMode=\"polite\"\n          status={hadValidationStatus ? this.validationStatus : \"\"}\n          message={hadValidationStatus ? this.validationText : \"\"}\n        ></ic-input-validation>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/ic-radio-option.js

@@ -1,8 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { p as getSlotContent, a as onComponentRequiredPropUndefined } from './helpers.js';
+import { n as getSlotContent, a as onComponentRequiredPropUndefined } from './helpers.js';
 import { d as defineCustomElement$2 } from './ic-typography2.js';
 
-const icRadioOptionCss = "/*! 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;margin-bottom:var(--ic-space-sm);width:-moz-fit-content;width:fit-content}:host([dense]){margin-bottom:10px}:host([additional-field-display=\"static\"]) ::slotted(ic-textfield){margin-top:var(--ic-space-xs);margin-left:var(--ic-space-xl)}:host([inactive]){color:var(--ic-architectural-200)}.container input:focus+span.checkmark,:host(:focus) .container input:checked+span.checkmark{box-shadow:var(--ic-border-focus);outline:none}.container input:focus-visible{outline:none}.container{display:inline-flex;position:relative;cursor:pointer;align-items:center;gap:var(--ic-space-xs);margin-left:5px}.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;top:0;left:0;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:20px;width:20px;background-color:transparent;border:1px solid #a7acb3;border-radius:50%;transition:var(--ic-easing-transition-fast)}.container input:checked~.checkmark::after{display:inline-block}.container:hover input~.checkmark{background-color:var(--ic-action-default-bg-hover);box-shadow:0 0 0 4px var(--ic-action-default-bg-hover);border:1px solid var(--ic-action-default)}.container:active input~.checkmark{background-color:var(--ic-action-default-bg-active);border:1px solid var(--ic-action-default-active);box-shadow:0 0 0 4px var(--ic-action-default-bg-active)}.container:active input:checked~.checkmark{background-color:var(--ic-action-default-bg-active);border:2px solid var(--ic-action-default-active);box-shadow:0 0 0 4px var(--ic-action-default-bg-active)}.container:active input:checked~.checkmark::after{background-color:var(--ic-action-default-active)}.container input:checked~.checkmark{border:2px solid var(--ic-action-default);margin:-1px;margin-bottom:1px}.container input:checked:disabled~.checkmark{background-color:transparent;border:2px solid var(--ic-architectural-200)}.container input:disabled~.checkmark{border:1px dashed var(--ic-architectural-200)}.container input:disabled~.checkmark::after{background:var(--ic-architectural-200)}.container:hover input:disabled~.checkmark{background-color:transparent;box-shadow:none;border:2px solid none}.container:active input:disabled~.checkmark::after{background-color:var(--ic-architectural-200)}.container .checkmark::after{content:\"\";position:absolute;display:none;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--ic-action-default)}.radio-label{font-size:16px;font-weight:400;margin-left:var(--ic-space-sm)}.addition-field-wrapper{margin-left:44px}.branch-corner{color:var(--ic-action-default);height:var(--ic-space-md);width:var(--ic-space-xl);border-radius:0 0 0 3px;border-bottom:2px solid var(--ic-action-default);border-left:2px solid var(--ic-action-default);margin-left:-1px}.dynamic-container{display:flex;position:relative;margin-left:var(--ic-space-md);margin-top:6px;gap:var(--ic-space-xs)}.dynamic-container.hidden{display:none}.dynamic-text{color:var(--ic-action-default);margin-top:5px;margin-bottom:var(--ic-space-xs);border-radius:2%}";
+const icRadioOptionCss = "/*! 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;margin-bottom:var(--ic-space-sm);width:-moz-fit-content;width:fit-content}:host([small]){margin-bottom:10px}:host([additional-field-display=\"static\"]) ::slotted(ic-textfield){margin-top:var(--ic-space-xs);margin-left:var(--ic-space-xl)}:host([disabled]){color:var(--ic-architectural-200)}.container input:focus+span.checkmark,:host(:focus) .container input:checked+span.checkmark{box-shadow:var(--ic-border-focus);outline:none}.container input:focus-visible{outline:none}.container{display:inline-flex;position:relative;cursor:pointer;align-items:center;gap:var(--ic-space-xs);margin-left:5px}.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;top:0;left:0;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:20px;width:20px;background-color:transparent;border:1px solid #a7acb3;border-radius:50%;transition:var(--ic-easing-transition-fast)}.container input:checked~.checkmark::after{display:inline-block}.container:hover input~.checkmark{background-color:var(--ic-action-default-bg-hover);box-shadow:0 0 0 4px var(--ic-action-default-bg-hover);border:1px solid var(--ic-action-default)}.container:active input~.checkmark{background-color:var(--ic-action-default-bg-active);border:1px solid var(--ic-action-default-active);box-shadow:0 0 0 4px var(--ic-action-default-bg-active)}.container:active input:checked~.checkmark{background-color:var(--ic-action-default-bg-active);border:2px solid var(--ic-action-default-active);box-shadow:0 0 0 4px var(--ic-action-default-bg-active)}.container:active input:checked~.checkmark::after{background-color:var(--ic-action-default-active)}.container input:checked~.checkmark{border:2px solid var(--ic-action-default);margin:-1px;margin-bottom:1px}.container input:checked:disabled~.checkmark{background-color:transparent;border:2px solid var(--ic-architectural-200)}.container input:disabled~.checkmark{border:1px dashed var(--ic-architectural-200)}.container input:disabled~.checkmark::after{background:var(--ic-architectural-200)}.container:hover input:disabled~.checkmark{background-color:transparent;box-shadow:none;border:2px solid none}.container:active input:disabled~.checkmark::after{background-color:var(--ic-architectural-200)}.container .checkmark::after{content:\"\";position:absolute;display:none;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--ic-action-default)}.radio-label{font-size:16px;font-weight:400;margin-left:var(--ic-space-sm)}.addition-field-wrapper{margin-left:44px}.branch-corner{color:var(--ic-action-default);height:var(--ic-space-md);width:var(--ic-space-xl);border-radius:0 0 0 3px;border-bottom:2px solid var(--ic-action-default);border-left:2px solid var(--ic-action-default);margin-left:-1px}.dynamic-container{display:flex;position:relative;margin-left:var(--ic-space-md);margin-top:6px;gap:var(--ic-space-xs)}.dynamic-container.hidden{display:none}.dynamic-text{color:var(--ic-action-default);margin-top:5px;margin-bottom:var(--ic-space-xs);border-radius:2%}";
 
 const RadioOption = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/ic-radio-option.js.map

@@ -1 +1 @@
-{"file":"ic-radio-option.js","mappings":"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","names":[],"sources":["./src/components/ic-radio-option/ic-radio-option.css?tag=ic-radio-option&encapsulation=shadow","./src/components/ic-radio-option/ic-radio-option.tsx"],"sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n  display: block;\n  margin-bottom: var(--ic-space-sm);\n  width: fit-content;\n}\n\n:host([dense]) {\n  margin-bottom: 10px;\n}\n\n:host([additional-field-display=\"static\"]) ::slotted(ic-textfield) {\n  margin-top: var(--ic-space-xs);\n  margin-left: var(--ic-space-xl);\n}\n\n/* The label turns grey when disabled  */\n:host([inactive]) {\n  color: var(--ic-architectural-200);\n}\n\n/* Focus states */\n\n.container input:focus + span.checkmark,\n:host(:focus) .container input:checked + span.checkmark {\n  box-shadow: var(--ic-border-focus);\n  outline: none;\n}\n\n.container input:focus-visible {\n  outline: none;\n}\n\n/* The container */\n.container {\n  display: inline-flex;\n  position: relative;\n  cursor: pointer;\n  align-items: center;\n  gap: var(--ic-space-xs);\n  margin-left: 5px;\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  top: 0;\n  left: 0;\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: 20px;\n  width: 20px;\n  background-color: transparent;\n  border: 1px solid #a7acb3;\n  border-radius: 50%;\n  transition: var(--ic-easing-transition-fast);\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);\n  box-shadow: 0 0 0 4px var(--ic-action-default-bg-hover);\n  border: 1px 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);\n  border: 1px solid var(--ic-action-default-active);\n  box-shadow: 0 0 0 4px 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: 2px solid var(--ic-action-default-active);\n  box-shadow: 0 0 0 4px 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-active);\n}\n\n/* When the radio button is checked */\n.container input:checked ~ .checkmark {\n  border: 2px solid var(--ic-action-default);\n  margin: -1px;\n  margin-bottom: 1px;\n}\n\n/* When the radio button is checked and disabled */\n.container input:checked:disabled ~ .checkmark {\n  background-color: transparent;\n  border: 2px solid var(--ic-architectural-200);\n}\n\n/* When the radio button is disabled */\n.container input:disabled ~ .checkmark {\n  border: 1px 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: transparent;\n  box-shadow: none;\n  border: 2px 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: 2px;\n  left: 2px;\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  background: var(--ic-action-default);\n}\n\n.radio-label {\n  font-size: 16px;\n  font-weight: 400;\n  margin-left: var(--ic-space-sm);\n}\n\n.addition-field-wrapper {\n  margin-left: 44px;\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 3px;\n  border-bottom: 2px solid var(--ic-action-default);\n  border-left: 2px solid var(--ic-action-default);\n  margin-left: -1px;\n}\n\n/* The dynamic container */\n.dynamic-container {\n  display: flex;\n  position: relative;\n  margin-left: var(--ic-space-md);\n  margin-top: 6px;\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  margin-top: 5px;\n  margin-bottom: var(--ic-space-xs);\n  border-radius: 2%;\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  Listen,\n  Watch,\n} from \"@stencil/core\";\nimport { IcAdditionalFieldTypes } from \"../../utils/types\";\nimport {\n  getSlotContent,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcValueEventDetail } from \"../../interface\";\n@Component({\n  tag: \"ic-radio-option\",\n  styleUrl: \"ic-radio-option.css\",\n  shadow: true,\n})\nexport class RadioOption {\n  private radioElement: HTMLInputElement;\n  /**\n   * Determines whether the radio should be in selected state.\n   */\n  @Prop({ reflect: true }) selected?: boolean = false;\n  /**\n   * Determines whether the radio should be in disabled state.\n   */\n  @Prop() disabled?: boolean = false;\n  /**\n   * Provide a label for the input.\n   */\n  @Prop() label?: string;\n  /**\n   * Provide a value for the input.\n   */\n  @Prop() value!: string;\n  /**\n   * Provide a name for the input.\n   */\n  @Prop() name: string;\n  /**\n   * Provide a group label for the input.\n   */\n  @Prop() groupLabel: string;\n  /**\n   * Provide a text prop for the dynamic text.\n   */\n  @Prop() dynamicText: string = \"This selection requires additional answers\";\n\n  /** Determines type of additional text field in relation to radio option */\n\n  @Prop({ reflect: true }) additionalFieldDisplay: IcAdditionalFieldTypes =\n    \"static\";\n\n  @Element() host: HTMLIcRadioOptionElement;\n\n  /**\n   * Emitted when radio is checked\n   */\n  @Event() icCheck!: EventEmitter<void>;\n\n  /**\n   * Emitted when a radio is selected.\n   */\n  @Event() radioOptionSelect: EventEmitter<IcValueEventDetail>;\n\n  @Watch(\"selected\")\n  selectedChangeHandler(selected: boolean): void {\n    if (selected) {\n      this.handleClick();\n    }\n  }\n\n  private defaultRadioValue: string = \"\";\n\n  private handleClick = () => {\n    if (!this.disabled) {\n      this.radioElement.focus();\n\n      if (this.hasAdditionalField) {\n        const textfield = this.host.querySelector(\"ic-text-field\");\n        this.value =\n          textfield.value !== \"\" ? textfield.value : this.defaultRadioValue;\n      }\n\n      this.radioOptionSelect.emit({\n        value: this.value,\n      });\n    }\n  };\n\n  private swallowClick = (event: MouseEvent) => {\n    event.stopPropagation();\n  };\n\n  private hasAdditionalField: boolean = false;\n  componentWillLoad(): void {\n    const additonalFieldContent = getSlotContent(this.host, \"additional-field\");\n\n    if (additonalFieldContent !== null) {\n      this.hasAdditionalField = true;\n      const Element = additonalFieldContent[0] as HTMLElement;\n      if (Element.tagName === \"IC-TEXT-FIELD\") {\n        const textField = Element as HTMLIcTextFieldElement;\n        textField.hiddenInput = false;\n      }\n    }\n\n    this.defaultRadioValue = this.value;\n  }\n\n  @Listen(\"icChange\")\n  textfieldValueHandler(event: CustomEvent<{ value: string }>): void {\n    const textFieldValue = event.detail.value;\n\n    if (this.selected) {\n      if (textFieldValue !== \"\") {\n        this.value = event.detail.value;\n        this.radioOptionSelect.emit({\n          value: this.value,\n        });\n      } else {\n        this.value = this.defaultRadioValue;\n        this.radioOptionSelect.emit({\n          value: this.defaultRadioValue,\n        });\n      }\n    }\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.value, propName: \"value\" }],\n      \"Radio Option\"\n    );\n  }\n\n  componentDidRender(): void {\n    if (this.additionalFieldDisplay === \"static\") {\n      const textfield = this.host.querySelector(\"ic-text-field\");\n      if (!this.selected) {\n        textfield && textfield.setAttribute(\"disabled\", \"\");\n      } else {\n        textfield && textfield.removeAttribute(\"disabled\");\n      }\n    }\n  }\n\n  render() {\n    const id = `ic-radio-option-${\n      this.label !== undefined ? this.label : this.value\n    }-${this.groupLabel}`;\n\n    return (\n      <Host onClick={this.handleClick}>\n        <div class={{ [\"container\"]: true, [\"disabled\"]: this.disabled }}>\n          <input\n            role=\"radio\"\n            tabindex={this.selected ? \"0\" : \"-1\"}\n            type=\"radio\"\n            name={this.name}\n            id={id}\n            value={this.value}\n            disabled={this.disabled ? true : null}\n            checked={this.selected}\n            ref={(el) => (this.radioElement = el)}\n          ></input>\n          <span class=\"checkmark\"></span>\n          <ic-typography class=\"radio-label\" variant=\"body\">\n            <label htmlFor={id}>{this.label}</label>\n          </ic-typography>\n        </div>\n\n        {this.hasAdditionalField && (\n          <div\n            onClick={this.swallowClick}\n            class={{\n              \"dynamic-container\": true,\n              hidden:\n                this.additionalFieldDisplay === \"dynamic\" && !this.selected,\n            }}\n          >\n            {this.additionalFieldDisplay === \"dynamic\" && (\n              <div class=\"branch-corner\"></div>\n            )}\n            <div>\n              {this.additionalFieldDisplay === \"dynamic\" && (\n                <ic-typography variant=\"caption\">\n                  <p class=\"dynamic-text\">{this.dynamicText}</p>\n                </ic-typography>\n              )}\n              <div\n                class={{\n                  \"addition-field-wrapper\":\n                    this.additionalFieldDisplay === \"static\",\n                }}\n              >\n                <slot name=\"additional-field\"></slot>\n              </div>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-radio-option.js","mappings":"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","names":[],"sources":["./src/components/ic-radio-option/ic-radio-option.css?tag=ic-radio-option&encapsulation=shadow","./src/components/ic-radio-option/ic-radio-option.tsx"],"sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n  display: block;\n  margin-bottom: var(--ic-space-sm);\n  width: fit-content;\n}\n\n:host([small]) {\n  margin-bottom: 10px;\n}\n\n:host([additional-field-display=\"static\"]) ::slotted(ic-textfield) {\n  margin-top: var(--ic-space-xs);\n  margin-left: var(--ic-space-xl);\n}\n\n/* The label turns grey when disabled  */\n:host([disabled]) {\n  color: var(--ic-architectural-200);\n}\n\n/* Focus states */\n\n.container input:focus + span.checkmark,\n:host(:focus) .container input:checked + span.checkmark {\n  box-shadow: var(--ic-border-focus);\n  outline: none;\n}\n\n.container input:focus-visible {\n  outline: none;\n}\n\n/* The container */\n.container {\n  display: inline-flex;\n  position: relative;\n  cursor: pointer;\n  align-items: center;\n  gap: var(--ic-space-xs);\n  margin-left: 5px;\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  top: 0;\n  left: 0;\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: 20px;\n  width: 20px;\n  background-color: transparent;\n  border: 1px solid #a7acb3;\n  border-radius: 50%;\n  transition: var(--ic-easing-transition-fast);\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);\n  box-shadow: 0 0 0 4px var(--ic-action-default-bg-hover);\n  border: 1px 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);\n  border: 1px solid var(--ic-action-default-active);\n  box-shadow: 0 0 0 4px 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: 2px solid var(--ic-action-default-active);\n  box-shadow: 0 0 0 4px 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-active);\n}\n\n/* When the radio button is checked */\n.container input:checked ~ .checkmark {\n  border: 2px solid var(--ic-action-default);\n  margin: -1px;\n  margin-bottom: 1px;\n}\n\n/* When the radio button is checked and disabled */\n.container input:checked:disabled ~ .checkmark {\n  background-color: transparent;\n  border: 2px solid var(--ic-architectural-200);\n}\n\n/* When the radio button is disabled */\n.container input:disabled ~ .checkmark {\n  border: 1px 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: transparent;\n  box-shadow: none;\n  border: 2px 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: 2px;\n  left: 2px;\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  background: var(--ic-action-default);\n}\n\n.radio-label {\n  font-size: 16px;\n  font-weight: 400;\n  margin-left: var(--ic-space-sm);\n}\n\n.addition-field-wrapper {\n  margin-left: 44px;\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 3px;\n  border-bottom: 2px solid var(--ic-action-default);\n  border-left: 2px solid var(--ic-action-default);\n  margin-left: -1px;\n}\n\n/* The dynamic container */\n.dynamic-container {\n  display: flex;\n  position: relative;\n  margin-left: var(--ic-space-md);\n  margin-top: 6px;\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  margin-top: 5px;\n  margin-bottom: var(--ic-space-xs);\n  border-radius: 2%;\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  Listen,\n  Watch,\n} from \"@stencil/core\";\nimport { IcAdditionalFieldTypes } from \"../../utils/types\";\nimport {\n  getSlotContent,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcValueEventDetail } from \"../../interface\";\n@Component({\n  tag: \"ic-radio-option\",\n  styleUrl: \"ic-radio-option.css\",\n  shadow: true,\n})\nexport class RadioOption {\n  private radioElement: HTMLInputElement;\n  /**\n   * Determines whether the radio should be in selected state.\n   */\n  @Prop({ reflect: true }) selected?: boolean = false;\n  /**\n   * Determines whether the radio should be in disabled state.\n   */\n  @Prop() disabled?: boolean = false;\n  /**\n   * Provide a label for the input.\n   */\n  @Prop() label?: string;\n  /**\n   * Provide a value for the input.\n   */\n  @Prop() value!: string;\n  /**\n   * Provide a name for the input.\n   */\n  @Prop() name: string;\n  /**\n   * Provide a group label for the input.\n   */\n  @Prop() groupLabel: string;\n  /**\n   * Provide a text prop for the dynamic text.\n   */\n  @Prop() dynamicText: string = \"This selection requires additional answers\";\n\n  /** Determines type of additional text field in relation to radio option */\n\n  @Prop({ reflect: true }) additionalFieldDisplay: IcAdditionalFieldTypes =\n    \"static\";\n\n  @Element() host: HTMLIcRadioOptionElement;\n\n  /**\n   * Emitted when radio is checked\n   */\n  @Event() icCheck!: EventEmitter<void>;\n\n  /**\n   * Emitted when a radio is selected.\n   */\n  @Event() radioOptionSelect: EventEmitter<IcValueEventDetail>;\n\n  @Watch(\"selected\")\n  selectedChangeHandler(selected: boolean): void {\n    if (selected) {\n      this.handleClick();\n    }\n  }\n\n  private defaultRadioValue: string = \"\";\n\n  private handleClick = () => {\n    if (!this.disabled) {\n      this.radioElement.focus();\n\n      if (this.hasAdditionalField) {\n        const textfield = this.host.querySelector(\"ic-text-field\");\n        this.value =\n          textfield.value !== \"\" ? textfield.value : this.defaultRadioValue;\n      }\n\n      this.radioOptionSelect.emit({\n        value: this.value,\n      });\n    }\n  };\n\n  private swallowClick = (event: MouseEvent) => {\n    event.stopPropagation();\n  };\n\n  private hasAdditionalField: boolean = false;\n  componentWillLoad(): void {\n    const additonalFieldContent = getSlotContent(this.host, \"additional-field\");\n\n    if (additonalFieldContent !== null) {\n      this.hasAdditionalField = true;\n      const Element = additonalFieldContent[0] as HTMLElement;\n      if (Element.tagName === \"IC-TEXT-FIELD\") {\n        const textField = Element as HTMLIcTextFieldElement;\n        textField.hiddenInput = false;\n      }\n    }\n\n    this.defaultRadioValue = this.value;\n  }\n\n  @Listen(\"icChange\")\n  textfieldValueHandler(event: CustomEvent<{ value: string }>): void {\n    const textFieldValue = event.detail.value;\n\n    if (this.selected) {\n      if (textFieldValue !== \"\") {\n        this.value = event.detail.value;\n        this.radioOptionSelect.emit({\n          value: this.value,\n        });\n      } else {\n        this.value = this.defaultRadioValue;\n        this.radioOptionSelect.emit({\n          value: this.defaultRadioValue,\n        });\n      }\n    }\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.value, propName: \"value\" }],\n      \"Radio Option\"\n    );\n  }\n\n  componentDidRender(): void {\n    if (this.additionalFieldDisplay === \"static\") {\n      const textfield = this.host.querySelector(\"ic-text-field\");\n      if (!this.selected) {\n        textfield && textfield.setAttribute(\"disabled\", \"\");\n      } else {\n        textfield && textfield.removeAttribute(\"disabled\");\n      }\n    }\n  }\n\n  render() {\n    const id = `ic-radio-option-${\n      this.label !== undefined ? this.label : this.value\n    }-${this.groupLabel}`;\n\n    return (\n      <Host onClick={this.handleClick}>\n        <div class={{ [\"container\"]: true, [\"disabled\"]: this.disabled }}>\n          <input\n            role=\"radio\"\n            tabindex={this.selected ? \"0\" : \"-1\"}\n            type=\"radio\"\n            name={this.name}\n            id={id}\n            value={this.value}\n            disabled={this.disabled ? true : null}\n            checked={this.selected}\n            ref={(el) => (this.radioElement = el)}\n          ></input>\n          <span class=\"checkmark\"></span>\n          <ic-typography class=\"radio-label\" variant=\"body\">\n            <label htmlFor={id}>{this.label}</label>\n          </ic-typography>\n        </div>\n\n        {this.hasAdditionalField && (\n          <div\n            onClick={this.swallowClick}\n            class={{\n              \"dynamic-container\": true,\n              hidden:\n                this.additionalFieldDisplay === \"dynamic\" && !this.selected,\n            }}\n          >\n            {this.additionalFieldDisplay === \"dynamic\" && (\n              <div class=\"branch-corner\"></div>\n            )}\n            <div>\n              {this.additionalFieldDisplay === \"dynamic\" && (\n                <ic-typography variant=\"caption\">\n                  <p class=\"dynamic-text\">{this.dynamicText}</p>\n                </ic-typography>\n              )}\n              <div\n                class={{\n                  \"addition-field-wrapper\":\n                    this.additionalFieldDisplay === \"static\",\n                }}\n              >\n                <slot name=\"additional-field\"></slot>\n              </div>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}