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

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

@@ -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

@@ -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":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,KAAK,OAAO,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtD,QAAQ,CAAC,qBAAqB,EAAE,GAAG,EAAE;EACnC,EAAE,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;IAC7B,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;MAC7B,IAAI,EAAE,6CAA6C;KACpD,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;EACrD,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,kCAAkC,EAAE,KAAK,IAAI,EAAE;IAChD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;MAC7B,IAAI,EAAE,0FAA0F;KACjG,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,kCAAkC,CAAC,CAAC;EACxE,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,kCAAkC,EAAE,KAAK,IAAI,EAAE;IAChD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,eAAe,EAAE,UAAU,CAAC;MACzC,IAAI,EAAE,4EAA4E;KACnF,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,kCAAkC,CAAC,CAAC;EACxE,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,oCAAoC,EAAE,KAAK,IAAI,EAAE;IAClD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,eAAe,EAAE,UAAU,CAAC;MACzC,IAAI,EAAE;;;;;+BAKmB;KAC1B,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,oCAAoC,CAAC,CAAC;EAC1E,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,yBAAyB,EAAE,KAAK,IAAI,EAAE;IACvC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;MAC7B,IAAI,EAAE,6CAA6C;KACpD,CAAC,CAAC;IAEH,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC1D,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EACpD,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,gDAAgD,EAAE,KAAK,IAAI,EAAE;IAC9D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,eAAe,EAAE,UAAU,CAAC;MACzC,IAAI,EAAE;;;;;+BAKmB;KAC1B,CAAC,CAAC;IAEH,MAAM,iBAAiB,GACrB,IAAI,CAAC,GAAG,CAAC,cAAc,CAAC,oBAAoB,CAAC,CAAC;IAChD,iBAAiB,CAAC,KAAK,EAAE,CAAC;IAE1B,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAC/B,gDAAgD,CACjD,CAAC;EACJ,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,4DAA4D,EAAE,KAAK,IAAI,EAAE;IAC1E,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,eAAe,EAAE,UAAU,CAAC;MACzC,IAAI,EAAE;;;;;6BAKiB;KACxB,CAAC,CAAC;IAEH,IAAI,CAAC,YAAY,CAAC,sBAAsB,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;IAEzD,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAC/B,4DAA4D,CAC7D,CAAC;EACJ,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,wCAAwC,EAAE,KAAK,IAAI,EAAE;IACtD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,eAAe,EAAE,UAAU,CAAC;MACzC,IAAI,EAAE;;;;6BAIiB;KACxB,CAAC,CAAC;IAEH,IAAI,CAAC,YAAY,CAAC,sBAAsB,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;IAEzD,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAExD,wBAAwB;IACxB,MAAM,IAAI,CAAC,YAAY,CAAC,iBAAiB,EAAE,CAAC;EAC9C,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,mDAAmD,EAAE,KAAK,IAAI,EAAE;IACjE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,eAAe,EAAE,UAAU,CAAC;MACzC,IAAI,EAAE;;;;;6BAKiB;KACxB,CAAC,CAAC;IAEH,IAAI,CAAC,YAAY,CAAC,uBAAuB,GAAG,IAAI,CAAC;IACjD,IAAI,CAAC,YAAY,CAAC,sBAAsB,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;IAEzD,IAAI,CAAC,YAAY,CAAC,sBAAsB,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;IAEzD,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAEzD,wBAAwB;IACxB,MAAM,IAAI,CAAC,YAAY,CAAC,iBAAiB,EAAE,CAAC;EAC9C,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,yDAAyD,EAAE,KAAK,IAAI,EAAE;IACvE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,eAAe,EAAE,UAAU,CAAC;MACzC,IAAI,EAAE;;;;;6BAKiB;KACxB,CAAC,CAAC;IAEH,oDAAoD;IACpD,IAAI,CAAC,YAAY,CAAC,sBAAsB,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;IAEzD,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,mBAAmB,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAE1D,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CACpC,qBAAqB,CACD,CAAC;IACvB,MAAM,CAAC,KAAK,EAAE,CAAC;IACf,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,kCAAkC;IAClC,MAAM,cAAc,CAAC,GAAG,CAAC,CAAC;IAE1B,IAAI,CAAC,YAAY,CAAC,sBAAsB,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;IAEzD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,mBAAmB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEzD,wBAAwB;IACxB,MAAM,IAAI,CAAC,YAAY,CAAC,iBAAiB,EAAE,CAAC;EAC9C,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,kDAAkD,EAAE,KAAK,IAAI,EAAE;IAChE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,eAAe,EAAE,UAAU,CAAC;MACzC,IAAI,EAAE;;;;;6BAKiB;KACxB,CAAC,CAAC;IAEH,oDAAoD;IACpD,IAAI,CAAC,YAAY,CAAC,sBAAsB,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;IAEzD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,IAAI,CAAC,YAAY,CAAC,sBAAsB,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;IAEzD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,2BAA2B;IAE3B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,mBAAmB,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC1D,4DAA4D;IAE5D,wBAAwB;IACxB,MAAM,IAAI,CAAC,YAAY,CAAC,iBAAiB,EAAE,CAAC;EAC9C,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,+EAA+E,EAAE,KAAK,IAAI,EAAE;IAC7F,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,eAAe,EAAE,UAAU,CAAC;MACzC,IAAI,EAAE;;6BAEiB;KACxB,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,uBAAuB,EAAE,CAAC,CAAC,QAAQ,EAAE,CAAC;EACjE,CAAC,CAAC,CAAC;EAEH,wDAAwD;EACxD,EAAE,CAAC,iDAAiD,EAAE,KAAK,IAAI,EAAE;IAC/D,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;IACzD,MAAM,CAAC,cAAc,CAAC,OAAO,EAAE,sBAAsB,EAAE;MACrD,KAAK,EAAE,MAAM;KACd,CAAC,CAAC;IAEH,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,eAAe,EAAE,UAAU,CAAC;MACzC,IAAI,EAAE;;;;;6BAKiB;KACxB,CAAC,CAAC;IAEH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAC/B,iDAAiD,CAClD,CAAC;EACJ,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","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

@@ -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

@@ -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

@@ -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

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