@zanichelli/albe-web-components 14.5.1 → 14.5.2-rc-anchor-navigation

package/dist/collection/components/z-input/styles-text.css

@@ -0,0 +1,81 @@
+.text-wrapper > div {
+  position: relative;
+  z-index: 1;
+  fill: var(--gray900);
+}
+
+.text-wrapper > div > input {
+  width: 100%;
+  height: calc(var(--space-unit) * 5.5);
+  box-sizing: border-box;
+  padding: 0 calc(var(--space-unit) * 1.5);
+  margin: 0;
+}
+
+:host([size="small"]) .text-wrapper > div > input {
+  height: calc(var(--space-unit) * 4.5);
+}
+
+:host([size="x-small"]) .text-wrapper > div > input {
+  height: calc(var(--space-unit) * 4);
+}
+
+.text-wrapper > div > input.has-icon,
+.text-wrapper > div > input.has-clear-icon {
+  padding-right: calc(var(--space-unit) * 5.25);
+}
+
+.text-wrapper > div > input.has-icon.has-clear-icon {
+  padding-right: calc(var(--space-unit) * 8);
+}
+
+.text-wrapper .icons-wrapper {
+  position: absolute;
+  z-index: 2;
+  top: 50%;
+  right: calc(var(--space-unit) * 1.5);
+  display: flex;
+  pointer-events: none;
+  transform: translateY(-50%);
+}
+
+.text-wrapper .icons-wrapper > button.icon-button {
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  pointer-events: initial;
+}
+
+.text-wrapper .icons-wrapper > button.icon-button + button.icon-button {
+  margin-left: calc(var(--space-unit) * 0.5);
+}
+
+.text-wrapper .icons-wrapper > button.icon-button.hidden {
+  display: none;
+}
+
+.text-wrapper .icons-wrapper > button.icon-button.reset-icon,
+.text-wrapper .icons-wrapper > button.icon-button.toggle-password-icon {
+  cursor: pointer;
+}
+
+.text-wrapper .icons-wrapper > button.icon-button > z-icon {
+  --z-icon-width: 18px;
+  --z-icon-height: 18px;
+
+  display: block;
+}
+
+.text-wrapper .icons-wrapper > button.icon-button > z-icon.small,
+.text-wrapper .icons-wrapper > button.icon-button > z-icon.x-small {
+  --z-icon-width: 16px;
+  --z-icon-height: 16px;
+}
+
+/* stylelint-disable property-no-vendor-prefix */
+.text-wrapper > div > input:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0 1000px #fff inset;
+  -webkit-text-fill-color: currentcolor;
+}

package/dist/collection/components/z-input/styles-textarea.css

@@ -0,0 +1,35 @@
+.textarea-wrapper {
+  padding: calc(var(--space-unit) * 1.5);
+
+  /* Firefox scrollbar */
+  scrollbar-color: var(--color-primary01) transparent;
+}
+
+textarea::-webkit-scrollbar {
+  width: 10px;
+  background: linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);
+  border-radius: var(--border-radius);
+}
+
+textarea::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+textarea::-webkit-scrollbar-thumb {
+  width: 10px;
+  background-color: var(--color-primary01);
+  border-radius: var(--border-radius);
+}
+
+textarea::-webkit-scrollbar-thumb:hover {
+  background-color: var(--color-hover-primary);
+}
+
+textarea {
+  width: 100%;
+  min-height: 132px;
+  padding: 0;
+  border: none;
+  margin: 0;
+  resize: none;
+}

package/dist/collection/components/z-input/test-checkbox.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"test-checkbox.spec.js","sourceRoot":"","sources":["../../../../src/components/z-input/test-checkbox.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAElD,OAAO,EAAC,MAAM,EAAC,MAAM,SAAS,CAAC;AAE/B,QAAQ,CAAC,8BAA8B,EAAE,GAAG,EAAE;IAC5C,EAAE,CAAC,0BAA0B,EAAE,KAAK,IAAI,EAAE;QACxC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,MAAM,CAAC;YACpB,IAAI,EAAE,sDAAsD;SAC7D,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;KAW7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,oCAAoC,EAAE,KAAK,IAAI,EAAE;QAClD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,MAAM,CAAC;YACpB,IAAI,EAAE,uGAAuG;SAC9G,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;KAY7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4BAA4B,EAAE,KAAK,IAAI,EAAE;QAC1C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,MAAM,CAAC;YACpB,IAAI,EAAE,8DAA8D;SACrE,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;KAW7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iCAAiC,EAAE,KAAK,IAAI,EAAE;QAC/C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,MAAM,CAAC;YACpB,IAAI,EAAE,4EAA4E;SACnF,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;KAW7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6BAA6B,EAAE,KAAK,IAAI,EAAE;QAC3C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,MAAM,CAAC;YACpB,IAAI,EAAE,+DAA+D;SACtE,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;KAW7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6BAA6B,EAAE,KAAK,IAAI,EAAE;QAC3C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,MAAM,CAAC;YACpB,IAAI,EAAE,+DAA+D;SACtE,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;OAW3B,CAAC,CAAC;IACP,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZInput} from \"./index\";\n\ndescribe(\"Suite test ZInput - checkbox\", () => {\n  it(\"Test render ZInput vuoto\", async () => {\n    const page = await newSpecPage({\n      components: [ZInput],\n      html: `<z-input htmlid=\"checkid\" type=\"checkbox\"></z-input>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <z-input htmlid=\"checkid\" type=\"checkbox\" size=\"big\">\n\n          <div class=\"checkbox-wrapper\">\n            <input id=\"checkid\" type=\"checkbox\" />\n            <label htmlFor=\"checkid\" class=\"checkbox-label after\">\n              <z-icon name=\"checkbox\" aria-hidden=\"true\" class=\"big\"></z-icon>\n            </label>\n          </div>\n\n      </z-input>\n    `);\n  });\n\n  it(\"Test render ZInput with attributes\", async () => {\n    const page = await newSpecPage({\n      components: [ZInput],\n      html: `<z-input htmlid=\"checkid\" type=\"checkbox\" name=\"name\" label=\"checkbox label\" value=\"value\"></z-input>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <z-input htmlid=\"checkid\" type=\"checkbox\" name=\"name\" label=\"checkbox label\" value=\"value\" size=\"big\">\n\n          <div class=\"checkbox-wrapper\">\n            <input id=\"checkid\" type=\"checkbox\" name=\"name\" value=\"value\" />\n            <label htmlFor=\"checkid\" class=\"checkbox-label after\">\n              <z-icon name=\"checkbox\" aria-hidden=\"true\" class=\"big\"></z-icon>\n              <span>checkbox label</span>\n            </label>\n          </div>\n\n      </z-input>\n    `);\n  });\n\n  it(\"Test render ZInput checked\", async () => {\n    const page = await newSpecPage({\n      components: [ZInput],\n      html: `<z-input htmlid=\"checkid\" type=\"checkbox\" checked></z-input>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <z-input htmlid=\"checkid\" type=\"checkbox\" checked size=\"big\">\n\n          <div class=\"checkbox-wrapper\">\n            <input id=\"checkid\" type=\"checkbox\" checked />\n            <label htmlFor=\"checkid\" class=\"checkbox-label after\">\n              <z-icon name=\"checkbox-checked\" aria-hidden=\"true\" class=\"big\"></z-icon>\n            </label>\n          </div>\n\n      </z-input>\n    `);\n  });\n\n  it(\"Test render ZInput label before\", async () => {\n    const page = await newSpecPage({\n      components: [ZInput],\n      html: `<z-input htmlid=\"checkid\" type=\"checkbox\" label-position=\"left\"></z-input>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <z-input htmlid=\"checkid\" type=\"checkbox\" label-position=\"left\" size=\"big\">\n\n          <div class=\"checkbox-wrapper\">\n            <input id=\"checkid\" type=\"checkbox\" />\n            <label htmlFor=\"checkid\" class=\"checkbox-label before\">\n              <z-icon name=\"checkbox\" aria-hidden=\"true\" class=\"big\"></z-icon>\n            </label>\n          </div>\n\n      </z-input>\n    `);\n  });\n\n  it(\"Test render ZInput disabled\", async () => {\n    const page = await newSpecPage({\n      components: [ZInput],\n      html: `<z-input htmlid=\"checkid\" type=\"checkbox\" disabled></z-input>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <z-input htmlid=\"checkid\" type=\"checkbox\" disabled size=\"big\">\n\n          <div class=\"checkbox-wrapper\">\n            <input id=\"checkid\" type=\"checkbox\" disabled />\n            <label htmlFor=\"checkid\" class=\"checkbox-label after\">\n              <z-icon name=\"checkbox\" aria-hidden=\"true\" class=\"big\"></z-icon>\n            </label>\n          </div>\n\n      </z-input>\n    `);\n  });\n\n  it(\"Test render ZInput readonly\", async () => {\n    const page = await newSpecPage({\n      components: [ZInput],\n      html: `<z-input htmlid=\"checkid\" type=\"checkbox\" readonly></z-input>`,\n    });\n    expect(page.root).toEqualHtml(`\n        <z-input htmlid=\"checkid\" type=\"checkbox\" readonly size=\"big\">\n\n            <div class=\"checkbox-wrapper\">\n              <input id=\"checkid\" type=\"checkbox\" readonly />\n              <label htmlFor=\"checkid\" class=\"checkbox-label after\">\n                <z-icon class=\"big\" name=\"checkbox\" aria-hidden=\"true\"></z-icon>\n              </label>\n            </div>\n\n        </z-input>\n      `);\n  });\n});\n"]}

package/dist/collection/components/z-input/test-methods.spec.js

@@ -0,0 +1,13 @@
+import { InputType } from "../../beans";
+import { ZInput } from "./index";
+it("isChecked() should return checked state", async () => {
+    const input = new ZInput();
+    input.type = InputType.CHECKBOX;
+    input.checked = true;
+    const checked = await input.isChecked();
+    expect(checked).toBe(true);
+    input.checked = false;
+    const unchecked = await input.isChecked();
+    expect(unchecked).toBe(false);
+});
+//# sourceMappingURL=test-methods.spec.js.map

package/dist/collection/components/z-input/test-methods.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"test-methods.spec.js","sourceRoot":"","sources":["../../../../src/components/z-input/test-methods.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AACtC,OAAO,EAAC,MAAM,EAAC,MAAM,SAAS,CAAC;AAE/B,EAAE,CAAC,yCAAyC,EAAE,KAAK,IAAI,EAAE;IACvD,MAAM,KAAK,GAAG,IAAI,MAAM,EAAE,CAAC;IAC3B,KAAK,CAAC,IAAI,GAAG,SAAS,CAAC,QAAQ,CAAC;IAEhC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC;IACrB,MAAM,OAAO,GAAG,MAAM,KAAK,CAAC,SAAS,EAAE,CAAC;IACxC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAE3B,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC;IACtB,MAAM,SAAS,GAAG,MAAM,KAAK,CAAC,SAAS,EAAE,CAAC;IAC1C,MAAM,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;AAChC,CAAC,CAAC,CAAC","sourcesContent":["import {InputType} from \"../../beans\";\nimport {ZInput} from \"./index\";\n\nit(\"isChecked() should return checked state\", async () => {\n  const input = new ZInput();\n  input.type = InputType.CHECKBOX;\n\n  input.checked = true;\n  const checked = await input.isChecked();\n  expect(checked).toBe(true);\n\n  input.checked = false;\n  const unchecked = await input.isChecked();\n  expect(unchecked).toBe(false);\n});\n"]}

package/dist/collection/components/z-input/test-radio.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"test-radio.spec.js","sourceRoot":"","sources":["../../../../src/components/z-input/test-radio.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAElD,OAAO,EAAC,MAAM,EAAC,MAAM,SAAS,CAAC;AAE/B,QAAQ,CAAC,2BAA2B,EAAE,GAAG,EAAE;IACzC,EAAE,CAAC,0BAA0B,EAAE,KAAK,IAAI,EAAE;QACxC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,MAAM,CAAC;YACpB,IAAI,EAAE,mDAAmD;SAC1D,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;KAW7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,oCAAoC,EAAE,KAAK,IAAI,EAAE;QAClD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,MAAM,CAAC;YACpB,IAAI,EAAE,iGAAiG;SACxG,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;KAY7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4BAA4B,EAAE,KAAK,IAAI,EAAE;QAC1C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,MAAM,CAAC;YACpB,IAAI,EAAE,2DAA2D;SAClE,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;KAW7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iCAAiC,EAAE,KAAK,IAAI,EAAE;QAC/C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,MAAM,CAAC;YACpB,IAAI,EAAE,yEAAyE;SAChF,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;KAW7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6BAA6B,EAAE,KAAK,IAAI,EAAE;QAC3C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,MAAM,CAAC;YACpB,IAAI,EAAE,4DAA4D;SACnE,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;KAW7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6BAA6B,EAAE,KAAK,IAAI,EAAE;QAC3C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,MAAM,CAAC;YACpB,IAAI,EAAE,4DAA4D;SACnE,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;OAW3B,CAAC,CAAC;IACP,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZInput} from \"./index\";\n\ndescribe(\"Suite test ZInput - radio\", () => {\n  it(\"Test render ZInput vuoto\", async () => {\n    const page = await newSpecPage({\n      components: [ZInput],\n      html: `<z-input htmlid=\"radioid\" type=\"radio\"></z-input>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <z-input htmlid=\"radioid\" type=\"radio\" size=\"big\">\n\n          <div class=\"radio-wrapper\">\n            <input id=\"radioid\" type=\"radio\" />\n            <label htmlFor=\"radioid\" class=\"radio-label after\">\n              <z-icon name=\"radio-button\" aria-hidden=\"true\" class=\"big\"></z-icon>\n            </label>\n          </div>\n\n      </z-input>\n    `);\n  });\n\n  it(\"Test render ZInput with attributes\", async () => {\n    const page = await newSpecPage({\n      components: [ZInput],\n      html: `<z-input htmlid=\"radioid\" type=\"radio\" name=\"name\" value=\"value\" label=\"radio label\"></z-input>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <z-input htmlid=\"radioid\" type=\"radio\" name=\"name\" value=\"value\" label=\"radio label\" size=\"big\">\n\n          <div class=\"radio-wrapper\">\n            <input id=\"radioid\" type=\"radio\" name=\"name\" value=\"value\" />\n            <label htmlFor=\"radioid\" class=\"radio-label after\">\n              <z-icon name=\"radio-button\" aria-hidden=\"true\" class=\"big\"></z-icon>\n              <span>radio label</span>\n            </label>\n          </div>\n\n      </z-input>\n    `);\n  });\n\n  it(\"Test render ZInput checked\", async () => {\n    const page = await newSpecPage({\n      components: [ZInput],\n      html: `<z-input htmlid=\"radioid\" type=\"radio\" checked></z-input>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <z-input htmlid=\"radioid\" type=\"radio\" checked size=\"big\">\n\n          <div class=\"radio-wrapper\">\n            <input id=\"radioid\" type=\"radio\" checked />\n            <label htmlFor=\"radioid\" class=\"radio-label after\">\n              <z-icon name=\"radio-button-checked\" aria-hidden=\"true\" class=\"big\"></z-icon>\n            </label>\n          </div>\n\n      </z-input>\n    `);\n  });\n\n  it(\"Test render ZInput label before\", async () => {\n    const page = await newSpecPage({\n      components: [ZInput],\n      html: `<z-input htmlid=\"radioid\" type=\"radio\" label-position=\"left\"></z-input>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <z-input htmlid=\"radioid\" type=\"radio\" label-position=\"left\" size=\"big\">\n\n          <div class=\"radio-wrapper\">\n            <input id=\"radioid\" type=\"radio\" />\n            <label htmlFor=\"radioid\" class=\"radio-label before\">\n              <z-icon name=\"radio-button\" aria-hidden=\"true\" class=\"big\"></z-icon>\n            </label>\n          </div>\n\n      </z-input>\n    `);\n  });\n\n  it(\"Test render ZInput disabled\", async () => {\n    const page = await newSpecPage({\n      components: [ZInput],\n      html: `<z-input htmlid=\"radioid\" type=\"radio\" disabled></z-input>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <z-input htmlid=\"radioid\" type=\"radio\" disabled size=\"big\">\n\n          <div class=\"radio-wrapper\">\n            <input id=\"radioid\" type=\"radio\" disabled />\n            <label htmlFor=\"radioid\" class=\"radio-label after\">\n              <z-icon name=\"radio-button\" aria-hidden=\"true\" class=\"big\"></z-icon>\n            </label>\n          </div>\n\n      </z-input>\n    `);\n  });\n\n  it(\"Test render ZInput readonly\", async () => {\n    const page = await newSpecPage({\n      components: [ZInput],\n      html: `<z-input htmlid=\"radioid\" type=\"radio\" readonly></z-input>`,\n    });\n    expect(page.root).toEqualHtml(`\n        <z-input htmlid=\"radioid\" type=\"radio\" readonly size=\"big\">\n\n            <div class=\"radio-wrapper\">\n              <input id=\"radioid\" type=\"radio\" readonly />\n              <label htmlFor=\"radioid\" class=\"radio-label after\">\n                <z-icon name=\"radio-button\" aria-hidden=\"true\" class=\"big\"></z-icon>\n              </label>\n            </div>\n\n        </z-input>\n      `);\n  });\n});\n"]}

package/dist/collection/components/z-input/test-text.spec.js

@@ -0,0 +1,347 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { ZIcon } from "../z-icon";
+import { ZInput } from "./index";
+describe("Suite test ZInput - text", () => {
+    jest.useFakeTimers({
+        legacyFakeTimers: true,
+    });
+    it("Test render ZInput vuoto", async () => {
+        const page = await newSpecPage({
+            components: [ZInput],
+            html: `<z-input message="false" htmlid="id"></z-input>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-input message="false" htmlid="id" size="big">
+          <div class="text-wrapper">
+            <div>
+              <input id="id" class="has-clear-icon" type="text" />
+              <span class="icons-wrapper">
+                <button aria-label="cancella il contenuto dell'input" class="hidden icon-button reset-icon" type="button">
+                <z-icon class="big" name="multiply"></z-icon>
+                </button>
+              </span>
+            </div>
+          </div>
+      </z-input>
+    `);
+    });
+    it("Test render ZInput vuoto small", async () => {
+        const page = await newSpecPage({
+            components: [ZInput],
+            html: `<z-input message="false" htmlid="id" size="small"></z-input>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-input message="false" htmlid="id" size="small">
+          <div class="text-wrapper">
+            <div>
+              <input id="id" class="has-clear-icon" type="text" />
+              <span class="icons-wrapper">
+                <button aria-label="cancella il contenuto dell'input" class="hidden icon-button reset-icon" type="button">
+                  <z-icon class="small" name="multiply"></z-icon>
+                </button>
+              </span>
+            </div>
+          </div>
+      </z-input>
+    `);
+    });
+    it("Test render ZInput vuoto x-small", async () => {
+        const page = await newSpecPage({
+            components: [ZInput],
+            html: `<z-input message="false" htmlid="id" size="x-small"></z-input>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-input message="false" htmlid="id" size="x-small">
+          <div class="text-wrapper">
+            <div>
+              <input id="id" class="has-clear-icon" type="text" />
+              <span class="icons-wrapper">
+                <button aria-label="cancella il contenuto dell'input" class="hidden icon-button reset-icon" type="button">
+                  <z-icon class="x-small" name="multiply"></z-icon>
+                </button>
+              </span>
+            </div>
+          </div>
+      </z-input>
+    `);
+    });
+    it("Test render ZInput con attributi", async () => {
+        const page = await newSpecPage({
+            components: [ZInput],
+            html: `<z-input message="false" type='text' htmlid='test' placeholder='placeholder' value='value' label='label'></z-input>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-input message="false" type='text' htmlid='test' placeholder='placeholder' size='big' value='value' label='label'>
+          <div class="text-wrapper">
+            <label class="body-5-sb input-label" htmlfor="test" id="test_label">label</label>
+            <div>
+              <input class="filled has-clear-icon" type='text' id='test' placeholder='placeholder' value='value' />
+              <span class="icons-wrapper">
+                <button type="button" class="icon-button reset-icon" aria-label="cancella il contenuto dell'input">
+                  <z-icon class="big" name="multiply"></z-icon>
+                </button>
+              </span>
+            </div>
+          </div>
+      </z-input>
+    `);
+    });
+    it("Test render ZInput senza attributo label", async () => {
+        const page = await newSpecPage({
+            components: [ZInput],
+            html: `<z-input message="false" type='text' htmlid='test' placeholder='placeholder' value='value' aria-label='label'></z-input>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-input message="false" type='text' htmlid='test' placeholder='placeholder' size='big' value='value' aria-label='label'>
+          <div class="text-wrapper">
+            <div>
+              <input class="filled has-clear-icon" type='text' id='test' placeholder='placeholder' value='value' aria-label="label" />
+              <span class="icons-wrapper">
+                <button type="button" class="icon-button reset-icon" aria-label="cancella il contenuto dell'input">
+                  <z-icon class="big" name="multiply"></z-icon>
+                </button>
+              </span>
+            </div>
+          </div>
+      </z-input>
+    `);
+    });
+    it("Test render ZInput con attributi disabled", async () => {
+        const page = await newSpecPage({
+            components: [ZInput],
+            html: `<z-input message="false" type='text' htmlid='test' placeholder='placeholder' value='value' label='label' disabled></z-input>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-input message="false" type='text' htmlid='test' placeholder='placeholder' size='big' value='value' label='label' disabled>
+          <div class="text-wrapper">
+            <label class="body-5-sb input-label" htmlfor="test" id="test_label">label</label>
+            <div>
+              <input disabled class="filled has-clear-icon" type='text' id='test' placeholder='placeholder' value='value' />
+              <span class="icons-wrapper">
+                <button aria-label="cancella il contenuto dell'input" class="hidden icon-button reset-icon" type="button">
+                  <z-icon class="big" name="multiply"></z-icon>
+                </button>
+              </span>
+            </div>
+          </div>
+      </z-input>
+    `);
+    });
+    it("Test render ZInput con attributi readonly", async () => {
+        const page = await newSpecPage({
+            components: [ZInput],
+            html: `<z-input message="false" type='text' htmlid='test' placeholder='placeholder' value='value' label='label' readonly></z-input>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-input message="false" type='text' htmlid='test' placeholder='placeholder' value='value' label='label' readonly size='big'>
+          <div class="text-wrapper">
+            <label class="body-5-sb input-label" htmlfor="test" id="test_label">label</label>
+            <div>
+              <input readonly class="filled has-clear-icon" type='text' id='test' placeholder='placeholder' value='value' />
+              <span class="icons-wrapper">
+                <button aria-label="cancella il contenuto dell'input" class="hidden icon-button reset-icon" type="button">
+                    <z-icon class="big" name="multiply"></z-icon>
+                </button>
+              </span>
+            </div>
+          </div>
+      </z-input>
+    `);
+    });
+    it("Test render ZInput con helper message", async () => {
+        const page = await newSpecPage({
+            components: [ZInput],
+            html: `<z-input type='text' htmlid='test' placeholder='placeholder' value='value' label='label' message='helper message'></z-input>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-input type='text' htmlid='test' placeholder='placeholder' size='big' value='value' label='label' message='helper message'>
+          <div class="text-wrapper">
+            <label class="body-5-sb input-label" htmlfor="test" id="test_label">label</label>
+            <div>
+              <input class="filled has-clear-icon" type='text' id='test' placeholder='placeholder' value='value' />
+              <span class="icons-wrapper">
+                <button type="button" class="icon-button reset-icon" aria-label="cancella il contenuto dell'input">
+                  <z-icon class="big" name="multiply"></z-icon>
+                </button>
+              </span>
+            </div>
+            <z-input-message class="big" message="helper message"></z-input-message>
+          </div>
+      </z-input>
+    `);
+    });
+    it("Test render ZInput con status e message", async () => {
+        const page = await newSpecPage({
+            components: [ZInput],
+            html: `<z-input type='text' htmlid='test' placeholder='placeholder' value='value' label='label' status='success' message='success message'></z-input>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-input type='text' htmlid='test' placeholder='placeholder' size="big" value='value' label='label' status='success' message='success message'>
+          <div class="text-wrapper">
+            <label class="body-5-sb input-label" htmlfor="test" id="test_label">label</label>
+            <div>
+              <input class="filled input-success has-clear-icon" type='text' id='test' placeholder='placeholder' value='value' />
+              <span class="icons-wrapper">
+                <button type="button" class="icon-button reset-icon" aria-label="cancella il contenuto dell'input">
+                  <z-icon class="big" name="multiply"></z-icon>
+                </button>
+              </span>
+            </div>
+            <z-input-message class="big" message="success message" status="success"></z-input-message>
+          </div>
+      </z-input>
+    `);
+    });
+    it("Test ZInput clear", async () => {
+        const page = await newSpecPage({
+            components: [ZInput, ZIcon],
+            html: `<z-input type='text' htmlid='test' placeholder='placeholder' value='value' label='label'></z-input>`,
+        });
+        const icon = page.body.querySelector(".reset-icon z-icon");
+        expect(page.rootInstance.value).toEqual("value");
+        icon.click();
+        await page.waitForChanges();
+        expect(page.rootInstance.value).toEqual("");
+    });
+    it("Test render ZInput vuoto - password nascosta", async () => {
+        const page = await newSpecPage({
+            components: [ZInput],
+            html: `<z-input message="false" htmlid="id" type="password"></z-input>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-input message="false" htmlid="id" size="big" type="password">
+          <div class="text-wrapper">
+            <div>
+              <input id="id" class="has-clear-icon has-icon" type="password" />
+              <span class="icons-wrapper">
+                <button aria-label="cancella il contenuto dell'input" class="hidden icon-button reset-icon" type="button">
+                  <z-icon class="big" name="multiply"></z-icon>
+                </button>
+                <button type="button" class="icon-button toggle-password-icon" aria-label="mostra password">
+                  <z-icon class="big" name="view-filled"></z-icon>
+                </button>
+              </span>
+            </div>
+          </div>
+      </z-input>
+    `);
+    });
+    it("Test render ZInput vuoto - password visibile", async () => {
+        const page = await newSpecPage({
+            components: [ZInput],
+            html: `<z-input message="false" htmlid="id" type="password"></z-input>`,
+        });
+        page.rootInstance.passwordHidden = false;
+        await page.waitForChanges();
+        expect(page.root).toEqualHtml(`
+      <z-input message="false" htmlid="id" size="big" type="password">
+          <div class="text-wrapper">
+            <div>
+              <input id="id" class="has-clear-icon has-icon" type="text" />
+              <span class="icons-wrapper">
+                <button aria-label="cancella il contenuto dell'input" class="hidden icon-button reset-icon" type="button">
+                  <z-icon class="big" name="multiply"></z-icon>
+                </button>
+                <button type="button" class="icon-button toggle-password-icon" aria-label="nascondi password">
+                  <z-icon class="big" name="view-off-filled"></z-icon>
+                </button>
+              </span>
+            </div>
+          </div>
+      </z-input>
+    `);
+    });
+    it("Test render ZInput - with clear icon", async () => {
+        const page = await newSpecPage({
+            components: [ZInput],
+            html: `<z-input htmlid="id" hasclearicon="true" value="value"></z-input>`,
+        });
+        page.rootInstance.passwordHidden = false;
+        await page.waitForChanges();
+        expect(page.root).toEqualHtml(`
+      <z-input htmlid="id" hasclearicon="true" size="big" value="value">
+          <div class="text-wrapper">
+            <div>
+              <input id="id" class="filled has-clear-icon" type="text" value="value" />
+              <span class="icons-wrapper">
+                <button type="button" class="icon-button reset-icon" aria-label="cancella il contenuto dell'input">
+                  <z-icon class="big" name="multiply"></z-icon>
+                </button>
+              </span>
+            </div>
+            <z-input-message class="big"></z-input-message>
+          </div>
+      </z-input>
+    `);
+    });
+    it("Test render ZInput - without clear icon", async () => {
+        const page = await newSpecPage({
+            components: [ZInput],
+            html: `<z-input htmlid="id" hasclearicon="false" value="value"></z-input>`,
+        });
+        page.rootInstance.passwordHidden = false;
+        await page.waitForChanges();
+        expect(page.root).toEqualHtml(`
+      <z-input htmlid="id" hasclearicon="false" size="big" value="value">
+          <div class="text-wrapper">
+            <div>
+              <input id="id" class="filled" type="text" value="value" />
+              <span class="icons-wrapper">
+                <button aria-label="cancella il contenuto dell'input" class="hidden icon-button reset-icon" type="button">
+                  <z-icon class="big" name="multiply"></z-icon>
+                </button>
+              </span>
+            </div>
+            <z-input-message class="big"></z-input-message>
+          </div>
+      </z-input>
+    `);
+    });
+    it("Test render ZInput - with icon", async () => {
+        const page = await newSpecPage({
+            components: [ZInput],
+            html: `<z-input htmlid="id" icon="pdf"></z-input>`,
+        });
+        page.rootInstance.passwordHidden = false;
+        await page.waitForChanges();
+        expect(page.root).toEqualHtml(`
+      <z-input htmlid="id" icon="pdf" size="big">
+          <div class="text-wrapper">
+            <div>
+              <input id="id" class="has-icon has-clear-icon" type="text" />
+              <span class="icons-wrapper">
+                <button aria-label="cancella il contenuto dell'input" class="hidden icon-button reset-icon" type="button">
+                  <z-icon class="big" name="multiply"></z-icon>
+                </button>
+                <button aria-hidden="true" type="button" class="icon-button input-icon" tabindex="-1">
+                  <z-icon class="big" name="pdf"></z-icon>
+                </button>
+              </span>
+            </div>
+            <z-input-message class="big"></z-input-message>
+          </div>
+      </z-input>
+    `);
+    });
+    it("Test render ZInput type=number", async () => {
+        const page = await newSpecPage({
+            components: [ZInput],
+            html: `<z-input message="false" type='number' min='1' max='10' step='2' htmlid='test'></z-input>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-input htmlid="test" max="10" message="false" min="1" size="big" step="2" type="number">
+        <div class="text-wrapper">
+          <div>
+            <input id="test" max="10" min="1" step="2" type="number">
+            <span class="icons-wrapper">
+              <button aria-label="cancella il contenuto dell'input" class="hidden icon-button reset-icon" type="button">
+                <z-icon class="big" name="multiply"></z-icon>
+              </button>
+            </span>
+          </div>
+        </div>
+      </z-input>
+    `);
+    });
+});
+//# sourceMappingURL=test-text.spec.js.map

package/dist/collection/components/z-input/test-text.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"test-text.spec.js","sourceRoot":"","sources":["../../../../src/components/z-input/test-text.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\nimport {ZIcon} from \"../z-icon\";\nimport {ZInput} from \"./index\";\n\ndescribe(\"Suite test ZInput - text\", () => {\n  jest.useFakeTimers({\n    legacyFakeTimers: true,\n  });\n  it(\"Test render ZInput vuoto\", async () => {\n    const page = await newSpecPage({\n      components: [ZInput],\n      html: `<z-input message=\"false\" htmlid=\"id\"></z-input>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <z-input message=\"false\" htmlid=\"id\" size=\"big\">\n          <div class=\"text-wrapper\">\n            <div>\n              <input id=\"id\" class=\"has-clear-icon\" type=\"text\" />\n              <span class=\"icons-wrapper\">\n                <button aria-label=\"cancella il contenuto dell'input\" class=\"hidden icon-button reset-icon\" type=\"button\">\n                <z-icon class=\"big\" name=\"multiply\"></z-icon>\n                </button>\n              </span>\n            </div>\n          </div>\n      </z-input>\n    `);\n  });\n\n  it(\"Test render ZInput vuoto small\", async () => {\n    const page = await newSpecPage({\n      components: [ZInput],\n      html: `<z-input message=\"false\" htmlid=\"id\" size=\"small\"></z-input>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <z-input message=\"false\" htmlid=\"id\" size=\"small\">\n          <div class=\"text-wrapper\">\n            <div>\n              <input id=\"id\" class=\"has-clear-icon\" type=\"text\" />\n              <span class=\"icons-wrapper\">\n                <button aria-label=\"cancella il contenuto dell'input\" class=\"hidden icon-button reset-icon\" type=\"button\">\n                  <z-icon class=\"small\" name=\"multiply\"></z-icon>\n                </button>\n              </span>\n            </div>\n          </div>\n      </z-input>\n    `);\n  });\n\n  it(\"Test render ZInput vuoto x-small\", async () => {\n    const page = await newSpecPage({\n      components: [ZInput],\n      html: `<z-input message=\"false\" htmlid=\"id\" size=\"x-small\"></z-input>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <z-input message=\"false\" htmlid=\"id\" size=\"x-small\">\n          <div class=\"text-wrapper\">\n            <div>\n              <input id=\"id\" class=\"has-clear-icon\" type=\"text\" />\n              <span class=\"icons-wrapper\">\n                <button aria-label=\"cancella il contenuto dell'input\" class=\"hidden icon-button reset-icon\" type=\"button\">\n                  <z-icon class=\"x-small\" name=\"multiply\"></z-icon>\n                </button>\n              </span>\n            </div>\n          </div>\n      </z-input>\n    `);\n  });\n\n  it(\"Test render ZInput con attributi\", async () => {\n    const page = await newSpecPage({\n      components: [ZInput],\n      html: `<z-input message=\"false\" type='text' htmlid='test' placeholder='placeholder' value='value' label='label'></z-input>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <z-input message=\"false\" type='text' htmlid='test' placeholder='placeholder' size='big' value='value' label='label'>\n          <div class=\"text-wrapper\">\n            <label class=\"body-5-sb input-label\" htmlfor=\"test\" id=\"test_label\">label</label>\n            <div>\n              <input class=\"filled has-clear-icon\" type='text' id='test' placeholder='placeholder' value='value' />\n              <span class=\"icons-wrapper\">\n                <button type=\"button\" class=\"icon-button reset-icon\" aria-label=\"cancella il contenuto dell'input\">\n                  <z-icon class=\"big\" name=\"multiply\"></z-icon>\n                </button>\n              </span>\n            </div>\n          </div>\n      </z-input>\n    `);\n  });\n\n  it(\"Test render ZInput senza attributo label\", async () => {\n    const page = await newSpecPage({\n      components: [ZInput],\n      html: `<z-input message=\"false\" type='text' htmlid='test' placeholder='placeholder' value='value' aria-label='label'></z-input>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <z-input message=\"false\" type='text' htmlid='test' placeholder='placeholder' size='big' value='value' aria-label='label'>\n          <div class=\"text-wrapper\">\n            <div>\n              <input class=\"filled has-clear-icon\" type='text' id='test' placeholder='placeholder' value='value' aria-label=\"label\" />\n              <span class=\"icons-wrapper\">\n                <button type=\"button\" class=\"icon-button reset-icon\" aria-label=\"cancella il contenuto dell'input\">\n                  <z-icon class=\"big\" name=\"multiply\"></z-icon>\n                </button>\n              </span>\n            </div>\n          </div>\n      </z-input>\n    `);\n  });\n\n  it(\"Test render ZInput con attributi disabled\", async () => {\n    const page = await newSpecPage({\n      components: [ZInput],\n      html: `<z-input message=\"false\" type='text' htmlid='test' placeholder='placeholder' value='value' label='label' disabled></z-input>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <z-input message=\"false\" type='text' htmlid='test' placeholder='placeholder' size='big' value='value' label='label' disabled>\n          <div class=\"text-wrapper\">\n            <label class=\"body-5-sb input-label\" htmlfor=\"test\" id=\"test_label\">label</label>\n            <div>\n              <input disabled class=\"filled has-clear-icon\" type='text' id='test' placeholder='placeholder' value='value' />\n              <span class=\"icons-wrapper\">\n                <button aria-label=\"cancella il contenuto dell'input\" class=\"hidden icon-button reset-icon\" type=\"button\">\n                  <z-icon class=\"big\" name=\"multiply\"></z-icon>\n                </button>\n              </span>\n            </div>\n          </div>\n      </z-input>\n    `);\n  });\n\n  it(\"Test render ZInput con attributi readonly\", async () => {\n    const page = await newSpecPage({\n      components: [ZInput],\n      html: `<z-input message=\"false\" type='text' htmlid='test' placeholder='placeholder' value='value' label='label' readonly></z-input>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <z-input message=\"false\" type='text' htmlid='test' placeholder='placeholder' value='value' label='label' readonly size='big'>\n          <div class=\"text-wrapper\">\n            <label class=\"body-5-sb input-label\" htmlfor=\"test\" id=\"test_label\">label</label>\n            <div>\n              <input readonly class=\"filled has-clear-icon\" type='text' id='test' placeholder='placeholder' value='value' />\n              <span class=\"icons-wrapper\">\n                <button aria-label=\"cancella il contenuto dell'input\" class=\"hidden icon-button reset-icon\" type=\"button\">\n                    <z-icon class=\"big\" name=\"multiply\"></z-icon>\n                </button>\n              </span>\n            </div>\n          </div>\n      </z-input>\n    `);\n  });\n\n  it(\"Test render ZInput con helper message\", async () => {\n    const page = await newSpecPage({\n      components: [ZInput],\n      html: `<z-input type='text' htmlid='test' placeholder='placeholder' value='value' label='label' message='helper message'></z-input>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <z-input type='text' htmlid='test' placeholder='placeholder' size='big' value='value' label='label' message='helper message'>\n          <div class=\"text-wrapper\">\n            <label class=\"body-5-sb input-label\" htmlfor=\"test\" id=\"test_label\">label</label>\n            <div>\n              <input class=\"filled has-clear-icon\" type='text' id='test' placeholder='placeholder' value='value' />\n              <span class=\"icons-wrapper\">\n                <button type=\"button\" class=\"icon-button reset-icon\" aria-label=\"cancella il contenuto dell'input\">\n                  <z-icon class=\"big\" name=\"multiply\"></z-icon>\n                </button>\n              </span>\n            </div>\n            <z-input-message class=\"big\" message=\"helper message\"></z-input-message>\n          </div>\n      </z-input>\n    `);\n  });\n\n  it(\"Test render ZInput con status e message\", async () => {\n    const page = await newSpecPage({\n      components: [ZInput],\n      html: `<z-input type='text' htmlid='test' placeholder='placeholder' value='value' label='label' status='success' message='success message'></z-input>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <z-input type='text' htmlid='test' placeholder='placeholder' size=\"big\" value='value' label='label' status='success' message='success message'>\n          <div class=\"text-wrapper\">\n            <label class=\"body-5-sb input-label\" htmlfor=\"test\" id=\"test_label\">label</label>\n            <div>\n              <input class=\"filled input-success has-clear-icon\" type='text' id='test' placeholder='placeholder' value='value' />\n              <span class=\"icons-wrapper\">\n                <button type=\"button\" class=\"icon-button reset-icon\" aria-label=\"cancella il contenuto dell'input\">\n                  <z-icon class=\"big\" name=\"multiply\"></z-icon>\n                </button>\n              </span>\n            </div>\n            <z-input-message class=\"big\" message=\"success message\" status=\"success\"></z-input-message>\n          </div>\n      </z-input>\n    `);\n  });\n\n  it(\"Test ZInput clear\", async () => {\n    const page = await newSpecPage({\n      components: [ZInput, ZIcon],\n      html: `<z-input type='text' htmlid='test' placeholder='placeholder' value='value' label='label'></z-input>`,\n    });\n    const icon: HTMLZIconElement = page.body.querySelector(\".reset-icon z-icon\");\n    expect(page.rootInstance.value).toEqual(\"value\");\n    icon.click();\n    await page.waitForChanges();\n    expect(page.rootInstance.value).toEqual(\"\");\n  });\n\n  it(\"Test render ZInput vuoto - password nascosta\", async () => {\n    const page = await newSpecPage({\n      components: [ZInput],\n      html: `<z-input message=\"false\" htmlid=\"id\" type=\"password\"></z-input>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <z-input message=\"false\" htmlid=\"id\" size=\"big\" type=\"password\">\n          <div class=\"text-wrapper\">\n            <div>\n              <input id=\"id\" class=\"has-clear-icon has-icon\" type=\"password\" />\n              <span class=\"icons-wrapper\">\n                <button aria-label=\"cancella il contenuto dell'input\" class=\"hidden icon-button reset-icon\" type=\"button\">\n                  <z-icon class=\"big\" name=\"multiply\"></z-icon>\n                </button>\n                <button type=\"button\" class=\"icon-button toggle-password-icon\" aria-label=\"mostra password\">\n                  <z-icon class=\"big\" name=\"view-filled\"></z-icon>\n                </button>\n              </span>\n            </div>\n          </div>\n      </z-input>\n    `);\n  });\n\n  it(\"Test render ZInput vuoto - password visibile\", async () => {\n    const page = await newSpecPage({\n      components: [ZInput],\n      html: `<z-input message=\"false\" htmlid=\"id\" type=\"password\"></z-input>`,\n    });\n    page.rootInstance.passwordHidden = false;\n    await page.waitForChanges();\n    expect(page.root).toEqualHtml(`\n      <z-input message=\"false\" htmlid=\"id\" size=\"big\" type=\"password\">\n          <div class=\"text-wrapper\">\n            <div>\n              <input id=\"id\" class=\"has-clear-icon has-icon\" type=\"text\" />\n              <span class=\"icons-wrapper\">\n                <button aria-label=\"cancella il contenuto dell'input\" class=\"hidden icon-button reset-icon\" type=\"button\">\n                  <z-icon class=\"big\" name=\"multiply\"></z-icon>\n                </button>\n                <button type=\"button\" class=\"icon-button toggle-password-icon\" aria-label=\"nascondi password\">\n                  <z-icon class=\"big\" name=\"view-off-filled\"></z-icon>\n                </button>\n              </span>\n            </div>\n          </div>\n      </z-input>\n    `);\n  });\n\n  it(\"Test render ZInput - with clear icon\", async () => {\n    const page = await newSpecPage({\n      components: [ZInput],\n      html: `<z-input htmlid=\"id\" hasclearicon=\"true\" value=\"value\"></z-input>`,\n    });\n    page.rootInstance.passwordHidden = false;\n    await page.waitForChanges();\n    expect(page.root).toEqualHtml(`\n      <z-input htmlid=\"id\" hasclearicon=\"true\" size=\"big\" value=\"value\">\n          <div class=\"text-wrapper\">\n            <div>\n              <input id=\"id\" class=\"filled has-clear-icon\" type=\"text\" value=\"value\" />\n              <span class=\"icons-wrapper\">\n                <button type=\"button\" class=\"icon-button reset-icon\" aria-label=\"cancella il contenuto dell'input\">\n                  <z-icon class=\"big\" name=\"multiply\"></z-icon>\n                </button>\n              </span>\n            </div>\n            <z-input-message class=\"big\"></z-input-message>\n          </div>\n      </z-input>\n    `);\n  });\n\n  it(\"Test render ZInput - without clear icon\", async () => {\n    const page = await newSpecPage({\n      components: [ZInput],\n      html: `<z-input htmlid=\"id\" hasclearicon=\"false\" value=\"value\"></z-input>`,\n    });\n    page.rootInstance.passwordHidden = false;\n    await page.waitForChanges();\n    expect(page.root).toEqualHtml(`\n      <z-input htmlid=\"id\" hasclearicon=\"false\" size=\"big\" value=\"value\">\n          <div class=\"text-wrapper\">\n            <div>\n              <input id=\"id\" class=\"filled\" type=\"text\" value=\"value\" />\n              <span class=\"icons-wrapper\">\n                <button aria-label=\"cancella il contenuto dell'input\" class=\"hidden icon-button reset-icon\" type=\"button\">\n                  <z-icon class=\"big\" name=\"multiply\"></z-icon>\n                </button>\n              </span>\n            </div>\n            <z-input-message class=\"big\"></z-input-message>\n          </div>\n      </z-input>\n    `);\n  });\n\n  it(\"Test render ZInput - with icon\", async () => {\n    const page = await newSpecPage({\n      components: [ZInput],\n      html: `<z-input htmlid=\"id\" icon=\"pdf\"></z-input>`,\n    });\n    page.rootInstance.passwordHidden = false;\n    await page.waitForChanges();\n    expect(page.root).toEqualHtml(`\n      <z-input htmlid=\"id\" icon=\"pdf\" size=\"big\">\n          <div class=\"text-wrapper\">\n            <div>\n              <input id=\"id\" class=\"has-icon has-clear-icon\" type=\"text\" />\n              <span class=\"icons-wrapper\">\n                <button aria-label=\"cancella il contenuto dell'input\" class=\"hidden icon-button reset-icon\" type=\"button\">\n                  <z-icon class=\"big\" name=\"multiply\"></z-icon>\n                </button>\n                <button aria-hidden=\"true\" type=\"button\" class=\"icon-button input-icon\" tabindex=\"-1\">\n                  <z-icon class=\"big\" name=\"pdf\"></z-icon>\n                </button>\n              </span>\n            </div>\n            <z-input-message class=\"big\"></z-input-message>\n          </div>\n      </z-input>\n    `);\n  });\n\n  it(\"Test render ZInput type=number\", async () => {\n    const page = await newSpecPage({\n      components: [ZInput],\n      html: `<z-input message=\"false\" type='number' min='1' max='10' step='2' htmlid='test'></z-input>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <z-input htmlid=\"test\" max=\"10\" message=\"false\" min=\"1\" size=\"big\" step=\"2\" type=\"number\">\n        <div class=\"text-wrapper\">\n          <div>\n            <input id=\"test\" max=\"10\" min=\"1\" step=\"2\" type=\"number\">\n            <span class=\"icons-wrapper\">\n              <button aria-label=\"cancella il contenuto dell'input\" class=\"hidden icon-button reset-icon\" type=\"button\">\n                <z-icon class=\"big\" name=\"multiply\"></z-icon>\n              </button>\n            </span>\n          </div>\n        </div>\n      </z-input>\n    `);\n  });\n});\n"]}

package/dist/collection/components/z-input/test-textarea.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"test-textarea.spec.js","sourceRoot":"","sources":["../../../../src/components/z-input/test-textarea.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAElD,OAAO,EAAC,MAAM,EAAC,MAAM,SAAS,CAAC;AAE/B,QAAQ,CAAC,8BAA8B,EAAE,GAAG,EAAE;IAC5C,EAAE,CAAC,6BAA6B,EAAE,KAAK,IAAI,EAAE;QAC3C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,MAAM,CAAC;YACpB,IAAI,EAAE,yHAAyH;SAChI,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;KAS7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,+CAA+C,EAAE,KAAK,IAAI,EAAE;QAC7D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,MAAM,CAAC;YACpB,IAAI,EAAE,2IAA2I;SAClJ,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;KAS7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6CAA6C,EAAE,KAAK,IAAI,EAAE;QAC3D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,MAAM,CAAC;YACpB,IAAI,EAAE,gJAAgJ;SACvJ,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;KAU7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZInput} from \"./index\";\n\ndescribe(\"Suite test ZInput - textarea\", () => {\n  it(\"Test render ZInput textarea\", async () => {\n    const page = await newSpecPage({\n      components: [ZInput],\n      html: `<z-input message=\"false\" type=\"textarea\" htmlid=\"test\" placeholder=\"placeholder\" value=\"value\" label=\"label\"></z-input>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <z-input message=\"false\" type=\"textarea\" htmlid=\"test\" placeholder=\"placeholder\" value=\"value\" label=\"label\" size=\"big\">\n        <div class=\"text-wrapper\">\n          <label class=\"body-5-sb input-label\" htmlfor=\"test\" id=\"test_label\">label</label>\n          <div class=\"textarea-wrapper filled\">\n            <textarea class=\"filled\" id=\"test\" placeholder=\"placeholder\" value=\"value\"></textarea>\n          </div>\n        </div>\n      </z-input>\n    `);\n  });\n\n  it(\"Test render ZInput textarea disabled/readonly\", async () => {\n    const page = await newSpecPage({\n      components: [ZInput],\n      html: `<z-input message=\"false\" type=\"textarea\" htmlid=\"test\" placeholder=\"placeholder\" value=\"value\" label=\"label\" disabled readonly></z-input>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <z-input message=\"false\" type=\"textarea\" htmlid=\"test\" placeholder=\"placeholder\" value=\"value\" label=\"label\" disabled readonly size=\"big\">\n        <div class=\"text-wrapper\">\n          <label class=\"body-5-sb input-label\" htmlfor=\"test\" id=\"test_label\">label</label>\n          <div class=\"textarea-wrapper filled readonly\">\n            <textarea disabled readonly class=\"filled\" id=\"test\" placeholder=\"placeholder\" value=\"value\"></textarea>\n          </div>\n        </div>\n      </z-input>\n    `);\n  });\n\n  it(\"Test render ZInput textarea status/messages\", async () => {\n    const page = await newSpecPage({\n      components: [ZInput],\n      html: `<z-input type=\"textarea\" htmlid=\"test\" placeholder=\"placeholder\" label=\"label\" status=\"error\" message=\"error message\" value=\"value\"></z-input>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <z-input type=\"textarea\" htmlid=\"test\" placeholder=\"placeholder\" label=\"label\" size=\"big\" status=\"error\" message=\"error message\" value=\"value\">\n        <div class=\"text-wrapper\">\n          <label class=\"body-5-sb input-label\" htmlfor=\"test\" id=\"test_label\">label</label>\n          <div class=\"textarea-wrapper filled input-error\">\n            <textarea class=\"filled input-error\" id=\"test\" placeholder=\"placeholder\" value=\"value\"></textarea>\n          </div>\n          <z-input-message class=\"big\" message=\"error message\" status=\"error\"></z-input-message>\n        </div>\n      </z-input>\n    `);\n  });\n});\n"]}