@zanichelli/albe-web-components 19.3.0-RC5 → 19.3.0-rc1

package/dist/collection/components/z-searchbar/index.js

@@ -1,6 +1,6 @@
 import { Host, h, } from "@stencil/core";
-import { ButtonVariant, ControlSize, Device, KeyboardCode, ListDividerType, } from "../../beans";
-import { getDevice, handleEnterKeydSubmit, randomId } from "../../utils/utils";
+import { ButtonVariant, ControlSize, KeyboardCode, } from "../../beans";
+import { handleEnterKeydSubmit, randomId } from "../../utils/utils";
 /**
  * @cssprop --z-searchbar-results-height - Max height of the results container (default: 540px)
  * @cssprop --z-searchbar-tag-text-color - Color of tag's text (default --color-primary03);
@@ -8,7 +8,7 @@ import { getDevice, handleEnterKeydSubmit, randomId } from "../../utils/utils";
  */
 export class ZSearchbar {
     constructor() {
-        /** the id of the searchbar element */
+        /** The id of the searchbar element */
         this.htmlid = `searchbar-${randomId()}`;
         /** Prevent submit action */
         this.preventSubmit = false;
@@ -22,30 +22,28 @@ export class ZSearchbar {
         this.sortResultsItems = false;
         /** Show submit button */
         this.showSearchButton = false;
-        /** Set button icon without label*/
+        /** Hide the label of the submit button, showing only the icon */
         this.searchButtonIconOnly = false;
-        /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */
+        /** The label of the submit button */
+        this.searchButtonLabel = "CERCA";
+        /** Size of the `z-input` and submit `z-button` */
         this.size = ControlSize.BIG;
-        /** Graphical variant: `primary`, `secondary`, `tertiary`. Defaults to `primary`. */
+        /** Submit `z-button` variant */
         this.variant = ButtonVariant.PRIMARY;
         this.searchString = this.value;
-        this.currResultsCount = 0;
+        this.currResultsCount = this.resultsCount;
         this.showResults = false;
         this.isMobile = false;
         this.resultsItemsList = null;
-        this.items = [];
-    }
-    emitSearchSubmit() {
-        this.searchSubmit.emit(this.inputRef.value);
-    }
-    emitSearchTyping(search) {
-        this.searchTyping.emit(search);
     }
     emitSearchItemClick(item) {
         this.searchItemClick.emit(item);
         this.selectedItem = item;
         this.searchString = "";
     }
+    emitSearchSubmit() {
+        this.searchSubmit.emit(this.inputRef.value);
+    }
     watchItems() {
         this.resultsItemsList = this.getResultsItemsList();
     }
@@ -56,42 +54,17 @@ export class ZSearchbar {
         this.searchString = this.value;
     }
     watchSearchString() {
-        this.emitSearchTyping(this.searchString);
-        this.items = [];
+        this.searchTyping.emit(this.searchString);
         if (!this.searchString) {
             this.currResultsCount = this.resultsCount;
         }
     }
-    watchShowResults() {
-        if (!this.showResults) {
-            this.items = [];
-        }
-    }
-    disconnectedCallback() {
-        var _a;
-        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-    }
-    componentDidLoad() {
-        this.resizeObserver = new ResizeObserver(() => {
-            if (getDevice() === Device.MOBILE && !this.isMobile) {
-                this.isMobile = true;
-            }
-            if (getDevice() !== Device.MOBILE && this.isMobile) {
-                this.isMobile = false;
-            }
-        });
-        this.resizeObserver.observe(this.element);
-    }
-    componentWillLoad() {
-        this.resultsItemsList = this.getResultsItemsList();
-        this.currResultsCount = this.resultsCount;
-    }
     getResultsItemsList() {
         return typeof this.resultsItems === "string" ? JSON.parse(this.resultsItems) : this.resultsItems;
     }
-    getGroupedItems(items) {
+    getGroupedItems() {
         const groupedItems = {};
-        items.forEach((item) => {
+        this.resultsItemsList.forEach((item) => {
             var _a;
             const key = `${item === null || item === void 0 ? void 0 : item.category}${item === null || item === void 0 ? void 0 : item.subcategory}`;
             groupedItems[key] = (_a = groupedItems[key]) !== null && _a !== void 0 ? _a : {
@@ -121,148 +94,77 @@ export class ZSearchbar {
         }
         return groupedItems;
     }
-    checkResultsCount(counter) {
-        if (!this.currResultsCount || counter < this.currResultsCount) {
-            return true;
-        }
-        return false;
-    }
-    handleStopTyping(e) {
-        e.stopPropagation();
-        this.searchString = e.detail.value;
-        if (this.selectedItem) {
-            this.selectedItem = undefined;
-        }
-    }
-    handleSubmit() {
-        if (this.preventSubmit) {
+    onListItemKeyDown(e, item) {
+        if (e.key === KeyboardCode.ENTER) {
+            e.preventDefault();
+            this.emitSearchItemClick(item);
             return;
         }
-        this.emitSearchSubmit();
+        this.handleArrowsNavigation(e);
     }
-    handleOutsideClick(e) {
-        const cp = e.composedPath();
-        const searchbar = cp.find((elem) => elem.nodeName === "Z-SEARCHBAR");
-        if (!searchbar || searchbar.htmlid !== this.htmlid) {
-            this.showResults = false;
-            return;
-        }
-        if (cp.find((elem) => { var _a; return (elem === null || elem === void 0 ? void 0 : elem.nodeName) === "Z-INPUT" || ((_a = elem === null || elem === void 0 ? void 0 : elem.classList) === null || _a === void 0 ? void 0 : _a.contains("results")); })) {
-            this.showResults = true;
+    onSearchHelperKeyDown(e) {
+        if (e.key === KeyboardCode.ENTER) {
+            e.preventDefault();
+            this.emitSearchSubmit();
             return;
         }
-        this.showResults = false;
-    }
-    renderInput() {
-        var _a;
-        return (h("z-input", { ref: (val) => {
-                this.inputRef = val;
-            }, htmlid: `input-${this.htmlid}`, message: false, placeholder: this.placeholder, onStopTyping: (e) => this.handleStopTyping(e), onKeyUp: (e) => {
-                handleEnterKeydSubmit(e, () => this.handleSubmit());
-                this.handleArrowsNavigation(e);
-            }, value: this.searchString || ((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.label), size: this.size, label: this.label, "aria-label": this.htmlAriaLabel || this.placeholder }));
-    }
-    renderButton() {
-        if (!this.showSearchButton) {
-            return null;
-        }
-        const iconProp = this.searchButtonIconOnly ? { icon: "search" } : null;
-        const buttonLabel = this.searchButtonIconOnly ? "" : "CERCA";
-        const ariaLabel = this.searchButtonIconOnly ? { "aria-label": "CERCA" } : null;
-        const defaultProps = Object.assign(Object.assign({ disabled: this.preventSubmit, variant: this.variant, size: this.size, onClick: () => this.handleSubmit() }, iconProp), ariaLabel);
-        return h("z-button", Object.assign({}, defaultProps), buttonLabel);
-    }
-    renderResults() {
-        if (!this.showResults ||
-            !this.autocomplete ||
-            !this.searchString ||
-            this.searchString.length < this.autocompleteMinChars ||
-            !this.resultsItemsList) {
-            return null;
-        }
-        return (h("div", { class: "results-wrapper" }, h("div", { class: "results" }, this.renderResultsList())));
-    }
-    renderResultsList() {
-        var _a, _b;
-        if (this.preventSubmit && !((_a = this.resultsItemsList) === null || _a === void 0 ? void 0 : _a.length)) {
-            return (h("span", { class: "item item-no-results" }, "Non abbiamo trovato risultati per ", h("b", null, this.searchString), h("br", null), h("br", null), "Cosa puoi fare?", h("ul", null, h("li", null, "Verificare di aver scritto bene"), h("li", null, "Provare a cercare un'altra parola"), h("li", null, "Provare a cercare qualcosa di pi\u00F9 generico"))));
-        }
-        return (h("z-list", { role: "listbox", id: `list-${this.htmlid}`, "aria-label": this.htmlAriaLabel || this.label }, this.renderSearchHelper(!!((_b = this.resultsItemsList) === null || _b === void 0 ? void 0 : _b.length)), this.renderItems(), this.renderShowAllResults()));
-    }
-    renderItems() {
-        var _a;
-        if (!((_a = this.resultsItemsList) === null || _a === void 0 ? void 0 : _a.length)) {
-            return [];
-        }
-        const groupedItems = this.getGroupedItems(this.resultsItemsList);
-        const listGroups = [];
-        let counter = 0;
-        Object.values(groupedItems).forEach((groupItem, index, array) => {
-            if (this.checkResultsCount(counter)) {
-                const listGroupsElements = [];
-                groupItem.items.forEach((item, subindex, subarray) => {
-                    if (this.checkResultsCount(counter)) {
-                        const isLast = index === array.length - 1 && subindex === subarray.length - 1;
-                        listGroupsElements.push(this.renderItem(item, subindex, !isLast));
-                    }
-                    counter++;
-                });
-                if (listGroupsElements.length) {
-                    listGroups.push(h("z-list-group", { "divider-type": ListDividerType.ELEMENT }, this.renderItemCategory(groupItem), listGroupsElements));
-                }
-            }
-        });
-        return listGroups;
+        this.handleArrowsNavigation(e);
     }
     handleArrowsNavigation(e) {
-        const currentElement = e.target;
-        const arrows = [KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP];
-        if (!arrows.includes(e.key)) {
-            e.preventDefault();
+        var _a, _b, _c, _d, _e, _f;
+        if (![KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP].includes(e.key)) {
             return;
         }
-        if (!this.items.length) {
-            const list = this.element.shadowRoot.querySelector("z-list");
-            if (!list) {
-                return;
-            }
-            this.items = Array.from(list.querySelectorAll(".list-element"));
-        }
-        this.items.forEach((item) => {
-            item.classList.toggle("focused", false);
-        });
-        const currentIndex = this.items.indexOf(currentElement);
+        const currentElement = e.target;
+        const items = Array.from((_b = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll("z-list .list-item")) !== null && _b !== void 0 ? _b : []);
+        const currentIndex = items.indexOf(currentElement);
         if (e.key === KeyboardCode.ARROW_DOWN) {
             e.preventDefault();
             const nextIndex = currentIndex + 1;
-            if (nextIndex < this.items.length) {
-                this.items[nextIndex].focus();
-                this.items[nextIndex].classList.add("focused");
+            if (nextIndex < items.length) {
+                items[nextIndex].focus();
             }
         }
         if (e.key === KeyboardCode.ARROW_UP) {
             e.preventDefault();
             const prevIndex = currentIndex - 1;
             if (prevIndex < 0) {
-                this.element.shadowRoot.querySelector("input").focus();
-                this.element.shadowRoot
-                    .querySelector("input")
-                    .setSelectionRange(this.inputRef.value.length, this.inputRef.value.length);
+                (_d = (_c = this.host.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector("input")) === null || _d === void 0 ? void 0 : _d.focus();
+                (_f = (_e = this.host.shadowRoot) === null || _e === void 0 ? void 0 : _e.querySelector("input")) === null || _f === void 0 ? void 0 : _f.setSelectionRange(this.inputRef.value.length, this.inputRef.value.length);
             }
             if (prevIndex >= 0) {
-                this.items[prevIndex].focus();
-                this.items[prevIndex].classList.add("focused");
+                items[prevIndex].focus();
             }
         }
     }
-    renderItem(item, key, divider) {
-        return (h("z-list-element", { id: `list-item-${this.htmlid}-${key}`, tabIndex: 0, role: "option", dividerType: divider ? ListDividerType.ELEMENT : undefined, onKeyDown: (e) => this.handleArrowsNavigation(e) }, h("div", { class: "list-element", tabIndex: 0, onClick: () => this.emitSearchItemClick(item), onKeyDown: (e) => handleEnterKeydSubmit(e, () => this.emitSearchItemClick(item)), onMouseEnter: (e) => {
-                const currentElement = e.target;
-                currentElement.classList.add("hovered");
-            }, onMouseLeave: (e) => {
-                const currentElement = e.target;
-                currentElement.classList.toggle("hovered", false);
-            } }, h("span", { class: "item ellipsis" }, (item === null || item === void 0 ? void 0 : item.icon) && (h("z-icon", { class: "item-icon", name: item.icon })), h("span", { class: "item-label", title: item.label, innerHTML: this.renderItemLabel(item.label) })), (item === null || item === void 0 ? void 0 : item.tag) && h("z-tag", { icon: item.tag.icon }, !this.isMobile ? item.tag.text : "")), item.children && item.children.length > 0 ? (h("z-list", null, h("div", { class: "children-node" }, item.children.map((child, index) => this.renderItem(child, index, false))))) : null));
+    handleStopTyping(e) {
+        e.stopPropagation();
+        this.searchString = e.detail.value;
+        this.selectedItem = undefined;
+    }
+    handleSubmit() {
+        if (this.preventSubmit) {
+            return;
+        }
+        this.emitSearchSubmit();
+    }
+    handleOutsideClick(e) {
+        const cp = e.composedPath();
+        if (cp.includes(this.host)) {
+            return;
+        }
+        this.showResults = false;
+    }
+    componentWillLoad() {
+        this.resultsItemsList = this.getResultsItemsList();
+        this.mql = matchMedia("(max-width: 767px)");
+        this.onMobileViewChange = (e) => (this.isMobile = e.matches);
+        this.mql.addEventListener("change", this.onMobileViewChange);
+        this.isMobile = this.mql.matches;
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.mql) === null || _a === void 0 ? void 0 : _a.removeEventListener("change", this.onMobileViewChange);
     }
     renderItemLabel(label) {
         if (!this.searchString) {
@@ -270,41 +172,62 @@ export class ZSearchbar {
         }
         return label.replace(new RegExp(this.searchString.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "gmi"), (found) => `<mark>${found}</mark>`);
     }
-    renderItemCategory(groupItem) {
-        if (!(groupItem === null || groupItem === void 0 ? void 0 : groupItem.category)) {
-            return null;
-        }
-        return (h("span", { class: "category-heading", slot: "header-title" }, h("span", { class: "category" }, groupItem.category), (groupItem === null || groupItem === void 0 ? void 0 : groupItem.subcategory) && h("span", { class: "subcategory" }, groupItem.subcategory)));
+    renderItem(item, index) {
+        var _a;
+        return (h("z-list-element", { id: `list-item-${this.htmlid}-${index}`, role: "presentation", htmlTabindex: -1, onKeyDown: (e) => this.onListItemKeyDown(e, item), onClick: () => this.emitSearchItemClick(item) }, h("div", { class: "list-item ellipsis", role: "option", tabindex: 0 }, !!(item === null || item === void 0 ? void 0 : item.icon) && (h("z-icon", { class: "item-icon", name: item.icon })), h("div", { class: "item-label body-3 mobile-body-4", title: item.label, innerHTML: this.renderItemLabel(item.label) }), !!(item === null || item === void 0 ? void 0 : item.tag) && h("z-tag", { icon: item.tag.icon }, !this.isMobile ? item.tag.text : "")), !!((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) && (h("z-list", { class: "sub-list", role: "group", "aria-label": item.label || undefined }, item.children.map((child, index) => this.renderItem(child, index))))));
     }
-    renderSearchHelper(hasDivider = true) {
-        if (!this.autocomplete || this.preventSubmit || !this.searchString) {
-            return null;
+    /**
+     * Renders the item grouped by category and subcategory. If `resultsCount` is set, it limits the number of rendered items.
+     */
+    renderItemGroups() {
+        var _a;
+        if (!((_a = this.resultsItemsList) === null || _a === void 0 ? void 0 : _a.length)) {
+            return;
         }
-        return (h("z-list-element", { role: "option", dividerType: hasDivider ? ListDividerType.ELEMENT : undefined, id: `list-item-${this.htmlid}-search`, onKeyDown: (e) => this.handleArrowsNavigation(e) }, h("div", { tabindex: 0, onClick: () => this.emitSearchSubmit(), onKeyDown: (e) => handleEnterKeydSubmit(e, () => this.emitSearchSubmit()), class: "list-element" }, h("span", { class: "item item-search" }, h("z-icon", { class: "search-icon", name: "left-magnifying-glass" }), h("span", { class: "item-label", innerHTML: this.searchHelperLabel.replace("{searchString}", `<mark>${this.searchString}</mark>`) })))));
-    }
-    renderShowAllResults() {
-        var _a, _b;
-        if (!this.currResultsCount ||
-            !this.searchString ||
-            !((_a = this.resultsItemsList) === null || _a === void 0 ? void 0 : _a.length) ||
-            this.currResultsCount >= ((_b = this.resultsItemsList) === null || _b === void 0 ? void 0 : _b.length)) {
-            return null;
+        const groupedItems = Object.values(this.getGroupedItems());
+        const listGroups = [];
+        const hasResultsLimit = !!this.currResultsCount;
+        let renderedCount = 0;
+        for (const groupItem of groupedItems) {
+            const remaining = hasResultsLimit ? this.currResultsCount - renderedCount : groupItem.items.length;
+            if (remaining <= 0) {
+                break;
+            }
+            const visibleItems = groupItem.items.slice(0, remaining);
+            const listGroupsElements = visibleItems.map((item, subindex) => this.renderItem(item, subindex));
+            renderedCount += listGroupsElements.length;
+            if (!listGroupsElements.length) {
+                continue;
+            }
+            const ariaLabel = [groupItem.category, groupItem.subcategory].filter(Boolean).join(" ");
+            listGroups.push(h("z-list-group", { "aria-label": ariaLabel || undefined }, groupItem.category && (h("z-list-element", { class: "category-heading body-3 mobile-body-4", slot: "header-title", role: "presentation", htmlTabindex: -1 }, h("div", { class: "category" }, groupItem.category), groupItem.subcategory && h("div", { class: "subcategory" }, groupItem.subcategory))), listGroupsElements));
         }
-        return (h("z-list-element", { role: "option", tabindex: 0, clickable: true, id: `list-item-${this.htmlid}-show-all`, onClickItem: () => (this.currResultsCount = 0), color: "color-primary01" }, h("div", { class: "item-show-all" }, "Vedi tutti i risultati")));
+        return listGroups;
     }
     render() {
-        return (h(Host, { key: '6ccdb51d39d0e211de9b79cbbed90f4597b2c25b', onFocus: () => (this.showResults = true), onClick: (e) => this.handleOutsideClick(e), class: { "has-submit": this.showSearchButton, "has-results": this.autocomplete } }, h("div", { key: '90e51c50fe4b06429aad4d222cb26e5789183c30', class: "input-container" }, this.renderInput(), this.renderResults()), this.renderButton()));
+        var _a, _b, _c, _d, _e;
+        return (h(Host, { key: 'cf8441e139a28aa53bd6d61c4b17a12739998d59', onFocus: () => (this.showResults = true), onClick: (e) => this.handleOutsideClick(e), class: { "has-submit": !!this.showSearchButton, "has-results": !!this.autocomplete } }, h("div", { key: 'b24a5060ef65a27fa1096ca0056f1f2d566c9aca', class: "input-container" }, h("z-input", { key: 'fa2648f2a11a83dedbd9c1c5d00712675713936d', ref: (el) => (this.inputRef = el), htmlid: `input-${this.htmlid}`, message: false, placeholder: this.placeholder, onStopTyping: (e) => this.handleStopTyping(e), onKeyUp: (e) => {
+                handleEnterKeydSubmit(e, () => this.handleSubmit());
+                this.handleArrowsNavigation(e);
+            }, onFocus: () => (this.showResults = true), value: this.searchString || ((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.label), size: this.size, label: this.label, "aria-label": this.htmlAriaLabel || this.placeholder || undefined }), !!(this.showResults &&
+            this.autocomplete &&
+            this.searchString &&
+            this.searchString.length >= this.autocompleteMinChars &&
+            this.resultsItemsList) && (h("div", { key: '060a4065341f54257d85e8989f55f3b6e8fe1505', class: "results z-scrollbar" }, this.preventSubmit && !((_b = this.resultsItemsList) === null || _b === void 0 ? void 0 : _b.length) ? (h("div", { class: "item-no-results body-3 mobile-body-4" }, "Non abbiamo trovato risultati per ", h("b", null, this.searchString), h("br", null), h("br", null), "Cosa puoi fare?", h("ul", null, h("li", null, "Verificare di aver scritto bene"), h("li", null, "Provare a cercare un'altra parola"), h("li", null, "Provare a cercare qualcosa di pi\u00F9 generico")))) : (h("z-list", { role: "listbox", id: `list-${this.htmlid}`, "aria-label": this.htmlAriaLabel || this.label || undefined }, this.autocomplete && !this.preventSubmit && !!this.searchString && (h("z-list-element", { role: "presentation", htmlTabindex: -1, id: `list-item-${this.htmlid}-search`, onKeyDown: (e) => this.onSearchHelperKeyDown(e), onClick: () => this.emitSearchSubmit() }, h("div", { class: "list-item item-search", role: "option", tabindex: 0 }, h("z-icon", { class: "search-icon", name: "left-magnifying-glass" }), h("div", { class: "item-label body-3 mobile-body-4", innerHTML: (_c = this.searchHelperLabel) === null || _c === void 0 ? void 0 : _c.replace("{searchString}", `<mark>${this.searchString}</mark>`) })))), this.renderItemGroups(), !!(this.searchString &&
+            ((_d = this.resultsItemsList) === null || _d === void 0 ? void 0 : _d.length) &&
+            this.currResultsCount &&
+            this.currResultsCount < ((_e = this.resultsItemsList) === null || _e === void 0 ? void 0 : _e.length)) && (h("z-list-element", { role: "presentation", htmlTabindex: -1, id: `list-item-${this.htmlid}-show-all` }, h("div", { role: "option", class: "item-show-all body-3 mobile-body-4", tabindex: 0, onClick: () => (this.currResultsCount = undefined) }, "Vedi tutti i risultati")))))))), this.showSearchButton && (h("z-button", { key: 'e37aec8f5feb61ab23fe0c497a11290d2b121375', icon: this.searchButtonIconOnly ? "search" : undefined, "aria-label": this.searchButtonIconOnly ? this.searchButtonLabel.trim() || "CERCA" : undefined, disabled: !!this.preventSubmit, variant: this.variant, size: this.size, onClick: () => this.handleSubmit() }, this.searchButtonIconOnly ? "" : this.searchButtonLabel.trim() || "CERCA"))));
     }
     static get is() { return "z-searchbar"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["styles.css", "../css-components/z-label/styles.css"]
+            "$": ["styles.css", "../css-components/z-label/styles.css", "../css-components/z-scrollbar/styles.css", "../../tokens/typography.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["styles.css", "../css-components/z-label/styles.css"]
+            "$": ["styles.css", "../css-components/z-label/styles.css", "../css-components/z-scrollbar/styles.css", "../../tokens/typography.css"]
         };
     }
     static get properties() {
@@ -321,7 +244,7 @@ export class ZSearchbar {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "the id of the searchbar element"
+                    "text": "The id of the searchbar element"
                 },
                 "getter": false,
                 "setter": false,
@@ -361,7 +284,7 @@ export class ZSearchbar {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "the input label"
+                    "text": "The input label"
                 },
                 "getter": false,
                 "setter": false,
@@ -380,7 +303,7 @@ export class ZSearchbar {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "the input aria-label"
+                    "text": "The input aria-label"
                 },
                 "getter": false,
                 "setter": false,
@@ -477,7 +400,7 @@ export class ZSearchbar {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Number of results shown - default all"
+                    "text": "Number of results shown. Default: all"
                 },
                 "getter": false,
                 "setter": false,
@@ -582,7 +505,7 @@ export class ZSearchbar {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Set button icon without label"
+                    "text": "Hide the label of the submit button, showing only the icon"
                 },
                 "getter": false,
                 "setter": false,
@@ -590,6 +513,26 @@ export class ZSearchbar {
                 "attribute": "search-button-icon-only",
                 "defaultValue": "false"
             },
+            "searchButtonLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The label of the submit button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "search-button-label",
+                "defaultValue": "\"CERCA\""
+            },
             "size": {
                 "type": "string",
                 "mutable": false,
@@ -609,7 +552,7 @@ export class ZSearchbar {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Available sizes: `big`, `small` and `x-small`. Defaults to `big`."
+                    "text": "Size of the `z-input` and submit `z-button`"
                 },
                 "getter": false,
                 "setter": false,
@@ -636,7 +579,7 @@ export class ZSearchbar {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Graphical variant: `primary`, `secondary`, `tertiary`. Defaults to `primary`."
+                    "text": "Submit `z-button` variant"
                 },
                 "getter": false,
                 "setter": false,
@@ -710,7 +653,7 @@ export class ZSearchbar {
                 }
             }];
     }
-    static get elementRef() { return "element"; }
+    static get elementRef() { return "host"; }
     static get watchers() {
         return [{
                 "propName": "resultsItems",
@@ -724,9 +667,6 @@ export class ZSearchbar {
             }, {
                 "propName": "searchString",
                 "methodName": "watchSearchString"
-            }, {
-                "propName": "showResults",
-                "methodName": "watchShowResults"
             }];
     }
     static get listeners() {

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

@@ -22,31 +22,19 @@ const StoryMeta = {
         "preventSubmit": false,
         "showSearchButton": false,
         "searchButtonIconOnly": false,
+        "searchButtonLabel": "",
         "autocomplete": false,
         "autocompleteMinChars": 3,
-        "resultsCount": null,
+        "resultsCount": undefined,
         "searchHelperLabel": "Cerca {searchString}",
-        "resultsItems": [
-            {
-                label: "first item",
-            },
-            {
-                label: "second item",
-            },
-            {
-                label: "third item",
-            },
-            {
-                label: "fourth item",
-            },
-        ],
+        "resultsItems": [{ label: "first item" }, { label: "second item" }, { label: "third item" }, { label: "fourth item" }],
         "sortResultsItems": false,
         "htmlid": "myId",
         "placeholder": "my placeholder",
         "value": "",
         "label": "",
         "htmlAriaLabel": "",
-        "--z-searchbar-results-height": "",
+        "--z-searchbar-results-height": "540px",
         "--z-searchbar-tag-text-color": "var(--color-primary03)",
         "--z-searchbar-tag-bg": "var(--color-hover-primary)",
         "size": ControlSize.BIG,
@@ -59,6 +47,7 @@ export const Default = {
     <z-searchbar
       prevent-submit=${args.preventSubmit}
       show-search-button=${args.showSearchButton}
+      search-button-label=${args.searchButtonLabel}
       search-button-icon-only=${args.searchButtonIconOnly}
       autocomplete=${args.autocomplete}
       autocomplete-min-chars=${args.autocompleteMinChars}
@@ -91,6 +80,7 @@ export const SimpleSearch = {
       prevent-submit="false"
       show-search-button=${args.showSearchButton}
       search-button-icon-only=${args.searchButtonIconOnly}
+      search-button-label=${args.searchButtonLabel}
       autcomplete="false"
       value=${args.value}
       placeholder=${args.placeholder}
@@ -107,12 +97,14 @@ export const Autocomplete = {
         htmlid: "myIdAutocomplete",
         showSearchButton: false,
         searchButtonIconOnly: false,
+        searchButtonLabel: "Cliccami",
     },
     render: (args) => html `
     <z-searchbar
       prevent-submit=${args.preventSubmit}
       show-search-button=${args.showSearchButton}
       search-button-icon-only=${args.searchButtonIconOnly}
+      search-button-label=${args.searchButtonLabel}
       autocomplete=${args.autocomplete}
       autocomplete-min-chars=${args.autocompleteMinChars}
       results-count=${args.resultsCount}
@@ -136,6 +128,7 @@ export const AutocompleteWithComplexItems = {
         htmlid: "myIdGroupedAutocomplete",
         showSearchButton: false,
         searchButtonIconOnly: false,
+        searchButtonLabel: "Cliccami",
         resultsItems: [
             {
                 label: "first item",
@@ -184,6 +177,7 @@ export const AutocompleteWithComplexItems = {
       prevent-submit=${args.preventSubmit}
       show-search-button=${args.showSearchButton}
       search-button-icon-only=${args.searchButtonIconOnly}
+      search-button-label=${args.searchButtonLabel}
       autocomplete=${args.autocomplete}
       autocomplete-min-chars=${args.autocompleteMinChars}
       results-count=${args.resultsCount}
@@ -207,6 +201,7 @@ export const AutocompleteWithComplexTreeItems = {
         htmlid: "myIdGroupedAutocomplete",
         showSearchButton: false,
         searchButtonIconOnly: false,
+        searchButtonLabel: "Cliccami",
         resultsItems: [
             {
                 label: "first item",
@@ -317,6 +312,7 @@ export const AutocompleteWithComplexTreeItems = {
       prevent-submit=${args.preventSubmit}
       show-search-button=${args.showSearchButton}
       search-button-icon-only=${args.searchButtonIconOnly}
+      search-button-label=${args.searchButtonLabel}
       autocomplete=${args.autocomplete}
       autocomplete-min-chars=${args.autocompleteMinChars}
       results-count=${args.resultsCount}