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

@zanichelli/albe-web-components 16.0.0-rc3 → 16.1.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.

Files changed (160) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../src/components/z-searchbar/index.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZSearchbar} from \"./index\";\n\nglobal.ResizeObserver = jest.fn().mockImplementation(() => ({\n observe: jest.fn(),\n unobserve: jest.fn(),\n disconnect: jest.fn(),\n}));\n\ndescribe(\"Suite test ZSearchbar\", () => {\n it(\"Simple searchbar\", async () => {\n const page = await newSpecPage({\n components: [ZSearchbar],\n html: `<z-searchbar htmlid=\"my-id\" show-search-button=\"true\"></z-searchbar>`,\n });\n expect(page.root).toEqualHtml(`\n <z-searchbar class=\"has-submit\" htmlid=\"my-id\" show-search-button=\"true\">\n <mock:shadow-root>\n <div class=\"input-container\">\n <z-input size=\"big\"></z-input>\n </div>\n <z-button size=\"big\" variant=\"primary\">CERCA</z-button>\n </mock:shadow-root>\n </z-searchbar>\n `);\n });\n\n it(\"Autocomplete searchbar without search\", async () => {\n const page = await newSpecPage({\n components: [ZSearchbar],\n html: `<z-searchbar htmlid=\"my-id\" autocomplete=\"true\" prevent-submit=\"true\"></z-searchbar>`,\n });\n expect(page.root).toEqualHtml(`\n <z-searchbar class=\"has-results\" htmlid=\"my-id\" autocomplete=\"true\" prevent-submit=\"true\">\n <mock:shadow-root>\n <div class=\"input-container\">\n <z-input size=\"big\"></z-input>\n </div>\n </mock:shadow-root>\n </z-searchbar>\n `);\n });\n\n it(\"Autocomplete searchbar with search and results - no input search\", async () => {\n const page = await newSpecPage({\n components: [ZSearchbar],\n html: `<z-searchbar\n htmlid=\"my-id\"\n autocomplete=\"true\"\n results-items='${JSON.stringify(getItems())}'\n show-search-button=\"true\"\n ></z-searchbar>`,\n });\n expect(page.root).toEqualHtml(`\n <z-searchbar\n class=\"has-submit has-results\"\n htmlid=\"my-id\"\n autocomplete=\"true\"\n results-items='${JSON.stringify(getItems())}'\n show-search-button=\"true\"\n >\n <mock:shadow-root>\n <div class=\"input-container\">\n <z-input size=\"big\"></z-input>\n </div>\n <z-button size=\"big\" variant=\"primary\">CERCA</z-button>\n </mock:shadow-root>\n </z-searchbar>\n `);\n });\n\n it(\"Autocomplete searchbar with search and results - with input search\", async () => {\n const page = await newSpecPage({\n components: [ZSearchbar],\n html: `<z-searchbar\n htmlid=\"my-id\"\n autocomplete=\"true\"\n results-items='${JSON.stringify(getItems())}'\n show-search-button=\"true\"\n ></z-searchbar>`,\n });\n page.rootInstance.searchString = \"item\";\n page.rootInstance.showResults = true;\n await page.waitForChanges();\n expect(page.root).toEqualHtml(`\n <z-searchbar\n class=\"has-submit has-results\"\n htmlid=\"my-id\"\n autocomplete=\"true\"\n results-items='${JSON.stringify(getItems())}'\n show-search-button=\"true\"\n >\n <mock:shadow-root>\n <div class=\"input-container\">\n <z-input size=\"big\"></z-input>\n <div class=\"results-wrapper\">\n <div class=\"results\">\n <z-list role=\"listbox\" id=\"list-my-id\">\n ${searchHelper()}\n ${resultsItems()}\n </z-list>\n </div>\n </div>\n </div>\n <z-button size=\"big\" variant=\"primary\">CERCA</z-button>\n </mock:shadow-root>\n </z-searchbar>\n `);\n });\n\n it(\"Autocomplete searchbar with search and limited results - with input search\", async () => {\n const page = await newSpecPage({\n components: [ZSearchbar],\n html: `<z-searchbar\n htmlid=\"my-id\"\n autocomplete=\"true\"\n results-items='${JSON.stringify(getItems())}'\n results-count=\"1\"\n show-search-button=\"true\"\n ></z-searchbar>`,\n });\n page.rootInstance.searchString = \"item\";\n page.rootInstance.showResults = true;\n await page.waitForChanges();\n expect(page.root).toEqualHtml(`\n <z-searchbar\n class=\"has-submit has-results\"\n htmlid=\"my-id\"\n autocomplete=\"true\"\n results-items='${JSON.stringify(getItems())}'\n results-count=\"1\"\n show-search-button=\"true\"\n >\n <mock:shadow-root>\n <div class=\"input-container\">\n <z-input size=\"big\"></z-input>\n <div class=\"results-wrapper\">\n <div class=\"results\">\n <z-list role=\"listbox\" id=\"list-my-id\">\n ${searchHelper()}\n <z-list-group divider-type=\"element\">\n <z-list-element\n id=\"list-item-my-id-0\"\n role=\"option\"\n tabindex=\"0\"\n dividerType=\"element\"\n clickable\n >\n <div class=\"list-element\">\n <span class=\"item ellipsis\">\n <z-icon class=\"item-icon\" name=\"download\"></z-icon>\n <span class=\"item-label\" title=\"item 1\"><mark>item</mark> 1</span>\n </span>\n </div>\n </z-list-element>\n </z-list-group>\n ${showAllResults()}\n </z-list>\n </div>\n </div>\n </div>\n <z-button size=\"big\" variant=\"primary\">CERCA</z-button>\n </mock:shadow-root>\n </z-searchbar>\n `);\n });\n\n it(\"Autocomplete searchbar with search and limited results (show all) - with input search\", async () => {\n const page = await newSpecPage({\n components: [ZSearchbar],\n html: `<z-searchbar\n htmlid=\"my-id\"\n autocomplete=\"true\"\n results-items='${JSON.stringify(getItems())}'\n show-search-button=\"true\"\n ></z-searchbar>`,\n });\n page.rootInstance.searchString = \"item\";\n page.rootInstance.showResults = true;\n page.rootInstance.currResultsCount = 0;\n await page.waitForChanges();\n expect(page.root).toEqualHtml(`\n <z-searchbar\n class=\"has-submit has-results\"\n htmlid=\"my-id\"\n autocomplete=\"true\"\n results-items='${JSON.stringify(getItems())}'\n show-search-button=\"true\"\n >\n <mock:shadow-root>\n <div class=\"input-container\">\n <z-input size=\"big\"></z-input>\n <div class=\"results-wrapper\">\n <div class=\"results\">\n <z-list role=\"listbox\" id=\"list-my-id\">\n ${searchHelper()}\n ${resultsItems()}\n </z-list>\n </div>\n </div>\n </div>\n <z-button size=\"big\" variant=\"primary\">CERCA</z-button>\n </mock:shadow-root>\n </z-searchbar>\n `);\n });\n\n it(\"Autocomplete searchbar without search and no results - with input search\", async () => {\n const page = await newSpecPage({\n components: [ZSearchbar],\n html: `<z-searchbar\n htmlid=\"my-id\"\n autocomplete=\"true\"\n prevent-submit=\"true\"\n results-items='[]'\n ></z-searchbar>`,\n });\n page.rootInstance.searchString = \"item\";\n page.rootInstance.showResults = true;\n page.rootInstance.currResultsCount = 0;\n await page.waitForChanges();\n expect(page.root).toEqualHtml(`\n <z-searchbar\n class=\"has-results\"\n htmlid=\"my-id\"\n autocomplete=\"true\"\n prevent-submit=\"true\"\n results-items=\"[]\"\n >\n <mock:shadow-root>\n <div class=\"input-container\">\n <z-input size=\"big\"></z-input>\n <div class=\"results-wrapper\">\n <div class=\"results\">\n <span class=\"item item-no-results\">\n Non abbiamo trovato risultati per <b>item</b>\n <br /><br />\n Cosa puoi fare?\n <ul>\n <li>Verificare di aver scritto bene</li>\n <li>Provare a cercare un'altra parola</li>\n <li>Provare a cercare qualcosa di più generico</li>\n </ul>\n </span>\n </div>\n </div>\n </div>\n </mock:shadow-root>\n </z-searchbar>\n `);\n });\n\n it(\"Autocomplete searchbar with search and no results - with input search\", async () => {\n const page = await newSpecPage({\n components: [ZSearchbar],\n html: `<z-searchbar\n htmlid=\"my-id\"\n autocomplete=\"true\"\n results-items='[]'\n show-search-button=\"true\"\n ></z-searchbar>`,\n });\n page.rootInstance.searchString = \"item\";\n page.rootInstance.showResults = true;\n page.rootInstance.currResultsCount = 0;\n await page.waitForChanges();\n expect(page.root).toEqualHtml(`\n <z-searchbar\n class=\"has-submit has-results\"\n htmlid=\"my-id\"\n autocomplete=\"true\"\n results-items='[]'\n show-search-button=\"true\"\n >\n <mock:shadow-root>\n <div class=\"input-container\">\n <z-input size=\"big\"></z-input>\n <div class=\"results-wrapper\">\n <div class=\"results\">\n <z-list role=\"listbox\" id=\"list-my-id\">\n ${searchHelper(false)}\n </z-list>\n </div>\n </div>\n </div>\n <z-button size=\"big\" variant=\"primary\">CERCA</z-button>\n </mock:shadow-root>\n </z-searchbar>\n `);\n });\n\n it(\"Simple searchbar change size\", async () => {\n const page = await newSpecPage({\n components: [ZSearchbar],\n html: `<z-searchbar htmlid=\"my-id\" show-search-button=\"true\" size=\"small\"></z-searchbar>`,\n });\n expect(page.root).toEqualHtml(`\n <z-searchbar class=\"has-submit\" htmlid=\"my-id\" show-search-button=\"true\" size=\"small\">\n <mock:shadow-root>\n <div class=\"input-container\">\n <z-input size=\"small\"></z-input>\n </div>\n <z-button size=\"small\" variant=\"primary\">CERCA</z-button>\n </mock:shadow-root>\n </z-searchbar>\n `);\n });\n\n it(\"Simple searchbar change button variant\", async () => {\n const page = await newSpecPage({\n components: [ZSearchbar],\n html: `<z-searchbar htmlid=\"my-id\" show-search-button=\"true\" variant=\"secondary\"></z-searchbar>`,\n });\n expect(page.root).toEqualHtml(`\n <z-searchbar class=\"has-submit\" htmlid=\"my-id\" show-search-button=\"true\" variant=\"secondary\">\n <mock:shadow-root>\n <div class=\"input-container\">\n <z-input size=\"big\"></z-input>\n </div>\n <z-button size=\"big\" variant=\"secondary\">CERCA</z-button>\n </mock:shadow-root>\n </z-searchbar>\n `);\n });\n\n it(\"Simple searchbar only icon button\", async () => {\n const page = await newSpecPage({\n components: [ZSearchbar],\n html: `<z-searchbar htmlid=\"my-id\" show-search-button=\"true\" search-button-icon-only=\"true\"></z-searchbar>`,\n });\n expect(page.root).toEqualHtml(`\n <z-searchbar class=\"has-submit\" htmlid=\"my-id\" show-search-button=\"true\" search-button-icon-only=\"true\">\n <mock:shadow-root>\n <div class=\"input-container\">\n <z-input size=\"big\"></z-input>\n </div>\n <z-button icon=\"search\" size=\"big\" variant=\"primary\"></z-button>\n </mock:shadow-root>\n </z-searchbar>\n `);\n });\n});\n\nconst getItems = () => [{label: \"item 1\", icon: \"download\"}, {label: \"item 2\"}, {label: \"item 3\"}];\n\nconst resultsItems = () => `\n <z-list-group divider-type=\"element\">\n <z-list-element\n id=\"list-item-my-id-0\"\n role=\"option\"\n tabindex=\"0\"\n dividerType=\"element\"\n clickable\n >\n <div class=\"list-element\">\n <span class=\"item ellipsis\">\n <z-icon class=\"item-icon\" name=\"download\"></z-icon>\n <span class=\"item-label\" title=\"item 1\"><mark>item</mark> 1</span>\n </span>\n </div>\n </z-list-element>\n <z-list-element\n id=\"list-item-my-id-1\"\n role=\"option\"\n tabindex=\"0\"\n dividerType=\"element\"\n clickable\n >\n <div class=\"list-element\">\n <span class=\"item ellipsis\">\n <span class=\"item-label\" title=\"item 2\"><mark>item</mark> 2</span>\n </span>\n </div>\n </z-list-element>\n <z-list-element\n id=\"list-item-my-id-2\"\n role=\"option\"\n tabindex=\"0\"\n clickable\n >\n <div class=\"list-element\">\n <span class=\"item ellipsis\">\n <span class=\"item-label\" title=\"item 3\"><mark>item</mark> 3</span>\n </span>\n </div>\n </z-list-element>\n </z-list-group>`;\n\nconst searchHelper = (divider: boolean = true) => `\n <z-list-element\n role=\"option\"\n tabindex=\"0\"\n ${divider ? `dividerType=\"element\"` : ``}\n id=\"list-item-my-id-search\"\n clickable\n >\n <span class=\"item item-search\">\n <z-icon class=\"search-icon\" name=\"left-magnifying-glass\"></z-icon>\n <span class=\"item-label\">Cerca <mark>item</mark></span>\n </span>\n </z-list-element>\n`;\n\nconst showAllResults = () => `\n <z-list-element\n role=\"option\"\n tabindex=\"0\"\n id=\"list-item-my-id-show-all\"\n clickable\n color=\"color-primary01\"\n >\n <div class=\"item-show-all\">Vedi tutti i risultati</div>\n </z-list-element>\n`;\n"]}
1	+ {"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../src/components/z-searchbar/index.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZSearchbar} from \"./index\";\n\nglobal.ResizeObserver = jest.fn().mockImplementation(() => ({\n observe: jest.fn(),\n unobserve: jest.fn(),\n disconnect: jest.fn(),\n}));\n\ndescribe(\"Suite test ZSearchbar\", () => {\n it(\"Simple searchbar\", async () => {\n const page = await newSpecPage({\n components: [ZSearchbar],\n html: `<z-searchbar htmlid=\"my-id\" show-search-button=\"true\"></z-searchbar>`,\n });\n expect(page.root).toEqualHtml(`\n <z-searchbar class=\"has-submit\" htmlid=\"my-id\" show-search-button=\"true\">\n <mock:shadow-root>\n <div class=\"input-container\">\n <z-input size=\"big\"></z-input>\n </div>\n <z-button size=\"big\" variant=\"primary\">CERCA</z-button>\n </mock:shadow-root>\n </z-searchbar>\n `);\n });\n\n it(\"Autocomplete searchbar without search\", async () => {\n const page = await newSpecPage({\n components: [ZSearchbar],\n html: `<z-searchbar htmlid=\"my-id\" autocomplete=\"true\" prevent-submit=\"true\"></z-searchbar>`,\n });\n expect(page.root).toEqualHtml(`\n <z-searchbar class=\"has-results\" htmlid=\"my-id\" autocomplete=\"true\" prevent-submit=\"true\">\n <mock:shadow-root>\n <div class=\"input-container\">\n <z-input size=\"big\"></z-input>\n </div>\n </mock:shadow-root>\n </z-searchbar>\n `);\n });\n\n it(\"Autocomplete searchbar with search and results - no input search\", async () => {\n const page = await newSpecPage({\n components: [ZSearchbar],\n html: `<z-searchbar\n htmlid=\"my-id\"\n autocomplete=\"true\"\n results-items='${JSON.stringify(getItems())}'\n show-search-button=\"true\"\n ></z-searchbar>`,\n });\n expect(page.root).toEqualHtml(`\n <z-searchbar\n class=\"has-submit has-results\"\n htmlid=\"my-id\"\n autocomplete=\"true\"\n results-items='${JSON.stringify(getItems())}'\n show-search-button=\"true\"\n >\n <mock:shadow-root>\n <div class=\"input-container\">\n <z-input size=\"big\"></z-input>\n </div>\n <z-button size=\"big\" variant=\"primary\">CERCA</z-button>\n </mock:shadow-root>\n </z-searchbar>\n `);\n });\n\n it(\"Autocomplete searchbar with search and results - with input search\", async () => {\n const page = await newSpecPage({\n components: [ZSearchbar],\n html: `<z-searchbar\n htmlid=\"my-id\"\n autocomplete=\"true\"\n results-items='${JSON.stringify(getItems())}'\n show-search-button=\"true\"\n ></z-searchbar>`,\n });\n page.rootInstance.searchString = \"item\";\n page.rootInstance.showResults = true;\n await page.waitForChanges();\n expect(page.root).toEqualHtml(`\n <z-searchbar\n class=\"has-submit has-results\"\n htmlid=\"my-id\"\n autocomplete=\"true\"\n results-items='${JSON.stringify(getItems())}'\n show-search-button=\"true\"\n >\n <mock:shadow-root>\n <div class=\"input-container\">\n <z-input size=\"big\"></z-input>\n <div class=\"results-wrapper\">\n <div class=\"results\">\n <z-list role=\"listbox\" id=\"list-my-id\">\n ${searchHelper()}\n ${resultsItems()}\n </z-list>\n </div>\n </div>\n </div>\n <z-button size=\"big\" variant=\"primary\">CERCA</z-button>\n </mock:shadow-root>\n </z-searchbar>\n `);\n });\n\n it(\"Autocomplete searchbar with search and limited results - with input search\", async () => {\n const page = await newSpecPage({\n components: [ZSearchbar],\n html: `<z-searchbar\n htmlid=\"my-id\"\n autocomplete=\"true\"\n results-items='${JSON.stringify(getItems())}'\n results-count=\"1\"\n show-search-button=\"true\"\n ></z-searchbar>`,\n });\n page.rootInstance.searchString = \"item\";\n page.rootInstance.showResults = true;\n await page.waitForChanges();\n expect(page.root).toEqualHtml(`\n <z-searchbar\n class=\"has-submit has-results\"\n htmlid=\"my-id\"\n autocomplete=\"true\"\n results-items='${JSON.stringify(getItems())}'\n results-count=\"1\"\n show-search-button=\"true\"\n >\n <mock:shadow-root>\n <div class=\"input-container\">\n <z-input size=\"big\"></z-input>\n <div class=\"results-wrapper\">\n <div class=\"results\">\n <z-list role=\"listbox\" id=\"list-my-id\">\n ${searchHelper()}\n <z-list-group divider-type=\"element\">\n <z-list-element\n id=\"list-item-my-id-0\"\n role=\"option\"\n tabindex=\"0\"\n dividerType=\"element\"\n >\n <div class=\"list-element\">\n <span class=\"item ellipsis\">\n <z-icon class=\"item-icon\" name=\"download\"></z-icon>\n <span class=\"item-label\" title=\"item 1\"><mark>item</mark> 1</span>\n </span>\n </div>\n </z-list-element>\n </z-list-group>\n ${showAllResults()}\n </z-list>\n </div>\n </div>\n </div>\n <z-button size=\"big\" variant=\"primary\">CERCA</z-button>\n </mock:shadow-root>\n </z-searchbar>\n `);\n });\n\n it(\"Autocomplete searchbar with search and limited results (show all) - with input search\", async () => {\n const page = await newSpecPage({\n components: [ZSearchbar],\n html: `<z-searchbar\n htmlid=\"my-id\"\n autocomplete=\"true\"\n results-items='${JSON.stringify(getItems())}'\n show-search-button=\"true\"\n ></z-searchbar>`,\n });\n page.rootInstance.searchString = \"item\";\n page.rootInstance.showResults = true;\n page.rootInstance.currResultsCount = 0;\n await page.waitForChanges();\n expect(page.root).toEqualHtml(`\n <z-searchbar\n class=\"has-submit has-results\"\n htmlid=\"my-id\"\n autocomplete=\"true\"\n results-items='${JSON.stringify(getItems())}'\n show-search-button=\"true\"\n >\n <mock:shadow-root>\n <div class=\"input-container\">\n <z-input size=\"big\"></z-input>\n <div class=\"results-wrapper\">\n <div class=\"results\">\n <z-list role=\"listbox\" id=\"list-my-id\">\n ${searchHelper()}\n ${resultsItems()}\n </z-list>\n </div>\n </div>\n </div>\n <z-button size=\"big\" variant=\"primary\">CERCA</z-button>\n </mock:shadow-root>\n </z-searchbar>\n `);\n });\n\n it(\"Autocomplete searchbar without search and no results - with input search\", async () => {\n const page = await newSpecPage({\n components: [ZSearchbar],\n html: `<z-searchbar\n htmlid=\"my-id\"\n autocomplete=\"true\"\n prevent-submit=\"true\"\n results-items='[]'\n ></z-searchbar>`,\n });\n page.rootInstance.searchString = \"item\";\n page.rootInstance.showResults = true;\n page.rootInstance.currResultsCount = 0;\n await page.waitForChanges();\n expect(page.root).toEqualHtml(`\n <z-searchbar\n class=\"has-results\"\n htmlid=\"my-id\"\n autocomplete=\"true\"\n prevent-submit=\"true\"\n results-items=\"[]\"\n >\n <mock:shadow-root>\n <div class=\"input-container\">\n <z-input size=\"big\"></z-input>\n <div class=\"results-wrapper\">\n <div class=\"results\">\n <span class=\"item item-no-results\">\n Non abbiamo trovato risultati per <b>item</b>\n <br /><br />\n Cosa puoi fare?\n <ul>\n <li>Verificare di aver scritto bene</li>\n <li>Provare a cercare un'altra parola</li>\n <li>Provare a cercare qualcosa di più generico</li>\n </ul>\n </span>\n </div>\n </div>\n </div>\n </mock:shadow-root>\n </z-searchbar>\n `);\n });\n\n it(\"Autocomplete searchbar with search and no results - with input search\", async () => {\n const page = await newSpecPage({\n components: [ZSearchbar],\n html: `<z-searchbar\n htmlid=\"my-id\"\n autocomplete=\"true\"\n results-items='[]'\n show-search-button=\"true\"\n ></z-searchbar>`,\n });\n page.rootInstance.searchString = \"item\";\n page.rootInstance.showResults = true;\n page.rootInstance.currResultsCount = 0;\n await page.waitForChanges();\n expect(page.root).toEqualHtml(`\n <z-searchbar\n class=\"has-submit has-results\"\n htmlid=\"my-id\"\n autocomplete=\"true\"\n results-items='[]'\n show-search-button=\"true\"\n >\n <mock:shadow-root>\n <div class=\"input-container\">\n <z-input size=\"big\"></z-input>\n <div class=\"results-wrapper\">\n <div class=\"results\">\n <z-list role=\"listbox\" id=\"list-my-id\">\n ${searchHelper(false)}\n </z-list>\n </div>\n </div>\n </div>\n <z-button size=\"big\" variant=\"primary\">CERCA</z-button>\n </mock:shadow-root>\n </z-searchbar>\n `);\n });\n\n it(\"Simple searchbar change size\", async () => {\n const page = await newSpecPage({\n components: [ZSearchbar],\n html: `<z-searchbar htmlid=\"my-id\" show-search-button=\"true\" size=\"small\"></z-searchbar>`,\n });\n expect(page.root).toEqualHtml(`\n <z-searchbar class=\"has-submit\" htmlid=\"my-id\" show-search-button=\"true\" size=\"small\">\n <mock:shadow-root>\n <div class=\"input-container\">\n <z-input size=\"small\"></z-input>\n </div>\n <z-button size=\"small\" variant=\"primary\">CERCA</z-button>\n </mock:shadow-root>\n </z-searchbar>\n `);\n });\n\n it(\"Simple searchbar change button variant\", async () => {\n const page = await newSpecPage({\n components: [ZSearchbar],\n html: `<z-searchbar htmlid=\"my-id\" show-search-button=\"true\" variant=\"secondary\"></z-searchbar>`,\n });\n expect(page.root).toEqualHtml(`\n <z-searchbar class=\"has-submit\" htmlid=\"my-id\" show-search-button=\"true\" variant=\"secondary\">\n <mock:shadow-root>\n <div class=\"input-container\">\n <z-input size=\"big\"></z-input>\n </div>\n <z-button size=\"big\" variant=\"secondary\">CERCA</z-button>\n </mock:shadow-root>\n </z-searchbar>\n `);\n });\n\n it(\"Simple searchbar only icon button\", async () => {\n const page = await newSpecPage({\n components: [ZSearchbar],\n html: `<z-searchbar htmlid=\"my-id\" show-search-button=\"true\" search-button-icon-only=\"true\"></z-searchbar>`,\n });\n expect(page.root).toEqualHtml(`\n <z-searchbar class=\"has-submit\" htmlid=\"my-id\" show-search-button=\"true\" search-button-icon-only=\"true\">\n <mock:shadow-root>\n <div class=\"input-container\">\n <z-input size=\"big\"></z-input>\n </div>\n <z-button icon=\"search\" size=\"big\" variant=\"primary\"></z-button>\n </mock:shadow-root>\n </z-searchbar>\n `);\n });\n});\n\nconst getItems = () => [{label: \"item 1\", icon: \"download\"}, {label: \"item 2\"}, {label: \"item 3\"}];\n\nconst resultsItems = () => `\n <z-list-group divider-type=\"element\">\n <z-list-element\n id=\"list-item-my-id-0\"\n role=\"option\"\n tabindex=\"0\"\n dividerType=\"element\"\n >\n <div class=\"list-element\">\n <span class=\"item ellipsis\">\n <z-icon class=\"item-icon\" name=\"download\"></z-icon>\n <span class=\"item-label\" title=\"item 1\"><mark>item</mark> 1</span>\n </span>\n </div>\n </z-list-element>\n <z-list-element\n id=\"list-item-my-id-1\"\n role=\"option\"\n tabindex=\"0\"\n dividerType=\"element\"\n >\n <div class=\"list-element\">\n <span class=\"item ellipsis\">\n <span class=\"item-label\" title=\"item 2\"><mark>item</mark> 2</span>\n </span>\n </div>\n </z-list-element>\n <z-list-element\n id=\"list-item-my-id-2\"\n role=\"option\"\n tabindex=\"0\"\n >\n <div class=\"list-element\">\n <span class=\"item ellipsis\">\n <span class=\"item-label\" title=\"item 3\"><mark>item</mark> 3</span>\n </span>\n </div>\n </z-list-element>\n </z-list-group>`;\n\nconst searchHelper = (divider: boolean = true) => `\n <z-list-element\n role=\"option\"\n tabindex=\"0\"\n ${divider ? `dividerType=\"element\"` : ``}\n id=\"list-item-my-id-search\"\n clickable\n >\n <span class=\"item item-search\">\n <z-icon class=\"search-icon\" name=\"left-magnifying-glass\"></z-icon>\n <span class=\"item-label\">Cerca <mark>item</mark></span>\n </span>\n </z-list-element>\n`;\n\nconst showAllResults = () => `\n <z-list-element\n role=\"option\"\n tabindex=\"0\"\n id=\"list-item-my-id-show-all\"\n color=\"color-primary01\"\n clickable\n >\n <div class=\"item-show-all\">Vedi tutti i risultati</div>\n </z-list-element>\n`;\n"]}

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

@@ -25,7 +25,6 @@ const StoryMeta = {
         "autocomplete": false,
         "autocompleteMinChars": 3,
         "resultsCount": null,
-        "resultsEllipsis": true,
         "searchHelperLabel": "Cerca {searchString}",
         "resultsItems": [
             {
@@ -62,7 +61,6 @@ export const Default = {
       autocomplete=${args.autocomplete}
       autocomplete-min-chars=${args.autocompleteMinChars}
       results-count=${args.resultsCount}
-      results-ellipsis=${args.resultsEllipsis}
       search-helper-label=${args.searchHelperLabel}
       results-items=${JSON.stringify(args.resultsItems)}
       sort-results-items=${JSON.stringify(args.sortResultsItems)}
@@ -112,7 +110,6 @@ export const Autocomplete = {
       autocomplete=${args.autocomplete}
       autocomplete-min-chars=${args.autocompleteMinChars}
       results-count=${args.resultsCount}
-      results-ellipsis=${args.resultsEllipsis}
       search-helper-label=${args.searchHelperLabel}
       results-items=${JSON.stringify(args.resultsItems)}
       sort-results-items=${JSON.stringify(args.sortResultsItems)}
@@ -182,7 +179,137 @@ export const AutocompleteWithComplexItems = {
       autocomplete=${args.autocomplete}
       autocomplete-min-chars=${args.autocompleteMinChars}
       results-count=${args.resultsCount}
-      results-ellipsis=${args.resultsEllipsis}
+      search-helper-label=${args.searchHelperLabel}
+      results-items=${JSON.stringify(args.resultsItems)}
+      sort-results-items=${JSON.stringify(args.sortResultsItems)}
+      value=${args.value}
+      placeholder=${args.placeholder}
+      htmlid=${args.htmlid}
+      style="--z-searchbar-results-height: ${args["--z-searchbar-results-height"]}; --z-searchbar-tag-text-color: ${args["--z-searchbar-tag-text-color"]}; --z-searchbar-tag-bg: ${args["--z-searchbar-tag-bg"]}"
+      size=${args.size}
+      variant=${args.variant}
+    ></z-searchbar>
+  `,
+};
+export const AutocompleteWithComplexTreeItems = {
+    args: {
+        autocomplete: true,
+        htmlid: "myIdGroupedAutocomplete",
+        showSearchButton: false,
+        searchButtonIconOnly: false,
+        resultsItems: [
+            {
+                label: "first item",
+                icon: "download",
+                tag: {
+                    text: "Riservato all'insegnante",
+                    icon: "teacher",
+                },
+                category: "Category A",
+                subcategory: "Subcategory A1",
+                children: [
+                    {
+                        label: "first item - first child",
+                        icon: "download",
+                        tag: {
+                            text: "Riservato all'insegnante",
+                            icon: "teacher",
+                        },
+                        children: [
+                            {
+                                label: "first item - first child - first child lunghissssssssssssssss sssssssssssssssssss ssssssssssssssssssssssssssssss ssssssssssssssssssssssssssssssssssssssssssssssssssssimo",
+                                icon: "download",
+                                tag: {
+                                    text: "Riservato all'insegnante",
+                                    icon: "teacher",
+                                },
+                            },
+                            {
+                                label: "first item - first child - second child",
+                                icon: "download",
+                                tag: {
+                                    text: "Riservato all'insegnante",
+                                    icon: "teacher",
+                                },
+                            },
+                            {
+                                label: "first item - first child - third child",
+                                icon: "download",
+                                tag: {
+                                    text: "Riservato all'insegnante",
+                                    icon: "teacher",
+                                },
+                            },
+                        ],
+                    },
+                    {
+                        label: "first item - second child",
+                        icon: "download",
+                        tag: {
+                            text: "Riservato all'insegnante",
+                            icon: "teacher",
+                        },
+                    },
+                ],
+            },
+            {
+                label: "second item",
+                icon: "collezioni",
+                category: "Category B",
+                subcategory: "Subcategory B1",
+            },
+            {
+                label: "third item",
+                icon: "dictonary",
+                category: "Category A",
+                subcategory: "Subcategory A2",
+            },
+            {
+                label: "fourth item",
+                icon: "exercises-online",
+                category: "Category A",
+                subcategory: "Subcategory A1",
+            },
+            {
+                label: "fifth item",
+                icon: "interactives-maps",
+                category: "Category A",
+                subcategory: "Subcategory A1",
+                children: [
+                    {
+                        label: "fifth item - first child",
+                        icon: "download",
+                        tag: {
+                            text: "Riservato all'insegnante",
+                            icon: "teacher",
+                        },
+                    },
+                    {
+                        label: "fifth item - second child",
+                        icon: "download",
+                        tag: {
+                            text: "Riservato all'insegnante",
+                            icon: "teacher",
+                        },
+                    },
+                ],
+            },
+            {
+                label: "sixth item",
+                icon: "textual-analysis",
+                category: "Category B",
+                subcategory: "Subcategory B1",
+            },
+        ],
+    },
+    render: (args) => html `
+    <z-searchbar
+      prevent-submit=${args.preventSubmit}
+      show-search-button=${args.showSearchButton}
+      search-button-icon-only=${args.searchButtonIconOnly}
+      autocomplete=${args.autocomplete}
+      autocomplete-min-chars=${args.autocompleteMinChars}
+      results-count=${args.resultsCount}
       search-helper-label=${args.searchHelperLabel}
       results-items=${JSON.stringify(args.resultsItems)}
       sort-results-items=${JSON.stringify(args.sortResultsItems)}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-searchbar/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZSearchbar} from \".\";\nimport {ButtonVariant, ControlSize} from \"../../beans\";\nimport {CSSVarsArguments} from \"../../utils/storybook-utils\";\nimport \"./index\";\n\ntype ZSearchbarStoriesArgs = ZSearchbar &\n CSSVarsArguments<\"--z-searchbar-results-height\" \| \"--z-searchbar-tag-text-color\" \| \"--z-searchbar-tag-bg\">;\n\nconst StoryMeta = {\n title: \"ZSearchbar\",\n component: \"z-searchbar\",\n argTypes: {\n size: {\n control: {\n type: \"inline-radio\",\n },\n options: Object.values(ControlSize),\n },\n variant: {\n control: {\n type: \"inline-radio\",\n },\n options: Object.values(ButtonVariant),\n },\n },\n args: {\n \"preventSubmit\": false,\n \"showSearchButton\": false,\n \"searchButtonIconOnly\": false,\n \"autocomplete\": false,\n \"autocompleteMinChars\": 3,\n \"resultsCount\": null,\n \"resultsEllipsis\": true,\n \"searchHelperLabel\": \"Cerca {searchString}\",\n \"resultsItems\": [\n {\n label: \"first item\",\n },\n {\n label: \"second item\",\n },\n {\n label: \"third item\",\n },\n {\n label: \"fourth item\",\n },\n ],\n \"sortResultsItems\": false,\n \"htmlid\": \"myId\",\n \"placeholder\": \"my placeholder\",\n \"value\": \"\",\n \"--z-searchbar-results-height\": \"\",\n \"--z-searchbar-tag-text-color\": \"var(--color-primary03)\",\n \"--z-searchbar-tag-bg\": \"var(--color-hover-primary)\",\n \"size\": ControlSize.BIG,\n \"variant\": ButtonVariant.PRIMARY,\n },\n} satisfies Meta<ZSearchbarStoriesArgs>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZSearchbarStoriesArgs>;\n\nexport const Default = {\n render: (args) => html`\n <z-searchbar\n prevent-submit=${args.preventSubmit}\n show-search-button=${args.showSearchButton}\n search-button-icon-only=${args.searchButtonIconOnly}\n autocomplete=${args.autocomplete}\n autocomplete-min-chars=${args.autocompleteMinChars}\n results-count=${args.resultsCount}\n results-ellipsis=${args.resultsEllipsis}\n search-helper-label=${args.searchHelperLabel}\n results-items=${JSON.stringify(args.resultsItems)}\n sort-results-items=${JSON.stringify(args.sortResultsItems)}\n value=${args.value}\n placeholder=${args.placeholder}\n htmlid=${args.htmlid}\n style=\"--z-searchbar-results-height: ${args[\"--z-searchbar-results-height\"]}\"\n size=${args.size}\n variant=${args.variant}\n ></z-searchbar>\n `,\n} satisfies Story;\n\nexport const SimpleSearch = {\n parameters: {\n controls: {\n include: [\"value\", \"placeholder\", \"htmlid\", \"size\"],\n },\n },\n args: {\n htmlid: \"myIdSimple\",\n },\n render: (args) => html`\n <z-searchbar\n prevent-submit=\"false\"\n show-search-button=${args.showSearchButton}\n search-button-icon-only=${args.searchButtonIconOnly}\n autcomplete=\"false\"\n value=${args.value}\n placeholder=${args.placeholder}\n htmlid=${args.htmlid}\n size=${args.size}\n ></z-searchbar>\n `,\n} satisfies Story;\n\nexport const Autocomplete = {\n args: {\n autocomplete: true,\n htmlid: \"myIdAutocomplete\",\n showSearchButton: false,\n searchButtonIconOnly: false,\n },\n render: (args) => html`\n <z-searchbar\n prevent-submit=${args.preventSubmit}\n show-search-button=${args.showSearchButton}\n search-button-icon-only=${args.searchButtonIconOnly}\n autocomplete=${args.autocomplete}\n autocomplete-min-chars=${args.autocompleteMinChars}\n results-count=${args.resultsCount}\n results-ellipsis=${args.resultsEllipsis}\n search-helper-label=${args.searchHelperLabel}\n results-items=${JSON.stringify(args.resultsItems)}\n sort-results-items=${JSON.stringify(args.sortResultsItems)}\n value=${args.value}\n placeholder=${args.placeholder}\n htmlid=${args.htmlid}\n style=\"--z-searchbar-results-height: ${args[\"--z-searchbar-results-height\"]}\"\n size=${args.size}\n variant=${args.variant}\n ></z-searchbar>\n `,\n} satisfies Story;\n\nexport const AutocompleteWithComplexItems = {\n args: {\n autocomplete: true,\n htmlid: \"myIdGroupedAutocomplete\",\n showSearchButton: false,\n searchButtonIconOnly: false,\n resultsItems: [\n {\n label: \"first item\",\n icon: \"download\",\n tag: {\n text: \"Riservato all'insegnante\",\n icon: \"teacher\",\n },\n category: \"Category A\",\n subcategory: \"Subcategory A1\",\n },\n {\n label: \"second item\",\n icon: \"collezioni\",\n category: \"Category B\",\n subcategory: \"Subcategory B1\",\n },\n {\n label: \"third item\",\n icon: \"dictonary\",\n category: \"Category A\",\n subcategory: \"Subcategory A2\",\n },\n {\n label: \"fourth item\",\n icon: \"exercises-online\",\n category: \"Category A\",\n subcategory: \"Subcategory A1\",\n },\n {\n label: \"fifth item\",\n icon: \"interactives-maps\",\n category: \"Category A\",\n subcategory: \"Subcategory A1\",\n },\n {\n label: \"sixth item\",\n icon: \"textual-analysis\",\n category: \"Category B\",\n subcategory: \"Subcategory B1\",\n },\n ],\n },\n render: (args) => html`\n <z-searchbar\n prevent-submit=${args.preventSubmit}\n show-search-button=${args.showSearchButton}\n search-button-icon-only=${args.searchButtonIconOnly}\n autocomplete=${args.autocomplete}\n autocomplete-min-chars=${args.autocompleteMinChars}\n results-count=${args.resultsCount}\n results-ellipsis=${args.resultsEllipsis}\n search-helper-label=${args.searchHelperLabel}\n results-items=${JSON.stringify(args.resultsItems)}\n sort-results-items=${JSON.stringify(args.sortResultsItems)}\n value=${args.value}\n placeholder=${args.placeholder}\n htmlid=${args.htmlid}\n style=\"--z-searchbar-results-height: ${args[\n \"--z-searchbar-results-height\"\n ]}; --z-searchbar-tag-text-color: ${args[\"--z-searchbar-tag-text-color\"]}; --z-searchbar-tag-bg: ${args[\n \"--z-searchbar-tag-bg\"\n ]}\"\n size=${args.size}\n variant=${args.variant}\n ></z-searchbar>\n `,\n} satisfies Story;\n"]}
1	+ {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-searchbar/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZSearchbar} from \".\";\nimport {ButtonVariant, ControlSize} from \"../../beans\";\nimport {CSSVarsArguments} from \"../../utils/storybook-utils\";\nimport \"./index\";\n\ntype ZSearchbarStoriesArgs = ZSearchbar &\n CSSVarsArguments<\"--z-searchbar-results-height\" \| \"--z-searchbar-tag-text-color\" \| \"--z-searchbar-tag-bg\">;\n\nconst StoryMeta = {\n title: \"ZSearchbar\",\n component: \"z-searchbar\",\n argTypes: {\n size: {\n control: {\n type: \"inline-radio\",\n },\n options: Object.values(ControlSize),\n },\n variant: {\n control: {\n type: \"inline-radio\",\n },\n options: Object.values(ButtonVariant),\n },\n },\n args: {\n \"preventSubmit\": false,\n \"showSearchButton\": false,\n \"searchButtonIconOnly\": false,\n \"autocomplete\": false,\n \"autocompleteMinChars\": 3,\n \"resultsCount\": null,\n \"searchHelperLabel\": \"Cerca {searchString}\",\n \"resultsItems\": [\n {\n label: \"first item\",\n },\n {\n label: \"second item\",\n },\n {\n label: \"third item\",\n },\n {\n label: \"fourth item\",\n },\n ],\n \"sortResultsItems\": false,\n \"htmlid\": \"myId\",\n \"placeholder\": \"my placeholder\",\n \"value\": \"\",\n \"--z-searchbar-results-height\": \"\",\n \"--z-searchbar-tag-text-color\": \"var(--color-primary03)\",\n \"--z-searchbar-tag-bg\": \"var(--color-hover-primary)\",\n \"size\": ControlSize.BIG,\n \"variant\": ButtonVariant.PRIMARY,\n },\n} satisfies Meta<ZSearchbarStoriesArgs>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZSearchbarStoriesArgs>;\n\nexport const Default = {\n render: (args) => html`\n <z-searchbar\n prevent-submit=${args.preventSubmit}\n show-search-button=${args.showSearchButton}\n search-button-icon-only=${args.searchButtonIconOnly}\n autocomplete=${args.autocomplete}\n autocomplete-min-chars=${args.autocompleteMinChars}\n results-count=${args.resultsCount}\n search-helper-label=${args.searchHelperLabel}\n results-items=${JSON.stringify(args.resultsItems)}\n sort-results-items=${JSON.stringify(args.sortResultsItems)}\n value=${args.value}\n placeholder=${args.placeholder}\n htmlid=${args.htmlid}\n style=\"--z-searchbar-results-height: ${args[\"--z-searchbar-results-height\"]}\"\n size=${args.size}\n variant=${args.variant}\n ></z-searchbar>\n `,\n} satisfies Story;\n\nexport const SimpleSearch = {\n parameters: {\n controls: {\n include: [\"value\", \"placeholder\", \"htmlid\", \"size\"],\n },\n },\n args: {\n htmlid: \"myIdSimple\",\n },\n render: (args) => html`\n <z-searchbar\n prevent-submit=\"false\"\n show-search-button=${args.showSearchButton}\n search-button-icon-only=${args.searchButtonIconOnly}\n autcomplete=\"false\"\n value=${args.value}\n placeholder=${args.placeholder}\n htmlid=${args.htmlid}\n size=${args.size}\n ></z-searchbar>\n `,\n} satisfies Story;\n\nexport const Autocomplete = {\n args: {\n autocomplete: true,\n htmlid: \"myIdAutocomplete\",\n showSearchButton: false,\n searchButtonIconOnly: false,\n },\n render: (args) => html`\n <z-searchbar\n prevent-submit=${args.preventSubmit}\n show-search-button=${args.showSearchButton}\n search-button-icon-only=${args.searchButtonIconOnly}\n autocomplete=${args.autocomplete}\n autocomplete-min-chars=${args.autocompleteMinChars}\n results-count=${args.resultsCount}\n search-helper-label=${args.searchHelperLabel}\n results-items=${JSON.stringify(args.resultsItems)}\n sort-results-items=${JSON.stringify(args.sortResultsItems)}\n value=${args.value}\n placeholder=${args.placeholder}\n htmlid=${args.htmlid}\n style=\"--z-searchbar-results-height: ${args[\"--z-searchbar-results-height\"]}\"\n size=${args.size}\n variant=${args.variant}\n ></z-searchbar>\n `,\n} satisfies Story;\n\nexport const AutocompleteWithComplexItems = {\n args: {\n autocomplete: true,\n htmlid: \"myIdGroupedAutocomplete\",\n showSearchButton: false,\n searchButtonIconOnly: false,\n resultsItems: [\n {\n label: \"first item\",\n icon: \"download\",\n tag: {\n text: \"Riservato all'insegnante\",\n icon: \"teacher\",\n },\n category: \"Category A\",\n subcategory: \"Subcategory A1\",\n },\n {\n label: \"second item\",\n icon: \"collezioni\",\n category: \"Category B\",\n subcategory: \"Subcategory B1\",\n },\n {\n label: \"third item\",\n icon: \"dictonary\",\n category: \"Category A\",\n subcategory: \"Subcategory A2\",\n },\n {\n label: \"fourth item\",\n icon: \"exercises-online\",\n category: \"Category A\",\n subcategory: \"Subcategory A1\",\n },\n {\n label: \"fifth item\",\n icon: \"interactives-maps\",\n category: \"Category A\",\n subcategory: \"Subcategory A1\",\n },\n {\n label: \"sixth item\",\n icon: \"textual-analysis\",\n category: \"Category B\",\n subcategory: \"Subcategory B1\",\n },\n ],\n },\n render: (args) => html`\n <z-searchbar\n prevent-submit=${args.preventSubmit}\n show-search-button=${args.showSearchButton}\n search-button-icon-only=${args.searchButtonIconOnly}\n autocomplete=${args.autocomplete}\n autocomplete-min-chars=${args.autocompleteMinChars}\n results-count=${args.resultsCount}\n search-helper-label=${args.searchHelperLabel}\n results-items=${JSON.stringify(args.resultsItems)}\n sort-results-items=${JSON.stringify(args.sortResultsItems)}\n value=${args.value}\n placeholder=${args.placeholder}\n htmlid=${args.htmlid}\n style=\"--z-searchbar-results-height: ${args[\n \"--z-searchbar-results-height\"\n ]}; --z-searchbar-tag-text-color: ${args[\"--z-searchbar-tag-text-color\"]}; --z-searchbar-tag-bg: ${args[\n \"--z-searchbar-tag-bg\"\n ]}\"\n size=${args.size}\n variant=${args.variant}\n ></z-searchbar>\n `,\n} satisfies Story;\n\nexport const AutocompleteWithComplexTreeItems = {\n args: {\n autocomplete: true,\n htmlid: \"myIdGroupedAutocomplete\",\n showSearchButton: false,\n searchButtonIconOnly: false,\n resultsItems: [\n {\n label: \"first item\",\n icon: \"download\",\n tag: {\n text: \"Riservato all'insegnante\",\n icon: \"teacher\",\n },\n category: \"Category A\",\n subcategory: \"Subcategory A1\",\n children: [\n {\n label: \"first item - first child\",\n icon: \"download\",\n tag: {\n text: \"Riservato all'insegnante\",\n icon: \"teacher\",\n },\n children: [\n {\n label:\n \"first item - first child - first child lunghissssssssssssssss sssssssssssssssssss ssssssssssssssssssssssssssssss ssssssssssssssssssssssssssssssssssssssssssssssssssssimo\",\n icon: \"download\",\n tag: {\n text: \"Riservato all'insegnante\",\n icon: \"teacher\",\n },\n },\n {\n label: \"first item - first child - second child\",\n icon: \"download\",\n tag: {\n text: \"Riservato all'insegnante\",\n icon: \"teacher\",\n },\n },\n {\n label: \"first item - first child - third child\",\n icon: \"download\",\n tag: {\n text: \"Riservato all'insegnante\",\n icon: \"teacher\",\n },\n },\n ],\n },\n {\n label: \"first item - second child\",\n icon: \"download\",\n tag: {\n text: \"Riservato all'insegnante\",\n icon: \"teacher\",\n },\n },\n ],\n },\n {\n label: \"second item\",\n icon: \"collezioni\",\n category: \"Category B\",\n subcategory: \"Subcategory B1\",\n },\n {\n label: \"third item\",\n icon: \"dictonary\",\n category: \"Category A\",\n subcategory: \"Subcategory A2\",\n },\n {\n label: \"fourth item\",\n icon: \"exercises-online\",\n category: \"Category A\",\n subcategory: \"Subcategory A1\",\n },\n {\n label: \"fifth item\",\n icon: \"interactives-maps\",\n category: \"Category A\",\n subcategory: \"Subcategory A1\",\n children: [\n {\n label: \"fifth item - first child\",\n icon: \"download\",\n tag: {\n text: \"Riservato all'insegnante\",\n icon: \"teacher\",\n },\n },\n {\n label: \"fifth item - second child\",\n icon: \"download\",\n tag: {\n text: \"Riservato all'insegnante\",\n icon: \"teacher\",\n },\n },\n ],\n },\n {\n label: \"sixth item\",\n icon: \"textual-analysis\",\n category: \"Category B\",\n subcategory: \"Subcategory B1\",\n },\n ],\n },\n render: (args) => html`\n <z-searchbar\n prevent-submit=${args.preventSubmit}\n show-search-button=${args.showSearchButton}\n search-button-icon-only=${args.searchButtonIconOnly}\n autocomplete=${args.autocomplete}\n autocomplete-min-chars=${args.autocompleteMinChars}\n results-count=${args.resultsCount}\n search-helper-label=${args.searchHelperLabel}\n results-items=${JSON.stringify(args.resultsItems)}\n sort-results-items=${JSON.stringify(args.sortResultsItems)}\n value=${args.value}\n placeholder=${args.placeholder}\n htmlid=${args.htmlid}\n style=\"--z-searchbar-results-height: ${args[\n \"--z-searchbar-results-height\"\n ]}; --z-searchbar-tag-text-color: ${args[\"--z-searchbar-tag-text-color\"]}; --z-searchbar-tag-bg: ${args[\n \"--z-searchbar-tag-bg\"\n ]}\"\n size=${args.size}\n variant=${args.variant}\n ></z-searchbar>\n `,\n} satisfies Story;\n"]}

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

@@ -1,6 +1,7 @@
 :host {
   --z-searchbar-tag-text-color: var(--color-primary03);
   --z-searchbar-tag-bg: var(--color-hover-primary);
+  --z-searchbar-item-height: 44px;
   z-index: 15;
   display: flex;
@@ -14,6 +15,12 @@
   box-sizing: border-box;
 }
+:host::part(list-item-container) {
+  display: block;
+  min-height: unset;
+  padding: 0;
+}
 .input-container {
   position: relative;
   display: flex;
@@ -78,12 +85,80 @@
 }
 .results z-list-element {
+  position: relative;
   display: block;
 }
+z-list-element > .item-search {
+  padding: var(--space-unit) 0;
+}
+z-list z-list-element::before {
+  position: absolute;
+  z-index: 100;
+  top: 5px;
+  left: -20px;
+  width: 8px;
+  height: 1em;
+  border-bottom: 1px solid var(--color-disabled01-icon);
+  border-left: 1px solid var(--color-disabled01-icon);
+  content: "";
+  cursor: pointer;
+}
+z-list z-list-element::after {
+  position: absolute;
+  z-index: 100;
+  top: 5px;
+  left: -20px;
+  width: 8px;
+  height: 100%;
+  border-left: 1px solid var(--color-disabled01-icon);
+  content: "";
+  cursor: pointer;
+}
+z-list z-list-element:last-child::after {
+  display: none;
+}
+z-list > z-list-element::before,
+z-list > z-list-element::after,
+z-list > z-list-group > z-list-element::before,
+z-list > z-list-group > z-list-element::after {
+  display: none;
+}
+z-list > div.children-node {
+  padding-left: calc(var(--space-unit) * 3);
+}
 .results z-list-element > .list-element {
   display: flex;
   justify-content: space-between;
+  padding: calc(var(--space-unit) * 1.25) 0;
+  cursor: pointer;
+}
+.results z-list-element > .list-element .item.ellipsis {
+  overflow: hidden;
+}
+.results z-list-element .list-element::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: block;
+  width: 100%;
+  height: 44px;
+  content: "";
+  transform: translateX(-100%);
+}
+.results z-list-element > .list-element:hover,
+.results z-list-element > .list-element:hover::after {
+  background-color: var(--color-surface02);
+  cursor: pointer;
 }
 .results z-list-element > .list-element > z-tag {
@@ -107,7 +182,7 @@
   column-gap: calc(var(--space-unit) * 1.5);
   fill: var(--color-default-icon);
   font-size: var(--font-size-2);
-  line-height: var(--font-size-3);
+  line-height: var(--font-size-6);
 }
 .results .item.ellipsis > .item-label {
@@ -120,10 +195,6 @@
   background: var(--color-primary03);
 }
-.results .item.has-category {
-  padding-left: calc(var(--space-unit) * 3);
-}
 .results .item.item-search {
   --z-icon-height: 16px;
   --z-icon-width: 16px;
@@ -165,6 +236,10 @@
   .results .item.ellipsis > .item-label {
     height: 24px;
   }
+  .results z-list-element > .list-element > z-tag {
+    min-width: max-content;
+  }
 }
 /* Desktop breakpoint */
@@ -191,12 +266,20 @@
   --z-icon-width: 16px;
 }
-:host([size="small"])::part(list-item-container) {
-  min-height: calc(var(--space-unit) * 4.5);
-  padding: 0;
+:host([size="small"]) z-list-element > .list-element,
+:host([size="small"]) z-list-element > .item-search {
+  padding: calc(var(--space-unit) * 0.75) 0;
 }
-:host([size="x-small"])::part(list-item-container) {
-  min-height: calc(var(--space-unit) * 4);
-  padding: 0;
+:host([size="x-small"]) z-list-element > .list-element,
+:host([size="x-small"]) z-list-element > .item-search {
+  padding: calc(var(--space-unit) / 2) 0;
+}
+:host([size="small"]) z-list-element .list-element::after {
+  height: 36px;
+}
+:host([size="x-small"]) z-list-element .list-element::after {
+  height: 32px;
 }

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

@@ -0,0 +1,90 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe("z-searchbar test end2end", () => {
+    it("Emit searchTyping event", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+    <z-searchbar placeholder="Cerca" search-button-label="Cerca"></z-searchbar>
+    `);
+        const searchbar = await page.find("z-searchbar");
+        const input = await page.find("z-searchbar >>> z-input div input");
+        const searchTypingEvent = await page.spyOnEvent("searchTyping");
+        expect(searchbar).not.toBeNull();
+        expect(input).not.toBeNull();
+        await input.type("A");
+        await page.waitForChanges();
+        await page.waitForEvent("searchTyping");
+        expect(searchTypingEvent).toHaveReceivedEvent();
+    });
+    it("Emit searchSubmit event", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+    <z-searchbar placeholder="Cerca" show-search-button="true"></z-searchbar>
+    `);
+        const searchbar = await page.find("z-searchbar");
+        const input = await page.find("z-searchbar >>> z-input div input");
+        const button = await page.find("z-searchbar >>> z-button");
+        const searchSubmitEvent = await page.spyOnEvent("searchSubmit");
+        expect(searchbar).not.toBeNull();
+        expect(input).not.toBeNull();
+        await input.type("Test");
+        await page.waitForChanges();
+        await button.click();
+        await page.waitForChanges();
+        expect(searchSubmitEvent).toHaveReceivedEvent();
+    });
+    it("Emit searchItemClick event with basic items structure", async () => {
+        const page = await newE2EPage();
+        const items = JSON.stringify([
+            {
+                label: "first item",
+            },
+            {
+                label: "second item",
+            },
+            {
+                label: "third item",
+            },
+            {
+                label: "fourth item",
+            },
+        ]);
+        await page.setContent(`
+      <z-searchbar
+        prevent-submit="false"
+        show-search-button="false"
+        search-button-icon-only="false"
+        autocomplete="true"
+        autocomplete-min-chars="3"
+        results-count=""
+        results-items='${items}'
+        results-ellipsis="true"
+        search-helper-label="Cerca {searchString}"
+        sort-results-items="false"
+        value=""
+        placeholder="my placeholder"
+        htmlid="myIdAutocomplete"
+        style="
+          --z-searchbar-results-height: ;
+          --z-searchbar-tag-text-color: var(--color-primary03);
+          --z-searchbar-tag-bg: var(--color-hover-primary);
+        "
+        size="big"
+        variant="primary"
+      ></z-searchbar>
+    `);
+        const searchbar = await page.find("z-searchbar");
+        const input = await page.find("z-searchbar >>> z-input div input");
+        const searchItemClickEvent = await page.spyOnEvent("searchItemClick");
+        expect(searchbar).not.toBeNull();
+        expect(input).not.toBeNull();
+        await input.type("Test");
+        await page.waitForChanges();
+        await page.waitForEvent("searchTyping");
+        const item = await page.find("z-searchbar >>> #list-item-myIdAutocomplete-0");
+        expect(item).not.toBeNull();
+        await item.click();
+        await page.waitForChanges();
+        expect(searchItemClickEvent).toHaveReceivedEvent();
+    });
+});
+//# sourceMappingURL=test.e2e.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"test.e2e.js","sourceRoot":"","sources":["../../../../src/components/z-searchbar/test.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import {newE2EPage} from \"@stencil/core/testing\";\n\ndescribe(\"z-searchbar test end2end\", () => {\n it(\"Emit searchTyping event\", async () => {\n const page = await newE2EPage();\n await page.setContent(`\n <z-searchbar placeholder=\"Cerca\" search-button-label=\"Cerca\"></z-searchbar>\n `);\n const searchbar = await page.find(\"z-searchbar\");\n const input = await page.find(\"z-searchbar >>> z-input div input\");\n const searchTypingEvent = await page.spyOnEvent(\"searchTyping\");\n\n expect(searchbar).not.toBeNull();\n expect(input).not.toBeNull();\n\n await input.type(\"A\");\n await page.waitForChanges();\n await page.waitForEvent(\"searchTyping\");\n\n expect(searchTypingEvent).toHaveReceivedEvent();\n });\n\n it(\"Emit searchSubmit event\", async () => {\n const page = await newE2EPage();\n await page.setContent(`\n <z-searchbar placeholder=\"Cerca\" show-search-button=\"true\"></z-searchbar>\n `);\n const searchbar = await page.find(\"z-searchbar\");\n const input = await page.find(\"z-searchbar >>> z-input div input\");\n const button = await page.find(\"z-searchbar >>> z-button\");\n const searchSubmitEvent = await page.spyOnEvent(\"searchSubmit\");\n\n expect(searchbar).not.toBeNull();\n expect(input).not.toBeNull();\n\n await input.type(\"Test\");\n await page.waitForChanges();\n\n await button.click();\n await page.waitForChanges();\n\n expect(searchSubmitEvent).toHaveReceivedEvent();\n });\n\n it(\"Emit searchItemClick event with basic items structure\", async () => {\n const page = await newE2EPage();\n const items = JSON.stringify([\n {\n label: \"first item\",\n },\n {\n label: \"second item\",\n },\n {\n label: \"third item\",\n },\n {\n label: \"fourth item\",\n },\n ]);\n await page.setContent(`\n <z-searchbar\n prevent-submit=\"false\"\n show-search-button=\"false\"\n search-button-icon-only=\"false\"\n autocomplete=\"true\"\n autocomplete-min-chars=\"3\"\n results-count=\"\"\n results-items='${items}'\n results-ellipsis=\"true\"\n search-helper-label=\"Cerca {searchString}\"\n sort-results-items=\"false\"\n value=\"\"\n placeholder=\"my placeholder\"\n htmlid=\"myIdAutocomplete\"\n style=\"\n --z-searchbar-results-height: ;\n --z-searchbar-tag-text-color: var(--color-primary03);\n --z-searchbar-tag-bg: var(--color-hover-primary);\n \"\n size=\"big\"\n variant=\"primary\"\n ></z-searchbar>\n `);\n const searchbar = await page.find(\"z-searchbar\");\n const input = await page.find(\"z-searchbar >>> z-input div input\");\n const searchItemClickEvent = await page.spyOnEvent(\"searchItemClick\");\n\n expect(searchbar).not.toBeNull();\n expect(input).not.toBeNull();\n\n await input.type(\"Test\");\n await page.waitForChanges();\n await page.waitForEvent(\"searchTyping\");\n\n const item = await page.find(\"z-searchbar >>> #list-item-myIdAutocomplete-0\");\n expect(item).not.toBeNull();\n\n await item.click();\n await page.waitForChanges();\n\n expect(searchItemClickEvent).toHaveReceivedEvent();\n });\n});\n"]}

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

@@ -265,10 +265,10 @@ export class ZSelect {
             }, onKeyDown: (e) => this.arrowsSelectNav(e, 0) }, h("div", { class: "reset-item-content" }, h("z-icon", { name: "multiply-circled" }), h("span", null, this.resetItem))));
     }
     renderItem(item, key, lastItem) {
-        return (h("z-list-element", { clickable: !item.disabled, disabled: item.disabled, dividerType: lastItem ? ListDividerType.HEADER : ListDividerType.ELEMENT, role: "option", tabindex: item.disabled || !this.isOpen ? -1 : 0, "aria-selected": item.selected ? "true" : "false", id: `${this.htmlid}_${key}`, size: this.listSizeType(), onClickItem: () => this.selectItem(item, true), onKeyDown: (e) => this.arrowsSelectNav(e, key) }, h("div", { class: "list-element-container" }, item.icon && h("z-icon", { name: item.icon }), h("span", { class: {
+        return (h("z-list-element", { clickable: !item.disabled, disabled: item.disabled, dividerType: lastItem ? ListDividerType.HEADER : ListDividerType.ELEMENT, role: "option", tabindex: item.disabled || !this.isOpen ? -1 : 0, "aria-selected": item.selected ? "true" : "false", id: `${this.htmlid}_${key}`, size: this.listSizeType(), onClickItem: () => this.selectItem(item, true), onKeyDown: (e) => this.arrowsSelectNav(e, key) }, h("div", { class: "list-element-container" }, h("span", { class: {
                 "selected": !!item.selected,
                 "list-element-content": true,
-            }, innerHTML: item.name }))));
+            }, innerHTML: item.name }), item.icon && h("z-tag", { icon: item.icon }))));
     }
     listSizeType() {
         if (this.size === ControlSize.SMALL || this.size === ControlSize.X_SMALL) {
@@ -314,7 +314,7 @@ export class ZSelect {
         return (h("z-input-message", { message: boolean(this.message) === true ? undefined : this.message, status: this.status, class: this.size }));
     }
     render() {
-        return (h("div", { key: '7cff5f68badfbedf3c8f6e9a5d8bbdaa89ed8a98', class: "select-wrapper" }, this.renderInput(), this.renderSelectUl(), this.renderMessage()));
+        return (h("div", { key: '16a8b264460cb21cd19258694e04f7c58ca5bc26', class: "select-wrapper" }, this.renderInput(), this.renderSelectUl(), this.renderMessage()));
     }
     static get is() { return "z-select"; }
     static get encapsulation() { return "scoped"; }