@ukic/web-components 2.1.0-beta.16 → 2.1.0-beta.18

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

@@ -1 +1 @@
-{"version":3,"file":"ic-navigation-menu.js","sourceRoot":"","sources":["../../../src/components/ic-navigation-menu/ic-navigation-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,CAAC,EACD,KAAK,EAEL,MAAM,GACP,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAE1E;;;GAGG;AAMH,MAAM,OAAO,cAAc;;IA2CjB,eAAU,GAAY,KAAK,CAAC;IAC5B,kBAAa,GAAY,KAAK,CAAC;IAC/B,wBAAmB,GAAY,KAAK,CAAC;IACrC,kBAAa,GAAY,KAAK,CAAC;IAC/B,gBAAW,GAAgB,IAAI,CAAC;IAChC,gBAAW,GAAwB,IAAI,CAAC;IAGxC,cAAS,GAAG,GAAG,EAAE;MACvB,IAAI,CAAC,qBAAqB,CAAC,IAAI,EAAE,CAAC;IACpC,CAAC,CAAC;IAEM,qBAAgB,GAAG,GAAG,EAAE;MAC9B,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE;QAC1B,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC;OAC1B;IACH,CAAC,CAAC;IAEM,qBAAgB,GAAG,GAAG,EAAE;MAC9B,IAAI,OAAO,CAAC;MACZ,IAAI,IAAI,CAAC,WAAW,KAAK,IAAI,EAAE;QAC7B,QAAQ,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE;UAChC,KAAK,sBAAsB,CAAC;UAC5B,KAAK,oBAAoB,CAAC;UAC1B,KAAK,qBAAqB;YACxB,OAAO,GAAG,IAAI,CAAC,WAA0B,CAAC;YAC1C,OAAO,CAAC,KAAK,EAAE,CAAC;YAChB,MAAM;UACR,KAAK,GAAG;YACN,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC;YACzB,MAAM;SACT;OACF;IACH,CAAC,CAAC;mBAtEwB,EAAE;kBAKH,EAAE;;EAQ3B,mBAAmB;IACjB,IAAI,CAAC,SAAS,EAAE,CAAC;EACnB,CAAC;EAGD,aAAa,CAAC,EAAiB;IAC7B,IAAI,EAAE,CAAC,GAAG,KAAK,KAAK,EAAE;MACpB,IAAI,EAAE,CAAC,QAAQ,EAAE;QACf,IAAI,QAAQ,CAAC,aAAa,KAAK,IAAI,CAAC,QAAQ,EAAE;UAC5C,EAAE,CAAC,cAAc,EAAE,CAAC;UACpB,IAAI,CAAC,gBAAgB,EAAE,CAAC;SACzB;OACF;WAAM,IACL,QAAQ,CAAC,aAAa,KAAK,IAAI,CAAC,WAAW;QAC3C,IAAI,CAAC,WAAW,KAAK,IAAI,EACzB;QACA,EAAE,CAAC,cAAc,EAAE,CAAC;QACpB,IAAI,CAAC,gBAAgB,EAAE,CAAC;OACzB;KACF;SAAM,IAAI,EAAE,CAAC,GAAG,KAAK,QAAQ,EAAE;MAC9B,IAAI,CAAC,SAAS,EAAE,CAAC;KAClB;EACH,CAAC;EAqCD,iBAAiB;IACf,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;IAC5D,MAAM,aAAa,GAAG,cAAc,CAAC,IAAI,CAAC,EAAE,EAAE,YAAY,CAAC,CAAC;IAC5D,IAAI,aAAa,EAAE;MACjB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;MAC1B,MAAM,MAAM,GAAG,aAAa,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,CAAgB,CAAC;MACtE,IAAI,MAAM,CAAC,OAAO,KAAK,oBAAoB,EAAE;QAC3C,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC;OACjC;MACD,MAAM,OAAO,GAAG,aAAa,CAAC,CAAC,CAAgB,CAAC;MAChD,IAAI,OAAO,CAAC,OAAO,KAAK,qBAAqB,EAAE;QAC7C,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;OAC3B;KACF;IACD,MAAM,aAAa,GAAG,cAAc,CAAC,IAAI,CAAC,EAAE,EAAE,SAAS,CAAC,CAAC;IAEzD,IAAI,aAAa,KAAK,IAAI,EAAE;MAC1B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;MACvB,IAAI,CAAC,WAAW,GAAG,aAAa,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,CAAgB,CAAC;KAC3E;SAAM;MACL,IAAI,IAAI,CAAC,aAAa,EAAE;QACtB,MAAM,MAAM,GAAG,aAAa,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,CAAgB,CAAC;QACtE,kDAAkD;QAClD,MAAM,WAAW,GAAG,OAAO,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC;QACvD,IAAI,WAAW,KAAK,IAAI,EAAE;UACxB,IAAI,CAAC,WAAW,GAAG,WAA0B,CAAC;SAC/C;aAAM;UACL,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC;SAC3B;OACF;KACF;EACH,CAAC;EAED,gBAAgB;IACd,IAAI,CAAC,gBAAgB,EAAE,CAAC;EAC1B,CAAC;EAED,mBAAmB;IACjB,IAAI,CAAC,aAAa,GAAG,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,YAAY,CAAC,CAAC;IACvD,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,SAAS,CAAC,CAAC;EACnD,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAC,cAAc,EAAC,OAAO,EAAE,IAAI,CAAC,SAAS,GAAQ;MACzD,WACE,KAAK,EAAC,aAAa,EACnB,IAAI,EAAC,QAAQ,gBACF,MAAM,gBACL,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,OAAO;QAE/D,2BACc,MAAM,EAClB,EAAE,EAAC,0BAA0B,EAC7B,KAAK,EAAC,0BAA0B,sBAG3B;QACP,8BACkB,0BAA0B,iBAC7B,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;UAElD,WACE,KAAK,EAAE;cACL,CAAC,6BAA6B,CAAC,EAAE,IAAI;cACrC,CAAC,iBAAiB,CAAC,EAAE,IAAI,CAAC,aAAa;aACxC;YAED,iBACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,EACpC,EAAE,EAAC,mBAAmB,EACtB,KAAK,EAAC,mBAAmB,EACzB,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,OAAO,gBACA,SACV,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KACtC,OAAO,EACP,OAAO,EAAE,IAAI,CAAC,SAAS;cAEvB,WACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B;gBAElC,YACE,CAAC,EAAC,uGAAuG,EACzG,IAAI,EAAC,SAAS,GACd,CACE,CACI,CACR;UACL,IAAI,CAAC,aAAa,IAAI,YAAM,IAAI,EAAC,YAAY,GAAQ,CAClD;QACL,IAAI,CAAC,UAAU,IAAI,CAClB,WACE,KAAK,EAAE;YACL,CAAC,wBAAwB,CAAC,EAAE,IAAI;YAChC,CAAC,uCAAuC,CAAC,EACvC,IAAI,CAAC,mBAAmB;WAC3B;UAED,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACP;QACA,CAAC,IAAI,CAAC,MAAM,KAAK,EAAE,IAAI,IAAI,CAAC,OAAO,KAAK,EAAE,CAAC,IAAI,CAC9C,WAAK,KAAK,EAAC,+BAA+B;UACvC,IAAI,CAAC,MAAM,KAAK,EAAE,IAAI,CACrB,WAAK,KAAK,EAAC,aAAa;YACtB,qBACE,OAAO,EAAC,iBAAiB,gBACd,SAAS,EACpB,KAAK,EAAC,kBAAkB,IAEvB,IAAI,CAAC,MAAM,CACE,CACZ,CACP;UACA,IAAI,CAAC,OAAO,KAAK,EAAE,IAAI,CACtB,WAAK,KAAK,EAAC,cAAc;YACvB,qBACE,OAAO,EAAC,OAAO,EACf,KAAK,EAAC,mBAAmB,gBACd,aAAa,IAEvB,IAAI,CAAC,OAAO,CACC,CACZ,CACP,CACG,CACP,CACG,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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   * The version info to display.\n   */\n  @Prop() version: string = \"\";\n\n  /**\n   * The 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(\"navItemClicked\")\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.focus) {\n      this.closeButton.focus();\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        case \"IC-NAVIGATION-ITEM\":\n        case \"IC-NAVIGATION-GROUP\":\n          focusEl = this.lastTabStop as HTMLElement;\n          focusEl.focus();\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,"file":"ic-navigation-menu.js","sourceRoot":"","sources":["../../../src/components/ic-navigation-menu/ic-navigation-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["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  private closeButton: HTMLIcButtonElement = null;\n  private hasButtons: boolean = false;\n  private hasNavigation: boolean = false;\n  private lastTabStop: HTMLElement = null;\n  private navBarEl: HTMLIcTopNavigationElement;\n  private navGroupFirst: boolean = false;\n  private navItemAboveButtons: boolean = false;\n\n  @Element() el: HTMLIcNavigationMenuElement;\n\n  /**\n   * The status info to display.\n   */\n  @Prop() status: string = \"\";\n\n  /**\n   * The version info to display.\n   */\n  @Prop() version: string = \"\";\n\n  /**\n   * @internal - Emitted when the menu is closed.\n   */\n  @Event() icNavigationMenuClose: EventEmitter<void>;\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  @Listen(\"navItemClicked\")\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 closeMenu = () => {\n    this.icNavigationMenuClose.emit();\n  };\n\n  private focusCloseButton = () => {\n    if (this.closeButton.focus) {\n      this.closeButton.focus();\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        case \"IC-NAVIGATION-ITEM\":\n        case \"IC-NAVIGATION-GROUP\":\n          focusEl = this.lastTabStop as HTMLElement;\n          focusEl.focus();\n          break;\n        case \"A\":\n          this.lastTabStop.focus();\n          break;\n      }\n    }\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"]}

package/dist/collection/components/ic-navigation-menu/test/basic/ic-navigation-menu.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-navigation-menu.e2e.js","sourceRoot":"","sources":["../../../../../src/components/ic-navigation-menu/test/basic/ic-navigation-menu.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;EAClC,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CACnB,2EAA2E,CAC5E,CAAC;IAEF,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;IAEtD,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;EAC1C,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,gEAAgE,EAAE,KAAK,IAAI,EAAE;IAC9E,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CACnB,2EAA2E,CAC5E,CAAC;IAEF,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,QAAQ,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,kCAAkC,CAAC,CAAC;IAErE,MAAM,qBAAqB,GAAG,MAAM,IAAI,CAAC,UAAU,CACjD,uBAAuB,CACxB,CAAC;IACF,MAAM,QAAQ,CAAC,KAAK,EAAE,CAAC;IAEvB,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,CAAC,qBAAqB,CAAC,CAAC,mBAAmB,EAAE,CAAC;EACtD,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,2DAA2D,EAAE,KAAK,IAAI,EAAE;IACzE,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CACnB,2EAA2E,CAC5E,CAAC;IAEF,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,qBAAqB,GAAG,MAAM,IAAI,CAAC,UAAU,CACjD,uBAAuB,CACxB,CAAC;IACF,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IACpC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,CAAC,qBAAqB,CAAC,CAAC,mBAAmB,EAAE,CAAC;EACtD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from \"@stencil/core/testing\";\n\ndescribe(\"ic-navigation-menu\", () => {\n  it(\"renders\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<ic-navigation-menu version=\"v0.0.7\" status=\"alpha\"></ic-navigation-menu>`\n    );\n\n    const element = await page.find(\"ic-navigation-menu\");\n\n    expect(element).toHaveClass(\"hydrated\");\n  });\n\n  it(\"should emit icNavigationMenuClose when close button is clicked\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<ic-navigation-menu version=\"v0.0.7\" status=\"alpha\"></ic-navigation-menu>`\n    );\n\n    await page.waitForChanges();\n\n    const closeBtn = await page.find(\"ic-navigation-menu >>> ic-button\");\n\n    const icNavigationMenuClose = await page.spyOnEvent(\n      \"icNavigationMenuClose\"\n    );\n    await closeBtn.click();\n\n    await page.waitForChanges();\n\n    expect(icNavigationMenuClose).toHaveReceivedEvent();\n  });\n\n  it(\"should emit icNavigationMenuClose when escape key pressed\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<ic-navigation-menu version=\"v0.0.7\" status=\"alpha\"></ic-navigation-menu>`\n    );\n\n    await page.waitForChanges();\n    const icNavigationMenuClose = await page.spyOnEvent(\n      \"icNavigationMenuClose\"\n    );\n    await page.keyboard.press(\"Escape\");\n    await page.waitForChanges();\n\n    expect(icNavigationMenuClose).toHaveReceivedEvent();\n  });\n});\n"]}

package/dist/collection/components/ic-navigation-menu/{ic-navigation-menu.spec.js → test/basic/ic-navigation-menu.spec.js}

@@ -1,10 +1,10 @@
 import { newSpecPage } from "@stencil/core/testing";
-import { Button } from "../ic-button/ic-button";
-import { NavigationGroup } from "../ic-navigation-group/ic-navigation-group";
-import { NavigationItem } from "../ic-navigation-item/ic-navigation-item";
-import { NavigationMenu } from "./ic-navigation-menu";
-import { NavigationButton } from "../ic-navigation-button/ic-navigation-button";
-import { waitForNavGroupLoad } from "../../testspec.setup";
+import { Button } from "../../../ic-button/ic-button";
+import { NavigationGroup } from "../../../ic-navigation-group/ic-navigation-group";
+import { NavigationItem } from "../../../ic-navigation-item/ic-navigation-item";
+import { NavigationMenu } from "../../ic-navigation-menu";
+import { NavigationButton } from "../../../ic-navigation-button/ic-navigation-button";
+import { waitForNavGroupLoad } from "../../../../testspec.setup";
 describe("ic-navigation-menu", () => {
   it("should render with version and status", async () => {
     const page = await newSpecPage({

package/dist/collection/components/ic-navigation-menu/test/basic/ic-navigation-menu.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-navigation-menu.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-navigation-menu/test/basic/ic-navigation-menu.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Button } from \"../../../ic-button/ic-button\";\nimport { NavigationGroup } from \"../../../ic-navigation-group/ic-navigation-group\";\nimport { NavigationItem } from \"../../../ic-navigation-item/ic-navigation-item\";\nimport { NavigationMenu } from \"../../ic-navigation-menu\";\nimport { NavigationButton } from \"../../../ic-navigation-button/ic-navigation-button\";\nimport { waitForNavGroupLoad } from \"../../../../testspec.setup\";\n\ndescribe(\"ic-navigation-menu\", () => {\n  it(\"should render with version and status\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationMenu],\n      html: `<ic-navigation-menu version=\"v1.0.0\" status=\"Beta\"></ic-navigation-menu>`,\n    });\n    expect(page.root).toMatchSnapshot(\"renders-with-version-and-status\");\n  });\n\n  it(\"should test menu close emits event\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationMenu],\n      html: `<ic-navigation-menu version=\"v1.0.0\" status=\"Beta\"></ic-navigation-menu>`,\n    });\n\n    const eventSpy = jest.fn();\n    page.win.addEventListener(\"icNavigationMenuClose\", eventSpy);\n    await page.rootInstance.navItemClickHandler();\n    await page.waitForChanges();\n    expect(eventSpy).toHaveBeenCalled();\n  });\n\n  it(\"should test key down handler\", async () => {\n    Object.defineProperty(document, \"activeElement\", { value: null });\n\n    const page = await newSpecPage({\n      components: [NavigationMenu],\n      html: `<ic-navigation-menu version=\"v1.0.0\" status=\"Beta\"></ic-navigation-menu>`,\n    });\n\n    const eventSpy = jest.fn();\n    page.win.addEventListener(\"icNavigationMenuClose\", eventSpy);\n    await page.rootInstance.handleKeyDown({ key: \"Escape\" });\n    await page.waitForChanges();\n    expect(eventSpy).toHaveBeenCalled();\n\n    await page.rootInstance.handleKeyDown({\n      key: \"Tab\",\n      preventDefault: (): void => null,\n    });\n    await page.waitForChanges();\n\n    await page.rootInstance.handleKeyDown({\n      key: \"Tab\",\n      shiftKey: true,\n      preventDefault: (): void => null,\n    });\n    await page.waitForChanges();\n  });\n\n  it(\"should test slotted buttons\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationMenu, NavigationButton, Button],\n      html: `<ic-navigation-menu version=\"v1.0.0\" status=\"Beta\">\n        <ic-navigation-button\n          slot=\"buttons\"\n          label=\"button1\"\n          onclick=\"alert('test')\"\n        >\n          <svg\n            slot=\"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-navigation-button>\n      </ic-navigation-menu>`,\n    });\n\n    //trigger focus\n    await page.rootInstance.handleKeyDown({\n      key: \"Tab\",\n      shiftKey: true,\n      preventDefault: (): void => null,\n    });\n    await page.waitForChanges();\n\n    expect(page.root).toMatchSnapshot(\"renders-with-slotted-buttons\");\n  });\n\n  it(\"should test slotted navigation item\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationMenu, NavigationItem],\n      html: `<ic-navigation-menu version=\"v1.0.0\" status=\"Beta\">\n        <ic-navigation-item slot=\"navigation\" label=\"Navigation 1\" href=\"/\"></ic-navigation-item>\n      </ic-navigation-menu>`,\n    });\n\n    //trigger focus\n    await page.rootInstance.handleKeyDown({\n      key: \"Tab\",\n      shiftKey: true,\n      preventDefault: (): void => null,\n    });\n    await page.waitForChanges();\n\n    expect(page.root).toMatchSnapshot(\"renders-with-slotted-navigation-item\");\n  });\n\n  it(\"should test slotted navigation group\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationMenu, NavigationGroup],\n      html: `<ic-navigation-menu version=\"v1.0.0\" status=\"Beta\">\n        <ic-navigation-group\n          slot=\"navigation\"\n          label=\"Navigation group\"\n          expandable=\"true\"\n        >\n        </ic-navigation-group>\n      </ic-navigation-menu>`,\n    });\n    await waitForNavGroupLoad();\n\n    //trigger focus\n    await page.rootInstance.handleKeyDown({\n      key: \"Tab\",\n      shiftKey: true,\n      preventDefault: (): void => null,\n    });\n    await page.waitForChanges();\n\n    expect(page.root).toMatchSnapshot(\"renders-with-slotted-navigation-group\");\n  });\n\n  it(\"should test slotted navigation and buttons\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationMenu, NavigationItem, NavigationButton, Button],\n      html: `<ic-navigation-menu version=\"v1.0.0\" status=\"Beta\">\n        <ic-navigation-button\n          label=\"button1\"\n          slot=\"buttons\"\n          onclick=\"alert('test')\"\n        >\n          <svg\n            slot=\"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-navigation-button>\n        <ic-navigation-item slot=\"navigation\" label=\"Navigation 1\" href=\"/\"></ic-navigation-item>\n      </ic-navigation-menu>`,\n    });\n\n    //trigger focus\n    await page.rootInstance.handleKeyDown({\n      key: \"Tab\",\n      shiftKey: true,\n      preventDefault: (): void => null,\n    });\n    await page.waitForChanges();\n\n    expect(page.root).toMatchSnapshot(\n      \"renders-with-slotted-navigation-and-buttons\"\n    );\n  });\n\n  it(\"should test slotted link\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationMenu],\n      html: `<ic-navigation-menu version=\"v1.0.0\" status=\"Beta\">\n        <a href=\"/\"\n          slot=\"navigation\"\n        >\n      </ic-navigation-menu>`,\n    });\n\n    //trigger focus\n    await page.rootInstance.handleKeyDown({\n      key: \"Tab\",\n      shiftKey: true,\n      preventDefault: (): void => null,\n    });\n    await page.waitForChanges();\n\n    expect(page.root).toMatchSnapshot(\"renders-with-slotted-link\");\n  });\n});\n"]}

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

@@ -62,17 +62,22 @@ export class PageHeader {
         appendActionContent();
       }
     };
-    this.heading = undefined;
-    this.subheading = undefined;
+    this.actionContent = undefined;
+    this.areButtonsReversed = false;
+    this.deviceSize = DEVICE_SIZES.XL;
     this.aligned = "left";
-    this.small = false;
     this.border = true;
+    this.heading = undefined;
+    this.reverseOrder = false;
+    this.small = false;
     this.sticky = false;
     this.stickyDesktopOnly = false;
-    this.reverseOrder = false;
-    this.deviceSize = DEVICE_SIZES.XL;
-    this.areButtonsReversed = false;
-    this.actionContent = undefined;
+    this.subheading = undefined;
+  }
+  disconnectedCallback() {
+    if (this.resizeObserver !== null) {
+      this.resizeObserver.disconnect();
+    }
   }
   componentWillLoad() {
     this.actionContent = Array.from(this.el.querySelectorAll(`[slot="actions"]`));
@@ -80,11 +85,6 @@ export class PageHeader {
   componentDidLoad() {
     checkResizeObserver(this.runResizeObserver);
   }
-  disconnectedCallback() {
-    if (this.resizeObserver !== null) {
-      this.resizeObserver.disconnect();
-    }
-  }
   render() {
     const { small, border, heading, subheading, aligned, sticky, stickyDesktopOnly, } = this;
     return (h(Host, { class: {
@@ -111,64 +111,65 @@ export class PageHeader {
   }
   static get properties() {
     return {
-      "heading": {
+      "aligned": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+          "original": "IcAlignment",
+          "resolved": "\"center\" | \"full-width\" | \"left\"",
+          "references": {
+            "IcAlignment": {
+              "location": "import",
+              "path": "../../utils/types"
+            }
+          }
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The title to render on the page header."
+          "text": "The alignment of the page header."
         },
-        "attribute": "heading",
-        "reflect": false
+        "attribute": "aligned",
+        "reflect": false,
+        "defaultValue": "\"left\""
       },
-      "subheading": {
-        "type": "string",
+      "border": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The subtitle to render on the page header."
+          "text": "If `true`, a border will be displayed along the bottom of the page header."
         },
-        "attribute": "subheading",
-        "reflect": false
+        "attribute": "border",
+        "reflect": false,
+        "defaultValue": "true"
       },
-      "aligned": {
+      "heading": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "IcAlignment",
-          "resolved": "\"center\" | \"full-width\" | \"left\"",
-          "references": {
-            "IcAlignment": {
-              "location": "import",
-              "path": "../../utils/types"
-            }
-          }
+          "original": "string",
+          "resolved": "string",
+          "references": {}
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The alignment of the page header."
+          "text": "The title to render on the page header."
         },
-        "attribute": "aligned",
-        "reflect": false,
-        "defaultValue": "\"left\""
+        "attribute": "heading",
+        "reflect": false
       },
-      "small": {
+      "reverseOrder": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -180,13 +181,13 @@ export class PageHeader {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "If `true`, the small styling will be applied to the page header."
+          "text": "If `true`, the reading pattern and tab order will change in the action area for viewport widths of above 576px and when actions have not wrapped."
         },
-        "attribute": "small",
+        "attribute": "reverse-order",
         "reflect": false,
         "defaultValue": "false"
       },
-      "border": {
+      "small": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -198,11 +199,11 @@ export class PageHeader {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "If `true`, a border will be displayed along the bottom of the page header."
+          "text": "If `true`, the small styling will be applied to the page header."
         },
-        "attribute": "border",
+        "attribute": "small",
         "reflect": false,
-        "defaultValue": "true"
+        "defaultValue": "false"
       },
       "sticky": {
         "type": "boolean",
@@ -240,31 +241,30 @@ export class PageHeader {
         "reflect": false,
         "defaultValue": "false"
       },
-      "reverseOrder": {
-        "type": "boolean",
+      "subheading": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "If `true`, the reading pattern and tab order will change in the action area for viewport widths of above 576px and when actions have not wrapped."
+          "text": "The subtitle to render on the page header."
         },
-        "attribute": "reverse-order",
-        "reflect": false,
-        "defaultValue": "false"
+        "attribute": "subheading",
+        "reflect": false
       }
     };
   }
   static get states() {
     return {
-      "deviceSize": {},
+      "actionContent": {},
       "areButtonsReversed": {},
-      "actionContent": {}
+      "deviceSize": {}
     };
   }
   static get elementRef() { return "el"; }

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

@@ -1 +1 @@
-{"version":3,"file":"ic-page-header.js","sourceRoot":"","sources":["../../../src/components/ic-page-header/ic-page-header.tsx"],"names":[],"mappings":"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","sourcesContent":["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 page header.\n   */\n  @Prop() heading?: string;\n  /**\n   * The subtitle to render on the page header.\n   */\n  @Prop() subheading?: string;\n  /**\n   * The alignment of the page header.\n   */\n  @Prop() aligned?: IcAlignment = \"left\";\n  /**\n   * If `true`, the small styling will be applied to the page header.\n   */\n  @Prop() small?: boolean = false;\n  /**\n   * If `true`, a border will be displayed along the bottom of the page header.\n   */\n  @Prop() border?: boolean = true;\n  /**\n   * If `true`, the page header will be sticky at all breakpoints.\n   */\n  @Prop() sticky?: boolean = false;\n  /**\n   *  If `true`, the page header will only be sticky for viewport widths of 992px and above.\n   */\n  @Prop() stickyDesktopOnly?: boolean = false;\n  /**\n   * If `true`, the reading pattern and tab order will 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 && isSlotUsed(this.el, \"actions\")) {\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    const appendActionContent = () => {\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    if (\n      (this.deviceSize > DEVICE_SIZES.S &&\n        actionAreaHeight <= max &&\n        !this.areButtonsReversed) ||\n      (((this.deviceSize > DEVICE_SIZES.S && actionAreaHeight > max) ||\n        this.deviceSize <= DEVICE_SIZES.S) &&\n        this.areButtonsReversed)\n    ) {\n      appendActionContent();\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 aria-label=\"navigation-landmark-page-header\">\n                    <ic-horizontal-scroll>\n                      <ul class=\"tabs-slot\">\n                        <slot name=\"tabs\" />\n                      </ul>\n                    </ic-horizontal-scroll>\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","sourceRoot":"","sources":["../../../src/components/ic-page-header/ic-page-header.tsx"],"names":[],"mappings":"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","sourcesContent":["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  private resizeObserver: ResizeObserver = null;\n\n  @Element() el: HTMLIcPageHeaderElement;\n\n  @State() actionContent: Node[];\n  @State() areButtonsReversed: boolean = false;\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n\n  /**\n   * The alignment of the page header.\n   */\n  @Prop() aligned?: IcAlignment = \"left\";\n\n  /**\n   * If `true`, a border will be displayed along the bottom of the page header.\n   */\n  @Prop() border?: boolean = true;\n\n  /**\n   * The title to render on the page header.\n   */\n  @Prop() heading?: string;\n\n  /**\n   * If `true`, the reading pattern and tab order will 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  /**\n   * If `true`, the small styling will be applied to the page header.\n   */\n  @Prop() small?: boolean = false;\n\n  /**\n   * If `true`, the page header will be sticky at all breakpoints.\n   */\n  @Prop() sticky?: boolean = false;\n\n  /**\n   *  If `true`, the page header will only be sticky for viewport widths of 992px and above.\n   */\n  @Prop() stickyDesktopOnly?: boolean = false;\n\n  /**\n   * The subtitle to render on the page header.\n   */\n  @Prop() subheading?: string;\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\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  private resizeObserverCallback = () => {\n    if (this.reverseOrder && isSlotUsed(this.el, \"actions\")) {\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    const appendActionContent = () => {\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    if (\n      (this.deviceSize > DEVICE_SIZES.S &&\n        actionAreaHeight <= max &&\n        !this.areButtonsReversed) ||\n      (((this.deviceSize > DEVICE_SIZES.S && actionAreaHeight > max) ||\n        this.deviceSize <= DEVICE_SIZES.S) &&\n        this.areButtonsReversed)\n    ) {\n      appendActionContent();\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 aria-label=\"navigation-landmark-page-header\">\n                    <ic-horizontal-scroll>\n                      <ul class=\"tabs-slot\">\n                        <slot name=\"tabs\" />\n                      </ul>\n                    </ic-horizontal-scroll>\n                  </nav>\n                )}\n              </div>\n            )}\n          </ic-section-container>\n        </header>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,6 +1,6 @@
 import { fixture } from "@open-wc/testing-helpers";
 import { axe } from "jest-axe";
-import { checkShadowElementRendersCorrectly } from "../../utils/testa11y.helpers";
+import { checkShadowElementRendersCorrectly } from "../../../../utils/testa11y.helpers";
 describe("page-header", () => {
   it("passes accessibility", async () => {
     const el = await fixture(`

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;EAC3B,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC;;OAEtB,CAAC,CAAC;IACL,kCAAkC,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;EAC7C,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.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-page-header/{ic-page-header.spec.js → test/basic/ic-page-header.spec.js}

@@ -1,11 +1,11 @@
 import { newSpecPage } from "@stencil/core/testing";
-import { PageHeader } from "./ic-page-header";
-import { DEVICE_SIZES } from "../../utils/helpers";
-import { mockDeviceSize } from "../../testspec.setup";
-import { Button } from "../ic-button/ic-button";
-import * as helpers from "../../utils/helpers";
-import { BreadcrumbGroup } from "../ic-breadcrumb-group/ic-breadcrumb-group";
-import { Breadcrumb } from "../ic-breadcrumb/ic-breadcrumb";
+import { PageHeader } from "../../ic-page-header";
+import { DEVICE_SIZES } from "../../../../utils/helpers";
+import { mockDeviceSize } from "../../../../testspec.setup";
+import { Button } from "../../../ic-button/ic-button";
+import * as helpers from "../../../../utils/helpers";
+import { BreadcrumbGroup } from "../../../ic-breadcrumb-group/ic-breadcrumb-group";
+import { Breadcrumb } from "../../../ic-breadcrumb/ic-breadcrumb";
 describe("simple ic-page-header renders", () => {
   it("should render with a heading & sub-heading", async () => {
     const page = await newSpecPage({

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-page-header.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-page-header/test/basic/ic-page-header.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { PageHeader } from \"../../ic-page-header\";\nimport { DEVICE_SIZES } from \"../../../../utils/helpers\";\nimport { mockDeviceSize } from \"../../../../testspec.setup\";\nimport { Button } from \"../../../ic-button/ic-button\";\nimport * as helpers from \"../../../../utils/helpers\";\nimport { BreadcrumbGroup } from \"../../../ic-breadcrumb-group/ic-breadcrumb-group\";\nimport { Breadcrumb } from \"../../../ic-breadcrumb/ic-breadcrumb\";\n\ndescribe(\"simple ic-page-header renders\", () => {\n  it(\"should render with a heading & sub-heading\", async () => {\n    const page = await newSpecPage({\n      components: [PageHeader],\n      html: `<ic-page-header heading=\"Page header\" subheading=\"This is a simple page header component and this is the text.\"></ic-page-header>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\n      \"should render with a heading & sub-heading\"\n    );\n  });\n\n  it(\"should return null for slot 'tabs'\", async () => {\n    expect(helpers.getSlot(undefined, \"tabs\")).toBeNull();\n  });\n});\n\ndescribe(\"ic-page-header component renders additional functionality\", () => {\n  it(\"should render actions\", async () => {\n    const page = await newSpecPage({\n      components: [PageHeader],\n      html: `\n      <ic-page-header\n        heading=\"Page header\"\n        subheading=\"This is a simple page header component and this is the text.\"\n      >\n        <ic-button slot=\"actions\" variant=\"tertiary\">Filter coffee</ic-button>\n        <ic-button slot=\"actions\" variant=\"primary\"\n          >Create coffee\n          <svg\n            slot=\"icon\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </ic-button>\n      </ic-page-header>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render actions\");\n  });\n\n  it(\"should render an input field\", async () => {\n    const page = await newSpecPage({\n      components: [PageHeader],\n      html: `\n      <ic-page-header\n        heading=\"Page header\"\n        subheading=\"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-text-field slot=\"input\" placeholder=\"Enter your input\" hide-label />\n      </ic-page-header>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render an input field\");\n  });\n\n  it(\"should render a stepper\", async () => {\n    const page = await newSpecPage({\n      components: [PageHeader],\n      html: `\n      <ic-page-header heading=\"Create a coffee\">\n        <ic-stepper slot=\"stepper\">\n          <ic-step step-title=\"Warm kettle\" step-type=\"completed\"></ic-step>\n          <ic-step\n            step-title=\"Warm milk\"\n            step-subtitle=\"Optional\"\n            step-type=\"completed\"\n          ></ic-step>\n          <ic-step step-title=\"Pour milk\" step-type=\"current\"></ic-step>\n        </ic-stepper>\n      </ic-page-header>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render a stepper\");\n  });\n\n  it(\"should render tabs\", async () => {\n    const page = await newSpecPage({\n      components: [PageHeader],\n      html: `\n      <ic-page-header heading=\"Coffee recipes\" subheading=\"This is a simple page header component and this is the text.\">\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=\"/all-recipes\"\n          selected\n        ></ic-navigation-item>\n        <ic-navigation-item\n          slot=\"tabs\"\n          label=\"Favourites\"\n          href=\"/favourites\"\n        ></ic-navigation-item>\n      </ic-page-header>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render tabs\");\n  });\n\n  it(\"should render actions, input & tabs\", async () => {\n    const page = await newSpecPage({\n      components: [PageHeader],\n      html: `\n      <ic-page-header heading=\"Coffee recipes\" subheading=\"This is a simple page header component and this is the text.\">\n        <ic-status-tag slot=\"heading-adornment\" label=\"Beta\"></ic-status-tag>\n        <ic-button slot=\"actions\" variant=\"tertiary\">Filter coffee</ic-button>\n        <ic-button slot=\"actions\" variant=\"primary\"\n          >Create coffee\n          <svg\n            slot=\"icon\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </ic-button>\n        <ic-navigation-item\n          slot=\"tabs\"\n          label=\"All recipes\"\n          href=\"/all-recipes\"\n          selected\n        ></ic-navigation-item>\n        <ic-navigation-item\n          slot=\"tabs\"\n          label=\"Favourites\"\n          href=\"/favourites\"\n        ></ic-navigation-item>\n        <ic-text-field slot=\"input\" placeholder=\"Enter your input\" hide-label />\n      </ic-page-header>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render actions, input & tabs\");\n  });\n\n  it(\"should render actions, input & stepper\", async () => {\n    const page = await newSpecPage({\n      components: [PageHeader],\n      html: `\n      <ic-page-header heading=\"Coffee recipes\" subheading=\"This is a simple page header component and this is the text.\">\n        <ic-stepper slot=\"stepper\">\n          <ic-step step-title=\"Warm kettle\" step-type=\"completed\"></ic-step>\n          <ic-step\n            step-title=\"Warm milk\"\n            step-subtitle=\"Optional\"\n            step-type=\"completed\"\n          ></ic-step>\n          <ic-step step-title=\"Pour milk\" step-type=\"current\"></ic-step>\n        </ic-stepper>\n        <ic-status-tag slot=\"heading-adornment\" label=\"Beta\"></ic-status-tag>\n        <ic-button slot=\"actions\" variant=\"tertiary\">Filter coffee</ic-button>\n        <ic-button slot=\"actions\" variant=\"primary\"\n          >Create coffee\n          <svg\n            slot=\"icon\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </ic-button>\n        <ic-text-field slot=\"input\" placeholder=\"Enter your input\" hide-label />\n      </ic-page-header>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render actions, input & stepper\");\n  });\n\n  it(\"should render with breadcrumbs\", async () => {\n    const page = await newSpecPage({\n      components: [PageHeader, BreadcrumbGroup, Breadcrumb],\n      html: `\n      <ic-page-header heading=\"Coffee recipes\" subheading=\"This is a simple page header component and this is the text.\">\n        <ic-breadcrumb-group slot=\"breadcrumbs\">\n          <ic-breadcrumb\n            page-title=\"Breadcrumb 1\"\n            href=\"/breadcrumb-1\"\n          ></ic-breadcrumb>\n          <ic-breadcrumb\n            current=\"true\"\n            page-title=\"Breadcrumb 2\"\n            href=\"/breadcrumb-2\"\n          ></ic-breadcrumb>\n        </ic-breadcrumb-group>          \n      </ic-page-header>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render with breadcrumbs\");\n  });\n});\n\ndescribe(\"resizeObserver for ic-page-header\", () => {\n  it(\"should set the deviceSize prop correctly in resizeObserver\", async () => {\n    const page = await newSpecPage({\n      components: [PageHeader, Button],\n      html: `\n    <ic-page-header\n        heading=\"Page header\"\n        sub-heading=\"This is a page header component with additional functionality and this is the text.\"\n        reverse-order\n      >\n        <ic-button slot=\"actions\" variant=\"primary\"\n          >Create coffee\n          <svg\n            slot=\"icon\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </ic-button>\n        <ic-button slot=\"actions\" variant=\"tertiary\">Filter coffee</ic-button>\n      </ic-page-header>\n    `,\n    });\n\n    await page.waitForChanges();\n\n    page.rootInstance.areButtonsReversed = true;\n    await page.waitForChanges();\n\n    mockDeviceSize(DEVICE_SIZES.S);\n\n    await page.rootInstance.resizeObserverCallback();\n    await page.waitForChanges();\n\n    expect(page.rootInstance.deviceSize).toBe(DEVICE_SIZES.S);\n\n    mockDeviceSize(DEVICE_SIZES.M);\n\n    await page.rootInstance.resizeObserverCallback();\n    await page.waitForChanges();\n    expect(page.rootInstance.deviceSize).toBe(DEVICE_SIZES.M);\n\n    mockDeviceSize(DEVICE_SIZES.L);\n\n    await page.rootInstance.resizeObserverCallback();\n    await page.waitForChanges();\n    expect(page.rootInstance.deviceSize).toBe(DEVICE_SIZES.L);\n\n    mockDeviceSize(DEVICE_SIZES.XL);\n\n    await page.rootInstance.resizeObserverCallback();\n    await page.waitForChanges();\n    expect(page.rootInstance.deviceSize).toBe(DEVICE_SIZES.XL);\n  });\n\n  it(\"shouldn't call the resizeObserver if the resizeObserver is null\", async () => {\n    const page = await newSpecPage({\n      components: [PageHeader, Button],\n      html: `\n    <ic-page-header\n        heading=\"Page header\"\n        sub-heading=\"This is a page header component with additional functionality and this is the text.\"\n        reverse-order\n      >\n        <ic-button slot=\"actions\" variant=\"primary\"\n          >Create coffee\n          <svg\n            slot=\"icon\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </ic-button>\n        <ic-button slot=\"actions\" variant=\"tertiary\">Filter coffee</ic-button>\n      </ic-page-header>\n    `,\n    });\n\n    await page.rootInstance.runResizeObserver();\n\n    page.setContent(\"\");\n  });\n});\n"]}