@ukic/web-components 2.17.0 → 2.18.0

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

@@ -1 +1 @@
-{"version":3,"file":"ic-navigation-item.js","sourceRoot":"","sources":["../../../src/components/ic-navigation-item/ic-navigation-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,MAAM,EACN,MAAM,EACN,CAAC,EACD,IAAI,EACJ,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AAEvB,OAAO,EACL,YAAY,EACZ,oBAAoB,EACpB,uBAAuB,EACvB,uBAAuB,EACvB,UAAU,GACX,MAAM,qBAAqB,CAAC;AAG7B,OAAO,WAAW,MAAM,+BAA+B,CAAC;AAExD,OAAO,SAAS,MAAM,4BAA4B,CAAC;AAGnD;;;GAGG;AASH,MAAM,OAAO,cAAc;;QAEjB,oBAAe,GAAY,IAAI,CAAC;QA6IhC,iCAA4B,GAAG,CACrC,IAAY,EACZ,QAAgB,EAChB,MAAc,EACd,GAAW,EACX,cAA8B,EAC9B,QAA0B,EAC1B,KAAa,EACA,EAAE;YACf,MAAM,OAAO,GACX,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;YACjE,MAAM,oBAAoB,GAAG,IAAI,CAAC,UAAU,IAAI,CAC9C,WAAK,KAAK,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,EAAE,SAAS,EAAE,WAAW,GAAQ,CAC1D,CAAC;YACF,MAAM,aAAa,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC,IAAI,CAC9D,WAAK,KAAK,EAAC,MAAM;gBACf,YAAM,IAAI,EAAC,MAAM,GAAQ;gBACxB,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,CAAC,IAAI,YAAM,IAAI,EAAC,OAAO,GAAQ,CACvD,CACP,CAAC;YAEF,IAAI,IAAI,KAAK,EAAE,EAAE,CAAC;gBAChB,OAAO,CACL,SACE,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,cAAc,EAC9B,QAAQ,EAAE,QAAQ,KAAK,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,EAC9C,KAAK,EAAC,MAAM,EACZ,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,EAC/B,IAAI,EAAC,MAAM;oBAEV,aAAa;oBAEd,qBAAe,OAAO,EAAE,OAAO,IAAG,KAAK,CAAiB;oBACxD,WAAK,KAAK,EAAC,mBAAmB,IAAE,oBAAoB,CAAO;oBAC1D,MAAM,KAAK,QAAQ,IAAI,CACtB,YAAM,KAAK,EAAC,kBAAkB,EAAC,SAAS,EAAE,SAAS,GAAI,CACxD,CACC,CACL,CAAC;YACJ,CAAC;YAED,OAAO,CACL,WAAK,QAAQ,EAAC,GAAG,EAAC,KAAK,EAAC,MAAM,EAAC,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;gBAC3D,aAAa;gBACd,qBAAe,OAAO,EAAE,OAAO,IAAG,KAAK,CAAiB;gBACvD,oBAAoB,CACjB,CACP,CAAC;QACJ,CAAC,CAAC;QAEM,yBAAoB,GAAG,CAAC,EAC9B,MAAM,GACwB,EAAQ,EAAE;;YACxC,MAAM,EAAE,IAAI,EAAE,GAAG,MAAM,CAAC;YACxB,IAAI,IAAI,KAAK,IAAI,CAAC,UAAU,EAAE,CAAC;gBAC7B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;gBACvB,IAAI,CAAC,gBAAgB;oBACnB,IAAI;wBACJ,CAAC,CAAA,MAAC,IAAI,CAAC,QAAuC,0CAC1C,sBAAsB,KAAI,YAAY,CAAC,CAAC,CAAC,CAAC;YAClD,CAAC;QACH,CAAC,CAAC;QAEM,yBAAoB,GAAG,CAAC,EAC9B,MAAM,GACwB,EAAQ,EAAE;YACxC,MAAM,EAAE,eAAe,EAAE,aAAa,EAAE,GAAG,MAAM,CAAC;YAClD,IAAI,CAAC,eAAe,GAAG,eAAe,CAAC;YACvC,IAAI,CAAC,eAAe,GAAG,aAAa,CAAC;QACvC,CAAC,CAAC;QAEM,eAAU,GAAG,CAAC,EAAE,aAAa,EAAc,EAAE,EAAE;YACrD,IACE,aAAa,KAAK,IAAI;gBACrB,aAA6B,CAAC,OAAO,KAAK,oBAAoB,EAC/D,CAAC;gBACD,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;YACxB,CAAC;QACH,CAAC,CAAC;QAEM,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;QAC7B,CAAC,CAAC;QAEM,yBAAoB,GAAG,GAAG,EAAE;YAClC,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;gBACf,OAAO,IAAI,CAAC,KAAK,CAAC;YACpB,CAAC;YAED,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;gBACxB,OAAO,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC;YACzC,CAAC;YAED,IAAI,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;gBACxB,OAAO,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC;YACzC,CAAC;YAED,OAAO,EAAE,CAAC;QACZ,CAAC,CAAC;QAEM,gCAA2B,GAAG,GAAG,EAAE;YACzC,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;gBACf,OAAO,IAAI,CAAC,4BAA4B,CACtC,IAAI,CAAC,IAAI,EACT,IAAI,CAAC,QAAQ,EACb,IAAI,CAAC,MAAM,EACX,IAAI,CAAC,GAAG,EACR,IAAI,CAAC,cAAc,EACnB,IAAI,CAAC,QAAQ,EACb,IAAI,CAAC,KAAK,CACX,CAAC;YACJ,CAAC;YAED,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;gBACxB,OAAO,YAAM,IAAI,EAAC,iBAAiB,GAAQ,CAAC;YAC9C,CAAC;YACD,OAAO,eAAa,CAAC;QACvB,CAAC,CAAC;0BAjQ4B,YAAY,CAAC,EAAE;0BACvB,uBAAuB,EAAE;gCACV,KAAK;+BACN,KAAK;6BACP,KAAK;;;+BAGH,KAAK;kCAKH,KAAK;wCAKC,KAAK;wBAKX,KAAK;0BAKb,KAAK;oBAKZ,EAAE;;;;;wBAyBG,KAAK;;;IAiBjC,oBAAoB;QAClB,IAAI,IAAI,CAAC,cAAc,KAAK,MAAM,EAAE,CAAC;YACnC,IAAI,CAAC,QAAQ,CAAC,mBAAmB,CAC/B,iBAAiB,EACjB,IAAI,CAAC,oBAAoB,CAC1B,CAAC;QACJ,CAAC;aAAM,IAAI,IAAI,CAAC,cAAc,KAAK,KAAK,EAAE,CAAC;YACzC,IAAI,CAAC,QAAQ,CAAC,mBAAmB,CAC/B,eAAe,EACf,IAAI,CAAC,oBAAoB,CAC1B,CAAC;QACJ,CAAC;IACH,CAAC;IAED,iBAAiB;QACf,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,uBAAuB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAC7D,IAAI,CAAC,cAAc,GAAG,OAAO,CAAC;QAC9B,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC;QACvB,IAAI,CAAC,UAAU,GAAG,oBAAoB,EAAE,CAAC;QAEzC,IAAI,IAAI,CAAC,cAAc,KAAK,MAAM,EAAE,CAAC;YACnC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAC5B,iBAAiB,EACjB,IAAI,CAAC,oBAAoB,CAC1B,CAAC;QACJ,CAAC;aAAM,IAAI,IAAI,CAAC,cAAc,KAAK,KAAK,EAAE,CAAC;YACzC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAC5B,eAAe,EACf,IAAI,CAAC,oBAAoB,CAC1B,CAAC;YACF,IAAI,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,OAAO,KAAK,qBAAqB;gBACzD,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;YAC5B,IACE,IAAI,CAAC,UAAU;gBACd,IAAI,CAAC,QAAuC,CAAC,sBAAsB;gBAEpE,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;QACjC,CAAC;QAED,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,0BAA0B,CAAC,CAAC;QACxE,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,IAAI,CAAC,cAAc,CAAC,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;QACzE,CAAC;IACH,CAAC;IAED,kBAAkB;QAChB,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;IAC/B,CAAC;IAGD,kBAAkB,CAAC,EAAE,MAAM,EAAwB;QACjD,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC;IAChC,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,QAAQ;;QACZ,MAAA,IAAI,CAAC,MAAM,0CAAE,KAAK,EAAE,CAAC;IACvB,CAAC;IA6HD,MAAM;QACJ,MAAM,EAAE,gBAAgB,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;QAE3D,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;gBACL,CAAC,iBAAiB,CAAC,EAAE,IAAI;gBACzB,CAAC,yBAAyB,CAAC,EACzB,CAAC,gBAAgB,IAAI,IAAI,CAAC,cAAc,KAAK,KAAK;gBACpD,CAAC,wCAAwC,CAAC,EACxC,aAAa,IAAI,CAAC,gBAAgB,IAAI,QAAQ;gBAChD,CAAC,IAAI,CAAC,UAAU,CAAC,EACf,CAAC,CAAC,gBAAgB,IAAI,CAAC,aAAa,CAAC;oBACrC,CAAC,IAAI,CAAC,cAAc,KAAK,MAAM,IAAI,aAAa,CAAC;gBACnD,CAAC,0BAA0B,CAAC,EAAE,CAAC,aAAa,IAAI,QAAQ;gBACxD,CAAC,2BAA2B,CAAC,EAAE,gBAAgB;gBAC/C,CAAC,oCAAoC,CAAC,EAAE,gBAAgB,IAAI,QAAQ;gBACpE,CAAC,+BAA+B,CAAC,EAAE,aAAa,IAAI,CAAC,gBAAgB;gBACrE,CAAC,6BAA6B,CAAC,EAC7B,IAAI,CAAC,cAAc,KAAK,aAAa;gBACvC,CAAC,iBAAiB,CAAC,EAAE,CAAC,IAAI,CAAC,eAAe;gBAC1C,CAAC,0BAA0B,CAAC,EAAE,IAAI,CAAC,cAAc,KAAK,MAAM;gBAC5D,CAAC,oCAAoC,CAAC,EACpC,CAAC,CAAC,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,wBAAwB,CAAC;oBACxD,IAAI,CAAC,cAAc,KAAK,MAAM;gBAChC,CAAC,+CAA+C,CAAC,EAC/C,CAAC,IAAI,CAAC,eAAe;oBACrB,IAAI,CAAC,cAAc,KAAK,MAAM;oBAC9B,IAAI,CAAC,kBAAkB;oBACvB,CAAC,IAAI,CAAC,eAAe;gBACvB,CAAC,YAAY,CAAC,EAAE,IAAI,CAAC,UAAU;aAChC,EACD,MAAM,EAAE,aAAa,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,EACnE,OAAO,EAAE,IAAI,CAAC,WAAW,kBACX,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,EACtC,IAAI,EAAC,UAAU;YAGf,kBACE,KAAK,EAAE,IAAI,CAAC,oBAAoB,EAAE,EAClC,MAAM,EAAC,iBAAiB,EACxB,SAAS,EAAC,OAAO,EACjB,KAAK,EAAE;oBACL,CAAC,yBAAyB,CAAC,EAAE,IAAI;oBACjC,CAAC,4CAA4C,CAAC,EAC5C,CAAC,CAAC,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,wBAAwB,CAAC;wBACxD,IAAI,CAAC,cAAc,KAAK,MAAM;oBAChC,CAAC,sDAAsD,CAAC,EACtD,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,uCAAuC,CAAC;iBAChE,IAEA,IAAI,CAAC,2BAA2B,EAAE,CACxB,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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  getNavItemParentDetails,\n  isSlotUsed,\n} from \"../../utils/helpers\";\nimport { IcNavType, IcTheme } from \"../../utils/types\";\n\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\n\nimport OpenInNew from \"../../assets/OpenInNew.svg\";\nimport { IcExpandedDetail } from \"../ic-side-navigation/ic-side-navigation.types\";\n\n/**\n * @part link - The `<a>` within ic-navigation-item\n * @slot badge - Badge component overlaying the top right of the icon.\n */\n\n@Component({\n  tag: \"ic-navigation-item\",\n  styleUrl: \"ic-navigation-item.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class NavigationItem {\n  private navigationSlot: HTMLElement;\n  private isInitialRender: boolean = true;\n  private itemEl: HTMLElement;\n\n  @Element() el: HTMLIcNavigationItemElement;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() focusStyle = getThemeForegroundColor();\n  @State() inTopNavSideMenu: boolean = false;\n  @State() isSideNavMobile: boolean = false;\n  @State() isTopNavChild: boolean = false;\n  @State() navigationType: IcNavType | \"\";\n  @State() parentEl: HTMLElement;\n  @State() sideNavExpanded: boolean = false;\n\n  /**\n   * @internal If `true`, the icon and label will be displayed when side navigation is collapsed.\n   */\n  @Prop() collapsedIconLabel: boolean = false;\n\n  /**\n   * @internal If `true`, the navigation item will be displayed within a tooltip.\n   */\n  @Prop() displayNavigationTooltip: boolean = false;\n\n  /**\n   * If `true`, the user can save the linked URL instead of navigating to it.\n   */\n  @Prop() download?: string | boolean = false;\n\n  /**\n   *  @internal If `true`, the navigation item will be expandable.\n   */\n  @Prop() expandable: boolean = false;\n\n  /**\n   * The destination of the navigation item.\n   */\n  @Prop() href: string = \"\";\n\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string;\n\n  /**\n   * The label of the navigation item.\n   */\n  @Prop() label: string;\n\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n\n  /**\n   *  If `true`, the navigation item will be set in a selected state.\n   */\n  @Prop() selected: boolean = false;\n\n  /**\n   *  The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n\n  /**\n   * @internal - Emitted when item loses focus.\n   */\n  @Event() childBlur: EventEmitter<void>;\n\n  /**\n   * @internal - Emitted when navigation item clicked.\n   */\n  @Event() navItemClicked: EventEmitter<void>;\n\n  disconnectedCallback(): void {\n    if (this.navigationType === \"side\") {\n      this.parentEl.removeEventListener(\n        \"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  componentWillLoad(): void {\n    const { navType, parent } = getNavItemParentDetails(this.el);\n    this.navigationType = navType;\n    this.parentEl = parent;\n    this.deviceSize = getCurrentDeviceSize();\n\n    if (this.navigationType === \"side\") {\n      this.parentEl.addEventListener(\n        \"sideNavExpanded\",\n        this.sideNavExpandHandler\n      );\n    } else if (this.navigationType === \"top\") {\n      this.parentEl.addEventListener(\n        \"topNavResized\",\n        this.topNavResizedHandler\n      );\n      if (this.el.parentElement.tagName === \"IC-NAVIGATION-GROUP\")\n        this.isTopNavChild = true;\n      if (\n        this.deviceSize <=\n        (this.parentEl as HTMLIcTopNavigationElement).customMobileBreakpoint\n      )\n        this.inTopNavSideMenu = true;\n    }\n\n    this.navigationSlot = this.el.querySelector('[slot=\"navigation-item\"]');\n    if (this.navigationSlot) {\n      this.navigationSlot.ariaLabel = this.navigationSlot.textContent.trim();\n    }\n  }\n\n  componentDidUpdate(): void {\n    this.isInitialRender = false;\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler({ detail }: CustomEvent<IcTheme>): void {\n    this.focusStyle = detail.mode;\n  }\n\n  /**\n   * Sets focus on the nav item.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.itemEl?.focus();\n  }\n\n  private displayDefaultNavigationItem = (\n    href: string,\n    hreflang: string,\n    target: string,\n    rel: string,\n    referrerpolicy: ReferrerPolicy,\n    download: string | boolean,\n    label: string\n  ): HTMLElement => {\n    const variant =\n      this.isTopNavChild || this.inTopNavSideMenu ? \"body\" : \"label\";\n    const ChevronIconComponent = this.expandable && (\n      <div class={{ svg: true }} innerHTML={chevronIcon}></div>\n    );\n    const IconComponent = this.el.querySelector('[slot=\"icon\"]') && (\n      <div class=\"icon\">\n        <slot name=\"icon\"></slot>\n        {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n      </div>\n    );\n\n    if (href !== \"\") {\n      return (\n        <a\n          href={href}\n          target={target}\n          rel={rel}\n          hreflang={hreflang}\n          referrerPolicy={referrerpolicy}\n          download={download !== false ? download : null}\n          class=\"link\"\n          ref={(el) => (this.itemEl = el)}\n          part=\"link\"\n        >\n          {IconComponent}\n\n          <ic-typography variant={variant}>{label}</ic-typography>\n          <div class=\"chevron-container\">{ChevronIconComponent}</div>\n          {target === \"_blank\" && (\n            <span class=\"open-in-new-icon\" innerHTML={OpenInNew} />\n          )}\n        </a>\n      );\n    }\n\n    return (\n      <div tabindex=\"0\" class=\"link\" ref={(el) => (this.itemEl = el)}>\n        {IconComponent}\n        <ic-typography variant={variant}>{label}</ic-typography>\n        {ChevronIconComponent}\n      </div>\n    );\n  };\n\n  private topNavResizedHandler = ({\n    detail,\n  }: CustomEvent<{ size: number }>): void => {\n    const { size } = detail;\n    if (size !== this.deviceSize) {\n      this.deviceSize = size;\n      this.inTopNavSideMenu =\n        size <=\n        ((this.parentEl as HTMLIcTopNavigationElement)\n          ?.customMobileBreakpoint || DEVICE_SIZES.L);\n    }\n  };\n\n  private sideNavExpandHandler = ({\n    detail,\n  }: CustomEvent<IcExpandedDetail>): void => {\n    const { sideNavExpanded, sideNavMobile } = detail;\n    this.sideNavExpanded = sideNavExpanded;\n    this.isSideNavMobile = sideNavMobile;\n  };\n\n  private handleBlur = ({ relatedTarget }: FocusEvent) => {\n    if (\n      relatedTarget === null ||\n      (relatedTarget as HTMLElement).tagName !== \"IC-NAVIGATION-ITEM\"\n    ) {\n      this.childBlur.emit();\n    }\n  };\n\n  private handleClick = () => {\n    this.navItemClicked.emit();\n  };\n\n  private generateTooltipLabel = () => {\n    if (this.label) {\n      return this.label;\n    }\n\n    if (this.navigationSlot) {\n      return this.navigationSlot.textContent;\n    }\n\n    if (this.el.children[0]) {\n      return this.el.children[0].textContent;\n    }\n\n    return \"\";\n  };\n\n  private renderNavigationItemContent = () => {\n    if (this.label) {\n      return this.displayDefaultNavigationItem(\n        this.href,\n        this.hreflang,\n        this.target,\n        this.rel,\n        this.referrerpolicy,\n        this.download,\n        this.label\n      );\n    }\n\n    if (this.navigationSlot) {\n      return <slot name=\"navigation-item\"></slot>;\n    }\n    return <slot></slot>;\n  };\n\n  render() {\n    const { inTopNavSideMenu, isTopNavChild, selected } = this;\n\n    return (\n      <Host\n        class={{\n          [\"navigation-item\"]: true,\n          [\"navigation-item-top-nav\"]:\n            !inTopNavSideMenu && this.navigationType === \"top\",\n          [\"navigation-item-top-nav-child-selected\"]:\n            isTopNavChild && !inTopNavSideMenu && selected,\n          [this.focusStyle]:\n            (!inTopNavSideMenu && !isTopNavChild) ||\n            (this.navigationType === \"side\" && isTopNavChild),\n          [\"navigation-item-selected\"]: !isTopNavChild && selected,\n          [\"navigation-item-side-menu\"]: inTopNavSideMenu,\n          [\"navigation-item-side-menu-selected\"]: inTopNavSideMenu && selected,\n          [\"navigation-item-top-nav-child\"]: isTopNavChild && !inTopNavSideMenu,\n          [\"navigation-item-page-header\"]:\n            this.navigationType === \"page-header\",\n          [\"with-transition\"]: !this.isInitialRender,\n          [\"navigation-item-side-nav\"]: this.navigationType === \"side\",\n          [\"navigation-item-side-nav-collapsed\"]:\n            (!this.sideNavExpanded || this.displayNavigationTooltip) &&\n            this.navigationType === \"side\",\n          [\"navigation-item-side-nav-collapsed-with-label\"]:\n            !this.sideNavExpanded &&\n            this.navigationType === \"side\" &&\n            this.collapsedIconLabel &&\n            !this.isSideNavMobile,\n          [\"expandable\"]: this.expandable,\n        }}\n        onBlur={isTopNavChild && !inTopNavSideMenu ? this.handleBlur : null}\n        onClick={this.handleClick}\n        aria-current={selected ? \"page\" : null}\n        role=\"listitem\"\n      >\n        {/* Tooltip enabled by applying navigation-item-side-nav-collapsed class to host */}\n        <ic-tooltip\n          label={this.generateTooltipLabel()}\n          target=\"navigation-item\"\n          placement=\"right\"\n          class={{\n            [\"tooltip-navigation-item\"]: true,\n            [\"tooltip-navigation-item-side-nav-collapsed\"]:\n              (!this.sideNavExpanded || this.displayNavigationTooltip) &&\n              this.navigationType === \"side\",\n            [\"tooltip-long-label-navigation-item-side-nav-expanded\"]:\n              this.el.hasAttribute(\"[display-navigation-tooltip = 'true']\"),\n          }}\n        >\n          {this.renderNavigationItemContent()}\n        </ic-tooltip>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-navigation-item.js","sourceRoot":"","sources":["../../../src/components/ic-navigation-item/ic-navigation-item.tsx"],"names":[],"mappings":"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","sourcesContent":["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  isSlotUsed,\n} from \"../../utils/helpers\";\nimport { IcNavType, IcTheme } from \"../../utils/types\";\n\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\n\nimport OpenInNew from \"../../assets/OpenInNew.svg\";\n\n/**\n * @part link - The `<a>` within ic-navigation-item\n * @slot badge - Badge component overlaying the top right of the icon.\n */\n\n@Component({\n  tag: \"ic-navigation-item\",\n  styleUrl: \"ic-navigation-item.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class NavigationItem {\n  private navigationSlot: HTMLElement;\n  private isInitialRender: boolean = true;\n  private itemEl: HTMLElement;\n\n  @Element() el: HTMLIcNavigationItemElement;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() focusStyle = getThemeForegroundColor();\n  @State() inTopNavSideMenu: boolean = false;\n  @State() isSideNavMobile: boolean = false;\n  @State() isTopNavChild: boolean = false;\n  @State() navigationType: IcNavType | \"\";\n  @State() parentEl: HTMLElement;\n  @State() sideNavExpanded: boolean = false;\n\n  /**\n   * @internal If `true`, the icon and label will be displayed when side navigation is collapsed.\n   */\n  @Prop() collapsedIconLabel: boolean = false;\n\n  /**\n   * @internal If `true`, the navigation item will be displayed within a tooltip.\n   */\n  @Prop() displayNavigationTooltip: boolean = false;\n\n  /**\n   * If `true`, the user can save the linked URL instead of navigating to it.\n   */\n  @Prop() download?: string | boolean = false;\n\n  /**\n   *  @internal If `true`, the navigation item will be expandable.\n   */\n  @Prop() expandable: boolean = false;\n\n  /**\n   * The destination of the navigation item.\n   */\n  @Prop() href: string = \"\";\n\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string;\n\n  /**\n   * The label of the navigation item.\n   */\n  @Prop() label: string;\n\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n\n  /**\n   *  If `true`, the navigation item will be set in a selected state.\n   */\n  @Prop() selected: boolean = false;\n\n  /**\n   *  The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n\n  /**\n   * @internal - Emitted when item loses focus.\n   */\n  @Event() childBlur: EventEmitter<void>;\n\n  /**\n   * @internal - Emitted when navigation item clicked.\n   */\n  @Event() navItemClicked: EventEmitter<void>;\n\n  disconnectedCallback(): void {\n    if (this.navigationType === \"side\") {\n      this.parentEl.removeEventListener(\n        \"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  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  componentDidUpdate(): void {\n    this.isInitialRender = false;\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.focusStyle = theme.mode;\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 displayDefaultNavigationItem = (\n    href: string,\n    hreflang: string,\n    target: string,\n    rel: string,\n    referrerpolicy: ReferrerPolicy,\n    download: string | boolean,\n    label: string\n  ): HTMLElement => {\n    const variant =\n      this.isTopNavChild || this.inTopNavSideMenu ? \"body\" : \"label\";\n    const ChevronIconComponent = this.expandable && (\n      <div class={{ svg: true }} innerHTML={chevronIcon}></div>\n    );\n    const IconComponent = this.el.querySelector('[slot=\"icon\"]') && (\n      <div class=\"icon\">\n        <slot name=\"icon\"></slot>\n        {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n      </div>\n    );\n\n    if (href !== \"\") {\n      return (\n        <a\n          href={href}\n          target={target}\n          rel={rel}\n          hreflang={hreflang}\n          referrerPolicy={referrerpolicy}\n          download={download !== false ? download : null}\n          class=\"link\"\n          ref={(el) => (this.itemEl = el)}\n          part=\"link\"\n        >\n          {IconComponent}\n\n          <ic-typography variant={variant}>{label}</ic-typography>\n          <div class=\"chevron-container\">{ChevronIconComponent}</div>\n          {target === \"_blank\" && (\n            <span class=\"open-in-new-icon\" innerHTML={OpenInNew} />\n          )}\n        </a>\n      );\n    }\n\n    return (\n      <div tabindex=\"0\" class=\"link\" ref={(el) => (this.itemEl = el)}>\n        {IconComponent}\n        <ic-typography variant={variant}>{label}</ic-typography>\n        {ChevronIconComponent}\n      </div>\n    );\n  };\n\n  private topNavResizedHandler = (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  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.navItemClicked.emit();\n  };\n\n  private generateTooltipLabel = () => {\n    if (this.label) {\n      return this.label;\n    }\n\n    if (this.navigationSlot) {\n      return this.navigationSlot.textContent;\n    }\n\n    if (this.el.children[0]) {\n      return this.el.children[0].textContent;\n    }\n\n    return \"\";\n  };\n\n  private renderNavigationItemContent = () => {\n    if (this.label) {\n      return this.displayDefaultNavigationItem(\n        this.href,\n        this.hreflang,\n        this.target,\n        this.rel,\n        this.referrerpolicy,\n        this.download,\n        this.label\n      );\n    }\n\n    if (this.navigationSlot) {\n      return <slot name=\"navigation-item\"></slot>;\n    }\n    return <slot></slot>;\n  };\n\n  render() {\n    const { inTopNavSideMenu, isTopNavChild, selected } = this;\n\n    return (\n      <Host\n        class={{\n          [\"navigation-item\"]: true,\n          [\"navigation-item-top-nav\"]:\n            !inTopNavSideMenu && this.navigationType === \"top\",\n          [\"navigation-item-top-nav-child-selected\"]:\n            isTopNavChild && !inTopNavSideMenu && selected,\n          [this.focusStyle]:\n            (!inTopNavSideMenu && !isTopNavChild) ||\n            (this.navigationType === \"side\" && isTopNavChild),\n          [\"navigation-item-selected\"]: !isTopNavChild && selected,\n          [\"navigation-item-side-menu\"]: inTopNavSideMenu,\n          [\"navigation-item-side-menu-selected\"]: inTopNavSideMenu && selected,\n          [\"navigation-item-top-nav-child\"]: isTopNavChild && !inTopNavSideMenu,\n          [\"navigation-item-page-header\"]:\n            this.navigationType === \"page-header\",\n          [\"with-transition\"]: !this.isInitialRender,\n          [\"navigation-item-side-nav\"]: this.navigationType === \"side\",\n          [\"navigation-item-side-nav-collapsed\"]:\n            (!this.sideNavExpanded || this.displayNavigationTooltip) &&\n            this.navigationType === \"side\",\n          [\"navigation-item-side-nav-collapsed-with-label\"]:\n            !this.sideNavExpanded &&\n            this.navigationType === \"side\" &&\n            this.collapsedIconLabel &&\n            !this.isSideNavMobile,\n          [\"expandable\"]: this.expandable,\n        }}\n        onBlur={isTopNavChild && !inTopNavSideMenu ? this.handleBlur : null}\n        onClick={this.handleClick}\n        aria-current={selected ? \"page\" : null}\n        role=\"listitem\"\n      >\n        {/* Tooltip enabled by applying navigation-item-side-nav-collapsed class to host */}\n        <ic-tooltip\n          label={this.generateTooltipLabel()}\n          target=\"navigation-item\"\n          placement=\"right\"\n          class={{\n            [\"tooltip-navigation-item\"]: true,\n            [\"tooltip-navigation-item-side-nav-collapsed\"]:\n              (!this.sideNavExpanded || this.displayNavigationTooltip) &&\n              this.navigationType === \"side\",\n            [\"tooltip-long-label-navigation-item-side-nav-expanded\"]:\n              this.el.hasAttribute(\"[display-navigation-tooltip = 'true']\"),\n          }}\n        >\n          {this.renderNavigationItemContent()}\n        </ic-tooltip>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-page-header/test/a11y/ic-page-header.test.a11y.js

@@ -0,0 +1,13 @@
+import { fixture } from "@open-wc/testing-helpers";
+import { axe } from "jest-axe";
+import { checkShadowElementRendersCorrectly } from "../../../../utils/testa11y.helpers";
+describe("page-header", () => {
+    it("passes accessibility", async () => {
+        const el = await fixture(`
+        <ic-page-header heading="Test"></ic-page-header>
+      `);
+        checkShadowElementRendersCorrectly(el);
+        expect(await axe(el)).toHaveNoViolations();
+    });
+});
+//# sourceMappingURL=ic-page-header.test.a11y.js.map

package/dist/collection/components/ic-page-header/test/a11y/ic-page-header.test.a11y.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-page-header.test.a11y.js","sourceRoot":"","sources":["../../../../../src/components/ic-page-header/test/a11y/ic-page-header.test.a11y.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,kCAAkC,EAAE,MAAM,oCAAoC,CAAC;AAExF,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;IAC3B,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC;;OAEtB,CAAC,CAAC;QACL,kCAAkC,CAAC,EAAE,CAAC,CAAC;QACvC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;IAC7C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { fixture } from \"@open-wc/testing-helpers\";\nimport { axe } from \"jest-axe\";\nimport { checkShadowElementRendersCorrectly } from \"../../../../utils/testa11y.helpers\";\n\ndescribe(\"page-header\", () => {\n  it(\"passes accessibility\", async () => {\n    const el = await fixture(`\n        <ic-page-header heading=\"Test\"></ic-page-header>\n      `);\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n});\n"]}

package/dist/collection/components/ic-page-header/test/basic/ic-page-header.e2e.js

@@ -0,0 +1,177 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe("ic-page-header component", () => {
+    it("shouldn't render tooltips on the navigation items in the page header", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<ic-page-header
+        heading="Coffee recipes"
+        sub-heading="This is a page header component with additional functionality and this is the text."
+      >
+        <ic-status-tag slot="heading-adornment" label="Beta"></ic-status-tag>
+        <ic-navigation-item
+          slot="tabs"
+          label="All recipes"
+          href="?path=/story/web-components-page-header--with-tabs"
+          selected
+        ></ic-navigation-item>
+        <ic-navigation-item
+          slot="tabs"
+          label="Favourites"
+          href="?path=/story/web-components-page-header--with-tabs"
+        ></ic-navigation-item>
+      </ic-page-header>`);
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        const tooltipDisplay = await page.evaluate(() => {
+            const tooltip = document
+                .querySelectorAll("ic-navigation-item")[0]
+                .shadowRoot.querySelector("ic-tooltip")
+                .shadowRoot.querySelector(".ic-tooltip-container");
+            return window.getComputedStyle(tooltip).display;
+        });
+        expect(tooltipDisplay).toBe("none");
+    });
+    it("should stay at the top of the page if the sticky variant is used", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<ic-top-navigation app-title="ApplicationName">
+        <svg
+          slot="app-icon"
+          xmlns="http://www.w3.org/2000/svg"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          fill="#000000"
+        >
+          <path d="M0 0h24v24H0V0z" fill="none" />
+          <path
+            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"
+          />
+        </svg>
+      </ic-top-navigation>
+      <ic-page-header
+        sticky
+        heading="Page header"
+        sub-heading="This is a simple page header component and this is the text."
+      >
+        <ic-status-tag slot="heading-adornment" label="Beta"></ic-status-tag>
+      </ic-page-header>
+      <ic-section-container style="height:800px">
+        This is an example of how the sticky variant of the page header would
+        work with some content and the footer.
+      </ic-section-container>
+      <ic-footer
+        description="The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback, 
+          please get in touch."
+        caption="All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence."
+      >
+        <ic-footer-link slot="link" href="/">Get Started</ic-footer-link>
+        <ic-footer-link slot="link" href="/">Accessibility</ic-footer-link>
+        <ic-footer-link slot="link" href="/">Styles</ic-footer-link>
+        <ic-footer-link slot="link" href="/">Components</ic-footer-link>
+        <ic-footer-link slot="link" href="/">Patterns</ic-footer-link>
+        <ic-footer-link slot="link" href="/">Design toolkit</ic-footer-link>
+        <div
+          slot="logo"
+          style="width:100px;height:100px;display:flex;align-items:center;justify-content:center;
+          background-color:var(--ic-personality-primary);color:var(--ic-personality-text);"
+        >
+          Logo
+        </div>
+      </ic-footer>`);
+        await page.waitForChanges();
+        const pageHeaderPosition = await page.evaluate(() => {
+            const pageHeader = document.querySelector("ic-page-header");
+            return window.getComputedStyle(pageHeader).position;
+        });
+        expect(pageHeaderPosition).toBe("sticky");
+        const pageHeaderTopValue = await page.evaluate(() => {
+            const pageHeader = document.querySelector("ic-page-header");
+            window.scrollTo({ top: 700 });
+            return pageHeader.offsetTop;
+        });
+        expect(pageHeaderTopValue).toEqual(700);
+    });
+    it("should not stay at the top of the page on extra small to medium device sizes if the sticky-desktop-only variant is used", async () => {
+        const page = await newE2EPage();
+        await page.setViewport({
+            width: 375,
+            height: 667,
+            isMobile: true,
+            hasTouch: true,
+        });
+        await page.waitForChanges();
+        await page.setContent(`<ic-top-navigation app-title="ApplicationName">
+        <svg
+          slot="app-icon"
+          xmlns="http://www.w3.org/2000/svg"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          fill="#000000"
+        >
+          <path d="M0 0h24v24H0V0z" fill="none" />
+          <path
+            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"
+          />
+        </svg>
+      </ic-top-navigation>
+      <ic-page-header
+        sticky-desktop-only
+        heading="Page header"
+        sub-heading="This is a simple page header component and this is the text. This page header is only sticky for viewport widths of 992px and above."
+      >
+        <ic-status-tag slot="heading-adornment" label="Beta"></ic-status-tag>
+      </ic-page-header>
+      <ic-section-container style="height:1000px">
+        This is an example of how the sticky-desktop-only variant of the page
+        header would work with some content and the footer.
+      </ic-section-container>
+      <ic-footer
+        description="The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback, 
+          please get in touch."
+        caption="All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence."
+      >
+        <ic-footer-link slot="link" href="/">Get Started</ic-footer-link>
+        <ic-footer-link slot="link" href="/">Accessibility</ic-footer-link>
+        <ic-footer-link slot="link" href="/">Styles</ic-footer-link>
+        <ic-footer-link slot="link" href="/">Components</ic-footer-link>
+        <ic-footer-link slot="link" href="/">Patterns</ic-footer-link>
+        <ic-footer-link slot="link" href="/">Design toolkit</ic-footer-link>
+        <div
+          slot="logo"
+          style="width:100px;height:100px;display:flex;align-items:center;justify-content:center;
+          background-color:var(--ic-personality-primary);color:var(--ic-personality-text);"
+        >
+          Logo
+        </div>
+      </ic-footer>`);
+        await page.waitForChanges();
+        let pageHeaderPosition = await page.evaluate(() => {
+            const pageHeader = document.querySelector("ic-page-header");
+            return window.getComputedStyle(pageHeader).position;
+        });
+        expect(pageHeaderPosition).toBe("static");
+        await page.evaluate(() => {
+            window.scrollBy({ top: -700 });
+        });
+        await page.waitForChanges();
+        await page.setViewport({
+            width: 1920,
+            height: 800,
+        });
+        await page.waitForChanges();
+        pageHeaderPosition = await page.evaluate(() => {
+            const pageHeader = document.querySelector("ic-page-header");
+            return window.getComputedStyle(pageHeader).position;
+        });
+        await page.waitForChanges();
+        expect(pageHeaderPosition).toBe("sticky");
+        const pageHeaderTopValueOnLargeDesktops = await page.evaluate(() => {
+            const pageHeader = document.querySelector("ic-page-header");
+            window.scrollBy({ top: 700 });
+            return pageHeader.offsetTop;
+        });
+        expect(pageHeaderTopValueOnLargeDesktops).toEqual(700);
+    });
+});
+//# sourceMappingURL=ic-page-header.e2e.js.map

package/dist/collection/components/ic-page-header/test/basic/ic-page-header.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-page-header.e2e.js","sourceRoot":"","sources":["../../../../../src/components/ic-page-header/test/basic/ic-page-header.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { newE2EPage } from \"@stencil/core/testing\";\n\ndescribe(\"ic-page-header component\", () => {\n  it(\"shouldn't render tooltips on the navigation items in the page header\", async () => {\n    const page = await newE2EPage();\n\n    await page.setContent(\n      `<ic-page-header\n        heading=\"Coffee recipes\"\n        sub-heading=\"This is a page header component with additional functionality and this is the text.\"\n      >\n        <ic-status-tag slot=\"heading-adornment\" label=\"Beta\"></ic-status-tag>\n        <ic-navigation-item\n          slot=\"tabs\"\n          label=\"All recipes\"\n          href=\"?path=/story/web-components-page-header--with-tabs\"\n          selected\n        ></ic-navigation-item>\n        <ic-navigation-item\n          slot=\"tabs\"\n          label=\"Favourites\"\n          href=\"?path=/story/web-components-page-header--with-tabs\"\n        ></ic-navigation-item>\n      </ic-page-header>`\n    );\n\n    await page.waitForChanges();\n\n    await page.keyboard.press(\"Tab\");\n\n    await page.waitForChanges();\n\n    const tooltipDisplay = await page.evaluate(() => {\n      const tooltip = document\n        .querySelectorAll(\"ic-navigation-item\")[0]\n        .shadowRoot.querySelector(\"ic-tooltip\")\n        .shadowRoot.querySelector(\".ic-tooltip-container\");\n\n      return window.getComputedStyle(tooltip).display;\n    });\n\n    expect(tooltipDisplay).toBe(\"none\");\n  });\n\n  it(\"should stay at the top of the page if the sticky variant is used\", async () => {\n    const page = await newE2EPage();\n\n    await page.setContent(\n      `<ic-top-navigation app-title=\"ApplicationName\">\n        <svg\n          slot=\"app-icon\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"24px\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          fill=\"#000000\"\n        >\n          <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n          <path\n            d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"\n          />\n        </svg>\n      </ic-top-navigation>\n      <ic-page-header\n        sticky\n        heading=\"Page header\"\n        sub-heading=\"This is a simple page header component and this is the text.\"\n      >\n        <ic-status-tag slot=\"heading-adornment\" label=\"Beta\"></ic-status-tag>\n      </ic-page-header>\n      <ic-section-container style=\"height:800px\">\n        This is an example of how the sticky variant of the page header would\n        work with some content and the footer.\n      </ic-section-container>\n      <ic-footer\n        description=\"The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback, \n          please get in touch.\"\n        caption=\"All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence.\"\n      >\n        <ic-footer-link slot=\"link\" href=\"/\">Get Started</ic-footer-link>\n        <ic-footer-link slot=\"link\" href=\"/\">Accessibility</ic-footer-link>\n        <ic-footer-link slot=\"link\" href=\"/\">Styles</ic-footer-link>\n        <ic-footer-link slot=\"link\" href=\"/\">Components</ic-footer-link>\n        <ic-footer-link slot=\"link\" href=\"/\">Patterns</ic-footer-link>\n        <ic-footer-link slot=\"link\" href=\"/\">Design toolkit</ic-footer-link>\n        <div\n          slot=\"logo\"\n          style=\"width:100px;height:100px;display:flex;align-items:center;justify-content:center;\n          background-color:var(--ic-personality-primary);color:var(--ic-personality-text);\"\n        >\n          Logo\n        </div>\n      </ic-footer>`\n    );\n\n    await page.waitForChanges();\n\n    const pageHeaderPosition = await page.evaluate(() => {\n      const pageHeader = document.querySelector(\"ic-page-header\");\n\n      return window.getComputedStyle(pageHeader).position;\n    });\n\n    expect(pageHeaderPosition).toBe(\"sticky\");\n\n    const pageHeaderTopValue = await page.evaluate(() => {\n      const pageHeader = document.querySelector(\"ic-page-header\");\n      window.scrollTo({ top: 700 });\n\n      return pageHeader.offsetTop;\n    });\n\n    expect(pageHeaderTopValue).toEqual(700);\n  });\n\n  it(\"should not stay at the top of the page on extra small to medium device sizes if the sticky-desktop-only variant is used\", async () => {\n    const page = await newE2EPage();\n\n    await page.setViewport({\n      width: 375,\n      height: 667,\n      isMobile: true,\n      hasTouch: true,\n    });\n\n    await page.waitForChanges();\n\n    await page.setContent(\n      `<ic-top-navigation app-title=\"ApplicationName\">\n        <svg\n          slot=\"app-icon\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"24px\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          fill=\"#000000\"\n        >\n          <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n          <path\n            d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"\n          />\n        </svg>\n      </ic-top-navigation>\n      <ic-page-header\n        sticky-desktop-only\n        heading=\"Page header\"\n        sub-heading=\"This is a simple page header component and this is the text. This page header is only sticky for viewport widths of 992px and above.\"\n      >\n        <ic-status-tag slot=\"heading-adornment\" label=\"Beta\"></ic-status-tag>\n      </ic-page-header>\n      <ic-section-container style=\"height:1000px\">\n        This is an example of how the sticky-desktop-only variant of the page\n        header would work with some content and the footer.\n      </ic-section-container>\n      <ic-footer\n        description=\"The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback, \n          please get in touch.\"\n        caption=\"All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence.\"\n      >\n        <ic-footer-link slot=\"link\" href=\"/\">Get Started</ic-footer-link>\n        <ic-footer-link slot=\"link\" href=\"/\">Accessibility</ic-footer-link>\n        <ic-footer-link slot=\"link\" href=\"/\">Styles</ic-footer-link>\n        <ic-footer-link slot=\"link\" href=\"/\">Components</ic-footer-link>\n        <ic-footer-link slot=\"link\" href=\"/\">Patterns</ic-footer-link>\n        <ic-footer-link slot=\"link\" href=\"/\">Design toolkit</ic-footer-link>\n        <div\n          slot=\"logo\"\n          style=\"width:100px;height:100px;display:flex;align-items:center;justify-content:center;\n          background-color:var(--ic-personality-primary);color:var(--ic-personality-text);\"\n        >\n          Logo\n        </div>\n      </ic-footer>`\n    );\n\n    await page.waitForChanges();\n\n    let pageHeaderPosition = await page.evaluate(() => {\n      const pageHeader = document.querySelector(\"ic-page-header\");\n      return window.getComputedStyle(pageHeader).position;\n    });\n\n    expect(pageHeaderPosition).toBe(\"static\");\n\n    await page.evaluate(() => {\n      window.scrollBy({ top: -700 });\n    });\n\n    await page.waitForChanges();\n\n    await page.setViewport({\n      width: 1920,\n      height: 800,\n    });\n\n    await page.waitForChanges();\n\n    pageHeaderPosition = await page.evaluate(() => {\n      const pageHeader = document.querySelector(\"ic-page-header\");\n      return window.getComputedStyle(pageHeader).position;\n    });\n\n    await page.waitForChanges();\n\n    expect(pageHeaderPosition).toBe(\"sticky\");\n\n    const pageHeaderTopValueOnLargeDesktops = await page.evaluate(() => {\n      const pageHeader = document.querySelector(\"ic-page-header\");\n      window.scrollBy({ top: 700 });\n\n      return pageHeader.offsetTop;\n    });\n\n    expect(pageHeaderTopValueOnLargeDesktops).toEqual(700);\n  });\n});\n"]}

package/dist/collection/components/ic-pagination/ic-pagination.js

@@ -22,16 +22,16 @@ export class Pagination {
         };
         // button rendering abstracted from component render methods for clarity
         this.firstButton = () => {
-            return (h("ic-button", { id: "first-page-button", "aria-label": "Go to first page", appearance: this.appearance, onClick: this.handleClickFirst, class: "page-button first-last", disabled: this.currentPage === 1 || this.disabled, variant: "icon", innerHTML: paginationFirstLast }));
+            return (h("ic-button", { id: "first-page-button", "aria-label": "Go to first page", appearance: this.appearance, onClick: this.handleClickFirst, class: "page-button first-last", disabled: this.currentPage === 1 || this.disabled, variant: "icon", innerHTML: paginationFirstLast, tooltipPlacement: "top" }));
         };
         this.previousButton = () => {
-            return (h("ic-button", { id: "previous-page-button", "aria-label": "Go to previous page", appearance: this.appearance, onClick: this.handleClickPrevious, class: "page-button next-previous flip", disabled: this.currentPage === 1 || this.disabled, variant: "icon", innerHTML: paginationNextPrevious }));
+            return (h("ic-button", { id: "previous-page-button", "aria-label": "Go to previous page", appearance: this.appearance, onClick: this.handleClickPrevious, class: "page-button next-previous flip", disabled: this.currentPage === 1 || this.disabled, variant: "icon", innerHTML: paginationNextPrevious, tooltipPlacement: "top" }));
         };
         this.nextButton = () => {
-            return (h("ic-button", { id: "next-page-button", "aria-label": "Go to next page", appearance: this.appearance, onClick: this.handleClickNext, class: "page-button next-previous", disabled: this.currentPage === this.pages || this.disabled, variant: "icon", innerHTML: paginationNextPrevious }));
+            return (h("ic-button", { id: "next-page-button", "aria-label": "Go to next page", appearance: this.appearance, onClick: this.handleClickNext, class: "page-button next-previous", disabled: this.currentPage === this.pages || this.disabled, variant: "icon", innerHTML: paginationNextPrevious, tooltipPlacement: "top" }));
         };
         this.lastButton = () => {
-            return (h("ic-button", { id: "last-page-button", "aria-label": "Go to last page", appearance: this.appearance, onClick: this.handleClickLast, class: "page-button first-last flip", disabled: this.currentPage === this.pages || this.disabled, variant: "icon", innerHTML: paginationFirstLast }));
+            return (h("ic-button", { id: "last-page-button", "aria-label": "Go to last page", appearance: this.appearance, onClick: this.handleClickLast, class: "page-button first-last flip", disabled: this.currentPage === this.pages || this.disabled, variant: "icon", innerHTML: paginationFirstLast, tooltipPlacement: "top" }));
         };
         this.renderStartEllipsis = () => {
             return (h("ic-pagination-item", { appearance: this.appearance, type: "ellipsis", id: "start-ellipsis", disabled: this.disabled }));

package/dist/collection/components/ic-pagination/ic-pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-pagination.js","sourceRoot":"","sources":["../../../src/components/ic-pagination/ic-pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  Listen,\n  State,\n  Watch,\n  Event,\n  EventEmitter,\n  Method,\n} from \"@stencil/core\";\nimport paginationNextPrevious from \"../../assets/pagination-next-previous.svg\";\nimport paginationFirstLast from \"../../assets/pagination-first-last.svg\";\nimport { IcThemeForeground } from \"../../utils/types\";\nimport { IcPaginationTypes, IcChangeEventDetail } from \"./ic-pagination.types\";\nimport {\n  onComponentRequiredPropUndefined,\n  removeDisabledFalse,\n} from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-pagination\",\n  styleUrl: \"ic-pagination.css\",\n  shadow: true,\n})\nexport class Pagination {\n  @Element() el: HTMLIcPaginationElement;\n\n  @State() endEllipsis: boolean = false;\n  @State() endItems: number[] = [];\n  @State() midItems: number[] = [];\n  @State() startEllipsis: boolean = false;\n  @State() startItems: number[] = [];\n\n  /**\n   * The number of pages displayed adjacent to the current page when using 'complex' type pagination. Accepted values are 0, 1 & 2.\n   */\n  @Prop({ mutable: true }) adjacentCount: number = 1;\n\n  /**\n   * The appearance of the pagination, e.g. dark, light or the default.\n   */\n  @Prop() appearance: IcThemeForeground = \"default\";\n\n  /**\n   * The number of pages displayed as boundary items to the current page when using 'complex' type pagination. Accepted values are 0, 1 & 2.\n   */\n  @Prop({ mutable: true }) boundaryCount: number = 1;\n\n  /**\n   * The default page to display.\n   */\n  @Prop() defaultPage: number = 1;\n\n  /**\n   * If `true`, the pagination will not allow interaction.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * If `true`, the current page of the simple pagination will not be displayed.\n   */\n  @Prop() hideCurrentPage: boolean = false;\n\n  /**\n   * If `true`, the first and last page buttons will not be displayed.\n   */\n  @Prop() hideFirstAndLastPageButton: boolean = false;\n\n  /**\n   * The label for the pagination item (applicable when simple pagination is being used).\n   */\n  @Prop() label: string = \"Page\";\n\n  /**\n   * The total number of pages.\n   */\n  @Prop() pages!: number;\n\n  @Watch(\"pages\")\n  watchNumberPagesHandler(): void {\n    this.watchPageChangeHandler();\n  }\n\n  /**\n   * The type of pagination to be used.\n   */\n  @Prop() type: IcPaginationTypes = \"simple\";\n\n  /**\n   * The current page displayed by the pagination.\n   */\n  @Prop({ mutable: true }) currentPage: number = this.defaultPage;\n\n  @Watch(\"currentPage\")\n  watchPageChangeHandler(): void {\n    if (this.type === \"simple\") {\n      return;\n    }\n\n    this.startEllipsis = false;\n    this.endEllipsis = false;\n    this.startItems = [];\n    this.endItems = [];\n    this.midItems = [];\n\n    const startItems = [];\n    let startItemCount = 0;\n    const endItems = [];\n    let endStart = this.pages;\n    const midItems = [];\n    let midStart;\n    let midEnd;\n    let startEllipsis = false;\n    let endEllipsis = false;\n\n    if (this.pages <= this.boundaryCount * 2 + this.adjacentCount * 2 + 3) {\n      this.startEllipsis = false;\n      this.endEllipsis = false;\n      for (let i = 1; i <= this.pages; i++) {\n        startItems.push(i);\n      }\n      this.startItems = startItems;\n      return;\n    }\n\n    startItemCount = this.boundaryCount === 0 ? 1 : this.boundaryCount;\n    endStart =\n      this.boundaryCount === 0\n        ? this.pages\n        : this.pages - this.boundaryCount + 1;\n\n    if (this.currentPage <= this.adjacentCount + this.boundaryCount + 2) {\n      startEllipsis = false;\n      endEllipsis = true;\n\n      let numItems = 2 * this.adjacentCount + 1;\n      if (this.boundaryCount === 0) {\n        numItems--;\n      }\n      midStart = startItemCount + 1;\n      midEnd = midStart + numItems;\n    } else {\n      startEllipsis = true;\n      if (\n        this.currentPage >\n        this.pages - (this.adjacentCount + this.boundaryCount + 2)\n      ) {\n        let numItems = 2 * this.adjacentCount + 1;\n        if (this.boundaryCount === 0) {\n          numItems--;\n        }\n        midEnd =\n          this.boundaryCount === 0\n            ? this.pages - 1\n            : this.pages - this.boundaryCount;\n        midStart = midEnd - numItems;\n      } else {\n        endEllipsis = true;\n        midStart = this.currentPage - this.adjacentCount;\n        midEnd = this.currentPage + this.adjacentCount;\n      }\n    }\n\n    //create array of start items\n    if (\n      this.boundaryCount > 0 ||\n      (this.boundaryCount === 0 && startEllipsis === false)\n    ) {\n      for (let i = 1; i <= startItemCount; i++) {\n        startItems.push(i);\n      }\n    }\n\n    //create array of end items\n    if (\n      this.boundaryCount > 0 ||\n      (this.boundaryCount === 0 && endEllipsis === false)\n    ) {\n      for (let i = endStart; i <= this.pages; i++) {\n        endItems.push(i);\n      }\n    }\n\n    //create array of mid items\n    for (let i = midStart; i <= midEnd; i++) {\n      midItems.push(i);\n    }\n\n    this.startEllipsis = startEllipsis;\n    this.endEllipsis = endEllipsis;\n    this.startItems = startItems;\n    this.endItems = endItems;\n    this.midItems = midItems;\n  }\n\n  /**\n   * Emitted when a page is selected.\n   */\n  @Event() icPageChange: EventEmitter<IcChangeEventDetail>;\n\n  componentWillLoad(): void {\n    this.watchPageChangeHandler();\n    if (this.boundaryCount > 2) {\n      this.boundaryCount = 2;\n    }\n    if (this.adjacentCount > 2) {\n      this.adjacentCount = 2;\n    }\n\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.pages, propName: \"pages\" }],\n      \"Pagination\"\n    );\n  }\n\n  @Listen(\"paginationItemClick\")\n  paginationItemClickHandler(ev: CustomEvent): void {\n    const page = ev.detail.page;\n    this.currentPage = page;\n    this.icPageChange.emit({ value: this.currentPage });\n  }\n\n  /**\n   * Sets the currently displayed page.\n   * @param {number} page The page number to set as the current page\n   */\n  @Method()\n  async setCurrentPage(page: number): Promise<void> {\n    if (typeof page === \"number\" && page > 0 && page <= this.pages) {\n      this.currentPage = page;\n    } else {\n      console.error(\n        \"Current page must be a number greater than zero but less than or equal to the total number of pages\"\n      );\n    }\n  }\n\n  private handleClickFirst = () => {\n    this.currentPage = 1;\n    this.icPageChange.emit({ value: this.currentPage });\n  };\n\n  private handleClickPrevious = (): void => {\n    this.currentPage--;\n    this.icPageChange.emit({ value: this.currentPage });\n  };\n\n  private handleClickNext = (): void => {\n    this.currentPage++;\n    this.icPageChange.emit({ value: this.currentPage });\n  };\n\n  private handleClickLast = (): void => {\n    this.currentPage = this.pages;\n    this.icPageChange.emit({ value: this.currentPage });\n  };\n\n  // button rendering abstracted from component render methods for clarity\n  private firstButton = () => {\n    return (\n      <ic-button\n        id=\"first-page-button\"\n        aria-label=\"Go to first page\"\n        appearance={this.appearance}\n        onClick={this.handleClickFirst}\n        class=\"page-button first-last\"\n        disabled={this.currentPage === 1 || this.disabled}\n        variant=\"icon\"\n        innerHTML={paginationFirstLast}\n      />\n    );\n  };\n\n  private previousButton = () => {\n    return (\n      <ic-button\n        id=\"previous-page-button\"\n        aria-label=\"Go to previous page\"\n        appearance={this.appearance}\n        onClick={this.handleClickPrevious}\n        class=\"page-button next-previous flip\"\n        disabled={this.currentPage === 1 || this.disabled}\n        variant=\"icon\"\n        innerHTML={paginationNextPrevious}\n      />\n    );\n  };\n\n  private nextButton = () => {\n    return (\n      <ic-button\n        id=\"next-page-button\"\n        aria-label=\"Go to next page\"\n        appearance={this.appearance}\n        onClick={this.handleClickNext}\n        class=\"page-button next-previous\"\n        disabled={this.currentPage === this.pages || this.disabled}\n        variant=\"icon\"\n        innerHTML={paginationNextPrevious}\n      />\n    );\n  };\n\n  private lastButton = () => {\n    return (\n      <ic-button\n        id=\"last-page-button\"\n        aria-label=\"Go to last page\"\n        appearance={this.appearance}\n        onClick={this.handleClickLast}\n        class=\"page-button first-last flip\"\n        disabled={this.currentPage === this.pages || this.disabled}\n        variant=\"icon\"\n        innerHTML={paginationFirstLast}\n      />\n    );\n  };\n\n  private renderStartEllipsis = () => {\n    return (\n      <ic-pagination-item\n        appearance={this.appearance}\n        type=\"ellipsis\"\n        id=\"start-ellipsis\"\n        disabled={this.disabled}\n      />\n    );\n  };\n\n  private renderEndEllipsis = () => {\n    return (\n      <ic-pagination-item\n        appearance={this.appearance}\n        type=\"ellipsis\"\n        id=\"end-ellipsis\"\n        disabled={this.disabled}\n      />\n    );\n  };\n\n  private renderStartItems = () => {\n    return this.startItems.map((page: number) => {\n      return (\n        <ic-pagination-item\n          appearance={this.appearance}\n          selected={page === this.currentPage}\n          id={`pagination-item-${page}`}\n          type=\"page\"\n          page={page}\n          disabled={this.disabled}\n        />\n      );\n    });\n  };\n\n  private renderEndItems = () => {\n    return this.endItems.map((page: number) => {\n      return (\n        <ic-pagination-item\n          appearance={this.appearance}\n          selected={page === this.currentPage}\n          id={`pagination-item-${page}`}\n          type=\"page\"\n          page={page}\n          disabled={this.disabled}\n        />\n      );\n    });\n  };\n\n  private renderMiddleItems = () => {\n    return this.midItems.map((page: number) => {\n      return (\n        <ic-pagination-item\n          appearance={this.appearance}\n          selected={page === this.currentPage}\n          id={`pagination-item-${page}`}\n          type=\"page\"\n          page={page}\n          disabled={this.disabled}\n        />\n      );\n    });\n  };\n\n  render() {\n    const {\n      type,\n      pages,\n      currentPage,\n      hideCurrentPage,\n      disabled,\n      hideFirstAndLastPageButton,\n      label,\n    } = this;\n\n    return (\n      <Host>\n        {type === \"simple\" && (\n          <nav\n            class={{\n              [\"disabled\"]: disabled,\n            }}\n            role=\"navigation\"\n            aria-label=\"Pagination Navigation\"\n          >\n            {hideFirstAndLastPageButton ? null : this.firstButton()}\n            {this.previousButton()}\n            <ic-pagination-item\n              pages={pages}\n              appearance={this.appearance}\n              type=\"simple-current\"\n              page={currentPage}\n              label={label}\n              class={{ [\"hide-current-page\"]: hideCurrentPage }}\n            />\n            {this.nextButton()}\n            {hideFirstAndLastPageButton ? null : this.lastButton()}\n          </nav>\n        )}\n        {type === \"complex\" && (\n          <nav\n            class={{\n              [\"disabled\"]: disabled,\n            }}\n            role=\"navigation\"\n            aria-label=\"Pagination Navigation\"\n          >\n            {hideFirstAndLastPageButton ? null : this.firstButton()}\n            {this.previousButton()}\n            {this.renderStartItems()}\n            {this.startEllipsis && this.renderStartEllipsis()}\n            {this.renderMiddleItems()}\n            {this.endEllipsis && this.renderEndEllipsis()}\n            {this.renderEndItems()}\n            {this.nextButton()}\n            {hideFirstAndLastPageButton ? null : this.lastButton()}\n          </nav>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-pagination.js","sourceRoot":"","sources":["../../../src/components/ic-pagination/ic-pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  Listen,\n  State,\n  Watch,\n  Event,\n  EventEmitter,\n  Method,\n} from \"@stencil/core\";\nimport paginationNextPrevious from \"../../assets/pagination-next-previous.svg\";\nimport paginationFirstLast from \"../../assets/pagination-first-last.svg\";\nimport { IcThemeForeground } from \"../../utils/types\";\nimport { IcPaginationTypes, IcChangeEventDetail } from \"./ic-pagination.types\";\nimport {\n  onComponentRequiredPropUndefined,\n  removeDisabledFalse,\n} from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-pagination\",\n  styleUrl: \"ic-pagination.css\",\n  shadow: true,\n})\nexport class Pagination {\n  @Element() el: HTMLIcPaginationElement;\n\n  @State() endEllipsis: boolean = false;\n  @State() endItems: number[] = [];\n  @State() midItems: number[] = [];\n  @State() startEllipsis: boolean = false;\n  @State() startItems: number[] = [];\n\n  /**\n   * The number of pages displayed adjacent to the current page when using 'complex' type pagination. Accepted values are 0, 1 & 2.\n   */\n  @Prop({ mutable: true }) adjacentCount: number = 1;\n\n  /**\n   * The appearance of the pagination, e.g. dark, light or the default.\n   */\n  @Prop() appearance: IcThemeForeground = \"default\";\n\n  /**\n   * The number of pages displayed as boundary items to the current page when using 'complex' type pagination. Accepted values are 0, 1 & 2.\n   */\n  @Prop({ mutable: true }) boundaryCount: number = 1;\n\n  /**\n   * The default page to display.\n   */\n  @Prop() defaultPage: number = 1;\n\n  /**\n   * If `true`, the pagination will not allow interaction.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * If `true`, the current page of the simple pagination will not be displayed.\n   */\n  @Prop() hideCurrentPage: boolean = false;\n\n  /**\n   * If `true`, the first and last page buttons will not be displayed.\n   */\n  @Prop() hideFirstAndLastPageButton: boolean = false;\n\n  /**\n   * The label for the pagination item (applicable when simple pagination is being used).\n   */\n  @Prop() label: string = \"Page\";\n\n  /**\n   * The total number of pages.\n   */\n  @Prop() pages!: number;\n\n  @Watch(\"pages\")\n  watchNumberPagesHandler(): void {\n    this.watchPageChangeHandler();\n  }\n\n  /**\n   * The type of pagination to be used.\n   */\n  @Prop() type: IcPaginationTypes = \"simple\";\n\n  /**\n   * The current page displayed by the pagination.\n   */\n  @Prop({ mutable: true }) currentPage: number = this.defaultPage;\n\n  @Watch(\"currentPage\")\n  watchPageChangeHandler(): void {\n    if (this.type === \"simple\") {\n      return;\n    }\n\n    this.startEllipsis = false;\n    this.endEllipsis = false;\n    this.startItems = [];\n    this.endItems = [];\n    this.midItems = [];\n\n    const startItems = [];\n    let startItemCount = 0;\n    const endItems = [];\n    let endStart = this.pages;\n    const midItems = [];\n    let midStart;\n    let midEnd;\n    let startEllipsis = false;\n    let endEllipsis = false;\n\n    if (this.pages <= this.boundaryCount * 2 + this.adjacentCount * 2 + 3) {\n      this.startEllipsis = false;\n      this.endEllipsis = false;\n      for (let i = 1; i <= this.pages; i++) {\n        startItems.push(i);\n      }\n      this.startItems = startItems;\n      return;\n    }\n\n    startItemCount = this.boundaryCount === 0 ? 1 : this.boundaryCount;\n    endStart =\n      this.boundaryCount === 0\n        ? this.pages\n        : this.pages - this.boundaryCount + 1;\n\n    if (this.currentPage <= this.adjacentCount + this.boundaryCount + 2) {\n      startEllipsis = false;\n      endEllipsis = true;\n\n      let numItems = 2 * this.adjacentCount + 1;\n      if (this.boundaryCount === 0) {\n        numItems--;\n      }\n      midStart = startItemCount + 1;\n      midEnd = midStart + numItems;\n    } else {\n      startEllipsis = true;\n      if (\n        this.currentPage >\n        this.pages - (this.adjacentCount + this.boundaryCount + 2)\n      ) {\n        let numItems = 2 * this.adjacentCount + 1;\n        if (this.boundaryCount === 0) {\n          numItems--;\n        }\n        midEnd =\n          this.boundaryCount === 0\n            ? this.pages - 1\n            : this.pages - this.boundaryCount;\n        midStart = midEnd - numItems;\n      } else {\n        endEllipsis = true;\n        midStart = this.currentPage - this.adjacentCount;\n        midEnd = this.currentPage + this.adjacentCount;\n      }\n    }\n\n    //create array of start items\n    if (\n      this.boundaryCount > 0 ||\n      (this.boundaryCount === 0 && startEllipsis === false)\n    ) {\n      for (let i = 1; i <= startItemCount; i++) {\n        startItems.push(i);\n      }\n    }\n\n    //create array of end items\n    if (\n      this.boundaryCount > 0 ||\n      (this.boundaryCount === 0 && endEllipsis === false)\n    ) {\n      for (let i = endStart; i <= this.pages; i++) {\n        endItems.push(i);\n      }\n    }\n\n    //create array of mid items\n    for (let i = midStart; i <= midEnd; i++) {\n      midItems.push(i);\n    }\n\n    this.startEllipsis = startEllipsis;\n    this.endEllipsis = endEllipsis;\n    this.startItems = startItems;\n    this.endItems = endItems;\n    this.midItems = midItems;\n  }\n\n  /**\n   * Emitted when a page is selected.\n   */\n  @Event() icPageChange: EventEmitter<IcChangeEventDetail>;\n\n  componentWillLoad(): void {\n    this.watchPageChangeHandler();\n    if (this.boundaryCount > 2) {\n      this.boundaryCount = 2;\n    }\n    if (this.adjacentCount > 2) {\n      this.adjacentCount = 2;\n    }\n\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.pages, propName: \"pages\" }],\n      \"Pagination\"\n    );\n  }\n\n  @Listen(\"paginationItemClick\")\n  paginationItemClickHandler(ev: CustomEvent): void {\n    const page = ev.detail.page;\n    this.currentPage = page;\n    this.icPageChange.emit({ value: this.currentPage });\n  }\n\n  /**\n   * Sets the currently displayed page.\n   * @param {number} page The page number to set as the current page\n   */\n  @Method()\n  async setCurrentPage(page: number): Promise<void> {\n    if (typeof page === \"number\" && page > 0 && page <= this.pages) {\n      this.currentPage = page;\n    } else {\n      console.error(\n        \"Current page must be a number greater than zero but less than or equal to the total number of pages\"\n      );\n    }\n  }\n\n  private handleClickFirst = () => {\n    this.currentPage = 1;\n    this.icPageChange.emit({ value: this.currentPage });\n  };\n\n  private handleClickPrevious = (): void => {\n    this.currentPage--;\n    this.icPageChange.emit({ value: this.currentPage });\n  };\n\n  private handleClickNext = (): void => {\n    this.currentPage++;\n    this.icPageChange.emit({ value: this.currentPage });\n  };\n\n  private handleClickLast = (): void => {\n    this.currentPage = this.pages;\n    this.icPageChange.emit({ value: this.currentPage });\n  };\n\n  // button rendering abstracted from component render methods for clarity\n  private firstButton = () => {\n    return (\n      <ic-button\n        id=\"first-page-button\"\n        aria-label=\"Go to first page\"\n        appearance={this.appearance}\n        onClick={this.handleClickFirst}\n        class=\"page-button first-last\"\n        disabled={this.currentPage === 1 || this.disabled}\n        variant=\"icon\"\n        innerHTML={paginationFirstLast}\n        tooltipPlacement=\"top\"\n      />\n    );\n  };\n\n  private previousButton = () => {\n    return (\n      <ic-button\n        id=\"previous-page-button\"\n        aria-label=\"Go to previous page\"\n        appearance={this.appearance}\n        onClick={this.handleClickPrevious}\n        class=\"page-button next-previous flip\"\n        disabled={this.currentPage === 1 || this.disabled}\n        variant=\"icon\"\n        innerHTML={paginationNextPrevious}\n        tooltipPlacement=\"top\"\n      />\n    );\n  };\n\n  private nextButton = () => {\n    return (\n      <ic-button\n        id=\"next-page-button\"\n        aria-label=\"Go to next page\"\n        appearance={this.appearance}\n        onClick={this.handleClickNext}\n        class=\"page-button next-previous\"\n        disabled={this.currentPage === this.pages || this.disabled}\n        variant=\"icon\"\n        innerHTML={paginationNextPrevious}\n        tooltipPlacement=\"top\"\n      />\n    );\n  };\n\n  private lastButton = () => {\n    return (\n      <ic-button\n        id=\"last-page-button\"\n        aria-label=\"Go to last page\"\n        appearance={this.appearance}\n        onClick={this.handleClickLast}\n        class=\"page-button first-last flip\"\n        disabled={this.currentPage === this.pages || this.disabled}\n        variant=\"icon\"\n        innerHTML={paginationFirstLast}\n        tooltipPlacement=\"top\"\n      />\n    );\n  };\n\n  private renderStartEllipsis = () => {\n    return (\n      <ic-pagination-item\n        appearance={this.appearance}\n        type=\"ellipsis\"\n        id=\"start-ellipsis\"\n        disabled={this.disabled}\n      />\n    );\n  };\n\n  private renderEndEllipsis = () => {\n    return (\n      <ic-pagination-item\n        appearance={this.appearance}\n        type=\"ellipsis\"\n        id=\"end-ellipsis\"\n        disabled={this.disabled}\n      />\n    );\n  };\n\n  private renderStartItems = () => {\n    return this.startItems.map((page: number) => {\n      return (\n        <ic-pagination-item\n          appearance={this.appearance}\n          selected={page === this.currentPage}\n          id={`pagination-item-${page}`}\n          type=\"page\"\n          page={page}\n          disabled={this.disabled}\n        />\n      );\n    });\n  };\n\n  private renderEndItems = () => {\n    return this.endItems.map((page: number) => {\n      return (\n        <ic-pagination-item\n          appearance={this.appearance}\n          selected={page === this.currentPage}\n          id={`pagination-item-${page}`}\n          type=\"page\"\n          page={page}\n          disabled={this.disabled}\n        />\n      );\n    });\n  };\n\n  private renderMiddleItems = () => {\n    return this.midItems.map((page: number) => {\n      return (\n        <ic-pagination-item\n          appearance={this.appearance}\n          selected={page === this.currentPage}\n          id={`pagination-item-${page}`}\n          type=\"page\"\n          page={page}\n          disabled={this.disabled}\n        />\n      );\n    });\n  };\n\n  render() {\n    const {\n      type,\n      pages,\n      currentPage,\n      hideCurrentPage,\n      disabled,\n      hideFirstAndLastPageButton,\n      label,\n    } = this;\n\n    return (\n      <Host>\n        {type === \"simple\" && (\n          <nav\n            class={{\n              [\"disabled\"]: disabled,\n            }}\n            role=\"navigation\"\n            aria-label=\"Pagination Navigation\"\n          >\n            {hideFirstAndLastPageButton ? null : this.firstButton()}\n            {this.previousButton()}\n            <ic-pagination-item\n              pages={pages}\n              appearance={this.appearance}\n              type=\"simple-current\"\n              page={currentPage}\n              label={label}\n              class={{ [\"hide-current-page\"]: hideCurrentPage }}\n            />\n            {this.nextButton()}\n            {hideFirstAndLastPageButton ? null : this.lastButton()}\n          </nav>\n        )}\n        {type === \"complex\" && (\n          <nav\n            class={{\n              [\"disabled\"]: disabled,\n            }}\n            role=\"navigation\"\n            aria-label=\"Pagination Navigation\"\n          >\n            {hideFirstAndLastPageButton ? null : this.firstButton()}\n            {this.previousButton()}\n            {this.renderStartItems()}\n            {this.startEllipsis && this.renderStartEllipsis()}\n            {this.renderMiddleItems()}\n            {this.endEllipsis && this.renderEndEllipsis()}\n            {this.renderEndItems()}\n            {this.nextButton()}\n            {hideFirstAndLastPageButton ? null : this.lastButton()}\n          </nav>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-pagination/test/a11y/ic-pagination.test.a11y.js

@@ -0,0 +1,18 @@
+import { fixture } from "@open-wc/testing-helpers";
+import { axe } from "jest-axe";
+import { checkShadowElementRendersCorrectly } from "../../../../utils/testa11y.helpers";
+describe("pagination component", () => {
+    it("passes accessibility", async () => {
+        const el = await fixture(`<ic-pagination pages="3" />`);
+        checkShadowElementRendersCorrectly(el);
+        expect(await axe(el, {
+            // Tested in Cypress and this error doesn't occur, not sure what's causing it in this test
+            rules: {
+                "aria-valid-attr-value": {
+                    enabled: false,
+                },
+            },
+        })).toHaveNoViolations();
+    });
+});
+//# sourceMappingURL=ic-pagination.test.a11y.js.map

package/dist/collection/components/ic-pagination/test/a11y/ic-pagination.test.a11y.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-pagination.test.a11y.js","sourceRoot":"","sources":["../../../../../src/components/ic-pagination/test/a11y/ic-pagination.test.a11y.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,kCAAkC,EAAE,MAAM,oCAAoC,CAAC;AAExF,QAAQ,CAAC,sBAAsB,EAAE,GAAG,EAAE;IACpC,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC,6BAA6B,CAAC,CAAC;QACxD,kCAAkC,CAAC,EAAE,CAAC,CAAC;QACvC,MAAM,CACJ,MAAM,GAAG,CAAC,EAAE,EAAE;YACZ,0FAA0F;YAC1F,KAAK,EAAE;gBACL,uBAAuB,EAAE;oBACvB,OAAO,EAAE,KAAK;iBACf;aACF;SACF,CAAC,CACH,CAAC,kBAAkB,EAAE,CAAC;IACzB,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { fixture } from \"@open-wc/testing-helpers\";\nimport { axe } from \"jest-axe\";\nimport { checkShadowElementRendersCorrectly } from \"../../../../utils/testa11y.helpers\";\n\ndescribe(\"pagination component\", () => {\n  it(\"passes accessibility\", async () => {\n    const el = await fixture(`<ic-pagination pages=\"3\" />`);\n    checkShadowElementRendersCorrectly(el);\n    expect(\n      await axe(el, {\n        // Tested in Cypress and this error doesn't occur, not sure what's causing it in this test\n        rules: {\n          \"aria-valid-attr-value\": {\n            enabled: false,\n          },\n        },\n      })\n    ).toHaveNoViolations();\n  });\n});\n"]}

package/dist/collection/components/ic-pagination/test/basic/ic-pagination.e2e.js

@@ -0,0 +1,128 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe("ic-pagination", () => {
+    it("should emit the correct page value when `page 2` is clicked", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<ic-pagination pages="15"
+    type="complex"
+    adjacent-count="1"
+    boundary-count="1" />`);
+        const pagItem = await page.find("ic-pagination >>> #pagination-item-2");
+        const icPageChange = await page.spyOnEvent("icPageChange");
+        await page.waitForChanges();
+        await pagItem.click();
+        await page.waitForChanges();
+        expect(icPageChange).toHaveReceivedEventDetail({ value: 2 });
+    });
+    it("should emit the correct page value when `next page` is clicked", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<ic-pagination pages="15"
+    type="complex"
+    adjacent-count="1"
+    boundary-count="1" />`);
+        const nextPage = await page.find("ic-pagination >>> #next-page-button");
+        const icPageChange = await page.spyOnEvent("icPageChange");
+        await page.waitForChanges();
+        await nextPage.click();
+        await page.waitForChanges();
+        expect(icPageChange).toHaveReceivedEventDetail({ value: 2 });
+    });
+    it("should emit the correct page value when `page 13` is clicked", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<ic-pagination pages="15"
+    type="complex"
+    adjacent-count="1"
+    boundary-count="1" />`);
+        const lastPage = await page.find("ic-pagination >>> #last-page-button");
+        const icPageChange = await page.spyOnEvent("icPageChange");
+        await page.waitForChanges();
+        await lastPage.click();
+        await page.waitForChanges();
+        const pagItem = await page.find("ic-pagination >>> #pagination-item-13");
+        await page.waitForChanges();
+        await pagItem.click();
+        await page.waitForChanges();
+        expect(icPageChange).toHaveReceivedEventDetail({ value: 13 });
+    });
+    it("should emit the correct page value when the `previous page` button is clicked", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<ic-pagination pages="15"
+    type="complex"
+    adjacent-count="1"
+    boundary-count="1" />`);
+        const lastPage = await page.find("ic-pagination >>> #last-page-button");
+        const icPageChange = await page.spyOnEvent("icPageChange");
+        await page.waitForChanges();
+        await lastPage.click();
+        await page.waitForChanges();
+        const previousPage = await page.find("ic-pagination >>> #previous-page-button");
+        await page.waitForChanges();
+        await previousPage.click();
+        await page.waitForChanges();
+        expect(icPageChange).toHaveReceivedEventDetail({ value: 14 });
+    });
+    it("should emit the correct page value when the `first page` button is clicked", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<ic-pagination pages="15"
+    type="complex"
+    adjacent-count="1"
+    boundary-count="1" />`);
+        const lastPage = await page.find("ic-pagination >>> #last-page-button");
+        const icPageChange = await page.spyOnEvent("icPageChange");
+        await page.waitForChanges();
+        await lastPage.click();
+        await page.waitForChanges();
+        const previousPage = await page.find("ic-pagination >>> #first-page-button");
+        await page.waitForChanges();
+        await previousPage.click();
+        await page.waitForChanges();
+        expect(icPageChange).toHaveReceivedEventDetail({ value: 1 });
+    });
+    it("should emit the correct page value when the midddle state is reached and the adjacent-count `page 7` button is clicked", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<ic-pagination pages="15"
+    type="complex"
+    adjacent-count="1"
+    boundary-count="1" />`);
+        const nextPage = await page.find("ic-pagination >>> #next-page-button");
+        const icPageChange = await page.spyOnEvent("icPageChange");
+        await page.waitForChanges();
+        await nextPage.click();
+        await page.waitForChanges();
+        await nextPage.click();
+        await page.waitForChanges();
+        await nextPage.click();
+        await page.waitForChanges();
+        await nextPage.click();
+        await page.waitForChanges();
+        await nextPage.click();
+        await page.waitForChanges();
+        const pagItem = await page.find("ic-pagination >>> #pagination-item-7");
+        await page.waitForChanges();
+        await pagItem.click();
+        await page.waitForChanges();
+        expect(icPageChange).toHaveReceivedEventDetail({ value: 7 });
+    });
+    it("should return false when the midddle state is reached and the adjacent-count `page 8` (out of bounds) button is clicked", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<ic-pagination pages="15"
+    type="complex"
+    adjacent-count="1"
+    boundary-count="1" />`);
+        const nextPage = await page.find("ic-pagination >>> #next-page-button");
+        await page.waitForChanges();
+        await nextPage.click();
+        await page.waitForChanges();
+        await nextPage.click();
+        await page.waitForChanges();
+        await nextPage.click();
+        await page.waitForChanges();
+        await nextPage.click();
+        await page.waitForChanges();
+        await nextPage.click();
+        await page.waitForChanges();
+        const pagItem = await page.find("ic-pagination >>> #pagination-item-8");
+        await page.waitForChanges();
+        expect(pagItem).toBe(null);
+    });
+});
+//# sourceMappingURL=ic-pagination.e2e.js.map