@ukic/web-components 2.24.0 → 2.25.1

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, IcSizesNoLarge } 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   * The size of the page header component.\n   */\n  @Prop() size?: IcSizesNoLarge = \"default\";\n\n  /**\n   * @deprecated This prop should not be used anymore. Set prop `size` to \"small\" instead.\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      size,\n      border,\n      heading,\n      subheading,\n      aligned,\n      sticky,\n      stickyDesktopOnly,\n    } = this;\n\n    const navAriaLabel = heading\n      ? `${heading} page sections`\n      : \"navigation-landmark-page-header\";\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 || size === \"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={{\n                          [\"subheading\"]: true,\n                          [\"small\"]: small || size === \"small\",\n                        }}\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={navAriaLabel}>\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, IcSizesNoLarge } 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   * The size of the page header component.\n   */\n  @Prop() size?: IcSizesNoLarge = \"default\";\n\n  /**\n   * @deprecated This prop should not be used anymore. Set prop `size` to \"small\" instead.\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 breakpoint 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      size,\n      border,\n      heading,\n      subheading,\n      aligned,\n      sticky,\n      stickyDesktopOnly,\n    } = this;\n\n    const navAriaLabel = heading\n      ? `${heading} page sections`\n      : \"navigation-landmark-page-header\";\n\n    return (\n      <Host\n        class={{\n          [\"sticky\"]: sticky,\n          [\"sticky-desktop\"]: !sticky && stickyDesktopOnly,\n        }}\n        aria-label={this.el.ariaLabel || \"page header\"}\n      >\n        <header\n          class={{\n            [\"border-bottom\"]: border,\n            [\"tabs\"]: isSlotUsed(this.el, \"tabs\"),\n          }}\n          role=\"presentation\"\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 || size === \"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={{\n                          [\"subheading\"]: true,\n                          [\"small\"]: small || size === \"small\",\n                        }}\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={navAriaLabel}>\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/test/basic/ic-page-header.spec.js

@@ -197,6 +197,13 @@ describe("ic-page-header component renders additional functionality", () => {
         });
         expect(page.root).toMatchSnapshot("should render with breadcrumbs");
     });
+    it("should render with a custom aria-label", async () => {
+        const page = await newSpecPage({
+            components: [PageHeader],
+            html: `<ic-page-header heading="Page header" subheading="This is a simple page header component and this is the text." aria-label="header"></ic-page-header>`,
+        });
+        expect(page.root).toMatchSnapshot("should render with a custom aria-label");
+    });
 });
 describe("resizeObserver for ic-page-header", () => {
     it("should set the deviceSize prop correctly in resizeObserver", async () => {

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

@@ -1 +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(\"should not 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"]}
+{"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  it(\"should render with a custom aria-label\", 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.\" aria-label=\"header\"></ic-page-header>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render with a custom aria-label\");\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(\"should not 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"]}

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

@@ -216,7 +216,7 @@ describe("ic-radio-group component", () => {
         const input = radioButton1.shadowRoot.querySelector("input");
         expect(input.tabIndex).toBe(0);
     });
-    it("shold works in a form", async () => {
+    it("should work in a form", async () => {
         const page = await newE2EPage();
         await page.setContent(` <form>
           <ic-radio-group label="this is a label" name="1">
@@ -292,7 +292,7 @@ describe("ic-radio-group component", () => {
         value = await (await page.find('input[name="test"]')).getProperty("value");
         expect(value).toBe("test2");
     });
-    it("should pass the value of radio button and textfield correctly when already selected and has a value in texfield", async () => {
+    it("should pass the value of radio button and textfield correctly when already selected and has a value in textfield", async () => {
         const page = await newE2EPage();
         await page.setContent(`<ic-radio-group label="test label" name="test">
     <ic-radio-option value="test1" ></ic-radio-option>    

package/dist/collection/components/ic-radio-group/test/basic/ic-radio-group.e2e.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-radio-group.e2e.js","sourceRoot":"","sources":["../../../../../src/components/ic-radio-group/test/basic/ic-radio-group.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { newE2EPage } from \"@stencil/core/testing\";\n\nbeforeAll(() => {\n  jest.spyOn(console, \"warn\").mockImplementation(jest.fn());\n});\n\ndescribe(\"ic-radio-group component\", () => {\n  it(\"should have tabIndex of first option 0, when no options are selected\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-radio-group label=\"test label\" name=\"test\">\n        <ic-radio-option value=\"test1\" ></ic-radio-option>    \n        <ic-radio-option value=\"test2\" ></ic-radio-option>    \n        </ic-radio-group>\n      `);\n    await page.waitForChanges();\n\n    const radioButton1 = await page.find(\"ic-radio-option[value='test1']\");\n    const input1 = radioButton1.shadowRoot.querySelector(\"input\");\n\n    const radioButton2 = await page.find(\"ic-radio-option[value='test2']\");\n    const input2 = radioButton2.shadowRoot.querySelector(\"input\");\n\n    expect(input1.tabIndex).toBe(0);\n    expect(input2.tabIndex).toBe(-1);\n  });\n  it(\"should not be clickable when disabled\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-radio-group label=\"test label\" name=\"test\">\n        <ic-radio-option value=\"test1\" disabled></ic-radio-option>    \n        <ic-radio-option value=\"test2\" disabled></ic-radio-option>    \n        </ic-radio-group>\n      `);\n\n    const radioButton = await page.find(\"ic-radio-option[value='test2']\");\n    await radioButton.click();\n    await page.waitForChanges();\n    expect(await radioButton.getProperty(\"selected\")).toBe(false);\n  });\n  it(\"should be selected when clicked\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-radio-group label=\"test label\" name=\"test\">\n        <ic-radio-option value=\"test1\" ></ic-radio-option>    \n        <ic-radio-option value=\"test2\" ></ic-radio-option>    \n        </ic-radio-group>\n      `);\n    let radioButton = await page.find(\"ic-radio-option[value='test2']\");\n    await radioButton.click();\n    await page.waitForChanges();\n\n    expect(await radioButton.getProperty(\"selected\")).toBe(true);\n\n    radioButton = await page.find(\"ic-radio-option[value='test2']\");\n    const input = radioButton.shadowRoot.querySelector(\"input\");\n    expect(input.tabIndex).toBe(0);\n  });\n  it(\"should enable textfield when associated option is selected when static\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-radio-group label=\"test label\" name=\"test\">\n        <ic-radio-option value=\"test1\" ></ic-radio-option>    \n        <ic-radio-option value=\"test2\" selected>\n          <ic-text-field\n              slot=\"additional-field\"\n              label=\"Test label\"\n          ></ic-text-field>\n        </ic-radio-option>    \n        </ic-radio-group>\n      `);\n    const radioButton = await page.find(\"ic-radio-option[value='test1']\");\n    const textfield = await page.find(\"ic-text-field\");\n    expect(textfield).not.toHaveAttribute(\"disabled\");\n\n    await radioButton.click();\n    await page.waitForChanges();\n\n    expect(textfield).toHaveAttribute(\"disabled\");\n  });\n  it(\"should display textfield when associated option is selected when dynamic\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-radio-group label=\"test label\" name=\"test\">\n        <ic-radio-option value=\"test1\" ></ic-radio-option>    \n        <ic-radio-option value=\"test2\" additional-field-display=\"dynamic\">\n          <ic-text-field\n              slot=\"additional-field\"\n              label=\"Test label\"\n          ></ic-text-field>\n        </ic-radio-option>    \n        </ic-radio-group>\n      `);\n\n    const radioButton = await page.find(\"ic-radio-option[value='test2']\");\n\n    let additionalFieldDisplay = await page.evaluate(() => {\n      const additionalField = document\n        .querySelector(\"ic-radio-option[value='test2']\")\n        .shadowRoot.querySelector(\".dynamic-container\");\n\n      return window.getComputedStyle(additionalField).display;\n    });\n    expect(additionalFieldDisplay).toBe(\"none\");\n\n    await radioButton.click();\n    await page.waitForChanges();\n\n    additionalFieldDisplay = await page.evaluate(() => {\n      const additionalField = document\n        .querySelector(\"ic-radio-option[value='test2']\")\n        .shadowRoot.querySelector(\".dynamic-container\");\n\n      return window.getComputedStyle(additionalField).display;\n    });\n    expect(additionalFieldDisplay).not.toBe(\"none\");\n  });\n  it(\"should emit icChange event when radio option is selected\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-radio-group label=\"test label\" name=\"test\">\n        <ic-radio-option value=\"test1\" ></ic-radio-option>    \n        <ic-radio-option value=\"test2\" >\n        </ic-radio-option>    \n        </ic-radio-group>\n      `);\n    const radioButton = await page.find(\"ic-radio-option[value='test2']\");\n    const icChange = await page.spyOnEvent(\"icChange\");\n\n    await radioButton.click();\n    await page.waitForChanges();\n\n    const radioElement = await page.evaluate(\n      () =>\n        document.querySelector(\n          \"ic-radio-option[value='test2']\"\n        ) as HTMLIcRadioOptionElement\n    );\n\n    expect(icChange).toHaveReceivedEventDetail({\n      selectedOption: {\n        radio: radioElement,\n      },\n      value: \"test2\",\n    });\n  });\n  it(\"should emit icCheck event when radio option is selected\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-radio-group label=\"test label\" name=\"test\">\n        <ic-radio-option value=\"test1\" ></ic-radio-option>    \n        <ic-radio-option value=\"test2\" ></ic-radio-option>    \n        </ic-radio-group>\n      `);\n    const radioButton = await page.find(\"ic-radio-option[value='test2']\");\n    const icChecked = await page.spyOnEvent(\"icCheck\");\n\n    await radioButton.click();\n    await page.waitForChanges();\n\n    expect(icChecked).toHaveReceivedEventDetail({\n      value: \"test2\",\n    });\n  });\n  it(\"should select when spacebar is pressed\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-radio-group label=\"test label\" name=\"test\">\n        <ic-radio-option value=\"test1\" ></ic-radio-option>    \n        <ic-radio-option value=\"test2\" >\n        </ic-radio-option>    \n        </ic-radio-group>\n      `);\n    const radioButton = await page.find(\"ic-radio-option[value='test1']\");\n    expect(await radioButton.getProperty(\"selected\")).toBe(false);\n\n    await page.keyboard.press(\"Tab\");\n    await radioButton.press(\" \");\n    await page.waitForChanges();\n\n    expect(await radioButton.getProperty(\"selected\")).toBe(true);\n    const input = radioButton.shadowRoot.querySelector(\"input\");\n    expect(input.tabIndex).toBe(0);\n  });\n  it(\"should select next radio option down when arrow down is used\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-radio-group label=\"test label\" name=\"test\">\n        <ic-radio-option value=\"test1\" ></ic-radio-option>    \n        <ic-radio-option value=\"test2\" ></ic-radio-option>    \n        <ic-radio-option value=\"test3\" ></ic-radio-option>    \n        </ic-radio-group>\n      `);\n    const radioButton1 = await page.find(\"ic-radio-option[value='test1']\");\n    const radioButton2 = await page.find(\"ic-radio-option[value='test2']\");\n\n    await page.keyboard.press(\"Tab\");\n    await radioButton1.press(\" \");\n    await page.waitForChanges();\n    await radioButton1.press(\"ArrowDown\");\n    await page.waitForChanges();\n\n    const input = radioButton2.shadowRoot.querySelector(\"input\");\n    expect(input.tabIndex).toBe(0);\n  });\n  it(\"should select next radio option down when arrow right is used\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-radio-group label=\"test label\" name=\"test\">\n        <ic-radio-option value=\"test1\" ></ic-radio-option>    \n        <ic-radio-option value=\"test2\" ></ic-radio-option>    \n        <ic-radio-option value=\"test3\" ></ic-radio-option>    \n        </ic-radio-group>\n      `);\n    const radioButton1 = await page.find(\"ic-radio-option[value='test1']\");\n    const radioButton2 = await page.find(\"ic-radio-option[value='test2']\");\n\n    await page.keyboard.press(\"Tab\");\n    await radioButton1.press(\" \");\n    await page.waitForChanges();\n    await radioButton1.press(\"ArrowRight\");\n    await page.waitForChanges();\n\n    const input = radioButton2.shadowRoot.querySelector(\"input\");\n    expect(input.tabIndex).toBe(0);\n  });\n  it(\"should select next radio option down when arrow up is used\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-radio-group label=\"test label\" name=\"test\">\n        <ic-radio-option value=\"test1\" ></ic-radio-option>    \n        <ic-radio-option value=\"test2\" ></ic-radio-option>    \n        <ic-radio-option value=\"test3\" ></ic-radio-option>    \n        </ic-radio-group>\n      `);\n\n    const radioButton2 = await page.find(\"ic-radio-option[value='test2']\");\n\n    const radioButton1 = await page.find(\"ic-radio-option[value='test1']\");\n\n    await radioButton2.click();\n    await page.waitForChanges();\n    await radioButton2.press(\"ArrowUp\");\n    await page.waitForChanges();\n\n    const input = radioButton1.shadowRoot.querySelector(\"input\");\n    expect(input.tabIndex).toBe(0);\n  });\n  it(\"should select next radio option down when arrow left is used\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-radio-group label=\"test label\" name=\"test\">\n        <ic-radio-option value=\"test1\" ></ic-radio-option>    \n        <ic-radio-option value=\"test2\" ></ic-radio-option>    \n        <ic-radio-option value=\"test3\" ></ic-radio-option>    \n        </ic-radio-group>\n      `);\n\n    const radioButton2 = await page.find(\"ic-radio-option[value='test2']\");\n\n    const radioButton1 = await page.find(\"ic-radio-option[value='test1']\");\n\n    await radioButton2.click();\n    await page.waitForChanges();\n    await radioButton2.press(\"ArrowLeft\");\n    await page.waitForChanges();\n\n    const input = radioButton1.shadowRoot.querySelector(\"input\");\n    expect(input.tabIndex).toBe(0);\n  });\n  it(\"shold works in a form\", async () => {\n    const page = await newE2EPage();\n\n    await page.setContent(` <form>\n          <ic-radio-group label=\"this is a label\" name=\"1\">\n          <ic-radio-option\n              value=\"valueName1\"\n              label=\"Unselected / Default\"\n          ></ic-radio-option>\n          <ic-radio-option\n              value=\"valueName2\"\n              label=\"Selected / Default\"\n              selected\n          ></ic-radio-option>\n          <ic-radio-option\n              value=\"valueName3\"\n              label=\"Unselected / Disabled\"\n              disabled\n          ></ic-radio-option>\n          </ic-radio-group>\n        <input type=\"submit\" value=\"Submit\">\n      </form>\n      <script>document.querySelector('form').addEventListener('submit', (ev) => {\n        ev.preventDefault();\n      })\n      </script>\n      `);\n    await page.waitForChanges();\n\n    const radioButton = await page.find(\"ic-radio-option[value='valueName1']\");\n\n    await radioButton.click();\n    await page.waitForChanges();\n    const value = await (\n      await page.find('input[name=\"1\"]')\n    ).getProperty(\"value\");\n\n    expect(value).toBe(\"valueName1\");\n  });\n  it(\"should pass the value of radio button correctly when already selected\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-radio-group label=\"test label\" name=\"test\">\n        <ic-radio-option value=\"test1\" ></ic-radio-option>    \n        <ic-radio-option value=\"test2\" selected ></ic-radio-option>    \n        </ic-radio-group>\n      `);\n\n    await page.waitForChanges();\n\n    const value = await (\n      await page.find('input[name=\"test\"]')\n    ).getProperty(\"value\");\n\n    expect(value).toBe(\"test2\");\n  });\n\n  it(\"should pass the value of radio button and textfield correctly when already selected\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-radio-group label=\"test label\" name=\"test\">\n    <ic-radio-option value=\"test1\" ></ic-radio-option>    \n    <ic-radio-option value=\"test2\" additional-field-display=\"dynamic\" >\n      <ic-text-field\n          slot=\"additional-field\"\n          label=\"Test label\"\n      ></ic-text-field>\n    </ic-radio-option>    \n    </ic-radio-group>\n  `);\n    const radioButton = await page.find(\"ic-radio-option[value='test2']\");\n\n    await radioButton.click();\n    await page.waitForChanges();\n\n    await page.keyboard.press(\"Tab\");\n    await page.waitForChanges();\n\n    await page.keyboard.press(\"t\");\n    await page.keyboard.press(\"e\");\n    await page.keyboard.press(\"s\");\n    await page.keyboard.press(\"t\");\n\n    await page.waitForChanges();\n\n    let value = await (\n      await page.find('input[name=\"test\"]')\n    ).getProperty(\"value\");\n\n    expect(value).toBe(\"test\");\n\n    await page.keyboard.press(\"Backspace\");\n    await page.keyboard.press(\"Backspace\");\n    await page.keyboard.press(\"Backspace\");\n    await page.keyboard.press(\"Backspace\");\n\n    await page.waitForChanges();\n\n    value = await (await page.find('input[name=\"test\"]')).getProperty(\"value\");\n\n    expect(value).toBe(\"test2\");\n  });\n\n  it(\"should pass the value of radio button and textfield correctly when already selected and has a value in texfield\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-radio-group label=\"test label\" name=\"test\">\n    <ic-radio-option value=\"test1\" ></ic-radio-option>    \n    <ic-radio-option value=\"test2\" additional-field-display=\"dynamic\" >\n      <ic-text-field\n          slot=\"additional-field\"\n          label=\"Test label\"\n          value=\"testValue1\"\n      ></ic-text-field>\n    </ic-radio-option>    \n    </ic-radio-group>\n  `);\n    const radioButton = await page.find(\"ic-radio-option[value='test2']\");\n\n    await radioButton.click();\n    await page.waitForChanges();\n\n    const value = await (\n      await page.find('input[name=\"test\"]')\n    ).getProperty(\"value\");\n\n    expect(value).toBe(\"testValue1\");\n  });\n\n  it(\"should reset to initial state on form reset event\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<form><ic-radio-group label=\"test label\" name=\"test\">\n        <ic-radio-option value=\"test1\" ></ic-radio-option>    \n        <ic-radio-option value=\"test2\" selected></ic-radio-option>    \n        </ic-radio-group>\n        <button type=\"reset\" id=\"resetButton\">Reset</button>\n        </form>\n      `);\n\n    await page.waitForChanges();\n\n    let radioButton1 = await page.find(\"ic-radio-option[value='test1']\");\n    let radioButton2 = await page.find(\"ic-radio-option[value='test2']\");\n\n    expect(await radioButton1.getProperty(\"selected\")).toBe(false);\n    expect(await radioButton2.getProperty(\"selected\")).toBe(true);\n\n    await radioButton1.click();\n    await page.waitForChanges();\n\n    radioButton1 = await page.find(\"ic-radio-option[value='test1']\");\n    radioButton2 = await page.find(\"ic-radio-option[value='test2']\");\n\n    expect(await radioButton1.getProperty(\"selected\")).toBe(true);\n    expect(await radioButton2.getProperty(\"selected\")).toBe(false);\n\n    const resetButton = await page.find(\"#resetButton\");\n    await resetButton.click();\n\n    await page.waitForChanges();\n\n    radioButton1 = await page.find(\"ic-radio-option[value='test1']\");\n    radioButton2 = await page.find(\"ic-radio-option[value='test2']\");\n\n    expect(await radioButton1.getProperty(\"selected\")).toBe(false);\n    expect(await radioButton2.getProperty(\"selected\")).toBe(true);\n  });\n});\n"]}
+{"version":3,"file":"ic-radio-group.e2e.js","sourceRoot":"","sources":["../../../../../src/components/ic-radio-group/test/basic/ic-radio-group.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { newE2EPage } from \"@stencil/core/testing\";\n\nbeforeAll(() => {\n  jest.spyOn(console, \"warn\").mockImplementation(jest.fn());\n});\n\ndescribe(\"ic-radio-group component\", () => {\n  it(\"should have tabIndex of first option 0, when no options are selected\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-radio-group label=\"test label\" name=\"test\">\n        <ic-radio-option value=\"test1\" ></ic-radio-option>    \n        <ic-radio-option value=\"test2\" ></ic-radio-option>    \n        </ic-radio-group>\n      `);\n    await page.waitForChanges();\n\n    const radioButton1 = await page.find(\"ic-radio-option[value='test1']\");\n    const input1 = radioButton1.shadowRoot.querySelector(\"input\");\n\n    const radioButton2 = await page.find(\"ic-radio-option[value='test2']\");\n    const input2 = radioButton2.shadowRoot.querySelector(\"input\");\n\n    expect(input1.tabIndex).toBe(0);\n    expect(input2.tabIndex).toBe(-1);\n  });\n  it(\"should not be clickable when disabled\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-radio-group label=\"test label\" name=\"test\">\n        <ic-radio-option value=\"test1\" disabled></ic-radio-option>    \n        <ic-radio-option value=\"test2\" disabled></ic-radio-option>    \n        </ic-radio-group>\n      `);\n\n    const radioButton = await page.find(\"ic-radio-option[value='test2']\");\n    await radioButton.click();\n    await page.waitForChanges();\n    expect(await radioButton.getProperty(\"selected\")).toBe(false);\n  });\n  it(\"should be selected when clicked\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-radio-group label=\"test label\" name=\"test\">\n        <ic-radio-option value=\"test1\" ></ic-radio-option>    \n        <ic-radio-option value=\"test2\" ></ic-radio-option>    \n        </ic-radio-group>\n      `);\n    let radioButton = await page.find(\"ic-radio-option[value='test2']\");\n    await radioButton.click();\n    await page.waitForChanges();\n\n    expect(await radioButton.getProperty(\"selected\")).toBe(true);\n\n    radioButton = await page.find(\"ic-radio-option[value='test2']\");\n    const input = radioButton.shadowRoot.querySelector(\"input\");\n    expect(input.tabIndex).toBe(0);\n  });\n  it(\"should enable textfield when associated option is selected when static\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-radio-group label=\"test label\" name=\"test\">\n        <ic-radio-option value=\"test1\" ></ic-radio-option>    \n        <ic-radio-option value=\"test2\" selected>\n          <ic-text-field\n              slot=\"additional-field\"\n              label=\"Test label\"\n          ></ic-text-field>\n        </ic-radio-option>    \n        </ic-radio-group>\n      `);\n    const radioButton = await page.find(\"ic-radio-option[value='test1']\");\n    const textfield = await page.find(\"ic-text-field\");\n    expect(textfield).not.toHaveAttribute(\"disabled\");\n\n    await radioButton.click();\n    await page.waitForChanges();\n\n    expect(textfield).toHaveAttribute(\"disabled\");\n  });\n  it(\"should display textfield when associated option is selected when dynamic\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-radio-group label=\"test label\" name=\"test\">\n        <ic-radio-option value=\"test1\" ></ic-radio-option>    \n        <ic-radio-option value=\"test2\" additional-field-display=\"dynamic\">\n          <ic-text-field\n              slot=\"additional-field\"\n              label=\"Test label\"\n          ></ic-text-field>\n        </ic-radio-option>    \n        </ic-radio-group>\n      `);\n\n    const radioButton = await page.find(\"ic-radio-option[value='test2']\");\n\n    let additionalFieldDisplay = await page.evaluate(() => {\n      const additionalField = document\n        .querySelector(\"ic-radio-option[value='test2']\")\n        .shadowRoot.querySelector(\".dynamic-container\");\n\n      return window.getComputedStyle(additionalField).display;\n    });\n    expect(additionalFieldDisplay).toBe(\"none\");\n\n    await radioButton.click();\n    await page.waitForChanges();\n\n    additionalFieldDisplay = await page.evaluate(() => {\n      const additionalField = document\n        .querySelector(\"ic-radio-option[value='test2']\")\n        .shadowRoot.querySelector(\".dynamic-container\");\n\n      return window.getComputedStyle(additionalField).display;\n    });\n    expect(additionalFieldDisplay).not.toBe(\"none\");\n  });\n  it(\"should emit icChange event when radio option is selected\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-radio-group label=\"test label\" name=\"test\">\n        <ic-radio-option value=\"test1\" ></ic-radio-option>    \n        <ic-radio-option value=\"test2\" >\n        </ic-radio-option>    \n        </ic-radio-group>\n      `);\n    const radioButton = await page.find(\"ic-radio-option[value='test2']\");\n    const icChange = await page.spyOnEvent(\"icChange\");\n\n    await radioButton.click();\n    await page.waitForChanges();\n\n    const radioElement = await page.evaluate(\n      () =>\n        document.querySelector(\n          \"ic-radio-option[value='test2']\"\n        ) as HTMLIcRadioOptionElement\n    );\n\n    expect(icChange).toHaveReceivedEventDetail({\n      selectedOption: {\n        radio: radioElement,\n      },\n      value: \"test2\",\n    });\n  });\n  it(\"should emit icCheck event when radio option is selected\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-radio-group label=\"test label\" name=\"test\">\n        <ic-radio-option value=\"test1\" ></ic-radio-option>    \n        <ic-radio-option value=\"test2\" ></ic-radio-option>    \n        </ic-radio-group>\n      `);\n    const radioButton = await page.find(\"ic-radio-option[value='test2']\");\n    const icChecked = await page.spyOnEvent(\"icCheck\");\n\n    await radioButton.click();\n    await page.waitForChanges();\n\n    expect(icChecked).toHaveReceivedEventDetail({\n      value: \"test2\",\n    });\n  });\n  it(\"should select when spacebar is pressed\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-radio-group label=\"test label\" name=\"test\">\n        <ic-radio-option value=\"test1\" ></ic-radio-option>    \n        <ic-radio-option value=\"test2\" >\n        </ic-radio-option>    \n        </ic-radio-group>\n      `);\n    const radioButton = await page.find(\"ic-radio-option[value='test1']\");\n    expect(await radioButton.getProperty(\"selected\")).toBe(false);\n\n    await page.keyboard.press(\"Tab\");\n    await radioButton.press(\" \");\n    await page.waitForChanges();\n\n    expect(await radioButton.getProperty(\"selected\")).toBe(true);\n    const input = radioButton.shadowRoot.querySelector(\"input\");\n    expect(input.tabIndex).toBe(0);\n  });\n  it(\"should select next radio option down when arrow down is used\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-radio-group label=\"test label\" name=\"test\">\n        <ic-radio-option value=\"test1\" ></ic-radio-option>    \n        <ic-radio-option value=\"test2\" ></ic-radio-option>    \n        <ic-radio-option value=\"test3\" ></ic-radio-option>    \n        </ic-radio-group>\n      `);\n    const radioButton1 = await page.find(\"ic-radio-option[value='test1']\");\n    const radioButton2 = await page.find(\"ic-radio-option[value='test2']\");\n\n    await page.keyboard.press(\"Tab\");\n    await radioButton1.press(\" \");\n    await page.waitForChanges();\n    await radioButton1.press(\"ArrowDown\");\n    await page.waitForChanges();\n\n    const input = radioButton2.shadowRoot.querySelector(\"input\");\n    expect(input.tabIndex).toBe(0);\n  });\n  it(\"should select next radio option down when arrow right is used\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-radio-group label=\"test label\" name=\"test\">\n        <ic-radio-option value=\"test1\" ></ic-radio-option>    \n        <ic-radio-option value=\"test2\" ></ic-radio-option>    \n        <ic-radio-option value=\"test3\" ></ic-radio-option>    \n        </ic-radio-group>\n      `);\n    const radioButton1 = await page.find(\"ic-radio-option[value='test1']\");\n    const radioButton2 = await page.find(\"ic-radio-option[value='test2']\");\n\n    await page.keyboard.press(\"Tab\");\n    await radioButton1.press(\" \");\n    await page.waitForChanges();\n    await radioButton1.press(\"ArrowRight\");\n    await page.waitForChanges();\n\n    const input = radioButton2.shadowRoot.querySelector(\"input\");\n    expect(input.tabIndex).toBe(0);\n  });\n  it(\"should select next radio option down when arrow up is used\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-radio-group label=\"test label\" name=\"test\">\n        <ic-radio-option value=\"test1\" ></ic-radio-option>    \n        <ic-radio-option value=\"test2\" ></ic-radio-option>    \n        <ic-radio-option value=\"test3\" ></ic-radio-option>    \n        </ic-radio-group>\n      `);\n\n    const radioButton2 = await page.find(\"ic-radio-option[value='test2']\");\n\n    const radioButton1 = await page.find(\"ic-radio-option[value='test1']\");\n\n    await radioButton2.click();\n    await page.waitForChanges();\n    await radioButton2.press(\"ArrowUp\");\n    await page.waitForChanges();\n\n    const input = radioButton1.shadowRoot.querySelector(\"input\");\n    expect(input.tabIndex).toBe(0);\n  });\n  it(\"should select next radio option down when arrow left is used\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-radio-group label=\"test label\" name=\"test\">\n        <ic-radio-option value=\"test1\" ></ic-radio-option>    \n        <ic-radio-option value=\"test2\" ></ic-radio-option>    \n        <ic-radio-option value=\"test3\" ></ic-radio-option>    \n        </ic-radio-group>\n      `);\n\n    const radioButton2 = await page.find(\"ic-radio-option[value='test2']\");\n\n    const radioButton1 = await page.find(\"ic-radio-option[value='test1']\");\n\n    await radioButton2.click();\n    await page.waitForChanges();\n    await radioButton2.press(\"ArrowLeft\");\n    await page.waitForChanges();\n\n    const input = radioButton1.shadowRoot.querySelector(\"input\");\n    expect(input.tabIndex).toBe(0);\n  });\n  it(\"should work in a form\", async () => {\n    const page = await newE2EPage();\n\n    await page.setContent(` <form>\n          <ic-radio-group label=\"this is a label\" name=\"1\">\n          <ic-radio-option\n              value=\"valueName1\"\n              label=\"Unselected / Default\"\n          ></ic-radio-option>\n          <ic-radio-option\n              value=\"valueName2\"\n              label=\"Selected / Default\"\n              selected\n          ></ic-radio-option>\n          <ic-radio-option\n              value=\"valueName3\"\n              label=\"Unselected / Disabled\"\n              disabled\n          ></ic-radio-option>\n          </ic-radio-group>\n        <input type=\"submit\" value=\"Submit\">\n      </form>\n      <script>document.querySelector('form').addEventListener('submit', (ev) => {\n        ev.preventDefault();\n      })\n      </script>\n      `);\n    await page.waitForChanges();\n\n    const radioButton = await page.find(\"ic-radio-option[value='valueName1']\");\n\n    await radioButton.click();\n    await page.waitForChanges();\n    const value = await (\n      await page.find('input[name=\"1\"]')\n    ).getProperty(\"value\");\n\n    expect(value).toBe(\"valueName1\");\n  });\n  it(\"should pass the value of radio button correctly when already selected\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-radio-group label=\"test label\" name=\"test\">\n        <ic-radio-option value=\"test1\" ></ic-radio-option>    \n        <ic-radio-option value=\"test2\" selected ></ic-radio-option>    \n        </ic-radio-group>\n      `);\n\n    await page.waitForChanges();\n\n    const value = await (\n      await page.find('input[name=\"test\"]')\n    ).getProperty(\"value\");\n\n    expect(value).toBe(\"test2\");\n  });\n\n  it(\"should pass the value of radio button and textfield correctly when already selected\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-radio-group label=\"test label\" name=\"test\">\n    <ic-radio-option value=\"test1\" ></ic-radio-option>    \n    <ic-radio-option value=\"test2\" additional-field-display=\"dynamic\" >\n      <ic-text-field\n          slot=\"additional-field\"\n          label=\"Test label\"\n      ></ic-text-field>\n    </ic-radio-option>    \n    </ic-radio-group>\n  `);\n    const radioButton = await page.find(\"ic-radio-option[value='test2']\");\n\n    await radioButton.click();\n    await page.waitForChanges();\n\n    await page.keyboard.press(\"Tab\");\n    await page.waitForChanges();\n\n    await page.keyboard.press(\"t\");\n    await page.keyboard.press(\"e\");\n    await page.keyboard.press(\"s\");\n    await page.keyboard.press(\"t\");\n\n    await page.waitForChanges();\n\n    let value = await (\n      await page.find('input[name=\"test\"]')\n    ).getProperty(\"value\");\n\n    expect(value).toBe(\"test\");\n\n    await page.keyboard.press(\"Backspace\");\n    await page.keyboard.press(\"Backspace\");\n    await page.keyboard.press(\"Backspace\");\n    await page.keyboard.press(\"Backspace\");\n\n    await page.waitForChanges();\n\n    value = await (await page.find('input[name=\"test\"]')).getProperty(\"value\");\n\n    expect(value).toBe(\"test2\");\n  });\n\n  it(\"should pass the value of radio button and textfield correctly when already selected and has a value in textfield\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-radio-group label=\"test label\" name=\"test\">\n    <ic-radio-option value=\"test1\" ></ic-radio-option>    \n    <ic-radio-option value=\"test2\" additional-field-display=\"dynamic\" >\n      <ic-text-field\n          slot=\"additional-field\"\n          label=\"Test label\"\n          value=\"testValue1\"\n      ></ic-text-field>\n    </ic-radio-option>    \n    </ic-radio-group>\n  `);\n    const radioButton = await page.find(\"ic-radio-option[value='test2']\");\n\n    await radioButton.click();\n    await page.waitForChanges();\n\n    const value = await (\n      await page.find('input[name=\"test\"]')\n    ).getProperty(\"value\");\n\n    expect(value).toBe(\"testValue1\");\n  });\n\n  it(\"should reset to initial state on form reset event\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<form><ic-radio-group label=\"test label\" name=\"test\">\n        <ic-radio-option value=\"test1\" ></ic-radio-option>    \n        <ic-radio-option value=\"test2\" selected></ic-radio-option>    \n        </ic-radio-group>\n        <button type=\"reset\" id=\"resetButton\">Reset</button>\n        </form>\n      `);\n\n    await page.waitForChanges();\n\n    let radioButton1 = await page.find(\"ic-radio-option[value='test1']\");\n    let radioButton2 = await page.find(\"ic-radio-option[value='test2']\");\n\n    expect(await radioButton1.getProperty(\"selected\")).toBe(false);\n    expect(await radioButton2.getProperty(\"selected\")).toBe(true);\n\n    await radioButton1.click();\n    await page.waitForChanges();\n\n    radioButton1 = await page.find(\"ic-radio-option[value='test1']\");\n    radioButton2 = await page.find(\"ic-radio-option[value='test2']\");\n\n    expect(await radioButton1.getProperty(\"selected\")).toBe(true);\n    expect(await radioButton2.getProperty(\"selected\")).toBe(false);\n\n    const resetButton = await page.find(\"#resetButton\");\n    await resetButton.click();\n\n    await page.waitForChanges();\n\n    radioButton1 = await page.find(\"ic-radio-option[value='test1']\");\n    radioButton2 = await page.find(\"ic-radio-option[value='test2']\");\n\n    expect(await radioButton1.getProperty(\"selected\")).toBe(false);\n    expect(await radioButton2.getProperty(\"selected\")).toBe(true);\n  });\n});\n"]}

package/dist/collection/components/ic-search-bar/test/basic/ic-search-bar.spec.js

@@ -15,7 +15,7 @@ const menuOptions = [
     { label: "Flat White", value: "flatwhite" },
     {
         label: "Cappuccino",
-        value: "cappucino",
+        value: "cappuccino",
         description: "with chocolate is best!",
     },
     { label: "Americano", value: "americano" },
@@ -43,7 +43,7 @@ describe("ic-search-bar search", () => {
         });
         expect(page.root).toMatchSnapshot("renders-with-value");
     });
-    it("should render aria-label when hidelLabel is set", async () => {
+    it("should render aria-label when hideLabel is set", async () => {
         const page = await newSpecPage({
             components: [SearchBar, Button, TextField],
             html: '<ic-search-bar label="Test label" hide-label="true"></ic-search-bar>',