q2-tecton-elements 1.59.0 → 1.60.0

package/dist/q2-tecton-elements/q2-stepper.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["q2StepperCss","Q2Stepper","constructor","hostRef","this","scheduledAfterRender","contentChangeTriggerCount","scrollEnabled","showScrollLeft","showScrollRight","checkForPanes","allPanes","length","stepCount","checkScrollState","listElement","scrollLeft","scrollWidth","clientWidth","onScrollBtnClick","direction","scrollAmount","Math","floor","scrollBy","left","behavior","onSlotChange","onStepClick","event","selectedStep","stopPropagation","currentStep","lastEnabledStep","change","emit","onStepKeyDown","stepNumber","key","preventDefault","max","min","focusStep","disconnectedCallback","_a","resizeObserver","disconnect","componentWillLoad","handleUndefinedStepProperties","window","ResizeObserver","componentDidLoad","observe","overrideFocus","hostElement","setTimeout","showStep","componentDidRender","forEach","fn","defaultChangeHandler","target","getAttribute","detail","contentChangeHandler","delegateFocus","isEventFromElement","statusChangeHandler","index","Array","from","findIndex","el","id","status","renderStepBtn","selectStep","value","stepListItem","children","firstElementChild","click","pane","querySelector","stepIndex","indexOf","_b","lastEnabledStepChanged","currentStepChanged","querySelectorAll","scrollIntoView","forceFocus","isActive","document","activeElement","focus","offsetLeft","scrollTo","getPaneSlotOrProperty","slotName","slot","find","child","outerHTML","loc","resizeIframe","TectonElements","call","push","showStepPane","label","description","isCurrentStep","labelId","descriptionId","btnLabel","statusIcon","stepClasses","isLocked","disabled","h","role","class","join","type","undefined","tabIndex","onKeyDown","ev","onClick","Fragment","innerHTML","render","containerClasses","hidden","hideLabel","onScroll","ref","keys","map","onSlotchange"],"sources":["src/components/q2-stepper/q2-stepper.scss?tag=q2-stepper&encapsulation=shadow","src/components/q2-stepper/q2-stepper.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n    position: relative;\n}\n\nul {\n    --comp-bullet-background: #{var-list(\n            --tct-stepper-bullet-active-background,\n            var-prefixer(stepper-bullet-active-bg),\n            --t-primary,\n            #0079c1\n        )};\n    --comp-bullet-font-color: #{var-list(\n            var-prefixer(stepper-bullet-active-font-color),\n            --t-primary-font-color,\n            #ffffff\n        )};\n    --comp-bullet-size: #{var-list(var-prefixer(stepper-btn-icon-size), 24px)};\n    --comp-bullet-gap: #{var-list(var-prefixer(stepper-btn-gap), --app-scale-3x, 15px)};\n    --comp-bullet-font-size: #{var-list(var-prefixer(stepper-btn-label-font-size), 16px)};\n\n    --comp-step-width: #{var-list(var-prefixer(stepper-step-width), --t-stepper-step-width, 80px)};\n    --comp-step-gap: #{var-list(var-prefixer(stepper-step-gap), 5px)};\n    --comp-btn-icon-size: #{var-list(var-prefixer(stepper-btn-icon-size), 24px)};\n    --comp-btn-label-font-size: #{var-list(var-prefixer(stepper-btn-label-font-size), 16px)};\n    --comp-tween: #{var-list(var-prefixer(stepper-tween), --app-tween-1, unquote('0.2s ease'))};\n\n    overflow-x: auto;\n    display: flex;\n    justify-content: center;\n    list-style: none;\n    padding: 0;\n    padding: var-list(var-prefixer(stepper-list-padding), 2px);\n    margin: 0;\n    gap: var(--comp-step-gap);\n    @include tiny-scrollbar();\n\n    .has-scroll & {\n        justify-content: unset;\n    }\n}\n\nli {\n    min-height: var-list(var-prefixer(stepper-min-height), 50px);\n    flex: 0 0 auto;\n    position: relative;\n    width: var(--comp-step-width);\n    text-align: center;\n    max-width: 150px;\n    min-width: 80px;\n}\n\n.step-btn {\n    position: relative;\n    background: transparent;\n    border: 0;\n    cursor: pointer;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    height: calc(100% - 4px);\n    width: 100%;\n    transition: var(--comp-tween);\n    padding: 0;\n    transition-property: box-shadow;\n    outline: none;\n    margin-top: 2px;\n\n    --comp-active-color: var(--comp-bullet-background);\n    &.status-complete {\n        --comp-active-color: var(--const-stoplight-success, #0e8a00);\n        --tct-stoplight-success: var(--comp-active-color);\n    }\n    &.status-error {\n        --comp-active-color: var(--const-stoplight-alert, #d20a0a);\n        --tct-stoplight-warning: var(--comp-active-color);\n    }\n\n    &[aria-disabled='true'] {\n        cursor: not-allowed;\n\n        &,\n        & + .step-divider {\n            --comp-bullet-font-color: #{var-list(var-prefixer(stepper-bullet-inactive-font-color), --t-text, #4d4d4d)};\n            --comp-bullet-background: #{var-list(\n                    --tct-stepper-bullet-inactive-background,\n                    var-prefixer(stepper-bullet-inactive-bg),\n                    --t-gray-12,\n                    #d9d9d9\n                )};\n        }\n    }\n}\n.step-icon,\n.step-bubble {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    line-height: 0;\n    margin: var(--comp-bullet-gap) auto;\n    color: var(--comp-bullet-font-color);\n    width: var(--comp-btn-icon-size);\n    height: var(--comp-btn-icon-size);\n    min-height: var(--comp-btn-icon-size);\n    font-size: var(--comp-bullet-font-size);\n    transition: var(--comp-tween);\n    transition-property: background, color;\n    border-radius: 50%;\n    position: relative;\n\n    q2-icon {\n        --tct-icon-fill: var(--comp-active-color);\n        &:before {\n            content: '';\n            display: block;\n            background: var(--comp-bullet-font-color);\n            position: absolute;\n            width: 80%;\n            height: 80%;\n            left: 11%;\n            top: 11%;\n            border-radius: 50%;\n        }\n    }\n    .status-complete &,\n    .status-error & {\n        background: var(--comp-active-color);\n    }\n    [aria-selected='true'] & {\n        box-shadow:\n            0 0 0 2px var(--t-base, #ffffff),\n            0 0 0 4px var(--comp-active-color);\n        font-weight: var-list(var-prefixer(stepper-bullet-active-font-weight), 600);\n    }\n}\n\n.step-bubble {\n    background: var(--comp-bullet-background);\n}\n\n.step-divider {\n    width: calc(var(--comp-step-width) - var(--comp-step-gap) - var(--comp-bullet-gap) - var(--comp-bullet-size));\n    top: calc(calc(var(--comp-bullet-size) / 2) + var(--comp-bullet-gap));\n    left: calc(calc(var(--comp-step-width) * -0.5) + var(--comp-step-gap) + var(--comp-bullet-gap));\n    border: 0;\n    border-top: 1px solid var(--comp-bullet-background);\n    height: 0;\n    position: absolute;\n    margin: 0;\n    transition: border var(--comp-tween);\n}\n\n.step-container {\n    position: relative;\n}\n\n.step-label {\n    color: var-list(--tct-stepper-label-color, var-prefixer(stepper-title-color), --t-text, #4d4d4d);\n    font-size: var-list(\n        --tct-stepper-label-font-size,\n        var-prefixer(stepper-title-font-size),\n        --app-font-size-small,\n        12px\n    );\n    line-height: var-list(--tct-stepper-label-line-height, 1.5em);\n    @include line-clamp(var(--tct-stepper-label-line-count, 2));\n\n    [aria-selected] & {\n        font-weight: var-list(var-prefixer(stepper-active-font-weight), 600);\n    }\n\n    [aria-describedby] & {\n        -webkit-line-clamp: var(--tct-stepper-label-line-count, 1);\n    }\n}\n\n.step-description {\n    color: var-list(var-prefixer(stepper-description-color), --t-textA, rgba(77, 77, 77, 0.77));\n    font-size: var-list(var-prefixer(stepper-description-font-size), --app-font-size-small, 12px);\n    @include line-clamp(var(--tct-stepper-description-line-count, 4));\n\n    // Add padding for descenders\n    padding-bottom: 0.2em;\n\n    // For description slot on q2-stepper-pane\n    .ellipsize {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        max-width: var(--comp-step-width);\n        display: block;\n    }\n}\n\n.gradient-left,\n.gradient-right {\n    z-index: 1;\n    position: absolute;\n    top: 0;\n    height: 100%;\n    width: 18px;\n}\n\n.gradient-left {\n    background-image: linear-gradient(\n        to left,\n        var(--t-base-a0, rgba(255, 255, 255, 0)),\n        var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%,\n        var(--t-base, #ffffff) 100%\n    );\n    left: 0;\n}\n\n.gradient-right {\n    background-image: linear-gradient(\n        to right,\n        var(--t-base-a0, rgba(255, 255, 255, 0)),\n        var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%,\n        var(--t-base, #ffffff) 100%\n    );\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","import {\n    Component,\n    Prop,\n    h,\n    Element,\n    ComponentInterface,\n    State,\n    Watch,\n    Listen,\n    Method,\n    Event,\n    EventEmitter,\n    Fragment,\n} from '@stencil/core';\nimport { loc, overrideFocus, isEventFromElement } from 'src/utils';\n@Component({ tag: 'q2-stepper', shadow: true, styleUrl: 'q2-stepper.scss' })\nexport class Q2Stepper implements ComponentInterface {\n    // #region Own Properties\n\n    listElement: HTMLUListElement;\n    resizeObserver: ResizeObserver;\n    scheduledAfterRender: (() => void)[] = [];\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    contentChangeTriggerCount: number = 0;\n\n    @State()\n    scrollEnabled: boolean = false;\n\n    @State()\n    showScrollLeft: boolean = false;\n\n    @State()\n    showScrollRight: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /** The currently selected step. */\n    @Prop({ reflect: true, mutable: true })\n    currentStep: number;\n\n    /**\n     * The last step the user may navigate to.\n     * @info\n     * Will be managed automatically if not provided.\n     */\n    @Prop({ reflect: true, mutable: true })\n    lastEnabledStep: number;\n\n    /**\n     * Used to determine the number of steps in the stepper.\n     * @private\n     */\n    @Prop({ mutable: true })\n    stepCount: number;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the selected step changes.\n     * @legacyEvent\n     */\n    @Event()\n    change: EventEmitter;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.resizeObserver?.disconnect();\n        this.resizeObserver = null;\n    }\n\n    componentWillLoad() {\n        this.handleUndefinedStepProperties();\n        if ('ResizeObserver' in window) {\n            this.resizeObserver = new ResizeObserver(() => this.checkScrollState());\n        }\n        this.checkForPanes();\n    }\n\n    componentDidLoad() {\n        this.resizeObserver?.observe(this.listElement);\n        this.checkScrollState();\n        overrideFocus(this.hostElement);\n        setTimeout(() => this.showStep(this.currentStep || 1), 0);\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('change')\n    defaultChangeHandler(event: CustomEvent) {\n        const { hostElement } = this;\n        if (event.target === hostElement && !hostElement.getAttribute('onchange') && !!event.detail) {\n            this.currentStep = event.detail.selectedStep || this.currentStep;\n        }\n    }\n\n    @Listen('contentChange')\n    contentChangeHandler() {\n        this.contentChangeTriggerCount += 1;\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.focusStep(this.currentStep, true, true);\n    }\n\n    @Listen('statusChange')\n    statusChangeHandler(event: CustomEvent) {\n        const index = Array.from(this.allPanes).findIndex(el => event.detail.id === el.id);\n        if (index > -1) {\n            this.allPanes[index].status = event.detail.status;\n            this.renderStepBtn(index);\n        }\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates clicking a step in the stepper and emitting the change event.\n     *\n     * You may provide either the step number or the stepper pane id.\n     *\n     * If the value is invalid or the step is locked, the method will do nothing.\n     * @testOnly\n     */\n    @Method()\n    async selectStep(value: number | string) {\n        let stepListItem;\n        switch (typeof value) {\n            case 'number':\n                if (value > this.lastEnabledStep || value < 1) break;\n                stepListItem = this.listElement.children[value - 1];\n                if (!stepListItem) return;\n                (stepListItem.firstElementChild as HTMLButtonElement)?.click();\n                break;\n            case 'string':\n                const pane = this.hostElement.querySelector<HTMLQ2StepperPaneElement>(`#${value}`);\n                if (!pane) break;\n                const stepIndex = this.allPanes.indexOf(pane);\n                if (stepIndex + 1 > this.lastEnabledStep || stepIndex < 0) break;\n                stepListItem = this.listElement.children[stepIndex];\n                if (!stepListItem) break;\n                (stepListItem.firstElementChild as HTMLButtonElement)?.click();\n                break;\n            default:\n                break;\n        }\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('lastEnabledStep')\n    @Watch('currentStep')\n    lastEnabledStepChanged() {\n        this.handleUndefinedStepProperties();\n    }\n\n    @Watch('currentStep')\n    currentStepChanged(stepNumber: number) {\n        this.showStep(stepNumber);\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get allPanes() {\n        return Array.from(this.hostElement.querySelectorAll<HTMLQ2StepperPaneElement>('q2-stepper-pane'));\n    }\n\n    checkForPanes = () => {\n        const { allPanes } = this;\n        if (!allPanes.length) return;\n\n        this.stepCount = allPanes.length;\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;\n        this.showScrollRight = scrollWidth !== scrollLeft + clientWidth;\n    };\n\n    focusStep(stepNumber: number, scrollIntoView?: boolean, forceFocus?: boolean) {\n        const { listElement } = this;\n        if (!listElement) return;\n\n        const stepListItem = listElement.children[stepNumber - 1] as HTMLLIElement;\n        const isActive = document.activeElement === this.hostElement;\n        if (!stepListItem) return;\n        if (isActive || forceFocus) {\n            (stepListItem.firstElementChild as HTMLButtonElement)?.focus();\n        }\n\n        if (scrollIntoView) {\n            const left = stepListItem.offsetLeft - this.listElement.clientWidth / 2;\n            this.listElement.scrollTo({\n                left,\n                behavior: 'smooth',\n            });\n        }\n    }\n\n    getPaneSlotOrProperty(pane: HTMLQ2StepperPaneElement, slotName: 'description' | 'label') {\n        const slot = Array.from(pane.children).find(child => child.getAttribute('slot') === slotName);\n        return slot?.outerHTML ?? loc(pane[slotName]);\n    }\n\n    handleUndefinedStepProperties() {\n        const { currentStep, lastEnabledStep } = this;\n        if (currentStep && lastEnabledStep) return;\n        if (!currentStep && lastEnabledStep) {\n            this.currentStep = lastEnabledStep;\n        } else if (currentStep && !lastEnabledStep) {\n            this.lastEnabledStep = currentStep;\n        } else if (!currentStep && !lastEnabledStep) {\n            this.currentStep = 1;\n            this.lastEnabledStep = 1;\n        }\n    }\n\n    onScrollBtnClick = (direction: 'left' | 'right') => {\n        const scrollAmount = Math.floor(this.listElement.clientWidth / 2);\n\n        this.listElement.scrollBy({\n            left: direction === 'left' ? -scrollAmount : scrollAmount,\n            behavior: 'smooth',\n        });\n    };\n\n    onSlotChange = () => {\n        this.checkForPanes();\n        this.checkScrollState();\n    };\n\n    onStepClick = (event, selectedStep: number) => {\n        event.stopPropagation();\n        const { currentStep, stepCount, lastEnabledStep } = this;\n        if (selectedStep > lastEnabledStep || selectedStep === currentStep) return;\n\n        this.change.emit({\n            selectedStep,\n            lastEnabledStep,\n            currentStep,\n            stepCount,\n        });\n    };\n\n    onStepKeyDown = (event: KeyboardEvent, stepNumber: number) => {\n        const { lastEnabledStep, stepCount } = this;\n        const { key } = event;\n\n        let selectedStep;\n        switch (key) {\n            case 'ArrowLeft':\n                event.preventDefault();\n                selectedStep = Math.max(stepNumber - 1, 0);\n                break;\n\n            case 'ArrowRight':\n                event.preventDefault();\n                selectedStep = Math.min(stepNumber + 1, stepCount);\n                break;\n\n            case 'Home':\n                event.preventDefault();\n                selectedStep = 1;\n                break;\n\n            case 'End':\n                event.preventDefault();\n                selectedStep = lastEnabledStep;\n                break;\n        }\n\n        if (!selectedStep) return;\n        this.focusStep(selectedStep, true);\n    };\n\n    resizeIframe() {\n        return window?.TectonElements?.resizeIframe?.();\n    }\n\n    showStep(stepNumber: number) {\n        if (stepNumber > this.lastEnabledStep) {\n            const { currentStep, stepCount } = this;\n            this.lastEnabledStep = stepNumber;\n            this.change.emit({\n                selectedStep: null,\n                lastEnabledStep: stepNumber,\n                currentStep,\n                stepCount,\n            });\n        }\n\n        this.scheduledAfterRender.push(this.resizeIframe);\n        this.showStepPane(stepNumber);\n        this.focusStep(stepNumber, this.scrollEnabled);\n    }\n\n    showStepPane(stepNumber: number) {\n        this.allPanes.forEach((pane, index) => {\n            pane.isActive = stepNumber === index + 1;\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    renderStepBtn(stepIndex: number) {\n        const { allPanes, stepCount, lastEnabledStep, currentStep } = this;\n        const pane = allPanes?.[stepIndex] ?? null;\n        const { id, status } = pane;\n        const label = this.getPaneSlotOrProperty(pane, 'label');\n        const description = this.getPaneSlotOrProperty(pane, 'description');\n\n        const stepNumber = stepIndex + 1;\n        const isCurrentStep = stepNumber === currentStep;\n        const labelId = !!label && `label-${id}`;\n        const descriptionId = !!label && !!description && `description-${id}`;\n        const btnLabel = !label && loc('tecton.element.stepper.number', [`${stepNumber}`, `${stepCount}`]);\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        const isLocked = status === 'locked';\n        const disabled = isLocked || stepNumber > lastEnabledStep;\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-disabled={disabled ? 'true' : undefined}\n                    role=\"tab\"\n                    tabIndex={isCurrentStep ? 0 : -1}\n                    onKeyDown={ev => this.onStepKeyDown(ev, stepNumber)}\n                    onClick={ev => !isLocked && this.onStepClick(ev, stepNumber)}\n                >\n                    <Fragment>\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                        {labelId && (\n                            <div\n                                class=\"step-label\"\n                                id={labelId}\n                                innerHTML={label}\n                            ></div>\n                        )}\n                        {labelId && descriptionId && (\n                            <div\n                                class=\"step-description\"\n                                id={descriptionId}\n                                innerHTML={description}\n                            ></div>\n                        )}\n                    </Fragment>\n                </button>\n                {stepIndex ? <div class=\"step-divider\"></div> : ''}\n            </li>\n        );\n    }\n\n    render() {\n        const { stepCount, scrollEnabled, showScrollLeft, showScrollRight } = this;\n        const containerClasses = ['step-container'];\n        if (scrollEnabled) containerClasses.push('has-scroll');\n\n        return (\n            <Fragment>\n                <div class={containerClasses.join(' ')}>\n                    {scrollEnabled && (\n                        <Fragment>\n                            <div\n                                class=\"gradient-left\"\n                                hidden={!showScrollLeft}\n                            ></div>\n                            <div\n                                class=\"gradient-right\"\n                                hidden={!showScrollRight}\n                            ></div>\n\n                            <q2-btn\n                                class=\"btn-left\"\n                                hideLabel={true}\n                                hidden={!this.showScrollLeft}\n                                label={loc('tecton.element.stepper.scrollLeft')}\n                                onClick={() => this.onScrollBtnClick('left')}\n                            >\n                                <q2-icon type=\"chevron-left\"></q2-icon>\n                            </q2-btn>\n\n                            <q2-btn\n                                class=\"btn-right\"\n                                hideLabel={true}\n                                hidden={!this.showScrollRight}\n                                label={loc('tecton.element.stepper.scrollRight')}\n                                onClick={() => this.onScrollBtnClick('right')}\n                            >\n                                <q2-icon type=\"chevron-right\"></q2-icon>\n                            </q2-btn>\n                        </Fragment>\n                    )}\n\n                    <ul\n                        onScroll={this.checkScrollState}\n                        ref={el => (this.listElement = el)}\n                        role=\"tablist\"\n                    >\n                        {stepCount > 0 && [...Array(stepCount).keys()].map(stepIndex => this.renderStepBtn(stepIndex))}\n                    </ul>\n                </div>\n                <div role=\"list\">\n                    <slot onSlotchange={() => this.onSlotChange()} />\n                </div>\n            </Fragment>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["q2StepperCss","Q2Stepper","constructor","hostRef","this","scheduledAfterRender","contentChangeTriggerCount","scrollEnabled","showScrollLeft","showScrollRight","checkForPanes","allPanes","length","stepCount","checkScrollState","listElement","scrollLeft","scrollWidth","clientWidth","onScrollBtnClick","direction","scrollAmount","Math","floor","scrollBy","left","behavior","onSlotChange","onStepClick","event","selectedStep","stopPropagation","currentStep","lastEnabledStep","change","emit","onStepKeyDown","stepNumber","key","preventDefault","max","min","focusStep","disconnectedCallback","_a","resizeObserver","disconnect","componentWillLoad","handleUndefinedStepProperties","window","ResizeObserver","componentDidLoad","observe","overrideFocus","hostElement","setTimeout","showStep","componentDidRender","forEach","fn","defaultChangeHandler","target","getAttribute","detail","contentChangeHandler","delegateFocus","isEventFromElement","statusChangeHandler","index","Array","from","findIndex","el","id","status","renderStepBtn","selectStep","value","stepListItem","children","firstElementChild","click","pane","querySelector","stepIndex","indexOf","_b","lastEnabledStepChanged","currentStepChanged","querySelectorAll","scrollIntoView","forceFocus","isActive","document","activeElement","focus","offsetLeft","scrollTo","getPaneSlotOrProperty","slotName","slot","find","child","outerHTML","loc","resizeIframe","TectonElements","call","push","showStepPane","label","description","isCurrentStep","labelId","descriptionId","btnLabel","statusIcon","stepClasses","isLocked","disabled","h","role","class","join","type","undefined","tabIndex","onKeyDown","ev","onClick","Fragment","innerHTML","render","containerClasses","hidden","hideLabel","onScroll","ref","keys","map","onSlotchange"],"sources":["src/components/q2-stepper/q2-stepper.scss?tag=q2-stepper&encapsulation=shadow","src/components/q2-stepper/q2-stepper.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n    position: relative;\n}\n\nul {\n    --comp-bullet-background: #{var-list(\n            --tct-stepper-bullet-active-background,\n            var-prefixer(stepper-bullet-active-bg),\n            --t-primary,\n            #0079c1\n        )};\n    --comp-divider-color: #{var-list(--tct-stepper-bullet-active-divider-color, --comp-bullet-background)};\n    --comp-bullet-font-color: #{var-list(\n            var-prefixer(stepper-bullet-active-font-color),\n            --t-primary-font-color,\n            #ffffff\n        )};\n    --comp-bullet-size: #{var-list(var-prefixer(stepper-btn-icon-size), 24px)};\n    --comp-bullet-gap: #{var-list(var-prefixer(stepper-btn-gap), --app-scale-3x, 15px)};\n    --comp-bullet-font-size: #{var-list(var-prefixer(stepper-btn-label-font-size), 16px)};\n\n    --comp-step-width: #{var-list(var-prefixer(stepper-step-width), --t-stepper-step-width, 80px)};\n    --comp-step-gap: #{var-list(var-prefixer(stepper-step-gap), 5px)};\n    --comp-btn-icon-size: #{var-list(var-prefixer(stepper-btn-icon-size), 24px)};\n    --comp-btn-label-font-size: #{var-list(var-prefixer(stepper-btn-label-font-size), 16px)};\n    --comp-btn-icon-visibility: #{var(--tct-stepper-btn-icon-visibility, visible)};\n    --comp-tween: #{var-list(var-prefixer(stepper-tween), --app-tween-1, unquote('0.2s ease'))};\n\n    overflow-x: auto;\n    display: flex;\n    justify-content: center;\n    list-style: none;\n    padding: 0;\n    padding: var-list(var-prefixer(stepper-list-padding), 2px);\n    margin: 0;\n    gap: var(--comp-step-gap);\n    @include tiny-scrollbar();\n\n    .has-scroll & {\n        justify-content: unset;\n    }\n}\n\nli {\n    min-height: var-list(var-prefixer(stepper-min-height), 50px);\n    flex: 0 0 auto;\n    position: relative;\n    width: var(--comp-step-width);\n    text-align: center;\n    max-width: 150px;\n    min-width: 80px;\n}\n\n.step-btn {\n    position: relative;\n    background: transparent;\n    border: 0;\n    cursor: pointer;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    height: calc(100% - 4px);\n    width: 100%;\n    transition: var(--comp-tween);\n    padding: 0;\n    transition-property: box-shadow;\n    outline: none;\n    margin-top: 2px;\n\n    --comp-active-color: var(--comp-bullet-background);\n    --comp-default-box-shadow: 0 0 0 2px var(--t-base, #ffffff), 0 0 0 4px var(--comp-active-color);\n    --comp-bullet-active-box-shadow: #{var-list(--tct-stepper-bullet-active-box-shadow, --comp-default-box-shadow)};\n    &.status-complete {\n        --comp-active-color: var(--const-stoplight-success, #0e8a00);\n        --comp-default-box-shadow: 0 0 0 2px var(--t-base, #ffffff), 0 0 0 4px var(--comp-active-color);\n        --comp-bullet-active-box-shadow: #{var-list(--tct-stepper-bullet-complete-box-shadow, --comp-default-box-shadow)};\n        --tct-stoplight-success: var(--comp-active-color);\n    }\n    &.status-error {\n        --comp-active-color: var(--const-stoplight-alert, #d20a0a);\n        --comp-default-box-shadow: 0 0 0 2px var(--t-base, #ffffff), 0 0 0 4px var(--comp-active-color);\n        --comp-bullet-active-box-shadow: #{var-list(--tct-stepper-bullet-error-box-shadow, --comp-default-box-shadow)};\n        --tct-stoplight-warning: var(--comp-active-color);\n    }\n\n    &[aria-disabled='true'] {\n        cursor: not-allowed;\n\n        &,\n        & + .step-divider {\n            --comp-bullet-font-color: #{var-list(\n                    --tct-stepper-bullet-disabled-font-color,\n                    var-prefixer(stepper-bullet-inactive-font-color),\n                    --t-text,\n                    #4d4d4d\n                )};\n            --comp-bullet-background: #{var-list(\n                    --tct-stepper-bullet-disabled-background,\n                    --tct-stepper-bullet-inactive-background,\n                    var-prefixer(stepper-bullet-inactive-bg),\n                    --t-gray-12,\n                    #d9d9d9\n                )};\n            --comp-divider-color: #{var-list(--tct-stepper-bullet-disabled-divider-color, --comp-bullet-background)};\n            --comp-bullet-inactive-box-shadow: #{var-list(--tct-stepper-bullet-disabled-box-shadow, none)};\n        }\n    }\n}\n.step-icon,\n.step-bubble {\n    visibility: var(--comp-btn-icon-visibility);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    line-height: 0;\n    margin: var(--comp-bullet-gap) auto;\n    color: var(--comp-bullet-font-color);\n    width: var(--comp-btn-icon-size);\n    height: var(--comp-btn-icon-size);\n    min-height: var(--comp-btn-icon-size);\n    font-size: var(--comp-bullet-font-size);\n    transition: var(--comp-tween);\n    transition-property: background, color;\n    border-radius: 50%;\n    position: relative;\n    box-shadow: var(--comp-bullet-inactive-box-shadow);\n\n    q2-icon {\n        --tct-icon-fill: var(--comp-active-color);\n        &:before {\n            content: '';\n            display: block;\n            background: var(--comp-bullet-font-color);\n            position: absolute;\n            width: 80%;\n            height: 80%;\n            left: 11%;\n            top: 11%;\n            border-radius: 50%;\n        }\n    }\n    .status-complete &,\n    .status-error & {\n        background: var(--comp-active-color);\n    }\n    [aria-selected='true'] & {\n        box-shadow: var(--comp-bullet-active-box-shadow);\n        font-weight: var-list(var-prefixer(stepper-bullet-active-font-weight), 600);\n    }\n}\n\n.step-bubble {\n    background: var(--comp-bullet-background);\n}\n\n.step-divider {\n    width: calc(var(--comp-step-width) - var(--comp-step-gap) - var(--comp-bullet-gap) - var(--comp-bullet-size));\n    top: calc(calc(var(--comp-bullet-size) / 2) + var(--comp-bullet-gap));\n    left: calc(calc(var(--comp-step-width) * -0.5) + var(--comp-step-gap) + var(--comp-bullet-gap));\n    border: 0;\n    border-top: 1px solid var(--comp-divider-color);\n    height: 0;\n    position: absolute;\n    margin: 0;\n    transition: border var(--comp-tween);\n}\n\n.step-container {\n    position: relative;\n}\n\n.step-label {\n    color: var-list(--tct-stepper-label-color, var-prefixer(stepper-title-color), --t-text, #4d4d4d);\n    font-size: var-list(\n        --tct-stepper-label-font-size,\n        var-prefixer(stepper-title-font-size),\n        --app-font-size-small,\n        12px\n    );\n    line-height: var-list(--tct-stepper-label-line-height, 1.5em);\n    @include line-clamp(var(--tct-stepper-label-line-count, 2));\n\n    [aria-selected] & {\n        font-weight: var-list(var-prefixer(stepper-active-font-weight), 600);\n    }\n\n    [aria-describedby] & {\n        -webkit-line-clamp: var(--tct-stepper-label-line-count, 1);\n    }\n}\n\n.step-description {\n    color: var-list(var-prefixer(stepper-description-color), --t-textA, rgba(77, 77, 77, 0.77));\n    font-size: var-list(var-prefixer(stepper-description-font-size), --app-font-size-small, 12px);\n    @include line-clamp(var(--tct-stepper-description-line-count, 4));\n\n    // Add padding for descenders\n    padding-bottom: 0.2em;\n\n    // For description slot on q2-stepper-pane\n    .ellipsize {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        max-width: var(--comp-step-width);\n        display: block;\n    }\n}\n\n.gradient-left,\n.gradient-right {\n    z-index: 1;\n    position: absolute;\n    top: 0;\n    height: 100%;\n    width: 18px;\n}\n\n.gradient-left {\n    background-image: linear-gradient(\n        to left,\n        var(--t-base-a0, rgba(255, 255, 255, 0)),\n        var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%,\n        var(--t-base, #ffffff) 100%\n    );\n    left: 0;\n}\n\n.gradient-right {\n    background-image: linear-gradient(\n        to right,\n        var(--t-base-a0, rgba(255, 255, 255, 0)),\n        var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%,\n        var(--t-base, #ffffff) 100%\n    );\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","import {\n    Component,\n    Prop,\n    h,\n    Element,\n    ComponentInterface,\n    State,\n    Watch,\n    Listen,\n    Method,\n    Event,\n    EventEmitter,\n    Fragment,\n} from '@stencil/core';\nimport { loc, overrideFocus, isEventFromElement } from 'src/utils';\n@Component({ tag: 'q2-stepper', shadow: true, styleUrl: 'q2-stepper.scss' })\nexport class Q2Stepper implements ComponentInterface {\n    // #region Own Properties\n\n    listElement: HTMLUListElement;\n    resizeObserver: ResizeObserver;\n    scheduledAfterRender: (() => void)[] = [];\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    contentChangeTriggerCount: number = 0;\n\n    @State()\n    scrollEnabled: boolean = false;\n\n    @State()\n    showScrollLeft: boolean = false;\n\n    @State()\n    showScrollRight: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /** The currently selected step. */\n    @Prop({ reflect: true, mutable: true })\n    currentStep: number;\n\n    /**\n     * The last step the user may navigate to.\n     * @info\n     * Will be managed automatically if not provided.\n     */\n    @Prop({ reflect: true, mutable: true })\n    lastEnabledStep: number;\n\n    /**\n     * Used to determine the number of steps in the stepper.\n     * @private\n     */\n    @Prop({ mutable: true })\n    stepCount: number;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the selected step changes.\n     * @legacyEvent\n     */\n    @Event()\n    change: EventEmitter;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.resizeObserver?.disconnect();\n        this.resizeObserver = null;\n    }\n\n    componentWillLoad() {\n        this.handleUndefinedStepProperties();\n        if ('ResizeObserver' in window) {\n            this.resizeObserver = new ResizeObserver(() => this.checkScrollState());\n        }\n        this.checkForPanes();\n    }\n\n    componentDidLoad() {\n        this.resizeObserver?.observe(this.listElement);\n        this.checkScrollState();\n        overrideFocus(this.hostElement);\n        setTimeout(() => this.showStep(this.currentStep || 1), 0);\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('change')\n    defaultChangeHandler(event: CustomEvent) {\n        const { hostElement } = this;\n        if (event.target === hostElement && !hostElement.getAttribute('onchange') && !!event.detail) {\n            this.currentStep = event.detail.selectedStep || this.currentStep;\n        }\n    }\n\n    @Listen('contentChange')\n    contentChangeHandler() {\n        this.contentChangeTriggerCount += 1;\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.focusStep(this.currentStep, true, true);\n    }\n\n    @Listen('statusChange')\n    statusChangeHandler(event: CustomEvent) {\n        const index = Array.from(this.allPanes).findIndex(el => event.detail.id === el.id);\n        if (index > -1) {\n            this.allPanes[index].status = event.detail.status;\n            this.renderStepBtn(index);\n        }\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates clicking a step in the stepper and emitting the change event.\n     *\n     * You may provide either the step number or the stepper pane id.\n     *\n     * If the value is invalid or the step is locked, the method will do nothing.\n     * @testOnly\n     */\n    @Method()\n    async selectStep(value: number | string) {\n        let stepListItem;\n        switch (typeof value) {\n            case 'number':\n                if (value > this.lastEnabledStep || value < 1) break;\n                stepListItem = this.listElement.children[value - 1];\n                if (!stepListItem) return;\n                (stepListItem.firstElementChild as HTMLButtonElement)?.click();\n                break;\n            case 'string':\n                const pane = this.hostElement.querySelector<HTMLQ2StepperPaneElement>(`#${value}`);\n                if (!pane) break;\n                const stepIndex = this.allPanes.indexOf(pane);\n                if (stepIndex + 1 > this.lastEnabledStep || stepIndex < 0) break;\n                stepListItem = this.listElement.children[stepIndex];\n                if (!stepListItem) break;\n                (stepListItem.firstElementChild as HTMLButtonElement)?.click();\n                break;\n            default:\n                break;\n        }\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('lastEnabledStep')\n    @Watch('currentStep')\n    lastEnabledStepChanged() {\n        this.handleUndefinedStepProperties();\n    }\n\n    @Watch('currentStep')\n    currentStepChanged(stepNumber: number) {\n        this.showStep(stepNumber);\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get allPanes() {\n        return Array.from(this.hostElement.querySelectorAll<HTMLQ2StepperPaneElement>('q2-stepper-pane'));\n    }\n\n    checkForPanes = () => {\n        const { allPanes } = this;\n        if (!allPanes.length) return;\n\n        this.stepCount = allPanes.length;\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;\n        this.showScrollRight = scrollWidth !== scrollLeft + clientWidth;\n    };\n\n    focusStep(stepNumber: number, scrollIntoView?: boolean, forceFocus?: boolean) {\n        const { listElement } = this;\n        if (!listElement) return;\n\n        const stepListItem = listElement.children[stepNumber - 1] as HTMLLIElement;\n        const isActive = document.activeElement === this.hostElement;\n        if (!stepListItem) return;\n        if (isActive || forceFocus) {\n            (stepListItem.firstElementChild as HTMLButtonElement)?.focus();\n        }\n\n        if (scrollIntoView) {\n            const left = stepListItem.offsetLeft - this.listElement.clientWidth / 2;\n            this.listElement.scrollTo({\n                left,\n                behavior: 'smooth',\n            });\n        }\n    }\n\n    getPaneSlotOrProperty(pane: HTMLQ2StepperPaneElement, slotName: 'description' | 'label') {\n        const slot = Array.from(pane.children).find(child => child.getAttribute('slot') === slotName);\n        return slot?.outerHTML ?? loc(pane[slotName]);\n    }\n\n    handleUndefinedStepProperties() {\n        const { currentStep, lastEnabledStep } = this;\n        if (currentStep && lastEnabledStep) return;\n        if (!currentStep && lastEnabledStep) {\n            this.currentStep = lastEnabledStep;\n        } else if (currentStep && !lastEnabledStep) {\n            this.lastEnabledStep = currentStep;\n        } else if (!currentStep && !lastEnabledStep) {\n            this.currentStep = 1;\n            this.lastEnabledStep = 1;\n        }\n    }\n\n    onScrollBtnClick = (direction: 'left' | 'right') => {\n        const scrollAmount = Math.floor(this.listElement.clientWidth / 2);\n\n        this.listElement.scrollBy({\n            left: direction === 'left' ? -scrollAmount : scrollAmount,\n            behavior: 'smooth',\n        });\n    };\n\n    onSlotChange = () => {\n        this.checkForPanes();\n        this.checkScrollState();\n    };\n\n    onStepClick = (event, selectedStep: number) => {\n        event.stopPropagation();\n        const { currentStep, stepCount, lastEnabledStep } = this;\n        if (selectedStep > lastEnabledStep || selectedStep === currentStep) return;\n\n        this.change.emit({\n            selectedStep,\n            lastEnabledStep,\n            currentStep,\n            stepCount,\n        });\n    };\n\n    onStepKeyDown = (event: KeyboardEvent, stepNumber: number) => {\n        const { lastEnabledStep, stepCount } = this;\n        const { key } = event;\n\n        let selectedStep;\n        switch (key) {\n            case 'ArrowLeft':\n                event.preventDefault();\n                selectedStep = Math.max(stepNumber - 1, 0);\n                break;\n\n            case 'ArrowRight':\n                event.preventDefault();\n                selectedStep = Math.min(stepNumber + 1, stepCount);\n                break;\n\n            case 'Home':\n                event.preventDefault();\n                selectedStep = 1;\n                break;\n\n            case 'End':\n                event.preventDefault();\n                selectedStep = lastEnabledStep;\n                break;\n        }\n\n        if (!selectedStep) return;\n        this.focusStep(selectedStep, true);\n    };\n\n    resizeIframe() {\n        return window?.TectonElements?.resizeIframe?.();\n    }\n\n    showStep(stepNumber: number) {\n        if (stepNumber > this.lastEnabledStep) {\n            const { currentStep, stepCount } = this;\n            this.lastEnabledStep = stepNumber;\n            this.change.emit({\n                selectedStep: null,\n                lastEnabledStep: stepNumber,\n                currentStep,\n                stepCount,\n            });\n        }\n\n        this.scheduledAfterRender.push(this.resizeIframe);\n        this.showStepPane(stepNumber);\n        this.focusStep(stepNumber, this.scrollEnabled);\n    }\n\n    showStepPane(stepNumber: number) {\n        this.allPanes.forEach((pane, index) => {\n            pane.isActive = stepNumber === index + 1;\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    renderStepBtn(stepIndex: number) {\n        const { allPanes, stepCount, lastEnabledStep, currentStep } = this;\n        const pane = allPanes?.[stepIndex] ?? null;\n        const { id, status } = pane;\n        const label = this.getPaneSlotOrProperty(pane, 'label');\n        const description = this.getPaneSlotOrProperty(pane, 'description');\n\n        const stepNumber = stepIndex + 1;\n        const isCurrentStep = stepNumber === currentStep;\n        const labelId = !!label && `label-${id}`;\n        const descriptionId = !!label && !!description && `description-${id}`;\n        const btnLabel = !label && loc('tecton.element.stepper.number', [`${stepNumber}`, `${stepCount}`]);\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        const isLocked = status === 'locked';\n        const disabled = isLocked || stepNumber > lastEnabledStep;\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-disabled={disabled ? 'true' : undefined}\n                    role=\"tab\"\n                    tabIndex={isCurrentStep ? 0 : -1}\n                    onKeyDown={ev => this.onStepKeyDown(ev, stepNumber)}\n                    onClick={ev => !isLocked && this.onStepClick(ev, stepNumber)}\n                >\n                    <Fragment>\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                        {labelId && (\n                            <div\n                                class=\"step-label\"\n                                id={labelId}\n                                innerHTML={label}\n                            ></div>\n                        )}\n                        {labelId && descriptionId && (\n                            <div\n                                class=\"step-description\"\n                                id={descriptionId}\n                                innerHTML={description}\n                            ></div>\n                        )}\n                    </Fragment>\n                </button>\n                {stepIndex ? <div class=\"step-divider\"></div> : ''}\n            </li>\n        );\n    }\n\n    render() {\n        const { stepCount, scrollEnabled, showScrollLeft, showScrollRight } = this;\n        const containerClasses = ['step-container'];\n        if (scrollEnabled) containerClasses.push('has-scroll');\n\n        return (\n            <Fragment>\n                <div class={containerClasses.join(' ')}>\n                    {scrollEnabled && (\n                        <Fragment>\n                            <div\n                                class=\"gradient-left\"\n                                hidden={!showScrollLeft}\n                            ></div>\n                            <div\n                                class=\"gradient-right\"\n                                hidden={!showScrollRight}\n                            ></div>\n\n                            <q2-btn\n                                class=\"btn-left\"\n                                hideLabel={true}\n                                hidden={!this.showScrollLeft}\n                                label={loc('tecton.element.stepper.scrollLeft')}\n                                onClick={() => this.onScrollBtnClick('left')}\n                            >\n                                <q2-icon type=\"chevron-left\"></q2-icon>\n                            </q2-btn>\n\n                            <q2-btn\n                                class=\"btn-right\"\n                                hideLabel={true}\n                                hidden={!this.showScrollRight}\n                                label={loc('tecton.element.stepper.scrollRight')}\n                                onClick={() => this.onScrollBtnClick('right')}\n                            >\n                                <q2-icon type=\"chevron-right\"></q2-icon>\n                            </q2-btn>\n                        </Fragment>\n                    )}\n\n                    <ul\n                        onScroll={this.checkScrollState}\n                        ref={el => (this.listElement = el)}\n                        role=\"tablist\"\n                    >\n                        {stepCount > 0 && [...Array(stepCount).keys()].map(stepIndex => this.renderStepBtn(stepIndex))}\n                    </ul>\n                </div>\n                <div role=\"list\">\n                    <slot onSlotchange={() => this.onSlotChange()} />\n                </div>\n            </Fragment>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/q2-tecton-elements/q2-tag.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-tag.entry.esm.js","sources":["src/components/q2-tag/q2-tag.scss?tag=q2-tag&encapsulation=shadow","src/components/q2-tag/q2-tag.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n    position: relative;\n    line-height: 0;\n}\n\n:host(:not(:last-child)) {\n    margin-inline-end: var-list(var-prefixer(tag-margin), --app-scale-2x, 10px);\n}\n\n.tag-wrapper {\n    --comp-tag-btn-size: #{var-list(var-prefixer(tag-btn-size), --app-scale-6x, 30px)};\n    --comp-tag-background: #{var-list(var-prefixer(tag-background), --t-gray-13, #e6e6e6)};\n    --comp-tag-color: #{var-list(var-prefixer(tag-color), --t-gray-3, #262626)};\n    background: var(--comp-tag-background);\n    color: var(--comp-tag-color);\n    border-radius: var-list(var-prefixer(tag-border-radius), --app-border-radius-1, 4px);\n    position: relative;\n\n    :host([theme='primary']) & {\n        --comp-tag-background: #{var-list(--tct-tag-primary-background, --t-primary, #0079c1)};\n        --comp-tag-color: #{var-list(--tct-tag-primary-font-color, --t-primary-text, #ffffff)};\n    }\n\n    :host([theme='secondary']) & {\n        --comp-tag-background: #{var-list(--tct-tag-secondary-background, --t-secondary, #b3c2cc)};\n        --comp-tag-color: #{var-list(--tct-tag-secondary-font-color, --t-secondary-text, #141414)};\n    }\n\n    :host([theme='tertiary']) & {\n        --comp-tag-background: #{var-list(--tct-tag-tertiary-background, --t-tertiary, #e8f5fc)};\n        --comp-tag-color: #{var-list(--tct-tag-tertiary-font-color, --t-tertiary-text, #141414)};\n    }\n}\n\n.tag {\n    display: flex;\n    align-items: center;\n    width: max-content;\n    gap: 6px;\n    height: var-list(var-prefixer(tag-height), --app-scale-6x, 30px);\n    line-height: var-list(var-prefixer(tag-height), --app-scale-6x, 30px);\n    padding-inline: var-list(var-prefixer(tag-padding-inline), --app-scale-3x, 15px);\n\n    ::slotted(q2-icon[slot='decorator']) {\n        --tct-icon-size: 1em;\n    }\n\n    ::slotted(q2-badge[slot='decorator']) {\n        --tct-badge-height: 1em;\n        --tct-badge-line-height: 30px;\n    }\n}\n\n.tag.has-options {\n    padding-right: 6px;\n}\n\n.btn-wrapper {\n    --comp-tag-clickable-size: #{var-list(var-prefixer(tag-clickable-size), 44px)};\n    --comp-tag-btn-offset: calc(calc(calc(var(--comp-tag-clickable-size) - var(--comp-tag-btn-size)) / 2) * -1);\n    --comp-tag-background: #{var-list(var-prefixer(tag-background), --t-gray-13, #e6e6e6)};\n    height: var(--comp-tag-clickable-size);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    right: var(--comp-tag-btn-offset);\n    top: var(--comp-tag-btn-offset);\n    cursor: pointer;\n}\n\nbutton {\n    height: var(--comp-tag-btn-size);\n    stroke: var(--comp-tag-color);\n    --tct-icon-stroke-primary: var(--comp-tag-color);\n    cursor: pointer;\n    border: 0;\n    background: transparent;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    padding-right: 6px;\n    --tct-icon-size: 18px;\n}\n","import {\n    Component,\n    State,\n    Prop,\n    h,\n    ComponentInterface,\n    Host,\n    Listen,\n    Method,\n    Element,\n    EventEmitter,\n    Event,\n    Fragment,\n} from '@stencil/core';\nimport { isEventFromElement, loc, overrideFocus, waitForNextPaint } from 'src/utils';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\n\n/**\n * @slot decorator - An optional slot that supports either an [Icon](https://tecton.q2developer.com/design-system/q2-icon) or [Badge](https://tecton.q2developer.com/design-system/q2-badge) to be displayed with the tag content.\n * This is **not** available when using [Multiple Options](https://tecton.q2developer.com/design-system/q2-tag#multiple-options).\n */\n@Component({ tag: 'q2-tag', shadow: true, styleUrl: 'q2-tag.scss' })\nexport class Q2Tag implements ComponentInterface {\n    // #region Own Properties\n\n    dropdownBtn: HTMLButtonElement;\n    mutationObserver: MutationObserver;\n    optionList: HTMLQ2OptionListElement;\n    popoverElement: HTMLQ2PopoverElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    optionCount: number;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Instructs the component to use the action sheet workflow for displaying its options.\n     *\n     * For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).\n     */\n    @Prop()\n    hoist: boolean = !!window.Tecton?.useActionSheets;\n\n    /**\n     * The text that populates the label.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /**\n     * Determine whether the popover is open or closed.\n     *\n     * @readonly\n     */\n    @Prop({ reflect: true, mutable: true })\n    open: boolean;\n\n    /** Determines the label that is applied to the option list for accessibility purposes. */\n    @Prop()\n    optionListLabel: string = 'options';\n\n    /** Aligns the popover dropdown to the left or right side of the input field. */\n    @Prop({ mutable: true })\n    popoverAlignment: 'left' | 'right' = 'right';\n\n    /**\n     * Force the direction of the popover dropdown when it opens.\n     * If no value is passed, the component will auto-detect the direction based on available space.\n     */\n    @Prop()\n    popoverDirection: 'up' | 'down';\n\n    /**\n     * Force the maximum height of the popover. This value will be interpreted as pixels.\n     * If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.\n     */\n    @Prop()\n    popoverMaxHeight: number;\n\n    /** @deprecated */\n    @Prop()\n    popoverMinHeight: number;\n\n    /** The color of the element. */\n    @Prop({ reflect: true })\n    theme: 'primary' | 'secondary' | 'tertiary';\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when a provided option is clicked.\n     *\n     * Requires at least one option to be provided.\n     */\n    @Event()\n    click: EventEmitter<{ value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        this.initMutationObserver();\n        this.determineOptionCount();\n    }\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n        this.filterSlottedElements();\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        if (!this.optionCount) return;\n        this.dropdownBtn.focus();\n    }\n\n    @Listen('popoverStateChanged')\n    popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n        if (this.open !== open) this.open = open;\n        if (open) return;\n        this.optionList.setActiveElement(null);\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates clicking the tag to close the popover when options are provided and the popover is open.\n     * @testonly\n     */\n    @Method()\n    async closePopover() {\n        if (!this.optionCount || !this.open) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates clicking the tag to open the popover when options are provided and the popover is closed.\n     * @testonly\n     */\n    @Method()\n    async openPopover() {\n        if (!this.optionCount || this.open) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates selecting an option matching the passed value.\n     *\n     * If the popover is closed, this will open it before selecting the option.\n     *\n     * If there are not options, or the passed value does not match any option's value, this method does nothing.\n     * @testonly\n     */\n    @Method()\n    async selectOption(value) {\n        if (!this.optionCount) return;\n        await this.openPopover();\n        await waitForNextPaint();\n        const allOptions = await this.optionList.getOptions();\n        const desiredOption = allOptions.find(option => option.value === value);\n        desiredOption?.click();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    _togglePopover() {\n        const { dropdownBtn } = this;\n        dropdownBtn?.click();\n        dropdownBtn?.focus();\n        dropdownBtn.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    determineOptionCount = () => {\n        const numberOfOptions = this.hostElement.querySelectorAll('q2-option').length;\n        this.optionCount = numberOfOptions;\n    };\n\n    filterSlottedElements = () => {\n        if (!('HTMLSlotElement' in window)) return;\n        const slot: HTMLSlotElement = this.hostElement.shadowRoot.querySelector('slot[name=\"decorator\"]');\n        const assignedElements = Array.from(slot?.assignedElements() || []);\n        if (!assignedElements.length) return;\n\n        const approvedElements = ['Q2-ICON', 'Q2-BADGE'];\n        assignedElements.forEach((element, index) => {\n            if (!approvedElements.includes(element.tagName) || index > 0) {\n                element.remove();\n            }\n        });\n    };\n\n    handleButtonFocusout = async (event: FocusEvent) => {\n        const relatedTarget = event.relatedTarget as HTMLElement;\n        if (this.popoverElement?.contains(relatedTarget)) return;\n        if (this.hostElement.contains(relatedTarget)) return;\n        this.open = false;\n    };\n\n    handleChange = event => {\n        event.stopPropagation();\n        if (!this.optionCount) return;\n        const { value } = event.detail;\n\n        this.click.emit({ value });\n    };\n\n    handleClick = async (event: MouseEvent) => {\n        event.stopPropagation();\n        this.popoverElement.controlElement = this.dropdownBtn;\n        if (shouldShowActionSheet(this)) {\n            const { value } = await showActionSheetList(this, event);\n            this.dropdownBtn.focus();\n            this.click.emit({ value });\n        } else {\n            await this.popoverElement.toggle();\n        }\n    };\n\n    handleKeydown = async (event: KeyboardEvent) => {\n        const isTabMetaOrCtrl = event.metaKey || event.ctrlKey || event.key === 'Tab';\n        if (isTabMetaOrCtrl) return;\n\n        event.preventDefault();\n        this.popoverElement.controlElement = this.dropdownBtn;\n        if (shouldShowActionSheet(this, event)) {\n            const { value } = await showActionSheetList(this, event);\n            this.dropdownBtn.focus();\n            this.click.emit({ value });\n        } else {\n            this.optionList.handleExternalKeydown(event);\n        }\n    };\n\n    handleWrapperClick = () => {\n        this.dropdownBtn.focus();\n        this.dropdownBtn.click();\n    };\n\n    initMutationObserver = () => {\n        if (!('MutationObserver' in window)) return;\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true, attributes: true });\n        this.mutationObserver = observer;\n    };\n\n    onClickElsewhere = (event: CustomEvent) => {\n        const target = event.target as HTMLClickElsewhereElement;\n        if (target.localName === 'click-elsewhere') {\n            event.stopPropagation();\n            const { popoverElement } = this;\n            if (!popoverElement) return;\n            popoverElement.open = false;\n        }\n    };\n\n    onMutationObserved = () => {\n        this.determineOptionCount();\n        this.filterSlottedElements();\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderHiddenElement() {\n        return (\n            <div\n                id=\"option-description\"\n                class=\"sr\"\n                aria-hidden=\"true\"\n            >\n                {loc('tecton.element.optionList.optionCount', [this.optionCount])}\n            </div>\n        );\n    }\n\n    render() {\n        const { open } = this;\n        const wrapperClassNames = ['tag'];\n        if (this.optionCount) wrapperClassNames.push('has-options');\n        const shouldShowOptions = this.optionCount > 0;\n\n        return (\n            <Host role={shouldShowOptions ? 'list' : undefined}>\n                <click-elsewhere onChange={this.onClickElsewhere}>\n                    {shouldShowOptions ? (\n                        <Fragment>\n                            <div\n                                class=\"btn-wrapper\"\n                                onClick={this.handleWrapperClick}\n                            >\n                                <button\n                                    class=\"tag-wrapper\"\n                                    ref={el => (this.dropdownBtn = el)}\n                                    test-id=\"btn-control\"\n                                    type=\"button\"\n                                    role=\"combobox\"\n                                    onClick={this.handleClick}\n                                    onKeyDown={this.handleKeydown}\n                                    onFocusout={this.handleButtonFocusout}\n                                    aria-controls=\"option-list\"\n                                    aria-expanded={open ? 'true' : 'false'}\n                                    aria-describedby=\"option-description\"\n                                >\n                                    <div class={wrapperClassNames.join(' ')}>{loc(this.label)}</div>\n                                    <q2-icon type=\"options\"></q2-icon>\n                                </button>\n                            </div>\n                            {this.renderHiddenElement()}\n                        </Fragment>\n                    ) : (\n                        <div\n                            class=\"tag-wrapper\"\n                            onClick={e => e.stopPropagation()}\n                        >\n                            <div class={wrapperClassNames.join(' ')}>\n                                <slot name=\"decorator\" />\n                                {loc(this.label)}\n                            </div>\n                        </div>\n                    )}\n\n                    {shouldShowOptions && (\n                        <q2-popover\n                            ref={el => (this.popoverElement = el)}\n                            controlElement={this.dropdownBtn}\n                            open={this.open}\n                            maxHeight={this.popoverMaxHeight}\n                            minHeight={this.popoverMinHeight}\n                            direction={this.popoverDirection}\n                            align={this.popoverAlignment}\n                        >\n                            <q2-option-list\n                                id=\"option-list\"\n                                ref={el => (this.optionList = el)}\n                                onChange={this.handleChange}\n                                type=\"menu\"\n                                align=\"right\"\n                                label={loc('tecton.element.optionList.label', [this.optionListLabel])}\n                                no-select\n                            >\n                                <slot />\n                            </q2-option-list>\n                        </q2-popover>\n                    )}\n                </click-elsewhere>\n            </Host>\n        );\n    }\n\n    // #endregion\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"q2-tag.entry.esm.js","sources":["src/components/q2-tag/q2-tag.scss?tag=q2-tag&encapsulation=shadow","src/components/q2-tag/q2-tag.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n    position: relative;\n    line-height: 0;\n}\n\n:host(:not(:last-child)) {\n    margin-inline-end: var-list(var-prefixer(tag-margin), --app-scale-2x, 10px);\n}\n\n.tag-wrapper {\n    --comp-tag-btn-size: #{var-list(var-prefixer(tag-btn-size), --app-scale-6x, 30px)};\n    --comp-tag-background: #{var-list(var-prefixer(tag-background), --t-gray-13, #e6e6e6)};\n    --comp-tag-color: #{var-list(var-prefixer(tag-color), --t-gray-3, #262626)};\n    --comp-tag-border-color: #{var-list(--tct-tag-border-color, transparent)};\n    background: var(--comp-tag-background);\n    color: var(--comp-tag-color);\n    border-radius: var-list(var-prefixer(tag-border-radius), --app-border-radius-1, 4px);\n    border-width: var-list(--tct-tag-border-width, 0);\n    border-style: var-list(--tct-tag-border-style, 0);\n    border-color: var(--comp-tag-border-color);\n    position: relative;\n\n    :host([theme='primary']) & {\n        --comp-tag-background: #{var-list(--tct-tag-primary-background, --t-primary, #0079c1)};\n        --comp-tag-color: #{var-list(--tct-tag-primary-font-color, --t-primary-text, #ffffff)};\n        --comp-tag-border-color: #{var-list(--tct-tag-primary-border-color, --t-primary, #0079c1)};\n    }\n\n    :host([theme='secondary']) & {\n        --comp-tag-background: #{var-list(--tct-tag-secondary-background, --t-secondary, #b3c2cc)};\n        --comp-tag-color: #{var-list(--tct-tag-secondary-font-color, --t-secondary-text, #141414)};\n        --comp-tag-border-color: #{var-list(--tct-tag-secondary-border-color, --t-secondary, #b3c2cc)};\n    }\n\n    :host([theme='tertiary']) & {\n        --comp-tag-background: #{var-list(--tct-tag-tertiary-background, --t-tertiary, #e8f5fc)};\n        --comp-tag-color: #{var-list(--tct-tag-tertiary-font-color, --t-tertiary-text, #141414)};\n        --comp-tag-border-color: #{var-list(--tct-tag-tertiary-border-color, --t-tertiary, #e8f5fc)};\n    }\n}\n\n.tag {\n    display: flex;\n    align-items: center;\n    width: max-content;\n    gap: 6px;\n    height: var-list(var-prefixer(tag-height), --app-scale-6x, 30px);\n    line-height: var-list(var-prefixer(tag-height), --app-scale-6x, 30px);\n    padding-inline: var-list(var-prefixer(tag-padding-inline), --app-scale-3x, 15px);\n\n    ::slotted(q2-icon[slot='decorator']) {\n        --tct-icon-size: 1em;\n    }\n\n    ::slotted(q2-badge[slot='decorator']) {\n        --tct-badge-height: 1em;\n        --tct-badge-line-height: 30px;\n    }\n}\n\n.tag.has-options {\n    padding-right: 6px;\n}\n\n.btn-wrapper {\n    --comp-tag-clickable-size: #{var-list(var-prefixer(tag-clickable-size), 44px)};\n    --comp-tag-btn-offset: calc(calc(calc(var(--comp-tag-clickable-size) - var(--comp-tag-btn-size)) / 2) * -1);\n    --comp-tag-background: #{var-list(var-prefixer(tag-background), --t-gray-13, #e6e6e6)};\n    height: var(--comp-tag-clickable-size);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    right: var(--comp-tag-btn-offset);\n    top: var(--comp-tag-btn-offset);\n    cursor: pointer;\n}\n\nbutton {\n    height: var(--comp-tag-btn-size);\n    stroke: var(--comp-tag-color);\n    --tct-icon-stroke-primary: var(--comp-tag-color);\n    cursor: pointer;\n    border: 0;\n    background: transparent;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    padding-right: 6px;\n    --tct-icon-size: 18px;\n}\n","import {\n    Component,\n    State,\n    Prop,\n    h,\n    ComponentInterface,\n    Host,\n    Listen,\n    Method,\n    Element,\n    EventEmitter,\n    Event,\n    Fragment,\n} from '@stencil/core';\nimport { isEventFromElement, loc, overrideFocus, waitForNextPaint } from 'src/utils';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\n\n/**\n * @slot decorator - An optional slot that supports either an [Icon](https://tecton.q2developer.com/design-system/q2-icon) or [Badge](https://tecton.q2developer.com/design-system/q2-badge) to be displayed with the tag content.\n * This is **not** available when using [Multiple Options](https://tecton.q2developer.com/design-system/q2-tag#multiple-options).\n */\n@Component({ tag: 'q2-tag', shadow: true, styleUrl: 'q2-tag.scss' })\nexport class Q2Tag implements ComponentInterface {\n    // #region Own Properties\n\n    dropdownBtn: HTMLButtonElement;\n    mutationObserver: MutationObserver;\n    optionList: HTMLQ2OptionListElement;\n    popoverElement: HTMLQ2PopoverElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    optionCount: number;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Instructs the component to use the action sheet workflow for displaying its options.\n     *\n     * For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).\n     */\n    @Prop()\n    hoist: boolean = !!window.Tecton?.useActionSheets;\n\n    /**\n     * The text that populates the label.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /**\n     * Determine whether the popover is open or closed.\n     *\n     * @readonly\n     */\n    @Prop({ reflect: true, mutable: true })\n    open: boolean;\n\n    /** Determines the label that is applied to the option list for accessibility purposes. */\n    @Prop()\n    optionListLabel: string = 'options';\n\n    /** Aligns the popover dropdown to the left or right side of the input field. */\n    @Prop({ mutable: true })\n    popoverAlignment: 'left' | 'right' = 'right';\n\n    /**\n     * Force the direction of the popover dropdown when it opens.\n     * If no value is passed, the component will auto-detect the direction based on available space.\n     */\n    @Prop()\n    popoverDirection: 'up' | 'down';\n\n    /**\n     * Force the maximum height of the popover. This value will be interpreted as pixels.\n     * If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.\n     */\n    @Prop()\n    popoverMaxHeight: number;\n\n    /** @deprecated */\n    @Prop()\n    popoverMinHeight: number;\n\n    /** The color of the element. */\n    @Prop({ reflect: true })\n    theme: 'primary' | 'secondary' | 'tertiary';\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when a provided option is clicked.\n     *\n     * Requires at least one option to be provided.\n     */\n    @Event()\n    click: EventEmitter<{ value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        this.initMutationObserver();\n        this.determineOptionCount();\n    }\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n        this.filterSlottedElements();\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        if (!this.optionCount) return;\n        this.dropdownBtn.focus();\n    }\n\n    @Listen('popoverStateChanged')\n    popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n        if (this.open !== open) this.open = open;\n        if (open) return;\n        this.optionList.setActiveElement(null);\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates clicking the tag to close the popover when options are provided and the popover is open.\n     * @testonly\n     */\n    @Method()\n    async closePopover() {\n        if (!this.optionCount || !this.open) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates clicking the tag to open the popover when options are provided and the popover is closed.\n     * @testonly\n     */\n    @Method()\n    async openPopover() {\n        if (!this.optionCount || this.open) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates selecting an option matching the passed value.\n     *\n     * If the popover is closed, this will open it before selecting the option.\n     *\n     * If there are not options, or the passed value does not match any option's value, this method does nothing.\n     * @testonly\n     */\n    @Method()\n    async selectOption(value) {\n        if (!this.optionCount) return;\n        await this.openPopover();\n        await waitForNextPaint();\n        const allOptions = await this.optionList.getOptions();\n        const desiredOption = allOptions.find(option => option.value === value);\n        desiredOption?.click();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    _togglePopover() {\n        const { dropdownBtn } = this;\n        dropdownBtn?.click();\n        dropdownBtn?.focus();\n        dropdownBtn.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    determineOptionCount = () => {\n        const numberOfOptions = this.hostElement.querySelectorAll('q2-option').length;\n        this.optionCount = numberOfOptions;\n    };\n\n    filterSlottedElements = () => {\n        if (!('HTMLSlotElement' in window)) return;\n        const slot: HTMLSlotElement = this.hostElement.shadowRoot.querySelector('slot[name=\"decorator\"]');\n        const assignedElements = Array.from(slot?.assignedElements() || []);\n        if (!assignedElements.length) return;\n\n        const approvedElements = ['Q2-ICON', 'Q2-BADGE'];\n        assignedElements.forEach((element, index) => {\n            if (!approvedElements.includes(element.tagName) || index > 0) {\n                element.remove();\n            }\n        });\n    };\n\n    handleButtonFocusout = async (event: FocusEvent) => {\n        const relatedTarget = event.relatedTarget as HTMLElement;\n        if (this.popoverElement?.contains(relatedTarget)) return;\n        if (this.hostElement.contains(relatedTarget)) return;\n        this.open = false;\n    };\n\n    handleChange = event => {\n        event.stopPropagation();\n        if (!this.optionCount) return;\n        const { value } = event.detail;\n\n        this.click.emit({ value });\n    };\n\n    handleClick = async (event: MouseEvent) => {\n        event.stopPropagation();\n        this.popoverElement.controlElement = this.dropdownBtn;\n        if (shouldShowActionSheet(this)) {\n            const { value } = await showActionSheetList(this, event);\n            this.dropdownBtn.focus();\n            this.click.emit({ value });\n        } else {\n            await this.popoverElement.toggle();\n        }\n    };\n\n    handleKeydown = async (event: KeyboardEvent) => {\n        const isTabMetaOrCtrl = event.metaKey || event.ctrlKey || event.key === 'Tab';\n        if (isTabMetaOrCtrl) return;\n\n        event.preventDefault();\n        this.popoverElement.controlElement = this.dropdownBtn;\n        if (shouldShowActionSheet(this, event)) {\n            const { value } = await showActionSheetList(this, event);\n            this.dropdownBtn.focus();\n            this.click.emit({ value });\n        } else {\n            this.optionList.handleExternalKeydown(event);\n        }\n    };\n\n    handleWrapperClick = () => {\n        this.dropdownBtn.focus();\n        this.dropdownBtn.click();\n    };\n\n    initMutationObserver = () => {\n        if (!('MutationObserver' in window)) return;\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true, attributes: true });\n        this.mutationObserver = observer;\n    };\n\n    onClickElsewhere = (event: CustomEvent) => {\n        const target = event.target as HTMLClickElsewhereElement;\n        if (target.localName === 'click-elsewhere') {\n            event.stopPropagation();\n            const { popoverElement } = this;\n            if (!popoverElement) return;\n            popoverElement.open = false;\n        }\n    };\n\n    onMutationObserved = () => {\n        this.determineOptionCount();\n        this.filterSlottedElements();\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderHiddenElement() {\n        return (\n            <div\n                id=\"option-description\"\n                class=\"sr\"\n                aria-hidden=\"true\"\n            >\n                {loc('tecton.element.optionList.optionCount', [this.optionCount])}\n            </div>\n        );\n    }\n\n    render() {\n        const { open } = this;\n        const wrapperClassNames = ['tag'];\n        if (this.optionCount) wrapperClassNames.push('has-options');\n        const shouldShowOptions = this.optionCount > 0;\n\n        return (\n            <Host role={shouldShowOptions ? 'list' : undefined}>\n                <click-elsewhere onChange={this.onClickElsewhere}>\n                    {shouldShowOptions ? (\n                        <Fragment>\n                            <div\n                                class=\"btn-wrapper\"\n                                onClick={this.handleWrapperClick}\n                            >\n                                <button\n                                    class=\"tag-wrapper\"\n                                    ref={el => (this.dropdownBtn = el)}\n                                    test-id=\"btn-control\"\n                                    type=\"button\"\n                                    role=\"combobox\"\n                                    onClick={this.handleClick}\n                                    onKeyDown={this.handleKeydown}\n                                    onFocusout={this.handleButtonFocusout}\n                                    aria-controls=\"option-list\"\n                                    aria-expanded={open ? 'true' : 'false'}\n                                    aria-describedby=\"option-description\"\n                                >\n                                    <div class={wrapperClassNames.join(' ')}>{loc(this.label)}</div>\n                                    <q2-icon type=\"options\"></q2-icon>\n                                </button>\n                            </div>\n                            {this.renderHiddenElement()}\n                        </Fragment>\n                    ) : (\n                        <div\n                            class=\"tag-wrapper\"\n                            onClick={e => e.stopPropagation()}\n                        >\n                            <div class={wrapperClassNames.join(' ')}>\n                                <slot name=\"decorator\" />\n                                {loc(this.label)}\n                            </div>\n                        </div>\n                    )}\n\n                    {shouldShowOptions && (\n                        <q2-popover\n                            ref={el => (this.popoverElement = el)}\n                            controlElement={this.dropdownBtn}\n                            open={this.open}\n                            maxHeight={this.popoverMaxHeight}\n                            minHeight={this.popoverMinHeight}\n                            direction={this.popoverDirection}\n                            align={this.popoverAlignment}\n                        >\n                            <q2-option-list\n                                id=\"option-list\"\n                                ref={el => (this.optionList = el)}\n                                onChange={this.handleChange}\n                                type=\"menu\"\n                                align=\"right\"\n                                label={loc('tecton.element.optionList.label', [this.optionListLabel])}\n                                no-select\n                            >\n                                <slot />\n                            </q2-option-list>\n                        </q2-popover>\n                    )}\n                </click-elsewhere>\n            </Host>\n        );\n    }\n\n    // #endregion\n}\n"],"names":[],"mappings":"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"}

package/dist/q2-tecton-elements/q2-tag.entry.js

@@ -1,23 +1,23 @@
-import { r as t, c as i, h as a, F as e, H as o, g as r } from "./index-COzomxjJ.js";
+import { r as t, c as i, h as r, F as a, H as o, g as e } from "./index-COzomxjJ.js";
 
-import { o as s, a as n, w as c, l as h } from "./index-CkXFIBxL.js";
+import { o as s, a as n, w as c, l } from "./index-CkXFIBxL.js";
 
-import { s as l, a as p } from "./action-sheet-D3xPdhm8.js";
+import { s as h, a as d } from "./action-sheet-D3xPdhm8.js";
 
-const d = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block;position:relative;line-height:0}:host(:not(:last-child)){margin-inline-end:var(--tct-tag-margin, var(--t-tag-margin, var(--app-scale-2x, 10px)))}.tag-wrapper{--comp-tag-btn-size:var(--tct-tag-btn-size, var(--t-tag-btn-size, var(--app-scale-6x, 30px)));--comp-tag-background:var(--tct-tag-background, var(--t-tag-background, var(--t-gray-13, #e6e6e6)));--comp-tag-color:var(--tct-tag-color, var(--t-tag-color, var(--t-gray-3, #262626)));background:var(--comp-tag-background);color:var(--comp-tag-color);border-radius:var(--tct-tag-border-radius, var(--t-tag-border-radius, var(--app-border-radius-1, 4px)));position:relative}:host([theme=primary]) .tag-wrapper{--comp-tag-background:var(--tct-tag-primary-background, var(--t-primary, #0079c1));--comp-tag-color:var(--tct-tag-primary-font-color, var(--t-primary-text, #ffffff))}:host([theme=secondary]) .tag-wrapper{--comp-tag-background:var(--tct-tag-secondary-background, var(--t-secondary, #b3c2cc));--comp-tag-color:var(--tct-tag-secondary-font-color, var(--t-secondary-text, #141414))}:host([theme=tertiary]) .tag-wrapper{--comp-tag-background:var(--tct-tag-tertiary-background, var(--t-tertiary, #e8f5fc));--comp-tag-color:var(--tct-tag-tertiary-font-color, var(--t-tertiary-text, #141414))}.tag{display:flex;align-items:center;width:max-content;gap:6px;height:var(--tct-tag-height, var(--t-tag-height, var(--app-scale-6x, 30px)));line-height:var(--tct-tag-height, var(--t-tag-height, var(--app-scale-6x, 30px)));padding-inline:var(--tct-tag-padding-inline, var(--t-tag-padding-inline, var(--app-scale-3x, 15px)))}.tag ::slotted(q2-icon[slot=decorator]){--tct-icon-size:1em}.tag ::slotted(q2-badge[slot=decorator]){--tct-badge-height:1em;--tct-badge-line-height:30px}.tag.has-options{padding-right:6px}.btn-wrapper{--comp-tag-clickable-size:var(--tct-tag-clickable-size, var(--t-tag-clickable-size, 44px));--comp-tag-btn-offset:calc(calc(calc(var(--comp-tag-clickable-size) - var(--comp-tag-btn-size)) / 2) * -1);--comp-tag-background:var(--tct-tag-background, var(--t-tag-background, var(--t-gray-13, #e6e6e6)));height:var(--comp-tag-clickable-size);display:flex;align-items:center;justify-content:center;position:relative;right:var(--comp-tag-btn-offset);top:var(--comp-tag-btn-offset);cursor:pointer}button{height:var(--comp-tag-btn-size);stroke:var(--comp-tag-color);--tct-icon-stroke-primary:var(--comp-tag-color);cursor:pointer;border:0;background:transparent;display:flex;align-items:center;justify-content:center;padding:0;padding-right:6px;--tct-icon-size:18px}";
+const p = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block;position:relative;line-height:0}:host(:not(:last-child)){margin-inline-end:var(--tct-tag-margin, var(--t-tag-margin, var(--app-scale-2x, 10px)))}.tag-wrapper{--comp-tag-btn-size:var(--tct-tag-btn-size, var(--t-tag-btn-size, var(--app-scale-6x, 30px)));--comp-tag-background:var(--tct-tag-background, var(--t-tag-background, var(--t-gray-13, #e6e6e6)));--comp-tag-color:var(--tct-tag-color, var(--t-tag-color, var(--t-gray-3, #262626)));--comp-tag-border-color:var(--tct-tag-border-color, transparent);background:var(--comp-tag-background);color:var(--comp-tag-color);border-radius:var(--tct-tag-border-radius, var(--t-tag-border-radius, var(--app-border-radius-1, 4px)));border-width:var(--tct-tag-border-width, 0);border-style:var(--tct-tag-border-style, 0);border-color:var(--comp-tag-border-color);position:relative}:host([theme=primary]) .tag-wrapper{--comp-tag-background:var(--tct-tag-primary-background, var(--t-primary, #0079c1));--comp-tag-color:var(--tct-tag-primary-font-color, var(--t-primary-text, #ffffff));--comp-tag-border-color:var(--tct-tag-primary-border-color, var(--t-primary, #0079c1))}:host([theme=secondary]) .tag-wrapper{--comp-tag-background:var(--tct-tag-secondary-background, var(--t-secondary, #b3c2cc));--comp-tag-color:var(--tct-tag-secondary-font-color, var(--t-secondary-text, #141414));--comp-tag-border-color:var(--tct-tag-secondary-border-color, var(--t-secondary, #b3c2cc))}:host([theme=tertiary]) .tag-wrapper{--comp-tag-background:var(--tct-tag-tertiary-background, var(--t-tertiary, #e8f5fc));--comp-tag-color:var(--tct-tag-tertiary-font-color, var(--t-tertiary-text, #141414));--comp-tag-border-color:var(--tct-tag-tertiary-border-color, var(--t-tertiary, #e8f5fc))}.tag{display:flex;align-items:center;width:max-content;gap:6px;height:var(--tct-tag-height, var(--t-tag-height, var(--app-scale-6x, 30px)));line-height:var(--tct-tag-height, var(--t-tag-height, var(--app-scale-6x, 30px)));padding-inline:var(--tct-tag-padding-inline, var(--t-tag-padding-inline, var(--app-scale-3x, 15px)))}.tag ::slotted(q2-icon[slot=decorator]){--tct-icon-size:1em}.tag ::slotted(q2-badge[slot=decorator]){--tct-badge-height:1em;--tct-badge-line-height:30px}.tag.has-options{padding-right:6px}.btn-wrapper{--comp-tag-clickable-size:var(--tct-tag-clickable-size, var(--t-tag-clickable-size, 44px));--comp-tag-btn-offset:calc(calc(calc(var(--comp-tag-clickable-size) - var(--comp-tag-btn-size)) / 2) * -1);--comp-tag-background:var(--tct-tag-background, var(--t-tag-background, var(--t-gray-13, #e6e6e6)));height:var(--comp-tag-clickable-size);display:flex;align-items:center;justify-content:center;position:relative;right:var(--comp-tag-btn-offset);top:var(--comp-tag-btn-offset);cursor:pointer}button{height:var(--comp-tag-btn-size);stroke:var(--comp-tag-color);--tct-icon-stroke-primary:var(--comp-tag-color);cursor:pointer;border:0;background:transparent;display:flex;align-items:center;justify-content:center;padding:0;padding-right:6px;--tct-icon-size:18px}";
 
 const g = class {
-  constructor(a) {
-    t(this, a);
+  constructor(r) {
+    t(this, r);
     this.click = i(this, "click", 7);
-    var e;
+    var a;
     // #endregion
     // #region Public Property API
     /**
          * Instructs the component to use the action sheet workflow for displaying its options.
          *
          * For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).
-         */    this.hoist = !!((e = window.Tecton) === null || e === void 0 ? void 0 : e.useActionSheets);
+         */    this.hoist = !!((a = window.Tecton) === null || a === void 0 ? void 0 : a.useActionSheets);
     /** Determines the label that is applied to the option list for accessibility purposes. */    this.optionListLabel = "options";
     /** Aligns the popover dropdown to the left or right side of the input field. */    this.popoverAlignment = "right";
     this.determineOptionCount = () => {
@@ -29,18 +29,18 @@ const g = class {
       const t = this.hostElement.shadowRoot.querySelector('slot[name="decorator"]');
       const i = Array.from((t === null || t === void 0 ? void 0 : t.assignedElements()) || []);
       if (!i.length) return;
-      const a = [ "Q2-ICON", "Q2-BADGE" ];
+      const r = [ "Q2-ICON", "Q2-BADGE" ];
       i.forEach(((t, i) => {
-        if (!a.includes(t.tagName) || i > 0) {
+        if (!r.includes(t.tagName) || i > 0) {
           t.remove();
         }
       }));
     };
     this.handleButtonFocusout = async t => {
       var i;
-      const a = t.relatedTarget;
-      if ((i = this.popoverElement) === null || i === void 0 ? void 0 : i.contains(a)) return;
-      if (this.hostElement.contains(a)) return;
+      const r = t.relatedTarget;
+      if ((i = this.popoverElement) === null || i === void 0 ? void 0 : i.contains(r)) return;
+      if (this.hostElement.contains(r)) return;
       this.open = false;
     };
     this.handleChange = t => {
@@ -54,8 +54,8 @@ const g = class {
     this.handleClick = async t => {
       t.stopPropagation();
       this.popoverElement.controlElement = this.dropdownBtn;
-      if (l(this)) {
-        const {value: i} = await p(this, t);
+      if (h(this)) {
+        const {value: i} = await d(this, t);
         this.dropdownBtn.focus();
         this.click.emit({
           value: i
@@ -69,8 +69,8 @@ const g = class {
       if (i) return;
       t.preventDefault();
       this.popoverElement.controlElement = this.dropdownBtn;
-      if (l(this, t)) {
-        const {value: i} = await p(this, t);
+      if (h(this, t)) {
+        const {value: i} = await d(this, t);
         this.dropdownBtn.focus();
         this.click.emit({
           value: i
@@ -162,8 +162,8 @@ const g = class {
     await this.openPopover();
     await c();
     const i = await this.optionList.getOptions();
-    const a = i.find((i => i.value === t));
-    a === null || a === void 0 ? void 0 : a.click();
+    const r = i.find((i => i.value === t));
+    r === null || r === void 0 ? void 0 : r.click();
   }
   // #endregion
   // #region Local Methods
@@ -176,27 +176,27 @@ const g = class {
   // #endregion
   // #region Render Methods
   renderHiddenElement() {
-    return a("div", {
+    return r("div", {
       id: "option-description",
       class: "sr",
       "aria-hidden": "true"
-    }, h("tecton.element.optionList.optionCount", [ this.optionCount ]));
+    }, l("tecton.element.optionList.optionCount", [ this.optionCount ]));
   }
   render() {
     const {open: t} = this;
     const i = [ "tag" ];
     if (this.optionCount) i.push("has-options");
-    const r = this.optionCount > 0;
-    return a(o, {
+    const e = this.optionCount > 0;
+    return r(o, {
       key: "f15bfbf7ad5e796ac5536e511f8d307ee4106969",
-      role: r ? "list" : undefined
-    }, a("click-elsewhere", {
+      role: e ? "list" : undefined
+    }, r("click-elsewhere", {
       key: "240720775620018275d9c1619e594c900e669a83",
       onChange: this.onClickElsewhere
-    }, r ? a(e, null, a("div", {
+    }, e ? r(a, null, r("div", {
       class: "btn-wrapper",
       onClick: this.handleWrapperClick
-    }, a("button", {
+    }, r("button", {
       class: "tag-wrapper",
       ref: t => this.dropdownBtn = t,
       "test-id": "btn-control",
@@ -208,18 +208,18 @@ const g = class {
       "aria-controls": "option-list",
       "aria-expanded": t ? "true" : "false",
       "aria-describedby": "option-description"
-    }, a("div", {
+    }, r("div", {
       class: i.join(" ")
-    }, h(this.label)), a("q2-icon", {
+    }, l(this.label)), r("q2-icon", {
       type: "options"
-    }))), this.renderHiddenElement()) : a("div", {
+    }))), this.renderHiddenElement()) : r("div", {
       class: "tag-wrapper",
       onClick: t => t.stopPropagation()
-    }, a("div", {
+    }, r("div", {
       class: i.join(" ")
-    }, a("slot", {
+    }, r("slot", {
       name: "decorator"
-    }), h(this.label))), r && a("q2-popover", {
+    }), l(this.label))), e && r("q2-popover", {
       key: "918aeea0b8c3d1b129810c6e2f3a3151f5285b89",
       ref: t => this.popoverElement = t,
       controlElement: this.dropdownBtn,
@@ -228,25 +228,25 @@ const g = class {
       minHeight: this.popoverMinHeight,
       direction: this.popoverDirection,
       align: this.popoverAlignment
-    }, a("q2-option-list", {
+    }, r("q2-option-list", {
       key: "d8a791a50c43d8b802cc143d53d77c32756ef02e",
       id: "option-list",
       ref: t => this.optionList = t,
       onChange: this.handleChange,
       type: "menu",
       align: "right",
-      label: h("tecton.element.optionList.label", [ this.optionListLabel ]),
+      label: l("tecton.element.optionList.label", [ this.optionListLabel ]),
       "no-select": true
-    }, a("slot", {
+    }, r("slot", {
       key: "8fbd11544c0a91966e5b30031d34ff2cd3caf232"
     })))));
   }
   get hostElement() {
-    return r(this);
+    return e(this);
   }
 };
 
-g.style = d;
+g.style = p;
 
 export { g as q2_tag };
 //# sourceMappingURL=q2-tag.entry.esm.js.map

package/dist/q2-tecton-elements/q2-tag.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["q2TagCss","Q2Tag","constructor","hostRef","this","hoist","_a","window","Tecton","useActionSheets","optionListLabel","popoverAlignment","determineOptionCount","numberOfOptions","hostElement","querySelectorAll","length","optionCount","filterSlottedElements","slot","shadowRoot","querySelector","assignedElements","Array","from","approvedElements","forEach","element","index","includes","tagName","remove","handleButtonFocusout","async","event","relatedTarget","popoverElement","contains","open","handleChange","stopPropagation","value","detail","click","emit","handleClick","controlElement","dropdownBtn","shouldShowActionSheet","showActionSheetList","focus","toggle","handleKeydown","isTabMetaOrCtrl","metaKey","ctrlKey","key","preventDefault","optionList","handleExternalKeydown","handleWrapperClick","initMutationObserver","observer","MutationObserver","onMutationObserved","observe","childList","attributes","mutationObserver","onClickElsewhere","target","localName","disconnectedCallback","disconnect","componentWillLoad","componentDidLoad","overrideFocus","delegateFocus","isEventFromElement","popoverStateHandler","setActiveElement","closePopover","_togglePopover","openPopover","selectOption","waitForNextPaint","allOptions","getOptions","desiredOption","find","option","dispatchEvent","FocusEvent","renderHiddenElement","h","id","class","loc","render","wrapperClassNames","push","shouldShowOptions","Host","role","undefined","onChange","Fragment","onClick","ref","el","type","onKeyDown","onFocusout","join","label","e","name","maxHeight","popoverMaxHeight","minHeight","popoverMinHeight","direction","popoverDirection","align"],"sources":["src/components/q2-tag/q2-tag.scss?tag=q2-tag&encapsulation=shadow","src/components/q2-tag/q2-tag.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n    position: relative;\n    line-height: 0;\n}\n\n:host(:not(:last-child)) {\n    margin-inline-end: var-list(var-prefixer(tag-margin), --app-scale-2x, 10px);\n}\n\n.tag-wrapper {\n    --comp-tag-btn-size: #{var-list(var-prefixer(tag-btn-size), --app-scale-6x, 30px)};\n    --comp-tag-background: #{var-list(var-prefixer(tag-background), --t-gray-13, #e6e6e6)};\n    --comp-tag-color: #{var-list(var-prefixer(tag-color), --t-gray-3, #262626)};\n    background: var(--comp-tag-background);\n    color: var(--comp-tag-color);\n    border-radius: var-list(var-prefixer(tag-border-radius), --app-border-radius-1, 4px);\n    position: relative;\n\n    :host([theme='primary']) & {\n        --comp-tag-background: #{var-list(--tct-tag-primary-background, --t-primary, #0079c1)};\n        --comp-tag-color: #{var-list(--tct-tag-primary-font-color, --t-primary-text, #ffffff)};\n    }\n\n    :host([theme='secondary']) & {\n        --comp-tag-background: #{var-list(--tct-tag-secondary-background, --t-secondary, #b3c2cc)};\n        --comp-tag-color: #{var-list(--tct-tag-secondary-font-color, --t-secondary-text, #141414)};\n    }\n\n    :host([theme='tertiary']) & {\n        --comp-tag-background: #{var-list(--tct-tag-tertiary-background, --t-tertiary, #e8f5fc)};\n        --comp-tag-color: #{var-list(--tct-tag-tertiary-font-color, --t-tertiary-text, #141414)};\n    }\n}\n\n.tag {\n    display: flex;\n    align-items: center;\n    width: max-content;\n    gap: 6px;\n    height: var-list(var-prefixer(tag-height), --app-scale-6x, 30px);\n    line-height: var-list(var-prefixer(tag-height), --app-scale-6x, 30px);\n    padding-inline: var-list(var-prefixer(tag-padding-inline), --app-scale-3x, 15px);\n\n    ::slotted(q2-icon[slot='decorator']) {\n        --tct-icon-size: 1em;\n    }\n\n    ::slotted(q2-badge[slot='decorator']) {\n        --tct-badge-height: 1em;\n        --tct-badge-line-height: 30px;\n    }\n}\n\n.tag.has-options {\n    padding-right: 6px;\n}\n\n.btn-wrapper {\n    --comp-tag-clickable-size: #{var-list(var-prefixer(tag-clickable-size), 44px)};\n    --comp-tag-btn-offset: calc(calc(calc(var(--comp-tag-clickable-size) - var(--comp-tag-btn-size)) / 2) * -1);\n    --comp-tag-background: #{var-list(var-prefixer(tag-background), --t-gray-13, #e6e6e6)};\n    height: var(--comp-tag-clickable-size);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    right: var(--comp-tag-btn-offset);\n    top: var(--comp-tag-btn-offset);\n    cursor: pointer;\n}\n\nbutton {\n    height: var(--comp-tag-btn-size);\n    stroke: var(--comp-tag-color);\n    --tct-icon-stroke-primary: var(--comp-tag-color);\n    cursor: pointer;\n    border: 0;\n    background: transparent;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    padding-right: 6px;\n    --tct-icon-size: 18px;\n}\n","import {\n    Component,\n    State,\n    Prop,\n    h,\n    ComponentInterface,\n    Host,\n    Listen,\n    Method,\n    Element,\n    EventEmitter,\n    Event,\n    Fragment,\n} from '@stencil/core';\nimport { isEventFromElement, loc, overrideFocus, waitForNextPaint } from 'src/utils';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\n\n/**\n * @slot decorator - An optional slot that supports either an [Icon](https://tecton.q2developer.com/design-system/q2-icon) or [Badge](https://tecton.q2developer.com/design-system/q2-badge) to be displayed with the tag content.\n * This is **not** available when using [Multiple Options](https://tecton.q2developer.com/design-system/q2-tag#multiple-options).\n */\n@Component({ tag: 'q2-tag', shadow: true, styleUrl: 'q2-tag.scss' })\nexport class Q2Tag implements ComponentInterface {\n    // #region Own Properties\n\n    dropdownBtn: HTMLButtonElement;\n    mutationObserver: MutationObserver;\n    optionList: HTMLQ2OptionListElement;\n    popoverElement: HTMLQ2PopoverElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    optionCount: number;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Instructs the component to use the action sheet workflow for displaying its options.\n     *\n     * For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).\n     */\n    @Prop()\n    hoist: boolean = !!window.Tecton?.useActionSheets;\n\n    /**\n     * The text that populates the label.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /**\n     * Determine whether the popover is open or closed.\n     *\n     * @readonly\n     */\n    @Prop({ reflect: true, mutable: true })\n    open: boolean;\n\n    /** Determines the label that is applied to the option list for accessibility purposes. */\n    @Prop()\n    optionListLabel: string = 'options';\n\n    /** Aligns the popover dropdown to the left or right side of the input field. */\n    @Prop({ mutable: true })\n    popoverAlignment: 'left' | 'right' = 'right';\n\n    /**\n     * Force the direction of the popover dropdown when it opens.\n     * If no value is passed, the component will auto-detect the direction based on available space.\n     */\n    @Prop()\n    popoverDirection: 'up' | 'down';\n\n    /**\n     * Force the maximum height of the popover. This value will be interpreted as pixels.\n     * If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.\n     */\n    @Prop()\n    popoverMaxHeight: number;\n\n    /** @deprecated */\n    @Prop()\n    popoverMinHeight: number;\n\n    /** The color of the element. */\n    @Prop({ reflect: true })\n    theme: 'primary' | 'secondary' | 'tertiary';\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when a provided option is clicked.\n     *\n     * Requires at least one option to be provided.\n     */\n    @Event()\n    click: EventEmitter<{ value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        this.initMutationObserver();\n        this.determineOptionCount();\n    }\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n        this.filterSlottedElements();\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        if (!this.optionCount) return;\n        this.dropdownBtn.focus();\n    }\n\n    @Listen('popoverStateChanged')\n    popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n        if (this.open !== open) this.open = open;\n        if (open) return;\n        this.optionList.setActiveElement(null);\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates clicking the tag to close the popover when options are provided and the popover is open.\n     * @testonly\n     */\n    @Method()\n    async closePopover() {\n        if (!this.optionCount || !this.open) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates clicking the tag to open the popover when options are provided and the popover is closed.\n     * @testonly\n     */\n    @Method()\n    async openPopover() {\n        if (!this.optionCount || this.open) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates selecting an option matching the passed value.\n     *\n     * If the popover is closed, this will open it before selecting the option.\n     *\n     * If there are not options, or the passed value does not match any option's value, this method does nothing.\n     * @testonly\n     */\n    @Method()\n    async selectOption(value) {\n        if (!this.optionCount) return;\n        await this.openPopover();\n        await waitForNextPaint();\n        const allOptions = await this.optionList.getOptions();\n        const desiredOption = allOptions.find(option => option.value === value);\n        desiredOption?.click();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    _togglePopover() {\n        const { dropdownBtn } = this;\n        dropdownBtn?.click();\n        dropdownBtn?.focus();\n        dropdownBtn.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    determineOptionCount = () => {\n        const numberOfOptions = this.hostElement.querySelectorAll('q2-option').length;\n        this.optionCount = numberOfOptions;\n    };\n\n    filterSlottedElements = () => {\n        if (!('HTMLSlotElement' in window)) return;\n        const slot: HTMLSlotElement = this.hostElement.shadowRoot.querySelector('slot[name=\"decorator\"]');\n        const assignedElements = Array.from(slot?.assignedElements() || []);\n        if (!assignedElements.length) return;\n\n        const approvedElements = ['Q2-ICON', 'Q2-BADGE'];\n        assignedElements.forEach((element, index) => {\n            if (!approvedElements.includes(element.tagName) || index > 0) {\n                element.remove();\n            }\n        });\n    };\n\n    handleButtonFocusout = async (event: FocusEvent) => {\n        const relatedTarget = event.relatedTarget as HTMLElement;\n        if (this.popoverElement?.contains(relatedTarget)) return;\n        if (this.hostElement.contains(relatedTarget)) return;\n        this.open = false;\n    };\n\n    handleChange = event => {\n        event.stopPropagation();\n        if (!this.optionCount) return;\n        const { value } = event.detail;\n\n        this.click.emit({ value });\n    };\n\n    handleClick = async (event: MouseEvent) => {\n        event.stopPropagation();\n        this.popoverElement.controlElement = this.dropdownBtn;\n        if (shouldShowActionSheet(this)) {\n            const { value } = await showActionSheetList(this, event);\n            this.dropdownBtn.focus();\n            this.click.emit({ value });\n        } else {\n            await this.popoverElement.toggle();\n        }\n    };\n\n    handleKeydown = async (event: KeyboardEvent) => {\n        const isTabMetaOrCtrl = event.metaKey || event.ctrlKey || event.key === 'Tab';\n        if (isTabMetaOrCtrl) return;\n\n        event.preventDefault();\n        this.popoverElement.controlElement = this.dropdownBtn;\n        if (shouldShowActionSheet(this, event)) {\n            const { value } = await showActionSheetList(this, event);\n            this.dropdownBtn.focus();\n            this.click.emit({ value });\n        } else {\n            this.optionList.handleExternalKeydown(event);\n        }\n    };\n\n    handleWrapperClick = () => {\n        this.dropdownBtn.focus();\n        this.dropdownBtn.click();\n    };\n\n    initMutationObserver = () => {\n        if (!('MutationObserver' in window)) return;\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true, attributes: true });\n        this.mutationObserver = observer;\n    };\n\n    onClickElsewhere = (event: CustomEvent) => {\n        const target = event.target as HTMLClickElsewhereElement;\n        if (target.localName === 'click-elsewhere') {\n            event.stopPropagation();\n            const { popoverElement } = this;\n            if (!popoverElement) return;\n            popoverElement.open = false;\n        }\n    };\n\n    onMutationObserved = () => {\n        this.determineOptionCount();\n        this.filterSlottedElements();\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderHiddenElement() {\n        return (\n            <div\n                id=\"option-description\"\n                class=\"sr\"\n                aria-hidden=\"true\"\n            >\n                {loc('tecton.element.optionList.optionCount', [this.optionCount])}\n            </div>\n        );\n    }\n\n    render() {\n        const { open } = this;\n        const wrapperClassNames = ['tag'];\n        if (this.optionCount) wrapperClassNames.push('has-options');\n        const shouldShowOptions = this.optionCount > 0;\n\n        return (\n            <Host role={shouldShowOptions ? 'list' : undefined}>\n                <click-elsewhere onChange={this.onClickElsewhere}>\n                    {shouldShowOptions ? (\n                        <Fragment>\n                            <div\n                                class=\"btn-wrapper\"\n                                onClick={this.handleWrapperClick}\n                            >\n                                <button\n                                    class=\"tag-wrapper\"\n                                    ref={el => (this.dropdownBtn = el)}\n                                    test-id=\"btn-control\"\n                                    type=\"button\"\n                                    role=\"combobox\"\n                                    onClick={this.handleClick}\n                                    onKeyDown={this.handleKeydown}\n                                    onFocusout={this.handleButtonFocusout}\n                                    aria-controls=\"option-list\"\n                                    aria-expanded={open ? 'true' : 'false'}\n                                    aria-describedby=\"option-description\"\n                                >\n                                    <div class={wrapperClassNames.join(' ')}>{loc(this.label)}</div>\n                                    <q2-icon type=\"options\"></q2-icon>\n                                </button>\n                            </div>\n                            {this.renderHiddenElement()}\n                        </Fragment>\n                    ) : (\n                        <div\n                            class=\"tag-wrapper\"\n                            onClick={e => e.stopPropagation()}\n                        >\n                            <div class={wrapperClassNames.join(' ')}>\n                                <slot name=\"decorator\" />\n                                {loc(this.label)}\n                            </div>\n                        </div>\n                    )}\n\n                    {shouldShowOptions && (\n                        <q2-popover\n                            ref={el => (this.popoverElement = el)}\n                            controlElement={this.dropdownBtn}\n                            open={this.open}\n                            maxHeight={this.popoverMaxHeight}\n                            minHeight={this.popoverMinHeight}\n                            direction={this.popoverDirection}\n                            align={this.popoverAlignment}\n                        >\n                            <q2-option-list\n                                id=\"option-list\"\n                                ref={el => (this.optionList = el)}\n                                onChange={this.handleChange}\n                                type=\"menu\"\n                                align=\"right\"\n                                label={loc('tecton.element.optionList.label', [this.optionListLabel])}\n                                no-select\n                            >\n                                <slot />\n                            </q2-option-list>\n                        </q2-popover>\n                    )}\n                </click-elsewhere>\n            </Host>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["q2TagCss","Q2Tag","constructor","hostRef","this","hoist","_a","window","Tecton","useActionSheets","optionListLabel","popoverAlignment","determineOptionCount","numberOfOptions","hostElement","querySelectorAll","length","optionCount","filterSlottedElements","slot","shadowRoot","querySelector","assignedElements","Array","from","approvedElements","forEach","element","index","includes","tagName","remove","handleButtonFocusout","async","event","relatedTarget","popoverElement","contains","open","handleChange","stopPropagation","value","detail","click","emit","handleClick","controlElement","dropdownBtn","shouldShowActionSheet","showActionSheetList","focus","toggle","handleKeydown","isTabMetaOrCtrl","metaKey","ctrlKey","key","preventDefault","optionList","handleExternalKeydown","handleWrapperClick","initMutationObserver","observer","MutationObserver","onMutationObserved","observe","childList","attributes","mutationObserver","onClickElsewhere","target","localName","disconnectedCallback","disconnect","componentWillLoad","componentDidLoad","overrideFocus","delegateFocus","isEventFromElement","popoverStateHandler","setActiveElement","closePopover","_togglePopover","openPopover","selectOption","waitForNextPaint","allOptions","getOptions","desiredOption","find","option","dispatchEvent","FocusEvent","renderHiddenElement","h","id","class","loc","render","wrapperClassNames","push","shouldShowOptions","Host","role","undefined","onChange","Fragment","onClick","ref","el","type","onKeyDown","onFocusout","join","label","e","name","maxHeight","popoverMaxHeight","minHeight","popoverMinHeight","direction","popoverDirection","align"],"sources":["src/components/q2-tag/q2-tag.scss?tag=q2-tag&encapsulation=shadow","src/components/q2-tag/q2-tag.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n    position: relative;\n    line-height: 0;\n}\n\n:host(:not(:last-child)) {\n    margin-inline-end: var-list(var-prefixer(tag-margin), --app-scale-2x, 10px);\n}\n\n.tag-wrapper {\n    --comp-tag-btn-size: #{var-list(var-prefixer(tag-btn-size), --app-scale-6x, 30px)};\n    --comp-tag-background: #{var-list(var-prefixer(tag-background), --t-gray-13, #e6e6e6)};\n    --comp-tag-color: #{var-list(var-prefixer(tag-color), --t-gray-3, #262626)};\n    --comp-tag-border-color: #{var-list(--tct-tag-border-color, transparent)};\n    background: var(--comp-tag-background);\n    color: var(--comp-tag-color);\n    border-radius: var-list(var-prefixer(tag-border-radius), --app-border-radius-1, 4px);\n    border-width: var-list(--tct-tag-border-width, 0);\n    border-style: var-list(--tct-tag-border-style, 0);\n    border-color: var(--comp-tag-border-color);\n    position: relative;\n\n    :host([theme='primary']) & {\n        --comp-tag-background: #{var-list(--tct-tag-primary-background, --t-primary, #0079c1)};\n        --comp-tag-color: #{var-list(--tct-tag-primary-font-color, --t-primary-text, #ffffff)};\n        --comp-tag-border-color: #{var-list(--tct-tag-primary-border-color, --t-primary, #0079c1)};\n    }\n\n    :host([theme='secondary']) & {\n        --comp-tag-background: #{var-list(--tct-tag-secondary-background, --t-secondary, #b3c2cc)};\n        --comp-tag-color: #{var-list(--tct-tag-secondary-font-color, --t-secondary-text, #141414)};\n        --comp-tag-border-color: #{var-list(--tct-tag-secondary-border-color, --t-secondary, #b3c2cc)};\n    }\n\n    :host([theme='tertiary']) & {\n        --comp-tag-background: #{var-list(--tct-tag-tertiary-background, --t-tertiary, #e8f5fc)};\n        --comp-tag-color: #{var-list(--tct-tag-tertiary-font-color, --t-tertiary-text, #141414)};\n        --comp-tag-border-color: #{var-list(--tct-tag-tertiary-border-color, --t-tertiary, #e8f5fc)};\n    }\n}\n\n.tag {\n    display: flex;\n    align-items: center;\n    width: max-content;\n    gap: 6px;\n    height: var-list(var-prefixer(tag-height), --app-scale-6x, 30px);\n    line-height: var-list(var-prefixer(tag-height), --app-scale-6x, 30px);\n    padding-inline: var-list(var-prefixer(tag-padding-inline), --app-scale-3x, 15px);\n\n    ::slotted(q2-icon[slot='decorator']) {\n        --tct-icon-size: 1em;\n    }\n\n    ::slotted(q2-badge[slot='decorator']) {\n        --tct-badge-height: 1em;\n        --tct-badge-line-height: 30px;\n    }\n}\n\n.tag.has-options {\n    padding-right: 6px;\n}\n\n.btn-wrapper {\n    --comp-tag-clickable-size: #{var-list(var-prefixer(tag-clickable-size), 44px)};\n    --comp-tag-btn-offset: calc(calc(calc(var(--comp-tag-clickable-size) - var(--comp-tag-btn-size)) / 2) * -1);\n    --comp-tag-background: #{var-list(var-prefixer(tag-background), --t-gray-13, #e6e6e6)};\n    height: var(--comp-tag-clickable-size);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    right: var(--comp-tag-btn-offset);\n    top: var(--comp-tag-btn-offset);\n    cursor: pointer;\n}\n\nbutton {\n    height: var(--comp-tag-btn-size);\n    stroke: var(--comp-tag-color);\n    --tct-icon-stroke-primary: var(--comp-tag-color);\n    cursor: pointer;\n    border: 0;\n    background: transparent;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    padding-right: 6px;\n    --tct-icon-size: 18px;\n}\n","import {\n    Component,\n    State,\n    Prop,\n    h,\n    ComponentInterface,\n    Host,\n    Listen,\n    Method,\n    Element,\n    EventEmitter,\n    Event,\n    Fragment,\n} from '@stencil/core';\nimport { isEventFromElement, loc, overrideFocus, waitForNextPaint } from 'src/utils';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\n\n/**\n * @slot decorator - An optional slot that supports either an [Icon](https://tecton.q2developer.com/design-system/q2-icon) or [Badge](https://tecton.q2developer.com/design-system/q2-badge) to be displayed with the tag content.\n * This is **not** available when using [Multiple Options](https://tecton.q2developer.com/design-system/q2-tag#multiple-options).\n */\n@Component({ tag: 'q2-tag', shadow: true, styleUrl: 'q2-tag.scss' })\nexport class Q2Tag implements ComponentInterface {\n    // #region Own Properties\n\n    dropdownBtn: HTMLButtonElement;\n    mutationObserver: MutationObserver;\n    optionList: HTMLQ2OptionListElement;\n    popoverElement: HTMLQ2PopoverElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    optionCount: number;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Instructs the component to use the action sheet workflow for displaying its options.\n     *\n     * For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).\n     */\n    @Prop()\n    hoist: boolean = !!window.Tecton?.useActionSheets;\n\n    /**\n     * The text that populates the label.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /**\n     * Determine whether the popover is open or closed.\n     *\n     * @readonly\n     */\n    @Prop({ reflect: true, mutable: true })\n    open: boolean;\n\n    /** Determines the label that is applied to the option list for accessibility purposes. */\n    @Prop()\n    optionListLabel: string = 'options';\n\n    /** Aligns the popover dropdown to the left or right side of the input field. */\n    @Prop({ mutable: true })\n    popoverAlignment: 'left' | 'right' = 'right';\n\n    /**\n     * Force the direction of the popover dropdown when it opens.\n     * If no value is passed, the component will auto-detect the direction based on available space.\n     */\n    @Prop()\n    popoverDirection: 'up' | 'down';\n\n    /**\n     * Force the maximum height of the popover. This value will be interpreted as pixels.\n     * If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.\n     */\n    @Prop()\n    popoverMaxHeight: number;\n\n    /** @deprecated */\n    @Prop()\n    popoverMinHeight: number;\n\n    /** The color of the element. */\n    @Prop({ reflect: true })\n    theme: 'primary' | 'secondary' | 'tertiary';\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when a provided option is clicked.\n     *\n     * Requires at least one option to be provided.\n     */\n    @Event()\n    click: EventEmitter<{ value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        this.initMutationObserver();\n        this.determineOptionCount();\n    }\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n        this.filterSlottedElements();\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        if (!this.optionCount) return;\n        this.dropdownBtn.focus();\n    }\n\n    @Listen('popoverStateChanged')\n    popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n        if (this.open !== open) this.open = open;\n        if (open) return;\n        this.optionList.setActiveElement(null);\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates clicking the tag to close the popover when options are provided and the popover is open.\n     * @testonly\n     */\n    @Method()\n    async closePopover() {\n        if (!this.optionCount || !this.open) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates clicking the tag to open the popover when options are provided and the popover is closed.\n     * @testonly\n     */\n    @Method()\n    async openPopover() {\n        if (!this.optionCount || this.open) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates selecting an option matching the passed value.\n     *\n     * If the popover is closed, this will open it before selecting the option.\n     *\n     * If there are not options, or the passed value does not match any option's value, this method does nothing.\n     * @testonly\n     */\n    @Method()\n    async selectOption(value) {\n        if (!this.optionCount) return;\n        await this.openPopover();\n        await waitForNextPaint();\n        const allOptions = await this.optionList.getOptions();\n        const desiredOption = allOptions.find(option => option.value === value);\n        desiredOption?.click();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    _togglePopover() {\n        const { dropdownBtn } = this;\n        dropdownBtn?.click();\n        dropdownBtn?.focus();\n        dropdownBtn.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    determineOptionCount = () => {\n        const numberOfOptions = this.hostElement.querySelectorAll('q2-option').length;\n        this.optionCount = numberOfOptions;\n    };\n\n    filterSlottedElements = () => {\n        if (!('HTMLSlotElement' in window)) return;\n        const slot: HTMLSlotElement = this.hostElement.shadowRoot.querySelector('slot[name=\"decorator\"]');\n        const assignedElements = Array.from(slot?.assignedElements() || []);\n        if (!assignedElements.length) return;\n\n        const approvedElements = ['Q2-ICON', 'Q2-BADGE'];\n        assignedElements.forEach((element, index) => {\n            if (!approvedElements.includes(element.tagName) || index > 0) {\n                element.remove();\n            }\n        });\n    };\n\n    handleButtonFocusout = async (event: FocusEvent) => {\n        const relatedTarget = event.relatedTarget as HTMLElement;\n        if (this.popoverElement?.contains(relatedTarget)) return;\n        if (this.hostElement.contains(relatedTarget)) return;\n        this.open = false;\n    };\n\n    handleChange = event => {\n        event.stopPropagation();\n        if (!this.optionCount) return;\n        const { value } = event.detail;\n\n        this.click.emit({ value });\n    };\n\n    handleClick = async (event: MouseEvent) => {\n        event.stopPropagation();\n        this.popoverElement.controlElement = this.dropdownBtn;\n        if (shouldShowActionSheet(this)) {\n            const { value } = await showActionSheetList(this, event);\n            this.dropdownBtn.focus();\n            this.click.emit({ value });\n        } else {\n            await this.popoverElement.toggle();\n        }\n    };\n\n    handleKeydown = async (event: KeyboardEvent) => {\n        const isTabMetaOrCtrl = event.metaKey || event.ctrlKey || event.key === 'Tab';\n        if (isTabMetaOrCtrl) return;\n\n        event.preventDefault();\n        this.popoverElement.controlElement = this.dropdownBtn;\n        if (shouldShowActionSheet(this, event)) {\n            const { value } = await showActionSheetList(this, event);\n            this.dropdownBtn.focus();\n            this.click.emit({ value });\n        } else {\n            this.optionList.handleExternalKeydown(event);\n        }\n    };\n\n    handleWrapperClick = () => {\n        this.dropdownBtn.focus();\n        this.dropdownBtn.click();\n    };\n\n    initMutationObserver = () => {\n        if (!('MutationObserver' in window)) return;\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true, attributes: true });\n        this.mutationObserver = observer;\n    };\n\n    onClickElsewhere = (event: CustomEvent) => {\n        const target = event.target as HTMLClickElsewhereElement;\n        if (target.localName === 'click-elsewhere') {\n            event.stopPropagation();\n            const { popoverElement } = this;\n            if (!popoverElement) return;\n            popoverElement.open = false;\n        }\n    };\n\n    onMutationObserved = () => {\n        this.determineOptionCount();\n        this.filterSlottedElements();\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderHiddenElement() {\n        return (\n            <div\n                id=\"option-description\"\n                class=\"sr\"\n                aria-hidden=\"true\"\n            >\n                {loc('tecton.element.optionList.optionCount', [this.optionCount])}\n            </div>\n        );\n    }\n\n    render() {\n        const { open } = this;\n        const wrapperClassNames = ['tag'];\n        if (this.optionCount) wrapperClassNames.push('has-options');\n        const shouldShowOptions = this.optionCount > 0;\n\n        return (\n            <Host role={shouldShowOptions ? 'list' : undefined}>\n                <click-elsewhere onChange={this.onClickElsewhere}>\n                    {shouldShowOptions ? (\n                        <Fragment>\n                            <div\n                                class=\"btn-wrapper\"\n                                onClick={this.handleWrapperClick}\n                            >\n                                <button\n                                    class=\"tag-wrapper\"\n                                    ref={el => (this.dropdownBtn = el)}\n                                    test-id=\"btn-control\"\n                                    type=\"button\"\n                                    role=\"combobox\"\n                                    onClick={this.handleClick}\n                                    onKeyDown={this.handleKeydown}\n                                    onFocusout={this.handleButtonFocusout}\n                                    aria-controls=\"option-list\"\n                                    aria-expanded={open ? 'true' : 'false'}\n                                    aria-describedby=\"option-description\"\n                                >\n                                    <div class={wrapperClassNames.join(' ')}>{loc(this.label)}</div>\n                                    <q2-icon type=\"options\"></q2-icon>\n                                </button>\n                            </div>\n                            {this.renderHiddenElement()}\n                        </Fragment>\n                    ) : (\n                        <div\n                            class=\"tag-wrapper\"\n                            onClick={e => e.stopPropagation()}\n                        >\n                            <div class={wrapperClassNames.join(' ')}>\n                                <slot name=\"decorator\" />\n                                {loc(this.label)}\n                            </div>\n                        </div>\n                    )}\n\n                    {shouldShowOptions && (\n                        <q2-popover\n                            ref={el => (this.popoverElement = el)}\n                            controlElement={this.dropdownBtn}\n                            open={this.open}\n                            maxHeight={this.popoverMaxHeight}\n                            minHeight={this.popoverMinHeight}\n                            direction={this.popoverDirection}\n                            align={this.popoverAlignment}\n                        >\n                            <q2-option-list\n                                id=\"option-list\"\n                                ref={el => (this.optionList = el)}\n                                onChange={this.handleChange}\n                                type=\"menu\"\n                                align=\"right\"\n                                label={loc('tecton.element.optionList.label', [this.optionListLabel])}\n                                no-select\n                            >\n                                <slot />\n                            </q2-option-list>\n                        </q2-popover>\n                    )}\n                </click-elsewhere>\n            </Host>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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","ignoreList":[]}