npm - @ukic/web-components - Versions diffs - 2.1.0-beta.14 → 2.1.0-beta.16 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (805) hide show

package/dist/collection/components/ic-breadcrumb-group/ic-breadcrumb-group.spec.js ADDED Viewed

@@ -0,0 +1,181 @@
+import { BreadcrumbGroup } from "./ic-breadcrumb-group";
+import { newSpecPage } from "@stencil/core/testing";
+import { Breadcrumb } from "../ic-breadcrumb/ic-breadcrumb";
+import { DEVICE_SIZES } from "../../utils/helpers";
+import * as helpers from "../../utils/helpers";
+import { waitForTimeout } from "../../testspec.setup";
+describe("ic-breadcrumb-group", () => {
+  it("should render", async () => {
+    const page = await newSpecPage({
+      components: [BreadcrumbGroup],
+      html: `<ic-breadcrumb-group></ic-breadcrumb-group>`,
+    });
+    expect(page.root).toMatchSnapshot("should render");
+  });
+  it("should render styling from props", async () => {
+    const page = await newSpecPage({
+      components: [BreadcrumbGroup],
+      html: `<ic-breadcrumb-group collapsed="true" back-breadcrumb-only="true"></ic-breadcrumb-group>`,
+    });
+    expect(page.root).toMatchSnapshot("should render styling from props");
+  });
+  it("should render with ic-breadcrumb", async () => {
+    const page = await newSpecPage({
+      components: [BreadcrumbGroup, Breadcrumb],
+      html: `<ic-breadcrumb-group><ic-breadcrumb></ic-breadcrumb></ic-breadcrumb-group>`,
+    });
+    expect(page.root).toMatchSnapshot("should render with ic-breadcrumb");
+  });
+  it("should render with collapse button", async () => {
+    const page = await newSpecPage({
+      components: [BreadcrumbGroup, Breadcrumb],
+      html: `
+        <ic-breadcrumb-group collapsed="true">
+          <ic-breadcrumb page-title="Breadcrumb 1" href="/breadcrumb-1"></ic-breadcrumb>
+          <ic-breadcrumb page-title="Breadcrumb 2" href="/breadcrumb-2"></ic-breadcrumb>
+          <ic-breadcrumb current="true" page-title="Breadcrumb 3" href="/breadcrumb-3"></ic-breadcrumb>
+        </ic-breadcrumb-group>`,
+    });
+    expect(page.root).toMatchSnapshot("should render with collapse button");
+  });
+  it("should set hasShadowDom", async () => {
+    const page = await newSpecPage({
+      components: [BreadcrumbGroup],
+      html: `<ic-breadcrumb-group></ic-breadcrumb-group>`,
+    });
+    const element = page.root.shadowRoot.querySelector("nav");
+    expect(helpers.hasShadowDom(element)).toBe(false);
+  });
+  it("should handle the hidden collapsed breadcrumbs", async () => {
+    const page = await newSpecPage({
+      components: [BreadcrumbGroup, Breadcrumb],
+      html: `
+        <ic-breadcrumb-group collapsed="true">
+          <ic-breadcrumb page-title="Breadcrumb 1" href="/breadcrumb-1"></ic-breadcrumb>
+          <ic-breadcrumb page-title="Breadcrumb 2" href="/breadcrumb-2"></ic-breadcrumb>
+          <ic-breadcrumb current="true" page-title="Breadcrumb 3" href="/breadcrumb-3"></ic-breadcrumb>
+        </ic-breadcrumb-group>`,
+    });
+    const collapsedEllipsis = page.doc.getElementById("collapsed-ellipsis");
+    collapsedEllipsis.click();
+    await page.waitForChanges();
+    expect(page.root).toMatchSnapshot("should handle the hidden collapsed breadcrumbs");
+  });
+  it("should test collapsed behaviour on resize to small devices", async () => {
+    const page = await newSpecPage({
+      components: [BreadcrumbGroup, Breadcrumb],
+      html: `<ic-breadcrumb-group collapsed="true">
+      <ic-breadcrumb current="true" page-title="Breadcrumb 1" href="/breadcrumb-1"></ic-breadcrumb>
+      <ic-breadcrumb page-title="Breadcrumb 2" href="/breadcrumb-2"></ic-breadcrumb>
+      <ic-breadcrumb page-title="Breadcrumb 3" href="/breadcrumb-3"></ic-breadcrumb>
+      <ic-breadcrumb page-title="Breadcrumb 4" href="/breadcrumb-4"></ic-breadcrumb>
+      </ic-breadcrumb-group>`,
+    });
+    page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);
+    expect(page.root).toMatchSnapshot("should test collapsed behaviour on resize to small devices");
+  });
+  it("should test behaviour on small devices", async () => {
+    const page = await newSpecPage({
+      components: [BreadcrumbGroup, Breadcrumb],
+      html: `<ic-breadcrumb-group>
+      <ic-breadcrumb page-title="Breadcrumb 1" href="/breadcrumb-1"></ic-breadcrumb>
+      <ic-breadcrumb page-title="Breadcrumb 2" href="/breadcrumb-2"></ic-breadcrumb>
+      <ic-breadcrumb current="true" page-title="Breadcrumb 3" href="/breadcrumb-3"></ic-breadcrumb>
+      </ic-breadcrumb-group>`,
+    });
+    page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);
+    expect(page.rootInstance.backBreadcrumbOnly).toBe(true);
+    //call runResizeObserver
+    await page.rootInstance.runResizeObserver();
+  });
+  it("should test behaviour on change to medium devices", async () => {
+    const page = await newSpecPage({
+      components: [BreadcrumbGroup, Breadcrumb],
+      html: `<ic-breadcrumb-group collapsed="true">
+          <ic-breadcrumb current="true" page-title="Breadcrumb 1" href="/breadcrumb-1"></ic-breadcrumb>
+          <ic-breadcrumb page-title="Breadcrumb 2" href="/breadcrumb-2"></ic-breadcrumb>
+          <ic-breadcrumb page-title="Breadcrumb 3" href="/breadcrumb-3"></ic-breadcrumb>
+          <ic-breadcrumb page-title="Breadcrumb 4" href="/breadcrumb-4"></ic-breadcrumb>
+      </ic-breadcrumb-group>`,
+    });
+    page.rootInstance.expandedBreadcrumbGroup = true;
+    page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);
+    page.rootInstance.resizeObserverCallback(DEVICE_SIZES.M);
+    expect(page.rootInstance.backBreadcrumbOnly).toBe(false);
+    //call runResizeObserver
+    await page.rootInstance.runResizeObserver();
+  });
+  it("should test resize observer after expanding breadcrumbs", async () => {
+    const page = await newSpecPage({
+      components: [BreadcrumbGroup, Breadcrumb],
+      html: `<ic-breadcrumb-group collapsed="true">
+          <ic-breadcrumb current="true" page-title="Breadcrumb 1" href="/breadcrumb-1"></ic-breadcrumb>
+          <ic-breadcrumb page-title="Breadcrumb 2" href="/breadcrumb-2"></ic-breadcrumb>
+          <ic-breadcrumb page-title="Breadcrumb 3" href="/breadcrumb-3"></ic-breadcrumb>
+          <ic-breadcrumb page-title="Breadcrumb 4" href="/breadcrumb-4"></ic-breadcrumb>
+      </ic-breadcrumb-group>`,
+    });
+    // page.rootInstance.expandedBreadcrumbGroup = true;
+    page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);
+    expect(page.rootInstance.expandedBreadcrumbs).toBe(false);
+    const button = page.root.querySelector("#collapsed-ellipsis");
+    button.click();
+    await page.waitForChanges();
+    //delay to test setTimeout in code
+    await waitForTimeout(100);
+    page.rootInstance.resizeObserverCallback(DEVICE_SIZES.M);
+    await page.waitForChanges();
+    expect(page.rootInstance.expandedBreadcrumbs).toBe(true);
+    //call runResizeObserver
+    await page.rootInstance.runResizeObserver();
+  });
+  it("should test resize observer with collapsed false", async () => {
+    const page = await newSpecPage({
+      components: [BreadcrumbGroup, Breadcrumb],
+      html: `<ic-breadcrumb-group>
+          <ic-breadcrumb current="true" page-title="Breadcrumb 1" href="/breadcrumb-1"></ic-breadcrumb>
+          <ic-breadcrumb page-title="Breadcrumb 2" href="/breadcrumb-2"></ic-breadcrumb>
+          <ic-breadcrumb page-title="Breadcrumb 3" href="/breadcrumb-3"></ic-breadcrumb>
+          <ic-breadcrumb page-title="Breadcrumb 4" href="/breadcrumb-4"></ic-breadcrumb>
+      </ic-breadcrumb-group>`,
+    });
+    // page.rootInstance.expandedBreadcrumbGroup = true;
+    page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);
+    await page.waitForChanges();
+    page.rootInstance.resizeObserverCallback(DEVICE_SIZES.M);
+    await page.waitForChanges();
+    // expect(true).toBeTruthy;
+    expect(page.rootInstance.expandedBreadcrumbs).toBe(false);
+    // expect(page.rootInstance.backBreadcrumbOnly).toBe(false);
+    //call runResizeObserver
+    await page.rootInstance.runResizeObserver();
+  });
+  it("should return null for last parent breadcrumb when there is only 1 breadcrumb", async () => {
+    const page = await newSpecPage({
+      components: [BreadcrumbGroup, Breadcrumb],
+      html: `<ic-breadcrumb-group>
+          <ic-breadcrumb current="true" page-title="Breadcrumb 1" href="/breadcrumb-1"></ic-breadcrumb>
+      </ic-breadcrumb-group>`,
+    });
+    expect(page.rootInstance.getLastParentBreadcrumb()).toBeNull();
+  });
+  //this test has to go last as it changes the device size
+  it("should render collapse on already small devices", async () => {
+    const myfunc = jest.fn().mockReturnValue(DEVICE_SIZES.S);
+    Object.defineProperty(helpers, "getCurrentDeviceSize", {
+      value: myfunc,
+    });
+    const page = await newSpecPage({
+      components: [BreadcrumbGroup, Breadcrumb],
+      html: `<ic-breadcrumb-group collapsed="true">
+      <ic-breadcrumb current="true" page-title="Breadcrumb 1" href="/breadcrumb-1"></ic-breadcrumb>
+      <ic-breadcrumb page-title="Breadcrumb 2" href="/breadcrumb-2"></ic-breadcrumb>
+      <ic-breadcrumb page-title="Breadcrumb 3" href="/breadcrumb-3"></ic-breadcrumb>
+      <ic-breadcrumb page-title="Breadcrumb 4" href="/breadcrumb-4"></ic-breadcrumb>
+      </ic-breadcrumb-group>`,
+    });
+    await page.waitForChanges();
+    expect(page.root).toMatchSnapshot("should render collapse on already small devices");
+  });
+});
+//# sourceMappingURL=ic-breadcrumb-group.spec.js.map

package/dist/collection/components/ic-breadcrumb-group/ic-breadcrumb-group.spec.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ic-breadcrumb-group.spec.js","sourceRoot":"","sources":["../../../src/components/ic-breadcrumb-group/ic-breadcrumb-group.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { BreadcrumbGroup } from \"./ic-breadcrumb-group\";\nimport { newSpecPage } from \"@stencil/core/testing\";\nimport { Breadcrumb } from \"../ic-breadcrumb/ic-breadcrumb\";\nimport { DEVICE_SIZES } from \"../../utils/helpers\";\nimport * as helpers from \"../../utils/helpers\";\nimport { waitForTimeout } from \"../../testspec.setup\";\n\ndescribe(\"ic-breadcrumb-group\", () => {\n it(\"should render\", async () => {\n const page = await newSpecPage({\n components: [BreadcrumbGroup],\n html: `<ic-breadcrumb-group></ic-breadcrumb-group>`,\n });\n\n expect(page.root).toMatchSnapshot(\"should render\");\n });\n\n it(\"should render styling from props\", async () => {\n const page = await newSpecPage({\n components: [BreadcrumbGroup],\n html: `<ic-breadcrumb-group collapsed=\"true\" back-breadcrumb-only=\"true\"></ic-breadcrumb-group>`,\n });\n\n expect(page.root).toMatchSnapshot(\"should render styling from props\");\n });\n\n it(\"should render with ic-breadcrumb\", async () => {\n const page = await newSpecPage({\n components: [BreadcrumbGroup, Breadcrumb],\n html: `<ic-breadcrumb-group><ic-breadcrumb></ic-breadcrumb></ic-breadcrumb-group>`,\n });\n\n expect(page.root).toMatchSnapshot(\"should render with ic-breadcrumb\");\n });\n\n it(\"should render with collapse button\", async () => {\n const page = await newSpecPage({\n components: [BreadcrumbGroup, Breadcrumb],\n html: `\n <ic-breadcrumb-group collapsed=\"true\">\n <ic-breadcrumb page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\"></ic-breadcrumb>\n <ic-breadcrumb page-title=\"Breadcrumb 2\" href=\"/breadcrumb-2\"></ic-breadcrumb>\n <ic-breadcrumb current=\"true\" page-title=\"Breadcrumb 3\" href=\"/breadcrumb-3\"></ic-breadcrumb>\n </ic-breadcrumb-group>`,\n });\n\n expect(page.root).toMatchSnapshot(\"should render with collapse button\");\n });\n\n it(\"should set hasShadowDom\", async () => {\n const page = await newSpecPage({\n components: [BreadcrumbGroup],\n html: `<ic-breadcrumb-group></ic-breadcrumb-group>`,\n });\n\n const element = page.root.shadowRoot.querySelector(\"nav\");\n expect(helpers.hasShadowDom(element)).toBe(false);\n });\n\n it(\"should handle the hidden collapsed breadcrumbs\", async () => {\n const page = await newSpecPage({\n components: [BreadcrumbGroup, Breadcrumb],\n html: `\n <ic-breadcrumb-group collapsed=\"true\">\n <ic-breadcrumb page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\"></ic-breadcrumb>\n <ic-breadcrumb page-title=\"Breadcrumb 2\" href=\"/breadcrumb-2\"></ic-breadcrumb>\n <ic-breadcrumb current=\"true\" page-title=\"Breadcrumb 3\" href=\"/breadcrumb-3\"></ic-breadcrumb>\n </ic-breadcrumb-group>`,\n });\n\n const collapsedEllipsis: HTMLElement =\n page.doc.getElementById(\"collapsed-ellipsis\");\n collapsedEllipsis.click();\n\n await page.waitForChanges();\n\n expect(page.root).toMatchSnapshot(\n \"should handle the hidden collapsed breadcrumbs\"\n );\n });\n\n it(\"should test collapsed behaviour on resize to small devices\", async () => {\n const page = await newSpecPage({\n components: [BreadcrumbGroup, Breadcrumb],\n html: `<ic-breadcrumb-group collapsed=\"true\">\n <ic-breadcrumb current=\"true\" page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\"></ic-breadcrumb>\n <ic-breadcrumb page-title=\"Breadcrumb 2\" href=\"/breadcrumb-2\"></ic-breadcrumb>\n <ic-breadcrumb page-title=\"Breadcrumb 3\" href=\"/breadcrumb-3\"></ic-breadcrumb>\n <ic-breadcrumb page-title=\"Breadcrumb 4\" href=\"/breadcrumb-4\"></ic-breadcrumb>\n </ic-breadcrumb-group>`,\n });\n\n page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);\n\n expect(page.root).toMatchSnapshot(\n \"should test collapsed behaviour on resize to small devices\"\n );\n });\n\n it(\"should test behaviour on small devices\", async () => {\n const page = await newSpecPage({\n components: [BreadcrumbGroup, Breadcrumb],\n html: `<ic-breadcrumb-group>\n <ic-breadcrumb page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\"></ic-breadcrumb>\n <ic-breadcrumb page-title=\"Breadcrumb 2\" href=\"/breadcrumb-2\"></ic-breadcrumb>\n <ic-breadcrumb current=\"true\" page-title=\"Breadcrumb 3\" href=\"/breadcrumb-3\"></ic-breadcrumb>\n </ic-breadcrumb-group>`,\n });\n\n page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);\n\n expect(page.rootInstance.backBreadcrumbOnly).toBe(true);\n\n //call runResizeObserver\n await page.rootInstance.runResizeObserver();\n });\n\n it(\"should test behaviour on change to medium devices\", async () => {\n const page = await newSpecPage({\n components: [BreadcrumbGroup, Breadcrumb],\n html: `<ic-breadcrumb-group collapsed=\"true\">\n <ic-breadcrumb current=\"true\" page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\"></ic-breadcrumb>\n <ic-breadcrumb page-title=\"Breadcrumb 2\" href=\"/breadcrumb-2\"></ic-breadcrumb>\n <ic-breadcrumb page-title=\"Breadcrumb 3\" href=\"/breadcrumb-3\"></ic-breadcrumb>\n <ic-breadcrumb page-title=\"Breadcrumb 4\" href=\"/breadcrumb-4\"></ic-breadcrumb>\n </ic-breadcrumb-group>`,\n });\n\n page.rootInstance.expandedBreadcrumbGroup = true;\n page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);\n\n page.rootInstance.resizeObserverCallback(DEVICE_SIZES.M);\n\n expect(page.rootInstance.backBreadcrumbOnly).toBe(false);\n\n //call runResizeObserver\n await page.rootInstance.runResizeObserver();\n });\n\n it(\"should test resize observer after expanding breadcrumbs\", async () => {\n const page = await newSpecPage({\n components: [BreadcrumbGroup, Breadcrumb],\n html: `<ic-breadcrumb-group collapsed=\"true\">\n <ic-breadcrumb current=\"true\" page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\"></ic-breadcrumb>\n <ic-breadcrumb page-title=\"Breadcrumb 2\" href=\"/breadcrumb-2\"></ic-breadcrumb>\n <ic-breadcrumb page-title=\"Breadcrumb 3\" href=\"/breadcrumb-3\"></ic-breadcrumb>\n <ic-breadcrumb page-title=\"Breadcrumb 4\" href=\"/breadcrumb-4\"></ic-breadcrumb>\n </ic-breadcrumb-group>`,\n });\n\n // page.rootInstance.expandedBreadcrumbGroup = true;\n page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);\n\n expect(page.rootInstance.expandedBreadcrumbs).toBe(false);\n\n const button = page.root.querySelector(\n \"#collapsed-ellipsis\"\n ) as HTMLButtonElement;\n button.click();\n await page.waitForChanges();\n //delay to test setTimeout in code\n await waitForTimeout(100);\n\n page.rootInstance.resizeObserverCallback(DEVICE_SIZES.M);\n\n await page.waitForChanges();\n\n expect(page.rootInstance.expandedBreadcrumbs).toBe(true);\n\n //call runResizeObserver\n await page.rootInstance.runResizeObserver();\n });\n\n it(\"should test resize observer with collapsed false\", async () => {\n const page = await newSpecPage({\n components: [BreadcrumbGroup, Breadcrumb],\n html: `<ic-breadcrumb-group>\n <ic-breadcrumb current=\"true\" page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\"></ic-breadcrumb>\n <ic-breadcrumb page-title=\"Breadcrumb 2\" href=\"/breadcrumb-2\"></ic-breadcrumb>\n <ic-breadcrumb page-title=\"Breadcrumb 3\" href=\"/breadcrumb-3\"></ic-breadcrumb>\n <ic-breadcrumb page-title=\"Breadcrumb 4\" href=\"/breadcrumb-4\"></ic-breadcrumb>\n </ic-breadcrumb-group>`,\n });\n\n // page.rootInstance.expandedBreadcrumbGroup = true;\n page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);\n\n await page.waitForChanges();\n page.rootInstance.resizeObserverCallback(DEVICE_SIZES.M);\n\n await page.waitForChanges();\n\n // expect(true).toBeTruthy;\n\n expect(page.rootInstance.expandedBreadcrumbs).toBe(false);\n // expect(page.rootInstance.backBreadcrumbOnly).toBe(false);\n\n //call runResizeObserver\n await page.rootInstance.runResizeObserver();\n });\n\n it(\"should return null for last parent breadcrumb when there is only 1 breadcrumb\", async () => {\n const page = await newSpecPage({\n components: [BreadcrumbGroup, Breadcrumb],\n html: `<ic-breadcrumb-group>\n <ic-breadcrumb current=\"true\" page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\"></ic-breadcrumb>\n </ic-breadcrumb-group>`,\n });\n\n expect(page.rootInstance.getLastParentBreadcrumb()).toBeNull();\n });\n\n //this test has to go last as it changes the device size\n it(\"should render collapse on already small devices\", async () => {\n const myfunc = jest.fn().mockReturnValue(DEVICE_SIZES.S);\n Object.defineProperty(helpers, \"getCurrentDeviceSize\", {\n value: myfunc,\n });\n\n const page = await newSpecPage({\n components: [BreadcrumbGroup, Breadcrumb],\n html: `<ic-breadcrumb-group collapsed=\"true\">\n <ic-breadcrumb current=\"true\" page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\"></ic-breadcrumb>\n <ic-breadcrumb page-title=\"Breadcrumb 2\" href=\"/breadcrumb-2\"></ic-breadcrumb>\n <ic-breadcrumb page-title=\"Breadcrumb 3\" href=\"/breadcrumb-3\"></ic-breadcrumb>\n <ic-breadcrumb page-title=\"Breadcrumb 4\" href=\"/breadcrumb-4\"></ic-breadcrumb>\n </ic-breadcrumb-group>`,\n });\n\n await page.waitForChanges();\n\n expect(page.root).toMatchSnapshot(\n \"should render collapse on already small devices\"\n );\n });\n});\n"]}

package/dist/collection/components/ic-button/ic-button.e2e.js ADDED Viewed

@@ -0,0 +1,173 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe("ic-button component", () => {
+  it("Should have the correct text", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-button>Button</ic-button>`);
+    await page.waitForChanges();
+    const button = await page.find("ic-button");
+    const text = button.innerText;
+    expect(text).toBe("Button");
+  });
+  it("Should have loading bar when loading", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-button loading>Button</ic-button>`);
+    await page.waitForChanges();
+    const loadingBar = await page.find("ic-button >>> ic-loading-indicator");
+    expect(loadingBar).not.toBeNull();
+  });
+  it("Should be clickable with onclick", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`
+        <ic-button id='ic-button' onclick='change()'>Button</ic-button>
+        <script>
+        function change() {
+          document.getElementById("ic-button").innerText = 'Test';
+        }
+        </script>
+        `);
+    const button = await page.find("#ic-button");
+    await button.click();
+    expect(button.innerText).toBe("Test");
+  });
+  it("Should not be clickable when disabled", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`
+        <ic-button id='ic-button' onclick='change()' disabled>Button</ic-button>
+        <script>
+        function change() {
+          document.getElementById("ic-button").innerText = 'Test';
+        }
+        </script>
+        `);
+    const button = await page.find("#ic-button");
+    await button.click();
+    expect(button.innerText).toBe("Button");
+  });
+  it("Should not be clickable when loading", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`
+        <ic-button id='ic-button' onclick='change()' loading>Button</ic-button>
+        <script>
+        function change() {
+          document.getElementById("ic-button").innerText = 'Test';
+        }
+        </script>
+        `);
+    const button = await page.find("#ic-button");
+    await button.click();
+    expect(button.innerText).toBe("Button");
+  });
+  it("should pass onclick method", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`
+        <ic-button id='ic-button' onclick='updateText()'>Button</ic-button>
+        <p id="text"></p>
+        <script>
+          function updateText() {
+            document.getElementById('text').innerText = "Demo"
+          }
+        </script>
+      `);
+    const p = await page.find("#text");
+    const button = await page.find("#ic-button");
+    await button.click();
+    expect(p.innerText).toBe("Demo");
+  });
+  it("should clear text field value when reset button inside form tag", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`
+        <form>
+          <input type="text" id="name" />
+          <ic-button id='ic-button' type="reset">Reset</ic-button>
+        </form>
+      `);
+    const textfield = await page.find("#name");
+    const button = await page.find("#ic-button");
+    await textfield.press("f");
+    await textfield.press("o");
+    await textfield.press("o");
+    expect(await textfield.getProperty("value")).toBe("foo");
+    await button.click();
+    expect(await textfield.getProperty("value")).toBe("");
+  });
+  it("should not clear text field value if reset button outside of form tag", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`
+      <div>
+        <form>
+          <input type="text" id="name" />
+        </form>
+        <ic-button id='ic-button' type="reset">Reset</ic-button>
+      </div>
+      `);
+    const textfield = await page.find("#name");
+    const button = await page.find("#ic-button");
+    await textfield.press("f");
+    await textfield.press("o");
+    await textfield.press("o");
+    await button.click();
+    expect(await textfield.getProperty("value")).toBe("foo");
+  });
+  it("should submit form on submit button click if submit button inside form tag", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`
+        <form>
+          <input type="text" id="name" />
+          <ic-button id='ic-button' type="submit">Submit</ic-button>
+        </form>
+        <p id="text"></p>
+        <script>
+          document.addEventListener('submit', (ev) => {
+            ev.preventDefault();
+            document.getElementById('text').innerText = 'submitted';
+          })
+        </script>
+      `);
+    const button = await page.find("#ic-button");
+    const p = await page.find("#text");
+    await button.click();
+    expect(p.innerText).toBe("submitted");
+  });
+  it("should not submit form on submit button click outside of form tag", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`
+        <form>
+          <input type="text" id="name" />
+        </form>
+        <ic-button id='ic-button' type="submit">Submit</ic-button>
+        <p id="text">idle</p>
+        <script>
+          document.addEventListener('submit', (ev) => {
+            ev.preventDefault();
+            document.getElementById('text').innerText = 'submitted';
+          })
+        </script>
+      `);
+    const button = await page.find("#ic-button");
+    const p = await page.find("#text");
+    await button.click();
+    expect(p.innerText).toBe("idle");
+  });
+  it("should emit icFocus on focus event", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-button>Button</ic-button>`);
+    const button = await page.find("ic-button");
+    const spy = await page.spyOnEvent("icFocus");
+    await button.callMethod("setFocus");
+    await page.waitForChanges();
+    expect(spy).toHaveReceivedEvent();
+  });
+  it("should emit icBlur on blur event", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-button>Button</ic-button>
+      <button id="secondary-button">Secondary</button>`);
+    const button = await page.find("ic-button");
+    const secButton = await page.find("#secondary-button");
+    const spy = await page.spyOnEvent("icBlur");
+    await button.callMethod("setFocus");
+    await secButton.click();
+    await page.waitForChanges();
+    expect(spy).toHaveReceivedEvent();
+  });
+});
+//# sourceMappingURL=ic-button.e2e.js.map

package/dist/collection/components/ic-button/ic-button.e2e.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ic-button.e2e.js","sourceRoot":"","sources":["../../../src/components/ic-button/ic-button.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { newE2EPage } from \"@stencil/core/testing\";\n\ndescribe(\"ic-button component\", () => {\n it(\"Should have the correct text\", async () => {\n const page = await newE2EPage();\n await page.setContent(`<ic-button>Button</ic-button>`);\n await page.waitForChanges();\n\n const button = await page.find(\"ic-button\");\n const text = button.innerText;\n\n expect(text).toBe(\"Button\");\n });\n\n it(\"Should have loading bar when loading\", async () => {\n const page = await newE2EPage();\n await page.setContent(`<ic-button loading>Button</ic-button>`);\n await page.waitForChanges();\n\n const loadingBar = await page.find(\"ic-button >>> ic-loading-indicator\");\n\n expect(loadingBar).not.toBeNull();\n });\n\n it(\"Should be clickable with onclick\", async () => {\n const page = await newE2EPage();\n await page.setContent(\n `\n <ic-button id='ic-button' onclick='change()'>Button</ic-button>\n <script>\n function change() {\n document.getElementById(\"ic-button\").innerText = 'Test';\n }\n </script>\n `\n );\n const button = await page.find(\"#ic-button\");\n\n await button.click();\n\n expect(button.innerText).toBe(\"Test\");\n });\n\n it(\"Should not be clickable when disabled\", async () => {\n const page = await newE2EPage();\n await page.setContent(\n `\n <ic-button id='ic-button' onclick='change()' disabled>Button</ic-button>\n <script>\n function change() {\n document.getElementById(\"ic-button\").innerText = 'Test';\n }\n </script>\n `\n );\n const button = await page.find(\"#ic-button\");\n\n await button.click();\n\n expect(button.innerText).toBe(\"Button\");\n });\n\n it(\"Should not be clickable when loading\", async () => {\n const page = await newE2EPage();\n await page.setContent(\n `\n <ic-button id='ic-button' onclick='change()' loading>Button</ic-button>\n <script>\n function change() {\n document.getElementById(\"ic-button\").innerText = 'Test';\n }\n </script>\n `\n );\n const button = await page.find(\"#ic-button\");\n\n await button.click();\n\n expect(button.innerText).toBe(\"Button\");\n });\n\n it(\"should pass onclick method\", async () => {\n const page = await newE2EPage();\n await page.setContent(\n `\n <ic-button id='ic-button' onclick='updateText()'>Button</ic-button>\n <p id=\"text\"></p>\n <script>\n function updateText() {\n document.getElementById('text').innerText = \"Demo\"\n }\n </script>\n `\n );\n\n const p = await page.find(\"#text\");\n const button = await page.find(\"#ic-button\");\n\n await button.click();\n\n expect(p.innerText).toBe(\"Demo\");\n });\n\n it(\"should clear text field value when reset button inside form tag\", async () => {\n const page = await newE2EPage();\n await page.setContent(\n `\n <form>\n <input type=\"text\" id=\"name\" />\n <ic-button id='ic-button' type=\"reset\">Reset</ic-button>\n </form>\n `\n );\n\n const textfield = await page.find(\"#name\");\n const button = await page.find(\"#ic-button\");\n\n await textfield.press(\"f\");\n await textfield.press(\"o\");\n await textfield.press(\"o\");\n\n expect(await textfield.getProperty(\"value\")).toBe(\"foo\");\n\n await button.click();\n\n expect(await textfield.getProperty(\"value\")).toBe(\"\");\n });\n\n it(\"should not clear text field value if reset button outside of form tag\", async () => {\n const page = await newE2EPage();\n await page.setContent(\n `\n <div>\n <form>\n <input type=\"text\" id=\"name\" />\n </form>\n <ic-button id='ic-button' type=\"reset\">Reset</ic-button>\n </div>\n `\n );\n\n const textfield = await page.find(\"#name\");\n const button = await page.find(\"#ic-button\");\n\n await textfield.press(\"f\");\n await textfield.press(\"o\");\n await textfield.press(\"o\");\n\n await button.click();\n\n expect(await textfield.getProperty(\"value\")).toBe(\"foo\");\n });\n\n it(\"should submit form on submit button click if submit button inside form tag\", async () => {\n const page = await newE2EPage();\n await page.setContent(\n `\n <form>\n <input type=\"text\" id=\"name\" />\n <ic-button id='ic-button' type=\"submit\">Submit</ic-button>\n </form>\n <p id=\"text\"></p>\n <script>\n document.addEventListener('submit', (ev) => {\n ev.preventDefault();\n document.getElementById('text').innerText = 'submitted';\n })\n </script>\n `\n );\n\n const button = await page.find(\"#ic-button\");\n const p = await page.find(\"#text\");\n\n await button.click();\n\n expect(p.innerText).toBe(\"submitted\");\n });\n\n it(\"should not submit form on submit button click outside of form tag\", async () => {\n const page = await newE2EPage();\n await page.setContent(\n `\n <form>\n <input type=\"text\" id=\"name\" />\n </form>\n <ic-button id='ic-button' type=\"submit\">Submit</ic-button>\n <p id=\"text\">idle</p>\n <script>\n document.addEventListener('submit', (ev) => {\n ev.preventDefault();\n document.getElementById('text').innerText = 'submitted';\n })\n </script>\n `\n );\n\n const button = await page.find(\"#ic-button\");\n const p = await page.find(\"#text\");\n\n await button.click();\n\n expect(p.innerText).toBe(\"idle\");\n });\n\n it(\"should emit icFocus on focus event\", async () => {\n const page = await newE2EPage();\n await page.setContent(`<ic-button>Button</ic-button>`);\n\n const button = await page.find(\"ic-button\");\n const spy = await page.spyOnEvent(\"icFocus\");\n\n await button.callMethod(\"setFocus\");\n await page.waitForChanges();\n\n expect(spy).toHaveReceivedEvent();\n });\n\n it(\"should emit icBlur on blur event\", async () => {\n const page = await newE2EPage();\n await page.setContent(\n `<ic-button>Button</ic-button>\n <button id=\"secondary-button\">Secondary</button>`\n );\n\n const button = await page.find(\"ic-button\");\n const secButton = await page.find(\"#secondary-button\");\n const spy = await page.spyOnEvent(\"icBlur\");\n\n await button.callMethod(\"setFocus\");\n await secButton.click();\n await page.waitForChanges();\n\n expect(spy).toHaveReceivedEvent();\n });\n});\n"]}

package/dist/collection/components/ic-button/ic-button.js CHANGED Viewed

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
   return t;
 };
 import { Host, h, } from "@stencil/core";
-import { getThemeFromContext, inheritAttributes } from "../../utils/helpers";
+import { getThemeFromContext, inheritAttributes, removeDisabledFalse, } from "../../utils/helpers";
 import { IC_INHERITED_ARIA } from "../../utils/constants";
 import { IcThemeForegroundEnum, } from "../../utils/types";
 let buttonIds = 0;
@@ -85,10 +85,7 @@ export class Button {
   }
   hasIconSlot() {
     const iconEl = this.el.querySelector(`[slot="icon"]`);
-    if (iconEl != null) {
-      return true;
-    }
-    return false;
+    return iconEl !== null;
   }
   handleHiddenFormButtonClick(form) {
     const hiddenFormButton = document.createElement("button");
@@ -110,10 +107,11 @@ export class Button {
       "aria-expanded",
       "title",
     ]);
+    removeDisabledFalse(this.disabled, this.el);
     this.el.setAttribute("exportparts", "button");
     const id = this.el.id;
     this.id = id !== undefined ? id : null;
-    this.hasTooltip = this.variant === "icon";
+    this.hasTooltip = this.variant === "icon" && this.disableTooltip === false;
   }
   componentDidLoad() {
     this.updateTheme();

package/dist/collection/components/ic-button/ic-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-button.js","sourceRoot":"","sources":["../../../src/components/ic-button/ic-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Listen,\n Method,\n Prop,\n h,\n} from \"@stencil/core\";\n\nimport { getThemeFromContext, inheritAttributes } from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n IcButtonSizes,\n IcButtonTypes,\n IcButtonVariants,\n IcButtonTooltipPlacement,\n} from \"./ic-button.types\";\nimport {\n IcTheme,\n IcThemeForeground,\n IcThemeForegroundEnum,\n} from \"../../utils/types\";\n\nlet buttonIds = 0;\n\n/*\n @slot icon - Content will be placed to the left of the button label.\n /\n@Component({\n tag: \"ic-button\",\n styleUrl: \"ic-button.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class Button {\n @Element() el: HTMLIcButtonElement;\n /\n If `true`, the button will be in disabled state.\n /\n @Prop() disabled?: boolean = false;\n /\n If `true`, the button will be in loading state.\n /\n @Prop() loading?: boolean = false;\n /\n The type of the button.\n /\n @Prop() type?: IcButtonTypes = \"button\";\n /\n The URL that the link points to. This will render the button as an \"a\" tag.\n /\n @Prop() href?: string;\n /\n The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n /\n @Prop() target?: string;\n /\n The relationship of the linked URL as space-separated link types.\n /\n @Prop() rel?: string;\n /\n If `true`, the user can save the linked URL instead of navigating to it.\n /\n @Prop() download?: string \| boolean = false;\n /\n The human language of the linked URL.\n /\n @Prop() hreflang?: string;\n /\n How much of the referrer to send when following the link.\n /\n @Prop() referrerpolicy?: ReferrerPolicy;\n /\n The variant of the button to be displayed.\n /\n @Prop() variant?: IcButtonVariants = \"primary\";\n /\n The size of the button to be displayed.\n /\n @Prop() size?: IcButtonSizes = \"default\";\n /\n If `true`, the button will fill the width of the container.\n /\n @Prop() fullWidth?: boolean = false;\n /\n If `true`, the ic-tooltip which is shown for icon variant will be disabled. Title or aria-label must be set if this prop is not applied.\n /\n @Prop() disableTooltip?: boolean = false;\n /\n The position of the tooltip in relation to the button.\n /\n @Prop() tooltipPlacement?: IcButtonTooltipPlacement = \"bottom\";\n /\n The appearance of the button, e.g. dark, light, or the default.\n /\n @Prop({ mutable: true }) appearance?: IcThemeForeground = \"default\";\n /\n The <form> element to associate the button with.\n /\n @Prop() form?: string;\n /\n The URL that processes the information submitted by the button. It overrides the action attribute of the button's form owner. Does nothing if there is no form owner.\n /\n @Prop() formaction?: string;\n /\n The way the submitted form data is encoded.\n /\n @Prop() formenctype?: string;\n /\n The HTTP method used to submit the form.\n /\n @Prop() formmethod?: string;\n /\n If `true`, the form will not be validated when submitted.\n /\n @Prop() formnovalidate?: boolean;\n /\n The place to display the response from submitting the form. It overrides the target attribute of the button's form owner.\n /\n @Prop() formtarget?: string;\n /\n Emitted when button has focus\n /\n @Event() icFocus!: EventEmitter<void>;\n /\n Emitted when button has blur\n /\n @Event() icBlur!: EventEmitter<void>;\n\n private inheritedAttributes: { [k: string]: unknown } = {};\n private buttonEl: HTMLElement;\n private hasTooltip: boolean = false;\n private buttonIdNum = buttonIds++;\n private tooltipEl: HTMLIcTooltipElement;\n private id: string;\n\n @Listen(\"click\", { capture: true })\n handleHostClick(event: Event): void {\n if (this.disabled \|\| this.loading) {\n event.stopImmediatePropagation();\n }\n }\n\n @Listen(\"themeChange\", { target: \"document\" })\n themeChangeHandler(ev: CustomEvent): void {\n const theme: IcTheme = ev.detail;\n this.updateTheme(theme.mode);\n }\n\n /\n Sets focus on the native `button`.\n /\n @Method()\n async setFocus(): Promise<void> {\n if (this.buttonEl) {\n this.buttonEl.focus();\n }\n }\n\n /\n @internal Updates tooltip/aria-label text - needed as can't watch an ARIA attribute change.\n */\n @Method()\n async updateAriaLabel(newValue: string): Promise<void> {\n if (this.hasTooltip) {\n this.tooltipEl.label = newValue;\n this.buttonEl.setAttribute(\"aria-label\", newValue);\n }\n }\n\n private hasIconSlot(): boolean {\n const iconEl = this.el.querySelector(`[slot=\"icon\"]`);\n if (iconEl != null) {\n return true;\n }\n return false;\n }\n\n private handleHiddenFormButtonClick(form: HTMLFormElement): void {\n const hiddenFormButton = document.createElement(\"button\");\n\n hiddenFormButton.setAttribute(\"type\", this.el.type);\n hiddenFormButton.style.display = \"none\";\n\n form.appendChild(hiddenFormButton);\n\n hiddenFormButton.click();\n hiddenFormButton.remove();\n }\n\n private handleClick = (): void => {\n if (\n (this.el.type === \"submit\" \|\| this.el.type === \"reset\") &&\n !!this.el.closest(\"FORM\")\n ) {\n this.handleHiddenFormButtonClick(this.el.closest(\"FORM\"));\n }\n };\n\n private onFocus = () => {\n this.icFocus.emit();\n };\n\n private onBlur = () => {\n this.icBlur.emit();\n };\n\n private updateTheme(newTheme: IcThemeForeground = null): void {\n const foregroundColor = getThemeFromContext(this.el, newTheme \|\| null);\n\n if (foregroundColor !== IcThemeForegroundEnum.Default) {\n this.appearance = foregroundColor;\n }\n }\n\n componentWillLoad(): void {\n this.inheritedAttributes = inheritAttributes(this.el, [\n ...IC_INHERITED_ARIA,\n \"aria-expanded\",\n \"title\",\n ]);\n\n this.el.setAttribute(\"exportparts\", \"button\");\n\n const id = this.el.id;\n this.id = id !== undefined ? id : null;\n this.hasTooltip = this.variant === \"icon\";\n }\n\n componentDidLoad(): void {\n this.updateTheme();\n }\n\n render() {\n const TagType = (this.href && \"a\") \|\| \"button\";\n const {\n title,\n \"aria-label\": ariaLabel,\n ...restInheritedAttributes\n } = this.inheritedAttributes;\n const buttonAttrs =\n TagType === \"button\"\n ? {\n type: this.type,\n disabled: this.disabled,\n form: this.form,\n formaction: this.formaction,\n formenctype: this.formenctype,\n formmethod: this.formmethod,\n formnovalidate: this.formnovalidate,\n formtarget: this.formtarget,\n }\n : {\n download: this.download !== false ? this.download : null,\n href: this.href,\n rel: this.rel,\n target: this.target,\n referrerpolicy: this.referrerpolicy,\n hreflang: this.hreflang,\n };\n const newTitle = title && (title as string);\n const titleAttr = this.hasTooltip ? {} : { title: newTitle };\n let tooltipText = \"\";\n if (this.hasTooltip) {\n if (newTitle !== undefined) {\n tooltipText = newTitle;\n } else if (ariaLabel !== null) {\n tooltipText = ariaLabel as string;\n }\n }\n\n let describedBy: string = null;\n let buttonId: string = null;\n if (this.hasTooltip) {\n buttonId =\n this.id !== null\n ? `ic-button-with-tooltip-${this.id}`\n : `ic-button-with-tooltip-${this.buttonIdNum}`;\n describedBy = `ic-tooltip-${buttonId}`;\n }\n\n const ButtonContent = () => {\n return (\n <TagType\n class=\"button\"\n aria-disabled={this.loading \|\| this.disabled ? \"true\" : null}\n aria-label={this.loading ? \"Loading\" : ariaLabel}\n {...buttonAttrs}\n {...restInheritedAttributes}\n {...titleAttr}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n ref={(el) => (this.buttonEl = el)}\n id={buttonId}\n aria-describedby={describedBy}\n part=\"button\"\n >\n {this.hasIconSlot() && !this.loading && (\n <div class=\"icon-container\">\n <slot name=\"icon\" />\n </div>\n )}\n {this.loading ? (\n <div class=\"loading-container\">\n <ic-loading-indicator\n type=\"linear\"\n appearance={\n this.variant === \"primary\" \|\|\n this.variant === \"destructive\" \|\|\n this.appearance === IcThemeForegroundEnum.Dark \|\|\n this.appearance === IcThemeForegroundEnum.Light\n ? \"light\"\n : \"dark\"\n }\n ></ic-loading-indicator>\n </div>\n ) : (\n <slot />\n )}\n </TagType>\n );\n };\n\n return (\n <Host\n class={{\n [\"disabled\"]: this.disabled && !this.loading,\n [`button-variant-${this.variant}`]: true,\n [`button-size-${this.size}`]: true,\n [\"loading\"]: this.loading,\n [\"dark\"]: this.appearance === IcThemeForegroundEnum.Dark,\n [\"light\"]: this.appearance === IcThemeForegroundEnum.Light,\n [\"full-width\"]: this.fullWidth,\n }}\n onClick={this.handleClick}\n >\n {this.hasTooltip && (\n <ic-tooltip\n class={{ [\"tooltip-disabled\"]: this.disableTooltip }}\n ref={(el) => (this.tooltipEl = el)}\n label={tooltipText}\n target={buttonId}\n placement={this.tooltipPlacement}\n >\n <ButtonContent />\n </ic-tooltip>\n )}\n\n {!this.hasTooltip && <ButtonContent />}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ic-button.js","sourceRoot":"","sources":["../../../src/components/ic-button/ic-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Listen,\n Method,\n Prop,\n h,\n} from \"@stencil/core\";\n\nimport {\n getThemeFromContext,\n inheritAttributes,\n removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n IcButtonSizes,\n IcButtonTypes,\n IcButtonVariants,\n IcButtonTooltipPlacement,\n} from \"./ic-button.types\";\nimport {\n IcTheme,\n IcThemeForeground,\n IcThemeForegroundEnum,\n} from \"../../utils/types\";\n\nlet buttonIds = 0;\n\n/*\n @slot icon - Content will be placed to the left of the button label.\n /\n@Component({\n tag: \"ic-button\",\n styleUrl: \"ic-button.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class Button {\n @Element() el: HTMLIcButtonElement;\n /\n If `true`, the button will be in disabled state.\n /\n @Prop() disabled?: boolean = false;\n /\n If `true`, the button will be in loading state.\n /\n @Prop() loading?: boolean = false;\n /\n The type of the button.\n /\n @Prop() type?: IcButtonTypes = \"button\";\n /\n The URL that the link points to. This will render the button as an \"a\" tag.\n /\n @Prop() href?: string;\n /\n The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n /\n @Prop() target?: string;\n /\n The relationship of the linked URL as space-separated link types.\n /\n @Prop() rel?: string;\n /\n If `true`, the user can save the linked URL instead of navigating to it.\n /\n @Prop() download?: string \| boolean = false;\n /\n The human language of the linked URL.\n /\n @Prop() hreflang?: string;\n /\n How much of the referrer to send when following the link.\n /\n @Prop() referrerpolicy?: ReferrerPolicy;\n /\n The variant of the button to be displayed.\n /\n @Prop() variant?: IcButtonVariants = \"primary\";\n /\n The size of the button to be displayed.\n /\n @Prop() size?: IcButtonSizes = \"default\";\n /\n If `true`, the button will fill the width of the container.\n /\n @Prop() fullWidth?: boolean = false;\n /\n If `true`, the ic-tooltip which is shown for icon variant will be disabled. Title or aria-label must be set if this prop is not applied.\n /\n @Prop() disableTooltip?: boolean = false;\n /\n The position of the tooltip in relation to the button.\n /\n @Prop() tooltipPlacement?: IcButtonTooltipPlacement = \"bottom\";\n /\n The appearance of the button, e.g. dark, light, or the default.\n /\n @Prop({ mutable: true }) appearance?: IcThemeForeground = \"default\";\n /\n The <form> element to associate the button with.\n /\n @Prop() form?: string;\n /\n The URL that processes the information submitted by the button. It overrides the action attribute of the button's form owner. Does nothing if there is no form owner.\n /\n @Prop() formaction?: string;\n /\n The way the submitted form data is encoded.\n /\n @Prop() formenctype?: string;\n /\n The HTTP method used to submit the form.\n /\n @Prop() formmethod?: string;\n /\n If `true`, the form will not be validated when submitted.\n /\n @Prop() formnovalidate?: boolean;\n /\n The place to display the response from submitting the form. It overrides the target attribute of the button's form owner.\n /\n @Prop() formtarget?: string;\n /\n Emitted when button has focus\n /\n @Event() icFocus!: EventEmitter<void>;\n /\n Emitted when button has blur\n /\n @Event() icBlur!: EventEmitter<void>;\n\n private inheritedAttributes: { [k: string]: unknown } = {};\n private buttonEl: HTMLElement;\n private hasTooltip: boolean = false;\n private buttonIdNum = buttonIds++;\n private tooltipEl: HTMLIcTooltipElement;\n private id: string;\n\n @Listen(\"click\", { capture: true })\n handleHostClick(event: Event): void {\n if (this.disabled \|\| this.loading) {\n event.stopImmediatePropagation();\n }\n }\n\n @Listen(\"themeChange\", { target: \"document\" })\n themeChangeHandler(ev: CustomEvent): void {\n const theme: IcTheme = ev.detail;\n this.updateTheme(theme.mode);\n }\n\n /\n Sets focus on the native `button`.\n /\n @Method()\n async setFocus(): Promise<void> {\n if (this.buttonEl) {\n this.buttonEl.focus();\n }\n }\n\n /\n @internal Updates tooltip/aria-label text - needed as can't watch an ARIA attribute change.\n */\n @Method()\n async updateAriaLabel(newValue: string): Promise<void> {\n if (this.hasTooltip) {\n this.tooltipEl.label = newValue;\n this.buttonEl.setAttribute(\"aria-label\", newValue);\n }\n }\n\n private hasIconSlot(): boolean {\n const iconEl = this.el.querySelector(`[slot=\"icon\"]`);\n return iconEl !== null;\n }\n\n private handleHiddenFormButtonClick(form: HTMLFormElement): void {\n const hiddenFormButton = document.createElement(\"button\");\n\n hiddenFormButton.setAttribute(\"type\", this.el.type);\n hiddenFormButton.style.display = \"none\";\n\n form.appendChild(hiddenFormButton);\n\n hiddenFormButton.click();\n hiddenFormButton.remove();\n }\n\n private handleClick = (): void => {\n if (\n (this.el.type === \"submit\" \|\| this.el.type === \"reset\") &&\n !!this.el.closest(\"FORM\")\n ) {\n this.handleHiddenFormButtonClick(this.el.closest(\"FORM\"));\n }\n };\n\n private onFocus = () => {\n this.icFocus.emit();\n };\n\n private onBlur = () => {\n this.icBlur.emit();\n };\n\n private updateTheme(newTheme: IcThemeForeground = null): void {\n const foregroundColor = getThemeFromContext(this.el, newTheme \|\| null);\n\n if (foregroundColor !== IcThemeForegroundEnum.Default) {\n this.appearance = foregroundColor;\n }\n }\n\n componentWillLoad(): void {\n this.inheritedAttributes = inheritAttributes(this.el, [\n ...IC_INHERITED_ARIA,\n \"aria-expanded\",\n \"title\",\n ]);\n\n removeDisabledFalse(this.disabled, this.el);\n\n this.el.setAttribute(\"exportparts\", \"button\");\n\n const id = this.el.id;\n this.id = id !== undefined ? id : null;\n this.hasTooltip = this.variant === \"icon\" && this.disableTooltip === false;\n }\n\n componentDidLoad(): void {\n this.updateTheme();\n }\n\n render() {\n const TagType = (this.href && \"a\") \|\| \"button\";\n const {\n title,\n \"aria-label\": ariaLabel,\n ...restInheritedAttributes\n } = this.inheritedAttributes;\n const buttonAttrs =\n TagType === \"button\"\n ? {\n type: this.type,\n disabled: this.disabled,\n form: this.form,\n formaction: this.formaction,\n formenctype: this.formenctype,\n formmethod: this.formmethod,\n formnovalidate: this.formnovalidate,\n formtarget: this.formtarget,\n }\n : {\n download: this.download !== false ? this.download : null,\n href: this.href,\n rel: this.rel,\n target: this.target,\n referrerpolicy: this.referrerpolicy,\n hreflang: this.hreflang,\n };\n const newTitle = title && (title as string);\n const titleAttr = this.hasTooltip ? {} : { title: newTitle };\n let tooltipText = \"\";\n if (this.hasTooltip) {\n if (newTitle !== undefined) {\n tooltipText = newTitle;\n } else if (ariaLabel !== null) {\n tooltipText = ariaLabel as string;\n }\n }\n\n let describedBy: string = null;\n let buttonId: string = null;\n if (this.hasTooltip) {\n buttonId =\n this.id !== null\n ? `ic-button-with-tooltip-${this.id}`\n : `ic-button-with-tooltip-${this.buttonIdNum}`;\n describedBy = `ic-tooltip-${buttonId}`;\n }\n\n const ButtonContent = () => {\n return (\n <TagType\n class=\"button\"\n aria-disabled={this.loading \|\| this.disabled ? \"true\" : null}\n aria-label={this.loading ? \"Loading\" : ariaLabel}\n {...buttonAttrs}\n {...restInheritedAttributes}\n {...titleAttr}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n ref={(el) => (this.buttonEl = el)}\n id={buttonId}\n aria-describedby={describedBy}\n part=\"button\"\n >\n {this.hasIconSlot() && !this.loading && (\n <div class=\"icon-container\">\n <slot name=\"icon\" />\n </div>\n )}\n {this.loading ? (\n <div class=\"loading-container\">\n <ic-loading-indicator\n type=\"linear\"\n appearance={\n this.variant === \"primary\" \|\|\n this.variant === \"destructive\" \|\|\n this.appearance === IcThemeForegroundEnum.Dark \|\|\n this.appearance === IcThemeForegroundEnum.Light\n ? \"light\"\n : \"dark\"\n }\n ></ic-loading-indicator>\n </div>\n ) : (\n <slot />\n )}\n </TagType>\n );\n };\n\n return (\n <Host\n class={{\n [\"disabled\"]: this.disabled && !this.loading,\n [`button-variant-${this.variant}`]: true,\n [`button-size-${this.size}`]: true,\n [\"loading\"]: this.loading,\n [\"dark\"]: this.appearance === IcThemeForegroundEnum.Dark,\n [\"light\"]: this.appearance === IcThemeForegroundEnum.Light,\n [\"full-width\"]: this.fullWidth,\n }}\n onClick={this.handleClick}\n >\n {this.hasTooltip && (\n <ic-tooltip\n class={{ [\"tooltip-disabled\"]: this.disableTooltip }}\n ref={(el) => (this.tooltipEl = el)}\n label={tooltipText}\n target={buttonId}\n placement={this.tooltipPlacement}\n >\n <ButtonContent />\n </ic-tooltip>\n )}\n\n {!this.hasTooltip && <ButtonContent />}\n </Host>\n );\n }\n}\n"]}