npm - @zanichelli/albe-web-components - Versions diffs - 16.0.0 → 16.1.0-rc2 - Mend

@zanichelli/albe-web-components 16.0.0 → 16.1.0-rc2

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

Files changed (176) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../src/components/z-select/index.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZSelect} from \"./index\";\n\ndescribe(\"Suite test ZSelect\", () => {\n it(\"Test render ZSelect chiusa con elementi\", async () => {\n const page = await newSpecPage({\n components: [ZSelect],\n html: `<z-select htmlid=\"checkid\" placeholder=\"select here\" label=\"default\" items='[{\"id\":\"item_0\",\"name\":\"SELECT HERE questa opzione con etichetta lunga lunghissima\",\"selected\":false}]'> </z-select>`,\n });\n page.rootInstance.isOpen = false;\n await page.waitForChanges();\n expect(page.root).toEqualHtml(`\n <z-select htmlid=\"checkid\" placeholder=\"select here\" label=\"default\" items='[{\"id\":\"item_0\",\"name\":\"SELECT HERE questa opzione con etichetta lunga lunghissima\",\"selected\":false}]'>\n <div class=\"select-wrapper\">\n <z-input\n class=\"cursor-select\"\n label=\"default\"\n id=\"checkid_input\"\n htmlid=\"checkid_select_input\"\n placeholder=\"select here\"\n icon=\"caret-down\"\n aria-label=\"\"\n aria-autocomplete=\"none\"\n aria-expanded=\"false\"\n aria-activedescendant=\"\"\n aria-controls=\"checkid_list\"\n role=\"combobox\"\n size=\"big\"\n ></z-input>\n <div class=\"closed\" tabindex=\"-1\">\n <div class=\"ul-scroll-wrapper\" tabindex=\"-1\">\n <z-list\n role=\"listbox\"\n aria-label=\"default\"\n tabindex=\"-1\"\n id=\"checkid_list\"\n size=\"medium\"\n >\n <z-list-element\n clickable=\"\"\n aria-selected=\"false\"\n dividertype=\"header\"\n role=\"option\"\n tabindex=\"-1\"\n class=\"\"\n id=\"checkid_0\"\n size=\"medium\"\n >\n <div class=\"list-element-container\">\n <span class=\"list-element-content\">SELECT HERE questa opzione con etichetta lunga lunghissima</span>\n </div>\n </z-list-element>\n </z-list>\n </div>\n </div>\n <z-input-message class=\"big\"></z-input-message>\n </div>\n </z-select>\n `);\n });\n\n it(\"Test render ZSelect aperta con elementi\", async () => {\n const page = await newSpecPage({\n components: [ZSelect],\n html: `<z-select htmlid=\"checkid\" placeholder=\"select here\" label=\"default\" items='[{\"id\":\"item_0\",\"name\":\"SELECT HERE questa opzione con etichetta lunga lunghissima\",\"selected\":false},{\"id\":\"item_1\",\"name\":\"primo elemento\",\"selected\":false}]'> </z-select>`,\n });\n page.rootInstance.isOpen = true;\n await page.waitForChanges();\n expect(page.root).toEqualHtml(`\n <z-select htmlid=\"checkid\" placeholder=\"select here\" label=\"default\" items='[{\"id\":\"item_0\",\"name\":\"SELECT HERE questa opzione con etichetta lunga lunghissima\",\"selected\":false},{\"id\":\"item_1\",\"name\":\"primo elemento\",\"selected\":false}]'>\n <div class=\"select-wrapper\">\n <z-input\n class=\"cursor-select active-select\"\n label=\"default\"\n id=\"checkid_input\"\n htmlid=\"checkid_select_input\"\n placeholder=\"select here\"\n icon=\"caret-up\"\n readonly=\"\"\n aria-label=\"\"\n aria-autocomplete=\"none\"\n aria-expanded=\"true\"\n aria-controls=\"checkid_list\"\n role=\"combobox\"\n size=\"big\"\n ></z-input>\n <div class=\"open\" tabindex=\"-1\">\n <div class=\"ul-scroll-wrapper\" tabindex=\"-1\">\n <z-list\n role=\"listbox\"\n aria-label=\"default\"\n tabindex=\"0\"\n id=\"checkid_list\"\n size=\"medium\"\n >\n <z-list-element\n clickable=\"\"\n aria-selected=\"false\"\n dividertype=\"element\"\n role=\"option\"\n tabindex=\"0\"\n class=\"\"\n id=\"checkid_0\"\n size=\"medium\"\n >\n <div class=\"list-element-container\">\n <span class=\"list-element-content\">SELECT HERE questa opzione con etichetta lunga lunghissima</span>\n </div>\n </z-list-element>\n <z-list-element\n clickable=\"\"\n aria-selected=\"false\"\n dividertype=\"header\"\n role=\"option\"\n tabindex=\"0\"\n class=\"\"\n id=\"checkid_1\"\n size=\"medium\"\n >\n <div class=\"list-element-container\">\n <span class=\"list-element-content\">primo elemento</span>\n </div>\n </z-list-element>\n </z-list>\n </div>\n </div>\n <z-input-message class=\"big\"></z-input-message>\n </div>\n </z-select>\n `);\n });\n\n it(\"Test render ZSelect aperta con elemento selezionato\", async () => {\n const page = await newSpecPage({\n components: [ZSelect],\n html: `<z-select htmlid=\"checkid\" placeholder=\"select here\" label=\"default\" items='[{\"id\":\"item_0\",\"name\":\"SELECT HERE questa opzione con etichetta lunga lunghissima\",\"selected\":false},{\"id\":\"item_1\",\"name\":\"primo elemento\",\"selected\":true}]'> </z-select>`,\n });\n page.rootInstance.isOpen = true;\n await page.waitForChanges();\n expect(page.root).toEqualHtml(`\n <z-select htmlid=\"checkid\" placeholder=\"select here\" label=\"default\" items='[{\"id\":\"item_0\",\"name\":\"SELECT HERE questa opzione con etichetta lunga lunghissima\",\"selected\":false},{\"id\":\"item_1\",\"name\":\"primo elemento\",\"selected\":true}]'>\n <div class=\"select-wrapper\">\n <z-input\n class=\"cursor-select active-select\"\n label=\"default\"\n id=\"checkid_input\"\n htmlid=\"checkid_select_input\"\n placeholder=\"select here\"\n icon=\"caret-up\"\n readonly=\"\"\n aria-label=\"\"\n aria-autocomplete=\"none\"\n aria-expanded=\"true\"\n aria-controls=\"checkid_list\"\n role=\"combobox\"\n size=\"big\"\n ></z-input>\n <div class=\"open\" tabindex=\"-1\">\n <div class=\"ul-scroll-wrapper\" tabindex=\"-1\">\n <z-list\n role=\"listbox\"\n aria-label=\"default\"\n tabindex=\"0\"\n id=\"checkid_list\"\n class=\"filled\"\n size=\"medium\"\n >\n <z-list-element\n clickable=\"\"\n aria-selected=\"false\"\n dividertype=\"element\"\n role=\"option\"\n tabindex=\"0\"\n class=\"\"\n id=\"checkid_0\"\n size=\"medium\"\n >\n <div class=\"list-element-container\">\n <span class=\"list-element-content\">SELECT HERE questa opzione con etichetta lunga lunghissima</span>\n </div>\n </z-list-element>\n <z-list-element\n clickable=\"\"\n dividertype=\"header\"\n role=\"option\"\n tabindex=\"0\"\n aria-selected=\"true\"\n class=\"\"\n id=\"checkid_1\"\n size=\"medium\"\n >\n <div class=\"list-element-container\">\n <span class=\"list-element-content selected\">primo elemento</span>\n </div>\n </z-list-element>\n </z-list>\n </div>\n </div>\n <z-input-message class=\"big\"></z-input-message>\n </div>\n </z-select>\n `);\n });\n\n it(\"Test render ZSelect chiusa disabilitato con elementi\", async () => {\n const page = await newSpecPage({\n components: [ZSelect],\n html: `<z-select htmlid=\"checkid\" placeholder=\"select here\" disabled readonly label=\"default\" items='[{\"id\":\"item_0\",\"name\":\"SELECT HERE questa opzione con etichetta lunga lunghissima\",\"selected\":false},{\"id\":\"item_1\",\"name\":\"primo elemento\",\"selected\":false}]'> </z-select>`,\n });\n page.rootInstance.isOpen = false;\n await page.waitForChanges();\n expect(page.root).toEqualHtml(`\n <z-select htmlid=\"checkid\" placeholder=\"select here\" disabled readonly label=\"default\" items='[{\"id\":\"item_0\",\"name\":\"SELECT HERE questa opzione con etichetta lunga lunghissima\",\"selected\":false},{\"id\":\"item_1\",\"name\":\"primo elemento\",\"selected\":false}]'>\n <div class=\"select-wrapper\">\n <z-input\n class=\"cursor-select\"\n label=\"default\"\n id=\"checkid_input\"\n htmlid=\"checkid_select_input\"\n placeholder=\"select here\"\n icon=\"caret-down\"\n disabled=\"\"\n readonly=\"\"\n aria-label=\"\"\n aria-autocomplete=\"none\"\n aria-expanded=\"false\"\n aria-activedescendant=\"\"\n aria-controls=\"checkid_list\"\n role=\"combobox\"\n size=\"big\"\n ></z-input>\n <div class=\"closed\" tabindex=\"-1\">\n <div class=\"ul-scroll-wrapper\" tabindex=\"-1\">\n <z-list\n role=\"listbox\"\n aria-label=\"default\"\n tabindex=\"-1\"\n id=\"checkid_list\"\n class=\"disabled readonly\"\n size=\"medium\"\n >\n <z-list-element\n clickable=\"\"\n aria-selected=\"false\"\n dividertype=\"element\"\n role=\"option\"\n tabindex=\"-1\"\n class=\"\"\n id=\"checkid_0\"\n size=\"medium\"\n >\n <div class=\"list-element-container\">\n <span class=\"list-element-content\">SELECT HERE questa opzione con etichetta lunga lunghissima</span>\n </div>\n </z-list-element>\n <z-list-element\n clickable=\"\"\n aria-selected=\"false\"\n dividertype=\"header\"\n role=\"option\"\n tabindex=\"-1\"\n class=\"\"\n id=\"checkid_1\"\n size=\"medium\"\n >\n <div class=\"list-element-container\">\n <span class=\"list-element-content\">primo elemento</span>\n </div>\n </z-list-element>\n </z-list>\n </div>\n </div>\n <z-input-message class=\"big\"></z-input-message>\n </div>\n </z-select>\n `);\n });\n\n it(\"Test render ZSelect chiusa con elementi, status/messages\", async () => {\n const page = await newSpecPage({\n components: [ZSelect],\n html: `<z-select htmlid=\"checkid\" placeholder=\"select here\" status=\"success\" message=\"message message\" label=\"default\" items='[{\"id\":\"item_0\",\"name\":\"SELECT HERE questa opzione con etichetta lunga lunghissima\",\"selected\":false},{\"id\":\"item_1\",\"name\":\"primo elemento\",\"selected\":false}]'> </z-select>`,\n });\n page.rootInstance.isOpen = false;\n await page.waitForChanges();\n expect(page.root).toEqualHtml(`\n <z-select htmlid=\"checkid\" placeholder=\"select here\" status=\"success\" message=\"message message\" label=\"default\" items='[{\"id\":\"item_0\",\"name\":\"SELECT HERE questa opzione con etichetta lunga lunghissima\",\"selected\":false},{\"id\":\"item_1\",\"name\":\"primo elemento\",\"selected\":false}]'>\n <div class=\"select-wrapper\">\n <z-input\n class=\"cursor-select\"\n aria-label=\"\"\n label=\"default\"\n id=\"checkid_input\"\n htmlid=\"checkid_select_input\"\n placeholder=\"select here\"\n icon=\"caret-down\"\n status=\"success\"\n aria-autocomplete=\"none\"\n aria-expanded=\"false\"\n aria-activedescendant=\"\"\n aria-controls=\"checkid_list\"\n role=\"combobox\"\n size=\"big\"\n ></z-input>\n <div class=\"closed\" tabindex=\"-1\">\n <div class=\"ul-scroll-wrapper\" tabindex=\"-1\">\n <z-list\n role=\"listbox\"\n aria-label=\"default\"\n tabindex=\"-1\"\n id=\"checkid_list\"\n class=\"input-success\"\n size=\"medium\"\n >\n <z-list-element\n clickable=\"\"\n aria-selected=\"false\"\n dividertype=\"element\"\n role=\"option\"\n tabindex=\"-1\"\n class=\"\"\n id=\"checkid_0\"\n size=\"medium\"\n >\n <div class=\"list-element-container\">\n <span class=\"list-element-content\">SELECT HERE questa opzione con etichetta lunga lunghissima</span>\n </div>\n </z-list-element>\n <z-list-element\n clickable=\"\"\n aria-selected=\"false\"\n dividertype=\"header\"\n role=\"option\"\n tabindex=\"-1\"\n class=\"\"\n id=\"checkid_1\"\n size=\"medium\"\n >\n <div class=\"list-element-container\">\n <span class=\"list-element-content\">primo elemento</span>\n </div>\n </z-list-element>\n </z-list>\n </div>\n </div>\n <z-input-message class=\"big\" status=\"success\" message=\"message message\"></z-input-message>\n </div>\n </z-select>\n `);\n });\n\n it(\"Test render ZSelect aperta con elementi, un elemento disabilitato\", async () => {\n const page = await newSpecPage({\n components: [ZSelect],\n html: `<z-select htmlid=\"checkid\" placeholder=\"select here\" label=\"default\" items='[{\"id\":\"item_0\",\"name\":\"SELECT HERE questa opzione con etichetta lunga lunghissima\",\"selected\":false},{\"id\":\"item_1\",\"name\":\"primo elemento\",\"selected\":false,\"disabled\":true}]'> </z-select>`,\n });\n page.rootInstance.isOpen = true;\n await page.waitForChanges();\n expect(page.root).toEqualHtml(`\n <z-select htmlid=\"checkid\" placeholder=\"select here\" label=\"default\" items='[{\"id\":\"item_0\",\"name\":\"SELECT HERE questa opzione con etichetta lunga lunghissima\",\"selected\":false},{\"id\":\"item_1\",\"name\":\"primo elemento\",\"selected\":false,\"disabled\":true}]'>\n <div class=\"select-wrapper\">\n <z-input\n class=\"cursor-select active-select\"\n aria-label=\"\"\n label=\"default\"\n id=\"checkid_input\"\n htmlid=\"checkid_select_input\"\n placeholder=\"select here\"\n icon=\"caret-up\"\n readonly=\"\"\n aria-autocomplete=\"none\"\n aria-expanded=\"true\"\n aria-controls=\"checkid_list\"\n role=\"combobox\"\n size=\"big\"\n ></z-input>\n <div class=\"open\" tabindex=\"-1\">\n <div class=\"ul-scroll-wrapper\" tabindex=\"-1\">\n <z-list\n role=\"listbox\"\n aria-label=\"default\"\n tabindex=\"0\"\n id=\"checkid_list\"\n size=\"medium\"\n >\n <z-list-element\n clickable=\"\"\n aria-selected=\"false\"\n dividertype=\"element\"\n role=\"option\"\n tabindex=\"0\"\n class=\"\"\n id=\"checkid_0\"\n size=\"medium\"\n >\n <div class=\"list-element-container\">\n <span class=\"list-element-content\">SELECT HERE questa opzione con etichetta lunga lunghissima</span>\n </div>\n </z-list-element>\n <z-list-element\n disabled=\"\"\n aria-selected=\"false\"\n dividertype=\"header\"\n role=\"option\"\n tabindex=\"-1\"\n id=\"checkid_1\"\n size=\"medium\"\n >\n <div class=\"list-element-container\">\n <span class=\"list-element-content\">primo elemento</span>\n </div>\n </z-list-element>\n </z-list>\n </div>\n </div>\n <z-input-message class=\"big\"></z-input-message>\n </div>\n </z-select>\n `);\n });\n\n it(\"Test render ZSelect aperta con elementi con autocomplete\", async () => {\n const page = await newSpecPage({\n components: [ZSelect],\n html: `<z-select htmlid=\"checkid\" placeholder=\"select here\" label=\"default\" autocomplete=\"on\" items='[{\"id\":\"item_0\",\"name\":\"SELECT HERE questa opzione con etichetta lunga lunghissima\",\"selected\":false},{\"id\":\"item_1\",\"name\":\"primo elemento\",\"selected\":false}]'> </z-select>`,\n });\n page.rootInstance.isOpen = true;\n await page.waitForChanges();\n expect(page.root).toEqualHtml(`\n <z-select htmlid=\"checkid\" placeholder=\"select here\" label=\"default\" autocomplete=\"on\" items='[{\"id\":\"item_0\",\"name\":\"SELECT HERE questa opzione con etichetta lunga lunghissima\",\"selected\":false},{\"id\":\"item_1\",\"name\":\"primo elemento\",\"selected\":false}]'>\n <div class=\"select-wrapper\">\n <z-input\n class=\"active-select\"\n label=\"default\"\n id=\"checkid_input\"\n htmlid=\"checkid_select_input\"\n placeholder=\"select here\"\n icon=\"caret-up\"\n hasclearicon=\"\"\n aria-label=\"\"\n aria-autocomplete=\"list\"\n aria-expanded=\"true\"\n aria-controls=\"checkid_list\"\n role=\"combobox\"\n size=\"big\"\n ></z-input>\n <div class=\"open\" tabindex=\"-1\">\n <div class=\"ul-scroll-wrapper\" tabindex=\"-1\">\n <z-list\n role=\"listbox\"\n aria-label=\"default\"\n tabindex=\"0\"\n id=\"checkid_list\"\n size=\"medium\"\n >\n <z-list-element\n clickable=\"\"\n aria-selected=\"false\"\n dividertype=\"element\"\n role=\"option\"\n tabindex=\"0\"\n class=\"\"\n id=\"checkid_0\"\n size=\"medium\"\n >\n <div class=\"list-element-container\">\n <span class=\"list-element-content\">SELECT HERE questa opzione con etichetta lunga lunghissima</span>\n </div>\n </z-list-element>\n <z-list-element\n clickable=\"\"\n aria-selected=\"false\"\n dividertype=\"header\"\n role=\"option\"\n tabindex=\"0\"\n class=\"\"\n id=\"checkid_1\"\n size=\"medium\"\n >\n <div class=\"list-element-container\">\n <span class=\"list-element-content\">primo elemento</span>\n </div>\n </z-list-element>\n </z-list>\n </div>\n </div>\n <z-input-message class=\"big\"></z-input-message>\n </div>\n </z-select>\n `);\n });\n\n it(\"Test render ZSelect aperta con elementi con autocomplete e ricerca\", async () => {\n const page = await newSpecPage({\n components: [ZSelect],\n html: `<z-select htmlid=\"checkid\" placeholder=\"select here\" label=\"default\" autocomplete=\"true\" items='[{\"id\":\"item_0\",\"name\":\"SELECT HERE questa opzione con etichetta lunga lunghissima\",\"selected\":false},{\"id\":\"item_1\",\"name\":\"primo elemento\",\"selected\":false}]'> </z-select>`,\n });\n page.rootInstance.isOpen = true;\n page.rootInstance.searchString = \"opzione\";\n await page.waitForChanges();\n expect(page.root).toEqualHtml(`\n <z-select htmlid=\"checkid\" placeholder=\"select here\" label=\"default\" autocomplete=\"true\" items='[{\"id\":\"item_0\",\"name\":\"SELECT HERE questa opzione con etichetta lunga lunghissima\",\"selected\":false},{\"id\":\"item_1\",\"name\":\"primo elemento\",\"selected\":false}]'>\n <div class=\"select-wrapper\">\n <z-input class=\"active-select\"aria-autocomplete=\"list\" aria-controls=\"checkid_list\" role=\"combobox\" aria-label=\"\" aria-expanded=\"true\" label=\"default\" hasclearicon=\"\" size=\"big\" htmlid=\"checkid_select_input\" icon=\"caret-up\" id=\"checkid_input\" placeholder=\"select here\"></z-input>\n <div class=\"open\" tabindex=\"-1\">\n <div class=\"ul-scroll-wrapper\" tabindex=\"-1\">\n <z-list id=\"checkid_list\" role=\"listbox\" aria-label=\"default\" tabindex=\"0\" size=\"medium\">\n <z-list-element clickable=\"\" aria-selected=\"false\" dividertype=\"header\" id=\"checkid_0\" role=\"option\" size=\"medium\" tabindex=\"0\">\n <div class=\"list-element-container\">\n <span class=\"list-element-content\">\n SELECT HERE questa\n <strong>\n opzione\n </strong>\n con etichetta lunga lunghissima\n </span>\n </div>\n </z-list-element>\n </z-list>\n </div>\n </div>\n <z-input-message class=\"big\"></z-input-message>\n </div>\n </z-select>\n `);\n });\n\n it(\"Test render ZSelect aperta con reset item\", async () => {\n const page = await newSpecPage({\n components: [ZSelect],\n html: `<z-select htmlid=\"checkid\" placeholder=\"select here\" reset-item=\"Pulisci selezione\" label=\"default\" autocomplete=\"true\" items='[{\"id\":\"item_0\",\"name\":\"SELECT HERE questa opzione con etichetta lunga lunghissima\",\"selected\":true}]'></z-select>`,\n });\n page.rootInstance.isOpen = true;\n await page.waitForChanges();\n expect(page.root).toEqualHtml(`\n <z-select autocomplete=\"true\" htmlid=\"checkid\" items=\"[{"id":"item_0","name":"SELECT HERE questa opzione con etichetta lunga lunghissima","selected":true}]\" label=\"default\" placeholder=\"select here\" reset-item=\"Pulisci selezione\">\n <div class=\"select-wrapper\">\n <z-input aria-expanded=\"true\" aria-label=\"\" aria-autocomplete=\"list\" aria-controls=\"checkid_list\" role=\"combobox\" class=\"active-select\" hasclearicon=\"\" size=\"big\" htmlid=\"checkid_select_input\" icon=\"caret-up\" id=\"checkid_input\" label=\"default\" placeholder=\"select here\"></z-input>\n <div class=\"open\" tabindex=\"-1\">\n <div class=\"ul-scroll-wrapper\" tabindex=\"-1\">\n <z-list class=\"filled\" id=\"checkid_list\" role=\"listbox\" aria-label=\"default\" size=\"medium\" tabindex=\"0\">\n <z-list-element aria-selected=\"false\" class=\"reset-item reset-item-margin\" clickable=\"\" dividertype=\"element\" size=\"medium\" id=\"checkid_0\" role=\"option\" tabindex=\"0\">\n <div class=\"reset-item-content\">\n <z-icon name=\"multiply-circled\"></z-icon>\n <span>\n Pulisci selezione\n </span>\n </div>\n </z-list-element>\n <z-list-element aria-selected=\"true\" clickable=\"\" dividertype=\"header\" id=\"checkid_1\" role=\"option\" size=\"medium\" tabindex=\"0\">\n <div class=\"list-element-container\">\n <span class=\"list-element-content selected\">\n SELECT HERE questa opzione con etichetta lunga lunghissima\n </span>\n </div>\n </z-list-element>\n </z-list>\n </div>\n </div>\n <z-input-message class=\"big\"></z-input-message>\n </div>\n </z-select>\n `);\n });\n\n it(\"Test render ZSelect fixed\", async () => {\n const page = await newSpecPage({\n components: [ZSelect],\n html: `<z-select htmlid=\"checkid\" placeholder=\"select here\" label=\"fixed without groups\" items='[{\"id\":\"item_0\",\"name\":\"SELECT HERE questa opzione con etichetta lunga lunghissima\",\"selected\":false},{\"id\":\"item_1\",\"name\":\"primo elemento\",\"selected\":false}]' isfixed=\"true\"> </z-select>`,\n });\n page.rootInstance.isOpen = true;\n await page.waitForChanges();\n expect(page.root).toEqualHtml(`\n <z-select htmlid=\"checkid\" placeholder=\"select here\" label=\"fixed without groups\" items='[{\"id\":\"item_0\",\"name\":\"SELECT HERE questa opzione con etichetta lunga lunghissima\",\"selected\":false},{\"id\":\"item_1\",\"name\":\"primo elemento\",\"selected\":false}]' isfixed=\"true\">\n <div class=\"select-wrapper\">\n <z-input\n class=\"cursor-select active-select\"\n label=\"fixed without groups\"\n id=\"checkid_input\"\n htmlid=\"checkid_select_input\"\n placeholder=\"select here\"\n icon=\"caret-up\"\n readonly=\"\"\n aria-label=\"\"\n aria-expanded=\"true\"\n aria-autocomplete=\"none\"\n aria-controls=\"checkid_list\"\n role=\"combobox\"\n size=\"big\"\n ></z-input>\n <div class=\"open\" tabindex=\"-1\">\n <div class=\"fixed ul-scroll-wrapper\" tabindex=\"-1\">\n <z-list\n role=\"listbox\"\n aria-label=\"fixed without groups\" \n tabindex=\"0\"\n id=\"checkid_list\"\n size=\"medium\"\n >\n <z-list-element\n clickable=\"\"\n aria-selected=\"false\"\n dividertype=\"element\"\n role=\"option\"\n tabindex=\"0\"\n class=\"\"\n id=\"checkid_0\"\n size=\"medium\"\n >\n <div class=\"list-element-container\">\n <span class=\"list-element-content\">SELECT HERE questa opzione con etichetta lunga lunghissima</span>\n </div>\n </z-list-element>\n <z-list-element\n clickable=\"\"\n aria-selected=\"false\"\n dividertype=\"header\"\n role=\"option\"\n tabindex=\"0\"\n class=\"\"\n id=\"checkid_1\"\n size=\"medium\"\n >\n <div class=\"list-element-container\">\n <span class=\"list-element-content\">primo elemento</span>\n </div>\n </z-list-element>\n </z-list>\n </div>\n </div>\n <z-input-message class=\"big\"></z-input-message>\n </div>\n </z-select>\n `);\n });\n});\n"]}
1	+ {"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../src/components/z-select/index.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZSelect} from \"./index\";\n\ndescribe(\"Suite test ZSelect\", () => {\n it(\"Test render ZSelect chiusa con elementi\", async () => {\n const page = await newSpecPage({\n components: [ZSelect],\n html: `<z-select htmlid=\"checkid\" placeholder=\"select here\" label=\"default\" items='[{\"id\":\"item_0\",\"name\":\"SELECT HERE questa opzione con etichetta lunga lunghissima\",\"selected\":false}]'> </z-select>`,\n });\n page.rootInstance.isOpen = false;\n await page.waitForChanges();\n expect(page.root).toEqualHtml(`\n <z-select htmlid=\"checkid\" placeholder=\"select here\" label=\"default\" items='[{\"id\":\"item_0\",\"name\":\"SELECT HERE questa opzione con etichetta lunga lunghissima\",\"selected\":false}]'>\n <div class=\"select-wrapper\">\n <z-input\n class=\"cursor-select\"\n label=\"default\"\n id=\"checkid_input\"\n htmlid=\"checkid_select_input\"\n placeholder=\"select here\"\n icon=\"caret-down\"\n aria-label=\"\"\n aria-autocomplete=\"none\"\n aria-expanded=\"false\"\n aria-activedescendant=\"\"\n aria-controls=\"checkid_list\"\n role=\"combobox\"\n size=\"big\"\n ></z-input>\n <div class=\"closed\" tabindex=\"-1\">\n <div class=\"ul-scroll-wrapper\" tabindex=\"-1\">\n <z-list\n role=\"listbox\"\n aria-label=\"default\"\n tabindex=\"-1\"\n id=\"checkid_list\"\n size=\"medium\"\n >\n <z-list-element\n clickable=\"\"\n aria-selected=\"false\"\n dividertype=\"header\"\n role=\"option\"\n tabindex=\"-1\"\n class=\"\"\n id=\"checkid_0\"\n size=\"medium\"\n >\n <div class=\"list-element-container\">\n <span class=\"list-element-content\">SELECT HERE questa opzione con etichetta lunga lunghissima</span>\n </div>\n </z-list-element>\n </z-list>\n </div>\n </div>\n <z-input-message class=\"big\"></z-input-message>\n </div>\n </z-select>\n `);\n });\n\n it(\"Test render ZSelect aperta con elementi\", async () => {\n const page = await newSpecPage({\n components: [ZSelect],\n html: `<z-select htmlid=\"checkid\" placeholder=\"select here\" label=\"default\" items='[{\"id\":\"item_0\",\"name\":\"SELECT HERE questa opzione con etichetta lunga lunghissima\",\"selected\":false},{\"id\":\"item_1\",\"name\":\"primo elemento\",\"selected\":false}]'> </z-select>`,\n });\n page.rootInstance.isOpen = true;\n await page.waitForChanges();\n expect(page.root).toEqualHtml(`\n <z-select htmlid=\"checkid\" placeholder=\"select here\" label=\"default\" items='[{\"id\":\"item_0\",\"name\":\"SELECT HERE questa opzione con etichetta lunga lunghissima\",\"selected\":false},{\"id\":\"item_1\",\"name\":\"primo elemento\",\"selected\":false}]'>\n <div class=\"select-wrapper\">\n <z-input\n class=\"cursor-select active-select\"\n label=\"default\"\n id=\"checkid_input\"\n htmlid=\"checkid_select_input\"\n placeholder=\"select here\"\n icon=\"caret-up\"\n readonly=\"\"\n aria-label=\"\"\n aria-autocomplete=\"none\"\n aria-expanded=\"true\"\n aria-controls=\"checkid_list\"\n role=\"combobox\"\n size=\"big\"\n ></z-input>\n <div class=\"open\" tabindex=\"-1\">\n <div class=\"ul-scroll-wrapper\" tabindex=\"-1\">\n <z-list\n role=\"listbox\"\n aria-label=\"default\"\n tabindex=\"0\"\n id=\"checkid_list\"\n size=\"medium\"\n >\n <z-list-element\n clickable=\"\"\n aria-selected=\"false\"\n dividertype=\"element\"\n role=\"option\"\n tabindex=\"0\"\n class=\"\"\n id=\"checkid_0\"\n size=\"medium\"\n >\n <div class=\"list-element-container\">\n <span class=\"list-element-content\">SELECT HERE questa opzione con etichetta lunga lunghissima</span>\n </div>\n </z-list-element>\n <z-list-element\n clickable=\"\"\n aria-selected=\"false\"\n dividertype=\"header\"\n role=\"option\"\n tabindex=\"0\"\n class=\"\"\n id=\"checkid_1\"\n size=\"medium\"\n >\n <div class=\"list-element-container\">\n <span class=\"list-element-content\">primo elemento</span>\n </div>\n </z-list-element>\n </z-list>\n </div>\n </div>\n <z-input-message class=\"big\"></z-input-message>\n </div>\n </z-select>\n `);\n });\n\n it(\"Test render ZSelect aperta con elemento selezionato\", async () => {\n const page = await newSpecPage({\n components: [ZSelect],\n html: `<z-select htmlid=\"checkid\" placeholder=\"select here\" label=\"default\" items='[{\"id\":\"item_0\",\"name\":\"SELECT HERE questa opzione con etichetta lunga lunghissima\",\"selected\":false},{\"id\":\"item_1\",\"name\":\"primo elemento\",\"selected\":true}]'> </z-select>`,\n });\n page.rootInstance.isOpen = true;\n await page.waitForChanges();\n expect(page.root).toEqualHtml(`\n <z-select htmlid=\"checkid\" placeholder=\"select here\" label=\"default\" items='[{\"id\":\"item_0\",\"name\":\"SELECT HERE questa opzione con etichetta lunga lunghissima\",\"selected\":false},{\"id\":\"item_1\",\"name\":\"primo elemento\",\"selected\":true}]'>\n <div class=\"select-wrapper\">\n <z-input\n class=\"cursor-select active-select\"\n label=\"default\"\n id=\"checkid_input\"\n htmlid=\"checkid_select_input\"\n placeholder=\"select here\"\n icon=\"caret-up\"\n readonly=\"\"\n aria-label=\"\"\n aria-autocomplete=\"none\"\n aria-expanded=\"true\"\n aria-controls=\"checkid_list\"\n role=\"combobox\"\n size=\"big\"\n ></z-input>\n <div class=\"open\" tabindex=\"-1\">\n <div class=\"ul-scroll-wrapper\" tabindex=\"-1\">\n <z-list\n role=\"listbox\"\n aria-label=\"default\"\n tabindex=\"0\"\n id=\"checkid_list\"\n class=\"filled\"\n size=\"medium\"\n >\n <z-list-element\n clickable=\"\"\n aria-selected=\"false\"\n dividertype=\"element\"\n role=\"option\"\n tabindex=\"0\"\n class=\"\"\n id=\"checkid_0\"\n size=\"medium\"\n >\n <div class=\"list-element-container\">\n <span class=\"list-element-content\">SELECT HERE questa opzione con etichetta lunga lunghissima</span>\n </div>\n </z-list-element>\n <z-list-element\n clickable=\"\"\n dividertype=\"header\"\n role=\"option\"\n tabindex=\"0\"\n aria-selected=\"true\"\n class=\"\"\n id=\"checkid_1\"\n size=\"medium\"\n >\n <div class=\"list-element-container\">\n <span class=\"list-element-content selected\">primo elemento</span>\n </div>\n </z-list-element>\n </z-list>\n </div>\n </div>\n <z-input-message class=\"big\"></z-input-message>\n </div>\n </z-select>\n `);\n });\n\n it(\"Test render ZSelect chiusa disabilitato con elementi\", async () => {\n const page = await newSpecPage({\n components: [ZSelect],\n html: `<z-select htmlid=\"checkid\" placeholder=\"select here\" disabled readonly label=\"default\" items='[{\"id\":\"item_0\",\"name\":\"SELECT HERE questa opzione con etichetta lunga lunghissima\",\"selected\":false},{\"id\":\"item_1\",\"name\":\"primo elemento\",\"selected\":false}]'> </z-select>`,\n });\n page.rootInstance.isOpen = false;\n await page.waitForChanges();\n expect(page.root).toEqualHtml(`\n <z-select htmlid=\"checkid\" placeholder=\"select here\" disabled readonly label=\"default\" items='[{\"id\":\"item_0\",\"name\":\"SELECT HERE questa opzione con etichetta lunga lunghissima\",\"selected\":false},{\"id\":\"item_1\",\"name\":\"primo elemento\",\"selected\":false}]'>\n <div class=\"select-wrapper\">\n <z-input\n class=\"cursor-select\"\n label=\"default\"\n id=\"checkid_input\"\n htmlid=\"checkid_select_input\"\n placeholder=\"select here\"\n icon=\"caret-down\"\n disabled=\"\"\n readonly=\"\"\n aria-label=\"\"\n aria-autocomplete=\"none\"\n aria-expanded=\"false\"\n aria-activedescendant=\"\"\n aria-controls=\"checkid_list\"\n role=\"combobox\"\n size=\"big\"\n ></z-input>\n <div class=\"closed\" tabindex=\"-1\">\n <div class=\"ul-scroll-wrapper\" tabindex=\"-1\">\n <z-list\n role=\"listbox\"\n aria-label=\"default\"\n tabindex=\"-1\"\n id=\"checkid_list\"\n class=\"disabled readonly\"\n size=\"medium\"\n >\n <z-list-element\n clickable=\"\"\n aria-selected=\"false\"\n dividertype=\"element\"\n role=\"option\"\n tabindex=\"-1\"\n class=\"\"\n id=\"checkid_0\"\n size=\"medium\"\n >\n <div class=\"list-element-container\">\n <span class=\"list-element-content\">SELECT HERE questa opzione con etichetta lunga lunghissima</span>\n </div>\n </z-list-element>\n <z-list-element\n clickable=\"\"\n aria-selected=\"false\"\n dividertype=\"header\"\n role=\"option\"\n tabindex=\"-1\"\n class=\"\"\n id=\"checkid_1\"\n size=\"medium\"\n >\n <div class=\"list-element-container\">\n <span class=\"list-element-content\">primo elemento</span>\n </div>\n </z-list-element>\n </z-list>\n </div>\n </div>\n <z-input-message class=\"big\"></z-input-message>\n </div>\n </z-select>\n `);\n });\n\n it(\"Test render ZSelect chiusa con elementi, status/messages\", async () => {\n const page = await newSpecPage({\n components: [ZSelect],\n html: `<z-select htmlid=\"checkid\" placeholder=\"select here\" status=\"success\" message=\"message message\" label=\"default\" items='[{\"id\":\"item_0\",\"name\":\"SELECT HERE questa opzione con etichetta lunga lunghissima\",\"selected\":false},{\"id\":\"item_1\",\"name\":\"primo elemento\",\"selected\":false}]'> </z-select>`,\n });\n page.rootInstance.isOpen = false;\n await page.waitForChanges();\n expect(page.root).toEqualHtml(`\n <z-select htmlid=\"checkid\" placeholder=\"select here\" status=\"success\" message=\"message message\" label=\"default\" items='[{\"id\":\"item_0\",\"name\":\"SELECT HERE questa opzione con etichetta lunga lunghissima\",\"selected\":false},{\"id\":\"item_1\",\"name\":\"primo elemento\",\"selected\":false}]'>\n <div class=\"select-wrapper\">\n <z-input\n class=\"cursor-select\"\n aria-label=\"\"\n label=\"default\"\n id=\"checkid_input\"\n htmlid=\"checkid_select_input\"\n placeholder=\"select here\"\n icon=\"caret-down\"\n status=\"success\"\n aria-autocomplete=\"none\"\n aria-expanded=\"false\"\n aria-activedescendant=\"\"\n aria-controls=\"checkid_list\"\n role=\"combobox\"\n size=\"big\"\n ></z-input>\n <div class=\"closed\" tabindex=\"-1\">\n <div class=\"ul-scroll-wrapper\" tabindex=\"-1\">\n <z-list\n role=\"listbox\"\n aria-label=\"default\"\n tabindex=\"-1\"\n id=\"checkid_list\"\n class=\"input-success\"\n size=\"medium\"\n >\n <z-list-element\n clickable=\"\"\n aria-selected=\"false\"\n dividertype=\"element\"\n role=\"option\"\n tabindex=\"-1\"\n class=\"\"\n id=\"checkid_0\"\n size=\"medium\"\n >\n <div class=\"list-element-container\">\n <span class=\"list-element-content\">SELECT HERE questa opzione con etichetta lunga lunghissima</span>\n </div>\n </z-list-element>\n <z-list-element\n clickable=\"\"\n aria-selected=\"false\"\n dividertype=\"header\"\n role=\"option\"\n tabindex=\"-1\"\n class=\"\"\n id=\"checkid_1\"\n size=\"medium\"\n >\n <div class=\"list-element-container\">\n <span class=\"list-element-content\">primo elemento</span>\n </div>\n </z-list-element>\n </z-list>\n </div>\n </div>\n <z-input-message class=\"big\" status=\"success\" message=\"message message\"></z-input-message>\n </div>\n </z-select>\n `);\n });\n\n it(\"Test render ZSelect aperta con elementi, un elemento disabilitato\", async () => {\n const page = await newSpecPage({\n components: [ZSelect],\n html: `<z-select htmlid=\"checkid\" placeholder=\"select here\" label=\"default\" items='[{\"id\":\"item_0\",\"name\":\"SELECT HERE questa opzione con etichetta lunga lunghissima\",\"selected\":false},{\"id\":\"item_1\",\"name\":\"primo elemento\",\"selected\":false,\"disabled\":true}]'> </z-select>`,\n });\n page.rootInstance.isOpen = true;\n await page.waitForChanges();\n expect(page.root).toEqualHtml(`\n <z-select htmlid=\"checkid\" placeholder=\"select here\" label=\"default\" items='[{\"id\":\"item_0\",\"name\":\"SELECT HERE questa opzione con etichetta lunga lunghissima\",\"selected\":false},{\"id\":\"item_1\",\"name\":\"primo elemento\",\"selected\":false,\"disabled\":true}]'>\n <div class=\"select-wrapper\">\n <z-input\n class=\"cursor-select active-select\"\n aria-label=\"\"\n label=\"default\"\n id=\"checkid_input\"\n htmlid=\"checkid_select_input\"\n placeholder=\"select here\"\n icon=\"caret-up\"\n readonly=\"\"\n aria-autocomplete=\"none\"\n aria-expanded=\"true\"\n aria-controls=\"checkid_list\"\n role=\"combobox\"\n size=\"big\"\n ></z-input>\n <div class=\"open\" tabindex=\"-1\">\n <div class=\"ul-scroll-wrapper\" tabindex=\"-1\">\n <z-list\n role=\"listbox\"\n aria-label=\"default\"\n tabindex=\"0\"\n id=\"checkid_list\"\n size=\"medium\"\n >\n <z-list-element\n clickable=\"\"\n aria-selected=\"false\"\n dividertype=\"element\"\n role=\"option\"\n tabindex=\"0\"\n class=\"\"\n id=\"checkid_0\"\n size=\"medium\"\n >\n <div class=\"list-element-container\">\n <span class=\"list-element-content\">SELECT HERE questa opzione con etichetta lunga lunghissima</span>\n </div>\n </z-list-element>\n <z-list-element\n disabled=\"\"\n aria-selected=\"false\"\n dividertype=\"header\"\n role=\"option\"\n tabindex=\"-1\"\n id=\"checkid_1\"\n size=\"medium\"\n >\n <div class=\"list-element-container\">\n <span class=\"list-element-content\">primo elemento</span>\n </div>\n </z-list-element>\n </z-list>\n </div>\n </div>\n <z-input-message class=\"big\"></z-input-message>\n </div>\n </z-select>\n `);\n });\n\n it(\"Test render ZSelect aperta con elementi con autocomplete\", async () => {\n const page = await newSpecPage({\n components: [ZSelect],\n html: `<z-select htmlid=\"checkid\" placeholder=\"select here\" label=\"default\" autocomplete=\"on\" items='[{\"id\":\"item_0\",\"name\":\"SELECT HERE questa opzione con etichetta lunga lunghissima\",\"selected\":false},{\"id\":\"item_1\",\"name\":\"primo elemento\",\"selected\":false}]'> </z-select>`,\n });\n page.rootInstance.isOpen = true;\n await page.waitForChanges();\n expect(page.root).toEqualHtml(`\n <z-select htmlid=\"checkid\" placeholder=\"select here\" label=\"default\" autocomplete=\"on\" items='[{\"id\":\"item_0\",\"name\":\"SELECT HERE questa opzione con etichetta lunga lunghissima\",\"selected\":false},{\"id\":\"item_1\",\"name\":\"primo elemento\",\"selected\":false}]'>\n <div class=\"select-wrapper\">\n <z-input\n class=\"active-select\"\n label=\"default\"\n id=\"checkid_input\"\n htmlid=\"checkid_select_input\"\n placeholder=\"select here\"\n icon=\"caret-up\"\n hasclearicon=\"\"\n aria-label=\"\"\n aria-autocomplete=\"list\"\n aria-expanded=\"true\"\n aria-controls=\"checkid_list\"\n role=\"combobox\"\n size=\"big\"\n ></z-input>\n <div class=\"open\" tabindex=\"-1\">\n <div class=\"ul-scroll-wrapper\" tabindex=\"-1\">\n <z-list\n role=\"listbox\"\n aria-label=\"default\"\n tabindex=\"0\"\n id=\"checkid_list\"\n size=\"medium\"\n >\n <z-list-element\n clickable=\"\"\n aria-selected=\"false\"\n dividertype=\"element\"\n role=\"option\"\n tabindex=\"0\"\n class=\"\"\n id=\"checkid_0\"\n size=\"medium\"\n >\n <div class=\"list-element-container\">\n <span class=\"list-element-content\">SELECT HERE questa opzione con etichetta lunga lunghissima</span>\n </div>\n </z-list-element>\n <z-list-element\n clickable=\"\"\n aria-selected=\"false\"\n dividertype=\"header\"\n role=\"option\"\n tabindex=\"0\"\n class=\"\"\n id=\"checkid_1\"\n size=\"medium\"\n >\n <div class=\"list-element-container\">\n <span class=\"list-element-content\">primo elemento</span>\n </div>\n </z-list-element>\n </z-list>\n </div>\n </div>\n <z-input-message class=\"big\"></z-input-message>\n </div>\n </z-select>\n `);\n });\n\n it(\"Test render ZSelect aperta con elementi con autocomplete e ricerca\", async () => {\n const page = await newSpecPage({\n components: [ZSelect],\n html: `<z-select htmlid=\"checkid\" placeholder=\"select here\" label=\"default\" autocomplete=\"true\" items='[{\"id\":\"item_0\",\"name\":\"SELECT HERE questa opzione con etichetta lunga lunghissima\",\"selected\":false},{\"id\":\"item_1\",\"name\":\"primo elemento\",\"selected\":false}]'> </z-select>`,\n });\n page.rootInstance.isOpen = true;\n page.rootInstance.searchString = \"opzione\";\n await page.waitForChanges();\n expect(page.root).toEqualHtml(`\n <z-select htmlid=\"checkid\" placeholder=\"select here\" label=\"default\" autocomplete=\"true\" items='[{\"id\":\"item_0\",\"name\":\"SELECT HERE questa opzione con etichetta lunga lunghissima\",\"selected\":false},{\"id\":\"item_1\",\"name\":\"primo elemento\",\"selected\":false}]'>\n <div class=\"select-wrapper\">\n <z-input class=\"active-select\"aria-autocomplete=\"list\" aria-controls=\"checkid_list\" role=\"combobox\" aria-label=\"\" aria-expanded=\"true\" label=\"default\" hasclearicon=\"\" size=\"big\" htmlid=\"checkid_select_input\" icon=\"caret-up\" id=\"checkid_input\" placeholder=\"select here\"></z-input>\n <div class=\"open\" tabindex=\"-1\">\n <div class=\"ul-scroll-wrapper\" tabindex=\"-1\">\n <z-list id=\"checkid_list\" role=\"listbox\" aria-label=\"default\" tabindex=\"0\" size=\"medium\">\n <z-list-element clickable=\"\" aria-selected=\"false\" dividertype=\"header\" id=\"checkid_0\" role=\"option\" size=\"medium\" tabindex=\"0\">\n <div class=\"list-element-container\">\n <span class=\"list-element-content\">\n SELECT HERE questa\n <strong>\n opzione\n </strong>\n con etichetta lunga lunghissima\n </span>\n </div>\n </z-list-element>\n </z-list>\n </div>\n </div>\n <z-input-message class=\"big\"></z-input-message>\n </div>\n </z-select>\n `);\n });\n\n it(\"Test render ZSelect aperta con reset item\", async () => {\n const page = await newSpecPage({\n components: [ZSelect],\n html: `<z-select htmlid=\"checkid\" placeholder=\"select here\" reset-item=\"Pulisci selezione\" label=\"default\" autocomplete=\"true\" items='[{\"id\":\"item_0\",\"name\":\"SELECT HERE questa opzione con etichetta lunga lunghissima\",\"selected\":true}]'></z-select>`,\n });\n page.rootInstance.isOpen = true;\n await page.waitForChanges();\n expect(page.root).toEqualHtml(`\n <z-select autocomplete=\"true\" htmlid=\"checkid\" items=\"[{"id":"item_0","name":"SELECT HERE questa opzione con etichetta lunga lunghissima","selected":true}]\" label=\"default\" placeholder=\"select here\" reset-item=\"Pulisci selezione\">\n <div class=\"select-wrapper\">\n <z-input aria-expanded=\"true\" aria-label=\"\" aria-autocomplete=\"list\" aria-controls=\"checkid_list\" role=\"combobox\" class=\"active-select\" hasclearicon=\"\" size=\"big\" htmlid=\"checkid_select_input\" icon=\"caret-up\" id=\"checkid_input\" label=\"default\" placeholder=\"select here\"></z-input>\n <div class=\"open\" tabindex=\"-1\">\n <div class=\"ul-scroll-wrapper\" tabindex=\"-1\">\n <z-list class=\"filled\" id=\"checkid_list\" role=\"listbox\" aria-label=\"default\" size=\"medium\" tabindex=\"0\">\n <z-list-element aria-selected=\"false\" class=\"reset-item reset-item-margin\" clickable=\"\" dividertype=\"element\" size=\"medium\" id=\"checkid_0\" role=\"option\" tabindex=\"0\">\n <div class=\"reset-item-content\">\n <z-icon name=\"multiply-circled\"></z-icon>\n <span>\n Pulisci selezione\n </span>\n </div>\n </z-list-element>\n <z-list-element aria-selected=\"true\" clickable=\"\" dividertype=\"header\" id=\"checkid_1\" role=\"option\" size=\"medium\" tabindex=\"0\">\n <div class=\"list-element-container\">\n <span class=\"list-element-content selected\">\n SELECT HERE questa opzione con etichetta lunga lunghissima\n </span>\n </div>\n </z-list-element>\n </z-list>\n </div>\n </div>\n <z-input-message class=\"big\"></z-input-message>\n </div>\n </z-select>\n `);\n });\n\n it(\"Test render ZSelect fixed\", async () => {\n const page = await newSpecPage({\n components: [ZSelect],\n html: `<z-select htmlid=\"checkid\" placeholder=\"select here\" label=\"fixed without groups\" items='[{\"id\":\"item_0\",\"name\":\"SELECT HERE questa opzione con etichetta lunga lunghissima\",\"selected\":false},{\"id\":\"item_1\",\"name\":\"primo elemento\",\"selected\":false}]' isfixed=\"true\"> </z-select>`,\n });\n page.rootInstance.isOpen = true;\n await page.waitForChanges();\n expect(page.root).toEqualHtml(`\n <z-select htmlid=\"checkid\" placeholder=\"select here\" label=\"fixed without groups\" items='[{\"id\":\"item_0\",\"name\":\"SELECT HERE questa opzione con etichetta lunga lunghissima\",\"selected\":false},{\"id\":\"item_1\",\"name\":\"primo elemento\",\"selected\":false}]' isfixed=\"true\">\n <div class=\"select-wrapper\">\n <z-input\n class=\"cursor-select active-select\"\n label=\"fixed without groups\"\n id=\"checkid_input\"\n htmlid=\"checkid_select_input\"\n placeholder=\"select here\"\n icon=\"caret-up\"\n readonly=\"\"\n aria-label=\"\"\n aria-expanded=\"true\"\n aria-autocomplete=\"none\"\n aria-controls=\"checkid_list\"\n role=\"combobox\"\n size=\"big\"\n ></z-input>\n <div class=\"open\" tabindex=\"-1\">\n <div class=\"fixed ul-scroll-wrapper\" tabindex=\"-1\">\n <z-list\n role=\"listbox\"\n aria-label=\"fixed without groups\" \n tabindex=\"0\"\n id=\"checkid_list\"\n size=\"medium\"\n >\n <z-list-element\n clickable=\"\"\n aria-selected=\"false\"\n dividertype=\"element\"\n role=\"option\"\n tabindex=\"0\"\n class=\"\"\n id=\"checkid_0\"\n size=\"medium\"\n >\n <div class=\"list-element-container\">\n <span class=\"list-element-content\">SELECT HERE questa opzione con etichetta lunga lunghissima</span>\n </div>\n </z-list-element>\n <z-list-element\n clickable=\"\"\n aria-selected=\"false\"\n dividertype=\"header\"\n role=\"option\"\n tabindex=\"0\"\n class=\"\"\n id=\"checkid_1\"\n size=\"medium\"\n >\n <div class=\"list-element-container\">\n <span class=\"list-element-content\">primo elemento</span>\n </div>\n </z-list-element>\n </z-list>\n </div>\n </div>\n <z-input-message class=\"big\"></z-input-message>\n </div>\n </z-select>\n `);\n });\n it(\"Test render ZSelect aperta con elementi, elemento con icona\", async () => {\n const page = await newSpecPage({\n components: [ZSelect],\n html: `<z-select htmlid=\"checkid\" placeholder=\"select here\" label=\"default\" items='[{\"id\":\"item_0\",\"name\":\"item 0\",\"selected\":false,\"icon\":\"teacher\"},{\"id\":\"item_1\",\"name\":\"item 1\",\"selected\":false}]'> </z-select>`,\n });\n page.rootInstance.isOpen = true;\n await page.waitForChanges();\n expect(page.root).toEqualHtml(`\n <z-select htmlid=\"checkid\" placeholder=\"select here\" label=\"default\" items='[{\"id\":\"item_0\",\"name\":\"item 0\",\"selected\":false,\"icon\":\"teacher\"},{\"id\":\"item_1\",\"name\":\"item 1\",\"selected\":false}]'>\n <div class=\"select-wrapper\">\n <z-input\n class=\"cursor-select active-select\"\n label=\"default\"\n id=\"checkid_input\"\n htmlid=\"checkid_select_input\"\n placeholder=\"select here\"\n icon=\"caret-up\"\n readonly=\"\"\n aria-label=\"\"\n aria-autocomplete=\"none\"\n aria-expanded=\"true\"\n aria-controls=\"checkid_list\"\n role=\"combobox\"\n size=\"big\"\n ></z-input>\n <div class=\"open\" tabindex=\"-1\">\n <div class=\"ul-scroll-wrapper\" tabindex=\"-1\">\n <z-list\n role=\"listbox\"\n aria-label=\"default\"\n tabindex=\"0\"\n id=\"checkid_list\"\n size=\"medium\"\n >\n <z-list-element\n clickable=\"\"\n aria-selected=\"false\"\n dividertype=\"element\"\n role=\"option\"\n tabindex=\"0\"\n class=\"\"\n id=\"checkid_0\"\n size=\"medium\"\n >\n <div class=\"list-element-container\">\n <span class=\"list-element-content\">item 0</span>\n <z-tag icon=\"teacher\"></z-tag>\n </div>\n </z-list-element>\n <z-list-element\n clickable=\"\"\n aria-selected=\"false\"\n dividertype=\"header\"\n role=\"option\"\n tabindex=\"0\"\n class=\"\"\n id=\"checkid_1\"\n size=\"medium\"\n >\n <div class=\"list-element-container\">\n <span class=\"list-element-content\">item 1</span>\n </div>\n </z-list-element>\n </z-list>\n </div>\n </div>\n <z-input-message class=\"big\"></z-input-message>\n </div>\n </z-select>\n `);\n });\n});\n"]}

package/dist/collection/components/z-select/index.stories.js CHANGED Viewed

@@ -25,19 +25,23 @@ const StoryMeta = {
         items: [
             {
                 id: "item_1",
+                name: "item_1",
                 selected: false,
             },
             {
                 id: "item_2",
+                name: "item_2",
                 selected: true,
             },
             {
                 id: "item_3",
+                name: "item_3",
                 selected: false,
                 disabled: true,
             },
             {
                 id: "item_4",
+                name: "item_4",
                 selected: false,
             },
         ],
@@ -87,33 +91,39 @@ export const Groups = {
         items: [
             {
                 id: "item_1",
+                name: "item_1",
                 selected: false,
                 category: "Gruppo 1",
             },
             {
                 id: "item_2",
+                name: "item_2",
                 selected: false,
                 category: "Gruppo 1",
             },
             {
                 id: "item_3",
+                name: "item_3",
                 selected: false,
                 category: "Gruppo 2",
                 disabled: true,
             },
             {
                 id: "item_4",
+                name: "item_4",
                 selected: false,
                 category: "Gruppo 2",
             },
             {
                 id: "item_5",
+                name: "item_5",
                 selected: false,
                 category: "Gruppo 3",
                 disabled: true,
             },
             {
                 id: "item_6",
+                name: "item_6",
                 selected: false,
                 category: "Gruppo 3",
             },
@@ -147,16 +157,19 @@ export const ZSelectWithIcons = {
         items: [
             {
                 id: "item_1",
+                name: "item_1",
                 selected: false,
                 icon: "teacher",
             },
             {
                 id: "item_2",
+                name: "item_2",
                 selected: false,
                 icon: "teacher",
             },
             {
                 id: "item_3",
+                name: "item_3",
                 selected: false,
                 disabled: true,
                 icon: "teacher",

package/dist/collection/components/z-select/index.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-select/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZSelect} from \".\";\nimport {ControlSize, InputStatus, SelectItem} from \"../../beans\";\nimport \"./index\";\n\nconst StoryMeta = {\n title: \"ZSelect\",\n component: \"z-select\",\n argTypes: {\n status: {\n control: {\n type: \"select\",\n labels: {\n null: \"-\",\n },\n },\n options: [null, ...Object.values(InputStatus)],\n },\n size: {\n control: {\n type: \"inline-radio\",\n },\n options: Object.values(ControlSize),\n },\n },\n args: {\n items: [\n {\n id: \"item_1\",\n selected: false,\n },\n {\n id: \"item_2\",\n selected: true,\n },\n {\n id: \"item_3\",\n selected: false,\n disabled: true,\n },\n {\n id: \"item_4\",\n selected: false,\n },\n ] as SelectItem[],\n label: \"this is the label\",\n ariaLabel: \"\",\n placeholder: \"select placeholder\",\n status: null,\n message: \"helper text\",\n size: ControlSize.BIG,\n disabled: false,\n readonly: false,\n htmlid: \"\",\n htmltitle: \"\",\n autocomplete: false,\n noresultslabel: \"Nessun risultato\",\n hasGroupItems: false,\n resetItem: \"\",\n isfixed: false,\n },\n} satisfies Meta<ZSelect>;\nexport default StoryMeta;\n\ntype Story = StoryObj<ZSelect>;\n\nexport const Default = {\n render: (args) => html`\n <z-select\n items=${JSON.stringify(args.items)}\n label=${args.label}\n aria-label=${args.ariaLabel}\n placeholder=${args.placeholder}\n name=${args.name}\n status=${args.status}\n message=${args.message}\n autocomplete=${args.autocomplete}\n noresultslabel=${args.noresultslabel}\n disabled=${args.disabled}\n readonly=${args.readonly}\n htmlid=${args.htmlid}\n htmltitle=${args.htmltitle}\n reset-item=${args.resetItem}\n isfixed=${args.isfixed}\n size=${args.size}\n ></z-select>\n `,\n} satisfies Story;\n\nexport const Groups = {\n args: {\n hasGroupItems: true,\n items: [\n {\n id: \"item_1\",\n selected: false,\n category: \"Gruppo 1\",\n },\n {\n id: \"item_2\",\n selected: false,\n category: \"Gruppo 1\",\n },\n {\n id: \"item_3\",\n selected: false,\n category: \"Gruppo 2\",\n disabled: true,\n },\n {\n id: \"item_4\",\n selected: false,\n category: \"Gruppo 2\",\n },\n {\n id: \"item_5\",\n selected: false,\n category: \"Gruppo 3\",\n disabled: true,\n },\n {\n id: \"item_6\",\n selected: false,\n category: \"Gruppo 3\",\n },\n ] as SelectItem[],\n },\n render: (args) => html`\n <z-select\n items=${JSON.stringify(args.items)}\n label=${args.label}\n aria-label=${args.ariaLabel}\n placeholder=${args.placeholder}\n name=${args.name}\n status=${args.status}\n message=${args.message}\n autocomplete=${args.autocomplete}\n noresultslabel=${args.noresultslabel}\n disabled=${args.disabled}\n readonly=${args.readonly}\n htmlid=${args.htmlid}\n htmltitle=${args.htmltitle}\n .hasGroupItems=${args.hasGroupItems}\n reset-item=${args.resetItem}\n isfixed=${args.isfixed}\n size=${args.size}\n ></z-select>\n `,\n} satisfies Story;\n\nexport const ZSelectWithIcons = {\n args: {\n hasGroupItems: true,\n items: [\n {\n id: \"item_1\",\n selected: false,\n icon: \"teacher\",\n },\n {\n id: \"item_2\",\n selected: false,\n icon: \"teacher\",\n },\n {\n id: \"item_3\",\n selected: false,\n disabled: true,\n icon: \"teacher\",\n },\n ] as SelectItem[],\n },\n render: (args) => html`\n <z-select\n items=${JSON.stringify(args.items)}\n label=${args.label}\n aria-label=${args.ariaLabel}\n placeholder=${args.placeholder}\n name=${args.name}\n status=${args.status}\n message=${args.message}\n autocomplete=${args.autocomplete}\n noresultslabel=${args.noresultslabel}\n disabled=${args.disabled}\n readonly=${args.readonly}\n htmlid=${args.htmlid}\n htmltitle=${args.htmltitle}\n reset-item=${args.resetItem}\n isfixed=${args.isfixed}\n size=${args.size}\n ></z-select>\n `,\n} satisfies Story;\n"]}
1	+ {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-select/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZSelect} from \".\";\nimport {ControlSize, InputStatus, SelectItem} from \"../../beans\";\nimport \"./index\";\n\nconst StoryMeta = {\n title: \"ZSelect\",\n component: \"z-select\",\n argTypes: {\n status: {\n control: {\n type: \"select\",\n labels: {\n null: \"-\",\n },\n },\n options: [null, ...Object.values(InputStatus)],\n },\n size: {\n control: {\n type: \"inline-radio\",\n },\n options: Object.values(ControlSize),\n },\n },\n args: {\n items: [\n {\n id: \"item_1\",\n name: \"item_1\",\n selected: false,\n },\n {\n id: \"item_2\",\n name: \"item_2\",\n selected: true,\n },\n {\n id: \"item_3\",\n name: \"item_3\",\n selected: false,\n disabled: true,\n },\n {\n id: \"item_4\",\n name: \"item_4\",\n selected: false,\n },\n ] as SelectItem[],\n label: \"this is the label\",\n ariaLabel: \"\",\n placeholder: \"select placeholder\",\n status: null,\n message: \"helper text\",\n size: ControlSize.BIG,\n disabled: false,\n readonly: false,\n htmlid: \"\",\n htmltitle: \"\",\n autocomplete: false,\n noresultslabel: \"Nessun risultato\",\n hasGroupItems: false,\n resetItem: \"\",\n isfixed: false,\n },\n} satisfies Meta<ZSelect>;\nexport default StoryMeta;\n\ntype Story = StoryObj<ZSelect>;\n\nexport const Default = {\n render: (args) => html`\n <z-select\n items=${JSON.stringify(args.items)}\n label=${args.label}\n aria-label=${args.ariaLabel}\n placeholder=${args.placeholder}\n name=${args.name}\n status=${args.status}\n message=${args.message}\n autocomplete=${args.autocomplete}\n noresultslabel=${args.noresultslabel}\n disabled=${args.disabled}\n readonly=${args.readonly}\n htmlid=${args.htmlid}\n htmltitle=${args.htmltitle}\n reset-item=${args.resetItem}\n isfixed=${args.isfixed}\n size=${args.size}\n ></z-select>\n `,\n} satisfies Story;\n\nexport const Groups = {\n args: {\n hasGroupItems: true,\n items: [\n {\n id: \"item_1\",\n name: \"item_1\",\n selected: false,\n category: \"Gruppo 1\",\n },\n {\n id: \"item_2\",\n name: \"item_2\",\n selected: false,\n category: \"Gruppo 1\",\n },\n {\n id: \"item_3\",\n name: \"item_3\",\n selected: false,\n category: \"Gruppo 2\",\n disabled: true,\n },\n {\n id: \"item_4\",\n name: \"item_4\",\n selected: false,\n category: \"Gruppo 2\",\n },\n {\n id: \"item_5\",\n name: \"item_5\",\n selected: false,\n category: \"Gruppo 3\",\n disabled: true,\n },\n {\n id: \"item_6\",\n name: \"item_6\",\n selected: false,\n category: \"Gruppo 3\",\n },\n ] as SelectItem[],\n },\n render: (args) => html`\n <z-select\n items=${JSON.stringify(args.items)}\n label=${args.label}\n aria-label=${args.ariaLabel}\n placeholder=${args.placeholder}\n name=${args.name}\n status=${args.status}\n message=${args.message}\n autocomplete=${args.autocomplete}\n noresultslabel=${args.noresultslabel}\n disabled=${args.disabled}\n readonly=${args.readonly}\n htmlid=${args.htmlid}\n htmltitle=${args.htmltitle}\n .hasGroupItems=${args.hasGroupItems}\n reset-item=${args.resetItem}\n isfixed=${args.isfixed}\n size=${args.size}\n ></z-select>\n `,\n} satisfies Story;\n\nexport const ZSelectWithIcons = {\n args: {\n hasGroupItems: true,\n items: [\n {\n id: \"item_1\",\n name: \"item_1\",\n selected: false,\n icon: \"teacher\",\n },\n {\n id: \"item_2\",\n name: \"item_2\",\n selected: false,\n icon: \"teacher\",\n },\n {\n id: \"item_3\",\n name: \"item_3\",\n selected: false,\n disabled: true,\n icon: \"teacher\",\n },\n ] as SelectItem[],\n },\n render: (args) => html`\n <z-select\n items=${JSON.stringify(args.items)}\n label=${args.label}\n aria-label=${args.ariaLabel}\n placeholder=${args.placeholder}\n name=${args.name}\n status=${args.status}\n message=${args.message}\n autocomplete=${args.autocomplete}\n noresultslabel=${args.noresultslabel}\n disabled=${args.disabled}\n readonly=${args.readonly}\n htmlid=${args.htmlid}\n htmltitle=${args.htmltitle}\n reset-item=${args.resetItem}\n isfixed=${args.isfixed}\n size=${args.size}\n ></z-select>\n `,\n} satisfies Story;\n"]}

package/dist/collection/components/z-select/styles.css CHANGED Viewed

@@ -82,6 +82,7 @@
 .select-wrapper .ul-scroll-wrapper z-list z-list-element .list-element-container {
   display: flex;
   align-items: center;
+  justify-content: space-between;
   padding-left: calc(var(--space-unit) * 1.5);
 }
@@ -90,6 +91,10 @@
   padding: calc(var(--space-unit) * 0.5) 0;
 }
+.select-wrapper .ul-scroll-wrapper z-list z-list-element .list-element-container > z-tag {
+  margin-right: calc(var(--space-unit));
+}
 .select-wrapper .ul-scroll-wrapper z-list z-list-element .list-element-container > z-icon + .list-element-content {
   display: block;
   padding: calc(var(--space-unit) * 0.5) var(--space-unit);

package/dist/collection/components/z-select/test.e2e.js ADDED Viewed

@@ -0,0 +1,121 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe("z-select test end2end", () => {
+    it("Should open the select list", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+      <z-select
+        items='[{"id":"item_1","selected":false,"name":"item_1"},{"id":"item_2","selected":true,"name":"item_2"}]'
+        label="this is the label"
+      ></z-select>
+    `);
+        await page.locator("z-select").click();
+        await page.waitForChanges();
+        expect((await page.find("z-select input")).getAttribute("aria-expanded")).toBe("true");
+    });
+    it("Should select an item from the list and then close the select list", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+      <z-select
+        items='[{"id":"item_1","selected":false,"name":"item_1"},{"id":"item_2","selected":true,"name":"item_2"},{"id":"item_3","selected":false,"name":"item_3"}]'
+        label="this is the label"
+      ></z-select>
+    `);
+        const optionSelectEvent = await page.spyOnEvent("optionSelect");
+        await page.locator("z-select").click();
+        await page.waitForChanges();
+        await page.locator("z-select z-list-element").click();
+        await page.waitForChanges();
+        expect((await page.find("z-select input")).getAttribute("aria-expanded")).toBe("false");
+        expect(optionSelectEvent).toHaveReceivedEvent();
+    });
+    it("Should close the select list when clicking outside the component", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+      <div>
+        <z-input class="outside-element"></z-input>
+        <z-select
+          items='[{"id":"item_1","selected":false,"name":"item_1"},{"id":"item_2","selected":true,"name":"item_2"},{"id":"item_3","selected":false,"name":"item_3"}]'
+          label="this is the label"
+        ></z-select>
+      </div>
+    `);
+        await page.locator("z-select").click();
+        await page.waitForChanges();
+        expect((await page.find("z-select input")).getAttribute("aria-expanded")).toBe("true");
+        await page.locator(".outside-element").click();
+        await page.waitForChanges();
+        expect((await page.find("z-select input")).getAttribute("aria-expanded")).toBe("false");
+    });
+    it("Should close the select list when pressing ESC key", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+        <z-select
+          items='[{"id":"item_1","selected":false,"name":"item_1"},{"id":"item_2","selected":true,"name":"item_2"},{"id":"item_3","selected":false,"name":"item_3"}]'
+          label="this is the label"
+        ></z-select>
+    `);
+        await page.locator("z-select").click();
+        await page.waitForChanges();
+        expect((await page.find("z-select input")).getAttribute("aria-expanded")).toBe("true");
+        await page.keyboard.press("Escape");
+        await page.waitForChanges();
+        expect((await page.find("z-select input")).getAttribute("aria-expanded")).toBe("false");
+    });
+    it("Should filter the items list based on the input value", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+      <z-select
+        items='[{"id":"item_1","selected":false,"name":"item_1"},{"id":"item_2","selected":true,"name":"item_2"},{"id":"item_3","selected":true,"name":"item_3"}]'
+        label="this is the label"
+        autocomplete="true"
+      ></z-select>
+    `);
+        await page.locator("z-select").click();
+        await page.waitForChanges();
+        expect((await page.find("z-select input")).getAttribute("aria-expanded")).toBe("true");
+        expect((await page.$$("z-list-element")).length).toBe(3);
+        await (await page.find("z-select input")).press("1");
+        await page.waitForChanges();
+        expect((await page.$$("z-list-element")).length).toBe(1);
+        expect((await page.find("z-list-element span")).innerText).toBe("item_1");
+    });
+    it("Should emit resetSelect event when reset item is enabled and clicked", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+      <z-select
+        items='[{"id":"item_1","selected":false,"name":"item_1"},{"id":"item_2","selected":true,"name":"item_2"},{"id":"item_3","selected":true,"name":"item_3"}]'
+        label="this is the label"
+        autocomplete="true"
+        reset-item="cancella"
+      ></z-select>
+    `);
+        const resetSelectEvent = await page.spyOnEvent("resetSelect");
+        await page.locator("z-select").click();
+        await page.waitForChanges();
+        await page.locator("z-list-element.reset-item").click();
+        await page.waitForChanges();
+        expect(resetSelectEvent).toHaveReceivedEvent();
+    });
+    it("Should select an item from the list using keyboard navigation", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+      <z-select
+        items='[{"id":"item_1","selected":false,"name":"item_1"},{"id":"item_2","selected":true,"name":"item_2"},{"id":"item_3","selected":true,"name":"item_3"}]'
+        label="this is the label"
+      ></z-select>
+    `);
+        const select = await page.find("z-select");
+        expect(await select.callMethod("getValue")).toBe("item_2");
+        await (await page.find("body")).press("Tab");
+        await select.press("Enter");
+        await page.waitForChanges();
+        expect((await page.find("z-select input")).getAttribute("aria-expanded")).toBe("true");
+        await select.press("ArrowDown");
+        await page.waitForChanges();
+        await select.press("Enter");
+        await page.waitForChanges();
+        expect((await page.find("z-select input")).getAttribute("aria-expanded")).toBe("false");
+        expect(await select.callMethod("getValue")).toBe("item_1");
+    });
+});
+//# sourceMappingURL=test.e2e.js.map

package/dist/collection/components/z-select/test.e2e.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"test.e2e.js","sourceRoot":"","sources":["../../../../src/components/z-select/test.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import {newE2EPage} from \"@stencil/core/testing\";\n\ndescribe(\"z-select test end2end\", () => {\n it(\"Should open the select list\", async () => {\n const page = await newE2EPage();\n\n await page.setContent(`\n <z-select\n items='[{\"id\":\"item_1\",\"selected\":false,\"name\":\"item_1\"},{\"id\":\"item_2\",\"selected\":true,\"name\":\"item_2\"}]'\n label=\"this is the label\"\n ></z-select>\n `);\n\n await page.locator(\"z-select\").click();\n await page.waitForChanges();\n\n expect((await page.find(\"z-select input\")).getAttribute(\"aria-expanded\")).toBe(\"true\");\n });\n\n it(\"Should select an item from the list and then close the select list\", async () => {\n const page = await newE2EPage();\n\n await page.setContent(`\n <z-select\n items='[{\"id\":\"item_1\",\"selected\":false,\"name\":\"item_1\"},{\"id\":\"item_2\",\"selected\":true,\"name\":\"item_2\"},{\"id\":\"item_3\",\"selected\":false,\"name\":\"item_3\"}]'\n label=\"this is the label\"\n ></z-select>\n `);\n const optionSelectEvent = await page.spyOnEvent(\"optionSelect\");\n\n await page.locator(\"z-select\").click();\n await page.waitForChanges();\n\n await page.locator(\"z-select z-list-element\").click();\n await page.waitForChanges();\n\n expect((await page.find(\"z-select input\")).getAttribute(\"aria-expanded\")).toBe(\"false\");\n expect(optionSelectEvent).toHaveReceivedEvent();\n });\n\n it(\"Should close the select list when clicking outside the component\", async () => {\n const page = await newE2EPage();\n\n await page.setContent(`\n <div>\n <z-input class=\"outside-element\"></z-input>\n <z-select\n items='[{\"id\":\"item_1\",\"selected\":false,\"name\":\"item_1\"},{\"id\":\"item_2\",\"selected\":true,\"name\":\"item_2\"},{\"id\":\"item_3\",\"selected\":false,\"name\":\"item_3\"}]'\n label=\"this is the label\"\n ></z-select>\n </div>\n `);\n\n await page.locator(\"z-select\").click();\n await page.waitForChanges();\n\n expect((await page.find(\"z-select input\")).getAttribute(\"aria-expanded\")).toBe(\"true\");\n\n await page.locator(\".outside-element\").click();\n await page.waitForChanges();\n\n expect((await page.find(\"z-select input\")).getAttribute(\"aria-expanded\")).toBe(\"false\");\n });\n\n it(\"Should close the select list when pressing ESC key\", async () => {\n const page = await newE2EPage();\n\n await page.setContent(`\n <z-select\n items='[{\"id\":\"item_1\",\"selected\":false,\"name\":\"item_1\"},{\"id\":\"item_2\",\"selected\":true,\"name\":\"item_2\"},{\"id\":\"item_3\",\"selected\":false,\"name\":\"item_3\"}]'\n label=\"this is the label\"\n ></z-select>\n `);\n\n await page.locator(\"z-select\").click();\n await page.waitForChanges();\n\n expect((await page.find(\"z-select input\")).getAttribute(\"aria-expanded\")).toBe(\"true\");\n\n await page.keyboard.press(\"Escape\");\n await page.waitForChanges();\n\n expect((await page.find(\"z-select input\")).getAttribute(\"aria-expanded\")).toBe(\"false\");\n });\n\n it(\"Should filter the items list based on the input value\", async () => {\n const page = await newE2EPage();\n\n await page.setContent(`\n <z-select\n items='[{\"id\":\"item_1\",\"selected\":false,\"name\":\"item_1\"},{\"id\":\"item_2\",\"selected\":true,\"name\":\"item_2\"},{\"id\":\"item_3\",\"selected\":true,\"name\":\"item_3\"}]'\n label=\"this is the label\"\n autocomplete=\"true\"\n ></z-select>\n `);\n\n await page.locator(\"z-select\").click();\n await page.waitForChanges();\n expect((await page.find(\"z-select input\")).getAttribute(\"aria-expanded\")).toBe(\"true\");\n expect((await page.$$(\"z-list-element\")).length).toBe(3);\n\n await (await page.find(\"z-select input\")).press(\"1\");\n await page.waitForChanges();\n\n expect((await page.$$(\"z-list-element\")).length).toBe(1);\n expect((await page.find(\"z-list-element span\")).innerText).toBe(\"item_1\");\n });\n\n it(\"Should emit resetSelect event when reset item is enabled and clicked\", async () => {\n const page = await newE2EPage();\n\n await page.setContent(`\n <z-select\n items='[{\"id\":\"item_1\",\"selected\":false,\"name\":\"item_1\"},{\"id\":\"item_2\",\"selected\":true,\"name\":\"item_2\"},{\"id\":\"item_3\",\"selected\":true,\"name\":\"item_3\"}]'\n label=\"this is the label\"\n autocomplete=\"true\"\n reset-item=\"cancella\"\n ></z-select>\n `);\n const resetSelectEvent = await page.spyOnEvent(\"resetSelect\");\n\n await page.locator(\"z-select\").click();\n await page.waitForChanges();\n\n await page.locator(\"z-list-element.reset-item\").click();\n await page.waitForChanges();\n\n expect(resetSelectEvent).toHaveReceivedEvent();\n });\n\n it(\"Should select an item from the list using keyboard navigation\", async () => {\n const page = await newE2EPage();\n\n await page.setContent(`\n <z-select\n items='[{\"id\":\"item_1\",\"selected\":false,\"name\":\"item_1\"},{\"id\":\"item_2\",\"selected\":true,\"name\":\"item_2\"},{\"id\":\"item_3\",\"selected\":true,\"name\":\"item_3\"}]'\n label=\"this is the label\"\n ></z-select>\n `);\n\n const select = await page.find(\"z-select\");\n expect(await select.callMethod(\"getValue\")).toBe(\"item_2\");\n\n await (await page.find(\"body\")).press(\"Tab\");\n await select.press(\"Enter\");\n await page.waitForChanges();\n\n expect((await page.find(\"z-select input\")).getAttribute(\"aria-expanded\")).toBe(\"true\");\n\n await select.press(\"ArrowDown\");\n await page.waitForChanges();\n\n await select.press(\"Enter\");\n await page.waitForChanges();\n\n expect((await page.find(\"z-select input\")).getAttribute(\"aria-expanded\")).toBe(\"false\");\n expect(await select.callMethod(\"getValue\")).toBe(\"item_1\");\n });\n});\n"]}

package/dist/collection/components/z-tag/styles.css CHANGED Viewed

@@ -31,6 +31,10 @@
   transition: margin-right 0.3s ease-out 0s;
 }
+:host > z-icon:has(+ div:empty) {
+  margin-right: 0;
+}
 :host(.expandable) > div {
   overflow: hidden;
   max-width: 0;

package/dist/collection/components/z-toggle-button/test.e2e.js ADDED Viewed

@@ -0,0 +1,12 @@
+import { newE2EPage } from "@stencil/core/testing";
+it("Clicks on toggle button and checks event", async () => {
+    const page = await newE2EPage({
+        html: '<z-toggle-button label="Toggle" isdisabled="false" opened="false"></z-toggle-button>',
+    });
+    const toggle = await page.find("z-toggle-button >>> button");
+    const clickEvent = await page.spyOnEvent("toggleClick");
+    await toggle.click();
+    await page.waitForChanges();
+    expect(clickEvent).toHaveReceivedEvent();
+});
+//# sourceMappingURL=test.e2e.js.map

package/dist/collection/components/z-toggle-button/test.e2e.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"test.e2e.js","sourceRoot":"","sources":["../../../../src/components/z-toggle-button/test.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAC,MAAM,uBAAuB,CAAC;AAEjD,EAAE,CAAC,0CAA0C,EAAE,KAAK,IAAI,EAAE;IACxD,MAAM,IAAI,GAAG,MAAM,UAAU,CAAC;QAC5B,IAAI,EAAE,sFAAsF;KAC7F,CAAC,CAAC;IACH,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,4BAA4B,CAAC,CAAC;IAC7D,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;IACxD,MAAM,MAAM,CAAC,KAAK,EAAE,CAAC;IACrB,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,CAAC,UAAU,CAAC,CAAC,mBAAmB,EAAE,CAAC;AAC3C,CAAC,CAAC,CAAC","sourcesContent":["import {newE2EPage} from \"@stencil/core/testing\";\n\nit(\"Clicks on toggle button and checks event\", async () => {\n const page = await newE2EPage({\n html: '<z-toggle-button label=\"Toggle\" isdisabled=\"false\" opened=\"false\"></z-toggle-button>',\n });\n const toggle = await page.find(\"z-toggle-button >>> button\");\n const clickEvent = await page.spyOnEvent(\"toggleClick\");\n await toggle.click();\n await page.waitForChanges();\n\n expect(clickEvent).toHaveReceivedEvent();\n});\n"]}

package/dist/collection/components/z-toggle-switch/test.e2e.js ADDED Viewed

@@ -0,0 +1,22 @@
+import { newE2EPage } from "@stencil/core/testing";
+it("Clicks on toggle switch and checks event detail", async () => {
+    const page = await newE2EPage({
+        html: '<z-toggle-switch htmlid="abcdefg" label-position="left" disabled="false">Toggle</z-toggle-switch>',
+    });
+    const toggle = await page.find("z-toggle-switch");
+    const clickEvent = await page.spyOnEvent("toggleClick");
+    await toggle.click();
+    await page.waitForChanges();
+    expect(clickEvent).toHaveReceivedEventDetail({ checked: true, id: "abcdefg" });
+});
+it("Clicks on toggle switch when disabled", async () => {
+    const page = await newE2EPage({
+        html: '<z-toggle-switch htmlid="abcdefg" label-position="left" disabled="true">Toggle</z-toggle-switch>',
+    });
+    const toggle = await page.find("z-toggle-switch");
+    const clickEvent = await page.spyOnEvent("toggleClick");
+    await toggle.click();
+    await page.waitForChanges();
+    expect(clickEvent).not.toHaveReceivedEvent();
+});
+//# sourceMappingURL=test.e2e.js.map

package/dist/collection/components/z-toggle-switch/test.e2e.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"test.e2e.js","sourceRoot":"","sources":["../../../../src/components/z-toggle-switch/test.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAC,MAAM,uBAAuB,CAAC;AAEjD,EAAE,CAAC,iDAAiD,EAAE,KAAK,IAAI,EAAE;IAC/D,MAAM,IAAI,GAAG,MAAM,UAAU,CAAC;QAC5B,IAAI,EAAE,mGAAmG;KAC1G,CAAC,CAAC;IACH,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;IAClD,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;IACxD,MAAM,MAAM,CAAC,KAAK,EAAE,CAAC;IAErB,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,UAAU,CAAC,CAAC,yBAAyB,CAAC,EAAC,OAAO,EAAE,IAAI,EAAE,EAAE,EAAE,SAAS,EAAC,CAAC,CAAC;AAC/E,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,uCAAuC,EAAE,KAAK,IAAI,EAAE;IACrD,MAAM,IAAI,GAAG,MAAM,UAAU,CAAC;QAC5B,IAAI,EAAE,kGAAkG;KACzG,CAAC,CAAC;IACH,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;IAClD,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;IACxD,MAAM,MAAM,CAAC,KAAK,EAAE,CAAC;IAErB,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,mBAAmB,EAAE,CAAC;AAC/C,CAAC,CAAC,CAAC","sourcesContent":["import {newE2EPage} from \"@stencil/core/testing\";\n\nit(\"Clicks on toggle switch and checks event detail\", async () => {\n const page = await newE2EPage({\n html: '<z-toggle-switch htmlid=\"abcdefg\" label-position=\"left\" disabled=\"false\">Toggle</z-toggle-switch>',\n });\n const toggle = await page.find(\"z-toggle-switch\");\n const clickEvent = await page.spyOnEvent(\"toggleClick\");\n await toggle.click();\n\n await page.waitForChanges();\n expect(clickEvent).toHaveReceivedEventDetail({checked: true, id: \"abcdefg\"});\n});\n\nit(\"Clicks on toggle switch when disabled\", async () => {\n const page = await newE2EPage({\n html: '<z-toggle-switch htmlid=\"abcdefg\" label-position=\"left\" disabled=\"true\">Toggle</z-toggle-switch>',\n });\n const toggle = await page.find(\"z-toggle-switch\");\n const clickEvent = await page.spyOnEvent(\"toggleClick\");\n await toggle.click();\n\n await page.waitForChanges();\n expect(clickEvent).not.toHaveReceivedEvent();\n});\n"]}