@zanichelli/albe-web-components 19.3.0-RC4 → 19.3.0-RC6

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

@@ -1,48 +1,44 @@
-import { Host, h } from "@stencil/core";
-import { ButtonVariant, ControlSize, Device, KeyboardCode, ListDividerType, } from "../../beans";
-import { getDevice, 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);
- * @cssprop --z-searchbar-tag-bg - Color of tag's background (default --color-hover-primary);
- */
+import { Host, h, } from "@stencil/core";
+import { ButtonVariant, ControlSize, KeyboardCode, } from "../../beans";
+import { handleEnterKeydSubmit, randomId } from "../../utils/utils";
 export class ZSearchbar {
     constructor() {
-        this.resultsItemsList = null;
-        this.items = [];
+        /** The id of the searchbar element */
         this.htmlid = `searchbar-${randomId()}`;
+        /** Prevent submit action */
         this.preventSubmit = false;
-        this.label = undefined;
-        this.htmlAriaLabel = undefined;
-        this.value = undefined;
-        this.placeholder = undefined;
+        /** Show autocomplete results */
         this.autocomplete = false;
+        /** Minimun number of characters to dispatch typing event */
         this.autocompleteMinChars = 3;
-        this.resultsCount = undefined;
+        /** Search helper text */
         this.searchHelperLabel = "Cerca {searchString}";
-        this.resultsItems = undefined;
+        /** Sort autocomplete results items */
         this.sortResultsItems = false;
+        /** Show submit button */
         this.showSearchButton = false;
+        /** Hide the label of the submit button, showing only the icon */
         this.searchButtonIconOnly = false;
+        /** The label of the submit button */
+        this.searchButtonLabel = "CERCA";
+        /** Size of the `z-input` and submit `z-button` */
         this.size = ControlSize.BIG;
+        /** 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.selectedItem = undefined;
-    }
-    emitSearchSubmit() {
-        this.searchSubmit.emit(this.inputRef.value);
-    }
-    emitSearchTyping(search) {
-        this.searchTyping.emit(search);
+        this.resultsItemsList = null;
     }
     emitSearchItemClick(item) {
         this.searchItemClick.emit(item);
         this.selectedItem = item;
         this.searchString = "";
     }
+    emitSearchSubmit() {
+        this.searchSubmit.emit(this.inputRef.value);
+    }
     watchItems() {
         this.resultsItemsList = this.getResultsItemsList();
     }
@@ -53,42 +49,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 : {
@@ -118,146 +89,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.contains("focused") && item.classList.remove("focused"));
-        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.contains("hovered") && currentElement.classList.remove("hovered");
-            } }, 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) {
@@ -265,41 +167,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: '403cde71029ade87b32bac86991c6ea3b1003150', onFocus: () => (this.showResults = true), onClick: (e) => this.handleOutsideClick(e), class: { "has-submit": this.showSearchButton, "has-results": this.autocomplete } }, h("div", { key: '66ca1b6a187f3ffd8a932144a9ace0f557c58bd5', class: "input-container" }, this.renderInput(), this.renderResults()), this.renderButton()));
+        var _a, _b, _c, _d, _e;
+        return (h(Host, { key: 'a08d7cbf665fc71a412f13ce8e6d0424ceeb929d', onFocus: () => (this.showResults = true), onClick: (e) => this.handleOutsideClick(e), class: { "has-submit": !!this.showSearchButton, "has-results": !!this.autocomplete } }, h("div", { key: 'd5987d36585f496b8eebc3eeda36815d629c0b2a', class: "input-container" }, h("z-input", { key: 'cb54997fa4598f8b746c8f0685c283facb8545a6', 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: 'e872905bfe52aef6fa6c49579c7d12e1ebc66bb9', 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: '5fcbf61d74fd3294f1de8ae9a2a7432ddd894bd4', 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() {
@@ -316,10 +239,12 @@ export class ZSearchbar {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "the id of the searchbar element"
+                    "text": "The id of the searchbar element"
                 },
-                "attribute": "htmlid",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "htmlid",
                 "defaultValue": "`searchbar-${randomId()}`"
             },
             "preventSubmit": {
@@ -336,8 +261,10 @@ export class ZSearchbar {
                     "tags": [],
                     "text": "Prevent submit action"
                 },
-                "attribute": "prevent-submit",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "prevent-submit",
                 "defaultValue": "false"
             },
             "label": {
@@ -352,10 +279,12 @@ export class ZSearchbar {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "the input label"
+                    "text": "The input label"
                 },
-                "attribute": "label",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
             },
             "htmlAriaLabel": {
                 "type": "string",
@@ -369,10 +298,12 @@ export class ZSearchbar {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "the input aria-label"
+                    "text": "The input aria-label"
                 },
-                "attribute": "html-aria-label",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "html-aria-label"
             },
             "value": {
                 "type": "string",
@@ -388,8 +319,10 @@ export class ZSearchbar {
                     "tags": [],
                     "text": "Input search string"
                 },
-                "attribute": "value",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
             },
             "placeholder": {
                 "type": "string",
@@ -405,8 +338,10 @@ export class ZSearchbar {
                     "tags": [],
                     "text": "Search input placeholder"
                 },
-                "attribute": "placeholder",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder"
             },
             "autocomplete": {
                 "type": "boolean",
@@ -422,8 +357,10 @@ export class ZSearchbar {
                     "tags": [],
                     "text": "Show autocomplete results"
                 },
-                "attribute": "autocomplete",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "autocomplete",
                 "defaultValue": "false"
             },
             "autocompleteMinChars": {
@@ -440,8 +377,10 @@ export class ZSearchbar {
                     "tags": [],
                     "text": "Minimun number of characters to dispatch typing event"
                 },
-                "attribute": "autocomplete-min-chars",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "autocomplete-min-chars",
                 "defaultValue": "3"
             },
             "resultsCount": {
@@ -456,10 +395,12 @@ export class ZSearchbar {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Number of results shown - default all"
+                    "text": "Number of results shown. Default: all"
                 },
-                "attribute": "results-count",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "results-count"
             },
             "searchHelperLabel": {
                 "type": "string",
@@ -475,8 +416,10 @@ export class ZSearchbar {
                     "tags": [],
                     "text": "Search helper text"
                 },
-                "attribute": "search-helper-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "search-helper-label",
                 "defaultValue": "\"Cerca {searchString}\""
             },
             "resultsItems": {
@@ -489,7 +432,8 @@ export class ZSearchbar {
                         "SearchbarItem": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::SearchbarItem"
+                            "id": "src/beans/index.tsx::SearchbarItem",
+                            "referenceLocation": "SearchbarItem"
                         }
                     }
                 },
@@ -499,8 +443,10 @@ export class ZSearchbar {
                     "tags": [],
                     "text": "Autocomplete results items"
                 },
-                "attribute": "results-items",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "results-items"
             },
             "sortResultsItems": {
                 "type": "boolean",
@@ -516,8 +462,10 @@ export class ZSearchbar {
                     "tags": [],
                     "text": "Sort autocomplete results items"
                 },
-                "attribute": "sort-results-items",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "sort-results-items",
                 "defaultValue": "false"
             },
             "showSearchButton": {
@@ -534,8 +482,10 @@ export class ZSearchbar {
                     "tags": [],
                     "text": "Show submit button"
                 },
-                "attribute": "show-search-button",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "show-search-button",
                 "defaultValue": "false"
             },
             "searchButtonIconOnly": {
@@ -550,12 +500,34 @@ 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"
                 },
-                "attribute": "search-button-icon-only",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "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,
@@ -566,7 +538,8 @@ export class ZSearchbar {
                         "ControlSize": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::ControlSize"
+                            "id": "src/beans/index.tsx::ControlSize",
+                            "referenceLocation": "ControlSize"
                         }
                     }
                 },
@@ -574,10 +547,12 @@ 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`"
                 },
-                "attribute": "size",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "ControlSize.BIG"
             },
             "variant": {
@@ -590,7 +565,8 @@ export class ZSearchbar {
                         "ButtonVariant": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::ButtonVariant"
+                            "id": "src/beans/index.tsx::ButtonVariant",
+                            "referenceLocation": "ButtonVariant"
                         }
                     }
                 },
@@ -598,10 +574,12 @@ export class ZSearchbar {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Graphical variant: `primary`, `secondary`, `tertiary`. Defaults to `primary`."
+                    "text": "Submit `z-button` variant"
                 },
-                "attribute": "variant",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "variant",
                 "defaultValue": "ButtonVariant.PRIMARY"
             }
         };
@@ -663,13 +641,14 @@ export class ZSearchbar {
                         "SearchbarItem": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::SearchbarItem"
+                            "id": "src/beans/index.tsx::SearchbarItem",
+                            "referenceLocation": "SearchbarItem"
                         }
                     }
                 }
             }];
     }
-    static get elementRef() { return "element"; }
+    static get elementRef() { return "host"; }
     static get watchers() {
         return [{
                 "propName": "resultsItems",
@@ -683,9 +662,6 @@ export class ZSearchbar {
             }, {
                 "propName": "searchString",
                 "methodName": "watchSearchString"
-            }, {
-                "propName": "showResults",
-                "methodName": "watchShowResults"
             }];
     }
     static get listeners() {
@@ -698,4 +674,3 @@ export class ZSearchbar {
             }];
     }
 }
-//# sourceMappingURL=index.js.map