npm - q2-tecton-elements - Versions diffs - 1.49.2 → 1.49.3 - Mend

q2-tecton-elements 1.49.2 → 1.49.3

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

Files changed (357) hide show

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

	@@ -1 +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"]}
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 /*\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 window.addEventListener('scroll', this.viewPortChanged, { passive: true, capture: true });\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\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 \|\| 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=\"auto\"\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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -1,15 +1,64 @@
-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.scheduledAfterRender = [];
         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.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.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.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;
@@ -43,12 +92,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 +123,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 +141,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;
             }
@@ -165,6 +215,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 +228,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 +270,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);
@@ -232,7 +285,9 @@ export class Q2Select {
         }
     }
     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 +323,10 @@ export class Q2Select {
     keydownHandler(event) {
         this.inputKeydownHandler(event);
     }
+    popoverStateChanged({ detail: { open } }) {
+        if (this.open !== open)
+            this.open = open;
+    }
     // #endregion
     // #region Public Methods API
     /**
@@ -397,6 +456,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 +531,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);
@@ -527,12 +602,17 @@ export class Q2Select {
     }
     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 +631,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 +659,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 +668,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: 'a7b948ea69a654e3ba1e51e1eccf64e1d1935840', class: this.wrapperClasses, onChange: this.clickedElsewhere }, this.renderSelectField()));
     }
     static get is() { return "q2-select"; }
     static get encapsulation() { return "shadow"; }
@@ -897,6 +988,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 +1046,7 @@ export class Q2Select {
             },
             "searchable": {
                 "type": "boolean",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -1198,7 +1306,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