q2-tecton-elements 1.67.0 → 1.67.2

package/dist/cjs/click-elsewhere_3.cjs.entry.js

@@ -670,7 +670,7 @@ const Q2OptionList = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (index.h(index.Host, { key: '05e3dbeb1ffe4910f7c3c922311f51e0e34a4771' }, index.h("div", { key: '152c7430207325f6d6bcb6b5253c61528f9338eb', class: "content", ref: el => (this.contentElement = el), onFocusout: this.focusoutHandler }, index.h("div", { key: 'd94b9d6fe8fe5221b44c59424351cd2fa4e2139b', class: "options", "aria-label": index$1.loc('tecton.element.optionList.label', [this.label]), "aria-multiselectable": this.type === 'menu' ? undefined : `${!!this.multiple}`, role: this.type || 'listbox', onKeyDown: this.internalKeydownHandler, onClick: this.clickHandler }, index.h("slot", { key: 'c655e10092d73bdeb985ee08776024c5dbd6fc96' })))));
+        return (index.h(index.Host, { key: '99c8a52ef8c6adbd138bdd4ff40340fabe670903' }, index.h("div", { key: '632777fab876b3ef838e8658de35df410fc1d3b7', class: "content", ref: el => (this.contentElement = el), onFocusout: this.focusoutHandler }, index.h("div", { key: '97079fcb63d10e57ae3e3f1fcbc0a4c307dcda3c', class: "options", "aria-label": index$1.loc('tecton.element.optionList.label', [this.label]), "aria-multiselectable": this.type === 'menu' ? undefined : `${!!this.multiple}`, role: this.type || 'listbox', onKeyDown: this.internalKeydownHandler, onClick: this.clickHandler }, index.h("slot", { key: '07f07e638defb8427f320db9bf3cfb87f6711f9e' })))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {
@@ -692,6 +692,7 @@ const Q2Popover = class {
          */
         this.displayBuffer = 10;
         this.orientationChanged = false;
+        this.pendingAnimationResolve = null;
         // #endregion
         // #region State Properties
         this.animationState = 'idle';
@@ -702,12 +703,6 @@ const Q2Popover = class {
         // #region Public Property API
         /** Aligns the popover to the left or right side of the control element. */
         this.align = 'left';
-        /**
-         * Controls whether the popover is animated when opening/closing.
-         * Default is true (animated). Set to false to disable animations.
-         * Animation is also disabled if the user has enabled prefers-reduced-motion.
-         */
-        this.animated = true;
         this.mode = null;
         this.handleMinHeight = () => {
             if (this.minHeight) {
@@ -719,6 +714,8 @@ const Q2Popover = class {
         };
         this.setAbsoluteCSSProperties = async () => {
             const { controlElement, containerElement, currentDirection, align } = this;
+            if (!containerElement)
+                return;
             if (align === 'right') {
                 containerElement.style.setProperty('--comp-pop-right', '0');
                 containerElement.style.setProperty('--comp-pop-left', 'unset');
@@ -739,11 +736,14 @@ const Q2Popover = class {
             }
             // Wait for one paint to prevent layout thrashing
             await index$1.waitForNextPaint();
-            containerElement.style.setProperty('--comp-pop-opacity', '1');
+            if (this.containerElement)
+                containerElement.style.setProperty('--comp-pop-opacity', '1');
         };
         this.setPopoverAPICSSProperties = async () => {
             var _a, _b, _c;
             const { controlElement, containerElement, currentDirection, isModule, align } = this;
+            if (!containerElement)
+                return;
             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,
@@ -781,7 +781,8 @@ const Q2Popover = class {
             }
             // Wait for one paint to prevent layout thrashing
             await index$1.waitForNextPaint();
-            containerElement.style.setProperty('--comp-pop-opacity', '1');
+            if (this.containerElement)
+                containerElement.style.setProperty('--comp-pop-opacity', '1');
         };
         this.viewPortChanged = () => {
             if (!this.open)
@@ -796,8 +797,13 @@ const Q2Popover = class {
     // #endregion
     // #region Component Lifecycle Events
     disconnectedCallback() {
+        var _a;
         this.removeViewportListeners();
-        this.containerElement.removeEventListener('toggle', this.handlePopoverToggleEvent);
+        if (this.pendingAnimationResolve) {
+            this.pendingAnimationResolve();
+            this.pendingAnimationResolve = null;
+        }
+        (_a = this.containerElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('toggle', this.handlePopoverToggleEvent);
         this.containerElement = null;
         this.contentElement = null;
         this.controlElement = null;
@@ -809,9 +815,10 @@ const Q2Popover = class {
         }
     }
     componentDidLoad() {
+        var _a;
         this.handleMinHeight();
         if (this.supportsPopoverAPI)
-            this.containerElement.addEventListener('toggle', this.handlePopoverToggleEvent);
+            (_a = this.containerElement) === null || _a === void 0 ? void 0 : _a.addEventListener('toggle', this.handlePopoverToggleEvent);
         if (this.open)
             this.determinePopDirection();
     }
@@ -827,7 +834,8 @@ const Q2Popover = class {
     // #endregion
     // #region Public Methods API
     async scrollContainerTo(options) {
-        this.containerElement.scrollTo(options);
+        var _a;
+        (_a = this.containerElement) === null || _a === void 0 ? void 0 : _a.scrollTo(options);
     }
     async toggle() {
         this.open = !this.open;
@@ -848,19 +856,22 @@ const Q2Popover = class {
             this.animationState = 'closing';
             this.removeViewportListeners();
             // Wait for close animation to complete
-            if (this.animated) {
-                await new Promise(resolve => {
-                    const handleAnimationEnd = () => {
-                        this.containerElement.removeEventListener('animationend', handleAnimationEnd);
-                        resolve();
-                    };
-                    this.containerElement.addEventListener('animationend', handleAnimationEnd);
-                });
-            }
-            else {
-                // No animation, proceed immediately
-                await index$1.waitForNextPaint();
-            }
+            await new Promise(resolve => {
+                if (!this.containerElement) {
+                    resolve();
+                    return;
+                }
+                const handleAnimationEnd = () => {
+                    this.pendingAnimationResolve = null;
+                    resolve();
+                };
+                this.pendingAnimationResolve = handleAnimationEnd;
+                this.containerElement.addEventListener('animationend', handleAnimationEnd, { once: true });
+            });
+            if (!this.containerElement)
+                return;
+            if (this.open)
+                return;
             this.currentDirection = undefined;
             this.animationState = 'idle';
             if (this.mode === 'legacy' || !this.supportsPopoverAPI) {
@@ -909,6 +920,8 @@ const Q2Popover = class {
         window.addEventListener('orientationchange', this.viewPortOrientationChanged);
     }
     clearCSSProperties() {
+        if (!this.containerElement)
+            return;
         this.containerElement.style.removeProperty('--comp-pop-max-height');
         this.containerElement.style.removeProperty('--comp-pop-top');
         this.containerElement.style.removeProperty('--comp-pop-bottom');
@@ -923,6 +936,8 @@ const Q2Popover = class {
         if (containerElement)
             containerElement.style.maxHeight = null;
         await index$1.waitForNextPaint();
+        if (!this.containerElement)
+            return;
         const { isModule } = this;
         const { top: controlTop, bottom: controlBottom } = (_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,
@@ -955,13 +970,13 @@ const Q2Popover = class {
         }
         const directionWithMostSpace = maxSpaceAbove > maxSpaceBelow ? 'up' : 'down';
         // We do not want to update the max height once the popover is open unless the page orientation shifts (resize or mobile use cases)
-        const shouldUpdateMaxHeight = !containerElement.style.getPropertyValue('--comp-pop-max-height') || this.orientationChanged;
+        const shouldUpdateMaxHeight = !(containerElement === null || containerElement === void 0 ? void 0 : 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 || providedDirection || directionWithMostSpace;
         switch (currentOrDetermineDirection) {
             case 'up':
-                if (shouldUpdateMaxHeight) {
+                if (shouldUpdateMaxHeight && containerElement) {
                     const priorityMaxHeight = this.validatedMaxHeight || maxSpaceAbove;
                     const maxHeight = Math.min(maxSpaceAbove, priorityMaxHeight);
                     containerElement.style.setProperty('--comp-pop-max-height', `${maxHeight}px`);
@@ -969,7 +984,7 @@ const Q2Popover = class {
                 this.setDirectionAndShow('up');
                 break;
             case 'down':
-                if (shouldUpdateMaxHeight) {
+                if (shouldUpdateMaxHeight && containerElement) {
                     const priorityMaxHeight = this.validatedMaxHeight || maxSpaceBelow;
                     const maxHeight = Math.min(maxSpaceBelow, priorityMaxHeight);
                     containerElement.style.setProperty('--comp-pop-max-height', `${maxHeight}px`);
@@ -987,10 +1002,11 @@ const Q2Popover = class {
         window.removeEventListener('orientationchange', this.viewPortOrientationChanged);
     }
     setDirectionAndShow(direction) {
+        var _a;
         // 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)
+        if (!isOpen || !this.containerElement)
             return;
         this.currentDirection = direction;
         if (this.mode === 'legacy' || !this.supportsPopoverAPI) {
@@ -999,7 +1015,7 @@ const Q2Popover = class {
         }
         else {
             this.setPopoverAPICSSProperties();
-            this.containerElement.showPopover();
+            (_a = this.containerElement) === null || _a === void 0 ? void 0 : _a.showPopover();
         }
     }
     // #endregion
@@ -1014,11 +1030,11 @@ const Q2Popover = class {
             containerClasses.push('block');
         if (this.mode === 'legacy')
             containerClasses.push('legacy');
-        if (this.animated && this.animationState === 'opening')
+        if (this.animationState === 'opening')
             containerClasses.push('animating-open');
-        if (this.animated && this.animationState === 'closing')
+        if (this.animationState === 'closing')
             containerClasses.push('animating-close');
-        return (index.h("div", { key: 'b5166478bf50c313679ce71b381e6fe305e03446', ref: el => (this.containerElement = el), class: containerClasses.join(' '), "test-id": "outerContainer", tabIndex: -1, popover: "manual" }, index.h("div", { key: '9e939ece2775d98418f726066c9e7b1e7dcb7fde', ref: el => (this.contentElement = el), class: "content" }, index.h("slot", { key: 'dc16dc214cf71f050e49057f6f35271bb141b692' }))));
+        return (index.h("div", { key: '32b8669d138922c8229232cbeffc24c12142a603', ref: el => (this.containerElement = el), class: containerClasses.join(' '), "test-id": "outerContainer", tabIndex: -1, popover: "manual" }, index.h("div", { key: 'c4a9582bcf7ed063aadd40a214606d32b406f05f', ref: el => (this.contentElement = el), class: "content" }, index.h("slot", { key: 'e64707b4b54de39c9d9a487e4bdc6d4d5ca8b16f' }))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {