@zanichelli/zanichelli-it-frontend-kit 0.0.1-rc.0

package/dist/cjs/z-offcanvas_2.cjs.entry.js

@@ -0,0 +1,384 @@
+'use strict';
+
+var index = require('./index-B_IQfJ7S.js');
+var index$1 = require('./index-GMHChntS.js');
+var utils = require('./utils-KpWnWsPi.js');
+require('./breakpoints-B7vFm-3T.js');
+
+const stylesCss$1 = ".sc-z-offcanvas-h{font-family:var(--font-family-sans);font-weight:var(--font-rg)}[variant=\"pushcontent\"].sc-z-offcanvas-h:not([transitiondirection=\"up\"]){overflow:hidden}.canvas-container.sc-z-offcanvas{display:flex;overflow:hidden;min-width:100%;height:100%;background:var(--color-surface01);transition:transform 0.4s ease-out}.sc-z-offcanvas-h>*.sc-z-offcanvas{position:fixed;top:var(--z-offcanvas--top-space, 0);right:0;bottom:0;left:0}[open].sc-z-offcanvas-h>*.sc-z-offcanvas{height:calc(100% - var(--z-offcanvas--top-space, 0px))}[transitiondirection=\"right\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transform:translateX(-100%)}[transitiondirection=\"left\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transform:translateX(100%)}[open][transitiondirection=\"right\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas,[open][transitiondirection=\"left\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transform:translateX(0)}[transitiondirection=\"up\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{top:auto;bottom:0;height:var(--z-offcanvas--container-height, 90%);transform:translateY(100%)}[transitiondirection=\"up\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas,[variant=\"overlay\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{z-index:1001}[open][transitiondirection=\"up\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transform:translateY(0)}[variant=\"pushcontent\"].sc-z-offcanvas-h:not([transitiondirection=\"up\"])>.canvas-container.sc-z-offcanvas{position:relative;height:100%}[variant=\"pushcontent\"].sc-z-offcanvas-h:not([open]){display:none}[skip-animation].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transition:none}.canvas-background.sc-z-offcanvas{z-index:1000;width:100%;height:100%;background-color:var(--gray900);opacity:0;pointer-events:none;transition:opacity 0.4s ease-out}[open].sc-z-offcanvas-h>.canvas-background.sc-z-offcanvas{opacity:0.7;pointer-events:unset}.canvas-container.sc-z-offcanvas>.canvas-content.sc-z-offcanvas{overflow:hidden auto;flex:1 auto;padding:0 calc(var(--space-unit) * 2);margin:calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) calc(var(--space-unit) * 2) 0}@media (min-width: 768px){[variant=\"pushcontent\"].sc-z-offcanvas-h:not([transitiondirection=\"up\"]){flex:none}.canvas-container.sc-z-offcanvas{width:max(var(--z-offcanvas--container-width, 375px), 375px);min-width:375px}[transitiondirection=\"up\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{width:100%}[transitiondirection=\"right\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{right:auto;left:0}[transitiondirection=\"left\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{right:0;left:auto}}";
+
+const ZOffcanvas = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.canvasOpenStatusChanged = index.createEvent(this, "canvasOpenStatusChanged", 7);
+        this.variant = index$1.OffCanvasVariant.PUSHCONTENT;
+        this.open = false;
+        this.transitiondirection = index$1.TransitionDirection.LEFT;
+        this.skipLoadAnimation = false;
+        this.skipAnimation = false;
+    }
+    /**
+     * Stop the event default behavior and propagation when the offcanvas is closed.
+     */
+    stopEvent(event) {
+        if (this.open) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    /**
+     * Hide the body overflow when the offcanvas is open.
+     */
+    handlePageOverflow() {
+        const overflow = this.variant === index$1.OffCanvasVariant.OVERLAY || this.transitiondirection === index$1.TransitionDirection.UP
+            ? "overflow-y"
+            : "overflow-x";
+        document.body.style[overflow] = this.open ? "hidden" : "";
+    }
+    onOpenChanged() {
+        var _a;
+        this.canvasOpenStatusChanged.emit(this.open);
+        if (!this.open) {
+            // when the offcanvas is closing, wait for the transitionend event to end before handling the body overflow
+            const listenerCallback = () => {
+                this.handlePageOverflow();
+                this.canvasContainer.removeEventListener("transitionend", listenerCallback);
+            };
+            (_a = this.canvasContainer) === null || _a === void 0 ? void 0 : _a.addEventListener("transitionend", listenerCallback);
+        }
+        else {
+            this.handlePageOverflow();
+        }
+    }
+    componentWillLoad() {
+        if (this.open) {
+            this.skipAnimation = true;
+        }
+    }
+    componentDidLoad() {
+        this.handlePageOverflow();
+    }
+    componentDidRender() {
+        this.skipAnimation = false;
+    }
+    connectedCallback() {
+        this.handlePageOverflow();
+    }
+    disconnectedCallback() {
+        this.open = false;
+    }
+    render() {
+        return (index.h(index.Host, { key: '299c69d8788f7cf2e12b6f6eb151c3b7c5e4e271', "skip-animation": this.skipAnimation, "aria-hidden": !this.open ? "true" : null }, index.h("div", { key: '2620f2f0ef0741cbe6e5d63f7ed38299fb253852', class: "canvas-container", role: "presentation", ref: (el) => (this.canvasContainer = el) }, index.h("div", { key: '1df851d5c4d1fddb24a62c5e3d92a7181bd36d05', class: "canvas-content z-scrollbar", role: "presentation" }, index.h("slot", { key: '89303666352d55c9a92a0b4cecc9bea8d42125f7', name: "canvasContent" }))), (this.variant == index$1.OffCanvasVariant.OVERLAY || this.transitiondirection === index$1.TransitionDirection.UP) && (index.h("div", { key: '197e3eb34f5981c52a553875157a3a02993f7684', class: "canvas-background", onClick: () => (this.open = false) }))));
+    }
+    static get watchers() { return {
+        "variant": ["handlePageOverflow"],
+        "open": ["onOpenChanged"]
+    }; }
+};
+ZOffcanvas.style = stylesCss$1;
+
+const stylesCss = ":host{--z-searchbar-tag-text-color:var(--color-primary03);--z-searchbar-tag-bg:var(--color-hover-primary);--z-searchbar-item-height:44px;z-index:15;display:flex;column-gap:calc(var(--space-unit) * 2);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host,*{box-sizing:border-box}:host::part(list-item-container){display:block;min-height:unset;padding:0}.input-container{position:relative;display:flex;width:100%;flex-direction:column}.results-wrapper{position:absolute;top:calc(100% - 1px);left:0;width:100%;padding:calc(var(--space-unit) / 4);border:var(--border-size-small) solid var(--color-surface03);border-top:none;background:var(--color-surface01)}.results{overflow:auto;max-height:var(--z-searchbar-results-height, 540px);padding:calc(var(--space-unit) / 2) calc(var(--space-unit) * 1.5)}.results::-webkit-scrollbar{width:6px;background:linear-gradient(to right, transparent 0 1px, var(--gray200) 1px 5px, transparent 5px 6px)}.results::-webkit-scrollbar-thumb{background-color:var(--color-primary01)}.results::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}@supports not selector(.results::-webkit-scrollbar-track){.results{scrollbar-color:var(--color-primary01) transparent}}.results .category-heading{display:block;font-size:var(--font-size-2);font-weight:var(--font-rg);line-height:var(--font-size-3)}.results .category-heading>*{display:block}.results .category-heading>.category{color:var(--color-text05);font-style:italic}.results .category-heading>.subcategory{margin-top:var(--space-unit);color:var(--color-default-text);text-transform:uppercase}.results z-list-element{position:relative;display:block}z-list-element>.item-search{padding:var(--space-unit) 0}z-list z-list-element::before{position:absolute;z-index:100;top:5px;left:-20px;width:8px;height:1em;border-bottom:1px solid var(--color-disabled01-icon);border-left:1px solid var(--color-disabled01-icon);content:\"\";cursor:pointer}z-list z-list-element::after{position:absolute;z-index:100;top:5px;left:-20px;width:8px;height:100%;border-left:1px solid var(--color-disabled01-icon);content:\"\";cursor:pointer}z-list z-list-element:last-child::after{display:none}z-list>z-list-element::before,z-list>z-list-element::after,z-list>z-list-group>z-list-element::before,z-list>z-list-group>z-list-element::after{display:none}z-list>div.children-node{padding-left:calc(var(--space-unit) * 3)}.results z-list-element>.list-element{display:flex;justify-content:space-between;padding:calc(var(--space-unit) * 1.25) 0;cursor:pointer}.results z-list-element>.list-element:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}.results z-list-element>.list-element .item.ellipsis{overflow:hidden}.results z-list-element .list-element::after{position:absolute;top:0;right:0;display:block;width:100%;height:44px;content:\"\";transform:translateX(-100%)}.results z-list-element .list-element.focused.hovered::after{padding-left:6px}.results z-list-element>.list-element:hover,.results z-list-element>.list-element:hover::after{background-color:var(--color-background);cursor:pointer}.results z-list-element>.list-element>z-tag{border:1px solid var(--gray800);font-size:var(--font-size-1);font-weight:var(--font-sb);--z-tag-bg:var(--z-searchbar-tag-bg);--z-tag-text-color:var(--z-searchbar-tag-text-color)}.results .item{--z-icon-height:12px;--z-icon-width:12px;display:flex;flex-flow:row nowrap;align-items:center;justify-content:flex-start;color:var(--color-default-text);column-gap:calc(var(--space-unit) * 1.5);fill:var(--color-default-icon);font-size:var(--font-size-2);line-height:var(--font-size-6)}.results .item.ellipsis>.item-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.results .item>.item-label mark{background:var(--color-primary03)}.results .item.item-search{--z-icon-height:16px;--z-icon-width:16px}.results .item-show-all{text-align:center}.results .item-no-results{display:block;font-size:var(--font-size-2);font-style:italic;line-height:var(--font-size-5)}.results .item-no-results>ul{padding-left:calc(var(--space-unit) * 2);margin:var(--space-unit)}@media (min-width: 768px){.results .category-heading{font-size:var(--font-size-3);line-height:var(--font-size-6)}.results .item{font-size:var(--font-size-3);line-height:var(--font-size-6)}.results .item.item-search{--z-icon-height:18px;--z-icon-width:18px}.results .item.ellipsis>.item-label{height:24px}.results z-list-element>.list-element>z-tag{min-width:max-content}}@media (min-width: 1152px){.results .item{cursor:pointer}.results .item-no-results{cursor:default;font-size:var(--font-size-3);line-height:var(--font-size-6)}}:host([size=\"small\"]) .results :is(.item,.category-heading),:host([size=\"x-small\"]) .results :is(.item,.category-heading){font-size:var(--font-size-2)}:host([size=\"small\"]) .results .item:not(.has-category),:host([size=\"x-small\"]) .results .item:not(.has-category){--z-icon-height:16px;--z-icon-width:16px}:host([size=\"small\"]) z-list-element>.list-element,:host([size=\"small\"]) z-list-element>.item-search{padding:calc(var(--space-unit) * 0.75) 0}:host([size=\"x-small\"]) z-list-element>.list-element,:host([size=\"x-small\"]) z-list-element>.item-search{padding:calc(var(--space-unit) / 2) 0}:host([size=\"small\"]) z-list-element .list-element::after{height:36px}:host([size=\"x-small\"]) z-list-element .list-element::after{height:32px}";
+
+const ZSearchbar = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.searchSubmit = index.createEvent(this, "searchSubmit", 7);
+        this.searchTyping = index.createEvent(this, "searchTyping", 7);
+        this.searchItemClick = index.createEvent(this, "searchItemClick", 7);
+        this.resultsItemsList = null;
+        this.items = [];
+        this.htmlid = `searchbar-${utils.randomId()}`;
+        this.preventSubmit = false;
+        this.value = undefined;
+        this.placeholder = undefined;
+        this.autocomplete = false;
+        this.autocompleteMinChars = 3;
+        this.resultsCount = undefined;
+        this.searchHelperLabel = "Cerca {searchString}";
+        this.resultsItems = undefined;
+        this.sortResultsItems = false;
+        this.showSearchButton = false;
+        this.searchButtonIconOnly = false;
+        this.size = index$1.ControlSize.BIG;
+        this.variant = index$1.ButtonVariant.PRIMARY;
+        this.searchString = this.value;
+        this.currResultsCount = 0;
+        this.showResults = false;
+        this.isMobile = false;
+        this.selectedItem = undefined;
+    }
+    emitSearchSubmit() {
+        this.searchSubmit.emit(this.inputRef.value);
+    }
+    emitSearchTyping(search) {
+        this.searchTyping.emit(search);
+    }
+    emitSearchItemClick(item) {
+        this.searchItemClick.emit(item);
+        this.selectedItem = item;
+        this.searchString = "";
+    }
+    watchItems() {
+        this.resultsItemsList = this.getResultsItemsList();
+    }
+    watchResultsCount() {
+        this.currResultsCount = this.resultsCount;
+    }
+    watchValue() {
+        this.searchString = this.value;
+    }
+    watchSearchString() {
+        this.emitSearchTyping(this.searchString);
+        this.items = [];
+        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 (utils.getDevice() === index$1.Device.MOBILE && !this.isMobile) {
+                this.isMobile = true;
+            }
+            if (utils.getDevice() !== index$1.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) {
+        const groupedItems = {};
+        items.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 : {
+                category: item === null || item === void 0 ? void 0 : item.category,
+                subcategory: item === null || item === void 0 ? void 0 : item.subcategory,
+                items: [],
+            };
+            groupedItems[key]["items"].push(item);
+        });
+        if (this.sortResultsItems) {
+            return Object.keys(groupedItems)
+                .sort()
+                .reduce((obj, key) => {
+                obj[key] = Object.assign(Object.assign({}, groupedItems[key]), { items: groupedItems[key]["items"].sort((a, b) => {
+                        const nameA = a.label.toUpperCase();
+                        const nameB = b.label.toUpperCase();
+                        if (nameA < nameB) {
+                            return -1;
+                        }
+                        if (nameA > nameB) {
+                            return 1;
+                        }
+                        return 0;
+                    }) });
+                return obj;
+            }, {});
+        }
+        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) {
+            return;
+        }
+        this.emitSearchSubmit();
+    }
+    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;
+            return;
+        }
+        this.showResults = false;
+    }
+    renderInput() {
+        var _a;
+        return (index.h("z-input", { ref: (val) => {
+                this.inputRef = val;
+            }, htmlid: `input-${this.htmlid}`, message: false, placeholder: this.placeholder, onStopTyping: (e) => this.handleStopTyping(e), onKeyUp: (e) => {
+                utils.handleEnterKeydSubmit(e, () => this.handleSubmit());
+                this.handleArrowsNavigation(e);
+            }, value: this.searchString || ((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.label), ariaLabel: this.placeholder, size: this.size }));
+    }
+    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 index.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 (index.h("div", { class: "results-wrapper" }, index.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 (index.h("span", { class: "item item-no-results" }, "Non abbiamo trovato risultati per ", index.h("b", null, this.searchString), index.h("br", null), index.h("br", null), "Cosa puoi fare?", index.h("ul", null, index.h("li", null, "Verificare di aver scritto bene"), index.h("li", null, "Provare a cercare un'altra parola"), index.h("li", null, "Provare a cercare qualcosa di pi\u00F9 generico"))));
+        }
+        return (index.h("z-list", { role: "listbox", id: `list-${this.htmlid}` }, 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$2, array) => {
+            if (this.checkResultsCount(counter)) {
+                const listGroupsElements = [];
+                groupItem.items.forEach((item, subindex, subarray) => {
+                    if (this.checkResultsCount(counter)) {
+                        const isLast = index$2 === array.length - 1 && subindex === subarray.length - 1;
+                        listGroupsElements.push(this.renderItem(item, subindex, !isLast));
+                    }
+                    counter++;
+                });
+                if (listGroupsElements.length) {
+                    listGroups.push(index.h("z-list-group", { "divider-type": index$1.ListDividerType.ELEMENT }, this.renderItemCategory(groupItem), listGroupsElements));
+                }
+            }
+        });
+        return listGroups;
+    }
+    handleArrowsNavigation(e) {
+        const currentElement = e.target;
+        const arrows = [index$1.KeyboardCode.ARROW_DOWN, index$1.KeyboardCode.ARROW_UP];
+        if (!arrows.includes(e.key)) {
+            e.preventDefault();
+            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);
+        if (e.key === index$1.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 (e.key === index$1.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);
+            }
+            if (prevIndex >= 0) {
+                this.items[prevIndex].focus();
+                this.items[prevIndex].classList.add("focused");
+            }
+        }
+    }
+    renderItem(item, key, divider) {
+        return (index.h("z-list-element", { id: `list-item-${this.htmlid}-${key}`, tabIndex: 0, role: "option", dividerType: divider ? index$1.ListDividerType.ELEMENT : undefined, onKeyDown: (e) => this.handleArrowsNavigation(e) }, index.h("div", { class: "list-element", tabIndex: 0, onClick: () => this.emitSearchItemClick(item), onKeyDown: (e) => utils.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");
+            } }, index.h("span", { class: "item ellipsis" }, (item === null || item === void 0 ? void 0 : item.icon) && (index.h("z-icon", { class: "item-icon", name: item.icon })), index.h("span", { class: "item-label", title: item.label, innerHTML: this.renderItemLabel(item.label) })), (item === null || item === void 0 ? void 0 : item.tag) && index.h("z-tag", { icon: item.tag.icon }, !this.isMobile ? item.tag.text : "")), item.children && item.children.length > 0 ? (index.h("z-list", null, index.h("div", { class: "children-node" }, item.children.map((child, index) => this.renderItem(child, index, false))))) : null));
+    }
+    renderItemLabel(label) {
+        if (!this.searchString) {
+            return label;
+        }
+        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 (index.h("span", { class: "category-heading", slot: "header-title" }, index.h("span", { class: "category" }, groupItem.category), (groupItem === null || groupItem === void 0 ? void 0 : groupItem.subcategory) && index.h("span", { class: "subcategory" }, groupItem.subcategory)));
+    }
+    renderSearchHelper(hasDivider = true) {
+        if (!this.autocomplete || this.preventSubmit || !this.searchString) {
+            return null;
+        }
+        return (index.h("z-list-element", { role: "option", dividerType: hasDivider ? index$1.ListDividerType.ELEMENT : undefined, id: `list-item-${this.htmlid}-search`, onKeyDown: (e) => this.handleArrowsNavigation(e) }, index.h("div", { tabindex: 0, onClick: () => this.emitSearchSubmit(), onKeyDown: (e) => utils.handleEnterKeydSubmit(e, () => this.emitSearchSubmit()), class: "list-element" }, index.h("span", { class: "item item-search" }, index.h("z-icon", { class: "search-icon", name: "left-magnifying-glass" }), index.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;
+        }
+        return (index.h("z-list-element", { role: "option", tabindex: 0, clickable: true, id: `list-item-${this.htmlid}-show-all`, onClickItem: () => (this.currResultsCount = 0), color: "color-primary01" }, index.h("div", { class: "item-show-all" }, "Vedi tutti i risultati")));
+    }
+    render() {
+        return (index.h(index.Host, { key: '700c1b24aa29998ad1f51ddeff187bb462c87d39', onFocus: () => (this.showResults = true), onClick: (e) => this.handleOutsideClick(e), class: { "has-submit": this.showSearchButton, "has-results": this.autocomplete } }, index.h("div", { key: 'fb8c855749a9d3e901cd350d4d0246c2f2b3d183', class: "input-container" }, this.renderInput(), this.renderResults()), this.renderButton()));
+    }
+    get element() { return index.getElement(this); }
+    static get watchers() { return {
+        "resultsItems": ["watchItems"],
+        "resultsCount": ["watchResultsCount"],
+        "value": ["watchValue"],
+        "searchString": ["watchSearchString"],
+        "showResults": ["watchShowResults"]
+    }; }
+};
+ZSearchbar.style = stylesCss;
+
+exports.z_offcanvas = ZOffcanvas;
+exports.z_searchbar = ZSearchbar;
+//# sourceMappingURL=z-offcanvas.z-searchbar.entry.cjs.js.map
+
+//# sourceMappingURL=z-offcanvas_2.cjs.entry.js.map

package/dist/cjs/z-offcanvas_2.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"z-offcanvas.z-searchbar.entry.cjs.js","mappings":"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","names":["stylesCss","OffCanvasVariant","TransitionDirection","h","Host","randomId","ControlSize","ButtonVariant","getDevice","Device","handleEnterKeydSubmit","index","ListDividerType","KeyboardCode"],"sources":["node_modules/.pnpm/@zanichelli+albe-web-components@18.3.2/node_modules/@zanichelli/albe-web-components/dist/collection/components/z-offcanvas/styles.css?tag=z-offcanvas&encapsulation=scoped","node_modules/.pnpm/@zanichelli+albe-web-components@18.3.2/node_modules/@zanichelli/albe-web-components/dist/collection/components/z-offcanvas/index.js","node_modules/.pnpm/@zanichelli+albe-web-components@18.3.2/node_modules/@zanichelli/albe-web-components/dist/collection/components/z-searchbar/styles.css?tag=z-searchbar&encapsulation=shadow","node_modules/.pnpm/@zanichelli+albe-web-components@18.3.2/node_modules/@zanichelli/albe-web-components/dist/collection/components/z-searchbar/index.js"],"sourcesContent":[":host {\n  --z-offcanvas--container-width: ;\n  --z-offcanvas--container-height: ;\n  --z-offcanvas--top-space: ;\n\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host([variant=\"pushcontent\"]:not([transitiondirection=\"up\"])) {\n  overflow: hidden;\n}\n\n.canvas-container {\n  display: flex;\n  overflow: hidden;\n  min-width: 100%;\n  height: 100%;\n  background: var(--color-surface01);\n  transition: transform 0.4s ease-out;\n}\n\n:host > * {\n  position: fixed;\n  top: var(--z-offcanvas--top-space, 0);\n  right: 0;\n  bottom: 0;\n  left: 0;\n}\n\n:host([open]) > * {\n  height: calc(100% - var(--z-offcanvas--top-space, 0px));\n}\n\n:host([transitiondirection=\"right\"]) > .canvas-container {\n  transform: translateX(-100%);\n}\n\n:host([transitiondirection=\"left\"]) > .canvas-container {\n  transform: translateX(100%);\n}\n\n:host([open][transitiondirection=\"right\"]) > .canvas-container,\n:host([open][transitiondirection=\"left\"]) > .canvas-container {\n  transform: translateX(0);\n}\n\n:host([transitiondirection=\"up\"]) > .canvas-container {\n  top: auto;\n  bottom: 0;\n  height: var(--z-offcanvas--container-height, 90%);\n  transform: translateY(100%);\n}\n\n:host([transitiondirection=\"up\"], [variant=\"overlay\"]) > .canvas-container {\n  z-index: 1001;\n}\n\n:host([open][transitiondirection=\"up\"]) > .canvas-container {\n  transform: translateY(0);\n}\n\n:host([variant=\"pushcontent\"]:not([transitiondirection=\"up\"])) > .canvas-container {\n  position: relative;\n  height: 100%;\n}\n\n:host([variant=\"pushcontent\"]:not([open])) {\n  display: none;\n}\n\n:host([skip-animation]) > .canvas-container {\n  transition: none;\n}\n\n.canvas-background {\n  z-index: 1000;\n  width: 100%;\n  height: 100%;\n  background-color: var(--gray900);\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.4s ease-out;\n}\n\n:host([open]) > .canvas-background {\n  opacity: 0.7;\n  pointer-events: unset;\n}\n\n.canvas-container > .canvas-content {\n  overflow: hidden auto;\n  flex: 1 auto;\n  padding: 0 calc(var(--space-unit) * 2);\n  margin: calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) calc(var(--space-unit) * 2) 0;\n}\n\n/* Tablet / Desktop */\n@media (min-width: 768px) {\n  :host([variant=\"pushcontent\"]:not([transitiondirection=\"up\"])) {\n    flex: none; /* Prevent unwanted width changes in flex containers */\n  }\n\n  .canvas-container {\n    width: max(var(--z-offcanvas--container-width, 375px), 375px);\n    min-width: 375px;\n  }\n\n  :host([transitiondirection=\"up\"]) > .canvas-container {\n    width: 100%;\n  }\n\n  :host([transitiondirection=\"right\"]) > .canvas-container {\n    right: auto;\n    left: 0;\n  }\n\n  :host([transitiondirection=\"left\"]) > .canvas-container {\n    right: 0;\n    left: auto;\n  }\n}\n","import { h, Host } from \"@stencil/core\";\nimport { OffCanvasVariant, TransitionDirection } from \"../../beans\";\n/**\n * @slot canvasContent - Slot for the offcanvas content.\n * @cssprop --z-offcanvas--top-space - Top offset of the offcanvas, for `overlay` variant. Useful when there is some fixed element above the offcanvas. Default: `0`.\n * @cssprop --z-offcanvas--container-width - Width of the offcanvas for `left` and `right` direction. Default: `375px`.\n * @cssprop --z-offcanvas--container-height - Height of the offcanvas for `up` direction. Default: `90%`.\n */\nexport class ZOffcanvas {\n    constructor() {\n        this.variant = OffCanvasVariant.PUSHCONTENT;\n        this.open = false;\n        this.transitiondirection = TransitionDirection.LEFT;\n        this.skipLoadAnimation = false;\n        this.skipAnimation = false;\n    }\n    /**\n     * Stop the event default behavior and propagation when the offcanvas is closed.\n     */\n    stopEvent(event) {\n        if (this.open) {\n            return;\n        }\n        event.preventDefault();\n        event.stopPropagation();\n    }\n    /**\n     * Hide the body overflow when the offcanvas is open.\n     */\n    handlePageOverflow() {\n        const overflow = this.variant === OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP\n            ? \"overflow-y\"\n            : \"overflow-x\";\n        document.body.style[overflow] = this.open ? \"hidden\" : \"\";\n    }\n    onOpenChanged() {\n        var _a;\n        this.canvasOpenStatusChanged.emit(this.open);\n        if (!this.open) {\n            // when the offcanvas is closing, wait for the transitionend event to end before handling the body overflow\n            const listenerCallback = () => {\n                this.handlePageOverflow();\n                this.canvasContainer.removeEventListener(\"transitionend\", listenerCallback);\n            };\n            (_a = this.canvasContainer) === null || _a === void 0 ? void 0 : _a.addEventListener(\"transitionend\", listenerCallback);\n        }\n        else {\n            this.handlePageOverflow();\n        }\n    }\n    componentWillLoad() {\n        if (this.open) {\n            this.skipAnimation = true;\n        }\n    }\n    componentDidLoad() {\n        this.handlePageOverflow();\n    }\n    componentDidRender() {\n        this.skipAnimation = false;\n    }\n    connectedCallback() {\n        this.handlePageOverflow();\n    }\n    disconnectedCallback() {\n        this.open = false;\n    }\n    render() {\n        return (h(Host, { key: '299c69d8788f7cf2e12b6f6eb151c3b7c5e4e271', \"skip-animation\": this.skipAnimation, \"aria-hidden\": !this.open ? \"true\" : null }, h(\"div\", { key: '2620f2f0ef0741cbe6e5d63f7ed38299fb253852', class: \"canvas-container\", role: \"presentation\", ref: (el) => (this.canvasContainer = el) }, h(\"div\", { key: '1df851d5c4d1fddb24a62c5e3d92a7181bd36d05', class: \"canvas-content z-scrollbar\", role: \"presentation\" }, h(\"slot\", { key: '89303666352d55c9a92a0b4cecc9bea8d42125f7', name: \"canvasContent\" }))), (this.variant == OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP) && (h(\"div\", { key: '197e3eb34f5981c52a553875157a3a02993f7684', class: \"canvas-background\", onClick: () => (this.open = false) }))));\n    }\n    static get is() { return \"z-offcanvas\"; }\n    static get encapsulation() { return \"scoped\"; }\n    static get originalStyleUrls() {\n        return {\n            \"$\": [\"styles.css\"]\n        };\n    }\n    static get styleUrls() {\n        return {\n            \"$\": [\"styles.css\"]\n        };\n    }\n    static get properties() {\n        return {\n            \"variant\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"OffCanvasVariant\",\n                    \"resolved\": \"OffCanvasVariant.OVERLAY | OffCanvasVariant.PUSHCONTENT\",\n                    \"references\": {\n                        \"OffCanvasVariant\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../beans\",\n                            \"id\": \"src/beans/index.tsx::OffCanvasVariant\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Offcanvas variant.\\n- `overlay`: The offcanvas covers the page content putting an overlay.\\n- `pushcontent`: The offcanvas isn't absolutely positioned and \\\"pushes\\\" the page content.\\n> NB: `pushcontent` variant may need some extra style tuning of the context around the component to work properly.\\nAlso, the `pushcontent` variant doesn't have the open/close transition.\"\n                },\n                \"attribute\": \"variant\",\n                \"reflect\": true,\n                \"defaultValue\": \"OffCanvasVariant.PUSHCONTENT\"\n            },\n            \"open\": {\n                \"type\": \"boolean\",\n                \"mutable\": true,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Whether the offcanvas is open. Default: false\"\n                },\n                \"attribute\": \"open\",\n                \"reflect\": true,\n                \"defaultValue\": \"false\"\n            },\n            \"transitiondirection\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"TransitionDirection\",\n                    \"resolved\": \"TransitionDirection.LEFT | TransitionDirection.RIGHT | TransitionDirection.UP\",\n                    \"references\": {\n                        \"TransitionDirection\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../beans\",\n                            \"id\": \"src/beans/index.tsx::TransitionDirection\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Open the content transitioning to a specified direction.\\nThe `up` direction always show the `overlay`, also when the variant is `pushcontent`.\"\n                },\n                \"attribute\": \"transitiondirection\",\n                \"reflect\": true,\n                \"defaultValue\": \"TransitionDirection.LEFT\"\n            },\n            \"skipLoadAnimation\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [{\n                            \"name\": \"deprecated\",\n                            \"text\": \"This prop is not needed anymore, the component will automatically skip the transition\\nwhen it starts with `open` set to `true`. Only exists for Typescript backward compatibility.\"\n                        }],\n                    \"text\": \"Skip the opening transition when the offcanvas is already open at the first render.\"\n                },\n                \"attribute\": \"skip-load-animation\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            }\n        };\n    }\n    static get states() {\n        return {\n            \"skipAnimation\": {}\n        };\n    }\n    static get events() {\n        return [{\n                \"method\": \"canvasOpenStatusChanged\",\n                \"name\": \"canvasOpenStatusChanged\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"emitted when `open` prop changes\"\n                },\n                \"complexType\": {\n                    \"original\": \"any\",\n                    \"resolved\": \"any\",\n                    \"references\": {}\n                }\n            }];\n    }\n    static get watchers() {\n        return [{\n                \"propName\": \"variant\",\n                \"methodName\": \"handlePageOverflow\"\n            }, {\n                \"propName\": \"open\",\n                \"methodName\": \"onOpenChanged\"\n            }];\n    }\n    static get listeners() {\n        return [{\n                \"name\": \"click\",\n                \"method\": \"stopEvent\",\n                \"target\": undefined,\n                \"capture\": true,\n                \"passive\": false\n            }, {\n                \"name\": \"focusin\",\n                \"method\": \"stopEvent\",\n                \"target\": undefined,\n                \"capture\": true,\n                \"passive\": false\n            }];\n    }\n}\n//# sourceMappingURL=index.js.map\n",":host {\n  --z-searchbar-tag-text-color: var(--color-primary03);\n  --z-searchbar-tag-bg: var(--color-hover-primary);\n  --z-searchbar-item-height: 44px;\n\n  z-index: 15;\n  display: flex;\n  column-gap: calc(var(--space-unit) * 2);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host,\n* {\n  box-sizing: border-box;\n}\n\n:host::part(list-item-container) {\n  display: block;\n  min-height: unset;\n  padding: 0;\n}\n\n.input-container {\n  position: relative;\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n}\n\n.results-wrapper {\n  position: absolute;\n  top: calc(100% - 1px);\n  left: 0;\n  width: 100%;\n  padding: calc(var(--space-unit) / 4);\n  border: var(--border-size-small) solid var(--color-surface03);\n  border-top: none;\n  background: var(--color-surface01);\n}\n\n.results {\n  overflow: auto;\n  max-height: var(--z-searchbar-results-height, 540px);\n  padding: calc(var(--space-unit) / 2) calc(var(--space-unit) * 1.5);\n}\n\n.results::-webkit-scrollbar {\n  width: 6px;\n  background: linear-gradient(to right, transparent 0 1px, var(--gray200) 1px 5px, transparent 5px 6px);\n}\n\n.results::-webkit-scrollbar-thumb {\n  background-color: var(--color-primary01);\n}\n\n.results::-webkit-scrollbar-thumb:hover {\n  background-color: var(--color-hover-primary);\n}\n\n/* Firefox scrollbar */\n@supports not selector(.results::-webkit-scrollbar-track) {\n  .results {\n    scrollbar-color: var(--color-primary01) transparent;\n  }\n}\n\n.results .category-heading {\n  display: block;\n  font-size: var(--font-size-2);\n  font-weight: var(--font-rg);\n  line-height: var(--font-size-3);\n}\n\n.results .category-heading > * {\n  display: block;\n}\n\n.results .category-heading > .category {\n  color: var(--color-text05);\n  font-style: italic;\n}\n\n.results .category-heading > .subcategory {\n  margin-top: var(--space-unit);\n  color: var(--color-default-text);\n  text-transform: uppercase;\n}\n\n.results z-list-element {\n  position: relative;\n  display: block;\n}\n\nz-list-element > .item-search {\n  padding: var(--space-unit) 0;\n}\n\nz-list z-list-element::before {\n  position: absolute;\n  z-index: 100;\n  top: 5px;\n  left: -20px;\n  width: 8px;\n  height: 1em;\n  border-bottom: 1px solid var(--color-disabled01-icon);\n  border-left: 1px solid var(--color-disabled01-icon);\n  content: \"\";\n  cursor: pointer;\n}\n\nz-list z-list-element::after {\n  position: absolute;\n  z-index: 100;\n  top: 5px;\n  left: -20px;\n  width: 8px;\n  height: 100%;\n  border-left: 1px solid var(--color-disabled01-icon);\n  content: \"\";\n  cursor: pointer;\n}\n\nz-list z-list-element:last-child::after {\n  display: none;\n}\n\nz-list > z-list-element::before,\nz-list > z-list-element::after,\nz-list > z-list-group > z-list-element::before,\nz-list > z-list-group > z-list-element::after {\n  display: none;\n}\n\nz-list > div.children-node {\n  padding-left: calc(var(--space-unit) * 3);\n}\n\n.results z-list-element > .list-element {\n  display: flex;\n  justify-content: space-between;\n  padding: calc(var(--space-unit) * 1.25) 0;\n  cursor: pointer;\n}\n\n.results z-list-element > .list-element:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n.results z-list-element > .list-element .item.ellipsis {\n  overflow: hidden;\n}\n\n.results z-list-element .list-element::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  display: block;\n  width: 100%;\n  height: 44px;\n  content: \"\";\n  transform: translateX(-100%);\n}\n\n.results z-list-element .list-element.focused.hovered::after {\n  padding-left: 6px;\n}\n\n.results z-list-element > .list-element:hover,\n.results z-list-element > .list-element:hover::after {\n  background-color: var(--color-background);\n  cursor: pointer;\n}\n\n.results z-list-element > .list-element > z-tag {\n  border: 1px solid var(--gray800);\n  font-size: var(--font-size-1);\n  font-weight: var(--font-sb);\n\n  --z-tag-bg: var(--z-searchbar-tag-bg);\n  --z-tag-text-color: var(--z-searchbar-tag-text-color);\n}\n\n.results .item {\n  --z-icon-height: 12px;\n  --z-icon-width: 12px;\n\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: flex-start;\n  color: var(--color-default-text);\n  column-gap: calc(var(--space-unit) * 1.5);\n  fill: var(--color-default-icon);\n  font-size: var(--font-size-2);\n  line-height: var(--font-size-6);\n}\n\n.results .item.ellipsis > .item-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.results .item > .item-label mark {\n  background: var(--color-primary03);\n}\n\n.results .item.item-search {\n  --z-icon-height: 16px;\n  --z-icon-width: 16px;\n}\n\n.results .item-show-all {\n  text-align: center;\n}\n\n.results .item-no-results {\n  display: block;\n  font-size: var(--font-size-2);\n  font-style: italic;\n  line-height: var(--font-size-5);\n}\n\n.results .item-no-results > ul {\n  padding-left: calc(var(--space-unit) * 2);\n  margin: var(--space-unit);\n}\n\n/* Tablet breakpoint */\n@media (min-width: 768px) {\n  .results .category-heading {\n    font-size: var(--font-size-3);\n    line-height: var(--font-size-6);\n  }\n\n  .results .item {\n    font-size: var(--font-size-3);\n    line-height: var(--font-size-6);\n  }\n\n  .results .item.item-search {\n    --z-icon-height: 18px;\n    --z-icon-width: 18px;\n  }\n\n  .results .item.ellipsis > .item-label {\n    height: 24px;\n  }\n\n  .results z-list-element > .list-element > z-tag {\n    min-width: max-content;\n  }\n}\n\n/* Desktop breakpoint */\n@media (min-width: 1152px) {\n  .results .item {\n    cursor: pointer;\n  }\n\n  .results .item-no-results {\n    cursor: default;\n    font-size: var(--font-size-3);\n    line-height: var(--font-size-6);\n  }\n}\n\n:host([size=\"small\"]) .results :is(.item, .category-heading),\n:host([size=\"x-small\"]) .results :is(.item, .category-heading) {\n  font-size: var(--font-size-2);\n}\n\n:host([size=\"small\"]) .results .item:not(.has-category),\n:host([size=\"x-small\"]) .results .item:not(.has-category) {\n  --z-icon-height: 16px;\n  --z-icon-width: 16px;\n}\n\n:host([size=\"small\"]) z-list-element > .list-element,\n:host([size=\"small\"]) z-list-element > .item-search {\n  padding: calc(var(--space-unit) * 0.75) 0;\n}\n\n:host([size=\"x-small\"]) z-list-element > .list-element,\n:host([size=\"x-small\"]) z-list-element > .item-search {\n  padding: calc(var(--space-unit) / 2) 0;\n}\n\n:host([size=\"small\"]) z-list-element .list-element::after {\n  height: 36px;\n}\n\n:host([size=\"x-small\"]) z-list-element .list-element::after {\n  height: 32px;\n}\n","import { Host, h } from \"@stencil/core\";\nimport { ButtonVariant, ControlSize, Device, KeyboardCode, ListDividerType, } from \"../../beans\";\nimport { getDevice, handleEnterKeydSubmit, randomId } from \"../../utils/utils\";\n/**\n * @cssprop --z-searchbar-results-height - Max height of the results container (default: 540px)\n * @cssprop --z-searchbar-tag-text-color - Color of tag's text (default --color-primary03);\n * @cssprop --z-searchbar-tag-bg - Color of tag's background (default --color-hover-primary);\n */\nexport class ZSearchbar {\n    constructor() {\n        this.resultsItemsList = null;\n        this.items = [];\n        this.htmlid = `searchbar-${randomId()}`;\n        this.preventSubmit = false;\n        this.value = undefined;\n        this.placeholder = undefined;\n        this.autocomplete = false;\n        this.autocompleteMinChars = 3;\n        this.resultsCount = undefined;\n        this.searchHelperLabel = \"Cerca {searchString}\";\n        this.resultsItems = undefined;\n        this.sortResultsItems = false;\n        this.showSearchButton = false;\n        this.searchButtonIconOnly = false;\n        this.size = ControlSize.BIG;\n        this.variant = ButtonVariant.PRIMARY;\n        this.searchString = this.value;\n        this.currResultsCount = 0;\n        this.showResults = false;\n        this.isMobile = false;\n        this.selectedItem = undefined;\n    }\n    emitSearchSubmit() {\n        this.searchSubmit.emit(this.inputRef.value);\n    }\n    emitSearchTyping(search) {\n        this.searchTyping.emit(search);\n    }\n    emitSearchItemClick(item) {\n        this.searchItemClick.emit(item);\n        this.selectedItem = item;\n        this.searchString = \"\";\n    }\n    watchItems() {\n        this.resultsItemsList = this.getResultsItemsList();\n    }\n    watchResultsCount() {\n        this.currResultsCount = this.resultsCount;\n    }\n    watchValue() {\n        this.searchString = this.value;\n    }\n    watchSearchString() {\n        this.emitSearchTyping(this.searchString);\n        this.items = [];\n        if (!this.searchString) {\n            this.currResultsCount = this.resultsCount;\n        }\n    }\n    watchShowResults() {\n        if (!this.showResults) {\n            this.items = [];\n        }\n    }\n    disconnectedCallback() {\n        var _a;\n        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();\n    }\n    componentDidLoad() {\n        this.resizeObserver = new ResizeObserver(() => {\n            if (getDevice() === Device.MOBILE && !this.isMobile) {\n                this.isMobile = true;\n            }\n            if (getDevice() !== Device.MOBILE && this.isMobile) {\n                this.isMobile = false;\n            }\n        });\n        this.resizeObserver.observe(this.element);\n    }\n    componentWillLoad() {\n        this.resultsItemsList = this.getResultsItemsList();\n        this.currResultsCount = this.resultsCount;\n    }\n    getResultsItemsList() {\n        return typeof this.resultsItems === \"string\" ? JSON.parse(this.resultsItems) : this.resultsItems;\n    }\n    getGroupedItems(items) {\n        const groupedItems = {};\n        items.forEach((item) => {\n            var _a;\n            const key = `${item === null || item === void 0 ? void 0 : item.category}${item === null || item === void 0 ? void 0 : item.subcategory}`;\n            groupedItems[key] = (_a = groupedItems[key]) !== null && _a !== void 0 ? _a : {\n                category: item === null || item === void 0 ? void 0 : item.category,\n                subcategory: item === null || item === void 0 ? void 0 : item.subcategory,\n                items: [],\n            };\n            groupedItems[key][\"items\"].push(item);\n        });\n        if (this.sortResultsItems) {\n            return Object.keys(groupedItems)\n                .sort()\n                .reduce((obj, key) => {\n                obj[key] = Object.assign(Object.assign({}, groupedItems[key]), { items: groupedItems[key][\"items\"].sort((a, b) => {\n                        const nameA = a.label.toUpperCase();\n                        const nameB = b.label.toUpperCase();\n                        if (nameA < nameB) {\n                            return -1;\n                        }\n                        if (nameA > nameB) {\n                            return 1;\n                        }\n                        return 0;\n                    }) });\n                return obj;\n            }, {});\n        }\n        return groupedItems;\n    }\n    checkResultsCount(counter) {\n        if (!this.currResultsCount || counter < this.currResultsCount) {\n            return true;\n        }\n        return false;\n    }\n    handleStopTyping(e) {\n        e.stopPropagation();\n        this.searchString = e.detail.value;\n        if (this.selectedItem) {\n            this.selectedItem = undefined;\n        }\n    }\n    handleSubmit() {\n        if (this.preventSubmit) {\n            return;\n        }\n        this.emitSearchSubmit();\n    }\n    handleOutsideClick(e) {\n        const cp = e.composedPath();\n        const searchbar = cp.find((elem) => elem.nodeName === \"Z-SEARCHBAR\");\n        if (!searchbar || searchbar.htmlid !== this.htmlid) {\n            this.showResults = false;\n            return;\n        }\n        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\")); })) {\n            this.showResults = true;\n            return;\n        }\n        this.showResults = false;\n    }\n    renderInput() {\n        var _a;\n        return (h(\"z-input\", { ref: (val) => {\n                this.inputRef = val;\n            }, htmlid: `input-${this.htmlid}`, message: false, placeholder: this.placeholder, onStopTyping: (e) => this.handleStopTyping(e), onKeyUp: (e) => {\n                handleEnterKeydSubmit(e, () => this.handleSubmit());\n                this.handleArrowsNavigation(e);\n            }, value: this.searchString || ((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.label), ariaLabel: this.placeholder, size: this.size }));\n    }\n    renderButton() {\n        if (!this.showSearchButton) {\n            return null;\n        }\n        const iconProp = this.searchButtonIconOnly ? { icon: \"search\" } : null;\n        const buttonLabel = this.searchButtonIconOnly ? \"\" : \"CERCA\";\n        const ariaLabel = this.searchButtonIconOnly ? { \"aria-label\": \"CERCA\" } : null;\n        const defaultProps = Object.assign(Object.assign({ disabled: this.preventSubmit, variant: this.variant, size: this.size, onClick: () => this.handleSubmit() }, iconProp), ariaLabel);\n        return h(\"z-button\", Object.assign({}, defaultProps), buttonLabel);\n    }\n    renderResults() {\n        if (!this.showResults ||\n            !this.autocomplete ||\n            !this.searchString ||\n            this.searchString.length < this.autocompleteMinChars ||\n            !this.resultsItemsList) {\n            return null;\n        }\n        return (h(\"div\", { class: \"results-wrapper\" }, h(\"div\", { class: \"results\" }, this.renderResultsList())));\n    }\n    renderResultsList() {\n        var _a, _b;\n        if (this.preventSubmit && !((_a = this.resultsItemsList) === null || _a === void 0 ? void 0 : _a.length)) {\n            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\"))));\n        }\n        return (h(\"z-list\", { role: \"listbox\", id: `list-${this.htmlid}` }, this.renderSearchHelper(!!((_b = this.resultsItemsList) === null || _b === void 0 ? void 0 : _b.length)), this.renderItems(), this.renderShowAllResults()));\n    }\n    renderItems() {\n        var _a;\n        if (!((_a = this.resultsItemsList) === null || _a === void 0 ? void 0 : _a.length)) {\n            return [];\n        }\n        const groupedItems = this.getGroupedItems(this.resultsItemsList);\n        const listGroups = [];\n        let counter = 0;\n        Object.values(groupedItems).forEach((groupItem, index, array) => {\n            if (this.checkResultsCount(counter)) {\n                const listGroupsElements = [];\n                groupItem.items.forEach((item, subindex, subarray) => {\n                    if (this.checkResultsCount(counter)) {\n                        const isLast = index === array.length - 1 && subindex === subarray.length - 1;\n                        listGroupsElements.push(this.renderItem(item, subindex, !isLast));\n                    }\n                    counter++;\n                });\n                if (listGroupsElements.length) {\n                    listGroups.push(h(\"z-list-group\", { \"divider-type\": ListDividerType.ELEMENT }, this.renderItemCategory(groupItem), listGroupsElements));\n                }\n            }\n        });\n        return listGroups;\n    }\n    handleArrowsNavigation(e) {\n        const currentElement = e.target;\n        const arrows = [KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP];\n        if (!arrows.includes(e.key)) {\n            e.preventDefault();\n            return;\n        }\n        if (!this.items.length) {\n            const list = this.element.shadowRoot.querySelector(\"z-list\");\n            if (!list) {\n                return;\n            }\n            this.items = Array.from(list.querySelectorAll(\".list-element\"));\n        }\n        this.items.forEach((item) => item.classList.contains(\"focused\") && item.classList.remove(\"focused\"));\n        const currentIndex = this.items.indexOf(currentElement);\n        if (e.key === KeyboardCode.ARROW_DOWN) {\n            e.preventDefault();\n            const nextIndex = currentIndex + 1;\n            if (nextIndex < this.items.length) {\n                this.items[nextIndex].focus();\n                this.items[nextIndex].classList.add(\"focused\");\n            }\n        }\n        if (e.key === KeyboardCode.ARROW_UP) {\n            e.preventDefault();\n            const prevIndex = currentIndex - 1;\n            if (prevIndex < 0) {\n                this.element.shadowRoot.querySelector(\"input\").focus();\n                this.element.shadowRoot\n                    .querySelector(\"input\")\n                    .setSelectionRange(this.inputRef.value.length, this.inputRef.value.length);\n            }\n            if (prevIndex >= 0) {\n                this.items[prevIndex].focus();\n                this.items[prevIndex].classList.add(\"focused\");\n            }\n        }\n    }\n    renderItem(item, key, divider) {\n        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) => {\n                const currentElement = e.target;\n                currentElement.classList.add(\"hovered\");\n            }, onMouseLeave: (e) => {\n                const currentElement = e.target;\n                currentElement.classList.contains(\"hovered\") && currentElement.classList.remove(\"hovered\");\n            } }, 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));\n    }\n    renderItemLabel(label) {\n        if (!this.searchString) {\n            return label;\n        }\n        return label.replace(new RegExp(this.searchString.replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\"), \"gmi\"), (found) => `<mark>${found}</mark>`);\n    }\n    renderItemCategory(groupItem) {\n        if (!(groupItem === null || groupItem === void 0 ? void 0 : groupItem.category)) {\n            return null;\n        }\n        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)));\n    }\n    renderSearchHelper(hasDivider = true) {\n        if (!this.autocomplete || this.preventSubmit || !this.searchString) {\n            return null;\n        }\n        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>`) })))));\n    }\n    renderShowAllResults() {\n        var _a, _b;\n        if (!this.currResultsCount ||\n            !this.searchString ||\n            !((_a = this.resultsItemsList) === null || _a === void 0 ? void 0 : _a.length) ||\n            this.currResultsCount >= ((_b = this.resultsItemsList) === null || _b === void 0 ? void 0 : _b.length)) {\n            return null;\n        }\n        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\")));\n    }\n    render() {\n        return (h(Host, { key: '700c1b24aa29998ad1f51ddeff187bb462c87d39', onFocus: () => (this.showResults = true), onClick: (e) => this.handleOutsideClick(e), class: { \"has-submit\": this.showSearchButton, \"has-results\": this.autocomplete } }, h(\"div\", { key: 'fb8c855749a9d3e901cd350d4d0246c2f2b3d183', class: \"input-container\" }, this.renderInput(), this.renderResults()), this.renderButton()));\n    }\n    static get is() { return \"z-searchbar\"; }\n    static get encapsulation() { return \"shadow\"; }\n    static get originalStyleUrls() {\n        return {\n            \"$\": [\"styles.css\"]\n        };\n    }\n    static get styleUrls() {\n        return {\n            \"$\": [\"styles.css\"]\n        };\n    }\n    static get properties() {\n        return {\n            \"htmlid\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"the id of the searchbar element\"\n                },\n                \"attribute\": \"htmlid\",\n                \"reflect\": true,\n                \"defaultValue\": \"`searchbar-${randomId()}`\"\n            },\n            \"preventSubmit\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Prevent submit action\"\n                },\n                \"attribute\": \"prevent-submit\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"value\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Input search string\"\n                },\n                \"attribute\": \"value\",\n                \"reflect\": false\n            },\n            \"placeholder\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Search input placeholder\"\n                },\n                \"attribute\": \"placeholder\",\n                \"reflect\": false\n            },\n            \"autocomplete\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Show autocomplete results\"\n                },\n                \"attribute\": \"autocomplete\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"autocompleteMinChars\": {\n                \"type\": \"number\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"number\",\n                    \"resolved\": \"number\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Minimun number of characters to dispatch typing event\"\n                },\n                \"attribute\": \"autocomplete-min-chars\",\n                \"reflect\": false,\n                \"defaultValue\": \"3\"\n            },\n            \"resultsCount\": {\n                \"type\": \"number\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"number\",\n                    \"resolved\": \"number\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Number of results shown - default all\"\n                },\n                \"attribute\": \"results-count\",\n                \"reflect\": false\n            },\n            \"searchHelperLabel\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Search helper text\"\n                },\n                \"attribute\": \"search-helper-label\",\n                \"reflect\": false,\n                \"defaultValue\": \"\\\"Cerca {searchString}\\\"\"\n            },\n            \"resultsItems\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"SearchbarItem[] | string\",\n                    \"resolved\": \"SearchbarItem[] | string\",\n                    \"references\": {\n                        \"SearchbarItem\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../beans\",\n                            \"id\": \"src/beans/index.tsx::SearchbarItem\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Autocomplete results items\"\n                },\n                \"attribute\": \"results-items\",\n                \"reflect\": false\n            },\n            \"sortResultsItems\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Sort autocomplete results items\"\n                },\n                \"attribute\": \"sort-results-items\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"showSearchButton\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Show submit button\"\n                },\n                \"attribute\": \"show-search-button\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"searchButtonIconOnly\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Set button icon without label\"\n                },\n                \"attribute\": \"search-button-icon-only\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"size\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"ControlSize\",\n                    \"resolved\": \"ControlSize.BIG | ControlSize.SMALL | ControlSize.X_SMALL\",\n                    \"references\": {\n                        \"ControlSize\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../beans\",\n                            \"id\": \"src/beans/index.tsx::ControlSize\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Available sizes: `big`, `small` and `x-small`. Defaults to `big`.\"\n                },\n                \"attribute\": \"size\",\n                \"reflect\": false,\n                \"defaultValue\": \"ControlSize.BIG\"\n            },\n            \"variant\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"ButtonVariant\",\n                    \"resolved\": \"ButtonVariant.PRIMARY | ButtonVariant.SECONDARY | ButtonVariant.TERTIARY\",\n                    \"references\": {\n                        \"ButtonVariant\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../beans\",\n                            \"id\": \"src/beans/index.tsx::ButtonVariant\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Graphical variant: `primary`, `secondary`, `tertiary`. Defaults to `primary`.\"\n                },\n                \"attribute\": \"variant\",\n                \"reflect\": false,\n                \"defaultValue\": \"ButtonVariant.PRIMARY\"\n            }\n        };\n    }\n    static get states() {\n        return {\n            \"searchString\": {},\n            \"currResultsCount\": {},\n            \"showResults\": {},\n            \"isMobile\": {},\n            \"selectedItem\": {}\n        };\n    }\n    static get events() {\n        return [{\n                \"method\": \"searchSubmit\",\n                \"name\": \"searchSubmit\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Emitted on search submit, return search string\"\n                },\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                }\n            }, {\n                \"method\": \"searchTyping\",\n                \"name\": \"searchTyping\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Emitted on search typing, return search string\"\n                },\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                }\n            }, {\n                \"method\": \"searchItemClick\",\n                \"name\": \"searchItemClick\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Emitted on search result click, return item\"\n                },\n                \"complexType\": {\n                    \"original\": \"SearchbarItem\",\n                    \"resolved\": \"{ label: string; id?: string; icon?: string; tag?: { icon?: string; text: string; }; category?: string; subcategory?: string; children?: Omit<SearchbarItem, \\\"category\\\" | \\\"subcategory\\\">[]; }\",\n                    \"references\": {\n                        \"SearchbarItem\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../beans\",\n                            \"id\": \"src/beans/index.tsx::SearchbarItem\"\n                        }\n                    }\n                }\n            }];\n    }\n    static get elementRef() { return \"element\"; }\n    static get watchers() {\n        return [{\n                \"propName\": \"resultsItems\",\n                \"methodName\": \"watchItems\"\n            }, {\n                \"propName\": \"resultsCount\",\n                \"methodName\": \"watchResultsCount\"\n            }, {\n                \"propName\": \"value\",\n                \"methodName\": \"watchValue\"\n            }, {\n                \"propName\": \"searchString\",\n                \"methodName\": \"watchSearchString\"\n            }, {\n                \"propName\": \"showResults\",\n                \"methodName\": \"watchShowResults\"\n            }];\n    }\n    static get listeners() {\n        return [{\n                \"name\": \"click\",\n                \"method\": \"handleOutsideClick\",\n                \"target\": \"document\",\n                \"capture\": false,\n                \"passive\": false\n            }];\n    }\n}\n//# sourceMappingURL=index.js.map\n"],"version":3}

package/dist/cjs/z-otp.cjs.entry.js

@@ -0,0 +1,43 @@
+'use strict';
+
+var index = require('./index-B_IQfJ7S.js');
+var index$1 = require('./index-GMHChntS.js');
+
+const stylesCss = "input:focus{box-shadow:var(--shadow-focus-primary);outline:none !important}:host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}.digits-container{display:flex;justify-content:flex-start}input{width:calc(var(--space-unit) * 5);height:72px;box-sizing:border-box;padding:0;caret-color:transparent;color:var(--color-surface05);font-family:var(--font-family-sans);font-size:32px;font-weight:300;text-align:center}input.error{border:1px solid;border-color:var(--color-default-error);background-color:var(--color-inverse-error);border-radius:4px}input:not(:last-of-type){margin-right:var(--space-unit)}@media only screen and (min-width: 768px){input:not(:last-of-type){margin-right:calc(var(--space-unit) * 2)}}@media only screen and (min-width: 1025px){input{width:calc(var(--space-unit) * 6)}}";
+
+const ZOtp = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.otpChange = index.createEvent(this, "otpChange", 7);
+        this.inputNum = 6;
+        this.status = undefined;
+        this.message = undefined;
+    }
+    emitInputChange(value) {
+        this.otpChange.emit({ value });
+    }
+    componentWillLoad() {
+        this.otp = [...Array(this.inputNum)];
+        this.otpRef = [...Array(this.inputNum)];
+    }
+    render() {
+        return (index.h("div", { key: '7cdafff5e25f865f60e24c543f6bb6a1f7cf99d1', class: "otp-container" }, index.h("div", { key: '5240bc35e4831a02c716d061ba17d40da8d4fa38', class: "digits-container" }, this.otp.map((_val, i) => (index.h("input", { class: this.status == index$1.InputStatus.ERROR ? "error" : null, onKeyDown: (e) => {
+                if (e.keyCode > 47) {
+                    this.otpRef[i].value = "";
+                }
+            }, onKeyUp: (e) => {
+                if (e.keyCode > 47) {
+                    i < this.inputNum - 1 && this.otpRef[i + 1].focus();
+                }
+            }, onInput: (e) => {
+                this.otp[i] = e.target.value;
+                this.emitInputChange(this.otp.join(""));
+            }, type: "text", minlength: "1", maxlength: "1", autoComplete: "off", ref: (el) => (this.otpRef[i] = el) })))), index.h("z-input-message", { key: '5f1a3db554221dd987e9550502af92d0bafdb7ff', message: this.message, status: this.status })));
+    }
+};
+ZOtp.style = stylesCss;
+
+exports.z_otp = ZOtp;
+//# sourceMappingURL=z-otp.entry.cjs.js.map
+
+//# sourceMappingURL=z-otp.cjs.entry.js.map

package/dist/cjs/z-otp.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"z-otp.entry.cjs.js","mappings":";;;;;AAAA,MAAM,SAAS,GAAG,syBAAsyB;;MCE3yB,IAAI,GAAA,MAAA;AACb,IAAA,WAAA,CAAA,OAAA,EAAA;;;AACI,QAAA,IAAI,CAAC,QAAQ,GAAG,CAAC;AACjB,QAAA,IAAI,CAAC,MAAM,GAAG,SAAS;AACvB,QAAA,IAAI,CAAC,OAAO,GAAG,SAAS;AAC3B;AACD,IAAA,eAAe,CAAC,KAAK,EAAA;QACjB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC;;IAElC,iBAAiB,GAAA;AACb,QAAA,IAAI,CAAC,GAAG,GAAG,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;AACpC,QAAA,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;;IAE3C,MAAM,GAAA;AACF,QAAA,QAAQA,OAAC,CAAC,KAAK,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,KAAK,EAAE,eAAe,EAAE,EAAEA,OAAC,CAAC,KAAK,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,KAAK,EAAE,kBAAkB,EAAE,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,MAAMA,OAAC,CAAC,OAAO,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,IAAIC,mBAAW,CAAC,KAAK,GAAG,OAAO,GAAG,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC,KAAI;AAClS,gBAAA,IAAI,CAAC,CAAC,OAAO,GAAG,EAAE,EAAE;oBAChB,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE;;AAEjC,aAAC,EAAE,OAAO,EAAE,CAAC,CAAC,KAAI;AACd,gBAAA,IAAI,CAAC,CAAC,OAAO,GAAG,EAAE,EAAE;AAChB,oBAAA,CAAC,GAAG,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE;;AAE3D,aAAC,EAAE,OAAO,EAAE,CAAC,CAAC,KAAI;gBACd,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK;AAC5B,gBAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,aAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,YAAY,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAED,OAAC,CAAC,iBAAiB,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;;;;;;;","names":["h","InputStatus"],"sources":["node_modules/.pnpm/@zanichelli+albe-web-components@18.3.2/node_modules/@zanichelli/albe-web-components/dist/collection/snowflakes/myz/z-otp/styles.css?tag=z-otp&encapsulation=shadow","node_modules/.pnpm/@zanichelli+albe-web-components@18.3.2/node_modules/@zanichelli/albe-web-components/dist/collection/snowflakes/myz/z-otp/index.js"],"sourcesContent":["input:focus {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none !important;\n}\n\n:host {\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n.digits-container {\n  display: flex;\n  justify-content: flex-start;\n}\n\ninput {\n  width: calc(var(--space-unit) * 5);\n  height: 72px;\n  box-sizing: border-box;\n  padding: 0;\n  caret-color: transparent;\n  color: var(--color-surface05);\n  font-family: var(--font-family-sans);\n  font-size: 32px;\n  font-weight: 300;\n  text-align: center;\n}\n\ninput.error {\n  border: 1px solid;\n  border-color: var(--color-default-error);\n  background-color: var(--color-inverse-error);\n  border-radius: 4px;\n}\n\ninput:not(:last-of-type) {\n  margin-right: var(--space-unit);\n}\n\n/* Tablet breakpoint */\n@media only screen and (min-width: 768px) {\n  input:not(:last-of-type) {\n    margin-right: calc(var(--space-unit) * 2);\n  }\n}\n\n/* Desktop breakpoint */\n@media only screen and (min-width: 1025px) {\n  input {\n    width: calc(var(--space-unit) * 6);\n  }\n}\n","import { h } from \"@stencil/core\";\nimport { InputStatus } from \"../../../beans\";\nexport class ZOtp {\n    constructor() {\n        this.inputNum = 6;\n        this.status = undefined;\n        this.message = undefined;\n    }\n    emitInputChange(value) {\n        this.otpChange.emit({ value });\n    }\n    componentWillLoad() {\n        this.otp = [...Array(this.inputNum)];\n        this.otpRef = [...Array(this.inputNum)];\n    }\n    render() {\n        return (h(\"div\", { key: '7cdafff5e25f865f60e24c543f6bb6a1f7cf99d1', class: \"otp-container\" }, h(\"div\", { key: '5240bc35e4831a02c716d061ba17d40da8d4fa38', class: \"digits-container\" }, this.otp.map((_val, i) => (h(\"input\", { class: this.status == InputStatus.ERROR ? \"error\" : null, onKeyDown: (e) => {\n                if (e.keyCode > 47) {\n                    this.otpRef[i].value = \"\";\n                }\n            }, onKeyUp: (e) => {\n                if (e.keyCode > 47) {\n                    i < this.inputNum - 1 && this.otpRef[i + 1].focus();\n                }\n            }, onInput: (e) => {\n                this.otp[i] = e.target.value;\n                this.emitInputChange(this.otp.join(\"\"));\n            }, type: \"text\", minlength: \"1\", maxlength: \"1\", autoComplete: \"off\", ref: (el) => (this.otpRef[i] = el) })))), h(\"z-input-message\", { key: '5f1a3db554221dd987e9550502af92d0bafdb7ff', message: this.message, status: this.status })));\n    }\n    static get is() { return \"z-otp\"; }\n    static get encapsulation() { return \"shadow\"; }\n    static get originalStyleUrls() {\n        return {\n            \"$\": [\"styles.css\"]\n        };\n    }\n    static get styleUrls() {\n        return {\n            \"$\": [\"styles.css\"]\n        };\n    }\n    static get properties() {\n        return {\n            \"inputNum\": {\n                \"type\": \"number\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"number\",\n                    \"resolved\": \"number\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Input number\"\n                },\n                \"attribute\": \"input-num\",\n                \"reflect\": false,\n                \"defaultValue\": \"6\"\n            },\n            \"status\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"InputStatus\",\n                    \"resolved\": \"InputStatus.ERROR | InputStatus.SUCCESS | InputStatus.WARNING\",\n                    \"references\": {\n                        \"InputStatus\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../../beans\",\n                            \"id\": \"src/beans/index.tsx::InputStatus\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Input status\"\n                },\n                \"attribute\": \"status\",\n                \"reflect\": false\n            },\n            \"message\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Input message\"\n                },\n                \"attribute\": \"message\",\n                \"reflect\": false\n            }\n        };\n    }\n    static get events() {\n        return [{\n                \"method\": \"otpChange\",\n                \"name\": \"otpChange\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Otp change event\"\n                },\n                \"complexType\": {\n                    \"original\": \"any\",\n                    \"resolved\": \"any\",\n                    \"references\": {}\n                }\n            }];\n    }\n}\n//# sourceMappingURL=index.js.map\n"],"version":3}