@ukic/web-components 2.10.0 → 2.12.0

package/dist/collection/components/ic-toggle-button/ic-toggle-button.js

@@ -0,0 +1,291 @@
+import { Host, h, } from "@stencil/core";
+import { isSlotUsed, onComponentRequiredPropUndefined, removeDisabledFalse, } from "../../utils/helpers";
+/**
+ * @slot icon - Content will be displayed alongside the toggle button label.
+ * @slot badge - Badge component overlaying the top right of the toggle button.
+ */
+export class ToggleButton {
+    constructor() {
+        this.handleClick = () => {
+            !this.loading &&
+                !this.disabled &&
+                this.icToggleChecked.emit({
+                    checked: this.toggleChecked,
+                });
+        };
+        this.accessibleLabel = undefined;
+        this.appearance = "default";
+        this.disabled = false;
+        this.fullWidth = false;
+        this.iconPlacement = undefined;
+        this.label = undefined;
+        this.loading = false;
+        this.size = "default";
+        this.toggleChecked = false;
+        this.variant = "default";
+    }
+    componentWillLoad() {
+        removeDisabledFalse(this.disabled, this.el);
+    }
+    componentDidLoad() {
+        onComponentRequiredPropUndefined([
+            {
+                prop: this.variant === "icon" ? this.accessibleLabel : this.label,
+                propName: this.variant === "icon" ? "accessible-label" : "label",
+            },
+        ], "Toggle button");
+    }
+    handleHostClick(e) {
+        if (this.disabled) {
+            e.stopImmediatePropagation();
+        }
+        else if (!this.loading) {
+            this.toggleChecked = !this.toggleChecked;
+        }
+    }
+    render() {
+        return (h(Host, { class: {
+                ["disabled"]: this.disabled,
+                ["checked"]: this.toggleChecked,
+                [`${this.appearance}`]: true,
+                ["icon"]: this.variant === "icon",
+                [`${this.size}`]: true,
+                ["loading"]: this.loading,
+            } }, h("ic-button", { role: "checkbox", "aria-checked": this.toggleChecked ? "true" : "false", variant: this.variant === "icon" ? "icon" : "secondary", onClick: this.handleClick, title: this.accessibleLabel, "aria-label": `${this.accessibleLabel ? this.accessibleLabel : this.label}, ${this.toggleChecked ? "ticked" : "unticked"}`, disabled: this.disabled, appearance: this.appearance, size: this.size, fullWidth: this.fullWidth, loading: this.loading, "aria-disabled": `${this.disabled}` }, this.variant !== "icon" && this.label, h("slot", null), isSlotUsed(this.el, "icon") && (h("slot", { name: "icon", slot: `${this.iconPlacement ? `${this.iconPlacement}-icon` : "icon"}` })), isSlotUsed(this.el, "badge") && (h("slot", { name: "badge", slot: "badge" })))));
+    }
+    static get is() { return "ic-toggle-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ic-toggle-button.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ic-toggle-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "accessibleLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The accessible label that will be applied to the toggle button. This is required for the icon variant of toggle buttons."
+                },
+                "attribute": "accessible-label",
+                "reflect": false
+            },
+            "appearance": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcThemeForeground",
+                    "resolved": "\"dark\" | \"default\" | \"light\"",
+                    "references": {
+                        "IcThemeForeground": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcThemeForeground"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The appearance of the toggle button."
+                },
+                "attribute": "appearance",
+                "reflect": false,
+                "defaultValue": "\"default\""
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the toggle button will be in disabled state."
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "fullWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the toggle button will fill the width of the container."
+                },
+                "attribute": "full-width",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "iconPlacement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"left\" | \"right\" | \"top\"",
+                    "resolved": "\"left\" | \"right\" | \"top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The placement of the icon in relation to the toggle button label."
+                },
+                "attribute": "icon-placement",
+                "reflect": false
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The label to display in the toggle button. This is required for the default variant of toggle buttons."
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the toggle button will be in loading state."
+                },
+                "attribute": "loading",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcSizes",
+                    "resolved": "\"default\" | \"large\" | \"small\"",
+                    "references": {
+                        "IcSizes": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcSizes"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the toggle button to be displayed."
+                },
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "\"default\""
+            },
+            "toggleChecked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the toggle button will be in a checked state."
+                },
+                "attribute": "toggle-checked",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"default\" | \"icon\"",
+                    "resolved": "\"default\" | \"icon\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The variant of the toggle button."
+                },
+                "attribute": "variant",
+                "reflect": true,
+                "defaultValue": "\"default\""
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "icToggleChecked",
+                "name": "icToggleChecked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user clicks a toggle button."
+                },
+                "complexType": {
+                    "original": "{\n    checked: boolean;\n  }",
+                    "resolved": "{ checked: boolean; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleHostClick",
+                "target": undefined,
+                "capture": true,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=ic-toggle-button.js.map

package/dist/collection/components/ic-toggle-button/ic-toggle-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-toggle-button.js","sourceRoot":"","sources":["../../../src/components/ic-toggle-button/ic-toggle-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  Event,\n  EventEmitter,\n  Listen,\n  h,\n} from \"@stencil/core\";\nimport {\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport { IcSizes, IcThemeForeground } from \"../../utils/types\";\n\n/**\n * @slot icon - Content will be displayed alongside the toggle button label.\n * @slot badge - Badge component overlaying the top right of the toggle button.\n */\n\n@Component({\n  tag: \"ic-toggle-button\",\n  styleUrl: \"ic-toggle-button.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class ToggleButton {\n  @Element() el: HTMLIcToggleButtonElement;\n\n  /**\n   * The accessible label that will be applied to the toggle button. This is required for the icon variant of toggle buttons.\n   */\n  @Prop() accessibleLabel?: string;\n\n  /**\n   * The appearance of the toggle button.\n   */\n  @Prop() appearance?: IcThemeForeground = \"default\";\n\n  /**\n   * If `true`, the toggle button will be in disabled state.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * If `true`, the toggle button will fill the width of the container.\n   */\n  @Prop() fullWidth?: boolean = false;\n\n  /**\n   * The placement of the icon in relation to the toggle button label.\n   */\n  @Prop() iconPlacement?: \"left\" | \"right\" | \"top\";\n\n  /**\n   * The label to display in the toggle button. This is required for the default variant of toggle buttons.\n   */\n  @Prop() label?: string;\n\n  /**\n   * If `true`, the toggle button will be in loading state.\n   */\n  @Prop() loading?: boolean = false;\n\n  /**\n   * The size of the toggle button to be displayed.\n   */\n  @Prop() size?: IcSizes = \"default\";\n\n  /**\n   * If `true`, the toggle button will be in a checked state.\n   */\n  @Prop({ mutable: true, reflect: true }) toggleChecked: boolean = false;\n\n  /**\n   * The variant of the toggle button.\n   */\n  @Prop({ reflect: true }) variant: \"default\" | \"icon\" = \"default\";\n\n  /**\n   * Emitted when the user clicks a toggle button.\n   */\n  @Event() icToggleChecked: EventEmitter<{\n    checked: boolean;\n  }>;\n\n  componentWillLoad(): void {\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [\n        {\n          prop: this.variant === \"icon\" ? this.accessibleLabel : this.label,\n          propName: this.variant === \"icon\" ? \"accessible-label\" : \"label\",\n        },\n      ],\n      \"Toggle button\"\n    );\n  }\n\n  @Listen(\"click\", { capture: true })\n  handleHostClick(e: Event): void {\n    if (this.disabled) {\n      e.stopImmediatePropagation();\n    } else if (!this.loading) {\n      this.toggleChecked = !this.toggleChecked;\n    }\n  }\n\n  private handleClick = (): void => {\n    !this.loading &&\n      !this.disabled &&\n      this.icToggleChecked.emit({\n        checked: this.toggleChecked,\n      });\n  };\n\n  render() {\n    return (\n      <Host\n        class={{\n          [\"disabled\"]: this.disabled,\n          [\"checked\"]: this.toggleChecked,\n          [`${this.appearance}`]: true,\n          [\"icon\"]: this.variant === \"icon\",\n          [`${this.size}`]: true,\n          [\"loading\"]: this.loading,\n        }}\n      >\n        <ic-button\n          role=\"checkbox\"\n          aria-checked={this.toggleChecked ? \"true\" : \"false\"}\n          variant={this.variant === \"icon\" ? \"icon\" : \"secondary\"}\n          onClick={this.handleClick}\n          title={this.accessibleLabel}\n          aria-label={`${\n            this.accessibleLabel ? this.accessibleLabel : this.label\n          }, ${this.toggleChecked ? \"ticked\" : \"unticked\"}`}\n          disabled={this.disabled}\n          appearance={this.appearance}\n          size={this.size}\n          fullWidth={this.fullWidth}\n          loading={this.loading}\n          aria-disabled={`${this.disabled}`}\n        >\n          {this.variant !== \"icon\" && this.label}\n          <slot />\n          {isSlotUsed(this.el, \"icon\") && (\n            <slot\n              name=\"icon\"\n              slot={`${\n                this.iconPlacement ? `${this.iconPlacement}-icon` : \"icon\"\n              }`}\n            ></slot>\n          )}\n          {isSlotUsed(this.el, \"badge\") && (\n            <slot name=\"badge\" slot=\"badge\"></slot>\n          )}\n        </ic-button>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,116 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { ToggleButton } from "../../ic-toggle-button";
+describe("ic-toggle-button component", () => {
+    it("should render", async () => {
+        const page = await newSpecPage({
+            components: [ToggleButton],
+            html: `<ic-toggle-button label="Toggle"></ic-toggle-button>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should render icon variant", async () => {
+        const page = await newSpecPage({
+            components: [ToggleButton],
+            html: `<ic-toggle-button variant="icon" accessible-label="Refresh the page">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height="24px"
+            viewBox="0 0 24 24"
+            width="24px"
+            fill="#000000"
+          >
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path
+              d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+            />
+          </svg>
+        </ic-toggle-button>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should render slotted icon", async () => {
+        const page = await newSpecPage({
+            components: [ToggleButton],
+            html: `<ic-toggle-button label="Toggle">
+          <svg
+            slot="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            height="24px"
+            viewBox="0 0 24 24"
+            width="24px"
+            fill="#000000"
+          >
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path
+              d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+            />
+          </svg>
+        </ic-toggle-button>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should render slotted icon with icon placement", async () => {
+        const page = await newSpecPage({
+            components: [ToggleButton],
+            html: `<ic-toggle-button label="Toggle" icon-placement="right">
+          <svg
+            slot="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            height="24px"
+            viewBox="0 0 24 24"
+            width="24px"
+            fill="#000000"
+          >
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path
+              d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+            />
+          </svg>
+        </ic-toggle-button>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should render slotted badge", async () => {
+        const page = await newSpecPage({
+            components: [ToggleButton],
+            html: `<ic-toggle-button label="Toggle">
+          <ic-badge text-label="1" slot="badge" variant="success"></ic-badge>
+        </ic-toggle-button>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should update toggleChecked value on click", async () => {
+        const page = await newSpecPage({
+            components: [ToggleButton],
+            html: `<ic-toggle-button label="Toggle" id='test-button' onclick='alert('test')'></ic-toggle-button>`,
+        });
+        expect(page.rootInstance.toggleChecked).toBeFalsy();
+        const element = document.getElementById("test-button");
+        element.click();
+        await page.waitForChanges();
+        expect(page.rootInstance.toggleChecked).toBeTruthy();
+    });
+    it("should emit icToggleChecked on click", async () => {
+        const page = await newSpecPage({
+            components: [ToggleButton],
+            html: `<ic-toggle-button label="Toggle" id='test-button' onclick='alert('test')'></ic-toggle-button>`,
+        });
+        const eventSpy = jest.fn();
+        page.win.addEventListener("icToggleChecked", eventSpy);
+        page.rootInstance.handleClick();
+        await page.waitForChanges();
+        expect(eventSpy).toHaveBeenCalled();
+    });
+    it("should stop immediate propagation of a click event when disabled", async () => {
+        const page = await newSpecPage({
+            components: [ToggleButton],
+            html: `<ic-toggle-button label="Toggle" id='test-button' disabled=true onclick='alert('test')'></ic-toggle-button>`,
+        });
+        jest.spyOn(window, "alert").mockImplementation();
+        const element = document.getElementById("test-button");
+        element.click();
+        await page.waitForChanges();
+        expect(window.alert).not.toHaveBeenCalled;
+    });
+});
+//# sourceMappingURL=ic-toggle-button.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-toggle-button.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-toggle-button/test/basic/ic-toggle-button.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { ToggleButton } from \"../../ic-toggle-button\";\n\ndescribe(\"ic-toggle-button component\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButton],\n      html: `<ic-toggle-button label=\"Toggle\"></ic-toggle-button>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render icon variant\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButton],\n      html: `<ic-toggle-button variant=\"icon\" accessible-label=\"Refresh the page\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            height=\"24px\"\n            viewBox=\"0 0 24 24\"\n            width=\"24px\"\n            fill=\"#000000\"\n          >\n            <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n            <path\n              d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"\n            />\n          </svg>\n        </ic-toggle-button>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render slotted icon\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButton],\n      html: `<ic-toggle-button label=\"Toggle\">\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            height=\"24px\"\n            viewBox=\"0 0 24 24\"\n            width=\"24px\"\n            fill=\"#000000\"\n          >\n            <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n            <path\n              d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"\n            />\n          </svg>\n        </ic-toggle-button>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render slotted icon with icon placement\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButton],\n      html: `<ic-toggle-button label=\"Toggle\" icon-placement=\"right\">\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            height=\"24px\"\n            viewBox=\"0 0 24 24\"\n            width=\"24px\"\n            fill=\"#000000\"\n          >\n            <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n            <path\n              d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"\n            />\n          </svg>\n        </ic-toggle-button>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render slotted badge\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButton],\n      html: `<ic-toggle-button label=\"Toggle\">\n          <ic-badge text-label=\"1\" slot=\"badge\" variant=\"success\"></ic-badge>\n        </ic-toggle-button>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should update toggleChecked value on click\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButton],\n      html: `<ic-toggle-button label=\"Toggle\" id='test-button' onclick='alert('test')'></ic-toggle-button>`,\n    });\n\n    expect(page.rootInstance.toggleChecked).toBeFalsy();\n\n    const element = document.getElementById(\"test-button\");\n\n    element.click();\n\n    await page.waitForChanges();\n\n    expect(page.rootInstance.toggleChecked).toBeTruthy();\n  });\n\n  it(\"should emit icToggleChecked on click\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButton],\n      html: `<ic-toggle-button label=\"Toggle\" id='test-button' onclick='alert('test')'></ic-toggle-button>`,\n    });\n\n    const eventSpy = jest.fn();\n\n    page.win.addEventListener(\"icToggleChecked\", eventSpy);\n\n    page.rootInstance.handleClick();\n\n    await page.waitForChanges();\n\n    expect(eventSpy).toHaveBeenCalled();\n  });\n\n  it(\"should stop immediate propagation of a click event when disabled\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButton],\n      html: `<ic-toggle-button label=\"Toggle\" id='test-button' disabled=true onclick='alert('test')'></ic-toggle-button>`,\n    });\n\n    jest.spyOn(window, \"alert\").mockImplementation();\n\n    const element = document.getElementById(\"test-button\");\n\n    element.click();\n\n    await page.waitForChanges();\n\n    expect(window.alert).not.toHaveBeenCalled;\n  });\n});\n"]}

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

@@ -76,35 +76,40 @@ export class Tooltip {
             this.toolTip.style.setProperty("--tooltip-translate-y", `${tooltipY}px`);
         };
         this.show = () => {
-            this.toolTip.setAttribute("data-show", "");
-            if (this.onDialog) {
-                this.el.classList.add("on-dialog");
-                const dialogEl = this.icDialogEl.shadowRoot
-                    .querySelector("dialog")
-                    .getBoundingClientRect();
-                this.getTooltipTranslate(dialogEl);
-            }
-            this.popperInstance = createPopper(this.el, this.toolTip, {
-                placement: this.placement,
-                modifiers: [
-                    {
-                        name: "offset",
-                        options: {
-                            offset: [0, 10],
+            if (this.label) {
+                this.toolTip.setAttribute("data-show", "");
+                if (this.onDialog) {
+                    this.el.classList.add("on-dialog");
+                    const dialogEl = this.icDialogEl.shadowRoot
+                        .querySelector("dialog")
+                        .getBoundingClientRect();
+                    this.getTooltipTranslate(dialogEl);
+                }
+                this.popperInstance = createPopper(this.el, this.toolTip, {
+                    placement: this.placement,
+                    modifiers: [
+                        {
+                            name: "offset",
+                            options: {
+                                offset: [0, 10],
+                            },
                         },
-                    },
-                    {
-                        name: "arrow",
-                        options: {
-                            element: this.arrow,
+                        {
+                            name: "arrow",
+                            options: {
+                                element: this.arrow,
+                            },
                         },
-                    },
-                    {
-                        name: "eventListeners",
-                        options: { scroll: false, resize: false },
-                    },
-                ],
-            });
+                        {
+                            name: "eventListeners",
+                            options: { scroll: false, resize: false },
+                        },
+                    ],
+                });
+            }
+            else {
+                console.warn(`Tooltip can't display without prop 'label' set`);
+            }
         };
         this.hide = () => {
             this.toolTip.removeAttribute("data-show");

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

@@ -1 +1 @@
-{"version":3,"file":"ic-tooltip.js","sourceRoot":"","sources":["../../../src/components/ic-tooltip/ic-tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, h, Method } from \"@stencil/core\";\nimport { Instance, createPopper } from \"@popperjs/core\";\nimport { IcTooltipPlacements } from \"./ic-tooltip.types\";\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-tooltip\",\n  styleUrl: \"ic-tooltip.css\",\n  shadow: true,\n})\nexport class Tooltip {\n  private arrow: HTMLDivElement;\n  private delayedHideEvents = [\"mouseleave\"];\n  private dialogOverflow = false;\n  private icDialogEl: HTMLIcDialogElement;\n  private instantHideEvents = [\"focusout\"];\n  private mouseOverTool: boolean = false;\n  private persistTooltip = false;\n  private popperInstance: Instance;\n  private onDialog: boolean = false;\n  private showEvents = [\n    !this.disableHover && \"mouseenter\",\n    !this.disableHover && \"focusin\",\n    !this.disableClick && \"click\",\n  ];\n  private toolTip: HTMLDivElement;\n\n  @Element() el: HTMLIcTooltipElement;\n\n  /**\n   * @internal If `true`, the tooltip will not be displayed on click, it will require hover or using the display method.\n   */\n  @Prop() disableClick?: boolean = false;\n\n  /**\n   * If `true`, the tooltip will not be displayed on hover, it will require a click.\n   */\n  @Prop() disableHover?: boolean = false;\n\n  /**\n   * The number of lines to display before truncating the text.\n   */\n  @Prop() maxLines?: number;\n\n  /**\n   * The position of the tooltip in relation to the parent element.\n   */\n  @Prop({ mutable: true }) placement?: IcTooltipPlacements = \"bottom\";\n\n  /**\n   * @internal Sets the tooltip to aria-hidden, when used as part of components that are already announced.\n   */\n  @Prop() silent?: boolean = false;\n\n  /**\n   * The ID of the element the tooltip is describing - for when aria-labelledby or aria-describedby is used.\n   */\n  @Prop({ reflect: true }) target?: string;\n\n  /**\n   * The text to display on the tooltip.\n   */\n  @Prop() label!: string;\n\n  disconnectedCallback(): void {\n    this.manageEventListeners(\"remove\");\n    if (this.popperInstance !== undefined) {\n      this.popperInstance.destroy();\n    }\n  }\n\n  componentDidLoad(): void {\n    this.manageEventListeners(\"add\");\n\n    this.icDialogEl = this.el.closest(\"ic-dialog\");\n    this.dialogOverflow =\n      this.icDialogEl?.getAttribute(\"data-overflow\") === \"true\";\n\n    this.onDialog = this.icDialogEl !== null;\n\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Tooltip\"\n    );\n  }\n\n  componentDidRender(): void {\n    const typographyEl = this.el.shadowRoot.querySelector(\n      \".ic-tooltip-container > ic-typography\"\n    );\n    this.maxLines > 0 &&\n      typographyEl.setAttribute(\n        \"style\",\n        `--truncation-max-lines: ${this.maxLines}`\n      );\n  }\n  /**\n   * Method to programmatically show/hide the tooltip without needing to interact with an anchor element\n   * @param show Whether to show or hide the tooltip\n   * @param persistTooltip Whether the tooltip should stay on the screen when actions are performed that would previously dismiss the tooltip, such as on hover\n   */\n  @Method()\n  async displayTooltip(show: boolean, persistTooltip?: boolean): Promise<void> {\n    this.persistTooltip = persistTooltip;\n    show ? this.show() : this.hide();\n  }\n\n  private getTooltipTranslate = (dialogEl: DOMRect) => {\n    const child = this.el.children[0].getBoundingClientRect();\n    let tooltipX;\n    let tooltipY;\n    switch (this.placement) {\n      case \"bottom\":\n        tooltipX = child.left - dialogEl.left - 0.5 * child.width;\n        tooltipY = child.bottom - dialogEl.top;\n        break;\n      case \"bottom-start\":\n        tooltipX = child.left - dialogEl.left;\n        tooltipY = child.bottom - dialogEl.top;\n        break;\n      case \"bottom-end\":\n        tooltipX = child.right - dialogEl.right;\n        tooltipY = child.bottom - dialogEl.top;\n        break;\n      case \"top\":\n        tooltipX = child.left - dialogEl.left - 0.5 * child.width;\n        tooltipY = child.top - dialogEl.bottom;\n        break;\n      case \"top-start\":\n        tooltipX = child.left - dialogEl.left;\n        tooltipY = child.top - dialogEl.bottom;\n        break;\n      case \"top-end\":\n        tooltipX = child.right - dialogEl.right;\n        tooltipY = child.top - dialogEl.bottom;\n        break;\n      case \"left\":\n      case \"left-start\":\n        tooltipX = child.right - dialogEl.right - child.width;\n        tooltipY = child.bottom - dialogEl.top - child.height;\n        break;\n      case \"left-end\":\n        tooltipX = child.right - dialogEl.right - child.width;\n        tooltipY = child.top - dialogEl.bottom + child.height;\n        break;\n      case \"right\":\n      case \"right-start\":\n        tooltipX = child.left - dialogEl.left + child.width;\n        tooltipY = child.bottom - dialogEl.top - child.height;\n        break;\n      case \"right-end\":\n        tooltipX = child.left - dialogEl.left + child.width;\n        tooltipY = child.top - dialogEl.bottom + child.height;\n        break;\n    }\n    if (this.dialogOverflow && tooltipX < 0) {\n      if (this.placement.includes(\"top\") || this.placement.includes(\"bottom\")) {\n        this.toolTip.style.setProperty(\n          \"--tooltip-arrow-translate\",\n          `${tooltipX}px`\n        );\n        tooltipX = child.left - dialogEl.left;\n      }\n      if (this.placement.includes(\"left\")) {\n        this.placement = \"right\";\n        tooltipX = child.left - dialogEl.left + child.width;\n      }\n    }\n\n    this.toolTip.style.setProperty(\"--tooltip-translate-x\", `${tooltipX}px`);\n    this.toolTip.style.setProperty(\"--tooltip-translate-y\", `${tooltipY}px`);\n  };\n\n  private show = () => {\n    this.toolTip.setAttribute(\"data-show\", \"\");\n\n    if (this.onDialog) {\n      this.el.classList.add(\"on-dialog\");\n      const dialogEl = this.icDialogEl.shadowRoot\n        .querySelector(\"dialog\")\n        .getBoundingClientRect();\n\n      this.getTooltipTranslate(dialogEl);\n    }\n\n    this.popperInstance = createPopper(this.el, this.toolTip, {\n      placement: this.placement,\n      modifiers: [\n        {\n          name: \"offset\",\n          options: {\n            offset: [0, 10],\n          },\n        },\n        {\n          name: \"arrow\",\n          options: {\n            element: this.arrow,\n          },\n        },\n        {\n          name: \"eventListeners\",\n          options: { scroll: false, resize: false },\n        },\n      ],\n    });\n  };\n\n  private hide = () => {\n    this.toolTip.removeAttribute(\"data-show\");\n    this.persistTooltip = false;\n  };\n\n  private checkCloseTooltip = () => {\n    setTimeout(() => {\n      if (!this.mouseOverTool && !this.persistTooltip) {\n        this.hide();\n      }\n    }, 100);\n  };\n\n  private mouseEnterTooltip = () => {\n    this.mouseOverTool = true;\n  };\n\n  private mouseLeaveTooltip = () => {\n    this.mouseOverTool = false;\n    this.checkCloseTooltip();\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === \"Escape\" && !this.persistTooltip) {\n      this.hide();\n    }\n  };\n\n  private manageEventListeners = (action: \"add\" | \"remove\") => {\n    const method =\n      action === \"add\" ? \"addEventListener\" : \"removeEventListener\";\n\n    this.showEvents.forEach((event) => {\n      this.el[method](event, this.show);\n      if (this.toolTip !== undefined) {\n        this.toolTip[method](event, this.mouseEnterTooltip);\n      }\n    });\n\n    if (!this.persistTooltip) {\n      this.instantHideEvents.forEach((event) => {\n        this.el[method](event, this.hide);\n      });\n    }\n\n    this.delayedHideEvents.forEach((event) => {\n      this.el[method](event, this.checkCloseTooltip);\n      if (this.toolTip !== undefined) {\n        this.toolTip[method](event, this.mouseLeaveTooltip);\n      }\n    });\n\n    document[method](\"keydown\", this.handleKeyDown);\n  };\n\n  render() {\n    const { label, maxLines, silent } = this;\n    return (\n      <Host class={{ \"ic-tooltip\": true }}>\n        <div\n          ref={(el) => (this.toolTip = el as HTMLDivElement)}\n          role=\"tooltip\"\n          class=\"ic-tooltip-container\"\n          aria-hidden={silent}\n        >\n          <ic-typography maxLines={maxLines} variant=\"caption\">\n            {label}\n          </ic-typography>\n          <div\n            ref={(el) => (this.arrow = el as HTMLDivElement)}\n            class=\"ic-tooltip-arrow\"\n          ></div>\n        </div>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-tooltip.js","sourceRoot":"","sources":["../../../src/components/ic-tooltip/ic-tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, h, Method } from \"@stencil/core\";\nimport { Instance, createPopper } from \"@popperjs/core\";\nimport { IcTooltipPlacements } from \"./ic-tooltip.types\";\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-tooltip\",\n  styleUrl: \"ic-tooltip.css\",\n  shadow: true,\n})\nexport class Tooltip {\n  private arrow: HTMLDivElement;\n  private delayedHideEvents = [\"mouseleave\"];\n  private dialogOverflow = false;\n  private icDialogEl: HTMLIcDialogElement;\n  private instantHideEvents = [\"focusout\"];\n  private mouseOverTool: boolean = false;\n  private persistTooltip = false;\n  private popperInstance: Instance;\n  private onDialog: boolean = false;\n  private showEvents = [\n    !this.disableHover && \"mouseenter\",\n    !this.disableHover && \"focusin\",\n    !this.disableClick && \"click\",\n  ];\n  private toolTip: HTMLDivElement;\n\n  @Element() el: HTMLIcTooltipElement;\n\n  /**\n   * @internal If `true`, the tooltip will not be displayed on click, it will require hover or using the display method.\n   */\n  @Prop() disableClick?: boolean = false;\n\n  /**\n   * If `true`, the tooltip will not be displayed on hover, it will require a click.\n   */\n  @Prop() disableHover?: boolean = false;\n\n  /**\n   * The number of lines to display before truncating the text.\n   */\n  @Prop() maxLines?: number;\n\n  /**\n   * The position of the tooltip in relation to the parent element.\n   */\n  @Prop({ mutable: true }) placement?: IcTooltipPlacements = \"bottom\";\n\n  /**\n   * @internal Sets the tooltip to aria-hidden, when used as part of components that are already announced.\n   */\n  @Prop() silent?: boolean = false;\n\n  /**\n   * The ID of the element the tooltip is describing - for when aria-labelledby or aria-describedby is used.\n   */\n  @Prop({ reflect: true }) target?: string;\n\n  /**\n   * The text to display on the tooltip.\n   */\n  @Prop() label!: string;\n\n  disconnectedCallback(): void {\n    this.manageEventListeners(\"remove\");\n    if (this.popperInstance !== undefined) {\n      this.popperInstance.destroy();\n    }\n  }\n\n  componentDidLoad(): void {\n    this.manageEventListeners(\"add\");\n\n    this.icDialogEl = this.el.closest(\"ic-dialog\");\n    this.dialogOverflow =\n      this.icDialogEl?.getAttribute(\"data-overflow\") === \"true\";\n\n    this.onDialog = this.icDialogEl !== null;\n\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Tooltip\"\n    );\n  }\n\n  componentDidRender(): void {\n    const typographyEl = this.el.shadowRoot.querySelector(\n      \".ic-tooltip-container > ic-typography\"\n    );\n    this.maxLines > 0 &&\n      typographyEl.setAttribute(\n        \"style\",\n        `--truncation-max-lines: ${this.maxLines}`\n      );\n  }\n  /**\n   * Method to programmatically show/hide the tooltip without needing to interact with an anchor element\n   * @param show Whether to show or hide the tooltip\n   * @param persistTooltip Whether the tooltip should stay on the screen when actions are performed that would previously dismiss the tooltip, such as on hover\n   */\n  @Method()\n  async displayTooltip(show: boolean, persistTooltip?: boolean): Promise<void> {\n    this.persistTooltip = persistTooltip;\n    show ? this.show() : this.hide();\n  }\n\n  private getTooltipTranslate = (dialogEl: DOMRect) => {\n    const child = this.el.children[0].getBoundingClientRect();\n    let tooltipX;\n    let tooltipY;\n    switch (this.placement) {\n      case \"bottom\":\n        tooltipX = child.left - dialogEl.left - 0.5 * child.width;\n        tooltipY = child.bottom - dialogEl.top;\n        break;\n      case \"bottom-start\":\n        tooltipX = child.left - dialogEl.left;\n        tooltipY = child.bottom - dialogEl.top;\n        break;\n      case \"bottom-end\":\n        tooltipX = child.right - dialogEl.right;\n        tooltipY = child.bottom - dialogEl.top;\n        break;\n      case \"top\":\n        tooltipX = child.left - dialogEl.left - 0.5 * child.width;\n        tooltipY = child.top - dialogEl.bottom;\n        break;\n      case \"top-start\":\n        tooltipX = child.left - dialogEl.left;\n        tooltipY = child.top - dialogEl.bottom;\n        break;\n      case \"top-end\":\n        tooltipX = child.right - dialogEl.right;\n        tooltipY = child.top - dialogEl.bottom;\n        break;\n      case \"left\":\n      case \"left-start\":\n        tooltipX = child.right - dialogEl.right - child.width;\n        tooltipY = child.bottom - dialogEl.top - child.height;\n        break;\n      case \"left-end\":\n        tooltipX = child.right - dialogEl.right - child.width;\n        tooltipY = child.top - dialogEl.bottom + child.height;\n        break;\n      case \"right\":\n      case \"right-start\":\n        tooltipX = child.left - dialogEl.left + child.width;\n        tooltipY = child.bottom - dialogEl.top - child.height;\n        break;\n      case \"right-end\":\n        tooltipX = child.left - dialogEl.left + child.width;\n        tooltipY = child.top - dialogEl.bottom + child.height;\n        break;\n    }\n    if (this.dialogOverflow && tooltipX < 0) {\n      if (this.placement.includes(\"top\") || this.placement.includes(\"bottom\")) {\n        this.toolTip.style.setProperty(\n          \"--tooltip-arrow-translate\",\n          `${tooltipX}px`\n        );\n        tooltipX = child.left - dialogEl.left;\n      }\n      if (this.placement.includes(\"left\")) {\n        this.placement = \"right\";\n        tooltipX = child.left - dialogEl.left + child.width;\n      }\n    }\n\n    this.toolTip.style.setProperty(\"--tooltip-translate-x\", `${tooltipX}px`);\n    this.toolTip.style.setProperty(\"--tooltip-translate-y\", `${tooltipY}px`);\n  };\n\n  private show = () => {\n    if (this.label) {\n      this.toolTip.setAttribute(\"data-show\", \"\");\n\n      if (this.onDialog) {\n        this.el.classList.add(\"on-dialog\");\n        const dialogEl = this.icDialogEl.shadowRoot\n          .querySelector(\"dialog\")\n          .getBoundingClientRect();\n\n        this.getTooltipTranslate(dialogEl);\n      }\n\n      this.popperInstance = createPopper(this.el, this.toolTip, {\n        placement: this.placement,\n        modifiers: [\n          {\n            name: \"offset\",\n            options: {\n              offset: [0, 10],\n            },\n          },\n          {\n            name: \"arrow\",\n            options: {\n              element: this.arrow,\n            },\n          },\n          {\n            name: \"eventListeners\",\n            options: { scroll: false, resize: false },\n          },\n        ],\n      });\n    } else {\n      console.warn(`Tooltip can't display without prop 'label' set`);\n    }\n  };\n\n  private hide = () => {\n    this.toolTip.removeAttribute(\"data-show\");\n    this.persistTooltip = false;\n  };\n\n  private checkCloseTooltip = () => {\n    setTimeout(() => {\n      if (!this.mouseOverTool && !this.persistTooltip) {\n        this.hide();\n      }\n    }, 100);\n  };\n\n  private mouseEnterTooltip = () => {\n    this.mouseOverTool = true;\n  };\n\n  private mouseLeaveTooltip = () => {\n    this.mouseOverTool = false;\n    this.checkCloseTooltip();\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === \"Escape\" && !this.persistTooltip) {\n      this.hide();\n    }\n  };\n\n  private manageEventListeners = (action: \"add\" | \"remove\") => {\n    const method =\n      action === \"add\" ? \"addEventListener\" : \"removeEventListener\";\n\n    this.showEvents.forEach((event) => {\n      this.el[method](event, this.show);\n      if (this.toolTip !== undefined) {\n        this.toolTip[method](event, this.mouseEnterTooltip);\n      }\n    });\n\n    if (!this.persistTooltip) {\n      this.instantHideEvents.forEach((event) => {\n        this.el[method](event, this.hide);\n      });\n    }\n\n    this.delayedHideEvents.forEach((event) => {\n      this.el[method](event, this.checkCloseTooltip);\n      if (this.toolTip !== undefined) {\n        this.toolTip[method](event, this.mouseLeaveTooltip);\n      }\n    });\n\n    document[method](\"keydown\", this.handleKeyDown);\n  };\n\n  render() {\n    const { label, maxLines, silent } = this;\n    return (\n      <Host class={{ \"ic-tooltip\": true }}>\n        <div\n          ref={(el) => (this.toolTip = el as HTMLDivElement)}\n          role=\"tooltip\"\n          class=\"ic-tooltip-container\"\n          aria-hidden={silent}\n        >\n          <ic-typography maxLines={maxLines} variant=\"caption\">\n            {label}\n          </ic-typography>\n          <div\n            ref={(el) => (this.arrow = el as HTMLDivElement)}\n            class=\"ic-tooltip-arrow\"\n          ></div>\n        </div>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -93,6 +93,17 @@ describe("ic-tooltip component", () => {
         await page.waitForChanges();
         expect(page.rootInstance.toolTip.getAttribute("data-show")).toBeNull;
     });
+    it("should log warning to console and not render if label hasn't been set", async () => {
+        const page = await newSpecPage({
+            components: [Tooltip],
+            html: `<ic-tooltip target="test-button"><button id="test-button"></button></ic-tooltip>`,
+        });
+        jest.spyOn(console, "warn").mockImplementation();
+        await page.rootInstance.displayTooltip(true, true);
+        await page.waitForChanges();
+        expect(page.rootInstance.toolTip.getAttribute("data-show")).toBeNull;
+        expect(console.warn).toBeCalledWith("Tooltip can't display without prop 'label' set");
+    });
     it("should watch for label updates", async () => {
         const page = await newSpecPage({
             components: [Tooltip],