q2-tecton-elements 1.71.4 → 1.73.0

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

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, g as getElement, h, H as Host } from './index-Cqkz7Bnm.js';
 import { m as mirrorEmit } from './mirror-emit-DUjY_ucm.js';
 import { b as hasValidAncestor } from './component-DaQM9u3s.js';
-import { l as loc, n as nextPaint, o as overrideFocus, i as isEventFromElement, w as waitForNextPaint, v as isVisible, q as handleDeprecationWarning, x as isInFixedPositionContext, y as isInScrollableContainer, g as isMobile } from './index-Cps4jSQM.js';
+import { l as loc, n as nextPaint, o as overrideFocus, i as isEventFromElement, w as waitForNextPaint, v as isVisible, q as handleDeprecationWarning, x as isInFixedPositionContext, y as isInScrollableContainer, g as isMobile } from './index-CP8pXJ-l.js';
 
 const ClickElsewhere = class {
     constructor(hostRef) {
@@ -515,6 +515,26 @@ const Q2OptionList = class {
             option.role = optionRole;
         });
     }
+    findScrollableAncestor(node) {
+        var _a, _b;
+        let current = node;
+        while (current) {
+            if (current instanceof HTMLElement && current !== node) {
+                const overflowY = getComputedStyle(current).overflowY;
+                // Skip html/body so page-level scroll isn't treated as our container.
+                if ((overflowY === 'auto' || overflowY === 'scroll') &&
+                    current !== document.documentElement &&
+                    current !== document.body) {
+                    return current;
+                }
+            }
+            const slot = current.assignedSlot;
+            const parent = current.parentNode;
+            const shadowHost = current.host;
+            current = (_b = (_a = slot !== null && slot !== void 0 ? slot : parent) !== null && _a !== void 0 ? _a : shadowHost) !== null && _b !== void 0 ? _b : null;
+        }
+        return null;
+    }
     focusSelectedSibling(option) {
         const { allVisibleOptions, allOptions } = this;
         const hasNoSiblings = allVisibleOptions.length < 2;
@@ -596,9 +616,18 @@ const Q2OptionList = class {
         const activeOption = this.allOptions[this.activeIndex];
         if (!activeOption)
             return;
-        const { scrollX, scrollY } = window;
-        activeOption.scrollIntoView({ block: 'center' });
-        window.scrollTo(scrollX, scrollY);
+        // Do our own scroll math so `scrollIntoView` doesn't cascade to the parent window in an SDK iframe.
+        const container = this.findScrollableAncestor(activeOption);
+        if (container) {
+            if (container.scrollHeight > container.clientHeight) {
+                const optionRect = activeOption.getBoundingClientRect();
+                const containerRect = container.getBoundingClientRect();
+                const optionCenter = optionRect.top - containerRect.top + optionRect.height / 2;
+                container.scrollTop += optionCenter - containerRect.height / 2;
+            }
+            return;
+        }
+        activeOption.scrollIntoView({ block: 'nearest' });
     }
     searchOptions(key, shouldSelect) {
         this.searchString = key;
@@ -682,7 +711,7 @@ const Q2OptionList = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (h(Host, { key: '14f2a8ab97077ed7b93d746b75f89b98f416a55d' }, h("div", { key: '1184c5d8d4cf8af63a60bef1282d6442b8539cf6', class: "content", ref: el => (this.contentElement = el), onFocusout: this.focusoutHandler }, h("div", { key: '5dcb6a82f1759e46d5e742e72075bf3dfa3c6d70', class: "options", "aria-label": loc('tecton.element.optionList.label', [this.label]), "aria-multiselectable": this.type === 'menu' ? undefined : this.multiple ? 'true' : undefined, role: this.type || 'listbox', onKeyDown: this.internalKeydownHandler, onClick: this.clickHandler }, h("slot", { key: '39372ab91b081ba124ff4c4dc04fc0c84be7a4ad' })))));
+        return (h(Host, { key: '19cadb5668db33a912951df4ec0e81a74b2b78ce' }, h("div", { key: '1d5a8f310ee97bc2189b839ee3d87e08bf0fa269', class: "content", ref: el => (this.contentElement = el), onFocusout: this.focusoutHandler }, h("div", { key: '24b1616962a9b544fb6215acc1e6edb4f12a5a03', class: "options", "aria-label": loc('tecton.element.optionList.label', [this.label]), "aria-multiselectable": this.type === 'menu' ? undefined : this.multiple ? 'true' : undefined, role: this.type || 'listbox', onKeyDown: this.internalKeydownHandler, onClick: this.clickHandler }, h("slot", { key: 'eeb0342b7c319f5f5af95daa54dcaa732c3159d9' })))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -696,7 +725,7 @@ const Q2OptionList = class {
 };
 Q2OptionList.style = q2OptionListCss();
 
-const q2PopoverCss = () => `*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}.legacy.container{display:none}.legacy.show{display:block;z-index:var(--tct-popover-z-index, 50)}@keyframes popoverOpen{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}@keyframes popoverClose{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0.95)}}:popover-open,.show{position:var(--comp-pop-position, absolute);margin:0;padding:var(--tct-popover-padding, 0);overflow:auto;background:var(--tct-popover-background, var(--app-white, #ffffff));backdrop-filter:var(--tct-popover-backdrop-filter, none);color:var(--tct-popover-font-color, inherit);min-width:var(--tct-popover-min-width, 135px);width:var(--tct-popover-width, auto);margin-block:var(--tct-popover-margin-block, 0);box-shadow:var(--tct-popover-box-shadow, var(--app-shadow-3, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)));border-width:var(--tct-popover-border-width, 0);border-style:solid;border-color:var(--tct-popover-border-color, transparent);border-radius:var(--tct-popover-border-radius, 0);max-height:var(--comp-pop-max-height);left:var(--comp-pop-left);opacity:var(--comp-pop-opacity, 0);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 4px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}:popover-open.animating-open,.show.animating-open{animation-name:popoverOpen;animation-duration:var(--tct-popover-open-animation-duration, var(--t-tween-time-in-1, 150ms));animation-timing-function:var(--tct-popover-open-animation-timing-function, ease-out);animation-fill-mode:var(--tct-popover-open-animation-fill-mode, forwards)}:popover-open.animating-close,.show.animating-close{animation-name:popoverClose;animation-duration:var(--tct-popover-close-animation-duration, var(--t-tween-time-out-1, 100ms));animation-timing-function:var(--tct-popover-close-animation-timing-function, ease-in);animation-fill-mode:var(--tct-popover-close-animation-fill-mode, forwards)}:popover-open.block,.show.block{right:unset;width:var(--comp-pop-width);min-width:var(--tct-popover-min-width, unset)}:popover-open.left,.show.left{left:var(--comp-pop-left);right:unset}:popover-open.right,.show.right{right:var(--comp-pop-right);left:unset}:popover-open.down,.show.down{top:var(--tct-popover-top, var(--comp-pop-top));bottom:unset}:popover-open.up,.show.up{top:unset;bottom:var(--comp-pop-bottom)}:popover-open.down.left:not(.mobile),.show.down.left:not(.mobile){transform-origin:top left}:popover-open.down.right:not(.mobile),.show.down.right:not(.mobile){transform-origin:top right}:popover-open.up.left:not(.mobile),.show.up.left:not(.mobile){transform-origin:bottom left}:popover-open.up.right:not(.mobile),.show.up.right:not(.mobile){transform-origin:bottom right}:popover-open.mobile.down,.show.mobile.down{transform-origin:center top}:popover-open.mobile.up,.show.mobile.up{transform-origin:center bottom}:popover-open::-webkit-scrollbar,.show::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}:popover-open::-webkit-scrollbar-thumb,.show::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}:popover-open::-webkit-scrollbar-track,.show::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}click-elsewhere{position:relative;display:block}`;
+const q2PopoverCss = () => `*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}.legacy.container{display:none}.legacy.show{display:block;z-index:var(--tct-popover-z-index, 50)}@keyframes popoverOpen{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}@keyframes popoverClose{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0.95)}}:popover-open,.show{position:var(--comp-pop-position, absolute);margin:0;padding:var(--tct-popover-padding, 0);overflow:auto;overscroll-behavior:contain;background:var(--tct-popover-background, var(--app-white, #ffffff));backdrop-filter:var(--tct-popover-backdrop-filter, none);color:var(--tct-popover-font-color, inherit);min-width:var(--tct-popover-min-width, 135px);width:var(--tct-popover-width, auto);margin-block:var(--tct-popover-margin-block, 0);box-shadow:var(--tct-popover-box-shadow, var(--app-shadow-3, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)));border-width:var(--tct-popover-border-width, 0);border-style:solid;border-color:var(--tct-popover-border-color, transparent);border-radius:var(--tct-popover-border-radius, 0);max-height:var(--comp-pop-max-height);left:var(--comp-pop-left);opacity:var(--comp-pop-opacity, 0);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 4px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}:popover-open.animating-open,.show.animating-open{animation-name:popoverOpen;animation-duration:var(--tct-popover-open-animation-duration, var(--t-tween-time-in-1, 150ms));animation-timing-function:var(--tct-popover-open-animation-timing-function, ease-out);animation-fill-mode:var(--tct-popover-open-animation-fill-mode, forwards)}:popover-open.animating-close,.show.animating-close{animation-name:popoverClose;animation-duration:var(--tct-popover-close-animation-duration, var(--t-tween-time-out-1, 100ms));animation-timing-function:var(--tct-popover-close-animation-timing-function, ease-in);animation-fill-mode:var(--tct-popover-close-animation-fill-mode, forwards)}:popover-open.block,.show.block{right:unset;width:var(--comp-pop-width);min-width:var(--tct-popover-min-width, unset)}:popover-open.left,.show.left{left:var(--comp-pop-left);right:unset}:popover-open.right,.show.right{right:var(--comp-pop-right);left:unset}:popover-open.down,.show.down{top:var(--tct-popover-top, var(--comp-pop-top));bottom:unset}:popover-open.up,.show.up{top:var(--comp-pop-top);bottom:unset;translate:0 calc(-100% - var(--app-scale-2x, 10px))}:popover-open.down.left:not(.mobile),.show.down.left:not(.mobile){transform-origin:top left}:popover-open.down.right:not(.mobile),.show.down.right:not(.mobile){transform-origin:top right}:popover-open.up.left:not(.mobile),.show.up.left:not(.mobile){transform-origin:bottom left}:popover-open.up.right:not(.mobile),.show.up.right:not(.mobile){transform-origin:bottom right}:popover-open.mobile.down,.show.mobile.down{transform-origin:center top}:popover-open.mobile.up,.show.mobile.up{transform-origin:center bottom}:popover-open::-webkit-scrollbar,.show::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}:popover-open::-webkit-scrollbar-thumb,.show::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}:popover-open::-webkit-scrollbar-track,.show::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}click-elsewhere{position:relative;display:block}`;
 
 const Q2Popover = class {
     constructor(hostRef) {
@@ -709,6 +738,7 @@ const Q2Popover = class {
         this.displayBuffer = 10;
         this.orientationChanged = false;
         this.pendingAnimationResolve = null;
+        this.platformScrollUnsubscribe = null;
         // #endregion
         // #region State Properties
         this.animationState = 'idle';
@@ -720,11 +750,30 @@ const Q2Popover = class {
         /** Aligns the popover to the left or right side of the control element. */
         this.align = 'left';
         this.mode = null;
+        this.handleInsideScroll = (event) => {
+            const { containerElement } = this;
+            if (!containerElement)
+                return;
+            if (containerElement.scrollHeight > containerElement.clientHeight)
+                return;
+            event.preventDefault();
+        };
         this.handleMinHeight = () => {
             if (this.minHeight) {
                 handleDeprecationWarning(this, 'minHeight', 'prop');
             }
         };
+        this.handleOutsideScroll = (event) => {
+            if (!this.open)
+                return;
+            if (event.composedPath().includes(this.hostElement))
+                return;
+            this.open = false;
+        };
+        this.handlePlatformScroll = () => {
+            if (this.open)
+                this.open = false;
+        };
         this.handlePopoverToggleEvent = (event) => {
             mirrorEmit(this, ['popoverStateChanged', 'tctPopoverStateChanged'], { open: event.newState === 'open' });
         };
@@ -785,10 +834,10 @@ const Q2Popover = class {
             const isScrollableIframe = isModule && isInScrollableContainer(this.hostElement);
             if (currentDirection === 'up') {
                 if (isModule && !isScrollableIframe) {
-                    containerElement.style.setProperty('--comp-pop-bottom', `${window.innerHeight - controlTop}px`);
+                    containerElement.style.setProperty('--comp-pop-top', `${controlTop}px`);
                 }
                 else {
-                    containerElement.style.setProperty('--comp-pop-bottom', `${window.innerHeight - controlTop - scrollY}px`);
+                    containerElement.style.setProperty('--comp-pop-top', `${controlTop + scrollY}px`);
                 }
             }
             if (currentDirection === 'down') {
@@ -839,8 +888,10 @@ const Q2Popover = class {
         this.handleMinHeight();
         if (this.supportsPopoverAPI)
             (_a = this.containerElement) === null || _a === void 0 ? void 0 : _a.addEventListener('toggle', this.handlePopoverToggleEvent);
-        if (this.open)
+        if (this.open) {
+            this.addViewportListeners();
             this.determinePopDirection();
+        }
     }
     // #endregion
     // #region Listeners
@@ -933,14 +984,22 @@ const Q2Popover = class {
         return isNaN(maxHeight) ? undefined : maxHeight;
     }
     addViewportListeners() {
-        var _a;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
         window.addEventListener('resize', this.viewPortOrientationChanged);
-        visualViewport === null || visualViewport === void 0 ? void 0 : visualViewport.addEventListener('resize', this.viewPortChanged);
+        (_b = (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.addEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, '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);
+        (_e = (_d = (_c = window.screen) === null || _c === void 0 ? void 0 : _c.orientation) === null || _d === void 0 ? void 0 : _d.addEventListener) === null || _e === void 0 ? void 0 : _e.call(_d, 'orientationchange', this.viewPortOrientationChanged);
         window.addEventListener('orientationchange', this.viewPortOrientationChanged);
+        if (!isMobile()) {
+            window.addEventListener('scroll', this.handleOutsideScroll, { passive: true, capture: true });
+        }
+        (_f = this.containerElement) === null || _f === void 0 ? void 0 : _f.addEventListener('wheel', this.handleInsideScroll, { passive: false });
+        (_g = this.containerElement) === null || _g === void 0 ? void 0 : _g.addEventListener('touchmove', this.handleInsideScroll, { passive: false });
+        (_h = this.platformScrollUnsubscribe) === null || _h === void 0 ? void 0 : _h.call(this);
+        this.platformScrollUnsubscribe =
+            (_l = (_k = (_j = window.TectonElements) === null || _j === void 0 ? void 0 : _j.platformScrollChanged) === null || _k === void 0 ? void 0 : _k.call(_j, this.handlePlatformScroll)) !== null && _l !== void 0 ? _l : null;
     }
     clearCSSProperties() {
         if (!this.containerElement)
@@ -955,7 +1014,7 @@ const Q2Popover = class {
         this.containerElement.style.removeProperty('--comp-pop-position');
     }
     async determinePopDirection() {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         const { containerElement, controlElement, providedDirection, displayBuffer } = this;
         if (containerElement)
             containerElement.style.maxHeight = null;
@@ -988,9 +1047,10 @@ const Q2Popover = class {
                 : viewableSpaceBelow - displayBuffer;
         }
         else {
-            windowHeight = window.innerHeight;
-            maxSpaceAbove = controlTop - displayBuffer;
-            maxSpaceBelow = windowHeight - controlBottom - displayBuffer;
+            const { height = window.innerHeight, offsetTop = 0 } = (_d = window.visualViewport) !== null && _d !== void 0 ? _d : {};
+            windowHeight = height;
+            maxSpaceAbove = controlTop - offsetTop - displayBuffer;
+            maxSpaceBelow = offsetTop + windowHeight - controlBottom - displayBuffer;
         }
         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)
@@ -1018,12 +1078,17 @@ const Q2Popover = class {
         }
     }
     removeViewportListeners() {
-        var _a;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         window.removeEventListener('resize', this.viewPortOrientationChanged);
-        visualViewport === null || visualViewport === void 0 ? void 0 : visualViewport.removeEventListener('resize', this.viewPortChanged);
+        (_b = (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.removeEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, '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);
+        (_e = (_d = (_c = window.screen) === null || _c === void 0 ? void 0 : _c.orientation) === null || _d === void 0 ? void 0 : _d.removeEventListener) === null || _e === void 0 ? void 0 : _e.call(_d, 'orientationchange', this.viewPortOrientationChanged);
         window.removeEventListener('orientationchange', this.viewPortOrientationChanged);
+        window.removeEventListener('scroll', this.handleOutsideScroll, { capture: true });
+        (_f = this.containerElement) === null || _f === void 0 ? void 0 : _f.removeEventListener('wheel', this.handleInsideScroll);
+        (_g = this.containerElement) === null || _g === void 0 ? void 0 : _g.removeEventListener('touchmove', this.handleInsideScroll);
+        (_h = this.platformScrollUnsubscribe) === null || _h === void 0 ? void 0 : _h.call(this);
+        this.platformScrollUnsubscribe = null;
     }
     setDirectionAndShow(direction) {
         var _a;
@@ -1058,7 +1123,7 @@ const Q2Popover = class {
             containerClasses.push('animating-open');
         if (this.animationState === 'closing')
             containerClasses.push('animating-close');
-        return (h("div", { key: '4fe0c06793144eb83fe53cfc568af81226f78345', ref: el => (this.containerElement = el), class: containerClasses.join(' '), "test-id": "outerContainer", tabIndex: -1, popover: "manual" }, h("div", { key: 'ed5d7c9f5efba8b129d580e68ab6692849332cf4', ref: el => (this.contentElement = el), class: "content" }, h("slot", { key: '4c5d5b9682014b2e94b153ca33a3e0c4dd58d6bb' }))));
+        return (h("div", { key: 'f608766723c6ae6737181318b5baf8b52ed7fc0f', ref: el => (this.containerElement = el), class: containerClasses.join(' '), "test-id": "outerContainer", tabIndex: -1, popover: "manual" }, h("div", { key: '477f1a209cf4abc984a82324d0c6fc07ede82160', ref: el => (this.contentElement = el), class: "content" }, h("slot", { key: '5b48ff13907b952a2cdcffc1b6e271e4982c78ad' }))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/{dataSample-Dm1zpQNi.js → dataSample-CP_VKNqt.js}

@@ -1,4 +1,4 @@
-import { v as each, aH as SINGLE_REFERRING, aD as createHashMap, g as isFunction, a1 as curry, aI as makeSeriesEncodeForAxisCoordSys, aJ as prepareSeriesDataSchema, aK as enableDataStack, aL as SeriesData, aM as CoordinateSystemManager, F as map, aN as getDimensionTypeByAxis, aO as SOURCE_FORMAT_ORIGINAL, E as isArray, aP as getDataItemValue, o as filter, aQ as makeLabelFormatter, aR as getBoundingRect, m as makeInner, aS as getOptionCategoryInterval, aT as shouldShowAllLabels, aU as getPixelPrecision, aV as linearMap, aW as round, _ as __extends, aX as ComponentModel, aY as mixin, d as defaults, aZ as merge, a_ as getLayoutParams, a$ as mergeLayoutParam, b0 as fetchLayoutMode, b1 as OrdinalMeta, i as invert, B as BoundingRect, b2 as applyTransform, b3 as IntervalScale, b4 as getScaleExtent, b5 as increaseInterval, b6 as getLayoutRect, b7 as estimateLabelUnionRect, ai as isObject, z as indexOf, b8 as createScaleByModel, b9 as isCartesian2DSeries, ba as findAxisModels, bb as getDataDimensionsOnAxis, k as keys, bc as isIntervalOrLogScale, bd as niceScaleExtent, be as ifAxisCrossZero, U as Rect, O as Group, bf as layout, bg as AxisBuilder, V as extend, bh as groupTransition, bi as AxisView, bj as Line, bk as subPixelOptimizeLine, bl as ComponentView, a4 as use, bm as install$3, r as retrieve2, ar as ZRText, bn as createTextStyle, bo as windowOpen, h as getECData, bp as retrieveRawValue, R as Sector, y as initProps, bq as isString } from './charting-DOZct-UB.js';
+import { v as each, aJ as SINGLE_REFERRING, aF as createHashMap, g as isFunction, a1 as curry, aK as makeSeriesEncodeForAxisCoordSys, aL as prepareSeriesDataSchema, aM as enableDataStack, aN as SeriesData, aO as CoordinateSystemManager, F as map, aP as getDimensionTypeByAxis, aQ as SOURCE_FORMAT_ORIGINAL, E as isArray, aR as getDataItemValue, o as filter, aS as makeLabelFormatter, aT as getBoundingRect, m as makeInner, aU as getOptionCategoryInterval, aV as shouldShowAllLabels, aW as getPixelPrecision, aX as linearMap, aY as round, _ as __extends, aZ as ComponentModel, a_ as mixin, d as defaults, a$ as merge, b0 as getLayoutParams, b1 as mergeLayoutParam, b2 as fetchLayoutMode, b3 as OrdinalMeta, i as invert, B as BoundingRect, b4 as applyTransform, b5 as IntervalScale, b6 as getScaleExtent, b7 as increaseInterval, b8 as getLayoutRect, b9 as estimateLabelUnionRect, ak as isObject, z as indexOf, ba as createScaleByModel, bb as isCartesian2DSeries, bc as findAxisModels, bd as getDataDimensionsOnAxis, k as keys, be as isIntervalOrLogScale, bf as niceScaleExtent, bg as ifAxisCrossZero, U as Rect, O as Group, bh as layout, bi as AxisBuilder, V as extend, bj as groupTransition, bk as AxisView, bl as Line, bm as subPixelOptimizeLine, bn as ComponentView, a4 as use, bo as install$3, r as retrieve2, at as ZRText, bp as createTextStyle, bq as windowOpen, h as getECData, br as retrieveRawValue, R as Sector, y as initProps, bs as isString } from './charting-DFXJklqs.js';
 
 /**
  * @class

package/dist/esm/date-picker-helpers-D8QnN_AS.js

@@ -0,0 +1,242 @@
+import { d as dateFnsExports } from './index-O1A-ZSZs.js';
+import { l as loc } from './index-CP8pXJ-l.js';
+
+const defaultDisplayFormat = 'MM/DD/YYYY';
+const supportedDisplayFormats = [
+    defaultDisplayFormat,
+    'DD/MM/YYYY',
+    'MM-DD-YYYY',
+    'DD-MM-YYYY',
+    'YYYY-MM-DD',
+];
+const defaultDatePickerStringKeys = {
+    'Choose a date': 'tecton.element.datePicker.calendarLabel',
+    'Dates are shown in your local time zone.': 'tecton.element.datePicker.disclaimer.localTimeZone',
+};
+const isoDatePattern = /^\d{4}-\d{2}-\d{2}$/;
+const isoLikeDatePattern = /^(\d{4})-(\d{1,2})-(\d{1,2})(?:T.*)?$/;
+const slashDatePattern = /^(\d{1,2})\/(\d{1,2})\/(\d{2}|\d{4})$/;
+/** Determines a year for a month and day when typeable input omits the year. */
+function buildInputDate(input, assume) {
+    const [month, day, year] = input.split('/');
+    if (!month)
+        return;
+    if (!day)
+        return new Date(new Date().getFullYear(), Number(month) - 1, 1);
+    if (Number(day) <= 0)
+        return;
+    const selectedYear = (year === null || year === void 0 ? void 0 : year.length) === 4 ? Number(year) : Number(assumeYear(month, day, assume));
+    const date = new Date(selectedYear, Number(month) - 1, Number(day));
+    return dateFnsExports.isValid(date) ? date : undefined;
+}
+/** Formats a valid date as an ISO calendar date. */
+function formatDateISO(value) {
+    if (!dateFnsExports.isValid(value))
+        return;
+    return dateFnsExports.formatISO(value, { representation: 'date' });
+}
+/** Formats a date for an accessible day label. */
+function formatDateFull(value) {
+    if (!dateFnsExports.isValid(value))
+        return;
+    return new Intl.DateTimeFormat('en-US', {
+        month: 'long',
+        day: 'numeric',
+        year: 'numeric',
+        weekday: 'long',
+        timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+    }).format(value);
+}
+/** Returns localized abbreviated day names beginning with Sunday. */
+function getDays() {
+    return [
+        loc('tecton.element.calendar.days.short.Sunday'),
+        loc('tecton.element.calendar.days.short.Monday'),
+        loc('tecton.element.calendar.days.short.Tuesday'),
+        loc('tecton.element.calendar.days.short.Wednesday'),
+        loc('tecton.element.calendar.days.short.Thursday'),
+        loc('tecton.element.calendar.days.short.Friday'),
+        loc('tecton.element.calendar.days.short.Saturday'),
+    ];
+}
+/** Returns localized full day names beginning with Sunday. */
+function getDaysOfWeek() {
+    return [
+        loc('tecton.element.calendar.days.Sunday'),
+        loc('tecton.element.calendar.days.Monday'),
+        loc('tecton.element.calendar.days.Tuesday'),
+        loc('tecton.element.calendar.days.Wednesday'),
+        loc('tecton.element.calendar.days.Thursday'),
+        loc('tecton.element.calendar.days.Friday'),
+        loc('tecton.element.calendar.days.Saturday'),
+    ];
+}
+/** Parses the date picker's public ISO-only value contract. */
+function parseDatePickerValue(value) {
+    if (!value || !isoDatePattern.test(value))
+        return;
+    const [year, month, day] = value.split('-').map(Number);
+    return dateFromParts(year, month, day);
+}
+/** Normalizes a legacy string or Moment-like value for the date picker's ISO-only calendar. */
+function normalizeDatePickerValue(value) {
+    if (!value)
+        return;
+    let date;
+    if (value instanceof Date) {
+        date = value;
+    }
+    else if (isMomentLike(value)) {
+        try {
+            date = value.toDate();
+        }
+        catch (_a) {
+            return;
+        }
+    }
+    else {
+        const input = value.trim();
+        if (!input)
+            return;
+        date = parseDatePickerValue(input);
+        if (!date) {
+            const isoLikeParts = input.match(isoLikeDatePattern);
+            const slashParts = input.match(slashDatePattern);
+            if (isoLikeParts) {
+                date = dateFromParts(Number(isoLikeParts[1]), Number(isoLikeParts[2]), Number(isoLikeParts[3]));
+            }
+            else if (slashParts) {
+                const parsedYear = Number(slashParts[3]);
+                const year = parsedYear < 100 ? (parsedYear >= 69 ? 1900 : 2000) + parsedYear : parsedYear;
+                date = dateFromParts(year, Number(slashParts[1]), Number(slashParts[2]));
+            }
+            else {
+                const parsedDate = new Date(input);
+                date = dateFnsExports.isValid(parsedDate)
+                    ? dateFromParts(parsedDate.getFullYear(), parsedDate.getMonth() + 1, parsedDate.getDate())
+                    : undefined;
+            }
+        }
+    }
+    return formatDateISO(date);
+}
+/** Returns the month and year used to initialize the date picker grid. */
+function setupMonthYear(value = new Date()) {
+    return {
+        monthIndex: value.getMonth(),
+        selectedYear: value.getFullYear(),
+    };
+}
+/** Returns the enabled day indexes represented by a calendar checksum. */
+function getValidDaysOfWeek(checksum = 127) {
+    const validDays = [];
+    for (let day = 0; day < 7; day++) {
+        if (checksum & (1 << day))
+            validDays.push(day);
+    }
+    return checksum > 0 ? validDays : [];
+}
+/** Determines whether a date satisfies the configured bounds and cutoff. */
+function baseValidation(dateValidators, now, newDate) {
+    const isNewDateBeforeStartDate = dateFnsExports.isAfter(dateValidators === null || dateValidators === void 0 ? void 0 : dateValidators.startDate, newDate);
+    const isNewDateAfterEndDate = dateFnsExports.isBefore(dateValidators === null || dateValidators === void 0 ? void 0 : dateValidators.endDate, newDate);
+    const isNowAfterCutoffTime = dateFnsExports.isSameDay(now, newDate) && dateFnsExports.isAfter(now, dateValidators === null || dateValidators === void 0 ? void 0 : dateValidators.cutOffTime);
+    return !(isNewDateBeforeStartDate || isNowAfterCutoffTime || isNewDateAfterEndDate);
+}
+/** Determines whether a date's weekday is enabled. */
+function validateAgainstChecksum(validDaysOfWeek, date) {
+    return validDaysOfWeek.includes(date.getDay());
+}
+/** Determines whether a date is absent from a blacklist. */
+function validateAgainstBlacklist(invalidDates, date) {
+    return !validateAgainstWhitelist(invalidDates, date);
+}
+/** Determines whether a date is present in a whitelist. */
+function validateAgainstWhitelist(validDates, date) {
+    return validDates.some(validDate => dateFnsExports.isSameDay(validDate, date));
+}
+function assumeYear(month, day, assume) {
+    const monthDay = `${month.padStart(2, '0')}/${day.padStart(2, '0')}`;
+    const now = new Date();
+    const currentMonthDay = `${now.getMonth() + 1}`.padStart(2, '0') + `/${now.getDate()}`.padStart(2, '0');
+    let year = now.getFullYear();
+    if (assume === 'future' && currentMonthDay > monthDay)
+        year++;
+    if (assume === 'past' && currentMonthDay < monthDay)
+        year--;
+    return `${year}`;
+}
+function parseDatePickerValues(values) {
+    return (values || []).map(parseDatePickerValue).filter((date) => !!date);
+}
+function dateFromParts(year, month, day) {
+    const date = new Date(0);
+    date.setFullYear(year, month - 1, day);
+    date.setHours(0, 0, 0, 0);
+    if (date.getFullYear() !== year || date.getMonth() !== month - 1 || date.getDate() !== day)
+        return;
+    return date;
+}
+function isMomentLike(value) {
+    return typeof value !== 'string' && typeof (value === null || value === void 0 ? void 0 : value.toDate) === 'function';
+}
+/** Formats a date using one of the date picker's supported numeric display formats. */
+function formatDisplayDate(date, displayFormat) {
+    const separator = displayFormat.includes('-') ? '-' : '/';
+    const month = `${date.getMonth() + 1}`.padStart(2, '0');
+    const day = `${date.getDate()}`.padStart(2, '0');
+    const year = `${date.getFullYear()}`;
+    const dateParts = displayFormat.startsWith('YYYY')
+        ? [year, month, day]
+        : displayFormat.startsWith('DD')
+            ? [day, month, year]
+            : [month, day, year];
+    return dateParts.join(separator);
+}
+/** Formats a date using the legacy Moment-style tokens accepted by q2-calendar. */
+function formatLegacyDisplayDate(date, displayFormat) {
+    const dateFnsFormat = displayFormat
+        .replace(/[d]/g, 'E')
+        .replace(/[D]/g, 'd')
+        .replace(/[Y]/g, 'y')
+        .replace(/[l]/g, 'P')
+        .replace(/[W]/g, 'I');
+    return dateFnsExports.format(date, dateFnsFormat);
+}
+/** Determines whether a date satisfies every configured selection constraint. */
+function isDateSelectable(date, constraints) {
+    const cutoffTime = new Date(constraints.cutoffTime || '');
+    const withinBounds = baseValidation({
+        startDate: parseDatePickerValue(constraints.startDate),
+        endDate: parseDatePickerValue(constraints.endDate),
+        cutOffTime: dateFnsExports.isValid(cutoffTime) ? cutoffTime : undefined,
+    }, new Date(), date);
+    const validDates = parseDatePickerValues(constraints.validDates);
+    const matchesAllowedDates = (validDates === null || validDates === void 0 ? void 0 : validDates.length)
+        ? validateAgainstWhitelist(validDates, date)
+        : validateAgainstChecksum(getValidDaysOfWeek(constraints.daysOfWeekChecksum), date);
+    return (withinBounds &&
+        matchesAllowedDates &&
+        validateAgainstBlacklist(parseDatePickerValues(constraints.invalidDates), date));
+}
+/** Determines whether every date in an inclusive range is selectable. */
+function isRangeSelectable(start, end, constraints) {
+    for (let date = start; date.getTime() <= end.getTime(); date = dateFnsExports.addDays(date, 1)) {
+        if (!isDateSelectable(date, constraints))
+            return false;
+    }
+    return true;
+}
+/** Resolves a date-picker localization key or mapped default string. */
+function localizeDatePickerString(value, substitutions = {}) {
+    if (!value)
+        return '';
+    return loc(defaultDatePickerStringKeys[value] || value, substitutions);
+}
+/** Returns a supported display format, falling back to the date-picker default. */
+function normalizeDisplayFormat(displayFormat) {
+    const normalizedFormat = displayFormat === null || displayFormat === void 0 ? void 0 : displayFormat.toUpperCase();
+    return supportedDisplayFormats.includes(normalizedFormat) ? normalizedFormat : defaultDisplayFormat;
+}
+
+export { getDaysOfWeek as a, formatDisplayDate as b, isRangeSelectable as c, formatDateFull as d, normalizeDatePickerValue as e, formatDateISO as f, getDays as g, formatLegacyDisplayDate as h, isDateSelectable as i, buildInputDate as j, localizeDatePickerString as l, normalizeDisplayFormat as n, parseDatePickerValue as p, setupMonthYear as s };

package/dist/esm/{index-Cps4jSQM.js → index-CP8pXJ-l.js}

@@ -200,7 +200,7 @@ function renderLabel(target) {
     return (h("label", { htmlFor: target.inputId, class: labelClasses.join(' ') }, h("slot", { name: "label" }, label ? loc(label) : undefined, helpText)));
 }
 function hasSlotContent(target, slotName) {
-    return target.querySelector(`[slot="${slotName}"]`) !== null;
+    return Array.from(target.children).some(child => child.getAttribute('slot') === slotName);
 }
 function handleAriaLabel(target) {
     const { ariaLabel } = target;
@@ -289,7 +289,7 @@ const resizeIframe = () => {
 // Handling color attribute (deprecated)
 const handleColor = (target) => {
     if (!target.intent && ['primary', 'secondary'].includes(target.color)) {
-        target.intent = `workflow-${target.color}`;
+        target.intent = target.color;
         target.color = undefined;
     }
 };