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

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

@@ -0,0 +1,369 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { TabGroup } from "../ic-tab-group/ic-tab-group";
+import { TabPanel } from "../ic-tab-panel/ic-tab-panel";
+import { Tab } from "../ic-tab/ic-tab";
+import { TabContext } from "./ic-tab-context";
+beforeAll(() => {
+  jest.spyOn(console, "warn").mockImplementation(jest.fn());
+});
+describe("ic-tab-context component", () => {
+  it("should render tab context with tabs", async () => {
+    const page = await newSpecPage({
+      components: [TabContext, TabGroup, Tab, TabPanel],
+      html: `<ic-tab-context>
+      <ic-tab-group label="Example tab group">
+        <ic-tab>One</ic-tab>
+        <ic-tab>Two</ic-tab>
+        <ic-tab>Three</ic-tab>
+      </ic-tab-group>
+      <ic-tab-panel>Tab One</ic-tab-panel>
+      <ic-tab-panel>Tab Two</ic-tab-panel>
+      <ic-tab-panel>Tab Three</ic-tab-panel>
+      </ic-tab-context>`,
+    });
+    expect(page.root).toMatchSnapshot();
+    //test disconnected callback for automatic activation
+    page.setContent("");
+  });
+  it("should render tab context with tabs - light appearance", async () => {
+    const page = await newSpecPage({
+      components: [TabContext, TabGroup, Tab, TabPanel],
+      html: `<ic-tab-context appearance="light">
+      <ic-tab-group label="Example tab group" appearance="light">
+        <ic-tab>One</ic-tab>
+        <ic-tab>Two</ic-tab>
+        <ic-tab>Three</ic-tab>
+      </ic-tab-group>
+      <ic-tab-panel>Tab One</ic-tab-panel>
+      <ic-tab-panel>Tab Two</ic-tab-panel>
+      <ic-tab-panel>Tab Three</ic-tab-panel>
+      </ic-tab-context>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should render tab context with tabs - selected tab", async () => {
+    const page = await newSpecPage({
+      components: [TabContext, TabGroup, Tab, TabPanel],
+      html: `<ic-tab-context selected-tab-index="2">
+      <ic-tab-group label="Example tab group">
+        <ic-tab>One</ic-tab>
+        <ic-tab>Two</ic-tab>
+        <ic-tab>Three</ic-tab>
+      </ic-tab-group>
+      <ic-tab-panel>Tab One</ic-tab-panel>
+      <ic-tab-panel>Tab Two</ic-tab-panel>
+      <ic-tab-panel>Tab Three</ic-tab-panel>
+      </ic-tab-context>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should test controlled mode - selected tab", async () => {
+    const page = await newSpecPage({
+      components: [TabContext, TabGroup, Tab, TabPanel],
+      html: `<ic-tab-context selected-tab-index="2">
+      <ic-tab-group label="Example tab group">
+        <ic-tab>One</ic-tab>
+        <ic-tab>Two</ic-tab>
+        <ic-tab>Three</ic-tab>
+      </ic-tab-group>
+      <ic-tab-panel>Tab One</ic-tab-panel>
+      <ic-tab-panel>Tab Two</ic-tab-panel>
+      <ic-tab-panel>Tab Three</ic-tab-panel>
+      </ic-tab-context>`,
+    });
+    expect(page.rootInstance.selectedTab).toBe(2);
+    const eventSpy = jest.fn();
+    page.root.addEventListener("icTabSelect", eventSpy);
+    const tabGroup = page.root.querySelector("ic-tab-group");
+    tabGroup.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+      key: "Home",
+      bubbles: true,
+      cancelable: true,
+    }));
+    await page.waitForChanges();
+    expect(eventSpy).toHaveBeenCalled();
+  });
+  it("should render tab context with tabs - manual activation", async () => {
+    const page = await newSpecPage({
+      components: [TabContext, TabGroup, Tab, TabPanel],
+      html: `<ic-tab-context activation-type="manual">
+      <ic-tab-group label="Example tab group">
+        <ic-tab>One</ic-tab>
+        <ic-tab>Two</ic-tab>
+        <ic-tab>Three</ic-tab>
+      </ic-tab-group>
+      <ic-tab-panel>Tab One</ic-tab-panel>
+      <ic-tab-panel>Tab Two</ic-tab-panel>
+      <ic-tab-panel>Tab Three</ic-tab-panel>
+      </ic-tab-context>`,
+    });
+    expect(page.root).toMatchSnapshot();
+    //test disconnected callback for manual activation
+    page.setContent("");
+  });
+  it("should render tab context with custom contextId", async () => {
+    const page = await newSpecPage({
+      components: [TabContext, TabGroup, Tab, TabPanel],
+      html: `<ic-tab-context context-id="custom-context">
+      <ic-tab-group label="Example tab group">
+        <ic-tab>One</ic-tab>
+        <ic-tab>Two</ic-tab>
+        <ic-tab>Three</ic-tab>
+      </ic-tab-group>
+      <ic-tab-panel>Tab One</ic-tab-panel>
+      <ic-tab-panel>Tab Two</ic-tab-panel>
+      <ic-tab-panel>Tab Three</ic-tab-panel>
+      </ic-tab-context>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should test setting selected tab", async () => {
+    const page = await newSpecPage({
+      components: [TabContext, TabGroup, Tab, TabPanel],
+      html: `<ic-tab-context>
+      <ic-tab-group label="Example tab group">
+        <ic-tab>One</ic-tab>
+        <ic-tab>Two</ic-tab>
+        <ic-tab>Three</ic-tab>
+      </ic-tab-group>
+      <ic-tab-panel>Tab One</ic-tab-panel>
+      <ic-tab-panel>Tab Two</ic-tab-panel>
+      <ic-tab-panel>Tab Three</ic-tab-panel>
+      </ic-tab-context>`,
+    });
+    expect(page.rootInstance.selectedTab).toBe(0);
+    page.root.selectedTabIndex = 1;
+    await page.waitForChanges();
+    expect(page.rootInstance.selectedTab).toBe(1);
+  });
+  it("should test tab click handler", async () => {
+    const page = await newSpecPage({
+      components: [TabContext, TabGroup, Tab, TabPanel],
+      html: `<ic-tab-context>
+      <ic-tab-group label="Example tab group">
+        <ic-tab>One</ic-tab>
+        <ic-tab>Two</ic-tab>
+        <ic-tab>Three</ic-tab>
+      </ic-tab-group>
+      <ic-tab-panel>Tab One</ic-tab-panel>
+      <ic-tab-panel>Tab Two</ic-tab-panel>
+      <ic-tab-panel>Tab Three</ic-tab-panel>
+      </ic-tab-context>`,
+    });
+    expect(page.rootInstance.selectedTabIndex).toBe(undefined);
+    const eventSpy = jest.fn();
+    page.root.addEventListener("icTabSelect", eventSpy);
+    await page.rootInstance.tabClickHandler({
+      stopImmediatePropagation: jest.fn(),
+      detail: {
+        contextId: "default",
+        position: 1,
+        tabId: "ic-tab--1-context-default",
+      },
+    });
+    await page.waitForChanges();
+    expect(page.rootInstance.selectedTab).toBe(1);
+    expect(eventSpy).toHaveBeenCalled();
+  });
+  it("should test key down handler - automatic", async () => {
+    const page = await newSpecPage({
+      components: [TabContext, TabGroup, Tab, TabPanel],
+      html: `<ic-tab-context>
+      <ic-tab-group label="Example tab group">
+        <ic-tab>One</ic-tab>
+        <ic-tab>Two</ic-tab>
+        <ic-tab>Three</ic-tab>
+      </ic-tab-group>
+      <ic-tab-panel>Tab One</ic-tab-panel>
+      <ic-tab-panel>Tab Two</ic-tab-panel>
+      <ic-tab-panel>Tab Three</ic-tab-panel>
+      </ic-tab-context>`,
+    });
+    const tabGroup = page.root.querySelector("ic-tab-group");
+    tabGroup.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+      key: "End",
+      bubbles: true,
+      cancelable: true,
+    }));
+    await page.waitForChanges();
+    expect(page.rootInstance.selectedTab).toBe(2);
+    tabGroup.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+      key: "Home",
+      bubbles: true,
+      cancelable: true,
+    }));
+    await page.waitForChanges();
+    expect(page.rootInstance.selectedTab).toBe(0);
+    tabGroup.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+      key: "ArrowLeft",
+      bubbles: true,
+      cancelable: true,
+    }));
+    await page.waitForChanges();
+    expect(page.rootInstance.selectedTab).toBe(2);
+    tabGroup.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+      key: "ArrowLeft",
+      bubbles: true,
+      cancelable: true,
+    }));
+    await page.waitForChanges();
+    expect(page.rootInstance.selectedTab).toBe(1);
+    tabGroup.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+      key: "ArrowRight",
+      bubbles: true,
+      cancelable: true,
+    }));
+    await page.waitForChanges();
+    expect(page.rootInstance.selectedTab).toBe(2);
+    tabGroup.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+      key: "ArrowRight",
+      bubbles: true,
+      cancelable: true,
+    }));
+    await page.waitForChanges();
+    expect(page.rootInstance.selectedTab).toBe(0);
+    tabGroup.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+      key: "Escape",
+      bubbles: true,
+      cancelable: true,
+    }));
+    await page.waitForChanges();
+    expect(page.rootInstance.selectedTab).toBe(0);
+  });
+  it("should test key down handler - manual", async () => {
+    const page = await newSpecPage({
+      components: [TabContext, TabGroup, Tab, TabPanel],
+      html: `<ic-tab-context activation-type="manual">
+      <ic-tab-group label="Example tab group">
+        <ic-tab>One</ic-tab>
+        <ic-tab>Two</ic-tab>
+        <ic-tab>Three</ic-tab>
+      </ic-tab-group>
+      <ic-tab-panel>Tab One</ic-tab-panel>
+      <ic-tab-panel>Tab Two</ic-tab-panel>
+      <ic-tab-panel>Tab Three</ic-tab-panel>
+      </ic-tab-context>`,
+    });
+    const tabGroup = page.root.querySelector("ic-tab-group");
+    tabGroup.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+      key: "End",
+      bubbles: true,
+      cancelable: true,
+    }));
+    await page.waitForChanges();
+    expect(page.rootInstance.selectedTab).toBe(0);
+    expect(page.rootInstance.focusedTabIndex).toBe(2);
+    tabGroup.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+      key: "Enter",
+      bubbles: true,
+      cancelable: true,
+    }));
+    await page.waitForChanges();
+    expect(page.rootInstance.selectedTab).toBe(2);
+    tabGroup.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+      key: "Home",
+      bubbles: true,
+      cancelable: true,
+    }));
+    await page.waitForChanges();
+    expect(page.rootInstance.focusedTabIndex).toBe(0);
+    expect(page.rootInstance.selectedTab).toBe(2);
+    tabGroup.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+      key: " ",
+      bubbles: true,
+      cancelable: true,
+    }));
+    await page.waitForChanges();
+    expect(page.rootInstance.selectedTab).toBe(0);
+    tabGroup.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+      key: "ArrowLeft",
+      bubbles: true,
+      cancelable: true,
+    }));
+    await page.waitForChanges();
+    expect(page.rootInstance.focusedTabIndex).toBe(2);
+    tabGroup.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+      key: "ArrowLeft",
+      bubbles: true,
+      cancelable: true,
+    }));
+    await page.waitForChanges();
+    expect(page.rootInstance.focusedTabIndex).toBe(1);
+    tabGroup.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+      key: "ArrowRight",
+      bubbles: true,
+      cancelable: true,
+    }));
+    await page.waitForChanges();
+    expect(page.rootInstance.focusedTabIndex).toBe(2);
+    tabGroup.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+      key: "ArrowRight",
+      bubbles: true,
+      cancelable: true,
+    }));
+    await page.waitForChanges();
+    expect(page.rootInstance.focusedTabIndex).toBe(0);
+    tabGroup.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+      key: "Escape",
+      bubbles: true,
+      cancelable: true,
+    }));
+    await page.waitForChanges();
+    expect(page.rootInstance.focusedTabIndex).toBe(0);
+  });
+  it("should apply tab and panel ids to elements added after initial render of the context", async () => {
+    const page = await newSpecPage({
+      components: [TabContext, TabGroup, Tab, TabPanel],
+      html: `<ic-tab-context>
+      <ic-tab-group label="Example tab group">
+        <ic-tab>One</ic-tab>
+        <ic-tab>Two</ic-tab>
+        <ic-tab>Three</ic-tab>
+      </ic-tab-group>
+      <ic-tab-panel>Tab One</ic-tab-panel>
+      <ic-tab-panel>Tab Two</ic-tab-panel>
+      <ic-tab-panel>Tab Three</ic-tab-panel>
+      </ic-tab-context>`,
+    });
+    const tabGroup = page.root.querySelector("ic-tab-group");
+    tabGroup.insertAdjacentHTML("beforeend", "<ic-tab>Four</ic-tab>");
+    page.root.insertAdjacentHTML("beforeend", "<ic-tab-panel>Four</ic-tab-panel>");
+    await page.waitForChanges();
+    const newTab = page.root.querySelector('[id*="ic-tab-3-context-default"]');
+    const newTabPanel = page.root.querySelector('[id*="ic-tab-panel-3-context-default"]');
+    expect(newTab.tabId).toBe("ic-tab--3-context-default");
+    expect(newTabPanel.panelId).toBe("ic-tab--3-context-default");
+  });
+  it("should reassign ids if tab and tab panel are dynamically removed", async () => {
+    const page = await newSpecPage({
+      components: [TabContext, TabGroup, Tab, TabPanel],
+      html: `<ic-tab-context>
+      <ic-tab-group label="Example tab group">
+        <ic-tab>One</ic-tab>
+        <ic-tab>Two</ic-tab>
+        <ic-tab>Three</ic-tab>
+      </ic-tab-group>
+      <ic-tab-panel>Tab One</ic-tab-panel>
+      <ic-tab-panel>Tab Two</ic-tab-panel>
+      <ic-tab-panel>Tab Three</ic-tab-panel>
+      </ic-tab-context>`,
+    });
+    const tabGroup = page.root.querySelector("ic-tab-group");
+    let allTabs = tabGroup.querySelectorAll("ic-tab");
+    let allTabPanels = page.root.querySelectorAll("ic-tab-panel");
+    expect(allTabs.length).toBe(3);
+    expect(allTabPanels.length).toBe(3);
+    allTabPanels[allTabPanels.length - 2].remove();
+    allTabs[allTabs.length - 2].remove();
+    await page.waitForChanges();
+    allTabs = tabGroup.querySelectorAll("ic-tab");
+    allTabPanels = page.root.querySelectorAll("ic-tab-panel");
+    expect(allTabs.length).toBe(2);
+    expect(allTabPanels.length).toBe(2);
+    const newlyUpdatedTab = page.root.querySelector('[id*="ic-tab-1-context-default"]');
+    const newlyUpdatedTabPanel = page.root.querySelector('[id*="ic-tab-panel-1-context-default"]');
+    expect(newlyUpdatedTab.tabId).toBe("ic-tab--1-context-default");
+    expect(newlyUpdatedTabPanel.panelId).toBe("ic-tab--1-context-default");
+  });
+});
+//# sourceMappingURL=ic-tab-context.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-tab-context.spec.js","sourceRoot":"","sources":["../../../src/components/ic-tab-context/ic-tab-context.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AACxD,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,SAAS,CAAC,GAAG,EAAE;EACb,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;AAC5D,CAAC,CAAC,CAAC;AAEH,QAAQ,CAAC,0BAA0B,EAAE,GAAG,EAAE;EACxC,EAAE,CAAC,qCAAqC,EAAE,KAAK,IAAI,EAAE;IACnD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,QAAQ,CAAC;MACjD,IAAI,EAAE;;;;;;;;;wBASY;KACnB,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IAEpC,qDAAqD;IACrD,IAAI,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;EACtB,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,wDAAwD,EAAE,KAAK,IAAI,EAAE;IACtE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,QAAQ,CAAC;MACjD,IAAI,EAAE;;;;;;;;;wBASY;KACnB,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;EACtC,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,oDAAoD,EAAE,KAAK,IAAI,EAAE;IAClE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,QAAQ,CAAC;MACjD,IAAI,EAAE;;;;;;;;;wBASY;KACnB,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;EACtC,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,4CAA4C,EAAE,KAAK,IAAI,EAAE;IAC1D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,QAAQ,CAAC;MACjD,IAAI,EAAE;;;;;;;;;wBASY;KACnB,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAE9C,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;IAC3B,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;IAEpD,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;IAEzD,QAAQ,CAAC,aAAa,CACpB,IAAI,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,SAAS,EAAE;MACzC,GAAG,EAAE,MAAM;MACX,OAAO,EAAE,IAAI;MACb,UAAU,EAAE,IAAI;KACjB,CAAC,CACH,CAAC;IAEF,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,QAAQ,CAAC,CAAC,gBAAgB,EAAE,CAAC;EACtC,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,yDAAyD,EAAE,KAAK,IAAI,EAAE;IACvE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,QAAQ,CAAC;MACjD,IAAI,EAAE;;;;;;;;;wBASY;KACnB,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IAEpC,kDAAkD;IAClD,IAAI,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;EACtB,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,iDAAiD,EAAE,KAAK,IAAI,EAAE;IAC/D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,QAAQ,CAAC;MACjD,IAAI,EAAE;;;;;;;;;wBASY;KACnB,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;EACtC,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,kCAAkC,EAAE,KAAK,IAAI,EAAE;IAChD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,QAAQ,CAAC;MACjD,IAAI,EAAE;;;;;;;;;wBASY;KACnB,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAE9C,IAAI,CAAC,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC;IAC/B,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;EAChD,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,+BAA+B,EAAE,KAAK,IAAI,EAAE;IAC7C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,QAAQ,CAAC;MACjD,IAAI,EAAE;;;;;;;;;wBASY;KACnB,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAE3D,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;IAC3B,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;IAEpD,MAAM,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC;MACtC,wBAAwB,EAAE,IAAI,CAAC,EAAE,EAAE;MACnC,MAAM,EAAE;QACN,SAAS,EAAE,SAAS;QACpB,QAAQ,EAAE,CAAC;QACX,KAAK,EAAE,2BAA2B;OACnC;KACF,CAAC,CAAC;IAEH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAC9C,MAAM,CAAC,QAAQ,CAAC,CAAC,gBAAgB,EAAE,CAAC;EACtC,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,0CAA0C,EAAE,KAAK,IAAI,EAAE;IACxD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,QAAQ,CAAC;MACjD,IAAI,EAAE;;;;;;;;;wBASY;KACnB,CAAC,CAAC;IAEH,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;IAEzD,QAAQ,CAAC,aAAa,CACpB,IAAI,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,SAAS,EAAE;MACzC,GAAG,EAAE,KAAK;MACV,OAAO,EAAE,IAAI;MACb,UAAU,EAAE,IAAI;KACjB,CAAC,CACH,CAAC;IAEF,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAE9C,QAAQ,CAAC,aAAa,CACpB,IAAI,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,SAAS,EAAE;MACzC,GAAG,EAAE,MAAM;MACX,OAAO,EAAE,IAAI;MACb,UAAU,EAAE,IAAI;KACjB,CAAC,CACH,CAAC;IAEF,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAE9C,QAAQ,CAAC,aAAa,CACpB,IAAI,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,SAAS,EAAE;MACzC,GAAG,EAAE,WAAW;MAChB,OAAO,EAAE,IAAI;MACb,UAAU,EAAE,IAAI;KACjB,CAAC,CACH,CAAC;IAEF,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAE9C,QAAQ,CAAC,aAAa,CACpB,IAAI,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,SAAS,EAAE;MACzC,GAAG,EAAE,WAAW;MAChB,OAAO,EAAE,IAAI;MACb,UAAU,EAAE,IAAI;KACjB,CAAC,CACH,CAAC;IAEF,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAE9C,QAAQ,CAAC,aAAa,CACpB,IAAI,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,SAAS,EAAE;MACzC,GAAG,EAAE,YAAY;MACjB,OAAO,EAAE,IAAI;MACb,UAAU,EAAE,IAAI;KACjB,CAAC,CACH,CAAC;IAEF,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAE9C,QAAQ,CAAC,aAAa,CACpB,IAAI,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,SAAS,EAAE;MACzC,GAAG,EAAE,YAAY;MACjB,OAAO,EAAE,IAAI;MACb,UAAU,EAAE,IAAI;KACjB,CAAC,CACH,CAAC;IAEF,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAE9C,QAAQ,CAAC,aAAa,CACpB,IAAI,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,SAAS,EAAE;MACzC,GAAG,EAAE,QAAQ;MACb,OAAO,EAAE,IAAI;MACb,UAAU,EAAE,IAAI;KACjB,CAAC,CACH,CAAC;IAEF,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;EAChD,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,uCAAuC,EAAE,KAAK,IAAI,EAAE;IACrD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,QAAQ,CAAC;MACjD,IAAI,EAAE;;;;;;;;;wBASY;KACnB,CAAC,CAAC;IAEH,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;IAEzD,QAAQ,CAAC,aAAa,CACpB,IAAI,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,SAAS,EAAE;MACzC,GAAG,EAAE,KAAK;MACV,OAAO,EAAE,IAAI;MACb,UAAU,EAAE,IAAI;KACjB,CAAC,CACH,CAAC;IAEF,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAC9C,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAElD,QAAQ,CAAC,aAAa,CACpB,IAAI,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,SAAS,EAAE;MACzC,GAAG,EAAE,OAAO;MACZ,OAAO,EAAE,IAAI;MACb,UAAU,EAAE,IAAI;KACjB,CAAC,CACH,CAAC;IAEF,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAE9C,QAAQ,CAAC,aAAa,CACpB,IAAI,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,SAAS,EAAE;MACzC,GAAG,EAAE,MAAM;MACX,OAAO,EAAE,IAAI;MACb,UAAU,EAAE,IAAI;KACjB,CAAC,CACH,CAAC;IAEF,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAClD,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAE9C,QAAQ,CAAC,aAAa,CACpB,IAAI,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,SAAS,EAAE;MACzC,GAAG,EAAE,GAAG;MACR,OAAO,EAAE,IAAI;MACb,UAAU,EAAE,IAAI;KACjB,CAAC,CACH,CAAC;IAEF,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAE9C,QAAQ,CAAC,aAAa,CACpB,IAAI,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,SAAS,EAAE;MACzC,GAAG,EAAE,WAAW;MAChB,OAAO,EAAE,IAAI;MACb,UAAU,EAAE,IAAI;KACjB,CAAC,CACH,CAAC;IAEF,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAElD,QAAQ,CAAC,aAAa,CACpB,IAAI,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,SAAS,EAAE;MACzC,GAAG,EAAE,WAAW;MAChB,OAAO,EAAE,IAAI;MACb,UAAU,EAAE,IAAI;KACjB,CAAC,CACH,CAAC;IAEF,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAElD,QAAQ,CAAC,aAAa,CACpB,IAAI,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,SAAS,EAAE;MACzC,GAAG,EAAE,YAAY;MACjB,OAAO,EAAE,IAAI;MACb,UAAU,EAAE,IAAI;KACjB,CAAC,CACH,CAAC;IAEF,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAElD,QAAQ,CAAC,aAAa,CACpB,IAAI,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,SAAS,EAAE;MACzC,GAAG,EAAE,YAAY;MACjB,OAAO,EAAE,IAAI;MACb,UAAU,EAAE,IAAI;KACjB,CAAC,CACH,CAAC;IAEF,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAElD,QAAQ,CAAC,aAAa,CACpB,IAAI,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,SAAS,EAAE;MACzC,GAAG,EAAE,QAAQ;MACb,OAAO,EAAE,IAAI;MACb,UAAU,EAAE,IAAI;KACjB,CAAC,CACH,CAAC;IAEF,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;EACpD,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,sFAAsF,EAAE,KAAK,IAAI,EAAE;IACpG,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,QAAQ,CAAC;MACjD,IAAI,EAAE;;;;;;;;;wBASY;KACnB,CAAC,CAAC;IAEH,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;IAEzD,QAAQ,CAAC,kBAAkB,CAAC,WAAW,EAAE,uBAAuB,CAAC,CAAC;IAClE,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAC1B,WAAW,EACX,mCAAmC,CACpC,CAAC;IACF,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CACpC,kCAAkC,CACf,CAAC;IACtB,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CACzC,wCAAwC,CAChB,CAAC;IAE3B,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,2BAA2B,CAAC,CAAC;IACvD,MAAM,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,2BAA2B,CAAC,CAAC;EAChE,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,kEAAkE,EAAE,KAAK,IAAI,EAAE;IAChF,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,QAAQ,CAAC;MACjD,IAAI,EAAE;;;;;;;;;wBASY;KACnB,CAAC,CAAC;IAEH,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;IAEzD,IAAI,OAAO,GAAG,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IAClD,IAAI,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAE9D,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAC/B,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAEpC,YAAY,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC;IAC/C,OAAO,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC;IAErC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,OAAO,GAAG,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IAC9C,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAE1D,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAC/B,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAEpC,MAAM,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAC7C,kCAAkC,CACf,CAAC;IACtB,MAAM,oBAAoB,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAClD,wCAAwC,CAChB,CAAC;IAE3B,MAAM,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,2BAA2B,CAAC,CAAC;IAChE,MAAM,CAAC,oBAAoB,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,2BAA2B,CAAC,CAAC;EACzE,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { TabGroup } from \"../ic-tab-group/ic-tab-group\";\nimport { TabPanel } from \"../ic-tab-panel/ic-tab-panel\";\nimport { Tab } from \"../ic-tab/ic-tab\";\nimport { TabContext } from \"./ic-tab-context\";\n\nbeforeAll(() => {\n  jest.spyOn(console, \"warn\").mockImplementation(jest.fn());\n});\n\ndescribe(\"ic-tab-context component\", () => {\n  it(\"should render tab context with tabs\", async () => {\n    const page = await newSpecPage({\n      components: [TabContext, TabGroup, Tab, TabPanel],\n      html: `<ic-tab-context>\n      <ic-tab-group label=\"Example tab group\">\n        <ic-tab>One</ic-tab>\n        <ic-tab>Two</ic-tab>\n        <ic-tab>Three</ic-tab>\n      </ic-tab-group>\n      <ic-tab-panel>Tab One</ic-tab-panel>\n      <ic-tab-panel>Tab Two</ic-tab-panel>\n      <ic-tab-panel>Tab Three</ic-tab-panel>\n      </ic-tab-context>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n\n    //test disconnected callback for automatic activation\n    page.setContent(\"\");\n  });\n\n  it(\"should render tab context with tabs - light appearance\", async () => {\n    const page = await newSpecPage({\n      components: [TabContext, TabGroup, Tab, TabPanel],\n      html: `<ic-tab-context appearance=\"light\">\n      <ic-tab-group label=\"Example tab group\" appearance=\"light\">\n        <ic-tab>One</ic-tab>\n        <ic-tab>Two</ic-tab>\n        <ic-tab>Three</ic-tab>\n      </ic-tab-group>\n      <ic-tab-panel>Tab One</ic-tab-panel>\n      <ic-tab-panel>Tab Two</ic-tab-panel>\n      <ic-tab-panel>Tab Three</ic-tab-panel>\n      </ic-tab-context>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render tab context with tabs - selected tab\", async () => {\n    const page = await newSpecPage({\n      components: [TabContext, TabGroup, Tab, TabPanel],\n      html: `<ic-tab-context selected-tab-index=\"2\">\n      <ic-tab-group label=\"Example tab group\">\n        <ic-tab>One</ic-tab>\n        <ic-tab>Two</ic-tab>\n        <ic-tab>Three</ic-tab>\n      </ic-tab-group>\n      <ic-tab-panel>Tab One</ic-tab-panel>\n      <ic-tab-panel>Tab Two</ic-tab-panel>\n      <ic-tab-panel>Tab Three</ic-tab-panel>\n      </ic-tab-context>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should test controlled mode - selected tab\", async () => {\n    const page = await newSpecPage({\n      components: [TabContext, TabGroup, Tab, TabPanel],\n      html: `<ic-tab-context selected-tab-index=\"2\">\n      <ic-tab-group label=\"Example tab group\">\n        <ic-tab>One</ic-tab>\n        <ic-tab>Two</ic-tab>\n        <ic-tab>Three</ic-tab>\n      </ic-tab-group>\n      <ic-tab-panel>Tab One</ic-tab-panel>\n      <ic-tab-panel>Tab Two</ic-tab-panel>\n      <ic-tab-panel>Tab Three</ic-tab-panel>\n      </ic-tab-context>`,\n    });\n\n    expect(page.rootInstance.selectedTab).toBe(2);\n\n    const eventSpy = jest.fn();\n    page.root.addEventListener(\"icTabSelect\", eventSpy);\n\n    const tabGroup = page.root.querySelector(\"ic-tab-group\");\n\n    tabGroup.dispatchEvent(\n      new window.window.KeyboardEvent(\"keydown\", {\n        key: \"Home\",\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n    expect(eventSpy).toHaveBeenCalled();\n  });\n\n  it(\"should render tab context with tabs - manual activation\", async () => {\n    const page = await newSpecPage({\n      components: [TabContext, TabGroup, Tab, TabPanel],\n      html: `<ic-tab-context activation-type=\"manual\">\n      <ic-tab-group label=\"Example tab group\">\n        <ic-tab>One</ic-tab>\n        <ic-tab>Two</ic-tab>\n        <ic-tab>Three</ic-tab>\n      </ic-tab-group>\n      <ic-tab-panel>Tab One</ic-tab-panel>\n      <ic-tab-panel>Tab Two</ic-tab-panel>\n      <ic-tab-panel>Tab Three</ic-tab-panel>\n      </ic-tab-context>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n\n    //test disconnected callback for manual activation\n    page.setContent(\"\");\n  });\n\n  it(\"should render tab context with custom contextId\", async () => {\n    const page = await newSpecPage({\n      components: [TabContext, TabGroup, Tab, TabPanel],\n      html: `<ic-tab-context context-id=\"custom-context\">\n      <ic-tab-group label=\"Example tab group\">\n        <ic-tab>One</ic-tab>\n        <ic-tab>Two</ic-tab>\n        <ic-tab>Three</ic-tab>\n      </ic-tab-group>\n      <ic-tab-panel>Tab One</ic-tab-panel>\n      <ic-tab-panel>Tab Two</ic-tab-panel>\n      <ic-tab-panel>Tab Three</ic-tab-panel>\n      </ic-tab-context>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should test setting selected tab\", async () => {\n    const page = await newSpecPage({\n      components: [TabContext, TabGroup, Tab, TabPanel],\n      html: `<ic-tab-context>\n      <ic-tab-group label=\"Example tab group\">\n        <ic-tab>One</ic-tab>\n        <ic-tab>Two</ic-tab>\n        <ic-tab>Three</ic-tab>\n      </ic-tab-group>\n      <ic-tab-panel>Tab One</ic-tab-panel>\n      <ic-tab-panel>Tab Two</ic-tab-panel>\n      <ic-tab-panel>Tab Three</ic-tab-panel>\n      </ic-tab-context>`,\n    });\n\n    expect(page.rootInstance.selectedTab).toBe(0);\n\n    page.root.selectedTabIndex = 1;\n    await page.waitForChanges();\n\n    expect(page.rootInstance.selectedTab).toBe(1);\n  });\n\n  it(\"should test tab click handler\", async () => {\n    const page = await newSpecPage({\n      components: [TabContext, TabGroup, Tab, TabPanel],\n      html: `<ic-tab-context>\n      <ic-tab-group label=\"Example tab group\">\n        <ic-tab>One</ic-tab>\n        <ic-tab>Two</ic-tab>\n        <ic-tab>Three</ic-tab>\n      </ic-tab-group>\n      <ic-tab-panel>Tab One</ic-tab-panel>\n      <ic-tab-panel>Tab Two</ic-tab-panel>\n      <ic-tab-panel>Tab Three</ic-tab-panel>\n      </ic-tab-context>`,\n    });\n\n    expect(page.rootInstance.selectedTabIndex).toBe(undefined);\n\n    const eventSpy = jest.fn();\n    page.root.addEventListener(\"icTabSelect\", eventSpy);\n\n    await page.rootInstance.tabClickHandler({\n      stopImmediatePropagation: jest.fn(),\n      detail: {\n        contextId: \"default\",\n        position: 1,\n        tabId: \"ic-tab--1-context-default\",\n      },\n    });\n\n    await page.waitForChanges();\n    expect(page.rootInstance.selectedTab).toBe(1);\n    expect(eventSpy).toHaveBeenCalled();\n  });\n\n  it(\"should test key down handler - automatic\", async () => {\n    const page = await newSpecPage({\n      components: [TabContext, TabGroup, Tab, TabPanel],\n      html: `<ic-tab-context>\n      <ic-tab-group label=\"Example tab group\">\n        <ic-tab>One</ic-tab>\n        <ic-tab>Two</ic-tab>\n        <ic-tab>Three</ic-tab>\n      </ic-tab-group>\n      <ic-tab-panel>Tab One</ic-tab-panel>\n      <ic-tab-panel>Tab Two</ic-tab-panel>\n      <ic-tab-panel>Tab Three</ic-tab-panel>\n      </ic-tab-context>`,\n    });\n\n    const tabGroup = page.root.querySelector(\"ic-tab-group\");\n\n    tabGroup.dispatchEvent(\n      new window.window.KeyboardEvent(\"keydown\", {\n        key: \"End\",\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n    expect(page.rootInstance.selectedTab).toBe(2);\n\n    tabGroup.dispatchEvent(\n      new window.window.KeyboardEvent(\"keydown\", {\n        key: \"Home\",\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n    expect(page.rootInstance.selectedTab).toBe(0);\n\n    tabGroup.dispatchEvent(\n      new window.window.KeyboardEvent(\"keydown\", {\n        key: \"ArrowLeft\",\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n    expect(page.rootInstance.selectedTab).toBe(2);\n\n    tabGroup.dispatchEvent(\n      new window.window.KeyboardEvent(\"keydown\", {\n        key: \"ArrowLeft\",\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n    expect(page.rootInstance.selectedTab).toBe(1);\n\n    tabGroup.dispatchEvent(\n      new window.window.KeyboardEvent(\"keydown\", {\n        key: \"ArrowRight\",\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n    expect(page.rootInstance.selectedTab).toBe(2);\n\n    tabGroup.dispatchEvent(\n      new window.window.KeyboardEvent(\"keydown\", {\n        key: \"ArrowRight\",\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n    expect(page.rootInstance.selectedTab).toBe(0);\n\n    tabGroup.dispatchEvent(\n      new window.window.KeyboardEvent(\"keydown\", {\n        key: \"Escape\",\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n    expect(page.rootInstance.selectedTab).toBe(0);\n  });\n\n  it(\"should test key down handler - manual\", async () => {\n    const page = await newSpecPage({\n      components: [TabContext, TabGroup, Tab, TabPanel],\n      html: `<ic-tab-context activation-type=\"manual\">\n      <ic-tab-group label=\"Example tab group\">\n        <ic-tab>One</ic-tab>\n        <ic-tab>Two</ic-tab>\n        <ic-tab>Three</ic-tab>\n      </ic-tab-group>\n      <ic-tab-panel>Tab One</ic-tab-panel>\n      <ic-tab-panel>Tab Two</ic-tab-panel>\n      <ic-tab-panel>Tab Three</ic-tab-panel>\n      </ic-tab-context>`,\n    });\n\n    const tabGroup = page.root.querySelector(\"ic-tab-group\");\n\n    tabGroup.dispatchEvent(\n      new window.window.KeyboardEvent(\"keydown\", {\n        key: \"End\",\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n    expect(page.rootInstance.selectedTab).toBe(0);\n    expect(page.rootInstance.focusedTabIndex).toBe(2);\n\n    tabGroup.dispatchEvent(\n      new window.window.KeyboardEvent(\"keydown\", {\n        key: \"Enter\",\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n    expect(page.rootInstance.selectedTab).toBe(2);\n\n    tabGroup.dispatchEvent(\n      new window.window.KeyboardEvent(\"keydown\", {\n        key: \"Home\",\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n    expect(page.rootInstance.focusedTabIndex).toBe(0);\n    expect(page.rootInstance.selectedTab).toBe(2);\n\n    tabGroup.dispatchEvent(\n      new window.window.KeyboardEvent(\"keydown\", {\n        key: \" \",\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n    expect(page.rootInstance.selectedTab).toBe(0);\n\n    tabGroup.dispatchEvent(\n      new window.window.KeyboardEvent(\"keydown\", {\n        key: \"ArrowLeft\",\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n    expect(page.rootInstance.focusedTabIndex).toBe(2);\n\n    tabGroup.dispatchEvent(\n      new window.window.KeyboardEvent(\"keydown\", {\n        key: \"ArrowLeft\",\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n    expect(page.rootInstance.focusedTabIndex).toBe(1);\n\n    tabGroup.dispatchEvent(\n      new window.window.KeyboardEvent(\"keydown\", {\n        key: \"ArrowRight\",\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n    expect(page.rootInstance.focusedTabIndex).toBe(2);\n\n    tabGroup.dispatchEvent(\n      new window.window.KeyboardEvent(\"keydown\", {\n        key: \"ArrowRight\",\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n    expect(page.rootInstance.focusedTabIndex).toBe(0);\n\n    tabGroup.dispatchEvent(\n      new window.window.KeyboardEvent(\"keydown\", {\n        key: \"Escape\",\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n    expect(page.rootInstance.focusedTabIndex).toBe(0);\n  });\n\n  it(\"should apply tab and panel ids to elements added after initial render of the context\", async () => {\n    const page = await newSpecPage({\n      components: [TabContext, TabGroup, Tab, TabPanel],\n      html: `<ic-tab-context>\n      <ic-tab-group label=\"Example tab group\">\n        <ic-tab>One</ic-tab>\n        <ic-tab>Two</ic-tab>\n        <ic-tab>Three</ic-tab>\n      </ic-tab-group>\n      <ic-tab-panel>Tab One</ic-tab-panel>\n      <ic-tab-panel>Tab Two</ic-tab-panel>\n      <ic-tab-panel>Tab Three</ic-tab-panel>\n      </ic-tab-context>`,\n    });\n\n    const tabGroup = page.root.querySelector(\"ic-tab-group\");\n\n    tabGroup.insertAdjacentHTML(\"beforeend\", \"<ic-tab>Four</ic-tab>\");\n    page.root.insertAdjacentHTML(\n      \"beforeend\",\n      \"<ic-tab-panel>Four</ic-tab-panel>\"\n    );\n    await page.waitForChanges();\n\n    const newTab = page.root.querySelector(\n      '[id*=\"ic-tab-3-context-default\"]'\n    ) as HTMLIcTabElement;\n    const newTabPanel = page.root.querySelector(\n      '[id*=\"ic-tab-panel-3-context-default\"]'\n    ) as HTMLIcTabPanelElement;\n\n    expect(newTab.tabId).toBe(\"ic-tab--3-context-default\");\n    expect(newTabPanel.panelId).toBe(\"ic-tab--3-context-default\");\n  });\n\n  it(\"should reassign ids if tab and tab panel are dynamically removed\", async () => {\n    const page = await newSpecPage({\n      components: [TabContext, TabGroup, Tab, TabPanel],\n      html: `<ic-tab-context>\n      <ic-tab-group label=\"Example tab group\">\n        <ic-tab>One</ic-tab>\n        <ic-tab>Two</ic-tab>\n        <ic-tab>Three</ic-tab>\n      </ic-tab-group>\n      <ic-tab-panel>Tab One</ic-tab-panel>\n      <ic-tab-panel>Tab Two</ic-tab-panel>\n      <ic-tab-panel>Tab Three</ic-tab-panel>\n      </ic-tab-context>`,\n    });\n\n    const tabGroup = page.root.querySelector(\"ic-tab-group\");\n\n    let allTabs = tabGroup.querySelectorAll(\"ic-tab\");\n    let allTabPanels = page.root.querySelectorAll(\"ic-tab-panel\");\n\n    expect(allTabs.length).toBe(3);\n    expect(allTabPanels.length).toBe(3);\n\n    allTabPanels[allTabPanels.length - 2].remove();\n    allTabs[allTabs.length - 2].remove();\n\n    await page.waitForChanges();\n\n    allTabs = tabGroup.querySelectorAll(\"ic-tab\");\n    allTabPanels = page.root.querySelectorAll(\"ic-tab-panel\");\n\n    expect(allTabs.length).toBe(2);\n    expect(allTabPanels.length).toBe(2);\n\n    const newlyUpdatedTab = page.root.querySelector(\n      '[id*=\"ic-tab-1-context-default\"]'\n    ) as HTMLIcTabElement;\n    const newlyUpdatedTabPanel = page.root.querySelector(\n      '[id*=\"ic-tab-panel-1-context-default\"]'\n    ) as HTMLIcTabPanelElement;\n\n    expect(newlyUpdatedTab.tabId).toBe(\"ic-tab--1-context-default\");\n    expect(newlyUpdatedTabPanel.panelId).toBe(\"ic-tab--1-context-default\");\n  });\n});\n"]}

package/dist/collection/components/ic-tab-group/ic-tab-group.css

@@ -3,7 +3,7 @@
 
   display: block;
   margin-bottom: var(--ic-space-md);
-  border-bottom: 1px solid var(--border-bottom-color);
+  border-bottom: var(--ic-border-default);
 }
 
 :host(.inline) {
@@ -12,7 +12,7 @@
 }
 
 .light {
-  --border-bottom-color: var(--ic-architectural-white);
+  border-bottom: var(--ic-space-1px) solid var(--ic-architectural-white);
 }
 
 .tabs-container {

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

@@ -0,0 +1,65 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { TabPanel } from "./ic-tab-panel";
+describe("ic-tab component", () => {
+  it("should not be hidden if the corresponding tab is selected", async () => {
+    const page = await newSpecPage({
+      components: [TabPanel],
+      html: `<ic-tab-panel panel-id="1" selected-tab="1" tab-position=1>IC Tab Test</ic-tab-panel>`,
+    });
+    expect(page.root)
+      .toEqualHtml(`<ic-tab-panel panel-id="1" selected-tab="1" context-id="default" role="tabpanel" tab-position="1">
+    <mock:shadow-root>
+      <div>
+        <slot></slot>
+      </div>
+    </mock:shadow-root>
+    IC Tab Test
+  </ic-tab-panel>`);
+  });
+  it("should be hidden if the corresponding tab is not selected", async () => {
+    const page = await newSpecPage({
+      components: [TabPanel],
+      html: `<ic-tab-panel panel-id="1" selected-tab="2" tab-position=1>IC Tab Test</ic-tab-panel>`,
+    });
+    expect(page.root)
+      .toEqualHtml(`<ic-tab-panel panel-id="1" selected-tab="2" context-id="default" hidden="" role="tabpanel" tab-position="1">
+    <mock:shadow-root>
+      <div>
+        <slot></slot>
+      </div>
+    </mock:shadow-root>
+    IC Tab Test
+  </ic-tab-panel>`);
+  });
+  it("should be hidden if selectedTab and panelId are undefined", async () => {
+    const page = await newSpecPage({
+      components: [TabPanel],
+      html: `<ic-tab-panel tab-position=1>IC Tab Test</ic-tab-panel>`,
+    });
+    expect(page.root)
+      .toEqualHtml(`<ic-tab-panel context-id="default" hidden="" role="tabpanel" tab-position="1">
+    <mock:shadow-root>
+      <div>
+        <slot></slot>
+      </div>
+    </mock:shadow-root>
+    IC Tab Test
+  </ic-tab-panel>`);
+  });
+  it("should be hidden if selectedTab and panelId are undefined", async () => {
+    const page = await newSpecPage({
+      components: [TabPanel],
+      html: `<ic-tab-panel>IC Tab Test</ic-tab-panel>`,
+    });
+    expect(page.root)
+      .toEqualHtml(`<ic-tab-panel context-id="default" hidden="" role="tabpanel">
+    <mock:shadow-root>
+      <div>
+        <slot></slot>
+      </div>
+    </mock:shadow-root>
+    IC Tab Test
+  </ic-tab-panel>`);
+  });
+});
+//# sourceMappingURL=ic-tab-panel.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-tab-panel.spec.js","sourceRoot":"","sources":["../../../src/components/ic-tab-panel/ic-tab-panel.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;EAChC,EAAE,CAAC,2DAA2D,EAAE,KAAK,IAAI,EAAE;IACzE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;MACtB,IAAI,EAAE,uFAAuF;KAC9F,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;OACd,WAAW,CAAC;;;;;;;kBAOD,CAAC,CAAC;EAClB,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,2DAA2D,EAAE,KAAK,IAAI,EAAE;IACzE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;MACtB,IAAI,EAAE,uFAAuF;KAC9F,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;OACd,WAAW,CAAC;;;;;;;kBAOD,CAAC,CAAC;EAClB,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,2DAA2D,EAAE,KAAK,IAAI,EAAE;IACzE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;MACtB,IAAI,EAAE,yDAAyD;KAChE,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;OACd,WAAW,CAAC;;;;;;;kBAOD,CAAC,CAAC;EAClB,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,2DAA2D,EAAE,KAAK,IAAI,EAAE;IACzE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;MACtB,IAAI,EAAE,0CAA0C;KACjD,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;OACd,WAAW,CAAC;;;;;;;kBAOD,CAAC,CAAC;EAClB,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { TabPanel } from \"./ic-tab-panel\";\n\ndescribe(\"ic-tab component\", () => {\n  it(\"should not be hidden if the corresponding tab is selected\", async () => {\n    const page = await newSpecPage({\n      components: [TabPanel],\n      html: `<ic-tab-panel panel-id=\"1\" selected-tab=\"1\" tab-position=1>IC Tab Test</ic-tab-panel>`,\n    });\n\n    expect(page.root)\n      .toEqualHtml(`<ic-tab-panel panel-id=\"1\" selected-tab=\"1\" context-id=\"default\" role=\"tabpanel\" tab-position=\"1\">\n    <mock:shadow-root>\n      <div>\n        <slot></slot>\n      </div>\n    </mock:shadow-root>\n    IC Tab Test\n  </ic-tab-panel>`);\n  });\n\n  it(\"should be hidden if the corresponding tab is not selected\", async () => {\n    const page = await newSpecPage({\n      components: [TabPanel],\n      html: `<ic-tab-panel panel-id=\"1\" selected-tab=\"2\" tab-position=1>IC Tab Test</ic-tab-panel>`,\n    });\n\n    expect(page.root)\n      .toEqualHtml(`<ic-tab-panel panel-id=\"1\" selected-tab=\"2\" context-id=\"default\" hidden=\"\" role=\"tabpanel\" tab-position=\"1\">\n    <mock:shadow-root>\n      <div>\n        <slot></slot>\n      </div>\n    </mock:shadow-root>\n    IC Tab Test\n  </ic-tab-panel>`);\n  });\n\n  it(\"should be hidden if selectedTab and panelId are undefined\", async () => {\n    const page = await newSpecPage({\n      components: [TabPanel],\n      html: `<ic-tab-panel tab-position=1>IC Tab Test</ic-tab-panel>`,\n    });\n\n    expect(page.root)\n      .toEqualHtml(`<ic-tab-panel context-id=\"default\" hidden=\"\" role=\"tabpanel\" tab-position=\"1\">\n    <mock:shadow-root>\n      <div>\n        <slot></slot>\n      </div>\n    </mock:shadow-root>\n    IC Tab Test\n  </ic-tab-panel>`);\n  });\n\n  it(\"should be hidden if selectedTab and panelId are undefined\", async () => {\n    const page = await newSpecPage({\n      components: [TabPanel],\n      html: `<ic-tab-panel>IC Tab Test</ic-tab-panel>`,\n    });\n\n    expect(page.root)\n      .toEqualHtml(`<ic-tab-panel context-id=\"default\" hidden=\"\" role=\"tabpanel\">\n    <mock:shadow-root>\n      <div>\n        <slot></slot>\n      </div>\n    </mock:shadow-root>\n    IC Tab Test\n  </ic-tab-panel>`);\n  });\n});\n"]}

package/dist/collection/components/ic-text-field/ic-text-field.css

@@ -516,10 +516,6 @@ textarea.no-resize {
   color: var(--ic-color-secondary-text);
 }
 
-.error {
-  color: var(--ic-status-error);
-}
-
 .disabled {
   color: var(--ic-architectural-200);
 }

package/dist/collection/components/ic-text-field/ic-text-field.e2e.js

@@ -0,0 +1,98 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe("ic-text-field", () => {
+  it("should trigger max length validation when long value set", async () => {
+    const page = await newE2EPage();
+    await page.setContent('<ic-text-field label="Test label" max-length="20">');
+    await page.waitForChanges();
+    const element = await page.find("ic-text-field");
+    element.setProperty("value", "a really long test value");
+    await page.waitForChanges();
+    const input = await page.find("ic-text-field >>> #ic-text-field-input-0");
+    const value = await input.getProperty("value");
+    expect(value).toBe("a really long test value");
+    let icon = await page.find("ic-text-field >>> .icon-error");
+    let iconVis = await icon.isVisible();
+    expect(iconVis).toBeTruthy();
+    const validationText = await page.find("ic-text-field >>> #ic-text-field-input-0-validation-text");
+    expect(validationText).toEqualText("Maximum length exceeded");
+    const charCountText = await page.find("ic-text-field >>> #ic-text-field-input-0-charcount");
+    expect(charCountText).toEqualText("24/20");
+    await input.press("Backspace");
+    await input.press("Backspace");
+    await input.press("Backspace");
+    await input.press("Backspace");
+    expect(charCountText).toEqualText("20/20");
+    expect(validationText).toEqualText("");
+    icon = await page.find("ic-text-field >>> .icon-error");
+    expect(icon).toBeNull();
+    await input.press("a");
+    expect(charCountText).toEqualText("21/20");
+    expect(validationText).toEqualText("Maximum length exceeded");
+    icon = await page.find("ic-text-field >>> .icon-error");
+    iconVis = await icon.isVisible();
+    expect(iconVis).toBeTruthy();
+  });
+  it("should trigger min/max value validation when lower/higher value set", async () => {
+    const page = await newE2EPage();
+    await page.setContent('<ic-text-field label="Test label" min=1 max=4 inputmode="numeric" type="number"');
+    await page.waitForChanges();
+    const element = await page.find("ic-text-field");
+    element.setProperty("value", "5");
+    await page.waitForChanges();
+    const input = await page.find("ic-text-field >>> #ic-text-field-input-0");
+    const value = await input.getProperty("value");
+    expect(value).toBe("5");
+    const icon = await page.find("ic-text-field >>> .icon-error");
+    const iconVis = await icon.isVisible();
+    expect(iconVis).toBeTruthy();
+    let validationText = await page.find("ic-text-field >>> #ic-text-field-input-0-validation-text");
+    expect(validationText).toEqualText("Maximum value of 4 exceeded");
+    element.setProperty("value", "4");
+    await page.waitForChanges();
+    validationText = await page.find("ic-text-field >>> #ic-text-field-input-0-validation-text");
+    expect(validationText).toBeNull();
+    element.setProperty("value", "0");
+    await page.waitForChanges();
+    validationText = await page.find("ic-text-field >>> #ic-text-field-input-0-validation-text");
+    expect(validationText).toEqualText("Minimum value of 1 not met");
+  });
+  it("should focus input when setFocus method called", async () => {
+    const page = await newE2EPage();
+    await page.setContent('<ic-text-field label="Test label">');
+    await page.waitForChanges();
+    const element = await page.find("ic-text-field");
+    await element.callMethod("setFocus");
+    await page.waitForChanges();
+    const activeElId = await page.$eval("ic-text-field", (el) => el.shadowRoot.activeElement.id);
+    expect(activeElId).toBe("ic-text-field-input-0");
+  });
+  it("works on a form", async () => {
+    const page = await newE2EPage();
+    await page.setContent('<form><ic-text-field label="Test label" name="formInputEl"></ic-text-field><button id="resetButton" type="reset">Reset</button></form>');
+    await page.waitForChanges();
+    let input = await page.find("ic-text-field >>> #ic-text-field-input-0");
+    await input.press("s");
+    await input.press("o");
+    await input.press("m");
+    await input.press("e");
+    await input.press("Space");
+    await input.press("t");
+    await input.press("e");
+    await input.press("x");
+    await input.press("t");
+    let value = await input.getProperty("value");
+    expect(value).toBe("some text");
+    //check value on underlying hidden form control
+    const formInput = await page.find("input[name=formInputEl]");
+    const visible = await formInput.isVisible();
+    expect(visible).toBe(false);
+    const formInputvalue = await formInput.getProperty("value");
+    expect(formInputvalue).toBe("some text");
+    const resetButton = await page.find("#resetButton");
+    await resetButton.click();
+    input = await page.find("ic-text-field >>> #ic-text-field-input-0");
+    value = await input.getProperty("value");
+    expect(value).toBe("");
+  });
+});
+//# sourceMappingURL=ic-text-field.e2e.js.map