q2-tecton-elements 1.46.0 → 1.47.0

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

@@ -1 +0,0 @@
-{"version":3,"names":["q2DropdownCss","Q2DropdownStyle0","Q2Dropdown","this","dropdownItemSelector","focusToggle","controlElement","shadowRoot","querySelector","focus","openDropdown","open","closeDropdown","onClickElsewhere","event","target","localName","stopPropagation","popoverElement","onToggleClick","onToggleKeydown","includes","key","preventDefault","focusLastItem","focusFirstItem","onDropdownMenuClick","async","item","disabled","separator","waitForNextPaint","onDropdownMenuKeydown","focusAdjacentItem","resolveMenu","name","window","TectonElements","contextValue","resolvedType","additionalContext","orchestrateResolvedMenuItems","context","removeResolvedElements","resolveMenuItemElements","then","data","forEach","element","hostElement","appendChild","catch","err","resolvedElements","querySelectorAll","removeChild","datas","map","menuItemData","onClickFn","queryParams","contextIdParamName","action","navigateTo","featureName","moduleName","showOverpanel","newDropdownItem","document","createElement","setAttribute","itemLabel","classList","add","innerHTML","onclick","_b","_a","call","overpanelPath","params","undefined","hasCustomButton","determineDropdownItemCount","length","toggleButtonProps","allowedIntents","allowedTypes","type","icon","fab","custom","intent","active","ariaExpanded","className","popDirectionHandler","handleRenamedProp","alignmentHandler","ariaLabelHandler","handleAriaLabel","nameHandler","contextHandler","contextValueHandler","resolvedTypeHandler","additionalContextHandler","delegateFocus","isEventFromElement","popoverStateHandler","detail","scrollContainerTo","top","componentWillLoad","componentDidLoad","overrideFocus","firstItem","dispatchEvent","FocusEvent","lastItem","activeItem","direction","dropdownItems","Array","from","activeIndex","indexOf","targetIndex","targetItem","Event","render","btnProps","h","class","onChange","ref","el","onClick","onKeyDown","label","hideLabel","loc","ariaHasPopup","_role","block","description","Fragment","minHeight","popoverMinHeight","popoverDirection","align","popoverAlignment","mode","popoverMode","onFocus"],"sources":["src/components/q2-dropdown/q2-dropdown.scss?tag=q2-dropdown&encapsulation=shadow","src/components/q2-dropdown/q2-dropdown.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-flex;\n}\n\n:host([block]) {\n    display: block;\n}\n\nclick-elsewhere {\n    position: relative;\n    display: block;\n}\n\nq2-popover {\n    --tct-popover-min-width: #{var-list(var-prefixer(dropdown-width))};\n}\n","import { Component, ComponentInterface, Prop, Element, Watch, h, Fragment, Listen } from '@stencil/core';\nimport { IDict } from 'src/util';\nimport {\n    handleAriaLabel,\n    handleRenamedProp,\n    isEventFromElement,\n    loc,\n    overrideFocus,\n    waitForNextPaint,\n} from 'src/utils';\n\n@Component({ tag: 'q2-dropdown', shadow: true, styleUrl: 'q2-dropdown.scss' })\nexport class Q2Dropdown implements ComponentInterface {\n    @Prop({ reflect: true }) additionalContext: string;\n\n    /** If `true`, component expands to fill the width of its parent element. */\n    @Prop({ reflect: true }) block: boolean;\n\n    /**\n     * Tells the outlet what the type of object being passed in as contextValue.\n     * This will allow for the hierarchy resolution logic to work to determine if an option should or should not be shown.\n     *\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true }) context: string;\n\n    /**\n     * Passes important information to the outlet (e.g., pass an account id that your platform can use to look up what module to show for that account type).\n     *\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true }) contextValue: string;\n\n    /** Indicates the menu cannot be focused or interacted with. */\n    @Prop({ reflect: true }) disabled: boolean;\n\n    /**\n     * Hide's the field's `<label>` element from view.\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true, mutable: true }) hideLabel: boolean;\n\n    /** The icon that will render within the toggle button. You may use any of the `q2-icon` types. */\n    @Prop({ reflect: true }) icon: string;\n\n    /**\n     * The text that appears within the button.\n     * @warning\n     * This property should not be used if the `type` is `icon`.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true }) label: string;\n\n    /**\n     * Identifies this menu as an outlet. Used in conjunction with context and, optionally, `contextValue`.\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true }) name: string;\n\n    /** Determine whether the popover is open or closed. */\n    @Prop({ reflect: true, mutable: true }) open: boolean;\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({ mutable: true }) popoverDirection: 'up' | 'down';\n\n    /** Aligns the popover dropdown to the left or right side of the input field. */\n    @Prop({ mutable: true }) popoverAlignment: 'left' | 'right' = 'left'; // being used in dropdown.scss\n\n    /**\n     * Determines the display mode of the popover.\n     *\n     * Providing a value of `legacy` instructs the popover to use absolute positioning instead of fixed positioning.\n     *\n     * @info\n     * This is a temporary solution to work around styling issues related to using fixed positioning for the popover\n     * when nested inside of elements with transform properties. This will be removed once the popover API is available\n     * for use.\n     */\n    @Prop({ mutable: true }) popoverMode: 'legacy' = null;\n\n    /** @deprecated */\n    @Prop() popoverMinHeight: number = 150;\n\n    /**\n     * Use with `context` to tell the outlet where it appears. It will be matched with the appropriately configured module for that context.\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true }) resolvedType: string;\n\n    /** The type of button used as the menu toggle. */\n    @Prop({ reflect: true }) type: 'icon' | 'fab' | 'custom' | 'primary' | 'secondary' | 'neutral' = 'icon';\n\n    /** @deprecated */\n    @Prop({ reflect: true }) alignment: 'left' | 'right';\n\n    /** @deprecated */\n    @Prop({ reflect: true }) popDirection: 'up' | 'down';\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n    @Element() hostElement: HTMLElement;\n    privatePopDirection: 'down' | 'up';\n    controlElement?: HTMLQ2BtnElement;\n    popoverElement?: HTMLQ2PopoverElement;\n    dropdownItemSelector: string = 'q2-dropdown-item:not([disabled]):not([separator])';\n\n    resolveMenu() {\n        return (\n            this.name &&\n            window.TectonElements &&\n            window.TectonElements.resolveMenu(this.name, this.contextValue, this.resolvedType, this.additionalContext)\n        );\n    }\n\n    orchestrateResolvedMenuItems() {\n        if (!this.name || !this.context) {\n            // this is only for contextual menu outlets\n            this.removeResolvedElements();\n            return;\n        }\n\n        this.resolveMenuItemElements()\n            .then(data => {\n                this.removeResolvedElements();\n                data.forEach(element => {\n                    this.hostElement.appendChild(element);\n                });\n            })\n            .catch(err => {\n                this.removeResolvedElements();\n                throw err;\n            });\n    }\n\n    removeResolvedElements() {\n        const resolvedElements = this.hostElement.querySelectorAll('q2-dropdown-item.resolved-menu-item');\n        resolvedElements.forEach(element => this.hostElement.removeChild(element));\n    }\n\n    resolveMenuItemElements() {\n        return this.resolveMenu().then(datas => {\n            return datas.map(menuItemData => {\n                let onClickFn;\n                let queryParams;\n                if (menuItemData['tct-ctxid']) {\n                    queryParams = {};\n                    queryParams[menuItemData.contextIdParamName] = menuItemData['tct-ctxid'];\n                }\n\n                switch (menuItemData.action) {\n                    case 'navigateTo':\n                        onClickFn = () =>\n                            this.navigateTo(menuItemData.featureName, menuItemData.moduleName, queryParams);\n                        break;\n                    case 'showOverpanel':\n                        onClickFn = () =>\n                            this.showOverpanel(`${menuItemData.featureName}.${menuItemData.moduleName}`, queryParams);\n                        break;\n                }\n\n                const newDropdownItem = document.createElement('q2-dropdown-item');\n                newDropdownItem.setAttribute('value', menuItemData.itemLabel);\n                newDropdownItem.classList.add('resolved-menu-item');\n                newDropdownItem.innerHTML = menuItemData.itemLabel;\n                newDropdownItem.onclick = onClickFn;\n\n                return newDropdownItem;\n            });\n        });\n    }\n\n    navigateTo(featureName: string, moduleName?: string, queryParams?: IDict<string>) {\n        return window.TectonElements?.navigateTo?.(featureName, moduleName, queryParams);\n    }\n\n    showOverpanel(overpanelPath: string, params: IDict<string>) {\n        return window.TectonElements?.showOverpanel?.(overpanelPath, params, undefined, true);\n    }\n\n    get hasCustomButton() {\n        return !!this.hostElement.querySelector('[slot=custom-dropdown-button]');\n    }\n\n    get determineDropdownItemCount() {\n        return this.hostElement.querySelectorAll(this.dropdownItemSelector).length;\n    }\n\n    get toggleButtonProps() {\n        const allowedIntents = ['primary', 'secondary', 'neutral'];\n        const allowedTypes = ['icon', 'fab', 'custom', ...allowedIntents];\n        const type = allowedTypes.includes(this.type) ? this.type : '';\n        const icon = type === 'icon';\n        const fab = type === 'fab';\n        const custom = type === 'custom';\n        let intent;\n        if (allowedIntents.includes(type)) {\n            intent = type === 'neutral' ? type : `workflow-${type}`;\n        }\n        const active = this.open;\n        const disabled = !!this.disabled;\n        const ariaExpanded = this.open;\n        const className = !icon && !fab && !intent ? 'unstyled' : '';\n\n        return {\n            icon,\n            fab,\n            intent,\n            active,\n            disabled,\n            ariaExpanded,\n            className,\n            custom,\n        };\n    }\n\n    //////// Observers //////////\n    @Watch('popDirection')\n    popDirectionHandler() {\n        handleRenamedProp(this, 'popDirection', 'popoverDirection');\n    }\n\n    @Watch('alignment')\n    alignmentHandler() {\n        handleRenamedProp(this, 'alignment', 'popoverAlignment');\n    }\n\n    @Watch('ariaLabel')\n    ariaLabelHandler() {\n        handleAriaLabel(this);\n    }\n\n    @Watch('name')\n    nameHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('context')\n    contextHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('contextValue')\n    contextValueHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('resolvedType')\n    resolvedTypeHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('additionalContext')\n    additionalContextHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.focusToggle();\n    }\n\n    @Listen('popoverStateChanged')\n    popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n        if (this.open !== open) this.open = open;\n        this.popoverElement?.scrollContainerTo({ top: 0 });\n    }\n\n    ///// Lifecycle Hooks ////////\n    componentWillLoad() {\n        this.popDirectionHandler();\n        this.alignmentHandler();\n        this.ariaLabelHandler();\n    }\n\n    componentDidLoad() {\n        this.orchestrateResolvedMenuItems();\n        overrideFocus(this.hostElement);\n    }\n\n    ///// Actions ////////\n    focusToggle = () => {\n        this.controlElement.shadowRoot.querySelector<HTMLButtonElement>('button').focus();\n    };\n\n    openDropdown = () => {\n        if (this.open) return;\n        this.open = true;\n    };\n\n    closeDropdown = () => {\n        if (!this.open) return;\n        this.open = false;\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    onToggleClick = () => {\n        if (this.open) {\n            this.closeDropdown();\n        } else {\n            this.openDropdown();\n        }\n    };\n\n    onToggleKeydown = (event: KeyboardEvent) => {\n        if (['ArrowUp', 'Up'].includes(event.key)) {\n            event.preventDefault();\n            this.openDropdown();\n            this.focusLastItem();\n            return;\n        }\n\n        if (['ArrowDown', 'Down'].includes(event.key)) {\n            event.preventDefault();\n            this.openDropdown();\n            this.focusFirstItem();\n            return;\n        }\n\n        if (['Escape', 'Esc'].includes(event.key)) {\n            event.preventDefault();\n            this.focusToggle();\n            this.closeDropdown();\n            return;\n        }\n    };\n\n    onDropdownMenuClick = async (event: MouseEvent | CustomEvent) => {\n        if ((event.target as HTMLElement).localName !== 'q2-dropdown-item') {\n            return;\n        }\n        const item = event.target as HTMLQ2DropdownItemElement;\n        if (!item.disabled && !item.separator) {\n            this.closeDropdown();\n            await waitForNextPaint();\n            this.focusToggle();\n        }\n    };\n\n    focusFirstItem() {\n        const firstItem = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n            `${this.dropdownItemSelector}:first-child`\n        );\n\n        firstItem?.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    focusLastItem() {\n        const lastItem = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n            `${this.dropdownItemSelector}:last-child`\n        );\n        lastItem?.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    focusAdjacentItem(activeItem: HTMLQ2DropdownItemElement, direction: 'next' | 'prev') {\n        const dropdownItems: HTMLQ2DropdownItemElement[] = Array.from(\n            this.hostElement.querySelectorAll(this.dropdownItemSelector)\n        );\n\n        const activeIndex = dropdownItems.indexOf(activeItem);\n\n        if (activeIndex === -1) {\n            return;\n        }\n\n        let targetIndex: number = 0;\n        if (direction === 'next') {\n            targetIndex = activeIndex < dropdownItems.length - 1 ? activeIndex + 1 : 0;\n        } else if (direction === 'prev') {\n            if (activeIndex > 0) {\n                targetIndex = activeIndex - 1;\n            } else {\n                targetIndex = dropdownItems.length - 1;\n            }\n        }\n        const targetItem = dropdownItems[targetIndex];\n        targetItem && targetItem.dispatchEvent(new Event('focus'));\n    }\n\n    onDropdownMenuKeydown = (event: KeyboardEvent) => {\n        if (['Escape', 'Esc'].includes(event.key)) {\n            this.closeDropdown();\n            this.focusToggle();\n            return;\n        }\n\n        if ((event.target as HTMLElement).localName !== 'q2-dropdown-item') {\n            return;\n        }\n\n        const item = event.target as HTMLQ2DropdownItemElement;\n        if (['ArrowUp', 'Up'].includes(event.key)) {\n            event.preventDefault();\n            this.focusAdjacentItem(item, 'prev');\n            return;\n        }\n\n        if (['ArrowDown', 'Down'].includes(event.key)) {\n            event.preventDefault();\n            this.focusAdjacentItem(item, 'next');\n            return;\n        }\n        if (event.key === 'Tab') {\n            event.preventDefault();\n        }\n    };\n\n    /// DOM ///\n\n    render() {\n        const btnProps = this.toggleButtonProps;\n\n        return (\n            <click-elsewhere\n                class={this.open ? 'dropdown-open' : ''}\n                onChange={this.onClickElsewhere}\n                test-id=\"dropdownContainer\"\n            >\n                <q2-btn\n                    ref={el => (this.controlElement = el)}\n                    class={btnProps.className}\n                    onClick={this.onToggleClick}\n                    onKeyDown={this.onToggleKeydown}\n                    fab={btnProps.fab}\n                    intent={btnProps.intent}\n                    active={btnProps.active}\n                    disabled={btnProps.disabled}\n                    ariaExpanded={`${!!btnProps.ariaExpanded}`}\n                    label={this.hideLabel && this.label ? loc(this.label) : undefined}\n                    hideLabel={this.hideLabel}\n                    ariaHasPopup=\"menu\"\n                    _role=\"menu\"\n                    test-id=\"dropdownButton\"\n                    block={this.block}\n                    description={loc('tecton.element.dropdown.itemCount', [this.determineDropdownItemCount])}\n                >\n                    {this.hasCustomButton ? (\n                        <div\n                            test-id=\"dropdownCustom\"\n                            class={btnProps.custom ? '' : 'hidden'}\n                        >\n                            <slot name=\"custom-dropdown-button\" />\n                        </div>\n                    ) : (\n                        <Fragment>\n                            {this.icon ? <q2-icon type={this.icon} /> : ' '}\n                            {this.label && !this.hideLabel && (\n                                <span class=\"dropdown-button-text\">{loc(this.label)}</span>\n                            )}\n                        </Fragment>\n                    )}\n                </q2-btn>\n                <q2-popover\n                    ref={el => (this.popoverElement = el)}\n                    controlElement={this.controlElement}\n                    open={this.open}\n                    minHeight={this.popoverMinHeight}\n                    direction={this.popoverDirection}\n                    align={this.popoverAlignment}\n                    mode={this.popoverMode || undefined}\n                    block={this.block}\n                >\n                    <div\n                        onClick={this.onDropdownMenuClick}\n                        onKeyDown={this.onDropdownMenuKeydown}\n                    >\n                        <slot />\n                        {this.open && (\n                            <q2-btn\n                                class=\"sr close-dropdown\"\n                                onFocus={this.closeDropdown}\n                            />\n                        )}\n                    </div>\n                </q2-popover>\n            </click-elsewhere>\n        );\n    }\n}\n"],"mappings":"gIAAA,MAAMA,EAAgB,u1BACtB,MAAAC,EAAeD,E,MCWFE,EAAU,M,yBAqGnBC,KAAAC,qBAA+B,oDAiL/BD,KAAAE,YAAc,KACVF,KAAKG,eAAeC,WAAWC,cAAiC,UAAUC,OAAO,EAGrFN,KAAAO,aAAe,KACX,GAAIP,KAAKQ,KAAM,OACfR,KAAKQ,KAAO,IAAI,EAGpBR,KAAAS,cAAgB,KACZ,IAAKT,KAAKQ,KAAM,OAChBR,KAAKQ,KAAO,KAAK,EAGrBR,KAAAU,iBAAoBC,IAChB,MAAMC,EAASD,EAAMC,OACrB,GAAIA,EAAOC,YAAc,kBAAmB,CACxCF,EAAMG,kBACN,MAAMC,eAAEA,GAAmBf,KAC3B,IAAKe,EAAgB,OACrBA,EAAeP,KAAO,K,GAI9BR,KAAAgB,cAAgB,KACZ,GAAIhB,KAAKQ,KAAM,CACXR,KAAKS,e,KACF,CACHT,KAAKO,c,GAIbP,KAAAiB,gBAAmBN,IACf,GAAI,CAAC,UAAW,MAAMO,SAASP,EAAMQ,KAAM,CACvCR,EAAMS,iBACNpB,KAAKO,eACLP,KAAKqB,gBACL,M,CAGJ,GAAI,CAAC,YAAa,QAAQH,SAASP,EAAMQ,KAAM,CAC3CR,EAAMS,iBACNpB,KAAKO,eACLP,KAAKsB,iBACL,M,CAGJ,GAAI,CAAC,SAAU,OAAOJ,SAASP,EAAMQ,KAAM,CACvCR,EAAMS,iBACNpB,KAAKE,cACLF,KAAKS,gBACL,M,GAIRT,KAAAuB,oBAAsBC,MAAOb,IACzB,GAAKA,EAAMC,OAAuBC,YAAc,mBAAoB,CAChE,M,CAEJ,MAAMY,EAAOd,EAAMC,OACnB,IAAKa,EAAKC,WAAaD,EAAKE,UAAW,CACnC3B,KAAKS,sBACCmB,IACN5B,KAAKE,a,GA4CbF,KAAA6B,sBAAyBlB,IACrB,GAAI,CAAC,SAAU,OAAOO,SAASP,EAAMQ,KAAM,CACvCnB,KAAKS,gBACLT,KAAKE,cACL,M,CAGJ,GAAKS,EAAMC,OAAuBC,YAAc,mBAAoB,CAChE,M,CAGJ,MAAMY,EAAOd,EAAMC,OACnB,GAAI,CAAC,UAAW,MAAMM,SAASP,EAAMQ,KAAM,CACvCR,EAAMS,iBACNpB,KAAK8B,kBAAkBL,EAAM,QAC7B,M,CAGJ,GAAI,CAAC,YAAa,QAAQP,SAASP,EAAMQ,KAAM,CAC3CR,EAAMS,iBACNpB,KAAK8B,kBAAkBL,EAAM,QAC7B,M,CAEJ,GAAId,EAAMQ,MAAQ,MAAO,CACrBR,EAAMS,gB,oSA5VgD,O,iBAYb,K,sBAGd,I,sCAU8D,O,8EAiBjG,WAAAW,GACI,OACI/B,KAAKgC,MACLC,OAAOC,gBACPD,OAAOC,eAAeH,YAAY/B,KAAKgC,KAAMhC,KAAKmC,aAAcnC,KAAKoC,aAAcpC,KAAKqC,kB,CAIhG,4BAAAC,GACI,IAAKtC,KAAKgC,OAAShC,KAAKuC,QAAS,CAE7BvC,KAAKwC,yBACL,M,CAGJxC,KAAKyC,0BACAC,MAAKC,IACF3C,KAAKwC,yBACLG,EAAKC,SAAQC,IACT7C,KAAK8C,YAAYC,YAAYF,EAAQ,GACvC,IAELG,OAAMC,IACHjD,KAAKwC,yBACL,MAAMS,CAAG,G,CAIrB,sBAAAT,GACI,MAAMU,EAAmBlD,KAAK8C,YAAYK,iBAAiB,uCAC3DD,EAAiBN,SAAQC,GAAW7C,KAAK8C,YAAYM,YAAYP,I,CAGrE,uBAAAJ,GACI,OAAOzC,KAAK+B,cAAcW,MAAKW,GACpBA,EAAMC,KAAIC,IACb,IAAIC,EACJ,IAAIC,EACJ,GAAIF,EAAa,aAAc,CAC3BE,EAAc,GACdA,EAAYF,EAAaG,oBAAsBH,EAAa,Y,CAGhE,OAAQA,EAAaI,QACjB,IAAK,aACDH,EAAY,IACRxD,KAAK4D,WAAWL,EAAaM,YAAaN,EAAaO,WAAYL,GACvE,MACJ,IAAK,gBACDD,EAAY,IACRxD,KAAK+D,cAAc,GAAGR,EAAaM,eAAeN,EAAaO,aAAcL,GACjF,MAGR,MAAMO,EAAkBC,SAASC,cAAc,oBAC/CF,EAAgBG,aAAa,QAASZ,EAAaa,WACnDJ,EAAgBK,UAAUC,IAAI,sBAC9BN,EAAgBO,UAAYhB,EAAaa,UACzCJ,EAAgBQ,QAAUhB,EAE1B,OAAOQ,CAAe,K,CAKlC,UAAAJ,CAAWC,EAAqBC,EAAqBL,G,QACjD,OAAOgB,GAAAC,EAAAzC,OAAOC,kBAAc,MAAAwC,SAAA,SAAAA,EAAEd,cAAU,MAAAa,SAAA,SAAAA,EAAAE,KAAAD,EAAGb,EAAaC,EAAYL,E,CAGxE,aAAAM,CAAca,EAAuBC,G,QACjC,OAAOJ,GAAAC,EAAAzC,OAAOC,kBAAc,MAAAwC,SAAA,SAAAA,EAAEX,iBAAa,MAAAU,SAAA,SAAAA,EAAAE,KAAAD,EAAGE,EAAeC,EAAQC,UAAW,K,CAGpF,mBAAIC,GACA,QAAS/E,KAAK8C,YAAYzC,cAAc,gC,CAG5C,8BAAI2E,GACA,OAAOhF,KAAK8C,YAAYK,iBAAiBnD,KAAKC,sBAAsBgF,M,CAGxE,qBAAIC,GACA,MAAMC,EAAiB,CAAC,UAAW,YAAa,WAChD,MAAMC,EAAe,CAAC,OAAQ,MAAO,YAAaD,GAClD,MAAME,EAAOD,EAAalE,SAASlB,KAAKqF,MAAQrF,KAAKqF,KAAO,GAC5D,MAAMC,EAAOD,IAAS,OACtB,MAAME,EAAMF,IAAS,MACrB,MAAMG,EAASH,IAAS,SACxB,IAAII,EACJ,GAAIN,EAAejE,SAASmE,GAAO,CAC/BI,EAASJ,IAAS,UAAYA,EAAO,YAAYA,G,CAErD,MAAMK,EAAS1F,KAAKQ,KACpB,MAAMkB,IAAa1B,KAAK0B,SACxB,MAAMiE,EAAe3F,KAAKQ,KAC1B,MAAMoF,GAAaN,IAASC,IAAQE,EAAS,WAAa,GAE1D,MAAO,CACHH,OACAC,MACAE,SACAC,SACAhE,WACAiE,eACAC,YACAJ,S,CAMR,mBAAAK,GACIC,EAAkB9F,KAAM,eAAgB,mB,CAI5C,gBAAA+F,GACID,EAAkB9F,KAAM,YAAa,mB,CAIzC,gBAAAgG,GACIC,EAAgBjG,K,CAIpB,WAAAkG,GACIlG,KAAKsC,8B,CAIT,cAAA6D,GACInG,KAAKsC,8B,CAIT,mBAAA8D,GACIpG,KAAKsC,8B,CAIT,mBAAA+D,GACIrG,KAAKsC,8B,CAIT,wBAAAgE,GACItG,KAAKsC,8B,CAIT,aAAAiE,CAAc5F,GACV,IAAK6F,EAAmB7F,EAAOX,KAAK8C,aAAc,OAClD9C,KAAKE,a,CAIT,mBAAAuG,EAAsBC,QAAQlG,KAAEA,K,MAC5B,GAAIR,KAAKQ,OAASA,EAAMR,KAAKQ,KAAOA,GACpCkE,EAAA1E,KAAKe,kBAAc,MAAA2D,SAAA,SAAAA,EAAEiC,kBAAkB,CAAEC,IAAK,G,CAIlD,iBAAAC,GACI7G,KAAK6F,sBACL7F,KAAK+F,mBACL/F,KAAKgG,kB,CAGT,gBAAAc,GACI9G,KAAKsC,+BACLyE,EAAc/G,KAAK8C,Y,CAuEvB,cAAAxB,GACI,MAAM0F,EAAYhH,KAAK8C,YAAYzC,cAC/B,GAAGL,KAAKC,oCAGZ+G,IAAS,MAATA,SAAS,SAATA,EAAWC,cAAc,IAAIC,WAAW,S,CAG5C,aAAA7F,GACI,MAAM8F,EAAWnH,KAAK8C,YAAYzC,cAC9B,GAAGL,KAAKC,mCAEZkH,IAAQ,MAARA,SAAQ,SAARA,EAAUF,cAAc,IAAIC,WAAW,S,CAG3C,iBAAApF,CAAkBsF,EAAuCC,GACrD,MAAMC,EAA6CC,MAAMC,KACrDxH,KAAK8C,YAAYK,iBAAiBnD,KAAKC,uBAG3C,MAAMwH,EAAcH,EAAcI,QAAQN,GAE1C,GAAIK,KAAiB,EAAG,CACpB,M,CAGJ,IAAIE,EAAsB,EAC1B,GAAIN,IAAc,OAAQ,CACtBM,EAAcF,EAAcH,EAAcrC,OAAS,EAAIwC,EAAc,EAAI,C,MACtE,GAAIJ,IAAc,OAAQ,CAC7B,GAAII,EAAc,EAAG,CACjBE,EAAcF,EAAc,C,KACzB,CACHE,EAAcL,EAAcrC,OAAS,C,EAG7C,MAAM2C,EAAaN,EAAcK,GACjCC,GAAcA,EAAWX,cAAc,IAAIY,MAAM,S,CAiCrD,MAAAC,GACI,MAAMC,EAAW/H,KAAKkF,kBAEtB,OACI8C,EAAA,mBAAA7G,IAAA,2CACI8G,MAAOjI,KAAKQ,KAAO,gBAAkB,GACrC0H,SAAUlI,KAAKU,iBAAgB,UACvB,qBAERsH,EAAA,UAAA7G,IAAA,2CACIgH,IAAKC,GAAOpI,KAAKG,eAAiBiI,EAClCH,MAAOF,EAASnC,UAChByC,QAASrI,KAAKgB,cACdsH,UAAWtI,KAAKiB,gBAChBsE,IAAKwC,EAASxC,IACdE,OAAQsC,EAAStC,OACjBC,OAAQqC,EAASrC,OACjBhE,SAAUqG,EAASrG,SACnBiE,aAAc,KAAKoC,EAASpC,eAC5B4C,MAAOvI,KAAKwI,WAAaxI,KAAKuI,MAAQE,EAAIzI,KAAKuI,OAASzD,UACxD0D,UAAWxI,KAAKwI,UAChBE,aAAa,OACbC,MAAM,OAAM,UACJ,iBACRC,MAAO5I,KAAK4I,MACZC,YAAaJ,EAAI,oCAAqC,CAACzI,KAAKgF,8BAE3DhF,KAAK+E,gBACFiD,EAAA,iBACY,iBACRC,MAAOF,EAASvC,OAAS,GAAK,UAE9BwC,EAAA,QAAMhG,KAAK,4BAGfgG,EAACc,EAAQ,KACJ9I,KAAKsF,KAAO0C,EAAA,WAAS3C,KAAMrF,KAAKsF,OAAW,IAC3CtF,KAAKuI,QAAUvI,KAAKwI,WACjBR,EAAA,QAAMC,MAAM,wBAAwBQ,EAAIzI,KAAKuI,UAK7DP,EAAA,cAAA7G,IAAA,2CACIgH,IAAKC,GAAOpI,KAAKe,eAAiBqH,EAClCjI,eAAgBH,KAAKG,eACrBK,KAAMR,KAAKQ,KACXuI,UAAW/I,KAAKgJ,iBAChB3B,UAAWrH,KAAKiJ,iBAChBC,MAAOlJ,KAAKmJ,iBACZC,KAAMpJ,KAAKqJ,aAAevE,UAC1B8D,MAAO5I,KAAK4I,OAEZZ,EAAA,OAAA7G,IAAA,2CACIkH,QAASrI,KAAKuB,oBACd+G,UAAWtI,KAAK6B,uBAEhBmG,EAAA,QAAA7G,IAAA,6CACCnB,KAAKQ,MACFwH,EAAA,UAAA7G,IAAA,2CACI8G,MAAM,oBACNqB,QAAStJ,KAAKS,kB"}

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

@@ -1 +0,0 @@
-{"version":3,"names":["q2CheckboxCss","Q2CheckboxStyle0","Q2Checkbox","this","_id","createGuid","onInputClick","event","stopPropagation","preventDefault","isNotInteractive","disabled","readonly","target","HTMLInputElement","value","checked","change","emit","inputElement","focus","componentWillLoad","handleAriaLabel","componentDidLoad","overrideFocus","hostElement","click","defaultChangeHandler","setTimeout","handleChangeEvent","delegateFocus","isEventFromElement","shadowRoot","querySelector","ariaLabelObserver","onchange","defaultPrevented","detail","render","textLabelClasses","hideLabel","push","h","key","class","ref","el","description","undefined","hasError","indeterminate","groupDisabled","id","name","onClick","type","htmlFor","generateCheckboxSVG","join","loc","label","generateToggleSVG","width","height","viewBox","focusable","x","y","rx","generateCheckBoxSVGFill","x1","y1","x2","y2","points","cx","cy","r"],"sources":["src/components/q2-checkbox/q2-checkbox.scss?tag=q2-checkbox&encapsulation=shadow","src/components/q2-checkbox/q2-checkbox.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    --comp-checkbox-padding: #{var-list(\n            --tct-checkbox-padding,\n            unquote('#{var-list(var-prefixer(checkbox-vertical-padding), --tct-scale-2, --app-scale-2x, 10px)} 0')\n        )};\n    display: block;\n    position: relative;\n    padding: var(--comp-checkbox-padding);\n}\n\n.container {\n    --comp-checkbox-size: #{var-list(var-prefixer(checkbox-size), 20px)};\n    --comp-checkbox-default-column-gap: var(--app-scale-2x, 10px);\n    --comp-checkbox-default-row-gap: 0;\n    --comp-checkbox-default-gap: #{var(--comp-checkbox-default-row-gap) var(--comp-checkbox-default-column-gap)};\n    --comp-checkbox-tween: #{var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n    --comp-checkbox-toggle-width: #{var-list(var-prefixer(checkbox-toggle-width), 46px)};\n    --comp-checkbox-gap: #{var-list(var-prefixer(checkbox-gap), --comp-checkbox-default-gap)};\n    --comp-checkbox-outer-stroke-color: #{var-list(\n            var-prefixer(checkbox-outer-stroke-color),\n            --t-a11y-gray-color-AA,\n            #949494\n        )};\n    --comp-checkbox-outer-fill-color: #{var-list(\n            var-prefixer(checkbox-outer-fill-color),\n            --tct-white,\n            --app-white,\n            #ffffff\n        )};\n    --comp-checkbox-checked-color: #{var-list(\n            var-prefixer(checkbox-check-stroke-color),\n            --t-checkbox-fill,\n            --t-a11y-active-gray-color-AA,\n            #404040\n        )};\n    --comp-control-width: var(--comp-checkbox-size);\n    --comp-checkbox-error-color: #{var-list(--tct-stoplight-error, --const-stoplight-alert, #d20a0a)};\n\n    :host([type='favorite']) & {\n        --comp-checkbox-favorite-stroke-color: #{var-list(\n                var-prefixer(checkbox-favorite-stroke-color),\n                --t-a11y-gray-color-AA,\n                #949494\n            )};\n        --comp-checkbox-favorite-fill-color: #{var-list(var-prefixer(checkbox-favorite-fill-color), #db7d24)};\n    }\n\n    display: grid;\n    grid-template-areas:\n        'svg label'\n        'svg description';\n    align-items: center;\n    gap: var(--comp-checkbox-gap);\n    grid-template-columns: var(--comp-control-width) calc(\n            100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap)\n        );\n\n    :host([hide-label]:not([hide-label='false'])) & {\n        grid-template-areas: 'svg';\n        grid-template-columns: var(--comp-control-width);\n    }\n\n    :host([type='toggle']) & {\n        --comp-control-width: var(--comp-checkbox-toggle-width);\n    }\n\n    :host([alignment='right']) &,\n    :host([type='toggle']:not([alignment])) & {\n        grid-template-areas:\n            'label svg'\n            'description svg';\n        grid-template-columns: calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap)) var(\n                --comp-control-width\n            );\n    }\n}\n\n.label-control {\n    align-items: center;\n    display: flex;\n}\n\n.label-text {\n    grid-area: label;\n    font-weight: var-list(var-prefixer(checkbox-label-font-weight), 400);\n\n    :host([description]) & {\n        font-weight: var-list(var-prefixer(checkbox-label-font-weight), 600);\n    }\n    :host([checked]:not([checked='false'])) & {\n        font-weight: var-list(var-prefixer(checkbox-checked-label-font-weight), 600);\n    }\n    :host(:hover) & {\n        font-weight: var-list(--tct-checkbox-hover-label-font-weight, var-prefixer(checkbox-label-font-weight), 400);\n    }\n    :host(:focus-within) & {\n        font-weight: var-list(--tct-checkbox-focused-label-font-weight, var-prefixer(checkbox-label-font-weight), 400);\n    }\n    :host([description]:hover) & {\n        font-weight: var-list(--tct-checkbox-hover-label-font-weight, var-prefixer(checkbox-label-font-weight), 600);\n    }\n    :host([checked]:not([checked='false']):hover) & {\n        font-weight: var-list(\n            --tct-checkbox-checked-hover-label-font-weight,\n            var-prefixer(checkbox-checked-label-font-weight),\n            600\n        );\n    }\n    :host([description]:focus-within) & {\n        font-weight: var-list(--tct-checkbox-focused-label-font-weight, var-prefixer(checkbox-label-font-weight), 600);\n    }\n    :host([checked]:not([checked='false']):focus-within) & {\n        font-weight: var-list(\n            --tct-checkbox-checked-focused-label-font-weight,\n            var-prefixer(checkbox-checked-label-font-weight),\n            600\n        );\n    }\n}\n\n.description-text {\n    grid-area: description;\n    font-weight: var-list(var-prefixer(checkbox-description-font-weight), 400);\n\n    :host(:hover) & {\n        font-weight: var-list(\n            --tct-checkbox-hover-description-font-weight,\n            var-prefixer(checkbox-description-font-weight),\n            400\n        );\n    }\n}\n\nlabel {\n    color: var-list(--tct-checkbox-label-color);\n    cursor: pointer;\n    hyphens: var-list(--tct-checkbox-label-hyphens, auto);\n    word-break: var-list(--tct-checkbox-label-word-break, break-word);\n    word-wrap: var-list(--tct-checkbox-label-word-wrap, break-word);\n}\n\n:host([disabled]:not([disabled='false'])),\n:host([group-disabled]) {\n    opacity: var-list(var-prefixer(checkbox-disabled-opacity), --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n\n    label {\n        cursor: not-allowed;\n    }\n}\n\n.checkbox-icon {\n    width: var(--comp-checkbox-size);\n    height: var(--comp-checkbox-size);\n    border-radius: var-list(\n        var-prefixer(checkbox-outer-border-radius),\n        --tct-border-radius-1,\n        --app-border-radius-1,\n        3px\n    );\n    stroke: var(--comp-checkbox-outer-stroke-color);\n    fill: var(--comp-checkbox-outer-fill-color);\n    stroke-width: var-list(var-prefixer(checkbox-outer-stroke-width), 2);\n    flex-shrink: 0;\n\n    :host([checked]:not([checked='false']):not([type='favorite'])) & {\n        stroke: var-list(var-prefixer(checkbox-checked-outer-stroke-color), --comp-checkbox-outer-stroke-color);\n        fill: var-list(var-prefixer(checkbox-checked-outer-fill-color), --comp-checkbox-outer-fill-color);\n    }\n\n    :host([has-error]:not([type='favorite'])) & {\n        stroke: var-list(--tct-checkbox-error-outer-stroke-color, --comp-checkbox-error-color);\n        fill: var-list(--tct-checkbox-error-outer-fill-color, --comp-checkbox-outer-fill-color);\n        box-shadow: var(--tct-checkbox-error-box-shadow);\n    }\n\n    :host(:hover:not([type='favorite'])) & {\n        stroke: var-list(--tct-checkbox-hover-outer-stroke-color, --comp-checkbox-outer-stroke-color);\n        fill: var-list(--tct-checkbox-hover-outer-fill-color, --comp-checkbox-outer-fill-color);\n        box-shadow: var(--tct-checkbox-hover-box-shadow);\n    }\n    :host(:hover[has-error]:not([type='favorite'])) & {\n        stroke: var-list(\n            --tct-checkbox-error-hover-outer-stroke-color,\n            --tct-checkbox-error-outer-stroke-color,\n            --comp-checkbox-error-color\n        );\n        fill: var-list(\n            --tct-checkbox-error-hover-outer-fill-color,\n            --tct-checkbox-error-outer-fill-color,\n            --comp-checkbox-outer-fill-color\n        );\n        box-shadow: var-list(\n            --tct-checkbox-error-hover-box-shadow,\n            --tct-checkbox-error-box-shadow,\n            --tct-checkbox-hover-box-shadow\n        );\n    }\n\n    :host(:focus-within:not([type='favorite'])) & {\n        --comp-checkbox-focused-box-shadow: #{var(--const-double-focus-ring),\n            var-list(--tct-global-focus, unquote('0 0 0 2px #33b4ff'))};\n\n        stroke: var-list(var-prefixer(checkbox-focused-outer-stroke-color), --comp-checkbox-checked-color);\n        fill: var-list(--tct-checkbox-focused-outer-fill-color, --comp-checkbox-outer-fill-color);\n        box-shadow: var(--comp-checkbox-focused-box-shadow);\n    }\n    :host(:focus-within[has-error]:not([type='favorite'])) & {\n        stroke: var-list(\n            --tct-checkbox-error-focused-outer-stroke-color,\n            --tct-checkbox-error-outer-stroke-color,\n            --comp-checkbox-error-color\n        );\n        fill: var-list(\n            --tct-checkbox-error-focused-outer-fill-color,\n            --tct-checkbox-error-outer-fill-color,\n            --comp-checkbox-outer-fill-color\n        );\n        box-shadow: var-list(\n            --tct-checkbox-error-focused-box-shadow,\n            --tct-checkbox-error-box-shadow,\n            --comp-checkbox-focused-box-shadow\n        );\n    }\n\n    // Favorite\n    :host([type='favorite']) & {\n        --tct-icon-stroke-width: #{var-list(var-prefixer(checkbox-favorite-stroke-width), 1)};\n        --tct-icon-stroke-primary: var(--comp-checkbox-favorite-stroke-color);\n        transition:\n            fill var(--comp-checkbox-tween),\n            color var(--comp-checkbox-tween),\n            stroke var(--comp-checkbox-tween);\n    }\n\n    :host(:hover[type='favorite']) & {\n        --tct-icon-stroke-primary: #{var-list(\n                --tct-checkbox-favorite-hover-stroke-color,\n                --comp-checkbox-favorite-fill-color\n            )};\n        --tct-icon-stroke-width: #{var-list(var-prefixer(checkbox-favorite-hover-stroke-width), 2)};\n    }\n\n    :host([type='favorite']:focus-within) & {\n        --tct-icon-stroke-primary: #{var-list(\n                --tct-checkbox-favorite-focused-stroke-color,\n                --comp-checkbox-favorite-fill-color\n            )};\n        --tct-icon-stroke-width: #{var-list(var-prefixer(checkbox-favorite-hover-stroke-width), 2)};\n    }\n\n    // Checked favorite\n    :host([checked]:not([checked='false'])[type='favorite']) & {\n        --tct-icon-stroke-primary: #{var-list(\n                --tct-checkbox-favorite-checked-stroke-color,\n                --tct-checkbox-favorite-stroke-color,\n                --comp-checkbox-favorite-fill-color\n            )};\n        fill: var-list(--tct-checkbox-favorite-checked-fill-color, --comp-checkbox-favorite-fill-color);\n        transition:\n            fill var(--comp-checkbox-tween),\n            color var(--comp-checkbox-tween),\n            stroke var(--comp-checkbox-tween);\n    }\n\n    :host([checked]:not([checked='false'])[type='favorite']:hover) & {\n        --tct-icon-stroke-primary: #{var-list(\n                --tct-checkbox-favorite-checked-hover-stroke-color,\n                --tct-checkbox-favorite-hover-stroke-color,\n                --comp-checkbox-favorite-stroke-color\n            )};\n        --tct-icon-fill-primary: #{var-list(\n                --tct-checkbox-favorite-checked-fill-color,\n                --comp-checkbox-favorite-fill-color\n            )};\n        --tct-icon-stroke-width: #{var-list(var-prefixer(checkbox-favorite-hover-stroke-width), 2)};\n    }\n\n    :host([checked]:not([checked='false'])[type='favorite']:focus-within) & {\n        --tct-icon-stroke-primary: #{var-list(\n                --tct-checkbox-favorite-checked-focused-stroke-color,\n                --tct-checkbox-favorite-focused-stroke-color,\n                --comp-checkbox-favorite-stroke-color\n            )};\n        --tct-icon-stroke-width: #{var-list(var-prefixer(checkbox-favorite-hover-stroke-width), 2)};\n    }\n\n    :host([has-error][type='favorite']) & {\n        --tct-icon-stroke-primary: #{var-list(--tct-checkbox-favorite-error-stroke-color, --comp-checkbox-error-color)};\n    }\n    :host([has-error][type='favorite'][checked]:not([checked='false'])) & {\n        --tct-icon-stroke-primary: #{var-list(--tct-checkbox-favorite-error-stroke-color, --comp-checkbox-error-color)};\n    }\n}\n\n.checkbox-fill {\n    stroke: var-list(--tct-checkbox-checkmark-stroke-color, --comp-checkbox-checked-color);\n}\n\n.checked-fill {\n    stroke-width: var-list(var-prefixer(checkbox-check-stroke-width), 2.5);\n    stroke-linecap: round;\n    stroke-linejoin: round;\n\n    :host([type='toggle']) & {\n        stroke: var-list(var-prefixer(checkbox-toggle-icon-stroke), --tct-white, --app-white, #ffffff);\n        transition: opacity var(--comp-checkbox-tween);\n    }\n    :host([type='toggle'][checked]:not([checked='false'])) & {\n        stroke: var-list(\n            var-prefixer(checkbox-toggle-checked-icon-stroke),\n            --t-checkbox-text,\n            --tct-white,\n            --app-white,\n            #ffffff\n        );\n    }\n}\n\n.indeterminate-fill {\n    stroke-width: var-list(var-prefixer(checkbox-indeterminate-stroke-width), 3.5);\n}\n\n.toggle-svg {\n    height: 30px;\n    width: var(--comp-checkbox-toggle-width);\n    position: relative;\n    text-align: initial;\n}\n\n.toggle-track,\n.toggle-indicator {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n}\n\n.toggle-track {\n    fill: var-list(\n        var-prefixer(checkbox-toggle-track-color),\n        var-prefixer(gray-11),\n        --tct-gray-l1,\n        --app-gray-l1,\n        #cccccc\n    );\n    height: 14px;\n    width: 46px;\n\n    :host([checked]:not([checked='false'])) & {\n        fill: var-list(var-prefixer(checkbox-toggle-checked-color), --comp-checkbox-checked-color);\n        opacity: 0.5;\n    }\n    :host([has-error]) & {\n        fill: var-list(--tct-checkbox-toggle-error-color, --tct-stoplight-error, --const-stoplight-alert, #d20a0a);\n        opacity: 0.5;\n    }\n}\n\n.toggle-indicator {\n    transition: left var(--comp-checkbox-tween);\n    height: 30px;\n    width: 30px;\n    left: 0;\n    border-radius: 50%;\n\n    :host([checked]:not([checked='false'])) & {\n        left: 21px;\n    }\n}\n\n.toggle-circle {\n    fill: var-list(var-prefixer(checkbox-toggle-circle-color), --t-a11y-gray-color-AA, #949494);\n    :host([checked]:not([checked='false'])) & {\n        fill: var-list(var-prefixer(checkbox-toggle-checked-color), --comp-checkbox-checked-color);\n    }\n\n    :host(:is(:not([checked]), [checked='false']):focus-within) &,\n    :host(:is(:not([checked]), [checked='false']):hover) & {\n        fill: var-list(var-prefixer(checkbox-toggle-checked-color), --comp-checkbox-checked-color);\n    }\n    :host([has-error]) &,\n    :host([has-error]:focus-within) &,\n    :host([has-error]:hover) & {\n        fill: var-list(--tct-checkbox-toggle-error-color, --tct-stoplight-error, --const-stoplight-alert, #d20a0a);\n    }\n}\n\n.toggle-hover-circle {\n    stroke-width: 0;\n\n    :host(:focus-within) &,\n    :host(:hover) & {\n        stroke: var-list(var-prefixer(checkbox-toggle-checked-color), --comp-checkbox-checked-color);\n        stroke-width: 10px;\n        stroke-opacity: 0.5;\n    }\n\n    :host(:is(:not([checked]), [checked='false']):focus-within) &,\n    :host(:is(:not([checked]), [checked='false']):hover) & {\n        stroke: var-list(var-prefixer(checkbox-toggle-circle-color), --t-a11y-gray-color-AA, #949494);\n    }\n    :host([has-error]) &,\n    :host([has-error]:focus-within) &,\n    :host([has-error]:hover) & {\n        stroke: var-list(--tct-checkbox-toggle-error-color, --tct-stoplight-error, --const-stoplight-alert, #d20a0a);\n    }\n}\n\n:host([checked]:not([checked='false'])) .off,\n:host(:is(:not([checked]), [checked='false'])) .on {\n    opacity: 0;\n}\n","import { Component, ComponentInterface, Prop, Element, Listen, Watch, Event, EventEmitter, h } from '@stencil/core';\nimport { createGuid, handleAriaLabel, isEventFromElement, loc, overrideFocus } from 'src/utils';\n\n@Component({ tag: 'q2-checkbox', shadow: true, styleUrl: 'q2-checkbox.scss' })\nexport class Q2Checkbox implements ComponentInterface {\n    /** Determine which side of the label the checkbox will render on. */\n    @Prop({ reflect: true }) alignment: string;\n\n    /** The state of the checkbox. This modifies the visual appearance of the element. */\n    @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n\n    /**\n     * Populates a description that is displayed beneath the label.\n     * @localizable\n     */\n    @Prop({ reflect: true }) description: string;\n\n    /** Disables the checkbox and prevents interaction. */\n    @Prop({ reflect: true }) disabled: boolean;\n\n    /** Determines if the component should display in an errant state. */\n    @Prop({ reflect: true }) hasError: boolean = false;\n\n    /**\n     * Hide's the field's `<label>` element from view.\n     *\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true, mutable: true }) hideLabel: boolean;\n\n    /**\n     * Used on a parent checkbox in a checkbox group (e.g. \"Select All\") to indicate that some, but not all, checkboxes in a group are checked.\n     *\n     * When `true`, the \"indeterminate\" selection style is applied.\n     * To apply the standard \"checked\" selection style, `checked` must be true, and `indeterminate` must be `false`.\n     */\n    @Prop({ reflect: true }) indeterminate: boolean;\n\n    /**\n     * The visible label text for the checkbox. Appears to the right of the box for 'default' and 'favorite' checkboxes, and to the left for 'toggle' checkboxes.\n     * Yielded content will be adjacent to this text.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true }) label: string;\n\n    /** A static string used to establish a symbolic relationship between checkboxes. */\n    @Prop({ reflect: true }) name: string;\n\n    /** The field is not interactive, but remains focusable. */\n    @Prop({ reflect: true }) readonly: boolean;\n\n    /** The visual style of the checkbox. This does not need to be defined for a standard checkbox. */\n    @Prop({ reflect: true }) type: 'favorite' | 'toggle';\n\n    /** A static reference value for the checkbox. */\n    @Prop({ reflect: true }) value: string;\n\n    /**\n     * Used by q2-checkbox-group to disable all checkboxes in the group\n     * @private\n     */\n    @Prop({ reflect: true }) groupDisabled: boolean;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n    @Element() hostElement: HTMLElement;\n    _id: string = `checkbox-${createGuid()}`;\n    inputElement: HTMLInputElement;\n\n    ////////// LIFECYCLE HOOKS ////////\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n    }\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n        this.hostElement.click = () => this.inputElement.click();\n    }\n\n    //////// Host Element Events ////////\n    @Listen('change')\n    defaultChangeHandler(event: CustomEvent) {\n        // We use setTimeout to give an opportunity to call preventDefault\n        setTimeout(() => this.handleChangeEvent(event), 0);\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.hostElement.shadowRoot.querySelector('input').focus();\n    }\n\n    ////////// OBSERVERS //////////\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    ///// Event ////////\n    /**\n     * Emitted when the checkbox is toggled.\n     * @legacyEvent\n     */\n    @Event() change: EventEmitter<{ value: string; checked: boolean }>;\n\n    ///// Actions ////////\n    onInputClick = (event: Event) => {\n        event.stopPropagation();\n        event.preventDefault();\n\n        const isNotInteractive = this.disabled || this.readonly;\n        if (isNotInteractive) return;\n        if (!(event.target instanceof HTMLInputElement)) return;\n        const { value, checked } = event.target;\n\n        this.change.emit({\n            value,\n            checked,\n        });\n        this.inputElement.focus();\n    };\n\n    handleChangeEvent(event: CustomEvent<{ checked: boolean; value: string }>) {\n        if (\n            this.readonly ||\n            this.disabled ||\n            this.hostElement.onchange ||\n            event.defaultPrevented ||\n            event.target !== this.hostElement ||\n            !event.detail\n        ) {\n            return;\n        }\n        this.checked = event.detail.checked;\n    }\n\n    /////// View Methods ///////\n    render() {\n        const textLabelClasses = ['label-text'];\n        if (this.hideLabel) textLabelClasses.push('sr');\n        return (\n            <div class=\"container\">\n                <input\n                    ref={el => (this.inputElement = el)}\n                    aria-describedby={this.description ? 'description' : undefined}\n                    aria-invalid={`${this.hasError}`}\n                    checked={this.indeterminate || this.checked || false}\n                    class=\"sr\"\n                    disabled={!!this.disabled || !!this.groupDisabled}\n                    id={this._id}\n                    name={this.name || this._id}\n                    onClick={this.onInputClick}\n                    test-id=\"q2CheckboxInnerCheckBox\"\n                    type=\"checkbox\"\n                    value={this.value}\n                />\n                <label\n                    htmlFor={this._id}\n                    class=\"label-control\"\n                    test-id=\"checkboxButton\"\n                >\n                    {this.generateCheckboxSVG()}\n                </label>\n                <div class={textLabelClasses.join(' ')}>\n                    <label\n                        test-id=\"checkboxLabel\"\n                        htmlFor={this._id}\n                    >\n                        {loc(this.label)}\n                        <slot />\n                    </label>\n                </div>\n                {this.description && (\n                    <div\n                        class=\"description-text\"\n                        test-id=\"checkboxDescription\"\n                        id=\"description\"\n                    >\n                        {loc(this.description)}\n                    </div>\n                )}\n            </div>\n        );\n    }\n\n    generateCheckboxSVG() {\n        if (this.type === 'favorite') {\n            return (\n                <q2-icon\n                    type=\"star\"\n                    class=\"checkbox-icon\"\n                />\n            );\n        }\n\n        if (this.type === 'toggle') {\n            return this.generateToggleSVG();\n        }\n\n        return (\n            <svg\n                aria-hidden=\"true\"\n                width=\"20\"\n                height=\"20\"\n                viewBox=\"0 0 20 20\"\n                class=\"checkbox-icon\"\n                focusable=\"false\"\n            >\n                <rect\n                    x=\"1\"\n                    y=\"1\"\n                    width=\"18\"\n                    height=\"18\"\n                    rx=\"3\"\n                />\n                {(this.checked || this.indeterminate) && this.generateCheckBoxSVGFill()}\n            </svg>\n        );\n    }\n\n    generateCheckBoxSVGFill() {\n        if (this.indeterminate) {\n            return (\n                <line\n                    class=\"checkbox-fill indeterminate-fill\"\n                    x1=\"4\"\n                    y1=\"10\"\n                    x2=\"16\"\n                    y2=\"10\"\n                />\n            );\n        }\n        return (\n            <polyline\n                class=\"checkbox-fill checked-fill\"\n                points=\"5 11 8.5 14.5 15 6\"\n            />\n        );\n    }\n\n    generateToggleSVG() {\n        return (\n            <div class=\"toggle-svg\">\n                <svg\n                    aria-hidden=\"true\"\n                    focusable=\"false\"\n                    viewBox=\"0 0 46 14\"\n                    class=\"toggle-track\"\n                    test-id=\"toggleTrack\"\n                >\n                    <rect\n                        width=\"36\"\n                        height=\"14\"\n                        rx=\"7\"\n                        x=\"5\"\n                    />\n                </svg>\n                <svg\n                    aria-hidden=\"true\"\n                    focusable=\"false\"\n                    viewBox=\"0 0 30 30\"\n                    class=\"toggle-indicator\"\n                    test-id=\"toggleIndicator\"\n                >\n                    <circle\n                        class=\"toggle-hover-circle\"\n                        width=\"20\"\n                        height=\"20\"\n                        cx=\"15\"\n                        cy=\"15\"\n                        r=\"10\"\n                    />\n                    <circle\n                        class=\"toggle-circle\"\n                        width=\"20\"\n                        height=\"20\"\n                        cx=\"15\"\n                        cy=\"15\"\n                        r=\"10\"\n                    />\n                    <line\n                        class=\"off checked-fill\"\n                        x1=\"12\"\n                        y1=\"18\"\n                        x2=\"18\"\n                        y2=\"12\"\n                    />\n                    <line\n                        class=\"off checked-fill\"\n                        x1=\"12\"\n                        y1=\"12\"\n                        x2=\"18\"\n                        y2=\"18\"\n                    />\n                    <polyline\n                        class=\"on checked-fill\"\n                        points=\"11,16 14,19 18,12 14,19\"\n                    />\n                </svg>\n            </div>\n        );\n    }\n}\n"],"mappings":"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"}

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

@@ -1 +0,0 @@
-{"version":3,"names":["q2SelectCss","Q2SelectStyle0","Q2Select","this","scheduledAfterRender","showSelectedOptions","showSelected","showAllOptions","onMutationObserved","hostElement","hasPopoverTop","hasPopoverBottom","slotContainer","querySelector","displaySlot","shadowRoot","hasCustomDisplay","assignedNodes","length","children","popTopSlot","topSlotHasNode","popBottomSlot","bottomSlotHasNode","checkSelectedOptions","onOptionListChange","event","stopPropagation","values","detail","handleSelectionChanges","onPopoverState","open","action","searchText","optionList","setActiveElement","inputField","focus","inputKeydownHandler","readonly","disabled","key","hasSlot","isShiftTab","shiftKey","shouldShowActionSheet","executeActionSheet","keysForOptionListToHandle","searchable","includes","shouldClearSearchText","clearSearchText","preventDefault","handleExternalKeydown","visibilityToggleKeyDown","isRadioControlKey","setDefaultActiveElement","inputClickHandler","async","toggleDropdown","focusInput","inputInputHandler","eventValue","value","shouldClearValue","clearValue","openDropdownWithoutActiveElement","prioritizeSearch","input","emit","query","inputFocusHandler","inputFocused","inputBlurHandler","inputChangeHandler","clickedElsewhere","target","localName","onCustomDisplayClick","_a","window","Tecton","useActionSheets","loc","componentWillLoad","handleAriaLabel","buildStructuredSelectedOptions","handleMultilineOptionsUpdate","multilineOptions","componentDidLoad","observer","MutationObserver","observe","childList","subtree","mutationObserver","overrideFocus","setTimeout","checkSelectedDisplay","componentDidRender","forEach","fn","disconnectedCallback","disconnect","innerInputField","_b","innerInputContainer","badgeValue","multiple","optionsLength","selectedOptions","popoverMinHeight","minRows","firstOption","minHeight","getComputedStyle","parseInt","selectedDisplay","calculateMultiSelectSelectedDisplay","calculateSingleSelectSelectedDisplay","selectedDisplaySlot","firstSelectedValue","firstSelectedOptionElement","optionElements","find","Array","from","querySelectorAll","wrapperClasses","errors","classes","isArray","push","join","structuredSelectedOptions","map","option","ariaLabelObserver","valueUpdated","newValue","oldValue","element","multiline","openChanged","isOpen","waitForNextPaint","popoverTopContainer","popoverElement","height","offsetHeight","style","setProperty","removeProperty","_togglePopover","click","dispatchEvent","FocusEvent","openPopover","closePopover","setValue","options","valuesSet","Set","searchOptions","InputEvent","keydownHandler","onHostElementChange","onchange","onHostElementInput","oninput","trim","toLocaleLowerCase","matchedCount","hidden","title","firstElementChild","tagName","display","innerText","searchParams","matched","some","text","statusMessageLocString","count","setStatusMessage","delegateFocus","fromHost","isRelatedTargetWithinHost","clearSelectedDisplay","isEventFromElement","handleFocusout","isLeavingHost","isHostLosingFocus","closeDropdown","handleSelectedDisplay","result","showActionSheetList","changeDetails","selectedOptionValues","change","undefined","_c","textContent","message","clearTimeout","statusMessageTimer","statusMessage","selected","remove","namedSlot","hasNoValue","selectionClone","cloneNode","clientHeight","outerHTML","replaceChild","document","createElement","slot","appendChild","checkSelectedDisplayHeight","renderCustomDisplay","hasSelectedDisplay","h","name","render","showAsPseudo","class","onChange","role","ref","el","label","clearable","error","invalid","optional","placeholder","hideLabel","ariaExpanded","ariaControls","ariaHaspopup","pseudo","iconRight","onClick","onInput","onKeyDown","onFocus","onBlur","badgeTheme","_role","optionsDropdown","controlElement","direction","popDirection","mode","popoverMode","block","type","id","listLabel","tabindex","visibilityToggle","selectedOptionsCount","checked","htmlFor"],"sources":["src/components/q2-select/q2-select.scss?tag=q2-select&encapsulation=shadow","src/components/q2-select/q2-select.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../../styles/dropdowns';\n\n:host {\n    --comp-select-margin: #{var-list(\n            --tct-select-margin,\n            unquote(\n                '#{var-list(var-prefixer(select-margin-top), --app-scale-4, 30px)} 0 #{var-list(var-prefixer(select-margin-bottom), --app-scale-4, 30px)}'\n            )\n        )};\n    display: block;\n    margin: var(--comp-select-margin);\n}\n\n.q2-select-container {\n    position: relative;\n    display: block;\n}\n\n.q2-select-input {\n    margin: 0;\n\n    --tct-input-min-height: #{var-list(var-prefixer(select-input-min-height))};\n    --tct-input-max-height: #{var-list(var-prefixer(select-input-max-height), none)};\n}\n\n::slotted([slot='_selected-display']) {\n    width: 100%;\n    min-height: var(--comp-selected-display-height, 44px);\n}\n\n.custom-display-content {\n    position: absolute;\n    bottom: 0;\n    left: calc(var-list(--tct-scale-2, --app-scale-2x, 10px) + 1px);\n    height: 44px;\n    width: calc(100% - 34px - var-list(--tct-scale-3, --app-scale-3x, 15px));\n    overflow: hidden;\n    cursor: pointer;\n    transition: left var-list(--tct-tween-2, --app-tween-1, unquote('0.2s ease'));\n}\n\n.custom-display-content:not([hidden]) {\n    display: flex;\n    align-items: center;\n}\n\n.is-searchable.is-focused .custom-display-content,\n.is-searchable .custom-display-content:active {\n    left: calc(var-list(--tct-scale-3, --app-scale-3x, 15px) + 1px);\n}\n\n.has-error .custom-display-content {\n    width: calc(100% - 68px - var-list(--tct-scale-3, --app-scale-3x, 15px));\n}\n\n.popover-content {\n    display: flex;\n    flex-direction: column-reverse;\n}\n\n.popover-bottom-container {\n    position: sticky;\n    bottom: 0;\n    z-index: 5;\n}\n\n.popover-top-container {\n    position: sticky;\n    top: 0;\n    z-index: 5;\n    .multi-select-header {\n        padding: var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-2, var(--app-scale-2x, 10px));\n        background: var(--app-white);\n        display: flex;\n        gap: var-list(--app-scale-2x, 10px);\n        align-items: center;\n\n        fieldset {\n            margin: 0;\n            padding: 0;\n            border: 0;\n            display: flex;\n            gap: var-list(--app-scale-2x, 10px);\n        }\n\n        legend {\n            padding: 0;\n            float: left;\n        }\n\n        label {\n            cursor: pointer;\n            padding: var-list(\n                var-prefixer(select-multi-select-option-padding),\n                var-prefixer(btn-badge-padding),\n                unquote('2px 5px')\n            );\n            font-size: var-list(\n                var-prefixer(select-multi-select-option-font-size),\n                var-prefixer(btn-badge-font-size),\n                inherit\n            );\n            border-radius: var-list(\n                var-prefixer(select-multi-select-option-radius),\n                var-prefixer(btn-badge-border-radius),\n                --app-border-radius-1,\n                3px\n            );\n            background: var-list(\n                --tct-select-multi-select-option-background,\n                var-prefixer(select-multi-select-option-bg),\n                --tct-badge-background,\n                var-prefixer(btn-badge-bg),\n                transparent\n            );\n            color: var-list(\n                var-prefixer(select-multi-select-option-color),\n                var-prefixer(btn-badge-font-color),\n                inherit\n            );\n\n            &:hover {\n                background: var-list(\n                    --tct-select-multi-select-option-hover-background,\n                    var-prefixer(select-multi-select-option-hover-background-color),\n                    var-prefixer(btn-badge-hover-bg),\n                    var-prefixer(gray-14),\n                    --app-gray-l3,\n                    #f2f2f2\n                );\n                color: var-list(\n                    --tct-select-multi-select-option-hover-color,\n                    var-prefixer(select-multi-select-option-color),\n                    var-prefixer(btn-badge-hover-font-color),\n                    var-prefixer(gray-5),\n                    --app-gray-d2,\n                    #404040\n                );\n            }\n        }\n\n        input {\n            &:checked + label {\n                &,\n                &:enabled:hover {\n                    background: var-list(\n                        --tct-select-multi-select-option-active-background,\n                        var-prefixer(select-multi-select-option-active-background-color),\n                        var-prefixer(btn-primary-bg),\n                        #2e2e2e\n                    );\n                    color: var-list(\n                        var-prefixer(select-multi-select-option-active-color),\n                        var-prefixer(btn-primary-font-color),\n                        --app-white,\n                        #ffffff\n                    );\n                }\n            }\n\n            &:disabled + label {\n                opacity: var-list(\n                    var-prefixer(select-multi-select-option-disabled-opacity),\n                    var-prefixer(btn-disabled-opacity),\n                    --app-disabled-opacity,\n                    0.4\n                );\n                cursor: not-allowed;\n            }\n\n            &:focus + label {\n                box-shadow: var(--const-double-focus-ring);\n            }\n        }\n    }\n}\n","import {\n    Component,\n    Prop,\n    Element,\n    h,\n    Listen,\n    State,\n    EventEmitter,\n    Event,\n    ComponentInterface,\n    Watch,\n    Method,\n} from '@stencil/core';\nimport { IEventDetail, Q2InputCustomEvent, Q2OptionListCustomEvent } from 'src/components';\nimport {\n    handleAriaLabel,\n    isEventFromElement,\n    isHostLosingFocus,\n    isRelatedTargetWithinHost,\n    loc,\n    overrideFocus,\n    waitForNextPaint,\n} from '../../utils';\nimport { IOptionValue } from '../q2-option-list/q2-option-list';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\n\n@Component({ tag: 'q2-select', shadow: true, styleUrl: 'q2-select.scss' })\nexport class Q2Select implements ComponentInterface {\n    /** Disables all interaction with the field and leverages the disabled visual style of `q2-input`. */\n    @Prop({ reflect: true }) disabled: boolean = false;\n\n    /**\n     * The presence of `errors` will mark the field as invalid, putting it into an error state.\n     * @localizable\n     */\n    @Prop() errors: string[];\n\n    /**\n     * Hide's the field's `<label>` element from view.\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true, mutable: true }) hideLabel: boolean;\n\n    /** Renders an icon button when the field is non-empty. Pressing the button clears all input from the field. */\n    @Prop({ reflect: true }) clearable: boolean;\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     * @warning\n     * If your `q2-select` renders inside of an iframe, and you are using multiline/robust content options,\n     * any custom CSS you apply to your options will not get passed up to the platform which displays the action sheet.\n     * For this reason, we strongly suggest using the [q2-card](https://tecton.q2developer.com/ui/q2-card/) component since its styling is managed by Tecton.\n     */\n    @Prop() hoist: boolean = !!window.Tecton?.useActionSheets;\n\n    /** Determines whether to show an error state. Its primary use-case is for an unfilled field. */\n    @Prop({ reflect: true }) invalid: boolean;\n\n    /**\n     * The text that will be used as the label for the field.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true }) label: string;\n\n    /**\n     * Determines the label that is applied to the option list for accessibility purposes.\n     * @localizable\n     */\n    @Prop() listLabel: string = loc('tecton.element.select.listLabel');\n\n    /** The minimum number of rows the component will try to display below or above the component when opened. */\n    @Prop() minRows: number = 3;\n\n    /** Enables text wrapping for `q2-option` elements. When `false`, the text truncates and does not wrap. */\n    @Prop({ reflect: true }) multilineOptions: boolean = false;\n\n    /** Enables multi-select functionality. */\n    @Prop({ reflect: true }) multiple: boolean = false;\n\n    /** Appends \"(optional)\" to the field label, and sets `aria-required` on the nested input tag to `false`. */\n    @Prop({ reflect: true }) optional: boolean = false;\n\n    /**\n     * Text that appears within the field when it is blurred and empty.\n     * Placeholder text disappears when the user selects an option.\n     * @localizable\n     */\n    @Prop({ reflect: true }) placeholder: string;\n\n    /** @deprecated */\n    @Prop({ reflect: true }) popDirection: 'up' | 'down';\n\n    /**\n     * Determines the display mode of the popover.\n     *\n     * Providing a value of `legacy` instructs the popover to use absolute positioning instead of fixed positioning.\n     *\n     * @info\n     * This is a temporary solution to work around styling issues related to using fixed positioning for the popover\n     * when nested inside of elements with transform properties. This will be removed once the popover API is available\n     * for use.\n     */\n    @Prop({ mutable: true }) popoverMode: 'legacy' = null;\n\n    /**\n     * Appends \"(read only)\" to the field label, and field becomes unusable, but remains focusable.\n     * Takes priority over `optional` if both are `true`.\n     */\n    @Prop({ reflect: true }) readonly: boolean = false;\n\n    /** Enables search functionality. */\n    @Prop({ reflect: true }) searchable: boolean = false;\n\n    /**\n     * Each item in this array should correspond to the value of a `q2-option` element.\n     * This property is only relevant for `multiple` (i.e., multi-select) implementations.\n     */\n    @Prop({ mutable: true }) selectedOptions: string[] = [];\n\n    /**\n     * The current value for the select. This should correspond to the value of a nested q2-option element.\n     * This property is only relevant for single-select implementations.\n     */\n    @Prop({ mutable: true }) value: string;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n    @Element() hostElement: HTMLElement;\n\n    @State() open: boolean = false;\n    @State() showSelected: boolean = false;\n    @State() searchText: string = '';\n    @State() hasCustomDisplay: boolean = false;\n    @State() hasPopoverTop: boolean = false;\n    @State() hasPopoverBottom: boolean = false;\n    @State() inputFocused: boolean = false;\n    @State() statusMessage: string;\n    @State() prioritizeSearch: boolean = false;\n    @State() structuredSelectedOptions: IOptionValue[] = [];\n\n    inputField?: HTMLQ2InputElement;\n    optionList: HTMLQ2OptionListElement;\n    popoverElement?: HTMLQ2PopoverElement;\n    popoverTopContainer?: HTMLDivElement;\n    scheduledAfterRender: (() => void)[] = [];\n    mutationObserver: MutationObserver;\n\n    /// Lifecycle Hooks ///\n    componentWillLoad() {\n        handleAriaLabel(this);\n        this.buildStructuredSelectedOptions();\n        this.handleMultilineOptionsUpdate(this.multilineOptions, false);\n    }\n\n    componentDidLoad() {\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true, subtree: true });\n        this.mutationObserver = observer;\n        this.onMutationObserved();\n        overrideFocus(this.hostElement);\n        setTimeout(() => this.checkSelectedDisplay(), 0);\n    }\n\n    componentDidRender() {\n        setTimeout(() => {\n            this.scheduledAfterRender.forEach(fn => fn());\n            this.scheduledAfterRender = [];\n        }, 25);\n    }\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    /// Getters ///\n    get innerInputField(): HTMLInputElement | HTMLButtonElement {\n        return this.inputField?.shadowRoot?.querySelector('.input-field');\n    }\n\n    get innerInputContainer(): HTMLElement {\n        return this.inputField?.shadowRoot?.querySelector('.input-container');\n    }\n\n    get badgeValue(): string {\n        if (!this.multiple) return null;\n        const optionsLength = this.selectedOptions?.length ?? 0;\n        if (this.open && this.searchable) return optionsLength ? `${optionsLength}` : null;\n        else return optionsLength > 1 ? `+${optionsLength - 1}` : null;\n    }\n\n    get popoverMinHeight() {\n        const { minRows } = this;\n        const firstOption = this.hostElement.querySelector<HTMLQ2OptionElement>('q2-option:not([hidden])');\n        let minHeight = firstOption && window.getComputedStyle(firstOption).minHeight;\n\n        // Safari doesn't return a min-height for non-visible items\n        if (!minHeight || minHeight === '0px') minHeight = '44px';\n\n        return minRows * parseInt(minHeight);\n    }\n\n    get selectedDisplay() {\n        if (this.prioritizeSearch || this.searchText) return this.searchText;\n        if (this.hasCustomDisplay) return '';\n        return this.multiple ? this.calculateMultiSelectSelectedDisplay() : this.calculateSingleSelectSelectedDisplay();\n    }\n\n    get selectedDisplaySlot() {\n        return this.hostElement.querySelector<HTMLElement>('[slot=\"_selected-display\"]');\n    }\n\n    get firstSelectedValue() {\n        return this.multiple ? this.selectedOptions?.[0] : this.value;\n    }\n\n    get firstSelectedOptionElement() {\n        const { firstSelectedValue } = this;\n        return firstSelectedValue ? this.optionElements.find(({ value }) => value === firstSelectedValue) : null;\n    }\n\n    get optionElements() {\n        return Array.from(this.hostElement.querySelectorAll<HTMLQ2OptionElement>('q2-option'));\n    }\n\n    get wrapperClasses() {\n        const { errors } = this;\n        const classes = ['q2-select-container'];\n        if (Array.isArray(errors) && errors.length > 0) classes.push('has-error');\n        if (this.inputFocused) classes.push('is-focused');\n        if (this.searchable) classes.push('is-searchable');\n        return classes.join(' ');\n    }\n\n    /// Watchers ///\n    @Watch('value')\n    @Watch('selectedOptions')\n    buildStructuredSelectedOptions() {\n        const { multiple, selectedOptions, value } = this;\n        if (multiple) {\n            this.structuredSelectedOptions = !!selectedOptions?.length\n                ? selectedOptions.map(option => (typeof option === 'string' ? { value: option } : option))\n                : [];\n        } else {\n            this.structuredSelectedOptions = value ? [{ value }] : [];\n        }\n    }\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    @Watch('value')\n    valueUpdated() {\n        if (this.multiple) return;\n        this.clearSearchText();\n    }\n\n    @Watch('multilineOptions')\n    handleMultilineOptionsUpdate(newValue, oldValue) {\n        if (newValue === oldValue) return;\n        this.optionElements.forEach(element => (element.multiline = newValue));\n    }\n\n    @Watch('open')\n    openChanged(isOpen: boolean) {\n        this.scheduledAfterRender.push(async () => {\n            await waitForNextPaint();\n            const { popoverTopContainer, popoverElement } = this;\n            const height = (isOpen && popoverTopContainer?.offsetHeight) || 0;\n            if (height) {\n                popoverElement.style.setProperty('--comp-popover-top-container-height', `${height}px`);\n            } else {\n                popoverElement.style.removeProperty('--comp-popover-top-container-height');\n            }\n        });\n    }\n\n    /// Events ///\n    /**\n     * Emitted when an option is selected or deselected.\n     *\n     * When the multi-select is enabled, the `value` property will be `undefined` and the `selectedOptions` property\n     * will contain the selected option values.\n     *\n     * @legacyEvent\n     */\n    @Event() change: EventEmitter<{ value: string; selectedOptions: string[] }>;\n\n    /**\n     * Emitted when the input value changes.\n     *\n     * Requires the `searchable` prop to be set to `true`.\n     */\n    @Event() input: EventEmitter<{ query: string }>;\n\n    /// Methods ///\n    _togglePopover() {\n        const { innerInputField } = this;\n        innerInputField?.click();\n        innerInputField?.focus();\n        innerInputField.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    /**\n     * Emulates clicking the `<input>` to display the popover if it is hidden.\n     *\n     * @testOnly\n     */\n    @Method()\n    async openPopover() {\n        if (this.open || this.disabled) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates clicking the `<input>` to hide the popover if it is visible.\n     *\n     * @testOnly\n     */\n    @Method()\n    async closePopover() {\n        if (!this.open || this.disabled) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates clicking the `<input>` to display the popover and selecting the option(s) with the specified value(s).\n     *\n     * If the multi-select is enabled and the `closePopover` argument is `true` (default), the popover will be closed\n     * after the option(s) are selected.\n     *\n     * @testOnly\n     */\n    @Method()\n    async setValue(values: string | string[], options: { closePopover?: boolean } = { closePopover: true }) {\n        const valuesSet = new Set(Array.isArray(values) ? values : [values]);\n        if (!this.open) {\n            await this.openPopover();\n            await waitForNextPaint();\n        }\n\n        valuesSet.forEach(value => {\n            this.optionElements.find(option => option.value === value)?.click();\n        });\n\n        if (options.closePopover) {\n            await this.closePopover();\n            await waitForNextPaint();\n        }\n    }\n\n    /**\n     * Emulates focusing the `<input>`, entering the provided value, and emitting an `input` event.\n     *\n     * @warning\n     * Only applicable when the input is searchable.\n     *\n     * @testOnly\n     */\n    @Method()\n    searchOptions(query: string) {\n        if (!this.searchable) return;\n\n        const { innerInputField } = this;\n        innerInputField.focus();\n        innerInputField.dispatchEvent(new FocusEvent('focus'));\n        innerInputField.value = query;\n        innerInputField.dispatchEvent(new InputEvent('input'));\n    }\n\n    /// Listeners ///\n    @Listen('keydown')\n    keydownHandler(event: KeyboardEvent) {\n        this.inputKeydownHandler(event);\n    }\n\n    @Listen('change')\n    onHostElementChange(event: CustomEvent<{ value: string; selectedOptions: string[] }>) {\n        if (this.readonly || this.disabled) return;\n        if (event.target !== this.hostElement || this.hostElement.onchange) return;\n        if (this.multiple) {\n            this.value = null;\n            this.selectedOptions = event.detail.selectedOptions;\n        } else {\n            this.value = event.detail.value;\n            this.selectedOptions = [];\n        }\n    }\n\n    @Listen('input')\n    onHostElementInput(event: CustomEvent) {\n        if (!this.searchable || event.target !== this.hostElement || this.hostElement.oninput) return;\n        const options = this.optionElements;\n        const query = this.searchText.trim().toLocaleLowerCase();\n        let matchedCount = 0;\n        options.forEach(option => {\n            if (query === '') {\n                option.hidden = false;\n                return;\n            }\n\n            const title =\n                option.firstElementChild?.tagName === 'Q2-CARD'\n                    ? (option.firstElementChild as HTMLQ2CardElement).title\n                    : null;\n            const { display = '', innerText = '' } = option;\n            const searchParams = [display, title, innerText];\n            const matched = searchParams.some(text => text?.toLocaleLowerCase().includes(query) ?? false);\n\n            option.hidden = !matched;\n            if (matched) matchedCount++;\n        });\n\n        const statusMessageLocString = query\n            ? 'tecton.element.select.searchable.results'\n            : 'tecton.element.select.allOptions';\n        const count = query ? matchedCount : options.length;\n        this.setStatusMessage(loc(statusMessageLocString, [count]));\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        const fromHost = isRelatedTargetWithinHost(event, this.hostElement);\n        const prioritizeSearch = (this.prioritizeSearch = fromHost && this.searchable);\n        if (prioritizeSearch) {\n            this.clearSelectedDisplay();\n        } else if (isEventFromElement(event, this.hostElement)) {\n            this.inputField.shadowRoot.querySelector<HTMLElement>('.input-field').focus();\n        }\n    }\n\n    @Listen('focusout')\n    handleFocusout(event: FocusEvent) {\n        const isLeavingHost = isHostLosingFocus(event, this.hostElement);\n        if (isLeavingHost) this.closeDropdown();\n        this.prioritizeSearch = !isLeavingHost && this.searchable;\n    }\n\n    @Listen('displayChanged')\n    handleSelectedDisplay(event: CustomEvent) {\n        if (this.multiple) return;\n        this.inputField.value = event.detail.display;\n    }\n\n    /// Helpers ///\n    async executeActionSheet(event: MouseEvent | KeyboardEvent) {\n        const result = await showActionSheetList(this, event);\n        this.handleSelectionChanges(result);\n    }\n\n    handleSelectionChanges(changeDetails: { value?: string; values?: IOptionValue[] }) {\n        const { value = '', values = [] } = changeDetails;\n        const selectedOptionValues = values.map(value => value.value);\n        const { multiple } = this;\n        if (!this.hostElement.onchange) {\n            this.selectedOptions = selectedOptionValues;\n        }\n\n        this.change.emit({\n            value: multiple ? undefined : value,\n            selectedOptions: multiple ? selectedOptionValues : undefined,\n        });\n    }\n\n    showSelectedOptions = () => {\n        this.showSelected = true;\n    };\n\n    showAllOptions = () => {\n        this.showSelected = false;\n    };\n\n    clearValue() {\n        const { multiple } = this;\n        this.value = '';\n        this.selectedOptions = [];\n        this.change.emit({ value: multiple ? undefined : '', selectedOptions: multiple ? [] : undefined });\n    }\n\n    calculateMultiSelectSelectedDisplay() {\n        const { firstSelectedOptionElement, firstSelectedValue, multilineOptions } = this;\n        if (!firstSelectedValue) return '';\n        if (firstSelectedOptionElement?.display) return loc(firstSelectedOptionElement.display);\n        if (multilineOptions && this.searchable) return this.searchText;\n        if (multilineOptions) return '';\n        return (\n            firstSelectedOptionElement?.textContent?.trim() ?? firstSelectedOptionElement?.value ?? firstSelectedValue\n        );\n    }\n\n    calculateSingleSelectSelectedDisplay() {\n        const { firstSelectedOptionElement, multilineOptions } = this;\n        if (multilineOptions) {\n            return (firstSelectedOptionElement?.display && loc(firstSelectedOptionElement.display)) || this.value || '';\n        } else {\n            return (\n                (firstSelectedOptionElement?.display && loc(firstSelectedOptionElement.display)) ||\n                firstSelectedOptionElement?.textContent?.trim() ||\n                this.value ||\n                ''\n            );\n        }\n    }\n\n    onMutationObserved = () => {\n        const { hostElement, hasPopoverTop, hasPopoverBottom } = this;\n        const slotContainer = hostElement.querySelector('.custom-display-content');\n        const displaySlot = hostElement.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"q2-select-display\"]');\n        const hasCustomDisplay = !!displaySlot\n            ? displaySlot.assignedNodes().length > 0\n            : slotContainer.children.length > 0;\n\n        if (this.hasCustomDisplay !== hasCustomDisplay) {\n            this.hasCustomDisplay = hasCustomDisplay;\n        }\n\n        const popTopSlot = hostElement.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"popover-top\"]');\n        const topSlotHasNode = popTopSlot.assignedNodes().length > 0;\n        if (hasPopoverTop !== topSlotHasNode) {\n            this.hasPopoverTop = topSlotHasNode;\n        }\n\n        const popBottomSlot = hostElement.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"popover-bottom\"]');\n        const bottomSlotHasNode = popBottomSlot.assignedNodes().length > 0;\n        if (hasPopoverBottom !== bottomSlotHasNode) {\n            this.hasPopoverBottom = bottomSlotHasNode;\n        }\n\n        this.checkSelectedOptions();\n    };\n\n    onOptionListChange = (event: Q2OptionListCustomEvent<{ value: string; values: IOptionValue[] }>) => {\n        event.stopPropagation();\n        const { values } = event.detail;\n\n        if (values.length === 0) this.showAllOptions();\n        this.handleSelectionChanges(event.detail);\n    };\n\n    openDropdownWithoutActiveElement() {\n        if (this.readonly || this.disabled) return;\n        this.optionList.setActiveElement(null);\n        this.open = true;\n    }\n\n    closeDropdown() {\n        this.open = false;\n        this.clearSearchText();\n    }\n\n    clearSearchText() {\n        if (!this.searchText) return;\n        this.searchText = '';\n        this.input.emit({ query: '' });\n    }\n\n    toggleDropdown() {\n        if (this.readonly || this.disabled) return;\n\n        if (this.open && !this.searchText) {\n            this.closeDropdown();\n        } else {\n            this.openDropdownWithoutActiveElement();\n        }\n    }\n\n    focusInput() {\n        this.inputField?.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    statusMessageTimer: NodeJS.Timeout;\n    setStatusMessage(message) {\n        clearTimeout(this.statusMessageTimer);\n        this.statusMessage = '';\n        this.statusMessageTimer = setTimeout(() => {\n            this.statusMessage = message;\n        }, 1000);\n    }\n\n    checkSelectedOptions() {\n        const { multiple, selectedOptions, value } = this;\n        this.optionElements.forEach(option => {\n            if (multiple) {\n                option.selected = selectedOptions.includes(option.value);\n            } else {\n                option.selected = option.value === value;\n            }\n        });\n    }\n\n    clearSelectedDisplay() {\n        this.selectedDisplaySlot?.remove();\n    }\n\n    checkSelectedDisplay() {\n        let namedSlot = this.selectedDisplaySlot;\n        const { value, multiple, selectedOptions, multilineOptions, firstSelectedOptionElement, prioritizeSearch } =\n            this;\n        const hasNoValue = !value && multiple && !selectedOptions?.length;\n        if (prioritizeSearch || !multilineOptions || hasNoValue) return this.clearSelectedDisplay();\n\n        if (!firstSelectedOptionElement || firstSelectedOptionElement.display) return this.clearSelectedDisplay();\n\n        // Clone selected option and remove elements with hide-on-select attribute\n        const selectionClone = firstSelectedOptionElement.firstElementChild.cloneNode(true) as HTMLElement;\n        selectionClone.querySelectorAll('[hide-on-select]').forEach(element => element.remove());\n\n        if (namedSlot) {\n            const height = namedSlot.clientHeight === 0 ? 'auto' : `${namedSlot.clientHeight}px`;\n            namedSlot.style.setProperty('--comp-selected-display-height', height);\n            if (namedSlot.firstElementChild.outerHTML !== selectionClone.outerHTML) {\n                namedSlot.replaceChild(selectionClone, namedSlot.firstElementChild);\n            }\n        } else {\n            namedSlot = document.createElement('div');\n            namedSlot.slot = '_selected-display';\n            namedSlot.appendChild(selectionClone);\n            this.hostElement.appendChild(namedSlot);\n        }\n        return namedSlot;\n    }\n\n    checkSelectedDisplayHeight() {\n        const { selectedDisplaySlot } = this;\n        if (!selectedDisplaySlot) return;\n        selectedDisplaySlot.style.setProperty('--comp-selected-display-height', '44px');\n    }\n\n    /// Event handlers ///\n    onPopoverState = ({\n        detail: { open, action },\n    }: CustomEvent<{ open: boolean; action: 'close' | 'select' | 'open' }>) => {\n        if (!open || this.searchText) {\n            if (action !== 'select') {\n                this.optionList.setActiveElement(null);\n            }\n            this.inputField.focus();\n        }\n\n        if (this.open === open) return;\n        this.open = open;\n    };\n\n    inputKeydownHandler = (event: KeyboardEvent) => {\n        if (this.readonly || this.disabled) return;\n        const key = event.key;\n        const hasSlot = this.hasPopoverTop || this.hasPopoverBottom;\n        const isShiftTab = key === 'Tab' && event.shiftKey;\n        if (hasSlot && (key === 'Tab' || key === 'Enter' || isShiftTab)) return;\n        if (shouldShowActionSheet(this, event)) {\n            return this.executeActionSheet(event);\n        }\n\n        const keysForOptionListToHandle = [\n            'ArrowDown',\n            'ArrowUp',\n            'PageDown',\n            'PageUp',\n            'Home',\n            'End',\n            'Escape',\n            'Tab',\n        ];\n        if (this.searchable && !keysForOptionListToHandle.includes(key)) return;\n        if (this.shouldClearSearchText(event)) this.clearSearchText();\n\n        // Prevent click event from firing when spacebar is pressed\n        if (key === ' ') event.preventDefault();\n\n        this.optionList.handleExternalKeydown(event);\n    };\n\n    shouldClearSearchText(event: KeyboardEvent) {\n        return this.searchable && !!this.searchText && event.key === 'Escape';\n    }\n\n    visibilityToggleKeyDown = (event: KeyboardEvent) => {\n        const key = event.key;\n        const isShiftTab = key === 'Tab' && event.shiftKey;\n        const isRadioControlKey = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(key);\n        if (isRadioControlKey) event.stopPropagation();\n        if (isShiftTab) {\n            event.stopPropagation();\n            // allows shift+tab keys to select the top slot when present\n            if (this.hasPopoverTop) return;\n\n            this.optionList.setDefaultActiveElement();\n        }\n    };\n\n    inputClickHandler = async (event: MouseEvent) => {\n        event.stopPropagation();\n        if (shouldShowActionSheet(this)) {\n            return this.executeActionSheet(event);\n        }\n        this.toggleDropdown();\n        this.focusInput();\n    };\n\n    inputInputHandler = (event: Q2InputCustomEvent<IEventDetail> & InputEvent) => {\n        event.stopPropagation();\n        const eventValue = event.detail.value;\n        const shouldClearValue = !!this.value;\n\n        if (shouldClearValue) this.clearValue();\n        if (!this.open) this.openDropdownWithoutActiveElement();\n\n        this.prioritizeSearch = true;\n        this.searchText = eventValue;\n        this.input.emit({ query: eventValue });\n    };\n\n    inputFocusHandler = () => {\n        this.inputFocused = true;\n    };\n\n    inputBlurHandler = () => {\n        this.inputFocused = false;\n    };\n\n    inputChangeHandler = (event: Event) => {\n        event.stopPropagation();\n    };\n\n    clickedElsewhere = (event: CustomEvent) => {\n        const target = event.target as HTMLClickElsewhereElement;\n        if (target.localName !== 'click-elsewhere') return;\n        event.stopPropagation();\n    };\n\n    onCustomDisplayClick = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.focusInput();\n        this.toggleDropdown();\n    };\n\n    /// DOM ///\n    renderCustomDisplay() {\n        const hasSelectedDisplay = this.checkSelectedDisplay();\n        if (!hasSelectedDisplay) return;\n        this.checkSelectedDisplayHeight();\n\n        return (\n            <slot\n                name=\"_selected-display\"\n                slot=\"custom-display\"\n            />\n        );\n    }\n\n    render() {\n        const showAsPseudo = !this.searchable;\n\n        return (\n            <click-elsewhere\n                class={this.wrapperClasses}\n                onChange={this.clickedElsewhere}\n            >\n                <div\n                    aria-live=\"polite\"\n                    aria-atomic=\"true\"\n                    role=\"status\"\n                    class=\"sr\"\n                >\n                    {this.statusMessage}\n                </div>\n                <q2-input\n                    ref={el => (this.inputField = el)}\n                    class=\"q2-select-input\"\n                    label={(this.label && loc(this.label)) || ''}\n                    value={this.selectedDisplay}\n                    clearable={(this.clearable && (!!this.value || !!this.selectedOptions?.length)) || undefined}\n                    errors={\n                        (Array.isArray(this.errors) &&\n                            this.errors.length > 0 &&\n                            this.errors.map(error => loc(error))) ||\n                        (this.invalid && ['tecton.element.select.invalid']) ||\n                        []\n                    }\n                    disabled={this.disabled}\n                    optional={this.optional}\n                    readonly={this.readonly}\n                    placeholder={this.placeholder || undefined}\n                    hideLabel={this.hideLabel}\n                    ariaExpanded={`${this.open}`}\n                    ariaControls=\"option-list\"\n                    ariaHaspopup=\"listbox\"\n                    role=\"combobox\"\n                    pseudo={showAsPseudo}\n                    test-id=\"toggleDropdown\"\n                    hide-messages\n                    iconRight=\"chevron-down\"\n                    onClick={this.inputClickHandler}\n                    onInput={this.inputInputHandler}\n                    onKeyDown={this.inputKeydownHandler}\n                    onFocus={this.inputFocusHandler}\n                    onBlur={this.inputBlurHandler}\n                    onChange={this.inputChangeHandler}\n                    badgeValue={this.badgeValue}\n                    badgeTheme={this.inputFocused ? 'primary' : undefined}\n                    _role=\"combobox\"\n                >\n                    {this.renderCustomDisplay()}\n                </q2-input>\n                <div\n                    class=\"custom-display-content\"\n                    hidden={!this.hasCustomDisplay || !!this.searchText}\n                    onClick={this.onCustomDisplayClick}\n                >\n                    <slot name=\"q2-select-display\" />\n                </div>\n                {this.optionsDropdown()}\n            </click-elsewhere>\n        );\n    }\n\n    optionsDropdown() {\n        return (\n            <q2-popover\n                ref={el => (this.popoverElement = el)}\n                controlElement={this.innerInputContainer}\n                open={this.open}\n                minHeight={this.popoverMinHeight}\n                direction={this.popDirection}\n                mode={this.popoverMode || undefined}\n                block\n            >\n                <div class=\"popover-content\">\n                    <q2-option-list\n                        onPopoverState={this.onPopoverState}\n                        ref={el => (this.optionList = el)}\n                        type=\"listbox\"\n                        id=\"option-list\"\n                        show-selected={this.showSelected}\n                        label={this.listLabel}\n                        multiple={this.multiple}\n                        selectedOptions={this.structuredSelectedOptions}\n                        onChange={this.onOptionListChange}\n                    >\n                        <slot />\n                    </q2-option-list>\n                    <div\n                        class=\"popover-top-container\"\n                        ref={el => (this.popoverTopContainer = el)}\n                        hidden={!this.multiple && !this.hasPopoverTop}\n                        tabindex=\"-1\"\n                    >\n                        <slot name=\"popover-top\"></slot>\n                        {this.multiple && this.visibilityToggle()}\n                    </div>\n                </div>\n                <div\n                    class=\"popover-bottom-container\"\n                    hidden={!this.hasPopoverBottom}\n                    tabindex=\"-1\"\n                >\n                    <slot name=\"popover-bottom\" />\n                </div>\n            </q2-popover>\n        );\n    }\n\n    visibilityToggle() {\n        const selectedOptionsCount = this.selectedOptions?.length ?? 0;\n        const { showSelected } = this;\n        return (\n            <div class=\"multi-select-header\">\n                <fieldset>\n                    <legend aria-label={loc('tecton.element.select.multiHeader.showing')}>\n                        {loc('tecton.element.select.multiHeader.showing')}\n                    </legend>\n                    <div>\n                        <input\n                            class=\"sr\"\n                            type=\"radio\"\n                            id=\"all\"\n                            name=\"viewDisplay\"\n                            value=\"all\"\n                            checked={!showSelected}\n                            aria-label={loc('tecton.element.select.multiHeader.allAriaLabel')}\n                            test-id=\"allOptionsButton\"\n                            onClick={this.showAllOptions}\n                            onKeyDown={this.visibilityToggleKeyDown}\n                        />\n                        <label htmlFor=\"all\">{loc('tecton.element.select.multiHeader.all')}</label>\n                    </div>\n\n                    <div>\n                        <input\n                            class=\"sr\"\n                            type=\"radio\"\n                            id=\"selected\"\n                            disabled={selectedOptionsCount === 0}\n                            name=\"viewDisplay\"\n                            value=\"selected\"\n                            aria-label={loc('tecton.element.select.multiHeader.selectedAriaLabel', [\n                                selectedOptionsCount,\n                            ])}\n                            checked={showSelected}\n                            test-id=\"selectedOptionsButton\"\n                            onClick={this.showSelectedOptions}\n                            onKeyDown={this.visibilityToggleKeyDown}\n                        />\n                        <label htmlFor=\"selected\">\n                            {loc('tecton.element.select.multiHeader.selected', [selectedOptionsCount])}\n                        </label>\n                    </div>\n                </fieldset>\n            </div>\n        );\n    }\n}\n"],"mappings":"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"}

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

@@ -1 +0,0 @@
-{"version":3,"names":["q2DropdownItemCss","Q2DropdownItemStyle0","Q2DropdownItem","this","onItemClick","event","stopImmediatePropagation","hostElement","dispatchEvent","CustomEvent","detail","type","value","bubbles","onItemKeydown","includes","key","focusRemoveBtn","onItemFocus","stopPropagation","onRemoveBtnClick","onRemoveBtnKeydown","focusItem","onRemoveBtnFocus","componentWillLoad","handleAriaLabel","ariaLabelObserver","removeLabel","loc","label","dropdownItemBtn","shadowRoot","querySelector","innerLabel","textContent","removeBtn","onHostElementFocus","target","FocusEvent","render","separator","separatorDOM","itemDOM","h","class","role","disabled","onClick","onKeyDown","onFocus","removable"],"sources":["src/components/q2-dropdown-item/q2-dropdown-item.scss?tag=q2-dropdown-item&encapsulation=shadow","src/components/q2-dropdown-item/q2-dropdown-item.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.dropdown-separator {\n    --comp-default-separator-margin: 0 #{var-list(--tct-scale-1, --app-scale-3x, 15px)};\n    margin: var-list(var-prefixer(dropdown-separator-margin), --comp-default-separator-margin);\n    border-bottom: 1px solid\n        var-list(\n            var-prefixer(dropdown-item-separator-color),\n            var-prefixer(gray-11),\n            --tct-gray-l1,\n            --app-gray-l1,\n            #cccccc\n        );\n}\n\n.dropdown-item-wrapper {\n    display: flex;\n}\n\n.dropdown-item {\n    min-height: 44px;\n    flex: 1 1 100%;\n    padding: var-list(var-prefixer(dropdown-item-padding), 2px);\n}\n\n.dropdown-item-content {\n    --comp-default-content-padding: 12px var(--app-scale-3x, 15px);\n    padding: var-list(var-prefixer(dropdown-item-content-padding), --comp-default-content-padding);\n    text-align: left;\n    background: var-list(\n        --tct-dropdown-item-background,\n        var-prefixer(dropdown-item-bg),\n        --tct-white,\n        --t-base,\n        --app-white,\n        #ffffff\n    );\n    color: var-list(var-prefixer(dropdown-item-font-color), inherit);\n    transition: background-color\n        var-list(var-prefixer(dropdown-item-content-tween), --tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n    overflow: hidden;\n    text-overflow: ellipsis;\n    flex: 1;\n}\n\n:host(:not([disabled])) .dropdown-item-content:hover,\n:host(:not([disabled])) .dropdown-item:focus-within .dropdown-item-content {\n    background: var-list(\n        --tct-dropdown-item-hover-background,\n        var-prefixer(dropdown-item-selected-bg),\n        var-prefixer(gray-14),\n        --tct-gray-l3,\n        --app-gray-l3,\n        --t-base,\n        #f2f2f2\n    );\n    color: var-list(--tct-dropdown-item-hover-color, var-prefixer(dropdown-item-selected-font-color), inherit);\n}\n\n.remove-dropdown-item {\n    flex: 0 0 44px;\n    margin: 2px;\n}\n","import { Component, ComponentInterface, Prop, Element, Listen, Watch, h } from '@stencil/core';\nimport { loc, handleAriaLabel } from 'src/utils';\nimport { JSX } from '../../components';\n\n@Component({ tag: 'q2-dropdown-item', shadow: true, styleUrl: 'q2-dropdown-item.scss' })\nexport class Q2DropdownItem implements ComponentInterface {\n    /** Disables interaction with the item and blocks its click event. */\n    @Prop({ reflect: true }) disabled: boolean;\n\n    /**\n     * The text that appears within the dropdown item.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true }) label: string;\n\n    /**\n     * Renders an icon button in the item.\n     * Clicking on this button will change the `type` emitting on the item's click event detail to \"remove\".\n     */\n    @Prop({ reflect: true }) removable: boolean;\n\n    /**\n     * Renders a line in the item instead of text.\n     * Click events from these items will not have details provided.\n     * A `separator` allows for quick visual grouping of items, so interactions should not be bound to these options.\n     */\n    @Prop({ reflect: true }) separator: boolean;\n\n    /** A static reference value for the item. This value is returned in the click event detail. */\n    @Prop({ reflect: true }) value: string;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n    @Element() hostElement: HTMLElement;\n\n    /////// LIFECYCLE HOOKS //////\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n    }\n\n    //////// OBSERVERS //////////\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    get removeLabel(): string {\n        return loc('tecton.element.dropdownItem.remove', [this.label || '']);\n    }\n\n    get dropdownItemBtn(): HTMLQ2BtnElement {\n        return this.hostElement.shadowRoot.querySelector('.dropdown-item');\n    }\n\n    get innerLabel(): string {\n        return this.label || this.hostElement.textContent;\n    }\n\n    get removeBtn(): HTMLQ2BtnElement {\n        return this.hostElement.shadowRoot.querySelector('.remove-dropdown-item');\n    }\n\n    ///////// Host Element Events //////\n    @Listen('focus')\n    onHostElementFocus() {\n        if (event.target === this.hostElement) {\n            this.focusItem();\n        }\n    }\n\n    ///////// Actions /////////\n    focusItem() {\n        this.dropdownItemBtn.dispatchEvent(new FocusEvent('focus', { bubbles: false }));\n    }\n\n    focusRemoveBtn() {\n        this.removeBtn && this.removeBtn.dispatchEvent(new FocusEvent('focus', { bubbles: false }));\n    }\n\n    onItemClick = (event: MouseEvent) => {\n        event.stopImmediatePropagation();\n        this.hostElement.dispatchEvent(\n            new CustomEvent('click', {\n                detail: {\n                    type: 'select',\n                    value: this.value || '',\n                },\n                bubbles: true,\n            })\n        );\n    };\n\n    onItemKeydown = (event: KeyboardEvent) => {\n        if (['ArrowRight', 'Right'].includes(event.key)) {\n            this.focusRemoveBtn();\n        }\n    };\n\n    onItemFocus = (event: FocusEvent) => {\n        event.stopPropagation();\n    };\n\n    onRemoveBtnClick = (event: MouseEvent) => {\n        event.stopImmediatePropagation();\n\n        this.hostElement.dispatchEvent(\n            new CustomEvent('click', {\n                detail: {\n                    type: 'remove',\n                    value: this.value || '',\n                },\n                bubbles: true,\n            })\n        );\n    };\n\n    onRemoveBtnKeydown = (event: KeyboardEvent) => {\n        if (['ArrowLeft', 'Left'].includes(event.key)) {\n            this.focusItem();\n        }\n    };\n\n    onRemoveBtnFocus = (event: FocusEvent) => {\n        event.stopPropagation();\n    };\n\n    render() {\n        if (!!this.separator) {\n            return this.separatorDOM();\n        }\n\n        return this.itemDOM();\n    }\n\n    separatorDOM(): JSX.IntrinsicElements {\n        return (\n            <div\n                class=\"dropdown-separator\"\n                role=\"separator\"\n                test-id=\"dropdownItemSeparator\"\n            />\n        );\n    }\n\n    itemDOM(): JSX.IntrinsicElements {\n        return (\n            <div class=\"dropdown-item-wrapper\">\n                <q2-btn\n                    class=\"dropdown-item\"\n                    label={this.innerLabel}\n                    hide-label\n                    disabled={!!this.disabled}\n                    role=\"menuitem\"\n                    onClick={this.onItemClick}\n                    onKeyDown={this.onItemKeydown}\n                    onFocus={this.onItemFocus}\n                    test-id=\"dropdownItem\"\n                >\n                    <div class=\"dropdown-item-content\">\n                        <slot />\n                    </div>\n                </q2-btn>\n                {!!this.removable ? (\n                    <q2-btn\n                        class=\"remove-dropdown-item\"\n                        label={this.removeLabel}\n                        hide-label\n                        disabled={!!this.disabled}\n                        role=\"menuitem\"\n                        onClick={this.onRemoveBtnClick}\n                        onKeyDown={this.onRemoveBtnKeydown}\n                        onFocus={this.onRemoveBtnFocus}\n                        test-id=\"removeDropdownItem\"\n                    >\n                        <q2-icon type=\"close\" />\n                    </q2-btn>\n                ) : (\n                    ''\n                )}\n            </div>\n        );\n    }\n}\n"],"mappings":"6FAAA,MAAMA,EAAoB,25EAC1B,MAAAC,EAAeD,E,MCIFE,EAAc,M,yBA6EvBC,KAAAC,YAAeC,IACXA,EAAMC,2BACNH,KAAKI,YAAYC,cACb,IAAIC,YAAY,QAAS,CACrBC,OAAQ,CACJC,KAAM,SACNC,MAAOT,KAAKS,OAAS,IAEzBC,QAAS,OAEhB,EAGLV,KAAAW,cAAiBT,IACb,GAAI,CAAC,aAAc,SAASU,SAASV,EAAMW,KAAM,CAC7Cb,KAAKc,gB,GAIbd,KAAAe,YAAeb,IACXA,EAAMc,iBAAiB,EAG3BhB,KAAAiB,iBAAoBf,IAChBA,EAAMC,2BAENH,KAAKI,YAAYC,cACb,IAAIC,YAAY,QAAS,CACrBC,OAAQ,CACJC,KAAM,SACNC,MAAOT,KAAKS,OAAS,IAEzBC,QAAS,OAEhB,EAGLV,KAAAkB,mBAAsBhB,IAClB,GAAI,CAAC,YAAa,QAAQU,SAASV,EAAMW,KAAM,CAC3Cb,KAAKmB,W,GAIbnB,KAAAoB,iBAAoBlB,IAChBA,EAAMc,iBAAiB,E,6IAxF3B,iBAAAK,GACIC,EAAgBtB,K,CAMpB,iBAAAuB,GACID,EAAgBtB,K,CAGpB,eAAIwB,GACA,OAAOC,EAAI,qCAAsC,CAACzB,KAAK0B,OAAS,I,CAGpE,mBAAIC,GACA,OAAO3B,KAAKI,YAAYwB,WAAWC,cAAc,iB,CAGrD,cAAIC,GACA,OAAO9B,KAAK0B,OAAS1B,KAAKI,YAAY2B,W,CAG1C,aAAIC,GACA,OAAOhC,KAAKI,YAAYwB,WAAWC,cAAc,wB,CAKrD,kBAAAI,GACI,GAAI/B,MAAMgC,SAAWlC,KAAKI,YAAa,CACnCJ,KAAKmB,W,EAKb,SAAAA,GACInB,KAAK2B,gBAAgBtB,cAAc,IAAI8B,WAAW,QAAS,CAAEzB,QAAS,Q,CAG1E,cAAAI,GACId,KAAKgC,WAAahC,KAAKgC,UAAU3B,cAAc,IAAI8B,WAAW,QAAS,CAAEzB,QAAS,Q,CAkDtF,MAAA0B,GACI,KAAMpC,KAAKqC,UAAW,CAClB,OAAOrC,KAAKsC,c,CAGhB,OAAOtC,KAAKuC,S,CAGhB,YAAAD,GACI,OACIE,EAAA,OACIC,MAAM,qBACNC,KAAK,YAAW,UACR,yB,CAKpB,OAAAH,GACI,OACIC,EAAA,OAAKC,MAAM,yBACPD,EAAA,UACIC,MAAM,gBACNf,MAAO1B,KAAK8B,WAAU,kBAEtBa,WAAY3C,KAAK2C,SACjBD,KAAK,WACLE,QAAS5C,KAAKC,YACd4C,UAAW7C,KAAKW,cAChBmC,QAAS9C,KAAKe,YAAW,UACjB,gBAERyB,EAAA,OAAKC,MAAM,yBACPD,EAAA,iBAGLxC,KAAK+C,UACJP,EAAA,UACIC,MAAM,uBACNf,MAAO1B,KAAKwB,YAAW,kBAEvBmB,WAAY3C,KAAK2C,SACjBD,KAAK,WACLE,QAAS5C,KAAKiB,iBACd4B,UAAW7C,KAAKkB,mBAChB4B,QAAS9C,KAAKoB,iBAAgB,UACtB,sBAERoB,EAAA,WAAShC,KAAK,WACT,G"}

package/dist/q2-tecton-elements/p-42302f6f.js

@@ -1,2 +0,0 @@
-import{h as e}from"./p-a5f18e27.js";function n(){return/Android|webOS|iPhone|iPad|iPod|BlackBerry|Mobile|IEMobile|Windows Phone|Opera Mini/i.test(navigator.userAgent)}function i(e,n){const i=e.type;const o=["focusin","focus"];const t=o.includes(i);const r=t?e.target:e.relatedTarget;const a=e=>{if(e===n)return true;if(e.parentElement){return a(e.parentElement)}return false};if(!(r instanceof HTMLElement))return true;return!a(r)}function o(e,n){return e.relatedTarget!==n&&!n.contains(e.relatedTarget)}function t(e,n){var i;return((i=e.composedPath)===null||i===void 0?void 0:i.call(e)[0])===n}function r(e){e.focus=()=>e===null||e===void 0?void 0:e.dispatchEvent(new FocusEvent("focus",{bubbles:false}))}function a(){const e=navigator.userAgent.toLowerCase();return e.includes("firefox")}function s(){return"ontouchstart"in window||navigator.maxTouchPoints>0}function l(e,n){if(e===undefined)return e;if(!n)return e!=="Symbol()"?e:undefined;return n.includes(e)||e===""?e:undefined}let u=1e3;function d(){return u++}function c(e){requestAnimationFrame((()=>{requestAnimationFrame(e)}))}function f(e){return e.offsetWidth>0||e.offsetHeight>0||e.getClientRects().length>0}function m(){return new Promise((e=>c(e)))}function p(e,n){var i,o,t;if(!e)return"";if(((i=window.Tecton)===null||i===void 0?void 0:i.noStrings)===true){return e}return(t=(o=window===null||window===void 0?void 0:window.TectonElements)===null||o===void 0?void 0:o.loc(e,n))!==null&&t!==void 0?t:e}function b(n){const{label:i,hideLabel:o,optional:t,readonly:r}=n;const a=["input-label"];let s="";let l=o;if(!l){const e=n.hostElement.shadowRoot.querySelector('slot[name="label"]');const o=(e===null||e===void 0?void 0:e.assignedNodes().length)>0;const t=!!i;l=t||o?false:true}if(l)a.push("sr");if(t){s=e("span",{class:"optional-tag"},p("tecton.element.input.optional"))}if(r){s=e("span",{class:"optional-tag"},p("tecton.element.input.readonly"));a.push("readonly-field")}return e("label",{htmlFor:n.inputId,class:a.join(" ")},e("slot",{name:"label"},i?p(i):undefined,s))}function v(e,n){return e.querySelector(`[slot="${n}"]`)!==null}function h(e){const{ariaLabel:n}=e;if(!n)return;const i=Symbol().toString();if(n===i){e.ariaLabel=undefined;return}if("hideLabel"in e)e.hideLabel=true;e.label=p(n);e.ariaLabel=undefined}function w(e,n,i,o){if(typeof e[n]==="undefined")return;if(e[n]){g(e,n,"prop")}e[i]=e[n];if(o){delete e[n]}}function g(e,n,i){if(window.location.hostname==="localhost"||window.location.host==="stack.q2developer.com"){if(e[n]==="undefined")return;const o=e.constructor.name.toLowerCase().slice(2);switch(i){case"prop":if(n==="size"&&o==="btn"){console.warn(`The property of size in q2-btn should not be typeof number, or typeof string containing a number. This functionality will be deprecated in an upcoming release. Instead, please use the value 'undefined', or typeof string with any of the following values: "small" / "medium" / "large" `)}else{console.warn(`The property ${n} in q2-${o} has been marked for deprecation and will be removed in an upcoming major release.`)}break;case"function":console.warn(`The function ${n} in ${o} has been marked for deprecation and will be removed in an upcoming major release.`);break;case"method":console.warn(`The method ${n} in ${o} has been marked for deprecation and will be removed in an upcoming major release.`);break;case"event":console.warn(`The event ${n} in ${o} has been marked for deprecation and will be removed in an upcoming major release.`);break;default:console.error(`handleDeprecationWarning --\x3e No type found for desired deprecation: ${n} in q2-${o}: deprecatedItemType = ${n}`)}}}function y(n){const i=n.hasError?"danger":"info";return e("div",{class:"messages-container"},e("q2-message",{appearance:"minimal",description:true,type:i,"test-id":"message"},e("ul",{id:n.inputDescribedBy},n.messages.map((n=>e("li",{"test-id":"messageListItem"},p(n)))))))}function $(e){const n=e.hostElement.shadowRoot.querySelector(".messages-container");const i=n.querySelector("q2-message");c((()=>{const o=e.showMessages&&e.hasFocus?i.getBoundingClientRect().height:0;if(n.style.getPropertyValue("height")===`${o}px`)return;if(o===0){i.classList.add("invisible");n.style.removeProperty("height")}else{i.classList.remove("invisible");n.style.setProperty("height",`${o}px`)}}))}const k=()=>{var e,n;return(n=(e=window.TectonElements)===null||e===void 0?void 0:e.resizeIframe)===null||n===void 0?void 0:n.call(e)};const q=e=>{if(!e.intent&&["primary","secondary"].includes(e.color)){e.intent=`workflow-${e.color}`;e.color=undefined}};export{w as a,s as b,d as c,n as d,b as e,v as f,o as g,h,t as i,i as j,a as k,p as l,y as m,c as n,r as o,l as p,f as q,k as r,$ as s,g as t,q as u,m as w};
-//# sourceMappingURL=p-42302f6f.js.map

package/dist/q2-tecton-elements/p-42302f6f.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["isMobile","test","navigator","userAgent","isHostLosingFocus","event","hostElement","type","focusInTypes","isFocusIn","includes","elementGainingFocus","target","relatedTarget","isElementNestedInHostElement","element","parentElement","HTMLElement","isRelatedTargetWithinHost","contains","isEventFromElement","_a","composedPath","call","overrideFocus","focus","dispatchEvent","FocusEvent","bubbles","isFirefox","toLowerCase","isTouchDevice","window","maxTouchPoints","getAriaValueFromProp","prop","validValues","undefined","guid","createGuid","nextPaint","fn","requestAnimationFrame","isVisible","offsetWidth","offsetHeight","getClientRects","length","waitForNextPaint","Promise","resolve","loc","key","subs","Tecton","noStrings","_c","_b","TectonElements","labelDOM","label","hideLabel","optional","readonly","labelClasses","helpText","shouldHideLabel","labelSlot","shadowRoot","querySelector","hasSlotContent","assignedNodes","hasLabel","push","h","class","htmlFor","inputId","join","name","slotName","handleAriaLabel","ariaLabel","FW_WRAPPERS_EMPTY_PROP","Symbol","toString","handleRenamedProp","oldProp","newProp","removeOldProp","handleDeprecationWarning","deprecatedItemName","deprecatedItemType","location","hostname","host","componentName","constructor","slice","console","warn","error","messagesDOM","hasError","appearance","description","id","inputDescribedBy","messages","map","message","setMessageHeight","messageContainer","q2Message","height","showMessages","hasFocus","getBoundingClientRect","style","getPropertyValue","classList","add","removeProperty","remove","setProperty","resizeIframe","handleColor","intent","color"],"sources":["src/utils/index.tsx"],"sourcesContent":["import { h } from '@stencil/core';\nimport { Q2Btn } from 'src/components/q2-btn/q2-btn';\nimport { Q2Calendar } from 'src/components/q2-calendar/q2-calendar';\nimport { Q2Carousel } from 'src/components/q2-carousel/q2-carousel';\nimport { Q2Checkbox } from 'src/components/q2-checkbox/q2-checkbox';\nimport { Q2CheckboxGroup } from 'src/components/q2-checkbox-group/q2-checkbox-group';\nimport { Q2RadioGroup } from 'src/components/q2-radio-group/q2-radio-group';\nimport { Q2Dropdown } from 'src/components/q2-dropdown/q2-dropdown';\nimport { Q2DropdownItem } from 'src/components/q2-dropdown-item/q2-dropdown-item';\nimport { Q2EditableField } from 'src/components/q2-editable-field/q2-editable-field';\nimport { Q2Input } from 'src/components/q2-input/q2-input';\nimport { Q2Loading } from 'src/components/q2-loading/q2-loading';\nimport { Q2Radio } from 'src/components/q2-radio/q2-radio';\nimport { Q2Select } from 'src/components/q2-select/q2-select';\nimport { FormFieldTypes, IDict } from 'src/util';\n\nexport function isMobile(): boolean {\n    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|Mobile|IEMobile|Windows Phone|Opera Mini/i.test(\n        navigator.userAgent\n    );\n}\n\nexport function isHostLosingFocus(event: FocusEvent, hostElement: HTMLElement) {\n    const type = event.type;\n    const focusInTypes = ['focusin', 'focus'];\n    const isFocusIn = focusInTypes.includes(type);\n\n    // on focusin: `target` is element losing focus, `relatedTarget` is element gaining focus\n    // on focusout: `target` is element gaining focus, `relatedTarget` is element losing focus\n    const elementGainingFocus = isFocusIn ? event.target : event.relatedTarget;\n\n    const isElementNestedInHostElement = (element: HTMLElement) => {\n        if (element === hostElement) return true;\n        if (element.parentElement) {\n            return isElementNestedInHostElement(element.parentElement);\n        }\n        return false;\n    };\n\n    if (!(elementGainingFocus instanceof HTMLElement)) return true;\n    return !isElementNestedInHostElement(elementGainingFocus);\n}\n\nexport function isRelatedTargetWithinHost(event: FocusEvent, element: HTMLElement) {\n    return event.relatedTarget !== element && !element.contains(event.relatedTarget as Node);\n}\n\nexport function isEventFromElement(event: Event, element: HTMLElement): boolean {\n    return event.composedPath?.()[0] === element;\n}\n\nexport function overrideFocus(hostElement: HTMLElement) {\n    hostElement.focus = () => hostElement?.dispatchEvent(new FocusEvent('focus', { bubbles: false }));\n}\n\nexport function isFirefox() {\n    const userAgent = navigator.userAgent.toLowerCase();\n    return userAgent.includes('firefox');\n}\n\nexport function isTouchDevice() {\n    return 'ontouchstart' in window || navigator.maxTouchPoints > 0;\n}\n\nexport function isSafari() {\n    const userAgent = navigator.userAgent.toLowerCase();\n    return userAgent.includes('safari') && !userAgent.includes('chrome');\n}\n\n/**\n * Returns the value of a prop if it is defined and included in the `validValues`\n * array. This is used primarily to prevent Vue wrappers from setting aria props\n * to \"Symbol()\" when the prop is not set.\n */\nexport function getAriaValueFromProp(prop: string, validValues?: string[]) {\n    if (prop === undefined) return prop;\n    if (!validValues) return prop !== 'Symbol()' ? prop : undefined;\n    return validValues.includes(prop) || prop === '' ? prop : undefined;\n}\n\nlet guid: number = 1000;\nexport function createGuid(): number {\n    return guid++;\n}\n\nexport function nextPaint(fn: (value?: unknown) => void) {\n    requestAnimationFrame(() => {\n        requestAnimationFrame(fn);\n    });\n}\n\nexport function isVisible(element: HTMLElement) {\n    return element.offsetWidth > 0 || element.offsetHeight > 0 || element.getClientRects().length > 0;\n}\n\nexport function waitForNextPaint() {\n    return new Promise(resolve => nextPaint(resolve));\n}\n\nexport function capitalize(value: string) {\n    return `${value.charAt(0).toUpperCase()}${value.slice(1)}`;\n}\n\nexport function pick(props: string[]): (obj: object) => object {\n    return obj => {\n        return props.reduce((memo, prop) => {\n            return {\n                ...memo,\n                [prop]: obj[prop],\n            };\n        }, {});\n    };\n}\n\nexport function loc(key: string, subs?: IDict<any> | string[]) {\n    if (!key) return '';\n    if (window.Tecton?.noStrings === true) {\n        return key;\n    }\n    return window?.TectonElements?.loc(key, subs) ?? key;\n}\n\nexport function labelDOM(target: FormFieldTypes | Q2RadioGroup | Q2CheckboxGroup) {\n    const { label, hideLabel, optional, readonly } = target;\n    const labelClasses: string[] = ['input-label'];\n    let helpText = '';\n\n    let shouldHideLabel = hideLabel;\n    if (!shouldHideLabel) {\n        const labelSlot = target.hostElement.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"label\"]');\n        const hasSlotContent = labelSlot?.assignedNodes().length > 0;\n        const hasLabel = !!label;\n\n        shouldHideLabel = hasLabel || hasSlotContent ? false : true;\n    }\n\n    if (shouldHideLabel) labelClasses.push('sr');\n    if (optional) {\n        helpText = <span class=\"optional-tag\">{loc('tecton.element.input.optional')}</span>;\n    }\n    if (readonly) {\n        helpText = <span class=\"optional-tag\">{loc('tecton.element.input.readonly')}</span>;\n        labelClasses.push('readonly-field');\n    }\n    return (\n        <label\n            htmlFor={target.inputId}\n            class={labelClasses.join(' ')}\n        >\n            <slot name=\"label\">\n                {label ? loc(label) : undefined}\n                {helpText}\n            </slot>\n        </label>\n    );\n}\n\nexport function hasSlotContent(target: HTMLElement, slotName: string) {\n    return target.querySelector(`[slot=\"${slotName}\"]`) !== null;\n}\n\nexport function handleAriaLabel(\n    target:\n        | Q2Input\n        | Q2Select\n        | Q2Radio\n        | Q2Checkbox\n        | Q2EditableField\n        | Q2Dropdown\n        | Q2DropdownItem\n        | Q2Loading\n        | Q2Carousel\n        | Q2Calendar\n        | Q2Btn\n) {\n    const { ariaLabel } = target;\n    if (!ariaLabel) return;\n\n    // If empty ariaLabel prop is set to primitive symbol by framework wrapper, set ariaLabel to undefined and return\n    const FW_WRAPPERS_EMPTY_PROP = Symbol().toString();\n    if (ariaLabel === FW_WRAPPERS_EMPTY_PROP) {\n        target.ariaLabel = undefined;\n        return;\n    }\n\n    // If ariaLabel is set, set hideLabel to true and set label to ariaLabel\n    if ('hideLabel' in target) target.hideLabel = true;\n    target.label = loc(ariaLabel);\n    target.ariaLabel = undefined;\n}\n\n/**\n * Handles when a prop has been renamed on a component without introducing a breaking change.\n */\nexport function handleRenamedProp(target: object, oldProp: string, newProp: string, removeOldProp?: boolean) {\n    if (typeof target[oldProp] === 'undefined') return;\n\n    // If old prop has value, aka set in component, call handleDeprecationWarning()\n    if (target[oldProp]) {\n        handleDeprecationWarning(target, oldProp, 'prop');\n    }\n\n    target[newProp] = target[oldProp];\n\n    if (removeOldProp) {\n        delete target[oldProp];\n    }\n}\n\nexport function handleDeprecationWarning(\n    target: object,\n    deprecatedItemName: string,\n    deprecatedItemType: 'function' | 'prop' | 'method' | 'event'\n) {\n    if (window.location.hostname === 'localhost' || window.location.host === 'stack.q2developer.com') {\n        if (target[deprecatedItemName] === 'undefined') return;\n\n        const componentName = target.constructor.name.toLowerCase().slice(2);\n\n        switch (deprecatedItemType) {\n            case 'prop':\n                if (deprecatedItemName === 'size' && componentName === 'btn') {\n                    console.warn(\n                        `The property of size in q2-btn should not be typeof number, or typeof string containing a number. This functionality will be deprecated in an upcoming release. Instead, please use the value 'undefined', or typeof string with any of the following values: \"small\" / \"medium\" / \"large\" `\n                    );\n                } else {\n                    console.warn(\n                        `The property ${deprecatedItemName} in q2-${componentName} has been marked for deprecation and will be removed in an upcoming major release.`\n                    );\n                }\n                break;\n\n            case 'function':\n                console.warn(\n                    `The function ${deprecatedItemName} in ${componentName} has been marked for deprecation and will be removed in an upcoming major release.`\n                );\n                break;\n\n            case 'method':\n                console.warn(\n                    `The method ${deprecatedItemName} in ${componentName} has been marked for deprecation and will be removed in an upcoming major release.`\n                );\n                break;\n\n            case 'event':\n                console.warn(\n                    `The event ${deprecatedItemName} in ${componentName} has been marked for deprecation and will be removed in an upcoming major release.`\n                );\n                break;\n\n            default:\n                console.error(\n                    `handleDeprecationWarning --> No type found for desired deprecation: ${deprecatedItemName} in q2-${componentName}: deprecatedItemType = ${deprecatedItemName}`\n                );\n        }\n    }\n}\n\nexport function messagesDOM(target: FormFieldTypes) {\n    const type = target.hasError ? 'danger' : 'info';\n\n    return (\n        <div class=\"messages-container\">\n            <q2-message\n                appearance=\"minimal\"\n                description\n                type={type}\n                test-id=\"message\"\n            >\n                <ul id={target.inputDescribedBy}>\n                    {target.messages.map(message => (\n                        <li test-id=\"messageListItem\">{loc(message)}</li>\n                    ))}\n                </ul>\n            </q2-message>\n        </div>\n    );\n}\n\nexport function setMessageHeight(target: FormFieldTypes) {\n    const messageContainer = (target.hostElement.shadowRoot as ShadowRoot).querySelector<HTMLDivElement>(\n        '.messages-container'\n    );\n    const q2Message = messageContainer.querySelector('q2-message');\n    nextPaint(() => {\n        const height = target.showMessages && target.hasFocus ? q2Message.getBoundingClientRect().height : 0;\n\n        if (messageContainer.style.getPropertyValue('height') === `${height}px`) return;\n\n        if (height === 0) {\n            q2Message.classList.add('invisible');\n            messageContainer.style.removeProperty('height');\n        } else {\n            q2Message.classList.remove('invisible');\n            messageContainer.style.setProperty('height', `${height}px`);\n        }\n    });\n}\n\nexport const resizeIframe = () => {\n    return window.TectonElements?.resizeIframe?.();\n};\n\n// Handling color attribute (deprecated)\nexport const handleColor = (target: Q2Btn) => {\n    if (!target.intent && ['primary', 'secondary'].includes(target.color)) {\n        target.intent = `workflow-${target.color}` as HTMLQ2BtnElement['intent'];\n        target.color = undefined;\n    }\n};\n"],"mappings":"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"}