@ukic/web-components 2.4.0 → 2.5.0

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

@@ -1 +1 @@
-{"version":3,"file":"ic-stepper.js","sourceRoot":"","sources":["../../../src/components/ic-stepper/ic-stepper.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, h, State } from \"@stencil/core\";\nimport { checkResizeObserver, pxToRem } from \"../../utils/helpers\";\nimport { IcStepperAlignment } from \"./ic-stepper.types\";\nimport { IcStepTypes, IcStepVariants } from \"../ic-step/ic-step.types\";\n\n@Component({\n  tag: \"ic-stepper\",\n  styleUrl: \"ic-stepper.css\",\n  shadow: true,\n})\nexport class Stepper {\n  private resizeObserver: ResizeObserver = null;\n  private steps: HTMLIcStepElement[];\n  private stepsWithStepTitles: HTMLIcStepElement[];\n\n  @Element() el: HTMLIcStepperElement;\n\n  @State() alignedFullWidth: boolean = true;\n  @State() autoSetStepTitles: boolean = true;\n  @State() lastStepWidth: number = 0;\n  @State() noOfResizes?: number = 0;\n  @State() stepperWidth: number = document\n    .querySelector(\"ic-stepper\")\n    .getBoundingClientRect().width;\n  @State() stepTypes: IcStepTypes[] = [];\n  @State() variantOverride?: boolean = this.variant !== \"compact\";\n\n  /**\n   * The alignment of the default stepper within its container.\n   */\n  @Prop() aligned?: IcStepperAlignment = \"full-width\";\n\n  /**\n   * The length of the connnector between each step in pixels. Minimum length is 100px.\n   */\n  @Prop() connectorWidth?: number = 100;\n\n  /**\n   * If `true`, the information about each step, i.e. step title, step subtitle and step status, will be hidden on all default steps. The information about each step will still be visible in the compact variant of the stepper.\n   */\n  @Prop() hideStepInfo?: boolean = false;\n\n  /**\n   * The variant of the stepper.\n   */\n  @Prop({ mutable: true }) variant?: IcStepVariants = \"default\";\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  componentWillLoad(): void {\n    this.setStepTypes();\n    if (this.variant === \"compact\") {\n      this.variantOverride = false;\n    }\n  }\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\n  }\n\n  // Get all steps currently within this stepper\n  private getChildren = (): void => {\n    this.steps = Array.from(this.el.querySelectorAll(\"ic-step\"));\n\n    this.stepsWithStepTitles = Array.from(\n      this.el.querySelectorAll(\"ic-step[step-title]\")\n    );\n  };\n\n  // Inform the user that stepTitles are required on all steps in a compact stepper\n  private checkStepTitles = (): void => {\n    if (\n      this.stepsWithStepTitles.length < this.steps.length &&\n      this.variantOverride &&\n      this.variant === \"compact\"\n    ) {\n      this.noOfResizes = this.noOfResizes + 1;\n      if (this.noOfResizes === 1) {\n        console.error(\n          `The prop 'step-title' (web components) / 'stepTitle' (react) is required for all steps of the Stepper component (compact variant)`\n        );\n      }\n    }\n  };\n\n  private setStepTypes = (): void => {\n    this.getChildren();\n    this.stepTypes = [];\n    for (let i = 0; i < this.steps.length; i++) {\n      this.stepTypes.push(\"active\");\n    }\n  };\n\n  private setStepperWidth = (): void => {\n    this.alignedFullWidth =\n      this.variant === \"default\" && this.aligned === \"full-width\";\n\n    const lastStep = this.steps[this.steps.length - 1];\n    lastStep.style.maxWidth = \"none\";\n\n    if (this.alignedFullWidth) {\n      this.stepperWidth = this.el.offsetWidth;\n      lastStep.style.maxWidth = pxToRem(\n        `${this.stepperWidth / this.steps.length}px`\n      );\n      this.lastStepWidth = lastStep.offsetWidth;\n    }\n  };\n\n  private initialiseStepStates = (): void => {\n    this.steps.forEach((step, index) => {\n      // Set variant\n      step.variant = this.variant;\n      // Assign stepNum to each step\n      step.stepNum = index + 1;\n      // Assign lastStep to final step\n      step.lastStep = index === this.steps.length - 1;\n      step.lastStepNum = this.steps.length;\n\n      if (step.stepType !== \"current\") {\n        step.current = false;\n        this.stepTypes[index] = step.stepType;\n      } else {\n        step.current = true;\n      }\n\n      const stepTitleArea =\n        step.shadowRoot &&\n        step.shadowRoot.querySelector(\".step > .step-title-area\");\n\n      if (this.stepsWithStepTitles.length == 0 && this.variantOverride) {\n        if (this.variant === \"compact\") {\n          this.autoSetStepTitles = true;\n          if (this.autoSetStepTitles) {\n            step.stepTitle = \"Step \" + step.stepNum;\n            stepTitleArea &&\n              stepTitleArea\n                .querySelector(\".step-title\")\n                .setAttribute(\"aria-hidden\", \"true\");\n          }\n        }\n        if (this.variant === \"default\") {\n          this.autoSetStepTitles = false;\n          if (!this.autoSetStepTitles) {\n            step.stepTitle = undefined;\n            stepTitleArea &&\n              stepTitleArea\n                .querySelector(\".step-title\")\n                .removeAttribute(\"aria-hidden\");\n          }\n        }\n      }\n\n      if (this.variant === \"compact\") {\n        if (step.current === true || step.stepType === \"current\") {\n          step.classList.remove(\"hide\");\n          step.classList.add(\"show\");\n        } else if (step.classList.contains(\"show\")) {\n          step.classList.remove(\"show\");\n          step.classList.add(\"hide\");\n        }\n\n        if (!step.lastStep) {\n          step.nextStepTitle = this.steps[index + 1].stepTitle;\n          step.progress = (step.stepNum / this.steps.length) * 100;\n        } else if (step.lastStep && this.stepTypes[index] !== \"completed\") {\n          step.progress = 95;\n        } else {\n          step.progress = 100;\n        }\n\n        if (this.hideStepInfo && stepTitleArea !== null) {\n          stepTitleArea.classList.remove(\"visually-hidden\");\n        }\n\n        step.compactStepStyling = this.stepTypes[index];\n      }\n\n      if (this.variant === \"default\") {\n        if (!step.lastStep) {\n          if (this.alignedFullWidth) {\n            step.style.width = pxToRem(\n              `${\n                (this.stepperWidth - this.lastStepWidth) /\n                (this.steps.length - 1)\n              }px`\n            );\n            step.style.minWidth = pxToRem(\"148px\");\n          }\n        } else if (step.lastStep) {\n          step.classList.add(\"last-step\");\n          if (this.alignedFullWidth) {\n            step.style.maxWidth = `${this.lastStepWidth}px`;\n          } else {\n            step.style.maxWidth =\n              this.connectorWidth > 100\n                ? pxToRem(`${this.connectorWidth + 48}px`)\n                : pxToRem(\"148px\");\n          }\n        }\n\n        if (this.aligned === \"left\") {\n          step.style.width =\n            this.connectorWidth > 100\n              ? pxToRem(`${this.connectorWidth + 48}px`)\n              : pxToRem(\"148px\");\n          const stepConnect = step.shadowRoot.querySelector(\n            \".step > .step-top > .step-connect\"\n          ) as HTMLElement;\n\n          if (stepConnect) {\n            stepConnect.style.width =\n              this.connectorWidth > 100\n                ? pxToRem(`${this.connectorWidth}px`)\n                : pxToRem(\"100px\");\n          }\n        }\n\n        if (this.hideStepInfo && stepTitleArea !== null) {\n          stepTitleArea.classList.add(\"visually-hidden\");\n        }\n      }\n    });\n  };\n\n  private overrideVariant = () => {\n    let minDefaultStepperWidth = 148 * this.steps.length;\n\n    if (this.aligned === \"left\" && this.connectorWidth > 100) {\n      minDefaultStepperWidth = (this.connectorWidth + 48) * this.steps.length;\n    }\n\n    if (this.variantOverride) {\n      if (this.el.clientWidth < minDefaultStepperWidth) {\n        this.variant = \"compact\";\n        this.getChildren();\n      } else {\n        this.variant = \"default\";\n        this.getChildren();\n      }\n    }\n  };\n\n  private resizeObserverCallback = () => {\n    this.getChildren();\n    this.checkStepTitles();\n    this.overrideVariant();\n    this.setStepperWidth();\n    this.initialiseStepStates();\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.resizeObserverCallback();\n    });\n    this.resizeObserver.observe(this.el);\n  };\n\n  render() {\n    return (\n      <Host\n        class={{\n          [`${this.variant}`]: true,\n          [\"aligned-left\"]:\n            this.variant === \"default\" && this.aligned === \"left\",\n        }}\n      >\n        <ul class=\"step-item-list\">\n          <slot></slot>\n        </ul>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-stepper.js","sourceRoot":"","sources":["../../../src/components/ic-stepper/ic-stepper.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, h, State } from \"@stencil/core\";\nimport { checkResizeObserver, pxToRem } from \"../../utils/helpers\";\nimport { IcStepperAlignment } from \"./ic-stepper.types\";\nimport { IcStepTypes, IcStepVariants } from \"../ic-step/ic-step.types\";\n\n@Component({\n  tag: \"ic-stepper\",\n  styleUrl: \"ic-stepper.css\",\n  shadow: true,\n})\nexport class Stepper {\n  private resizeObserver: ResizeObserver = null;\n  private steps: HTMLIcStepElement[];\n  private stepsWithStepTitles: HTMLIcStepElement[];\n\n  @Element() el: HTMLIcStepperElement;\n\n  @State() alignedFullWidth: boolean = true;\n  @State() autoSetStepTitles: boolean = true;\n  @State() lastStepWidth: number = 0;\n  @State() noOfResizes?: number = 0;\n  @State() stepperWidth: number = document\n    .querySelector(\"ic-stepper\")\n    .getBoundingClientRect().width;\n  @State() stepTypes: IcStepTypes[] = [];\n  @State() variantOverride?: boolean = this.variant !== \"compact\";\n\n  /**\n   * The alignment of the default stepper within its container.\n   */\n  @Prop() aligned?: IcStepperAlignment = \"full-width\";\n\n  /**\n   * The length of the connnector between each step in pixels. Minimum length is 100px.\n   */\n  @Prop() connectorWidth?: number = 100;\n\n  /**\n   * If `true`, the information about each step, i.e. step title, step subtitle and step status, will be hidden on all default steps. The information about each step will still be visible in the compact variant of the stepper.\n   */\n  @Prop() hideStepInfo?: boolean = false;\n\n  /**\n   * The variant of the stepper.\n   */\n  @Prop({ mutable: true }) variant?: IcStepVariants = \"default\";\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  componentWillLoad(): void {\n    this.setStepTypes();\n    if (this.variant === \"compact\") {\n      this.variantOverride = false;\n    }\n  }\n\n  componentWillRender(): void {\n    this.initialiseStepStates();\n  }\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\n  }\n\n  // Get all steps currently within this stepper\n  private getChildren = (): void => {\n    this.steps = Array.from(this.el.querySelectorAll(\"ic-step\"));\n\n    this.stepsWithStepTitles = Array.from(\n      this.el.querySelectorAll(\"ic-step[step-title]\")\n    );\n  };\n\n  // Inform the user that stepTitles are required on all steps in a compact stepper\n  private checkStepTitles = (): void => {\n    if (\n      this.stepsWithStepTitles.length < this.steps.length &&\n      this.variantOverride &&\n      this.variant === \"compact\"\n    ) {\n      this.noOfResizes = this.noOfResizes + 1;\n      if (this.noOfResizes === 1) {\n        console.error(\n          `The prop 'step-title' (web components) / 'stepTitle' (react) is required for all steps of the Stepper component (compact variant)`\n        );\n      }\n    }\n  };\n\n  private setStepTypes = (): void => {\n    this.getChildren();\n    this.stepTypes = [];\n    for (let i = 0; i < this.steps.length; i++) {\n      this.stepTypes.push(\"active\");\n    }\n  };\n\n  private setStepperWidth = (): void => {\n    this.alignedFullWidth =\n      this.variant === \"default\" && this.aligned === \"full-width\";\n\n    const lastStep = this.steps[this.steps.length - 1];\n    lastStep.style.maxWidth = \"none\";\n\n    if (this.alignedFullWidth) {\n      this.stepperWidth = this.el.offsetWidth;\n      lastStep.style.maxWidth = pxToRem(\n        `${this.stepperWidth / this.steps.length}px`\n      );\n      this.lastStepWidth = lastStep.offsetWidth;\n    }\n  };\n\n  private initialiseStepStates = (): void => {\n    this.steps.forEach((step, index) => {\n      // Set variant\n      step.variant = this.variant;\n      // Assign stepNum to each step\n      step.stepNum = index + 1;\n      // Assign lastStep to final step\n      step.lastStep = index === this.steps.length - 1;\n      step.lastStepNum = this.steps.length;\n\n      if (step.stepType !== \"current\") {\n        step.current = false;\n        this.stepTypes[index] = step.stepType;\n      } else {\n        step.current = true;\n      }\n\n      const stepTitleArea =\n        step.shadowRoot &&\n        step.shadowRoot.querySelector(\".step > .step-title-area\");\n\n      if (this.stepsWithStepTitles.length == 0 && this.variantOverride) {\n        if (this.variant === \"compact\") {\n          this.autoSetStepTitles = true;\n          if (this.autoSetStepTitles) {\n            step.stepTitle = \"Step \" + step.stepNum;\n            stepTitleArea &&\n              stepTitleArea\n                .querySelector(\".step-title\")\n                .setAttribute(\"aria-hidden\", \"true\");\n          }\n        }\n        if (this.variant === \"default\") {\n          this.autoSetStepTitles = false;\n          if (!this.autoSetStepTitles) {\n            step.stepTitle = undefined;\n            stepTitleArea &&\n              stepTitleArea\n                .querySelector(\".step-title\")\n                .removeAttribute(\"aria-hidden\");\n          }\n        }\n      }\n\n      if (this.variant === \"compact\") {\n        if (step.current === true || step.stepType === \"current\") {\n          step.classList.remove(\"hide\");\n          step.classList.add(\"show\");\n        } else if (step.classList.contains(\"show\")) {\n          step.classList.remove(\"show\");\n          step.classList.add(\"hide\");\n        }\n\n        if (!step.lastStep) {\n          step.nextStepTitle = this.steps[index + 1].stepTitle;\n          step.progress = (step.stepNum / this.steps.length) * 100;\n        } else if (step.lastStep && this.stepTypes[index] !== \"completed\") {\n          step.progress = 95;\n        } else {\n          step.progress = 100;\n        }\n\n        if (this.hideStepInfo && stepTitleArea !== null) {\n          stepTitleArea.classList.remove(\"visually-hidden\");\n        }\n\n        step.compactStepStyling = this.stepTypes[index];\n      }\n\n      if (this.variant === \"default\") {\n        if (!step.lastStep) {\n          if (this.alignedFullWidth) {\n            step.style.width = pxToRem(\n              `${\n                (this.stepperWidth - this.lastStepWidth) /\n                (this.steps.length - 1)\n              }px`\n            );\n            step.style.minWidth = pxToRem(\"148px\");\n          }\n        } else if (step.lastStep) {\n          step.classList.add(\"last-step\");\n          if (this.alignedFullWidth) {\n            step.style.maxWidth = `${this.lastStepWidth}px`;\n          } else {\n            step.style.maxWidth =\n              this.connectorWidth > 100\n                ? pxToRem(`${this.connectorWidth + 48}px`)\n                : pxToRem(\"148px\");\n          }\n        }\n\n        if (this.aligned === \"left\") {\n          step.style.width =\n            this.connectorWidth > 100\n              ? pxToRem(`${this.connectorWidth + 48}px`)\n              : pxToRem(\"148px\");\n          const stepConnect = step.shadowRoot.querySelector(\n            \".step > .step-top > .step-connect\"\n          ) as HTMLElement;\n\n          if (stepConnect) {\n            stepConnect.style.width =\n              this.connectorWidth > 100\n                ? pxToRem(`${this.connectorWidth}px`)\n                : pxToRem(\"100px\");\n          }\n        }\n\n        if (this.hideStepInfo && stepTitleArea !== null) {\n          stepTitleArea.classList.add(\"visually-hidden\");\n        }\n      }\n    });\n  };\n\n  private overrideVariant = () => {\n    let minDefaultStepperWidth = 148 * this.steps.length;\n\n    if (this.aligned === \"left\" && this.connectorWidth > 100) {\n      minDefaultStepperWidth = (this.connectorWidth + 48) * this.steps.length;\n    }\n\n    if (this.variantOverride) {\n      if (this.el.clientWidth < minDefaultStepperWidth) {\n        this.variant = \"compact\";\n        this.getChildren();\n      } else {\n        this.variant = \"default\";\n        this.getChildren();\n      }\n    }\n  };\n\n  private resizeObserverCallback = () => {\n    this.getChildren();\n    this.checkStepTitles();\n    this.overrideVariant();\n    this.setStepperWidth();\n    this.initialiseStepStates();\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.resizeObserverCallback();\n    });\n    this.resizeObserver.observe(this.el);\n  };\n\n  render() {\n    return (\n      <Host\n        class={{\n          [`${this.variant}`]: true,\n          [\"aligned-left\"]:\n            this.variant === \"default\" && this.aligned === \"left\",\n        }}\n      >\n        <ul class=\"step-item-list\">\n          <slot></slot>\n        </ul>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -23,13 +23,15 @@ describe("default variant of ic-stepper component", () => {
   });
   it("should render a left-aligned stepper", async () => {
     const page = await newSpecPage({
-      components: [Stepper],
+      components: [Stepper, Step],
       html: `<ic-stepper aligned="left">
       <ic-step step-title="Create" step-type="completed"></ic-step>
       <ic-step step-title="Read" step-type="current"></ic-step>
       <ic-step step-title="Update"></ic-step>
       <ic-step step-title="Delete"></ic-step></ic-stepper>`,
     });
+    page.rootInstance.resizeObserverCallback();
+    await page.waitForChanges();
     expect(page.rootInstance.variant).toMatch("default");
     expect(page.rootInstance.aligned).toMatch("left");
     expect(page.root.classList.contains("aligned-left")).toBeTruthy();

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

@@ -1 +1 @@
-{"version":3,"file":"ic-stepper.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-stepper/test/basic/ic-stepper.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { resizeTo } from \"../../../../testspec.setup\";\nimport { Step } from \"../../../ic-step/ic-step\";\nimport { Stepper } from \"../../ic-stepper\";\n\ndescribe(\"default variant of ic-stepper component\", () => {\n  it(\"should render a full-width stepper\", async () => {\n    const page = await newSpecPage({\n      components: [Stepper, Step],\n      html: `<ic-stepper>\n      <ic-step step-title=\"Create\" step-type=\"completed\"></ic-step>\n      <ic-step step-title=\"Read\" step-type=\"current\"></ic-step>\n      <ic-step step-title=\"Update\"></ic-step>\n      <ic-step step-title=\"Delete\"></ic-step></ic-stepper>`,\n    });\n    page.rootInstance.resizeObserverCallback();\n\n    await page.waitForChanges();\n\n    expect(page.rootInstance.variant).toMatch(\"default\");\n\n    const steps = page.root.querySelectorAll(\"ic-step\");\n\n    steps.forEach((step) => {\n      expect(step.classList.contains(\"aligned-full-width\")).toBeTruthy();\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render a left-aligned stepper\", async () => {\n    const page = await newSpecPage({\n      components: [Stepper],\n      html: `<ic-stepper aligned=\"left\">\n      <ic-step step-title=\"Create\" step-type=\"completed\"></ic-step>\n      <ic-step step-title=\"Read\" step-type=\"current\"></ic-step>\n      <ic-step step-title=\"Update\"></ic-step>\n      <ic-step step-title=\"Delete\"></ic-step></ic-stepper>`,\n    });\n\n    expect(page.rootInstance.variant).toMatch(\"default\");\n    expect(page.rootInstance.aligned).toMatch(\"left\");\n    expect(page.root.classList.contains(\"aligned-left\")).toBeTruthy();\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render a stepper with hidden step info\", async () => {\n    const page = await newSpecPage({\n      components: [Stepper, Step],\n      html: `<ic-stepper hide-step-info>\n      <ic-step step-title=\"Create\" step-type=\"completed\"></ic-step>\n      <ic-step step-title=\"Read\" step-type=\"current\"></ic-step>\n      <ic-step step-title=\"Update\"></ic-step>\n      <ic-step step-title=\"Delete\"></ic-step></ic-stepper>`,\n    });\n\n    page.rootInstance.resizeObserverCallback();\n\n    await page.waitForChanges();\n\n    expect(page.rootInstance.variant).toMatch(\"default\");\n\n    expect(page.rootInstance.hideStepInfo).toBeTruthy();\n\n    const steps = page.root.querySelectorAll(\"ic-step\");\n\n    steps.forEach((step) => {\n      const stepTitleArea = step.shadowRoot.querySelector(\n        \".step > .step-title-area\"\n      );\n\n      expect(stepTitleArea.classList.contains(\"visually-hidden\")).toBeTruthy();\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render a stepper without step titles\", async () => {\n    jest.spyOn(console, \"error\").mockImplementation(jest.fn());\n    const page = await newSpecPage({\n      components: [Stepper, Step],\n      html: `<ic-stepper>\n      <ic-step step-type=\"completed\"></ic-step>\n      <ic-step step-type=\"current\"></ic-step>\n      <ic-step step-type=\"disabled\"></ic-step>\n      <ic-step step-type=\"active\"></ic-step></ic-stepper>`,\n    });\n\n    page.rootInstance.resizeObserverCallback();\n\n    await page.waitForChanges();\n\n    expect(page.root).toMatchSnapshot();\n\n    expect(page.rootInstance.hideStepInfo).toBeFalsy();\n\n    const steps = page.root.querySelectorAll(\"ic-step\");\n\n    expect(page.rootInstance[\"variantOverride\"]).toBeTruthy();\n\n    expect(page.rootInstance[\"stepsWithStepTitles\"].length).toBeLessThan(\n      page.rootInstance[\"steps\"].length\n    );\n\n    expect(page.rootInstance.variant).toMatch(\"default\");\n\n    expect(page.rootInstance[\"noOfResizes\"]).toBe(0);\n\n    steps.forEach((step) => {\n      expect(step[\"stepTitle\"]).toBeUndefined();\n      expect(step[\"stepSubtitle\"]).toBeUndefined();\n\n      const stepTitleArea = step.shadowRoot.querySelector(\n        \".step > .step-title-area\"\n      );\n      expect(stepTitleArea).toBeNull();\n    });\n\n    page.rootInstance.resizeObserverCallback();\n\n    await page.waitForChanges();\n\n    expect(page.rootInstance[\"noOfResizes\"]).toBe(0);\n  });\n\n  it(\"should render a stepper with a custom connector width\", async () => {\n    const page = await newSpecPage({\n      components: [Stepper, Step],\n      html: `<ic-stepper aligned=\"left\" connector-width=\"150\">\n      <ic-step step-title=\"Create\" step-type=\"completed\"></ic-step>\n      <ic-step step-title=\"Read\" step-type=\"current\"></ic-step>\n      <ic-step step-title=\"Update\"></ic-step>\n      <ic-step step-title=\"Delete\"></ic-step></ic-stepper>`,\n    });\n\n    page.rootInstance.resizeObserverCallback();\n\n    await page.waitForChanges();\n\n    expect(page.root).toMatchSnapshot();\n\n    expect(page.root.classList.contains(\"aligned-left\")).toBeTruthy();\n  });\n\n  it(\"should ignore the connectorWidth prop if the stepper is set to be aligned full-width\", async () => {\n    const page = await newSpecPage({\n      components: [Stepper, Step],\n      html: `<ic-stepper connector-width=\"150\">\n      <ic-step step-title=\"Create\" step-type=\"completed\"></ic-step>\n      <ic-step step-title=\"Read\" step-type=\"current\"></ic-step>\n      <ic-step step-title=\"Update\"></ic-step>\n      <ic-step step-title=\"Delete\"></ic-step></ic-stepper>`,\n    });\n\n    page.rootInstance.resizeObserverCallback();\n\n    await page.waitForChanges();\n\n    expect(page.root).toMatchSnapshot();\n\n    expect(page.root.classList.contains(\"aligned-left\")).toBeFalsy();\n  });\n\n  it(\"should add 'disabled step' to the aria labels of all disabled steps\", async () => {\n    const page = await newSpecPage({\n      components: [Stepper, Step],\n      html: `<ic-stepper variant=\"compact\" id=\"custom-stepper\">\n        <ic-step variant=\"compact\" step-type=\"disabled\" step-title=\"First\"></ic-step>\n        <ic-step\n          variant=\"compact\"\n          step-title=\"Second With a Very Long Title\"\n          step-subtitle=\"Optional subtitle that is long and should wrap\"\n          current\n          step-type=\"current\"\n        ></ic-step>\n        <ic-step\n          variant=\"compact\"\n          step-title=\"Third\"\n          step-type=\"disabled\"\n        ></ic-step>\n        <ic-step\n          variant=\"compact\"\n          step-title=\"Fourth title that is long and should wrap\"\n          step-subtitle=\"Optional Subtitle\"\n          step-type=\"completed\"\n        ></ic-step>\n        <ic-step\n          variant=\"compact\"\n          step-title=\"Fifth and final step\"\n          step-subtitle=\"Optional Subtitle\"\n          step-status=\"optional\"\n        ></ic-step>\n      </ic-stepper>`,\n    });\n\n    page.rootInstance.resizeObserverCallback();\n\n    await page.waitForChanges();\n\n    const disabledSteps = page.root.querySelectorAll(\n      'ic-step[step-type=\"disabled\"]'\n    );\n\n    disabledSteps.forEach((step) => {\n      expect(step.getAttribute(\"aria-label\")).toMatch(/. Non-required step/i);\n    });\n  });\n\n  it(\"should add the className 'last-step' to the last step in the stepper\", async () => {\n    const page = await newSpecPage({\n      components: [Stepper, Step],\n      html: `\n    <ic-stepper>\n      <ic-step step-title=\"Create\" step-type=\"completed\"></ic-step>\n      <ic-step step-title=\"Read\" step-type=\"current\"></ic-step>\n      <ic-step step-title=\"Update\"></ic-step>\n      <ic-step last-step step-title=\"Delete\"></ic-step>\n    </ic-stepper>\n    `,\n    });\n\n    page.rootInstance.resizeObserverCallback();\n\n    await page.waitForChanges();\n\n    expect(page.root).toMatchSnapshot();\n\n    const lastStep = await page.root.querySelector(\"ic-step[last-step='']\");\n\n    expect(lastStep.classList.contains(\"last-step\")).toBeTruthy();\n  });\n});\n\ndescribe(\"resizeObserver for ic-stepper\", () => {\n  it(\"shouldn't call the resizeObserver if the resizeObserver is null\", async () => {\n    const page = await newSpecPage({\n      components: [Stepper],\n      html: `\n    <ic-stepper>\n      <ic-step step-title=\"Create\" step-type=\"completed\"></ic-step>\n      <ic-step step-title=\"Read\" step-type=\"current\"></ic-step>\n      <ic-step step-title=\"Update\"></ic-step>\n      <ic-step step-title=\"Delete\"></ic-step>\n    </ic-stepper>\n    `,\n    });\n\n    await page.rootInstance.runResizeObserver();\n\n    page.setContent(\"\");\n  });\n\n  it(\"should call the functions in the resizeObserver\", async () => {\n    const page = await newSpecPage({\n      components: [Stepper],\n      html: `\n    <ic-stepper>\n      <ic-step step-title=\"Create\" step-type=\"completed\"></ic-step>\n      <ic-step step-title=\"Read\" step-type=\"current\"></ic-step>\n      <ic-step step-title=\"Update\"></ic-step>\n      <ic-step step-title=\"Delete\"></ic-step>\n    </ic-stepper>\n    `,\n    });\n\n    await page.waitForChanges();\n\n    await page.rootInstance.runResizeObserver();\n\n    await page.rootInstance.getChildren();\n\n    await page.rootInstance.checkStepTitles();\n\n    await page.rootInstance.overrideVariant();\n\n    await page.rootInstance.setStepperWidth();\n\n    await page.rootInstance.initialiseStepStates();\n  });\n});\n\ndescribe(\"compact variant of ic-stepper component\", () => {\n  it(\"should render a compact step with no step status\", async () => {\n    const page = await newSpecPage({\n      components: [Stepper, Step],\n      html: `<ic-stepper variant=\"compact\" id=\"custom-stepper\">\n        <ic-step step-title=\"First\"></ic-step>\n        <ic-step\n          step-title=\"Second With a Very Long Title\"\n          step-subtitle=\"Optional subtitle that is long and should wrap\"\n          current\n          step-type=\"current\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Third\"\n          step-type=\"disabled\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Fourth title that is long and should wrap\"\n          step-subtitle=\"Optional Subtitle\"\n          step-type=\"completed\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Fifth and final step\"\n          step-subtitle=\"Optional Subtitle\"\n          step-status=\"optional\"\n          step-type=\"completed\"\n        ></ic-step>\n      </ic-stepper>`,\n    });\n\n    page.rootInstance.resizeObserverCallback();\n\n    await page.waitForChanges();\n\n    expect(page.root).toMatchSnapshot();\n\n    expect(page.rootInstance[\"variantOverride\"]).toBeFalsy();\n\n    expect(page.rootInstance.hideStepInfo).toBeFalsy();\n\n    const steps = page.root.querySelectorAll(\"ic-step\");\n\n    steps.forEach((step) => {\n      const stepTitle = step.shadowRoot.querySelector(\n        \".step > .step-title-area > .step-title\"\n      );\n\n      expect(stepTitle).not.toBeNull();\n      expect(stepTitle.classList.contains(\"hide\")).toBeFalsy();\n    });\n  });\n\n  it(\"should render a stepper with hidden step information\", async () => {\n    const page = await newSpecPage({\n      components: [Stepper, Step],\n      html: `<ic-stepper hide-step-info>\n      <ic-step step-title=\"Create\" step-type=\"completed\"></ic-step>\n      <ic-step step-title=\"Read\" step-type=\"current\"></ic-step>\n      <ic-step step-title=\"Update\"></ic-step>\n      <ic-step step-title=\"Delete\"></ic-step></ic-stepper>`,\n    });\n\n    page.rootInstance.el.clientWidth = 50;\n\n    page.rootInstance.resizeObserverCallback();\n\n    await page.waitForChanges();\n\n    expect(page.rootInstance.variant).toMatch(\"compact\");\n\n    expect(page.rootInstance.hideStepInfo).toBeTruthy();\n\n    const steps = page.root.querySelectorAll(\"ic-step\");\n\n    steps.forEach((step) => {\n      const stepTitle = step.shadowRoot.querySelector(\n        \".step > .step-title-area > .step-title\"\n      );\n\n      expect(stepTitle).not.toBeNull();\n      expect(stepTitle.classList.contains(\"visually-hidden\")).toBeFalsy();\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render a stepper without step titles\", async () => {\n    const page = await newSpecPage({\n      components: [Stepper, Step],\n      html: `<ic-stepper >\n      <ic-step step-type=\"completed\"></ic-step>\n      <ic-step step-type=\"current\"></ic-step>\n      <ic-step step-type=\"disabled\"></ic-step>\n      <ic-step step-type=\"active\" ></ic-step></ic-stepper>`,\n    });\n\n    page.rootInstance.el.clientWidth = 50;\n\n    page.rootInstance.resizeObserverCallback();\n\n    await page.waitForChanges();\n\n    expect(page.root).toMatchSnapshot();\n\n    const steps = page.root.querySelectorAll(\"ic-step\");\n\n    expect(page.rootInstance[\"variantOverride\"]).toBeTruthy();\n\n    expect(page.rootInstance[\"stepsWithStepTitles\"].length).toBeLessThan(\n      page.rootInstance[\"steps\"].length\n    );\n\n    expect(page.rootInstance.variant).toMatch(\"compact\");\n\n    expect(page.rootInstance[\"noOfResizes\"]).toBe(0);\n\n    steps.forEach((step) => {\n      const stepTitle = \"Step \" + step[\"stepNum\"];\n      expect(step[\"stepTitle\"]).toMatch(stepTitle);\n      expect(step[\"stepSubtitle\"]).toBeUndefined();\n    });\n\n    page.rootInstance.resizeObserverCallback();\n\n    await page.waitForChanges();\n\n    expect(page.rootInstance[\"noOfResizes\"]).toBe(1);\n  });\n\n  it(\"should only show the current step\", async () => {\n    const page = await newSpecPage({\n      components: [Stepper, Step],\n      html: `<ic-stepper variant=\"compact\" id=\"custom-stepper\">\n        <ic-step step-title=\"First\"></ic-step>\n        <ic-step\n          step-title=\"Second With a Very Long Title\"\n          step-subtitle=\"Optional subtitle that is long and should wrap\"\n          current\n          step-type=\"current\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Third\"\n          step-type=\"disabled\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Fourth title that is long and should wrap\"\n          step-subtitle=\"Optional Subtitle\"\n          step-type=\"completed\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Fifth and final step\"\n          step-subtitle=\"Optional Subtitle\"\n          step-status=\"optional\"\n          step-type=\"completed\"\n        ></ic-step>\n      </ic-stepper>`,\n    });\n\n    page.rootInstance.resizeObserverCallback();\n\n    await page.waitForChanges();\n\n    expect(page.rootInstance.variant).toMatch(\"compact\");\n\n    const currentStep = page.root.querySelector('ic-step[current=\"\"]');\n\n    expect(\n      currentStep.shadowRoot\n        .querySelector(\".step\")\n        .classList.contains(\"current\")\n    );\n\n    expect(currentStep.classList.contains(\"show\")).toBeTruthy;\n\n    expect(currentStep.classList.contains(\"hide\")).toBeFalsy;\n\n    const notCurrentStep = page.root.querySelector('ic-step:not([current=\"\"])');\n\n    expect(notCurrentStep.classList.contains(\"show\")).toBeFalsy;\n\n    expect(notCurrentStep.classList.contains(\"hide\")).toBeTruthy;\n\n    notCurrentStep.classList.add(\"show\");\n\n    page.rootInstance.resizeObserverCallback();\n\n    await page.waitForChanges();\n\n    expect(notCurrentStep.classList.contains(\"show\")).toBeFalsy;\n\n    expect(notCurrentStep.classList.contains(\"hide\")).toBeTruthy;\n  });\n\n  it(\"shouldn't add the 'show' and 'hide' classes to default steps\", async () => {\n    const page = await newSpecPage({\n      components: [Stepper, Step],\n      html: `<ic-stepper>\n        <ic-step step-title=\"First\"></ic-step>\n        <ic-step\n          step-title=\"Second With a Very Long Title\"\n          step-subtitle=\"Optional subtitle that is long and should wrap\"\n          current\n          step-type=\"current\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Third\"\n          step-type=\"disabled\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Fourth title that is long and should wrap\"\n          step-subtitle=\"Optional Subtitle\"\n          step-type=\"completed\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Fifth and final step\"\n          step-subtitle=\"Optional Subtitle\"\n          step-status=\"optional\"\n          step-type=\"completed\"\n        ></ic-step>\n      </ic-stepper>`,\n    });\n\n    page.rootInstance.resizeObserverCallback();\n\n    await page.waitForChanges();\n\n    expect(page.rootInstance.variant).toMatch(\"default\");\n\n    const currentStep = page.root.querySelector('ic-step[current=\"\"]');\n\n    expect(\n      currentStep.shadowRoot\n        .querySelector(\".step\")\n        .classList.contains(\"current\")\n    );\n\n    const steps = page.root.querySelectorAll(\"ic-step\");\n\n    steps.forEach((step) => {\n      expect(step.classList.contains(\"show\")).toBeFalsy();\n      expect(step.classList.contains(\"hide\")).toBeFalsy();\n    });\n  });\n\n  it(\"should only add the 'show' and 'hide' classes to compact steps\", async () => {\n    const page = await newSpecPage({\n      components: [Stepper, Step],\n      html: `<ic-stepper variant=\"compact\">\n        <ic-step variant=\"compact\" step-title=\"First\"></ic-step>\n        <ic-step\n          variant=\"compact\"\n          step-title=\"Second With a Very Long Title\"\n          step-subtitle=\"Optional subtitle that is long and should wrap\"\n          current\n          step-type=\"current\"\n        ></ic-step>\n        <ic-step\n          variant=\"compact\"\n          step-title=\"Third\"\n          step-type=\"disabled\"\n        ></ic-step>\n        <ic-step\n          variant=\"compact\"\n          step-title=\"Fourth title that is long and should wrap\"\n          step-subtitle=\"Optional Subtitle\"\n          step-type=\"completed\"\n        ></ic-step>\n        <ic-step\n          variant=\"compact\"\n          step-title=\"Fifth and final step\"\n          step-subtitle=\"Optional Subtitle\"\n          step-status=\"optional\"\n          step-type=\"completed\"\n        ></ic-step>\n      </ic-stepper>`,\n    });\n\n    page.rootInstance.resizeObserverCallback();\n\n    await page.waitForChanges();\n\n    expect(page.rootInstance.variant).toMatch(\"compact\");\n\n    const currentStep = page.root.querySelector('ic-step[current=\"\"]');\n\n    expect(\n      currentStep.shadowRoot\n        .querySelector(\".step\")\n        .classList.contains(\"current\")\n    );\n\n    expect(currentStep.classList.contains(\"show\")).toBeTruthy;\n\n    expect(currentStep.classList.contains(\"hide\")).toBeFalsy;\n\n    const notCurrentSteps = page.root.querySelector(\n      'ic-step:not([current=\"\"])'\n    );\n\n    expect(notCurrentSteps.classList.contains(\"show\")).toBeFalsy;\n\n    expect(notCurrentSteps.classList.contains(\"hide\")).toBeTruthy;\n  });\n\n  it(\"should render status icons next to all steps with a disabled stepType\", async () => {\n    const page = await newSpecPage({\n      components: [Stepper, Step],\n      html: `<ic-stepper variant=\"compact\" id=\"custom-stepper\">\n        <ic-step variant=\"compact\" step-title=\"First\"></ic-step>\n        <ic-step\n          variant=\"compact\"\n          step-title=\"Second With a Very Long Title\"\n          step-subtitle=\"Optional subtitle that is long and should wrap\"\n          current\n          step-type=\"current\"\n        ></ic-step>\n        <ic-step\n          variant=\"compact\"\n          step-title=\"Third\"\n          step-status=\"required\"\n        ></ic-step>\n        <ic-step\n          variant=\"compact\"\n          step-title=\"Fourth title that is long and should wrap\"\n          step-subtitle=\"Optional Subtitle\"\n          step-type=\"completed\"\n        ></ic-step>\n        <ic-step\n          variant=\"compact\"\n          step-title=\"Fifth and final step\"\n          step-type=\"disabled\"\n        ></ic-step>\n      </ic-stepper>`,\n    });\n\n    page.rootInstance.resizeObserverCallback();\n\n    await page.waitForChanges();\n\n    const notRequiredSteps = page.root.querySelectorAll(\n      'ic-step[step-type=\"disabled\"]'\n    );\n\n    notRequiredSteps.forEach((step) => {\n      const textContent = step.shadowRoot.querySelector(\n        \".step > .step-title-area > .info-line > .step-status > ic-typography\"\n      ).textContent;\n\n      expect(textContent).toBe(\"Not required\");\n\n      const statusIcon = step.shadowRoot.querySelector(\n        \".step > .step-title-area > .info-line > .step-status > .step-icon\"\n      );\n\n      expect(statusIcon).toEqualHtml(\n        `<span class=\"warning-icon step-icon\" aria-hidden=\"true\">svg</span>`\n      );\n\n      expect(step.getAttribute(\"aria-label\")).toMatch(/. Non-required step/i);\n    });\n  });\n\n  it(\"should render status icons next to all steps with a completed stepType\", async () => {\n    const page = await newSpecPage({\n      components: [Stepper, Step],\n      html: `<ic-stepper variant=\"compact\" id=\"custom-stepper\">\n        <ic-step variant=\"compact\" step-title=\"First\"></ic-step>\n        <ic-step\n          variant=\"compact\"\n          step-title=\"Second With a Very Long Title\"\n          step-subtitle=\"Optional subtitle that is long and should wrap\"\n          current\n          step-type=\"current\"\n        ></ic-step>\n        <ic-step\n          variant=\"compact\"\n          step-title=\"Third\"\n          step-type=\"disabled\"\n        ></ic-step>\n        <ic-step\n          variant=\"compact\"\n          step-title=\"Fourth title that is long and should wrap\"\n          step-type=\"completed\"\n        ></ic-step>\n        <ic-step\n          variant=\"compact\"\n          step-title=\"Fifth and final step\"\n          step-subtitle=\"Optional Subtitle\"\n        ></ic-step>\n      </ic-stepper>`,\n    });\n\n    page.rootInstance.resizeObserverCallback();\n\n    await page.waitForChanges();\n\n    const completeSteps = page.root.querySelectorAll(\n      'ic-step[step-type=\"completed\"]'\n    );\n\n    completeSteps.forEach((step) => {\n      const textContent = step.shadowRoot.querySelector(\n        \".step > .step-title-area > .info-line > .step-status > ic-typography\"\n      ).textContent;\n\n      expect(textContent).toBe(\"Completed\");\n\n      const statusIcon = step.shadowRoot.querySelector(\n        \".step > .step-title-area > .info-line > .step-status > span.step-icon\"\n      );\n\n      expect(statusIcon).toEqualHtml(\n        `<span class=\"check-icon step-icon\" aria-hidden=\"true\">svg</span>`\n      );\n\n      expect(step.getAttribute(\"aria-label\")).toMatch(/. Completed step/i);\n    });\n  });\n\n  it(\"should update the aria label of a step if its stepStatus is set to 'optional'\", async () => {\n    const page = await newSpecPage({\n      components: [Stepper, Step],\n      html: `<ic-stepper variant=\"compact\" id=\"custom-stepper\">\n        <ic-step variant=\"compact\" step-title=\"First\"></ic-step>\n        <ic-step\n          variant=\"compact\"\n          step-title=\"Second With a Very Long Title\"\n          step-subtitle=\"Optional subtitle that is long and should wrap\"\n          current\n          step-type=\"current\"\n        ></ic-step>\n        <ic-step\n          variant=\"compact\"\n          step-title=\"Third\"\n          step-status=\"optional\"\n        ></ic-step>\n        <ic-step\n          variant=\"compact\"\n          step-title=\"Fourth title that is long and should wrap\"\n          step-subtitle=\"Optional Subtitle\"\n          step-type=\"completed\"\n        ></ic-step>\n        <ic-step\n          variant=\"compact\"\n          step-title=\"Fifth and final step\"\n          step-subtitle=\"Optional Subtitle\"\n          step-status=\"optional\"\n        ></ic-step>\n      </ic-stepper>`,\n    });\n\n    page.rootInstance.resizeObserverCallback();\n\n    await page.waitForChanges();\n\n    const optionalSteps = page.root.querySelectorAll(\n      'ic-step[step-status=\"optional\"]'\n    );\n\n    optionalSteps.forEach((step) => {\n      expect(step.getAttribute(\"aria-label\")).toMatch(/. Optional step/i);\n    });\n  });\n\n  it(\"should update the aria label of a step if its stepStatus is set to 'required'\", async () => {\n    const page = await newSpecPage({\n      components: [Stepper, Step],\n      html: `<ic-stepper variant=\"compact\" id=\"custom-stepper\">\n        <ic-step variant=\"compact\" step-title=\"First\"></ic-step>\n        <ic-step\n          variant=\"compact\"\n          step-title=\"Second With a Very Long Title\"\n          step-subtitle=\"Optional subtitle that is long and should wrap\"\n          current\n          step-type=\"current\"\n        ></ic-step>\n        <ic-step\n          variant=\"compact\"\n          step-title=\"Third\"\n          step-status=\"required\"\n        ></ic-step>\n        <ic-step\n          variant=\"compact\"\n          step-title=\"Fourth title that is long and should wrap\"\n          step-subtitle=\"Optional Subtitle\"\n          step-type=\"completed\"\n        ></ic-step>\n        <ic-step\n          variant=\"compact\"\n          step-title=\"Fifth and final step\"\n          step-subtitle=\"Optional Subtitle\"\n          step-status=\"optional\"\n        ></ic-step>\n      </ic-stepper>`,\n    });\n\n    page.rootInstance.resizeObserverCallback();\n\n    await page.waitForChanges();\n\n    const requiredSteps = page.root.querySelectorAll(\n      'ic-step[step-status=\"required\"]'\n    );\n\n    requiredSteps.forEach((step) => {\n      expect(step.getAttribute(\"aria-label\")).toMatch(/. Required step/i);\n    });\n  });\n\n  it(\"should only show the title of the next step if it isn't the last step\", async () => {\n    const page = await newSpecPage({\n      components: [Stepper, Step],\n      html: `<ic-stepper variant=\"compact\" id=\"custom-stepper\">\n        <ic-step step-title=\"First\"></ic-step>\n        <ic-step\n          step-title=\"Second With a Very Long Title\"\n          step-subtitle=\"Optional subtitle that is long and should wrap\"\n          current\n          step-type=\"current\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Third\"\n          step-type=\"disabled\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Fourth title that is long and should wrap\"\n          step-subtitle=\"Optional Subtitle\"\n          step-type=\"completed\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Fifth and final step\"\n          step-subtitle=\"Optional Subtitle\"\n        ></ic-step>\n      </ic-stepper>`,\n    });\n\n    page.rootInstance.resizeObserverCallback();\n\n    await page.waitForChanges();\n\n    expect(page.rootInstance.variant).toMatch(\"compact\");\n\n    const steps = page.root.querySelectorAll(\"ic-step\");\n\n    steps.forEach((step) => {\n      expect(step[\"variant\"]).toMatch(\"compact\");\n    });\n\n    for (let i = 0; i < steps.length; i++) {\n      if (steps[i] !== steps[steps.length - 1]) {\n        expect(steps[i][\"nextStepTitle\"]).toBe(steps[i + 1][\"stepTitle\"]);\n      } else {\n        expect(steps[i][\"nextStepTitle\"]).toBeUndefined();\n      }\n    }\n  });\n});\n\ndescribe(\"switch between the compact and default stepper depending on whether the stepper has a scroll\", () => {\n  it(\"should change from the default variant to the compact variant if there's a scroll on the stepper\", async () => {\n    const page = await newSpecPage({\n      components: [Stepper, Step],\n      html: `<ic-stepper >\n        <ic-step step-title=\"First\"></ic-step>\n        <ic-step\n          step-title=\"Second With a Very Long Title\"\n          step-subtitle=\"Optional subtitle that is long and should wrap\"\n          current\n          step-type=\"current\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Third\"\n          step-type=\"disabled\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Fourth title that is long and should wrap\"\n          step-subtitle=\"Optional Subtitle\"\n          step-type=\"completed\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Fifth and final step\"\n          step-subtitle=\"Optional Subtitle\"\n          step-status=\"optional\"\n        ></ic-step>\n      </ic-stepper>`,\n    });\n\n    expect(page.rootInstance.variant).toMatch(\"default\");\n\n    page.rootInstance.el.clientWidth = 50;\n\n    page.rootInstance.resizeObserverCallback();\n\n    await page.waitForChanges();\n\n    expect(page.rootInstance.variant).toMatch(\"compact\");\n\n    expect(page.rootInstance[\"variantOverride\"]).toBeTruthy();\n  });\n\n  it(\"should change from the compact variant to the stepper variant if the stepper is greater than the min width for the default stepper\", async () => {\n    const page = await newSpecPage({\n      components: [Stepper, Step],\n      html: `<ic-stepper>\n        <ic-step step-title=\"First\"></ic-step>\n        <ic-step\n          step-title=\"Second With a Very Long Title\"\n          step-subtitle=\"Optional subtitle that is long and should wrap\"\n          current\n          step-type=\"current\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Third\"\n          step-type=\"disabled\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Fourth title that is long and should wrap\"\n          step-subtitle=\"Optional Subtitle\"\n          step-type=\"completed\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Fifth and final step\"\n          step-subtitle=\"Optional Subtitle\"\n          step-status=\"optional\"\n        ></ic-step>\n      </ic-stepper>`,\n    });\n\n    page.rootInstance.el.clientWidth = 50;\n\n    resizeTo(window, 375, 812);\n\n    page.rootInstance.resizeObserverCallback();\n\n    await page.waitForChanges();\n\n    expect(page.rootInstance.variant).toMatch(\"compact\");\n\n    resizeTo(window, 1920, 1080);\n\n    page.rootInstance.el.clientWidth = 1000;\n\n    page.rootInstance.resizeObserverCallback();\n\n    await page.waitForChanges();\n\n    expect(page.rootInstance.variant).toMatch(\"default\");\n\n    expect(page.rootInstance[\"variantOverride\"]).toBeTruthy();\n  });\n});\n"]}
+{"version":3,"file":"ic-stepper.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-stepper/test/basic/ic-stepper.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { resizeTo } from \"../../../../testspec.setup\";\nimport { Step } from \"../../../ic-step/ic-step\";\nimport { Stepper } from \"../../ic-stepper\";\n\ndescribe(\"default variant of ic-stepper component\", () => {\n  it(\"should render a full-width stepper\", async () => {\n    const page = await newSpecPage({\n      components: [Stepper, Step],\n      html: `<ic-stepper>\n      <ic-step step-title=\"Create\" step-type=\"completed\"></ic-step>\n      <ic-step step-title=\"Read\" step-type=\"current\"></ic-step>\n      <ic-step step-title=\"Update\"></ic-step>\n      <ic-step step-title=\"Delete\"></ic-step></ic-stepper>`,\n    });\n    page.rootInstance.resizeObserverCallback();\n\n    await page.waitForChanges();\n\n    expect(page.rootInstance.variant).toMatch(\"default\");\n\n    const steps = page.root.querySelectorAll(\"ic-step\");\n\n    steps.forEach((step) => {\n      expect(step.classList.contains(\"aligned-full-width\")).toBeTruthy();\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render a left-aligned stepper\", async () => {\n    const page = await newSpecPage({\n      components: [Stepper, Step],\n      html: `<ic-stepper aligned=\"left\">\n      <ic-step step-title=\"Create\" step-type=\"completed\"></ic-step>\n      <ic-step step-title=\"Read\" step-type=\"current\"></ic-step>\n      <ic-step step-title=\"Update\"></ic-step>\n      <ic-step step-title=\"Delete\"></ic-step></ic-stepper>`,\n    });\n\n    page.rootInstance.resizeObserverCallback();\n    await page.waitForChanges();\n\n    expect(page.rootInstance.variant).toMatch(\"default\");\n    expect(page.rootInstance.aligned).toMatch(\"left\");\n    expect(page.root.classList.contains(\"aligned-left\")).toBeTruthy();\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render a stepper with hidden step info\", async () => {\n    const page = await newSpecPage({\n      components: [Stepper, Step],\n      html: `<ic-stepper hide-step-info>\n      <ic-step step-title=\"Create\" step-type=\"completed\"></ic-step>\n      <ic-step step-title=\"Read\" step-type=\"current\"></ic-step>\n      <ic-step step-title=\"Update\"></ic-step>\n      <ic-step step-title=\"Delete\"></ic-step></ic-stepper>`,\n    });\n\n    page.rootInstance.resizeObserverCallback();\n\n    await page.waitForChanges();\n\n    expect(page.rootInstance.variant).toMatch(\"default\");\n\n    expect(page.rootInstance.hideStepInfo).toBeTruthy();\n\n    const steps = page.root.querySelectorAll(\"ic-step\");\n\n    steps.forEach((step) => {\n      const stepTitleArea = step.shadowRoot.querySelector(\n        \".step > .step-title-area\"\n      );\n\n      expect(stepTitleArea.classList.contains(\"visually-hidden\")).toBeTruthy();\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render a stepper without step titles\", async () => {\n    jest.spyOn(console, \"error\").mockImplementation(jest.fn());\n    const page = await newSpecPage({\n      components: [Stepper, Step],\n      html: `<ic-stepper>\n      <ic-step step-type=\"completed\"></ic-step>\n      <ic-step step-type=\"current\"></ic-step>\n      <ic-step step-type=\"disabled\"></ic-step>\n      <ic-step step-type=\"active\"></ic-step></ic-stepper>`,\n    });\n\n    page.rootInstance.resizeObserverCallback();\n\n    await page.waitForChanges();\n\n    expect(page.root).toMatchSnapshot();\n\n    expect(page.rootInstance.hideStepInfo).toBeFalsy();\n\n    const steps = page.root.querySelectorAll(\"ic-step\");\n\n    expect(page.rootInstance[\"variantOverride\"]).toBeTruthy();\n\n    expect(page.rootInstance[\"stepsWithStepTitles\"].length).toBeLessThan(\n      page.rootInstance[\"steps\"].length\n    );\n\n    expect(page.rootInstance.variant).toMatch(\"default\");\n\n    expect(page.rootInstance[\"noOfResizes\"]).toBe(0);\n\n    steps.forEach((step) => {\n      expect(step[\"stepTitle\"]).toBeUndefined();\n      expect(step[\"stepSubtitle\"]).toBeUndefined();\n\n      const stepTitleArea = step.shadowRoot.querySelector(\n        \".step > .step-title-area\"\n      );\n      expect(stepTitleArea).toBeNull();\n    });\n\n    page.rootInstance.resizeObserverCallback();\n\n    await page.waitForChanges();\n\n    expect(page.rootInstance[\"noOfResizes\"]).toBe(0);\n  });\n\n  it(\"should render a stepper with a custom connector width\", async () => {\n    const page = await newSpecPage({\n      components: [Stepper, Step],\n      html: `<ic-stepper aligned=\"left\" connector-width=\"150\">\n      <ic-step step-title=\"Create\" step-type=\"completed\"></ic-step>\n      <ic-step step-title=\"Read\" step-type=\"current\"></ic-step>\n      <ic-step step-title=\"Update\"></ic-step>\n      <ic-step step-title=\"Delete\"></ic-step></ic-stepper>`,\n    });\n\n    page.rootInstance.resizeObserverCallback();\n\n    await page.waitForChanges();\n\n    expect(page.root).toMatchSnapshot();\n\n    expect(page.root.classList.contains(\"aligned-left\")).toBeTruthy();\n  });\n\n  it(\"should ignore the connectorWidth prop if the stepper is set to be aligned full-width\", async () => {\n    const page = await newSpecPage({\n      components: [Stepper, Step],\n      html: `<ic-stepper connector-width=\"150\">\n      <ic-step step-title=\"Create\" step-type=\"completed\"></ic-step>\n      <ic-step step-title=\"Read\" step-type=\"current\"></ic-step>\n      <ic-step step-title=\"Update\"></ic-step>\n      <ic-step step-title=\"Delete\"></ic-step></ic-stepper>`,\n    });\n\n    page.rootInstance.resizeObserverCallback();\n\n    await page.waitForChanges();\n\n    expect(page.root).toMatchSnapshot();\n\n    expect(page.root.classList.contains(\"aligned-left\")).toBeFalsy();\n  });\n\n  it(\"should add 'disabled step' to the aria labels of all disabled steps\", async () => {\n    const page = await newSpecPage({\n      components: [Stepper, Step],\n      html: `<ic-stepper variant=\"compact\" id=\"custom-stepper\">\n        <ic-step variant=\"compact\" step-type=\"disabled\" step-title=\"First\"></ic-step>\n        <ic-step\n          variant=\"compact\"\n          step-title=\"Second With a Very Long Title\"\n          step-subtitle=\"Optional subtitle that is long and should wrap\"\n          current\n          step-type=\"current\"\n        ></ic-step>\n        <ic-step\n          variant=\"compact\"\n          step-title=\"Third\"\n          step-type=\"disabled\"\n        ></ic-step>\n        <ic-step\n          variant=\"compact\"\n          step-title=\"Fourth title that is long and should wrap\"\n          step-subtitle=\"Optional Subtitle\"\n          step-type=\"completed\"\n        ></ic-step>\n        <ic-step\n          variant=\"compact\"\n          step-title=\"Fifth and final step\"\n          step-subtitle=\"Optional Subtitle\"\n          step-status=\"optional\"\n        ></ic-step>\n      </ic-stepper>`,\n    });\n\n    page.rootInstance.resizeObserverCallback();\n\n    await page.waitForChanges();\n\n    const disabledSteps = page.root.querySelectorAll(\n      'ic-step[step-type=\"disabled\"]'\n    );\n\n    disabledSteps.forEach((step) => {\n      expect(step.getAttribute(\"aria-label\")).toMatch(/. Non-required step/i);\n    });\n  });\n\n  it(\"should add the className 'last-step' to the last step in the stepper\", async () => {\n    const page = await newSpecPage({\n      components: [Stepper, Step],\n      html: `\n    <ic-stepper>\n      <ic-step step-title=\"Create\" step-type=\"completed\"></ic-step>\n      <ic-step step-title=\"Read\" step-type=\"current\"></ic-step>\n      <ic-step step-title=\"Update\"></ic-step>\n      <ic-step last-step step-title=\"Delete\"></ic-step>\n    </ic-stepper>\n    `,\n    });\n\n    page.rootInstance.resizeObserverCallback();\n\n    await page.waitForChanges();\n\n    expect(page.root).toMatchSnapshot();\n\n    const lastStep = await page.root.querySelector(\"ic-step[last-step='']\");\n\n    expect(lastStep.classList.contains(\"last-step\")).toBeTruthy();\n  });\n});\n\ndescribe(\"resizeObserver for ic-stepper\", () => {\n  it(\"shouldn't call the resizeObserver if the resizeObserver is null\", async () => {\n    const page = await newSpecPage({\n      components: [Stepper],\n      html: `\n    <ic-stepper>\n      <ic-step step-title=\"Create\" step-type=\"completed\"></ic-step>\n      <ic-step step-title=\"Read\" step-type=\"current\"></ic-step>\n      <ic-step step-title=\"Update\"></ic-step>\n      <ic-step step-title=\"Delete\"></ic-step>\n    </ic-stepper>\n    `,\n    });\n\n    await page.rootInstance.runResizeObserver();\n\n    page.setContent(\"\");\n  });\n\n  it(\"should call the functions in the resizeObserver\", async () => {\n    const page = await newSpecPage({\n      components: [Stepper],\n      html: `\n    <ic-stepper>\n      <ic-step step-title=\"Create\" step-type=\"completed\"></ic-step>\n      <ic-step step-title=\"Read\" step-type=\"current\"></ic-step>\n      <ic-step step-title=\"Update\"></ic-step>\n      <ic-step step-title=\"Delete\"></ic-step>\n    </ic-stepper>\n    `,\n    });\n\n    await page.waitForChanges();\n\n    await page.rootInstance.runResizeObserver();\n\n    await page.rootInstance.getChildren();\n\n    await page.rootInstance.checkStepTitles();\n\n    await page.rootInstance.overrideVariant();\n\n    await page.rootInstance.setStepperWidth();\n\n    await page.rootInstance.initialiseStepStates();\n  });\n});\n\ndescribe(\"compact variant of ic-stepper component\", () => {\n  it(\"should render a compact step with no step status\", async () => {\n    const page = await newSpecPage({\n      components: [Stepper, Step],\n      html: `<ic-stepper variant=\"compact\" id=\"custom-stepper\">\n        <ic-step step-title=\"First\"></ic-step>\n        <ic-step\n          step-title=\"Second With a Very Long Title\"\n          step-subtitle=\"Optional subtitle that is long and should wrap\"\n          current\n          step-type=\"current\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Third\"\n          step-type=\"disabled\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Fourth title that is long and should wrap\"\n          step-subtitle=\"Optional Subtitle\"\n          step-type=\"completed\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Fifth and final step\"\n          step-subtitle=\"Optional Subtitle\"\n          step-status=\"optional\"\n          step-type=\"completed\"\n        ></ic-step>\n      </ic-stepper>`,\n    });\n\n    page.rootInstance.resizeObserverCallback();\n\n    await page.waitForChanges();\n\n    expect(page.root).toMatchSnapshot();\n\n    expect(page.rootInstance[\"variantOverride\"]).toBeFalsy();\n\n    expect(page.rootInstance.hideStepInfo).toBeFalsy();\n\n    const steps = page.root.querySelectorAll(\"ic-step\");\n\n    steps.forEach((step) => {\n      const stepTitle = step.shadowRoot.querySelector(\n        \".step > .step-title-area > .step-title\"\n      );\n\n      expect(stepTitle).not.toBeNull();\n      expect(stepTitle.classList.contains(\"hide\")).toBeFalsy();\n    });\n  });\n\n  it(\"should render a stepper with hidden step information\", async () => {\n    const page = await newSpecPage({\n      components: [Stepper, Step],\n      html: `<ic-stepper hide-step-info>\n      <ic-step step-title=\"Create\" step-type=\"completed\"></ic-step>\n      <ic-step step-title=\"Read\" step-type=\"current\"></ic-step>\n      <ic-step step-title=\"Update\"></ic-step>\n      <ic-step step-title=\"Delete\"></ic-step></ic-stepper>`,\n    });\n\n    page.rootInstance.el.clientWidth = 50;\n\n    page.rootInstance.resizeObserverCallback();\n\n    await page.waitForChanges();\n\n    expect(page.rootInstance.variant).toMatch(\"compact\");\n\n    expect(page.rootInstance.hideStepInfo).toBeTruthy();\n\n    const steps = page.root.querySelectorAll(\"ic-step\");\n\n    steps.forEach((step) => {\n      const stepTitle = step.shadowRoot.querySelector(\n        \".step > .step-title-area > .step-title\"\n      );\n\n      expect(stepTitle).not.toBeNull();\n      expect(stepTitle.classList.contains(\"visually-hidden\")).toBeFalsy();\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render a stepper without step titles\", async () => {\n    const page = await newSpecPage({\n      components: [Stepper, Step],\n      html: `<ic-stepper >\n      <ic-step step-type=\"completed\"></ic-step>\n      <ic-step step-type=\"current\"></ic-step>\n      <ic-step step-type=\"disabled\"></ic-step>\n      <ic-step step-type=\"active\" ></ic-step></ic-stepper>`,\n    });\n\n    page.rootInstance.el.clientWidth = 50;\n\n    page.rootInstance.resizeObserverCallback();\n\n    await page.waitForChanges();\n\n    expect(page.root).toMatchSnapshot();\n\n    const steps = page.root.querySelectorAll(\"ic-step\");\n\n    expect(page.rootInstance[\"variantOverride\"]).toBeTruthy();\n\n    expect(page.rootInstance[\"stepsWithStepTitles\"].length).toBeLessThan(\n      page.rootInstance[\"steps\"].length\n    );\n\n    expect(page.rootInstance.variant).toMatch(\"compact\");\n\n    expect(page.rootInstance[\"noOfResizes\"]).toBe(0);\n\n    steps.forEach((step) => {\n      const stepTitle = \"Step \" + step[\"stepNum\"];\n      expect(step[\"stepTitle\"]).toMatch(stepTitle);\n      expect(step[\"stepSubtitle\"]).toBeUndefined();\n    });\n\n    page.rootInstance.resizeObserverCallback();\n\n    await page.waitForChanges();\n\n    expect(page.rootInstance[\"noOfResizes\"]).toBe(1);\n  });\n\n  it(\"should only show the current step\", async () => {\n    const page = await newSpecPage({\n      components: [Stepper, Step],\n      html: `<ic-stepper variant=\"compact\" id=\"custom-stepper\">\n        <ic-step step-title=\"First\"></ic-step>\n        <ic-step\n          step-title=\"Second With a Very Long Title\"\n          step-subtitle=\"Optional subtitle that is long and should wrap\"\n          current\n          step-type=\"current\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Third\"\n          step-type=\"disabled\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Fourth title that is long and should wrap\"\n          step-subtitle=\"Optional Subtitle\"\n          step-type=\"completed\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Fifth and final step\"\n          step-subtitle=\"Optional Subtitle\"\n          step-status=\"optional\"\n          step-type=\"completed\"\n        ></ic-step>\n      </ic-stepper>`,\n    });\n\n    page.rootInstance.resizeObserverCallback();\n\n    await page.waitForChanges();\n\n    expect(page.rootInstance.variant).toMatch(\"compact\");\n\n    const currentStep = page.root.querySelector('ic-step[current=\"\"]');\n\n    expect(\n      currentStep.shadowRoot\n        .querySelector(\".step\")\n        .classList.contains(\"current\")\n    );\n\n    expect(currentStep.classList.contains(\"show\")).toBeTruthy;\n\n    expect(currentStep.classList.contains(\"hide\")).toBeFalsy;\n\n    const notCurrentStep = page.root.querySelector('ic-step:not([current=\"\"])');\n\n    expect(notCurrentStep.classList.contains(\"show\")).toBeFalsy;\n\n    expect(notCurrentStep.classList.contains(\"hide\")).toBeTruthy;\n\n    notCurrentStep.classList.add(\"show\");\n\n    page.rootInstance.resizeObserverCallback();\n\n    await page.waitForChanges();\n\n    expect(notCurrentStep.classList.contains(\"show\")).toBeFalsy;\n\n    expect(notCurrentStep.classList.contains(\"hide\")).toBeTruthy;\n  });\n\n  it(\"shouldn't add the 'show' and 'hide' classes to default steps\", async () => {\n    const page = await newSpecPage({\n      components: [Stepper, Step],\n      html: `<ic-stepper>\n        <ic-step step-title=\"First\"></ic-step>\n        <ic-step\n          step-title=\"Second With a Very Long Title\"\n          step-subtitle=\"Optional subtitle that is long and should wrap\"\n          current\n          step-type=\"current\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Third\"\n          step-type=\"disabled\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Fourth title that is long and should wrap\"\n          step-subtitle=\"Optional Subtitle\"\n          step-type=\"completed\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Fifth and final step\"\n          step-subtitle=\"Optional Subtitle\"\n          step-status=\"optional\"\n          step-type=\"completed\"\n        ></ic-step>\n      </ic-stepper>`,\n    });\n\n    page.rootInstance.resizeObserverCallback();\n\n    await page.waitForChanges();\n\n    expect(page.rootInstance.variant).toMatch(\"default\");\n\n    const currentStep = page.root.querySelector('ic-step[current=\"\"]');\n\n    expect(\n      currentStep.shadowRoot\n        .querySelector(\".step\")\n        .classList.contains(\"current\")\n    );\n\n    const steps = page.root.querySelectorAll(\"ic-step\");\n\n    steps.forEach((step) => {\n      expect(step.classList.contains(\"show\")).toBeFalsy();\n      expect(step.classList.contains(\"hide\")).toBeFalsy();\n    });\n  });\n\n  it(\"should only add the 'show' and 'hide' classes to compact steps\", async () => {\n    const page = await newSpecPage({\n      components: [Stepper, Step],\n      html: `<ic-stepper variant=\"compact\">\n        <ic-step variant=\"compact\" step-title=\"First\"></ic-step>\n        <ic-step\n          variant=\"compact\"\n          step-title=\"Second With a Very Long Title\"\n          step-subtitle=\"Optional subtitle that is long and should wrap\"\n          current\n          step-type=\"current\"\n        ></ic-step>\n        <ic-step\n          variant=\"compact\"\n          step-title=\"Third\"\n          step-type=\"disabled\"\n        ></ic-step>\n        <ic-step\n          variant=\"compact\"\n          step-title=\"Fourth title that is long and should wrap\"\n          step-subtitle=\"Optional Subtitle\"\n          step-type=\"completed\"\n        ></ic-step>\n        <ic-step\n          variant=\"compact\"\n          step-title=\"Fifth and final step\"\n          step-subtitle=\"Optional Subtitle\"\n          step-status=\"optional\"\n          step-type=\"completed\"\n        ></ic-step>\n      </ic-stepper>`,\n    });\n\n    page.rootInstance.resizeObserverCallback();\n\n    await page.waitForChanges();\n\n    expect(page.rootInstance.variant).toMatch(\"compact\");\n\n    const currentStep = page.root.querySelector('ic-step[current=\"\"]');\n\n    expect(\n      currentStep.shadowRoot\n        .querySelector(\".step\")\n        .classList.contains(\"current\")\n    );\n\n    expect(currentStep.classList.contains(\"show\")).toBeTruthy;\n\n    expect(currentStep.classList.contains(\"hide\")).toBeFalsy;\n\n    const notCurrentSteps = page.root.querySelector(\n      'ic-step:not([current=\"\"])'\n    );\n\n    expect(notCurrentSteps.classList.contains(\"show\")).toBeFalsy;\n\n    expect(notCurrentSteps.classList.contains(\"hide\")).toBeTruthy;\n  });\n\n  it(\"should render status icons next to all steps with a disabled stepType\", async () => {\n    const page = await newSpecPage({\n      components: [Stepper, Step],\n      html: `<ic-stepper variant=\"compact\" id=\"custom-stepper\">\n        <ic-step variant=\"compact\" step-title=\"First\"></ic-step>\n        <ic-step\n          variant=\"compact\"\n          step-title=\"Second With a Very Long Title\"\n          step-subtitle=\"Optional subtitle that is long and should wrap\"\n          current\n          step-type=\"current\"\n        ></ic-step>\n        <ic-step\n          variant=\"compact\"\n          step-title=\"Third\"\n          step-status=\"required\"\n        ></ic-step>\n        <ic-step\n          variant=\"compact\"\n          step-title=\"Fourth title that is long and should wrap\"\n          step-subtitle=\"Optional Subtitle\"\n          step-type=\"completed\"\n        ></ic-step>\n        <ic-step\n          variant=\"compact\"\n          step-title=\"Fifth and final step\"\n          step-type=\"disabled\"\n        ></ic-step>\n      </ic-stepper>`,\n    });\n\n    page.rootInstance.resizeObserverCallback();\n\n    await page.waitForChanges();\n\n    const notRequiredSteps = page.root.querySelectorAll(\n      'ic-step[step-type=\"disabled\"]'\n    );\n\n    notRequiredSteps.forEach((step) => {\n      const textContent = step.shadowRoot.querySelector(\n        \".step > .step-title-area > .info-line > .step-status > ic-typography\"\n      ).textContent;\n\n      expect(textContent).toBe(\"Not required\");\n\n      const statusIcon = step.shadowRoot.querySelector(\n        \".step > .step-title-area > .info-line > .step-status > .step-icon\"\n      );\n\n      expect(statusIcon).toEqualHtml(\n        `<span class=\"warning-icon step-icon\" aria-hidden=\"true\">svg</span>`\n      );\n\n      expect(step.getAttribute(\"aria-label\")).toMatch(/. Non-required step/i);\n    });\n  });\n\n  it(\"should render status icons next to all steps with a completed stepType\", async () => {\n    const page = await newSpecPage({\n      components: [Stepper, Step],\n      html: `<ic-stepper variant=\"compact\" id=\"custom-stepper\">\n        <ic-step variant=\"compact\" step-title=\"First\"></ic-step>\n        <ic-step\n          variant=\"compact\"\n          step-title=\"Second With a Very Long Title\"\n          step-subtitle=\"Optional subtitle that is long and should wrap\"\n          current\n          step-type=\"current\"\n        ></ic-step>\n        <ic-step\n          variant=\"compact\"\n          step-title=\"Third\"\n          step-type=\"disabled\"\n        ></ic-step>\n        <ic-step\n          variant=\"compact\"\n          step-title=\"Fourth title that is long and should wrap\"\n          step-type=\"completed\"\n        ></ic-step>\n        <ic-step\n          variant=\"compact\"\n          step-title=\"Fifth and final step\"\n          step-subtitle=\"Optional Subtitle\"\n        ></ic-step>\n      </ic-stepper>`,\n    });\n\n    page.rootInstance.resizeObserverCallback();\n\n    await page.waitForChanges();\n\n    const completeSteps = page.root.querySelectorAll(\n      'ic-step[step-type=\"completed\"]'\n    );\n\n    completeSteps.forEach((step) => {\n      const textContent = step.shadowRoot.querySelector(\n        \".step > .step-title-area > .info-line > .step-status > ic-typography\"\n      ).textContent;\n\n      expect(textContent).toBe(\"Completed\");\n\n      const statusIcon = step.shadowRoot.querySelector(\n        \".step > .step-title-area > .info-line > .step-status > span.step-icon\"\n      );\n\n      expect(statusIcon).toEqualHtml(\n        `<span class=\"check-icon step-icon\" aria-hidden=\"true\">svg</span>`\n      );\n\n      expect(step.getAttribute(\"aria-label\")).toMatch(/. Completed step/i);\n    });\n  });\n\n  it(\"should update the aria label of a step if its stepStatus is set to 'optional'\", async () => {\n    const page = await newSpecPage({\n      components: [Stepper, Step],\n      html: `<ic-stepper variant=\"compact\" id=\"custom-stepper\">\n        <ic-step variant=\"compact\" step-title=\"First\"></ic-step>\n        <ic-step\n          variant=\"compact\"\n          step-title=\"Second With a Very Long Title\"\n          step-subtitle=\"Optional subtitle that is long and should wrap\"\n          current\n          step-type=\"current\"\n        ></ic-step>\n        <ic-step\n          variant=\"compact\"\n          step-title=\"Third\"\n          step-status=\"optional\"\n        ></ic-step>\n        <ic-step\n          variant=\"compact\"\n          step-title=\"Fourth title that is long and should wrap\"\n          step-subtitle=\"Optional Subtitle\"\n          step-type=\"completed\"\n        ></ic-step>\n        <ic-step\n          variant=\"compact\"\n          step-title=\"Fifth and final step\"\n          step-subtitle=\"Optional Subtitle\"\n          step-status=\"optional\"\n        ></ic-step>\n      </ic-stepper>`,\n    });\n\n    page.rootInstance.resizeObserverCallback();\n\n    await page.waitForChanges();\n\n    const optionalSteps = page.root.querySelectorAll(\n      'ic-step[step-status=\"optional\"]'\n    );\n\n    optionalSteps.forEach((step) => {\n      expect(step.getAttribute(\"aria-label\")).toMatch(/. Optional step/i);\n    });\n  });\n\n  it(\"should update the aria label of a step if its stepStatus is set to 'required'\", async () => {\n    const page = await newSpecPage({\n      components: [Stepper, Step],\n      html: `<ic-stepper variant=\"compact\" id=\"custom-stepper\">\n        <ic-step variant=\"compact\" step-title=\"First\"></ic-step>\n        <ic-step\n          variant=\"compact\"\n          step-title=\"Second With a Very Long Title\"\n          step-subtitle=\"Optional subtitle that is long and should wrap\"\n          current\n          step-type=\"current\"\n        ></ic-step>\n        <ic-step\n          variant=\"compact\"\n          step-title=\"Third\"\n          step-status=\"required\"\n        ></ic-step>\n        <ic-step\n          variant=\"compact\"\n          step-title=\"Fourth title that is long and should wrap\"\n          step-subtitle=\"Optional Subtitle\"\n          step-type=\"completed\"\n        ></ic-step>\n        <ic-step\n          variant=\"compact\"\n          step-title=\"Fifth and final step\"\n          step-subtitle=\"Optional Subtitle\"\n          step-status=\"optional\"\n        ></ic-step>\n      </ic-stepper>`,\n    });\n\n    page.rootInstance.resizeObserverCallback();\n\n    await page.waitForChanges();\n\n    const requiredSteps = page.root.querySelectorAll(\n      'ic-step[step-status=\"required\"]'\n    );\n\n    requiredSteps.forEach((step) => {\n      expect(step.getAttribute(\"aria-label\")).toMatch(/. Required step/i);\n    });\n  });\n\n  it(\"should only show the title of the next step if it isn't the last step\", async () => {\n    const page = await newSpecPage({\n      components: [Stepper, Step],\n      html: `<ic-stepper variant=\"compact\" id=\"custom-stepper\">\n        <ic-step step-title=\"First\"></ic-step>\n        <ic-step\n          step-title=\"Second With a Very Long Title\"\n          step-subtitle=\"Optional subtitle that is long and should wrap\"\n          current\n          step-type=\"current\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Third\"\n          step-type=\"disabled\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Fourth title that is long and should wrap\"\n          step-subtitle=\"Optional Subtitle\"\n          step-type=\"completed\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Fifth and final step\"\n          step-subtitle=\"Optional Subtitle\"\n        ></ic-step>\n      </ic-stepper>`,\n    });\n\n    page.rootInstance.resizeObserverCallback();\n\n    await page.waitForChanges();\n\n    expect(page.rootInstance.variant).toMatch(\"compact\");\n\n    const steps = page.root.querySelectorAll(\"ic-step\");\n\n    steps.forEach((step) => {\n      expect(step[\"variant\"]).toMatch(\"compact\");\n    });\n\n    for (let i = 0; i < steps.length; i++) {\n      if (steps[i] !== steps[steps.length - 1]) {\n        expect(steps[i][\"nextStepTitle\"]).toBe(steps[i + 1][\"stepTitle\"]);\n      } else {\n        expect(steps[i][\"nextStepTitle\"]).toBeUndefined();\n      }\n    }\n  });\n});\n\ndescribe(\"switch between the compact and default stepper depending on whether the stepper has a scroll\", () => {\n  it(\"should change from the default variant to the compact variant if there's a scroll on the stepper\", async () => {\n    const page = await newSpecPage({\n      components: [Stepper, Step],\n      html: `<ic-stepper >\n        <ic-step step-title=\"First\"></ic-step>\n        <ic-step\n          step-title=\"Second With a Very Long Title\"\n          step-subtitle=\"Optional subtitle that is long and should wrap\"\n          current\n          step-type=\"current\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Third\"\n          step-type=\"disabled\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Fourth title that is long and should wrap\"\n          step-subtitle=\"Optional Subtitle\"\n          step-type=\"completed\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Fifth and final step\"\n          step-subtitle=\"Optional Subtitle\"\n          step-status=\"optional\"\n        ></ic-step>\n      </ic-stepper>`,\n    });\n\n    expect(page.rootInstance.variant).toMatch(\"default\");\n\n    page.rootInstance.el.clientWidth = 50;\n\n    page.rootInstance.resizeObserverCallback();\n\n    await page.waitForChanges();\n\n    expect(page.rootInstance.variant).toMatch(\"compact\");\n\n    expect(page.rootInstance[\"variantOverride\"]).toBeTruthy();\n  });\n\n  it(\"should change from the compact variant to the stepper variant if the stepper is greater than the min width for the default stepper\", async () => {\n    const page = await newSpecPage({\n      components: [Stepper, Step],\n      html: `<ic-stepper>\n        <ic-step step-title=\"First\"></ic-step>\n        <ic-step\n          step-title=\"Second With a Very Long Title\"\n          step-subtitle=\"Optional subtitle that is long and should wrap\"\n          current\n          step-type=\"current\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Third\"\n          step-type=\"disabled\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Fourth title that is long and should wrap\"\n          step-subtitle=\"Optional Subtitle\"\n          step-type=\"completed\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Fifth and final step\"\n          step-subtitle=\"Optional Subtitle\"\n          step-status=\"optional\"\n        ></ic-step>\n      </ic-stepper>`,\n    });\n\n    page.rootInstance.el.clientWidth = 50;\n\n    resizeTo(window, 375, 812);\n\n    page.rootInstance.resizeObserverCallback();\n\n    await page.waitForChanges();\n\n    expect(page.rootInstance.variant).toMatch(\"compact\");\n\n    resizeTo(window, 1920, 1080);\n\n    page.rootInstance.el.clientWidth = 1000;\n\n    page.rootInstance.resizeObserverCallback();\n\n    await page.waitForChanges();\n\n    expect(page.rootInstance.variant).toMatch(\"default\");\n\n    expect(page.rootInstance[\"variantOverride\"]).toBeTruthy();\n  });\n});\n"]}

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

@@ -1,8 +1,9 @@
 import { Host, h, } from "@stencil/core";
 import { IcThemeForegroundEnum, } from "../../utils/types";
-import { removeDisabledFalse } from "../../utils/helpers";
+import { isSlotUsed, removeDisabledFalse } from "../../utils/helpers";
 /**
  * @slot icon - Content will be rendered next to the tab label.
+ * @slot badge - Badge component displayed inline with the tab.
  */
 export class Tab {
   constructor() {
@@ -79,7 +80,7 @@ export class Tab {
         ["ic-tab-light"]: appearance === IcThemeForegroundEnum.Light,
         ["selected"]: selected,
         ["disabled"]: disabled,
-      }, role: "tab", "aria-selected": selected ? "true" : "false", onClick: this.handleClick, onFocus: this.handleFocus, onMouseDown: this.handleMouseDown, "aria-disabled": disabled ? "true" : "false", tabindex: this.selected ? 0 : -1 }, this.host.querySelector('[slot="icon"]') && h("slot", { name: "icon" }), h("ic-typography", { class: "ic-tab-label", variant: "label" }, h("span", null, h("slot", null)))));
+      }, role: "tab", "aria-selected": selected ? "true" : "false", onClick: this.handleClick, onFocus: this.handleFocus, onMouseDown: this.handleMouseDown, "aria-disabled": disabled ? "true" : "false", tabindex: this.selected ? 0 : -1 }, this.host.querySelector('[slot="icon"]') && h("slot", { name: "icon" }), h("ic-typography", { class: "ic-tab-label", variant: "label" }, h("span", null, h("slot", null))), isSlotUsed(this.host, "badge") && h("slot", { name: "badge" })));
   }
   static get is() { return "ic-tab"; }
   static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"ic-tab.js","sourceRoot":"","sources":["../../../src/components/ic-tab/ic-tab.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Prop,\n  h,\n  Method,\n  Watch,\n} from \"@stencil/core\";\n\nimport { IcTabClickEventDetail } from \"./ic-tab.types\";\nimport {\n  IcThemeForegroundNoDefault,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport { removeDisabledFalse } from \"../../utils/helpers\";\n\n/**\n * @slot icon - Content will be rendered next to the tab label.\n */\n@Component({\n  tag: \"ic-tab\",\n  styleUrl: \"ic-tab.css\",\n  shadow: true,\n})\nexport class Tab {\n  private focusFromClick: boolean = false;\n  private focusTabId: string;\n  private isInitialRender: boolean = true;\n\n  @Element() host: HTMLIcTabElement;\n\n  /** @internal Determines whether the light or dark variant of the tabs should be displayed. */\n  @Prop() appearance?: IcThemeForegroundNoDefault = \"dark\";\n\n  /** @internal The unique context needed if using multiple tabs inside one another i.e. rendering another tabs inside a tab panel. */\n  @Prop({ reflect: true }) contextId?: string = \"default\";\n\n  /**\n   * If `true`, the disabled state will be set.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /** @internal If `true`, the tab will display with a selected indicator and tabIndex will be set. */\n  @Prop({ reflect: true }) selected?: boolean = false;\n\n  /** @internal The shared ID between panel and tab. */\n  @Prop({ reflect: true }) tabId?: string;\n\n  /** @internal The position of the tab inside the tabs array in context. */\n  @Prop() tabPosition?: number;\n\n  @Watch(\"disabled\")\n  disabledWatchHandler(): void {\n    this.tabEnabled.emit();\n  }\n\n  /**\n   * @internal Emitted when a tab is selected.\n   */\n  @Event() tabClick: EventEmitter<IcTabClickEventDetail>;\n\n  /**\n   * @internal Emitted when a tab is dynamically created.\n   */\n  @Event() tabCreated: EventEmitter<HTMLIcTabElement>;\n\n  /**\n   * @internal Emitted when a tab's disabled prop changes\n   */\n  @Event() tabEnabled: EventEmitter<void>;\n\n  /**\n   * @internal Emitted when a tab is focussed.\n   */\n  @Event() tabFocus: EventEmitter<IcTabClickEventDetail>;\n\n  /**\n   * @internal Emitted when a tab is unmounted.\n   */\n  @Event() tabRemoved: EventEmitter<void>;\n\n  connectedCallback(): void {\n    this.tabCreated.emit(this.host);\n  }\n\n  disconnectedCallback(): void {\n    const tabContext = document.querySelector(\n      `ic-tab-context[context-id=${this.contextId}]`\n    ) as HTMLIcTabContextElement;\n    if (tabContext) {\n      tabContext.tabRemovedHandler(!!this.focusTabId);\n    }\n  }\n\n  componentWillLoad(): void {\n    removeDisabledFalse(this.disabled, this.host);\n  }\n\n  componentDidUpdate(): void {\n    this.isInitialRender = false;\n  }\n\n  /**\n   * Sets focus on the tab.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.host) {\n      this.host.focus();\n    }\n  }\n\n  private handleClick = () => {\n    this.tabClick.emit({\n      tabId: this.tabId,\n      contextId: this.contextId,\n      position: this.tabPosition,\n    });\n    if (this.focusFromClick) {\n      this.tabFocus.emit({\n        tabId: this.tabId,\n        contextId: this.contextId,\n        position: this.tabPosition,\n      });\n      this.focusFromClick = false;\n    }\n  };\n\n  private handleFocus = () => {\n    if (!this.focusFromClick) {\n      this.focusTabId = this.tabId;\n\n      this.tabFocus.emit({\n        tabId: this.tabId,\n        contextId: this.contextId,\n        position: this.tabPosition,\n      });\n    }\n  };\n\n  private handleMouseDown = () => {\n    //set flag so that focus gets handled after click\n    //there is a timing issue where a long click only causes focus to happen & not the click\n    //the focus does need to be a seperate event though to handle focus from keyboard\n    this.focusFromClick = true;\n  };\n\n  render() {\n    const { disabled, selected, appearance } = this;\n    return (\n      <Host\n        class={{\n          [\"with-transition\"]: !this.isInitialRender,\n          [\"ic-tab-light\"]: appearance === IcThemeForegroundEnum.Light,\n          [\"selected\"]: selected,\n          [\"disabled\"]: disabled,\n        }}\n        role=\"tab\"\n        aria-selected={selected ? \"true\" : \"false\"}\n        onClick={this.handleClick}\n        onFocus={this.handleFocus}\n        onMouseDown={this.handleMouseDown}\n        aria-disabled={disabled ? \"true\" : \"false\"}\n        tabindex={this.selected ? 0 : -1}\n      >\n        {this.host.querySelector('[slot=\"icon\"]') && <slot name=\"icon\"></slot>}\n        <ic-typography class=\"ic-tab-label\" variant=\"label\">\n          <span>\n            <slot></slot>\n          </span>\n        </ic-typography>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-tab.js","sourceRoot":"","sources":["../../../src/components/ic-tab/ic-tab.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Prop,\n  h,\n  Method,\n  Watch,\n} from \"@stencil/core\";\n\nimport { IcTabClickEventDetail } from \"./ic-tab.types\";\nimport {\n  IcThemeForegroundNoDefault,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport { isSlotUsed, removeDisabledFalse } from \"../../utils/helpers\";\n\n/**\n * @slot icon - Content will be rendered next to the tab label.\n * @slot badge - Badge component displayed inline with the tab.\n */\n@Component({\n  tag: \"ic-tab\",\n  styleUrl: \"ic-tab.css\",\n  shadow: true,\n})\nexport class Tab {\n  private focusFromClick: boolean = false;\n  private focusTabId: string;\n  private isInitialRender: boolean = true;\n\n  @Element() host: HTMLIcTabElement;\n\n  /** @internal Determines whether the light or dark variant of the tabs should be displayed. */\n  @Prop() appearance?: IcThemeForegroundNoDefault = \"dark\";\n\n  /** @internal The unique context needed if using multiple tabs inside one another i.e. rendering another tabs inside a tab panel. */\n  @Prop({ reflect: true }) contextId?: string = \"default\";\n\n  /**\n   * If `true`, the disabled state will be set.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /** @internal If `true`, the tab will display with a selected indicator and tabIndex will be set. */\n  @Prop({ reflect: true }) selected?: boolean = false;\n\n  /** @internal The shared ID between panel and tab. */\n  @Prop({ reflect: true }) tabId?: string;\n\n  /** @internal The position of the tab inside the tabs array in context. */\n  @Prop() tabPosition?: number;\n\n  @Watch(\"disabled\")\n  disabledWatchHandler(): void {\n    this.tabEnabled.emit();\n  }\n\n  /**\n   * @internal Emitted when a tab is selected.\n   */\n  @Event() tabClick: EventEmitter<IcTabClickEventDetail>;\n\n  /**\n   * @internal Emitted when a tab is dynamically created.\n   */\n  @Event() tabCreated: EventEmitter<HTMLIcTabElement>;\n\n  /**\n   * @internal Emitted when a tab's disabled prop changes\n   */\n  @Event() tabEnabled: EventEmitter<void>;\n\n  /**\n   * @internal Emitted when a tab is focussed.\n   */\n  @Event() tabFocus: EventEmitter<IcTabClickEventDetail>;\n\n  /**\n   * @internal Emitted when a tab is unmounted.\n   */\n  @Event() tabRemoved: EventEmitter<void>;\n\n  connectedCallback(): void {\n    this.tabCreated.emit(this.host);\n  }\n\n  disconnectedCallback(): void {\n    const tabContext = document.querySelector(\n      `ic-tab-context[context-id=${this.contextId}]`\n    ) as HTMLIcTabContextElement;\n    if (tabContext) {\n      tabContext.tabRemovedHandler(!!this.focusTabId);\n    }\n  }\n\n  componentWillLoad(): void {\n    removeDisabledFalse(this.disabled, this.host);\n  }\n\n  componentDidUpdate(): void {\n    this.isInitialRender = false;\n  }\n\n  /**\n   * Sets focus on the tab.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.host) {\n      this.host.focus();\n    }\n  }\n\n  private handleClick = () => {\n    this.tabClick.emit({\n      tabId: this.tabId,\n      contextId: this.contextId,\n      position: this.tabPosition,\n    });\n    if (this.focusFromClick) {\n      this.tabFocus.emit({\n        tabId: this.tabId,\n        contextId: this.contextId,\n        position: this.tabPosition,\n      });\n      this.focusFromClick = false;\n    }\n  };\n\n  private handleFocus = () => {\n    if (!this.focusFromClick) {\n      this.focusTabId = this.tabId;\n\n      this.tabFocus.emit({\n        tabId: this.tabId,\n        contextId: this.contextId,\n        position: this.tabPosition,\n      });\n    }\n  };\n\n  private handleMouseDown = () => {\n    //set flag so that focus gets handled after click\n    //there is a timing issue where a long click only causes focus to happen & not the click\n    //the focus does need to be a seperate event though to handle focus from keyboard\n    this.focusFromClick = true;\n  };\n\n  render() {\n    const { disabled, selected, appearance } = this;\n    return (\n      <Host\n        class={{\n          [\"with-transition\"]: !this.isInitialRender,\n          [\"ic-tab-light\"]: appearance === IcThemeForegroundEnum.Light,\n          [\"selected\"]: selected,\n          [\"disabled\"]: disabled,\n        }}\n        role=\"tab\"\n        aria-selected={selected ? \"true\" : \"false\"}\n        onClick={this.handleClick}\n        onFocus={this.handleFocus}\n        onMouseDown={this.handleMouseDown}\n        aria-disabled={disabled ? \"true\" : \"false\"}\n        tabindex={this.selected ? 0 : -1}\n      >\n        {this.host.querySelector('[slot=\"icon\"]') && <slot name=\"icon\"></slot>}\n        <ic-typography class=\"ic-tab-label\" variant=\"label\">\n          <span>\n            <slot></slot>\n          </span>\n        </ic-typography>\n        {isSlotUsed(this.host, \"badge\") && <slot name=\"badge\"></slot>}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-top-navigation/test/basic/ic-top-navigation.mobile.e2e.js

@@ -55,6 +55,7 @@ describe("ic-top-navigation on mobile", () => {
       <ic-navigation-item
         label="Navigation"
         slot="navigation"
+        href="#"
       ></ic-navigation-item>
     </ic-top-navigation>`);
     await page.setViewport({
@@ -71,6 +72,7 @@ describe("ic-top-navigation on mobile", () => {
     expect(icNavigationMenuOpened).toHaveReceivedEvent();
     const icNavigationMenuClosed = await page.spyOnEvent("icNavigationMenuClosed");
     const navItem = await page.find("ic-navigation-item");
+    await page.waitForTimeout(5000);
     await navItem.click();
     await page.waitForChanges();
     menu = await page.find("ic-top-navigation >>> ic-navigation-menu");

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

@@ -1 +1 @@
-{"version":3,"file":"ic-top-navigation.mobile.e2e.js","sourceRoot":"","sources":["../../../../../src/components/ic-top-navigation/test/basic/ic-top-navigation.mobile.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { newE2EPage } from \"@stencil/core/testing\";\n\nconst pageWidth = 640;\nconst pageHeight = 480;\nconst searchBarVisibleHeight = 40;\nconst searchBarHiddenHeight = 0;\n\ndescribe(\"ic-top-navigation on mobile\", () => {\n  it(\"renders\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-top-navigation app-title=\"ApplicationName\" status=\"alpha\"\n    version=\"v0.0.7\"></ic-top-navigation>`);\n\n    await page.setViewport({\n      width: pageWidth,\n      height: pageHeight,\n    });\n\n    const menuBtn = await page.find(\n      \"ic-top-navigation >>> .menu-button-container ic-button\"\n    );\n    expect(menuBtn).not.toBeNull();\n  });\n\n  it(\"should open and close menu\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-top-navigation app-title=\"ApplicationName\" status=\"alpha\"\n    version=\"v0.0.7\"></ic-top-navigation>`);\n\n    await page.setViewport({\n      width: pageWidth,\n      height: pageHeight,\n    });\n\n    const menuBtn = await page.find(\n      \"ic-top-navigation >>> .menu-button-container ic-button\"\n    );\n    expect(menuBtn).not.toBeNull();\n\n    const icNavigationMenuOpened = await page.spyOnEvent(\n      \"icNavigationMenuOpened\"\n    );\n    await menuBtn.click();\n    await page.waitForChanges();\n    let menu = await page.find(\"ic-top-navigation >>> ic-navigation-menu\");\n    expect(menu).not.toBeNull();\n    expect(icNavigationMenuOpened).toHaveReceivedEvent();\n\n    const activeElId = await page.$eval(\"ic-top-navigation\", (el) => {\n      const menu = el.shadowRoot.querySelector(\"ic-navigation-menu\");\n      return menu.shadowRoot.activeElement.id;\n    });\n\n    expect(activeElId).toBe(\"menu-close-button\");\n\n    const icNavigationMenuClosed = await page.spyOnEvent(\n      \"icNavigationMenuClosed\"\n    );\n\n    await page.evaluate(() => {\n      const navbar = document.querySelector(\"ic-top-navigation\");\n      const menu = navbar.shadowRoot.querySelector(\"ic-navigation-menu\");\n      const closeBtn = menu.shadowRoot.querySelector(\"ic-button\");\n      closeBtn.click();\n    });\n\n    await page.waitForChanges();\n    menu = await page.find(\"ic-top-navigation >>> ic-navigation-menu\");\n    expect(menu).toBeNull();\n    expect(icNavigationMenuClosed).toHaveReceivedEvent();\n  });\n\n  it(\"should close menu when nav item clicked\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-top-navigation app-title=\"ApplicationName\" status=\"alpha\"\n    version=\"v0.0.7\">\n      <ic-navigation-item\n        label=\"Navigation\"\n        slot=\"navigation\"\n      ></ic-navigation-item>\n    </ic-top-navigation>`);\n\n    await page.setViewport({\n      width: pageWidth,\n      height: pageHeight,\n    });\n\n    const menuBtn = await page.find(\n      \"ic-top-navigation >>> .menu-button-container ic-button\"\n    );\n    expect(menuBtn).not.toBeNull();\n\n    const icNavigationMenuOpened = await page.spyOnEvent(\n      \"icNavigationMenuOpened\"\n    );\n    await menuBtn.click();\n    await page.waitForChanges();\n\n    let menu = await page.find(\"ic-top-navigation >>> ic-navigation-menu\");\n    expect(menu).not.toBeNull();\n    expect(icNavigationMenuOpened).toHaveReceivedEvent();\n\n    const icNavigationMenuClosed = await page.spyOnEvent(\n      \"icNavigationMenuClosed\"\n    );\n\n    const navItem = await page.find(\"ic-navigation-item\");\n\n    await navItem.click();\n    await page.waitForChanges();\n\n    menu = await page.find(\"ic-top-navigation >>> ic-navigation-menu\");\n    expect(menu).toBeNull();\n    expect(icNavigationMenuClosed).toHaveReceivedEvent();\n  });\n\n  it(\"should keep tab focus in menu - button as last el\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-top-navigation app-title=\"ApplicationName\" status=\"alpha\"\n    version=\"v0.0.7\">\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-top-navigation>`);\n\n    await page.setViewport({\n      width: pageWidth,\n      height: pageHeight,\n    });\n\n    const menuBtn = await page.find(\n      \"ic-top-navigation >>> .menu-button-container ic-button\"\n    );\n    expect(menuBtn).not.toBeNull();\n\n    await menuBtn.click();\n    await page.waitForChanges();\n    const menu = await page.find(\"ic-top-navigation >>> ic-navigation-menu\");\n    expect(menu).not.toBeNull();\n\n    let activeElId = await page.$eval(\"ic-top-navigation\", (el) => {\n      const menu = el.shadowRoot.querySelector(\"ic-navigation-menu\");\n      return menu.shadowRoot.activeElement.id;\n    });\n\n    expect(activeElId).toBe(\"menu-close-button\");\n\n    await page.keyboard.press(\"Tab\");\n    await page.waitForChanges();\n\n    activeElId = await page.$eval(\"ic-navigation-button\", (el) => {\n      const button = el.shadowRoot.querySelector(\"ic-button\");\n      return button.shadowRoot.activeElement.getAttribute(\"aria-label\");\n    });\n\n    expect(activeElId).toBe(\"button1\");\n\n    await page.keyboard.press(\"Tab\");\n    await page.waitForChanges();\n\n    activeElId = await page.$eval(\"ic-top-navigation\", (el) => {\n      const menu = el.shadowRoot.querySelector(\"ic-navigation-menu\");\n      return menu.shadowRoot.activeElement.id;\n    });\n\n    expect(activeElId).toBe(\"menu-close-button\");\n\n    page.keyboard.down(\"Shift\");\n    await page.keyboard.press(\"Tab\");\n    await page.waitForChanges();\n\n    activeElId = await page.$eval(\"ic-navigation-button\", (el) => {\n      const button = el.shadowRoot.querySelector(\"ic-button\");\n      return button.shadowRoot.activeElement.getAttribute(\"aria-label\");\n    });\n\n    expect(activeElId).toBe(\"button1\");\n  });\n\n  it(\"should keep tab focus in menu - nav item as last el\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-top-navigation app-title=\"ApplicationName\" status=\"alpha\"\n    version=\"v0.0.7\">\n    <ic-navigation-item\n      label=\"Navigation\"\n      href=\"/\"\n      slot=\"navigation\"\n    ></ic-navigation-item>  \n    </ic-top-navigation>`);\n\n    await page.setViewport({\n      width: pageWidth,\n      height: pageHeight,\n    });\n\n    const menuBtn = await page.find(\n      \"ic-top-navigation >>> .menu-button-container ic-button\"\n    );\n    expect(menuBtn).not.toBeNull();\n\n    await menuBtn.click();\n    await page.waitForChanges();\n    const menu = await page.find(\"ic-top-navigation >>> ic-navigation-menu\");\n    expect(menu).not.toBeNull();\n\n    let activeElId = await page.$eval(\"ic-top-navigation\", (el) => {\n      const menu = el.shadowRoot.querySelector(\"ic-navigation-menu\");\n      return menu.shadowRoot.activeElement.id;\n    });\n\n    expect(activeElId).toBe(\"menu-close-button\");\n\n    await page.keyboard.press(\"Tab\");\n    await page.waitForChanges();\n\n    activeElId = await page.$eval(\"ic-navigation-item\", (el) => {\n      return el.shadowRoot.activeElement.textContent;\n    });\n\n    expect(activeElId).toBe(\"Navigation\");\n\n    await page.keyboard.press(\"Tab\");\n    await page.waitForChanges();\n\n    activeElId = await page.$eval(\"ic-top-navigation\", (el) => {\n      const menu = el.shadowRoot.querySelector(\"ic-navigation-menu\");\n      return menu.shadowRoot.activeElement.id;\n    });\n\n    expect(activeElId).toBe(\"menu-close-button\");\n\n    page.keyboard.down(\"Shift\");\n    await page.keyboard.press(\"Tab\");\n    await page.waitForChanges();\n\n    activeElId = await page.$eval(\"ic-navigation-item\", (el) => {\n      return el.shadowRoot.activeElement.textContent;\n    });\n\n    expect(activeElId).toBe(\"Navigation\");\n  });\n\n  it(\"should toggle search bar when clicking on button\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-top-navigation app-title=\"ApplicationName\" status=\"alpha\"\n    version=\"v0.0.7\">\n    <ic-search-bar slot=\"search\" label=\"Search\" placeholder=\"Search\" focusOnLoad=\"true\"></ic-search-bar>\n    </ic-top-navigation>`);\n\n    await page.setViewport({\n      width: pageWidth,\n      height: pageHeight,\n    });\n\n    const searchBtn = await page.find(\n      \"ic-top-navigation >>> .search-actions-container ic-button\"\n    );\n    expect(searchBtn).not.toBeNull();\n\n    await searchBtn.click();\n    await page.waitForChanges();\n\n    let searchBarHeight = await page.$eval(\"ic-search-bar\", (el) => {\n      return el.clientHeight;\n    });\n\n    expect(searchBarHeight).toBe(searchBarVisibleHeight);\n\n    await searchBtn.click();\n    await page.waitForChanges();\n\n    searchBarHeight = await page.$eval(\"ic-search-bar\", (el) => {\n      return el.clientHeight;\n    });\n\n    expect(searchBarHeight).toBe(searchBarHiddenHeight);\n  });\n\n  it(\"should hide search bar when loses focus\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-top-navigation app-title=\"ApplicationName\" status=\"alpha\"\n      version=\"v0.0.7\">\n        <ic-search-bar slot=\"search\" label=\"Search\" placeholder=\"Search\" focusOnLoad=\"true\"></ic-search-bar>\n      </ic-top-navigation>\n      <span id='othercontent'>some other content</span>`);\n\n    await page.setViewport({\n      width: pageWidth,\n      height: pageHeight,\n    });\n\n    const searchBtn = await page.find(\n      \"ic-top-navigation >>> .search-actions-container ic-button\"\n    );\n    expect(searchBtn).not.toBeNull();\n\n    await searchBtn.click();\n    await page.waitForChanges();\n\n    let searchBarHeight = await page.$eval(\"ic-search-bar\", (el) => {\n      return el.clientHeight;\n    });\n\n    expect(searchBarHeight).toBe(searchBarVisibleHeight);\n\n    // Test hides when another page element clicked\n    const spanEl = await page.find(\"#othercontent\");\n    await spanEl.click();\n    await page.waitForChanges();\n\n    searchBarHeight = await page.$eval(\"ic-search-bar\", (el) => {\n      return el.clientHeight;\n    });\n\n    expect(searchBarHeight).toBe(searchBarHiddenHeight);\n  });\n});\n"]}
+{"version":3,"file":"ic-top-navigation.mobile.e2e.js","sourceRoot":"","sources":["../../../../../src/components/ic-top-navigation/test/basic/ic-top-navigation.mobile.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { newE2EPage } from \"@stencil/core/testing\";\n\nconst pageWidth = 640;\nconst pageHeight = 480;\nconst searchBarVisibleHeight = 40;\nconst searchBarHiddenHeight = 0;\n\ndescribe(\"ic-top-navigation on mobile\", () => {\n  it(\"renders\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-top-navigation app-title=\"ApplicationName\" status=\"alpha\"\n    version=\"v0.0.7\"></ic-top-navigation>`);\n\n    await page.setViewport({\n      width: pageWidth,\n      height: pageHeight,\n    });\n\n    const menuBtn = await page.find(\n      \"ic-top-navigation >>> .menu-button-container ic-button\"\n    );\n    expect(menuBtn).not.toBeNull();\n  });\n\n  it(\"should open and close menu\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-top-navigation app-title=\"ApplicationName\" status=\"alpha\"\n    version=\"v0.0.7\"></ic-top-navigation>`);\n\n    await page.setViewport({\n      width: pageWidth,\n      height: pageHeight,\n    });\n\n    const menuBtn = await page.find(\n      \"ic-top-navigation >>> .menu-button-container ic-button\"\n    );\n    expect(menuBtn).not.toBeNull();\n\n    const icNavigationMenuOpened = await page.spyOnEvent(\n      \"icNavigationMenuOpened\"\n    );\n    await menuBtn.click();\n    await page.waitForChanges();\n    let menu = await page.find(\"ic-top-navigation >>> ic-navigation-menu\");\n    expect(menu).not.toBeNull();\n    expect(icNavigationMenuOpened).toHaveReceivedEvent();\n\n    const activeElId = await page.$eval(\"ic-top-navigation\", (el) => {\n      const menu = el.shadowRoot.querySelector(\"ic-navigation-menu\");\n      return menu.shadowRoot.activeElement.id;\n    });\n\n    expect(activeElId).toBe(\"menu-close-button\");\n\n    const icNavigationMenuClosed = await page.spyOnEvent(\n      \"icNavigationMenuClosed\"\n    );\n\n    await page.evaluate(() => {\n      const navbar = document.querySelector(\"ic-top-navigation\");\n      const menu = navbar.shadowRoot.querySelector(\"ic-navigation-menu\");\n      const closeBtn = menu.shadowRoot.querySelector(\"ic-button\");\n      closeBtn.click();\n    });\n\n    await page.waitForChanges();\n    menu = await page.find(\"ic-top-navigation >>> ic-navigation-menu\");\n    expect(menu).toBeNull();\n    expect(icNavigationMenuClosed).toHaveReceivedEvent();\n  });\n\n  it(\"should close menu when nav item clicked\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-top-navigation app-title=\"ApplicationName\" status=\"alpha\"\n    version=\"v0.0.7\">\n      <ic-navigation-item\n        label=\"Navigation\"\n        slot=\"navigation\"\n        href=\"#\"\n      ></ic-navigation-item>\n    </ic-top-navigation>`);\n\n    await page.setViewport({\n      width: pageWidth,\n      height: pageHeight,\n    });\n\n    const menuBtn = await page.find(\n      \"ic-top-navigation >>> .menu-button-container ic-button\"\n    );\n    expect(menuBtn).not.toBeNull();\n\n    const icNavigationMenuOpened = await page.spyOnEvent(\n      \"icNavigationMenuOpened\"\n    );\n    await menuBtn.click();\n    await page.waitForChanges();\n\n    let menu = await page.find(\"ic-top-navigation >>> ic-navigation-menu\");\n    expect(menu).not.toBeNull();\n    expect(icNavigationMenuOpened).toHaveReceivedEvent();\n\n    const icNavigationMenuClosed = await page.spyOnEvent(\n      \"icNavigationMenuClosed\"\n    );\n\n    const navItem = await page.find(\"ic-navigation-item\");\n    await page.waitForTimeout(5000);\n    await navItem.click();\n    await page.waitForChanges();\n\n    menu = await page.find(\"ic-top-navigation >>> ic-navigation-menu\");\n    expect(menu).toBeNull();\n    expect(icNavigationMenuClosed).toHaveReceivedEvent();\n  });\n\n  it(\"should keep tab focus in menu - button as last el\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-top-navigation app-title=\"ApplicationName\" status=\"alpha\"\n    version=\"v0.0.7\">\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-top-navigation>`);\n\n    await page.setViewport({\n      width: pageWidth,\n      height: pageHeight,\n    });\n\n    const menuBtn = await page.find(\n      \"ic-top-navigation >>> .menu-button-container ic-button\"\n    );\n    expect(menuBtn).not.toBeNull();\n\n    await menuBtn.click();\n    await page.waitForChanges();\n    const menu = await page.find(\"ic-top-navigation >>> ic-navigation-menu\");\n    expect(menu).not.toBeNull();\n\n    let activeElId = await page.$eval(\"ic-top-navigation\", (el) => {\n      const menu = el.shadowRoot.querySelector(\"ic-navigation-menu\");\n      return menu.shadowRoot.activeElement.id;\n    });\n\n    expect(activeElId).toBe(\"menu-close-button\");\n\n    await page.keyboard.press(\"Tab\");\n    await page.waitForChanges();\n\n    activeElId = await page.$eval(\"ic-navigation-button\", (el) => {\n      const button = el.shadowRoot.querySelector(\"ic-button\");\n      return button.shadowRoot.activeElement.getAttribute(\"aria-label\");\n    });\n\n    expect(activeElId).toBe(\"button1\");\n\n    await page.keyboard.press(\"Tab\");\n    await page.waitForChanges();\n\n    activeElId = await page.$eval(\"ic-top-navigation\", (el) => {\n      const menu = el.shadowRoot.querySelector(\"ic-navigation-menu\");\n      return menu.shadowRoot.activeElement.id;\n    });\n\n    expect(activeElId).toBe(\"menu-close-button\");\n\n    page.keyboard.down(\"Shift\");\n    await page.keyboard.press(\"Tab\");\n    await page.waitForChanges();\n\n    activeElId = await page.$eval(\"ic-navigation-button\", (el) => {\n      const button = el.shadowRoot.querySelector(\"ic-button\");\n      return button.shadowRoot.activeElement.getAttribute(\"aria-label\");\n    });\n\n    expect(activeElId).toBe(\"button1\");\n  });\n\n  it(\"should keep tab focus in menu - nav item as last el\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-top-navigation app-title=\"ApplicationName\" status=\"alpha\"\n    version=\"v0.0.7\">\n    <ic-navigation-item\n      label=\"Navigation\"\n      href=\"/\"\n      slot=\"navigation\"\n    ></ic-navigation-item>  \n    </ic-top-navigation>`);\n\n    await page.setViewport({\n      width: pageWidth,\n      height: pageHeight,\n    });\n\n    const menuBtn = await page.find(\n      \"ic-top-navigation >>> .menu-button-container ic-button\"\n    );\n    expect(menuBtn).not.toBeNull();\n\n    await menuBtn.click();\n    await page.waitForChanges();\n    const menu = await page.find(\"ic-top-navigation >>> ic-navigation-menu\");\n    expect(menu).not.toBeNull();\n\n    let activeElId = await page.$eval(\"ic-top-navigation\", (el) => {\n      const menu = el.shadowRoot.querySelector(\"ic-navigation-menu\");\n      return menu.shadowRoot.activeElement.id;\n    });\n\n    expect(activeElId).toBe(\"menu-close-button\");\n\n    await page.keyboard.press(\"Tab\");\n    await page.waitForChanges();\n\n    activeElId = await page.$eval(\"ic-navigation-item\", (el) => {\n      return el.shadowRoot.activeElement.textContent;\n    });\n\n    expect(activeElId).toBe(\"Navigation\");\n\n    await page.keyboard.press(\"Tab\");\n    await page.waitForChanges();\n\n    activeElId = await page.$eval(\"ic-top-navigation\", (el) => {\n      const menu = el.shadowRoot.querySelector(\"ic-navigation-menu\");\n      return menu.shadowRoot.activeElement.id;\n    });\n\n    expect(activeElId).toBe(\"menu-close-button\");\n\n    page.keyboard.down(\"Shift\");\n    await page.keyboard.press(\"Tab\");\n    await page.waitForChanges();\n\n    activeElId = await page.$eval(\"ic-navigation-item\", (el) => {\n      return el.shadowRoot.activeElement.textContent;\n    });\n\n    expect(activeElId).toBe(\"Navigation\");\n  });\n\n  it(\"should toggle search bar when clicking on button\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-top-navigation app-title=\"ApplicationName\" status=\"alpha\"\n    version=\"v0.0.7\">\n    <ic-search-bar slot=\"search\" label=\"Search\" placeholder=\"Search\" focusOnLoad=\"true\"></ic-search-bar>\n    </ic-top-navigation>`);\n\n    await page.setViewport({\n      width: pageWidth,\n      height: pageHeight,\n    });\n\n    const searchBtn = await page.find(\n      \"ic-top-navigation >>> .search-actions-container ic-button\"\n    );\n    expect(searchBtn).not.toBeNull();\n\n    await searchBtn.click();\n    await page.waitForChanges();\n\n    let searchBarHeight = await page.$eval(\"ic-search-bar\", (el) => {\n      return el.clientHeight;\n    });\n\n    expect(searchBarHeight).toBe(searchBarVisibleHeight);\n\n    await searchBtn.click();\n    await page.waitForChanges();\n\n    searchBarHeight = await page.$eval(\"ic-search-bar\", (el) => {\n      return el.clientHeight;\n    });\n\n    expect(searchBarHeight).toBe(searchBarHiddenHeight);\n  });\n\n  it(\"should hide search bar when loses focus\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-top-navigation app-title=\"ApplicationName\" status=\"alpha\"\n      version=\"v0.0.7\">\n        <ic-search-bar slot=\"search\" label=\"Search\" placeholder=\"Search\" focusOnLoad=\"true\"></ic-search-bar>\n      </ic-top-navigation>\n      <span id='othercontent'>some other content</span>`);\n\n    await page.setViewport({\n      width: pageWidth,\n      height: pageHeight,\n    });\n\n    const searchBtn = await page.find(\n      \"ic-top-navigation >>> .search-actions-container ic-button\"\n    );\n    expect(searchBtn).not.toBeNull();\n\n    await searchBtn.click();\n    await page.waitForChanges();\n\n    let searchBarHeight = await page.$eval(\"ic-search-bar\", (el) => {\n      return el.clientHeight;\n    });\n\n    expect(searchBarHeight).toBe(searchBarVisibleHeight);\n\n    // Test hides when another page element clicked\n    const spanEl = await page.find(\"#othercontent\");\n    await spanEl.click();\n    await page.waitForChanges();\n\n    searchBarHeight = await page.$eval(\"ic-search-bar\", (el) => {\n      return el.clientHeight;\n    });\n\n    expect(searchBarHeight).toBe(searchBarHiddenHeight);\n  });\n});\n"]}

package/dist/collection/components/ic-typography/ic-typography.css

@@ -552,6 +552,16 @@ video {
   letter-spacing: var(--ic-font-letter-spacing-0pt025);
 }
 
+:host(.ic-typography-badge) {
+  font: var(--ic-font-badge);
+  letter-spacing: var(--ic-font-letter-spacing-0pt0025);
+}
+
+:host(.ic-typography-badge-small) {
+  font: var(--ic-font-badge-small);
+  letter-spacing: var(--ic-font-letter-spacing-0pt0025);
+}
+
 :host(.ic-typography-no-wrap) {
   white-space: nowrap;
 }

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

@@ -233,7 +233,7 @@ export class Typography {
         "mutable": false,
         "complexType": {
           "original": "IcTypographyVariants",
-          "resolved": "\"body\" | \"caption\" | \"caption-uppercase\" | \"code-extra-small\" | \"code-large\" | \"code-small\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"label\" | \"label-uppercase\" | \"subtitle-large\" | \"subtitle-small\"",
+          "resolved": "\"badge\" | \"badge-small\" | \"body\" | \"caption\" | \"caption-uppercase\" | \"code-extra-small\" | \"code-large\" | \"code-small\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"label\" | \"label-uppercase\" | \"subtitle-large\" | \"subtitle-small\"",
           "references": {
             "IcTypographyVariants": {
               "location": "import",

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

@@ -22,7 +22,7 @@ describe("ic-typograpghy", () => {
     let btnText = truncBtn.innerText;
     expect(truncBtn).not.toBeNull();
     expect(btnText).toBe("See more");
-    truncBtn.click();
+    await truncBtn.click();
     await page.waitForChanges();
     btnText = truncBtn.innerText;
     expect(btnText).toBe("See less");

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

@@ -1 +1 @@
-{"version":3,"file":"ic-typography.e2e.js","sourceRoot":"","sources":["../../../../../src/components/ic-typography/test/basic/ic-typography.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,SAAS,CAAC,GAAG,EAAE;EACb,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;AAC5D,CAAC,CAAC,CAAC;AAEH,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;EAC9B,EAAE,CAAC,wBAAwB,EAAE,KAAK,IAAI,EAAE;IACtC,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC;;;;;;;qBAOL,CAAC,CAAC;IAEnB,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,IAAI,CAAC,WAAW,CAAC;MACrB,KAAK,EAAE,GAAG;MACV,MAAM,EAAE,GAAG;KACZ,CAAC,CAAC;IAEH,IAAI,QAAQ,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,oCAAoC,CAAC,CAAC;IAErE,IAAI,OAAO,GAAI,QAAyC,CAAC,SAAS,CAAC;IAEnE,MAAM,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;IAChC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAEjC,QAAQ,CAAC,KAAK,EAAE,CAAC;IACjB,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,OAAO,GAAI,QAAyC,CAAC,SAAS,CAAC;IAC/D,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAEjC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,IAAI,CAAC,WAAW,CAAC;MACrB,KAAK,EAAE,IAAI;MACX,MAAM,EAAE,GAAG;KACZ,CAAC,CAAC;IAEH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,QAAQ,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,oCAAoC,CAAC,CAAC;IAEjE,MAAM,CAAC,QAAQ,CAAC,CAAC,QAAQ,EAAE,CAAC;EAC9B,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from \"@stencil/core/testing\";\n\nbeforeAll(() => {\n  jest.spyOn(console, \"warn\").mockImplementation(jest.fn());\n});\n\ndescribe(\"ic-typograpghy\", () => {\n  it(\"should test truncation\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-typography max-lines=\"3\">\n      Body of text that is truncated to three lines. Click the 'See more' link to\n      expand the text, then click 'See less' to truncate the text once more!\n      <br>\n      This is the text that should appear on a second line but may extend further depending on the viewport size.\n      <br>\n      And this text should be on a third line.\n    </ic-typography>`);\n\n    await page.waitForChanges();\n\n    await page.setViewport({\n      width: 640,\n      height: 480,\n    });\n\n    let truncBtn = await page.find(\"ic-typography >>> button.trunc-btn\");\n\n    let btnText = (truncBtn as unknown as HTMLButtonElement).innerText;\n\n    expect(truncBtn).not.toBeNull();\n    expect(btnText).toBe(\"See more\");\n\n    truncBtn.click();\n    await page.waitForChanges();\n\n    btnText = (truncBtn as unknown as HTMLButtonElement).innerText;\n    expect(btnText).toBe(\"See less\");\n\n    await page.waitForChanges();\n\n    await page.setViewport({\n      width: 1600,\n      height: 480,\n    });\n\n    await page.waitForChanges();\n    truncBtn = await page.find(\"ic-typography >>> button.trunc-btn\");\n\n    expect(truncBtn).toBeNull();\n  });\n});\n"]}
+{"version":3,"file":"ic-typography.e2e.js","sourceRoot":"","sources":["../../../../../src/components/ic-typography/test/basic/ic-typography.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,SAAS,CAAC,GAAG,EAAE;EACb,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;AAC5D,CAAC,CAAC,CAAC;AAEH,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;EAC9B,EAAE,CAAC,wBAAwB,EAAE,KAAK,IAAI,EAAE;IACtC,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC;;;;;;;qBAOL,CAAC,CAAC;IAEnB,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,IAAI,CAAC,WAAW,CAAC;MACrB,KAAK,EAAE,GAAG;MACV,MAAM,EAAE,GAAG;KACZ,CAAC,CAAC;IAEH,IAAI,QAAQ,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,oCAAoC,CAAC,CAAC;IAErE,IAAI,OAAO,GAAI,QAAyC,CAAC,SAAS,CAAC;IAEnE,MAAM,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;IAChC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAEjC,MAAM,QAAQ,CAAC,KAAK,EAAE,CAAC;IACvB,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,OAAO,GAAI,QAAyC,CAAC,SAAS,CAAC;IAC/D,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAEjC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,IAAI,CAAC,WAAW,CAAC;MACrB,KAAK,EAAE,IAAI;MACX,MAAM,EAAE,GAAG;KACZ,CAAC,CAAC;IAEH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,QAAQ,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,oCAAoC,CAAC,CAAC;IAEjE,MAAM,CAAC,QAAQ,CAAC,CAAC,QAAQ,EAAE,CAAC;EAC9B,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from \"@stencil/core/testing\";\n\nbeforeAll(() => {\n  jest.spyOn(console, \"warn\").mockImplementation(jest.fn());\n});\n\ndescribe(\"ic-typograpghy\", () => {\n  it(\"should test truncation\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-typography max-lines=\"3\">\n      Body of text that is truncated to three lines. Click the 'See more' link to\n      expand the text, then click 'See less' to truncate the text once more!\n      <br>\n      This is the text that should appear on a second line but may extend further depending on the viewport size.\n      <br>\n      And this text should be on a third line.\n    </ic-typography>`);\n\n    await page.waitForChanges();\n\n    await page.setViewport({\n      width: 640,\n      height: 480,\n    });\n\n    let truncBtn = await page.find(\"ic-typography >>> button.trunc-btn\");\n\n    let btnText = (truncBtn as unknown as HTMLButtonElement).innerText;\n\n    expect(truncBtn).not.toBeNull();\n    expect(btnText).toBe(\"See more\");\n\n    await truncBtn.click();\n    await page.waitForChanges();\n\n    btnText = (truncBtn as unknown as HTMLButtonElement).innerText;\n    expect(btnText).toBe(\"See less\");\n\n    await page.waitForChanges();\n\n    await page.setViewport({\n      width: 1600,\n      height: 480,\n    });\n\n    await page.waitForChanges();\n    truncBtn = await page.find(\"ic-typography >>> button.trunc-btn\");\n\n    expect(truncBtn).toBeNull();\n  });\n});\n"]}