@ukic/web-components 3.0.0-alpha.1 → 3.0.0-alpha.10

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

@@ -1 +1 @@
-{"version":3,"file":"ic-switch.js","sourceRoot":"","sources":["../../../src/components/ic-switch/ic-switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  getInputDescribedByText,\n  onComponentRequiredPropUndefined,\n  renderHiddenInput,\n  addFormResetListener,\n  removeFormResetListener,\n  removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport { IcSwitchChangeEventDetail } from \"./ic-switch.types\";\nimport { IcSizesNoLarge } from \"../../utils/types\";\n\nlet inputIds = 0;\n\n/**\n * @slot right-adornment - Content is placed to the right of switch before state label.\n */\n@Component({\n  tag: \"ic-switch\",\n  styleUrl: \"ic-switch.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class Switch {\n  private inputId = `ic-switch-input-${inputIds++}`;\n\n  @Element() el: HTMLIcSwitchElement;\n\n  @State() checkedState: boolean = false;\n  @State() initiallyChecked = this.checked;\n\n  /**\n   * If `true`, the switch will display as checked.\n   */\n  @Prop() checked?: boolean = false;\n\n  @Watch(\"checked\")\n  checkedChangeHandler(): void {\n    this.checkedState = this.checked;\n  }\n\n  /**\n   * If `true`, the disabled state will be set.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * The helper text that will be displayed for additional field guidance.\n   */\n  @Prop() helperText?: string = \"\";\n\n  /**\n   * If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n   */\n  @Prop() hideLabel?: boolean = false;\n\n  /**\n   * The aria-label applied to the switch when no visual 'name' is provided.\n   */\n  @Prop() label!: string;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name?: string = this.inputId;\n\n  /**\n   * If `true`, the switch will render the On/Off state text.\n   */\n  @Prop() showState?: boolean = false;\n\n  /**\n   * The size of the switch component.\n   */\n  @Prop() size?: IcSizesNoLarge = \"medium\";\n\n  /**\n   * The value of the toggle does not mean if it's checked or not, use the `checked`\n   * property for that.\n   *\n   * The value of a toggle is analogous to the value of a `<input type=\"checkbox\">`,\n   * it's only used when the toggle participates in a native `<form>`.\n   */\n  @Prop() value?: string | null = \"on\";\n\n  /**\n   * Emitted when the toggle loses focus.\n   */\n  @Event() icBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the value property has changed.\n   */\n  @Event() icChange!: EventEmitter<IcSwitchChangeEventDetail>;\n\n  /**\n   * Emitted when the toggle has focus.\n   */\n  @Event() icFocus!: EventEmitter<void>;\n\n  disconnectedCallback(): void {\n    removeFormResetListener(this.el, this.handleFormReset);\n  }\n\n  componentWillLoad(): void {\n    this.checkedState = this.checked;\n    addFormResetListener(this.el, this.handleFormReset);\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Switch\"\n    );\n  }\n\n  /**\n   * Sets focus on the switch.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.el.shadowRoot.querySelector(\"input\")) {\n      this.el.shadowRoot.querySelector(\"input\").focus();\n    }\n  }\n\n  private handleChange = () => {\n    this.checkedState = !this.checkedState;\n    this.icChange.emit({\n      checked: this.checkedState,\n      value: this.value,\n    });\n  };\n\n  private onFocus = () => {\n    this.icFocus.emit();\n  };\n\n  private onBlur = () => {\n    this.icBlur.emit();\n  };\n\n  private handleFormReset = (): void => {\n    this.checkedState = this.initiallyChecked;\n  };\n\n  render() {\n    const {\n      label,\n      checkedState,\n      size,\n      disabled,\n      name,\n      showState,\n      value,\n      hideLabel,\n      helperText,\n      inputId,\n    } = this;\n\n    renderHiddenInput(true, this.el, name, checkedState ? value : \"\", disabled);\n\n    const describedBy = getInputDescribedByText(\n      inputId,\n      helperText !== \"\",\n      false\n    );\n\n    return (\n      <Host>\n        <label\n          class={{\n            [\"ic-switch-container\"]: true,\n            [\"ic-switch-disabled\"]: disabled,\n            [\"ic-switch-small\"]: size === \"small\",\n          }}\n          htmlFor={inputId}\n        >\n          {!hideLabel && (\n            <ic-input-label\n              for={inputId}\n              label={label}\n              helperText={helperText}\n              readonly={true}\n              disabled={disabled}\n              class={{\n                [\"ic-switch-label\"]: true,\n                [\"ic-switch-label-small\"]: size === \"small\",\n              }}\n            ></ic-input-label>\n          )}\n          {!hideLabel && <span class=\"ic-switch-line-break\"></span>}\n          <input\n            checked={checkedState}\n            disabled={disabled}\n            aria-label={label}\n            aria-checked={checkedState ? \"true\" : \"false\"}\n            aria-describedby={describedBy}\n            role=\"switch\"\n            class=\"ic-switch-input\"\n            type=\"checkbox\"\n            name=\"toggle\"\n            id={inputId}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onChange={this.handleChange}\n          />\n          <span class=\"ic-switch-toggle\">\n            <svg\n              class=\"ic-switch-icon\"\n              aria-hidden=\"true\"\n              focusable=\"false\"\n              viewBox=\"0 0 10 10\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <line\n                class=\"ic-switch-icon-line\"\n                x1=\"9\"\n                y1={size === \"small\" ? \"2\" : \"1\"}\n                x2=\"9\"\n                y2={size === \"small\" ? \"8\" : \"9\"}\n              />\n            </svg>\n            <svg\n              class=\"ic-switch-icon\"\n              aria-hidden=\"true\"\n              focusable=\"false\"\n              viewBox=\"0 0 10 10\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <circle\n                class=\"ic-switch-icon-circle\"\n                fill=\"none\"\n                cx=\"5\"\n                cy=\"5\"\n                r={size === \"small\" ? \"3.335\" : \"4.445\"}\n              />\n            </svg>\n          </span>\n          <slot name=\"right-adornment\"></slot>\n          {showState && (\n            <ic-typography\n              aria-hidden=\"true\"\n              variant=\"label\"\n              class=\"ic-switch-checked-status\"\n            >\n              {checkedState ? \"On\" : \"Off\"}\n            </ic-typography>\n          )}\n        </label>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-switch.js","sourceRoot":"","sources":["../../../src/components/ic-switch/ic-switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  getInputDescribedByText,\n  onComponentRequiredPropUndefined,\n  renderHiddenInput,\n  addFormResetListener,\n  removeFormResetListener,\n  removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport { IcSwitchChangeEventDetail } from \"./ic-switch.types\";\nimport { IcSizesNoLarge, IcThemeMode } from \"../../utils/types\";\n\nlet inputIds = 0;\n\n/**\n * @slot right-adornment - Content is placed to the right of switch.\n */\n@Component({\n  tag: \"ic-switch\",\n  styleUrl: \"ic-switch.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class Switch {\n  private inputId = `ic-switch-input-${inputIds++}`;\n\n  @Element() el: HTMLIcSwitchElement;\n\n  @State() checkedState: boolean = false;\n  @State() initiallyChecked = this.checked;\n\n  /**\n   * If `true`, the switch will display as checked.\n   */\n  @Prop() checked?: boolean = false;\n\n  @Watch(\"checked\")\n  checkedChangeHandler(): void {\n    this.checkedState = this.checked;\n  }\n\n  /**\n   * If `true`, the disabled state will be set.\n   */\n  @Prop() disabled?: boolean = false;\n  @Watch(\"disabled\")\n  watchDisabledHandler(): void {\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  /**\n   * The helper text that will be displayed for additional field guidance.\n   */\n  @Prop() helperText?: string = \"\";\n\n  /**\n   * If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n   */\n  @Prop() hideLabel?: boolean = false;\n\n  /**\n   * The aria-label applied to the switch when no visual 'name' is provided.\n   */\n  @Prop() label!: string;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name?: string = this.inputId;\n\n  /**\n   * The size of the switch component.\n   */\n  @Prop() size?: IcSizesNoLarge = \"medium\";\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  /**\n   * The value of the toggle does not mean if it's checked or not, use the `checked`\n   * property for that.\n   *\n   * The value of a toggle is analogous to the value of a `<input type=\"checkbox\">`,\n   * it's only used when the toggle participates in a native `<form>`.\n   */\n  @Prop() value?: string | null = \"on\";\n\n  /**\n   * Emitted when the toggle loses focus.\n   */\n  @Event() icBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the value property has changed.\n   */\n  @Event() icChange!: EventEmitter<IcSwitchChangeEventDetail>;\n\n  /**\n   * Emitted when the toggle has focus.\n   */\n  @Event() icFocus!: EventEmitter<void>;\n\n  disconnectedCallback(): void {\n    removeFormResetListener(this.el, this.handleFormReset);\n  }\n\n  componentWillLoad(): void {\n    this.checkedState = this.checked;\n    addFormResetListener(this.el, this.handleFormReset);\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Switch\"\n    );\n  }\n\n  /**\n   * Sets focus on the switch.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.el.shadowRoot.querySelector(\"input\")?.focus();\n  }\n\n  private handleChange = () => {\n    this.checkedState = !this.checkedState;\n    this.icChange.emit({\n      checked: this.checkedState,\n      value: this.value,\n    });\n  };\n\n  private onFocus = () => {\n    this.icFocus.emit();\n  };\n\n  private onBlur = () => {\n    this.icBlur.emit();\n  };\n\n  private handleFormReset = (): void => {\n    this.checkedState = this.initiallyChecked;\n  };\n\n  render() {\n    const {\n      label,\n      checkedState,\n      size,\n      disabled,\n      name,\n      value,\n      hideLabel,\n      helperText,\n      inputId,\n      theme,\n    } = this;\n\n    const isSmall = size === \"small\";\n\n    renderHiddenInput(true, this.el, name, checkedState ? value : \"\", disabled);\n\n    return (\n      <Host\n        class={{\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n      >\n        <label\n          class={{\n            \"ic-switch-container\": true,\n            \"ic-switch-disabled\": disabled,\n            \"ic-switch-small\": isSmall,\n          }}\n          htmlFor={inputId}\n        >\n          {!hideLabel && (\n            <ic-input-label\n              for={inputId}\n              label={label}\n              helperText={helperText}\n              readonly={true}\n              disabled={disabled}\n              class={{\n                \"ic-switch-label\": true,\n                \"ic-switch-label-small\": isSmall,\n              }}\n            ></ic-input-label>\n          )}\n          {!hideLabel && <span class=\"ic-switch-line-break\"></span>}\n          <input\n            checked={checkedState}\n            disabled={disabled}\n            aria-label={label}\n            aria-checked={checkedState ? \"true\" : \"false\"}\n            aria-describedby={getInputDescribedByText(\n              inputId,\n              helperText !== \"\",\n              false\n            )}\n            role=\"switch\"\n            class=\"ic-switch-input\"\n            type=\"checkbox\"\n            name=\"toggle\"\n            id={inputId}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onChange={this.handleChange}\n          />\n          <span class=\"ic-switch-toggle\">\n            <svg\n              class=\"ic-switch-icon\"\n              aria-hidden=\"true\"\n              focusable=\"false\"\n              viewBox=\"0 0 10 10\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <line\n                class=\"ic-switch-icon-line\"\n                x1=\"9\"\n                y1={isSmall ? \"2\" : \"1\"}\n                x2=\"9\"\n                y2={isSmall ? \"8\" : \"9\"}\n              />\n            </svg>\n            <svg\n              class=\"ic-switch-icon\"\n              aria-hidden=\"true\"\n              focusable=\"false\"\n              viewBox=\"0 0 10 10\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <circle\n                class=\"ic-switch-icon-circle\"\n                fill=\"none\"\n                cx=\"5\"\n                cy=\"5\"\n                r={isSmall ? \"3.335\" : \"4.445\"}\n              />\n            </svg>\n          </span>\n          <slot name=\"right-adornment\"></slot>\n        </label>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-switch/ic-switch.stories.js

@@ -0,0 +1,149 @@
+import { html } from "lit-html";
+
+const defaultArgs = {
+  label: "Custom Switch",
+  helperText: "Custom helper text",
+  disabled: false,
+  checked: false,
+  hideLabel: false,
+  size: "medium",
+  theme: "inherit",
+};
+
+export default {
+  title: "Web Components/Switch",
+  component: "ic-switch",
+};
+
+export const Default = {
+  render: () => html` <ic-switch label="Label"></ic-switch> `,
+  name: "Default",
+};
+
+export const Name = {
+  render: () => html` <ic-switch label="Label"></ic-switch> `,
+  name: "Name",
+};
+
+export const Checked = {
+  render: () => html` <ic-switch checked="true" label="Label"></ic-switch> `,
+  name: "Checked",
+};
+
+export const Small = {
+  render: () => html` <ic-switch size="small" label="Label"></ic-switch> `,
+  name: "Small",
+};
+
+export const Disabled = {
+  render: () => html` <ic-switch disabled="true" label="Label"></ic-switch> `,
+  name: "Disabled",
+};
+
+export const DisabledAndName = {
+  render: () => html` <ic-switch disabled="true" label="Label"></ic-switch> `,
+  name: "Disabled and name",
+};
+
+export const DisabledNameAndChecked = {
+  render: () => html`
+    <ic-switch disabled="true" label="Label" checked="true"></ic-switch>
+  `,
+
+  name: "Disabled, name and checked",
+};
+
+export const AriaLabel = {
+  render: () => html`
+    <ic-switch label="Custom label" hide-label="true"></ic-switch>
+  `,
+  name: "ARIA label",
+};
+
+export const HelperText = {
+  render: () =>
+    html` <ic-switch label="Label" helper-text="Helper Text"></ic-switch>`,
+  name: "Helper text",
+};
+
+export const RightAdornment = {
+  render: () =>
+    html` <ic-switch label="Right adornment">
+      <svg
+        slot="right-adornment"
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M8 8C10.21 8 12 6.21 12 4C12 1.79 10.21 0 8 0C5.79 0 4 1.79 4 4C4 6.21 5.79 8 8 8ZM8 10C5.33 10 0 11.34 0 14V16H16V14C16 11.34 10.67 10 8 10Z"
+        />
+      </svg>
+    </ic-switch>`,
+
+  name: "Right adornment",
+};
+
+export const DefaultInForm = {
+  render: () =>
+    html` <form id="form" aria-label="test form">
+      <ic-switch id="switch" label="custom label" hide-label="true"></ic-switch>
+      <br />
+      <br />
+      <input type="submit" value="Submit" />
+      <input type="reset" value="Reset" />
+      <form>
+        <script>
+          const tcForm = document.getElementById("form");
+          tcForm.addEventListener("submit", handleSubmit);
+          function handleSubmit(e) {
+            e.preventDefault();
+            var data = "HTML Form Data (name: value): \\n";
+            for (const element of document.getElementById("form").elements) {
+              data += element.name + ": " + element.value + "\\n";
+            }
+            alert(data);
+          }
+        </script>
+      </form>
+    </form>`,
+
+  name: "Default in form",
+};
+
+export const Playground = {
+  render: (args) =>
+    html`<ic-switch
+      disabled=${args.disabled}
+      label=${args.label}
+      checked=${args.checked}
+      hide-label=${args.hideLabel}
+      helper-text=${args.helperText}
+      size=${args.size}
+      theme=${args.theme}
+    ></ic-switch>`,
+
+  args: defaultArgs,
+
+  argTypes: {
+    size: {
+      options: ["medium", "small"],
+
+      control: {
+        type: "inline-radio",
+      },
+    },
+
+    theme: {
+      options: ["inherit", "light", "dark"],
+
+      control: {
+        type: "inline-radio",
+      },
+    },
+  },
+
+  name: "Playground",
+};

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

@@ -14,6 +14,9 @@ describe("ic-switch component", () => {
             html: `<ic-switch label="Custom title" disabled=true></ic-switch>`,
         });
         expect(page.root).toMatchSnapshot("renders-disabled");
+        page.rootInstance.disabled = false;
+        await page.waitForChanges();
+        expect(page.root).toMatchSnapshot("disabled-removed");
     });
     it("should render checked", async () => {
         const page = await newSpecPage({
@@ -29,20 +32,6 @@ describe("ic-switch component", () => {
         });
         expect(page.root).toMatchSnapshot("renders-small");
     });
-    it("should render with state text", async () => {
-        const page = await newSpecPage({
-            components: [Switch],
-            html: `<ic-switch label="Custom title" checked=true show-state></ic-switch>`,
-        });
-        expect(page.root).toMatchSnapshot("renders-with-state-text");
-    });
-    it("should render with state text and unchecked", async () => {
-        const page = await newSpecPage({
-            components: [Switch],
-            html: `<ic-switch label="Custom title" checked="false" show-state="true"></ic-switch>`,
-        });
-        expect(page.root).toMatchSnapshot("renders-with-state-text-unchecked");
-    });
     it("should focus", async () => {
         const page = await newSpecPage({
             components: [Switch],

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

@@ -1 +1 @@
-{"version":3,"file":"ic-switch.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-switch/test/basic/ic-switch.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Switch } from \"../../ic-switch\";\n\ndescribe(\"ic-switch component\", () => {\n  it(\"should render an aria-label\", async () => {\n    const page = await newSpecPage({\n      components: [Switch],\n      html: `<ic-switch label=\"Custom title\"></ic-switch>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-with-aria\");\n  });\n\n  it(\"should render disabled\", async () => {\n    const page = await newSpecPage({\n      components: [Switch],\n      html: `<ic-switch label=\"Custom title\" disabled=true></ic-switch>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-disabled\");\n  });\n\n  it(\"should render checked\", async () => {\n    const page = await newSpecPage({\n      components: [Switch],\n      html: `<ic-switch label=\"Custom title\" checked=true></ic-switch>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-checked\");\n  });\n\n  it(\"should render small\", async () => {\n    const page = await newSpecPage({\n      components: [Switch],\n      html: `<ic-switch label=\"Custom title\" checked=true size=\"small\"></ic-switch>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-small\");\n  });\n\n  it(\"should render with state text\", async () => {\n    const page = await newSpecPage({\n      components: [Switch],\n      html: `<ic-switch label=\"Custom title\" checked=true show-state></ic-switch>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-with-state-text\");\n  });\n\n  it(\"should render with state text and unchecked\", async () => {\n    const page = await newSpecPage({\n      components: [Switch],\n      html: `<ic-switch label=\"Custom title\" checked=\"false\" show-state=\"true\"></ic-switch>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-with-state-text-unchecked\");\n  });\n\n  it(\"should focus\", async () => {\n    const page = await newSpecPage({\n      components: [Switch],\n      html: `<ic-switch label=\"Custom title\" checked=true></ic-switch>`,\n    });\n\n    const callbackFn = jest.fn();\n    page.doc.addEventListener(\"icFocus\", callbackFn);\n    const input = page.root.shadowRoot.querySelector(\"input\");\n    input.focus();\n    await page.waitForChanges();\n    expect(callbackFn).toHaveBeenCalled();\n  });\n\n  it(\"should blur\", async () => {\n    const page = await newSpecPage({\n      components: [Switch],\n      html: `<ic-switch label=\"Custom title\" checked=true></ic-switch>`,\n    });\n\n    const callbackFn = jest.fn();\n    page.doc.addEventListener(\"icBlur\", callbackFn);\n    const input = page.root.shadowRoot.querySelector(\"input\");\n    input.blur();\n    await page.waitForChanges();\n    expect(callbackFn).toHaveBeenCalled();\n  });\n\n  it(\"should toggle checkedState\", async () => {\n    const page = await newSpecPage({\n      components: [Switch],\n      html: `<ic-switch label=\"Custom title\" checked=true></ic-switch>`,\n    });\n\n    expect(page.rootInstance.checkedState).toBe(true);\n    page.rootInstance.handleChange();\n    await page.waitForChanges();\n\n    expect(page.rootInstance.checkedState).toBe(false);\n  });\n\n  it(\"should call 'setFocus' when switch is focused\", async () => {\n    const page = await newSpecPage({\n      components: [Switch],\n      html: `<ic-switch label=\"Custom title\"></ic-switch>`,\n    });\n\n    //Can't expect anything in this test - this is to increase code coverage only\n    await page.rootInstance.setFocus().toHaveBeenCalled;\n  });\n\n  it(\"should reset to initial state on form reset\", async () => {\n    const page = await newSpecPage({\n      components: [Switch],\n      html: `<form><ic-switch label=\"Custom title\" checked=true></ic-switch><button id=\"resetButton\" type=\"reset\">Reset</button></form>`,\n    });\n\n    expect(page.rootInstance.checkedState).toBe(true);\n\n    page.rootInstance.handleChange();\n    await page.waitForChanges();\n\n    expect(page.rootInstance.checkedState).toBe(false);\n\n    await page.rootInstance.handleFormReset();\n    await page.waitForChanges();\n\n    expect(page.rootInstance.checkedState).toBe(true);\n\n    //test disconnected callback\n    page.setContent(\"\");\n  });\n});\n"]}
+{"version":3,"file":"ic-switch.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-switch/test/basic/ic-switch.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Switch } from \"../../ic-switch\";\n\ndescribe(\"ic-switch component\", () => {\n  it(\"should render an aria-label\", async () => {\n    const page = await newSpecPage({\n      components: [Switch],\n      html: `<ic-switch label=\"Custom title\"></ic-switch>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-with-aria\");\n  });\n\n  it(\"should render disabled\", async () => {\n    const page = await newSpecPage({\n      components: [Switch],\n      html: `<ic-switch label=\"Custom title\" disabled=true></ic-switch>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-disabled\");\n\n    page.rootInstance.disabled = false;\n\n    await page.waitForChanges();\n    expect(page.root).toMatchSnapshot(\"disabled-removed\");\n  });\n\n  it(\"should render checked\", async () => {\n    const page = await newSpecPage({\n      components: [Switch],\n      html: `<ic-switch label=\"Custom title\" checked=true></ic-switch>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-checked\");\n  });\n\n  it(\"should render small\", async () => {\n    const page = await newSpecPage({\n      components: [Switch],\n      html: `<ic-switch label=\"Custom title\" checked=true size=\"small\"></ic-switch>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-small\");\n  });\n\n  it(\"should focus\", async () => {\n    const page = await newSpecPage({\n      components: [Switch],\n      html: `<ic-switch label=\"Custom title\" checked=true></ic-switch>`,\n    });\n\n    const callbackFn = jest.fn();\n    page.doc.addEventListener(\"icFocus\", callbackFn);\n    const input = page.root.shadowRoot.querySelector(\"input\");\n    input.focus();\n    await page.waitForChanges();\n    expect(callbackFn).toHaveBeenCalled();\n  });\n\n  it(\"should blur\", async () => {\n    const page = await newSpecPage({\n      components: [Switch],\n      html: `<ic-switch label=\"Custom title\" checked=true></ic-switch>`,\n    });\n\n    const callbackFn = jest.fn();\n    page.doc.addEventListener(\"icBlur\", callbackFn);\n    const input = page.root.shadowRoot.querySelector(\"input\");\n    input.blur();\n    await page.waitForChanges();\n    expect(callbackFn).toHaveBeenCalled();\n  });\n\n  it(\"should toggle checkedState\", async () => {\n    const page = await newSpecPage({\n      components: [Switch],\n      html: `<ic-switch label=\"Custom title\" checked=true></ic-switch>`,\n    });\n\n    expect(page.rootInstance.checkedState).toBe(true);\n    page.rootInstance.handleChange();\n    await page.waitForChanges();\n\n    expect(page.rootInstance.checkedState).toBe(false);\n  });\n\n  it(\"should call 'setFocus' when switch is focused\", async () => {\n    const page = await newSpecPage({\n      components: [Switch],\n      html: `<ic-switch label=\"Custom title\"></ic-switch>`,\n    });\n\n    //Can't expect anything in this test - this is to increase code coverage only\n    await page.rootInstance.setFocus().toHaveBeenCalled;\n  });\n\n  it(\"should reset to initial state on form reset\", async () => {\n    const page = await newSpecPage({\n      components: [Switch],\n      html: `<form><ic-switch label=\"Custom title\" checked=true></ic-switch><button id=\"resetButton\" type=\"reset\">Reset</button></form>`,\n    });\n\n    expect(page.rootInstance.checkedState).toBe(true);\n\n    page.rootInstance.handleChange();\n    await page.waitForChanges();\n\n    expect(page.rootInstance.checkedState).toBe(false);\n\n    await page.rootInstance.handleFormReset();\n    await page.waitForChanges();\n\n    expect(page.rootInstance.checkedState).toBe(true);\n\n    //test disconnected callback\n    page.setContent(\"\");\n  });\n});\n"]}

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

@@ -47,6 +47,9 @@ export class Tab {
         this.tabPosition = undefined;
         this.theme = "inherit";
     }
+    watchDisabledHandler() {
+        removeDisabledFalse(this.disabled, this.el);
+    }
     disabledWatchHandler() {
         this.tabEnabled.emit();
     }
@@ -54,10 +57,9 @@ export class Tab {
         this.tabCreated.emit(this.el);
     }
     disconnectedCallback() {
-        const tabContext = document.querySelector(`ic-tab-context[context-id=${this.contextId}]`);
-        if (tabContext) {
-            tabContext.tabRemovedHandler(!!this.focusTabId);
-        }
+        var _a;
+        (_a = document
+            .querySelector(`ic-tab-context[context-id=${this.contextId}]`)) === null || _a === void 0 ? void 0 : _a.tabRemovedHandler(!!this.focusTabId);
     }
     componentWillLoad() {
         removeDisabledFalse(this.disabled, this.el);
@@ -74,14 +76,14 @@ export class Tab {
         }
     }
     render() {
-        const { disabled, selected, theme, monochrome } = this;
+        const { disabled, selected, theme, monochrome, handleClick, handleFocus, handleMouseDown, } = this;
         return (h(Host, { class: {
                 ["with-transition"]: !this.isInitialRender,
                 ["ic-tab-selected"]: selected,
                 ["ic-tab-disabled"]: disabled,
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 ["ic-tab-monochrome"]: monochrome,
-            }, 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.el.querySelector('[slot="icon"]') && h("slot", { name: "icon" }), h("ic-typography", { class: "ic-tab-label", variant: "label" }, h("span", null, h("slot", null))), isSlotUsed(this.el, "badge") && h("slot", { name: "badge" })));
+            }, role: "tab", "aria-selected": `${selected}`, onClick: handleClick, onFocus: handleFocus, onMouseDown: handleMouseDown, "aria-disabled": `${disabled}`, tabindex: selected ? 0 : -1 }, isSlotUsed(this.el, "icon") && h("slot", { name: "icon" }), h("ic-typography", { class: "ic-tab-label", variant: "label" }, h("span", null, h("slot", null))), isSlotUsed(this.el, "badge") && h("slot", { name: "badge" })));
     }
     static get is() { return "ic-tab"; }
     static get encapsulation() { return "shadow"; }
@@ -381,6 +383,9 @@ export class Tab {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "disabled",
+                "methodName": "watchDisabledHandler"
+            }, {
                 "propName": "disabled",
                 "methodName": "disabledWatchHandler"
             }];

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 { IcThemeMode } 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() el: HTMLIcTabElement;\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 Determines whether black variant of the tabs should be displayed. */\n  @Prop() monochrome?: 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  /** @internal Determines whether the light or dark variant of the tabs should be displayed. */\n  @Prop() theme?: IcThemeMode = \"inherit\";\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.el);\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.el);\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.el) {\n      this.el.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 separate event though to handle focus from keyboard\n    this.focusFromClick = true;\n  };\n\n  render() {\n    const { disabled, selected, theme, monochrome } = this;\n    return (\n      <Host\n        class={{\n          [\"with-transition\"]: !this.isInitialRender,\n          [\"ic-tab-selected\"]: selected,\n          [\"ic-tab-disabled\"]: disabled,\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n          [\"ic-tab-monochrome\"]: monochrome,\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.el.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.el, \"badge\") && <slot name=\"badge\"></slot>}\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 { IcThemeMode } 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() el: HTMLIcTabElement;\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  @Watch(\"disabled\")\n  watchDisabledHandler(): void {\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  /** @internal Determines whether black variant of the tabs should be displayed. */\n  @Prop() monochrome?: 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  /** @internal Determines whether the light or dark variant of the tabs should be displayed. */\n  @Prop() theme?: IcThemeMode = \"inherit\";\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.el);\n  }\n\n  disconnectedCallback(): void {\n    document\n      .querySelector<HTMLIcTabContextElement>(\n        `ic-tab-context[context-id=${this.contextId}]`\n      )\n      ?.tabRemovedHandler(!!this.focusTabId);\n  }\n\n  componentWillLoad(): void {\n    removeDisabledFalse(this.disabled, this.el);\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.el) {\n      this.el.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 separate event though to handle focus from keyboard\n    this.focusFromClick = true;\n  };\n\n  render() {\n    const {\n      disabled,\n      selected,\n      theme,\n      monochrome,\n      handleClick,\n      handleFocus,\n      handleMouseDown,\n    } = this;\n    return (\n      <Host\n        class={{\n          [\"with-transition\"]: !this.isInitialRender,\n          [\"ic-tab-selected\"]: selected,\n          [\"ic-tab-disabled\"]: disabled,\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n          [\"ic-tab-monochrome\"]: monochrome,\n        }}\n        role=\"tab\"\n        aria-selected={`${selected}`}\n        onClick={handleClick}\n        onFocus={handleFocus}\n        onMouseDown={handleMouseDown}\n        aria-disabled={`${disabled}`}\n        tabindex={selected ? 0 : -1}\n      >\n        {isSlotUsed(this.el, \"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.el, \"badge\") && <slot name=\"badge\"></slot>}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -64,6 +64,22 @@ describe("ic-tab component", () => {
     </mock:shadow-root>
     IC Tab Test
   </ic-tab>`);
+        page.rootInstance.disabled = false;
+        await page.waitForChanges();
+        expect(page.root)
+            .toEqualHtml(`<ic-tab aria-disabled="false" aria-selected="false" context-id="default" role="tab" tabindex="-1" tab-position="1">
+<mock:shadow-root>
+  <ic-typography class="ic-tab-label ic-typography-label">
+    <mock:shadow-root>
+      <slot></slot>
+    </mock:shadow-root>
+    <span>
+      <slot></slot>
+    </span>
+  </ic-typography>
+</mock:shadow-root>
+IC Tab Test
+</ic-tab>`);
     });
     it("should display an icon", async () => {
         const page = await newSpecPage({

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

@@ -1 +1 @@
-{"version":3,"file":"ic-tab.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-tab/test/basic/ic-tab.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Button } from \"../../../ic-button/ic-button\";\nimport { Tab } from \"../../ic-tab\";\nimport { Typography } from \"../../../ic-typography/ic-typography\";\n\ndescribe(\"ic-tab component\", () => {\n  it(\"should render with correct label\", async () => {\n    const page = await newSpecPage({\n      components: [Button, Tab, Typography],\n      html: `<ic-tab tab-position=1>IC Tab Test</ic-tab>`,\n    });\n\n    expect(page.root)\n      .toEqualHtml(`<ic-tab aria-disabled=\"false\" aria-selected=\"false\" context-id=\"default\" role=\"tab\" tabindex=\"-1\" tab-position=\"1\">\n    <mock:shadow-root>\n      <ic-typography class=\"ic-tab-label ic-typography-label\">\n        <mock:shadow-root>\n          <slot></slot>\n        </mock:shadow-root>\n        <span>\n          <slot></slot>\n        </span>\n      </ic-typography>\n    </mock:shadow-root>\n    IC Tab Test\n  </ic-tab>`);\n  });\n\n  it(\"should set the correct attributes when selected\", async () => {\n    const page = await newSpecPage({\n      components: [Button, Tab, Typography],\n      html: `<ic-tab selected tab-position=1>IC Tab Test</ic-tab>`,\n      supportsShadowDom: true,\n    });\n\n    expect(page.root)\n      .toEqualHtml(`<ic-tab aria-disabled=\"false\" aria-selected=\"true\" class=\"ic-tab-selected\" context-id=\"default\" role=\"tab\" selected=\"\" tabindex=\"0\" tab-position=\"1\">\n    <mock:shadow-root>\n      <ic-typography class=\"ic-tab-label ic-typography-label\">\n        <mock:shadow-root>\n          <slot></slot>\n        </mock:shadow-root>\n        <span>\n          <slot></slot>\n        </span>\n      </ic-typography>\n    </mock:shadow-root>\n    IC Tab Test\n  </ic-tab>`);\n  });\n\n  it(\"should set the disabled attribute on the button\", async () => {\n    const page = await newSpecPage({\n      components: [Button, Tab, Typography],\n      html: `<ic-tab disabled tab-position=1>IC Tab Test</ic-tab>`,\n      supportsShadowDom: true,\n    });\n\n    expect(page.root)\n      .toEqualHtml(`<ic-tab aria-disabled=\"true\" aria-selected=\"false\" class=\"ic-tab-disabled\" context-id=\"default\" disabled=\"\" role=\"tab\" tabindex=\"-1\" tab-position=\"1\">\n    <mock:shadow-root>\n      <ic-typography class=\"ic-tab-label ic-typography-label\">\n        <mock:shadow-root>\n          <slot></slot>\n        </mock:shadow-root>\n        <span>\n          <slot></slot>\n        </span>\n      </ic-typography>\n    </mock:shadow-root>\n    IC Tab Test\n  </ic-tab>`);\n  });\n\n  it(\"should display an icon\", async () => {\n    const page = await newSpecPage({\n      components: [Button, Tab, Typography],\n      html: `<ic-tab tab-position=1>IC Tab Test<svg slot=\"icon\"></svg></ic-tab>`,\n      supportsShadowDom: true,\n    });\n\n    expect(page.root)\n      .toEqualHtml(`<ic-tab aria-disabled=\"false\" aria-selected=\"false\" context-id=\"default\" role=\"tab\" tabindex=\"-1\" tab-position=\"1\">\n    <mock:shadow-root>\n    <slot name=\"icon\"></slot>\n      <ic-typography class=\"ic-tab-label ic-typography-label\">\n        <mock:shadow-root>\n          <slot></slot>\n        </mock:shadow-root>\n        <span>\n          <slot></slot>\n        </span>\n      </ic-typography>\n    </mock:shadow-root>\n    IC Tab Test\n    <svg slot=\"icon\"></svg>\n  </ic-tab>`);\n  });\n\n  it(\"should set focus to true on mouse down\", async () => {\n    const page = await newSpecPage({\n      components: [Button, Tab, Typography],\n      html: `<ic-tab tab-position=1>IC Tab Test</ic-tab>`,\n      supportsShadowDom: true,\n    });\n\n    page.rootInstance.handleMouseDown();\n    page.waitForChanges();\n\n    expect(page.rootInstance.focusFromClick).toBe(true);\n  });\n\n  it(\"should set isInitialRender to false on component update\", async () => {\n    const page = await newSpecPage({\n      components: [Button, Tab, Typography],\n      html: `<ic-tab tab-position=1>IC Tab Test</ic-tab>`,\n      supportsShadowDom: true,\n    });\n\n    page.rootInstance.componentDidUpdate();\n    page.waitForChanges();\n\n    expect(page.rootInstance.isInitialRender).toBe(false);\n  });\n\n  it(\"should emit tabFocus on handleFocus\", async () => {\n    const page = await newSpecPage({\n      components: [Button, Tab, Typography],\n      html: `<ic-tab tab-position=1>IC Tab Test</ic-tab>`,\n      supportsShadowDom: true,\n    });\n\n    const callbackFn = jest.fn();\n    page.doc.addEventListener(\"tabFocus\", callbackFn);\n    page.rootInstance.handleFocus();\n    page.waitForChanges();\n\n    expect(callbackFn).toHaveBeenCalled();\n  });\n\n  it(\"should emit tabClick on handleClick\", async () => {\n    const page = await newSpecPage({\n      components: [Button, Tab, Typography],\n      html: `<ic-tab tab-position=1>IC Tab Test</ic-tab>`,\n      supportsShadowDom: true,\n    });\n\n    const callbackFn = jest.fn();\n    page.doc.addEventListener(\"tabClick\", callbackFn);\n    page.rootInstance.handleClick();\n    page.waitForChanges();\n\n    expect(callbackFn).toHaveBeenCalled();\n  });\n\n  it(\"should call 'setFocus' when tab is focused\", async () => {\n    const page = await newSpecPage({\n      components: [Tab],\n      html: `<ic-tab tab-position=1>IC Tab Test</ic-tab>`,\n    });\n\n    //Can't expect anything in this test - this is to increase code coverage only\n    await page.rootInstance.setFocus().toHaveBeenCalled;\n  });\n\n  it(\"should emit tabFocus on handleClick when focusFromClick is true\", async () => {\n    const page = await newSpecPage({\n      components: [Button, Tab, Typography],\n      html: `<ic-tab tab-position=1>IC Tab Test</ic-tab>`,\n      supportsShadowDom: true,\n    });\n\n    page.rootInstance.focusFromClick = true;\n    page.waitForChanges();\n\n    const callbackFn = jest.fn();\n    page.doc.addEventListener(\"tabFocus\", callbackFn);\n    page.rootInstance.handleClick();\n    page.waitForChanges();\n\n    expect(callbackFn).toHaveBeenCalled();\n    expect(page.rootInstance.focusFromClick).toBe(false);\n  });\n});\n"]}
+{"version":3,"file":"ic-tab.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-tab/test/basic/ic-tab.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Button } from \"../../../ic-button/ic-button\";\nimport { Tab } from \"../../ic-tab\";\nimport { Typography } from \"../../../ic-typography/ic-typography\";\n\ndescribe(\"ic-tab component\", () => {\n  it(\"should render with correct label\", async () => {\n    const page = await newSpecPage({\n      components: [Button, Tab, Typography],\n      html: `<ic-tab tab-position=1>IC Tab Test</ic-tab>`,\n    });\n\n    expect(page.root)\n      .toEqualHtml(`<ic-tab aria-disabled=\"false\" aria-selected=\"false\" context-id=\"default\" role=\"tab\" tabindex=\"-1\" tab-position=\"1\">\n    <mock:shadow-root>\n      <ic-typography class=\"ic-tab-label ic-typography-label\">\n        <mock:shadow-root>\n          <slot></slot>\n        </mock:shadow-root>\n        <span>\n          <slot></slot>\n        </span>\n      </ic-typography>\n    </mock:shadow-root>\n    IC Tab Test\n  </ic-tab>`);\n  });\n\n  it(\"should set the correct attributes when selected\", async () => {\n    const page = await newSpecPage({\n      components: [Button, Tab, Typography],\n      html: `<ic-tab selected tab-position=1>IC Tab Test</ic-tab>`,\n      supportsShadowDom: true,\n    });\n\n    expect(page.root)\n      .toEqualHtml(`<ic-tab aria-disabled=\"false\" aria-selected=\"true\" class=\"ic-tab-selected\" context-id=\"default\" role=\"tab\" selected=\"\" tabindex=\"0\" tab-position=\"1\">\n    <mock:shadow-root>\n      <ic-typography class=\"ic-tab-label ic-typography-label\">\n        <mock:shadow-root>\n          <slot></slot>\n        </mock:shadow-root>\n        <span>\n          <slot></slot>\n        </span>\n      </ic-typography>\n    </mock:shadow-root>\n    IC Tab Test\n  </ic-tab>`);\n  });\n\n  it(\"should set the disabled attribute on the button\", async () => {\n    const page = await newSpecPage({\n      components: [Button, Tab, Typography],\n      html: `<ic-tab disabled tab-position=1>IC Tab Test</ic-tab>`,\n      supportsShadowDom: true,\n    });\n\n    expect(page.root)\n      .toEqualHtml(`<ic-tab aria-disabled=\"true\" aria-selected=\"false\" class=\"ic-tab-disabled\" context-id=\"default\" disabled=\"\" role=\"tab\" tabindex=\"-1\" tab-position=\"1\">\n    <mock:shadow-root>\n      <ic-typography class=\"ic-tab-label ic-typography-label\">\n        <mock:shadow-root>\n          <slot></slot>\n        </mock:shadow-root>\n        <span>\n          <slot></slot>\n        </span>\n      </ic-typography>\n    </mock:shadow-root>\n    IC Tab Test\n  </ic-tab>`);\n\n    page.rootInstance.disabled = false;\n\n    await page.waitForChanges();\n    expect(page.root)\n      .toEqualHtml(`<ic-tab aria-disabled=\"false\" aria-selected=\"false\" context-id=\"default\" role=\"tab\" tabindex=\"-1\" tab-position=\"1\">\n<mock:shadow-root>\n  <ic-typography class=\"ic-tab-label ic-typography-label\">\n    <mock:shadow-root>\n      <slot></slot>\n    </mock:shadow-root>\n    <span>\n      <slot></slot>\n    </span>\n  </ic-typography>\n</mock:shadow-root>\nIC Tab Test\n</ic-tab>`);\n  });\n\n  it(\"should display an icon\", async () => {\n    const page = await newSpecPage({\n      components: [Button, Tab, Typography],\n      html: `<ic-tab tab-position=1>IC Tab Test<svg slot=\"icon\"></svg></ic-tab>`,\n      supportsShadowDom: true,\n    });\n\n    expect(page.root)\n      .toEqualHtml(`<ic-tab aria-disabled=\"false\" aria-selected=\"false\" context-id=\"default\" role=\"tab\" tabindex=\"-1\" tab-position=\"1\">\n    <mock:shadow-root>\n    <slot name=\"icon\"></slot>\n      <ic-typography class=\"ic-tab-label ic-typography-label\">\n        <mock:shadow-root>\n          <slot></slot>\n        </mock:shadow-root>\n        <span>\n          <slot></slot>\n        </span>\n      </ic-typography>\n    </mock:shadow-root>\n    IC Tab Test\n    <svg slot=\"icon\"></svg>\n  </ic-tab>`);\n  });\n\n  it(\"should set focus to true on mouse down\", async () => {\n    const page = await newSpecPage({\n      components: [Button, Tab, Typography],\n      html: `<ic-tab tab-position=1>IC Tab Test</ic-tab>`,\n      supportsShadowDom: true,\n    });\n\n    page.rootInstance.handleMouseDown();\n    page.waitForChanges();\n\n    expect(page.rootInstance.focusFromClick).toBe(true);\n  });\n\n  it(\"should set isInitialRender to false on component update\", async () => {\n    const page = await newSpecPage({\n      components: [Button, Tab, Typography],\n      html: `<ic-tab tab-position=1>IC Tab Test</ic-tab>`,\n      supportsShadowDom: true,\n    });\n\n    page.rootInstance.componentDidUpdate();\n    page.waitForChanges();\n\n    expect(page.rootInstance.isInitialRender).toBe(false);\n  });\n\n  it(\"should emit tabFocus on handleFocus\", async () => {\n    const page = await newSpecPage({\n      components: [Button, Tab, Typography],\n      html: `<ic-tab tab-position=1>IC Tab Test</ic-tab>`,\n      supportsShadowDom: true,\n    });\n\n    const callbackFn = jest.fn();\n    page.doc.addEventListener(\"tabFocus\", callbackFn);\n    page.rootInstance.handleFocus();\n    page.waitForChanges();\n\n    expect(callbackFn).toHaveBeenCalled();\n  });\n\n  it(\"should emit tabClick on handleClick\", async () => {\n    const page = await newSpecPage({\n      components: [Button, Tab, Typography],\n      html: `<ic-tab tab-position=1>IC Tab Test</ic-tab>`,\n      supportsShadowDom: true,\n    });\n\n    const callbackFn = jest.fn();\n    page.doc.addEventListener(\"tabClick\", callbackFn);\n    page.rootInstance.handleClick();\n    page.waitForChanges();\n\n    expect(callbackFn).toHaveBeenCalled();\n  });\n\n  it(\"should call 'setFocus' when tab is focused\", async () => {\n    const page = await newSpecPage({\n      components: [Tab],\n      html: `<ic-tab tab-position=1>IC Tab Test</ic-tab>`,\n    });\n\n    //Can't expect anything in this test - this is to increase code coverage only\n    await page.rootInstance.setFocus().toHaveBeenCalled;\n  });\n\n  it(\"should emit tabFocus on handleClick when focusFromClick is true\", async () => {\n    const page = await newSpecPage({\n      components: [Button, Tab, Typography],\n      html: `<ic-tab tab-position=1>IC Tab Test</ic-tab>`,\n      supportsShadowDom: true,\n    });\n\n    page.rootInstance.focusFromClick = true;\n    page.waitForChanges();\n\n    const callbackFn = jest.fn();\n    page.doc.addEventListener(\"tabFocus\", callbackFn);\n    page.rootInstance.handleClick();\n    page.waitForChanges();\n\n    expect(callbackFn).toHaveBeenCalled();\n    expect(page.rootInstance.focusFromClick).toBe(false);\n  });\n});\n"]}