q2-tecton-elements 1.49.2 → 1.49.4

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

@@ -1 +1 @@
-{"version":3,"file":"q2-popover.js","sourceRoot":"","sources":["../../../../src/components/q2-popover/q2-popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    Prop,\n    h,\n    ComponentInterface,\n    Element,\n    Watch,\n    Method,\n    Listen,\n    EventEmitter,\n    Event,\n    State,\n} from '@stencil/core';\nimport { handleDeprecationWarning, waitForNextPaint } from '../../utils';\n\n@Component({ tag: 'q2-popover', shadow: true, styleUrl: 'q2-popover.scss' })\nexport class Q2Popover implements ComponentInterface {\n    // #region Own Properties\n\n    containerElement: HTMLDivElement;\n    contentElement: HTMLDivElement;\n    /**\n     * The number of pixels to leave between the popover and the edge of the viewport\n     */\n    displayBuffer = 10;\n    /** remove when Popover API is supported in iOS */\n    orientationChanged: boolean = false;\n    rootElementRect: DOMRect;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    currentDirection: 'down' | 'up' = undefined;\n\n    // remove `show` when Popover API is supported in iOS\n    @State()\n    show: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Aligns the popover to the left or right side of the control element. */\n    @Prop({ reflect: true })\n    align: 'left' | 'right';\n\n    /** Indicates the popover will match the width of its parent element. */\n    @Prop({ reflect: true })\n    block: boolean;\n\n    /** The element that controls the popover's behavior. */\n    @Prop()\n    controlElement: HTMLElement;\n\n    /**\n     * Force the direction of the popover when it opens.\n     * If no value is passed, the component will auto-detect the direction based on available space.\n     */\n    @Prop({ reflect: true })\n    direction: 'up' | 'down';\n\n    /** @deprecated */\n    @Prop()\n    minHeight: number;\n\n    @Prop()\n    mode: 'legacy' = null;\n\n    /** Controls whether the popover is open or closed. */\n    @Prop({ reflect: true, mutable: true })\n    open: boolean;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the popover is opened or closed.\n     */\n    @Event()\n    popoverStateChanged: EventEmitter<{ open: boolean }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.removeViewportListeners();\n    }\n\n    componentDidLoad() {\n        this.handleMinHeight();\n        if (this.open) this.determinePopDirection();\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('popoverState')\n    popoverStateHandler(event: CustomEvent<{ open: boolean }>) {\n        const {\n            detail: { open },\n        } = event;\n        if (open === this.open) return;\n\n        this.open = open;\n        event.stopPropagation();\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    @Method()\n    async scrollContainerTo(options: ScrollToOptions) {\n        this.containerElement.scrollTo(options);\n    }\n\n    @Method()\n    async toggle() {\n        this.open = !this.open;\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('minHeight')\n    minHeightProvided() {\n        this.handleMinHeight();\n    }\n\n    @Watch('open')\n    async openChanged(open: boolean) {\n        this.setRootElement();\n        this.popoverStateChanged.emit({ open });\n\n        if (open) {\n            this.addViewportListeners();\n            this.determinePopDirection();\n        } else {\n            this.removeViewportListeners();\n            this.currentDirection = undefined;\n            this.show = false;\n            await waitForNextPaint();\n            this.clearCSSProperties();\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get actualDirection(): 'up' | 'down' | undefined {\n        const { direction } = this;\n        switch (direction) {\n            case 'up':\n            case 'down':\n                return direction;\n            default:\n                return undefined;\n        }\n    }\n\n    get isModule() {\n        const isIframe = window !== window.top;\n        const hasPlatformDimensions = Object.keys(window.Tecton?.platformDimensions ?? {}).length > 0;\n        return isIframe && hasPlatformDimensions;\n    }\n\n    addViewportListeners() {\n        window.addEventListener('resize', this.viewPortOrientationChanged);\n        // #region remove when Popover API is supported in iOS\n        window.addEventListener('scroll', this.viewPortChanged, { passive: true, capture: true });\n        screen?.orientation?.addEventListener('change', this.viewPortOrientationChanged);\n        window.addEventListener('orientationchange', this.viewPortOrientationChanged);\n\n        // #endregion\n    }\n\n    clearCSSProperties() {\n        this.containerElement.style.removeProperty('--comp-pop-max-height');\n        this.containerElement.style.removeProperty('--comp-pop-top');\n        this.containerElement.style.removeProperty('--comp-pop-bottom');\n        this.containerElement.style.removeProperty('--comp-pop-left');\n        this.containerElement.style.removeProperty('--comp-pop-right');\n        this.containerElement.style.removeProperty('--comp-pop-width');\n        this.containerElement.style.removeProperty('--comp-pop-opacity');\n    }\n\n    async determinePopDirection() {\n        const { containerElement, controlElement, actualDirection, displayBuffer } = this;\n        if (containerElement) containerElement.style.maxHeight = null;\n\n        await waitForNextPaint();\n\n        const { isModule } = this;\n        const { top: controlTop, bottom: controlBottom } = controlElement?.getBoundingClientRect?.() ?? {\n            top: 0,\n            bottom: 0,\n        };\n\n        let windowHeight: number;\n        let maxSpaceAbove: number;\n        let maxSpaceBelow: number;\n\n        if (isModule) {\n            const { outletOffset = 0, innerHeight = window.innerHeight } = window.Tecton?.platformDimensions || {};\n            const distanceToIframeBottom = window.visualViewport.height - controlBottom;\n            const viewableSpaceBelow = innerHeight - (outletOffset + controlBottom);\n            const isIframeShorterThanWindow = distanceToIframeBottom < viewableSpaceBelow;\n            windowHeight = innerHeight;\n            // If the top of the module is below the top of the window we just use the controlTop\n            // Otherwise we need to add the outletOffset to the controlTop\n            maxSpaceAbove = (outletOffset > 0 ? controlTop : controlTop + outletOffset) - displayBuffer;\n            maxSpaceBelow = isIframeShorterThanWindow\n                ? distanceToIframeBottom - displayBuffer\n                : viewableSpaceBelow - displayBuffer;\n        } else {\n            windowHeight = window.visualViewport.height;\n            maxSpaceAbove = controlTop - displayBuffer;\n            maxSpaceBelow = windowHeight - controlBottom - displayBuffer;\n        }\n\n        const directionWithMostSpace: 'up' | 'down' = maxSpaceAbove > maxSpaceBelow ? 'up' : 'down';\n\n        // We do not want to update the max height once the popover is open unless the page orientation shifts (resize or mobile use cases)\n        const shouldUpdateMaxHeight =\n            !containerElement.style.getPropertyValue('--comp-pop-max-height') || this.orientationChanged;\n        // we do not want to constantly update the max-height after an orientation change, so we switch this back to false\n        this.orientationChanged = false;\n        const currentOrDetermineDirection = this.currentDirection || actualDirection || directionWithMostSpace;\n\n        switch (currentOrDetermineDirection) {\n            case 'up':\n                if (shouldUpdateMaxHeight) {\n                    containerElement.style.setProperty('--comp-pop-max-height', `${maxSpaceAbove}px`);\n                }\n                this.setDirectionAndShow('up');\n                break;\n            case 'down':\n                if (shouldUpdateMaxHeight) {\n                    containerElement.style.setProperty('--comp-pop-max-height', `${maxSpaceBelow}px`);\n                }\n                this.setDirectionAndShow('down');\n                break;\n            default:\n                break;\n        }\n    }\n\n    handleMinHeight = () => {\n        if (this.minHeight) {\n            handleDeprecationWarning(this, 'minHeight', 'prop');\n        }\n    };\n\n    removeViewportListeners() {\n        window.removeEventListener('resize', this.viewPortOrientationChanged);\n        // #region remove when Popover API is supported in iOS\n        window.removeEventListener('scroll', this.viewPortChanged);\n        screen?.orientation?.removeEventListener('orientationchange', this.viewPortOrientationChanged);\n        window.removeEventListener('orientationchange', this.viewPortOrientationChanged);\n\n        // #endregion\n    }\n\n    setAbsoluteCSSProperties = async () => {\n        const { controlElement, containerElement, currentDirection, align } = this;\n\n        if (align === 'right') {\n            containerElement.style.setProperty('--comp-pop-right', '0');\n            containerElement.style.setProperty('--comp-pop-left', 'unset');\n        } else {\n            containerElement.style.setProperty('--comp-pop-left', '0');\n            containerElement.style.setProperty('--comp-pop-right', 'unset');\n        }\n\n        if (this.block) {\n            containerElement.style.setProperty('--comp-pop-width', '100%');\n        }\n\n        if (currentDirection === 'up') {\n            const controlStyle = getComputedStyle(controlElement);\n            const controlSize =\n                parseInt(controlStyle.height || '0') +\n                parseInt(controlStyle.borderTopWidth || '0') +\n                parseInt(controlStyle.borderBottomWidth || '0');\n\n            containerElement.style.setProperty('--comp-pop-bottom', `${controlSize}px`);\n        }\n\n        // Wait for one paint to prevent layout thrashing\n        await waitForNextPaint();\n        containerElement.style.setProperty('--comp-pop-opacity', '1');\n    };\n\n    setDirectionAndShow(direction: 'up' | 'down') {\n        this.setRootElement();\n        // Due to some runtime inconsistency across devices/browsers we need to add one more check here because the\n        // popover can be closed between the time the popover is opened and the time the direction is determined\n        const isOpen = this.open;\n        if (!isOpen) return;\n\n        this.currentDirection = direction;\n        this.show = true;\n        if (this.mode === 'legacy') {\n            this.setAbsoluteCSSProperties();\n        } else {\n            this.setFixedCSSProperties();\n        }\n    }\n\n    setFixedCSSProperties = async () => {\n        const { controlElement, containerElement, currentDirection, rootElementRect } = this;\n        const {\n            top: controlTop,\n            bottom: controlBottom,\n            left: controlLeft,\n            right: controlRight,\n        } = controlElement?.getBoundingClientRect?.() ?? {\n            top: 0,\n            bottom: 0,\n            left: 0,\n            right: 0,\n        };\n        const popoverLeft: number = controlLeft - rootElementRect.left;\n\n        if (this.block) containerElement.style.setProperty('--comp-pop-width', `${controlElement.offsetWidth || 0}px`);\n        containerElement.style.setProperty('--comp-pop-left', `${popoverLeft}px`);\n        containerElement.style.setProperty(\n            '--comp-pop-right',\n            `${rootElementRect.width + rootElementRect.left - controlRight}px`\n        );\n\n        if (currentDirection === 'up') {\n            containerElement.style.setProperty(\n                '--comp-pop-bottom',\n                `${rootElementRect.height + rootElementRect.top - controlTop}px`\n            );\n        }\n        if (currentDirection === 'down') {\n            containerElement.style.setProperty('--comp-pop-top', `${controlBottom - rootElementRect.top}px`);\n        }\n\n        // Wait for one paint to prevent layout thrashing\n        await waitForNextPaint();\n        containerElement.style.setProperty('--comp-pop-opacity', '1');\n    };\n\n    setRootElement() {\n        let currentElement: HTMLElement = this.hostElement;\n\n        while (currentElement && currentElement !== document.documentElement) {\n            const computedStyle = window.getComputedStyle(currentElement);\n\n            // Check if the element has any styles applied that create a new containg block\n            if (\n                computedStyle.transform !== 'none' ||\n                computedStyle.filter !== 'none' ||\n                computedStyle.perspective !== 'none' ||\n                computedStyle.containerType !== 'normal' ||\n                ['transform', 'perspective', 'filter'].includes(computedStyle.willChange) ||\n                ['layout', 'paint', 'strict', 'content'].includes(computedStyle.contain)\n            ) {\n                this.rootElementRect = currentElement.getBoundingClientRect();\n                return;\n            }\n\n            const rootNode = currentElement.getRootNode();\n            const isRootNodeWebComponent =\n                typeof ShadowRoot !== 'undefined' &&\n                rootNode instanceof ShadowRoot &&\n                rootNode.host instanceof HTMLElement;\n            if (isRootNodeWebComponent) {\n                currentElement = rootNode.host;\n            } else {\n                currentElement = currentElement.parentElement;\n            }\n        }\n\n        // Return the document's bounding rect if no element is found\n        this.rootElementRect = {\n            top: 0,\n            bottom: 0,\n            left: 0,\n            right: 0,\n            height: window.visualViewport.height,\n            width: window.visualViewport.width,\n        } as DOMRect;\n    }\n\n    viewPortChanged = () => {\n        if (!this.open) return;\n        this.determinePopDirection();\n    };\n\n    viewPortOrientationChanged = () => {\n        this.orientationChanged = true;\n        this.viewPortChanged();\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const containerClasses = ['container', this.currentDirection];\n        if (this.show) containerClasses.push('show');\n        if (this.mode === 'legacy') containerClasses.push('legacy');\n\n        return (\n            <div\n                ref={el => (this.containerElement = el)}\n                class={containerClasses.join(' ')}\n                test-id=\"outerContainer\"\n            >\n                <div\n                    ref={el => (this.contentElement = el)}\n                    class=\"content\"\n                >\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"]}
+{"version":3,"file":"q2-popover.js","sourceRoot":"","sources":["../../../../src/components/q2-popover/q2-popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    Prop,\n    h,\n    ComponentInterface,\n    Element,\n    Watch,\n    Method,\n    Listen,\n    EventEmitter,\n    Event,\n    State,\n} from '@stencil/core';\nimport { handleDeprecationWarning, waitForNextPaint, isMobile, isInScrollableContainer } from '../../utils';\n\n@Component({ tag: 'q2-popover', shadow: true, styleUrl: 'q2-popover.scss' })\nexport class Q2Popover implements ComponentInterface {\n    /**\n     * Force the direction of the popover when it opens.\n     * If no value is passed, the component will auto-detect the direction based on available space.\n     */\n    @Prop({ reflect: true }) direction: 'up' | 'down';\n\n    /** Aligns the popover to the left or right side of the control element. */\n    @Prop({ reflect: true }) align: 'left' | 'right' = 'left';\n\n    /** Controls whether the popover is open or closed. */\n    @Prop({ reflect: true, mutable: true }) open: boolean;\n\n    /** Indicates the popover will match the width of its parent element. */\n    @Prop({ reflect: true }) block: boolean;\n\n    /** The element that controls the popover's behavior. */\n    @Prop() controlElement: HTMLElement;\n\n    @Prop() mode: 'legacy' = null;\n\n    /** @deprecated */\n    @Prop() minHeight: number;\n\n    @Element() hostElement: HTMLElement;\n\n    /**\n     * Emitted when the popover is opened or closed.\n     */\n    @Event() popoverStateChanged: EventEmitter<{ open: boolean }>;\n\n    @State() currentDirection: 'down' | 'up' = undefined;\n    // remove `show` when Popover API is supported in iOS\n    @State() show: boolean = false;\n\n    containerElement: HTMLDivElement;\n    contentElement: HTMLDivElement;\n\n    /**\n     * The number of pixels to leave between the popover and the edge of the viewport\n     */\n    displayBuffer = 10;\n\n    orientationChanged: boolean = false;\n\n    /// Lifecycle hooks ///\n    componentWillLoad() {\n        if (!this.supportsPopoverAPI) {\n            console.warn(\n                'The Popover API is not supported in this browser. Please update your browser to the latest version. The component will use legacy mode.'\n            );\n            this.mode = 'legacy';\n        }\n    }\n\n    componentDidLoad() {\n        this.handleMinHeight();\n        if (this.supportsPopoverAPI) this.containerElement.addEventListener('toggle', this.handlePopoverToggleEvent);\n        if (this.open) this.determinePopDirection();\n    }\n\n    disconnectedCallback() {\n        this.removeViewportListeners();\n        this.containerElement.removeEventListener('toggle', this.handlePopoverToggleEvent);\n        this.containerElement = null;\n        this.contentElement = null;\n        this.controlElement = null;\n    }\n\n    /// Methods ///\n    @Method()\n    async toggle() {\n        this.open = !this.open;\n    }\n\n    @Method()\n    async scrollContainerTo(options: ScrollToOptions) {\n        this.containerElement.scrollTo(options);\n    }\n\n    /// Watchers ///\n    @Watch('open')\n    async openChanged(open: boolean) {\n        this.popoverStateChanged.emit({ open });\n\n        if (open) {\n            this.addViewportListeners();\n            this.determinePopDirection();\n        } else {\n            this.removeViewportListeners();\n            this.currentDirection = undefined;\n            if (this.mode === 'legacy' || !this.supportsPopoverAPI) {\n                this.show = false;\n            } else {\n                this.containerElement.hidePopover();\n            }\n\n            await waitForNextPaint();\n            this.clearCSSProperties();\n        }\n    }\n\n    @Watch('minHeight')\n    minHeightProvided() {\n        this.handleMinHeight();\n    }\n\n    /// Listeners ///\n    @Listen('popoverState')\n    popoverStateHandler(event: CustomEvent<{ open: boolean }>) {\n        const {\n            detail: { open },\n        } = event;\n        if (open === this.open) return;\n\n        this.open = open;\n        event.stopPropagation();\n    }\n\n    /// Getters ///\n    get providedDirection(): 'up' | 'down' | undefined {\n        const { direction } = this;\n        switch (direction) {\n            case 'up':\n            case 'down':\n                return direction;\n            default:\n                return undefined;\n        }\n    }\n\n    get isModule() {\n        const isIframe = window !== window.top;\n        const hasPlatformDimensions = Object.keys(window.Tecton?.platformDimensions ?? {}).length > 0;\n        return isIframe && hasPlatformDimensions;\n    }\n\n    get supportsPopoverAPI(): boolean {\n        return Object.hasOwn(HTMLElement.prototype, 'popover');\n    }\n\n    /// Helpers ///\n    handleMinHeight = () => {\n        if (this.minHeight) {\n            handleDeprecationWarning(this, 'minHeight', 'prop');\n        }\n    };\n\n    handlePopoverToggleEvent = (event: ToggleEvent) => {\n        this.popoverStateChanged.emit({ open: event.newState === 'open' });\n    };\n\n    viewPortChanged = () => {\n        if (!this.open) return;\n        this.determinePopDirection();\n    };\n\n    viewPortOrientationChanged = () => {\n        this.orientationChanged = true;\n        this.viewPortChanged();\n    };\n\n    addViewportListeners() {\n        window.addEventListener('resize', this.viewPortOrientationChanged);\n        visualViewport?.addEventListener('resize', this.viewPortChanged);\n        if (isInScrollableContainer(this.hostElement) && !isMobile()) {\n            window.addEventListener('scroll', this.viewPortChanged, { passive: true, capture: true });\n        }\n        screen?.orientation?.addEventListener('orientationchange', this.viewPortOrientationChanged);\n        window.addEventListener('orientationchange', this.viewPortOrientationChanged);\n    }\n\n    removeViewportListeners() {\n        window.removeEventListener('resize', this.viewPortOrientationChanged);\n        visualViewport?.removeEventListener('resize', this.viewPortChanged);\n        window.removeEventListener('scroll', this.viewPortChanged, { capture: true });\n        screen?.orientation?.removeEventListener('orientationchange', this.viewPortOrientationChanged);\n        window.removeEventListener('orientationchange', this.viewPortOrientationChanged);\n    }\n\n    setPopoverAPICSSProperties = async () => {\n        const { controlElement, containerElement, currentDirection, isModule, align } = this;\n        const {\n            top: controlTop,\n            bottom: controlBottom,\n            left: controlLeft,\n            right: controlRight,\n        } = controlElement?.getBoundingClientRect?.() ?? {\n            top: 0,\n            bottom: 0,\n            left: 0,\n            right: 0,\n        };\n\n        const popoverLeft: number = controlLeft;\n        const popoverRight: number = window?.visualViewport?.width - controlRight;\n\n        if (align === 'right') {\n            containerElement.style.setProperty('--comp-pop-right', `${popoverRight - window.scrollX}px`);\n            containerElement.style.setProperty('--comp-pop-left', 'unset');\n        } else {\n            containerElement.style.setProperty('--comp-pop-left', `${popoverLeft + window.scrollX}px`);\n            containerElement.style.setProperty('--comp-pop-right', 'unset');\n        }\n\n        if (this.block) containerElement.style.setProperty('--comp-pop-width', `${controlElement?.offsetWidth || 0}px`);\n\n        if (currentDirection === 'up') {\n            if (isModule) {\n                containerElement.style.setProperty('--comp-pop-bottom', `${window.innerHeight - controlTop}px`);\n            } else {\n                containerElement.style.setProperty(\n                    '--comp-pop-bottom',\n                    `${window.innerHeight - controlTop - window?.visualViewport?.offsetTop - window.scrollY}px`\n                );\n            }\n        }\n\n        if (currentDirection === 'down') {\n            if (isModule) {\n                containerElement.style.setProperty('--comp-pop-top', `${controlBottom}px`);\n            } else {\n                containerElement.style.setProperty(\n                    '--comp-pop-top',\n                    `${controlBottom + (window?.visualViewport?.offsetTop ?? 0) + window.scrollY}px`\n                );\n            }\n        }\n\n        // Wait for one paint to prevent layout thrashing\n        await waitForNextPaint();\n        containerElement.style.setProperty('--comp-pop-opacity', '1');\n    };\n\n    setAbsoluteCSSProperties = async () => {\n        const { controlElement, containerElement, currentDirection, align } = this;\n\n        if (align === 'right') {\n            containerElement.style.setProperty('--comp-pop-right', '0');\n            containerElement.style.setProperty('--comp-pop-left', 'unset');\n        } else {\n            containerElement.style.setProperty('--comp-pop-left', '0');\n            containerElement.style.setProperty('--comp-pop-right', 'unset');\n        }\n\n        if (this.block) {\n            containerElement.style.setProperty('--comp-pop-width', '100%');\n        }\n\n        if (currentDirection === 'up') {\n            const controlStyle = getComputedStyle(controlElement);\n            const controlSize =\n                parseInt(controlStyle.height || '0') +\n                parseInt(controlStyle.borderTopWidth || '0') +\n                parseInt(controlStyle.borderBottomWidth || '0');\n\n            containerElement.style.setProperty('--comp-pop-bottom', `${controlSize}px`);\n        }\n\n        // Wait for one paint to prevent layout thrashing\n        await waitForNextPaint();\n        containerElement.style.setProperty('--comp-pop-opacity', '1');\n    };\n\n    clearCSSProperties() {\n        this.containerElement.style.removeProperty('--comp-pop-max-height');\n        this.containerElement.style.removeProperty('--comp-pop-top');\n        this.containerElement.style.removeProperty('--comp-pop-bottom');\n        this.containerElement.style.removeProperty('--comp-pop-left');\n        this.containerElement.style.removeProperty('--comp-pop-right');\n        this.containerElement.style.removeProperty('--comp-pop-width');\n        this.containerElement.style.removeProperty('--comp-pop-opacity');\n    }\n\n    setDirectionAndShow(direction: 'up' | 'down') {\n        // Due to some runtime inconsistency across devices/browsers we need to add one more check here because the\n        // popover can be closed between the time the popover is opened and the time the direction is determined\n        const isOpen = this.open;\n        if (!isOpen) return;\n\n        this.currentDirection = direction;\n        if (this.mode === 'legacy' || !this.supportsPopoverAPI) {\n            this.show = true;\n            this.setAbsoluteCSSProperties();\n        } else {\n            this.setPopoverAPICSSProperties();\n            this.containerElement.showPopover();\n        }\n    }\n\n    async determinePopDirection() {\n        const { containerElement, controlElement, providedDirection, displayBuffer } = this;\n        if (containerElement) containerElement.style.maxHeight = null;\n        await waitForNextPaint();\n\n        const { isModule } = this;\n        const { top: controlTop, bottom: controlBottom } = controlElement?.getBoundingClientRect?.() ?? {\n            top: 0,\n            bottom: 0,\n        };\n\n        let windowHeight: number;\n        let maxSpaceAbove: number;\n        let maxSpaceBelow: number;\n        if (isModule) {\n            const {\n                outletOffset = 0,\n                innerHeight = window.innerHeight,\n                top: topBarHeight = 0,\n                bottom: bottomBarHeight = 0,\n            } = window.Tecton?.platformDimensions || {};\n\n            const distanceToIframeBottom = window.innerHeight - controlBottom;\n\n            // controlElement position visually on the page\n            const visualControlTop = outletOffset > 0 ? controlTop : controlTop + outletOffset - topBarHeight;\n            const visualControlBottom = outletOffset + controlBottom - topBarHeight;\n\n            // visual space around the controlElement\n            const viewableSpaceAbove = visualControlTop;\n            const viewableSpaceBelow = innerHeight - bottomBarHeight - visualControlBottom;\n\n            // calculate space above and below controlElement\n            const isIframeShorterThanWindow = distanceToIframeBottom < viewableSpaceBelow;\n            maxSpaceAbove = viewableSpaceAbove - displayBuffer;\n            maxSpaceBelow = isIframeShorterThanWindow\n                ? distanceToIframeBottom - displayBuffer\n                : viewableSpaceBelow - displayBuffer;\n        } else {\n            windowHeight = window.innerHeight;\n            maxSpaceAbove = controlTop - displayBuffer;\n            maxSpaceBelow = windowHeight - controlBottom - displayBuffer;\n        }\n\n        const directionWithMostSpace: 'up' | 'down' = maxSpaceAbove > maxSpaceBelow ? 'up' : 'down';\n\n        // We do not want to update the max height once the popover is open unless the page orientation shifts (resize or mobile use cases)\n        const shouldUpdateMaxHeight =\n            !containerElement.style.getPropertyValue('--comp-pop-max-height') || this.orientationChanged;\n        // we do not want to constantly update the max-height after an orientation change, so we switch this back to false\n        this.orientationChanged = false;\n        const currentOrDetermineDirection = this.currentDirection || providedDirection || directionWithMostSpace;\n\n        switch (currentOrDetermineDirection) {\n            case 'up':\n                if (shouldUpdateMaxHeight) {\n                    containerElement.style.setProperty('--comp-pop-max-height', `${maxSpaceAbove}px`);\n                }\n                this.setDirectionAndShow('up');\n                break;\n            case 'down':\n                if (shouldUpdateMaxHeight) {\n                    containerElement.style.setProperty('--comp-pop-max-height', `${maxSpaceBelow}px`);\n                }\n                this.setDirectionAndShow('down');\n                break;\n            default:\n                break;\n        }\n    }\n\n    /// DOM ///\n    render() {\n        const containerClasses = ['container', this.currentDirection, this.align];\n        if (this.show) containerClasses.push('show');\n        if (this.block) containerClasses.push('block');\n        if (this.mode === 'legacy') containerClasses.push('legacy');\n\n        return (\n            <div\n                ref={el => (this.containerElement = el)}\n                class={containerClasses.join(' ')}\n                test-id=\"outerContainer\"\n                tabIndex={-1}\n                popover=\"manual\"\n            >\n                <div\n                    ref={el => (this.contentElement = el)}\n                    class=\"content\"\n                >\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n}\n"]}

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

@@ -75,7 +75,7 @@ export class Q2Radio {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '210cc7331f317028a89673653eef957e002bccfc', class: this.groupTileLayout ? 'radio-tile' : 'radio-container' }, h("input", { key: '2323fefb73a45336442e51e02e07cc20d8ff7237', ref: el => (this.inputField = el), class: "sr", id: this._id, type: "radio", name: this.name, value: this.value, disabled: this.disabled || this.groupDisabled, checked: this.checked, "aria-label": this.label && this.hideLabel ? loc(this.label) : undefined, onChange: this.inputChange, "test-id": "q2RadioInnerRadioBox" }), h("label", { key: 'a79888b871fcbcd8234779f508edbdfbb8a6d778', htmlFor: this._id, class: this.hideLabel ? 'label-hidden' : undefined, "test-id": "radioButton" }, !this.groupTileLayout && (h("svg", { key: 'a7268ee6225beeeea0cb719d7c6d2feca48614de', viewBox: "0 0 18 18" }, h("circle", { key: '41c33face1190dc510c7f9f2f53fe1796a918188', stroke: "none", fill: "none", cx: "9", cy: "9", r: "8" }), h("circle", { key: '947c9fbc47945c59678d9fa08c042d9e47a56a51', stroke: "none", fill: "none", cx: "9", cy: "9", r: "4" }))), !this.hideLabel && (h("div", { key: '46654e6f4ff3596983f1e20b8a501bedf882bcec', class: "label-content" }, (this.label && loc(this.label)) || '', h("slot", { key: 'aef00a9fc70c904d4d09561c430c3df65fc36121' }))))));
+        return (h("div", { key: '76206e3b68f37c2cb2b3f250baaeeb3ab527e7dd', class: this.groupTileLayout ? 'radio-tile' : 'radio-container' }, h("input", { key: '8eb165ce7393d49b3392d31dbf627ba4f41e55ac', ref: el => (this.inputField = el), class: "sr", id: this._id, type: "radio", name: this.name, value: this.value, disabled: this.disabled || this.groupDisabled, checked: this.checked, "aria-label": this.label && this.hideLabel ? loc(this.label) : undefined, onChange: this.inputChange, "test-id": "q2RadioInnerRadioBox" }), h("label", { key: '68b886ae9d8dd3c8f81a303efa134032f5202861', htmlFor: this._id, class: this.hideLabel ? 'label-hidden' : undefined, "test-id": "radioButton" }, !this.groupTileLayout && (h("svg", { key: '3347f80f5b1db0618ef9f1e47b107348c78739c1', viewBox: "0 0 18 18" }, h("circle", { key: 'c28f245892d655e8e9ace735ed99dd38f2e52885', stroke: "none", fill: "none", cx: "9", cy: "9", r: "8" }), h("circle", { key: '2cc9cb7577e78fc7fce8cf7c301c6cc5a052439e', stroke: "none", fill: "none", cx: "9", cy: "9", r: "4" }))), !this.hideLabel && (h("div", { key: 'c4b26258a82523f7cc5517409b23443b85eff770', class: "label-content" }, (this.label && loc(this.label)) || '', h("slot", { key: '29b3cc0b2466a43eec80a076e5a0b798bb2ca6ac' }))))));
     }
     static get is() { return "q2-radio"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-radio-group/q2-radio-group.js

@@ -174,7 +174,7 @@ export class Q2RadioGroup {
         const showLabel = this.label || this.optional || this.readonly;
         const { hasError } = this;
         const showLabelRow = showLabel || hasError;
-        return (h(Fragment, { key: '391daee73ed99703223e6d72ea8109cdb0f3a728' }, showLabelRow && (h("div", { key: '7e9b358ff98e87551783c7ccfeb789a27c9282cc', class: "label-row" }, showLabel && h("div", { key: '198215d1006af99957bd108540f58b36162c102a', class: "group-legend" }, labelDOM(this)), hasError && (h("q2-icon", { key: 'bb6e82ecc48c28eb6efae09d8f8cd03f1a4bc957', type: "error", "test-id": "iconError" })))), h("fieldset", { key: 'fe4e72b6c8cbd827909f4b6caa47e96699f29163', onChange: this.onInnerRadioChange, "aria-invalid": `${this.hasError}` }, showLabel && h("legend", { key: '963d3f6d55511c5cf5ca99218addaaa12a34f505', class: "sr" }, labelDOM(this)), this.inputDom())));
+        return (h(Fragment, { key: '3536f41532e1cc18001e2e1d8f8f4c9e8223dd67' }, showLabelRow && (h("div", { key: '4ec07666943cb4b0a25ad2dd70fdc26b072affb0', class: "label-row" }, showLabel && h("div", { key: '0442988f9575a44d0d0de1e7885be9239e06ba64', class: "group-legend" }, labelDOM(this)), hasError && (h("q2-icon", { key: 'e455ee3337a5e401c5a4a4a9f8276bff189b26f2', type: "error", "test-id": "iconError" })))), h("fieldset", { key: '2f849878d217decc154d9d04fa8182b3d1b1d79a', onChange: this.onInnerRadioChange, "aria-invalid": `${this.hasError}` }, showLabel && h("legend", { key: '95e7c2f3fcb370048801b4f6be953047011a83f2', class: "sr" }, labelDOM(this)), this.inputDom())));
     }
     static get is() { return "q2-radio-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-relative-time/q2-relative-time.js

@@ -136,7 +136,7 @@ export class Q2RelativeTime {
     // #region Render Methods
     render() {
         const { shouldShow, displayedMessage } = this;
-        return h(Fragment, { key: '26038fa24d32109482710ec28cb689e1db340abd' }, shouldShow ? h("time", { dateTime: displayedMessage }, displayedMessage) : null);
+        return h(Fragment, { key: '14b866b175302504dfb838edd3181ff68ffd004d' }, shouldShow ? h("time", { dateTime: displayedMessage }, displayedMessage) : null);
     }
     static get is() { return "q2-relative-time"; }
     static get encapsulation() { return "shadow"; }

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

@@ -158,9 +158,9 @@ export class Q2Section {
                 wrapperClasses.push('is-transitioning');
         }
         const showDefaultHeader = !this.hasYieldedHeader && !!this.label;
-        return (h("section", { key: '550b55c43f6a037c30df83d5bdd3c5f6c18b548a', class: "wrapper" }, h("header", { key: '74a281cd6434a7e33d32ed35d46752d313b7e226', class: hasHeader ? 'has-header' : '' }, h("div", { key: 'bccad40c23075adf4d25eedfb6acc733a3a8f57e', class: "header-content", id: this.titleId, onClick: this.collapsible && this.onHeaderClick }, showDefaultHeader && h("h2", { key: '0b7c240a0b9cc245d2d8426092c805146f15b553', class: "title" }, loc(this.label)), h("div", { key: '2aacff31aadee0770129b767d3aed1f43fc626de', ref: el => (this.headerSlotWrapper = el), class: "header-slot-wrapper" }, h("slot", { key: '3317e6865bc814005f03ea7dd0b431885739f5d1', ref: (el) => (this.headerSlot = el), name: "q2-section-header" }))), this.collapsible && !this.noCollapseIcon && (h("q2-btn", { key: '1462f06ccc824c1db7439e015a887763d323620d', label: loc(this.label || 'tecton.element.section.defaultToggleLabel'), ariaExpanded: `${!!this.expanded}`, ariaControls: this.contentId, "test-id": "toggleButton", "hide-label": true, onClick: this.onHeaderClick }, h("q2-icon", { key: '21efcebc32fc92ee1912532552f8efa8fc1552eb', type: "chevron-up" })))), h("div", { key: '6a6de47b233079f00743e6a23fd25dc66acce2c2', class: wrapperClasses.join(' '), id: this.contentId, "aria-labelledby": this.titleId, role: "region", onTransitionEnd: this.onTransitionEnd, style: this.collapsible && {
+        return (h("section", { key: '15ae06a9de2e0b3c562490d81a3898a0707f2cce', class: "wrapper" }, h("header", { key: 'e33c31b58b6235d4042fb1b4e1eea9bb47f92be2', class: hasHeader ? 'has-header' : '' }, h("div", { key: '31982f44c7b40194c2477cdf32637c9d2e8677f1', class: "header-content", id: this.titleId, onClick: this.collapsible && this.onHeaderClick }, showDefaultHeader && h("h2", { key: 'a95970510134e283b405a4324fd9c44069a7ea2c', class: "title" }, loc(this.label)), h("div", { key: 'bbcfe0d2ed8c999602a00b3eaa5742ab5289d176', ref: el => (this.headerSlotWrapper = el), class: "header-slot-wrapper" }, h("slot", { key: 'b265fc36e484af03a45fb8012f2a158f85929122', ref: (el) => (this.headerSlot = el), name: "q2-section-header" }))), this.collapsible && !this.noCollapseIcon && (h("q2-btn", { key: 'e9b2dafa5001089919419016ff2c7bb1c4bdb443', label: loc(this.label || 'tecton.element.section.defaultToggleLabel'), ariaExpanded: `${!!this.expanded}`, ariaControls: this.contentId, "test-id": "toggleButton", "hide-label": true, onClick: this.onHeaderClick }, h("q2-icon", { key: '51902e05e71e027d27e28882c7be8a216cb5e907', type: "chevron-up" })))), h("div", { key: 'c16a8a3c128854b16cfc0c299b660efc94b139d9', class: wrapperClasses.join(' '), id: this.contentId, "aria-labelledby": this.titleId, role: "region", onTransitionEnd: this.onTransitionEnd, style: this.collapsible && {
                 height: this.contentHeight,
-            } }, h("div", { key: '8d70829cef7eb0f671779ce89ecab354bb33a028', ref: el => (this.contentContainer = el), class: "content", tabindex: "-1" }, h("slot", { key: '88e723ba02fecd1c3845c9956c9e2b1769623d7a', ref: (el) => (this.contentSlot = el) })))));
+            } }, h("div", { key: 'acb0567f7096086de10cc777438cfa2052586bc7', ref: el => (this.contentContainer = el), class: "content", tabindex: "-1" }, h("slot", { key: 'e13d27b6f075bc8b50baa382b620843dea4db57f', ref: (el) => (this.contentSlot = el) })))));
     }
     static get is() { return "q2-section"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,15 +1,82 @@
-import { h, } from "@stencil/core";
-import { handleAriaLabel, isEventFromElement, isHostLosingFocus, isRelatedTargetWithinHost, loc, overrideFocus, waitForNextPaint, } from "../../utils";
+import { h, Fragment, } from "@stencil/core";
+import { createGuid, handleAriaLabel, isEventFromElement, isMobile, isRelatedTargetWithinHost, loc, overrideFocus, waitForNextPaint, } from "../../utils";
 import { shouldShowActionSheet, showActionSheetList } from "../../utils/action-sheet";
+/**
+ * @slot popover-top - An optional slot to display custom content persistently at the top of the popover. This is **not** compatible with the action sheet workflow.
+ * @slot popover-bottom - An optional slot to display custom content persistently at the bottom of the popover. This is **not** compatible with the action sheet workflow.
+ * @slot q2-select-display - An optional slot to display custom HTML content in the display area.
+ */
 export class Q2Select {
     constructor() {
         var _a;
+        // #region Own Properties
+        this.guid = createGuid();
+        this.lastTouchWasInPopover = false;
         this.scheduledAfterRender = [];
+        this.addTouchEventListeners = () => {
+            if (!isMobile() || !this.popoverElement)
+                return;
+            this.popoverElement.addEventListener('touchstart', this.handleTouchStart, { passive: true });
+        };
         this.clickedElsewhere = (event) => {
             const target = event.target;
             if (target.localName !== 'click-elsewhere')
                 return;
             event.stopPropagation();
+            const { popoverElement } = this;
+            if (!popoverElement)
+                return;
+            popoverElement.open = false;
+            this.innerInputField.blur();
+        };
+        this.destroyEventListeners = () => {
+            var _a;
+            if (!isMobile())
+                return;
+            (_a = screen === null || screen === void 0 ? void 0 : screen.orientation) === null || _a === void 0 ? void 0 : _a.removeEventListener('change', this.handleOrientationChange);
+            window.removeEventListener('resize', this.handleOrientationChange);
+            visualViewport === null || visualViewport === void 0 ? void 0 : visualViewport.removeEventListener('resize', this.handleOrientationChange);
+            this.removeTouchEventListeners();
+        };
+        this.handleOrientationChange = () => {
+            var _a, _b, _c;
+            if (!isMobile())
+                return;
+            let isLandscape;
+            if (this.isModule) {
+                isLandscape = (_a = window.Tecton) === null || _a === void 0 ? void 0 : _a.platformDimensions.orientationType.includes('landscape');
+            }
+            else {
+                isLandscape = (_c = (_b = screen === null || screen === void 0 ? void 0 : screen.orientation) === null || _b === void 0 ? void 0 : _b.type) === null || _c === void 0 ? void 0 : _c.includes('landscape');
+            }
+            if (isLandscape && this.searchable)
+                this.searchable = false;
+            if (!isLandscape)
+                this.searchable = this.originalSearchable;
+        };
+        this.handleTouchStart = (event) => {
+            if (document.activeElement === this.hostElement) {
+                const target = event.target;
+                if (target && target !== this.hostElement) {
+                    this.inputFocused = false;
+                    this.lastTouchWasInPopover = true;
+                    target.focus();
+                }
+            }
+        };
+        this.initEventListeners = () => {
+            var _a;
+            if (!isMobile())
+                return;
+            (_a = screen === null || screen === void 0 ? void 0 : screen.orientation) === null || _a === void 0 ? void 0 : _a.addEventListener('change', this.handleOrientationChange);
+            window.addEventListener('resize', this.handleOrientationChange);
+            visualViewport === null || visualViewport === void 0 ? void 0 : visualViewport.addEventListener('resize', this.handleOrientationChange);
+        };
+        this.initMutationObserver = () => {
+            const observer = new MutationObserver(this.onMutationObserved);
+            observer.observe(this.hostElement, { childList: true, subtree: true });
+            this.mutationObserver = observer;
+            this.onMutationObserved();
         };
         this.inputBlurHandler = () => {
             this.inputFocused = false;
@@ -19,6 +86,16 @@ export class Q2Select {
         };
         this.inputClickHandler = async (event) => {
             event.stopPropagation();
+            // Check if the last interaction was a touch within the popover
+            // If so, don't toggle the dropdown as the user is likely continuing to interact
+            if (this.lastTouchWasInPopover && this.open && this.searchable) {
+                // Reset the flag and don't toggle
+                this.lastTouchWasInPopover = false;
+                this.focusInput();
+                return;
+            }
+            // Reset the flag for any other click
+            this.lastTouchWasInPopover = false;
             if (shouldShowActionSheet(this)) {
                 return this.executeActionSheet(event);
             }
@@ -43,12 +120,13 @@ export class Q2Select {
         this.inputKeydownHandler = (event) => {
             if (this.readonly || this.disabled)
                 return;
-            const key = event.key;
+            const { key, shiftKey } = event;
+            const isShiftTab = key === 'Tab' && shiftKey;
             const hasSlot = this.hasPopoverTop || this.hasPopoverBottom;
-            const isShiftTab = key === 'Tab' && event.shiftKey;
-            if (hasSlot && (key === 'Tab' || key === 'Enter' || isShiftTab))
+            if (hasSlot && (key === 'Tab' || isShiftTab))
                 return;
-            if (shouldShowActionSheet(this, event)) {
+            // slots are incompatible with action sheet
+            if (shouldShowActionSheet(this, event) && !hasSlot) {
                 return this.executeActionSheet(event);
             }
             const keysForOptionListToHandle = [
@@ -73,7 +151,7 @@ export class Q2Select {
             // Prevent click event from firing when spacebar is pressed
             if (key === ' ')
                 event.preventDefault();
-            this.optionList.handleExternalKeydown(event);
+            this.handleOptionListExternalKeydown(event);
         };
         this.onCustomDisplayClick = (event) => {
             event.stopPropagation();
@@ -91,12 +169,12 @@ export class Q2Select {
                 this.hasCustomDisplay = hasCustomDisplay;
             }
             const popTopSlot = hostElement.shadowRoot.querySelector('slot[name="popover-top"]');
-            const topSlotHasNode = popTopSlot.assignedNodes().length > 0;
+            const topSlotHasNode = (popTopSlot === null || popTopSlot === void 0 ? void 0 : popTopSlot.assignedNodes().length) > 0;
             if (hasPopoverTop !== topSlotHasNode) {
                 this.hasPopoverTop = topSlotHasNode;
             }
             const popBottomSlot = hostElement.shadowRoot.querySelector('slot[name="popover-bottom"]');
-            const bottomSlotHasNode = popBottomSlot.assignedNodes().length > 0;
+            const bottomSlotHasNode = (popBottomSlot === null || popBottomSlot === void 0 ? void 0 : popBottomSlot.assignedNodes().length) > 0;
             if (hasPopoverBottom !== bottomSlotHasNode) {
                 this.hasPopoverBottom = bottomSlotHasNode;
             }
@@ -120,6 +198,11 @@ export class Q2Select {
                 return;
             this.open = open;
         };
+        this.removeTouchEventListeners = () => {
+            if (!isMobile() || !this.popoverElement)
+                return;
+            this.popoverElement.removeEventListener('touchstart', this.handleTouchStart);
+        };
         this.showAllOptions = () => {
             this.showSelected = false;
         };
@@ -165,6 +248,7 @@ export class Q2Select {
         this.optional = false;
         this.placeholder = undefined;
         this.popDirection = undefined;
+        this.popoverMaxHeight = undefined;
         this.popoverMode = null;
         this.readonly = false;
         this.searchable = false;
@@ -177,19 +261,21 @@ export class Q2Select {
         var _a;
         (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
         this.mutationObserver = null;
+        this.destroyEventListeners();
     }
     componentWillLoad() {
+        this.originalSearchable = this.searchable;
         handleAriaLabel(this);
+        this.handleOrientationChange();
         this.buildStructuredSelectedOptions();
         this.handleMultilineOptionsUpdate(this.multilineOptions, false);
     }
     componentDidLoad() {
-        const observer = new MutationObserver(this.onMutationObserved);
-        observer.observe(this.hostElement, { childList: true, subtree: true });
-        this.mutationObserver = observer;
-        this.onMutationObserved();
+        this.initMutationObserver();
+        this.initEventListeners();
         overrideFocus(this.hostElement);
         setTimeout(() => this.checkSelectedDisplay(), 0);
+        this.setCustomLabel();
     }
     componentDidRender() {
         setTimeout(() => {
@@ -217,9 +303,9 @@ export class Q2Select {
         this.clearValue();
     }
     handleSelectedDisplay(event) {
-        if (this.multiple)
-            return;
-        this.inputField.value = event.detail.display;
+        if (!this.multiple && !!this.value && this.value === event.detail.value) {
+            this.inputField.value = event.detail.display;
+        }
     }
     delegateFocus(event) {
         const fromHost = isRelatedTargetWithinHost(event, this.hostElement);
@@ -228,11 +314,13 @@ export class Q2Select {
             this.clearSelectedDisplay();
         }
         else if (isEventFromElement(event, this.hostElement)) {
-            this.inputField.shadowRoot.querySelector('.input-field').focus();
+            this.innerInputField.focus();
         }
     }
     handleFocusout(event) {
-        const isLeavingHost = isHostLosingFocus(event, this.hostElement);
+        var _a;
+        const relatedTarget = event.relatedTarget;
+        const isLeavingHost = !((_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.contains(relatedTarget)) && !this.hostElement.contains(relatedTarget);
         if (isLeavingHost)
             this.closeDropdown();
         this.prioritizeSearch = !isLeavingHost && this.searchable;
@@ -268,6 +356,10 @@ export class Q2Select {
     keydownHandler(event) {
         this.inputKeydownHandler(event);
     }
+    popoverStateChanged({ detail: { open } }) {
+        if (this.open !== open)
+            this.open = open;
+    }
     // #endregion
     // #region Public Methods API
     /**
@@ -341,6 +433,12 @@ export class Q2Select {
         this.optionElements.forEach(element => (element.multiline = newValue));
     }
     openChanged(isOpen) {
+        if (isOpen) {
+            this.addTouchEventListeners();
+        }
+        else {
+            this.removeTouchEventListeners();
+        }
         this.scheduledAfterRender.push(async () => {
             await waitForNextPaint();
             const { popoverTopContainer, popoverElement } = this;
@@ -397,6 +495,15 @@ export class Q2Select {
         var _a, _b;
         return (_b = (_a = this.inputField) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.input-field');
     }
+    get inputId() {
+        return `select-guid-${this.guid}`;
+    }
+    get isModule() {
+        var _a, _b;
+        const isIframe = window !== window.top;
+        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 optionElements() {
         return Array.from(this.hostElement.querySelectorAll('q2-option'));
     }
@@ -463,6 +570,13 @@ export class Q2Select {
         }
     }
     checkSelectedDisplay() {
+        // This prevents an undefined property error when the spec tests are run
+        try {
+            this.hostElement;
+        }
+        catch (error) {
+            return null;
+        }
         let namedSlot = this.selectedDisplaySlot;
         const { value, multiple, selectedOptions, multilineOptions, firstSelectedOptionElement, prioritizeSearch } = this;
         const hasNoValue = !value && multiple && !(selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length);
@@ -523,16 +637,22 @@ export class Q2Select {
     }
     closeDropdown() {
         this.open = false;
+        this.lastTouchWasInPopover = false;
         this.clearSearchText();
     }
     async executeActionSheet(event) {
         const result = await showActionSheetList(this, event);
+        this.focusInput();
         this.handleSelectionChanges(result);
     }
     focusInput() {
         var _a;
         (_a = this.inputField) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new FocusEvent('focus'));
     }
+    // Helps with checking for calls to handleExternalKeydown in spec tests
+    handleOptionListExternalKeydown(event) {
+        this.optionList.handleExternalKeydown(event);
+    }
     handleSelectionChanges(changeDetails) {
         const { value = '', values = [] } = changeDetails;
         const selectedOptionValues = values.map(value => value.value);
@@ -551,8 +671,13 @@ export class Q2Select {
         this.optionList.setActiveElement(null);
         this.open = true;
     }
-    optionsDropdown() {
-        return (h("q2-popover", { ref: el => (this.popoverElement = el), controlElement: this.innerInputContainer, open: this.open, minHeight: this.popoverMinHeight, direction: this.popDirection, mode: this.popoverMode || undefined, block: true }, h("div", { class: "popover-content" }, h("q2-option-list", { onPopoverState: this.onPopoverState, ref: el => (this.optionList = el), type: "listbox", id: "option-list", "show-selected": this.showSelected, label: this.listLabel, multiple: this.multiple, selectedOptions: this.structuredSelectedOptions, onChange: this.onOptionListChange }, h("slot", null)), h("div", { class: "popover-top-container", ref: el => (this.popoverTopContainer = el), hidden: !this.multiple && !this.hasPopoverTop, tabindex: "-1" }, h("slot", { name: "popover-top" }), this.multiple && this.visibilityToggle())), h("div", { class: "popover-bottom-container", hidden: !this.hasPopoverBottom, tabindex: "-1" }, h("slot", { name: "popover-bottom" }))));
+    setCustomLabel() {
+        var _a;
+        const customLabel = this.hostElement.querySelector('[slot="label"]');
+        if (customLabel) {
+            (_a = this.inputField) === null || _a === void 0 ? void 0 : _a.appendChild(customLabel.cloneNode(true));
+            this.hostElement.removeChild(customLabel);
+        }
     }
     setStatusMessage(message) {
         clearTimeout(this.statusMessageTimer);
@@ -574,14 +699,6 @@ export class Q2Select {
             this.openDropdownWithoutActiveElement();
         }
     }
-    visibilityToggle() {
-        var _a, _b;
-        const selectedOptionsCount = (_b = (_a = this.selectedOptions) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
-        const { showSelected } = this;
-        return (h("div", { class: "multi-select-header" }, h("fieldset", null, h("legend", { "aria-label": loc('tecton.element.select.multiHeader.showing') }, loc('tecton.element.select.multiHeader.showing')), h("div", null, h("input", { class: "sr", type: "radio", id: "all", name: "viewDisplay", value: "all", checked: !showSelected, "aria-label": loc('tecton.element.select.multiHeader.allAriaLabel'), "test-id": "allOptionsButton", onClick: this.showAllOptions, onKeyDown: this.visibilityToggleKeyDown }), h("label", { htmlFor: "all" }, loc('tecton.element.select.multiHeader.all'))), h("div", null, h("input", { class: "sr", type: "radio", id: "selected", disabled: selectedOptionsCount === 0, name: "viewDisplay", value: "selected", "aria-label": loc('tecton.element.select.multiHeader.selectedAriaLabel', [
-                selectedOptionsCount,
-            ]), checked: showSelected, "test-id": "selectedOptionsButton", onClick: this.showSelectedOptions, onKeyDown: this.visibilityToggleKeyDown }), h("label", { htmlFor: "selected" }, loc('tecton.element.select.multiHeader.selected', [selectedOptionsCount]))))));
-    }
     // #endregion
     // #region Render Methods
     renderCustomDisplay() {
@@ -591,13 +708,27 @@ export class Q2Select {
         this.checkSelectedDisplayHeight();
         return (h("slot", { name: "_selected-display", slot: "custom-display" }));
     }
-    render() {
+    renderOptionsDropdown() {
+        return (h("q2-popover", { ref: el => (this.popoverElement = el), controlElement: this.innerInputContainer, open: this.open, "max-height": this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popDirection, mode: this.popoverMode || undefined, block: true }, h("div", { class: "popover-content" }, h("q2-option-list", { onPopoverState: this.onPopoverState, ref: el => (this.optionList = el), type: "listbox", id: "option-list", "show-selected": this.showSelected, label: this.listLabel, multiple: this.multiple, selectedOptions: this.structuredSelectedOptions, onChange: this.onOptionListChange }, h("slot", null)), h("div", { class: "popover-top-container", ref: el => (this.popoverTopContainer = el), hidden: !this.multiple && !this.hasPopoverTop, tabindex: "-1" }, h("slot", { name: "popover-top" }), this.multiple && this.renderVisibilityToggle())), h("div", { class: "popover-bottom-container", hidden: !this.hasPopoverBottom, tabindex: "-1" }, h("slot", { name: "popover-bottom" }))));
+    }
+    renderSelectField() {
         var _a;
-        return (h("click-elsewhere", { key: 'ee1f153325884056a488d4bdfda9b5ef501cf3be', class: this.wrapperClasses, onChange: this.clickedElsewhere }, h("div", { key: 'd60cf7a63ba2d5af7f67e2a811336255506ad422', "aria-live": "polite", "aria-atomic": "true", role: "status", class: "sr" }, this.statusMessage), h("q2-input", { key: '2a6c022291b99e1561e090bc74c5014fd5628bc4', ref: el => (this.inputField = el), class: "q2-select-input", label: (this.label && loc(this.label)) || '', value: this.selectedDisplay, clearable: (this.clearable && (!!this.value || !!((_a = this.selectedOptions) === null || _a === void 0 ? void 0 : _a.length))) || undefined, errors: (Array.isArray(this.errors) &&
+        return (h(Fragment, null, h("div", { "aria-live": "polite", "aria-atomic": "true", role: "status", class: "sr" }, this.statusMessage), h("q2-input", { ref: el => (this.inputField = el), class: "q2-select-input", label: (this.label && loc(this.label)) || '', value: this.selectedDisplay, clearable: (this.clearable && (!!this.value || !!((_a = this.selectedOptions) === null || _a === void 0 ? void 0 : _a.length))) || undefined, errors: (Array.isArray(this.errors) &&
                 this.errors.length > 0 &&
                 this.errors.map(error => loc(error))) ||
                 (this.invalid && ['tecton.element.select.invalid']) ||
-                [], disabled: this.disabled, optional: this.optional, readonly: !!this.readonly, placeholder: this.placeholder || undefined, hideLabel: this.hideLabel, ariaExpanded: `${this.open}`, ariaControls: "option-list", ariaHaspopup: "listbox", "test-id": "toggleDropdown", "hide-messages": true, iconRight: "chevron-down", onClick: this.inputClickHandler, onInput: this.inputInputHandler, onKeyDown: this.inputKeydownHandler, onFocus: this.inputFocusHandler, onBlur: this.inputBlurHandler, onChange: this.inputChangeHandler, badgeValue: this.badgeValue, badgeTheme: this.inputFocused ? 'primary' : undefined, _role: "combobox", _preventEntry: !this.searchable }, this.renderCustomDisplay()), h("div", { key: 'a29711927968b10f9225994ed41367d8ad35c1a9', class: "custom-display-content", hidden: !this.hasCustomDisplay || !!this.searchText, onClick: this.onCustomDisplayClick }, h("slot", { key: '3e63c82e5bb6a12638f6d5a8f6af8eb246b105a6', name: "q2-select-display" })), this.optionsDropdown()));
+                [], disabled: this.disabled, optional: this.optional, readonly: !!this.readonly, placeholder: this.placeholder || undefined, hideLabel: this.hideLabel, ariaExpanded: `${this.open}`, ariaControls: "option-list", ariaHaspopup: "listbox", "test-id": "toggleDropdown", "hide-messages": true, iconRight: "chevron-down", onClick: this.inputClickHandler, onInput: this.inputInputHandler, onKeyDown: this.inputKeydownHandler, onFocus: this.inputFocusHandler, onBlur: this.inputBlurHandler, onChange: this.inputChangeHandler, badgeValue: this.badgeValue, badgeTheme: this.inputFocused ? 'primary' : undefined, _role: "combobox", _preventEntry: !this.searchable }, this.renderCustomDisplay()), h("div", { class: "custom-display-content", hidden: !this.hasCustomDisplay || !!this.searchText, onClick: this.onCustomDisplayClick }, h("slot", { name: "q2-select-display" })), this.renderOptionsDropdown()));
+    }
+    renderVisibilityToggle() {
+        var _a, _b;
+        const selectedOptionsCount = (_b = (_a = this.selectedOptions) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
+        const { showSelected } = this;
+        return (h("div", { class: "multi-select-header" }, h("fieldset", null, h("legend", { "aria-label": loc('tecton.element.select.multiHeader.showing') }, loc('tecton.element.select.multiHeader.showing')), h("div", null, h("input", { class: "sr", type: "radio", id: "all", name: "viewDisplay", value: "all", checked: !showSelected, "aria-label": loc('tecton.element.select.multiHeader.allAriaLabel'), "test-id": "allOptionsButton", onClick: this.showAllOptions, onKeyDown: this.visibilityToggleKeyDown }), h("label", { htmlFor: "all" }, loc('tecton.element.select.multiHeader.all'))), h("div", null, h("input", { class: "sr", type: "radio", id: "selected", disabled: selectedOptionsCount === 0, name: "viewDisplay", value: "selected", "aria-label": loc('tecton.element.select.multiHeader.selectedAriaLabel', [
+                selectedOptionsCount,
+            ]), checked: showSelected, "test-id": "selectedOptionsButton", onClick: this.showSelectedOptions, onKeyDown: this.visibilityToggleKeyDown }), h("label", { htmlFor: "selected" }, loc('tecton.element.select.multiHeader.selected', [selectedOptionsCount]))))));
+    }
+    render() {
+        return (h("click-elsewhere", { key: 'fc1a03ff20dbce5b036f753bf5eee835004b16b6', class: this.wrapperClasses, onChange: this.clickedElsewhere }, this.renderSelectField()));
     }
     static get is() { return "q2-select"; }
     static get encapsulation() { return "shadow"; }
@@ -897,6 +1028,23 @@ export class Q2Select {
                 "attribute": "pop-direction",
                 "reflect": true
             },
+            "popoverMaxHeight": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Force the maximum height of the popover. This value will be interpreted as pixels.\nIf no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space."
+                },
+                "attribute": "popover-max-height",
+                "reflect": false
+            },
             "popoverMode": {
                 "type": "string",
                 "mutable": true,
@@ -938,7 +1086,7 @@ export class Q2Select {
             },
             "searchable": {
                 "type": "boolean",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -1198,7 +1346,14 @@ export class Q2Select {
                 "target": undefined,
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "popoverStateChanged",
+                "method": "popoverStateChanged",
+                "target": undefined,
+                "capture": false,
+                "passive": false
             }];
     }
 }
+// #endregion
 //# sourceMappingURL=q2-select.js.map