@zanichelli/albe-web-components 19.2.7 → 19.2.8-RC1

package/dist/collection/components/z-app-header/index.stories.js

@@ -17,6 +17,8 @@ const StoryMeta = {
         "--app-header-content-max-width": "100%",
         "enableSearch": false,
         "searchPageUrl": "",
+        "searchPlaceholder": "Digita qui quello che vuoi",
+        "searchButtonLabel": "Cliccami",
         "enableZLogo": false,
         "enableOffcanvas": false,
     },
@@ -98,7 +100,7 @@ const menuTemplate = () => {
 export const Title = {
     parameters: {
         controls: {
-            exclude: ["enableOffcanvas"],
+            exclude: ["enableOffcanvas", "searchPlaceholder", "searchButtonLabel"],
         },
     },
     render: (args) => html `<z-app-header
@@ -113,7 +115,7 @@ export const Title = {
 export const ProductLogo = {
     parameters: {
         controls: {
-            exclude: ["enableOffcanvas"],
+            exclude: ["enableOffcanvas", "searchPlaceholder", "searchButtonLabel"],
         },
     },
     render: (args) => html `<z-app-header
@@ -132,7 +134,7 @@ export const ProductLogo = {
 export const TopTitle = {
     parameters: {
         controls: {
-            exclude: ["enableOffcanvas", "enableZLogo"],
+            exclude: ["enableOffcanvas", "enableZLogo", "searchPlaceholder", "searchButtonLabel"],
         },
     },
     render: (args) => html `<z-app-header
@@ -147,7 +149,7 @@ export const TopTitle = {
 export const TopTitleWithProductLogo = {
     parameters: {
         controls: {
-            exclude: ["enableOffcanvas", "enableZLogo"],
+            exclude: ["enableOffcanvas", "enableZLogo", "searchPlaceholder", "searchButtonLabel"],
         },
     },
     render: (args) => html `<z-app-header
@@ -167,7 +169,7 @@ export const TopTitleWithProductLogo = {
 export const CustomMenuButton = {
     parameters: {
         controls: {
-            exclude: ["enableOffcanvas"],
+            exclude: ["enableOffcanvas", "searchPlaceholder", "searchButtonLabel"],
         },
     },
     render: (args) => html `<z-app-header
@@ -183,7 +185,7 @@ export const CustomMenuButton = {
 export const MenuWithTopTitle = {
     parameters: {
         controls: {
-            exclude: ["enableZLogo"],
+            exclude: ["enableZLogo", "searchPlaceholder", "searchButtonLabel"],
         },
     },
     render: (args) => html `<z-app-header
@@ -200,7 +202,7 @@ export const MenuWithTopTitle = {
 export const MenuWithTopTitleAndProductLogo = {
     parameters: {
         controls: {
-            exclude: ["enableZLogo"],
+            exclude: ["enableZLogo", "searchPlaceholder", "searchButtonLabel"],
         },
     },
     render: (args) => html `<z-app-header
@@ -222,7 +224,14 @@ export const MenuWithTopTitleAndProductLogo = {
 export const LongTitle = {
     parameters: {
         controls: {
-            exclude: ["enableOffcanvas", "enableZLogo", "enableSearch", "searchPageUrl"],
+            exclude: [
+                "enableOffcanvas",
+                "enableZLogo",
+                "enableSearch",
+                "searchPageUrl",
+                "searchPlaceholder",
+                "searchButtonLabel",
+            ],
         },
     },
     render: (args) => html `<z-app-header style="--app-header-content-max-width: ${args["--app-header-content-max-width"]}">
@@ -235,6 +244,11 @@ export const OffcanvasMenu = {
     args: {
         enableOffcanvas: true,
     },
+    parameters: {
+        controls: {
+            exclude: ["searchPlaceholder", "searchButtonLabel"],
+        },
+    },
     render: (args) => html `<z-app-header
       .enableOffcanvas=${args.enableOffcanvas}
       .enableSearch=${args.enableSearch}
@@ -261,7 +275,7 @@ export const Stuck = {
             },
         },
         controls: {
-            exclude: ["enableOffcanvas"],
+            exclude: ["enableOffcanvas", "searchPlaceholder", "searchButtonLabel"],
         },
     },
     render: (args) => html `<z-app-header
@@ -292,6 +306,8 @@ export const SearchPageButton = {
     render: (args) => html `<z-app-header
       enable-search
       .enableZLogo=${args.enableZLogo}
+      .searchPlaceholder=${args.searchPlaceholder}
+      .searchButtonLabel=${args.searchButtonLabel}
       search-page-url="https://www.zanichelli.it"
       style="--app-header-content-max-width: ${args["--app-header-content-max-width"]}"
     >

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

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 import { ControlSize, InputType, KeyboardCode, ListDividerType, ListSize } from "../../beans";
-import { getPlainText, randomId } from "../../utils/utils";
+import { encodeString, getPlainText, randomId } from "../../utils/utils";
 export class ZCombobox {
     watchItems() {
         this.itemsList = typeof this.items === "string" ? JSON.parse(this.items) : this.items;
@@ -60,7 +60,7 @@ export class ZCombobox {
         }
     }
     getOptionId(itemId) {
-        return `${this.inputid}-option-${itemId}`;
+        return `${this.inputid}-option-${encodeString(itemId)}`;
     }
     getCheckAllOptionId() {
         return `${this.inputid}-check-all`;
@@ -294,7 +294,7 @@ export class ZCombobox {
         return (h("z-list-element", { class: "check-all-wrapper", role: "presentation", htmlTabindex: -1, dividerType: ListDividerType.ELEMENT, dividerColor: "gray800", size: this.getControlToListSize(), disabled: !!isDisabled }, h("span", { class: "option-wrap", role: "presentation", onClick: () => this.checkOption(optionId) }, h("z-icon", { name: allChecked ? "checkbox-checked" : "checkbox", class: this.focusedItemId === optionId ? "focused" : "" }), h("span", { id: optionId, role: isDisabled ? "presentation" : "option", "aria-selected": allChecked ? "true" : "false" }, allChecked ? this.uncheckalltext : this.checkalltext))));
     }
     render() {
-        return (h("div", { key: '23cd031ec2894308960df94374713e9395521a56', "data-action": `combo-${this.inputid}`, class: { open: this.isopen, fixed: this.isfixed, disabled: this.disabled }, id: this.inputid }, this.renderHeader(), !this.disabled && this.renderContent()));
+        return (h("div", { key: '71d248786dcd29eb5bc03bbb1d9997f4bc7d46c2', "data-action": `combo-${this.inputid}`, class: { open: this.isopen, fixed: this.isfixed, disabled: this.disabled }, id: this.inputid }, this.renderHeader(), !this.disabled && this.renderContent()));
     }
     static get is() { return "z-combobox"; }
     static get encapsulation() { return "shadow"; }

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

@@ -145,16 +145,16 @@ export class ZInput {
             pattern: this.pattern,
         };
     }
-    getRoleAttribute() {
-        return this.role ? { role: this.role } : {};
-    }
     inputHasMessage() {
         if (boolean(this.message) === false || boolean(this.message) === true) {
             return false;
         }
         return true;
     }
-    getAriaAttrubutes() {
+    getAriaAttributes() {
+        return Object.assign(Object.assign(Object.assign({}, (this.role ? { role: this.role } : {})), (this.htmlAriaDescribedBy ? { "aria-describedby": this.htmlAriaDescribedBy } : {})), (this.htmlAriaLabelledby ? { "aria-labelledby": this.htmlAriaLabelledby } : {}));
+    }
+    getTextAriaAttributes() {
         const expanded = this.htmlAriaExpanded ? { "aria-expanded": this.htmlAriaExpanded } : {};
         const controls = this.htmlAriaControls ? { "aria-controls": this.htmlAriaControls } : {};
         const autocomplete = this.htmlAriaAutocomplete ? { "aria-autocomplete": this.htmlAriaAutocomplete } : {};
@@ -165,7 +165,7 @@ export class ZInput {
             ? { "aria-describedby": this.htmlAriaDescribedBy || `${this.htmlid}-message` }
             : {};
         const ariaInvalid = this.status === InputStatus.ERROR ? { "aria-invalid": "true" } : {};
-        return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, expanded), controls), autocomplete), activedescendant), ariaDescribedby), ariaInvalid);
+        return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, this.getAriaAttributes()), expanded), controls), autocomplete), activedescendant), ariaDescribedby), ariaInvalid);
     }
     getFocusBlurAttributes() {
         return {
@@ -175,7 +175,7 @@ export class ZInput {
     }
     renderInputText(type = InputType.TEXT) {
         const ariaLabel = this.ariaLabel ? { "aria-label": this.ariaLabel } : {};
-        const attr = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, this.getTextAttributes()), this.getNumberAttributes(type)), this.getPatternAttribute(type)), ariaLabel), this.getRoleAttribute()), this.getAriaAttrubutes()), this.getFocusBlurAttributes());
+        const attr = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, this.getTextAttributes()), this.getNumberAttributes(type)), this.getPatternAttribute(type)), ariaLabel), this.getTextAriaAttributes()), this.getFocusBlurAttributes());
         if (this.icon || type === InputType.PASSWORD) {
             Object.assign(attr.class, { "has-icon": true });
         }
@@ -225,8 +225,8 @@ export class ZInput {
     /* START textarea */
     renderTextarea() {
         const attributes = this.getTextAttributes();
-        const ariaAttributes = this.getAriaAttrubutes();
-        return (h(Fragment, null, this.renderLabel(), h("div", { class: Object.assign(Object.assign({}, attributes.class), { "textarea-wrapper": true, "readonly": !!attributes.readonly }) }, h("textarea", Object.assign({}, attributes, ariaAttributes, { class: Object.assign(Object.assign({}, attributes.class), { "z-scrollbar": true }), "aria-label": this.ariaLabel || undefined }, this.getRoleAttribute()))), this.renderMessage()));
+        const ariaAttributes = this.getTextAriaAttributes();
+        return (h(Fragment, null, this.renderLabel(), h("div", { class: Object.assign(Object.assign({}, attributes.class), { "textarea-wrapper": true, "readonly": !!attributes.readonly }) }, h("textarea", Object.assign({}, attributes, ariaAttributes, { class: Object.assign(Object.assign({}, attributes.class), { "z-scrollbar": true }), "aria-label": this.ariaLabel || undefined }))), this.renderMessage()));
     }
     /* END textarea */
     handleCheck(ev) {
@@ -235,7 +235,7 @@ export class ZInput {
     }
     /* START checkbox */
     renderCheckbox() {
-        return (h("div", { class: "checkbox-wrapper" }, h("input", Object.assign({ id: this.htmlid, type: "checkbox", name: this.name, checked: this.checked, disabled: this.disabled, readonly: this.readonly, required: this.required, onChange: this.handleCheck.bind(this), value: this.value }, this.getRoleAttribute(), this.getFocusBlurAttributes())), h("label", { htmlFor: this.htmlid, class: {
+        return (h("div", { class: "checkbox-wrapper" }, h("input", Object.assign({ id: this.htmlid, type: "checkbox", name: this.name, checked: this.checked, disabled: this.disabled, readonly: this.readonly, required: this.required, onChange: this.handleCheck.bind(this), value: this.value }, this.getAriaAttributes(), this.getFocusBlurAttributes())), h("label", { htmlFor: this.htmlid, class: {
                 "checkbox-label": true,
                 "after": this.labelPosition === LabelPosition.RIGHT,
                 "before": this.labelPosition === LabelPosition.LEFT,
@@ -244,7 +244,7 @@ export class ZInput {
     /* END checkbox */
     /* START radio */
     renderRadio() {
-        return (h("div", { class: "radio-wrapper" }, h("input", Object.assign({ id: this.htmlid, type: "radio", name: this.name, checked: this.checked, disabled: this.disabled, readonly: this.readonly, onChange: this.handleCheck.bind(this), value: this.value }, this.getRoleAttribute(), this.getFocusBlurAttributes())), h("label", { htmlFor: this.htmlid, class: {
+        return (h("div", { class: "radio-wrapper" }, h("input", Object.assign({ id: this.htmlid, type: "radio", name: this.name, checked: this.checked, disabled: this.disabled, readonly: this.readonly, onChange: this.handleCheck.bind(this), value: this.value }, this.getAriaAttributes(), this.getFocusBlurAttributes())), h("label", { htmlFor: this.htmlid, class: {
                 "radio-label": true,
                 "after": this.labelPosition === LabelPosition.RIGHT,
                 "before": this.labelPosition === LabelPosition.LEFT,
@@ -266,7 +266,7 @@ export class ZInput {
             default:
                 input = this.renderInputText(this.type);
         }
-        return h(Host, { key: '0b363c20732600ca303b84a78e36bdc710c411e2' }, input);
+        return h(Host, { key: 'dfc768f25706d7b3abd219948f378ca9b733eafa' }, input);
     }
     static get is() { return "z-input"; }
     static get encapsulation() { return "scoped"; }
@@ -463,6 +463,44 @@ export class ZInput {
                 "reflect": false,
                 "attribute": "html-aria-activedescendant"
             },
+            "htmlAriaDescribedBy": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "the input aria-describedby (optional)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "html-aria-described-by"
+            },
+            "htmlAriaLabelledby": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "the input aria-labelledby (optional)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "html-aria-labelledby"
+            },
             "value": {
                 "type": "string",
                 "mutable": true,
@@ -646,25 +684,6 @@ export class ZInput {
                 "attribute": "message",
                 "defaultValue": "true"
             },
-            "htmlAriaDescribedBy": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "input helper message id (optional): available for text, password, number, email, textarea - if set, it will be used to populate the aria-describedby attribute, otherwise the attribute (if present) will be populated with an auto-generated value"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "html-aria-described-by"
-            },
             "labelPosition": {
                 "type": "string",
                 "mutable": false,

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

@@ -24,6 +24,8 @@ export class ZSearchbar {
         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 */
@@ -204,17 +206,17 @@ export class ZSearchbar {
     }
     render() {
         var _a, _b, _c, _d, _e;
-        return (h(Host, { key: 'ef0ac81207a219b31d80fd2091070deea1f4314a', onFocus: () => (this.showResults = true), onClick: (e) => this.handleOutsideClick(e), class: { "has-submit": !!this.showSearchButton, "has-results": !!this.autocomplete } }, h("div", { key: 'cb73f19a10f7c26ef0f627916fb8d7dd6a28409c', class: "input-container" }, h("z-input", { key: '11c8ec74157a8a6a278d1e7928b6c819167ff3f4', ref: (el) => (this.inputRef = el), htmlid: `input-${this.htmlid}`, message: false, placeholder: this.placeholder, onStopTyping: (e) => this.handleStopTyping(e), onKeyUp: (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: '072a63a8d3f91b4325c53c0ec56fa90f925199f2', 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 &&
+            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: 'c839b4c5fa6d46f28f9ab83e0a02b1bc3d9594bf', icon: this.searchButtonIconOnly ? "search" : undefined, "aria-label": this.searchButtonIconOnly ? "CERCA" : undefined, disabled: !!this.preventSubmit, variant: this.variant, size: this.size, onClick: () => this.handleSubmit() }, this.searchButtonIconOnly ? "" : "CERCA"))));
+            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"; }
@@ -511,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,

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

@@ -22,6 +22,7 @@ const StoryMeta = {
         "preventSubmit": false,
         "showSearchButton": false,
         "searchButtonIconOnly": false,
+        "searchButtonLabel": "",
         "autocomplete": false,
         "autocompleteMinChars": 3,
         "resultsCount": undefined,
@@ -46,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}
@@ -78,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}
@@ -94,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}
@@ -123,6 +128,7 @@ export const AutocompleteWithComplexItems = {
         htmlid: "myIdGroupedAutocomplete",
         showSearchButton: false,
         searchButtonIconOnly: false,
+        searchButtonLabel: "Cliccami",
         resultsItems: [
             {
                 label: "first item",
@@ -171,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}
@@ -194,6 +201,7 @@ export const AutocompleteWithComplexTreeItems = {
         htmlid: "myIdGroupedAutocomplete",
         showSearchButton: false,
         searchButtonIconOnly: false,
+        searchButtonLabel: "Cliccami",
         resultsItems: [
             {
                 label: "first item",
@@ -304,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}

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

@@ -1,6 +1,6 @@
 import { h, } from "@stencil/core";
 import { ControlSize, KeyboardCode, ListDividerType, ListSize } from "../../beans";
-import { boolean, getClickedElement, getElementTree, getPlainText, randomId } from "../../utils/utils";
+import { boolean, encodeString, getClickedElement, getElementTree, getPlainText, randomId } from "../../utils/utils";
 export class ZSelect {
     constructor() {
         /** the id of the input element */
@@ -87,14 +87,11 @@ export class ZSelect {
         return (_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.id;
     }
     getOptionId(item) {
-        return `${this.htmlid}_key_${item.id}`;
+        return `${this.htmlid}_key_${encodeString(item.id)}`;
     }
     getResetOptionId() {
         return `${this.htmlid}_key_reset`;
     }
-    getItemIdFromOptionId(optionId) {
-        return optionId.replace(`${this.htmlid}_key_`, ``);
-    }
     getGroupedItems() {
         if (!this.itemsList.length) {
             return [];
@@ -224,8 +221,7 @@ export class ZSelect {
                         this.handleResetClick();
                     }
                     else {
-                        const itemId = this.getItemIdFromOptionId(this.focusedItemId);
-                        const item = this.itemsList.find((e) => e.id === itemId) || null;
+                        const item = this.itemsList.find((e) => this.getOptionId(e) === this.focusedItemId) || null;
                         if (item) {
                             this.selectedItem = item;
                             this.emitOptionSelect();
@@ -469,7 +465,7 @@ export class ZSelect {
         return (h("z-input-message", { message: boolean(this.message) === true ? undefined : this.message, status: this.status, class: this.size, disabled: this.disabled }));
     }
     render() {
-        return (h("div", { key: '375b2aba49331cc572cb884f41f2d37c94c7f920', class: "select-wrapper" }, this.renderInput(), this.renderSelectUl(), this.renderMessage()));
+        return (h("div", { key: 'd185176ecce45cde5970a2dceb27065ef27512cb', class: "select-wrapper" }, this.renderInput(), this.renderSelectUl(), this.renderMessage()));
     }
     static get is() { return "z-select"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/utils/utils.js

@@ -267,3 +267,8 @@ export const getPlainText = (html) => {
     const doc = new DOMParser().parseFromString(html, "text/html");
     return doc.body.textContent || "";
 };
+/** Convert string to hex */
+export const encodeString = (string) => string
+    .split("")
+    .map((c) => c.charCodeAt(0).toString(16))
+    .join("");

package/dist/components/index13.js

@@ -1 +1 @@
-import{proxyCustomElement as t,HTMLElement as e,createEvent as i,h as o,Host as s,transformTag as n}from"@stencil/core/internal/client";import{e as a,B as r,g as l}from"./index2.js";import{r as h,m as d}from"./utils.js";import{d as b}from"./index5.js";import{d as f}from"./index6.js";import{d as c}from"./index3.js";import{d as g}from"./index7.js";import{d as v}from"./index8.js";import{d as m}from"./index9.js";import{d as p}from"./index10.js";import{d as z}from"./index11.js";import{d as u}from"./index14.js";const w=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.searchSubmit=i(this,"searchSubmit",7),this.searchTyping=i(this,"searchTyping",7),this.searchItemClick=i(this,"searchItemClick",7),this.htmlid=`searchbar-${h()}`,this.preventSubmit=!1,this.autocomplete=!1,this.autocompleteMinChars=3,this.searchHelperLabel="Cerca {searchString}",this.sortResultsItems=!1,this.showSearchButton=!1,this.searchButtonIconOnly=!1,this.size=a.BIG,this.variant=r.PRIMARY,this.searchString=this.value,this.currResultsCount=this.resultsCount,this.showResults=!1,this.isMobile=!1,this.resultsItemsList=null}emitSearchItemClick(t){this.searchItemClick.emit(t),this.selectedItem=t,this.searchString=""}emitSearchSubmit(){this.searchSubmit.emit(this.inputRef.value)}watchItems(){this.resultsItemsList=this.getResultsItemsList()}watchResultsCount(){this.currResultsCount=this.resultsCount}watchValue(){this.searchString=this.value}watchSearchString(){this.searchTyping.emit(this.searchString),this.searchString||(this.currResultsCount=this.resultsCount)}getResultsItemsList(){return"string"==typeof this.resultsItems?JSON.parse(this.resultsItems):this.resultsItems}getGroupedItems(){const t={};return this.resultsItemsList.forEach((e=>{var i;const o=`${null==e?void 0:e.category}${null==e?void 0:e.subcategory}`;t[o]=null!==(i=t[o])&&void 0!==i?i:{category:null==e?void 0:e.category,subcategory:null==e?void 0:e.subcategory,items:[]},t[o].items.push(e)})),this.sortResultsItems?Object.keys(t).sort().reduce(((e,i)=>(e[i]=Object.assign(Object.assign({},t[i]),{items:t[i].items.sort(((t,e)=>{const i=t.label.toUpperCase(),o=e.label.toUpperCase();return i<o?-1:i>o?1:0}))}),e)),{}):t}onListItemKeyDown(t,e){if(t.key===l.ENTER)return t.preventDefault(),void this.emitSearchItemClick(e);this.handleArrowsNavigation(t)}onSearchHelperKeyDown(t){if(t.key===l.ENTER)return t.preventDefault(),void this.emitSearchSubmit();this.handleArrowsNavigation(t)}handleArrowsNavigation(t){var e,i,o,s,n,a;if(![l.ARROW_DOWN,l.ARROW_UP].includes(t.key))return;const r=t.target,h=Array.from(null!==(i=null===(e=this.host.shadowRoot)||void 0===e?void 0:e.querySelectorAll("z-list .list-item"))&&void 0!==i?i:[]),d=h.indexOf(r);if(t.key===l.ARROW_DOWN){t.preventDefault();const e=d+1;e<h.length&&h[e].focus()}if(t.key===l.ARROW_UP){t.preventDefault();const e=d-1;e<0&&(null===(s=null===(o=this.host.shadowRoot)||void 0===o?void 0:o.querySelector("input"))||void 0===s||s.focus(),null===(a=null===(n=this.host.shadowRoot)||void 0===n?void 0:n.querySelector("input"))||void 0===a||a.setSelectionRange(this.inputRef.value.length,this.inputRef.value.length)),e>=0&&h[e].focus()}}handleStopTyping(t){t.stopPropagation(),this.searchString=t.detail.value,this.selectedItem=void 0}handleSubmit(){this.preventSubmit||this.emitSearchSubmit()}handleOutsideClick(t){t.composedPath().includes(this.host)||(this.showResults=!1)}componentWillLoad(){this.resultsItemsList=this.getResultsItemsList(),this.mql=matchMedia("(max-width: 767px)"),this.onMobileViewChange=t=>this.isMobile=t.matches,this.mql.addEventListener("change",this.onMobileViewChange),this.isMobile=this.mql.matches}disconnectedCallback(){var t;null===(t=this.mql)||void 0===t||t.removeEventListener("change",this.onMobileViewChange)}renderItemLabel(t){return this.searchString?t.replace(new RegExp(this.searchString.replace(/[.*+?^${}()|[\]\\]/g,"\\$&"),"gmi"),(t=>`<mark>${t}</mark>`)):t}renderItem(t,e){var i;return o("z-list-element",{id:`list-item-${this.htmlid}-${e}`,role:"presentation",htmlTabindex:-1,onKeyDown:e=>this.onListItemKeyDown(e,t),onClick:()=>this.emitSearchItemClick(t)},o("div",{class:"list-item ellipsis",role:"option",tabindex:0},!!(null==t?void 0:t.icon)&&o("z-icon",{class:"item-icon",name:t.icon}),o("div",{class:"item-label body-3 mobile-body-4",title:t.label,innerHTML:this.renderItemLabel(t.label)}),!!(null==t?void 0:t.tag)&&o("z-tag",{icon:t.tag.icon},this.isMobile?"":t.tag.text)),!!(null===(i=t.children)||void 0===i?void 0:i.length)&&o("z-list",{class:"sub-list",role:"group","aria-label":t.label||void 0},t.children.map(((t,e)=>this.renderItem(t,e)))))}renderItemGroups(){var t;if(!(null===(t=this.resultsItemsList)||void 0===t?void 0:t.length))return;const e=Object.values(this.getGroupedItems()),i=[],s=!!this.currResultsCount;let n=0;for(const t of e){const e=s?this.currResultsCount-n:t.items.length;if(e<=0)break;const a=t.items.slice(0,e).map(((t,e)=>this.renderItem(t,e)));if(n+=a.length,!a.length)continue;const r=[t.category,t.subcategory].filter(Boolean).join(" ");i.push(o("z-list-group",{"aria-label":r||void 0},t.category&&o("z-list-element",{class:"category-heading body-3 mobile-body-4",slot:"header-title",role:"presentation",htmlTabindex:-1},o("div",{class:"category"},t.category),t.subcategory&&o("div",{class:"subcategory"},t.subcategory)),a))}return i}render(){var t,e,i,n,a;return o(s,{key:"ef0ac81207a219b31d80fd2091070deea1f4314a",onFocus:()=>this.showResults=!0,onClick:t=>this.handleOutsideClick(t),class:{"has-submit":!!this.showSearchButton,"has-results":!!this.autocomplete}},o("div",{key:"cb73f19a10f7c26ef0f627916fb8d7dd6a28409c",class:"input-container"},o("z-input",{key:"11c8ec74157a8a6a278d1e7928b6c819167ff3f4",ref:t=>this.inputRef=t,htmlid:`input-${this.htmlid}`,message:!1,placeholder:this.placeholder,onStopTyping:t=>this.handleStopTyping(t),onKeyUp:t=>{d(t,(()=>this.handleSubmit())),this.handleArrowsNavigation(t)},onFocus:()=>this.showResults=!0,value:this.searchString||(null===(t=this.selectedItem)||void 0===t?void 0:t.label),size:this.size,label:this.label,"aria-label":this.htmlAriaLabel||this.placeholder||void 0}),!!(this.showResults&&this.autocomplete&&this.searchString&&this.searchString.length>=this.autocompleteMinChars&&this.resultsItemsList)&&o("div",{key:"072a63a8d3f91b4325c53c0ec56fa90f925199f2",class:"results z-scrollbar"},this.preventSubmit&&!(null===(e=this.resultsItemsList)||void 0===e?void 0:e.length)?o("div",{class:"item-no-results body-3 mobile-body-4"},"Non abbiamo trovato risultati per ",o("b",null,this.searchString),o("br",null),o("br",null),"Cosa puoi fare?",o("ul",null,o("li",null,"Verificare di aver scritto bene"),o("li",null,"Provare a cercare un'altra parola"),o("li",null,"Provare a cercare qualcosa di più generico"))):o("z-list",{role:"listbox",id:`list-${this.htmlid}`,"aria-label":this.htmlAriaLabel||this.label||void 0},this.autocomplete&&!this.preventSubmit&&!!this.searchString&&o("z-list-element",{role:"presentation",htmlTabindex:-1,id:`list-item-${this.htmlid}-search`,onKeyDown:t=>this.onSearchHelperKeyDown(t),onClick:()=>this.emitSearchSubmit()},o("div",{class:"list-item item-search",role:"option",tabindex:0},o("z-icon",{class:"search-icon",name:"left-magnifying-glass"}),o("div",{class:"item-label body-3 mobile-body-4",innerHTML:null===(i=this.searchHelperLabel)||void 0===i?void 0:i.replace("{searchString}",`<mark>${this.searchString}</mark>`)}))),this.renderItemGroups(),!!(this.searchString&&(null===(n=this.resultsItemsList)||void 0===n?void 0:n.length)&&this.currResultsCount&&this.currResultsCount<(null===(a=this.resultsItemsList)||void 0===a?void 0:a.length))&&o("z-list-element",{role:"presentation",htmlTabindex:-1,id:`list-item-${this.htmlid}-show-all`},o("div",{role:"option",class:"item-show-all body-3 mobile-body-4",tabindex:0,onClick:()=>this.currResultsCount=void 0},"Vedi tutti i risultati"))))),this.showSearchButton&&o("z-button",{key:"c839b4c5fa6d46f28f9ab83e0a02b1bc3d9594bf",icon:this.searchButtonIconOnly?"search":void 0,"aria-label":this.searchButtonIconOnly?"CERCA":void 0,disabled:!!this.preventSubmit,variant:this.variant,size:this.size,onClick:()=>this.handleSubmit()},this.searchButtonIconOnly?"":"CERCA"))}get host(){return this}static get watchers(){return{resultsItems:[{watchItems:0}],resultsCount:[{watchResultsCount:0}],value:[{watchValue:0}],searchString:[{watchSearchString:0}]}}static get style(){return':host{--z-searchbar-tag-text-color:var(--color-primary03);--z-searchbar-tag-bg:var(--color-hover-primary);--z-searchbar-item-height:2.75rem;z-index:15;display:flex;column-gap:calc(var(--space-unit) * 2);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host,*,::after,::before{box-sizing:border-box}.input-container{position:relative;display:flex;width:100%;flex-direction:column}.input-container z-input{z-index:1}.results{--item-icon-size:1rem;--z-icon-height:var(--item-icon-size);--z-icon-width:var(--item-icon-size);--item-inline-padding:calc(var(--space-unit) * 1.5);--item-col-gap:var(--space-unit);position:absolute;top:calc(100% - 1px);left:0;overflow:auto;width:100%;max-height:var(--z-searchbar-results-height, 540px);border:var(--border-size-small) solid var(--color-form-surface03);border-top:none;background:var(--color-form-background)}.results z-list-element{--background-color-list-element:var(--color-form-background);position:relative;display:block}.results>z-list>z-list-element::part(list-item-container){padding:0 var(--item-inline-padding)}.results z-list-element>.list-item{position:relative;display:flex;align-items:center;padding:calc(var(--space-unit) * 1.25) calc(var(--space-unit) / 4);background-color:transparent;color:var(--color-form-default-text);fill:var(--color-form-default-icon);gap:var(--item-col-gap)}.results z-list-element>.list-item:hover{background-color:var(--gray100);cursor:pointer}.results z-list-element>.list-item:focus-visible{z-index:1;box-shadow:var(--shadow-focus-primary);outline:none}.results>z-list>z-list-element:not(:last-child)>.list-item,.results z-list-group:not(:last-child)>z-list-element:not(.category-heading){border-bottom:1px solid var(--color-form-surface03)}.results z-list-group{padding:0 var(--item-inline-padding)}.results z-list-group>z-list-element::part(list-item-container){padding:0}.results .sub-list{padding-left:calc(var(--item-icon-size) + var(--item-col-gap))}.results .sub-list z-list-element::part(list-item-container){padding:0}.results .sub-list z-list-element>.list-item{position:relative}.results .sub-list>z-list-element:not(:last-child)::before,.results .sub-list>z-list-element>.list-item::before{position:absolute;top:0;left:calc(0px - var(--item-col-gap) - var(--item-icon-size) / 2 + 1px);border-left:1px solid var(--color-form-surface03);content:""}.results .sub-list>z-list-element:not(:last-child)::before{top:-4px;height:calc(100% + 4px)}.results .sub-list z-list-element>.list-item::before{width:14px;height:calc(var(--z-searchbar-item-height) / 2);border-bottom:1px solid var(--color-form-surface03)}.results .category-heading>.category{font-style:italic}.results .category-heading>.subcategory{text-transform:uppercase}.results z-list-element>.list-item .ellipsis{overflow:hidden}.results .ellipsis>.item-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.results .item-label mark{background:var(--color-primary03);color:var(--color-default-text)}.results .list-item>z-tag{--z-tag-bg:var(--z-searchbar-tag-bg);--z-tag-text-color:var(--z-searchbar-tag-text-color);margin-left:auto;white-space:nowrap}.results .item-show-all{width:100%;color:var(--color-primary01);cursor:pointer;text-align:center}.results .item-no-results{display:block;font-style:italic}.results .item-no-results>ul{padding-left:calc(var(--space-unit) * 2);margin:var(--space-unit)}@media (min-width: 768px){.results{--item-icon-size:1.125rem}}.z-label{display:block;padding-bottom:var(--space-unit);color:var(--color-default-text);font-family:var(--font-family-sans);font-size:var(--font-size-1);font-weight:var(--font-sb);text-align:left;text-transform:uppercase}.z-scrollbar::-webkit-scrollbar{width:6px;background:linear-gradient(to right, transparent 0 1px, var(--gray200) 1px 5px, transparent 5px 6px)}.z-scrollbar::-webkit-scrollbar-thumb{background-color:var(--color-primary01)}.z-scrollbar::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}:host([theme="dark"]) .z-scrollbar,.z-scrollbar--dark{--z-scrollbar-track-gradient:linear-gradient(     to right,     transparent 0 1px,     var(--gray600) 1px 5px,     transparent 5px 6px   );--z-scrollbar-track-color:var(--gray600);--z-scrollbar-thumb-color:var(--color-primary03);--z-scrollbar-thumb-hover-color:var(--color-hover-primary);--z-scrollbar-corner-color:transparent}@supports not selector(.z-scrollbar::-webkit-scrollbar-track){.z-scrollbar{scrollbar-color:var(--color-primary01) transparent}:host([theme="dark"]) .z-scrollbar,.z-scrollbar--dark{scrollbar-color:var(--z-scrollbar-thumb-color, var(--color-primary03))       var(--z-scrollbar-track-color, var(--gray600))}}:root{--font-family-sans:"IBM Plex Sans", sans-serif;--font-family-serif:"IBM Plex Serif", serif;--font-lt:300;--font-rg:400;--font-sb:600;--font-bd:700;--font-size-1:0.75rem;--font-size-2:0.875rem;--font-size-3:1rem;--font-size-4:1.125rem;--font-size-5:1.25rem;--font-size-6:1.5rem;--font-size-7:1.75rem;--font-size-8:2rem;--font-size-9:2.25rem;--font-size-10:2.625rem;--font-size-11:3rem;--font-size-12:3.375rem;--font-size-13:3.75rem;--font-size-14:4.25rem;--font-size-15:4.75rem;--font-size-16:5.25rem;--font-size-17:5.75rem;--section-title-1:var(--font-sb) var(--font-size-11) / 1.083 var(--font-family-serif);--section-title-2:var(--font-sb) var(--font-size-10) / 1.142 var(--font-family-serif);--section-title-3:var(--font-sb) var(--font-size-9) / 1.222 var(--font-family-serif);--section-title-4:var(--font-sb) var(--font-size-8) / 1.25 var(--font-family-serif);--section-title-5:var(--font-sb) var(--font-size-7) / 1.2857 var(--font-family-serif);--section-title-6:var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-serif)}.heading-1,.heading-1-sb,.heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.heading-2,.heading-2-sb,.heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.heading-3,.heading-3-sb,.heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.heading-4,.heading-4-sb,.heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.body-1,.body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.body-2,.body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.body-3,.body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.body-4,.body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.body-5,.body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.interactive-1,.interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.interactive-2,.interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.interactive-3,.interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.helper,.helper-sb{font-size:var(--font-size-1);font-style:italic;font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.section-title-1{font:var(--section-title-1)}.section-title-2{font:var(--section-title-2)}.section-title-3{font:var(--section-title-3)}.section-title-4{font:var(--section-title-4)}.section-title-5{font:var(--section-title-5)}.section-title-6{font:var(--section-title-6)}@media (min-width: 1152px){.heading-1,.heading-1-sb,.heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.heading-2,.heading-2-sb,.heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}}@media (max-width: 767px){.mobile-heading-1,.mobile-heading-1-sb,.mobile-heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.mobile-heading-2,.mobile-heading-2-sb,.mobile-heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.mobile-heading-3,.mobile-heading-3-sb,.mobile-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.mobile-heading-4,.mobile-heading-4-sb,.mobile-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.mobile-body-1,.mobile-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.mobile-body-2,.mobile-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.mobile-body-3,.mobile-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.mobile-body-4,.mobile-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.mobile-body-5,.mobile-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.mobile-interactive-1,.mobile-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.mobile-interactive-2,.mobile-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.mobile-interactive-3,.mobile-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.mobile-section-title-1{font:var(--section-title-1)}.mobile-section-title-2{font:var(--section-title-2)}.mobile-section-title-3{font:var(--section-title-3)}.mobile-section-title-4{font:var(--section-title-4)}.mobile-section-title-5{font:var(--section-title-5)}.mobile-section-title-6{font:var(--section-title-6)}.mobile-heading-1-lt,.mobile-heading-2-lt,.mobile-heading-3-lt,.mobile-heading-4-lt{font-weight:var(--font-lt)}.mobile-heading-1-sb,.mobile-heading-2-sb,.mobile-heading-3-sb,.mobile-heading-4-sb,.mobile-body-1-sb,.mobile-body-2-sb,.mobile-body-3-sb,.mobile-body-4-sb,.mobile-body-5-sb,.mobile-interactive-1-sb,.mobile-interactive-2-sb,.mobile-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 768px) and (max-width: 1151px){.tablet-heading-1,.tablet-heading-1-sb,.tablet-heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.tablet-heading-2,.tablet-heading-2-sb,.tablet-heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.tablet-heading-3,.tablet-heading-3-sb,.tablet-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.tablet-heading-4,.tablet-heading-4-sb,.tablet-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.tablet-body-1,.tablet-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.tablet-body-2,.tablet-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.tablet-body-3,.tablet-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.tablet-body-4,.tablet-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.tablet-body-5,.tablet-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.tablet-interactive-1,.tablet-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.tablet-interactive-2,.tablet-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.tablet-interactive-3,.tablet-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.tablet-section-title-1{font:var(--section-title-1)}.tablet-section-title-2{font:var(--section-title-2)}.tablet-section-title-3{font:var(--section-title-3)}.tablet-section-title-4{font:var(--section-title-4)}.tablet-section-title-5{font:var(--section-title-5)}.tablet-section-title-6{font:var(--section-title-6)}.tablet-heading-1-lt,.tablet-heading-2-lt,.tablet-heading-3-lt,.tablet-heading-4-lt{font-weight:var(--font-lt)}.tablet-heading-1-sb,.tablet-heading-2-sb,.tablet-heading-3-sb,.tablet-heading-4-sb,.tablet-body-1-sb,.tablet-body-2-sb,.tablet-body-3-sb,.tablet-body-4-sb,.tablet-body-5-sb,.tablet-interactive-1-sb,.tablet-interactive-2-sb,.tablet-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 1152px) and (max-width: 1365px){.desktop-heading-1,.desktop-heading-1-sb,.desktop-heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.desktop-heading-2,.desktop-heading-2-sb,.desktop-heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.desktop-heading-3,.desktop-heading-3-sb,.desktop-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.desktop-heading-4,.desktop-heading-4-sb,.desktop-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.desktop-body-1,.desktop-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.desktop-body-2,.desktop-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.desktop-body-3,.desktop-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.desktop-body-4,.desktop-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.desktop-body-5,.desktop-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.desktop-interactive-1,.desktop-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.desktop-interactive-2,.desktop-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.desktop-interactive-3,.desktop-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.desktop-section-title-1{font:var(--section-title-1)}.desktop-section-title-2{font:var(--section-title-2)}.desktop-section-title-3{font:var(--section-title-3)}.desktop-section-title-4{font:var(--section-title-4)}.desktop-section-title-5{font:var(--section-title-5)}.desktop-section-title-6{font:var(--section-title-6)}.desktop-heading-1-lt,.desktop-heading-2-lt,.desktop-heading-3-lt,.desktop-heading-4-lt{font-weight:var(--font-lt)}.desktop-heading-1-sb,.desktop-heading-2-sb,.desktop-heading-3-sb,.desktop-heading-4-sb,.desktop-body-1-sb,.desktop-body-2-sb,.desktop-body-3-sb,.desktop-body-4-sb,.desktop-body-5-sb,.desktop-interactive-1-sb,.desktop-interactive-2-sb,.desktop-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 1366px){.wide-heading-1,.wide-heading-1-sb,.wide-heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.wide-heading-2,.wide-heading-2-sb,.wide-heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.wide-heading-3,.wide-heading-3-sb,.wide-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.wide-heading-4,.wide-heading-4-sb,.wide-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.wide-body-1,.wide-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.wide-body-2,.wide-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.wide-body-3,.wide-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.wide-body-4,.wide-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.wide-body-5,.wide-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.wide-interactive-1,.wide-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.wide-interactive-2,.wide-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.wide-interactive-3,.wide-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.wide-section-title-1{font:var(--section-title-1)}.wide-section-title-2{font:var(--section-title-2)}.wide-section-title-3{font:var(--section-title-3)}.wide-section-title-4{font:var(--section-title-4)}.wide-section-title-5{font:var(--section-title-5)}.wide-section-title-6{font:var(--section-title-6)}.wide-heading-1-lt,.wide-heading-2-lt,.wide-heading-3-lt,.wide-heading-4-lt{font-weight:var(--font-lt)}.wide-heading-1-sb,.wide-heading-2-sb,.wide-heading-3-sb,.wide-heading-4-sb,.wide-body-1-sb,.wide-body-2-sb,.wide-body-3-sb,.wide-body-4-sb,.wide-body-5-sb,.wide-interactive-1-sb,.wide-interactive-2-sb,.wide-interactive-3-sb{font-weight:var(--font-sb)}}.heading-1-lt,.heading-2-lt,.heading-3-lt,.heading-4-lt{font-weight:var(--font-lt)}.heading-1-sb,.heading-2-sb,.heading-3-sb,.heading-4-sb,.body-1-sb,.body-2-sb,.body-3-sb,.body-4-sb,.body-5-sb,.interactive-1-sb,.interactive-2-sb,.interactive-3-sb,.helper-sb{font-weight:var(--font-sb)}'}},[1,"z-searchbar",{htmlid:[513],preventSubmit:[4,"prevent-submit"],label:[1],htmlAriaLabel:[1,"html-aria-label"],value:[1],placeholder:[1],autocomplete:[4],autocompleteMinChars:[2,"autocomplete-min-chars"],resultsCount:[2,"results-count"],searchHelperLabel:[1,"search-helper-label"],resultsItems:[1,"results-items"],sortResultsItems:[4,"sort-results-items"],showSearchButton:[4,"show-search-button"],searchButtonIconOnly:[4,"search-button-icon-only"],size:[1],variant:[1],searchString:[32],currResultsCount:[32],showResults:[32],isMobile:[32],selectedItem:[32]},[[4,"click","handleOutsideClick"]],{resultsItems:[{watchItems:0}],resultsCount:[{watchResultsCount:0}],value:[{watchValue:0}],searchString:[{watchSearchString:0}]}]);function y(){"undefined"!=typeof customElements&&["z-searchbar","z-button","z-divider","z-icon","z-input","z-input-message","z-list","z-list-element","z-list-group","z-tag"].forEach((t=>{switch(t){case"z-searchbar":customElements.get(n(t))||customElements.define(n(t),w);break;case"z-button":customElements.get(n(t))||b();break;case"z-divider":customElements.get(n(t))||f();break;case"z-icon":customElements.get(n(t))||c();break;case"z-input":customElements.get(n(t))||g();break;case"z-input-message":customElements.get(n(t))||v();break;case"z-list":customElements.get(n(t))||m();break;case"z-list-element":customElements.get(n(t))||p();break;case"z-list-group":customElements.get(n(t))||z();break;case"z-tag":customElements.get(n(t))||u()}}))}export{w as Z,y as d}
+import{proxyCustomElement as t,HTMLElement as e,createEvent as i,h as o,Host as s,transformTag as n}from"@stencil/core/internal/client";import{e as a,B as r,g as l}from"./index2.js";import{r as h,n as d}from"./utils.js";import{d as b}from"./index5.js";import{d as c}from"./index6.js";import{d as f}from"./index3.js";import{d as g}from"./index7.js";import{d as v}from"./index8.js";import{d as m}from"./index9.js";import{d as p}from"./index10.js";import{d as z}from"./index11.js";import{d as u}from"./index14.js";const w=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.searchSubmit=i(this,"searchSubmit",7),this.searchTyping=i(this,"searchTyping",7),this.searchItemClick=i(this,"searchItemClick",7),this.htmlid=`searchbar-${h()}`,this.preventSubmit=!1,this.autocomplete=!1,this.autocompleteMinChars=3,this.searchHelperLabel="Cerca {searchString}",this.sortResultsItems=!1,this.showSearchButton=!1,this.searchButtonIconOnly=!1,this.searchButtonLabel="CERCA",this.size=a.BIG,this.variant=r.PRIMARY,this.searchString=this.value,this.currResultsCount=this.resultsCount,this.showResults=!1,this.isMobile=!1,this.resultsItemsList=null}emitSearchItemClick(t){this.searchItemClick.emit(t),this.selectedItem=t,this.searchString=""}emitSearchSubmit(){this.searchSubmit.emit(this.inputRef.value)}watchItems(){this.resultsItemsList=this.getResultsItemsList()}watchResultsCount(){this.currResultsCount=this.resultsCount}watchValue(){this.searchString=this.value}watchSearchString(){this.searchTyping.emit(this.searchString),this.searchString||(this.currResultsCount=this.resultsCount)}getResultsItemsList(){return"string"==typeof this.resultsItems?JSON.parse(this.resultsItems):this.resultsItems}getGroupedItems(){const t={};return this.resultsItemsList.forEach((e=>{var i;const o=`${null==e?void 0:e.category}${null==e?void 0:e.subcategory}`;t[o]=null!==(i=t[o])&&void 0!==i?i:{category:null==e?void 0:e.category,subcategory:null==e?void 0:e.subcategory,items:[]},t[o].items.push(e)})),this.sortResultsItems?Object.keys(t).sort().reduce(((e,i)=>(e[i]=Object.assign(Object.assign({},t[i]),{items:t[i].items.sort(((t,e)=>{const i=t.label.toUpperCase(),o=e.label.toUpperCase();return i<o?-1:i>o?1:0}))}),e)),{}):t}onListItemKeyDown(t,e){if(t.key===l.ENTER)return t.preventDefault(),void this.emitSearchItemClick(e);this.handleArrowsNavigation(t)}onSearchHelperKeyDown(t){if(t.key===l.ENTER)return t.preventDefault(),void this.emitSearchSubmit();this.handleArrowsNavigation(t)}handleArrowsNavigation(t){var e,i,o,s,n,a;if(![l.ARROW_DOWN,l.ARROW_UP].includes(t.key))return;const r=t.target,h=Array.from(null!==(i=null===(e=this.host.shadowRoot)||void 0===e?void 0:e.querySelectorAll("z-list .list-item"))&&void 0!==i?i:[]),d=h.indexOf(r);if(t.key===l.ARROW_DOWN){t.preventDefault();const e=d+1;e<h.length&&h[e].focus()}if(t.key===l.ARROW_UP){t.preventDefault();const e=d-1;e<0&&(null===(s=null===(o=this.host.shadowRoot)||void 0===o?void 0:o.querySelector("input"))||void 0===s||s.focus(),null===(a=null===(n=this.host.shadowRoot)||void 0===n?void 0:n.querySelector("input"))||void 0===a||a.setSelectionRange(this.inputRef.value.length,this.inputRef.value.length)),e>=0&&h[e].focus()}}handleStopTyping(t){t.stopPropagation(),this.searchString=t.detail.value,this.selectedItem=void 0}handleSubmit(){this.preventSubmit||this.emitSearchSubmit()}handleOutsideClick(t){t.composedPath().includes(this.host)||(this.showResults=!1)}componentWillLoad(){this.resultsItemsList=this.getResultsItemsList(),this.mql=matchMedia("(max-width: 767px)"),this.onMobileViewChange=t=>this.isMobile=t.matches,this.mql.addEventListener("change",this.onMobileViewChange),this.isMobile=this.mql.matches}disconnectedCallback(){var t;null===(t=this.mql)||void 0===t||t.removeEventListener("change",this.onMobileViewChange)}renderItemLabel(t){return this.searchString?t.replace(new RegExp(this.searchString.replace(/[.*+?^${}()|[\]\\]/g,"\\$&"),"gmi"),(t=>`<mark>${t}</mark>`)):t}renderItem(t,e){var i;return o("z-list-element",{id:`list-item-${this.htmlid}-${e}`,role:"presentation",htmlTabindex:-1,onKeyDown:e=>this.onListItemKeyDown(e,t),onClick:()=>this.emitSearchItemClick(t)},o("div",{class:"list-item ellipsis",role:"option",tabindex:0},!!(null==t?void 0:t.icon)&&o("z-icon",{class:"item-icon",name:t.icon}),o("div",{class:"item-label body-3 mobile-body-4",title:t.label,innerHTML:this.renderItemLabel(t.label)}),!!(null==t?void 0:t.tag)&&o("z-tag",{icon:t.tag.icon},this.isMobile?"":t.tag.text)),!!(null===(i=t.children)||void 0===i?void 0:i.length)&&o("z-list",{class:"sub-list",role:"group","aria-label":t.label||void 0},t.children.map(((t,e)=>this.renderItem(t,e)))))}renderItemGroups(){var t;if(!(null===(t=this.resultsItemsList)||void 0===t?void 0:t.length))return;const e=Object.values(this.getGroupedItems()),i=[],s=!!this.currResultsCount;let n=0;for(const t of e){const e=s?this.currResultsCount-n:t.items.length;if(e<=0)break;const a=t.items.slice(0,e).map(((t,e)=>this.renderItem(t,e)));if(n+=a.length,!a.length)continue;const r=[t.category,t.subcategory].filter(Boolean).join(" ");i.push(o("z-list-group",{"aria-label":r||void 0},t.category&&o("z-list-element",{class:"category-heading body-3 mobile-body-4",slot:"header-title",role:"presentation",htmlTabindex:-1},o("div",{class:"category"},t.category),t.subcategory&&o("div",{class:"subcategory"},t.subcategory)),a))}return i}render(){var t,e,i,n,a;return o(s,{key:"cf8441e139a28aa53bd6d61c4b17a12739998d59",onFocus:()=>this.showResults=!0,onClick:t=>this.handleOutsideClick(t),class:{"has-submit":!!this.showSearchButton,"has-results":!!this.autocomplete}},o("div",{key:"b24a5060ef65a27fa1096ca0056f1f2d566c9aca",class:"input-container"},o("z-input",{key:"fa2648f2a11a83dedbd9c1c5d00712675713936d",ref:t=>this.inputRef=t,htmlid:`input-${this.htmlid}`,message:!1,placeholder:this.placeholder,onStopTyping:t=>this.handleStopTyping(t),onKeyUp:t=>{d(t,(()=>this.handleSubmit())),this.handleArrowsNavigation(t)},onFocus:()=>this.showResults=!0,value:this.searchString||(null===(t=this.selectedItem)||void 0===t?void 0:t.label),size:this.size,label:this.label,"aria-label":this.htmlAriaLabel||this.placeholder||void 0}),!!(this.showResults&&this.autocomplete&&this.searchString&&this.searchString.length>=this.autocompleteMinChars&&this.resultsItemsList)&&o("div",{key:"060a4065341f54257d85e8989f55f3b6e8fe1505",class:"results z-scrollbar"},this.preventSubmit&&!(null===(e=this.resultsItemsList)||void 0===e?void 0:e.length)?o("div",{class:"item-no-results body-3 mobile-body-4"},"Non abbiamo trovato risultati per ",o("b",null,this.searchString),o("br",null),o("br",null),"Cosa puoi fare?",o("ul",null,o("li",null,"Verificare di aver scritto bene"),o("li",null,"Provare a cercare un'altra parola"),o("li",null,"Provare a cercare qualcosa di più generico"))):o("z-list",{role:"listbox",id:`list-${this.htmlid}`,"aria-label":this.htmlAriaLabel||this.label||void 0},this.autocomplete&&!this.preventSubmit&&!!this.searchString&&o("z-list-element",{role:"presentation",htmlTabindex:-1,id:`list-item-${this.htmlid}-search`,onKeyDown:t=>this.onSearchHelperKeyDown(t),onClick:()=>this.emitSearchSubmit()},o("div",{class:"list-item item-search",role:"option",tabindex:0},o("z-icon",{class:"search-icon",name:"left-magnifying-glass"}),o("div",{class:"item-label body-3 mobile-body-4",innerHTML:null===(i=this.searchHelperLabel)||void 0===i?void 0:i.replace("{searchString}",`<mark>${this.searchString}</mark>`)}))),this.renderItemGroups(),!!(this.searchString&&(null===(n=this.resultsItemsList)||void 0===n?void 0:n.length)&&this.currResultsCount&&this.currResultsCount<(null===(a=this.resultsItemsList)||void 0===a?void 0:a.length))&&o("z-list-element",{role:"presentation",htmlTabindex:-1,id:`list-item-${this.htmlid}-show-all`},o("div",{role:"option",class:"item-show-all body-3 mobile-body-4",tabindex:0,onClick:()=>this.currResultsCount=void 0},"Vedi tutti i risultati"))))),this.showSearchButton&&o("z-button",{key:"e37aec8f5feb61ab23fe0c497a11290d2b121375",icon:this.searchButtonIconOnly?"search":void 0,"aria-label":this.searchButtonIconOnly?this.searchButtonLabel.trim()||"CERCA":void 0,disabled:!!this.preventSubmit,variant:this.variant,size:this.size,onClick:()=>this.handleSubmit()},this.searchButtonIconOnly?"":this.searchButtonLabel.trim()||"CERCA"))}get host(){return this}static get watchers(){return{resultsItems:[{watchItems:0}],resultsCount:[{watchResultsCount:0}],value:[{watchValue:0}],searchString:[{watchSearchString:0}]}}static get style(){return':host{--z-searchbar-tag-text-color:var(--color-primary03);--z-searchbar-tag-bg:var(--color-hover-primary);--z-searchbar-item-height:2.75rem;z-index:15;display:flex;column-gap:calc(var(--space-unit) * 2);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host,*,::after,::before{box-sizing:border-box}.input-container{position:relative;display:flex;width:100%;flex-direction:column}.input-container z-input{z-index:1}.results{--item-icon-size:1rem;--z-icon-height:var(--item-icon-size);--z-icon-width:var(--item-icon-size);--item-inline-padding:calc(var(--space-unit) * 1.5);--item-col-gap:var(--space-unit);position:absolute;top:calc(100% - 1px);left:0;overflow:auto;width:100%;max-height:var(--z-searchbar-results-height, 540px);border:var(--border-size-small) solid var(--color-form-surface03);border-top:none;background:var(--color-form-background)}.results z-list-element{--background-color-list-element:var(--color-form-background);position:relative;display:block}.results>z-list>z-list-element::part(list-item-container){padding:0 var(--item-inline-padding)}.results z-list-element>.list-item{position:relative;display:flex;align-items:center;padding:calc(var(--space-unit) * 1.25) calc(var(--space-unit) / 4);background-color:transparent;color:var(--color-form-default-text);fill:var(--color-form-default-icon);gap:var(--item-col-gap)}.results z-list-element>.list-item:hover{background-color:var(--gray100);cursor:pointer}.results z-list-element>.list-item:focus-visible{z-index:1;box-shadow:var(--shadow-focus-primary);outline:none}.results>z-list>z-list-element:not(:last-child)>.list-item,.results z-list-group:not(:last-child)>z-list-element:not(.category-heading){border-bottom:1px solid var(--color-form-surface03)}.results z-list-group{padding:0 var(--item-inline-padding)}.results z-list-group>z-list-element::part(list-item-container){padding:0}.results .sub-list{padding-left:calc(var(--item-icon-size) + var(--item-col-gap))}.results .sub-list z-list-element::part(list-item-container){padding:0}.results .sub-list z-list-element>.list-item{position:relative}.results .sub-list>z-list-element:not(:last-child)::before,.results .sub-list>z-list-element>.list-item::before{position:absolute;top:0;left:calc(0px - var(--item-col-gap) - var(--item-icon-size) / 2 + 1px);border-left:1px solid var(--color-form-surface03);content:""}.results .sub-list>z-list-element:not(:last-child)::before{top:-4px;height:calc(100% + 4px)}.results .sub-list z-list-element>.list-item::before{width:14px;height:calc(var(--z-searchbar-item-height) / 2);border-bottom:1px solid var(--color-form-surface03)}.results .category-heading>.category{font-style:italic}.results .category-heading>.subcategory{text-transform:uppercase}.results z-list-element>.list-item .ellipsis{overflow:hidden}.results .ellipsis>.item-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.results .item-label mark{background:var(--color-primary03);color:var(--color-default-text)}.results .list-item>z-tag{--z-tag-bg:var(--z-searchbar-tag-bg);--z-tag-text-color:var(--z-searchbar-tag-text-color);margin-left:auto;white-space:nowrap}.results .item-show-all{width:100%;color:var(--color-primary01);cursor:pointer;text-align:center}.results .item-no-results{display:block;font-style:italic}.results .item-no-results>ul{padding-left:calc(var(--space-unit) * 2);margin:var(--space-unit)}@media (min-width: 768px){.results{--item-icon-size:1.125rem}}.z-label{display:block;padding-bottom:var(--space-unit);color:var(--color-default-text);font-family:var(--font-family-sans);font-size:var(--font-size-1);font-weight:var(--font-sb);text-align:left;text-transform:uppercase}.z-scrollbar::-webkit-scrollbar{width:6px;background:linear-gradient(to right, transparent 0 1px, var(--gray200) 1px 5px, transparent 5px 6px)}.z-scrollbar::-webkit-scrollbar-thumb{background-color:var(--color-primary01)}.z-scrollbar::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}:host([theme="dark"]) .z-scrollbar,.z-scrollbar--dark{--z-scrollbar-track-gradient:linear-gradient(     to right,     transparent 0 1px,     var(--gray600) 1px 5px,     transparent 5px 6px   );--z-scrollbar-track-color:var(--gray600);--z-scrollbar-thumb-color:var(--color-primary03);--z-scrollbar-thumb-hover-color:var(--color-hover-primary);--z-scrollbar-corner-color:transparent}@supports not selector(.z-scrollbar::-webkit-scrollbar-track){.z-scrollbar{scrollbar-color:var(--color-primary01) transparent}:host([theme="dark"]) .z-scrollbar,.z-scrollbar--dark{scrollbar-color:var(--z-scrollbar-thumb-color, var(--color-primary03))       var(--z-scrollbar-track-color, var(--gray600))}}:root{--font-family-sans:"IBM Plex Sans", sans-serif;--font-family-serif:"IBM Plex Serif", serif;--font-lt:300;--font-rg:400;--font-sb:600;--font-bd:700;--font-size-1:0.75rem;--font-size-2:0.875rem;--font-size-3:1rem;--font-size-4:1.125rem;--font-size-5:1.25rem;--font-size-6:1.5rem;--font-size-7:1.75rem;--font-size-8:2rem;--font-size-9:2.25rem;--font-size-10:2.625rem;--font-size-11:3rem;--font-size-12:3.375rem;--font-size-13:3.75rem;--font-size-14:4.25rem;--font-size-15:4.75rem;--font-size-16:5.25rem;--font-size-17:5.75rem;--section-title-1:var(--font-sb) var(--font-size-11) / 1.083 var(--font-family-serif);--section-title-2:var(--font-sb) var(--font-size-10) / 1.142 var(--font-family-serif);--section-title-3:var(--font-sb) var(--font-size-9) / 1.222 var(--font-family-serif);--section-title-4:var(--font-sb) var(--font-size-8) / 1.25 var(--font-family-serif);--section-title-5:var(--font-sb) var(--font-size-7) / 1.2857 var(--font-family-serif);--section-title-6:var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-serif)}.heading-1,.heading-1-sb,.heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.heading-2,.heading-2-sb,.heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.heading-3,.heading-3-sb,.heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.heading-4,.heading-4-sb,.heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.body-1,.body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.body-2,.body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.body-3,.body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.body-4,.body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.body-5,.body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.interactive-1,.interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.interactive-2,.interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.interactive-3,.interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.helper,.helper-sb{font-size:var(--font-size-1);font-style:italic;font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.section-title-1{font:var(--section-title-1)}.section-title-2{font:var(--section-title-2)}.section-title-3{font:var(--section-title-3)}.section-title-4{font:var(--section-title-4)}.section-title-5{font:var(--section-title-5)}.section-title-6{font:var(--section-title-6)}@media (min-width: 1152px){.heading-1,.heading-1-sb,.heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.heading-2,.heading-2-sb,.heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}}@media (max-width: 767px){.mobile-heading-1,.mobile-heading-1-sb,.mobile-heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.mobile-heading-2,.mobile-heading-2-sb,.mobile-heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.mobile-heading-3,.mobile-heading-3-sb,.mobile-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.mobile-heading-4,.mobile-heading-4-sb,.mobile-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.mobile-body-1,.mobile-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.mobile-body-2,.mobile-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.mobile-body-3,.mobile-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.mobile-body-4,.mobile-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.mobile-body-5,.mobile-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.mobile-interactive-1,.mobile-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.mobile-interactive-2,.mobile-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.mobile-interactive-3,.mobile-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.mobile-section-title-1{font:var(--section-title-1)}.mobile-section-title-2{font:var(--section-title-2)}.mobile-section-title-3{font:var(--section-title-3)}.mobile-section-title-4{font:var(--section-title-4)}.mobile-section-title-5{font:var(--section-title-5)}.mobile-section-title-6{font:var(--section-title-6)}.mobile-heading-1-lt,.mobile-heading-2-lt,.mobile-heading-3-lt,.mobile-heading-4-lt{font-weight:var(--font-lt)}.mobile-heading-1-sb,.mobile-heading-2-sb,.mobile-heading-3-sb,.mobile-heading-4-sb,.mobile-body-1-sb,.mobile-body-2-sb,.mobile-body-3-sb,.mobile-body-4-sb,.mobile-body-5-sb,.mobile-interactive-1-sb,.mobile-interactive-2-sb,.mobile-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 768px) and (max-width: 1151px){.tablet-heading-1,.tablet-heading-1-sb,.tablet-heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.tablet-heading-2,.tablet-heading-2-sb,.tablet-heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.tablet-heading-3,.tablet-heading-3-sb,.tablet-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.tablet-heading-4,.tablet-heading-4-sb,.tablet-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.tablet-body-1,.tablet-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.tablet-body-2,.tablet-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.tablet-body-3,.tablet-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.tablet-body-4,.tablet-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.tablet-body-5,.tablet-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.tablet-interactive-1,.tablet-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.tablet-interactive-2,.tablet-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.tablet-interactive-3,.tablet-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.tablet-section-title-1{font:var(--section-title-1)}.tablet-section-title-2{font:var(--section-title-2)}.tablet-section-title-3{font:var(--section-title-3)}.tablet-section-title-4{font:var(--section-title-4)}.tablet-section-title-5{font:var(--section-title-5)}.tablet-section-title-6{font:var(--section-title-6)}.tablet-heading-1-lt,.tablet-heading-2-lt,.tablet-heading-3-lt,.tablet-heading-4-lt{font-weight:var(--font-lt)}.tablet-heading-1-sb,.tablet-heading-2-sb,.tablet-heading-3-sb,.tablet-heading-4-sb,.tablet-body-1-sb,.tablet-body-2-sb,.tablet-body-3-sb,.tablet-body-4-sb,.tablet-body-5-sb,.tablet-interactive-1-sb,.tablet-interactive-2-sb,.tablet-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 1152px) and (max-width: 1365px){.desktop-heading-1,.desktop-heading-1-sb,.desktop-heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.desktop-heading-2,.desktop-heading-2-sb,.desktop-heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.desktop-heading-3,.desktop-heading-3-sb,.desktop-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.desktop-heading-4,.desktop-heading-4-sb,.desktop-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.desktop-body-1,.desktop-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.desktop-body-2,.desktop-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.desktop-body-3,.desktop-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.desktop-body-4,.desktop-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.desktop-body-5,.desktop-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.desktop-interactive-1,.desktop-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.desktop-interactive-2,.desktop-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.desktop-interactive-3,.desktop-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.desktop-section-title-1{font:var(--section-title-1)}.desktop-section-title-2{font:var(--section-title-2)}.desktop-section-title-3{font:var(--section-title-3)}.desktop-section-title-4{font:var(--section-title-4)}.desktop-section-title-5{font:var(--section-title-5)}.desktop-section-title-6{font:var(--section-title-6)}.desktop-heading-1-lt,.desktop-heading-2-lt,.desktop-heading-3-lt,.desktop-heading-4-lt{font-weight:var(--font-lt)}.desktop-heading-1-sb,.desktop-heading-2-sb,.desktop-heading-3-sb,.desktop-heading-4-sb,.desktop-body-1-sb,.desktop-body-2-sb,.desktop-body-3-sb,.desktop-body-4-sb,.desktop-body-5-sb,.desktop-interactive-1-sb,.desktop-interactive-2-sb,.desktop-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 1366px){.wide-heading-1,.wide-heading-1-sb,.wide-heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.wide-heading-2,.wide-heading-2-sb,.wide-heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.wide-heading-3,.wide-heading-3-sb,.wide-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.wide-heading-4,.wide-heading-4-sb,.wide-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.wide-body-1,.wide-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.wide-body-2,.wide-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.wide-body-3,.wide-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.wide-body-4,.wide-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.wide-body-5,.wide-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.wide-interactive-1,.wide-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.wide-interactive-2,.wide-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.wide-interactive-3,.wide-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.wide-section-title-1{font:var(--section-title-1)}.wide-section-title-2{font:var(--section-title-2)}.wide-section-title-3{font:var(--section-title-3)}.wide-section-title-4{font:var(--section-title-4)}.wide-section-title-5{font:var(--section-title-5)}.wide-section-title-6{font:var(--section-title-6)}.wide-heading-1-lt,.wide-heading-2-lt,.wide-heading-3-lt,.wide-heading-4-lt{font-weight:var(--font-lt)}.wide-heading-1-sb,.wide-heading-2-sb,.wide-heading-3-sb,.wide-heading-4-sb,.wide-body-1-sb,.wide-body-2-sb,.wide-body-3-sb,.wide-body-4-sb,.wide-body-5-sb,.wide-interactive-1-sb,.wide-interactive-2-sb,.wide-interactive-3-sb{font-weight:var(--font-sb)}}.heading-1-lt,.heading-2-lt,.heading-3-lt,.heading-4-lt{font-weight:var(--font-lt)}.heading-1-sb,.heading-2-sb,.heading-3-sb,.heading-4-sb,.body-1-sb,.body-2-sb,.body-3-sb,.body-4-sb,.body-5-sb,.interactive-1-sb,.interactive-2-sb,.interactive-3-sb,.helper-sb{font-weight:var(--font-sb)}'}},[1,"z-searchbar",{htmlid:[513],preventSubmit:[4,"prevent-submit"],label:[1],htmlAriaLabel:[1,"html-aria-label"],value:[1],placeholder:[1],autocomplete:[4],autocompleteMinChars:[2,"autocomplete-min-chars"],resultsCount:[2,"results-count"],searchHelperLabel:[1,"search-helper-label"],resultsItems:[1,"results-items"],sortResultsItems:[4,"sort-results-items"],showSearchButton:[4,"show-search-button"],searchButtonIconOnly:[4,"search-button-icon-only"],searchButtonLabel:[1,"search-button-label"],size:[1],variant:[1],searchString:[32],currResultsCount:[32],showResults:[32],isMobile:[32],selectedItem:[32]},[[4,"click","handleOutsideClick"]],{resultsItems:[{watchItems:0}],resultsCount:[{watchResultsCount:0}],value:[{watchValue:0}],searchString:[{watchSearchString:0}]}]);function y(){"undefined"!=typeof customElements&&["z-searchbar","z-button","z-divider","z-icon","z-input","z-input-message","z-list","z-list-element","z-list-group","z-tag"].forEach((t=>{switch(t){case"z-searchbar":customElements.get(n(t))||customElements.define(n(t),w);break;case"z-button":customElements.get(n(t))||b();break;case"z-divider":customElements.get(n(t))||c();break;case"z-icon":customElements.get(n(t))||f();break;case"z-input":customElements.get(n(t))||g();break;case"z-input-message":customElements.get(n(t))||v();break;case"z-list":customElements.get(n(t))||m();break;case"z-list-element":customElements.get(n(t))||p();break;case"z-list-group":customElements.get(n(t))||z();break;case"z-tag":customElements.get(n(t))||u()}}))}export{w as Z,y as d}