npm - q2-tecton-elements - Versions diffs - 1.46.1 → 1.48.0 - Mend

q2-tecton-elements 1.46.1 → 1.48.0

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 (335) hide show

package/dist/components/q2-popover2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"q2-popover2.js","mappings":"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","names":[],"sources":["src/components/q2-popover/q2-popover.scss?tag=q2-popover&encapsulation=shadow","src/components/q2-popover/q2-popover.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.container {\n display: none;\n}\n\n.show {\n display: block;\n position: fixed;\n z-index: var-list(--tct-popover-z-index, 50);\n margin: 0;\n padding: 0;\n overflow: auto;\n background: var-list(--tct-popover-background, --app-white, #ffffff);\n color: var-list(--tct-popover-font-color, --t-text, #4d4d4d);\n min-width: var-list(--tct-popover-min-width, 135px);\n margin-block: var-list(--tct-popover-margin-block, 0);\n box-shadow: var-list(--tct-popover-box-shadow, --app-shadow-1, unquote('0 2px 4px rgba(0, 0, 0, 0.3)'));\n border-width: var-list(--tct-popover-border-width, 0);\n border-style: solid;\n border-color: var-list(--tct-popover-border-color, transparent);\n border-radius: var-list(--tct-popover-border-radius, 0);\n // the following --comp variables are set via JS\n max-height: var(--comp-pop-max-height);\n left: var(--comp-pop-left);\n opacity: var(--comp-pop-opacity, 0);\n\n :host([block]) & {\n right: unset;\n width: var(--comp-pop-width);\n min-width: var-list(--tct-popover-min-width, unset);\n }\n\n :host([align='left']) & {\n left: var(--comp-pop-left);\n right: unset;\n }\n\n :host([align='right']) & {\n right: var(--comp-pop-right);\n left: unset;\n }\n\n &.down {\n top: var-list(--tct-popover-top, --comp-pop-top);\n bottom: unset;\n }\n\n &.up {\n top: unset;\n bottom: var(--comp-pop-bottom);\n }\n\n &.legacy {\n position: absolute;\n }\n\n @include tiny-scrollbar();\n}\n\nclick-elsewhere {\n position: relative;\n display: block;\n}\n","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';\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 /* remove when Popover API is supported in iOS */\n orientationChanged: boolean = false;\n\n /// Lifecycle hooks ///\n componentDidLoad() {\n this.handleMinHeight();\n if (this.open) this.determinePopDirection();\n }\n\n disconnectedCallback() {\n this.removeViewportListeners();\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 this.show = false;\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 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 /// Helpers ///\n handleMinHeight = () => {\n if (this.minHeight) {\n handleDeprecationWarning(this, 'minHeight', 'prop');\n }\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 // #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 // #endregion\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 // #endregion\n }\n\n setFixedCSSProperties = async () => {\n const { controlElement, containerElement, currentDirection } = 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;\n const popoverRight: number = window.visualViewport.width - controlRight;\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('--comp-pop-right', `${popoverRight}px`);\n\n if (currentDirection === 'up') {\n containerElement.style.setProperty('--comp-pop-bottom', `${window.visualViewport.height - controlTop}px`);\n }\n if (currentDirection === 'down') {\n containerElement.style.setProperty('--comp-pop-top', `${controlBottom}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 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 this.show = true;\n if (this.mode === 'legacy') {\n this.setAbsoluteCSSProperties();\n } else {\n this.setFixedCSSProperties();\n }\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 platformDimensions = window.Tecton?.platformDimensions;\n const distanceToIframeBottom = window.visualViewport.height - controlBottom;\n const viewableSpaceBelow =\n platformDimensions.innerHeight - (platformDimensions.outletOffset + controlBottom);\n const isIframeShorterThanWindow = distanceToIframeBottom < viewableSpaceBelow;\n windowHeight = platformDimensions.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 =\n (platformDimensions.outletOffset > 0 ? controlTop : controlTop + platformDimensions.outletOffset) -\n 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 /// DOM ///\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"],"version":3}
1	+ {"file":"q2-popover2.js","mappings":"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","names":[],"sources":["src/components/q2-popover/q2-popover.scss?tag=q2-popover&encapsulation=shadow","src/components/q2-popover/q2-popover.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.container {\n display: none;\n}\n\n.show {\n display: block;\n position: fixed;\n z-index: var-list(--tct-popover-z-index, 50);\n margin: 0;\n padding: 0;\n overflow: auto;\n background: var-list(--tct-popover-background, --app-white, #ffffff);\n color: var-list(--tct-popover-font-color, --t-text, #4d4d4d);\n min-width: var-list(--tct-popover-min-width, 135px);\n margin-block: var-list(--tct-popover-margin-block, 0);\n box-shadow: var-list(--tct-popover-box-shadow, --app-shadow-1, unquote('0 2px 4px rgba(0, 0, 0, 0.3)'));\n border-width: var-list(--tct-popover-border-width, 0);\n border-style: solid;\n border-color: var-list(--tct-popover-border-color, transparent);\n border-radius: var-list(--tct-popover-border-radius, 0);\n // the following --comp variables are set via JS\n max-height: var(--comp-pop-max-height);\n left: var(--comp-pop-left);\n opacity: var(--comp-pop-opacity, 0);\n\n :host([block]) & {\n right: unset;\n width: var(--comp-pop-width);\n min-width: var-list(--tct-popover-min-width, unset);\n }\n\n :host([align='left']) & {\n left: var(--comp-pop-left);\n right: unset;\n }\n\n :host([align='right']) & {\n right: var(--comp-pop-right);\n left: unset;\n }\n\n &.down {\n top: var-list(--tct-popover-top, --comp-pop-top);\n bottom: unset;\n }\n\n &.up {\n top: unset;\n bottom: var(--comp-pop-bottom);\n }\n\n &.legacy {\n position: absolute;\n }\n\n @include tiny-scrollbar();\n}\n\nclick-elsewhere {\n position: relative;\n display: block;\n}\n","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';\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 rootElementRect: DOMRect;\n\n /\n The number of pixels to leave between the popover and the edge of the viewport\n /\n displayBuffer = 10;\n\n /* remove when Popover API is supported in iOS */\n orientationChanged: boolean = false;\n\n /// Lifecycle hooks ///\n componentDidLoad() {\n this.handleMinHeight();\n if (this.open) this.determinePopDirection();\n }\n\n disconnectedCallback() {\n this.removeViewportListeners();\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 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 /// Watchers ///\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 @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 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 /// Helpers ///\n handleMinHeight = () => {\n if (this.minHeight) {\n handleDeprecationWarning(this, 'minHeight', 'prop');\n }\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 // #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 // #endregion\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 // #endregion\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 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 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 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 /// DOM ///\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"],"version":3}

package/dist/components/q2-relative-time.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
 import { d as dateFns } from './index3.js';
+import { l as loc } from './index2.js';
 const q2RelativeTimeCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline}";
 const Q2RelativeTimeStyle0 = q2RelativeTimeCss;
@@ -41,21 +42,29 @@ const Q2RelativeTime$1 = /*@__PURE__*/ proxyCustomElement(class Q2RelativeTime e
     get shouldShow() {
         return !!this.displayedMessage;
     }
-    get validDate() {
-        const targetDate = new Date(this.date);
-        return dateFns.isValid(targetDate);
-    }
-    get handleDate() {
-        if (!this.validDate)
+    get isValidDate() {
+        const date = new Date(this.date);
+        const isValid = dateFns.isValid(date);
+        if (!isValid)
             console.warn('Error: Invalid date provided to q2-relative-time.');
+        return isValid;
+    }
+    get dateObject() {
         return new Date(this.date);
     }
-    get validBaseDate() {
-        const baseDate = new Date(this.baseDate);
-        return dateFns.isValid(baseDate);
+    get isBaseDateProvided() {
+        return this.baseDate !== undefined;
+    }
+    get isValidBaseDate() {
+        const date = new Date(this.baseDate);
+        const isValid = dateFns.isValid(date);
+        if (!isValid && this.isBaseDateProvided) {
+            console.warn('Error: Invalid baseDate provided to q2-relative-time.');
+        }
+        return isValid;
     }
-    get handleBaseDate() {
-        if (this.validBaseDate) {
+    get baseDateObject() {
+        if (this.isBaseDateProvided && this.isValidBaseDate) {
             this.trimSuffix = true;
             this.sync = false;
             return new Date(this.baseDate);
@@ -72,7 +81,7 @@ const Q2RelativeTime$1 = /*@__PURE__*/ proxyCustomElement(class Q2RelativeTime e
         return false;
     }
     get handleNumeric() {
-        if (this.validBaseDate)
+        if (this.isValidBaseDate)
             return 'always';
         return this.numeric;
     }
@@ -89,13 +98,13 @@ const Q2RelativeTime$1 = /*@__PURE__*/ proxyCustomElement(class Q2RelativeTime e
         }
     }
     updateMessage() {
-        const { validDate, handleDate, handleBaseDate, locale, handleNumeric, messageFormat, isValidUnit, unit, trimSuffix, } = this;
-        if (!validDate) {
+        const { isValidDate, isBaseDateProvided, isValidBaseDate, dateObject, baseDateObject, locale, handleNumeric, messageFormat, isValidUnit, unit, trimSuffix, } = this;
+        if (!isValidDate || (isBaseDateProvided && !isValidBaseDate)) {
             this.sync = false;
-            this.displayedMessage = 'Invalid Date Provided';
+            this.displayedMessage = loc('tecton.element.relativeTime.invalidDate');
             return;
         }
-        const message = dateFns.intlFormatDistance(new Date(handleDate), new Date(handleBaseDate), {
+        const message = dateFns.intlFormatDistance(new Date(dateObject), new Date(baseDateObject), {
             locale,
             localeMatcher: 'best fit',
             numeric: handleNumeric,
@@ -118,10 +127,18 @@ const Q2RelativeTime$1 = /*@__PURE__*/ proxyCustomElement(class Q2RelativeTime e
     async displayedMessageValue() {
         return this.displayedMessage;
     }
+    /** Checks the provided date prop is a valid date. */
+    async validDateProp() {
+        return this.isValidDate;
+    }
+    /** Checks the provided baseDate prop is a valid date. */
+    async validBaseDateProp() {
+        return this.isValidBaseDate;
+    }
     /// DOM ///
     render() {
         const { shouldShow, displayedMessage } = this;
-        return h(Fragment, { key: '26e452a6b2cda738835ac8675aea30b50846920a' }, shouldShow ? h("time", { dateTime: displayedMessage }, displayedMessage) : null);
+        return h(Fragment, { key: 'bc05bc398a991b70bb5c19adde0d739768db76cd' }, shouldShow ? h("time", { dateTime: displayedMessage }, displayedMessage) : null);
     }
     get hostElement() { return this; }
     static get watchers() { return {
@@ -143,7 +160,9 @@ const Q2RelativeTime$1 = /*@__PURE__*/ proxyCustomElement(class Q2RelativeTime e
         "date": [513],
         "unit": [513],
         "displayedMessage": [32],
-        "displayedMessageValue": [64]
+        "displayedMessageValue": [64],
+        "validDateProp": [64],
+        "validBaseDateProp": [64]
     }, undefined, {
         "sync": ["syncUpdated"],
         "messageFormat": ["updateMessage"],

package/dist/components/q2-relative-time.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"q2-relative-time.js","mappings":"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","names":["Q2RelativeTime","isValidDate","intlFormatDistance"],"sources":["src/components/q2-relative-time/q2-relative-time.scss?tag=q2-relative-time&encapsulation=shadow","src/components/q2-relative-time/q2-relative-time.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: inline;\n}\n","import { Component, Prop, State, Method, Watch, Element, h, ComponentInterface, Fragment } from '@stencil/core';\nimport { isValid as isValidDate, intlFormatDistance } from 'date-fns';\n\n@Component({ tag: 'q2-relative-time', shadow: true, styleUrl: 'q2-relative-time.scss' })\nexport class Q2RelativeTime implements ComponentInterface {\n /*\n If you want to compare two specific dates, you can provide a valid `date` and `baseDate`, and the component will tell you the elapsed time between the two dates.\n * If `baseDate` is not provided, the date and time at render will be used instead and - if `sync` is true - updated every second to reflect the time between the `date` value and now.\n * @warning\n * - Requires a valid `date` value.\n * - Providing a valid `baseDate` will disable `sync` and remove the \"in\"/\"ago\" suffixes in the time message.\n * - Must be a valid ISO date string.\n /\n @Prop({ reflect: true }) baseDate: Date \| string;\n\n /\n The language used for the relative time message.\n * @info\n * It is recommended to use the BCP 47 Language Tags in the ['language-extlang' format](https://www.w3.org/International/articles/language-tags/).\n /\n @Prop({ reflect: true }) locale: string = document.documentElement.lang \|\| 'en-US';\n\n /* The length of the relative time message. /\n @Prop({ reflect: true }) messageFormat: 'long' \| 'short' \| 'narrow' = 'short';\n\n /* Set this to `always` to force the use of numeric values (e.g. \"1 day ago\") rather than relative ones (e.g. \"yesterday\") in the time message. /\n @Prop({ reflect: true }) numeric: 'always' \| 'auto' = 'auto';\n\n /\n Keep the displayed message updated as time passes in the webpage.\n * @warning\n * If a valid `baseDate` is provided, `sync` will be set to `false`.\n /\n @Prop({ reflect: true, mutable: true }) sync: boolean = true;\n\n /\n The date you want to calculate relative time from.\n * @warning\n * Must be a valid ISO date string.\n /\n @Prop({ reflect: true }) date: Date \| string;\n\n /* Force the unit of measurement. /\n @Prop({ reflect: true }) unit: 'second' \| 'minute' \| 'hour' \| 'day' \| 'month' \| 'quarter' \| 'year';\n\n /\n @private\n * Used to manage the sync timer that updates the time since the component was connected to the DOM.\n * Will be set to null if a valid `baseDate` is provided.\n /\n syncTimer = null;\n\n /* @private Will be set to true if a valid `baseDate` is provided. /\n trimSuffix: boolean = false;\n\n @State() displayedMessage: string;\n\n @Element() hostElement: HTMLElement;\n\n /// Lifecycle Hooks ///\n\n componentWillLoad(): void \| Promise<void> {\n this.updateMessage();\n }\n\n connectedCallback(): void {\n this.syncUpdated();\n }\n\n disconnectedCallback(): void {\n window.clearInterval(this.syncTimer);\n this.syncTimer = null;\n }\n\n /// Getters ///\n get shouldShow(): boolean {\n return !!this.displayedMessage;\n }\n\n get validDate(): boolean {\n const targetDate = new Date(this.date);\n return isValidDate(targetDate);\n }\n\n get handleDate(): Date {\n if (!this.validDate) console.warn('Error: Invalid date provided to q2-relative-time.');\n return new Date(this.date);\n }\n\n get validBaseDate(): boolean {\n const baseDate = new Date(this.baseDate);\n return isValidDate(baseDate);\n }\n\n get handleBaseDate(): Date {\n if (this.validBaseDate) {\n this.trimSuffix = true;\n this.sync = false;\n return new Date(this.baseDate);\n } else {\n this.trimSuffix = false;\n this.sync = true;\n return new Date();\n }\n }\n\n get isValidUnit(): boolean {\n if (['second', 'minute', 'hour', 'day', 'month', 'quarter', 'year'].includes(this.unit)) return true;\n return false;\n }\n\n get handleNumeric(): 'always' \| 'auto' {\n if (this.validBaseDate) return 'always';\n return this.numeric;\n }\n\n /// Watchers ///\n @Watch('sync')\n syncUpdated() {\n if (this.sync) {\n this.syncTimer = window.setInterval(() => {\n this.updateMessage();\n }, 1000);\n } else {\n window.clearInterval(this.syncTimer);\n this.syncTimer = null;\n }\n }\n\n @Watch('messageFormat')\n @Watch('locale')\n @Watch('date')\n @Watch('baseDate')\n @Watch('numeric')\n @Watch('unit')\n updateMessage() {\n const {\n validDate,\n handleDate,\n handleBaseDate,\n locale,\n handleNumeric,\n messageFormat,\n isValidUnit,\n unit,\n trimSuffix,\n } = this;\n\n if (!validDate) {\n this.sync = false;\n this.displayedMessage = 'Invalid Date Provided';\n return;\n }\n\n const message = intlFormatDistance(new Date(handleDate), new Date(handleBaseDate), {\n locale,\n localeMatcher: 'best fit',\n numeric: handleNumeric,\n style: messageFormat,\n unit: isValidUnit ? unit : null,\n });\n\n if (trimSuffix) {\n this.displayedMessage = this.trimMessage(message);\n } else {\n this.displayedMessage = message;\n }\n }\n\n /// Helpers ///\n trimMessage(message: string): string {\n return message.replace(/^in\\s?/, '').replace(/\\sago$/, '');\n }\n\n /// Methods ///\n /* Retrieves the value of the displayed messages. */\n @Method()\n async displayedMessageValue(): Promise<string> {\n return this.displayedMessage;\n }\n\n /// DOM ///\n\n render() {\n const { shouldShow, displayedMessage } = this;\n\n return <Fragment>{shouldShow ? <time dateTime={displayedMessage}>{displayedMessage}</time> : null}</Fragment>;\n }\n}\n"],"version":3}
1	+ {"file":"q2-relative-time.js","mappings":"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","names":["Q2RelativeTime","isValidDate","intlFormatDistance"],"sources":["src/components/q2-relative-time/q2-relative-time.scss?tag=q2-relative-time&encapsulation=shadow","src/components/q2-relative-time/q2-relative-time.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: inline;\n}\n","import { Component, Prop, State, Method, Watch, Element, h, ComponentInterface, Fragment } from '@stencil/core';\nimport { isValid as isValidDate, intlFormatDistance } from 'date-fns';\nimport { loc } from '../../utils';\n\n@Component({ tag: 'q2-relative-time', shadow: true, styleUrl: 'q2-relative-time.scss' })\nexport class Q2RelativeTime implements ComponentInterface {\n /*\n If you want to display the length of time between two specific dates, you can provide a valid `date` and `baseDate`, and the component will display the length of time between the two dates.\n \n If `baseDate` is not provided, the date and time at render will be used instead and - if `sync` is true - updated every second to reflect the time between the `date` value and the time at render.\n \n @warning\n * - Requires a valid `date` value.\n * - If the provided `baseDate` is invalid, the component will display \"Invalid Date\" and a warning message will be printed in the console.\n * - Providing a valid `baseDate` will disable `sync` and remove the \"in\"/\"ago\" suffixes in the time message.\n * - Must be a valid ISO date string.\n /\n @Prop({ reflect: true }) baseDate: Date \| string;\n\n /\n The language used for the displayed message.\n * @info\n * It is recommended to use the BCP 47 Language Tags in the [\"language-extlang\" format](https://www.w3.org/International/articles/language-tags/).\n /\n @Prop({ reflect: true }) locale: string = document.documentElement.lang \|\| 'en-US';\n\n /* The length of the relative time message. /\n @Prop({ reflect: true }) messageFormat: 'long' \| 'short' \| 'narrow' = 'short';\n\n /\n Determines if the displayed message will use numeric or relative values.\n @info\n Set this property to `always` to force the use of numeric values (e.g. \"1 day ago\") rather than relative ones (e.g. \"yesterday\").\n /\n @Prop({ reflect: true }) numeric: 'always' \| 'auto' = 'auto';\n\n /\n Keep the displayed message updated as time passes in the webpage.\n * @warning\n * If a valid `baseDate` is provided, `sync` will be set to `false`.\n /\n @Prop({ reflect: true, mutable: true }) sync: boolean = true;\n\n /\n The date you want to calculate relative time from.\n \n @warning\n * - Must be a valid ISO date string.\n * - If the provided `date` is invalid, the component will display \"Invalid Date\" and a warning message will be printed in the console.\n /\n @Prop({ reflect: true }) date: Date \| string;\n\n /* Enforces the use of the provided unit of measurement in the displayed message. /\n @Prop({ reflect: true }) unit: 'second' \| 'minute' \| 'hour' \| 'day' \| 'month' \| 'quarter' \| 'year';\n\n /\n @private\n * Used to manage the sync timer that updates the time since the component was connected to the DOM.\n * Will be set to null if a valid `baseDate` is provided.\n /\n syncTimer = null;\n\n /* @private Will be set to true if a valid `baseDate` is provided. /\n trimSuffix: boolean = false;\n\n @State() displayedMessage: string;\n\n @Element() hostElement: HTMLElement;\n\n /// Lifecycle Hooks ///\n\n componentWillLoad(): void \| Promise<void> {\n this.updateMessage();\n }\n\n connectedCallback(): void {\n this.syncUpdated();\n }\n\n disconnectedCallback(): void {\n window.clearInterval(this.syncTimer);\n this.syncTimer = null;\n }\n\n /// Getters ///\n get shouldShow(): boolean {\n return !!this.displayedMessage;\n }\n\n get isValidDate(): boolean {\n const date = new Date(this.date);\n const isValid = isValidDate(date);\n if (!isValid) console.warn('Error: Invalid date provided to q2-relative-time.');\n return isValid;\n }\n\n get dateObject(): Date {\n return new Date(this.date);\n }\n\n get isBaseDateProvided(): boolean {\n return this.baseDate !== undefined;\n }\n\n get isValidBaseDate(): boolean {\n const date = new Date(this.baseDate);\n const isValid = isValidDate(date);\n if (!isValid && this.isBaseDateProvided) {\n console.warn('Error: Invalid baseDate provided to q2-relative-time.');\n }\n return isValid;\n }\n\n get baseDateObject(): Date {\n if (this.isBaseDateProvided && this.isValidBaseDate) {\n this.trimSuffix = true;\n this.sync = false;\n return new Date(this.baseDate);\n } else {\n this.trimSuffix = false;\n this.sync = true;\n return new Date();\n }\n }\n\n get isValidUnit(): boolean {\n if (['second', 'minute', 'hour', 'day', 'month', 'quarter', 'year'].includes(this.unit)) return true;\n return false;\n }\n\n get handleNumeric(): 'always' \| 'auto' {\n if (this.isValidBaseDate) return 'always';\n return this.numeric;\n }\n\n /// Watchers ///\n @Watch('sync')\n syncUpdated() {\n if (this.sync) {\n this.syncTimer = window.setInterval(() => {\n this.updateMessage();\n }, 1000);\n } else {\n window.clearInterval(this.syncTimer);\n this.syncTimer = null;\n }\n }\n\n @Watch('messageFormat')\n @Watch('locale')\n @Watch('date')\n @Watch('baseDate')\n @Watch('numeric')\n @Watch('unit')\n updateMessage() {\n const {\n isValidDate,\n isBaseDateProvided,\n isValidBaseDate,\n dateObject,\n baseDateObject,\n locale,\n handleNumeric,\n messageFormat,\n isValidUnit,\n unit,\n trimSuffix,\n } = this;\n\n if (!isValidDate \|\| (isBaseDateProvided && !isValidBaseDate)) {\n this.sync = false;\n this.displayedMessage = loc('tecton.element.relativeTime.invalidDate');\n return;\n }\n\n const message = intlFormatDistance(new Date(dateObject), new Date(baseDateObject), {\n locale,\n localeMatcher: 'best fit',\n numeric: handleNumeric,\n style: messageFormat,\n unit: isValidUnit ? unit : null,\n });\n\n if (trimSuffix) {\n this.displayedMessage = this.trimMessage(message);\n } else {\n this.displayedMessage = message;\n }\n }\n\n /// Helpers ///\n trimMessage(message: string): string {\n return message.replace(/^in\\s?/, '').replace(/\\sago$/, '');\n }\n\n /// Methods ///\n /* Retrieves the value of the displayed messages. /\n @Method()\n async displayedMessageValue(): Promise<string> {\n return this.displayedMessage;\n }\n\n /* Checks the provided date prop is a valid date. /\n @Method()\n async validDateProp(): Promise<boolean> {\n return this.isValidDate;\n }\n\n /* Checks the provided baseDate prop is a valid date. */\n @Method()\n async validBaseDateProp(): Promise<boolean> {\n return this.isValidBaseDate;\n }\n\n /// DOM ///\n\n render() {\n const { shouldShow, displayedMessage } = this;\n\n return <Fragment>{shouldShow ? <time dateTime={displayedMessage}>{displayedMessage}</time> : null}</Fragment>;\n }\n}\n"],"version":3}

package/dist/components/q2-section.js CHANGED Viewed

@@ -164,9 +164,9 @@ const Q2Section$1 = /*@__PURE__*/ proxyCustomElement(class Q2Section extends HTM
                 wrapperClasses.push('is-transitioning');
         }
         const showDefaultHeader = !this.hasYieldedHeader && !!this.label;
-        return (h("section", { key: '4cae0e6f0057c318e45274cdabe74878bad2a995', class: "wrapper" }, h("header", { key: 'bb4439e069cb85a3950cabfcc08d220415229082', class: hasHeader ? 'has-header' : '' }, h("div", { key: '036bd23de5da7bd0c45a31521fdeffa240e398b0', class: "header-content", id: this.titleId, onClick: this.collapsible && this.onHeaderClick }, showDefaultHeader && h("h2", { key: '2742ab3ad5654864b0951637e0b5a5a5028ea34d', class: "title" }, loc(this.label)), h("div", { key: 'b772b2028190079db060d28ebaab67723b030462', ref: el => (this.headerSlotWrapper = el), class: "header-slot-wrapper" }, h("slot", { key: '986a404b7a5297af31d4122ffe4daa4697b90203', ref: (el) => (this.headerSlot = el), name: "q2-section-header" }))), this.collapsible && !this.noCollapseIcon && (h("q2-btn", { key: '678f61529c25ceb257cf7d26abdd46448b0f0d96', 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: '5494baf730dd97d54e1e50b6366dbaea3676ce16', type: "chevron-up" })))), h("div", { key: '33cdc24262ad444f8d61cd557371963e5ebf4ce0', class: wrapperClasses.join(' '), id: this.contentId, "aria-labelledby": this.titleId, role: "region", onTransitionEnd: this.onTransitionEnd, style: this.collapsible && {
+        return (h("section", { key: '245c8a2da4a8c8ae1787d91c9b35872105912e95', class: "wrapper" }, h("header", { key: 'bfc10eaaa837d4a8cb49bc3f4397288d546f9e67', class: hasHeader ? 'has-header' : '' }, h("div", { key: 'd25b05626ca123afb549ec16c1ce5bec625db4d7', class: "header-content", id: this.titleId, onClick: this.collapsible && this.onHeaderClick }, showDefaultHeader && h("h2", { key: 'f2f8c57e3af85b954096e2e25ebef50bd7b79cb0', class: "title" }, loc(this.label)), h("div", { key: 'efd8d321da74b310a48c0c7457d30c4e2386611e', ref: el => (this.headerSlotWrapper = el), class: "header-slot-wrapper" }, h("slot", { key: 'ceb27324426a2b7db0d91ce275fa18df588ada1d', ref: (el) => (this.headerSlot = el), name: "q2-section-header" }))), this.collapsible && !this.noCollapseIcon && (h("q2-btn", { key: 'a3e309075ca001daddcd645b9160837155ce7506', 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: '3f349cda906286b7a346a9bc9fa6688f47a5392f', type: "chevron-up" })))), h("div", { key: '974f2eaa3ff5e607561154906ec4b58f44f2bd84', class: wrapperClasses.join(' '), id: this.contentId, "aria-labelledby": this.titleId, role: "region", onTransitionEnd: this.onTransitionEnd, style: this.collapsible && {
                 height: this.contentHeight,
-            } }, h("div", { key: 'f30463473a96a1e5fe8dc4f5951c147a1847d2f4', ref: el => (this.contentContainer = el), class: "content", tabindex: "-1" }, h("slot", { key: 'e41200b2ed13a0e280c223020c7b7ada8d3b6056', ref: (el) => (this.contentSlot = el) })))));
+            } }, h("div", { key: '63e20753fdfca17b6022903d38a22d0f61ea439d', ref: el => (this.contentContainer = el), class: "content", tabindex: "-1" }, h("slot", { key: '08150c784b5a0d2ca7af67bbc5763754c165564f', ref: (el) => (this.contentSlot = el) })))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-section.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"q2-section.js","mappings":"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","names":["Q2Section"],"sources":["src/components/q2-section/q2-section.scss?tag=q2-section&encapsulation=shadow","src/components/q2-section/q2-section.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions.scss';\n\n:host {\n display: block;\n background: var-list(\n --tct-section-background,\n var-prefixer(section-background-color),\n var-prefixer(section-bg),\n --app-white,\n #ffffff\n );\n color: var-list(var-prefixer(section-font-color), --t-text, #4d4d4d);\n border-radius: var-list(var-prefixer(section-border-radius), --app-border-radius-1, 3px);\n margin: var-list(var-prefixer(section-margin), --app-scale-3x, 15px);\n border-width: var-list(--tct-section-border-width, 0);\n border-style: var-list(--tct-section-border-style, solid);\n border-color: var-list(--tct-section-border-color, none);\n\n @media screen and (max-width: 767px) {\n --comp-default-margin: var(--app-scale-3x, 15px) 0;\n margin: var-list(var-prefixer(section-margin), --comp-default-margin);\n }\n\n @media print {\n --comp-default-print-margin: var(--app-scale-3x, 15px) 0;\n margin: var-list(--tct-section-print-margin, --comp-default-print-margin);\n }\n}\n\n.wrapper {\n --comp-tween: #{var-list(var-prefixer(section-tween), --app-tween-1, unquote('0.2s ease'))};\n --comp-default-wrapper-padding: var(--app-scale-1x, 5px) 0;\n display: block;\n padding: var-list(var-prefixer(section-wrapper-padding), --comp-default-wrapper-padding);\n\n &:hover {\n box-shadow: var-list(var-prefixer(section-wrapper-hover-box-shadow), inherit);\n }\n\n :host([collapsible]) & {\n --comp-tween: #{var-list(var-prefixer(section-tween), --app-tween-2, unquote('0.4s ease'))};\n }\n}\n\nheader {\n --comp-default-header-padding: 0 var(--app-scale-3x, 15px);\n padding: var-list(var-prefixer(section-header-padding), --comp-default-header-padding);\n display: flex;\n\n @media print {\n padding: var-list(--tct-section-header-print-padding, 0);\n }\n\n &.has-header {\n min-height: var-list(var-prefixer(section-header-min-height), 44px);\n }\n}\n\n.header-content {\n flex: 1 1 100%;\n min-width: 0;\n align-self: center;\n\n :host([collapsible]) & {\n cursor: pointer;\n }\n}\n\n.title {\n margin: var-list(--tct-section-title-margin, 0);\n font-size: var-list(--tct-section-title-font-size, 20px);\n font-weight: var-list(--tct-section-title-font-weight, 600);\n text-transform: var-list(--tct-section-title-text-transform, uppercase);\n letter-spacing: var-list(--tct-section-title-letter-spacing, 0.5px);\n}\n\nq2-icon {\n transition: transform var(--comp-tween);\n\n :host(:not([expanded])) &,\n :host([expanded='false']) & {\n transform: rotate(180deg);\n }\n}\n\n.content-wrapper {\n height: auto;\n\n &.is-closed {\n display: none;\n overflow: hidden;\n }\n\n &.is-transitioning {\n overflow: hidden;\n }\n\n :host([collapsible]) & {\n transition: height var(--comp-tween);\n }\n}\n\n.content {\n --comp-default-content-padding: var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);\n padding: var-list(var-prefixer(section-content-padding), --comp-default-content-padding);\n\n @media print {\n padding: var-list(--tct-section-content-print-padding, 0);\n }\n\n &:focus {\n box-shadow: none;\n }\n\n :host([collapsible]) :host(:not([expanded])) & {\n visibility: hidden;\n }\n}\n","import {\n Component,\n ComponentInterface,\n Prop,\n Element,\n Listen,\n State,\n Watch,\n h,\n Event,\n EventEmitter,\n} from '@stencil/core';\nimport { isEventFromElement, loc, nextPaint, overrideFocus, resizeIframe } from 'src/utils';\n\n@Component({ tag: 'q2-section', shadow: true, styleUrl: 'q2-section.scss' })\nexport class Q2Section implements ComponentInterface {\n /** Determines if the section is collapsible. /\n @Prop({ reflect: true }) collapsible: boolean;\n\n /* Indicates if the `q2-section` is in an expanded state or not. /\n @Prop({ reflect: true, mutable: true }) expanded: boolean;\n\n /* The text to display above the `q2-section`. Renders as an `<h2>` element. /\n @Prop({ reflect: true }) label: string;\n\n /* Determines if the collapse chevron icon should show in the `q2-section` header. /\n @Prop({ reflect: true }) noCollapseIcon: boolean;\n\n @Element() hostElement: HTMLElement;\n @State() contentHeight: string;\n @State() hideContent: boolean = false;\n @State() hasYieldedHeader: boolean = false;\n\n titleId: string = 'title';\n contentId: string = 'content';\n resizerFn: NodeJS.Timer \| undefined;\n headerSlotMutationObserver: MutationObserver;\n contentSlotMutationObserver: MutationObserver;\n contentContainer: HTMLDivElement;\n headerSlotWrapper: HTMLDivElement;\n headerSlot: HTMLSlotElement;\n contentSlot: HTMLSlotElement;\n\n componentWillLoad() {\n this.onHeaderSlotChange();\n const { collapsible, expanded } = this;\n this.contentHeight = collapsible && expanded ? undefined : '0px';\n this.hideContent = !expanded;\n }\n\n componentDidLoad() {\n this.addHeaderSlotListener();\n this.addContentSlotListener();\n overrideFocus(this.hostElement);\n }\n\n disconnectedCallback() {\n this.removeHeaderSlotListener();\n this.removeContentSlotListener();\n }\n\n /// Listeners ///\n @Listen('change')\n defaultChangeHandler(event: CustomEvent) {\n if (event.target === this.hostElement && !this.hostElement.onchange && !!event.detail) {\n this.expanded = event.detail.expanded;\n }\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.contentContainer.focus();\n }\n\n /// Watchers ///\n @Watch('expanded')\n async expandedObserver(expanded: boolean) {\n this.clearResizeInterval();\n this.resizerFn = setInterval(resizeIframe, 5);\n\n if (expanded) {\n this.expandSection();\n } else {\n this.collapseSection();\n }\n }\n\n async collapseSection() {\n this.contentHeight = this.contentContainerHeight;\n await nextPaint(() => {\n this.contentHeight = this.currentHeight;\n });\n }\n\n async expandSection() {\n this.hideContent = false;\n await nextPaint(() => {\n this.contentHeight = this.currentHeight;\n });\n }\n\n @Watch('collapsible')\n collapsibleObserver() {\n this.contentHeight = this.currentHeight;\n }\n\n /// Events ///\n /\n Emitted when the section is expanded or collapsed.\n * @legacyEvent\n */\n @Event() change: EventEmitter<{ expanded: boolean }>;\n\n /// Event Handlers ///\n onHeaderClick = () => {\n this.change.emit({\n expanded: !this.expanded,\n });\n };\n\n onTransitionEnd = () => {\n if (this.expanded) {\n this.contentHeight = undefined;\n } else {\n this.hideContent = true;\n }\n\n setTimeout(() => {\n // This gives enough time for all values to get passed over\n // Previously, the interval was never cleared and the fn was called indefinitely then filtered\n // Will revisit in TCT-599\n this.clearResizeInterval();\n }, 1000);\n };\n\n onHeaderSlotChange = () => {\n const hasSlotContent = !!this.hostElement.querySelector('[slot=\"q2-section-header\"]');\n\n if (this.hasYieldedHeader !== hasSlotContent) {\n this.hasYieldedHeader = !!hasSlotContent;\n }\n };\n\n /// Getters ///\n get currentHeight() {\n const { collapsible, expanded } = this;\n if (!collapsible) {\n return null;\n } else if (expanded) {\n return this.contentContainerHeight;\n } else {\n return '0';\n }\n }\n\n get contentContainerHeight() {\n return `${this.contentContainer.offsetHeight \|\| 0}px`;\n }\n\n /// Helpers ///\n clearResizeInterval = () => {\n this.resizerFn && clearInterval(this.resizerFn);\n };\n\n addHeaderSlotListener = () => {\n if (this.headerSlot) {\n this.headerSlot.addEventListener('slotchange', this.onHeaderSlotChange);\n return;\n }\n\n const observer = new MutationObserver(this.onHeaderSlotChange);\n observer.observe(this.headerSlotWrapper, { childList: true });\n this.headerSlotMutationObserver = observer;\n };\n\n removeHeaderSlotListener = () => {\n if (this.headerSlot) {\n this.headerSlot.removeEventListener('slotchange', this.onHeaderSlotChange);\n return;\n }\n\n this.headerSlotMutationObserver.disconnect();\n };\n\n addContentSlotListener = () => {\n if (this.contentSlot) {\n this.contentSlot.addEventListener('slotchange', resizeIframe);\n return;\n }\n\n const observer = new MutationObserver(resizeIframe);\n observer.observe(this.contentContainer, { childList: true, subtree: true });\n this.contentSlotMutationObserver = observer;\n };\n\n removeContentSlotListener = () => {\n if (this.contentSlot) {\n this.contentSlot.removeEventListener('slotchange', resizeIframe);\n return;\n }\n this.contentSlotMutationObserver.disconnect();\n };\n\n render() {\n const hasHeader = this.label \|\| this.hasYieldedHeader;\n const wrapperClasses = ['content-wrapper'];\n const { collapsible, hideContent, contentHeight } = this;\n if (collapsible) {\n if (hideContent) wrapperClasses.push('is-closed');\n else if (contentHeight) wrapperClasses.push('is-transitioning');\n }\n\n const showDefaultHeader = !this.hasYieldedHeader && !!this.label;\n\n return (\n <section class=\"wrapper\">\n <header class={hasHeader ? 'has-header' : ''}>\n <div\n class=\"header-content\"\n id={this.titleId}\n onClick={this.collapsible && this.onHeaderClick}\n >\n {showDefaultHeader && <h2 class=\"title\">{loc(this.label)}</h2>}\n <div\n ref={el => (this.headerSlotWrapper = el)}\n class=\"header-slot-wrapper\"\n >\n <slot\n ref={(el: HTMLSlotElement) => (this.headerSlot = el)}\n name=\"q2-section-header\"\n />\n </div>\n </div>\n {this.collapsible && !this.noCollapseIcon && (\n <q2-btn\n label={loc(this.label \|\| 'tecton.element.section.defaultToggleLabel')}\n ariaExpanded={`${!!this.expanded}`}\n ariaControls={this.contentId}\n test-id=\"toggleButton\"\n hide-label\n onClick={this.onHeaderClick}\n >\n <q2-icon type=\"chevron-up\" />\n </q2-btn>\n )}\n </header>\n <div\n class={wrapperClasses.join(' ')}\n id={this.contentId}\n aria-labelledby={this.titleId}\n role=\"region\"\n onTransitionEnd={this.onTransitionEnd}\n style={\n this.collapsible && {\n height: this.contentHeight,\n }\n }\n >\n <div\n ref={el => (this.contentContainer = el)}\n class=\"content\"\n tabindex=\"-1\"\n >\n <slot ref={(el: HTMLSlotElement) => (this.contentSlot = el)} />\n </div>\n </div>\n </section>\n );\n }\n}\n"],"version":3}
1	+ {"file":"q2-section.js","mappings":"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","names":["Q2Section"],"sources":["src/components/q2-section/q2-section.scss?tag=q2-section&encapsulation=shadow","src/components/q2-section/q2-section.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions.scss';\n\n:host {\n display: block;\n background: var-list(\n --tct-section-background,\n var-prefixer(section-background-color),\n var-prefixer(section-bg),\n --app-white,\n #ffffff\n );\n color: var-list(var-prefixer(section-font-color), --t-text, #4d4d4d);\n border-radius: var-list(var-prefixer(section-border-radius), --app-border-radius-1, 3px);\n margin: var-list(var-prefixer(section-margin), --app-scale-3x, 15px);\n border-width: var-list(--tct-section-border-width, 0);\n border-style: var-list(--tct-section-border-style, solid);\n border-color: var-list(--tct-section-border-color, none);\n\n @media screen and (max-width: 767px) {\n --comp-default-margin: var(--app-scale-3x, 15px) 0;\n margin: var-list(var-prefixer(section-margin), --comp-default-margin);\n }\n\n @media print {\n --comp-default-print-margin: var(--app-scale-3x, 15px) 0;\n margin: var-list(--tct-section-print-margin, --comp-default-print-margin);\n }\n}\n\n.wrapper {\n --comp-tween: #{var-list(var-prefixer(section-tween), --app-tween-1, unquote('0.2s ease'))};\n --comp-default-wrapper-padding: var(--app-scale-1x, 5px) 0;\n display: block;\n padding: var-list(var-prefixer(section-wrapper-padding), --comp-default-wrapper-padding);\n\n &:hover {\n box-shadow: var-list(var-prefixer(section-wrapper-hover-box-shadow), inherit);\n }\n\n :host([collapsible]) & {\n --comp-tween: #{var-list(var-prefixer(section-tween), --app-tween-2, unquote('0.4s ease'))};\n }\n}\n\nheader {\n --comp-default-header-padding: 0 var(--app-scale-3x, 15px);\n padding: var-list(var-prefixer(section-header-padding), --comp-default-header-padding);\n display: flex;\n\n @media print {\n padding: var-list(--tct-section-header-print-padding, 0);\n }\n\n &.has-header {\n min-height: var-list(var-prefixer(section-header-min-height), 44px);\n }\n}\n\n.header-content {\n flex: 1 1 100%;\n min-width: 0;\n align-self: center;\n\n :host([collapsible]) & {\n cursor: pointer;\n }\n}\n\n.title {\n margin: var-list(--tct-section-title-margin, 0);\n font-size: var-list(--tct-section-title-font-size, 20px);\n font-weight: var-list(--tct-section-title-font-weight, 600);\n text-transform: var-list(--tct-section-title-text-transform, uppercase);\n letter-spacing: var-list(--tct-section-title-letter-spacing, 0.5px);\n}\n\nq2-icon {\n transition: transform var(--comp-tween);\n\n :host(:not([expanded])) &,\n :host([expanded='false']) & {\n transform: rotate(180deg);\n }\n}\n\n.content-wrapper {\n height: auto;\n\n &.is-closed {\n display: none;\n overflow: hidden;\n }\n\n &.is-transitioning {\n overflow: hidden;\n }\n\n :host([collapsible]) & {\n transition: height var(--comp-tween);\n }\n}\n\n.content {\n --comp-default-content-padding: var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);\n padding: var-list(var-prefixer(section-content-padding), --comp-default-content-padding);\n\n @media print {\n padding: var-list(--tct-section-content-print-padding, 0);\n }\n\n &:focus {\n box-shadow: none;\n }\n\n :host([collapsible]) :host(:not([expanded])) & {\n visibility: hidden;\n }\n}\n","import {\n Component,\n ComponentInterface,\n Prop,\n Element,\n Listen,\n State,\n Watch,\n h,\n Event,\n EventEmitter,\n} from '@stencil/core';\nimport { isEventFromElement, loc, nextPaint, overrideFocus, resizeIframe } from 'src/utils';\n\n@Component({ tag: 'q2-section', shadow: true, styleUrl: 'q2-section.scss' })\nexport class Q2Section implements ComponentInterface {\n /** Determines if the section is collapsible. /\n @Prop({ reflect: true }) collapsible: boolean;\n\n /* Indicates if the `q2-section` is in an expanded state or not. /\n @Prop({ reflect: true, mutable: true }) expanded: boolean;\n\n /\n The text to display above the `q2-section`. Renders as an `<h2>` element.\n \n It is also used to provided an `aria-label` for the toggle button when the component is collapsible.\n \n @warning\n * If you are providing a custom header, setting this property is still strongly encouraged for the purposes of\n * accessibility.\n /\n @Prop({ reflect: true }) label: string;\n\n /* Determines if the collapse chevron icon should show in the `q2-section` header. /\n @Prop({ reflect: true }) noCollapseIcon: boolean;\n\n @Element() hostElement: HTMLElement;\n @State() contentHeight: string;\n @State() hideContent: boolean = false;\n @State() hasYieldedHeader: boolean = false;\n\n titleId: string = 'title';\n contentId: string = 'content';\n resizerFn: NodeJS.Timeout \| undefined;\n headerSlotMutationObserver: MutationObserver;\n contentSlotMutationObserver: MutationObserver;\n contentContainer: HTMLDivElement;\n headerSlotWrapper: HTMLDivElement;\n headerSlot: HTMLSlotElement;\n contentSlot: HTMLSlotElement;\n\n componentWillLoad() {\n this.onHeaderSlotChange();\n const { collapsible, expanded } = this;\n this.contentHeight = collapsible && expanded ? undefined : '0px';\n this.hideContent = !expanded;\n }\n\n componentDidLoad() {\n this.addHeaderSlotListener();\n this.addContentSlotListener();\n overrideFocus(this.hostElement);\n }\n\n disconnectedCallback() {\n this.removeHeaderSlotListener();\n this.removeContentSlotListener();\n }\n\n /// Listeners ///\n @Listen('change')\n defaultChangeHandler(event: CustomEvent) {\n if (event.target === this.hostElement && !this.hostElement.onchange && !!event.detail) {\n this.expanded = event.detail.expanded;\n }\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.contentContainer.focus();\n }\n\n /// Watchers ///\n @Watch('expanded')\n async expandedObserver(expanded: boolean) {\n this.clearResizeInterval();\n this.resizerFn = setInterval(resizeIframe, 5);\n\n if (expanded) {\n this.expandSection();\n } else {\n this.collapseSection();\n }\n }\n\n async collapseSection() {\n this.contentHeight = this.contentContainerHeight;\n await nextPaint(() => {\n this.contentHeight = this.currentHeight;\n });\n }\n\n async expandSection() {\n this.hideContent = false;\n await nextPaint(() => {\n this.contentHeight = this.currentHeight;\n });\n }\n\n @Watch('collapsible')\n collapsibleObserver() {\n this.contentHeight = this.currentHeight;\n }\n\n /// Events ///\n /\n Emitted when the section is expanded or collapsed.\n * @legacyEvent\n */\n @Event() change: EventEmitter<{ expanded: boolean }>;\n\n /// Event Handlers ///\n onHeaderClick = () => {\n this.change.emit({\n expanded: !this.expanded,\n });\n };\n\n onTransitionEnd = () => {\n if (this.expanded) {\n this.contentHeight = undefined;\n } else {\n this.hideContent = true;\n }\n\n setTimeout(() => {\n // This gives enough time for all values to get passed over\n // Previously, the interval was never cleared and the fn was called indefinitely then filtered\n // Will revisit in TCT-599\n this.clearResizeInterval();\n }, 1000);\n };\n\n onHeaderSlotChange = () => {\n const hasSlotContent = !!this.hostElement.querySelector('[slot=\"q2-section-header\"]');\n\n if (this.hasYieldedHeader !== hasSlotContent) {\n this.hasYieldedHeader = !!hasSlotContent;\n }\n };\n\n /// Getters ///\n get currentHeight() {\n const { collapsible, expanded } = this;\n if (!collapsible) {\n return null;\n } else if (expanded) {\n return this.contentContainerHeight;\n } else {\n return '0';\n }\n }\n\n get contentContainerHeight() {\n return `${this.contentContainer.offsetHeight \|\| 0}px`;\n }\n\n /// Helpers ///\n clearResizeInterval = () => {\n this.resizerFn && clearInterval(this.resizerFn);\n };\n\n addHeaderSlotListener = () => {\n if (this.headerSlot) {\n this.headerSlot.addEventListener('slotchange', this.onHeaderSlotChange);\n return;\n }\n\n const observer = new MutationObserver(this.onHeaderSlotChange);\n observer.observe(this.headerSlotWrapper, { childList: true });\n this.headerSlotMutationObserver = observer;\n };\n\n removeHeaderSlotListener = () => {\n if (this.headerSlot) {\n this.headerSlot.removeEventListener('slotchange', this.onHeaderSlotChange);\n return;\n }\n\n this.headerSlotMutationObserver.disconnect();\n };\n\n addContentSlotListener = () => {\n if (this.contentSlot) {\n this.contentSlot.addEventListener('slotchange', resizeIframe);\n return;\n }\n\n const observer = new MutationObserver(resizeIframe);\n observer.observe(this.contentContainer, { childList: true, subtree: true });\n this.contentSlotMutationObserver = observer;\n };\n\n removeContentSlotListener = () => {\n if (this.contentSlot) {\n this.contentSlot.removeEventListener('slotchange', resizeIframe);\n return;\n }\n this.contentSlotMutationObserver.disconnect();\n };\n\n render() {\n const hasHeader = this.label \|\| this.hasYieldedHeader;\n const wrapperClasses = ['content-wrapper'];\n const { collapsible, hideContent, contentHeight } = this;\n if (collapsible) {\n if (hideContent) wrapperClasses.push('is-closed');\n else if (contentHeight) wrapperClasses.push('is-transitioning');\n }\n\n const showDefaultHeader = !this.hasYieldedHeader && !!this.label;\n\n return (\n <section class=\"wrapper\">\n <header class={hasHeader ? 'has-header' : ''}>\n <div\n class=\"header-content\"\n id={this.titleId}\n onClick={this.collapsible && this.onHeaderClick}\n >\n {showDefaultHeader && <h2 class=\"title\">{loc(this.label)}</h2>}\n <div\n ref={el => (this.headerSlotWrapper = el)}\n class=\"header-slot-wrapper\"\n >\n <slot\n ref={(el: HTMLSlotElement) => (this.headerSlot = el)}\n name=\"q2-section-header\"\n />\n </div>\n </div>\n {this.collapsible && !this.noCollapseIcon && (\n <q2-btn\n label={loc(this.label \|\| 'tecton.element.section.defaultToggleLabel')}\n ariaExpanded={`${!!this.expanded}`}\n ariaControls={this.contentId}\n test-id=\"toggleButton\"\n hide-label\n onClick={this.onHeaderClick}\n >\n <q2-icon type=\"chevron-up\" />\n </q2-btn>\n )}\n </header>\n <div\n class={wrapperClasses.join(' ')}\n id={this.contentId}\n aria-labelledby={this.titleId}\n role=\"region\"\n onTransitionEnd={this.onTransitionEnd}\n style={\n this.collapsible && {\n height: this.contentHeight,\n }\n }\n >\n <div\n ref={el => (this.contentContainer = el)}\n class=\"content\"\n tabindex=\"-1\"\n >\n <slot ref={(el: HTMLSlotElement) => (this.contentSlot = el)} />\n </div>\n </div>\n </section>\n );\n }\n}\n"],"version":3}

package/dist/components/q2-select2.js CHANGED Viewed

@@ -90,6 +90,11 @@ const Q2Select = /*@__PURE__*/ proxyCustomElement(class Q2Select extends HTMLEle
                 'Escape',
                 'Tab',
             ];
+            if (this.searchable && (key === ' ' || key === 'Enter') && this.inputField.value == '') {
+                event.preventDefault();
+                if (!this.open)
+                    this.openDropdownWithoutActiveElement();
+            }
             if (this.searchable && !keysForOptionListToHandle.includes(key))
                 return;
             if (this.shouldClearSearchText(event))
@@ -392,6 +397,9 @@ const Q2Select = /*@__PURE__*/ proxyCustomElement(class Q2Select extends HTMLEle
             this.selectedOptions = [];
         }
     }
+    onClearHandler() {
+        this.clearValue();
+    }
     onHostElementInput(event) {
         if (!this.searchable || event.target !== this.hostElement || this.hostElement.oninput)
             return;
@@ -587,12 +595,11 @@ const Q2Select = /*@__PURE__*/ proxyCustomElement(class Q2Select extends HTMLEle
     }
     render() {
         var _a;
-        const showAsPseudo = !this.searchable;
-        return (h("click-elsewhere", { key: 'a3fbee9295ca05dbb4856eebf5e6fb53a9f9e2a3', class: this.wrapperClasses, onChange: this.clickedElsewhere }, h("div", { key: 'a50de81a29cca3188898f6d4b6e16cbbfb6839f4', "aria-live": "polite", "aria-atomic": "true", role: "status", class: "sr" }, this.statusMessage), h("q2-input", { key: '6059e00c0d5b86920a9193b9bf3bd06d0de27d92', 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("click-elsewhere", { key: '421fc4811bdf2f8cfb899ee9823ce20e3301032c', class: this.wrapperClasses, onChange: this.clickedElsewhere }, h("div", { key: '1a2b96c2e6dbacfa7dcc8918ff4acab71046dc8d', "aria-live": "polite", "aria-atomic": "true", role: "status", class: "sr" }, this.statusMessage), h("q2-input", { key: 'fd678010a8f0d53a4d93c265204bedf72679221a', 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", role: "combobox", pseudo: showAsPseudo, "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" }, this.renderCustomDisplay()), h("div", { key: '3d0564757940cb634bac20ff556e540ef455f695', class: "custom-display-content", hidden: !this.hasCustomDisplay || !!this.searchText, onClick: this.onCustomDisplayClick }, h("slot", { key: 'dfdfcb9a0ca41f229d2b50c3b300f47cc565cace', 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", { key: '26f8c78fb455e7fc9451018ed2745ab53018c270', class: "custom-display-content", hidden: !this.hasCustomDisplay || !!this.searchText, onClick: this.onCustomDisplayClick }, h("slot", { key: '4f76ab176fbd88b99aab88ad9e9a3cb87ccb943b', name: "q2-select-display" })), this.optionsDropdown()));
     }
     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" }))));
@@ -649,7 +656,7 @@ const Q2Select = /*@__PURE__*/ proxyCustomElement(class Q2Select extends HTMLEle
         "closePopover": [64],
         "setValue": [64],
         "searchOptions": [64]
-    }, [[0, "keydown", "keydownHandler"], [0, "change", "onHostElementChange"], [0, "input", "onHostElementInput"], [0, "focus", "delegateFocus"], [0, "focusout", "handleFocusout"], [0, "displayChanged", "handleSelectedDisplay"]], {
+    }, [[0, "keydown", "keydownHandler"], [0, "change", "onHostElementChange"], [0, "clear", "onClearHandler"], [0, "input", "onHostElementInput"], [0, "focus", "delegateFocus"], [0, "focusout", "handleFocusout"], [0, "displayChanged", "handleSelectedDisplay"]], {
         "value": ["buildStructuredSelectedOptions", "valueUpdated"],
         "selectedOptions": ["buildStructuredSelectedOptions"],
         "ariaLabel": ["ariaLabelObserver"],