npm - @zanichelli/albe-web-components - Versions diffs - 13.1.2 → 13.2.0-rc1 - Mend

@zanichelli/albe-web-components 13.1.2 → 13.2.0-rc1

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

Files changed (118) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../src/components/inputs/z-combobox/index.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAElD,OAAO,EAAC,SAAS,EAAC,MAAM,SAAS,CAAC;AAElC,QAAQ,CAAC,sBAAsB,EAAE,GAAG,EAAE;IACpC,EAAE,CAAC,8BAA8B,EAAE,KAAK,IAAI,EAAE;QAC5C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;YACvB,IAAI,EAAE,sCAAsC;SAC7C,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;KAW7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,oCAAoC,EAAE,KAAK,IAAI,EAAE;QAClD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;YACvB,IAAI,EAAE,sDAAsD;SAC7D,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;KAW7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4CAA4C,EAAE,KAAK,IAAI,EAAE;QAC1D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;YACvB,IAAI,EAAE,+EAA+E;SACtF,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;KAc7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,oEAAoE,EAAE,KAAK,IAAI,EAAE;QAClF,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;YACvB,IAAI,EAAE,uLAAuL;SAC9L,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;KAc7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,oCAAoC,EAAE,KAAK,IAAI,EAAE;QAClD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;YACvB,IAAI,EAAE,6EAA6E;SACpF,CAAC,CAAC;QACH,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,IAAI,CAAC;QAChC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;KAgB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2CAA2C,EAAE,KAAK,IAAI,EAAE;QACzD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;YACvB,IAAI,EAAE,oLAAoL;SAC3L,CAAC,CAAC;QACH,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,IAAI,CAAC;QAChC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;KAuB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,0CAA0C,EAAE,KAAK,IAAI,EAAE;QACxD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;YACvB,IAAI,EAAE,uPAAuP;SAC9P,CAAC,CAAC;QACH,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,IAAI,CAAC;QAChC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;KAwB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6DAA6D,EAAE,KAAK,IAAI,EAAE;QAC3E,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;YACvB,IAAI,EAAE,gRAAgR;SACvR,CAAC,CAAC;QACH,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,IAAI,CAAC;QAChC,IAAI,CAAC,YAAY,CAAC,WAAW,GAAG,OAAO,CAAC;QACxC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;KAwB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gGAAgG,EAAE,KAAK,IAAI,EAAE;QAC9G,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;YACvB,IAAI,EAAE,uPAAuP;SAC9P,CAAC,CAAC;QACH,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,IAAI,CAAC;QAChC,IAAI,CAAC,YAAY,CAAC,WAAW,GAAG,OAAO,CAAC;QACxC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;KAwB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iEAAiE,EAAE,KAAK,IAAI,EAAE;QAC/E,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;YACvB,IAAI,EAAE,uTAAuT;SAC9T,CAAC,CAAC;QACH,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,IAAI,CAAC;QAChC,IAAI,CAAC,YAAY,CAAC,WAAW,GAAG,OAAO,CAAC;QACxC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;KAsB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4CAA4C,EAAE,KAAK,IAAI,EAAE;QAC1D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;YACvB,IAAI,EAAE,qPAAqP;SAC5P,CAAC,CAAC;QACH,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,IAAI,CAAC;QAChC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;KA0B7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8CAA8C,EAAE,KAAK,IAAI,EAAE;QAC5D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;YACvB,IAAI,EAAE,oPAAoP;SAC3P,CAAC,CAAC;QACH,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,IAAI,CAAC;QAChC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;KA0B7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sDAAsD,EAAE,KAAK,IAAI,EAAE;QACpE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;YACvB,IAAI,EAAE,0MAA0M;SACjN,CAAC,CAAC;QACH,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,IAAI,CAAC;QAChC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;KAuB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gEAAgE,EAAE,KAAK,IAAI,EAAE;QAC9E,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;YACvB,IAAI,EAAE,2QAA2Q;SAClR,CAAC,CAAC;QACH,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,IAAI,CAAC;QAChC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;KA0B7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2EAA2E,EAAE,KAAK,IAAI,EAAE;QACzF,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;YACvB,IAAI,EAAE,2QAA2Q;SAClR,CAAC,CAAC;QACH,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,IAAI,CAAC;QAChC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;KA0B7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","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"]}
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 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='[]' 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 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-controls=\"combobox_list\" aria-expanded=\"true\"></span>\n <div aria-multiselectable=\"\" role=\"listbox\" id=\"combobox_list\" aria-owns=\"combo-checkbox-combobox-item_1 combo-checkbox-combobox-item_2\">\n <div>\n <ul role=\"none\">\n <z-list-element dividertype=\"element\" id=\"item_1\" 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-item_1\" innertabindex=\"0\" label=\"primo elemento\"></z-input>\n </z-list-element>\n <z-list-element dividertype=\"none\" id=\"item_2\" size=\"large\">\n <z-input role=\"option\" aria-selected=\"true\" type=\"checkbox\" class=\"combo-item-checkbox-input-combobox\" size=\"big\" htmlid=\"combo-checkbox-combobox-item_2\" innertabindex=\"-1\" 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\" size=\"big\" type=\"text\"></z-input>\n <div aria-multiselectable=\"\" role=\"listbox\" id=\"combobox_list\" aria-owns=\"combo-checkbox-combobox-item_1 combo-checkbox-combobox-item_2\">\n <div>\n <ul role=\"none\">\n <z-list-element dividertype=\"element\" id=\"item_1\" 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-item_1\" innertabindex=\"0\" label=\"primo elemento\"></z-input>\n </z-list-element>\n <z-list-element dividertype=\"none\" id=\"item_2\" size=\"large\">\n <z-input type=\"checkbox\" role=\"option\" aria-selected=\"true\" class=\"combo-item-checkbox-input-combobox\" size=\"big\" htmlid=\"combo-checkbox-combobox-item_2\" innertabindex=\"-1\" 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\" size=\"big\" type=\"text\" value=\"primo\"></z-input> \n <div aria-multiselectable=\"\" role=\"listbox\" id=\"combobox_list\" aria-owns=\"combo-checkbox-combobox-item_1 combo-checkbox-combobox-item_2\">\n <div class=\"search\">\n <ul role=\"none\">\n <z-list-element dividertype=\"none\" id=\"item_1\" 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-item_1\" innertabindex=\"0\" 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\" size=\"big\" type=\"text\" value=\"primo\"></z-input> \n <div aria-multiselectable=\"\" role=\"listbox\" id=\"combobox_list\" aria-owns=\"combo-checkbox-combobox-item_1 combo-checkbox-combobox-item_2\">\n <div class=\"search\">\n <ul role=\"none\">\n <z-list-element dividertype=\"none\" id=\"item_1\" size=\"large\">\n <z-input role=\"option\" aria-selected=\"false\" disabled=\"0\" class=\"combo-item-checkbox-input-combobox\" innertabindex=\"0\" type=\"checkbox\" size=\"big\" htmlid=\"combo-checkbox-combobox-item_1\" 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\" size=\"big\" type=\"text\" value=\"prova\"></z-input>\n <div aria-multiselectable=\"\" role=\"listbox\" id=\"combobox_list\" aria-owns=\"combo-checkbox-combobox-item_1 combo-checkbox-combobox-item_2\">\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-controls=\"combobox_list\" aria-expanded=\"true\"></span>\n <div aria-multiselectable=\"\" role=\"listbox\" id=\"combobox_list\" aria-owns=\"combo-checkbox-combobox-check-all combo-checkbox-combobox-item_1 combo-checkbox-combobox-item_2\">\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=\"item_1\" 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-item_1\" innertabindex=\"-1\" label=\"primo elemento\"></z-input>\n </z-list-element>\n <z-list-element dividertype=\"none\" id=\"item_2\" size=\"large\">\n <z-input role=\"option\" aria-selected=\"true\" type=\"checkbox\" class=\"combo-item-checkbox-input-combobox\" size=\"big\" htmlid=\"combo-checkbox-combobox-item_2\" innertabindex=\"-1\" 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-controls=\"combobox_list\" aria-expanded=\"true\"></span>\n <div aria-multiselectable=\"\" role=\"listbox\" id=\"combobox_list\" aria-owns=\"combo-checkbox-combobox-check-all combo-checkbox-combobox-item_1 combo-checkbox-combobox-item_2\">\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=\"item_1\" size=\"large\"> \n <z-input type=\"checkbox\" role=\"option\" aria-selected=\"true\" class=\"combo-item-checkbox-input-combobox\" size=\"big\" htmlid=\"combo-checkbox-combobox-item_1\" innertabindex=\"-1\" label=\"primo elemento\" checked></z-input>\n </z-list-element>\n <z-list-element dividertype=\"none\" id=\"item_2\" size=\"large\">\n <z-input type=\"checkbox\" role=\"option\" aria-selected=\"true\" class=\"combo-item-checkbox-input-combobox\" size=\"big\" htmlid=\"combo-checkbox-combobox-item_2\" innertabindex=\"-1\" 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-controls=\"combobox_list\" aria-expanded=\"true\"></span>\n <div aria-multiselectable=\"\" role=\"listbox\" id=\"combobox_list\" aria-owns=\"combo-checkbox-combobox-item_1 combo-checkbox-combobox-item_2\">\n <div>\n <ul role=\"none\">\n <z-list-element dividertype=\"element\" id=\"item_1\" 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-item_1\" innertabindex=\"0\" label=\"primo elemento\"></z-input>\n </z-list-element>\n <z-list-element dividertype=\"none\" id=\"item_2\" size=\"large\">\n <z-input type=\"checkbox\" role=\"option\" aria-selected=\"true\" class=\"combo-item-checkbox-input-combobox\" size=\"big\" htmlid=\"combo-checkbox-combobox-item_2\" innertabindex=\"-1\" 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-controls=\"combobox_list\" aria-expanded=\"true\"></span>\n <div aria-multiselectable=\"\" role=\"listbox\" id=\"combobox_list\" aria-owns=\"combo-checkbox-combobox-check-all combo-checkbox-combobox-item_1 combo-checkbox-combobox-item_2\"> \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=\"item_1\" size=\"large\"> \n <z-input type=\"checkbox\" role=\"option\" aria-selected=\"true\" size=\"big\" class=\"combo-item-checkbox-input-combobox\" htmlid=\"combo-checkbox-combobox-item_1\"innertabindex=\"-1\" label=\"primo elemento\" checked></z-input>\n </z-list-element>\n <z-list-element dividertype=\"none\" id=\"item_2\" size=\"large\"> \n <z-input type=\"checkbox\" role=\"option\" aria-selected=\"false\" size=\"big\" class=\"combo-item-checkbox-input-combobox\" htmlid=\"combo-checkbox-combobox-item_2\" innertabindex=\"-1\" 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-controls=\"combobox_list\" aria-expanded=\"true\"></span>\n <div aria-multiselectable=\"\" role=\"listbox\" id=\"combobox_list\" aria-owns=\"combo-checkbox-combobox-check-all combo-checkbox-combobox-item_1 combo-checkbox-combobox-item_2\">\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=\"item_1\" size=\"large\"> \n <z-input type=\"checkbox\" role=\"option\" aria-selected=\"true\" class=\"combo-item-checkbox-input-combobox\" size=\"big\" htmlid=\"combo-checkbox-combobox-item_1\" innertabindex=\"0\" label=\"primo elemento\" checked></z-input>\n </z-list-element>\n <z-list-element dividertype=\"none\" id=\"item_2\" size=\"large\"> \n <z-input type=\"checkbox\" role=\"option\" aria-selected=\"false\" class=\"combo-item-checkbox-input-combobox\" size=\"big\" htmlid=\"combo-checkbox-combobox-item_2\" innertabindex=\"-1\" 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 CHANGED Viewed

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

@@ -35,6 +35,7 @@ export class ZInput {
         this.step = undefined;
         this.pattern = undefined;
         this.size = ControlSize.BIG;
+        this.innerTabIndex = undefined;
         this.isTyping = false;
         this.passwordHidden = true;
     }
@@ -146,6 +147,9 @@ export class ZInput {
             pattern: this.pattern,
         };
     }
+    getTabIndexAttribute() {
+        return this.innerTabIndex ? { tabindex: this.innerTabIndex } : {};
+    }
     getRoleAttribute() {
         return this.role ? { role: this.role } : {};
     }
@@ -158,7 +162,7 @@ export class ZInput {
     }
     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.getTabIndexAttribute());
         if (this.icon || type === InputType.PASSWORD) {
             Object.assign(attr.class, { "has-icon": true });
         }
@@ -209,7 +213,7 @@ export class ZInput {
     renderTextarea() {
         const attributes = this.getTextAttributes();
         const ariaLabel = this.ariaLabel ? { "aria-label": this.ariaLabel } : {};
-        return (h("div", { class: "text-wrapper" }, this.renderLabel(), h("div", { class: Object.assign(Object.assign({}, attributes.class), { "textarea-wrapper": true, "readonly": attributes.readonly }) }, h("textarea", Object.assign({}, attributes, ariaLabel, this.getRoleAttribute()))), this.renderMessage()));
+        return (h("div", { class: "text-wrapper" }, this.renderLabel(), h("div", { class: Object.assign(Object.assign({}, attributes.class), { "textarea-wrapper": true, "readonly": attributes.readonly }) }, h("textarea", Object.assign({}, attributes, ariaLabel, this.getRoleAttribute(), this.getTabIndexAttribute()))), this.renderMessage()));
     }
     /* END textarea */
     handleCheck(ev) {
@@ -218,7 +222,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, onFocus: () => this.ariaDescendantFocus.emit(this.htmlid) }, this.getRoleAttribute(), this.getTabIndexAttribute())), h("label", { htmlFor: this.htmlid, class: {
                 "checkbox-label": true,
                 "after": this.labelPosition === LabelPosition.RIGHT,
                 "before": this.labelPosition === LabelPosition.LEFT,
@@ -227,7 +231,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, onFocus: () => this.ariaDescendantFocus.emit(this.htmlid) }, this.getRoleAttribute(), this.getTabIndexAttribute())), h("label", { htmlFor: this.htmlid, class: {
                 "radio-label": true,
                 "after": this.labelPosition === LabelPosition.RIGHT,
                 "before": this.labelPosition === LabelPosition.LEFT,
@@ -249,7 +253,7 @@ export class ZInput {
             default:
                 input = this.renderInputText(this.type);
         }
-        return h(Host, { key: '67a39cc20219fa02de2cca264a5d51428f4359f3' }, input);
+        return h(Host, { key: '091e41470049a180401735588b3d584b591a9a50' }, input);
     }
     static get is() { return "z-input"; }
     static get encapsulation() { return "scoped"; }
@@ -808,6 +812,23 @@ export class ZInput {
                 "attribute": "size",
                 "reflect": true,
                 "defaultValue": "ControlSize.BIG"
+            },
+            "innerTabIndex": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "set tabindex to input tag (optional). Defaults to native behaviour."
+                },
+                "attribute": "inner-tab-index",
+                "reflect": false
             }
         };
     }
@@ -878,6 +899,21 @@ export class ZInput {
                     "resolved": "any",
                     "references": {}
                 }
+            }, {
+                "method": "ariaDescendantFocus",
+                "name": "ariaDescendantFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "set parent aria-activedescendant on focus event, returns filterid"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
             }];
     }
     static get methods() {

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

	@@ -1 +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"]}
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 /* set tabindex to input tag (optional). Defaults to native behaviour. /\n @Prop()\n innerTabIndex?: number;\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 /* set parent aria-activedescendant on focus event, returns filterid /\n @Event({\n eventName: \"ariaDescendantFocus\",\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n ariaDescendantFocus: EventEmitter<string>;\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 getTabIndexAttribute(): JSXBase.InputHTMLAttributes<HTMLInputElement \| HTMLTextAreaElement> {\n return this.innerTabIndex ? {tabindex: this.innerTabIndex} : {};\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 ...this.getTabIndexAttribute(),\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 {...this.getTabIndexAttribute()}\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 onFocus={() => this.ariaDescendantFocus.emit(this.htmlid)}\n {...this.getRoleAttribute()}\n {...this.getTabIndexAttribute()}\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 onFocus={() => this.ariaDescendantFocus.emit(this.htmlid)}\n {...this.getRoleAttribute()}\n {...this.getTabIndexAttribute()}\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 CHANGED Viewed

@@ -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"
             }
         };
     }