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

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

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

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

package/dist/collection/components/ic-text-field/ic-text-field.input.spec.js

@@ -0,0 +1,236 @@
+import { TextField } from "./ic-text-field";
+import { newSpecPage } from "@stencil/core/testing";
+import { waitForTimeout } from "../../testspec.setup";
+describe("ic-text-field", () => {
+  it("should render", async () => {
+    const page = await newSpecPage({
+      components: [TextField],
+      html: `<ic-text-field label="Test label" rows=1></ic-text-field>`,
+    });
+    expect(page.root).toMatchSnapshot("renders");
+  });
+  it("should render with placeholder", async () => {
+    const page = await newSpecPage({
+      components: [TextField],
+      html: `<ic-text-field label="Test label" placeholder="placeholder" rows=0></ic-text-field>`,
+    });
+    expect(page.root).toMatchSnapshot("renders-with-placeholder");
+  });
+  it("should render with value", async () => {
+    const page = await newSpecPage({
+      components: [TextField],
+      html: `<ic-text-field label="Test label" value="test value"></ic-text-field>`,
+    });
+    expect(page.root).toMatchSnapshot("renders-with-value");
+  });
+  it("should render with helperText, required and small", async () => {
+    const page = await newSpecPage({
+      components: [TextField],
+      html: `<ic-text-field label="Test label" helper-text="helper text value" required=true small=true></ic-text-field>`,
+    });
+    expect(page.root).toMatchSnapshot("renders-with-helpertext");
+  });
+  it("should render with autoprops", async () => {
+    const page = await newSpecPage({
+      components: [TextField],
+      html: `<ic-text-field label="Test label" value="test value" autofocus=true autocapitalize="on" autocomplete="on" autocorrect="on"></ic-text-field>`,
+    });
+    expect(page.root).toMatchSnapshot("renders-with-autoprops");
+  });
+  it("should render with hidden label", async () => {
+    const page = await newSpecPage({
+      components: [TextField],
+      html: `<ic-text-field label="Test label" value="test value" hide-label=true></ic-text-field>`,
+    });
+    expect(page.root).toMatchSnapshot("renders-with-hiden-label");
+  });
+  it("should render with icon", async () => {
+    const page = await newSpecPage({
+      components: [TextField],
+      html: `<ic-text-field label="Test label">
+        <svg
+          slot="icon"
+          xmlns="http://www.w3.org/2000/svg"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          fill="#000000"
+        >
+          <path d="M0 0h24v24H0z" fill="none" />
+          <path
+            d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z"
+          />
+        </svg>
+      </ic-text-field>`,
+    });
+    expect(page.root).toMatchSnapshot("renders-with-icon");
+  });
+  it("should render disabled", async () => {
+    const page = await newSpecPage({
+      components: [TextField],
+      html: `<ic-text-field label="Test label" value="test value" disabled=true></ic-text-field>`,
+    });
+    expect(page.root).toMatchSnapshot("renders-disabled");
+  });
+  it("should render readonly", async () => {
+    const page = await newSpecPage({
+      components: [TextField],
+      html: `<ic-text-field label="Test label" value="test value" readonly=true></ic-text-field>`,
+    });
+    expect(page.root).toMatchSnapshot("renders-readonly");
+  });
+  it("should render with max length", async () => {
+    const page = await newSpecPage({
+      components: [TextField],
+      html: `<ic-text-field label="Test label" value="a long test value to exceed limit" max-length=25></ic-text-field>`,
+    });
+    expect(page.root).toMatchSnapshot("renders-with-maxlength");
+  });
+  it("should render with name & full width", async () => {
+    const page = await newSpecPage({
+      components: [TextField],
+      html: `<ic-text-field label="Test label" value="test value" name="mycontolname" full-width=true></ic-text-field>`,
+    });
+    expect(page.root).toMatchSnapshot("renders-with-name-full-width");
+  });
+  it("should render with success validation", async () => {
+    const page = await newSpecPage({
+      components: [TextField],
+      html: `<ic-text-field label="Test label" validation-status="success" validation-text="Good choice!" value="test value"></ic-text-field>`,
+    });
+    expect(page.root).toMatchSnapshot("renders-with-success-validation");
+  });
+  it("should render with warning validation", async () => {
+    const page = await newSpecPage({
+      components: [TextField],
+      html: `<ic-text-field label="Test label" validation-status="warning" validation-text="warning text" value="test value"></ic-text-field>`,
+    });
+    expect(page.root).toMatchSnapshot("renders-with-warning-validation");
+  });
+  it("should render with error validation", async () => {
+    const page = await newSpecPage({
+      components: [TextField],
+      html: `<ic-text-field label="Test label" validation-status="error" validation-text="error text" value="test value"></ic-text-field>`,
+    });
+    expect(page.root).toMatchSnapshot("renders-with-error-validation");
+  });
+  it("should render with inline success validation", async () => {
+    const page = await newSpecPage({
+      components: [TextField],
+      html: `<ic-text-field label="Test label" validation-status="success" validation-text="Good choice!" validation-inline="true" value="test value"></ic-text-field>`,
+    });
+    expect(page.root).toMatchSnapshot("renders-with-inline-success-validation");
+  });
+  it("should focus", async () => {
+    const page = await newSpecPage({
+      components: [TextField],
+      html: `<ic-text-field label="Test label" rows=1></ic-text-field>`,
+    });
+    const callbackFn = jest.fn();
+    page.doc.addEventListener("icFocus", callbackFn);
+    const input = page.root.shadowRoot.querySelector("input");
+    await input.focus();
+    expect(callbackFn).toHaveBeenCalled();
+  });
+  it("should blur", async () => {
+    const page = await newSpecPage({
+      components: [TextField],
+      html: `<ic-text-field label="Test label" rows=1></ic-text-field>`,
+    });
+    const callbackFn = jest.fn();
+    page.doc.addEventListener("icBlur", callbackFn);
+    const input = page.root.shadowRoot.querySelector("input");
+    await input.blur();
+    expect(callbackFn).toHaveBeenCalled();
+  });
+  it("should not show left icon if text field is disabled", async () => {
+    const page = await newSpecPage({
+      components: [TextField],
+      html: `<ic-text-field label="Test label" rows=1 disabled>
+      <svg
+          slot="icon"
+          xmlns="http://www.w3.org/2000/svg"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          fill="#000000"
+        >
+          <path d="M0 0h24v24H0z" fill="none" />
+          <path
+            d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z"
+          />
+        </svg>
+      </ic-text-field>`,
+    });
+    const slot = page.root.shadowRoot.querySelector(`[slot="icon"]`);
+    expect(slot).toBeNull();
+    expect(page.rootInstance.showLeftIcon).toBe(false);
+  });
+  it("should not exceed max length if new value < max length", async () => {
+    const page = await newSpecPage({
+      components: [TextField],
+      html: `<ic-text-field label="Test label" rows=1 max-length=5></ic-text-field>`,
+    });
+    page.rootInstance.watchValueHandler("test");
+    expect(page.rootInstance.maxLengthExceeded).toBe(false);
+  });
+  it("should test keydown", async () => {
+    const page = await newSpecPage({
+      components: [TextField],
+      html: `<ic-text-field label="Test label"></ic-text-field>`,
+    });
+    const eventSpy = jest.fn();
+    page.win.addEventListener("icKeydown", eventSpy);
+    const event = new KeyboardEvent("keydown", { key: "A" });
+    await page.rootInstance.handleKeyDown(event);
+    await page.waitForChanges();
+    expect(eventSpy).toHaveBeenCalled();
+  });
+  it("should test input", async () => {
+    const page = await newSpecPage({
+      components: [TextField],
+      html: `<ic-text-field label="Test label"></ic-text-field>`,
+    });
+    const event = jest.fn();
+    page.win.addEventListener("icInput", event);
+    await page.rootInstance.onInput({ target: { value: "test value" } });
+    await page.waitForChanges();
+    expect(page.rootInstance.value).toBe("test value");
+    expect(event).toHaveBeenCalled();
+  });
+  it("should test form reset event", async () => {
+    const page = await newSpecPage({
+      components: [TextField],
+      html: `<form>
+        <ic-text-field label="Test label"></ic-text-field>
+        <button id="resetButton" type="reset">Reset</button>  
+      </form>`,
+    });
+    expect(page.rootInstance.value).toBe("");
+    page.rootInstance.value = "New value";
+    await page.waitForChanges();
+    expect(page.rootInstance.value).toBe("New value");
+    await page.rootInstance.handleFormReset();
+    await page.waitForChanges();
+    expect(page.rootInstance.value).toBe("");
+    //test disconnected callback
+    //delay to wait for icchange event to prevent console warning
+    await waitForTimeout(500);
+    page.setContent("");
+  });
+});
+it("should render with min/max and max validation", async () => {
+  const page = await newSpecPage({
+    components: [TextField],
+    html: `<ic-text-field label="Test label" rows=1 min=1 max=4 value="6" inputmode="numeric" type="number"></ic-text-field>`,
+  });
+  expect(page.root).toMatchSnapshot("renders-with-max");
+});
+it("should render with min/max and min validation", async () => {
+  const page = await newSpecPage({
+    components: [TextField],
+    html: `<ic-text-field label="Test label" rows=1 min=1 max=4 value="0" inputmode="numeric" type="number"></ic-text-field>`,
+  });
+  expect(page.root).toMatchSnapshot("renders-with-min");
+});
+//# sourceMappingURL=ic-text-field.input.spec.js.map

package/dist/collection/components/ic-text-field/ic-text-field.input.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-text-field.input.spec.js","sourceRoot":"","sources":["../../../src/components/ic-text-field/ic-text-field.input.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { TextField } from \"./ic-text-field\";\nimport { newSpecPage } from \"@stencil/core/testing\";\nimport { waitForTimeout } from \"../../testspec.setup\";\n\ndescribe(\"ic-text-field\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [TextField],\n      html: `<ic-text-field label=\"Test label\" rows=1></ic-text-field>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders\");\n  });\n\n  it(\"should render with placeholder\", async () => {\n    const page = await newSpecPage({\n      components: [TextField],\n      html: `<ic-text-field label=\"Test label\" placeholder=\"placeholder\" rows=0></ic-text-field>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-with-placeholder\");\n  });\n\n  it(\"should render with value\", async () => {\n    const page = await newSpecPage({\n      components: [TextField],\n      html: `<ic-text-field label=\"Test label\" value=\"test value\"></ic-text-field>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-with-value\");\n  });\n\n  it(\"should render with helperText, required and small\", async () => {\n    const page = await newSpecPage({\n      components: [TextField],\n      html: `<ic-text-field label=\"Test label\" helper-text=\"helper text value\" required=true small=true></ic-text-field>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-with-helpertext\");\n  });\n\n  it(\"should render with autoprops\", async () => {\n    const page = await newSpecPage({\n      components: [TextField],\n      html: `<ic-text-field label=\"Test label\" value=\"test value\" autofocus=true autocapitalize=\"on\" autocomplete=\"on\" autocorrect=\"on\"></ic-text-field>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-with-autoprops\");\n  });\n\n  it(\"should render with hidden label\", async () => {\n    const page = await newSpecPage({\n      components: [TextField],\n      html: `<ic-text-field label=\"Test label\" value=\"test value\" hide-label=true></ic-text-field>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-with-hiden-label\");\n  });\n\n  it(\"should render with icon\", async () => {\n    const page = await newSpecPage({\n      components: [TextField],\n      html: `<ic-text-field label=\"Test label\">\n        <svg\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"24px\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          fill=\"#000000\"\n        >\n          <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n          <path\n            d=\"M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z\"\n          />\n        </svg>\n      </ic-text-field>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-with-icon\");\n  });\n\n  it(\"should render disabled\", async () => {\n    const page = await newSpecPage({\n      components: [TextField],\n      html: `<ic-text-field label=\"Test label\" value=\"test value\" disabled=true></ic-text-field>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-disabled\");\n  });\n\n  it(\"should render readonly\", async () => {\n    const page = await newSpecPage({\n      components: [TextField],\n      html: `<ic-text-field label=\"Test label\" value=\"test value\" readonly=true></ic-text-field>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-readonly\");\n  });\n\n  it(\"should render with max length\", async () => {\n    const page = await newSpecPage({\n      components: [TextField],\n      html: `<ic-text-field label=\"Test label\" value=\"a long test value to exceed limit\" max-length=25></ic-text-field>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-with-maxlength\");\n  });\n\n  it(\"should render with name & full width\", async () => {\n    const page = await newSpecPage({\n      components: [TextField],\n      html: `<ic-text-field label=\"Test label\" value=\"test value\" name=\"mycontolname\" full-width=true></ic-text-field>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-with-name-full-width\");\n  });\n\n  it(\"should render with success validation\", async () => {\n    const page = await newSpecPage({\n      components: [TextField],\n      html: `<ic-text-field label=\"Test label\" validation-status=\"success\" validation-text=\"Good choice!\" value=\"test value\"></ic-text-field>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-with-success-validation\");\n  });\n\n  it(\"should render with warning validation\", async () => {\n    const page = await newSpecPage({\n      components: [TextField],\n      html: `<ic-text-field label=\"Test label\" validation-status=\"warning\" validation-text=\"warning text\" value=\"test value\"></ic-text-field>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-with-warning-validation\");\n  });\n\n  it(\"should render with error validation\", async () => {\n    const page = await newSpecPage({\n      components: [TextField],\n      html: `<ic-text-field label=\"Test label\" validation-status=\"error\" validation-text=\"error text\" value=\"test value\"></ic-text-field>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-with-error-validation\");\n  });\n\n  it(\"should render with inline success validation\", async () => {\n    const page = await newSpecPage({\n      components: [TextField],\n      html: `<ic-text-field label=\"Test label\" validation-status=\"success\" validation-text=\"Good choice!\" validation-inline=\"true\" value=\"test value\"></ic-text-field>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-with-inline-success-validation\");\n  });\n\n  it(\"should focus\", async () => {\n    const page = await newSpecPage({\n      components: [TextField],\n      html: `<ic-text-field label=\"Test label\" rows=1></ic-text-field>`,\n    });\n\n    const callbackFn = jest.fn();\n    page.doc.addEventListener(\"icFocus\", callbackFn);\n    const input = page.root.shadowRoot.querySelector(\"input\");\n    await input.focus();\n    expect(callbackFn).toHaveBeenCalled();\n  });\n\n  it(\"should blur\", async () => {\n    const page = await newSpecPage({\n      components: [TextField],\n      html: `<ic-text-field label=\"Test label\" rows=1></ic-text-field>`,\n    });\n\n    const callbackFn = jest.fn();\n    page.doc.addEventListener(\"icBlur\", callbackFn);\n    const input = page.root.shadowRoot.querySelector(\"input\");\n    await input.blur();\n    expect(callbackFn).toHaveBeenCalled();\n  });\n\n  it(\"should not show left icon if text field is disabled\", async () => {\n    const page = await newSpecPage({\n      components: [TextField],\n      html: `<ic-text-field label=\"Test label\" rows=1 disabled>\n      <svg\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"24px\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          fill=\"#000000\"\n        >\n          <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n          <path\n            d=\"M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z\"\n          />\n        </svg>\n      </ic-text-field>`,\n    });\n\n    const slot = page.root.shadowRoot.querySelector(`[slot=\"icon\"]`);\n    expect(slot).toBeNull();\n    expect(page.rootInstance.showLeftIcon).toBe(false);\n  });\n\n  it(\"should not exceed max length if new value < max length\", async () => {\n    const page = await newSpecPage({\n      components: [TextField],\n      html: `<ic-text-field label=\"Test label\" rows=1 max-length=5></ic-text-field>`,\n    });\n\n    page.rootInstance.watchValueHandler(\"test\");\n    expect(page.rootInstance.maxLengthExceeded).toBe(false);\n  });\n\n  it(\"should test keydown\", async () => {\n    const page = await newSpecPage({\n      components: [TextField],\n      html: `<ic-text-field label=\"Test label\"></ic-text-field>`,\n    });\n\n    const eventSpy = jest.fn();\n    page.win.addEventListener(\"icKeydown\", eventSpy);\n    const event = new KeyboardEvent(\"keydown\", { key: \"A\" });\n    await page.rootInstance.handleKeyDown(event);\n    await page.waitForChanges();\n\n    expect(eventSpy).toHaveBeenCalled();\n  });\n\n  it(\"should test input\", async () => {\n    const page = await newSpecPage({\n      components: [TextField],\n      html: `<ic-text-field label=\"Test label\"></ic-text-field>`,\n    });\n\n    const event = jest.fn();\n    page.win.addEventListener(\"icInput\", event);\n\n    await page.rootInstance.onInput({ target: { value: \"test value\" } });\n    await page.waitForChanges();\n    expect(page.rootInstance.value).toBe(\"test value\");\n    expect(event).toHaveBeenCalled();\n  });\n\n  it(\"should test form reset event\", async () => {\n    const page = await newSpecPage({\n      components: [TextField],\n      html: `<form>\n        <ic-text-field label=\"Test label\"></ic-text-field>\n        <button id=\"resetButton\" type=\"reset\">Reset</button>  \n      </form>`,\n    });\n\n    expect(page.rootInstance.value).toBe(\"\");\n    page.rootInstance.value = \"New value\";\n    await page.waitForChanges();\n\n    expect(page.rootInstance.value).toBe(\"New value\");\n\n    await page.rootInstance.handleFormReset();\n    await page.waitForChanges();\n\n    expect(page.rootInstance.value).toBe(\"\");\n\n    //test disconnected callback\n    //delay to wait for icchange event to prevent console warning\n    await waitForTimeout(500);\n    page.setContent(\"\");\n  });\n});\n\nit(\"should render with min/max and max validation\", async () => {\n  const page = await newSpecPage({\n    components: [TextField],\n    html: `<ic-text-field label=\"Test label\" rows=1 min=1 max=4 value=\"6\" inputmode=\"numeric\" type=\"number\"></ic-text-field>`,\n  });\n\n  expect(page.root).toMatchSnapshot(\"renders-with-max\");\n});\n\nit(\"should render with min/max and min validation\", async () => {\n  const page = await newSpecPage({\n    components: [TextField],\n    html: `<ic-text-field label=\"Test label\" rows=1 min=1 max=4 value=\"0\" inputmode=\"numeric\" type=\"number\"></ic-text-field>`,\n  });\n\n  expect(page.root).toMatchSnapshot(\"renders-with-min\");\n});\n"]}

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

@@ -1,6 +1,6 @@
 import { Host, h, } from "@stencil/core";
-import { IcInformationStatus } from "../../utils/types";
-import { inheritAttributes, debounceEvent, getInputDescribedByText, renderHiddenInput, isEmptyString, onComponentRequiredPropUndefined, addFormResetListener, removeFormResetListener, isSlotUsed, } from "../../utils/helpers";
+import { IcInformationStatus, } from "../../utils/types";
+import { inheritAttributes, debounceEvent, getInputDescribedByText, renderHiddenInput, isEmptyString, onComponentRequiredPropUndefined, addFormResetListener, removeFormResetListener, isSlotUsed, removeDisabledFalse, } from "../../utils/helpers";
 import { IC_INHERITED_ARIA } from "../../utils/constants";
 let inputIds = 0;
 /**
@@ -32,12 +32,9 @@ export class TextField {
       return status !== "" && !this.disabled;
     };
     this.showStatusText = (status) => {
-      if (this.hasStatus(status) &&
+      return (this.hasStatus(status) &&
         !(status == IcInformationStatus.Success && this.validationInline) &&
-        !this.validationInlineInternal) {
-        return true;
-      }
-      return false;
+        !this.validationInlineInternal);
     };
     this.handleFormReset = () => {
       this.value = this.initialValue;
@@ -124,17 +121,12 @@ export class TextField {
       this.inputEl.focus();
     }
   }
-  //stop keydown event bubbling up to storybook
   handleKeyDown(ev) {
     this.icKeydown.emit({ event: ev });
-    ev.cancelBubble = true;
   }
   hasLeftIconSlot() {
     const iconEl = this.el.querySelector(`[slot="icon"]`);
-    if (iconEl != null) {
-      return true;
-    }
-    return false;
+    return iconEl !== null;
   }
   connectedCallback() {
     this.debounceChanged();
@@ -153,6 +145,7 @@ export class TextField {
       this.minValueUnattained = false;
     }
     addFormResetListener(this.el, this.handleFormReset);
+    removeDisabledFalse(this.disabled, this.el);
   }
   componentDidLoad() {
     onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Text Field");
@@ -190,10 +183,8 @@ export class TextField {
     const describedBy = (hiddenCharCountDescId +
       " " +
       getInputDescribedByText(inputId, helperText !== "", showStatusText)).trim();
-    if (this.showLeftIcon) {
-      if (!readonly && disabledMode) {
-        this.showLeftIcon = false;
-      }
+    if (this.showLeftIcon && !readonly && disabledMode) {
+      this.showLeftIcon = false;
     }
     const invalid = currentStatus === IcInformationStatus.Error ? "true" : "false";
     const disabledText = disabledMode && !readonly;
@@ -537,7 +528,7 @@ export class TextField {
           "references": {
             "IcInformationStatusOrEmpty": {
               "location": "import",
-              "path": "../../interface"
+              "path": "../../utils/types"
             }
           }
         },
@@ -635,7 +626,7 @@ export class TextField {
           "references": {
             "IcAutocompleteTypes": {
               "location": "import",
-              "path": "../../interface"
+              "path": "../../utils/types"
             }
           }
         },
@@ -658,7 +649,7 @@ export class TextField {
           "references": {
             "IcAutocorrectStates": {
               "location": "import",
-              "path": "../../interface"
+              "path": "../../utils/types"
             }
           }
         },
@@ -984,7 +975,7 @@ export class TextField {
           "references": {
             "IcValueEventDetail": {
               "location": "import",
-              "path": "../../interface"
+              "path": "../../utils/types"
             }
           }
         }
@@ -1004,7 +995,7 @@ export class TextField {
           "references": {
             "IcValueEventDetail": {
               "location": "import",
-              "path": "../../interface"
+              "path": "../../utils/types"
             }
           }
         }
@@ -1024,7 +1015,7 @@ export class TextField {
           "references": {
             "IcValueEventDetail": {
               "location": "import",
-              "path": "../../interface"
+              "path": "../../utils/types"
             }
           }
         }
@@ -1044,7 +1035,7 @@ export class TextField {
           "references": {
             "IcValueEventDetail": {
               "location": "import",
-              "path": "../../interface"
+              "path": "../../utils/types"
             }
           }
         }
@@ -1067,7 +1058,7 @@ export class TextField {
           "references": {
             "IcValueEventDetail": {
               "location": "import",
-              "path": "../../interface"
+              "path": "../../utils/types"
             }
           }
         }