q2-tecton-elements 1.38.2 → 1.39.0

package/dist/q2-tecton-elements/p-e4dadcd7.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","Q2AdvancedStepper","this","scheduledAfterRender","determinePaneChanges","mutations","forEach","mutation","type","addedNodes","length","removedNodes","_a","nodeType","Node","ELEMENT_NODE","_b","buildPaneList","allRootPanes","structuredPanes","Array","from","reduce","accum","pane","children","querySelector","filter","tagName","map","extractDetails","push","Object","assign","onStepClick","event","stepId","stopPropagation","currentStepId","selectedStep","allPanes","find","id","change","emit","selectedStepId","onStepKeyDown","key","preventDefault","getStepId","focusStepBtn","componentWillLoad","setDefaultPane","observer","MutationObserver","observerOptions","childList","observe","hostElement","childrenSlot","mutationObserver","componentDidLoad","overrideFocus","setTimeout","showStep","componentWillUpdate","expandedStepChildrenList","componentDidRender","fn","openCurrentStepChildren","disconnectedCallback","disconnect","querySelectorAll","firstEnabledStep","createGuid","goTo","allEnabledStepBtns","shadowRoot","currentStepIndex","findIndex","btn","getAttribute","nextStepIndex","Math","max","min","resizeIframe","showStepPane","label","description","status","window","TectonElements","call","allSpacers","spacer","contains","style","height","clientHeight","classList","add","addEventListener","remove","once","removeAttribute","isActive","forceFocus","stepBtn","isComponentActive","document","activeElement","focus","defaultChangeHandler","target","detail","delegateFocus","isEventFromElement","statusChangeHandler","currentStepChanged","renderStepBtn","index","isLastStep","stepNumber","isCurrentStep","labelId","isLocked","stepLabel","loc","descriptionId","btnLabel","statusIcon","stepClasses","childIds","child","isExpanded","includes","h","role","class","join","tabIndex","onKeyDown","ev","onClick","renderSpacer","shouldRender","spacerClasses","ref","el","renderChildStepBtn","parentLabel","render","Fragment"],"sources":["./src/components/q2-stepper-vertical/styles.scss?tag=q2-stepper-vertical&encapsulation=shadow","./src/components/q2-stepper-vertical/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: grid;\n    grid-template-columns: var-list(var-prefixer(advanced-stepper-list-width), 180px) 1fr;\n    gap: var-list(var-prefixer(advanced-stepper-layout-gap), 120px);\n}\n\n.step-label,\n.step-child-label {\n    color: var(--comp-btn-label-color);\n    font-size: var(--comp-btn-label-font-size);\n    font-weight: var(--comp-label-font-weight, 400);\n    height: 1.5em;\n}\n\n.step-label {\n    @include line-clamp(2);\n\n    [aria-selected='true'] & {\n        font-weight: var-list(var-prefixer(advanced-stepper-btn-active-font-weight), 600);\n    }\n\n    [aria-describedby] & {\n        -webkit-line-clamp: 1;\n    }\n}\n\n.step-child-label {\n    grid-area: content;\n    color: var(--comp-btn-label-color);\n}\n\n.step-description {\n    color: var-list(var-prefixer(advanced-stepper-description-color), --t-textA, rgba(77, 77, 77, 0.77));\n    font-size: var-list(var-prefixer(advanced-stepper-description-font-size), --app-font-size-small, 12px);\n\n    // Add padding for descenders\n    padding-bottom: 0.2em;\n}\n\nul {\n    --comp-top-btn-icon-size: #{var-list(var-prefixer(advanced-stepper-btn-icon-size), 24px)};\n    --comp-btn-icon-size: #{var(--comp-top-btn-icon-size)};\n    --comp-btn-content-gap: #{var-list(var-prefixer(advanced-stepper-btn-gap), --app-scale-3x, 15px)};\n    --comp-btn-label-font-size: var-list(var-prefixer(advanced-stepper-btn-label-font-size), 16px);\n    --comp-btn-label-color: #{var-list(var-prefixer(advanced-stepper-label-color), --t-text, #4d4d4d)};\n    --comp-tween: #{var-list(var-prefixer(advanced-stepper-tween), --app-tween-1, unquote('0.2s ease'))};\n    --comp-bullet-bg: #{var-list(var-prefixer(advanced-stepper-bullet-active-bg), --t-primary, #0079c1)};\n\n    list-style: none;\n    margin: 0;\n    padding: 0;\n\n    ul {\n        --comp-btn-icon-size: #{var-list(var-prefixer(advanced-stepper-child-btn-icon-size), 12px)};\n        --comp-btn-content-gap: #{var-list(var-prefixer(advanced-stepper-btn-gap), --app-scale-2x, 10px)};\n        --comp-btn-label-font-size: var-list(\n            var-prefixer(advanced-stepper-child-btn-label-font-size),\n            --app-font-size-small,\n            12px\n        );\n\n        &[aria-hidden='true'] {\n            display: none;\n        }\n    }\n}\n\n.step-btn,\n.step-child-btn {\n    display: grid;\n    grid-template-columns: var(--comp-btn-icon-size) 1fr;\n    gap: var(--comp-btn-content-gap);\n    text-align: var-list(var-prefixer(advanced-stepper-btn-text-align), start);\n    grid-template-areas: 'icon content';\n    align-items: center;\n    width: 100%;\n    position: relative;\n    background: transparent;\n    border: 0;\n    cursor: pointer;\n    padding: 0;\n    transition-property: box-shadow;\n    outline: none;\n\n    &[aria-disabled] {\n        cursor: default;\n        --comp-label-font-weight: 300;\n        --comp-btn-label-color: #{var-list(\n                var-prefixer(advanced-stepper-btn-locked-color),\n                --t-textA,\n                rgba(77, 77, 77, 0.77)\n            )};\n    }\n\n    &[aria-selected='true'] {\n        --comp-label-font-weight: 600;\n    }\n}\n\n.step-btn {\n    min-height: var-list(var-prefixer(advanced-stepper-btn-height), 40px);\n    font-size: var-list(var-prefixer(advanced-stepper-btn-font-size), 16px);\n\n    --comp-active-color: var(--comp-bullet-bg);\n    &.status-complete {\n        --comp-active-color: var(--const-stoplight-success, #0e8a00);\n    }\n    &.status-error {\n        --comp-active-color: var(--const-stoplight-alert, #c30000);\n    }\n    &.status-locked {\n        cursor: not-allowed;\n    }\n}\n\n.step-child-btn {\n    --comp-active-color: var(--comp-bullet-bg);\n\n    min-height: var-list(var-prefixer(advanced-stepper-child-btn-height), 30px);\n    padding-left: var-list(var-prefixer(advanced-stepper-child-btn-left-padding), --app-scale-2x, 10px);\n    font-size: var-list(var-prefixer(advanced-stepper-child-btn-font-size), 12px);\n    border-left-width: var-list(var-prefixer(advanced-stepper-child-btn-left-border-width), 3px);\n    border-left-style: var-list(var-prefixer(advanced-stepper-child-btn-left-border-style), solid);\n    border-left-color: transparent;\n\n    &[aria-selected='true'] {\n        --comp-btn-label-color: var(--comp-active-color);\n        border-left-color: var(--comp-active-color);\n    }\n\n    &.status-error {\n        --comp-btn-label-color: var(--const-stoplight-alert, #c30000);\n        --comp-active-color: var(--const-stoplight-alert, #c30000);\n    }\n\n    &.status-locked {\n        cursor: not-allowed;\n    }\n}\n\n.step-content {\n    grid-area: content;\n}\n\n.step-icon,\n.step-bubble,\n.step-child-icon {\n    grid-area: icon;\n    width: var(--comp-btn-icon-size);\n    height: var(--comp-btn-icon-size);\n    line-height: 0;\n\n    q2-icon {\n        width: var(--comp-btn-icon-size);\n        height: var(--comp-btn-icon-size);\n        --tct-icon-fill: var(--comp-active-color);\n    }\n}\n\n.step-icon,\n.step-bubble {\n    background: var(--comp-active-color);\n    color: var(--t-base, #ffffff);\n    border-radius: 50%;\n\n    .status-complete &,\n    .status-error & {\n        background: var(--comp-active-color);\n    }\n\n    q2-icon {\n        --tct-icon-fill: var(--comp-active-color);\n        &:before {\n            content: '';\n            display: block;\n            background: var(--t-base, #ffffff);\n            position: absolute;\n            width: 80%;\n            height: 80%;\n            left: 11%;\n            top: 11%;\n            border-radius: 50%;\n        }\n    }\n\n    // Text-based statuses\n    .status-locked & {\n        background: var(--t-gray-12, #d9d9d9);\n        color: var(--t-text, #4d4d4d);\n    }\n\n    [aria-selected='true'] & {\n        box-shadow: 0 0 0 2px var(--t-base, #ffffff), 0 0 0 4px var(--comp-active-color);\n    }\n}\n\n.step-bubble {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    line-height: 0;\n}\n\n.step-child-icon {\n    q2-icon {\n        --tct-icon-stroke-primary: var(--comp-active-color);\n        --tct-icon-stroke-secondary: var(--comp-active-color);\n    }\n    [aria-selected='true'] & {\n        q2-icon {\n            fill: var(--comp-active-color);\n            --tct-icon-stroke-secondary: var(--t-base, #ffffff);\n        }\n    }\n}\n\n.spacer {\n    height: 0;\n    border-left-width: var-list(var-prefixer(advanced-stepper-child-border-width), 1px);\n    border-left-style: var-list(var-prefixer(advanced-stepper-child-border-style), solid);\n    border-left-color: var-list(var-prefixer(advanced-stepper-child-border-color), --t-gray-12, #d9d9d9);\n    overflow: hidden;\n    margin-left: calc(var(--comp-top-btn-icon-size) / 2);\n    transition: height var(--comp-tween);\n\n    &.has-sibling {\n        height: var-list(var-prefixer(advanced-stepper-spacer-height), --app-scale-6x, 30px);\n    }\n\n    ul {\n        opacity: 0;\n        transition: opacity var(--comp-tween);\n    }\n\n    &.is-opening,\n    &.is-open {\n        ul {\n            display: block;\n            opacity: 1 !important;\n        }\n    }\n\n    &.is-open {\n        overflow: visible;\n    }\n}\n","import {\n    Component,\n    Prop,\n    h,\n    Element,\n    ComponentInterface,\n    State,\n    Watch,\n    Listen,\n    Event,\n    EventEmitter,\n    Fragment,\n} from '@stencil/core';\nimport { loc, overrideFocus, isEventFromElement, createGuid } from 'src/utils';\n\ninterface IBaseStructuredPane {\n    id: string;\n    label: string;\n    description: string;\n    isActive: boolean;\n    status: string;\n}\n\ninterface IStructuredPane extends IBaseStructuredPane {\n    children: IBaseStructuredPane[];\n}\n\n@Component({\n    tag: 'q2-stepper-vertical',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2AdvancedStepper implements ComponentInterface {\n    @Prop({ reflect: true, mutable: true }) currentStepId: string;\n\n    @Element() hostElement: HTMLElement;\n\n    @Event() change: EventEmitter;\n    @State() structuredPanes: IStructuredPane[] = [];\n    mutationObserver: MutationObserver;\n    expandedStepChildrenList: HTMLUListElement;\n    scheduledAfterRender: (() => void)[] = [];\n\n    /// LifeCycle Hooks ///\n    componentWillLoad() {\n        this.setDefaultPane();\n        this.buildPaneList();\n        const observer = new MutationObserver(this.determinePaneChanges);\n        const observerOptions = {\n            childList: true,\n        };\n        observer.observe(this.hostElement, observerOptions);\n        this.allRootPanes.forEach(pane => {\n            const childrenSlot = pane.querySelector('[slot=children]');\n            if (childrenSlot) observer.observe(childrenSlot, observerOptions);\n        });\n        this.mutationObserver = observer;\n    }\n\n    componentDidLoad() {\n        overrideFocus(this.hostElement);\n        setTimeout(() => this.showStep(this.currentStepId), 0);\n    }\n\n    componentWillUpdate() {\n        this.expandedStepChildrenList = null;\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n\n        this.openCurrentStepChildren();\n    }\n\n    disconnectedCallback() {\n        this.mutationObserver.disconnect();\n        this.mutationObserver = null;\n    }\n\n    /// Getters ///\n    get allRootPanes() {\n        return Array.from(this.hostElement.querySelectorAll<HTMLQ2StepperPaneElement>(':scope > q2-stepper-pane'));\n    }\n\n    get allPanes() {\n        return Array.from(this.hostElement.querySelectorAll<HTMLQ2StepperPaneElement>('q2-stepper-pane'));\n    }\n\n    /// Helpers ///\n    setDefaultPane() {\n        if (this.currentStepId) return;\n        const firstEnabledStep = this.hostElement.querySelector('q2-stepper-pane');\n        if (!firstEnabledStep) return;\n        if (!firstEnabledStep.id) firstEnabledStep.id = `step-${createGuid()}`;\n        this.currentStepId = firstEnabledStep.id;\n    }\n\n    determinePaneChanges = (mutations: MutationRecord[]) => {\n        mutations.forEach(mutation => {\n            if (mutation.type !== 'childList') return;\n            if (!mutation.addedNodes.length && !mutation.removedNodes.length) return;\n            if (\n                mutation.addedNodes[0]?.nodeType !== Node.ELEMENT_NODE &&\n                mutation.removedNodes[0]?.nodeType !== Node.ELEMENT_NODE\n            )\n                return;\n            this.buildPaneList();\n        });\n    };\n\n    getStepId(currentStepId: string, goTo: string) {\n        const allEnabledStepBtns = Array.from(\n            this.hostElement.shadowRoot.querySelectorAll<HTMLQ2StepperPaneElement>(\n                'ul:not([aria-hidden=\"true\"]) > li > button:not([aria-disabled=\"true\"])'\n            )\n        );\n        const currentStepIndex = allEnabledStepBtns.findIndex(\n            btn => btn.getAttribute('aria-controls') === currentStepId\n        );\n\n        let nextStepIndex;\n        switch (goTo) {\n            case 'prev':\n                nextStepIndex = Math.max(currentStepIndex - 1, 0);\n                break;\n\n            case 'next':\n                nextStepIndex = Math.min(currentStepIndex + 1, allEnabledStepBtns.length - 1);\n                break;\n\n            case 'first':\n                nextStepIndex = 0;\n                break;\n\n            case 'last':\n                nextStepIndex = allEnabledStepBtns.length - 1;\n                break;\n        }\n\n        return allEnabledStepBtns[nextStepIndex].getAttribute('aria-controls');\n    }\n\n    showStep(stepId: string) {\n        this.scheduledAfterRender.push(this.resizeIframe);\n        this.showStepPane(stepId);\n        this.focusStepBtn(stepId);\n    }\n\n    extractDetails(pane: HTMLQ2StepperPaneElement) {\n        const { label, description, status } = pane;\n        if (!pane.id) pane.id = `step-${createGuid()}`;\n        return {\n            id: pane.id,\n            label,\n            description,\n            status,\n        };\n    }\n\n    buildPaneList = () => {\n        const { allRootPanes } = this;\n        if (!allRootPanes.length) return;\n\n        this.structuredPanes = Array.from(allRootPanes).reduce((accum, pane) => {\n            const children = Array.from(pane.querySelector('[slot=children]')?.children ?? [])\n                .filter(({ tagName }) => tagName === 'Q2-STEPPER-PANE')\n                .map(this.extractDetails);\n\n            accum.push({ ...this.extractDetails(pane), children });\n            return accum;\n        }, []);\n    };\n\n    resizeIframe() {\n        return window?.TectonElements?.resizeIframe?.();\n    }\n\n    openCurrentStepChildren() {\n        const { expandedStepChildrenList } = this;\n        const allSpacers = this.hostElement.shadowRoot.querySelectorAll<HTMLDivElement>('.spacer');\n        allSpacers.forEach(spacer => {\n            if (expandedStepChildrenList && spacer.contains(expandedStepChildrenList)) {\n                spacer.style.height = `${expandedStepChildrenList.clientHeight}px`;\n                if (spacer.classList.contains('is-open')) return;\n                spacer.classList.add('is-opening');\n                spacer.addEventListener(\n                    'transitionend',\n                    () => {\n                        spacer.classList.remove('is-opening');\n                        spacer.classList.add('is-open');\n                        this.resizeIframe();\n                    },\n                    { once: true }\n                );\n            } else {\n                spacer.removeAttribute('style');\n                spacer.classList.remove('is-open', 'is-opening');\n            }\n        });\n    }\n\n    showStepPane(stepId: string) {\n        this.allPanes.forEach(pane => {\n            if (pane.isActive || pane.id === stepId) {\n                pane.isActive = stepId === pane.id;\n            }\n        });\n    }\n\n    focusStepBtn(stepId: string, forceFocus?: boolean) {\n        const stepBtn = this.hostElement.shadowRoot.querySelector<HTMLElement>(`button[aria-controls=\"${stepId}\"]`);\n        const isComponentActive = document.activeElement === this.hostElement;\n        if (!stepBtn) return;\n        if (isComponentActive || forceFocus) {\n            stepBtn.focus();\n        }\n    }\n\n    /// Listeners ///\n    @Listen('change')\n    defaultChangeHandler(event: CustomEvent) {\n        const { hostElement } = this;\n        if (event.target === hostElement && !hostElement.getAttribute('onchange') && !!event.detail) {\n            this.currentStepId = event.detail.selectedStepId;\n        }\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.focusStepBtn(this.currentStepId, true);\n    }\n\n    @Listen('statusChange')\n    statusChangeHandler() {\n        this.buildPaneList();\n    }\n\n    /// Watchers ///\n    @Watch('currentStepId')\n    currentStepChanged(stepId: string) {\n        this.showStep(stepId);\n    }\n\n    /// Event Handlers ///\n    onStepClick = (event, stepId: string) => {\n        event.stopPropagation();\n        const { currentStepId } = this;\n        if (stepId === currentStepId) return;\n        const selectedStep = this.allPanes.find(pane => pane.id === stepId);\n\n        this.change.emit({\n            selectedStep,\n            selectedStepId: stepId,\n            currentStepId,\n        });\n    };\n\n    onStepKeyDown = (event: KeyboardEvent, stepId: string) => {\n        const { key } = event;\n\n        let selectedStepId;\n        switch (key) {\n            case 'ArrowUp':\n            case 'ArrowLeft':\n                event.preventDefault();\n                selectedStepId = this.getStepId(stepId, 'prev');\n                break;\n\n            case 'ArrowDown':\n            case 'ArrowRight':\n                event.preventDefault();\n                selectedStepId = this.getStepId(stepId, 'next');\n                break;\n\n            case 'Home':\n                event.preventDefault();\n                selectedStepId = this.getStepId(stepId, 'first');\n                break;\n\n            case 'End':\n                event.preventDefault();\n                selectedStepId = this.getStepId(stepId, 'last');\n                break;\n        }\n\n        if (!selectedStepId) return;\n        this.focusStepBtn(selectedStepId, true);\n    };\n\n    /// DOM ///\n    renderStepBtn(pane: IStructuredPane, index: number) {\n        const { currentStepId, structuredPanes } = this;\n        const isLastStep = index === structuredPanes.length - 1;\n        const { id, label, description, status } = pane;\n        const stepNumber = index + 1;\n        const isCurrentStep = id === currentStepId;\n        const labelId = label && `label-${id}`;\n        const isLocked = status === 'locked';\n        const stepLabel = label && loc(label);\n        const descriptionId = label && description && `description-${id}`;\n        const btnLabel =\n            !label && loc('tecton.element.advancedStepper.number', [`${stepNumber}`, `${structuredPanes.length}`]);\n\n        let statusIcon;\n        if (status === 'complete') statusIcon = 'success-filled';\n        else if (status === 'error') statusIcon = 'warning-filled';\n\n        const stepClasses = ['step-btn'];\n        if (status) stepClasses.push(`status-${status}`);\n\n        const childIds = pane.children.map(child => child.id);\n        const isExpanded = isCurrentStep || childIds.includes(currentStepId);\n\n        return (\n            <li role=\"presentation\">\n                <button\n                    class={stepClasses.join(' ')}\n                    type=\"button\"\n                    aria-labelledby={labelId}\n                    aria-describedBy={descriptionId}\n                    aria-label={btnLabel}\n                    aria-selected={`${isCurrentStep}`}\n                    aria-expanded={!!pane.children.length ? `${isExpanded}` : null}\n                    aria-controls={id}\n                    aria-disabled={isLocked ? 'true' : null}\n                    role=\"tab\"\n                    tabIndex={isCurrentStep ? 0 : -1}\n                    onKeyDown={ev => !isLocked && this.onStepKeyDown(ev, id)}\n                    onClick={ev => !isLocked && this.onStepClick(ev, id)}\n                >\n                    {statusIcon ? (\n                        <div class=\"step-icon\">\n                            <q2-icon type={statusIcon}></q2-icon>\n                        </div>\n                    ) : (\n                        <div class=\"step-bubble\">{stepNumber}</div>\n                    )}\n\n                    {label && (\n                        <div>\n                            <div\n                                class=\"step-label\"\n                                id={labelId}\n                            >\n                                {stepLabel}\n                            </div>\n                            {description && (\n                                <div\n                                    class=\"step-description\"\n                                    id={descriptionId}\n                                >\n                                    {loc(description)}\n                                </div>\n                            )}\n                        </div>\n                    )}\n                </button>\n                {this.renderSpacer(pane, stepLabel, isExpanded, isLastStep)}\n            </li>\n        );\n    }\n\n    renderSpacer(pane: IStructuredPane, stepLabel: string, isExpanded: boolean, isLastStep: boolean) {\n        const shouldRender = (isLastStep && !!pane.children.length) || !isLastStep;\n        const spacerClasses = ['spacer'];\n        if (!isLastStep) spacerClasses.push('has-sibling');\n        return (\n            shouldRender && (\n                <div class={spacerClasses.join(' ')}>\n                    {!!pane.children.length && (\n                        <ul\n                            ref={el => isExpanded && (this.expandedStepChildrenList = el)}\n                            aria-hidden={`${!isExpanded}`}\n                        >\n                            {pane.children.map((child, index, children) =>\n                                this.renderChildStepBtn(child, index, children.length, stepLabel)\n                            )}\n                        </ul>\n                    )}\n                </div>\n            )\n        );\n    }\n\n    renderChildStepBtn(pane: IBaseStructuredPane, index: number, children: number, parentLabel: string) {\n        const { currentStepId } = this;\n        const { id, label, status } = pane;\n        const stepNumber = index + 1;\n        const labelId = label && `label-${id}`;\n        const isCurrentStep = id === currentStepId;\n        const isLocked = status === 'locked';\n        const btnLabel =\n            !label && loc('tecton.element.advancedStepper.childNumber', [`${stepNumber}`, `${children}`, parentLabel]);\n\n        let statusIcon;\n        if (status === 'error') statusIcon = 'warning-filled';\n\n        const stepClasses = ['step-child-btn'];\n        if (status) stepClasses.push(`status-${status}`);\n\n        return (\n            <li role=\"presentation\">\n                <button\n                    class={stepClasses.join(' ')}\n                    type=\"button\"\n                    aria-labelledby={labelId}\n                    aria-label={btnLabel}\n                    aria-selected={`${isCurrentStep}`}\n                    aria-controls={id}\n                    aria-disabled={isLocked ? 'true' : null}\n                    role=\"tab\"\n                    tabIndex={isCurrentStep ? 0 : -1}\n                    onKeyDown={ev => !isLocked && this.onStepKeyDown(ev, id)}\n                    onClick={ev => !isLocked && this.onStepClick(ev, id)}\n                >\n                    {statusIcon && (\n                        <div class=\"step-child-icon\">\n                            <q2-icon type={statusIcon}></q2-icon>\n                        </div>\n                    )}\n                    {label && (\n                        <div\n                            class=\"step-child-label\"\n                            id={labelId}\n                        >\n                            {loc(label)}\n                        </div>\n                    )}\n                </button>\n            </li>\n        );\n    }\n\n    render() {\n        return (\n            <Fragment>\n                <ul role=\"tablist\">{this.structuredPanes.map((pane, index) => this.renderStepBtn(pane, index))}</ul>\n                <div>\n                    <slot />\n                </div>\n            </Fragment>\n        );\n    }\n}\n"],"mappings":"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"}

package/dist/q2-tecton-elements/p-e98d9cf2.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","addSmoothScrollPolyfill","Q2TabContainer","this","guid","createGuid","scheduledAfterRender","lastScrolled","Date","getTime","updateTabData","updateTabPaneProps","setTabs","tabPanes","forEach","tab","index","selected","value","selectedTabValue","tabs","map","label","badgeCount","badgeDescription","badgeTheme","badgeStatus","loc","onTabClick","event","targetValue","target","closest","dataset","isAlreadySelected","change","emit","onTabKeyDown","key","preventDefault","moveToAdjacentTab","direction","indexOf","newIndex","Math","min","length","max","moveFocus","preventScroll","focusedValue","focusedTab","listElement","querySelector","focus","left","offsetLeft","clientWidth","scrollTo","behavior","checkScrollState","scrollLeft","scrollWidth","scrollEnabled","showScrollLeft","showScrollRight","onScrollBtnClick","halfWidth","floor","scrollAmount","abs","scrollBy","onSlotChange","resizeIframe","_b","_a","window","TectonElements","call","hostElement","querySelectorAll","Array","from","filter","pane","name","tabList","shadowRoot","defaultChangeHandler","onchange","detail","onResize","onFocus","isEventFromElement","findIndex","el","onBadge","componentWillLoad","observer","MutationObserver","observe","childList","attributes","mutationObserver","resizeObserver","ResizeObserver","componentDidRender","fn","settled","componentDidLoad","overrideFocus","push","hasTabs","blur","disconnectedCallback","disconnect","valueObserver","nameObserver","render","h","Fragment","class","hidden","onClick","type","onScroll","ref","noPrint","role","generateTab","onSlotchange","isSelected","id","tabIndex","onKeyDown","undefined","generateTabWithBadge","theme","description","status"],"sources":["./src/components/q2-tab-container/styles.scss?tag=q2-tab-container&encapsulation=shadow","./src/components/q2-tab-container/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n    position: relative;\n}\n\nbutton {\n    cursor: pointer;\n    margin: 0;\n}\n\n.tab-container {\n    position: relative;\n}\n\nul {\n    --comp-container-padding: #{var-list(--tct-scale-1, --app-scale-1x, 5px)\n        var-list(--tct-scale-1, --app-scale-1x, 5px) 0};\n    padding: var-list(var-prefixer(tab-container-padding), --comp-container-padding);\n    margin: var-list(var-prefixer(tab-container-margin));\n    display: flex;\n    gap: var-list(var-prefixer(tab-gap), --tct-scale-1, --app-scale-1x, 5px);\n    list-style: none;\n    border-bottom: 1px solid\n        var-list(\n            var-prefixer(tab-container-border-color),\n            --tct-gray-11,\n            --t-gray-11,\n            --tct-gray-l1,\n            --app-gray-l1,\n            #cccccc\n        );\n    overflow-x: auto;\n    align-items: center;\n    @include hidden-scrollbar();\n\n    @media print {\n        &.no-print {\n            display: none;\n        }\n    }\n}\n\nli {\n    flex: 0 0 auto;\n\n    button {\n        background: var-list(--tct-tab-inactive-background, var-prefixer(tab-inactive-bg-color), transparent);\n        border-width: var-list(var-prefixer(tab-inactive-border-width), unquote('0 0 3px 0'));\n        border-color: var-list(var-prefixer(tab-inactive-border-color), transparent);\n        border-style: var-list(var-prefixer(tab-inactive-border-style), solid);\n        border-radius: var-list(var-prefixer(tab-border-radius), 0);\n        width: var-list(var-prefixer(tab-width), 100%);\n        text-align: var-list(var-prefixer(tab-text-align), center);\n        text-decoration: var-list(var-prefixer(tab-text-decoration), none);\n        padding: var-list(var-prefixer(tab-padding), --tct-scale-2, --app-scale-2x, 10px);\n        color: var-list(var-prefixer(tab-inactive-color), inherit);\n        font-size: var-list(var-prefixer(tab-font-size), 17px);\n        display: block;\n        transition: color var-list(--tct-tween-2, --app-tween-2, unquote('0.4s ease')),\n            border-color var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n\n        :host([type='section']) & {\n            --comp-tab-section-padding: #{var-list(--tct-scale-2, --app-scale-2x, 10px)\n                var-list(--tct-scale-1, --app-scale-1x, 5px)};\n            font-size: inherit;\n            padding: var-list(var-prefixer(tab-section-padding), --comp-tab-section-padding);\n        }\n\n        &:hover {\n            color: var-list(var-prefixer(tab-hover-color), var-prefixer(tab-active-color), #2e2e2e);\n            background: var-list(--tct-tab-hover-background, var-prefixer(tab-hover-bg-color), inherit);\n            width: var-list(var-prefixer(tab-hover-width), 100%);\n        }\n\n        &[aria-selected='true'] {\n            color: var-list(var-prefixer(tab-active-color), #2e2e2e);\n            border-color: var-list(var-prefixer(tab-active-border-color), currentColor);\n            border-style: var-list(var-prefixer(tab-active-border-style), solid);\n            width: var-list(var-prefixer(tab-active-width), 100%);\n            background: var-list(--tct-tab-active-background, var-prefixer(tab-active-bg-color), inherit);\n        }\n\n        :host([color='alt']) & {\n            color: var-list(var-prefixer(tab-alt-inactive-color), inherit);\n\n            &:hover,\n            &[aria-selected='true'] {\n                color: var-list(var-prefixer(tab-alt-active-color), inherit);\n            }\n        }\n\n        @media screen and (max-width: 767px) {\n            --comp-tab-padding: #{var-list(--tct-scale-2, --app-scale-2x, 10px)\n                var-list(--tct-scale-1, --app-scale-1x, 5px)};\n            font-size: inherit;\n            padding: var-list(var-prefixer(tab-padding), --comp-tab-padding);\n        }\n    }\n}\n\n.tab-content {\n    --comp-tab-content-padding: #{var-list(--tct-scale-2, --app-scale-2x, 10px) 0};\n    padding: var-list(var-prefixer(tab-content-padding), --comp-tab-content-padding);\n\n    &:focus {\n        outline: none;\n        box-shadow: none;\n    }\n}\n\n.gradient-left,\n.gradient-right {\n    z-index: 1;\n    position: absolute;\n    top: 0;\n    height: 100%;\n    width: 44px;\n}\n\n.gradient-left {\n    background-image: linear-gradient(to left, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);\n    left: 0;\n}\n\n.gradient-right {\n    background-image: linear-gradient(to right, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);\n    right: 0;\n}\n\n.btn-left,\n.btn-right {\n    --tct-icon-size: 18px;\n    --tct-btn-icon-hover-background: transparent;\n    --tct-btn-icon-width: 22px;\n    --tct-icon-stroke-primary: #{var-list(var-prefixer(stepper-scroll-arrow-color), --t-text, #4d4d4d)};\n\n    position: absolute;\n    top: calc(50% - 22px);\n    z-index: 2;\n    q2-icon {\n        --tct-icon-stroke-width: 3;\n    }\n}\n\n.btn-left {\n    left: 0;\n}\n\n.btn-right {\n    right: 0;\n}\n\n.tab-pane-badge {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    q2-badge {\n        margin-left: 5px;\n        margin-right: 5px;\n    }\n}\n","import {\n    Component,\n    ComponentInterface,\n    Prop,\n    Element,\n    Event,\n    EventEmitter,\n    State,\n    Listen,\n    Watch,\n    h,\n    Fragment,\n} from '@stencil/core';\nimport { createGuid, loc, addSmoothScrollPolyfill, overrideFocus, isEventFromElement } from 'src/utils';\nimport { JSX } from '../../components';\nimport { Q2Badge } from '../q2-badge';\n\naddSmoothScrollPolyfill();\n\ntype TabPane = {\n    label: string;\n    value: string;\n    badgeCount: number;\n    badgeDescription: string;\n    badgeTheme: Q2Badge['theme'];\n    badgeStatus: Q2Badge['status'];\n};\n\n@Component({\n    tag: 'q2-tab-container',\n    styleUrl: 'styles.scss',\n    shadow: true,\n})\nexport class Q2TabContainer implements ComponentInterface {\n    @Prop({ reflect: true, mutable: true }) value: string;\n    @Prop({ reflect: true }) type: 'main' | 'section';\n    @Prop({ reflect: true }) name: string;\n    @Prop({ reflect: true }) color: 'alt' | undefined;\n    @Prop({ reflect: true }) noPrint: boolean = false;\n\n    @Element() hostElement: HTMLElement;\n\n    @Event() change: EventEmitter;\n    @Event() settled: EventEmitter;\n\n    guid: number = createGuid();\n    scheduledAfterRender: (() => void)[] = [];\n    listElement: HTMLUListElement;\n    mutationObserver: MutationObserver;\n    resizeObserver: ResizeObserver;\n    lastScrolled: number = new Date(null).getTime();\n    @State() hasLeft: boolean = false;\n    @State() hasRight: boolean = false;\n    @State() scrollEnabled: boolean = false;\n    @State() showScrollLeft: boolean = false;\n    @State() showScrollRight: boolean = false;\n    @State() tabs: TabPane[];\n\n    resizeIframe() {\n        return window.TectonElements?.resizeIframe?.();\n    }\n\n    get tabPanes() {\n        const tabPanes = this.hostElement.querySelectorAll<HTMLQ2TabPaneElement | HTMLTectonTabPaneElement>(\n            'q2-tab-pane, tecton-tab-pane'\n        );\n\n        if (tabPanes.length === 0) {\n            return [];\n        }\n\n        return Array.from(tabPanes).filter(pane => pane.name === this.name);\n    }\n\n    get selectedTabValue() {\n        return this.value || this.tabPanes[0].value || '';\n    }\n\n    get tabList() {\n        return this.hostElement.shadowRoot.querySelector('.tab-list');\n    }\n\n    ///////// Default Handler /////////\n    @Listen('change')\n    defaultChangeHandler(event: CustomEvent) {\n        if (event.target === this.hostElement && !this.hostElement.onchange) {\n            this.value = event.detail.value;\n        }\n    }\n\n    @Listen('resize', { target: 'window' })\n    onResize() {\n        this.checkScrollState();\n    }\n\n    @Listen('focus')\n    onFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        const index = this.tabs.findIndex(el => el.value === this.selectedTabValue);\n        this.moveFocus(index);\n    }\n\n    @Listen('badge')\n    onBadge() {\n        this.setTabs();\n    }\n\n    ///////// Lifecycle Hooks /////////\n    componentWillLoad() {\n        const observer = new MutationObserver(this.updateTabData);\n        observer.observe(this.hostElement, { childList: true, attributes: true });\n        this.mutationObserver = observer;\n        this.resizeObserver = new ResizeObserver(() => this.checkScrollState());\n        this.updateTabData();\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n        this.settled.emit();\n    }\n\n    componentDidLoad() {\n        this.resizeObserver?.observe(this.listElement);\n        this.checkScrollState();\n        overrideFocus(this.hostElement);\n        const index = this.tabs.findIndex(el => el.value === this.value);\n        this.scheduledAfterRender.push(() => {\n            const hasTabs = this.tabs.length > 0;\n            if (!hasTabs) return;\n            const tab = this.moveFocus(Math.max(index, 0));\n            this.value = tab.dataset.value;\n            tab.blur();\n        });\n    }\n\n    disconnectedCallback() {\n        this.resizeObserver.disconnect();\n        this.mutationObserver.disconnect();\n        this.resizeObserver = null;\n        this.mutationObserver = null;\n    }\n\n    ///////// Observers /////////\n    @Watch('value')\n    valueObserver() {\n        this.updateTabData();\n        this.scheduledAfterRender.push(this.resizeIframe);\n        const index = this.tabs.findIndex(el => el.value === this.value);\n        if (index > -1) {\n            this.scheduledAfterRender.push(() => this.moveFocus(index, false));\n        }\n    }\n\n    @Watch('name')\n    nameObserver() {\n        this.updateTabData();\n    }\n\n    ///////// Actions /////////\n    updateTabData = () => {\n        this.updateTabPaneProps();\n        this.setTabs();\n    };\n\n    updateTabPaneProps = () => {\n        this.tabPanes.forEach((tab, index) => {\n            tab.selected = tab.value === this.selectedTabValue;\n            tab.guid = this.guid;\n            tab.index = index;\n        });\n    };\n\n    setTabs = () => {\n        this.tabs = this.tabPanes.map(({ label, value, badgeCount, badgeDescription, badgeTheme, badgeStatus }) => ({\n            label: (label && loc(label)) || '',\n            value,\n            badgeCount,\n            badgeDescription,\n            badgeTheme,\n            badgeStatus,\n        }));\n    };\n\n    onTabClick = (event: MouseEvent) => {\n        const targetValue = ((event.target as HTMLButtonElement).closest('button[role=\"tab\"]') as HTMLButtonElement)\n            .dataset.value;\n        const isAlreadySelected = this.value === targetValue;\n        if (isAlreadySelected) return;\n\n        this.change.emit({\n            value: targetValue,\n        });\n    };\n\n    onTabKeyDown = (event: KeyboardEvent) => {\n        const value = (event.target as HTMLElement).dataset.value;\n        switch (event.key) {\n            case 'ArrowRight':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'next');\n                break;\n\n            case 'ArrowLeft':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'prev');\n                break;\n\n            case 'Home':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'first');\n                break;\n\n            case 'End':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'last');\n                break;\n\n            case 'Space':\n            case 'Enter':\n                event.preventDefault();\n                this.change.emit({ value });\n                break;\n        }\n    };\n\n    moveToAdjacentTab = (value: string, direction: 'next' | 'prev' | 'first' | 'last') => {\n        const index = this.tabs.map(({ value }) => value).indexOf(value);\n\n        let newIndex;\n        switch (direction) {\n            case 'next':\n                newIndex = Math.min(index + 1, this.tabs.length - 1);\n                break;\n\n            case 'prev':\n                newIndex = Math.max(index - 1, 0);\n                break;\n\n            case 'first':\n                newIndex = 0;\n                break;\n\n            case 'last':\n                newIndex = this.tabs.length - 1;\n                break;\n        }\n\n        if (index === newIndex) return;\n\n        this.moveFocus(newIndex, false);\n    };\n\n    moveFocus = (index: number, preventScroll: boolean = true) => {\n        const focusedValue = this.tabs[index].value;\n        const focusedTab = this.listElement.querySelector<HTMLButtonElement>(`[data-value=\"${focusedValue}\"]`);\n        focusedTab.focus({ preventScroll });\n\n        const left = focusedTab.offsetLeft - this.listElement.clientWidth / 2;\n        this.listElement.scrollTo({\n            left,\n            behavior: 'smooth',\n        });\n\n        return focusedTab;\n    };\n\n    checkScrollState = () => {\n        if (!this.listElement) return;\n        const { scrollLeft, scrollWidth, clientWidth } = this.listElement;\n        this.scrollEnabled = scrollWidth > clientWidth;\n        this.showScrollLeft = scrollLeft > 0;\n        this.showScrollRight = scrollWidth > scrollLeft + clientWidth;\n    };\n\n    onScrollBtnClick = (direction?: 'left' | 'right') => {\n        const { scrollLeft, scrollWidth, clientWidth } = this.listElement;\n        const halfWidth = Math.floor(clientWidth / 2);\n        let scrollAmount: number = 0;\n        if (direction === 'left') {\n            scrollAmount = -Math.min(halfWidth, Math.abs(scrollLeft));\n        } else {\n            scrollAmount = Math.min(halfWidth, Math.abs(scrollWidth - scrollLeft - clientWidth));\n        }\n        this.listElement.scrollBy({ left: scrollAmount, behavior: 'smooth' });\n    };\n\n    onSlotChange = () => {\n        this.checkScrollState();\n    };\n\n    ///////// View Methods /////////\n    render() {\n        return (\n            <Fragment>\n                <div class=\"tab-container\">\n                    {this.scrollEnabled && (\n                        <Fragment>\n                            <div\n                                class=\"gradient-left\"\n                                hidden={!this.showScrollLeft}\n                            ></div>\n                            <div\n                                class=\"gradient-right\"\n                                hidden={!this.showScrollRight}\n                            ></div>\n\n                            <q2-btn\n                                class=\"btn-left\"\n                                hidden={!this.showScrollLeft}\n                                onClick={() => this.onScrollBtnClick('left')}\n                            >\n                                <q2-icon\n                                    type=\"chevron-left\"\n                                    label=\"scroll left\"\n                                ></q2-icon>\n                            </q2-btn>\n\n                            <q2-btn\n                                class=\"btn-right\"\n                                hidden={!this.showScrollRight}\n                                onClick={() => this.onScrollBtnClick('right')}\n                            >\n                                <q2-icon\n                                    type=\"chevron-right\"\n                                    label=\"scroll right\"\n                                ></q2-icon>\n                            </q2-btn>\n                        </Fragment>\n                    )}\n\n                    <ul\n                        onScroll={this.checkScrollState}\n                        ref={el => (this.listElement = el)}\n                        class={this.noPrint ? 'no-print' : null}\n                        role=\"tablist\"\n                    >\n                        {this.tabs.map((tab, index) => this.generateTab(tab, index))}\n                    </ul>\n                </div>\n                <div class=\"tab-content\">\n                    <slot onSlotchange={() => this.onSlotChange()} />\n                </div>\n            </Fragment>\n        );\n    }\n\n    generateTab(tab: TabPane, index: number): JSX.IntrinsicElements {\n        const { label, value } = tab;\n        const isSelected = this.selectedTabValue === value;\n        return (\n            <li role=\"presentation\">\n                <button\n                    id={`tab-${this.guid}-${index}`}\n                    data-value={value}\n                    test-id=\"tabLink\"\n                    tabIndex={isSelected ? 0 : -1}\n                    role=\"tab\"\n                    aria-selected={isSelected ? 'true' : 'false'}\n                    aria-controls={`tab-pane-${this.guid}-${index}`}\n                    onClick={this.onTabClick}\n                    onKeyDown={this.onTabKeyDown}\n                >\n                    {tab.badgeCount === undefined ? label : this.generateTabWithBadge(tab, isSelected)}\n                </button>\n            </li>\n        );\n    }\n\n    generateTabWithBadge(tab: TabPane, isSelected: boolean): JSX.IntrinsicElements {\n        let theme;\n        if (!tab.badgeStatus && isSelected) theme = tab.badgeTheme || 'primary';\n        let description;\n        if (tab.badgeDescription) description = loc(tab.badgeDescription);\n        else if (tab.badgeStatus) description = loc(`tecton.element.tab.pane.${tab.badgeStatus}`, [tab.badgeCount]);\n        else description = loc('tecton.element.tab.pane.new');\n\n        return (\n            <div\n                class=\"tab-pane-badge\"\n                aria-label={`${tab.label}, ${tab.badgeCount} ${description}`}\n            >\n                {tab.label}\n                <q2-badge\n                    value={tab.badgeCount}\n                    theme={theme}\n                    status={tab.badgeStatus}\n                />\n            </div>\n        );\n    }\n}\n"],"mappings":"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"}

package/dist/q2-tecton-elements/p-f198f77b.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["ClickElsewhere","constructor","hostRef","this","mouseEventList","isCurrentlyFocused","mouseHandler","event","shadowContains","findActiveElement","aboutToBeFocused","shadowEventTarget","originatesInSlots","target","change","emit","windowBlurHandler","activeElement","document","body","tagName","componentWillLoad","connectedCallback","forEach","eventName","addEventListener","window","disconnectedCallback","removeEventListener","workingElement","shadowRoot","composedPath","child","hostElement","parentNode","host","slots","querySelectorAll","currentSlot","Array","from","lightNodes","assignedNodes","childNodes","currentNode","contains","stylesCss","Q2Popover","scheduledAfterRender","displayBuffer","handleMinHeight","minHeight","handleDeprecationWarning","viewPortChanged","open","determinePopDirection","undefined","componentDidLoad","componentDidRender","setTimeout","fn","removeViewportListeners","async","options","containerElement","scrollTo","openChanged","popoverStateChanged","push","resizeIframe","addViewportListeners","currentDirection","show","nextPaint","style","removeProperty","minHeightProvided","popoverStateHandler","detail","stopPropagation","visualViewport","direction","determinePopOffset","isModule","isIframe","top","hasPlatformDimensions","Object","keys","_b","_a","Tecton","platformDimensions","length","controlElement","maxHeight","setProperty","waitForNextPaint","controlTop","bottom","controlBottom","getBoundingClientRect","windowHeight","maxSpaceAbove","maxSpaceBelow","distanceToIframeBottom","height","viewableSpaceBelow","innerHeight","outletOffset","isIframeShorterThanWindow","directionWithMostSpace","setDirectionAndShow","controlStyle","getComputedStyle","controlSize","parseInt","borderTopWidth","borderBottomWidth","render","containerClasses","h","ref","el","class","join","contentElement"],"sources":["./src/components/click-elsewhere/index.tsx","./src/components/q2-popover/styles.scss?tag=q2-popover&encapsulation=shadow","./src/components/q2-popover/index.tsx"],"sourcesContent":["import { Component, ComponentInterface, Element, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n    tag: 'click-elsewhere',\n    shadow: false,\n})\nexport class ClickElsewhere implements ComponentInterface {\n    /**\n     * Listens for mouse and window events that happen outside this click-elsewhere element so we can close popovers when users click outside them\n     */\n    mouseEventList: string[] = ['mousedown', 'dragstart', 'touchstart'];\n    isCurrentlyFocused: boolean = false;\n\n    @Element() hostElement: HTMLElement;\n    @Event() change: EventEmitter;\n\n    /* TODO: Stencil/Rollup is having issues compiling without this here. Will try to remove in future Stencil upgrade. */\n    /* tslint:disable:no-empty */\n    componentWillLoad() {}\n    /* tslint:enable:no-empty */\n\n    connectedCallback() {\n        this.mouseEventList.forEach((eventName: string) => {\n            document.addEventListener(eventName, this.mouseHandler);\n        });\n        window.addEventListener('blur', this.windowBlurHandler);\n    }\n\n    disconnectedCallback() {\n        this.mouseEventList.forEach((eventName: string) => {\n            document.removeEventListener(eventName, this.mouseHandler);\n        });\n        window.removeEventListener('blur', this.windowBlurHandler);\n    }\n\n    findActiveElement(): Element | null {\n        let workingElement = document.activeElement!;\n        while (true) {\n            if (!workingElement || !workingElement.shadowRoot) {\n                return workingElement;\n            }\n            workingElement = workingElement.shadowRoot.activeElement;\n        }\n    }\n\n    shadowEventTarget(event: any): Element {\n        return event.composedPath()[0] || event.target;\n    }\n\n    shadowContains(child: any): boolean {\n        /**\n         * shadow-dom enabled version of Node.contains()\n         */\n\n        while (true) {\n            if (child === this.hostElement) {\n                return true;\n            }\n            if (!child) {\n                return false;\n            }\n\n            child = child.parentNode || child.host;\n        }\n    }\n\n    originatesInSlots(target: Element): boolean {\n        const slots = this.hostElement.querySelectorAll('slot');\n\n        for (const currentSlot of Array.from(slots)) {\n            const lightNodes =\n                (currentSlot && currentSlot.assignedNodes && currentSlot.assignedNodes()) ||\n                this.hostElement.childNodes;\n\n            for (const currentNode of Array.from(lightNodes)) {\n                if (currentNode.contains(target)) {\n                    return true;\n                }\n            }\n        }\n\n        return false;\n    }\n\n    mouseHandler = (event: Event): void => {\n        const isCurrentlyFocused = this.shadowContains(this.findActiveElement());\n        const aboutToBeFocused =\n            this.shadowContains(this.shadowEventTarget(event)) || this.originatesInSlots(event.target as Element);\n\n        if (!aboutToBeFocused && (this.isCurrentlyFocused || isCurrentlyFocused)) {\n            this.isCurrentlyFocused = false;\n            this.change.emit();\n            return;\n        }\n        this.isCurrentlyFocused = aboutToBeFocused || isCurrentlyFocused;\n    };\n\n    windowBlurHandler = (): void => {\n        const activeElement = this.findActiveElement();\n        if (\n            (activeElement === document.body && this.isCurrentlyFocused) || // clicked parent frame\n            (activeElement !== document.body && activeElement?.tagName === 'IFRAME') // clicked child frame\n        ) {\n            this.isCurrentlyFocused = false;\n            this.change.emit();\n            return;\n        }\n    };\n}\n","@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n    width: 100%;\n}\n\n:host([align='right']) {\n    display: block;\n    position: absolute;\n    right: 0;\n    text-align: end;\n    left: unset;\n}\n\n.container {\n    display: none;\n    overflow: hidden;\n    opacity: 0;\n    height: 0;\n    position: absolute;\n    top: var-list(--tct-popover-top, initial);\n    background: var-list(--tct-popover-background, --app-white, #ffffff);\n    color: var-list(--tct-popover-font-color, --t-text, #4d4d4d);\n    z-index: var-list(--tct-popover-z-index, 100);\n    width: max-content;\n    min-width: var-list(--tct-popover-min-width, 135px);\n    box-shadow: var-list(--tct-popover-box-shadow, --app-shadow-1, unquote('0 2px 4px rgba(0, 0, 0, 0.3)'));\n    text-align: start;\n    left: 0;\n    margin-block: var-list(--tct-popover-margin-block, 0);\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\n    // --comp-pop-max-height is set via JS\n    max-height: var(--comp-pop-max-height);\n\n    @include tiny-scrollbar();\n\n    :host([block]) & {\n        left: unset;\n        right: unset;\n        width: 100%;\n        min-width: var-list(--tct-popover-min-width, unset);\n    }\n\n    :host([align='right']) & {\n        right: 0;\n        text-align: end;\n        left: unset;\n    }\n\n    :host([open]) &.show {\n        height: auto;\n        overflow: auto;\n        opacity: 1;\n    }\n\n    &.up {\n        bottom: var(--comp-pop-offset);\n    }\n}\n\nclick-elsewhere {\n    position: relative;\n    display: block;\n}\n\n.content {\n    height: auto;\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 { nextPaint, resizeIframe, waitForNextPaint, handleDeprecationWarning } from '../../utils';\n\n@Component({\n    tag: 'q2-popover',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Popover implements ComponentInterface {\n    @Prop({ reflect: true }) direction: 'up' | 'down';\n    @Prop({ reflect: true }) align: 'left' | 'right';\n    @Prop({ reflect: true, mutable: true }) open: boolean;\n    @Prop({ reflect: true }) block: boolean;\n    @Prop() controlElement: HTMLElement;\n\n    /** @deprecated */\n    @Prop() minHeight: number;\n\n    @Element() hostElement: HTMLElement;\n    @Event() popoverStateChanged: EventEmitter<{ open: boolean }>;\n\n    @State() currentDirection: 'down' | 'up' = undefined;\n    @State() show: boolean = false;\n    containerElement: HTMLDivElement;\n    contentElement: HTMLDivElement;\n    scheduledAfterRender: (() => void)[] = [];\n\n    /**\n     * The number of pixels to leave between the popover and the edge of the viewport\n     */\n    displayBuffer = 10;\n\n    /// Lifecycle hooks ///\n    componentDidLoad() {\n        this.handleMinHeight();\n        if (this.open) this.determinePopDirection();\n    }\n\n    componentDidRender() {\n        setTimeout(() => {\n            this.scheduledAfterRender.forEach(fn => fn());\n            this.scheduledAfterRender = [];\n        }, 25);\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    openChanged(open) {\n        this.popoverStateChanged.emit({ open });\n        this.scheduledAfterRender.push(resizeIframe);\n        if (open) {\n            this.addViewportListeners();\n            this.determinePopDirection();\n        } else {\n            this.removeViewportListeners();\n            this.currentDirection = undefined;\n            this.show = false;\n            nextPaint(() => {\n                this.containerElement.style.removeProperty('--comp-pop-max-height');\n                this.containerElement.style.removeProperty('display');\n            });\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    /// 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    addViewportListeners() {\n        // window.visualViewport.addEventListener('scroll', this.viewPortChanged);\n        window.visualViewport.addEventListener('resize', this.viewPortChanged);\n    }\n\n    removeViewportListeners() {\n        // window.visualViewport.removeEventListener('scroll', this.viewPortChanged);\n        window.visualViewport.removeEventListener('resize', this.viewPortChanged);\n    }\n\n    async setDirectionAndShow(direction: 'up' | 'down') {\n        if (direction === 'up') {\n            this.determinePopOffset();\n        }\n\n        this.currentDirection = direction;\n        this.show = true;\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    async determinePopDirection() {\n        const { containerElement, direction, controlElement, displayBuffer } = this;\n        if (containerElement) containerElement.style.maxHeight = null;\n\n        // Show the container so we can get the height\n        containerElement.style.setProperty('display', 'block');\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        switch (direction ?? directionWithMostSpace) {\n            case 'up':\n                containerElement.style.setProperty('--comp-pop-max-height', `${maxSpaceAbove}px`);\n                return this.setDirectionAndShow('up');\n            case 'down':\n                containerElement.style.setProperty('--comp-pop-max-height', `${maxSpaceBelow}px`);\n                return this.setDirectionAndShow('down');\n            default:\n                break;\n        }\n    }\n\n    determinePopOffset() {\n        const { controlElement, containerElement } = this;\n        const controlStyle = getComputedStyle(controlElement);\n        const controlSize =\n            parseInt(controlStyle.height) +\n            parseInt(controlStyle.borderTopWidth) +\n            parseInt(controlStyle.borderBottomWidth);\n\n        containerElement.style.setProperty('--comp-pop-offset', `${controlSize}px`);\n    }\n\n    /// DOM ///\n    render() {\n        const containerClasses = ['container', this.currentDirection];\n        if (this.show) containerClasses.push('show');\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"],"mappings":"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"}