@zanichelli/albe-web-components 13.2.0-rc1 → 13.3.0
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.
- package/CHANGELOG.md +17 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/web-components-library.cjs.js +1 -1
- package/dist/cjs/z-app-header_12.cjs.entry.js +16 -12
- package/dist/cjs/z-app-header_12.cjs.entry.js.map +1 -1
- package/dist/cjs/z-carousel.cjs.entry.js +3 -2
- package/dist/cjs/z-carousel.cjs.entry.js.map +1 -1
- package/dist/cjs/z-combobox.cjs.entry.js +38 -145
- package/dist/cjs/z-combobox.cjs.entry.js.map +1 -1
- package/dist/cjs/z-file-upload.cjs.entry.js +25 -14
- package/dist/cjs/z-file-upload.cjs.entry.js.map +1 -1
- package/dist/cjs/z-popover.cjs.entry.js +3 -3
- package/dist/cjs/z-popover.cjs.entry.js.map +1 -1
- package/dist/cjs/z-table.cjs.entry.js +3 -2
- package/dist/cjs/z-table.cjs.entry.js.map +1 -1
- package/dist/collection/components/file-upload/z-file-upload/index.js +63 -13
- package/dist/collection/components/file-upload/z-file-upload/index.js.map +1 -1
- package/dist/collection/components/file-upload/z-file-upload/styles.css +12 -0
- package/dist/collection/components/icons/icons.js +10 -0
- package/dist/collection/components/icons/icons.js.map +1 -1
- package/dist/collection/components/inputs/z-combobox/index.js +41 -149
- package/dist/collection/components/inputs/z-combobox/index.js.map +1 -1
- package/dist/collection/components/inputs/z-combobox/index.spec.js +155 -185
- package/dist/collection/components/inputs/z-combobox/index.spec.js.map +1 -1
- package/dist/collection/components/inputs/z-combobox/styles.css +10 -10
- package/dist/collection/components/inputs/z-input/index.js +5 -41
- package/dist/collection/components/inputs/z-input/index.js.map +1 -1
- package/dist/collection/components/list/z-list-element/index.js +1 -20
- package/dist/collection/components/list/z-list-element/index.js.map +1 -1
- package/dist/collection/components/table/z-table/index.js +3 -2
- package/dist/collection/components/table/z-table/index.js.map +1 -1
- package/dist/collection/components/z-carousel/index.js +3 -1
- package/dist/collection/components/z-carousel/index.js.map +1 -1
- package/dist/collection/components/z-carousel/styles.css +3 -0
- package/dist/collection/components/z-popover/index.js +4 -4
- package/dist/collection/components/z-popover/index.js.map +1 -1
- package/dist/components/icons.js +10 -0
- package/dist/components/icons.js.map +1 -1
- package/dist/components/index10.js +5 -11
- package/dist/components/index10.js.map +1 -1
- package/dist/components/index13.js +1 -3
- package/dist/components/index13.js.map +1 -1
- package/dist/components/index25.js +3 -3
- package/dist/components/index25.js.map +1 -1
- package/dist/components/z-carousel.js +3 -2
- package/dist/components/z-carousel.js.map +1 -1
- package/dist/components/z-combobox.js +49 -163
- package/dist/components/z-combobox.js.map +1 -1
- package/dist/components/z-file-upload.js +28 -15
- package/dist/components/z-file-upload.js.map +1 -1
- package/dist/components/z-table.js +3 -2
- package/dist/components/z-table.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/web-components-library.js +1 -1
- package/dist/esm/z-app-header_12.entry.js +16 -12
- package/dist/esm/z-app-header_12.entry.js.map +1 -1
- package/dist/esm/z-carousel.entry.js +3 -2
- package/dist/esm/z-carousel.entry.js.map +1 -1
- package/dist/esm/z-combobox.entry.js +40 -147
- package/dist/esm/z-combobox.entry.js.map +1 -1
- package/dist/esm/z-file-upload.entry.js +25 -14
- package/dist/esm/z-file-upload.entry.js.map +1 -1
- package/dist/esm/z-popover.entry.js +3 -3
- package/dist/esm/z-popover.entry.js.map +1 -1
- package/dist/esm/z-table.entry.js +3 -2
- package/dist/esm/z-table.entry.js.map +1 -1
- package/dist/types/components/file-upload/z-file-upload/index.d.ts +5 -0
- package/dist/types/components/icons/icons.d.ts +20 -0
- package/dist/types/components/inputs/z-combobox/index.d.ts +1 -14
- package/dist/types/components/inputs/z-input/index.d.ts +0 -5
- package/dist/types/components/list/z-list-element/index.d.ts +0 -2
- package/dist/types/components/z-carousel/index.d.ts +1 -0
- package/dist/types/components/z-popover/index.d.ts +1 -0
- package/dist/types/components.d.ts +18 -23
- package/dist/web-components-library/{p-158b6dda.entry.js → p-3796ca7c.entry.js} +2 -2
- package/dist/web-components-library/p-3796ca7c.entry.js.map +1 -0
- package/dist/web-components-library/p-9b52dea5.entry.js +2 -0
- package/dist/web-components-library/p-9b52dea5.entry.js.map +1 -0
- package/dist/web-components-library/p-aa0f32d7.entry.js +2 -0
- package/dist/web-components-library/p-aa0f32d7.entry.js.map +1 -0
- package/dist/web-components-library/p-ba8e67ee.entry.js +2 -0
- package/dist/web-components-library/p-ba8e67ee.entry.js.map +1 -0
- package/dist/web-components-library/p-ed1a5ee3.entry.js +2 -0
- package/dist/web-components-library/p-ed1a5ee3.entry.js.map +1 -0
- package/{www/build/p-2637ab23.entry.js → dist/web-components-library/p-f7607ce7.entry.js} +2 -2
- package/dist/web-components-library/p-f7607ce7.entry.js.map +1 -0
- package/dist/web-components-library/web-components-library.css +1 -1
- package/dist/web-components-library/web-components-library.esm.js +1 -1
- package/dist/web-components-library/web-components-library.esm.js.map +1 -1
- package/package.json +2 -2
- package/www/build/p-22cc270c.css +3 -0
- package/www/build/{p-158b6dda.entry.js → p-3796ca7c.entry.js} +2 -2
- package/www/build/p-3796ca7c.entry.js.map +1 -0
- package/www/build/p-9b52dea5.entry.js +2 -0
- package/www/build/p-9b52dea5.entry.js.map +1 -0
- package/www/build/p-aa0f32d7.entry.js +2 -0
- package/www/build/p-aa0f32d7.entry.js.map +1 -0
- package/www/build/p-ba8e67ee.entry.js +2 -0
- package/www/build/p-ba8e67ee.entry.js.map +1 -0
- package/www/build/p-ddd9a0ea.js +2 -0
- package/www/build/p-ed1a5ee3.entry.js +2 -0
- package/www/build/p-ed1a5ee3.entry.js.map +1 -0
- package/{dist/web-components-library/p-2637ab23.entry.js → www/build/p-f7607ce7.entry.js} +2 -2
- package/www/build/p-f7607ce7.entry.js.map +1 -0
- package/www/build/web-components-library.css +1 -1
- package/www/build/web-components-library.esm.js +1 -1
- package/www/build/web-components-library.esm.js.map +1 -1
- package/www/index.html +1 -1
- package/dist/web-components-library/p-158b6dda.entry.js.map +0 -1
- package/dist/web-components-library/p-2637ab23.entry.js.map +0 -1
- package/dist/web-components-library/p-2b2cb566.entry.js +0 -2
- package/dist/web-components-library/p-2b2cb566.entry.js.map +0 -1
- package/dist/web-components-library/p-2df884ef.entry.js +0 -2
- package/dist/web-components-library/p-2df884ef.entry.js.map +0 -1
- package/dist/web-components-library/p-5023f7d5.entry.js +0 -2
- package/dist/web-components-library/p-5023f7d5.entry.js.map +0 -1
- package/dist/web-components-library/p-93cb103f.entry.js +0 -2
- package/dist/web-components-library/p-93cb103f.entry.js.map +0 -1
- package/www/build/p-158b6dda.entry.js.map +0 -1
- package/www/build/p-2637ab23.entry.js.map +0 -1
- package/www/build/p-2b2cb566.entry.js +0 -2
- package/www/build/p-2b2cb566.entry.js.map +0 -1
- package/www/build/p-2df884ef.entry.js +0 -2
- package/www/build/p-2df884ef.entry.js.map +0 -1
- package/www/build/p-32cd9d9b.js +0 -2
- package/www/build/p-36aea196.css +0 -3
- package/www/build/p-5023f7d5.entry.js +0 -2
- package/www/build/p-5023f7d5.entry.js.map +0 -1
- package/www/build/p-93cb103f.entry.js +0 -2
- package/www/build/p-93cb103f.entry.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../src/components/inputs/z-combobox/index.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZCombobox} from \"./index\";\n\ndescribe(\"Suite test ZCombobox\", () => {\n it(\"Test render ZCombobox chiusa\", async () => {\n const page = await newSpecPage({\n components: [ZCombobox],\n html: `<z-combobox items='[]'></z-combobox>`,\n });\n expect(page.root).toEqualHtml(`\n <z-combobox items='[]'>\n <mock:shadow-root>\n <div data-action=\"combo-undefined\">\n <div 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"]}
|
|
1
|
+
{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../src/components/inputs/z-combobox/index.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZCombobox} from \"./index\";\n\ndescribe(\"Suite test ZCombobox\", () => {\n it(\"Test render ZCombobox chiusa\", async () => {\n const page = await newSpecPage({\n components: [ZCombobox],\n html: `<z-combobox items='[]'></z-combobox>`,\n });\n expect(page.root).toEqualHtml(`\n <z-combobox items='[]'>\n <mock:shadow-root>\n <div data-action=\"combo-undefined\">\n <div class=\"header\" role=\"button\" tabindex=\"0\">\n <p class=\"body-3\"><span></span></p>\n <z-icon class=\"big\" name=\"caret-down\" />\n </div>\n </div>\n </mock:shadow-root>\n </z-combobox>\n `);\n });\n\n it(\"Test render ZCombobox disabilitata\", async () => {\n const page = await newSpecPage({\n components: [ZCombobox],\n html: `<z-combobox items='[]' disabled='true'></z-combobox>`,\n });\n expect(page.root).toEqualHtml(`\n <z-combobox disabled='' items='[]'>\n <mock:shadow-root>\n <div class=\"disabled\" data-action=\"combo-undefined\">\n <div class=\"header\" role=\"button\" tabindex=\"0\">\n <p class=\"body-3\"><span></span></p>\n <z-icon class=\"big\" name=\"caret-down\" />\n </div>\n </div>\n </mock:shadow-root>\n </z-combobox>\n `);\n });\n\n it(\"Test render ZCombobox chiusa con attributi\", async () => {\n const page = await newSpecPage({\n components: [ZCombobox],\n html: `<z-combobox items='[]' inputid=\"combobox\" label=\"label\" isfixed></z-combobox>`,\n });\n expect(page.root).toEqualHtml(`\n <z-combobox items='[]' inputid=\"combobox\" label=\"label\" isfixed>\n <mock:shadow-root>\n <div class=\"fixed\" id=\"combobox\" data-action=\"combo-combobox\">\n <div class=\"header\" role=\"button\" tabindex=\"0\">\n <p class=\"body-3\">\n label\n <span></span>\n </p>\n <z-icon class=\"big\" name=\"caret-down\" />\n </div>\n </div>\n </mock:shadow-root>\n </z-combobox>\n `);\n });\n\n it(\"Test render ZCombobox chiusa con attributi ed elemento selezionato\", async () => {\n const page = await newSpecPage({\n components: [ZCombobox],\n html: `<z-combobox items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":false},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]' inputid=\"combobox\" label=\"label\"></z-combobox>`,\n });\n expect(page.root).toEqualHtml(`\n <z-combobox items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":false},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]' inputid=\"combobox\" label=\"label\">\n <mock:shadow-root>\n <div data-action=\"combo-combobox\" id=\"combobox\">\n <div class=\"header\" role=\"button\" tabindex=\"0\">\n <p class=\"body-3\">\n label\n <span>(1)</span>\n </p>\n <z-icon class=\"big\" name=\"caret-down\" />\n </div>\n </div>\n </mock:shadow-root>\n </z-combobox>\n `);\n });\n\n it(\"Test render ZCombobox aperta vuota\", async () => {\n const page = await newSpecPage({\n components: [ZCombobox],\n html: `<z-combobox items='[]' noresultslabel='non ci sono risultati'></z-combobox>`,\n });\n page.rootInstance.isopen = true;\n await page.waitForChanges();\n expect(page.root).toEqualHtml(`\n <z-combobox items='[]' noresultslabel='non ci sono risultati'>\n <mock:shadow-root>\n <div class=\"open\" data-action=\"combo-undefined\">\n <div class=\"header\" role=\"button\" tabindex=\"0\">\n <p class=\"body-3\"><span></span></p>\n <z-icon class=\"big\" name=\"caret-down\" ></z-icon>\n </div>\n <div class=\"open-combo-data\">\n <div tabindex=\"-1\">\n <ul></ul>\n </div>\n </div>\n </div>\n </mock:shadow-root>\n </z-combobox>\n `);\n });\n\n it(\"Test render ZCombobox aperta con elementi\", async () => {\n const page = await newSpecPage({\n components: [ZCombobox],\n html: `<z-combobox inputid=\"combo\" label=\"combo\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":false},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]'></z-combobox>`,\n });\n page.rootInstance.isopen = true;\n await page.waitForChanges();\n expect(page.root).toEqualHtml(`\n <z-combobox inputid=\"combo\" label=\"combo\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":false},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]'>\n <mock:shadow-root>\n <div class=\"open\" data-action=\"combo-combo\" id=\"combo\">\n <div class=\"header\" role=\"button\" tabindex=\"0\">\n <p class=\"body-3\">combo<span>(1)</span></p>\n <z-icon class=\"big\" name=\"caret-down\" />\n </div>\n <div class=\"open-combo-data\">\n <div tabindex=\"-1\">\n <ul>\n <z-myz-list-item class=\"big\" id=\"item_1\" listitemid=\"item_1\" action=\"combo-li-combo\" underlined=\"\">\n <z-input disabled=\"0\" type=\"checkbox\" size=\"big\" htmlid=\"combo-checkbox-combo-item_1\" label=\"primo elemento\"></z-input>\n </z-myz-list-item>\n <z-myz-list-item class=\"big\" id=\"item_2\" listitemid=\"item_2\" action=\"combo-li-combo\">\n <z-input type=\"checkbox\" size=\"big\" htmlid=\"combo-checkbox-combo-item_2\" label=\"secondo elemento\" checked></z-input>\n </z-myz-list-item>\n </ul>\n </div\n </div>\n </div>\n </mock:shadow-root>\n </z-combobox>\n `);\n });\n\n it(\"Test render ZCombobox aperta con ricerca\", async () => {\n const page = await newSpecPage({\n components: [ZCombobox],\n html: `<z-combobox inputid=\"combo\" label=\"combo\" hassearch=true searchlabel=\"cerca\" searchplaceholder=\"placeholder\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":false},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]'></z-combobox>`,\n });\n page.rootInstance.isopen = true;\n await page.waitForChanges();\n expect(page.root).toEqualHtml(`\n <z-combobox inputid=\"combo\" label=\"combo\" hassearch=true searchlabel=\"cerca\" searchplaceholder=\"placeholder\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":false},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]'>\n <mock:shadow-root>\n <div class=\"open\" data-action=\"combo-combo\" id=\"combo\">\n <div class=\"header\" role=\"button\" tabindex=\"0\">\n <p class=\"body-3\">combo<span>(1)</span></p>\n <z-icon class=\"big\" name=\"caret-down\" />\n </div>\n <div class=\"open-combo-data\">\n <z-input size=\"big\" htmlid=\"combo_search\" label=\"cerca\" placeholder=\"placeholder\" type=\"text\"></z-input>\n <div tabindex=\"-1\">\n <ul>\n <z-myz-list-item class=\"big\" id=\"item_1\" listitemid=\"item_1\" action=\"combo-li-combo\" underlined=\"\">\n <z-input disabled=\"0\" type=\"checkbox\" size=\"big\" htmlid=\"combo-checkbox-combo-item_1\" label=\"primo elemento\"></z-input>\n </z-myz-list-item>\n <z-myz-list-item class=\"big\" id=\"item_2\" listitemid=\"item_2\" action=\"combo-li-combo\">\n <z-input type=\"checkbox\" size=\"big\" htmlid=\"combo-checkbox-combo-item_2\" label=\"secondo elemento\" checked></z-input>\n </z-myz-list-item>\n </ul>\n </div>\n </div>\n </div>\n </mock:shadow-root>\n </z-combobox>\n `);\n });\n\n it(\"Test render ZCombobox aperta con ricerca attiva e risultati\", async () => {\n const page = await newSpecPage({\n components: [ZCombobox],\n html: `<z-combobox inputid=\"combo\" label=\"combo\" hassearch=true searchlabel=\"cerca\" searchplaceholder=\"placeholder\" closesearchtext=\"CHIUDI\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":false},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]'></z-combobox>`,\n });\n page.rootInstance.isopen = true;\n page.rootInstance.searchValue = \"primo\";\n await page.waitForChanges();\n expect(page.root).toEqualHtml(`\n <z-combobox inputid=\"combo\" label=\"combo\" hassearch=true searchlabel=\"cerca\" searchplaceholder=\"placeholder\" closesearchtext=\"CHIUDI\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":false},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]'>\n <mock:shadow-root>\n <div class=\"open\" data-action=\"combo-combo\" id=\"combo\">\n <div class=\"header\" role=\"button\" tabindex=\"0\">\n <p class=\"body-3\">combo<span>(1)</span></p>\n <z-icon class=\"big\" name=\"caret-down\" />\n </div>\n <div class=\"open-combo-data\">\n <z-input size=\"big\" htmlid=\"combo_search\" label=\"cerca\" placeholder=\"placeholder\" type=\"text\" value=\"primo\"></z-input>\n <div class=\"search\" tabindex=\"-1\">\n <ul>\n <z-myz-list-item class=\"big\" id=\"item_1\" listitemid=\"item_1\" action=\"combo-li-combo\">\n <z-input disabled=\"0\" type=\"checkbox\" size=\"big\" htmlid=\"combo-checkbox-combo-item_1\" label=\"<b>primo</b> elemento\"></z-input>\n </z-myz-list-item>\n </ul>\n <div>\n <a role=\"button\" tabindex=\"0\">CHIUDI</a>\n </div>\n </div>\n </div>\n </div>\n </mock:shadow-root>\n </z-combobox>\n `);\n });\n\n it(\"Test render ZCombobox aperta con ricerca attiva senza testo di chiusura della ricerca testuale\", async () => {\n const page = await newSpecPage({\n components: [ZCombobox],\n html: `<z-combobox inputid=\"combo\" label=\"combo\" hassearch=true searchlabel=\"cerca\" searchplaceholder=\"placeholder\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":false},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]'></z-combobox>`,\n });\n page.rootInstance.isopen = true;\n page.rootInstance.searchValue = \"primo\";\n await page.waitForChanges();\n expect(page.root).toEqualHtml(`\n <z-combobox inputid=\"combo\" label=\"combo\" hassearch=true searchlabel=\"cerca\" searchplaceholder=\"placeholder\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":false},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]'>\n <mock:shadow-root>\n <div class=\"open\" data-action=\"combo-combo\" id=\"combo\">\n <div class=\"header\" role=\"button\" tabindex=\"0\">\n <p class=\"body-3\">combo<span>(1)</span></p>\n <z-icon class=\"big\" name=\"caret-down\" />\n </div>\n <div class=\"open-combo-data\">\n <z-input size=\"big\" htmlid=\"combo_search\" label=\"cerca\" placeholder=\"placeholder\" type=\"text\" value=\"primo\"></z-input>\n <div class=\"search\" tabindex=\"-1\">\n <ul>\n <z-myz-list-item class=\"big\" id=\"item_1\" listitemid=\"item_1\" action=\"combo-li-combo\">\n <z-input disabled=\"0\" type=\"checkbox\" size=\"big\" htmlid=\"combo-checkbox-combo-item_1\" label=\"<b>primo</b> elemento\"></z-input>\n </z-myz-list-item>\n </ul>\n <div>\n <a role=\"button\" tabindex=\"0\">Chiudi</a>\n </div>\n </div>\n </div>\n </div>\n </mock:shadow-root>\n </z-combobox>\n `);\n });\n\n it(\"Test render ZCombobox aperta con ricerca attiva senza risultati\", async () => {\n const page = await newSpecPage({\n components: [ZCombobox],\n html: `<z-combobox inputid=\"combo\" label=\"combo\" hassearch=true searchlabel=\"cerca\" searchplaceholder=\"placeholder\" closesearchtext=\"CHIUDI\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":false},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]' noresultslabel='non ci sono risultati'></z-combobox>`,\n });\n page.rootInstance.isopen = true;\n page.rootInstance.searchValue = \"prova\";\n await page.waitForChanges();\n expect(page.root).toEqualHtml(`\n <z-combobox inputid=\"combo\" label=\"combo\" hassearch=true searchlabel=\"cerca\" searchplaceholder=\"placeholder\" closesearchtext=\"CHIUDI\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":false},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]' noresultslabel='non ci sono risultati'>\n <mock:shadow-root>\n <div class=\"open\" data-action=\"combo-combo\" id=\"combo\">\n <div class=\"header\" role=\"button\" tabindex=\"0\">\n <p class=\"body-3\">combo<span>(1)</span></p>\n <z-icon class=\"big\" name=\"caret-down\" />\n </div>\n <div class=\"open-combo-data\">\n <z-input size=\"big\" htmlid=\"combo_search\" label=\"cerca\" placeholder=\"placeholder\" type=\"text\" value=\"prova\"></z-input>\n <div class=\"search\" tabindex=\"-1\">\n <ul>\n <z-myz-list-item class=\"big\" id='no-results' text='non ci sono risultati' listitemid='no-results' icon='multiply-circle'></z-myz-list-item>\n </ul>\n <div>\n <a role=\"button\" tabindex=\"0\">CHIUDI</a>\n </div>\n </div>\n </div>\n </div>\n </mock:shadow-root>\n </z-combobox>\n `);\n });\n\n it(\"Test render ZCombobox aperta con check all\", async () => {\n const page = await newSpecPage({\n components: [ZCombobox],\n html: `<z-combobox inputid=\"combo\" label=\"combo\" hascheckall=\"true\" checkalltext=\"CHECK\" uncheckalltext=\"UNCHECK\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":false},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]'></z-combobox>`,\n });\n page.rootInstance.isopen = true;\n await page.waitForChanges();\n expect(page.root).toEqualHtml(`\n <z-combobox inputid=\"combo\" label=\"combo\" hascheckall=\"true\" checkalltext=\"CHECK\" uncheckalltext=\"UNCHECK\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":false},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]'>\n <mock:shadow-root>\n <div class=\"open\" data-action=\"combo-combo\" id=\"combo\">\n <div class=\"header\" role=\"button\" tabindex=\"0\">\n <p class=\"body-3\">combo<span>(1)</span></p>\n <z-icon class=\"big\" name=\"caret-down\" />\n </div>\n <div class=\"open-combo-data\">\n <div class=\"check-all-wrapper\">\n <z-input type=\"checkbox\" size=\"big\" htmlid=\"combo-checkbox-combo-check-all\" label=\"CHECK\" disabled=\"0\" />\n </div>\n <div tabindex=\"-1\">\n <ul>\n <z-myz-list-item class=\"big\" id=\"item_1\" listitemid=\"item_1\" action=\"combo-li-combo\" underlined=\"\">\n <z-input disabled=\"0\" type=\"checkbox\" size=\"big\" htmlid=\"combo-checkbox-combo-item_1\" label=\"primo elemento\"></z-input>\n </z-myz-list-item>\n <z-myz-list-item class=\"big\" id=\"item_2\" listitemid=\"item_2\" action=\"combo-li-combo\">\n <z-input type=\"checkbox\" size=\"big\" htmlid=\"combo-checkbox-combo-item_2\" label=\"secondo elemento\" checked></z-input>\n </z-myz-list-item>\n </ul>\n </div\n </div>\n </div>\n </mock:shadow-root>\n </z-combobox>\n `);\n });\n\n it(\"Test render ZCombobox aperta con uncheck all\", async () => {\n const page = await newSpecPage({\n components: [ZCombobox],\n html: `<z-combobox inputid=\"combo\" label=\"combo\" hascheckall=\"true\" checkalltext=\"CHECK\" uncheckalltext=\"UNCHECK\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":true},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]'></z-combobox>`,\n });\n page.rootInstance.isopen = true;\n await page.waitForChanges();\n expect(page.root).toEqualHtml(`\n <z-combobox inputid=\"combo\" label=\"combo\" hascheckall=\"true\" checkalltext=\"CHECK\" uncheckalltext=\"UNCHECK\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":true},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]'>\n <mock:shadow-root>\n <div class=\"open\" data-action=\"combo-combo\" id=\"combo\">\n <div class=\"header\" role=\"button\" tabindex=\"0\">\n <p class=\"body-3\">combo<span>(2)</span></p>\n <z-icon class=\"big\" name=\"caret-down\" />\n </div>\n <div class=\"open-combo-data\">\n <div class=\"check-all-wrapper\">\n <z-input type=\"checkbox\" size=\"big\" htmlid=\"combo-checkbox-combo-check-all\" label=\"UNCHECK\" checked disabled=\"0\" />\n </div>\n <div tabindex=\"-1\">\n <ul>\n <z-myz-list-item class=\"big\" id=\"item_1\" listitemid=\"item_1\" action=\"combo-li-combo\" underlined=\"\">\n <z-input type=\"checkbox\" size=\"big\" htmlid=\"combo-checkbox-combo-item_1\" label=\"primo elemento\" checked></z-input>\n </z-myz-list-item>\n <z-myz-list-item class=\"big\" id=\"item_2\" listitemid=\"item_2\" action=\"combo-li-combo\">\n <z-input type=\"checkbox\" size=\"big\" htmlid=\"combo-checkbox-combo-item_2\" label=\"secondo elemento\" checked></z-input>\n </z-myz-list-item>\n </ul>\n </div\n </div>\n </div>\n </mock:shadow-root>\n </z-combobox>\n `);\n });\n\n it(\"Test render ZCombobox aperta con max checkable items\", async () => {\n const page = await newSpecPage({\n components: [ZCombobox],\n html: `<z-combobox inputid=\"combo\" label=\"combo\" maxcheckableitems=\"1\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":false},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]'></z-combobox>`,\n });\n page.rootInstance.isopen = true;\n await page.waitForChanges();\n expect(page.root).toEqualHtml(`\n <z-combobox inputid=\"combo\" label=\"combo\" maxcheckableitems=\"1\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":false},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":true}]'>\n <mock:shadow-root>\n <div class=\"open\" data-action=\"combo-combo\" id=\"combo\">\n <div class=\"header\" role=\"button\" tabindex=\"0\">\n <p class=\"body-3\">combo<span>(1)</span></p>\n <z-icon class=\"big\" name=\"caret-down\" />\n </div>\n <div class=\"open-combo-data\">\n <div tabindex=\"-1\">\n <ul>\n <z-myz-list-item class=\"big\" id=\"item_1\" listitemid=\"item_1\" action=\"combo-li-combo\" underlined=\"\">\n <z-input disabled=\"\" type=\"checkbox\" size=\"big\" htmlid=\"combo-checkbox-combo-item_1\" label=\"primo elemento\"></z-input>\n </z-myz-list-item>\n <z-myz-list-item class=\"big\" id=\"item_2\" listitemid=\"item_2\" action=\"combo-li-combo\">\n <z-input type=\"checkbox\" size=\"big\" htmlid=\"combo-checkbox-combo-item_2\" label=\"secondo elemento\" checked></z-input>\n </z-myz-list-item>\n </ul>\n </div\n </div>\n </div>\n </mock:shadow-root>\n </z-combobox>\n `);\n });\n\n it(\"Test render ZCombobox aperta con maxcheckableitems + check all\", async () => {\n const page = await newSpecPage({\n components: [ZCombobox],\n html: `<z-combobox inputid=\"combo\" label=\"combo\" maxcheckableitems=\"3\" hascheckall=\"true\" checkalltext=\"CHECK\" uncheckalltext=\"UNCHECK\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":true},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":false}]'></z-combobox>`,\n });\n page.rootInstance.isopen = true;\n await page.waitForChanges();\n expect(page.root).toEqualHtml(`\n <z-combobox inputid=\"combo\" label=\"combo\" maxcheckableitems=\"3\" hascheckall=\"true\" checkalltext=\"CHECK\" uncheckalltext=\"UNCHECK\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":true},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":false}]'>\n <mock:shadow-root>\n <div class=\"open\" data-action=\"combo-combo\" id=\"combo\">\n <div class=\"header\" role=\"button\" tabindex=\"0\">\n <p class=\"body-3\">combo<span>(1)</span></p>\n <z-icon class=\"big\" name=\"caret-down\" />\n </div>\n <div class=\"open-combo-data\">\n <div class=\"check-all-wrapper\">\n <z-input type=\"checkbox\" size=\"big\" htmlid=\"combo-checkbox-combo-check-all\" label=\"CHECK\" />\n </div>\n <div tabindex=\"-1\">\n <ul>\n <z-myz-list-item id=\"item_1\" class=\"big\" listitemid=\"item_1\" action=\"combo-li-combo\" underlined=\"\">\n <z-input type=\"checkbox\" size=\"big\" htmlid=\"combo-checkbox-combo-item_1\" label=\"primo elemento\" checked></z-input>\n </z-myz-list-item>\n <z-myz-list-item id=\"item_2\" class=\"big\" listitemid=\"item_2\" action=\"combo-li-combo\">\n <z-input type=\"checkbox\" size=\"big\" htmlid=\"combo-checkbox-combo-item_2\" label=\"secondo elemento\"></z-input>\n </z-myz-list-item>\n </ul>\n </div\n </div>\n </div>\n </mock:shadow-root>\n </z-combobox>\n `);\n });\n\n it(\"Test render ZCombobox aperta con maxcheckableitems + check all (disabled)\", async () => {\n const page = await newSpecPage({\n components: [ZCombobox],\n html: `<z-combobox inputid=\"combo\" label=\"combo\" maxcheckableitems=\"1\" hascheckall=\"true\" checkalltext=\"CHECK\" uncheckalltext=\"UNCHECK\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":true},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":false}]'></z-combobox>`,\n });\n page.rootInstance.isopen = true;\n await page.waitForChanges();\n expect(page.root).toEqualHtml(`\n <z-combobox inputid=\"combo\" label=\"combo\" maxcheckableitems=\"1\" hascheckall=\"true\" checkalltext=\"CHECK\" uncheckalltext=\"UNCHECK\" items='[{\"id\":\"item_1\",\"name\":\"primo elemento\",\"checked\":true},{\"id\":\"item_2\",\"name\":\"secondo elemento\",\"checked\":false}]'>\n <mock:shadow-root>\n <div class=\"open\" data-action=\"combo-combo\" id=\"combo\">\n <div class=\"header\" role=\"button\" tabindex=\"0\">\n <p class=\"body-3\">combo<span>(1)</span></p>\n <z-icon class=\"big\" name=\"caret-down\" />\n </div>\n <div class=\"open-combo-data\">\n <div class=\"check-all-wrapper\">\n <z-input type=\"checkbox\" size=\"big\" disabled htmlid=\"combo-checkbox-combo-check-all\" label=\"CHECK\" />\n </div>\n <div tabindex=\"-1\">\n <ul>\n <z-myz-list-item id=\"item_1\" class=\"big\" listitemid=\"item_1\" action=\"combo-li-combo\" underlined=\"\">\n <z-input type=\"checkbox\" size=\"big\" htmlid=\"combo-checkbox-combo-item_1\" label=\"primo elemento\" checked></z-input>\n </z-myz-list-item>\n <z-myz-list-item id=\"item_2\" class=\"big\" listitemid=\"item_2\" action=\"combo-li-combo\">\n <z-input type=\"checkbox\" size=\"big\" htmlid=\"combo-checkbox-combo-item_2\" label=\"secondo elemento\" disabled></z-input>\n </z-myz-list-item>\n </ul>\n </div\n </div>\n </div>\n </mock:shadow-root>\n </z-combobox>\n `);\n });\n});\n"]}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
:host {
|
|
2
2
|
display: block;
|
|
3
|
-
font-family: var(--font-family-sans);
|
|
4
3
|
}
|
|
5
4
|
|
|
6
5
|
:host > div.fixed {
|
|
@@ -110,7 +109,7 @@
|
|
|
110
109
|
border-radius: 0;
|
|
111
110
|
}
|
|
112
111
|
|
|
113
|
-
:host > div.open > div.open-combo-data > div
|
|
112
|
+
:host > div.open > div.open-combo-data > div {
|
|
114
113
|
overflow: auto;
|
|
115
114
|
max-height: 235px;
|
|
116
115
|
padding: 0;
|
|
@@ -122,7 +121,7 @@
|
|
|
122
121
|
margin-bottom: calc(var(--space-unit) * 2);
|
|
123
122
|
}
|
|
124
123
|
|
|
125
|
-
:host > div.open > div.open-combo-data > div >
|
|
124
|
+
:host > div.open > div.open-combo-data > div > ul {
|
|
126
125
|
max-height: 235px;
|
|
127
126
|
padding: 0 3px; /* needed for checkbox focus shadow */
|
|
128
127
|
margin: 0;
|
|
@@ -147,30 +146,31 @@
|
|
|
147
146
|
color: var(--color-primary01);
|
|
148
147
|
}
|
|
149
148
|
|
|
150
|
-
:host > div.open > div.open-combo-data > div
|
|
149
|
+
:host > div.open > div.open-combo-data > div.search {
|
|
151
150
|
overflow: hidden;
|
|
152
151
|
max-height: auto;
|
|
153
152
|
margin-top: 0;
|
|
154
153
|
box-shadow: 1px 1px 4px 2px rgb(217 222 227 / 50%);
|
|
155
154
|
}
|
|
156
155
|
|
|
157
|
-
:host > div.open > div.open-combo-data > div
|
|
156
|
+
:host > div.open > div.open-combo-data > div.search > ul {
|
|
158
157
|
overflow: auto;
|
|
159
158
|
max-height: 180px;
|
|
160
159
|
padding: var(--space-unit) calc(var(--space-unit) * 2);
|
|
161
160
|
scrollbar-color: var(--color-primary01) transparent;
|
|
162
161
|
}
|
|
163
162
|
|
|
164
|
-
:host > div.open > div.open-combo-data > div
|
|
163
|
+
:host > div.open > div.open-combo-data > div.search > div {
|
|
165
164
|
display: flex;
|
|
166
165
|
justify-content: center;
|
|
167
166
|
}
|
|
168
167
|
|
|
169
|
-
:host > div.open > div.open-combo-data > div
|
|
168
|
+
:host > div.open > div.open-combo-data > div.search > div > a {
|
|
170
169
|
display: inline-block;
|
|
171
170
|
height: 44px;
|
|
172
171
|
color: var(--color-primary01);
|
|
173
172
|
cursor: pointer;
|
|
173
|
+
font-family: var(--font-family-sans);
|
|
174
174
|
font-size: 14px;
|
|
175
175
|
font-weight: var(--font-sb);
|
|
176
176
|
line-height: 44px;
|
|
@@ -178,17 +178,17 @@
|
|
|
178
178
|
text-transform: uppercase;
|
|
179
179
|
}
|
|
180
180
|
|
|
181
|
-
:host > div.open > div.open-combo-data > div
|
|
181
|
+
:host > div.open > div.open-combo-data > div.check-all-wrapper {
|
|
182
182
|
padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);
|
|
183
183
|
border-bottom: var(--border-size-small) solid var(--gray800);
|
|
184
184
|
margin-bottom: var(--space-unit);
|
|
185
185
|
text-align: left;
|
|
186
186
|
}
|
|
187
187
|
|
|
188
|
-
:host([size="small"]) > div.open > div.open-combo-data > div
|
|
188
|
+
:host([size="small"]) > div.open > div.open-combo-data > div.check-all-wrapper {
|
|
189
189
|
padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 0.5);
|
|
190
190
|
}
|
|
191
191
|
|
|
192
|
-
:host([size="x-small"]) > div.open > div.open-combo-data > div
|
|
192
|
+
:host([size="x-small"]) > div.open > div.open-combo-data > div.check-all-wrapper {
|
|
193
193
|
padding: var(--space-unit) calc(var(--space-unit) * 0.5);
|
|
194
194
|
}
|
|
@@ -35,7 +35,6 @@ export class ZInput {
|
|
|
35
35
|
this.step = undefined;
|
|
36
36
|
this.pattern = undefined;
|
|
37
37
|
this.size = ControlSize.BIG;
|
|
38
|
-
this.innerTabIndex = undefined;
|
|
39
38
|
this.isTyping = false;
|
|
40
39
|
this.passwordHidden = true;
|
|
41
40
|
}
|
|
@@ -147,9 +146,6 @@ export class ZInput {
|
|
|
147
146
|
pattern: this.pattern,
|
|
148
147
|
};
|
|
149
148
|
}
|
|
150
|
-
getTabIndexAttribute() {
|
|
151
|
-
return this.innerTabIndex ? { tabindex: this.innerTabIndex } : {};
|
|
152
|
-
}
|
|
153
149
|
getRoleAttribute() {
|
|
154
150
|
return this.role ? { role: this.role } : {};
|
|
155
151
|
}
|
|
@@ -162,7 +158,7 @@ export class ZInput {
|
|
|
162
158
|
}
|
|
163
159
|
renderInputText(type = InputType.TEXT) {
|
|
164
160
|
const ariaLabel = this.ariaLabel ? { "aria-label": this.ariaLabel } : {};
|
|
165
|
-
const attr = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(
|
|
161
|
+
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());
|
|
166
162
|
if (this.icon || type === InputType.PASSWORD) {
|
|
167
163
|
Object.assign(attr.class, { "has-icon": true });
|
|
168
164
|
}
|
|
@@ -213,7 +209,7 @@ export class ZInput {
|
|
|
213
209
|
renderTextarea() {
|
|
214
210
|
const attributes = this.getTextAttributes();
|
|
215
211
|
const ariaLabel = this.ariaLabel ? { "aria-label": this.ariaLabel } : {};
|
|
216
|
-
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()
|
|
212
|
+
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()));
|
|
217
213
|
}
|
|
218
214
|
/* END textarea */
|
|
219
215
|
handleCheck(ev) {
|
|
@@ -222,7 +218,7 @@ export class ZInput {
|
|
|
222
218
|
}
|
|
223
219
|
/* START checkbox */
|
|
224
220
|
renderCheckbox() {
|
|
225
|
-
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
|
|
221
|
+
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: {
|
|
226
222
|
"checkbox-label": true,
|
|
227
223
|
"after": this.labelPosition === LabelPosition.RIGHT,
|
|
228
224
|
"before": this.labelPosition === LabelPosition.LEFT,
|
|
@@ -231,7 +227,7 @@ export class ZInput {
|
|
|
231
227
|
/* END checkbox */
|
|
232
228
|
/* START radio */
|
|
233
229
|
renderRadio() {
|
|
234
|
-
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
|
|
230
|
+
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: {
|
|
235
231
|
"radio-label": true,
|
|
236
232
|
"after": this.labelPosition === LabelPosition.RIGHT,
|
|
237
233
|
"before": this.labelPosition === LabelPosition.LEFT,
|
|
@@ -253,7 +249,7 @@ export class ZInput {
|
|
|
253
249
|
default:
|
|
254
250
|
input = this.renderInputText(this.type);
|
|
255
251
|
}
|
|
256
|
-
return h(Host, { key: '
|
|
252
|
+
return h(Host, { key: '67a39cc20219fa02de2cca264a5d51428f4359f3' }, input);
|
|
257
253
|
}
|
|
258
254
|
static get is() { return "z-input"; }
|
|
259
255
|
static get encapsulation() { return "scoped"; }
|
|
@@ -812,23 +808,6 @@ export class ZInput {
|
|
|
812
808
|
"attribute": "size",
|
|
813
809
|
"reflect": true,
|
|
814
810
|
"defaultValue": "ControlSize.BIG"
|
|
815
|
-
},
|
|
816
|
-
"innerTabIndex": {
|
|
817
|
-
"type": "number",
|
|
818
|
-
"mutable": false,
|
|
819
|
-
"complexType": {
|
|
820
|
-
"original": "number",
|
|
821
|
-
"resolved": "number",
|
|
822
|
-
"references": {}
|
|
823
|
-
},
|
|
824
|
-
"required": false,
|
|
825
|
-
"optional": true,
|
|
826
|
-
"docs": {
|
|
827
|
-
"tags": [],
|
|
828
|
-
"text": "set tabindex to input tag (optional). Defaults to native behaviour."
|
|
829
|
-
},
|
|
830
|
-
"attribute": "inner-tab-index",
|
|
831
|
-
"reflect": false
|
|
832
811
|
}
|
|
833
812
|
};
|
|
834
813
|
}
|
|
@@ -899,21 +878,6 @@ export class ZInput {
|
|
|
899
878
|
"resolved": "any",
|
|
900
879
|
"references": {}
|
|
901
880
|
}
|
|
902
|
-
}, {
|
|
903
|
-
"method": "ariaDescendantFocus",
|
|
904
|
-
"name": "ariaDescendantFocus",
|
|
905
|
-
"bubbles": true,
|
|
906
|
-
"cancelable": true,
|
|
907
|
-
"composed": true,
|
|
908
|
-
"docs": {
|
|
909
|
-
"tags": [],
|
|
910
|
-
"text": "set parent aria-activedescendant on focus event, returns filterid"
|
|
911
|
-
},
|
|
912
|
-
"complexType": {
|
|
913
|
-
"original": "string",
|
|
914
|
-
"resolved": "string",
|
|
915
|
-
"references": {}
|
|
916
|
-
}
|
|
917
881
|
}];
|
|
918
882
|
}
|
|
919
883
|
static get methods() {
|
|
@@ -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 /** 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"]}
|
|
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"]}
|
|
@@ -35,7 +35,6 @@ export class ZListElement {
|
|
|
35
35
|
this.listElementPosition = "0";
|
|
36
36
|
this.listType = ListType.NONE;
|
|
37
37
|
this.role = "listitem";
|
|
38
|
-
this.htmlTabindex = 0;
|
|
39
38
|
this.showInnerContent = false;
|
|
40
39
|
this.handleClick = this.handleClick.bind(this);
|
|
41
40
|
this.handleKeyDown = this.handleKeyDown.bind(this);
|
|
@@ -115,7 +114,7 @@ export class ZListElement {
|
|
|
115
114
|
}
|
|
116
115
|
}
|
|
117
116
|
render() {
|
|
118
|
-
return (h(Host, { key: '
|
|
117
|
+
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 }))));
|
|
119
118
|
}
|
|
120
119
|
static get is() { return "z-list-element"; }
|
|
121
120
|
static get encapsulation() { return "shadow"; }
|
|
@@ -417,24 +416,6 @@ export class ZListElement {
|
|
|
417
416
|
"attribute": "role",
|
|
418
417
|
"reflect": true,
|
|
419
418
|
"defaultValue": "\"listitem\""
|
|
420
|
-
},
|
|
421
|
-
"htmlTabindex": {
|
|
422
|
-
"type": "number",
|
|
423
|
-
"mutable": false,
|
|
424
|
-
"complexType": {
|
|
425
|
-
"original": "number | null",
|
|
426
|
-
"resolved": "number",
|
|
427
|
-
"references": {}
|
|
428
|
-
},
|
|
429
|
-
"required": false,
|
|
430
|
-
"optional": true,
|
|
431
|
-
"docs": {
|
|
432
|
-
"tags": [],
|
|
433
|
-
"text": "set tabindex to Host tag (optional). Defaults to 0."
|
|
434
|
-
},
|
|
435
|
-
"attribute": "html-tabindex",
|
|
436
|
-
"reflect": false,
|
|
437
|
-
"defaultValue": "0"
|
|
438
419
|
}
|
|
439
420
|
};
|
|
440
421
|
}
|