@zanichelli/albe-web-components 13.3.0 → 13.3.1-rc

package/dist/collection/components/inputs/z-combobox/index.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../src/components/inputs/z-combobox/index.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZCombobox} from \"./index\";\n\ndescribe(\"Suite test ZCombobox\", () => {\n  it(\"Test render ZCombobox chiusa\", async () => {\n    const page = await newSpecPage({\n      components: [ZCombobox],\n      html: `<z-combobox items='[]'></z-combobox>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <z-combobox items='[]'>\n        <mock:shadow-root>\n          <div data-action=\"combo-undefined\">\n            <div class=\"header\" role=\"button\" tabindex=\"0\">\n            <p class=\"body-3\"><span></span></p>\n              <z-icon class=\"big\" name=\"caret-down\" />\n            </div>\n          </div>\n        </mock:shadow-root>\n      </z-combobox>\n    `);\n  });\n\n  it(\"Test render ZCombobox disabilitata\", async () => {\n    const page = await newSpecPage({\n      components: [ZCombobox],\n      html: `<z-combobox items='[]' disabled='true'></z-combobox>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <z-combobox disabled='' items='[]'>\n        <mock:shadow-root>\n          <div class=\"disabled\" data-action=\"combo-undefined\">\n            <div class=\"header\" role=\"button\" tabindex=\"0\">\n            <p class=\"body-3\"><span></span></p>\n              <z-icon class=\"big\" name=\"caret-down\" />\n            </div>\n          </div>\n        </mock:shadow-root>\n      </z-combobox>\n    `);\n  });\n\n  it(\"Test render ZCombobox chiusa con attributi\", async () => {\n    const page = await newSpecPage({\n      components: [ZCombobox],\n      html: `<z-combobox items='[]' inputid=\"combobox\" label=\"label\" isfixed></z-combobox>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <z-combobox items='[]' inputid=\"combobox\" label=\"label\" isfixed>\n        <mock:shadow-root>\n          <div class=\"fixed\" id=\"combobox\" data-action=\"combo-combobox\">\n            <div class=\"header\" role=\"button\" tabindex=\"0\">\n              <p class=\"body-3\">\n                label\n                <span></span>\n              </p>\n              <z-icon class=\"big\" name=\"caret-down\" />\n            </div>\n          </div>\n        </mock:shadow-root>\n      </z-combobox>\n    `);\n  });\n\n  it(\"Test render ZCombobox chiusa con attributi ed elemento selezionato\", async () => {\n    const page = await newSpecPage({\n      components: [ZCombobox],\n      html: `<z-combobox items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":false},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]' inputid=\"combobox\" label=\"label\"></z-combobox>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <z-combobox items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":false},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]' inputid=\"combobox\" label=\"label\">\n        <mock:shadow-root>\n          <div data-action=\"combo-combobox\" id=\"combobox\">\n            <div class=\"header\" role=\"button\" tabindex=\"0\">\n              <p class=\"body-3\">\n                label\n                <span>(1)</span>\n              </p>\n              <z-icon class=\"big\" name=\"caret-down\" />\n            </div>\n          </div>\n        </mock:shadow-root>\n      </z-combobox>\n    `);\n  });\n\n  it(\"Test render ZCombobox aperta vuota\", async () => {\n    const page = await newSpecPage({\n      components: [ZCombobox],\n      html: `<z-combobox items='[]' noresultslabel='non ci sono risultati'></z-combobox>`,\n    });\n    page.rootInstance.isopen = true;\n    await page.waitForChanges();\n    expect(page.root).toEqualHtml(`\n      <z-combobox items='[]' noresultslabel='non ci sono risultati'>\n        <mock:shadow-root>\n          <div class=\"open\" data-action=\"combo-undefined\">\n            <div class=\"header\" role=\"button\" tabindex=\"0\">\n           <p class=\"body-3\"><span></span></p>\n              <z-icon class=\"big\" name=\"caret-down\" ></z-icon>\n            </div>\n            <div class=\"open-combo-data\">\n              <div tabindex=\"-1\">\n                <ul></ul>\n              </div>\n            </div>\n          </div>\n        </mock:shadow-root>\n      </z-combobox>\n    `);\n  });\n\n  it(\"Test render ZCombobox aperta con elementi\", async () => {\n    const page = await newSpecPage({\n      components: [ZCombobox],\n      html: `<z-combobox inputid=\"combo\" label=\"combo\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":false},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]'></z-combobox>`,\n    });\n    page.rootInstance.isopen = true;\n    await page.waitForChanges();\n    expect(page.root).toEqualHtml(`\n      <z-combobox inputid=\"combo\" label=\"combo\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":false},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]'>\n        <mock:shadow-root>\n          <div class=\"open\" data-action=\"combo-combo\" id=\"combo\">\n            <div class=\"header\" role=\"button\" tabindex=\"0\">\n            <p class=\"body-3\">combo<span>(1)</span></p>\n              <z-icon class=\"big\" name=\"caret-down\" />\n            </div>\n            <div class=\"open-combo-data\">\n              <div tabindex=\"-1\">\n                <ul>\n                  <z-myz-list-item class=\"big\" id=\"item_1\" listitemid=\"item_1\" action=\"combo-li-combo\" underlined=\"\">\n                    <z-input disabled=\"0\" type=\"checkbox\" size=\"big\" htmlid=\"combo-checkbox-combo-item_1\" label=\"primo elemento\"></z-input>\n                  </z-myz-list-item>\n                  <z-myz-list-item class=\"big\" id=\"item_2\" listitemid=\"item_2\" action=\"combo-li-combo\">\n                    <z-input type=\"checkbox\" size=\"big\" htmlid=\"combo-checkbox-combo-item_2\" label=\"secondo elemento\" checked></z-input>\n                  </z-myz-list-item>\n                </ul>\n              </div\n            </div>\n          </div>\n        </mock:shadow-root>\n      </z-combobox>\n    `);\n  });\n\n  it(\"Test render ZCombobox aperta con ricerca\", async () => {\n    const page = await newSpecPage({\n      components: [ZCombobox],\n      html: `<z-combobox inputid=\"combo\" label=\"combo\" hassearch=true searchlabel=\"cerca\" searchplaceholder=\"placeholder\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":false},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]'></z-combobox>`,\n    });\n    page.rootInstance.isopen = true;\n    await page.waitForChanges();\n    expect(page.root).toEqualHtml(`\n      <z-combobox inputid=\"combo\" label=\"combo\" hassearch=true searchlabel=\"cerca\" searchplaceholder=\"placeholder\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":false},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]'>\n        <mock:shadow-root>\n          <div class=\"open\" data-action=\"combo-combo\" id=\"combo\">\n            <div class=\"header\" role=\"button\" tabindex=\"0\">\n            <p class=\"body-3\">combo<span>(1)</span></p>\n              <z-icon class=\"big\" name=\"caret-down\" />\n            </div>\n            <div class=\"open-combo-data\">\n              <z-input size=\"big\" htmlid=\"combo_search\" label=\"cerca\" placeholder=\"placeholder\" type=\"text\"></z-input>\n              <div tabindex=\"-1\">\n                <ul>\n                  <z-myz-list-item class=\"big\" id=\"item_1\" listitemid=\"item_1\" action=\"combo-li-combo\" underlined=\"\">\n                    <z-input disabled=\"0\" type=\"checkbox\" size=\"big\" htmlid=\"combo-checkbox-combo-item_1\" label=\"primo elemento\"></z-input>\n                  </z-myz-list-item>\n                  <z-myz-list-item class=\"big\" id=\"item_2\" listitemid=\"item_2\" action=\"combo-li-combo\">\n                    <z-input type=\"checkbox\" size=\"big\" htmlid=\"combo-checkbox-combo-item_2\" label=\"secondo elemento\" checked></z-input>\n                  </z-myz-list-item>\n                </ul>\n              </div>\n            </div>\n          </div>\n        </mock:shadow-root>\n      </z-combobox>\n    `);\n  });\n\n  it(\"Test render ZCombobox aperta con ricerca attiva e risultati\", async () => {\n    const page = await newSpecPage({\n      components: [ZCombobox],\n      html: `<z-combobox inputid=\"combo\" label=\"combo\" hassearch=true searchlabel=\"cerca\" searchplaceholder=\"placeholder\" closesearchtext=\"CHIUDI\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":false},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]'></z-combobox>`,\n    });\n    page.rootInstance.isopen = true;\n    page.rootInstance.searchValue = \"primo\";\n    await page.waitForChanges();\n    expect(page.root).toEqualHtml(`\n      <z-combobox inputid=\"combo\" label=\"combo\" hassearch=true searchlabel=\"cerca\" searchplaceholder=\"placeholder\" closesearchtext=\"CHIUDI\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":false},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]'>\n        <mock:shadow-root>\n          <div class=\"open\" data-action=\"combo-combo\" id=\"combo\">\n            <div class=\"header\" role=\"button\" tabindex=\"0\">\n            <p class=\"body-3\">combo<span>(1)</span></p>\n              <z-icon class=\"big\" name=\"caret-down\" />\n            </div>\n            <div class=\"open-combo-data\">\n              <z-input size=\"big\" htmlid=\"combo_search\" label=\"cerca\" placeholder=\"placeholder\" type=\"text\" value=\"primo\"></z-input>\n              <div class=\"search\" tabindex=\"-1\">\n                <ul>\n                  <z-myz-list-item class=\"big\" id=\"item_1\" listitemid=\"item_1\" action=\"combo-li-combo\">\n                    <z-input disabled=\"0\" type=\"checkbox\" size=\"big\" htmlid=\"combo-checkbox-combo-item_1\" label=\"<b>primo</b> elemento\"></z-input>\n                  </z-myz-list-item>\n                </ul>\n                <div>\n                  <a role=\"button\" tabindex=\"0\">CHIUDI</a>\n                </div>\n              </div>\n            </div>\n          </div>\n        </mock:shadow-root>\n      </z-combobox>\n    `);\n  });\n\n  it(\"Test render ZCombobox aperta con ricerca attiva senza testo di chiusura della ricerca testuale\", async () => {\n    const page = await newSpecPage({\n      components: [ZCombobox],\n      html: `<z-combobox inputid=\"combo\" label=\"combo\" hassearch=true searchlabel=\"cerca\" searchplaceholder=\"placeholder\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":false},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]'></z-combobox>`,\n    });\n    page.rootInstance.isopen = true;\n    page.rootInstance.searchValue = \"primo\";\n    await page.waitForChanges();\n    expect(page.root).toEqualHtml(`\n      <z-combobox inputid=\"combo\" label=\"combo\" hassearch=true searchlabel=\"cerca\" searchplaceholder=\"placeholder\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":false},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]'>\n        <mock:shadow-root>\n          <div class=\"open\" data-action=\"combo-combo\" id=\"combo\">\n            <div class=\"header\" role=\"button\" tabindex=\"0\">\n            <p class=\"body-3\">combo<span>(1)</span></p>\n              <z-icon class=\"big\" name=\"caret-down\" />\n            </div>\n            <div class=\"open-combo-data\">\n              <z-input size=\"big\" htmlid=\"combo_search\" label=\"cerca\" placeholder=\"placeholder\" type=\"text\" value=\"primo\"></z-input>\n              <div class=\"search\" tabindex=\"-1\">\n                <ul>\n                  <z-myz-list-item class=\"big\" id=\"item_1\" listitemid=\"item_1\" action=\"combo-li-combo\">\n                    <z-input disabled=\"0\" type=\"checkbox\" size=\"big\" htmlid=\"combo-checkbox-combo-item_1\" label=\"<b>primo</b> elemento\"></z-input>\n                  </z-myz-list-item>\n                </ul>\n                <div>\n                  <a role=\"button\" tabindex=\"0\">Chiudi</a>\n                </div>\n              </div>\n            </div>\n          </div>\n        </mock:shadow-root>\n      </z-combobox>\n    `);\n  });\n\n  it(\"Test render ZCombobox aperta con ricerca attiva senza risultati\", async () => {\n    const page = await newSpecPage({\n      components: [ZCombobox],\n      html: `<z-combobox inputid=\"combo\" label=\"combo\" hassearch=true searchlabel=\"cerca\" searchplaceholder=\"placeholder\" closesearchtext=\"CHIUDI\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":false},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]' noresultslabel='non ci sono risultati'></z-combobox>`,\n    });\n    page.rootInstance.isopen = true;\n    page.rootInstance.searchValue = \"prova\";\n    await page.waitForChanges();\n    expect(page.root).toEqualHtml(`\n      <z-combobox inputid=\"combo\" label=\"combo\" hassearch=true searchlabel=\"cerca\" searchplaceholder=\"placeholder\" closesearchtext=\"CHIUDI\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":false},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]' noresultslabel='non ci sono risultati'>\n        <mock:shadow-root>\n          <div class=\"open\" data-action=\"combo-combo\" id=\"combo\">\n            <div class=\"header\" role=\"button\" tabindex=\"0\">\n              <p class=\"body-3\">combo<span>(1)</span></p>\n              <z-icon class=\"big\" name=\"caret-down\" />\n            </div>\n            <div class=\"open-combo-data\">\n              <z-input size=\"big\" htmlid=\"combo_search\" label=\"cerca\" placeholder=\"placeholder\" type=\"text\" value=\"prova\"></z-input>\n              <div class=\"search\" tabindex=\"-1\">\n                <ul>\n                  <z-myz-list-item class=\"big\" id='no-results' text='non ci sono risultati' listitemid='no-results' icon='multiply-circle'></z-myz-list-item>\n                </ul>\n                <div>\n                  <a role=\"button\" tabindex=\"0\">CHIUDI</a>\n                </div>\n              </div>\n            </div>\n          </div>\n        </mock:shadow-root>\n      </z-combobox>\n    `);\n  });\n\n  it(\"Test render ZCombobox aperta con check all\", async () => {\n    const page = await newSpecPage({\n      components: [ZCombobox],\n      html: `<z-combobox inputid=\"combo\" label=\"combo\" hascheckall=\"true\" checkalltext=\"CHECK\" uncheckalltext=\"UNCHECK\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":false},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]'></z-combobox>`,\n    });\n    page.rootInstance.isopen = true;\n    await page.waitForChanges();\n    expect(page.root).toEqualHtml(`\n      <z-combobox inputid=\"combo\" label=\"combo\" hascheckall=\"true\" checkalltext=\"CHECK\" uncheckalltext=\"UNCHECK\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":false},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]'>\n        <mock:shadow-root>\n          <div class=\"open\" data-action=\"combo-combo\" id=\"combo\">\n            <div class=\"header\" role=\"button\" tabindex=\"0\">\n              <p class=\"body-3\">combo<span>(1)</span></p>\n              <z-icon class=\"big\" name=\"caret-down\" />\n            </div>\n            <div class=\"open-combo-data\">\n              <div class=\"check-all-wrapper\">\n                <z-input type=\"checkbox\" size=\"big\" htmlid=\"combo-checkbox-combo-check-all\" label=\"CHECK\" disabled=\"0\" />\n              </div>\n              <div tabindex=\"-1\">\n                <ul>\n                  <z-myz-list-item class=\"big\" id=\"item_1\" listitemid=\"item_1\" action=\"combo-li-combo\" underlined=\"\">\n                    <z-input disabled=\"0\" type=\"checkbox\" size=\"big\" htmlid=\"combo-checkbox-combo-item_1\" label=\"primo elemento\"></z-input>\n                  </z-myz-list-item>\n                  <z-myz-list-item class=\"big\" id=\"item_2\" listitemid=\"item_2\" action=\"combo-li-combo\">\n                    <z-input type=\"checkbox\" size=\"big\" htmlid=\"combo-checkbox-combo-item_2\" label=\"secondo elemento\" checked></z-input>\n                  </z-myz-list-item>\n                </ul>\n              </div\n            </div>\n          </div>\n        </mock:shadow-root>\n      </z-combobox>\n    `);\n  });\n\n  it(\"Test render ZCombobox aperta con uncheck all\", async () => {\n    const page = await newSpecPage({\n      components: [ZCombobox],\n      html: `<z-combobox inputid=\"combo\" label=\"combo\" hascheckall=\"true\" checkalltext=\"CHECK\" uncheckalltext=\"UNCHECK\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":true},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]'></z-combobox>`,\n    });\n    page.rootInstance.isopen = true;\n    await page.waitForChanges();\n    expect(page.root).toEqualHtml(`\n      <z-combobox inputid=\"combo\" label=\"combo\" hascheckall=\"true\" checkalltext=\"CHECK\" uncheckalltext=\"UNCHECK\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":true},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]'>\n        <mock:shadow-root>\n          <div class=\"open\" data-action=\"combo-combo\" id=\"combo\">\n            <div class=\"header\" role=\"button\" tabindex=\"0\">\n              <p class=\"body-3\">combo<span>(2)</span></p>\n              <z-icon class=\"big\" name=\"caret-down\" />\n            </div>\n            <div class=\"open-combo-data\">\n              <div class=\"check-all-wrapper\">\n                <z-input type=\"checkbox\" size=\"big\" htmlid=\"combo-checkbox-combo-check-all\" label=\"UNCHECK\" checked disabled=\"0\" />\n              </div>\n              <div tabindex=\"-1\">\n                <ul>\n                  <z-myz-list-item class=\"big\" id=\"item_1\" listitemid=\"item_1\" action=\"combo-li-combo\" underlined=\"\">\n                    <z-input type=\"checkbox\" size=\"big\" htmlid=\"combo-checkbox-combo-item_1\" label=\"primo elemento\" checked></z-input>\n                  </z-myz-list-item>\n                  <z-myz-list-item class=\"big\" id=\"item_2\" listitemid=\"item_2\" action=\"combo-li-combo\">\n                    <z-input type=\"checkbox\" size=\"big\" htmlid=\"combo-checkbox-combo-item_2\" label=\"secondo elemento\" checked></z-input>\n                  </z-myz-list-item>\n                </ul>\n              </div\n            </div>\n          </div>\n        </mock:shadow-root>\n      </z-combobox>\n    `);\n  });\n\n  it(\"Test render ZCombobox aperta con max checkable items\", async () => {\n    const page = await newSpecPage({\n      components: [ZCombobox],\n      html: `<z-combobox inputid=\"combo\" label=\"combo\" maxcheckableitems=\"1\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":false},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]'></z-combobox>`,\n    });\n    page.rootInstance.isopen = true;\n    await page.waitForChanges();\n    expect(page.root).toEqualHtml(`\n      <z-combobox inputid=\"combo\" label=\"combo\" maxcheckableitems=\"1\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":false},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]'>\n        <mock:shadow-root>\n          <div class=\"open\" data-action=\"combo-combo\" id=\"combo\">\n            <div class=\"header\" role=\"button\" tabindex=\"0\">\n             <p class=\"body-3\">combo<span>(1)</span></p>\n              <z-icon class=\"big\" name=\"caret-down\" />\n            </div>\n            <div class=\"open-combo-data\">\n              <div tabindex=\"-1\">\n                <ul>\n                  <z-myz-list-item class=\"big\" id=\"item_1\" listitemid=\"item_1\" action=\"combo-li-combo\" underlined=\"\">\n                    <z-input disabled=\"\" type=\"checkbox\" size=\"big\" htmlid=\"combo-checkbox-combo-item_1\" label=\"primo elemento\"></z-input>\n                  </z-myz-list-item>\n                  <z-myz-list-item class=\"big\" id=\"item_2\" listitemid=\"item_2\" action=\"combo-li-combo\">\n                    <z-input type=\"checkbox\" size=\"big\" htmlid=\"combo-checkbox-combo-item_2\" label=\"secondo elemento\" checked></z-input>\n                  </z-myz-list-item>\n                </ul>\n              </div\n            </div>\n          </div>\n        </mock:shadow-root>\n      </z-combobox>\n    `);\n  });\n\n  it(\"Test render ZCombobox aperta con maxcheckableitems + check all\", async () => {\n    const page = await newSpecPage({\n      components: [ZCombobox],\n      html: `<z-combobox inputid=\"combo\" label=\"combo\" maxcheckableitems=\"3\" hascheckall=\"true\" checkalltext=\"CHECK\" uncheckalltext=\"UNCHECK\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":true},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":false}]'></z-combobox>`,\n    });\n    page.rootInstance.isopen = true;\n    await page.waitForChanges();\n    expect(page.root).toEqualHtml(`\n      <z-combobox inputid=\"combo\" label=\"combo\" maxcheckableitems=\"3\" hascheckall=\"true\" checkalltext=\"CHECK\" uncheckalltext=\"UNCHECK\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":true},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":false}]'>\n        <mock:shadow-root>\n          <div class=\"open\" data-action=\"combo-combo\" id=\"combo\">\n            <div class=\"header\" role=\"button\" tabindex=\"0\">\n              <p class=\"body-3\">combo<span>(1)</span></p>\n              <z-icon class=\"big\" name=\"caret-down\" />\n            </div>\n            <div class=\"open-combo-data\">\n              <div class=\"check-all-wrapper\">\n                <z-input type=\"checkbox\" size=\"big\" htmlid=\"combo-checkbox-combo-check-all\" label=\"CHECK\" />\n              </div>\n              <div tabindex=\"-1\">\n                <ul>\n                  <z-myz-list-item id=\"item_1\" class=\"big\" listitemid=\"item_1\" action=\"combo-li-combo\" underlined=\"\">\n                    <z-input type=\"checkbox\" size=\"big\" htmlid=\"combo-checkbox-combo-item_1\" label=\"primo elemento\" checked></z-input>\n                  </z-myz-list-item>\n                  <z-myz-list-item id=\"item_2\" class=\"big\" listitemid=\"item_2\" action=\"combo-li-combo\">\n                    <z-input type=\"checkbox\" size=\"big\" htmlid=\"combo-checkbox-combo-item_2\" label=\"secondo elemento\"></z-input>\n                  </z-myz-list-item>\n                </ul>\n              </div\n            </div>\n          </div>\n        </mock:shadow-root>\n      </z-combobox>\n    `);\n  });\n\n  it(\"Test render ZCombobox aperta con maxcheckableitems + check all (disabled)\", async () => {\n    const page = await newSpecPage({\n      components: [ZCombobox],\n      html: `<z-combobox inputid=\"combo\" label=\"combo\" maxcheckableitems=\"1\" hascheckall=\"true\" checkalltext=\"CHECK\" uncheckalltext=\"UNCHECK\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":true},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":false}]'></z-combobox>`,\n    });\n    page.rootInstance.isopen = true;\n    await page.waitForChanges();\n    expect(page.root).toEqualHtml(`\n      <z-combobox inputid=\"combo\" label=\"combo\" maxcheckableitems=\"1\" hascheckall=\"true\" checkalltext=\"CHECK\" uncheckalltext=\"UNCHECK\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":true},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":false}]'>\n        <mock:shadow-root>\n          <div class=\"open\" data-action=\"combo-combo\" id=\"combo\">\n            <div class=\"header\" role=\"button\" tabindex=\"0\">\n              <p class=\"body-3\">combo<span>(1)</span></p>\n              <z-icon class=\"big\" name=\"caret-down\" />\n            </div>\n            <div class=\"open-combo-data\">\n              <div class=\"check-all-wrapper\">\n                <z-input type=\"checkbox\" size=\"big\" disabled htmlid=\"combo-checkbox-combo-check-all\" label=\"CHECK\" />\n              </div>\n              <div tabindex=\"-1\">\n                <ul>\n                  <z-myz-list-item id=\"item_1\" class=\"big\" listitemid=\"item_1\" action=\"combo-li-combo\" underlined=\"\">\n                    <z-input type=\"checkbox\" size=\"big\" htmlid=\"combo-checkbox-combo-item_1\" label=\"primo elemento\" checked></z-input>\n                  </z-myz-list-item>\n                  <z-myz-list-item id=\"item_2\" class=\"big\" listitemid=\"item_2\" action=\"combo-li-combo\">\n                    <z-input type=\"checkbox\" size=\"big\" htmlid=\"combo-checkbox-combo-item_2\" label=\"secondo elemento\" disabled></z-input>\n                  </z-myz-list-item>\n                </ul>\n              </div\n            </div>\n          </div>\n        </mock:shadow-root>\n      </z-combobox>\n    `);\n  });\n});\n"]}
+{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../src/components/inputs/z-combobox/index.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZCombobox} from \"./index\";\n\ndescribe(\"Suite test ZCombobox\", () => {\n  it(\"Test render ZCombobox chiusa\", async () => {\n    const page = await newSpecPage({\n      components: [ZCombobox],\n      html: `<z-combobox items='[]' inputid=\"combobox\"></z-combobox>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <z-combobox items='[]' inputid=\"combobox\">\n        <mock:shadow-root>\n          <div data-action=\"combo-combobox\" id=\"combobox\">\n            <div aria-expanded=\"false\" class=\"header\" role=\"button\" tabindex=\"0\">\n            <p class=\"body-3\"><span></span></p>\n              <z-icon class=\"big\" name=\"caret-down\" />\n            </div>\n          </div>\n        </mock:shadow-root>\n      </z-combobox>\n    `);\n  });\n\n  it(\"Test render ZCombobox disabilitata\", async () => {\n    const page = await newSpecPage({\n      components: [ZCombobox],\n      html: `<z-combobox items='[]' inputid=\"combobox\" disabled='true'></z-combobox>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <z-combobox disabled='' items='[]' inputid=\"combobox\">\n        <mock:shadow-root>\n          <div class=\"disabled\" data-action=\"combo-combobox\" id=\"combobox\">\n            <div aria-expanded=\"false\" class=\"header\" role=\"button\" tabindex=\"0\">\n            <p class=\"body-3\"><span></span></p>\n              <z-icon class=\"big\" name=\"caret-down\" />\n            </div>\n          </div>\n        </mock:shadow-root>\n      </z-combobox>\n    `);\n  });\n\n  it(\"Test render ZCombobox chiusa con attributi\", async () => {\n    const page = await newSpecPage({\n      components: [ZCombobox],\n      html: `<z-combobox items='[]' inputid=\"combobox\" label=\"label\" isfixed></z-combobox>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <z-combobox items='[]' inputid=\"combobox\" label=\"label\" isfixed>\n        <mock:shadow-root>\n          <div class=\"fixed\" id=\"combobox\" data-action=\"combo-combobox\">\n            <div aria-expanded=\"false\" class=\"header\" role=\"button\" tabindex=\"0\">\n              <p class=\"body-3\">\n                label\n                <span></span>\n              </p>\n              <z-icon class=\"big\" name=\"caret-down\" />\n            </div>\n          </div>\n        </mock:shadow-root>\n      </z-combobox>\n    `);\n  });\n\n  it(\"Test render ZCombobox chiusa con attributi ed elemento selezionato\", async () => {\n    const page = await newSpecPage({\n      components: [ZCombobox],\n      html: `<z-combobox items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":false},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]' inputid=\"combobox\" label=\"label\"></z-combobox>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <z-combobox items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":false},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]' inputid=\"combobox\" label=\"label\">\n        <mock:shadow-root>\n          <div data-action=\"combo-combobox\" id=\"combobox\">\n            <div aria-expanded=\"false\" class=\"header\" role=\"button\" tabindex=\"0\">\n              <p class=\"body-3\">\n                label\n                <span>(1)</span>\n              </p>\n              <z-icon class=\"big\" name=\"caret-down\" />\n            </div>\n          </div>\n        </mock:shadow-root>\n      </z-combobox>\n    `);\n  });\n\n  it(\"Test render ZCombobox aperta vuota\", async () => {\n    const page = await newSpecPage({\n      components: [ZCombobox],\n      html: `<z-combobox items='[]' inputid=\"combobox\" noresultslabel='non ci sono risultati'></z-combobox>`,\n    });\n    page.rootInstance.isopen = true;\n    await page.waitForChanges();\n    expect(page.root).toEqualHtml(`\n      <z-combobox items='[]' inputid=\"combobox\" noresultslabel='non ci sono risultati'>\n        <mock:shadow-root>\n          <div class=\"open\" data-action=\"combo-combobox\" id=\"combobox\">\n            <div aria-expanded=\"true\" class=\"header\" role=\"button\" tabindex=\"0\">\n           <p class=\"body-3\"><span></span></p>\n              <z-icon class=\"big\" name=\"caret-down\" ></z-icon>\n            </div>\n            <div class=\"open-combo-data\">\n              <span role=\"combobox\" aria-controls=\"combobox_list\" aria-expanded=\"true\"></span>\n              <div aria-multiselectable=\"\" role=\"listbox\" id=\"combobox_list\" aria-owns=\"\">\n                <div>\n                  <ul role=\"none\"></ul>\n                </div>\n              </div>\n            </div>\n          </div>\n        </mock:shadow-root>\n      </z-combobox>\n    `);\n  });\n\n  it(\"Test render ZCombobox aperta con elementi\", async () => {\n    const page = await newSpecPage({\n      components: [ZCombobox],\n      html: `<z-combobox inputid=\"combobox\" label=\"combo\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":false},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]'></z-combobox>`,\n    });\n    page.rootInstance.isopen = true;\n    await page.waitForChanges();\n    expect(page.root).toEqualHtml(`\n      <z-combobox inputid=\"combobox\" label=\"combo\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":false},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]'>\n        <mock:shadow-root>\n          <div class=\"open\" data-action=\"combo-combobox\" id=\"combobox\">\n            <div aria-expanded=\"true\" class=\"header\" role=\"button\" tabindex=\"0\">\n            <p class=\"body-3\">combo<span>(1)</span></p>\n              <z-icon class=\"big\" name=\"caret-down\" />\n            </div>\n             <div class=\"open-combo-data\">\n              <span role=\"combobox\" aria-label=\"combo\" aria-controls=\"combobox_list\" aria-expanded=\"true\"></span>\n              <div aria-multiselectable=\"\" role=\"listbox\" aria-label=\"combo\" id=\"combobox_list\" aria-owns=\"\">\n                <div>\n                  <ul role=\"none\">\n                    <z-list-element dividertype=\"element\" id=\"6974656d5f31\" size=\"large\">\n                      <z-input role=\"option\" aria-selected=\"false\" disabled=\"0\" class=\"combo-item-checkbox-input-combobox\" type=\"checkbox\" size=\"big\" htmlid=\"combo-checkbox-combobox-6974656d5f31\" label=\"primo elemento\"></z-input>\n                    </z-list-element>\n                    <z-list-element dividertype=\"none\" id=\"6974656d5f32\" size=\"large\">\n                      <z-input role=\"option\" aria-selected=\"true\" type=\"checkbox\" class=\"combo-item-checkbox-input-combobox\" size=\"big\" htmlid=\"combo-checkbox-combobox-6974656d5f32\" label=\"secondo elemento\" checked></z-input>\n                    </z-list-element>\n                  </ul>\n                </div>\n              </div>\n            </div>\n          </div>\n        </mock:shadow-root>\n      </z-combobox>\n    `);\n  });\n\n  it(\"Test render ZCombobox aperta con ricerca\", async () => {\n    const page = await newSpecPage({\n      components: [ZCombobox],\n      html: `<z-combobox inputid=\"combobox\" label=\"combo\" hassearch=true searchlabel=\"cerca\" searchplaceholder=\"placeholder\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":false},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]'></z-combobox>`,\n    });\n    page.rootInstance.isopen = true;\n    await page.waitForChanges();\n    expect(page.root).toEqualHtml(`\n      <z-combobox inputid=\"combobox\" label=\"combo\" hassearch=true searchlabel=\"cerca\" searchplaceholder=\"placeholder\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":false},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]'>\n        <mock:shadow-root>\n          <div class=\"open\" data-action=\"combo-combobox\" id=\"combobox\">\n            <div aria-expanded=\"true\" class=\"header\" role=\"button\" tabindex=\"0\">\n            <p class=\"body-3\">combo<span>(1)</span></p>\n              <z-icon class=\"big\" name=\"caret-down\" />\n            </div>\n            <div class=\"open-combo-data\">\n              <z-input aria-autocomplete=\"list\" aria-controls=\"combobox_list\" aria-expanded=\"true\" htmlid=\"combobox_search\" label=\"cerca\" placeholder=\"placeholder\" role=\"combobox\" aria-label=\"combo\" size=\"big\" type=\"text\"></z-input>\n              <div aria-multiselectable=\"\" role=\"listbox\" aria-label=\"combo\" id=\"combobox_list\" aria-owns=\"\">\n                <div>\n                  <ul role=\"none\">\n                    <z-list-element dividertype=\"element\" id=\"6974656d5f31\" size=\"large\">\n                      <z-input role=\"option\" aria-selected=\"false\" disabled=\"0\" class=\"combo-item-checkbox-input-combobox\" type=\"checkbox\" size=\"big\" htmlid=\"combo-checkbox-combobox-6974656d5f31\" label=\"primo elemento\"></z-input>\n                    </z-list-element>\n                    <z-list-element dividertype=\"none\" id=\"6974656d5f32\" size=\"large\">\n                      <z-input type=\"checkbox\" role=\"option\" aria-selected=\"true\" class=\"combo-item-checkbox-input-combobox\" size=\"big\" htmlid=\"combo-checkbox-combobox-6974656d5f32\"  label=\"secondo elemento\" checked></z-input>\n                    </z-list-element>\n                  </ul>\n                </div>\n              </div>\n            </div>\n          </div>\n        </mock:shadow-root>\n      </z-combobox>\n    `);\n  });\n\n  it(\"Test render ZCombobox aperta con ricerca attiva e risultati\", async () => {\n    const page = await newSpecPage({\n      components: [ZCombobox],\n      html: `<z-combobox inputid=\"combobox\" label=\"combo\" hassearch=true searchlabel=\"cerca\" searchplaceholder=\"placeholder\" closesearchtext=\"CHIUDI\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":false},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]'></z-combobox>`,\n    });\n    page.rootInstance.isopen = true;\n    page.rootInstance.searchValue = \"primo\";\n    await page.waitForChanges();\n    expect(page.root).toEqualHtml(`\n      <z-combobox inputid=\"combobox\" label=\"combo\" hassearch=true searchlabel=\"cerca\" searchplaceholder=\"placeholder\" closesearchtext=\"CHIUDI\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":false},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]'>\n        <mock:shadow-root>\n          <div class=\"open\" data-action=\"combo-combobox\" id=\"combobox\">\n            <div aria-expanded=\"true\" class=\"header\" role=\"button\" tabindex=\"0\">\n            <p class=\"body-3\">combo<span>(1)</span></p>\n              <z-icon class=\"big\" name=\"caret-down\" />\n            </div>\n            <div class=\"open-combo-data\">\n              <z-input aria-autocomplete=\"list\" aria-controls=\"combobox_list\" aria-expanded=\"true\" htmlid=\"combobox_search\" label=\"cerca\" placeholder=\"placeholder\" role=\"combobox\" aria-label=\"combo\" size=\"big\" type=\"text\" value=\"primo\"></z-input>              \n              <div aria-multiselectable=\"\" role=\"listbox\" aria-label=\"combo\" id=\"combobox_list\" aria-owns=\"\">\n                <div class=\"search\">\n                  <ul role=\"none\">\n                    <z-list-element dividertype=\"none\" id=\"6974656d5f31\" size=\"large\">\n                      <z-input role=\"option\" aria-selected=\"false\" disabled=\"0\" class=\"combo-item-checkbox-input-combobox\" type=\"checkbox\" size=\"big\" htmlid=\"combo-checkbox-combobox-6974656d5f31\" label=\"<strong>primo</strong> elemento\"></z-input>\n                    </z-list-element>\n                  </ul>\n                  <div>\n                    <a role=\"button\" tabindex=\"0\">CHIUDI</a>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </mock:shadow-root>\n      </z-combobox>\n    `);\n  });\n\n  it(\"Test render ZCombobox aperta con ricerca attiva senza testo di chiusura della ricerca testuale\", async () => {\n    const page = await newSpecPage({\n      components: [ZCombobox],\n      html: `<z-combobox inputid=\"combobox\" label=\"combo\" hassearch=true searchlabel=\"cerca\" searchplaceholder=\"placeholder\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":false},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]'></z-combobox>`,\n    });\n    page.rootInstance.isopen = true;\n    page.rootInstance.searchValue = \"primo\";\n    await page.waitForChanges();\n    expect(page.root).toEqualHtml(`\n      <z-combobox inputid=\"combobox\" label=\"combo\" hassearch=true searchlabel=\"cerca\" searchplaceholder=\"placeholder\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":false},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]'>\n        <mock:shadow-root>\n          <div class=\"open\" data-action=\"combo-combobox\" id=\"combobox\">\n            <div aria-expanded=\"true\" class=\"header\" role=\"button\" tabindex=\"0\">\n            <p class=\"body-3\">combo<span>(1)</span></p>\n              <z-icon class=\"big\" name=\"caret-down\" />\n            </div>\n            <div class=\"open-combo-data\">\n              <z-input aria-autocomplete=\"list\" aria-controls=\"combobox_list\" aria-expanded=\"true\" htmlid=\"combobox_search\" label=\"cerca\" placeholder=\"placeholder\" role=\"combobox\" aria-label=\"combo\" size=\"big\" type=\"text\" value=\"primo\"></z-input>              \n              <div aria-multiselectable=\"\" role=\"listbox\" aria-label=\"combo\" id=\"combobox_list\" aria-owns=\"\">\n                <div class=\"search\">\n                  <ul role=\"none\">\n                    <z-list-element dividertype=\"none\" id=\"6974656d5f31\" size=\"large\">\n                      <z-input role=\"option\" aria-selected=\"false\" disabled=\"0\" class=\"combo-item-checkbox-input-combobox\" type=\"checkbox\" size=\"big\" htmlid=\"combo-checkbox-combobox-6974656d5f31\" label=\"<strong>primo</strong> elemento\"></z-input>\n                    </z-list-element>\n                  </ul>\n                  <div>\n                    <a role=\"button\" tabindex=\"0\">Chiudi</a>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </mock:shadow-root>\n      </z-combobox>\n    `);\n  });\n\n  it(\"Test render ZCombobox aperta con ricerca attiva senza risultati\", async () => {\n    const page = await newSpecPage({\n      components: [ZCombobox],\n      html: `<z-combobox inputid=\"combobox\" label=\"combo\" hassearch=true searchlabel=\"cerca\" searchplaceholder=\"placeholder\" closesearchtext=\"CHIUDI\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":false},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]' noresultslabel='non ci sono risultati'></z-combobox>`,\n    });\n    page.rootInstance.isopen = true;\n    page.rootInstance.searchValue = \"prova\";\n    await page.waitForChanges();\n    expect(page.root).toEqualHtml(`\n      <z-combobox inputid=\"combobox\" label=\"combo\" hassearch=true searchlabel=\"cerca\" searchplaceholder=\"placeholder\" closesearchtext=\"CHIUDI\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":false},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]' noresultslabel='non ci sono risultati'>\n        <mock:shadow-root>\n          <div class=\"open\" data-action=\"combo-combobox\" id=\"combobox\">\n            <div aria-expanded=\"true\"  class=\"header\" role=\"button\" tabindex=\"0\">\n              <p class=\"body-3\">combo<span>(1)</span></p>\n              <z-icon class=\"big\" name=\"caret-down\" />\n            </div>\n            <div class=\"open-combo-data\">\n              <z-input aria-autocomplete=\"list\" aria-controls=\"combobox_list\" aria-expanded=\"true\" htmlid=\"combobox_search\" label=\"cerca\" placeholder=\"placeholder\" role=\"combobox\" aria-label=\"combo\" size=\"big\" type=\"text\" value=\"prova\"></z-input>\n               <div aria-multiselectable=\"\" role=\"listbox\" aria-label=\"combo\" id=\"combobox_list\" aria-owns=\"\">\n                <div class=\"search\">\n                  <ul role=\"none\">\n                    <z-myz-list-item class=\"big\" id='no-results' text='non ci sono risultati' listitemid='no-results' icon='multiply-circle'></z-myz-list-item>\n                  </ul>\n                  <div>\n                    <a role=\"button\" tabindex=\"0\">CHIUDI</a>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </mock:shadow-root>\n      </z-combobox>\n    `);\n  });\n\n  it(\"Test render ZCombobox aperta con check all\", async () => {\n    const page = await newSpecPage({\n      components: [ZCombobox],\n      html: `<z-combobox inputid=\"combobox\" label=\"combo\" hascheckall=\"true\" checkalltext=\"CHECK\" uncheckalltext=\"UNCHECK\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":false},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]'></z-combobox>`,\n    });\n    page.rootInstance.isopen = true;\n    await page.waitForChanges();\n    expect(page.root).toEqualHtml(`\n      <z-combobox inputid=\"combobox\" label=\"combo\" hascheckall=\"true\" checkalltext=\"CHECK\" uncheckalltext=\"UNCHECK\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":false},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]'>\n        <mock:shadow-root>\n          <div class=\"open\" data-action=\"combo-combobox\" id=\"combobox\">\n            <div aria-expanded=\"true\" class=\"header\" role=\"button\" tabindex=\"0\">\n              <p class=\"body-3\">combo<span>(1)</span></p>\n              <z-icon class=\"big\" name=\"caret-down\" />\n            </div>\n            <div class=\"open-combo-data\">\n              <span role=\"combobox\" aria-label=\"combo\" aria-controls=\"combobox_list\" aria-expanded=\"true\"></span>\n              <div aria-multiselectable=\"\" role=\"listbox\" aria-label=\"combo\" id=\"combobox_list\" aria-owns=\"\">\n                <div class=\"check-all-wrapper\">\n                  <z-input type=\"checkbox\" aria-selected=\"false\" role=\"option\" size=\"big\" htmlid=\"combo-checkbox-combobox-check-all\" class=\"combo-item-checkbox-input-combobox\" label=\"CHECK\" disabled=\"0\" />\n                </div>\n                <div>\n                  <ul role=\"none\">\n                    <z-list-element dividertype=\"element\" id=\"6974656d5f31\" size=\"large\">\n                      <z-input role=\"option\" aria-selected=\"false\" disabled=\"0\" class=\"combo-item-checkbox-input-combobox\" type=\"checkbox\" size=\"big\" htmlid=\"combo-checkbox-combobox-6974656d5f31\" label=\"primo elemento\"></z-input>\n                    </z-list-element>\n                  <z-list-element dividertype=\"none\" id=\"6974656d5f32\" size=\"large\">\n                      <z-input role=\"option\" aria-selected=\"true\" type=\"checkbox\" class=\"combo-item-checkbox-input-combobox\" size=\"big\" htmlid=\"combo-checkbox-combobox-6974656d5f32\" label=\"secondo elemento\" checked></z-input>\n                    </z-list-element>\n                  </ul>\n                </div>\n              </div>\n            </div>\n          </div>\n        </mock:shadow-root>\n      </z-combobox>\n    `);\n  });\n\n  it(\"Test render ZCombobox aperta con uncheck all\", async () => {\n    const page = await newSpecPage({\n      components: [ZCombobox],\n      html: `<z-combobox inputid=\"combobox\" label=\"combo\" hascheckall=\"true\" checkalltext=\"CHECK\" uncheckalltext=\"UNCHECK\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":true},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]'></z-combobox>`,\n    });\n    page.rootInstance.isopen = true;\n    await page.waitForChanges();\n    expect(page.root).toEqualHtml(`\n      <z-combobox inputid=\"combobox\" label=\"combo\" hascheckall=\"true\" checkalltext=\"CHECK\" uncheckalltext=\"UNCHECK\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":true},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]'>\n        <mock:shadow-root>\n          <div class=\"open\" data-action=\"combo-combobox\" id=\"combobox\">\n            <div aria-expanded=\"true\" class=\"header\" role=\"button\" tabindex=\"0\">\n              <p class=\"body-3\">combo<span>(2)</span></p>\n              <z-icon class=\"big\" name=\"caret-down\" />\n            </div>\n            <div class=\"open-combo-data\">\n              <span role=\"combobox\" aria-label=\"combo\" aria-controls=\"combobox_list\" aria-expanded=\"true\"></span>\n              <div aria-multiselectable=\"\" role=\"listbox\" aria-label=\"combo\" id=\"combobox_list\" aria-owns=\"\">\n                <div class=\"check-all-wrapper\">\n                  <z-input type=\"checkbox\" aria-selected=\"true\" role=\"option\" size=\"big\" htmlid=\"combo-checkbox-combobox-check-all\" class=\"combo-item-checkbox-input-combobox\" label=\"UNCHECK\" checked disabled=\"0\" />\n                </div>\n                <div>\n                  <ul role=\"none\">\n                    <z-list-element dividertype=\"element\" id=\"6974656d5f31\" size=\"large\">                    \n                      <z-input type=\"checkbox\" role=\"option\" aria-selected=\"true\" class=\"combo-item-checkbox-input-combobox\" size=\"big\" htmlid=\"combo-checkbox-combobox-6974656d5f31\" label=\"primo elemento\" checked></z-input>\n                    </z-list-element>\n                    <z-list-element dividertype=\"none\" id=\"6974656d5f32\" size=\"large\">\n                      <z-input type=\"checkbox\" role=\"option\" aria-selected=\"true\" class=\"combo-item-checkbox-input-combobox\" size=\"big\" htmlid=\"combo-checkbox-combobox-6974656d5f32\" label=\"secondo elemento\" checked></z-input>\n                    </z-list-element>\n                  </ul>\n                </div>\n              </div>\n            </div>\n          </div>\n        </mock:shadow-root>\n      </z-combobox>\n    `);\n  });\n\n  it(\"Test render ZCombobox aperta con max checkable items\", async () => {\n    const page = await newSpecPage({\n      components: [ZCombobox],\n      html: `<z-combobox inputid=\"combobox\" label=\"combo\" maxcheckableitems=\"1\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":false},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]'></z-combobox>`,\n    });\n    page.rootInstance.isopen = true;\n    await page.waitForChanges();\n    expect(page.root).toEqualHtml(`\n      <z-combobox inputid=\"combobox\" label=\"combo\" maxcheckableitems=\"1\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":false},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]'>\n        <mock:shadow-root>\n          <div class=\"open\" data-action=\"combo-combobox\" id=\"combobox\">\n            <div aria-expanded=\"true\" class=\"header\" role=\"button\" tabindex=\"0\">\n             <p class=\"body-3\">combo<span>(1)</span></p>\n              <z-icon class=\"big\" name=\"caret-down\" />\n            </div>\n            <div class=\"open-combo-data\">\n              <span role=\"combobox\" aria-label=\"combo\" aria-controls=\"combobox_list\" aria-expanded=\"true\"></span>\n              <div aria-multiselectable=\"\" role=\"listbox\" aria-label=\"combo\" id=\"combobox_list\" aria-owns=\"\">\n                <div>\n                  <ul role=\"none\">\n                    <z-list-element dividertype=\"element\" id=\"6974656d5f31\" size=\"large\">\n                      <z-input role=\"option\" aria-selected=\"false\" disabled=\"\" class=\"combo-item-checkbox-input-combobox\" type=\"checkbox\" size=\"big\" htmlid=\"combo-checkbox-combobox-6974656d5f31\" label=\"primo elemento\"></z-input>\n                    </z-list-element>\n                    <z-list-element dividertype=\"none\" id=\"6974656d5f32\" size=\"large\">\n                      <z-input type=\"checkbox\" role=\"option\" aria-selected=\"true\" class=\"combo-item-checkbox-input-combobox\" size=\"big\" htmlid=\"combo-checkbox-combobox-6974656d5f32\" label=\"secondo elemento\" checked></z-input>\n                    </z-list-element>\n                  </ul>\n                </div>\n              </div>\n            </div>\n          </div>\n        </mock:shadow-root>\n      </z-combobox>\n    `);\n  });\n\n  it(\"Test render ZCombobox aperta con maxcheckableitems + check all\", async () => {\n    const page = await newSpecPage({\n      components: [ZCombobox],\n      html: `<z-combobox inputid=\"combobox\" label=\"combo\" maxcheckableitems=\"3\" hascheckall=\"true\" checkalltext=\"CHECK\" uncheckalltext=\"UNCHECK\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":true},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":false}]'></z-combobox>`,\n    });\n    page.rootInstance.isopen = true;\n    await page.waitForChanges();\n    expect(page.root).toEqualHtml(`\n      <z-combobox inputid=\"combobox\" label=\"combo\" maxcheckableitems=\"3\" hascheckall=\"true\" checkalltext=\"CHECK\" uncheckalltext=\"UNCHECK\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":true},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":false}]'>\n        <mock:shadow-root>\n          <div class=\"open\" data-action=\"combo-combobox\" id=\"combobox\">\n            <div aria-expanded=\"true\" class=\"header\" role=\"button\" tabindex=\"0\">\n              <p class=\"body-3\">combo<span>(1)</span></p>\n              <z-icon class=\"big\" name=\"caret-down\" />\n            </div>\n            <div class=\"open-combo-data\">\n              <span role=\"combobox\" aria-label=\"combo\" aria-controls=\"combobox_list\" aria-expanded=\"true\"></span>\n              <div aria-multiselectable=\"\" role=\"listbox\" aria-label=\"combo\" id=\"combobox_list\" aria-owns=\"\">  \n                <div class=\"check-all-wrapper\">\n                  <z-input aria-selected=\"false\" type=\"checkbox\" role=\"option\" size=\"big\" htmlid=\"combo-checkbox-combobox-check-all\" class=\"combo-item-checkbox-input-combobox\" label=\"CHECK\" />\n                </div>\n                <div>\n                  <ul role=\"none\">\n                    <z-list-element dividertype=\"element\" id=\"6974656d5f31\" size=\"large\">  \n                      <z-input type=\"checkbox\" role=\"option\" aria-selected=\"true\" size=\"big\" class=\"combo-item-checkbox-input-combobox\" htmlid=\"combo-checkbox-combobox-6974656d5f31\" label=\"primo elemento\" checked></z-input>\n                    </z-list-element>\n                    <z-list-element dividertype=\"none\" id=\"6974656d5f32\" size=\"large\"> \n                      <z-input type=\"checkbox\" role=\"option\" aria-selected=\"false\" size=\"big\" class=\"combo-item-checkbox-input-combobox\" htmlid=\"combo-checkbox-combobox-6974656d5f32\" label=\"secondo elemento\"></z-input>\n                    </z-list-element>\n                  </ul>\n                </div>\n              </div>\n            </div>\n          </div>\n        </mock:shadow-root>\n      </z-combobox>\n    `);\n  });\n\n  it(\"Test render ZCombobox aperta con maxcheckableitems + check all (disabled)\", async () => {\n    const page = await newSpecPage({\n      components: [ZCombobox],\n      html: `<z-combobox inputid=\"combobox\" label=\"combo\" maxcheckableitems=\"1\" hascheckall=\"true\" checkalltext=\"CHECK\" uncheckalltext=\"UNCHECK\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":true},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":false}]'></z-combobox>`,\n    });\n    page.rootInstance.isopen = true;\n    await page.waitForChanges();\n    expect(page.root).toEqualHtml(`\n      <z-combobox inputid=\"combobox\" label=\"combo\" maxcheckableitems=\"1\" hascheckall=\"true\" checkalltext=\"CHECK\" uncheckalltext=\"UNCHECK\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":true},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":false}]'>\n        <mock:shadow-root>\n          <div class=\"open\" data-action=\"combo-combobox\" id=\"combobox\">\n            <div aria-expanded=\"true\" class=\"header\" role=\"button\" tabindex=\"0\">\n              <p class=\"body-3\">combo<span>(1)</span></p>\n              <z-icon class=\"big\" name=\"caret-down\" />\n            </div>\n             \n            <div class=\"open-combo-data\">             \n              <span role=\"combobox\" aria-label=\"combo\" aria-controls=\"combobox_list\" aria-expanded=\"true\"></span>\n              <div aria-multiselectable=\"\" role=\"listbox\" aria-label=\"combo\" id=\"combobox_list\" aria-owns=\"\">\n                <div class=\"check-all-wrapper\">\n                  <z-input type=\"checkbox\" aria-selected=\"false\" role=\"option\" size=\"big\" disabled htmlid=\"combo-checkbox-combobox-check-all\" class=\"combo-item-checkbox-input-combobox\" label=\"CHECK\" />\n                </div>\n                <div>\n                  <ul role=\"none\">\n                    <z-list-element dividertype=\"element\" id=\"6974656d5f31\" size=\"large\">  \n                      <z-input type=\"checkbox\" role=\"option\" aria-selected=\"true\" class=\"combo-item-checkbox-input-combobox\" size=\"big\" htmlid=\"combo-checkbox-combobox-6974656d5f31\" label=\"primo elemento\" checked></z-input>\n                    </z-list-element>\n                    <z-list-element dividertype=\"none\" id=\"6974656d5f32\" size=\"large\"> \n                      <z-input type=\"checkbox\" role=\"option\" aria-selected=\"false\" class=\"combo-item-checkbox-input-combobox\" size=\"big\" htmlid=\"combo-checkbox-combobox-6974656d5f32\" label=\"secondo elemento\" disabled></z-input>\n                    </z-list-element>\n                  </ul>\n                </div\n              </div>\n            </div>\n          </div>\n        </mock:shadow-root>\n      </z-combobox>\n    `);\n  });\n});\n"]}

package/dist/collection/components/inputs/z-combobox/styles.css

@@ -1,5 +1,6 @@
 :host {
   display: block;
+  font-family: var(--font-family-sans);
 }
 
 :host > div.fixed {
@@ -109,7 +110,7 @@
   border-radius: 0;
 }
 
-:host > div.open > div.open-combo-data > div {
+:host > div.open > div.open-combo-data > div > div {
   overflow: auto;
   max-height: 235px;
   padding: 0;
@@ -121,7 +122,7 @@
   margin-bottom: calc(var(--space-unit) * 2);
 }
 
-:host > div.open > div.open-combo-data > div > ul {
+:host > div.open > div.open-combo-data > div > div > ul {
   max-height: 235px;
   padding: 0 3px; /* needed for checkbox focus shadow */
   margin: 0;
@@ -146,31 +147,30 @@
   color: var(--color-primary01);
 }
 
-:host > div.open > div.open-combo-data > div.search {
+:host > div.open > div.open-combo-data > div > div.search {
   overflow: hidden;
   max-height: auto;
   margin-top: 0;
   box-shadow: 1px 1px 4px 2px rgb(217 222 227 / 50%);
 }
 
-:host > div.open > div.open-combo-data > div.search > ul {
+:host > div.open > div.open-combo-data > div > div.search > ul {
   overflow: auto;
   max-height: 180px;
   padding: var(--space-unit) calc(var(--space-unit) * 2);
   scrollbar-color: var(--color-primary01) transparent;
 }
 
-:host > div.open > div.open-combo-data > div.search > div {
+:host > div.open > div.open-combo-data > div > div.search > div {
   display: flex;
   justify-content: center;
 }
 
-:host > div.open > div.open-combo-data > div.search > div > a {
+:host > div.open > div.open-combo-data > div > div.search > div > a {
   display: inline-block;
   height: 44px;
   color: var(--color-primary01);
   cursor: pointer;
-  font-family: var(--font-family-sans);
   font-size: 14px;
   font-weight: var(--font-sb);
   line-height: 44px;
@@ -178,17 +178,17 @@
   text-transform: uppercase;
 }
 
-:host > div.open > div.open-combo-data > div.check-all-wrapper {
+:host > div.open > div.open-combo-data > div > div.check-all-wrapper {
   padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);
   border-bottom: var(--border-size-small) solid var(--gray800);
   margin-bottom: var(--space-unit);
   text-align: left;
 }
 
-:host([size="small"]) > div.open > div.open-combo-data > div.check-all-wrapper {
+:host([size="small"]) > div.open > div.open-combo-data > div > div.check-all-wrapper {
   padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 0.5);
 }
 
-:host([size="x-small"]) > div.open > div.open-combo-data > div.check-all-wrapper {
+:host([size="x-small"]) > div.open > div.open-combo-data > div > div.check-all-wrapper {
   padding: var(--space-unit) calc(var(--space-unit) * 0.5);
 }

package/dist/collection/components/inputs/z-input/index.js

@@ -98,6 +98,12 @@ export class ZInput {
             validity: this.getValidity("input"),
         });
     }
+    emitInputFocus() {
+        this.inputFocus.emit({ id: this.htmlid });
+    }
+    emitInputBlur() {
+        this.inputBlur.emit({ id: this.htmlid });
+    }
     getValidity(type) {
         const input = this.hostElement.querySelector(type);
         return input.validity;
@@ -156,9 +162,15 @@ export class ZInput {
         const activedescendant = this.ariaActivedescendant ? { "aria-activedescendant": this.ariaActivedescendant } : {};
         return Object.assign(Object.assign(Object.assign(Object.assign({}, expanded), controls), autocomplete), activedescendant);
     }
+    getFocusBlurAttributes() {
+        return {
+            onFocus: () => this.emitInputFocus(),
+            onBlur: () => this.emitInputBlur(),
+        };
+    }
     renderInputText(type = InputType.TEXT) {
         const ariaLabel = this.ariaLabel ? { "aria-label": this.ariaLabel } : {};
-        const attr = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, this.getTextAttributes()), this.getNumberAttributes(type)), this.getPatternAttribute(type)), ariaLabel), this.getRoleAttribute()), this.getAriaAttrubutes());
+        const attr = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, this.getTextAttributes()), this.getNumberAttributes(type)), this.getPatternAttribute(type)), ariaLabel), this.getRoleAttribute()), this.getAriaAttrubutes()), this.getFocusBlurAttributes());
         if (this.icon || type === InputType.PASSWORD) {
             Object.assign(attr.class, { "has-icon": true });
         }
@@ -218,7 +230,7 @@ export class ZInput {
     }
     /* START checkbox */
     renderCheckbox() {
-        return (h("div", { class: "checkbox-wrapper" }, h("input", Object.assign({ id: this.htmlid, type: "checkbox", name: this.name, checked: this.checked, disabled: this.disabled, readonly: this.readonly, required: this.required, onChange: this.handleCheck.bind(this), value: this.value }, this.getRoleAttribute())), h("label", { htmlFor: this.htmlid, class: {
+        return (h("div", { class: "checkbox-wrapper" }, h("input", Object.assign({ id: this.htmlid, type: "checkbox", name: this.name, checked: this.checked, disabled: this.disabled, readonly: this.readonly, required: this.required, onChange: this.handleCheck.bind(this), value: this.value }, this.getRoleAttribute(), this.getFocusBlurAttributes())), h("label", { htmlFor: this.htmlid, class: {
                 "checkbox-label": true,
                 "after": this.labelPosition === LabelPosition.RIGHT,
                 "before": this.labelPosition === LabelPosition.LEFT,
@@ -227,7 +239,7 @@ export class ZInput {
     /* END checkbox */
     /* START radio */
     renderRadio() {
-        return (h("div", { class: "radio-wrapper" }, h("input", Object.assign({ id: this.htmlid, type: "radio", name: this.name, checked: this.checked, disabled: this.disabled, readonly: this.readonly, onChange: this.handleCheck.bind(this), value: this.value }, this.getRoleAttribute())), h("label", { htmlFor: this.htmlid, class: {
+        return (h("div", { class: "radio-wrapper" }, h("input", Object.assign({ id: this.htmlid, type: "radio", name: this.name, checked: this.checked, disabled: this.disabled, readonly: this.readonly, onChange: this.handleCheck.bind(this), value: this.value }, this.getRoleAttribute(), this.getFocusBlurAttributes())), h("label", { htmlFor: this.htmlid, class: {
                 "radio-label": true,
                 "after": this.labelPosition === LabelPosition.RIGHT,
                 "before": this.labelPosition === LabelPosition.LEFT,
@@ -249,7 +261,7 @@ export class ZInput {
             default:
                 input = this.renderInputText(this.type);
         }
-        return h(Host, { key: '67a39cc20219fa02de2cca264a5d51428f4359f3' }, input);
+        return h(Host, { key: '1a0cb1ef6eb16091c75e87f9761d1eee55a3d3f0' }, input);
     }
     static get is() { return "z-input"; }
     static get encapsulation() { return "scoped"; }
@@ -878,6 +890,36 @@ export class ZInput {
                     "resolved": "any",
                     "references": {}
                 }
+            }, {
+                "method": "inputFocus",
+                "name": "inputFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on input focus"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "inputBlur",
+                "name": "inputBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on input blur"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
             }];
     }
     static get methods() {

package/dist/collection/components/inputs/z-input/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/inputs/z-input/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Prop, State, h, Method, Event, EventEmitter, Element, Listen} from \"@stencil/core\";\nimport {Host, JSXBase} from \"@stencil/core/internal\";\nimport {InputType, LabelPosition, InputStatus, ControlSize} from \"../../../beans\";\nimport {boolean, randomId} from \"../../../utils/utils\";\n\n@Component({\n  tag: \"z-input\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZInput {\n  @Element() hostElement: HTMLZInputElement;\n\n  /** the id of the input element */\n  @Prop()\n  htmlid = `id-${randomId()}`;\n\n  /** input types */\n  @Prop()\n  type: InputType;\n\n  /** the input name */\n  @Prop()\n  name?: string;\n\n  /** the input label */\n  @Prop()\n  label?: string;\n\n  /** the input aria-label */\n  @Prop()\n  ariaLabel = \"\";\n\n  /** the input aria-expaded (optional): available for text, password, number, email */\n  @Prop()\n  ariaExpanded?: string;\n\n  /** the input aria-controls (optional): available for text, password, number, email */\n  @Prop()\n  ariaControls?: string;\n\n  /** the input aria-autocomplete (optional): available for text, password, number, email */\n  @Prop()\n  ariaAutocomplete?: string;\n\n  /** the input aria-activedescendant (optional): available for text, password, number, email */\n  @Prop()\n  ariaActivedescendant?: string;\n\n  /** the input value */\n  @Prop({mutable: true})\n  value?: string;\n\n  /** the input is disabled */\n  @Prop({reflect: true})\n  disabled?: boolean = false;\n\n  /** the input is readonly */\n  @Prop()\n  readonly?: boolean = false;\n\n  /** the input is required (optional): available for text, password, number, email, textarea, checkbox */\n  @Prop()\n  required?: boolean = false;\n\n  /** checked: available for checkbox, radio */\n  @Prop({mutable: true})\n  checked?: boolean = false;\n\n  /** the input placeholder (optional) */\n  @Prop()\n  placeholder?: string;\n\n  /** the input html title (optional) */\n  @Prop()\n  htmltitle?: string;\n\n  /** the input status (optional): available for text, password, number, email, textarea */\n  @Prop()\n  status?: InputStatus;\n\n  /** input helper message (optional): available for text, password, number, email, textarea - if set to `false` message won't be displayed */\n  @Prop()\n  message?: string | boolean = true;\n\n  /** the input label position: available for checkbox, radio */\n  @Prop()\n  labelPosition?: LabelPosition = LabelPosition.RIGHT;\n\n  /** the input has autocomplete option (optional): available for text, password, number, email */\n  @Prop()\n  autocomplete?: string;\n\n  /** the input role (optional) */\n  @Prop()\n  role?: string;\n\n  /** render clear icon when typing (optional): available for text */\n  @Prop()\n  hasclearicon?: boolean = true;\n\n  /** render icon (optional): available for text */\n  @Prop()\n  icon?: string;\n\n  /** min number value (optional): available for number */\n  @Prop()\n  min?: number;\n\n  /** Min length value (optional): available for text */\n  @Prop()\n  minlength?: number;\n\n  /** max number value (optional): available for number */\n  @Prop()\n  max?: number;\n\n  /** Max length value (optional): available for text */\n  @Prop()\n  maxlength?: number;\n\n  /** step number value (optional): available for number */\n  @Prop()\n  step?: number;\n\n  /** pattern value (optional): available for tel, text, search, url, email, password*/\n  @Prop()\n  pattern?: string;\n\n  /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */\n  @Prop({reflect: true})\n  size?: ControlSize = ControlSize.BIG;\n\n  @State()\n  isTyping = false;\n\n  @State()\n  passwordHidden = true;\n\n  private timer;\n\n  private typingtimeout = 300;\n\n  private inputRef: HTMLInputElement;\n\n  @Listen(\"inputCheck\", {target: \"document\"})\n  inputCheckListener(e: CustomEvent): void {\n    const data = e.detail;\n    switch (this.type) {\n      case InputType.RADIO:\n        if (data.type === InputType.RADIO && data.name === this.name && data.id !== this.htmlid) {\n          this.checked = false;\n        }\n        break;\n    }\n  }\n\n  /** get checked status */\n  @Method()\n  async isChecked(): Promise<boolean> {\n    switch (this.type) {\n      case InputType.CHECKBOX:\n      case InputType.RADIO:\n        return this.checked;\n      default:\n        console.warn(\"`isChecked` method is only available for type `checkbox` and `radio`\");\n\n        return false;\n    }\n  }\n\n  /** Emitted on input value change, returns value, validity */\n  @Event()\n  inputChange: EventEmitter;\n\n  private emitInputChange(value: string): void {\n    if (!this.isTyping) {\n      this.emitStartTyping();\n    }\n\n    let validity: ValidityState;\n    if (this.type === InputType.TEXTAREA) {\n      validity = this.getValidity(\"textarea\");\n    } else {\n      validity = this.getValidity(\"input\");\n    }\n    this.value = value;\n    this.inputChange.emit({value, validity});\n\n    clearTimeout(this.timer);\n    this.timer = setTimeout(() => {\n      this.emitStopTyping(this.value, validity);\n    }, this.typingtimeout);\n  }\n\n  /** Emitted when user starts typing */\n  @Event()\n  startTyping: EventEmitter;\n\n  private emitStartTyping(): void {\n    this.isTyping = true;\n    this.startTyping.emit();\n  }\n\n  /** Emitted when user stops typing, returns value, validity */\n  @Event()\n  stopTyping: EventEmitter;\n\n  private emitStopTyping(value: string, validity: ValidityState): void {\n    this.isTyping = false;\n    this.stopTyping.emit({\n      value: value,\n      validity: validity,\n    });\n  }\n\n  /** Emitted on checkbox check/uncheck, returns id, checked, type, name, value, validity */\n  @Event()\n  inputCheck: EventEmitter;\n\n  private emitInputCheck(checked: boolean): void {\n    this.inputCheck.emit({\n      id: this.htmlid,\n      checked: checked,\n      type: this.type,\n      name: this.name,\n      value: this.value,\n      validity: this.getValidity(\"input\"),\n    });\n  }\n\n  private getValidity(type: string): ValidityState {\n    const input = this.hostElement.querySelector(type) as HTMLInputElement;\n\n    return input.validity;\n  }\n\n  /* START text/password/email/number */\n\n  private getTextAttributes(): JSXBase.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement> {\n    return {\n      id: this.htmlid,\n      name: this.name,\n      placeholder: this.placeholder,\n      value: this.value,\n      disabled: this.disabled,\n      readonly: this.readonly,\n      required: this.required,\n      title: this.htmltitle,\n      minlength: this.minlength,\n      maxlength: this.maxlength,\n      class: {\n        [`input-${this.status}`]: !!this.status,\n        filled: !!this.value,\n      },\n      autocomplete: this.autocomplete,\n      onInput: (e: InputEvent) => this.emitInputChange((e.target as HTMLInputElement).value),\n    };\n  }\n\n  private getNumberAttributes(type: InputType): JSXBase.InputHTMLAttributes<HTMLInputElement> {\n    if (type != InputType.NUMBER) {\n      return;\n    }\n\n    return {\n      min: this.min,\n      max: this.max,\n      step: this.step,\n    };\n  }\n\n  private getPatternAttribute(type: InputType): JSXBase.InputHTMLAttributes<HTMLInputElement> {\n    if (\n      type != InputType.PASSWORD &&\n      type != InputType.TEXT &&\n      type != InputType.TEL &&\n      type != InputType.SEARCH &&\n      type != InputType.URL &&\n      type != InputType.EMAIL\n    ) {\n      return;\n    }\n\n    return {\n      pattern: this.pattern,\n    };\n  }\n\n  private getRoleAttribute(): JSXBase.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement> {\n    return this.role ? {role: this.role} : {};\n  }\n\n  private getAriaAttrubutes(): Record<string, unknown> {\n    const expanded = this.ariaExpanded ? {\"aria-expanded\": this.ariaExpanded} : {};\n    const controls = this.ariaControls ? {\"aria-controls\": this.ariaControls} : {};\n    const autocomplete = this.ariaAutocomplete ? {\"aria-autocomplete\": this.ariaAutocomplete} : {};\n    const activedescendant = this.ariaActivedescendant ? {\"aria-activedescendant\": this.ariaActivedescendant} : {};\n\n    return {\n      ...expanded,\n      ...controls,\n      ...autocomplete,\n      ...activedescendant,\n    };\n  }\n\n  private renderInputText(type: InputType = InputType.TEXT): HTMLDivElement {\n    const ariaLabel = this.ariaLabel ? {\"aria-label\": this.ariaLabel} : {};\n    const attr = {\n      ...this.getTextAttributes(),\n      ...this.getNumberAttributes(type),\n      ...this.getPatternAttribute(type),\n      ...ariaLabel,\n      ...this.getRoleAttribute(),\n      ...this.getAriaAttrubutes(),\n    };\n    if (this.icon || type === InputType.PASSWORD) {\n      Object.assign(attr.class, {\"has-icon\": true});\n    }\n    if (this.hasclearicon && type != InputType.NUMBER) {\n      Object.assign(attr.class, {\"has-clear-icon\": true});\n    }\n\n    return (\n      <div class=\"text-wrapper\">\n        {this.renderLabel()}\n        <div>\n          <input\n            type={type === InputType.PASSWORD && !this.passwordHidden ? InputType.TEXT : type}\n            {...attr}\n            ref={(el) => (this.inputRef = el)}\n          />\n          {this.renderIcons()}\n        </div>\n        {this.renderMessage()}\n      </div>\n    );\n  }\n\n  private renderLabel(): HTMLLabelElement {\n    if (!this.label) {\n      return;\n    }\n\n    return (\n      <label\n        class=\"input-label body-5-sb\"\n        id={`${this.htmlid}_label`}\n        htmlFor={this.htmlid}\n      >\n        {this.label}\n      </label>\n    );\n  }\n\n  private renderIcons(): HTMLSpanElement {\n    return (\n      <span class=\"icons-wrapper\">\n        {this.renderResetIcon()}\n        {this.renderIcon()}\n      </span>\n    );\n  }\n\n  private renderIcon(): HTMLButtonElement {\n    if (this.type === InputType.PASSWORD) {\n      return this.renderShowHidePassword();\n    }\n\n    if (!this.icon) {\n      return;\n    }\n\n    return (\n      <button\n        type=\"button\"\n        class=\"icon-button input-icon\"\n        tabIndex={-1}\n        aria-hidden=\"true\"\n      >\n        <z-icon\n          name={this.icon}\n          class={this.size}\n        />\n      </button>\n    );\n  }\n\n  private renderResetIcon(): HTMLButtonElement {\n    let hidden = false;\n    if (!this.hasclearicon || !this.value || this.disabled || this.readonly || this.type == InputType.NUMBER) {\n      hidden = true;\n    }\n\n    return (\n      <button\n        type=\"button\"\n        class={`icon-button reset-icon ${hidden ? \"hidden\" : \"\"}`}\n        aria-label=\"cancella il contenuto dell'input\"\n        onClick={() => {\n          this.inputRef.value = \"\";\n          this.emitInputChange(\"\");\n        }}\n      >\n        <z-icon\n          name=\"multiply\"\n          class={this.size}\n        />\n      </button>\n    );\n  }\n\n  private renderShowHidePassword(): HTMLButtonElement {\n    return (\n      <button\n        type=\"button\"\n        class=\"icon-button toggle-password-icon\"\n        disabled={this.disabled}\n        aria-label={this.passwordHidden ? \"mostra password\" : \"nascondi password\"}\n        onClick={() => (this.passwordHidden = !this.passwordHidden)}\n      >\n        <z-icon\n          name={this.passwordHidden ? \"view-filled\" : \"view-off-filled\"}\n          class={this.size}\n        />\n      </button>\n    );\n  }\n\n  private renderMessage(): HTMLZInputMessageElement {\n    if (boolean(this.message) === false) {\n      return;\n    }\n\n    return (\n      <z-input-message\n        message={boolean(this.message) === true ? undefined : (this.message as string)}\n        status={this.status}\n        class={this.size}\n      />\n    );\n  }\n\n  /* END text/password/email/number */\n\n  /* START textarea */\n\n  private renderTextarea(): HTMLDivElement {\n    const attributes = this.getTextAttributes();\n    const ariaLabel = this.ariaLabel ? {\"aria-label\": this.ariaLabel} : {};\n\n    return (\n      <div class=\"text-wrapper\">\n        {this.renderLabel()}\n        <div\n          class={{\n            ...(attributes.class as Record<string, boolean>),\n            \"textarea-wrapper\": true,\n            \"readonly\": attributes.readonly as boolean,\n          }}\n        >\n          <textarea\n            {...attributes}\n            {...ariaLabel}\n            {...this.getRoleAttribute()}\n          ></textarea>\n        </div>\n        {this.renderMessage()}\n      </div>\n    );\n  }\n\n  /* END textarea */\n\n  private handleCheck(ev: Event): void {\n    this.checked = (ev.target as HTMLInputElement).checked;\n    this.emitInputCheck(this.checked);\n  }\n\n  /* START checkbox */\n  private renderCheckbox(): HTMLDivElement {\n    return (\n      <div class=\"checkbox-wrapper\">\n        <input\n          id={this.htmlid}\n          type=\"checkbox\"\n          name={this.name}\n          checked={this.checked}\n          disabled={this.disabled}\n          readonly={this.readonly}\n          required={this.required}\n          onChange={this.handleCheck.bind(this)}\n          value={this.value}\n          {...this.getRoleAttribute()}\n        />\n\n        <label\n          htmlFor={this.htmlid}\n          class={{\n            \"checkbox-label\": true,\n            \"after\": this.labelPosition === LabelPosition.RIGHT,\n            \"before\": this.labelPosition === LabelPosition.LEFT,\n          }}\n        >\n          <z-icon\n            name={this.checked ? \"checkbox-checked\" : \"checkbox\"}\n            aria-hidden=\"true\"\n            class={this.size}\n          />\n          {this.label && <span innerHTML={this.label}></span>}\n        </label>\n      </div>\n    );\n  }\n\n  /* END checkbox */\n\n  /* START radio */\n  private renderRadio(): HTMLDivElement {\n    return (\n      <div class=\"radio-wrapper\">\n        <input\n          id={this.htmlid}\n          type=\"radio\"\n          name={this.name}\n          checked={this.checked}\n          disabled={this.disabled}\n          readonly={this.readonly}\n          onChange={this.handleCheck.bind(this)}\n          value={this.value}\n          {...this.getRoleAttribute()}\n        />\n\n        <label\n          htmlFor={this.htmlid}\n          class={{\n            \"radio-label\": true,\n            \"after\": this.labelPosition === LabelPosition.RIGHT,\n            \"before\": this.labelPosition === LabelPosition.LEFT,\n          }}\n        >\n          <z-icon\n            name={this.checked ? \"radio-button-checked\" : \"radio-button\"}\n            aria-hidden=\"true\"\n            class={this.size}\n          />\n          {this.label && <span innerHTML={this.label} />}\n        </label>\n      </div>\n    );\n  }\n  /* END radio */\n\n  render(): HTMLInputElement | HTMLDivElement {\n    let input;\n    switch (this.type) {\n      case InputType.TEXTAREA:\n        input = this.renderTextarea();\n        break;\n      case InputType.CHECKBOX:\n        input = this.renderCheckbox();\n        break;\n      case InputType.RADIO:\n        input = this.renderRadio();\n        break;\n      default:\n        input = this.renderInputText(this.type);\n    }\n\n    return <Host>{input}</Host>;\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/inputs/z-input/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAgB,OAAO,EAAE,MAAM,EAAC,MAAM,eAAe,CAAC;AACtG,OAAO,EAAC,IAAI,EAAU,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAC,SAAS,EAAE,aAAa,EAAe,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAClF,OAAO,EAAC,OAAO,EAAE,QAAQ,EAAC,MAAM,sBAAsB,CAAC;AAQvD,MAAM,OAAO,MAAM;;QAmIT,kBAAa,GAAG,GAAG,CAAC;sBA9HnB,MAAM,QAAQ,EAAE,EAAE;;;;yBAgBf,EAAE;;;;;;wBAwBO,KAAK;wBAIL,KAAK;wBAIL,KAAK;uBAIN,KAAK;;;;uBAgBI,IAAI;6BAID,aAAa,CAAC,KAAK;;;4BAY1B,IAAI;;;;;;;;oBAgCR,WAAW,CAAC,GAAG;wBAGzB,KAAK;8BAGC,IAAI;;IASrB,kBAAkB,CAAC,CAAc;QAC/B,MAAM,IAAI,GAAG,CAAC,CAAC,MAAM,CAAC;QACtB,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAClB,KAAK,SAAS,CAAC,KAAK;gBAClB,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC,MAAM,EAAE,CAAC;oBACxF,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;gBACvB,CAAC;gBACD,MAAM;QACV,CAAC;IACH,CAAC;IAED,yBAAyB;IAEzB,KAAK,CAAC,SAAS;QACb,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAClB,KAAK,SAAS,CAAC,QAAQ,CAAC;YACxB,KAAK,SAAS,CAAC,KAAK;gBAClB,OAAO,IAAI,CAAC,OAAO,CAAC;YACtB;gBACE,OAAO,CAAC,IAAI,CAAC,sEAAsE,CAAC,CAAC;gBAErF,OAAO,KAAK,CAAC;QACjB,CAAC;IACH,CAAC;IAMO,eAAe,CAAC,KAAa;QACnC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,IAAI,CAAC,eAAe,EAAE,CAAC;QACzB,CAAC;QAED,IAAI,QAAuB,CAAC;QAC5B,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,CAAC,QAAQ,EAAE,CAAC;YACrC,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;QAC1C,CAAC;aAAM,CAAC;YACN,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QACvC,CAAC;QACD,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAC,KAAK,EAAE,QAAQ,EAAC,CAAC,CAAC;QAEzC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACzB,IAAI,CAAC,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE;YAC3B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;QAC5C,CAAC,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IACzB,CAAC;IAMO,eAAe;QACrB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACrB,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;IAC1B,CAAC;IAMO,cAAc,CAAC,KAAa,EAAE,QAAuB;QAC3D,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QACtB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;YACnB,KAAK,EAAE,KAAK;YACZ,QAAQ,EAAE,QAAQ;SACnB,CAAC,CAAC;IACL,CAAC;IAMO,cAAc,CAAC,OAAgB;QACrC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;YACnB,EAAE,EAAE,IAAI,CAAC,MAAM;YACf,OAAO,EAAE,OAAO;YAChB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,QAAQ,EAAE,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC;SACpC,CAAC,CAAC;IACL,CAAC;IAMO,cAAc;QACpB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAC,EAAE,EAAE,IAAI,CAAC,MAAM,EAAC,CAAC,CAAC;IAC1C,CAAC;IAMO,aAAa;QACnB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAC,EAAE,EAAE,IAAI,CAAC,MAAM,EAAC,CAAC,CAAC;IACzC,CAAC;IAEO,WAAW,CAAC,IAAY;QAC9B,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,IAAI,CAAqB,CAAC;QAEvE,OAAO,KAAK,CAAC,QAAQ,CAAC;IACxB,CAAC;IAED,sCAAsC;IAE9B,iBAAiB;QACvB,OAAO;YACL,EAAE,EAAE,IAAI,CAAC,MAAM;YACf,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,WAAW,EAAE,IAAI,CAAC,WAAW;YAC7B,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,KAAK,EAAE,IAAI,CAAC,SAAS;YACrB,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,KAAK,EAAE;gBACL,CAAC,SAAS,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM;gBACvC,MAAM,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK;aACrB;YACD,YAAY,EAAE,IAAI,CAAC,YAAY;YAC/B,OAAO,EAAE,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,eAAe,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC;SACvF,CAAC;IACJ,CAAC;IAEO,mBAAmB,CAAC,IAAe;QACzC,IAAI,IAAI,IAAI,SAAS,CAAC,MAAM,EAAE,CAAC;YAC7B,OAAO;QACT,CAAC;QAED,OAAO;YACL,GAAG,EAAE,IAAI,CAAC,GAAG;YACb,GAAG,EAAE,IAAI,CAAC,GAAG;YACb,IAAI,EAAE,IAAI,CAAC,IAAI;SAChB,CAAC;IACJ,CAAC;IAEO,mBAAmB,CAAC,IAAe;QACzC,IACE,IAAI,IAAI,SAAS,CAAC,QAAQ;YAC1B,IAAI,IAAI,SAAS,CAAC,IAAI;YACtB,IAAI,IAAI,SAAS,CAAC,GAAG;YACrB,IAAI,IAAI,SAAS,CAAC,MAAM;YACxB,IAAI,IAAI,SAAS,CAAC,GAAG;YACrB,IAAI,IAAI,SAAS,CAAC,KAAK,EACvB,CAAC;YACD,OAAO;QACT,CAAC;QAED,OAAO;YACL,OAAO,EAAE,IAAI,CAAC,OAAO;SACtB,CAAC;IACJ,CAAC;IAEO,gBAAgB;QACtB,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5C,CAAC;IAEO,iBAAiB;QACvB,MAAM,QAAQ,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAC,eAAe,EAAE,IAAI,CAAC,YAAY,EAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAC/E,MAAM,QAAQ,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAC,eAAe,EAAE,IAAI,CAAC,YAAY,EAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAC/E,MAAM,YAAY,GAAG,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAC,mBAAmB,EAAE,IAAI,CAAC,gBAAgB,EAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAC/F,MAAM,gBAAgB,GAAG,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAC,uBAAuB,EAAE,IAAI,CAAC,oBAAoB,EAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAE/G,mEACK,QAAQ,GACR,QAAQ,GACR,YAAY,GACZ,gBAAgB,EACnB;IACJ,CAAC;IAEO,sBAAsB;QAC5B,OAAO;YACL,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE;YACpC,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE;SACnC,CAAC;IACJ,CAAC;IAEO,eAAe,CAAC,OAAkB,SAAS,CAAC,IAAI;QACtD,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAC,YAAY,EAAE,IAAI,CAAC,SAAS,EAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QACvE,MAAM,IAAI,yGACL,IAAI,CAAC,iBAAiB,EAAE,GACxB,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,GAC9B,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,GAC9B,SAAS,GACT,IAAI,CAAC,gBAAgB,EAAE,GACvB,IAAI,CAAC,iBAAiB,EAAE,GACxB,IAAI,CAAC,sBAAsB,EAAE,CACjC,CAAC;QACF,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,KAAK,SAAS,CAAC,QAAQ,EAAE,CAAC;YAC7C,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,EAAC,UAAU,EAAE,IAAI,EAAC,CAAC,CAAC;QAChD,CAAC;QACD,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,IAAI,SAAS,CAAC,MAAM,EAAE,CAAC;YAClD,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,EAAC,gBAAgB,EAAE,IAAI,EAAC,CAAC,CAAC;QACtD,CAAC;QAED,OAAO,CACL,WAAK,KAAK,EAAC,cAAc;YACtB,IAAI,CAAC,WAAW,EAAE;YACnB;gBACE,2BACE,IAAI,EAAE,IAAI,KAAK,SAAS,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,IAC7E,IAAI,IACR,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC,IACjC;gBACD,IAAI,CAAC,WAAW,EAAE,CACf;YACL,IAAI,CAAC,aAAa,EAAE,CACjB,CACP,CAAC;IACJ,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YAChB,OAAO;QACT,CAAC;QAED,OAAO,CACL,aACE,KAAK,EAAC,uBAAuB,EAC7B,EAAE,EAAE,GAAG,IAAI,CAAC,MAAM,QAAQ,EAC1B,OAAO,EAAE,IAAI,CAAC,MAAM,IAEnB,IAAI,CAAC,KAAK,CACL,CACT,CAAC;IACJ,CAAC;IAEO,WAAW;QACjB,OAAO,CACL,YAAM,KAAK,EAAC,eAAe;YACxB,IAAI,CAAC,eAAe,EAAE;YACtB,IAAI,CAAC,UAAU,EAAE,CACb,CACR,CAAC;IACJ,CAAC;IAEO,UAAU;QAChB,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,CAAC,QAAQ,EAAE,CAAC;YACrC,OAAO,IAAI,CAAC,sBAAsB,EAAE,CAAC;QACvC,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACf,OAAO;QACT,CAAC;QAED,OAAO,CACL,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,wBAAwB,EAC9B,QAAQ,EAAE,CAAC,CAAC,iBACA,MAAM;YAElB,cACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,IAAI,GAChB,CACK,CACV,CAAC;IACJ,CAAC;IAEO,eAAe;QACrB,IAAI,MAAM,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,IAAI,SAAS,CAAC,MAAM,EAAE,CAAC;YACzG,MAAM,GAAG,IAAI,CAAC;QAChB,CAAC;QAED,OAAO,CACL,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,0BAA0B,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,gBAC9C,kCAAkC,EAC7C,OAAO,EAAE,GAAG,EAAE;gBACZ,IAAI,CAAC,QAAQ,CAAC,KAAK,GAAG,EAAE,CAAC;gBACzB,IAAI,CAAC,eAAe,CAAC,EAAE,CAAC,CAAC;YAC3B,CAAC;YAED,cACE,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,IAAI,CAAC,IAAI,GAChB,CACK,CACV,CAAC;IACJ,CAAC;IAEO,sBAAsB;QAC5B,OAAO,CACL,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,kCAAkC,EACxC,QAAQ,EAAE,IAAI,CAAC,QAAQ,gBACX,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,mBAAmB,EACzE,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC;YAE3D,cACE,IAAI,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,iBAAiB,EAC7D,KAAK,EAAE,IAAI,CAAC,IAAI,GAChB,CACK,CACV,CAAC;IACJ,CAAC;IAEO,aAAa;QACnB,IAAI,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,KAAK,EAAE,CAAC;YACpC,OAAO;QACT,CAAC;QAED,OAAO,CACL,uBACE,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAE,IAAI,CAAC,OAAkB,EAC9E,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,IAAI,GAChB,CACH,CAAC;IACJ,CAAC;IAED,oCAAoC;IAEpC,oBAAoB;IAEZ,cAAc;QACpB,MAAM,UAAU,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAC5C,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAC,YAAY,EAAE,IAAI,CAAC,SAAS,EAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAEvE,OAAO,CACL,WAAK,KAAK,EAAC,cAAc;YACtB,IAAI,CAAC,WAAW,EAAE;YACnB,WACE,KAAK,kCACC,UAAU,CAAC,KAAiC,KAChD,kBAAkB,EAAE,IAAI,EACxB,UAAU,EAAE,UAAU,CAAC,QAAmB;gBAG5C,gCACM,UAAU,EACV,SAAS,EACT,IAAI,CAAC,gBAAgB,EAAE,EACjB,CACR;YACL,IAAI,CAAC,aAAa,EAAE,CACjB,CACP,CAAC;IACJ,CAAC;IAED,kBAAkB;IAEV,WAAW,CAAC,EAAS;QAC3B,IAAI,CAAC,OAAO,GAAI,EAAE,CAAC,MAA2B,CAAC,OAAO,CAAC;QACvD,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACpC,CAAC;IAED,oBAAoB;IACZ,cAAc;QACpB,OAAO,CACL,WAAK,KAAK,EAAC,kBAAkB;YAC3B,2BACE,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EACrC,KAAK,EAAE,IAAI,CAAC,KAAK,IACb,IAAI,CAAC,gBAAgB,EAAE,EACvB,IAAI,CAAC,sBAAsB,EAAE,EACjC;YAEF,aACE,OAAO,EAAE,IAAI,CAAC,MAAM,EACpB,KAAK,EAAE;oBACL,gBAAgB,EAAE,IAAI;oBACtB,OAAO,EAAE,IAAI,CAAC,aAAa,KAAK,aAAa,CAAC,KAAK;oBACnD,QAAQ,EAAE,IAAI,CAAC,aAAa,KAAK,aAAa,CAAC,IAAI;iBACpD;gBAED,cACE,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,UAAU,iBACxC,MAAM,EAClB,KAAK,EAAE,IAAI,CAAC,IAAI,GAChB;gBACD,IAAI,CAAC,KAAK,IAAI,YAAM,SAAS,EAAE,IAAI,CAAC,KAAK,GAAS,CAC7C,CACJ,CACP,CAAC;IACJ,CAAC;IAED,kBAAkB;IAElB,iBAAiB;IACT,WAAW;QACjB,OAAO,CACL,WAAK,KAAK,EAAC,eAAe;YACxB,2BACE,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EACrC,KAAK,EAAE,IAAI,CAAC,KAAK,IACb,IAAI,CAAC,gBAAgB,EAAE,EACvB,IAAI,CAAC,sBAAsB,EAAE,EACjC;YAEF,aACE,OAAO,EAAE,IAAI,CAAC,MAAM,EACpB,KAAK,EAAE;oBACL,aAAa,EAAE,IAAI;oBACnB,OAAO,EAAE,IAAI,CAAC,aAAa,KAAK,aAAa,CAAC,KAAK;oBACnD,QAAQ,EAAE,IAAI,CAAC,aAAa,KAAK,aAAa,CAAC,IAAI;iBACpD;gBAED,cACE,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,cAAc,iBAChD,MAAM,EAClB,KAAK,EAAE,IAAI,CAAC,IAAI,GAChB;gBACD,IAAI,CAAC,KAAK,IAAI,YAAM,SAAS,EAAE,IAAI,CAAC,KAAK,GAAI,CACxC,CACJ,CACP,CAAC;IACJ,CAAC;IACD,eAAe;IAEf,MAAM;QACJ,IAAI,KAAK,CAAC;QACV,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAClB,KAAK,SAAS,CAAC,QAAQ;gBACrB,KAAK,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;gBAC9B,MAAM;YACR,KAAK,SAAS,CAAC,QAAQ;gBACrB,KAAK,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;gBAC9B,MAAM;YACR,KAAK,SAAS,CAAC,KAAK;gBAClB,KAAK,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;gBAC3B,MAAM;YACR;gBACE,KAAK,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC5C,CAAC;QAED,OAAO,EAAC,IAAI,uDAAE,KAAK,CAAQ,CAAC;IAC9B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Prop, State, h, Method, Event, EventEmitter, Element, Listen} from \"@stencil/core\";\nimport {Host, JSXBase} from \"@stencil/core/internal\";\nimport {InputType, LabelPosition, InputStatus, ControlSize} from \"../../../beans\";\nimport {boolean, randomId} from \"../../../utils/utils\";\n\n@Component({\n  tag: \"z-input\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZInput {\n  @Element() hostElement: HTMLZInputElement;\n\n  /** the id of the input element */\n  @Prop()\n  htmlid = `id-${randomId()}`;\n\n  /** input types */\n  @Prop()\n  type: InputType;\n\n  /** the input name */\n  @Prop()\n  name?: string;\n\n  /** the input label */\n  @Prop()\n  label?: string;\n\n  /** the input aria-label */\n  @Prop()\n  ariaLabel = \"\";\n\n  /** the input aria-expaded (optional): available for text, password, number, email */\n  @Prop()\n  ariaExpanded?: string;\n\n  /** the input aria-controls (optional): available for text, password, number, email */\n  @Prop()\n  ariaControls?: string;\n\n  /** the input aria-autocomplete (optional): available for text, password, number, email */\n  @Prop()\n  ariaAutocomplete?: string;\n\n  /** the input aria-activedescendant (optional): available for text, password, number, email */\n  @Prop()\n  ariaActivedescendant?: string;\n\n  /** the input value */\n  @Prop({mutable: true})\n  value?: string;\n\n  /** the input is disabled */\n  @Prop({reflect: true})\n  disabled?: boolean = false;\n\n  /** the input is readonly */\n  @Prop()\n  readonly?: boolean = false;\n\n  /** the input is required (optional): available for text, password, number, email, textarea, checkbox */\n  @Prop()\n  required?: boolean = false;\n\n  /** checked: available for checkbox, radio */\n  @Prop({mutable: true})\n  checked?: boolean = false;\n\n  /** the input placeholder (optional) */\n  @Prop()\n  placeholder?: string;\n\n  /** the input html title (optional) */\n  @Prop()\n  htmltitle?: string;\n\n  /** the input status (optional): available for text, password, number, email, textarea */\n  @Prop()\n  status?: InputStatus;\n\n  /** input helper message (optional): available for text, password, number, email, textarea - if set to `false` message won't be displayed */\n  @Prop()\n  message?: string | boolean = true;\n\n  /** the input label position: available for checkbox, radio */\n  @Prop()\n  labelPosition?: LabelPosition = LabelPosition.RIGHT;\n\n  /** the input has autocomplete option (optional): available for text, password, number, email */\n  @Prop()\n  autocomplete?: string;\n\n  /** the input role (optional) */\n  @Prop()\n  role?: string;\n\n  /** render clear icon when typing (optional): available for text */\n  @Prop()\n  hasclearicon?: boolean = true;\n\n  /** render icon (optional): available for text */\n  @Prop()\n  icon?: string;\n\n  /** min number value (optional): available for number */\n  @Prop()\n  min?: number;\n\n  /** Min length value (optional): available for text */\n  @Prop()\n  minlength?: number;\n\n  /** max number value (optional): available for number */\n  @Prop()\n  max?: number;\n\n  /** Max length value (optional): available for text */\n  @Prop()\n  maxlength?: number;\n\n  /** step number value (optional): available for number */\n  @Prop()\n  step?: number;\n\n  /** pattern value (optional): available for tel, text, search, url, email, password*/\n  @Prop()\n  pattern?: string;\n\n  /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */\n  @Prop({reflect: true})\n  size?: ControlSize = ControlSize.BIG;\n\n  @State()\n  isTyping = false;\n\n  @State()\n  passwordHidden = true;\n\n  private timer;\n\n  private typingtimeout = 300;\n\n  private inputRef: HTMLInputElement;\n\n  @Listen(\"inputCheck\", {target: \"document\"})\n  inputCheckListener(e: CustomEvent): void {\n    const data = e.detail;\n    switch (this.type) {\n      case InputType.RADIO:\n        if (data.type === InputType.RADIO && data.name === this.name && data.id !== this.htmlid) {\n          this.checked = false;\n        }\n        break;\n    }\n  }\n\n  /** get checked status */\n  @Method()\n  async isChecked(): Promise<boolean> {\n    switch (this.type) {\n      case InputType.CHECKBOX:\n      case InputType.RADIO:\n        return this.checked;\n      default:\n        console.warn(\"`isChecked` method is only available for type `checkbox` and `radio`\");\n\n        return false;\n    }\n  }\n\n  /** Emitted on input value change, returns value, validity */\n  @Event()\n  inputChange: EventEmitter;\n\n  private emitInputChange(value: string): void {\n    if (!this.isTyping) {\n      this.emitStartTyping();\n    }\n\n    let validity: ValidityState;\n    if (this.type === InputType.TEXTAREA) {\n      validity = this.getValidity(\"textarea\");\n    } else {\n      validity = this.getValidity(\"input\");\n    }\n    this.value = value;\n    this.inputChange.emit({value, validity});\n\n    clearTimeout(this.timer);\n    this.timer = setTimeout(() => {\n      this.emitStopTyping(this.value, validity);\n    }, this.typingtimeout);\n  }\n\n  /** Emitted when user starts typing */\n  @Event()\n  startTyping: EventEmitter;\n\n  private emitStartTyping(): void {\n    this.isTyping = true;\n    this.startTyping.emit();\n  }\n\n  /** Emitted when user stops typing, returns value, validity */\n  @Event()\n  stopTyping: EventEmitter;\n\n  private emitStopTyping(value: string, validity: ValidityState): void {\n    this.isTyping = false;\n    this.stopTyping.emit({\n      value: value,\n      validity: validity,\n    });\n  }\n\n  /** Emitted on checkbox check/uncheck, returns id, checked, type, name, value, validity */\n  @Event()\n  inputCheck: EventEmitter;\n\n  private emitInputCheck(checked: boolean): void {\n    this.inputCheck.emit({\n      id: this.htmlid,\n      checked: checked,\n      type: this.type,\n      name: this.name,\n      value: this.value,\n      validity: this.getValidity(\"input\"),\n    });\n  }\n\n  /** Emitted on input focus */\n  @Event()\n  inputFocus: EventEmitter;\n\n  private emitInputFocus(): void {\n    this.inputFocus.emit({id: this.htmlid});\n  }\n\n  /** Emitted on input blur */\n  @Event()\n  inputBlur: EventEmitter;\n\n  private emitInputBlur(): void {\n    this.inputBlur.emit({id: this.htmlid});\n  }\n\n  private getValidity(type: string): ValidityState {\n    const input = this.hostElement.querySelector(type) as HTMLInputElement;\n\n    return input.validity;\n  }\n\n  /* START text/password/email/number */\n\n  private getTextAttributes(): JSXBase.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement> {\n    return {\n      id: this.htmlid,\n      name: this.name,\n      placeholder: this.placeholder,\n      value: this.value,\n      disabled: this.disabled,\n      readonly: this.readonly,\n      required: this.required,\n      title: this.htmltitle,\n      minlength: this.minlength,\n      maxlength: this.maxlength,\n      class: {\n        [`input-${this.status}`]: !!this.status,\n        filled: !!this.value,\n      },\n      autocomplete: this.autocomplete,\n      onInput: (e: InputEvent) => this.emitInputChange((e.target as HTMLInputElement).value),\n    };\n  }\n\n  private getNumberAttributes(type: InputType): JSXBase.InputHTMLAttributes<HTMLInputElement> {\n    if (type != InputType.NUMBER) {\n      return;\n    }\n\n    return {\n      min: this.min,\n      max: this.max,\n      step: this.step,\n    };\n  }\n\n  private getPatternAttribute(type: InputType): JSXBase.InputHTMLAttributes<HTMLInputElement> {\n    if (\n      type != InputType.PASSWORD &&\n      type != InputType.TEXT &&\n      type != InputType.TEL &&\n      type != InputType.SEARCH &&\n      type != InputType.URL &&\n      type != InputType.EMAIL\n    ) {\n      return;\n    }\n\n    return {\n      pattern: this.pattern,\n    };\n  }\n\n  private getRoleAttribute(): JSXBase.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement> {\n    return this.role ? {role: this.role} : {};\n  }\n\n  private getAriaAttrubutes(): Record<string, unknown> {\n    const expanded = this.ariaExpanded ? {\"aria-expanded\": this.ariaExpanded} : {};\n    const controls = this.ariaControls ? {\"aria-controls\": this.ariaControls} : {};\n    const autocomplete = this.ariaAutocomplete ? {\"aria-autocomplete\": this.ariaAutocomplete} : {};\n    const activedescendant = this.ariaActivedescendant ? {\"aria-activedescendant\": this.ariaActivedescendant} : {};\n\n    return {\n      ...expanded,\n      ...controls,\n      ...autocomplete,\n      ...activedescendant,\n    };\n  }\n\n  private getFocusBlurAttributes(): JSXBase.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement> {\n    return {\n      onFocus: () => this.emitInputFocus(),\n      onBlur: () => this.emitInputBlur(),\n    };\n  }\n\n  private renderInputText(type: InputType = InputType.TEXT): HTMLDivElement {\n    const ariaLabel = this.ariaLabel ? {\"aria-label\": this.ariaLabel} : {};\n    const attr = {\n      ...this.getTextAttributes(),\n      ...this.getNumberAttributes(type),\n      ...this.getPatternAttribute(type),\n      ...ariaLabel,\n      ...this.getRoleAttribute(),\n      ...this.getAriaAttrubutes(),\n      ...this.getFocusBlurAttributes(),\n    };\n    if (this.icon || type === InputType.PASSWORD) {\n      Object.assign(attr.class, {\"has-icon\": true});\n    }\n    if (this.hasclearicon && type != InputType.NUMBER) {\n      Object.assign(attr.class, {\"has-clear-icon\": true});\n    }\n\n    return (\n      <div class=\"text-wrapper\">\n        {this.renderLabel()}\n        <div>\n          <input\n            type={type === InputType.PASSWORD && !this.passwordHidden ? InputType.TEXT : type}\n            {...attr}\n            ref={(el) => (this.inputRef = el)}\n          />\n          {this.renderIcons()}\n        </div>\n        {this.renderMessage()}\n      </div>\n    );\n  }\n\n  private renderLabel(): HTMLLabelElement {\n    if (!this.label) {\n      return;\n    }\n\n    return (\n      <label\n        class=\"input-label body-5-sb\"\n        id={`${this.htmlid}_label`}\n        htmlFor={this.htmlid}\n      >\n        {this.label}\n      </label>\n    );\n  }\n\n  private renderIcons(): HTMLSpanElement {\n    return (\n      <span class=\"icons-wrapper\">\n        {this.renderResetIcon()}\n        {this.renderIcon()}\n      </span>\n    );\n  }\n\n  private renderIcon(): HTMLButtonElement {\n    if (this.type === InputType.PASSWORD) {\n      return this.renderShowHidePassword();\n    }\n\n    if (!this.icon) {\n      return;\n    }\n\n    return (\n      <button\n        type=\"button\"\n        class=\"icon-button input-icon\"\n        tabIndex={-1}\n        aria-hidden=\"true\"\n      >\n        <z-icon\n          name={this.icon}\n          class={this.size}\n        />\n      </button>\n    );\n  }\n\n  private renderResetIcon(): HTMLButtonElement {\n    let hidden = false;\n    if (!this.hasclearicon || !this.value || this.disabled || this.readonly || this.type == InputType.NUMBER) {\n      hidden = true;\n    }\n\n    return (\n      <button\n        type=\"button\"\n        class={`icon-button reset-icon ${hidden ? \"hidden\" : \"\"}`}\n        aria-label=\"cancella il contenuto dell'input\"\n        onClick={() => {\n          this.inputRef.value = \"\";\n          this.emitInputChange(\"\");\n        }}\n      >\n        <z-icon\n          name=\"multiply\"\n          class={this.size}\n        />\n      </button>\n    );\n  }\n\n  private renderShowHidePassword(): HTMLButtonElement {\n    return (\n      <button\n        type=\"button\"\n        class=\"icon-button toggle-password-icon\"\n        disabled={this.disabled}\n        aria-label={this.passwordHidden ? \"mostra password\" : \"nascondi password\"}\n        onClick={() => (this.passwordHidden = !this.passwordHidden)}\n      >\n        <z-icon\n          name={this.passwordHidden ? \"view-filled\" : \"view-off-filled\"}\n          class={this.size}\n        />\n      </button>\n    );\n  }\n\n  private renderMessage(): HTMLZInputMessageElement {\n    if (boolean(this.message) === false) {\n      return;\n    }\n\n    return (\n      <z-input-message\n        message={boolean(this.message) === true ? undefined : (this.message as string)}\n        status={this.status}\n        class={this.size}\n      />\n    );\n  }\n\n  /* END text/password/email/number */\n\n  /* START textarea */\n\n  private renderTextarea(): HTMLDivElement {\n    const attributes = this.getTextAttributes();\n    const ariaLabel = this.ariaLabel ? {\"aria-label\": this.ariaLabel} : {};\n\n    return (\n      <div class=\"text-wrapper\">\n        {this.renderLabel()}\n        <div\n          class={{\n            ...(attributes.class as Record<string, boolean>),\n            \"textarea-wrapper\": true,\n            \"readonly\": attributes.readonly as boolean,\n          }}\n        >\n          <textarea\n            {...attributes}\n            {...ariaLabel}\n            {...this.getRoleAttribute()}\n          ></textarea>\n        </div>\n        {this.renderMessage()}\n      </div>\n    );\n  }\n\n  /* END textarea */\n\n  private handleCheck(ev: Event): void {\n    this.checked = (ev.target as HTMLInputElement).checked;\n    this.emitInputCheck(this.checked);\n  }\n\n  /* START checkbox */\n  private renderCheckbox(): HTMLDivElement {\n    return (\n      <div class=\"checkbox-wrapper\">\n        <input\n          id={this.htmlid}\n          type=\"checkbox\"\n          name={this.name}\n          checked={this.checked}\n          disabled={this.disabled}\n          readonly={this.readonly}\n          required={this.required}\n          onChange={this.handleCheck.bind(this)}\n          value={this.value}\n          {...this.getRoleAttribute()}\n          {...this.getFocusBlurAttributes()}\n        />\n\n        <label\n          htmlFor={this.htmlid}\n          class={{\n            \"checkbox-label\": true,\n            \"after\": this.labelPosition === LabelPosition.RIGHT,\n            \"before\": this.labelPosition === LabelPosition.LEFT,\n          }}\n        >\n          <z-icon\n            name={this.checked ? \"checkbox-checked\" : \"checkbox\"}\n            aria-hidden=\"true\"\n            class={this.size}\n          />\n          {this.label && <span innerHTML={this.label}></span>}\n        </label>\n      </div>\n    );\n  }\n\n  /* END checkbox */\n\n  /* START radio */\n  private renderRadio(): HTMLDivElement {\n    return (\n      <div class=\"radio-wrapper\">\n        <input\n          id={this.htmlid}\n          type=\"radio\"\n          name={this.name}\n          checked={this.checked}\n          disabled={this.disabled}\n          readonly={this.readonly}\n          onChange={this.handleCheck.bind(this)}\n          value={this.value}\n          {...this.getRoleAttribute()}\n          {...this.getFocusBlurAttributes()}\n        />\n\n        <label\n          htmlFor={this.htmlid}\n          class={{\n            \"radio-label\": true,\n            \"after\": this.labelPosition === LabelPosition.RIGHT,\n            \"before\": this.labelPosition === LabelPosition.LEFT,\n          }}\n        >\n          <z-icon\n            name={this.checked ? \"radio-button-checked\" : \"radio-button\"}\n            aria-hidden=\"true\"\n            class={this.size}\n          />\n          {this.label && <span innerHTML={this.label} />}\n        </label>\n      </div>\n    );\n  }\n  /* END radio */\n\n  render(): HTMLInputElement | HTMLDivElement {\n    let input;\n    switch (this.type) {\n      case InputType.TEXTAREA:\n        input = this.renderTextarea();\n        break;\n      case InputType.CHECKBOX:\n        input = this.renderCheckbox();\n        break;\n      case InputType.RADIO:\n        input = this.renderRadio();\n        break;\n      default:\n        input = this.renderInputText(this.type);\n    }\n\n    return <Host>{input}</Host>;\n  }\n}\n"]}

package/dist/collection/components/list/z-list-element/index.js

@@ -35,6 +35,7 @@ export class ZListElement {
         this.listElementPosition = "0";
         this.listType = ListType.NONE;
         this.role = "listitem";
+        this.htmlTabindex = 0;
         this.showInnerContent = false;
         this.handleClick = this.handleClick.bind(this);
         this.handleKeyDown = this.handleKeyDown.bind(this);
@@ -114,7 +115,7 @@ export class ZListElement {
         }
     }
     render() {
-        return (h(Host, { key: 'b0dc00b8abad630739f30361dcb1abad5fa379e0', "aria-expanded": this.expandable ? this.showInnerContent : null, onClick: this.handleClick, onFocus: () => this.ariaDescendantFocus.emit(this.listElementId), onKeyDown: this.handleKeyDown, clickable: this.clickable && !this.disabled, tabIndex: "0" }, h("div", { key: '81f742ce528b757fb67feefc231ce78e7e76ba87', class: "container", style: { color: `var(--${this.color})` }, tabindex: "-1", id: `z-list-element-id-${this.listElementId}`, part: "list-item-container" }, h("div", { key: 'c2230431473ea5e8292b26c280c71a86d795a1de', class: "z-list-element-container" }, this.renderExpandableButton(), this.renderContent()), this.renderExpandedContent()), this.dividerType === ListDividerType.ELEMENT && (h("z-divider", { color: this.dividerColor, size: this.dividerSize }))));
+        return (h(Host, { key: 'fb33c5abf92ac7e89faea59b46358c847fd7efab', "aria-expanded": this.expandable ? this.showInnerContent : null, onClick: this.handleClick, onFocus: () => this.ariaDescendantFocus.emit(this.listElementId), onKeyDown: this.handleKeyDown, clickable: this.clickable && !this.disabled, tabIndex: this.htmlTabindex }, h("div", { key: '0bd49dca96fcb7ddfb8201ea0f3b6501b633bbbb', class: "container", style: { color: `var(--${this.color})` }, tabindex: "-1", id: `z-list-element-id-${this.listElementId}`, part: "list-item-container" }, h("div", { key: '5a548758092f2062823021a2c0ddd097f0296646', class: "z-list-element-container" }, this.renderExpandableButton(), this.renderContent()), this.renderExpandedContent()), this.dividerType === ListDividerType.ELEMENT && (h("z-divider", { color: this.dividerColor, size: this.dividerSize }))));
     }
     static get is() { return "z-list-element"; }
     static get encapsulation() { return "shadow"; }
@@ -416,6 +417,24 @@ export class ZListElement {
                 "attribute": "role",
                 "reflect": true,
                 "defaultValue": "\"listitem\""
+            },
+            "htmlTabindex": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | null",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "set tabindex to Host tag (optional). Defaults to 0."
+                },
+                "attribute": "html-tabindex",
+                "reflect": false,
+                "defaultValue": "0"
             }
         };
     }