q2-tecton-elements 1.49.2 → 1.49.4

package/dist/collection/components/q2-popover/q2-popover.js

@@ -1,18 +1,71 @@
 import { h, } from "@stencil/core";
-import { handleDeprecationWarning, waitForNextPaint } from "../../utils";
+import { handleDeprecationWarning, waitForNextPaint, isMobile, isInScrollableContainer } from "../../utils";
 export class Q2Popover {
     constructor() {
         /**
          * The number of pixels to leave between the popover and the edge of the viewport
          */
         this.displayBuffer = 10;
-        /** remove when Popover API is supported in iOS */
         this.orientationChanged = false;
+        /// Helpers ///
         this.handleMinHeight = () => {
             if (this.minHeight) {
                 handleDeprecationWarning(this, 'minHeight', 'prop');
             }
         };
+        this.handlePopoverToggleEvent = (event) => {
+            this.popoverStateChanged.emit({ open: event.newState === 'open' });
+        };
+        this.viewPortChanged = () => {
+            if (!this.open)
+                return;
+            this.determinePopDirection();
+        };
+        this.viewPortOrientationChanged = () => {
+            this.orientationChanged = true;
+            this.viewPortChanged();
+        };
+        this.setPopoverAPICSSProperties = async () => {
+            var _a, _b, _c, _d, _e, _f;
+            const { controlElement, containerElement, currentDirection, isModule, align } = this;
+            const { top: controlTop, bottom: controlBottom, left: controlLeft, right: controlRight, } = (_b = (_a = controlElement === null || controlElement === void 0 ? void 0 : controlElement.getBoundingClientRect) === null || _a === void 0 ? void 0 : _a.call(controlElement)) !== null && _b !== void 0 ? _b : {
+                top: 0,
+                bottom: 0,
+                left: 0,
+                right: 0,
+            };
+            const popoverLeft = controlLeft;
+            const popoverRight = ((_c = window === null || window === void 0 ? void 0 : window.visualViewport) === null || _c === void 0 ? void 0 : _c.width) - controlRight;
+            if (align === 'right') {
+                containerElement.style.setProperty('--comp-pop-right', `${popoverRight - window.scrollX}px`);
+                containerElement.style.setProperty('--comp-pop-left', 'unset');
+            }
+            else {
+                containerElement.style.setProperty('--comp-pop-left', `${popoverLeft + window.scrollX}px`);
+                containerElement.style.setProperty('--comp-pop-right', 'unset');
+            }
+            if (this.block)
+                containerElement.style.setProperty('--comp-pop-width', `${(controlElement === null || controlElement === void 0 ? void 0 : controlElement.offsetWidth) || 0}px`);
+            if (currentDirection === 'up') {
+                if (isModule) {
+                    containerElement.style.setProperty('--comp-pop-bottom', `${window.innerHeight - controlTop}px`);
+                }
+                else {
+                    containerElement.style.setProperty('--comp-pop-bottom', `${window.innerHeight - controlTop - ((_d = window === null || window === void 0 ? void 0 : window.visualViewport) === null || _d === void 0 ? void 0 : _d.offsetTop) - window.scrollY}px`);
+                }
+            }
+            if (currentDirection === 'down') {
+                if (isModule) {
+                    containerElement.style.setProperty('--comp-pop-top', `${controlBottom}px`);
+                }
+                else {
+                    containerElement.style.setProperty('--comp-pop-top', `${controlBottom + ((_f = (_e = window === null || window === void 0 ? void 0 : window.visualViewport) === null || _e === void 0 ? void 0 : _e.offsetTop) !== null && _f !== void 0 ? _f : 0) + window.scrollY}px`);
+                }
+            }
+            // Wait for one paint to prevent layout thrashing
+            await waitForNextPaint();
+            containerElement.style.setProperty('--comp-pop-opacity', '1');
+        };
         this.setAbsoluteCSSProperties = async () => {
             const { controlElement, containerElement, currentDirection, align } = this;
             if (align === 'right') {
@@ -37,83 +90,46 @@ export class Q2Popover {
             await waitForNextPaint();
             containerElement.style.setProperty('--comp-pop-opacity', '1');
         };
-        this.setFixedCSSProperties = async () => {
-            var _a, _b;
-            const { controlElement, containerElement, currentDirection, rootElementRect } = this;
-            const { top: controlTop, bottom: controlBottom, left: controlLeft, right: controlRight, } = (_b = (_a = controlElement === null || controlElement === void 0 ? void 0 : controlElement.getBoundingClientRect) === null || _a === void 0 ? void 0 : _a.call(controlElement)) !== null && _b !== void 0 ? _b : {
-                top: 0,
-                bottom: 0,
-                left: 0,
-                right: 0,
-            };
-            const popoverLeft = controlLeft - rootElementRect.left;
-            if (this.block)
-                containerElement.style.setProperty('--comp-pop-width', `${controlElement.offsetWidth || 0}px`);
-            containerElement.style.setProperty('--comp-pop-left', `${popoverLeft}px`);
-            containerElement.style.setProperty('--comp-pop-right', `${rootElementRect.width + rootElementRect.left - controlRight}px`);
-            if (currentDirection === 'up') {
-                containerElement.style.setProperty('--comp-pop-bottom', `${rootElementRect.height + rootElementRect.top - controlTop}px`);
-            }
-            if (currentDirection === 'down') {
-                containerElement.style.setProperty('--comp-pop-top', `${controlBottom - rootElementRect.top}px`);
-            }
-            // Wait for one paint to prevent layout thrashing
-            await waitForNextPaint();
-            containerElement.style.setProperty('--comp-pop-opacity', '1');
-        };
-        this.viewPortChanged = () => {
-            if (!this.open)
-                return;
-            this.determinePopDirection();
-        };
-        this.viewPortOrientationChanged = () => {
-            this.orientationChanged = true;
-            this.viewPortChanged();
-        };
-        this.currentDirection = undefined;
-        this.show = false;
-        this.align = undefined;
+        this.direction = undefined;
+        this.align = 'left';
+        this.open = undefined;
         this.block = undefined;
         this.controlElement = undefined;
-        this.direction = undefined;
-        this.minHeight = undefined;
         this.mode = null;
-        this.open = undefined;
+        this.minHeight = undefined;
+        this.currentDirection = undefined;
+        this.show = false;
     }
-    // #endregion
-    // #region Component Lifecycle Events
-    disconnectedCallback() {
-        this.removeViewportListeners();
+    /// Lifecycle hooks ///
+    componentWillLoad() {
+        if (!this.supportsPopoverAPI) {
+            console.warn('The Popover API is not supported in this browser. Please update your browser to the latest version. The component will use legacy mode.');
+            this.mode = 'legacy';
+        }
     }
     componentDidLoad() {
         this.handleMinHeight();
+        if (this.supportsPopoverAPI)
+            this.containerElement.addEventListener('toggle', this.handlePopoverToggleEvent);
         if (this.open)
             this.determinePopDirection();
     }
-    // #endregion
-    // #region Listeners
-    popoverStateHandler(event) {
-        const { detail: { open }, } = event;
-        if (open === this.open)
-            return;
-        this.open = open;
-        event.stopPropagation();
-    }
-    // #endregion
-    // #region Public Methods API
-    async scrollContainerTo(options) {
-        this.containerElement.scrollTo(options);
+    disconnectedCallback() {
+        this.removeViewportListeners();
+        this.containerElement.removeEventListener('toggle', this.handlePopoverToggleEvent);
+        this.containerElement = null;
+        this.contentElement = null;
+        this.controlElement = null;
     }
+    /// Methods ///
     async toggle() {
         this.open = !this.open;
     }
-    // #endregion
-    // #region Watchers
-    minHeightProvided() {
-        this.handleMinHeight();
+    async scrollContainerTo(options) {
+        this.containerElement.scrollTo(options);
     }
+    /// Watchers ///
     async openChanged(open) {
-        this.setRootElement();
         this.popoverStateChanged.emit({ open });
         if (open) {
             this.addViewportListeners();
@@ -122,14 +138,29 @@ export class Q2Popover {
         else {
             this.removeViewportListeners();
             this.currentDirection = undefined;
-            this.show = false;
+            if (this.mode === 'legacy' || !this.supportsPopoverAPI) {
+                this.show = false;
+            }
+            else {
+                this.containerElement.hidePopover();
+            }
             await waitForNextPaint();
             this.clearCSSProperties();
         }
     }
-    // #endregion
-    // #region Local Methods
-    get actualDirection() {
+    minHeightProvided() {
+        this.handleMinHeight();
+    }
+    /// Listeners ///
+    popoverStateHandler(event) {
+        const { detail: { open }, } = event;
+        if (open === this.open)
+            return;
+        this.open = open;
+        event.stopPropagation();
+    }
+    /// Getters ///
+    get providedDirection() {
         const { direction } = this;
         switch (direction) {
             case 'up':
@@ -145,14 +176,26 @@ export class Q2Popover {
         const hasPlatformDimensions = Object.keys((_b = (_a = window.Tecton) === null || _a === void 0 ? void 0 : _a.platformDimensions) !== null && _b !== void 0 ? _b : {}).length > 0;
         return isIframe && hasPlatformDimensions;
     }
+    get supportsPopoverAPI() {
+        return Object.hasOwn(HTMLElement.prototype, 'popover');
+    }
     addViewportListeners() {
         var _a;
         window.addEventListener('resize', this.viewPortOrientationChanged);
-        // #region remove when Popover API is supported in iOS
-        window.addEventListener('scroll', this.viewPortChanged, { passive: true, capture: true });
-        (_a = screen === null || screen === void 0 ? void 0 : screen.orientation) === null || _a === void 0 ? void 0 : _a.addEventListener('change', this.viewPortOrientationChanged);
+        visualViewport === null || visualViewport === void 0 ? void 0 : visualViewport.addEventListener('resize', this.viewPortChanged);
+        if (isInScrollableContainer(this.hostElement) && !isMobile()) {
+            window.addEventListener('scroll', this.viewPortChanged, { passive: true, capture: true });
+        }
+        (_a = screen === null || screen === void 0 ? void 0 : screen.orientation) === null || _a === void 0 ? void 0 : _a.addEventListener('orientationchange', this.viewPortOrientationChanged);
         window.addEventListener('orientationchange', this.viewPortOrientationChanged);
-        // #endregion
+    }
+    removeViewportListeners() {
+        var _a;
+        window.removeEventListener('resize', this.viewPortOrientationChanged);
+        visualViewport === null || visualViewport === void 0 ? void 0 : visualViewport.removeEventListener('resize', this.viewPortChanged);
+        window.removeEventListener('scroll', this.viewPortChanged, { capture: true });
+        (_a = screen === null || screen === void 0 ? void 0 : screen.orientation) === null || _a === void 0 ? void 0 : _a.removeEventListener('orientationchange', this.viewPortOrientationChanged);
+        window.removeEventListener('orientationchange', this.viewPortOrientationChanged);
     }
     clearCSSProperties() {
         this.containerElement.style.removeProperty('--comp-pop-max-height');
@@ -163,9 +206,25 @@ export class Q2Popover {
         this.containerElement.style.removeProperty('--comp-pop-width');
         this.containerElement.style.removeProperty('--comp-pop-opacity');
     }
+    setDirectionAndShow(direction) {
+        // Due to some runtime inconsistency across devices/browsers we need to add one more check here because the
+        // popover can be closed between the time the popover is opened and the time the direction is determined
+        const isOpen = this.open;
+        if (!isOpen)
+            return;
+        this.currentDirection = direction;
+        if (this.mode === 'legacy' || !this.supportsPopoverAPI) {
+            this.show = true;
+            this.setAbsoluteCSSProperties();
+        }
+        else {
+            this.setPopoverAPICSSProperties();
+            this.containerElement.showPopover();
+        }
+    }
     async determinePopDirection() {
         var _a, _b, _c;
-        const { containerElement, controlElement, actualDirection, displayBuffer } = this;
+        const { containerElement, controlElement, providedDirection, displayBuffer } = this;
         if (containerElement)
             containerElement.style.maxHeight = null;
         await waitForNextPaint();
@@ -178,20 +237,23 @@ export class Q2Popover {
         let maxSpaceAbove;
         let maxSpaceBelow;
         if (isModule) {
-            const { outletOffset = 0, innerHeight = window.innerHeight } = ((_c = window.Tecton) === null || _c === void 0 ? void 0 : _c.platformDimensions) || {};
-            const distanceToIframeBottom = window.visualViewport.height - controlBottom;
-            const viewableSpaceBelow = innerHeight - (outletOffset + controlBottom);
+            const { outletOffset = 0, innerHeight = window.innerHeight, top: topBarHeight = 0, bottom: bottomBarHeight = 0, } = ((_c = window.Tecton) === null || _c === void 0 ? void 0 : _c.platformDimensions) || {};
+            const distanceToIframeBottom = window.innerHeight - controlBottom;
+            // controlElement position visually on the page
+            const visualControlTop = outletOffset > 0 ? controlTop : controlTop + outletOffset - topBarHeight;
+            const visualControlBottom = outletOffset + controlBottom - topBarHeight;
+            // visual space around the controlElement
+            const viewableSpaceAbove = visualControlTop;
+            const viewableSpaceBelow = innerHeight - bottomBarHeight - visualControlBottom;
+            // calculate space above and below controlElement
             const isIframeShorterThanWindow = distanceToIframeBottom < viewableSpaceBelow;
-            windowHeight = innerHeight;
-            // If the top of the module is below the top of the window we just use the controlTop
-            // Otherwise we need to add the outletOffset to the controlTop
-            maxSpaceAbove = (outletOffset > 0 ? controlTop : controlTop + outletOffset) - displayBuffer;
+            maxSpaceAbove = viewableSpaceAbove - displayBuffer;
             maxSpaceBelow = isIframeShorterThanWindow
                 ? distanceToIframeBottom - displayBuffer
                 : viewableSpaceBelow - displayBuffer;
         }
         else {
-            windowHeight = window.visualViewport.height;
+            windowHeight = window.innerHeight;
             maxSpaceAbove = controlTop - displayBuffer;
             maxSpaceBelow = windowHeight - controlBottom - displayBuffer;
         }
@@ -200,7 +262,7 @@ export class Q2Popover {
         const shouldUpdateMaxHeight = !containerElement.style.getPropertyValue('--comp-pop-max-height') || this.orientationChanged;
         // we do not want to constantly update the max-height after an orientation change, so we switch this back to false
         this.orientationChanged = false;
-        const currentOrDetermineDirection = this.currentDirection || actualDirection || directionWithMostSpace;
+        const currentOrDetermineDirection = this.currentDirection || providedDirection || directionWithMostSpace;
         switch (currentOrDetermineDirection) {
             case 'up':
                 if (shouldUpdateMaxHeight) {
@@ -218,75 +280,16 @@ export class Q2Popover {
                 break;
         }
     }
-    removeViewportListeners() {
-        var _a;
-        window.removeEventListener('resize', this.viewPortOrientationChanged);
-        // #region remove when Popover API is supported in iOS
-        window.removeEventListener('scroll', this.viewPortChanged);
-        (_a = screen === null || screen === void 0 ? void 0 : screen.orientation) === null || _a === void 0 ? void 0 : _a.removeEventListener('orientationchange', this.viewPortOrientationChanged);
-        window.removeEventListener('orientationchange', this.viewPortOrientationChanged);
-        // #endregion
-    }
-    setDirectionAndShow(direction) {
-        this.setRootElement();
-        // Due to some runtime inconsistency across devices/browsers we need to add one more check here because the
-        // popover can be closed between the time the popover is opened and the time the direction is determined
-        const isOpen = this.open;
-        if (!isOpen)
-            return;
-        this.currentDirection = direction;
-        this.show = true;
-        if (this.mode === 'legacy') {
-            this.setAbsoluteCSSProperties();
-        }
-        else {
-            this.setFixedCSSProperties();
-        }
-    }
-    setRootElement() {
-        let currentElement = this.hostElement;
-        while (currentElement && currentElement !== document.documentElement) {
-            const computedStyle = window.getComputedStyle(currentElement);
-            // Check if the element has any styles applied that create a new containg block
-            if (computedStyle.transform !== 'none' ||
-                computedStyle.filter !== 'none' ||
-                computedStyle.perspective !== 'none' ||
-                computedStyle.containerType !== 'normal' ||
-                ['transform', 'perspective', 'filter'].includes(computedStyle.willChange) ||
-                ['layout', 'paint', 'strict', 'content'].includes(computedStyle.contain)) {
-                this.rootElementRect = currentElement.getBoundingClientRect();
-                return;
-            }
-            const rootNode = currentElement.getRootNode();
-            const isRootNodeWebComponent = typeof ShadowRoot !== 'undefined' &&
-                rootNode instanceof ShadowRoot &&
-                rootNode.host instanceof HTMLElement;
-            if (isRootNodeWebComponent) {
-                currentElement = rootNode.host;
-            }
-            else {
-                currentElement = currentElement.parentElement;
-            }
-        }
-        // Return the document's bounding rect if no element is found
-        this.rootElementRect = {
-            top: 0,
-            bottom: 0,
-            left: 0,
-            right: 0,
-            height: window.visualViewport.height,
-            width: window.visualViewport.width,
-        };
-    }
-    // #endregion
-    // #region Render Methods
+    /// DOM ///
     render() {
-        const containerClasses = ['container', this.currentDirection];
+        const containerClasses = ['container', this.currentDirection, this.align];
         if (this.show)
             containerClasses.push('show');
+        if (this.block)
+            containerClasses.push('block');
         if (this.mode === 'legacy')
             containerClasses.push('legacy');
-        return (h("div", { key: 'a58234dadb51baed9f1013b44ec6f1e2b3459cb0', ref: el => (this.containerElement = el), class: containerClasses.join(' '), "test-id": "outerContainer" }, h("div", { key: '50fb0083b7eeee5a654e0e9ef405d104cbe08b3c', ref: el => (this.contentElement = el), class: "content" }, h("slot", { key: 'c3a2cb60d4c19261cb5c8e568505d524f9405580' }))));
+        return (h("div", { key: 'b4cca12b46de7d0a8cd753163d4b08c4c0b88d47', ref: el => (this.containerElement = el), class: containerClasses.join(' '), "test-id": "outerContainer", tabIndex: -1, popover: "manual" }, h("div", { key: 'e9ff3b3d8511d0601e7bfe142042138535029aa9', ref: el => (this.contentElement = el), class: "content" }, h("slot", { key: 'c183a54fecb2e55d84ab2a0b39e7dbd4a4db6282' }))));
     }
     static get is() { return "q2-popover"; }
     static get encapsulation() { return "shadow"; }
@@ -302,6 +305,23 @@ export class Q2Popover {
     }
     static get properties() {
         return {
+            "direction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'up' | 'down'",
+                    "resolved": "\"down\" | \"up\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Force the direction of the popover when it opens.\nIf no value is passed, the component will auto-detect the direction based on available space."
+                },
+                "attribute": "direction",
+                "reflect": true
+            },
             "align": {
                 "type": "string",
                 "mutable": false,
@@ -317,6 +337,24 @@ export class Q2Popover {
                     "text": "Aligns the popover to the left or right side of the control element."
                 },
                 "attribute": "align",
+                "reflect": true,
+                "defaultValue": "'left'"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls whether the popover is open or closed."
+                },
+                "attribute": "open",
                 "reflect": true
             },
             "block": {
@@ -356,22 +394,23 @@ export class Q2Popover {
                     "text": "The element that controls the popover's behavior."
                 }
             },
-            "direction": {
+            "mode": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'up' | 'down'",
-                    "resolved": "\"down\" | \"up\"",
+                    "original": "'legacy'",
+                    "resolved": "\"legacy\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Force the direction of the popover when it opens.\nIf no value is passed, the component will auto-detect the direction based on available space."
+                    "text": ""
                 },
-                "attribute": "direction",
-                "reflect": true
+                "attribute": "mode",
+                "reflect": false,
+                "defaultValue": "null"
             },
             "minHeight": {
                 "type": "number",
@@ -392,41 +431,6 @@ export class Q2Popover {
                 },
                 "attribute": "min-height",
                 "reflect": false
-            },
-            "mode": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'legacy'",
-                    "resolved": "\"legacy\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "mode",
-                "reflect": false,
-                "defaultValue": "null"
-            },
-            "open": {
-                "type": "boolean",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Controls whether the popover is open or closed."
-                },
-                "attribute": "open",
-                "reflect": true
             }
         };
     }
@@ -456,22 +460,14 @@ export class Q2Popover {
     }
     static get methods() {
         return {
-            "scrollContainerTo": {
+            "toggle": {
                 "complexType": {
-                    "signature": "(options: ScrollToOptions) => Promise<void>",
-                    "parameters": [{
-                            "name": "options",
-                            "type": "ScrollToOptions",
-                            "docs": ""
-                        }],
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
                     "references": {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
-                        },
-                        "ScrollToOptions": {
-                            "location": "global",
-                            "id": "global::ScrollToOptions"
                         }
                     },
                     "return": "Promise<void>"
@@ -481,14 +477,22 @@ export class Q2Popover {
                     "tags": []
                 }
             },
-            "toggle": {
+            "scrollContainerTo": {
                 "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
+                    "signature": "(options: ScrollToOptions) => Promise<void>",
+                    "parameters": [{
+                            "name": "options",
+                            "type": "ScrollToOptions",
+                            "docs": ""
+                        }],
                     "references": {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
+                        },
+                        "ScrollToOptions": {
+                            "location": "global",
+                            "id": "global::ScrollToOptions"
                         }
                     },
                     "return": "Promise<void>"
@@ -503,11 +507,11 @@ export class Q2Popover {
     static get elementRef() { return "hostElement"; }
     static get watchers() {
         return [{
-                "propName": "minHeight",
-                "methodName": "minHeightProvided"
-            }, {
                 "propName": "open",
                 "methodName": "openChanged"
+            }, {
+                "propName": "minHeight",
+                "methodName": "minHeightProvided"
             }];
     }
     static get listeners() {