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

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

@@ -23,25 +23,20 @@ export class Switch {
     this.handleFormReset = () => {
       this.checkedState = this.initiallyChecked;
     };
-    this.label = undefined;
-    this.hideLabel = false;
-    this.helperText = "";
+    this.checkedState = false;
+    this.initiallyChecked = this.checked;
     this.checked = false;
-    this.small = false;
     this.disabled = false;
+    this.helperText = "";
+    this.hideLabel = false;
+    this.label = undefined;
     this.name = this.inputId;
     this.showState = false;
+    this.small = false;
     this.value = "on";
-    this.checkedState = false;
-    this.initiallyChecked = this.checked;
   }
-  /**
-   * Sets focus on the switch.
-   */
-  async setFocus() {
-    if (this.el.shadowRoot.querySelector("input")) {
-      this.el.shadowRoot.querySelector("input").focus();
-    }
+  disconnectedCallback() {
+    removeFormResetListener(this.el, this.handleFormReset);
   }
   componentWillLoad() {
     this.checkedState = this.checked;
@@ -51,8 +46,13 @@ export class Switch {
   componentDidLoad() {
     onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Switch");
   }
-  disconnectedCallback() {
-    removeFormResetListener(this.el, this.handleFormReset);
+  /**
+   * Sets focus on the switch.
+   */
+  async setFocus() {
+    if (this.el.shadowRoot.querySelector("input")) {
+      this.el.shadowRoot.querySelector("input").focus();
+    }
   }
   render() {
     const { label, checkedState, small, disabled, name, showState, value, hideLabel, helperText, inputId, } = this;
@@ -82,24 +82,25 @@ export class Switch {
   }
   static get properties() {
     return {
-      "label": {
-        "type": "string",
+      "checked": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
-        "required": true,
-        "optional": false,
+        "required": false,
+        "optional": true,
         "docs": {
           "tags": [],
-          "text": "The aria-label applied to the switch when no visual 'name' is provided."
+          "text": "If `true`, the switch will display as checked."
         },
-        "attribute": "label",
-        "reflect": false
+        "attribute": "checked",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "hideLabel": {
+      "disabled": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -111,9 +112,9 @@ export class Switch {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "If `true`, the label will be hidden and the required label value will be applied as an aria-label."
+          "text": "If `true`, the disabled state will be set."
         },
-        "attribute": "hide-label",
+        "attribute": "disabled",
         "reflect": false,
         "defaultValue": "false"
       },
@@ -135,7 +136,7 @@ export class Switch {
         "reflect": false,
         "defaultValue": "\"\""
       },
-      "checked": {
+      "hideLabel": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -147,67 +148,66 @@ export class Switch {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "If `true`, the switch will display as checked."
+          "text": "If `true`, the label will be hidden and the required label value will be applied as an aria-label."
         },
-        "attribute": "checked",
+        "attribute": "hide-label",
         "reflect": false,
         "defaultValue": "false"
       },
-      "small": {
-        "type": "boolean",
+      "label": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
-        "required": false,
-        "optional": true,
+        "required": true,
+        "optional": false,
         "docs": {
           "tags": [],
-          "text": "If `true`, the small styling will be applied to the switch."
+          "text": "The aria-label applied to the switch when no visual 'name' is provided."
         },
-        "attribute": "small",
-        "reflect": false,
-        "defaultValue": "false"
+        "attribute": "label",
+        "reflect": false
       },
-      "disabled": {
-        "type": "boolean",
+      "name": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "If `true`, the disabled state will be set."
+          "text": "The name of the control, which is submitted with the form data."
         },
-        "attribute": "disabled",
+        "attribute": "name",
         "reflect": false,
-        "defaultValue": "false"
+        "defaultValue": "this.inputId"
       },
-      "name": {
-        "type": "string",
+      "showState": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The name of the control, which is submitted with the form data."
+          "text": "If `true`, the switch will render the On/Off state text."
         },
-        "attribute": "name",
+        "attribute": "show-state",
         "reflect": false,
-        "defaultValue": "this.inputId"
+        "defaultValue": "false"
       },
-      "showState": {
+      "small": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -219,9 +219,9 @@ export class Switch {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "If `true`, the switch will render the On/Off state text."
+          "text": "If `true`, the small styling will be applied to the switch."
         },
-        "attribute": "show-state",
+        "attribute": "small",
         "reflect": false,
         "defaultValue": "false"
       },
@@ -253,6 +253,21 @@ export class Switch {
   }
   static get events() {
     return [{
+        "method": "icBlur",
+        "name": "icBlur",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the toggle loses focus."
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
         "method": "icChange",
         "name": "icChange",
         "bubbles": true,
@@ -287,21 +302,6 @@ export class Switch {
           "resolved": "void",
           "references": {}
         }
-      }, {
-        "method": "icBlur",
-        "name": "icBlur",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the toggle loses focus."
-        },
-        "complexType": {
-          "original": "void",
-          "resolved": "void",
-          "references": {}
-        }
       }];
   }
   static get methods() {

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} 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\";\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  /**\n   * The aria-label applied to the switch when no visual 'name' is provided.\n   */\n  @Prop() label!: 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   * The helper text that will be displayed for additional field guidance.\n   */\n  @Prop() helperText?: string = \"\";\n  /**\n   * If `true`, the switch will display as checked.\n   */\n  @Prop() checked?: boolean = false;\n  /**\n   * If `true`, the small styling will be applied to the switch.\n   */\n  @Prop() small?: boolean = false;\n  /**\n   * If `true`, the disabled state will be set.\n   */\n  @Prop() disabled?: boolean = false;\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name?: string = this.inputId;\n  /**\n   * If `true`, the switch will render the On/Off state text.\n   */\n  @Prop() showState?: boolean = false;\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 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  /**\n   * Emitted when the toggle loses focus.\n   */\n  @Event() icBlur!: EventEmitter<void>;\n\n  @State() checkedState: boolean = false;\n  @State() initiallyChecked = this.checked;\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  /**\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  componentWillLoad(): void {\n    this.checkedState = this.checked;\n    addFormResetListener(this.el, this.handleFormReset);\n\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  disconnectedCallback(): void {\n    removeFormResetListener(this.el, this.handleFormReset);\n  }\n\n  render() {\n    const {\n      label,\n      checkedState,\n      small,\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\"]: 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\"]: 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={small ? \"2\" : \"1\"}\n                x2=\"9\"\n                y2={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={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} 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\";\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  /**\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   * If `true`, the small styling will be applied to the switch.\n   */\n  @Prop() small?: boolean = false;\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      small,\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\"]: 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\"]: 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={small ? \"2\" : \"1\"}\n                x2=\"9\"\n                y2={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={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"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-switch.test.a11y.js","sourceRoot":"","sources":["../../../../../src/components/ic-switch/test/a11y/ic-switch.test.a11y.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,kCAAkC,EAAE,MAAM,oCAAoC,CAAC;AAExF,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;EACzB,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC,4BAA4B,CAAC,CAAC;IACvD,kCAAkC,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;EAC7C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { fixture } from \"@open-wc/testing-helpers\";\nimport { axe } from \"jest-axe\";\nimport { checkShadowElementRendersCorrectly } from \"../../../../utils/testa11y.helpers\";\n\ndescribe(\"ic-switch\", () => {\n  it(\"passes accessibility\", async () => {\n    const el = await fixture(`<ic-switch label=\"test\" />`);\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n});\n"]}

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

@@ -1,5 +1,5 @@
 import { newSpecPage } from "@stencil/core/testing";
-import { Switch } from "./ic-switch";
+import { Switch } from "../../ic-switch";
 describe("ic-switch component", () => {
   it("should render an aria-label", async () => {
     const page = await newSpecPage({

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

@@ -0,0 +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 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"]}

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

@@ -6,8 +6,8 @@ import { removeDisabledFalse } from "../../utils/helpers";
  */
 export class Tab {
   constructor() {
-    this.isInitialRender = true;
     this.focusFromClick = false;
+    this.isInitialRender = true;
     this.handleClick = () => {
       this.tabClick.emit({
         tabId: this.tabId,
@@ -39,19 +39,20 @@ export class Tab {
       //the focus does need to be a seperate event though to handle focus from keyboard
       this.focusFromClick = true;
     };
+    this.appearance = "dark";
     this.contextId = "default";
     this.disabled = false;
     this.selected = false;
     this.tabId = undefined;
     this.tabPosition = undefined;
-    this.appearance = "dark";
   }
-  /**
-   * Sets focus on the tab.
-   */
-  async setFocus() {
-    if (this.host) {
-      this.host.focus();
+  connectedCallback() {
+    this.tabCreated.emit(this.host);
+  }
+  disconnectedCallback() {
+    const tabContext = document.querySelector(`ic-tab-context[context-id=${this.contextId}]`);
+    if (tabContext) {
+      tabContext.tabRemovedHandler(!!this.focusTabId);
     }
   }
   componentWillLoad() {
@@ -60,13 +61,12 @@ export class Tab {
   componentDidUpdate() {
     this.isInitialRender = false;
   }
-  connectedCallback() {
-    this.tabCreated.emit(this.host);
-  }
-  disconnectedCallback() {
-    const tabContext = document.querySelector(`ic-tab-context[context-id=${this.contextId}]`);
-    if (tabContext) {
-      tabContext.tabRemovedHandler(!!this.focusTabId);
+  /**
+   * Sets focus on the tab.
+   */
+  async setFocus() {
+    if (this.host) {
+      this.host.focus();
     }
   }
   render() {
@@ -92,6 +92,32 @@ export class Tab {
   }
   static get properties() {
     return {
+      "appearance": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IcThemeForegroundNoDefault",
+          "resolved": "\"dark\" | \"light\"",
+          "references": {
+            "IcThemeForegroundNoDefault": {
+              "location": "import",
+              "path": "../../utils/types"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "Determines whether the light or dark variant of the tabs should be displayed."
+            }],
+          "text": ""
+        },
+        "attribute": "appearance",
+        "reflect": false,
+        "defaultValue": "\"dark\""
+      },
       "contextId": {
         "type": "string",
         "mutable": false,
@@ -191,32 +217,6 @@ export class Tab {
         },
         "attribute": "tab-position",
         "reflect": false
-      },
-      "appearance": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "IcThemeForegroundNoDefault",
-          "resolved": "\"dark\" | \"light\"",
-          "references": {
-            "IcThemeForegroundNoDefault": {
-              "location": "import",
-              "path": "../../utils/types"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [{
-              "name": "internal",
-              "text": "Determines whether the light or dark variant of the tabs should be displayed."
-            }],
-          "text": ""
-        },
-        "attribute": "appearance",
-        "reflect": false,
-        "defaultValue": "\"dark\""
       }
     };
   }
@@ -245,47 +245,47 @@ export class Tab {
           }
         }
       }, {
-        "method": "tabFocus",
-        "name": "tabFocus",
+        "method": "tabCreated",
+        "name": "tabCreated",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
         "docs": {
           "tags": [{
               "name": "internal",
-              "text": "Emitted when a tab is focussed."
+              "text": "Emitted when a tab is dynamically created."
             }],
           "text": ""
         },
         "complexType": {
-          "original": "IcTabClickEventDetail",
-          "resolved": "IcTabClickEventDetail",
+          "original": "HTMLIcTabElement",
+          "resolved": "HTMLIcTabElement",
           "references": {
-            "IcTabClickEventDetail": {
-              "location": "import",
-              "path": "./ic-tab.types"
+            "HTMLIcTabElement": {
+              "location": "global"
             }
           }
         }
       }, {
-        "method": "tabCreated",
-        "name": "tabCreated",
+        "method": "tabFocus",
+        "name": "tabFocus",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
         "docs": {
           "tags": [{
               "name": "internal",
-              "text": "Emitted when a tab is dynamically created."
+              "text": "Emitted when a tab is focussed."
             }],
           "text": ""
         },
         "complexType": {
-          "original": "HTMLIcTabElement",
-          "resolved": "HTMLIcTabElement",
+          "original": "IcTabClickEventDetail",
+          "resolved": "IcTabClickEventDetail",
           "references": {
-            "HTMLIcTabElement": {
-              "location": "global"
+            "IcTabClickEventDetail": {
+              "location": "import",
+              "path": "./ic-tab.types"
             }
           }
         }

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} 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  @Element() host: 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 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() appearance?: IcThemeForegroundNoDefault = \"dark\";\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 focussed.\n   */\n  @Event() tabFocus: EventEmitter<IcTabClickEventDetail>;\n  /**\n   * @internal Emitted when a tab is dynamically created.\n   */\n  @Event() tabCreated: EventEmitter<HTMLIcTabElement>;\n\n  /**\n   * @internal Emitted when a tab is unmounted.\n   */\n  @Event() tabRemoved: EventEmitter<void>;\n\n  private isInitialRender: boolean = true;\n  private focusFromClick: boolean = false;\n  private focusTabId: string;\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  /**\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  componentWillLoad(): void {\n    removeDisabledFalse(this.disabled, this.host);\n  }\n\n  componentDidUpdate(): void {\n    this.isInitialRender = false;\n  }\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  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} 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  /**\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 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"]}

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-tab.e2e.js","sourceRoot":"","sources":["../../../../../src/components/ic-tab/test/basic/ic-tab.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;EAChC,EAAE,CAAC,yCAAyC,EAAE,KAAK,IAAI,EAAE;IACvD,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CACnB,gEAAgE,CACjE,CAAC;IACF,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,GAAG,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACtC,MAAM,QAAQ,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC;IACnD,MAAM,GAAG,CAAC,KAAK,EAAE,CAAC;IAElB,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,CAAC,QAAQ,CAAC,CAAC,yBAAyB,CAAC;MACzC,KAAK,EAAE,SAAS;MAChB,SAAS,EAAE,SAAS;MACpB,QAAQ,EAAE,CAAC;KACZ,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,0CAA0C,EAAE,KAAK,IAAI,EAAE;IACxD,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CACnB,gEAAgE,CACjE,CAAC;IACF,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,GAAG,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACtC,MAAM,QAAQ,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC;IACnD,MAAM,GAAG,CAAC,KAAK,EAAE,CAAC;IAElB,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,CAAC,QAAQ,CAAC,CAAC,yBAAyB,CAAC;MACzC,KAAK,EAAE,SAAS;MAChB,SAAS,EAAE,SAAS;MACpB,QAAQ,EAAE,CAAC;KACZ,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from \"@stencil/core/testing\";\n\ndescribe(\"ic-tab component\", () => {\n  it(\"should call tabClick event when clicked\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<ic-tab tab-id=\"test-id\" tab-position=\"1\">IC Tab Test</ic-tab>`\n    );\n    await page.waitForChanges();\n\n    const tab = await page.find(\"ic-tab\");\n    const tabClick = await page.spyOnEvent(\"tabClick\");\n    await tab.click();\n\n    await page.waitForChanges();\n\n    expect(tabClick).toHaveReceivedEventDetail({\n      tabId: \"test-id\",\n      contextId: \"default\",\n      position: 1,\n    });\n  });\n\n  it(\"should call tabFocus event when focussed\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<ic-tab tab-id=\"test-id\" tab-position=\"1\">IC Tab Test</ic-tab>`\n    );\n    await page.waitForChanges();\n\n    const tab = await page.find(\"ic-tab\");\n    const tabFocus = await page.spyOnEvent(\"tabFocus\");\n    await tab.focus();\n\n    await page.waitForChanges();\n\n    expect(tabFocus).toHaveReceivedEventDetail({\n      tabId: \"test-id\",\n      contextId: \"default\",\n      position: 1,\n    });\n  });\n});\n"]}

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

@@ -1,7 +1,7 @@
 import { newSpecPage } from "@stencil/core/testing";
-import { Button } from "../ic-button/ic-button";
-import { Tab } from "./ic-tab";
-import { Typography } from "../ic-typography/ic-typography";
+import { Button } from "../../../ic-button/ic-button";
+import { Tab } from "../../ic-tab";
+import { Typography } from "../../../ic-typography/ic-typography";
 describe("ic-tab component", () => {
   it("should render with correct label", async () => {
     const page = await newSpecPage({

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

@@ -0,0 +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=\"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=\"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"]}