@zanichelli/albe-web-components 18.7.7-RC1 → 18.8.0

package/dist/components/index24.js

@@ -1,402 +1,476 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { e as ControlSize, B as ButtonVariant, p as Device, l as ListDividerType, g as KeyboardCode } from './index2.js';
-import { r as randomId, g as getDevice, k as handleEnterKeydSubmit } from './utils.js';
-import { d as defineCustomElement$9 } from './index4.js';
-import { d as defineCustomElement$8 } from './index6.js';
-import { d as defineCustomElement$7 } from './index9.js';
-import { d as defineCustomElement$6 } from './index11.js';
-import { d as defineCustomElement$5 } from './index12.js';
-import { d as defineCustomElement$4 } from './index13.js';
-import { d as defineCustomElement$3 } from './index14.js';
-import { d as defineCustomElement$2 } from './index15.js';
-import { d as defineCustomElement$1 } from './index25.js';
+import { P as PopoverPosition, g as KeyboardCode, p as Device } from './index2.js';
+import { a as containsElement, i as findScrollableParent, g as getDevice, j as isElementVisibleInContainer } from './utils.js';
 
-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 ZSearchbarStyle0 = stylesCss;
+const stylesCss = ":host{position:fixed;display:none;max-width:calc(100% - var(--grid-margin) * 2);max-height:calc(100% - var(--grid-margin) * 2);padding:var(--z-popover-padding, 0);background:var(--z-popover-theme--surface, var(--color-surface01));border-radius:var(--border-radius-small);color:var(--z-popover-theme--text, var(--color-default-text));fill:currentcolor;filter:var(--z-popover-shadow-filter, drop-shadow(0 1px 2px var(--shadow-color-base)));text-align:center;visibility:hidden;}:host([open]:not([open=\"false\"])[current-position]){display:block}:host([center][current-position=\"top\"]),:host([center][current-position=\"bottom\"]){transform:translateX(-50%)}:host([center][current-position=\"right\"]),:host([center][current-position=\"left\"]){transform:translateY(-50%)}:host([current-position^=\"top\"]){margin:0 0 var(--space-unit)}:host([current-position^=\"bottom\"]){margin:var(--space-unit) 0 0}:host([current-position^=\"left\"]){margin:0 var(--space-unit) 0 0}:host([current-position^=\"right\"]){margin:0 0 0 var(--space-unit)}:host([current-position])::before{--arrow-size:6px;--arrow-edge-offset:calc(100% - var(--space-unit) - (var(--arrow-size) / 2));--arrow-center-x-offset:calc(50% - (var(--arrow-size) / 2));--arrow-center-y-offset:calc(100% - (var(--arrow-size) / 2));position:absolute;display:block;width:var(--arrow-size);height:var(--arrow-size);background:var(--z-popover-theme--surface, var(--color-surface01));content:\"\";transform:rotate(45deg)}:host([show-arrow=\"false\"])::before,:host(:not([show-arrow]))::before{display:none}:host([current-position^=\"top\"])::before{top:var(--arrow-center-y-offset)}:host([current-position^=\"bottom\"])::before{bottom:var(--arrow-center-y-offset)}:host([current-position=\"top\"])::before,:host([current-position=\"bottom\"])::before{right:var(--arrow-edge-offset)}:host([current-position=\"right\"])::before,:host([current-position=\"left\"])::before{bottom:var(--arrow-edge-offset)}:host([current-position=\"right\"])::before{right:var(--arrow-center-y-offset)}:host([current-position=\"left\"])::before{left:var(--arrow-center-y-offset)}:host([current-position=\"top_right\"])::before,:host([current-position=\"bottom_right\"])::before{right:var(--arrow-edge-offset)}:host([current-position=\"top_left\"])::before,:host([current-position=\"bottom_left\"])::before{left:var(--arrow-edge-offset)}:host([current-position=\"right_top\"])::before,:host([current-position=\"left_top\"])::before{top:var(--arrow-edge-offset)}:host([current-position=\"right_top\"])::before,:host([current-position=\"right_bottom\"])::before{right:var(--arrow-center-y-offset)}:host([current-position=\"left_top\"])::before,:host([current-position=\"left_bottom\"])::before{left:var(--arrow-center-y-offset)}:host([current-position=\"right_bottom\"])::before,:host([current-position=\"left_bottom\"])::before{bottom:var(--arrow-edge-offset)}:host([center][current-position=\"top\"])::before,:host([center][current-position=\"bottom\"])::before{right:auto;left:var(--arrow-center-x-offset)}:host([center][current-position=\"right\"])::before,:host([center][current-position=\"left\"])::before{top:var(--arrow-center-x-offset);bottom:auto}";
+const ZPopoverStyle0 = stylesCss;
 
-const ZSearchbar = /*@__PURE__*/ proxyCustomElement(class ZSearchbar extends HTMLElement {
+const ZPopover = /*@__PURE__*/ proxyCustomElement(class ZPopover extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.searchSubmit = createEvent(this, "searchSubmit", 7);
-        this.searchTyping = createEvent(this, "searchTyping", 7);
-        this.searchItemClick = createEvent(this, "searchItemClick", 7);
-        this.resultsItemsList = null;
-        this.items = [];
-        this.htmlid = `searchbar-${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 = ControlSize.BIG;
-        this.variant = ButtonVariant.PRIMARY;
-        this.searchString = this.value;
-        this.currResultsCount = 0;
-        this.showResults = false;
-        this.isMobile = false;
-        this.selectedItem = undefined;
+        this.positionChange = createEvent(this, "positionChange", 7);
+        this.openChange = createEvent(this, "openChange", 7);
+        /** space tolerance for space calculations */
+        this.spaceTolerance = 3;
+        this.position = PopoverPosition.TOP;
+        this.open = false;
+        this.bindTo = undefined;
+        this.showArrow = false;
+        this.center = false;
+        this.closable = true;
+        this.currentPosition = 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;
+    closePopoverWithKeyboard(e) {
+        if (this.closable && e.key === KeyboardCode.ESC) {
+            this.open = false;
         }
     }
-    watchShowResults() {
-        if (!this.showResults) {
-            this.items = [];
+    /**
+     * Close the popover when clicking outside of its content.
+     * Stop event propagation if the click was fired by popover's trigger element,
+     * to prevent close and reopen glitches.
+     */
+    handleOutsideClick(e) {
+        const target = e.target;
+        if (!this.closable || !this.open || containsElement(this.host, target)) {
+            return;
         }
-    }
-    disconnectedCallback() {
-        var _a;
-        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-    }
-    componentDidLoad() {
-        this.resizeObserver = new ResizeObserver(() => {
-            if (getDevice() === Device.MOBILE && !this.isMobile) {
-                this.isMobile = true;
-            }
-            if (getDevice() !== Device.MOBILE && this.isMobile) {
-                this.isMobile = false;
-            }
-        });
-        this.resizeObserver.observe(this.element);
-    }
-    componentWillLoad() {
-        this.resultsItemsList = this.getResultsItemsList();
-        this.currResultsCount = this.resultsCount;
-    }
-    getResultsItemsList() {
-        return typeof this.resultsItems === "string" ? JSON.parse(this.resultsItems) : this.resultsItems;
-    }
-    getGroupedItems(items) {
-        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;
-            }, {});
+        if (containsElement(this.boundElement, target)) {
+            // stop propagation if the click was on the trigger element to prevent close and reopen glitches
+            e.stopPropagation();
         }
-        return groupedItems;
+        this.open = false;
     }
-    checkResultsCount(counter) {
-        if (!this.currResultsCount || counter < this.currResultsCount) {
-            return true;
+    validatePosition(newValue) {
+        if (!Object.values(PopoverPosition).includes(newValue) || newValue === PopoverPosition.AUTO) {
+            newValue = PopoverPosition.TOP;
+            this.position = newValue;
         }
-        return false;
-    }
-    handleStopTyping(e) {
-        e.stopPropagation();
-        this.searchString = e.detail.value;
-        if (this.selectedItem) {
-            this.selectedItem = undefined;
+        this.currentPosition = newValue;
+        if (this.open) {
+            this.setPosition();
         }
     }
-    handleSubmit() {
-        if (this.preventSubmit) {
+    /** Setup popover behaviors when `open` changes. */
+    onOpen() {
+        cancelAnimationFrame(this.animationFrameRequestId);
+        this.openChange.emit({ open: this.open });
+        if (!this.open) {
+            Object.assign(this.host.style, {
+                // Reset all positioning properties
+                top: "auto",
+                right: "auto",
+                bottom: "auto",
+                left: "auto",
+                maxWidth: "",
+                maxHeight: "",
+                // Set initial visibility to hidden while calculating position...
+                visibility: "hidden",
+            });
+            this.currentPosition = undefined;
             return;
         }
-        this.emitSearchSubmit();
+        const updatePositionLoop = () => {
+            if (!this.open) {
+                return;
+            }
+            this.setPosition();
+            this.animationFrameRequestId = requestAnimationFrame(updatePositionLoop);
+        };
+        // call `setPosition` after a tick to ensure the DOM is ready and sizes are available
+        setTimeout(() => {
+            updatePositionLoop();
+        }, 0);
     }
-    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;
+    onBindingChange() {
+        this.findBoundElement();
     }
-    renderInput() {
-        var _a;
-        return (h("z-input", { ref: (val) => {
-                this.inputRef = val;
-            }, htmlid: `input-${this.htmlid}`, message: false, placeholder: this.placeholder, onStopTyping: (e) => this.handleStopTyping(e), onKeyUp: (e) => {
-                handleEnterKeydSubmit(e, () => this.handleSubmit());
-                this.handleArrowsNavigation(e);
-            }, value: this.searchString || ((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.label), ariaLabel: this.placeholder, size: this.size }));
+    /** Returns the offset modifier to use in calculations to align the popover with the bound element. */
+    get offsetModifier() {
+        return this.center ? 0.5 : 0;
     }
-    renderButton() {
-        if (!this.showSearchButton) {
-            return null;
+    findBoundElement() {
+        if (typeof this.bindTo === "string") {
+            this.boundElement = this.host.ownerDocument.querySelector(this.bindTo);
         }
-        const iconProp = this.searchButtonIconOnly ? { icon: "search" } : null;
-        const buttonLabel = this.searchButtonIconOnly ? "" : "CERCA";
-        const ariaLabel = this.searchButtonIconOnly ? { "aria-label": "CERCA" } : null;
-        const defaultProps = Object.assign(Object.assign({ disabled: this.preventSubmit, variant: this.variant, size: this.size, onClick: () => this.handleSubmit() }, iconProp), ariaLabel);
-        return h("z-button", Object.assign({}, defaultProps), buttonLabel);
-    }
-    renderResults() {
-        if (!this.showResults ||
-            !this.autocomplete ||
-            !this.searchString ||
-            this.searchString.length < this.autocompleteMinChars ||
-            !this.resultsItemsList) {
-            return null;
+        else if (this.bindTo) {
+            this.boundElement = this.bindTo;
         }
-        return (h("div", { class: "results-wrapper" }, h("div", { class: "results" }, this.renderResultsList())));
-    }
-    renderResultsList() {
-        var _a, _b;
-        if (this.preventSubmit && !((_a = this.resultsItemsList) === null || _a === void 0 ? void 0 : _a.length)) {
-            return (h("span", { class: "item item-no-results" }, "Non abbiamo trovato risultati per ", h("b", null, this.searchString), h("br", null), h("br", null), "Cosa puoi fare?", h("ul", null, h("li", null, "Verificare di aver scritto bene"), h("li", null, "Provare a cercare un'altra parola"), h("li", null, "Provare a cercare qualcosa di pi\u00F9 generico"))));
+        else {
+            this.boundElement = this.host.parentElement;
         }
-        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()));
     }
-    renderItems() {
-        var _a;
-        if (!((_a = this.resultsItemsList) === null || _a === void 0 ? void 0 : _a.length)) {
-            return [];
+    /**
+     * Check if element has enough space to the right and left to be centered.
+     * Used for `TOP` and `BOTTOM` position.
+     * When `center` is not enabled, only one side needs to be checked and `RIGHT` is the default.
+     */
+    hasCenteredHorizontalSpace(availableLeft, availableRight, hostWidth, boundElementWidth) {
+        const requiredSideSpace = (hostWidth - boundElementWidth) * (1 - this.offsetModifier);
+        if (!this.center) {
+            return availableRight >= requiredSideSpace - this.spaceTolerance;
         }
-        const groupedItems = this.getGroupedItems(this.resultsItemsList);
-        const listGroups = [];
-        let counter = 0;
-        Object.values(groupedItems).forEach((groupItem, index, array) => {
-            if (this.checkResultsCount(counter)) {
-                const listGroupsElements = [];
-                groupItem.items.forEach((item, subindex, subarray) => {
-                    if (this.checkResultsCount(counter)) {
-                        const isLast = index === array.length - 1 && subindex === subarray.length - 1;
-                        listGroupsElements.push(this.renderItem(item, subindex, !isLast));
-                    }
-                    counter++;
-                });
-                if (listGroupsElements.length) {
-                    listGroups.push(h("z-list-group", { "divider-type": ListDividerType.ELEMENT }, this.renderItemCategory(groupItem), listGroupsElements));
-                }
-            }
-        });
-        return listGroups;
+        return (availableRight >= requiredSideSpace - this.spaceTolerance &&
+            availableLeft >= requiredSideSpace - this.spaceTolerance);
     }
-    handleArrowsNavigation(e) {
-        const currentElement = e.target;
-        const arrows = [KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP];
-        if (!arrows.includes(e.key)) {
-            e.preventDefault();
-            return;
+    /**
+     * Check if element has enough space to the top and bottom to be centered.
+     * Used for `RIGHT` and `LEFT` position.
+     * When `center` is not enabled, only one side needs to be checked and `BOTTOM` is the default.
+     */
+    hasCenteredVerticalSpace(availableTop, availableBottom, hostHeight, boundElementHeight) {
+        const requiredSideSpace = (hostHeight - boundElementHeight) * (1 - this.offsetModifier);
+        if (!this.center) {
+            return availableBottom >= requiredSideSpace - this.spaceTolerance;
         }
-        if (!this.items.length) {
-            const list = this.element.shadowRoot.querySelector("z-list");
-            if (!list) {
-                return;
+        return (availableTop >= requiredSideSpace - this.spaceTolerance &&
+            availableBottom >= requiredSideSpace - this.spaceTolerance);
+    }
+    /**
+     * Check if there is enough space in the given direction to fit the popover.
+     * Used for composed positions like TOP_RIGHT, LEFT_BOTTOM, etc.
+     */
+    hasEnoughSideSpace(availableSpace, hostSize, boundElementSize, offsetModifier) {
+        return availableSpace >= hostSize - boundElementSize * (1 - offsetModifier) - this.spaceTolerance;
+    }
+    /**
+     * Given a desired position and available space around the bound element, returns the best position
+     * that fits the popover, trying all positions if needed.
+     * Takes into account offsetModifier for centering.
+     * @param desiredPosition The desired position of the popover.
+     * @param availableSpace The available space around the bound element.
+     */
+    getOptimalPopoverPosition(desiredPosition, availableSpace) {
+        const hostWidth = this.host.offsetWidth;
+        const hostHeight = this.host.offsetHeight;
+        const boundElementWidth = this.boundElement.getBoundingClientRect().width;
+        const boundElementHeight = this.boundElement.getBoundingClientRect().height;
+        const offsetModifier = this.offsetModifier;
+        /** Check if there is enough space to fit the popover in the desired position */
+        const fits = (pos) => {
+            switch (pos) {
+                case PopoverPosition.TOP:
+                    return (availableSpace.top >= hostHeight - this.spaceTolerance &&
+                        this.hasCenteredHorizontalSpace(availableSpace.left, availableSpace.right, hostWidth, boundElementWidth));
+                case PopoverPosition.TOP_RIGHT:
+                    return (availableSpace.top >= hostHeight &&
+                        this.hasEnoughSideSpace(availableSpace.right, hostWidth, boundElementWidth, offsetModifier));
+                case PopoverPosition.TOP_LEFT:
+                    return (availableSpace.top >= hostHeight &&
+                        this.hasEnoughSideSpace(availableSpace.left, hostWidth, boundElementWidth, offsetModifier));
+                case PopoverPosition.RIGHT:
+                    return (availableSpace.right >= hostWidth &&
+                        this.hasCenteredVerticalSpace(availableSpace.top, availableSpace.bottom, hostHeight, boundElementHeight));
+                case PopoverPosition.RIGHT_BOTTOM:
+                    return (availableSpace.right >= hostWidth &&
+                        this.hasEnoughSideSpace(availableSpace.bottom, hostHeight, boundElementHeight, offsetModifier));
+                case PopoverPosition.RIGHT_TOP:
+                    return (availableSpace.right >= hostWidth &&
+                        this.hasEnoughSideSpace(availableSpace.top, hostHeight, boundElementHeight, offsetModifier));
+                case PopoverPosition.BOTTOM:
+                    return (availableSpace.bottom >= hostHeight &&
+                        this.hasCenteredHorizontalSpace(availableSpace.left, availableSpace.right, hostWidth, boundElementWidth));
+                case PopoverPosition.BOTTOM_LEFT:
+                    return (availableSpace.bottom >= hostHeight &&
+                        this.hasEnoughSideSpace(availableSpace.left, hostWidth, boundElementWidth, offsetModifier));
+                case PopoverPosition.BOTTOM_RIGHT:
+                    return (availableSpace.bottom >= hostHeight &&
+                        this.hasEnoughSideSpace(availableSpace.right, hostWidth, boundElementWidth, offsetModifier));
+                case PopoverPosition.LEFT:
+                    return (availableSpace.left >= hostWidth &&
+                        this.hasCenteredVerticalSpace(availableSpace.top, availableSpace.bottom, hostHeight, boundElementHeight));
+                case PopoverPosition.LEFT_TOP:
+                    return (availableSpace.left >= hostWidth &&
+                        this.hasEnoughSideSpace(availableSpace.top, hostHeight, boundElementHeight, offsetModifier));
+                case PopoverPosition.LEFT_BOTTOM:
+                    return (availableSpace.left >= hostWidth &&
+                        this.hasEnoughSideSpace(availableSpace.bottom, hostHeight, boundElementHeight, offsetModifier));
+                default:
+                    return false;
             }
-            this.items = Array.from(list.querySelectorAll(".list-element"));
+        };
+        // Check desired position first
+        if (fits(desiredPosition)) {
+            return desiredPosition;
         }
-        this.items.forEach((item) => item.classList.contains("focused") && item.classList.remove("focused"));
-        const currentIndex = this.items.indexOf(currentElement);
-        if (e.key === KeyboardCode.ARROW_DOWN) {
-            e.preventDefault();
-            const nextIndex = currentIndex + 1;
-            if (nextIndex < this.items.length) {
-                this.items[nextIndex].focus();
-                this.items[nextIndex].classList.add("focused");
-            }
+        // Find position index and create rotation starting from next position
+        const positions = ZPopover.positionOrder;
+        const startIndex = positions.indexOf(desiredPosition);
+        if (startIndex === -1) {
+            return desiredPosition; // fallback if position not found
         }
-        if (e.key === KeyboardCode.ARROW_UP) {
-            e.preventDefault();
-            const prevIndex = currentIndex - 1;
-            if (prevIndex < 0) {
-                this.element.shadowRoot.querySelector("input").focus();
-                this.element.shadowRoot
-                    .querySelector("input")
-                    .setSelectionRange(this.inputRef.value.length, this.inputRef.value.length);
-            }
-            if (prevIndex >= 0) {
-                this.items[prevIndex].focus();
-                this.items[prevIndex].classList.add("focused");
+        // Try all other positions starting from the next one
+        for (let i = 1; i < positions.length; i++) {
+            const posIndex = (startIndex + i) % positions.length;
+            const pos = positions[posIndex];
+            if (fits(pos)) {
+                return pos;
             }
         }
+        return this.findBestFallbackPosition(availableSpace);
     }
-    renderItem(item, key, divider) {
-        return (h("z-list-element", { id: `list-item-${this.htmlid}-${key}`, tabIndex: 0, role: "option", dividerType: divider ? ListDividerType.ELEMENT : undefined, onKeyDown: (e) => this.handleArrowsNavigation(e) }, h("div", { class: "list-element", tabIndex: 0, onClick: () => this.emitSearchItemClick(item), onKeyDown: (e) => handleEnterKeydSubmit(e, () => this.emitSearchItemClick(item)), onMouseEnter: (e) => {
-                const currentElement = e.target;
-                currentElement.classList.add("hovered");
-            }, onMouseLeave: (e) => {
-                const currentElement = e.target;
-                currentElement.classList.contains("hovered") && currentElement.classList.remove("hovered");
-            } }, h("span", { class: "item ellipsis" }, (item === null || item === void 0 ? void 0 : item.icon) && (h("z-icon", { class: "item-icon", name: item.icon })), h("span", { class: "item-label", title: item.label, innerHTML: this.renderItemLabel(item.label) })), (item === null || item === void 0 ? void 0 : item.tag) && h("z-tag", { icon: item.tag.icon }, !this.isMobile ? item.tag.text : "")), item.children && item.children.length > 0 ? (h("z-list", null, h("div", { class: "children-node" }, item.children.map((child, index) => this.renderItem(child, index, false))))) : null));
+    /** Find the best fallback position based on available space when no position fits perfectly. */
+    findBestFallbackPosition(availableSpace) {
+        // Determine which horizontal and vertical direction has the most available space
+        const bestHorizontalDirection = availableSpace.right >= availableSpace.left ? PopoverPosition.RIGHT : PopoverPosition.LEFT;
+        const bestVerticalDirection = availableSpace.bottom >= availableSpace.top ? PopoverPosition.BOTTOM : PopoverPosition.TOP;
+        // Choose the main direction based on which axis has more space overall
+        const maxHorizontalSpace = Math.max(availableSpace.right, availableSpace.left);
+        const maxVerticalSpace = Math.max(availableSpace.bottom, availableSpace.top);
+        const mainDirection = maxVerticalSpace >= maxHorizontalSpace ? bestVerticalDirection : bestHorizontalDirection;
+        // Decide if a secondary direction is needed
+        // Only add a secondary direction if the difference between min and max in that axis is at least double
+        let needsSecondaryDirection = false;
+        if (mainDirection === bestVerticalDirection) {
+            // If main direction is vertical, check horizontal space difference
+            const minHorizontalSpace = Math.min(availableSpace.right, availableSpace.left);
+            needsSecondaryDirection = maxHorizontalSpace >= minHorizontalSpace * 2;
+        }
+        else {
+            // If main direction is horizontal, check vertical space difference
+            const minVerticalSpace = Math.min(availableSpace.bottom, availableSpace.top);
+            needsSecondaryDirection = maxVerticalSpace >= minVerticalSpace * 2;
+        }
+        if (!needsSecondaryDirection) {
+            return mainDirection;
+        }
+        const secondaryDirection = mainDirection === bestVerticalDirection ? bestHorizontalDirection : bestVerticalDirection;
+        // Return a combined position (e.g., "bottom_right")
+        return `${mainDirection}_${secondaryDirection}`;
     }
-    renderItemLabel(label) {
-        if (!this.searchString) {
-            return label;
+    /**
+     * Calculate available space around the element bound with the popover, based on its nearest scrollable ancestor.
+     *
+     * Calculations for `right` and `bottom` can be a little bit confusing because `boundingRect.right` and `bottom` may not be what you expect...
+     * For more information see the explanation in the docs.
+     * @link https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect#return_value
+     */
+    calculateAvailableSpace() {
+        const boundElementRect = this.boundElement.getBoundingClientRect();
+        if (this.lastBoundRect &&
+            this.lastBoundRect.x === boundElementRect.x &&
+            this.lastBoundRect.y === boundElementRect.y &&
+            this.lastBoundRect.width === boundElementRect.width &&
+            this.lastBoundRect.height === boundElementRect.height &&
+            this.cachedAvailableSpace) {
+            // If the bound element's rect hasn't changed, return the cached rect
+            return this.cachedAvailableSpace;
         }
-        return label.replace(new RegExp(this.searchString.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "gmi"), (found) => `<mark>${found}</mark>`);
+        this.lastBoundRect = boundElementRect;
+        const scrollableParent = findScrollableParent(this.boundElement);
+        const scrollableParentRect = scrollableParent.getBoundingClientRect();
+        const hasNestedScrollableParent = scrollableParent !== this.boundElement.ownerDocument.documentElement;
+        const documentWidth = this.boundElement.ownerDocument.documentElement.clientWidth;
+        const documentHeight = this.boundElement.ownerDocument.documentElement.clientHeight;
+        const safeSpace = 8; // extra space to avoid popover being too close to the edges
+        // These deltas represent the offset between the scrollable parent and the viewport.
+        // They are used to adjust the available space calculations when the scrollable parent is not the document or body,
+        // to try to fit the popover inside the scrollable parent.
+        const deltaTop = hasNestedScrollableParent ? scrollableParentRect.top : 0;
+        const deltaRight = hasNestedScrollableParent ? documentWidth - scrollableParentRect.right : 0;
+        const deltaBottom = hasNestedScrollableParent ? documentHeight - scrollableParentRect.bottom : 0;
+        const deltaLeft = hasNestedScrollableParent ? scrollableParentRect.left : 0;
+        this.cachedAvailableSpace = {
+            top: boundElementRect.top - deltaTop - safeSpace,
+            right: documentWidth - boundElementRect.right - deltaRight - safeSpace,
+            bottom: documentHeight - boundElementRect.bottom - deltaBottom - safeSpace,
+            left: boundElementRect.left - deltaLeft - safeSpace,
+        };
+        return this.cachedAvailableSpace;
+    }
+    /** Calculate the space around an element relative to the viewport. */
+    calculateElementOffsets(element) {
+        const elementRect = element.getBoundingClientRect();
+        const viewportWidth = element.ownerDocument.documentElement.clientWidth;
+        const viewportHeight = element.ownerDocument.documentElement.clientHeight;
+        return {
+            top: elementRect.top,
+            right: viewportWidth - elementRect.right,
+            bottom: viewportHeight - elementRect.bottom,
+            left: elementRect.left,
+        };
     }
-    renderItemCategory(groupItem) {
-        if (!(groupItem === null || groupItem === void 0 ? void 0 : groupItem.category)) {
-            return null;
+    /** Apply positioning styles based on passed position. */
+    applyPositionStyles(position, availableSpace) {
+        const boundElementWidth = this.boundElement.offsetWidth;
+        const boundElementHeight = this.boundElement.offsetHeight;
+        /** Distance between the popover and the bound element */
+        const distanceFromBound = 8;
+        const offsetModifier = this.offsetModifier;
+        /** Distance between the arrow center and the popover edge. Needed to align the center of the arrow with the center of the bound element when `showArrow` and `center` are enabled. */
+        const arrowModifier = this.showArrow && this.center ? 8 : 0;
+        const hostStyle = this.host.style;
+        const boundElementOffsets = this.calculateElementOffsets(this.boundElement);
+        let maxWidth;
+        let maxHeight;
+        switch (position) {
+            case PopoverPosition.TOP:
+            case PopoverPosition.TOP_RIGHT:
+                hostStyle.bottom = `${boundElementOffsets.bottom + boundElementHeight}px`;
+                hostStyle.left = `${boundElementOffsets.left + boundElementWidth * offsetModifier - (position === PopoverPosition.TOP_RIGHT ? arrowModifier : 0)}px`;
+                maxHeight = availableSpace.top - distanceFromBound;
+                if (position === PopoverPosition.TOP_RIGHT) {
+                    maxWidth = availableSpace.right + boundElementWidth * offsetModifier;
+                }
+                break;
+            case PopoverPosition.TOP_LEFT:
+                hostStyle.right = `${boundElementOffsets.right + boundElementWidth * offsetModifier - arrowModifier}px`;
+                hostStyle.bottom = `${boundElementOffsets.bottom + boundElementHeight}px`;
+                maxWidth = availableSpace.left + boundElementWidth * offsetModifier;
+                maxHeight = availableSpace.top - distanceFromBound;
+                break;
+            case PopoverPosition.BOTTOM:
+            case PopoverPosition.BOTTOM_RIGHT:
+                hostStyle.top = `${boundElementOffsets.top + boundElementHeight}px`;
+                hostStyle.left = `${boundElementOffsets.left + boundElementWidth * offsetModifier - (position === PopoverPosition.BOTTOM_RIGHT ? arrowModifier : 0)}px`;
+                maxHeight = availableSpace.bottom - distanceFromBound;
+                if (position === PopoverPosition.BOTTOM_RIGHT) {
+                    maxWidth = availableSpace.right + boundElementWidth * offsetModifier;
+                }
+                break;
+            case PopoverPosition.BOTTOM_LEFT:
+                hostStyle.top = `${boundElementOffsets.top + boundElementHeight}px`;
+                hostStyle.right = `${boundElementOffsets.right + boundElementWidth * offsetModifier - arrowModifier}px`;
+                maxWidth = availableSpace.left + boundElementWidth * offsetModifier;
+                maxHeight = availableSpace.bottom - distanceFromBound;
+                break;
+            case PopoverPosition.RIGHT:
+            case PopoverPosition.RIGHT_BOTTOM:
+                hostStyle.top = `${boundElementOffsets.top + boundElementHeight * offsetModifier - (position === PopoverPosition.RIGHT_BOTTOM ? arrowModifier : 0)}px`;
+                hostStyle.left = `${boundElementOffsets.left + boundElementWidth}px`;
+                maxWidth = availableSpace.right - distanceFromBound;
+                if (position === PopoverPosition.RIGHT) {
+                    maxHeight = availableSpace.top + availableSpace.bottom + boundElementHeight;
+                }
+                else {
+                    maxHeight = availableSpace.bottom + boundElementHeight * offsetModifier;
+                }
+                break;
+            case PopoverPosition.RIGHT_TOP:
+                hostStyle.bottom = `${boundElementOffsets.bottom + boundElementHeight * offsetModifier - arrowModifier}px`;
+                hostStyle.left = `${boundElementOffsets.left + boundElementWidth}px`;
+                maxWidth = availableSpace.right - distanceFromBound;
+                maxHeight = availableSpace.top + boundElementHeight * offsetModifier;
+                break;
+            case PopoverPosition.LEFT:
+            case PopoverPosition.LEFT_BOTTOM:
+                hostStyle.top = `${boundElementOffsets.top + boundElementHeight * offsetModifier - (position === PopoverPosition.LEFT_BOTTOM ? arrowModifier : 0)}px`;
+                hostStyle.right = `${boundElementOffsets.right + boundElementWidth}px`;
+                maxWidth = availableSpace.left - distanceFromBound;
+                if (position === PopoverPosition.LEFT_BOTTOM) {
+                    maxHeight = availableSpace.bottom + boundElementHeight * offsetModifier;
+                }
+                break;
+            case PopoverPosition.LEFT_TOP:
+                hostStyle.right = `${boundElementOffsets.right + boundElementWidth}px`;
+                hostStyle.bottom = `${boundElementOffsets.bottom + boundElementHeight * offsetModifier - arrowModifier}px`;
+                maxWidth = availableSpace.left - distanceFromBound;
+                maxHeight = availableSpace.top + boundElementHeight * offsetModifier;
+                break;
+        }
+        if (getDevice() !== Device.MOBILE) {
+            // Only force max sizes on non-mobile viewports
+            Object.assign(hostStyle, {
+                maxWidth: maxWidth ? `${maxWidth}px` : "",
+                maxHeight: maxHeight ? `${maxHeight}px` : "",
+            });
         }
-        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)));
     }
-    renderSearchHelper(hasDivider = true) {
-        if (!this.autocomplete || this.preventSubmit || !this.searchString) {
-            return null;
+    /** Set the position of the popover. */
+    setPosition() {
+        if (!this.boundElement) {
+            return;
+        }
+        if (!isElementVisibleInContainer(this.boundElement, findScrollableParent(this.boundElement))) {
+            // If the bound element is not visible, hide the popover too
+            this.open = false;
+            return;
         }
-        return (h("z-list-element", { role: "option", dividerType: hasDivider ? ListDividerType.ELEMENT : undefined, id: `list-item-${this.htmlid}-search`, onKeyDown: (e) => this.handleArrowsNavigation(e) }, h("div", { tabindex: 0, onClick: () => this.emitSearchSubmit(), onKeyDown: (e) => handleEnterKeydSubmit(e, () => this.emitSearchSubmit()), class: "list-element" }, h("span", { class: "item item-search" }, h("z-icon", { class: "search-icon", name: "left-magnifying-glass" }), h("span", { class: "item-label", innerHTML: this.searchHelperLabel.replace("{searchString}", `<mark>${this.searchString}</mark>`) })))));
+        Object.assign(this.host.style, {
+            // Reset all positioning properties
+            top: "auto",
+            right: "auto",
+            bottom: "auto",
+            left: "auto",
+            maxWidth: "",
+            maxHeight: "",
+            // Set initial visibility to hidden while calculating position...
+            visibility: "hidden",
+        });
+        const availableSpace = this.calculateAvailableSpace();
+        const position = this.getOptimalPopoverPosition(this.position, availableSpace);
+        this.applyPositionStyles(position, availableSpace);
+        this.currentPosition = position;
+        this.positionChange.emit({ position: this.currentPosition });
+        // ...then restore the visibility
+        this.host.style.visibility = "visible";
     }
-    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;
+    componentWillLoad() {
+        this.validatePosition(this.position);
+    }
+    componentDidLoad() {
+        this.findBoundElement();
+        if (this.open) {
+            this.onOpen();
         }
-        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")));
+    }
+    disconnectedCallback() {
+        cancelAnimationFrame(this.animationFrameRequestId);
     }
     render() {
-        return (h(Host, { key: '0ecc3fd73df3cf20449c6b241b526153e08caddb', onFocus: () => (this.showResults = true), onClick: (e) => this.handleOutsideClick(e), class: { "has-submit": this.showSearchButton, "has-results": this.autocomplete } }, h("div", { key: '860e5fea6661aad7aaa4ddfdf0e340754cf5275e', class: "input-container" }, this.renderInput(), this.renderResults()), this.renderButton()));
+        return (h(Host, { key: 'aeb6c7ccabc279af16d9a957e732ad611612589f', "current-position": this.currentPosition }, h("slot", { key: '77fecb1bbfa49e1a8f97c078e7cef01a03420d9c' })));
     }
-    get element() { return this; }
+    get host() { return this; }
     static get watchers() { return {
-        "resultsItems": ["watchItems"],
-        "resultsCount": ["watchResultsCount"],
-        "value": ["watchValue"],
-        "searchString": ["watchSearchString"],
-        "showResults": ["watchShowResults"]
+        "position": ["validatePosition"],
+        "open": ["onOpen"],
+        "bindTo": ["onBindingChange"]
     }; }
-    static get style() { return ZSearchbarStyle0; }
-}, [1, "z-searchbar", {
-        "htmlid": [513],
-        "preventSubmit": [4, "prevent-submit"],
-        "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"],
-        "resultsCount": ["watchResultsCount"],
-        "value": ["watchValue"],
-        "searchString": ["watchSearchString"],
-        "showResults": ["watchShowResults"]
+    static get style() { return ZPopoverStyle0; }
+}, [1, "z-popover", {
+        "position": [1537],
+        "open": [1540],
+        "bindTo": [1, "bind-to"],
+        "showArrow": [516, "show-arrow"],
+        "center": [516],
+        "closable": [4],
+        "currentPosition": [32]
+    }, [[8, "keyup", "closePopoverWithKeyboard"], [18, "click", "handleOutsideClick"]], {
+        "position": ["validatePosition"],
+        "open": ["onOpen"],
+        "bindTo": ["onBindingChange"]
     }]);
+// Clockwise order of positions.
+ZPopover.positionOrder = [
+    PopoverPosition.TOP,
+    PopoverPosition.TOP_RIGHT,
+    PopoverPosition.TOP_LEFT,
+    PopoverPosition.RIGHT,
+    PopoverPosition.RIGHT_BOTTOM,
+    PopoverPosition.RIGHT_TOP,
+    PopoverPosition.BOTTOM,
+    PopoverPosition.BOTTOM_LEFT,
+    PopoverPosition.BOTTOM_RIGHT,
+    PopoverPosition.LEFT,
+    PopoverPosition.LEFT_TOP,
+    PopoverPosition.LEFT_BOTTOM,
+];
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["z-searchbar", "z-button", "z-divider", "z-icon", "z-input", "z-input-message", "z-list", "z-list-element", "z-list-group", "z-tag"];
+    const components = ["z-popover"];
     components.forEach(tagName => { switch (tagName) {
-        case "z-searchbar":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZSearchbar);
-            }
-            break;
-        case "z-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$9();
-            }
-            break;
-        case "z-divider":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "z-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "z-input":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "z-input-message":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "z-list":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "z-list-element":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "z-list-group":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "z-tag":
+        case "z-popover":
             if (!customElements.get(tagName)) {
-                defineCustomElement$1();
+                customElements.define(tagName, ZPopover);
             }
             break;
     } });
 }
 
-export { ZSearchbar as Z, defineCustomElement as d };
+export { ZPopover as Z, defineCustomElement as d };
 
 //# sourceMappingURL=index24.js.map