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

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

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

Files changed (744) hide show

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

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

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

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

@@ -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;
 /**
@@ -121,10 +121,8 @@ 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"]`);
@@ -147,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");
@@ -529,7 +528,7 @@ export class TextField {
           "references": {
             "IcInformationStatusOrEmpty": {
               "location": "import",
-              "path": "../../interface"
+              "path": "../../utils/types"
             }
           }
         },
@@ -627,7 +626,7 @@ export class TextField {
           "references": {
             "IcAutocompleteTypes": {
               "location": "import",
-              "path": "../../interface"
+              "path": "../../utils/types"
             }
           }
         },
@@ -650,7 +649,7 @@ export class TextField {
           "references": {
             "IcAutocorrectStates": {
               "location": "import",
-              "path": "../../interface"
+              "path": "../../utils/types"
             }
           }
         },
@@ -976,7 +975,7 @@ export class TextField {
           "references": {
             "IcValueEventDetail": {
               "location": "import",
-              "path": "../../interface"
+              "path": "../../utils/types"
             }
           }
         }
@@ -996,7 +995,7 @@ export class TextField {
           "references": {
             "IcValueEventDetail": {
               "location": "import",
-              "path": "../../interface"
+              "path": "../../utils/types"
             }
           }
         }
@@ -1016,7 +1015,7 @@ export class TextField {
           "references": {
             "IcValueEventDetail": {
               "location": "import",
-              "path": "../../interface"
+              "path": "../../utils/types"
             }
           }
         }
@@ -1036,7 +1035,7 @@ export class TextField {
           "references": {
             "IcValueEventDetail": {
               "location": "import",
-              "path": "../../interface"
+              "path": "../../utils/types"
             }
           }
         }
@@ -1059,7 +1058,7 @@ export class TextField {
           "references": {
             "IcValueEventDetail": {
               "location": "import",
-              "path": "../../interface"
+              "path": "../../utils/types"
             }
           }
         }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-text-field.js","sourceRoot":"","sources":["../../../src/components/ic-text-field/ic-text-field.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n Method,\n h,\n} from \"@stencil/core\";\n\nimport {\n IcAutocompleteTypes,\n IcAutocorrectStates,\n IcInformationStatusOrEmpty,\n IcValueEventDetail,\n} from \"../../interface\";\nimport { IcInformationStatus } from \"../../utils/types\";\nimport {\n inheritAttributes,\n debounceEvent,\n getInputDescribedByText,\n renderHiddenInput,\n isEmptyString,\n onComponentRequiredPropUndefined,\n addFormResetListener,\n removeFormResetListener,\n isSlotUsed,\n} from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n IcAriaAutocompleteTypes,\n IcTextFieldInputModes,\n IcTextFieldTypes,\n} from \"./ic-text-field.types\";\n\nlet inputIds = 0;\n\n/*\n @slot icon - Content will be placed to the left of the text input.\n /\n@Component({\n tag: \"ic-text-field\",\n styleUrl: \"ic-text-field.css\",\n shadow: true,\n})\nexport class TextField {\n @Element() el: HTMLIcTextFieldElement;\n\n private inputEl: HTMLInputElement \| HTMLTextAreaElement;\n private inheritedAttributes: { [k: string]: unknown } = {};\n\n /\n @slot clear-button - an ic-button clear component will render as an end adornment to the input.\n * @slot search-submit-button - an ic-button search submit component will render as an end adornment to the input.\n * @slot menu - an ic-menu component will appear below the input.\n /\n\n /\n The ID for the input.\n /\n @Prop() inputId?: string = `ic-text-field-input-${inputIds++}`;\n\n /\n The label for the input.\n /\n @Prop() label!: string;\n\n /\n If `true`, the input will require a value.\n /\n @Prop() required: boolean = false;\n /\n If `true`, the disabled state will be set.\n /\n @Prop() disabled: boolean = false;\n\n /\n If `true`, the read only state will be set.\n /\n @Prop({ reflect: true }) readonly: boolean = false;\n\n /\n The placeholder value to be displayed.\n /\n @Prop() placeholder: string = \"\";\n\n /\n Specify whether the text field fills the full width of the container.\n * If `true`, this overrides the --input-width CSS variable.\n /\n @Prop() fullWidth: boolean = false;\n\n /\n If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n /\n @Prop() hideLabel: boolean = false;\n\n /\n The helper text that will be displayed for additional field guidance.\n /\n @Prop() helperText: string = \"\";\n\n /\n The number of rows to transform the text field into a text area with a specific height.\n /\n @Prop() rows: number = 1;\n\n /\n If `true`, the multiline text area will be resizeable.\n /\n @Prop() resize: boolean = false;\n\n /\n If `true`, the small styling will be applied to the text field.\n /\n @Prop({ reflect: true }) small: boolean = false;\n\n /\n The value of the text field.\n /\n @Prop({ reflect: true, mutable: true }) value: string = \"\";\n\n /\n The minimum number that can be accepted as a value, when `type` is `number` and `rows` is `1`. (NOTE: Ensure to include visual indication of min value in `helperText` or `label`)\n /\n @Prop() min: string \| number = undefined;\n\n /\n The maximum number that can be accepted as a value, when `type` is `number` and `rows` is `1`. (NOTE: Ensure to include visual indication of max value in `helperText` or `label`)\n /\n @Prop() max: string \| number = undefined;\n\n /\n The maximum number of characters that can be entered in the field.\n /\n @Prop() maxLength: number = 0;\n\n /\n The validation state - e.g. 'error' \| 'warning' \| 'success'.\n /\n @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n\n /\n The validation state - e.g. 'error' \| 'warning' \| 'success'.\n /\n @Prop() validationText: string = \"\";\n\n /\n If `true`, the icon in input control will be displayed - only applies when validationStatus ='success'.\n /\n @Prop() validationInline: boolean = false;\n\n /\n @internal If `true`, the validation will display inline.\n /\n @Prop() validationInlineInternal: boolean = false;\n\n /\n The automatic capitalisation of the text value as it is entered/edited by the user.\n * Available options: \"off\", \"none\", \"on\", \"sentences\", \"words\", \"characters\".\n /\n @Prop() autocapitalize = \"off\";\n\n /\n The state of autocompletion the browser can apply on the text value.\n /\n @Prop() autocomplete: IcAutocompleteTypes = \"off\";\n\n /\n The state of autocorrection the browser can apply when the user is entering/editing the text value.\n /\n @Prop() autocorrect: IcAutocorrectStates = \"off\";\n\n /\n If `true`, the form control will have input focus when the page loads.\n /\n @Prop() autoFocus = false;\n\n /\n The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.\n /\n @Prop() debounce: number = 0;\n\n private showLeftIcon: boolean = this.hasLeftIconSlot();\n\n @Watch(\"debounce\")\n private debounceChanged() {\n this.icChange = debounceEvent(this.icChange, this.debounce);\n }\n\n /\n The type of control to display. The default type is text.\n /\n @Prop() type: IcTextFieldTypes = \"text\";\n\n /\n A hint to the browser for which keyboard to display.\n * Possible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n * `\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.\n /\n @Prop() inputmode: IcTextFieldInputModes = \"text\";\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() name: string = this.inputId;\n\n /\n If `true`, the value of the text field will have its spelling and grammar checked.\n /\n @Prop() spellcheck: boolean = false;\n\n /\n @internal The active element when focus is on the ic-menu items.\n /\n @Prop() ariaActiveDescendant?: string;\n /\n @internal If `true`, an ellipsis will be displayed at the end of the value if the value is longer than the container.\n /\n @Prop() truncateValue?: boolean;\n\n /\n @internal Used to identify if the slotted menu is rendered\n /\n @Prop() ariaExpanded: string;\n\n /\n @internal Used to identify any related child component\n /\n @Prop() ariaOwns: string;\n\n /\n @internal Used to identify whether inputting any text triggers more predictions\n /\n @Prop() ariaAutocomplete: IcAriaAutocompleteTypes = undefined;\n\n /\n @internal Used to set the role if not default textbox;\n /\n @Prop() role: string;\n\n /\n @internal If `true`, the hidden form input will stop rendering for form submission.\n /\n @Prop() hiddenInput: boolean = true;\n\n @State() numChars: number = 0;\n @State() maxLengthExceeded: boolean = false;\n @State() minValueUnattained: boolean = false;\n @State() maxValueExceeded: boolean = false;\n @State() initialValue = this.value;\n\n @Watch(\"value\")\n watchValueHandler(newValue: string): void {\n if (this.inputEl && this.inputEl.value !== newValue) {\n this.inputEl.value = newValue;\n }\n\n this.numChars = newValue.length;\n\n if (this.type === \"number\") {\n if (newValue && Number(newValue) < Number(this.min)) {\n this.minValueUnattained = true;\n } else {\n this.minValueUnattained = false;\n }\n if (Number(newValue) > Number(this.max)) {\n this.maxValueExceeded = true;\n } else {\n this.maxValueExceeded = false;\n }\n }\n\n if (this.maxLength > 0) {\n if (newValue.length > this.maxLength) {\n this.maxLengthExceeded = true;\n } else {\n this.maxLengthExceeded = false;\n }\n }\n this.icChange.emit({ value: newValue });\n }\n\n /\n Sets focus on the native `input`.\n /\n @Method()\n async setFocus(): Promise<void> {\n if (this.inputEl) {\n this.inputEl.focus();\n }\n }\n\n //stop keydown event bubbling up to storybook\n @Listen(\"keydown\", {})\n handleKeyDown(ev: KeyboardEvent): void {\n this.icKeydown.emit({ event: ev });\n ev.cancelBubble = true;\n }\n\n /\n Emitted when a keydown event occurred.\n /\n @Event() icKeydown: EventEmitter<{ event: KeyboardEvent }>;\n\n /\n Emitted when a keyboard input occurred.\n /\n @Event() icInput: EventEmitter<IcValueEventDetail>;\n private onInput = (ev: Event) => {\n this.value = (ev.target as HTMLInputElement).value;\n this.icInput.emit({ value: this.value });\n };\n\n /\n Emitted when input loses focus.\n /\n @Event() icBlur: EventEmitter<IcValueEventDetail>;\n private onBlur = (ev: Event) => {\n const value = (ev.target as HTMLInputElement).value;\n this.icBlur.emit({ value: value });\n };\n\n /\n Emitted when input gains focus.\n /\n @Event() icFocus: EventEmitter<IcValueEventDetail>;\n private onFocus = (ev: Event) => {\n const value = (ev.target as HTMLInputElement).value;\n this.icFocus.emit({ value: value });\n };\n\n /\n Emitted when the value has changed.\n /\n @Event() icChange: EventEmitter<IcValueEventDetail>;\n\n private isTextArea = (): boolean => {\n return this.rows > 1;\n };\n\n /\n @internal Emitted when the validationInlineInternal is `true`\n */\n @Event() getValidationText: EventEmitter<IcValueEventDetail>;\n\n private getInlineValidationText = () => {\n this.getValidationText.emit({ value: this.validationText });\n };\n\n private hasLeftIconSlot(): boolean {\n const iconEl = this.el.querySelector(`[slot=\"icon\"]`);\n return iconEl !== null;\n }\n\n private hasStatus = (status: IcInformationStatusOrEmpty): boolean => {\n return status !== \"\" && !this.disabled;\n };\n\n private showStatusText = (status: IcInformationStatusOrEmpty): boolean => {\n return (\n this.hasStatus(status) &&\n !(status == IcInformationStatus.Success && this.validationInline) &&\n !this.validationInlineInternal\n );\n };\n\n private handleFormReset = (): void => {\n this.value = this.initialValue;\n };\n\n connectedCallback(): void {\n this.debounceChanged();\n }\n\n componentWillLoad(): void {\n this.watchValueHandler(this.value);\n\n this.inheritedAttributes = inheritAttributes(this.el, [\n ...IC_INHERITED_ARIA,\n \"title\",\n \"aria-autocomplete\",\n \"aria-haspopup\",\n ]);\n\n if (this.readonly) {\n this.maxLengthExceeded = false;\n this.maxValueExceeded = false;\n this.minValueUnattained = false;\n }\n\n addFormResetListener(this.el, this.handleFormReset);\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Text Field\"\n );\n if (this.validationInlineInternal) {\n this.getInlineValidationText();\n }\n }\n\n disconnectedCallback(): void {\n removeFormResetListener(this.el, this.handleFormReset);\n }\n\n render() {\n const {\n inputId,\n name,\n label,\n required,\n small,\n placeholder,\n helperText,\n rows,\n resize,\n disabled,\n value,\n min,\n max,\n maxLength,\n numChars,\n readonly,\n maxLengthExceeded,\n minValueUnattained,\n maxValueExceeded,\n validationStatus,\n validationText,\n validationInline,\n validationInlineInternal,\n spellcheck,\n inputmode,\n fullWidth,\n truncateValue,\n hiddenInput,\n } = this;\n\n const disabledMode = readonly ? true : disabled;\n\n const placeholderText = disabled ? \"\" : placeholder;\n\n const currentStatus =\n maxLengthExceeded \|\| maxValueExceeded \|\| minValueUnattained\n ? IcInformationStatus.Error\n : validationStatus;\n\n const currentValidationText = maxLengthExceeded\n ? \"Maximum length exceeded\"\n : maxValueExceeded\n ? `Maximum value of ${max} exceeded`\n : minValueUnattained\n ? `Minimum value of ${min} not met`\n : validationText;\n\n const maxNumChars = readonly ? 0 : maxLength;\n\n const messageAriaLive =\n maxLengthExceeded \|\|\n maxValueExceeded \|\|\n minValueUnattained \|\|\n (maxLength === 0 && currentStatus === IcInformationStatus.Error)\n ? \"assertive\"\n : \"polite\";\n\n const showStatusText = this.showStatusText(currentStatus);\n const multiline = this.isTextArea();\n const hiddenCharCountDescId =\n maxLength > 0 ? inputId + \"-charcount-desc\" : \"\";\n const describedBy = (\n hiddenCharCountDescId +\n \" \" +\n getInputDescribedByText(inputId, helperText !== \"\", showStatusText)\n ).trim();\n\n if (this.showLeftIcon && !readonly && disabledMode) {\n this.showLeftIcon = false;\n }\n\n const invalid =\n currentStatus === IcInformationStatus.Error ? \"true\" : \"false\";\n const disabledText = disabledMode && !readonly;\n\n if (hiddenInput) {\n renderHiddenInput(true, this.el, name, value, disabledMode);\n }\n return (\n <Host class={{ [\"fullwidth\"]: fullWidth }}>\n <ic-input-container readonly={readonly} disabled={disabledMode}>\n {!this.hideLabel && (\n <ic-input-label\n for={inputId}\n label={label}\n helperText={helperText}\n required={required}\n disabled={disabledText}\n readonly={readonly}\n ></ic-input-label>\n )}\n\n <ic-input-component-container\n small={small}\n validationStatus={currentStatus}\n multiLine={multiline}\n disabled={disabledMode}\n readonly={readonly}\n validationInline={validationInline}\n fullWidth={fullWidth}\n >\n {this.showLeftIcon && (\n <span\n class={{\n [\"readonly\"]: readonly,\n [\"has-value\"]: value.length > 0,\n }}\n slot=\"left-icon\"\n >\n <slot name=\"icon\" />\n </span>\n )}\n\n {!multiline && (\n <input\n id={inputId}\n name={name}\n ref={(el) => (this.inputEl = el as HTMLInputElement)}\n type={this.type}\n min={min}\n max={max}\n value={value}\n class={{\n [\"no-left-pad\"]: !this.showLeftIcon && readonly,\n [\"readonly\"]: readonly,\n [\"truncate-value\"]: truncateValue,\n }}\n placeholder={placeholderText}\n required={required}\n disabled={disabledMode}\n readonly={readonly}\n onInput={this.onInput}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n aria-label={label}\n aria-describedby={describedBy}\n aria-invalid={invalid}\n aria-activedescendant={this.ariaActiveDescendant}\n aria-expanded={this.ariaExpanded}\n aria-owns={this.ariaOwns}\n autocomplete={this.autocomplete}\n autocapitalize={this.autocapitalize}\n autoFocus={this.autoFocus}\n spellcheck={spellcheck}\n inputmode={inputmode}\n role={this.role}\n {...this.inheritedAttributes}\n ></input>\n )}\n {multiline && (\n <textarea\n id={inputId}\n class={{\n [\"no-resize\"]: resize === false \|\| readonly,\n [\"no-left-pad\"]: !this.showLeftIcon && readonly,\n [\"readonly\"]: readonly,\n }}\n name={name}\n ref={(el) => (this.inputEl = el as HTMLTextAreaElement)}\n value={value}\n rows={rows}\n required={required}\n disabled={disabledMode}\n placeholder={placeholderText}\n readonly={readonly}\n onInput={this.onInput}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n aria-label={label}\n aria-describedby={describedBy}\n aria-invalid={invalid}\n autocapitalize={this.autocapitalize}\n autoFocus={this.autoFocus}\n spellcheck={spellcheck}\n inputmode={inputmode}\n {...this.inheritedAttributes}\n ></textarea>\n )}\n {isSlotUsed(this.el, \"clear-button\") && (\n <slot name=\"clear-button\"></slot>\n )}\n {isSlotUsed(this.el, \"search-submit-button\") && (\n <slot name=\"search-submit-button\"></slot>\n )}\n </ic-input-component-container>\n {isSlotUsed(this.el, \"menu\") && <slot name=\"menu\"></slot>}\n {(!isEmptyString(validationStatus) \|\|\n !isEmptyString(validationText) \|\|\n maxNumChars > 0 \|\|\n maxValueExceeded \|\|\n minValueUnattained) &&\n !validationInlineInternal && (\n <ic-input-validation\n status={\n this.hasStatus(currentStatus) === false \|\|\n (currentStatus === IcInformationStatus.Success &&\n validationInline) \|\|\n validationInlineInternal\n ? \"\"\n : currentStatus\n }\n message={showStatusText ? currentValidationText : \"\"}\n ariaLiveMode={messageAriaLive}\n for={inputId}\n fullWidth={fullWidth}\n >\n {!readonly && maxNumChars > 0 && (\n <div slot=\"validation-message-adornment\">\n <ic-typography\n variant=\"caption\"\n class={{\n [\"maxlengthtext\"]: true,\n [\"error\"]: maxLengthExceeded,\n [\"disabled\"]: disabledText,\n }}\n >\n <span\n aria-live=\"polite\"\n id={`${inputId}-charcount`}\n class=\"charcount\"\n >\n {numChars}/{maxNumChars}\n </span>\n <span hidden={true} id={hiddenCharCountDescId}>\n Field can contain a maximum of {maxNumChars} characters.\n </span>\n </ic-typography>\n </div>\n )}\n </ic-input-validation>\n )}\n </ic-input-container>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ic-text-field.js","sourceRoot":"","sources":["../../../src/components/ic-text-field/ic-text-field.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n Method,\n h,\n} from \"@stencil/core\";\nimport {\n IcInformationStatus,\n IcAutocompleteTypes,\n IcAutocorrectStates,\n IcInformationStatusOrEmpty,\n IcValueEventDetail,\n} from \"../../utils/types\";\nimport {\n inheritAttributes,\n debounceEvent,\n getInputDescribedByText,\n renderHiddenInput,\n isEmptyString,\n onComponentRequiredPropUndefined,\n addFormResetListener,\n removeFormResetListener,\n isSlotUsed,\n removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n IcAriaAutocompleteTypes,\n IcTextFieldInputModes,\n IcTextFieldTypes,\n} from \"./ic-text-field.types\";\n\nlet inputIds = 0;\n\n/*\n @slot icon - Content will be placed to the left of the text input.\n /\n@Component({\n tag: \"ic-text-field\",\n styleUrl: \"ic-text-field.css\",\n shadow: true,\n})\nexport class TextField {\n @Element() el: HTMLIcTextFieldElement;\n\n private inputEl: HTMLInputElement \| HTMLTextAreaElement;\n private inheritedAttributes: { [k: string]: unknown } = {};\n\n /\n @slot clear-button - an ic-button clear component will render as an end adornment to the input.\n * @slot search-submit-button - an ic-button search submit component will render as an end adornment to the input.\n * @slot menu - an ic-menu component will appear below the input.\n /\n\n /\n The ID for the input.\n /\n @Prop() inputId?: string = `ic-text-field-input-${inputIds++}`;\n\n /\n The label for the input.\n /\n @Prop() label!: string;\n\n /\n If `true`, the input will require a value.\n /\n @Prop() required: boolean = false;\n /\n If `true`, the disabled state will be set.\n /\n @Prop() disabled: boolean = false;\n\n /\n If `true`, the read only state will be set.\n /\n @Prop({ reflect: true }) readonly: boolean = false;\n\n /\n The placeholder value to be displayed.\n /\n @Prop() placeholder: string = \"\";\n\n /\n Specify whether the text field fills the full width of the container.\n * If `true`, this overrides the --input-width CSS variable.\n /\n @Prop() fullWidth: boolean = false;\n\n /\n If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n /\n @Prop() hideLabel: boolean = false;\n\n /\n The helper text that will be displayed for additional field guidance.\n /\n @Prop() helperText: string = \"\";\n\n /\n The number of rows to transform the text field into a text area with a specific height.\n /\n @Prop() rows: number = 1;\n\n /\n If `true`, the multiline text area will be resizeable.\n /\n @Prop() resize: boolean = false;\n\n /\n If `true`, the small styling will be applied to the text field.\n /\n @Prop({ reflect: true }) small: boolean = false;\n\n /\n The value of the text field.\n /\n @Prop({ reflect: true, mutable: true }) value: string = \"\";\n\n /\n The minimum number that can be accepted as a value, when `type` is `number` and `rows` is `1`. (NOTE: Ensure to include visual indication of min value in `helperText` or `label`)\n /\n @Prop() min: string \| number = undefined;\n\n /\n The maximum number that can be accepted as a value, when `type` is `number` and `rows` is `1`. (NOTE: Ensure to include visual indication of max value in `helperText` or `label`)\n /\n @Prop() max: string \| number = undefined;\n\n /\n The maximum number of characters that can be entered in the field.\n /\n @Prop() maxLength: number = 0;\n\n /\n The validation state - e.g. 'error' \| 'warning' \| 'success'.\n /\n @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n\n /\n The validation state - e.g. 'error' \| 'warning' \| 'success'.\n /\n @Prop() validationText: string = \"\";\n\n /\n If `true`, the icon in input control will be displayed - only applies when validationStatus ='success'.\n /\n @Prop() validationInline: boolean = false;\n\n /\n @internal If `true`, the validation will display inline.\n /\n @Prop() validationInlineInternal: boolean = false;\n\n /\n The automatic capitalisation of the text value as it is entered/edited by the user.\n * Available options: \"off\", \"none\", \"on\", \"sentences\", \"words\", \"characters\".\n /\n @Prop() autocapitalize = \"off\";\n\n /\n The state of autocompletion the browser can apply on the text value.\n /\n @Prop() autocomplete: IcAutocompleteTypes = \"off\";\n\n /\n The state of autocorrection the browser can apply when the user is entering/editing the text value.\n /\n @Prop() autocorrect: IcAutocorrectStates = \"off\";\n\n /\n If `true`, the form control will have input focus when the page loads.\n /\n @Prop() autoFocus = false;\n\n /\n The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.\n /\n @Prop() debounce: number = 0;\n\n private showLeftIcon: boolean = this.hasLeftIconSlot();\n\n @Watch(\"debounce\")\n private debounceChanged() {\n this.icChange = debounceEvent(this.icChange, this.debounce);\n }\n\n /\n The type of control to display. The default type is text.\n /\n @Prop() type: IcTextFieldTypes = \"text\";\n\n /\n A hint to the browser for which keyboard to display.\n * Possible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n * `\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.\n /\n @Prop() inputmode: IcTextFieldInputModes = \"text\";\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() name: string = this.inputId;\n\n /\n If `true`, the value of the text field will have its spelling and grammar checked.\n /\n @Prop() spellcheck: boolean = false;\n\n /\n @internal The active element when focus is on the ic-menu items.\n /\n @Prop() ariaActiveDescendant?: string;\n /\n @internal If `true`, an ellipsis will be displayed at the end of the value if the value is longer than the container.\n /\n @Prop() truncateValue?: boolean;\n\n /\n @internal Used to identify if the slotted menu is rendered\n /\n @Prop() ariaExpanded: string;\n\n /\n @internal Used to identify any related child component\n /\n @Prop() ariaOwns: string;\n\n /\n @internal Used to identify whether inputting any text triggers more predictions\n /\n @Prop() ariaAutocomplete: IcAriaAutocompleteTypes = undefined;\n\n /\n @internal Used to set the role if not default textbox;\n /\n @Prop() role: string;\n\n /\n @internal If `true`, the hidden form input will stop rendering for form submission.\n /\n @Prop() hiddenInput: boolean = true;\n\n @State() numChars: number = 0;\n @State() maxLengthExceeded: boolean = false;\n @State() minValueUnattained: boolean = false;\n @State() maxValueExceeded: boolean = false;\n @State() initialValue = this.value;\n\n @Watch(\"value\")\n watchValueHandler(newValue: string): void {\n if (this.inputEl && this.inputEl.value !== newValue) {\n this.inputEl.value = newValue;\n }\n\n this.numChars = newValue.length;\n\n if (this.type === \"number\") {\n if (newValue && Number(newValue) < Number(this.min)) {\n this.minValueUnattained = true;\n } else {\n this.minValueUnattained = false;\n }\n if (Number(newValue) > Number(this.max)) {\n this.maxValueExceeded = true;\n } else {\n this.maxValueExceeded = false;\n }\n }\n\n if (this.maxLength > 0) {\n if (newValue.length > this.maxLength) {\n this.maxLengthExceeded = true;\n } else {\n this.maxLengthExceeded = false;\n }\n }\n this.icChange.emit({ value: newValue });\n }\n\n /\n Sets focus on the native `input`.\n /\n @Method()\n async setFocus(): Promise<void> {\n if (this.inputEl) {\n this.inputEl.focus();\n }\n }\n\n @Listen(\"keydown\", {})\n handleKeyDown(ev: KeyboardEvent): void {\n this.icKeydown.emit({ event: ev });\n }\n\n /\n Emitted when a keydown event occurred.\n /\n @Event() icKeydown: EventEmitter<{ event: KeyboardEvent }>;\n\n /\n Emitted when a keyboard input occurred.\n /\n @Event() icInput: EventEmitter<IcValueEventDetail>;\n private onInput = (ev: Event) => {\n this.value = (ev.target as HTMLInputElement).value;\n this.icInput.emit({ value: this.value });\n };\n\n /\n Emitted when input loses focus.\n /\n @Event() icBlur: EventEmitter<IcValueEventDetail>;\n private onBlur = (ev: Event) => {\n const value = (ev.target as HTMLInputElement).value;\n this.icBlur.emit({ value: value });\n };\n\n /\n Emitted when input gains focus.\n /\n @Event() icFocus: EventEmitter<IcValueEventDetail>;\n private onFocus = (ev: Event) => {\n const value = (ev.target as HTMLInputElement).value;\n this.icFocus.emit({ value: value });\n };\n\n /\n Emitted when the value has changed.\n /\n @Event() icChange: EventEmitter<IcValueEventDetail>;\n\n private isTextArea = (): boolean => {\n return this.rows > 1;\n };\n\n /\n @internal Emitted when the validationInlineInternal is `true`\n */\n @Event() getValidationText: EventEmitter<IcValueEventDetail>;\n\n private getInlineValidationText = () => {\n this.getValidationText.emit({ value: this.validationText });\n };\n\n private hasLeftIconSlot(): boolean {\n const iconEl = this.el.querySelector(`[slot=\"icon\"]`);\n return iconEl !== null;\n }\n\n private hasStatus = (status: IcInformationStatusOrEmpty): boolean => {\n return status !== \"\" && !this.disabled;\n };\n\n private showStatusText = (status: IcInformationStatusOrEmpty): boolean => {\n return (\n this.hasStatus(status) &&\n !(status == IcInformationStatus.Success && this.validationInline) &&\n !this.validationInlineInternal\n );\n };\n\n private handleFormReset = (): void => {\n this.value = this.initialValue;\n };\n\n connectedCallback(): void {\n this.debounceChanged();\n }\n\n componentWillLoad(): void {\n this.watchValueHandler(this.value);\n\n this.inheritedAttributes = inheritAttributes(this.el, [\n ...IC_INHERITED_ARIA,\n \"title\",\n \"aria-autocomplete\",\n \"aria-haspopup\",\n ]);\n\n if (this.readonly) {\n this.maxLengthExceeded = false;\n this.maxValueExceeded = false;\n this.minValueUnattained = false;\n }\n\n addFormResetListener(this.el, this.handleFormReset);\n\n removeDisabledFalse(this.disabled, this.el);\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Text Field\"\n );\n if (this.validationInlineInternal) {\n this.getInlineValidationText();\n }\n }\n\n disconnectedCallback(): void {\n removeFormResetListener(this.el, this.handleFormReset);\n }\n\n render() {\n const {\n inputId,\n name,\n label,\n required,\n small,\n placeholder,\n helperText,\n rows,\n resize,\n disabled,\n value,\n min,\n max,\n maxLength,\n numChars,\n readonly,\n maxLengthExceeded,\n minValueUnattained,\n maxValueExceeded,\n validationStatus,\n validationText,\n validationInline,\n validationInlineInternal,\n spellcheck,\n inputmode,\n fullWidth,\n truncateValue,\n hiddenInput,\n } = this;\n\n const disabledMode = readonly ? true : disabled;\n\n const placeholderText = disabled ? \"\" : placeholder;\n\n const currentStatus =\n maxLengthExceeded \|\| maxValueExceeded \|\| minValueUnattained\n ? IcInformationStatus.Error\n : validationStatus;\n\n const currentValidationText = maxLengthExceeded\n ? \"Maximum length exceeded\"\n : maxValueExceeded\n ? `Maximum value of ${max} exceeded`\n : minValueUnattained\n ? `Minimum value of ${min} not met`\n : validationText;\n\n const maxNumChars = readonly ? 0 : maxLength;\n\n const messageAriaLive =\n maxLengthExceeded \|\|\n maxValueExceeded \|\|\n minValueUnattained \|\|\n (maxLength === 0 && currentStatus === IcInformationStatus.Error)\n ? \"assertive\"\n : \"polite\";\n\n const showStatusText = this.showStatusText(currentStatus);\n const multiline = this.isTextArea();\n const hiddenCharCountDescId =\n maxLength > 0 ? inputId + \"-charcount-desc\" : \"\";\n const describedBy = (\n hiddenCharCountDescId +\n \" \" +\n getInputDescribedByText(inputId, helperText !== \"\", showStatusText)\n ).trim();\n\n if (this.showLeftIcon && !readonly && disabledMode) {\n this.showLeftIcon = false;\n }\n\n const invalid =\n currentStatus === IcInformationStatus.Error ? \"true\" : \"false\";\n const disabledText = disabledMode && !readonly;\n\n if (hiddenInput) {\n renderHiddenInput(true, this.el, name, value, disabledMode);\n }\n return (\n <Host class={{ [\"fullwidth\"]: fullWidth }}>\n <ic-input-container readonly={readonly} disabled={disabledMode}>\n {!this.hideLabel && (\n <ic-input-label\n for={inputId}\n label={label}\n helperText={helperText}\n required={required}\n disabled={disabledText}\n readonly={readonly}\n ></ic-input-label>\n )}\n\n <ic-input-component-container\n small={small}\n validationStatus={currentStatus}\n multiLine={multiline}\n disabled={disabledMode}\n readonly={readonly}\n validationInline={validationInline}\n fullWidth={fullWidth}\n >\n {this.showLeftIcon && (\n <span\n class={{\n [\"readonly\"]: readonly,\n [\"has-value\"]: value.length > 0,\n }}\n slot=\"left-icon\"\n >\n <slot name=\"icon\" />\n </span>\n )}\n\n {!multiline && (\n <input\n id={inputId}\n name={name}\n ref={(el) => (this.inputEl = el as HTMLInputElement)}\n type={this.type}\n min={min}\n max={max}\n value={value}\n class={{\n [\"no-left-pad\"]: !this.showLeftIcon && readonly,\n [\"readonly\"]: readonly,\n [\"truncate-value\"]: truncateValue,\n }}\n placeholder={placeholderText}\n required={required}\n disabled={disabledMode}\n readonly={readonly}\n onInput={this.onInput}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n aria-label={label}\n aria-describedby={describedBy}\n aria-invalid={invalid}\n aria-activedescendant={this.ariaActiveDescendant}\n aria-expanded={this.ariaExpanded}\n aria-owns={this.ariaOwns}\n autocomplete={this.autocomplete}\n autocapitalize={this.autocapitalize}\n autoFocus={this.autoFocus}\n spellcheck={spellcheck}\n inputmode={inputmode}\n role={this.role}\n {...this.inheritedAttributes}\n ></input>\n )}\n {multiline && (\n <textarea\n id={inputId}\n class={{\n [\"no-resize\"]: resize === false \|\| readonly,\n [\"no-left-pad\"]: !this.showLeftIcon && readonly,\n [\"readonly\"]: readonly,\n }}\n name={name}\n ref={(el) => (this.inputEl = el as HTMLTextAreaElement)}\n value={value}\n rows={rows}\n required={required}\n disabled={disabledMode}\n placeholder={placeholderText}\n readonly={readonly}\n onInput={this.onInput}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n aria-label={label}\n aria-describedby={describedBy}\n aria-invalid={invalid}\n autocapitalize={this.autocapitalize}\n autoFocus={this.autoFocus}\n spellcheck={spellcheck}\n inputmode={inputmode}\n {...this.inheritedAttributes}\n ></textarea>\n )}\n {isSlotUsed(this.el, \"clear-button\") && (\n <slot name=\"clear-button\"></slot>\n )}\n {isSlotUsed(this.el, \"search-submit-button\") && (\n <slot name=\"search-submit-button\"></slot>\n )}\n </ic-input-component-container>\n {isSlotUsed(this.el, \"menu\") && <slot name=\"menu\"></slot>}\n {(!isEmptyString(validationStatus) \|\|\n !isEmptyString(validationText) \|\|\n maxNumChars > 0 \|\|\n maxValueExceeded \|\|\n minValueUnattained) &&\n !validationInlineInternal && (\n <ic-input-validation\n status={\n this.hasStatus(currentStatus) === false \|\|\n (currentStatus === IcInformationStatus.Success &&\n validationInline) \|\|\n validationInlineInternal\n ? \"\"\n : currentStatus\n }\n message={showStatusText ? currentValidationText : \"\"}\n ariaLiveMode={messageAriaLive}\n for={inputId}\n fullWidth={fullWidth}\n >\n {!readonly && maxNumChars > 0 && (\n <div slot=\"validation-message-adornment\">\n <ic-typography\n variant=\"caption\"\n class={{\n [\"maxlengthtext\"]: true,\n [\"error\"]: maxLengthExceeded,\n [\"disabled\"]: disabledText,\n }}\n >\n <span\n aria-live=\"polite\"\n id={`${inputId}-charcount`}\n class=\"charcount\"\n >\n {numChars}/{maxNumChars}\n </span>\n <span hidden={true} id={hiddenCharCountDescId}>\n Field can contain a maximum of {maxNumChars} characters.\n </span>\n </ic-typography>\n </div>\n )}\n </ic-input-validation>\n )}\n </ic-input-container>\n </Host>\n );\n }\n}\n"]}