npm - @zanichelli/albe-web-components - Versions diffs - 19.1.3 → 19.2.0 - Mend

@zanichelli/albe-web-components 19.1.3 → 19.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (835) hide show

package/dist/components/index23.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { O as OffCanvasVariant, u as TransitionDirection } from './index2.js';
+import { O as OffCanvasVariant, u as TransitionDirection, g as KeyboardCode } from './index2.js';
 const stylesCss = ".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);transform:translateX(0);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}.backdrop.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>.backdrop.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:var(--z-offcanvas--container-width, 375px);min-width:var(--z-offcanvas--container-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 ZOffcanvasStyle0 = stylesCss;
@@ -9,6 +9,8 @@ const ZOffcanvas = /*@__PURE__*/ proxyCustomElement(class ZOffcanvas extends HTM
         super();
         this.__registerHost();
         this.canvasOpenStatusChanged = createEvent(this, "canvasOpenStatusChanged", 7);
+        this.allFocusableElements = [];
+        this.previouslyFocusedElement = null;
         this.variant = OffCanvasVariant.PUSHCONTENT;
         this.open = false;
         this.transitiondirection = TransitionDirection.LEFT;
@@ -16,6 +18,65 @@ const ZOffcanvas = /*@__PURE__*/ proxyCustomElement(class ZOffcanvas extends HTM
         this.showBackdrop = true;
         this.skipAnimation = false;
     }
+    /**
+     * Returns all focusable elements inside the offcanvas content.
+     * Elements are considered focusable if:
+     * - They are not disabled
+     * - They are visible in the layout
+     * - They have a non-negative tabIndex or an explicit tabindex="0"
+     */
+    getFocusableElements() {
+        if (!this.canvasContent) {
+            return [];
+        }
+        const all = Array.from(this.canvasContent.querySelectorAll("*"));
+        return all.filter((el) => {
+            const tabindex = el.getAttribute("tabindex");
+            const isDisabled = el.hasAttribute("disabled");
+            const isHidden = el.offsetParent === null;
+            return !isDisabled && !isHidden && (el.tabIndex >= 0 || tabindex === "0");
+        });
+    }
+    /**
+     * Keeps keyboard navigation trapped inside the offcanvas when it is open.
+     * Implements circular tab navigation:
+     * - If Shift + Tab is pressed on the first focusable element, move focus to the last.
+     * - If Tab is pressed on the last focusable element, move focus to the first.
+     */
+    trapFocus(event) {
+        if (!this.allFocusableElements.length) {
+            return;
+        }
+        const first = this.allFocusableElements[0];
+        const last = this.allFocusableElements[this.allFocusableElements.length - 1];
+        const active = document.activeElement;
+        if (event.shiftKey && active === first) {
+            event.preventDefault();
+            last.focus();
+        }
+        if (!event.shiftKey && active === last) {
+            event.preventDefault();
+            first.focus();
+        }
+    }
+    /**
+     * Handles keyboard interactions when the offcanvas is open.
+     * - Closes the offcanvas when the Escape key is pressed.
+     * - Traps focus inside the component when the Tab key is used.
+     */
+    handleKeyDown(event) {
+        if (!this.open) {
+            return;
+        }
+        if (event.key === KeyboardCode.ESC) {
+            event.preventDefault();
+            this.open = false;
+            return;
+        }
+        if (event.key === KeyboardCode.TAB) {
+            this.trapFocus(event);
+        }
+    }
     /**
      * Stop the event default behavior and propagation when the offcanvas is closed.
      */
@@ -36,18 +97,29 @@ const ZOffcanvas = /*@__PURE__*/ proxyCustomElement(class ZOffcanvas extends HTM
         document.body.style[overflow] = this.open ? "hidden" : "";
     }
     onOpenChanged() {
-        var _a;
+        var _a, _b, _c;
         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
+        if (this.open) {
+            // Store the element that was focused before the offcanvas opens, this allows restoring the focus when the offcanvas closes.
+            this.previouslyFocusedElement = document.activeElement;
+            // Move focus inside the offcanvas once it is rendered.
+            if (this.allFocusableElements.length > 0) {
+                this.allFocusableElements[0].focus();
+            }
+            else {
+                (_a = this.canvasContent) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+            this.handlePageOverflow();
+        }
+        else {
+            // Restore focus to the element that was focused before the offcanvas was opened.
+            (_b = this.previouslyFocusedElement) === null || _b === void 0 ? void 0 : _b.focus();
+            // When the offcanvas is closing, wait for the transitionend event before restoring the page 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();
+            (_c = this.canvasContainer) === null || _c === void 0 ? void 0 : _c.addEventListener("transitionend", listenerCallback);
         }
     }
     componentWillLoad() {
@@ -60,6 +132,7 @@ const ZOffcanvas = /*@__PURE__*/ proxyCustomElement(class ZOffcanvas extends HTM
     }
     componentDidRender() {
         this.skipAnimation = false;
+        this.allFocusableElements = this.getFocusableElements();
     }
     connectedCallback() {
         this.handlePageOverflow();
@@ -68,8 +141,8 @@ const ZOffcanvas = /*@__PURE__*/ proxyCustomElement(class ZOffcanvas extends HTM
         this.open = false;
     }
     render() {
-        return (h(Host, { key: '52ce71415709ffe342802b789448fe168eef9d3d', "skip-animation": this.skipAnimation, "aria-hidden": !this.open ? "true" : null }, h("div", { key: '93173c6176acd24a8f02541b5becd3dfd7f98ac3', class: "canvas-container", role: "presentation", ref: (el) => (this.canvasContainer = el) }, h("div", { key: '82b36a24cbf7856d8f8ee17952e0cf733529f7ae', class: "canvas-content z-scrollbar", role: "presentation" }, h("slot", { key: 'e5281598686c2d0de459045ceaa81c1c31dbcd22', name: "canvasContent" }))), (this.variant == OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP) &&
-            this.showBackdrop && (h("div", { key: 'b912144f9bf525114394cd03f84f38f810c8cb29', class: "backdrop", onClick: () => (this.open = false) }))));
+        return (h(Host, { key: '8d7045110c92bf5ef1ef2f8d60ddaf1af55ace92', "skip-animation": this.skipAnimation, "aria-hidden": !this.open ? "true" : null }, h("div", { key: 'ef823ffd39a7f63aae8ef95333da611ec4485292', class: "canvas-container", role: "presentation", ref: (el) => (this.canvasContainer = el) }, h("div", { key: '7a6586d273275f1686fe0b1406d71e782d5d71c3', class: "canvas-content z-scrollbar", role: "presentation", ref: (el) => (this.canvasContent = el) }, h("slot", { key: '5930bb55687c9dd286828dc262c1f2cb18ebdd75', name: "canvasContent" }))), (this.variant == OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP) &&
+            this.showBackdrop && (h("div", { key: 'a65de1a8b0e92e0520d410a88c98edfe5bb56100', class: "backdrop", onClick: () => (this.open = false) }))));
     }
     static get watchers() { return {
         "variant": ["handlePageOverflow"],
@@ -83,7 +156,7 @@ const ZOffcanvas = /*@__PURE__*/ proxyCustomElement(class ZOffcanvas extends HTM
         "skipLoadAnimation": [4, "skip-load-animation"],
         "showBackdrop": [4, "show-backdrop"],
         "skipAnimation": [32]
-    }, [[2, "click", "stopEvent"], [2, "focusin", "stopEvent"]], {
+    }, [[4, "keydown", "handleKeyDown"], [2, "click", "stopEvent"], [2, "focusin", "stopEvent"]], {
         "variant": ["handlePageOverflow"],
         "open": ["onOpenChanged"]
     }]);

package/dist/components/index23.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"index23.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,mqFAAmqF,CAAC;AACtrF,yBAAe,SAAS;;MCcX,UAAU;;;;;uBASQ,gBAAgB,CAAC,WAAW;oBAIlD,KAAK;mCAOgC,mBAAmB,CAAC,IAAI;iCAQhD,KAAK;4BAIV,IAAI;6BAQK,KAAK;;;;;IAS7B,SAAS,CAAC,KAAY;QACpB,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,OAAO;SACR;QAED,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;KACzB;;;;IAMO,kBAAkB;QACxB,MAAM,QAAQ,GACZ,IAAI,CAAC,OAAO,KAAK,gBAAgB,CAAC,OAAO,IAAI,IAAI,CAAC,mBAAmB,KAAK,mBAAmB,CAAC,EAAE;cAC5F,YAAY;cACZ,YAAY,CAAC;QAEnB,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,IAAI,GAAG,QAAQ,GAAG,EAAE,CAAC;KAC3D;IAGD,aAAa;;QACX,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE7C,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;;YAEd,MAAM,gBAAgB,GAAG;gBACvB,IAAI,CAAC,kBAAkB,EAAE,CAAC;gBAC1B,IAAI,CAAC,eAAe,CAAC,mBAAmB,CAAC,eAAe,EAAE,gBAAgB,CAAC,CAAC;aAC7E,CAAC;YAEF,MAAA,IAAI,CAAC,eAAe,0CAAE,gBAAgB,CAAC,eAAe,EAAE,gBAAgB,CAAC,CAAC;SAC3E;aAAM;YACL,IAAI,CAAC,kBAAkB,EAAE,CAAC;SAC3B;KACF;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;SAC3B;KACF;IAED,gBAAgB;QACd,IAAI,CAAC,kBAAkB,EAAE,CAAC;KAC3B;IAED,kBAAkB;QAChB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;KAC5B;IAED,iBAAiB;QACf,IAAI,CAAC,kBAAkB,EAAE,CAAC;KAC3B;IAED,oBAAoB;QAClB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;KACnB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uEACa,IAAI,CAAC,aAAa,iBACrB,CAAC,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,IAAI,IAEvC,4DACE,KAAK,EAAC,kBAAkB,EACxB,IAAI,EAAC,cAAc,EACnB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC,IAExC,4DACE,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,cAAc,IAEnB,6DAAM,IAAI,EAAC,eAAe,GAAQ,CAC9B,CACF,EACL,CAAC,IAAI,CAAC,OAAO,IAAI,gBAAgB,CAAC,OAAO,IAAI,IAAI,CAAC,mBAAmB,KAAK,mBAAmB,CAAC,EAAE;YAC/F,IAAI,CAAC,YAAY,KACf,4DACE,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,OAAO,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,GAC7B,CACR,CACE,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/z-offcanvas/styles.css?tag=z-offcanvas&encapsulation=scoped","src/components/z-offcanvas/index.tsx"],"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 transform: translateX(0);\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.backdrop {\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]) > .backdrop {\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: var(--z-offcanvas--container-width, 375px);\n min-width: var(--z-offcanvas--container-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 {Component, Event, EventEmitter, h, Host, Listen, Prop, State, Watch} from \"@stencil/core\";\nimport {OffCanvasVariant, TransitionDirection} from \"../../beans\";\n\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 /\n@Component({\n tag: \"z-offcanvas\",\n styleUrl: \"styles.css\",\n shadow: false,\n scoped: true,\n})\nexport class ZOffcanvas {\n /\n 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.\n * Also, the `pushcontent` variant doesn't have the open/close transition.\n /\n @Prop({reflect: true})\n variant?: OffCanvasVariant = OffCanvasVariant.PUSHCONTENT;\n\n /* Whether the offcanvas is open. Default: false /\n @Prop({reflect: true, mutable: true})\n open = false;\n\n /\n Open the content transitioning to a specified direction.\n * The `up` direction always show the `overlay`, also when the variant is `pushcontent`.\n /\n @Prop({reflect: true})\n transitiondirection?: TransitionDirection = TransitionDirection.LEFT;\n\n /\n Skip the opening transition when the offcanvas is already open at the first render.\n * @deprecated This prop is not needed anymore, the component will automatically skip the transition\n * when it starts with `open` set to `true`. Only exists for Typescript backward compatibility.\n /\n @Prop()\n skipLoadAnimation = false;\n\n /* Whether to show the backdrop when the offcanvas is open. Default: true /\n @Prop()\n showBackdrop = true;\n\n /* emitted when `open` prop changes /\n @Event()\n canvasOpenStatusChanged: EventEmitter;\n\n /* Used to skip the opening transition when the offcanvas is already open at the first render. /\n @State()\n private skipAnimation = false;\n\n private canvasContainer: HTMLElement;\n\n /\n Stop the event default behavior and propagation when the offcanvas is closed.\n /\n @Listen(\"click\", {capture: true})\n @Listen(\"focusin\", {capture: true})\n stopEvent(event: Event): void {\n if (this.open) {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n }\n\n /\n Hide the body overflow when the offcanvas is open.\n */\n @Watch(\"variant\")\n private handlePageOverflow(): void {\n const overflow =\n this.variant === OffCanvasVariant.OVERLAY \|\| this.transitiondirection === TransitionDirection.UP\n ? \"overflow-y\"\n : \"overflow-x\";\n\n document.body.style[overflow] = this.open ? \"hidden\" : \"\";\n }\n\n @Watch(\"open\")\n onOpenChanged(): void {\n this.canvasOpenStatusChanged.emit(this.open);\n\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 = (): void => {\n this.handlePageOverflow();\n this.canvasContainer.removeEventListener(\"transitionend\", listenerCallback);\n };\n\n this.canvasContainer?.addEventListener(\"transitionend\", listenerCallback);\n } else {\n this.handlePageOverflow();\n }\n }\n\n componentWillLoad(): void {\n if (this.open) {\n this.skipAnimation = true;\n }\n }\n\n componentDidLoad(): void {\n this.handlePageOverflow();\n }\n\n componentDidRender(): void {\n this.skipAnimation = false;\n }\n\n connectedCallback(): void {\n this.handlePageOverflow();\n }\n\n disconnectedCallback(): void {\n this.open = false;\n }\n\n render(): HTMLZOffcanvasElement {\n return (\n <Host\n skip-animation={this.skipAnimation}\n aria-hidden={!this.open ? \"true\" : null}\n >\n <div\n class=\"canvas-container\"\n role=\"presentation\"\n ref={(el) => (this.canvasContainer = el)}\n >\n <div\n class=\"canvas-content z-scrollbar\"\n role=\"presentation\"\n >\n <slot name=\"canvasContent\"></slot>\n </div>\n </div>\n {(this.variant == OffCanvasVariant.OVERLAY \|\| this.transitiondirection === TransitionDirection.UP) &&\n this.showBackdrop && (\n <div\n class=\"backdrop\"\n onClick={() => (this.open = false)}\n ></div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"index23.js","mappings":"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","names":[],"sources":["src/components/z-offcanvas/styles.css?tag=z-offcanvas&encapsulation=scoped","src/components/z-offcanvas/index.tsx"],"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 transform: translateX(0);\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.backdrop {\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]) > .backdrop {\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: var(--z-offcanvas--container-width, 375px);\n min-width: var(--z-offcanvas--container-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 {Component, Event, EventEmitter, h, Host, Listen, Prop, State, Watch} from \"@stencil/core\";\nimport {KeyboardCode, OffCanvasVariant, TransitionDirection} from \"../../beans\";\n\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 /\n@Component({\n tag: \"z-offcanvas\",\n styleUrl: \"styles.css\",\n shadow: false,\n scoped: true,\n})\nexport class ZOffcanvas {\n /\n 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.\n * Also, the `pushcontent` variant doesn't have the open/close transition.\n /\n @Prop({reflect: true})\n variant?: OffCanvasVariant = OffCanvasVariant.PUSHCONTENT;\n\n /* Whether the offcanvas is open. Default: false /\n @Prop({reflect: true, mutable: true})\n open = false;\n\n /\n Open the content transitioning to a specified direction.\n * The `up` direction always show the `overlay`, also when the variant is `pushcontent`.\n /\n @Prop({reflect: true})\n transitiondirection?: TransitionDirection = TransitionDirection.LEFT;\n\n /\n Skip the opening transition when the offcanvas is already open at the first render.\n * @deprecated This prop is not needed anymore, the component will automatically skip the transition\n * when it starts with `open` set to `true`. Only exists for Typescript backward compatibility.\n /\n @Prop()\n skipLoadAnimation = false;\n\n /* Whether to show the backdrop when the offcanvas is open. Default: true /\n @Prop()\n showBackdrop = true;\n\n /* emitted when `open` prop changes /\n @Event()\n canvasOpenStatusChanged: EventEmitter;\n\n /* Used to skip the opening transition when the offcanvas is already open at the first render. /\n @State()\n private skipAnimation = false;\n\n private canvasContainer: HTMLElement;\n\n private canvasContent: HTMLElement;\n\n private allFocusableElements: HTMLElement[] = [];\n\n private previouslyFocusedElement: HTMLElement \| null = null;\n\n /\n Returns all focusable elements inside the offcanvas content.\n * Elements are considered focusable if:\n * - They are not disabled\n * - They are visible in the layout\n * - They have a non-negative tabIndex or an explicit tabindex=\"0\"\n /\n private getFocusableElements(): HTMLElement[] {\n if (!this.canvasContent) {\n return [];\n }\n\n const all = Array.from(this.canvasContent.querySelectorAll<HTMLElement>(\"\"));\n\n return all.filter((el) => {\n const tabindex = el.getAttribute(\"tabindex\");\n const isDisabled = el.hasAttribute(\"disabled\");\n const isHidden = el.offsetParent === null;\n\n return !isDisabled && !isHidden && (el.tabIndex >= 0 \|\| tabindex === \"0\");\n });\n }\n\n /*\n Keeps keyboard navigation trapped inside the offcanvas when it is open.\n * Implements circular tab navigation:\n * - If Shift + Tab is pressed on the first focusable element, move focus to the last.\n * - If Tab is pressed on the last focusable element, move focus to the first.\n /\n private trapFocus(event: KeyboardEvent): void {\n if (!this.allFocusableElements.length) {\n return;\n }\n\n const first = this.allFocusableElements[0];\n const last = this.allFocusableElements[this.allFocusableElements.length - 1];\n const active = document.activeElement as HTMLElement;\n\n if (event.shiftKey && active === first) {\n event.preventDefault();\n last.focus();\n }\n\n if (!event.shiftKey && active === last) {\n event.preventDefault();\n first.focus();\n }\n }\n\n /\n Handles keyboard interactions when the offcanvas is open.\n * - Closes the offcanvas when the Escape key is pressed.\n * - Traps focus inside the component when the Tab key is used.\n /\n @Listen(\"keydown\", {target: \"document\"})\n handleKeyDown(event: KeyboardEvent): void {\n if (!this.open) {\n return;\n }\n\n if (event.key === KeyboardCode.ESC) {\n event.preventDefault();\n this.open = false;\n\n return;\n }\n\n if (event.key === KeyboardCode.TAB) {\n this.trapFocus(event);\n }\n }\n\n /\n Stop the event default behavior and propagation when the offcanvas is closed.\n /\n @Listen(\"click\", {capture: true})\n @Listen(\"focusin\", {capture: true})\n stopEvent(event: Event): void {\n if (this.open) {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n }\n\n /\n Hide the body overflow when the offcanvas is open.\n */\n @Watch(\"variant\")\n private handlePageOverflow(): void {\n const overflow =\n this.variant === OffCanvasVariant.OVERLAY \|\| this.transitiondirection === TransitionDirection.UP\n ? \"overflow-y\"\n : \"overflow-x\";\n\n document.body.style[overflow] = this.open ? \"hidden\" : \"\";\n }\n\n @Watch(\"open\")\n onOpenChanged(): void {\n this.canvasOpenStatusChanged.emit(this.open);\n\n if (this.open) {\n // Store the element that was focused before the offcanvas opens, this allows restoring the focus when the offcanvas closes.\n this.previouslyFocusedElement = document.activeElement as HTMLElement;\n\n // Move focus inside the offcanvas once it is rendered.\n if (this.allFocusableElements.length > 0) {\n this.allFocusableElements[0].focus();\n } else {\n this.canvasContent?.focus();\n }\n\n this.handlePageOverflow();\n } else {\n // Restore focus to the element that was focused before the offcanvas was opened.\n this.previouslyFocusedElement?.focus();\n\n // When the offcanvas is closing, wait for the transitionend event before restoring the page overflow.\n const listenerCallback = (): void => {\n this.handlePageOverflow();\n this.canvasContainer.removeEventListener(\"transitionend\", listenerCallback);\n };\n\n this.canvasContainer?.addEventListener(\"transitionend\", listenerCallback);\n }\n }\n\n componentWillLoad(): void {\n if (this.open) {\n this.skipAnimation = true;\n }\n }\n\n componentDidLoad(): void {\n this.handlePageOverflow();\n }\n\n componentDidRender(): void {\n this.skipAnimation = false;\n this.allFocusableElements = this.getFocusableElements();\n }\n\n connectedCallback(): void {\n this.handlePageOverflow();\n }\n\n disconnectedCallback(): void {\n this.open = false;\n }\n\n render(): HTMLZOffcanvasElement {\n return (\n <Host\n skip-animation={this.skipAnimation}\n aria-hidden={!this.open ? \"true\" : null}\n >\n <div\n class=\"canvas-container\"\n role=\"presentation\"\n ref={(el) => (this.canvasContainer = el)}\n >\n <div\n class=\"canvas-content z-scrollbar\"\n role=\"presentation\"\n ref={(el) => (this.canvasContent = el)}\n >\n <slot name=\"canvasContent\"></slot>\n </div>\n </div>\n {(this.variant == OffCanvasVariant.OVERLAY \|\| this.transitiondirection === TransitionDirection.UP) &&\n this.showBackdrop && (\n <div\n class=\"backdrop\"\n onClick={() => (this.open = false)}\n ></div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/index24.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { P as PopoverPosition, g as KeyboardCode, p as Device } from './index2.js';
 import { a as containsElement, i as getParentElement, j as findContainingBlockAncestor, g as getDevice, k as isElementVisibleInContainer } from './utils.js';
-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])::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 stylesCss = ":host{position:fixed;display:none;max-width:calc(100dvw - var(--grid-margin) * 2);max-height:calc(100dvh - 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 ZPopover = /*@__PURE__*/ proxyCustomElement(class ZPopover extends HTMLElement {
@@ -24,6 +24,7 @@ const ZPopover = /*@__PURE__*/ proxyCustomElement(class ZPopover extends HTMLEle
     }
     closePopoverWithKeyboard(e) {
         if (this.closable && e.key === KeyboardCode.ESC) {
+            e.stopPropagation();
             this.open = false;
         }
     }
@@ -254,7 +255,7 @@ const ZPopover = /*@__PURE__*/ proxyCustomElement(class ZPopover extends HTMLEle
             if (parent === element.ownerDocument.documentElement) {
                 return parent;
             }
-            const style = window.getComputedStyle(parent);
+            const style = getComputedStyle(parent);
             const { overflow, overflowX, overflowY } = style;
             const hasHiddenOverflow = overflow === "hidden" || overflowY === "hidden" || overflowX === "hidden";
             const isScrollable = (parent.scrollHeight > parent.clientHeight && overflow !== "visible" && overflowY !== "visible") ||
@@ -356,11 +357,14 @@ const ZPopover = /*@__PURE__*/ proxyCustomElement(class ZPopover extends HTMLEle
         const boundElementWidth = this.boundElement.offsetWidth;
         const boundElementHeight = this.boundElement.offsetHeight;
         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. */
+        /**
+         * 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;
-        /** Gap between the popover and the bound element. */
-        const distanceFromBound = parseInt(hostStyle.getPropertyValue("--space-unit")) || 8;
+        /** Gap between the popover and the bound element, set as margin in CSS. */
+        const distanceFromBound = parseFloat(getComputedStyle(this.host).marginTop.replace("px", "")) || 0;
         const positionOffsets = this.computePositionOffsets();
         /**
          * Precomputed bases to reduce repeated arithmetic in the switch below.
@@ -377,7 +381,7 @@ const ZPopover = /*@__PURE__*/ proxyCustomElement(class ZPopover extends HTMLEle
         switch (position) {
             case PopoverPosition.TOP:
             case PopoverPosition.TOP_RIGHT:
-                hostStyle.bottom = `${bottomBase + distanceFromBound}px`;
+                hostStyle.bottom = `${bottomBase}px`;
                 hostStyle.left = `${leftBase - (position === PopoverPosition.TOP_RIGHT ? arrowModifier : 0)}px`;
                 maxHeight = availableSpace.top - distanceFromBound;
                 if (position === PopoverPosition.TOP_RIGHT) {
@@ -386,13 +390,13 @@ const ZPopover = /*@__PURE__*/ proxyCustomElement(class ZPopover extends HTMLEle
                 break;
             case PopoverPosition.TOP_LEFT:
                 hostStyle.right = `${rightBase - arrowModifier}px`;
-                hostStyle.bottom = `${bottomBase + distanceFromBound}px`;
+                hostStyle.bottom = `${bottomBase}px`;
                 maxWidth = availableSpace.left + boundElementWidth * offsetModifier;
                 maxHeight = availableSpace.top - distanceFromBound;
                 break;
             case PopoverPosition.BOTTOM:
             case PopoverPosition.BOTTOM_RIGHT:
-                hostStyle.top = `${topBase + distanceFromBound}px`;
+                hostStyle.top = `${topBase}px`;
                 hostStyle.left = `${leftBase - (position === PopoverPosition.BOTTOM_RIGHT ? arrowModifier : 0)}px`;
                 maxHeight = availableSpace.bottom - distanceFromBound;
                 if (position === PopoverPosition.BOTTOM_RIGHT) {
@@ -400,7 +404,7 @@ const ZPopover = /*@__PURE__*/ proxyCustomElement(class ZPopover extends HTMLEle
                 }
                 break;
             case PopoverPosition.BOTTOM_LEFT:
-                hostStyle.top = `${topBase + distanceFromBound}px`;
+                hostStyle.top = `${topBase}px`;
                 hostStyle.right = `${rightBase - arrowModifier}px`;
                 maxWidth = availableSpace.left + boundElementWidth * offsetModifier;
                 maxHeight = availableSpace.bottom - distanceFromBound;
@@ -408,7 +412,7 @@ const ZPopover = /*@__PURE__*/ proxyCustomElement(class ZPopover extends HTMLEle
             case PopoverPosition.RIGHT:
             case PopoverPosition.RIGHT_BOTTOM:
                 hostStyle.top = `${sideTopBase - (position === PopoverPosition.RIGHT_BOTTOM ? arrowModifier : 0)}px`;
-                hostStyle.left = `${positionOffsets.left + boundElementWidth + distanceFromBound}px`;
+                hostStyle.left = `${positionOffsets.left + boundElementWidth}px`;
                 maxWidth = availableSpace.right - distanceFromBound;
                 if (position === PopoverPosition.RIGHT) {
                     maxHeight = availableSpace.top + availableSpace.bottom + boundElementHeight;
@@ -419,21 +423,21 @@ const ZPopover = /*@__PURE__*/ proxyCustomElement(class ZPopover extends HTMLEle
                 break;
             case PopoverPosition.RIGHT_TOP:
                 hostStyle.bottom = `${sideBottomBase - arrowModifier}px`;
-                hostStyle.left = `${positionOffsets.left + boundElementWidth + distanceFromBound}px`;
+                hostStyle.left = `${positionOffsets.left + boundElementWidth}px`;
                 maxWidth = availableSpace.right - distanceFromBound;
                 maxHeight = availableSpace.top + boundElementHeight * offsetModifier;
                 break;
             case PopoverPosition.LEFT:
             case PopoverPosition.LEFT_BOTTOM:
                 hostStyle.top = `${sideTopBase - (position === PopoverPosition.LEFT_BOTTOM ? arrowModifier : 0)}px`;
-                hostStyle.right = `${positionOffsets.right + boundElementWidth + distanceFromBound}px`;
+                hostStyle.right = `${positionOffsets.right + boundElementWidth}px`;
                 maxWidth = availableSpace.left - distanceFromBound;
                 if (position === PopoverPosition.LEFT_BOTTOM) {
                     maxHeight = availableSpace.bottom + boundElementHeight * offsetModifier;
                 }
                 break;
             case PopoverPosition.LEFT_TOP:
-                hostStyle.right = `${positionOffsets.right + boundElementWidth + distanceFromBound}px`;
+                hostStyle.right = `${positionOffsets.right + boundElementWidth}px`;
                 hostStyle.bottom = `${sideBottomBase - arrowModifier}px`;
                 maxWidth = availableSpace.left - distanceFromBound;
                 maxHeight = availableSpace.top + boundElementHeight * offsetModifier;
@@ -489,7 +493,7 @@ const ZPopover = /*@__PURE__*/ proxyCustomElement(class ZPopover extends HTMLEle
         cancelAnimationFrame(this.animationFrameRequestId);
     }
     render() {
-        return (h(Host, { key: 'a778d9679d27ca18fe92eab0f596a86cb904a49f', "current-position": this.currentPosition }, h("slot", { key: 'de51304770f9f501a10ca26232448a31482da68d' })));
+        return (h(Host, { key: '83d24ed11a01f0ff29486a6c2e3a3716960d44a1', "current-position": this.currentPosition }, h("slot", { key: '7c048c564bc76ee6dda7df4dfb55eb80c5b5ebae' })));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -506,7 +510,7 @@ const ZPopover = /*@__PURE__*/ proxyCustomElement(class ZPopover extends HTMLEle
         "center": [516],
         "closable": [4],
         "currentPosition": [32]
-    }, [[8, "keyup", "closePopoverWithKeyboard"], [18, "click", "handleOutsideClick"]], {
+    }, [[10, "keyup", "closePopoverWithKeyboard"], [18, "click", "handleOutsideClick"]], {
         "position": ["validatePosition"],
         "open": ["onOpen"],
         "bindTo": ["onBindingChange"]

package/dist/components/index24.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"index24.js","mappings":"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","names":[],"sources":["src/components/z-popover/styles.css?tag=z-popover&encapsulation=shadow","src/components/z-popover/index.tsx"],"sourcesContent":[":host {\n --z-popover-theme--surface: ;\n --z-popover-theme--text: ;\n --z-popover-padding: ;\n --z-popover-shadow-filter: ;\n\n position: fixed;\n display: none;\n max-width: calc(100% - var(--grid-margin) * 2);\n max-height: calc(100% - var(--grid-margin) * 2);\n padding: var(--z-popover-padding, 0);\n background: var(--z-popover-theme--surface, var(--color-surface01));\n border-radius: var(--border-radius-small);\n color: var(--z-popover-theme--text, var(--color-default-text));\n fill: currentcolor;\n filter: var(--z-popover-shadow-filter, drop-shadow(0 1px 2px var(--shadow-color-base)));\n text-align: center;\n visibility: hidden; /* hidden by default. the positioning algorithm will set it to 'visible' when needed /\n}\n\n:host([open]:not([open=\"false\"])[current-position]) {\n display: block;\n}\n\n:host([center][current-position=\"top\"]),\n:host([center][current-position=\"bottom\"]) {\n transform: translateX(-50%);\n}\n\n:host([center][current-position=\"right\"]),\n:host([center][current-position=\"left\"]) {\n transform: translateY(-50%);\n}\n\n/ Arrow style /\n\n:host([current-position])::before {\n --arrow-size: 6px;\n --arrow-edge-offset: calc(100% - var(--space-unit) - (var(--arrow-size) / 2));\n --arrow-center-x-offset: calc(50% - (var(--arrow-size) / 2));\n --arrow-center-y-offset: calc(100% - (var(--arrow-size) / 2));\n\n position: absolute;\n display: block;\n width: var(--arrow-size);\n height: var(--arrow-size);\n background: var(--z-popover-theme--surface, var(--color-surface01));\n content: \"\";\n transform: rotate(45deg);\n}\n\n:host([show-arrow=\"false\"])::before,\n:host(:not([show-arrow]))::before {\n display: none;\n}\n\n:host([current-position^=\"top\"])::before {\n top: var(--arrow-center-y-offset);\n}\n\n:host([current-position^=\"bottom\"])::before {\n bottom: var(--arrow-center-y-offset);\n}\n\n:host([current-position=\"top\"])::before,\n:host([current-position=\"bottom\"])::before {\n right: var(--arrow-edge-offset);\n}\n\n:host([current-position=\"right\"])::before,\n:host([current-position=\"left\"])::before {\n bottom: var(--arrow-edge-offset);\n}\n\n:host([current-position=\"right\"])::before {\n right: var(--arrow-center-y-offset);\n}\n\n:host([current-position=\"left\"])::before {\n left: var(--arrow-center-y-offset);\n}\n\n:host([current-position=\"top_right\"])::before,\n:host([current-position=\"bottom_right\"])::before {\n right: var(--arrow-edge-offset);\n}\n\n:host([current-position=\"top_left\"])::before,\n:host([current-position=\"bottom_left\"])::before {\n left: var(--arrow-edge-offset);\n}\n\n:host([current-position=\"right_top\"])::before,\n:host([current-position=\"left_top\"])::before {\n top: var(--arrow-edge-offset);\n}\n\n:host([current-position=\"right_top\"])::before,\n:host([current-position=\"right_bottom\"])::before {\n right: var(--arrow-center-y-offset);\n}\n\n:host([current-position=\"left_top\"])::before,\n:host([current-position=\"left_bottom\"])::before {\n left: var(--arrow-center-y-offset);\n}\n\n:host([current-position=\"right_bottom\"])::before,\n:host([current-position=\"left_bottom\"])::before {\n bottom: var(--arrow-edge-offset);\n}\n\n:host([center][current-position=\"top\"])::before,\n:host([center][current-position=\"bottom\"])::before {\n right: auto;\n left: var(--arrow-center-x-offset);\n}\n\n:host([center][current-position=\"right\"])::before,\n:host([center][current-position=\"left\"])::before {\n top: var(--arrow-center-x-offset);\n bottom: auto;\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {Device, KeyboardCode, PopoverPosition} from \"../../beans\";\nimport {\n containsElement,\n findContainingBlockAncestor,\n getDevice,\n getParentElement,\n isElementVisibleInContainer,\n} from \"../../utils/utils\";\n\n/* Centering offset modifier. 0 for no offset, 0.5 for centering. /\ntype OffsetModifier = 0 \| 0.5;\ntype Offsets = {top: number; right: number; bottom: number; left: number};\n\n/\n Popover component.\n * This component displays a popover bound to an element.\n * It supports various positions and can automatically adjust it based on available space, accounting for scrollable containers.\n \n Notes:\n * - If positioning has an odd behavior, consider manually adjusting the size of the slotted elements (using `width`, `height`, `max-width`, `max-height`, etc...) when its content is \"fluid\" (like text), because it can interfere with the position calculation (for example a long text on one single line can be bigger than the available space, letting the algorithm think the popover doesn't fits).\n \n @cssprop --z-popover-theme--surface - background color of the popover.\n * @cssprop --z-popover-theme--text - foreground color of the popover.\n * @cssprop --z-popover-padding - padding of the popover.\n * @cssprop --z-popover-shadow-filter - drop-shadow filter of the popover. Defaults to `drop-shadow(0 1px 2px var(--shadow-color-base))`.\n /\n@Component({\n tag: \"z-popover\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZPopover {\n /\n The preferred position to render the popover.\n * The popover will automatically search another position if not enough space is available for the preferred position.\n * If the preferred position is not available, it will try to find the best position starting from `TOP` and going clockwise.\n /\n @Prop({reflect: true, mutable: true})\n position?: PopoverPosition = PopoverPosition.TOP;\n\n /\n The initial open state of the popover.\n * Internal changes of this prop are emitted through the `openChange` event.\n * Make sure to listen to that event if you need the updated state of the popover from the outside, to avoid inconsistent values.\n /\n @Prop({reflect: true, mutable: true})\n open = false;\n\n /\n The selector or the element bound with the popover.\n * If string css selector is provided make sure to use a valid selector.\n /\n @Prop()\n bindTo?: string \| HTMLElement;\n\n /* Whether to show popover's arrow. /\n @Prop({reflect: true})\n showArrow = false;\n\n /* Whether to center the popup on the main side (according to \"position\"). /\n @Prop({reflect: true})\n center = false;\n\n /\n If true, the popover can be closed by clicking outside of it or pressing the escape key.\n * Otherwise, it will be closed only programmatically (by setting `open` to `false`).\n /\n @Prop()\n closable = true;\n\n /\n The current position of the popover.\n * It differs from `position` only when calculated automatically for space reasons.\n /\n @State()\n currentPosition?: PopoverPosition;\n\n @Element() host: HTMLZPopoverElement;\n\n // Clockwise order of positions.\n private static readonly positionOrder: PopoverPosition[] = [\n PopoverPosition.TOP,\n PopoverPosition.TOP_RIGHT,\n PopoverPosition.TOP_LEFT,\n PopoverPosition.RIGHT,\n PopoverPosition.RIGHT_BOTTOM,\n PopoverPosition.RIGHT_TOP,\n PopoverPosition.BOTTOM,\n PopoverPosition.BOTTOM_LEFT,\n PopoverPosition.BOTTOM_RIGHT,\n PopoverPosition.LEFT,\n PopoverPosition.LEFT_TOP,\n PopoverPosition.LEFT_BOTTOM,\n ] as const;\n\n private animationFrameRequestId?: number;\n\n /* space tolerance for space calculations /\n private readonly spaceTolerance = 3;\n\n /* The element bound to the popover. /\n private boundElement?: HTMLElement;\n\n /* Cached available space around the bound element to avoid unnecessary recalculations /\n private cachedAvailableSpace?: Offsets;\n\n /* Last bounding rect of the bound element to detect changes and eventually invalidate the caches. /\n private lastBoundRect?: DOMRect;\n\n /* Fired when the position changes. /\n @Event()\n positionChange: EventEmitter;\n\n /* Open change event. /\n @Event()\n openChange: EventEmitter;\n\n @Listen(\"keyup\", {target: \"window\"})\n closePopoverWithKeyboard(e: KeyboardEvent): void {\n if (this.closable && e.key === KeyboardCode.ESC) {\n this.open = false;\n }\n }\n\n /\n Close the popover when clicking outside of its content.\n * Stop event propagation if the click was fired by popover's trigger element,\n * to prevent close and reopen glitches.\n /\n @Listen(\"click\", {target: \"body\", capture: true})\n handleOutsideClick(e: MouseEvent): void {\n const target = e.target as Element;\n if (!this.closable \|\| !this.open \|\| containsElement(this.host, target)) {\n return;\n }\n\n if (containsElement(this.boundElement, target)) {\n // stop propagation if the click was on the trigger element to prevent close and reopen glitches\n e.stopPropagation();\n }\n this.open = false;\n }\n\n @Watch(\"position\")\n validatePosition(newValue: PopoverPosition): void {\n if (!Object.values(PopoverPosition).includes(newValue as PopoverPosition) \|\| newValue === PopoverPosition.AUTO) {\n newValue = PopoverPosition.TOP;\n this.position = newValue;\n }\n this.currentPosition = newValue;\n if (this.open) {\n this.setPosition();\n }\n }\n\n /* Setup popover behaviors when `open` changes. /\n @Watch(\"open\")\n onOpen(): void {\n cancelAnimationFrame(this.animationFrameRequestId);\n this.openChange.emit({open: this.open});\n if (!this.open) {\n Object.assign(this.host.style, {\n // Reset all positioning properties\n top: \"auto\",\n right: \"auto\",\n bottom: \"auto\",\n left: \"auto\",\n maxWidth: \"\",\n maxHeight: \"\",\n // Set initial visibility to hidden while calculating position...\n visibility: \"hidden\",\n });\n this.currentPosition = undefined;\n\n return;\n }\n\n const updatePositionLoop = (): void => {\n if (!this.open) {\n return;\n }\n\n this.setPosition();\n this.animationFrameRequestId = requestAnimationFrame(updatePositionLoop);\n };\n\n // call `setPosition` after a tick to ensure the DOM is ready and sizes are available\n setTimeout(() => {\n updatePositionLoop();\n }, 0);\n }\n\n @Watch(\"bindTo\")\n onBindingChange(): void {\n this.findBoundElement();\n }\n\n /* Returns the offset modifier to use in calculations to align the popover with the bound element. /\n private get offsetModifier(): OffsetModifier {\n return this.center ? 0.5 : 0;\n }\n\n private findBoundElement(): void {\n if (typeof this.bindTo === \"string\") {\n this.boundElement = this.host.ownerDocument.querySelector(this.bindTo) as HTMLElement;\n } else if (this.bindTo) {\n this.boundElement = this.bindTo;\n } else {\n this.boundElement = getParentElement(this.host) as HTMLElement;\n if (this.boundElement.tagName.toLowerCase() === \"z-tooltip\") {\n // If the popover is used inside a tooltip without a specified `bindTo`, bind it to the parent of the tooltip.\n this.boundElement = getParentElement(this.boundElement) as HTMLElement;\n }\n }\n }\n\n /\n Check if element has enough space to the right and left to be centered.\n * Used for `TOP` and `BOTTOM` position.\n * When `center` is not enabled, only one side needs to be checked and `RIGHT` is the default.\n /\n private hasCenteredHorizontalSpace(\n availableLeft: number,\n availableRight: number,\n hostWidth: number,\n boundElementWidth: number\n ): boolean {\n const requiredSideSpace = (hostWidth - boundElementWidth) (1 - this.offsetModifier);\n\n if (!this.center) {\n return availableRight >= requiredSideSpace - this.spaceTolerance;\n }\n\n return (\n availableRight >= requiredSideSpace - this.spaceTolerance &&\n availableLeft >= requiredSideSpace - this.spaceTolerance\n );\n }\n\n /*\n Check if element has enough space to the top and bottom to be centered.\n * Used for `RIGHT` and `LEFT` position.\n * When `center` is not enabled, only one side needs to be checked and `BOTTOM` is the default.\n /\n private hasCenteredVerticalSpace(\n availableTop: number,\n availableBottom: number,\n hostHeight: number,\n boundElementHeight: number\n ): boolean {\n const requiredSideSpace = (hostHeight - boundElementHeight) (1 - this.offsetModifier);\n\n if (!this.center) {\n return availableBottom >= requiredSideSpace - this.spaceTolerance;\n }\n\n return (\n availableTop >= requiredSideSpace - this.spaceTolerance &&\n availableBottom >= requiredSideSpace - this.spaceTolerance\n );\n }\n\n /*\n Check if there is enough space in the given direction to fit the popover.\n * Used for composed positions like TOP_RIGHT, LEFT_BOTTOM, etc.\n /\n private hasEnoughSideSpace(\n availableSpace: number,\n hostSize: number,\n boundElementSize: number,\n offsetModifier: OffsetModifier\n ): boolean {\n return availableSpace >= hostSize - boundElementSize (1 - offsetModifier) - this.spaceTolerance;\n }\n\n /*\n Given a desired position and available space around the bound element, returns the best position\n * that fits the popover, trying all positions if needed.\n * Takes into account offsetModifier for centering.\n * @param desiredPosition The desired position of the popover.\n * @param availableSpace The available space around the bound element.\n /\n private getOptimalPopoverPosition(desiredPosition: PopoverPosition, availableSpace: Offsets): PopoverPosition {\n const hostWidth = this.host.offsetWidth;\n const hostHeight = this.host.offsetHeight;\n const boundElementWidth = this.boundElement.getBoundingClientRect().width;\n const boundElementHeight = this.boundElement.getBoundingClientRect().height;\n const offsetModifier = this.offsetModifier;\n\n /* Check if there is enough space to fit the popover in the desired position /\n const fits = (pos: PopoverPosition): boolean => {\n switch (pos) {\n case PopoverPosition.TOP:\n return (\n availableSpace.top >= hostHeight - this.spaceTolerance &&\n this.hasCenteredHorizontalSpace(availableSpace.left, availableSpace.right, hostWidth, boundElementWidth)\n );\n case PopoverPosition.TOP_RIGHT:\n return (\n availableSpace.top >= hostHeight &&\n this.hasEnoughSideSpace(availableSpace.right, hostWidth, boundElementWidth, offsetModifier)\n );\n case PopoverPosition.TOP_LEFT:\n return (\n availableSpace.top >= hostHeight &&\n this.hasEnoughSideSpace(availableSpace.left, hostWidth, boundElementWidth, offsetModifier)\n );\n case PopoverPosition.RIGHT:\n return (\n availableSpace.right >= hostWidth &&\n this.hasCenteredVerticalSpace(availableSpace.top, availableSpace.bottom, hostHeight, boundElementHeight)\n );\n case PopoverPosition.RIGHT_BOTTOM:\n return (\n availableSpace.right >= hostWidth &&\n this.hasEnoughSideSpace(availableSpace.bottom, hostHeight, boundElementHeight, offsetModifier)\n );\n case PopoverPosition.RIGHT_TOP:\n return (\n availableSpace.right >= hostWidth &&\n this.hasEnoughSideSpace(availableSpace.top, hostHeight, boundElementHeight, offsetModifier)\n );\n case PopoverPosition.BOTTOM:\n return (\n availableSpace.bottom >= hostHeight &&\n this.hasCenteredHorizontalSpace(availableSpace.left, availableSpace.right, hostWidth, boundElementWidth)\n );\n case PopoverPosition.BOTTOM_LEFT:\n return (\n availableSpace.bottom >= hostHeight &&\n this.hasEnoughSideSpace(availableSpace.left, hostWidth, boundElementWidth, offsetModifier)\n );\n case PopoverPosition.BOTTOM_RIGHT:\n return (\n availableSpace.bottom >= hostHeight &&\n this.hasEnoughSideSpace(availableSpace.right, hostWidth, boundElementWidth, offsetModifier)\n );\n case PopoverPosition.LEFT:\n return (\n availableSpace.left >= hostWidth &&\n this.hasCenteredVerticalSpace(availableSpace.top, availableSpace.bottom, hostHeight, boundElementHeight)\n );\n case PopoverPosition.LEFT_TOP:\n return (\n availableSpace.left >= hostWidth &&\n this.hasEnoughSideSpace(availableSpace.top, hostHeight, boundElementHeight, offsetModifier)\n );\n case PopoverPosition.LEFT_BOTTOM:\n return (\n availableSpace.left >= hostWidth &&\n this.hasEnoughSideSpace(availableSpace.bottom, hostHeight, boundElementHeight, offsetModifier)\n );\n\n default:\n return false;\n }\n };\n\n // Check desired position first\n if (fits(desiredPosition)) {\n return desiredPosition;\n }\n\n // Find position index and create rotation starting from next position\n const positions = ZPopover.positionOrder;\n const startIndex = positions.indexOf(desiredPosition);\n\n if (startIndex === -1) {\n return desiredPosition; // fallback if position not found\n }\n\n // Try all other positions starting from the next one\n for (let i = 1; i < positions.length; i++) {\n const posIndex = (startIndex + i) % positions.length;\n const pos = positions[posIndex];\n if (fits(pos)) {\n return pos;\n }\n }\n\n return this.findBestFallbackPosition(availableSpace);\n }\n\n /* Find the best fallback position based on available space when no position fits perfectly. /\n private findBestFallbackPosition(availableSpace: Offsets): PopoverPosition {\n // Determine which horizontal and vertical direction has the most available space\n const bestHorizontalDirection =\n availableSpace.right >= availableSpace.left ? PopoverPosition.RIGHT : PopoverPosition.LEFT;\n\n const bestVerticalDirection =\n availableSpace.bottom >= availableSpace.top ? PopoverPosition.BOTTOM : PopoverPosition.TOP;\n\n // Choose the main direction based on which axis has more space overall\n const maxHorizontalSpace = Math.max(availableSpace.right, availableSpace.left);\n const maxVerticalSpace = Math.max(availableSpace.bottom, availableSpace.top);\n\n const mainDirection = maxVerticalSpace >= maxHorizontalSpace ? bestVerticalDirection : bestHorizontalDirection;\n\n // Decide if a secondary direction is needed\n // Only add a secondary direction if the difference between min and max in that axis is at least double\n let needsSecondaryDirection = false;\n\n if (mainDirection === bestVerticalDirection) {\n // If main direction is vertical, check horizontal space difference\n const minHorizontalSpace = Math.min(availableSpace.right, availableSpace.left);\n needsSecondaryDirection = maxHorizontalSpace >= minHorizontalSpace 2;\n } else {\n // If main direction is horizontal, check vertical space difference\n const minVerticalSpace = Math.min(availableSpace.bottom, availableSpace.top);\n needsSecondaryDirection = maxVerticalSpace >= minVerticalSpace * 2;\n }\n\n if (!needsSecondaryDirection) {\n return mainDirection;\n }\n\n const secondaryDirection =\n mainDirection === bestVerticalDirection ? bestHorizontalDirection : bestVerticalDirection;\n\n // Return a combined position (e.g., \"bottom_right\")\n return `${mainDirection}_${secondaryDirection}` as PopoverPosition;\n }\n\n /*\n Find the nearest scrollable ancestor of an element to take as a reference for positioning.\n * The ancestor is considered scrollable if it doesn't have `overflow` property set to `hidden` and its scroll size is bigger than its client size.\n /\n private findScrollableAncestor(element: HTMLElement): HTMLElement {\n let parent = getParentElement(element);\n\n while (parent) {\n if (parent === element.ownerDocument.documentElement) {\n return parent as HTMLElement;\n }\n\n const style = window.getComputedStyle(parent);\n const {overflow, overflowX, overflowY} = style;\n const hasHiddenOverflow = overflow === \"hidden\" \|\| overflowY === \"hidden\" \|\| overflowX === \"hidden\";\n const isScrollable =\n (parent.scrollHeight > parent.clientHeight && overflow !== \"visible\" && overflowY !== \"visible\") \|\|\n (parent.scrollWidth > parent.clientWidth && overflow !== \"visible\" && overflowX !== \"visible\");\n\n if (!hasHiddenOverflow && isScrollable) {\n return parent as HTMLElement;\n }\n\n parent = getParentElement(parent);\n }\n\n return element.ownerDocument.documentElement;\n }\n\n /\n Calculate available space around the element bound with the popover, based on its nearest scrollable ancestor.\n \n Calculations for `right` and `bottom` can be a little bit confusing because `boundingRect.right` and `bottom` may not be what you expect...\n * For more information see the explanation in the docs.\n * @link https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect#return_value\n /\n private calculateAvailableSpace(): Offsets {\n const boundElementRect = this.boundElement.getBoundingClientRect();\n\n if (\n this.lastBoundRect &&\n this.lastBoundRect.x === boundElementRect.x &&\n this.lastBoundRect.y === boundElementRect.y &&\n this.lastBoundRect.width === boundElementRect.width &&\n this.lastBoundRect.height === boundElementRect.height &&\n this.cachedAvailableSpace\n ) {\n // If the bound element's rect hasn't changed, return the cached rect\n return this.cachedAvailableSpace;\n }\n\n this.lastBoundRect = boundElementRect;\n const scrollableAncestor = this.findScrollableAncestor(this.boundElement);\n const scrollableAncestorRect = scrollableAncestor.getBoundingClientRect();\n const isScrollableAncestorNested = scrollableAncestor !== this.boundElement.ownerDocument.documentElement;\n const documentWidth = this.boundElement.ownerDocument.documentElement.clientWidth;\n const documentHeight = this.boundElement.ownerDocument.documentElement.clientHeight;\n const safeSpace = 8; // extra space to avoid popover being too close to the edges\n\n // These deltas represent the offset between the scrollable ancestor and the viewport.\n // They are used to adjust the available space calculations when the scrollable ancestor is not the document or body,\n // to try to fit the popover inside the scrollable ancestor.\n const deltaTop = isScrollableAncestorNested ? scrollableAncestorRect.top : 0;\n const deltaRight = isScrollableAncestorNested ? documentWidth - scrollableAncestorRect.right : 0;\n const deltaBottom = isScrollableAncestorNested ? documentHeight - scrollableAncestorRect.bottom : 0;\n const deltaLeft = isScrollableAncestorNested ? scrollableAncestorRect.left : 0;\n\n this.cachedAvailableSpace = {\n top: boundElementRect.top - deltaTop - safeSpace,\n right: documentWidth - boundElementRect.right - deltaRight - safeSpace,\n bottom: documentHeight - boundElementRect.bottom - deltaBottom - safeSpace,\n left: boundElementRect.left - deltaLeft - safeSpace,\n };\n\n return this.cachedAvailableSpace;\n }\n\n /* Calculate the space around the bound element relative to the viewport. /\n private getBoundElementOffsets(): Offsets {\n const elementRect = this.boundElement.getBoundingClientRect();\n const documentWidth = this.boundElement.ownerDocument.documentElement.clientWidth;\n const documentHeight = this.boundElement.ownerDocument.documentElement.clientHeight;\n\n return {\n top: elementRect.top,\n right: documentWidth - elementRect.right,\n bottom: documentHeight - elementRect.bottom,\n left: elementRect.left,\n };\n }\n\n /* Compute positioning offsets in the appropriate coordinate space, accounting for transformed containing blocks and scroll. /\n private computePositionOffsets(): Offsets {\n const boundElementOffsets = this.getBoundElementOffsets();\n const containingBlockAncestor = findContainingBlockAncestor(this.host);\n const isDocumentElement = containingBlockAncestor === this.host.ownerDocument.documentElement;\n\n if (isDocumentElement) {\n return boundElementOffsets;\n }\n\n const containingBlockRect = containingBlockAncestor.getBoundingClientRect();\n const containingBlockStyle = getComputedStyle(containingBlockAncestor);\n /* Padding box of the containing block, accounting for borders. /\n const paddingBox = {\n top: containingBlockRect.top + parseFloat(containingBlockStyle.borderTopWidth),\n right: containingBlockRect.right - parseFloat(containingBlockStyle.borderRightWidth),\n bottom: containingBlockRect.bottom - parseFloat(containingBlockStyle.borderBottomWidth),\n left: containingBlockRect.left + parseFloat(containingBlockStyle.borderLeftWidth),\n };\n\n const boundElementRect = this.boundElement.getBoundingClientRect();\n /* Bound element offsets relative to the containing block padding box. /\n const relativeOffsets = {\n top: boundElementRect.top - paddingBox.top,\n right: paddingBox.right - boundElementRect.right,\n bottom: paddingBox.bottom - boundElementRect.bottom,\n left: boundElementRect.left - paddingBox.left,\n };\n\n /* Account for scroll to keep the popover aligned while the containing block scrolls. /\n return {\n top: relativeOffsets.top + containingBlockAncestor.scrollTop,\n right: relativeOffsets.right - containingBlockAncestor.scrollLeft,\n bottom: relativeOffsets.bottom - containingBlockAncestor.scrollTop,\n left: relativeOffsets.left + containingBlockAncestor.scrollLeft,\n };\n }\n\n /* Apply positioning styles based on `position` parameter. /\n private applyPositionStyles(position: PopoverPosition, availableSpace: Offsets): void {\n const boundElementWidth = this.boundElement.offsetWidth;\n const boundElementHeight = this.boundElement.offsetHeight;\n const offsetModifier = this.offsetModifier;\n /* 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. /\n const arrowModifier = this.showArrow && this.center ? 8 : 0;\n const hostStyle = this.host.style;\n /* Gap between the popover and the bound element. /\n const distanceFromBound = parseInt(hostStyle.getPropertyValue(\"--space-unit\")) \|\| 8;\n const positionOffsets = this.computePositionOffsets();\n\n /\n Precomputed bases to reduce repeated arithmetic in the switch below.\n * They represent the bound element edges plus optional centering offsets.\n /\n const leftBase = positionOffsets.left + boundElementWidth offsetModifier;\n const rightBase = positionOffsets.right + boundElementWidth * offsetModifier;\n const topBase = positionOffsets.top + boundElementHeight;\n const bottomBase = positionOffsets.bottom + boundElementHeight;\n const sideTopBase = positionOffsets.top + boundElementHeight * offsetModifier;\n const sideBottomBase = positionOffsets.bottom + boundElementHeight * offsetModifier;\n\n let maxWidth: number;\n let maxHeight: number;\n\n switch (position) {\n case PopoverPosition.TOP:\n case PopoverPosition.TOP_RIGHT:\n hostStyle.bottom = `${bottomBase + distanceFromBound}px`;\n hostStyle.left = `${leftBase - (position === PopoverPosition.TOP_RIGHT ? arrowModifier : 0)}px`;\n maxHeight = availableSpace.top - distanceFromBound;\n if (position === PopoverPosition.TOP_RIGHT) {\n maxWidth = availableSpace.right + boundElementWidth * offsetModifier;\n }\n break;\n\n case PopoverPosition.TOP_LEFT:\n hostStyle.right = `${rightBase - arrowModifier}px`;\n hostStyle.bottom = `${bottomBase + distanceFromBound}px`;\n maxWidth = availableSpace.left + boundElementWidth * offsetModifier;\n maxHeight = availableSpace.top - distanceFromBound;\n break;\n\n case PopoverPosition.BOTTOM:\n case PopoverPosition.BOTTOM_RIGHT:\n hostStyle.top = `${topBase + distanceFromBound}px`;\n hostStyle.left = `${leftBase - (position === PopoverPosition.BOTTOM_RIGHT ? arrowModifier : 0)}px`;\n maxHeight = availableSpace.bottom - distanceFromBound;\n if (position === PopoverPosition.BOTTOM_RIGHT) {\n maxWidth = availableSpace.right + boundElementWidth * offsetModifier;\n }\n break;\n\n case PopoverPosition.BOTTOM_LEFT:\n hostStyle.top = `${topBase + distanceFromBound}px`;\n hostStyle.right = `${rightBase - arrowModifier}px`;\n maxWidth = availableSpace.left + boundElementWidth * offsetModifier;\n maxHeight = availableSpace.bottom - distanceFromBound;\n break;\n\n case PopoverPosition.RIGHT:\n case PopoverPosition.RIGHT_BOTTOM:\n hostStyle.top = `${sideTopBase - (position === PopoverPosition.RIGHT_BOTTOM ? arrowModifier : 0)}px`;\n hostStyle.left = `${positionOffsets.left + boundElementWidth + distanceFromBound}px`;\n maxWidth = availableSpace.right - distanceFromBound;\n if (position === PopoverPosition.RIGHT) {\n maxHeight = availableSpace.top + availableSpace.bottom + boundElementHeight;\n } else {\n maxHeight = availableSpace.bottom + boundElementHeight * offsetModifier;\n }\n break;\n\n case PopoverPosition.RIGHT_TOP:\n hostStyle.bottom = `${sideBottomBase - arrowModifier}px`;\n hostStyle.left = `${positionOffsets.left + boundElementWidth + distanceFromBound}px`;\n maxWidth = availableSpace.right - distanceFromBound;\n maxHeight = availableSpace.top + boundElementHeight * offsetModifier;\n break;\n\n case PopoverPosition.LEFT:\n case PopoverPosition.LEFT_BOTTOM:\n hostStyle.top = `${sideTopBase - (position === PopoverPosition.LEFT_BOTTOM ? arrowModifier : 0)}px`;\n hostStyle.right = `${positionOffsets.right + boundElementWidth + distanceFromBound}px`;\n maxWidth = availableSpace.left - distanceFromBound;\n if (position === PopoverPosition.LEFT_BOTTOM) {\n maxHeight = availableSpace.bottom + boundElementHeight * offsetModifier;\n }\n break;\n\n case PopoverPosition.LEFT_TOP:\n hostStyle.right = `${positionOffsets.right + boundElementWidth + distanceFromBound}px`;\n hostStyle.bottom = `${sideBottomBase - arrowModifier}px`;\n maxWidth = availableSpace.left - distanceFromBound;\n maxHeight = availableSpace.top + boundElementHeight * offsetModifier;\n break;\n }\n\n if (getDevice() !== Device.MOBILE) {\n // Only force max sizes on non-mobile viewports\n Object.assign(hostStyle, {\n maxWidth: maxWidth ? `${maxWidth}px` : \"\",\n maxHeight: maxHeight ? `${maxHeight}px` : \"\",\n });\n }\n }\n\n /** Set the position of the popover. */\n private setPosition(): void {\n if (!this.boundElement) {\n return;\n }\n\n if (!isElementVisibleInContainer(this.boundElement, this.findScrollableAncestor(this.boundElement))) {\n // If the bound element is not visible, hide the popover too\n this.open = false;\n\n return;\n }\n\n Object.assign(this.host.style, {\n // Reset all positioning properties\n top: \"auto\",\n right: \"auto\",\n bottom: \"auto\",\n left: \"auto\",\n maxWidth: \"\",\n maxHeight: \"\",\n // Set initial visibility to hidden while calculating position...\n visibility: \"hidden\",\n });\n\n const availableSpace = this.calculateAvailableSpace();\n const position = this.getOptimalPopoverPosition(this.position, availableSpace);\n\n this.applyPositionStyles(position, availableSpace);\n this.currentPosition = position;\n this.positionChange.emit({position: this.currentPosition});\n\n // ...then restore the visibility\n this.host.style.visibility = \"visible\";\n }\n\n componentWillLoad(): void {\n this.validatePosition(this.position);\n }\n\n componentDidLoad(): void {\n this.findBoundElement();\n if (this.open) {\n this.onOpen();\n }\n }\n\n disconnectedCallback(): void {\n cancelAnimationFrame(this.animationFrameRequestId);\n }\n\n render(): HTMLZPopoverElement {\n return (\n <Host current-position={this.currentPosition}>\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"index24.js","mappings":"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","names":[],"sources":["src/components/z-popover/styles.css?tag=z-popover&encapsulation=shadow","src/components/z-popover/index.tsx"],"sourcesContent":[":host {\n --z-popover-theme--surface: ;\n --z-popover-theme--text: ;\n --z-popover-padding: ;\n --z-popover-shadow-filter: ;\n\n position: fixed;\n display: none;\n max-width: calc(100dvw - var(--grid-margin) * 2);\n max-height: calc(100dvh - var(--grid-margin) * 2);\n padding: var(--z-popover-padding, 0);\n background: var(--z-popover-theme--surface, var(--color-surface01));\n border-radius: var(--border-radius-small);\n color: var(--z-popover-theme--text, var(--color-default-text));\n fill: currentcolor;\n filter: var(--z-popover-shadow-filter, drop-shadow(0 1px 2px var(--shadow-color-base)));\n text-align: center;\n visibility: hidden; /* hidden by default. the positioning algorithm will set it to 'visible' when needed /\n}\n\n:host([open]:not([open=\"false\"])[current-position]) {\n display: block;\n}\n\n:host([center][current-position=\"top\"]),\n:host([center][current-position=\"bottom\"]) {\n transform: translateX(-50%);\n}\n\n:host([center][current-position=\"right\"]),\n:host([center][current-position=\"left\"]) {\n transform: translateY(-50%);\n}\n\n:host([current-position^=\"top\"]) {\n margin: 0 0 var(--space-unit);\n}\n\n:host([current-position^=\"bottom\"]) {\n margin: var(--space-unit) 0 0;\n}\n\n:host([current-position^=\"left\"]) {\n margin: 0 var(--space-unit) 0 0;\n}\n\n:host([current-position^=\"right\"]) {\n margin: 0 0 0 var(--space-unit);\n}\n\n/ Arrow style /\n:host([current-position])::before {\n --arrow-size: 6px;\n --arrow-edge-offset: calc(100% - var(--space-unit) - (var(--arrow-size) / 2));\n --arrow-center-x-offset: calc(50% - (var(--arrow-size) / 2));\n --arrow-center-y-offset: calc(100% - (var(--arrow-size) / 2));\n\n position: absolute;\n display: block;\n width: var(--arrow-size);\n height: var(--arrow-size);\n background: var(--z-popover-theme--surface, var(--color-surface01));\n content: \"\";\n transform: rotate(45deg);\n}\n\n:host([show-arrow=\"false\"])::before,\n:host(:not([show-arrow]))::before {\n display: none;\n}\n\n:host([current-position^=\"top\"])::before {\n top: var(--arrow-center-y-offset);\n}\n\n:host([current-position^=\"bottom\"])::before {\n bottom: var(--arrow-center-y-offset);\n}\n\n:host([current-position=\"top\"])::before,\n:host([current-position=\"bottom\"])::before {\n right: var(--arrow-edge-offset);\n}\n\n:host([current-position=\"right\"])::before,\n:host([current-position=\"left\"])::before {\n bottom: var(--arrow-edge-offset);\n}\n\n:host([current-position=\"right\"])::before {\n right: var(--arrow-center-y-offset);\n}\n\n:host([current-position=\"left\"])::before {\n left: var(--arrow-center-y-offset);\n}\n\n:host([current-position=\"top_right\"])::before,\n:host([current-position=\"bottom_right\"])::before {\n right: var(--arrow-edge-offset);\n}\n\n:host([current-position=\"top_left\"])::before,\n:host([current-position=\"bottom_left\"])::before {\n left: var(--arrow-edge-offset);\n}\n\n:host([current-position=\"right_top\"])::before,\n:host([current-position=\"left_top\"])::before {\n top: var(--arrow-edge-offset);\n}\n\n:host([current-position=\"right_top\"])::before,\n:host([current-position=\"right_bottom\"])::before {\n right: var(--arrow-center-y-offset);\n}\n\n:host([current-position=\"left_top\"])::before,\n:host([current-position=\"left_bottom\"])::before {\n left: var(--arrow-center-y-offset);\n}\n\n:host([current-position=\"right_bottom\"])::before,\n:host([current-position=\"left_bottom\"])::before {\n bottom: var(--arrow-edge-offset);\n}\n\n:host([center][current-position=\"top\"])::before,\n:host([center][current-position=\"bottom\"])::before {\n right: auto;\n left: var(--arrow-center-x-offset);\n}\n\n:host([center][current-position=\"right\"])::before,\n:host([center][current-position=\"left\"])::before {\n top: var(--arrow-center-x-offset);\n bottom: auto;\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {Device, KeyboardCode, PopoverPosition} from \"../../beans\";\nimport {\n containsElement,\n findContainingBlockAncestor,\n getDevice,\n getParentElement,\n isElementVisibleInContainer,\n} from \"../../utils/utils\";\n\n/* Centering offset modifier. 0 for no offset, 0.5 for centering. /\ntype OffsetModifier = 0 \| 0.5;\ntype Offsets = {top: number; right: number; bottom: number; left: number};\n\n/\n Popover component.\n * This component displays a popover bound to an element.\n * It supports various positions and can automatically adjust it based on available space, accounting for scrollable containers.\n \n Notes:\n * - If positioning has an odd behavior, consider manually adjusting the size of the slotted elements (using `width`, `height`, `max-width`, `max-height`, etc...) when its content is \"fluid\" (like text), because it can interfere with the position calculation (for example a long text on one single line can be bigger than the available space, letting the algorithm think the popover doesn't fits).\n \n @cssprop --z-popover-theme--surface - background color of the popover.\n * @cssprop --z-popover-theme--text - foreground color of the popover.\n * @cssprop --z-popover-padding - padding of the popover.\n * @cssprop --z-popover-shadow-filter - drop-shadow filter of the popover. Defaults to `drop-shadow(0 1px 2px var(--shadow-color-base))`.\n /\n@Component({\n tag: \"z-popover\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZPopover {\n /\n The preferred position to render the popover.\n * The popover will automatically search another position if not enough space is available for the preferred position.\n * If the preferred position is not available, it will try to find the best position starting from `TOP` and going clockwise.\n /\n @Prop({reflect: true, mutable: true})\n position?: PopoverPosition = PopoverPosition.TOP;\n\n /\n The initial open state of the popover.\n * Internal changes of this prop are emitted through the `openChange` event.\n * Make sure to listen to that event if you need the updated state of the popover from the outside, to avoid inconsistent values.\n /\n @Prop({reflect: true, mutable: true})\n open = false;\n\n /\n The selector or the element bound with the popover.\n * If string css selector is provided make sure to use a valid selector.\n /\n @Prop()\n bindTo?: string \| HTMLElement;\n\n /* Whether to show popover's arrow. /\n @Prop({reflect: true})\n showArrow = false;\n\n /* Whether to center the popup on the main side (according to \"position\"). /\n @Prop({reflect: true})\n center = false;\n\n /\n Whether the popover can be closed by clicking outside of it or pressing the escape key.\n * Otherwise, it will be closed only programmatically (by setting `open` to `false`).\n * Default: `true`.\n /\n @Prop()\n closable = true;\n\n /\n The current position of the popover.\n * It differs from `position` only when calculated automatically for space reasons.\n /\n @State()\n currentPosition?: PopoverPosition;\n\n @Element() host: HTMLZPopoverElement;\n\n // Clockwise order of positions.\n private static readonly positionOrder: PopoverPosition[] = [\n PopoverPosition.TOP,\n PopoverPosition.TOP_RIGHT,\n PopoverPosition.TOP_LEFT,\n PopoverPosition.RIGHT,\n PopoverPosition.RIGHT_BOTTOM,\n PopoverPosition.RIGHT_TOP,\n PopoverPosition.BOTTOM,\n PopoverPosition.BOTTOM_LEFT,\n PopoverPosition.BOTTOM_RIGHT,\n PopoverPosition.LEFT,\n PopoverPosition.LEFT_TOP,\n PopoverPosition.LEFT_BOTTOM,\n ] as const;\n\n private animationFrameRequestId?: number;\n\n /* space tolerance for space calculations /\n private readonly spaceTolerance = 3;\n\n /* The element bound to the popover. /\n private boundElement?: HTMLElement;\n\n /* Cached available space around the bound element to avoid unnecessary recalculations /\n private cachedAvailableSpace?: Offsets;\n\n /* Last bounding rect of the bound element to detect changes and eventually invalidate the caches. /\n private lastBoundRect?: DOMRect;\n\n /* Fired when the position changes. /\n @Event()\n positionChange: EventEmitter<{position: PopoverPosition}>;\n\n /* Event emitted when the open state of the popover changes (e.g. when the user clicks outside the popover to close it, if `closable` is true). /\n @Event()\n openChange: EventEmitter<{open: boolean}>;\n\n @Listen(\"keyup\", {target: \"window\", capture: true})\n closePopoverWithKeyboard(e: KeyboardEvent): void {\n if (this.closable && e.key === KeyboardCode.ESC) {\n e.stopPropagation();\n this.open = false;\n }\n }\n\n /\n Close the popover when clicking outside of its content.\n * Stop event propagation if the click was fired by popover's trigger element,\n * to prevent close and reopen glitches.\n /\n @Listen(\"click\", {target: \"body\", capture: true})\n handleOutsideClick(e: MouseEvent): void {\n const target = e.target as Element;\n if (!this.closable \|\| !this.open \|\| containsElement(this.host, target)) {\n return;\n }\n\n if (containsElement(this.boundElement, target)) {\n // stop propagation if the click was on the trigger element to prevent close and reopen glitches\n e.stopPropagation();\n }\n this.open = false;\n }\n\n @Watch(\"position\")\n validatePosition(newValue: PopoverPosition): void {\n if (!Object.values(PopoverPosition).includes(newValue as PopoverPosition) \|\| newValue === PopoverPosition.AUTO) {\n newValue = PopoverPosition.TOP;\n this.position = newValue;\n }\n this.currentPosition = newValue;\n if (this.open) {\n this.setPosition();\n }\n }\n\n /* Setup popover behaviors when `open` changes. /\n @Watch(\"open\")\n onOpen(): void {\n cancelAnimationFrame(this.animationFrameRequestId);\n this.openChange.emit({open: this.open});\n if (!this.open) {\n Object.assign(this.host.style, {\n // Reset all positioning properties\n top: \"auto\",\n right: \"auto\",\n bottom: \"auto\",\n left: \"auto\",\n maxWidth: \"\",\n maxHeight: \"\",\n // Set initial visibility to hidden while calculating position...\n visibility: \"hidden\",\n });\n this.currentPosition = undefined;\n\n return;\n }\n\n const updatePositionLoop = (): void => {\n if (!this.open) {\n return;\n }\n\n this.setPosition();\n this.animationFrameRequestId = requestAnimationFrame(updatePositionLoop);\n };\n\n // call `setPosition` after a tick to ensure the DOM is ready and sizes are available\n setTimeout(() => {\n updatePositionLoop();\n }, 0);\n }\n\n @Watch(\"bindTo\")\n onBindingChange(): void {\n this.findBoundElement();\n }\n\n /* Returns the offset modifier to use in calculations to align the popover with the bound element. /\n private get offsetModifier(): OffsetModifier {\n return this.center ? 0.5 : 0;\n }\n\n private findBoundElement(): void {\n if (typeof this.bindTo === \"string\") {\n this.boundElement = this.host.ownerDocument.querySelector(this.bindTo) as HTMLElement;\n } else if (this.bindTo) {\n this.boundElement = this.bindTo;\n } else {\n this.boundElement = getParentElement(this.host) as HTMLElement;\n if (this.boundElement.tagName.toLowerCase() === \"z-tooltip\") {\n // If the popover is used inside a tooltip without a specified `bindTo`, bind it to the parent of the tooltip.\n this.boundElement = getParentElement(this.boundElement) as HTMLElement;\n }\n }\n }\n\n /\n Check if element has enough space to the right and left to be centered.\n * Used for `TOP` and `BOTTOM` position.\n * When `center` is not enabled, only one side needs to be checked and `RIGHT` is the default.\n /\n private hasCenteredHorizontalSpace(\n availableLeft: number,\n availableRight: number,\n hostWidth: number,\n boundElementWidth: number\n ): boolean {\n const requiredSideSpace = (hostWidth - boundElementWidth) (1 - this.offsetModifier);\n\n if (!this.center) {\n return availableRight >= requiredSideSpace - this.spaceTolerance;\n }\n\n return (\n availableRight >= requiredSideSpace - this.spaceTolerance &&\n availableLeft >= requiredSideSpace - this.spaceTolerance\n );\n }\n\n /*\n Check if element has enough space to the top and bottom to be centered.\n * Used for `RIGHT` and `LEFT` position.\n * When `center` is not enabled, only one side needs to be checked and `BOTTOM` is the default.\n /\n private hasCenteredVerticalSpace(\n availableTop: number,\n availableBottom: number,\n hostHeight: number,\n boundElementHeight: number\n ): boolean {\n const requiredSideSpace = (hostHeight - boundElementHeight) (1 - this.offsetModifier);\n\n if (!this.center) {\n return availableBottom >= requiredSideSpace - this.spaceTolerance;\n }\n\n return (\n availableTop >= requiredSideSpace - this.spaceTolerance &&\n availableBottom >= requiredSideSpace - this.spaceTolerance\n );\n }\n\n /*\n Check if there is enough space in the given direction to fit the popover.\n * Used for composed positions like TOP_RIGHT, LEFT_BOTTOM, etc.\n /\n private hasEnoughSideSpace(\n availableSpace: number,\n hostSize: number,\n boundElementSize: number,\n offsetModifier: OffsetModifier\n ): boolean {\n return availableSpace >= hostSize - boundElementSize (1 - offsetModifier) - this.spaceTolerance;\n }\n\n /*\n Given a desired position and available space around the bound element, returns the best position\n * that fits the popover, trying all positions if needed.\n * Takes into account offsetModifier for centering.\n * @param desiredPosition The desired position of the popover.\n * @param availableSpace The available space around the bound element.\n /\n private getOptimalPopoverPosition(desiredPosition: PopoverPosition, availableSpace: Offsets): PopoverPosition {\n const hostWidth = this.host.offsetWidth;\n const hostHeight = this.host.offsetHeight;\n const boundElementWidth = this.boundElement.getBoundingClientRect().width;\n const boundElementHeight = this.boundElement.getBoundingClientRect().height;\n const offsetModifier = this.offsetModifier;\n\n /* Check if there is enough space to fit the popover in the desired position /\n const fits = (pos: PopoverPosition): boolean => {\n switch (pos) {\n case PopoverPosition.TOP:\n return (\n availableSpace.top >= hostHeight - this.spaceTolerance &&\n this.hasCenteredHorizontalSpace(availableSpace.left, availableSpace.right, hostWidth, boundElementWidth)\n );\n case PopoverPosition.TOP_RIGHT:\n return (\n availableSpace.top >= hostHeight &&\n this.hasEnoughSideSpace(availableSpace.right, hostWidth, boundElementWidth, offsetModifier)\n );\n case PopoverPosition.TOP_LEFT:\n return (\n availableSpace.top >= hostHeight &&\n this.hasEnoughSideSpace(availableSpace.left, hostWidth, boundElementWidth, offsetModifier)\n );\n case PopoverPosition.RIGHT:\n return (\n availableSpace.right >= hostWidth &&\n this.hasCenteredVerticalSpace(availableSpace.top, availableSpace.bottom, hostHeight, boundElementHeight)\n );\n case PopoverPosition.RIGHT_BOTTOM:\n return (\n availableSpace.right >= hostWidth &&\n this.hasEnoughSideSpace(availableSpace.bottom, hostHeight, boundElementHeight, offsetModifier)\n );\n case PopoverPosition.RIGHT_TOP:\n return (\n availableSpace.right >= hostWidth &&\n this.hasEnoughSideSpace(availableSpace.top, hostHeight, boundElementHeight, offsetModifier)\n );\n case PopoverPosition.BOTTOM:\n return (\n availableSpace.bottom >= hostHeight &&\n this.hasCenteredHorizontalSpace(availableSpace.left, availableSpace.right, hostWidth, boundElementWidth)\n );\n case PopoverPosition.BOTTOM_LEFT:\n return (\n availableSpace.bottom >= hostHeight &&\n this.hasEnoughSideSpace(availableSpace.left, hostWidth, boundElementWidth, offsetModifier)\n );\n case PopoverPosition.BOTTOM_RIGHT:\n return (\n availableSpace.bottom >= hostHeight &&\n this.hasEnoughSideSpace(availableSpace.right, hostWidth, boundElementWidth, offsetModifier)\n );\n case PopoverPosition.LEFT:\n return (\n availableSpace.left >= hostWidth &&\n this.hasCenteredVerticalSpace(availableSpace.top, availableSpace.bottom, hostHeight, boundElementHeight)\n );\n case PopoverPosition.LEFT_TOP:\n return (\n availableSpace.left >= hostWidth &&\n this.hasEnoughSideSpace(availableSpace.top, hostHeight, boundElementHeight, offsetModifier)\n );\n case PopoverPosition.LEFT_BOTTOM:\n return (\n availableSpace.left >= hostWidth &&\n this.hasEnoughSideSpace(availableSpace.bottom, hostHeight, boundElementHeight, offsetModifier)\n );\n\n default:\n return false;\n }\n };\n\n // Check desired position first\n if (fits(desiredPosition)) {\n return desiredPosition;\n }\n\n // Find position index and create rotation starting from next position\n const positions = ZPopover.positionOrder;\n const startIndex = positions.indexOf(desiredPosition);\n\n if (startIndex === -1) {\n return desiredPosition; // fallback if position not found\n }\n\n // Try all other positions starting from the next one\n for (let i = 1; i < positions.length; i++) {\n const posIndex = (startIndex + i) % positions.length;\n const pos = positions[posIndex];\n if (fits(pos)) {\n return pos;\n }\n }\n\n return this.findBestFallbackPosition(availableSpace);\n }\n\n /* Find the best fallback position based on available space when no position fits perfectly. /\n private findBestFallbackPosition(availableSpace: Offsets): PopoverPosition {\n // Determine which horizontal and vertical direction has the most available space\n const bestHorizontalDirection =\n availableSpace.right >= availableSpace.left ? PopoverPosition.RIGHT : PopoverPosition.LEFT;\n\n const bestVerticalDirection =\n availableSpace.bottom >= availableSpace.top ? PopoverPosition.BOTTOM : PopoverPosition.TOP;\n\n // Choose the main direction based on which axis has more space overall\n const maxHorizontalSpace = Math.max(availableSpace.right, availableSpace.left);\n const maxVerticalSpace = Math.max(availableSpace.bottom, availableSpace.top);\n\n const mainDirection = maxVerticalSpace >= maxHorizontalSpace ? bestVerticalDirection : bestHorizontalDirection;\n\n // Decide if a secondary direction is needed\n // Only add a secondary direction if the difference between min and max in that axis is at least double\n let needsSecondaryDirection = false;\n\n if (mainDirection === bestVerticalDirection) {\n // If main direction is vertical, check horizontal space difference\n const minHorizontalSpace = Math.min(availableSpace.right, availableSpace.left);\n needsSecondaryDirection = maxHorizontalSpace >= minHorizontalSpace 2;\n } else {\n // If main direction is horizontal, check vertical space difference\n const minVerticalSpace = Math.min(availableSpace.bottom, availableSpace.top);\n needsSecondaryDirection = maxVerticalSpace >= minVerticalSpace * 2;\n }\n\n if (!needsSecondaryDirection) {\n return mainDirection;\n }\n\n const secondaryDirection =\n mainDirection === bestVerticalDirection ? bestHorizontalDirection : bestVerticalDirection;\n\n // Return a combined position (e.g., \"bottom_right\")\n return `${mainDirection}_${secondaryDirection}` as PopoverPosition;\n }\n\n /*\n Find the nearest scrollable ancestor of an element to take as a reference for positioning.\n * The ancestor is considered scrollable if it doesn't have `overflow` property set to `hidden` and its scroll size is bigger than its client size.\n /\n private findScrollableAncestor(element: HTMLElement): HTMLElement {\n let parent = getParentElement(element);\n\n while (parent) {\n if (parent === element.ownerDocument.documentElement) {\n return parent as HTMLElement;\n }\n\n const style = getComputedStyle(parent);\n const {overflow, overflowX, overflowY} = style;\n const hasHiddenOverflow = overflow === \"hidden\" \|\| overflowY === \"hidden\" \|\| overflowX === \"hidden\";\n const isScrollable =\n (parent.scrollHeight > parent.clientHeight && overflow !== \"visible\" && overflowY !== \"visible\") \|\|\n (parent.scrollWidth > parent.clientWidth && overflow !== \"visible\" && overflowX !== \"visible\");\n\n if (!hasHiddenOverflow && isScrollable) {\n return parent as HTMLElement;\n }\n\n parent = getParentElement(parent);\n }\n\n return element.ownerDocument.documentElement;\n }\n\n /\n Calculate available space around the element bound with the popover, based on its nearest scrollable ancestor.\n \n Calculations for `right` and `bottom` can be a little bit confusing because `boundingRect.right` and `bottom` may not be what you expect...\n * For more information see the explanation in the docs.\n * @link https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect#return_value\n /\n private calculateAvailableSpace(): Offsets {\n const boundElementRect = this.boundElement.getBoundingClientRect();\n\n if (\n this.lastBoundRect &&\n this.lastBoundRect.x === boundElementRect.x &&\n this.lastBoundRect.y === boundElementRect.y &&\n this.lastBoundRect.width === boundElementRect.width &&\n this.lastBoundRect.height === boundElementRect.height &&\n this.cachedAvailableSpace\n ) {\n // If the bound element's rect hasn't changed, return the cached rect\n return this.cachedAvailableSpace;\n }\n\n this.lastBoundRect = boundElementRect;\n const scrollableAncestor = this.findScrollableAncestor(this.boundElement);\n const scrollableAncestorRect = scrollableAncestor.getBoundingClientRect();\n const isScrollableAncestorNested = scrollableAncestor !== this.boundElement.ownerDocument.documentElement;\n const documentWidth = this.boundElement.ownerDocument.documentElement.clientWidth;\n const documentHeight = this.boundElement.ownerDocument.documentElement.clientHeight;\n const safeSpace = 8; // extra space to avoid popover being too close to the edges\n\n // These deltas represent the offset between the scrollable ancestor and the viewport.\n // They are used to adjust the available space calculations when the scrollable ancestor is not the document or body,\n // to try to fit the popover inside the scrollable ancestor.\n const deltaTop = isScrollableAncestorNested ? scrollableAncestorRect.top : 0;\n const deltaRight = isScrollableAncestorNested ? documentWidth - scrollableAncestorRect.right : 0;\n const deltaBottom = isScrollableAncestorNested ? documentHeight - scrollableAncestorRect.bottom : 0;\n const deltaLeft = isScrollableAncestorNested ? scrollableAncestorRect.left : 0;\n\n this.cachedAvailableSpace = {\n top: boundElementRect.top - deltaTop - safeSpace,\n right: documentWidth - boundElementRect.right - deltaRight - safeSpace,\n bottom: documentHeight - boundElementRect.bottom - deltaBottom - safeSpace,\n left: boundElementRect.left - deltaLeft - safeSpace,\n };\n\n return this.cachedAvailableSpace;\n }\n\n /* Calculate the space around the bound element relative to the viewport. /\n private getBoundElementOffsets(): Offsets {\n const elementRect = this.boundElement.getBoundingClientRect();\n const documentWidth = this.boundElement.ownerDocument.documentElement.clientWidth;\n const documentHeight = this.boundElement.ownerDocument.documentElement.clientHeight;\n\n return {\n top: elementRect.top,\n right: documentWidth - elementRect.right,\n bottom: documentHeight - elementRect.bottom,\n left: elementRect.left,\n };\n }\n\n /* Compute positioning offsets in the appropriate coordinate space, accounting for transformed containing blocks and scroll. /\n private computePositionOffsets(): Offsets {\n const boundElementOffsets = this.getBoundElementOffsets();\n const containingBlockAncestor = findContainingBlockAncestor(this.host);\n const isDocumentElement = containingBlockAncestor === this.host.ownerDocument.documentElement;\n\n if (isDocumentElement) {\n return boundElementOffsets;\n }\n\n const containingBlockRect = containingBlockAncestor.getBoundingClientRect();\n const containingBlockStyle = getComputedStyle(containingBlockAncestor);\n /* Padding box of the containing block, accounting for borders. /\n const paddingBox = {\n top: containingBlockRect.top + parseFloat(containingBlockStyle.borderTopWidth),\n right: containingBlockRect.right - parseFloat(containingBlockStyle.borderRightWidth),\n bottom: containingBlockRect.bottom - parseFloat(containingBlockStyle.borderBottomWidth),\n left: containingBlockRect.left + parseFloat(containingBlockStyle.borderLeftWidth),\n };\n\n const boundElementRect = this.boundElement.getBoundingClientRect();\n /* Bound element offsets relative to the containing block padding box. /\n const relativeOffsets = {\n top: boundElementRect.top - paddingBox.top,\n right: paddingBox.right - boundElementRect.right,\n bottom: paddingBox.bottom - boundElementRect.bottom,\n left: boundElementRect.left - paddingBox.left,\n };\n\n /* Account for scroll to keep the popover aligned while the containing block scrolls. /\n return {\n top: relativeOffsets.top + containingBlockAncestor.scrollTop,\n right: relativeOffsets.right - containingBlockAncestor.scrollLeft,\n bottom: relativeOffsets.bottom - containingBlockAncestor.scrollTop,\n left: relativeOffsets.left + containingBlockAncestor.scrollLeft,\n };\n }\n\n /* Apply positioning styles based on `position` parameter. /\n private applyPositionStyles(position: PopoverPosition, availableSpace: Offsets): void {\n const boundElementWidth = this.boundElement.offsetWidth;\n const boundElementHeight = this.boundElement.offsetHeight;\n const offsetModifier = this.offsetModifier;\n /\n Distance between the arrow center and the popover edge.\n * Needed to align the center of the arrow with the center of the bound element when `showArrow` and `center` are enabled.\n /\n const arrowModifier = this.showArrow && this.center ? 8 : 0;\n const hostStyle = this.host.style;\n /* Gap between the popover and the bound element, set as margin in CSS. /\n const distanceFromBound = parseFloat(getComputedStyle(this.host).marginTop.replace(\"px\", \"\")) \|\| 0;\n const positionOffsets = this.computePositionOffsets();\n\n /\n Precomputed bases to reduce repeated arithmetic in the switch below.\n * They represent the bound element edges plus optional centering offsets.\n /\n const leftBase = positionOffsets.left + boundElementWidth offsetModifier;\n const rightBase = positionOffsets.right + boundElementWidth * offsetModifier;\n const topBase = positionOffsets.top + boundElementHeight;\n const bottomBase = positionOffsets.bottom + boundElementHeight;\n const sideTopBase = positionOffsets.top + boundElementHeight * offsetModifier;\n const sideBottomBase = positionOffsets.bottom + boundElementHeight * offsetModifier;\n\n let maxWidth: number;\n let maxHeight: number;\n\n switch (position) {\n case PopoverPosition.TOP:\n case PopoverPosition.TOP_RIGHT:\n hostStyle.bottom = `${bottomBase}px`;\n hostStyle.left = `${leftBase - (position === PopoverPosition.TOP_RIGHT ? arrowModifier : 0)}px`;\n maxHeight = availableSpace.top - distanceFromBound;\n if (position === PopoverPosition.TOP_RIGHT) {\n maxWidth = availableSpace.right + boundElementWidth * offsetModifier;\n }\n break;\n\n case PopoverPosition.TOP_LEFT:\n hostStyle.right = `${rightBase - arrowModifier}px`;\n hostStyle.bottom = `${bottomBase}px`;\n maxWidth = availableSpace.left + boundElementWidth * offsetModifier;\n maxHeight = availableSpace.top - distanceFromBound;\n break;\n\n case PopoverPosition.BOTTOM:\n case PopoverPosition.BOTTOM_RIGHT:\n hostStyle.top = `${topBase}px`;\n hostStyle.left = `${leftBase - (position === PopoverPosition.BOTTOM_RIGHT ? arrowModifier : 0)}px`;\n maxHeight = availableSpace.bottom - distanceFromBound;\n if (position === PopoverPosition.BOTTOM_RIGHT) {\n maxWidth = availableSpace.right + boundElementWidth * offsetModifier;\n }\n break;\n\n case PopoverPosition.BOTTOM_LEFT:\n hostStyle.top = `${topBase}px`;\n hostStyle.right = `${rightBase - arrowModifier}px`;\n maxWidth = availableSpace.left + boundElementWidth * offsetModifier;\n maxHeight = availableSpace.bottom - distanceFromBound;\n break;\n\n case PopoverPosition.RIGHT:\n case PopoverPosition.RIGHT_BOTTOM:\n hostStyle.top = `${sideTopBase - (position === PopoverPosition.RIGHT_BOTTOM ? arrowModifier : 0)}px`;\n hostStyle.left = `${positionOffsets.left + boundElementWidth}px`;\n maxWidth = availableSpace.right - distanceFromBound;\n if (position === PopoverPosition.RIGHT) {\n maxHeight = availableSpace.top + availableSpace.bottom + boundElementHeight;\n } else {\n maxHeight = availableSpace.bottom + boundElementHeight * offsetModifier;\n }\n break;\n\n case PopoverPosition.RIGHT_TOP:\n hostStyle.bottom = `${sideBottomBase - arrowModifier}px`;\n hostStyle.left = `${positionOffsets.left + boundElementWidth}px`;\n maxWidth = availableSpace.right - distanceFromBound;\n maxHeight = availableSpace.top + boundElementHeight * offsetModifier;\n break;\n\n case PopoverPosition.LEFT:\n case PopoverPosition.LEFT_BOTTOM:\n hostStyle.top = `${sideTopBase - (position === PopoverPosition.LEFT_BOTTOM ? arrowModifier : 0)}px`;\n hostStyle.right = `${positionOffsets.right + boundElementWidth}px`;\n maxWidth = availableSpace.left - distanceFromBound;\n if (position === PopoverPosition.LEFT_BOTTOM) {\n maxHeight = availableSpace.bottom + boundElementHeight * offsetModifier;\n }\n break;\n\n case PopoverPosition.LEFT_TOP:\n hostStyle.right = `${positionOffsets.right + boundElementWidth}px`;\n hostStyle.bottom = `${sideBottomBase - arrowModifier}px`;\n maxWidth = availableSpace.left - distanceFromBound;\n maxHeight = availableSpace.top + boundElementHeight * offsetModifier;\n break;\n }\n\n if (getDevice() !== Device.MOBILE) {\n // Only force max sizes on non-mobile viewports\n Object.assign(hostStyle, {\n maxWidth: maxWidth ? `${maxWidth}px` : \"\",\n maxHeight: maxHeight ? `${maxHeight}px` : \"\",\n });\n }\n }\n\n /** Set the position of the popover. */\n private setPosition(): void {\n if (!this.boundElement) {\n return;\n }\n\n if (!isElementVisibleInContainer(this.boundElement, this.findScrollableAncestor(this.boundElement))) {\n // If the bound element is not visible, hide the popover too\n this.open = false;\n\n return;\n }\n\n Object.assign(this.host.style, {\n // Reset all positioning properties\n top: \"auto\",\n right: \"auto\",\n bottom: \"auto\",\n left: \"auto\",\n maxWidth: \"\",\n maxHeight: \"\",\n // Set initial visibility to hidden while calculating position...\n visibility: \"hidden\",\n });\n\n const availableSpace = this.calculateAvailableSpace();\n const position = this.getOptimalPopoverPosition(this.position, availableSpace);\n\n this.applyPositionStyles(position, availableSpace);\n this.currentPosition = position;\n this.positionChange.emit({position: this.currentPosition});\n\n // ...then restore the visibility\n this.host.style.visibility = \"visible\";\n }\n\n componentWillLoad(): void {\n this.validatePosition(this.position);\n }\n\n componentDidLoad(): void {\n this.findBoundElement();\n if (this.open) {\n this.onOpen();\n }\n }\n\n disconnectedCallback(): void {\n cancelAnimationFrame(this.animationFrameRequestId);\n }\n\n render(): HTMLZPopoverElement {\n return (\n <Host current-position={this.currentPosition}>\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}