q2-tecton-elements 1.38.1 → 1.39.0

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

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","Q2Tag","this","determineOptionCount","numberOfOptions","hostElement","querySelectorAll","length","optionCount","onClickElsewhere","event","target","localName","stopPropagation","popoverElement","open","handleChange","value","detail","click","emit","handleClick","async","controlElement","dropdownBtn","shouldShowActionSheet","showActionSheetList","toggle","handleKeydown","isTabMetaOrCtrl","metaKey","ctrlKey","key","preventDefault","optionList","handleExternalKeydown","handleButtonFocusout","relatedTarget","_a","tagName","handleWrapperClick","focus","window","Tecton","useActionSheets","componentWillLoad","observer","MutationObserver","observe","childList","attributes","mutationObserver","componentDidLoad","overrideFocus","disconnectedCallback","disconnect","delegateFocus","isEventFromElement","popoverStateHandler","setActiveElement","generateHiddenElement","h","id","class","loc","render","wrapperClassNames","push","Host","role","onChange","Fragment","onClick","ref","el","type","onKeyDown","onFocusout","join","label","e","minHeight","popoverMinHeight","direction","popoverDirection","align","popoverAlignment","optionListLabel"],"sources":["./src/components/q2-tag/styles.scss?tag=q2-tag&encapsulation=shadow","./src/components/q2-tag/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n    position: relative;\n    line-height: 0;\n}\n\n:host(:not(:last-child)) {\n    margin-inline-end: var-list(var-prefixer(tag-margin), --app-scale-2x, 10px);\n}\n\n.tag-wrapper {\n    --comp-tag-btn-size: #{var-list(var-prefixer(tag-btn-size), --app-scale-6x)};\n    --comp-tag-background: #{var-list(var-prefixer(tag-background), --t-gray-13, #e6e6e6)};\n    --comp-tag-color: #{var-list(var-prefixer(tag-color), --t-gray-3, #262626)};\n    background: var(--comp-tag-background);\n    color: var(--comp-tag-color);\n    border-radius: var-list(var-prefixer(tag-border-radius), --app-border-radius-1, 3px);\n    position: relative;\n\n    :host([theme='primary']) & {\n        --comp-tag-background: #{var-list(--tct-tag-primary-background, --t-primary, #61c4ff)};\n        --comp-tag-color: #{var-list(--tct-tag-primary-font-color, --t-primary-text, #ffffff)};\n    }\n\n    :host([theme='secondary']) & {\n        --comp-tag-background: #{var-list(--tct-tag-secondary-background, --t-secondary, #d9e1e6)};\n        --comp-tag-color: #{var-list(--tct-tag-secondary-font-color, --t-secondary-text, #000000)};\n    }\n\n    :host([theme='tertiary']) & {\n        --comp-tag-background: #{var-list(--tct-tag-tertiary-background, --t-tertiary, #f4fafe)};\n        --comp-tag-color: #{var-list(--tct-tag-tertiary-font-color, --t-tertiary-text, #000000)};\n    }\n}\n\n.tag {\n    display: flex;\n    width: max-content;\n    height: var-list(var-prefixer(tag-height), --app-scale-6x, 30px);\n    line-height: var-list(var-prefixer(tag-height), --app-scale-6x, 30px);\n    padding-inline: var-list(var-prefixer(tag-padding-inline), --app-scale-3x, 15px);\n}\n\n.tag.has-options {\n    padding-right: 6px;\n}\n\n.btn-wrapper {\n    --comp-tag-clickable-size: #{var-list(var-prefixer(tag-clickable-size), 44px)};\n    --comp-tag-btn-offset: calc(calc(calc(var(--comp-tag-clickable-size) - var(--comp-tag-btn-size)) / 2) * -1);\n    --comp-tag-background: #{var-list(var-prefixer(tag-background), --t-gray-13, #e6e6e6)};\n    height: var(--comp-tag-clickable-size);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    right: var(--comp-tag-btn-offset);\n    top: var(--comp-tag-btn-offset);\n    cursor: pointer;\n}\n\nbutton {\n    height: var(--comp-tag-btn-size);\n    stroke: var(--comp-tag-color);\n    --tct-icon-stroke-primary: var(--comp-tag-color);\n    cursor: pointer;\n    border: 0;\n    background: transparent;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    padding-right: 6px;\n    --tct-icon-size: 18px;\n}\n","import {\n    Component,\n    State,\n    Prop,\n    h,\n    ComponentInterface,\n    Host,\n    Listen,\n    Element,\n    EventEmitter,\n    Event,\n    Fragment,\n} from '@stencil/core';\nimport { isEventFromElement, loc, overrideFocus } from 'src/utils';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\n\n@Component({\n    tag: 'q2-tag',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Tag implements ComponentInterface {\n    @Prop() hoist: boolean = !!window.Tecton?.useActionSheets;\n    @Prop({ reflect: true, mutable: true }) open: boolean;\n    @Prop({ reflect: true }) label: string;\n    @Prop({ reflect: true }) theme: 'primary' | 'secondary' | 'tertiary';\n    @Prop() popoverMinHeight: number = 150;\n    @Prop() popoverDirection: 'up' | 'down';\n    @Prop({ mutable: true }) popoverAlignment: 'left' | 'right' = 'right';\n    @Prop() optionListLabel: string = 'options';\n\n    @State() optionCount: number;\n\n    @Element() hostElement: HTMLElement;\n\n    /**\n     * Emitted when a provided option is clicked.\n     *\n     * Requires at least one option to be provided.\n     */\n    @Event() click: EventEmitter<{ value: string }>;\n    dropdownBtn: HTMLButtonElement;\n    popoverElement: HTMLQ2PopoverElement;\n    optionList: HTMLQ2OptionListElement;\n    mutationObserver: MutationObserver;\n\n    /// LifeCycle Hooks ///\n    componentWillLoad() {\n        const observer = new MutationObserver(this.determineOptionCount);\n        observer.observe(this.hostElement, { childList: true, attributes: true });\n        this.mutationObserver = observer;\n    }\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n    }\n\n    disconnectedCallback() {\n        this.mutationObserver.disconnect();\n        this.mutationObserver = null;\n    }\n\n    /// Getters ///\n\n    /// Helpers\n    determineOptionCount = () => {\n        const numberOfOptions = this.hostElement.querySelectorAll('q2-option').length;\n        this.optionCount = numberOfOptions;\n    };\n\n    /// Listeners ///\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        if (!this.optionCount) return;\n        this.dropdownBtn.focus();\n    }\n\n    @Listen('popoverStateChanged')\n    popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n        if (this.open !== open) this.open = open;\n        if (open) return;\n        this.optionList.setActiveElement(null);\n    }\n\n    /// Event Handlers ///\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    handleChange = event => {\n        event.stopPropagation();\n        if (!this.optionCount) return;\n        const { value } = event.detail;\n\n        this.click.emit({ value });\n    };\n\n    handleClick = async (event: MouseEvent) => {\n        event.stopPropagation();\n        this.popoverElement.controlElement = this.dropdownBtn;\n        if (shouldShowActionSheet(this)) {\n            const { value } = await showActionSheetList(this, event);\n            this.click.emit({ value });\n        } else {\n            await this.popoverElement.toggle();\n        }\n    };\n\n    handleKeydown = async (event: KeyboardEvent) => {\n        const isTabMetaOrCtrl = event.metaKey || event.ctrlKey || event.key === 'Tab';\n        if (isTabMetaOrCtrl) return;\n\n        event.preventDefault();\n        this.popoverElement.controlElement = this.dropdownBtn;\n        if (shouldShowActionSheet(this, event)) {\n            const { value } = await showActionSheetList(this, event);\n            this.click.emit({ value });\n        } else {\n            this.optionList.handleExternalKeydown(event);\n        }\n    };\n\n    handleButtonFocusout = async (event: FocusEvent) => {\n        const relatedTarget = event.relatedTarget as unknown as HTMLElement;\n        if (relatedTarget?.tagName === 'Q2-OPTION' ?? false) return;\n        this.open = false;\n    };\n\n    handleWrapperClick = () => {\n        this.dropdownBtn.focus();\n        this.dropdownBtn.click();\n    };\n\n    /// DOM ///\n    generateHiddenElement() {\n        return (\n            <div\n                id=\"option-description\"\n                class=\"sr\"\n                aria-hidden=\"true\"\n            >\n                {loc('tecton.element.optionList.optionCount', [this.optionCount])}\n            </div>\n        );\n    }\n\n    render() {\n        const { optionCount, open } = this;\n        const wrapperClassNames = ['tag'];\n        if (optionCount) wrapperClassNames.push('has-options');\n\n        return (\n            <Host role=\"listitem\">\n                <click-elsewhere onChange={this.onClickElsewhere}>\n                    {this.optionCount ? (\n                        <Fragment>\n                            <div\n                                class=\"btn-wrapper\"\n                                onClick={this.handleWrapperClick}\n                            >\n                                <button\n                                    class=\"tag-wrapper\"\n                                    ref={el => (this.dropdownBtn = el)}\n                                    test-id=\"btn-control\"\n                                    type=\"button\"\n                                    role=\"combobox\"\n                                    onClick={this.handleClick}\n                                    onKeyDown={this.handleKeydown}\n                                    onFocusout={this.handleButtonFocusout}\n                                    aria-controls=\"option-list\"\n                                    aria-expanded={open ? 'true' : 'false'}\n                                    aria-describedby=\"option-description\"\n                                >\n                                    <div class={wrapperClassNames.join(' ')}>{this.label}</div>\n                                    <q2-icon type=\"options\"></q2-icon>\n                                </button>\n                            </div>\n                            {this.generateHiddenElement()}\n                        </Fragment>\n                    ) : (\n                        <div\n                            class=\"tag-wrapper\"\n                            onClick={e => e.stopPropagation()}\n                        >\n                            <div class={wrapperClassNames.join(' ')}>{this.label}</div>\n                        </div>\n                    )}\n\n                    {this.optionCount > 0 && (\n                        <q2-popover\n                            ref={el => (this.popoverElement = el)}\n                            controlElement={this.dropdownBtn}\n                            open={this.open}\n                            minHeight={this.popoverMinHeight}\n                            direction={this.popoverDirection}\n                            align={this.popoverAlignment}\n                        >\n                            <q2-option-list\n                                id=\"option-list\"\n                                ref={el => (this.optionList = el)}\n                                onChange={this.handleChange}\n                                type=\"menu\"\n                                align=\"right\"\n                                label={loc('tecton.element.optionList.label', [this.optionListLabel])}\n                                no-select\n                            >\n                                <slot />\n                            </q2-option-list>\n                        </q2-popover>\n                    )}\n                </click-elsewhere>\n            </Host>\n        );\n    }\n}\n"],"mappings":"oKAAA,MAAMA,EAAY,u9F,MCqBLC,EAAK,M,4DA4CdC,KAAAC,qBAAuB,KACnB,MAAMC,EAAkBF,KAAKG,YAAYC,iBAAiB,aAAaC,OACvEL,KAAKM,YAAcJ,CAAe,EAmBtCF,KAAAO,iBAAoBC,IAChB,MAAMC,EAASD,EAAMC,OACrB,GAAIA,EAAOC,YAAc,kBAAmB,CACxCF,EAAMG,kBACN,MAAMC,eAAEA,GAAmBZ,KAC3B,IAAKY,EAAgB,OACrBA,EAAeC,KAAO,K,GAI9Bb,KAAAc,aAAeN,IACXA,EAAMG,kBACN,IAAKX,KAAKM,YAAa,OACvB,MAAMS,MAAEA,GAAUP,EAAMQ,OAExBhB,KAAKiB,MAAMC,KAAK,CAAEH,SAAQ,EAG9Bf,KAAAmB,YAAcC,MAAOZ,IACjBA,EAAMG,kBACNX,KAAKY,eAAeS,eAAiBrB,KAAKsB,YAC1C,GAAIC,EAAsBvB,MAAO,CAC7B,MAAMe,MAAEA,SAAgBS,EAAoBxB,KAAMQ,GAClDR,KAAKiB,MAAMC,KAAK,CAAEH,S,KACf,OACGf,KAAKY,eAAea,Q,GAIlCzB,KAAA0B,cAAgBN,MAAOZ,IACnB,MAAMmB,EAAkBnB,EAAMoB,SAAWpB,EAAMqB,SAAWrB,EAAMsB,MAAQ,MACxE,GAAIH,EAAiB,OAErBnB,EAAMuB,iBACN/B,KAAKY,eAAeS,eAAiBrB,KAAKsB,YAC1C,GAAIC,EAAsBvB,KAAMQ,GAAQ,CACpC,MAAMO,MAAEA,SAAgBS,EAAoBxB,KAAMQ,GAClDR,KAAKiB,MAAMC,KAAK,CAAEH,S,KACf,CACHf,KAAKgC,WAAWC,sBAAsBzB,E,GAI9CR,KAAAkC,qBAAuBd,MAAOZ,I,MAC1B,MAAM2B,EAAgB3B,EAAM2B,cAC5B,IAAIC,GAAAD,IAAa,MAAbA,SAAa,SAAbA,EAAeE,WAAY,eAAW,MAAAD,SAAA,EAAAA,EAAI,MAAO,OACrDpC,KAAKa,KAAO,KAAK,EAGrBb,KAAAsC,mBAAqB,KACjBtC,KAAKsB,YAAYiB,QACjBvC,KAAKsB,YAAYL,OAAO,E,eAnHDmB,EAAAI,OAAOC,UAAM,MAAAL,SAAA,SAAAA,EAAEM,iB,oFAIP,I,sDAE2B,Q,qBAC5B,U,2BAkBlCC,oBACI,MAAMC,EAAW,IAAIC,iBAAiB7C,KAAKC,sBAC3C2C,EAASE,QAAQ9C,KAAKG,YAAa,CAAE4C,UAAW,KAAMC,WAAY,OAClEhD,KAAKiD,iBAAmBL,C,CAG5BM,mBACIC,EAAcnD,KAAKG,Y,CAGvBiD,uBACIpD,KAAKiD,iBAAiBI,aACtBrD,KAAKiD,iBAAmB,I,CAa5BK,cAAc9C,GACV,IAAK+C,EAAmB/C,EAAOR,KAAKG,aAAc,OAClD,IAAKH,KAAKM,YAAa,OACvBN,KAAKsB,YAAYiB,O,CAIrBiB,qBAAsBxC,QAAQH,KAAEA,KAC5B,GAAIb,KAAKa,OAASA,EAAMb,KAAKa,KAAOA,EACpC,GAAIA,EAAM,OACVb,KAAKgC,WAAWyB,iBAAiB,K,CA2DrCC,wBACI,OACIC,EAAA,OACIC,GAAG,qBACHC,MAAM,KAAI,cACE,QAEXC,EAAI,wCAAyC,CAAC9D,KAAKM,c,CAKhEyD,SACI,MAAMzD,YAAEA,EAAWO,KAAEA,GAASb,KAC9B,MAAMgE,EAAoB,CAAC,OAC3B,GAAI1D,EAAa0D,EAAkBC,KAAK,eAExC,OACIN,EAACO,EAAI,CAACC,KAAK,YACPR,EAAA,mBAAiBS,SAAUpE,KAAKO,kBAC3BP,KAAKM,YACFqD,EAACU,EAAQ,KACLV,EAAA,OACIE,MAAM,cACNS,QAAStE,KAAKsC,oBAEdqB,EAAA,UACIE,MAAM,cACNU,IAAKC,GAAOxE,KAAKsB,YAAckD,EAAG,UAC1B,cACRC,KAAK,SACLN,KAAK,WACLG,QAAStE,KAAKmB,YACduD,UAAW1E,KAAK0B,cAChBiD,WAAY3E,KAAKkC,qBAAoB,gBACvB,cAAa,gBACZrB,EAAO,OAAS,QAAO,mBACrB,sBAEjB8C,EAAA,OAAKE,MAAOG,EAAkBY,KAAK,MAAO5E,KAAK6E,OAC/ClB,EAAA,WAASc,KAAK,cAGrBzE,KAAK0D,yBAGVC,EAAA,OACIE,MAAM,cACNS,QAASQ,GAAKA,EAAEnE,mBAEhBgD,EAAA,OAAKE,MAAOG,EAAkBY,KAAK,MAAO5E,KAAK6E,QAItD7E,KAAKM,YAAc,GAChBqD,EAAA,cACIY,IAAKC,GAAOxE,KAAKY,eAAiB4D,EAClCnD,eAAgBrB,KAAKsB,YACrBT,KAAMb,KAAKa,KACXkE,UAAW/E,KAAKgF,iBAChBC,UAAWjF,KAAKkF,iBAChBC,MAAOnF,KAAKoF,kBAEZzB,EAAA,kBACIC,GAAG,cACHW,IAAKC,GAAOxE,KAAKgC,WAAawC,EAC9BJ,SAAUpE,KAAKc,aACf2D,KAAK,OACLU,MAAM,QACNN,MAAOf,EAAI,kCAAmC,CAAC9D,KAAKqF,kBAAiB,kBAGrE1B,EAAA,gB"}

package/dist/q2-tecton-elements/{p-059ea7c9.entry.js → p-81e36fcd.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,h as i,g as o}from"./p-277dc8cd.js";import{c as r}from"./p-f34521a4.js";import{i as e}from"./p-f0e323ad.js";const n="*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block;height:var(--tct-icon-size, 24px);width:var(--tct-icon-size, 24px);position:relative;fill:none}:host([inline]){height:1em;width:1em}svg{display:block;position:absolute;top:0;left:0;stroke-width:var(--tct-icon-stroke-width, var(--t-icon-stroke-width, 1.5));stroke-linecap:var(--tct-icon-cap, var(--t-icon-cap, round));stroke-linejoin:var(--tct-icon-cap, var(--t-icon-cap, round))}.stroke-primary{stroke:var(--tct-icon-stroke-primary, var(--t-icon-stroke-primary, var(--t-text, currentColor)))}.stroke-secondary{stroke:var(--tct-icon-stroke-secondary, var(--t-icon-stroke-secondary, var(--t-text, currentColor)))}.fill-primary{fill:var(--tct-icon-stroke-primary, var(--t-icon-stroke-primary, var(--t-text, currentColor)))}.filled{fill:var(--tct-icon-fill, var(--comp-icon-fill, var(--t-icon-fill, none)))}.uniform{fill:var(--tct-icon-stroke-primary, var(--t-icon-stroke-primary, currentColor))}:host([type=info]),:host([type=info-filled]){--tct-icon-stroke-primary:transparent;--comp-icon-fill:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))}:host([type=success]),:host([type=success-filled]){--tct-icon-stroke-primary:transparent;--comp-icon-fill:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}:host([type=warning]),:host([type=warning-filled]){--tct-icon-stroke-primary:transparent;--comp-icon-fill:var(--tct-stoplight-warning, var(--const-stoplight-warning, #c35500))}:host([type=error]),:host([type=error-filled]){--tct-icon-stroke-primary:transparent;--comp-icon-fill:var(--tct-stoplight-alert, var(--const-stoplight-alert, #c30000))}";const s=class{constructor(i){t(this,i);this.type=undefined;this.label=undefined;this.inline=undefined}get iconMarkup(){return e[this.type]&&e[this.type].markup()||""}get isCustom(){return this.type==="custom"}componentDidLoad(){this.setCustomSVGAttrs()}customIconHandler(){this.setCustomSVGAttrs()}setCustomSVGAttrs(){if(!this.isCustom)return;const t=this.hostElement.querySelector("svg");if(!t)return;t.setAttribute("role","img");t.setAttribute("xmlns","http://www.w3.org/2000/svg");const{label:i}=this;if(i){const o=document.createElement("title");const e=`label-${r()}`;o.id=e;o.textContent=i;t.appendChild(o);t.setAttribute("aria-labelledby",e)}else{t.setAttribute("aria-hidden","true")}}render(){const{label:t}=this;return this.isCustom?i("slot",null):i("svg",{viewBox:"0 0 26 26",xmlns:"http://www.w3.org/2000/svg","aria-hidden":this.label?undefined:"true",role:"img","aria-labelledby":t?"label":undefined},t&&i("title",{id:"label"},t),this.iconMarkup)}get hostElement(){return o(this)}static get watchers(){return{type:["customIconHandler"]}}};s.style=n;export{s as q2_icon};
-//# sourceMappingURL=p-059ea7c9.entry.js.map
+import{r as t,h as i,g as o}from"./p-277dc8cd.js";import{c as r}from"./p-fb903495.js";import{i as e}from"./p-f0e323ad.js";const n="*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block;height:var(--tct-icon-size, 24px);width:var(--tct-icon-size, 24px);position:relative;fill:none}:host([inline]){height:1em;width:1em}svg{display:block;position:absolute;top:0;left:0;stroke-width:var(--tct-icon-stroke-width, var(--t-icon-stroke-width, 1.5));stroke-linecap:var(--tct-icon-cap, var(--t-icon-cap, round));stroke-linejoin:var(--tct-icon-cap, var(--t-icon-cap, round))}.stroke-primary{stroke:var(--tct-icon-stroke-primary, var(--t-icon-stroke-primary, var(--t-text, currentColor)))}.stroke-secondary{stroke:var(--tct-icon-stroke-secondary, var(--t-icon-stroke-secondary, var(--t-text, currentColor)))}.fill-primary{fill:var(--tct-icon-stroke-primary, var(--t-icon-stroke-primary, var(--t-text, currentColor)))}.filled{fill:var(--tct-icon-fill, var(--comp-icon-fill, var(--t-icon-fill, none)))}.uniform{fill:var(--tct-icon-stroke-primary, var(--t-icon-stroke-primary, currentColor))}:host([type=info]),:host([type=info-filled]){--tct-icon-stroke-primary:transparent;--comp-icon-fill:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))}:host([type=success]),:host([type=success-filled]){--tct-icon-stroke-primary:transparent;--comp-icon-fill:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}:host([type=warning]),:host([type=warning-filled]){--tct-icon-stroke-primary:transparent;--comp-icon-fill:var(--tct-stoplight-warning, var(--const-stoplight-warning, #c35500))}:host([type=error]),:host([type=error-filled]){--tct-icon-stroke-primary:transparent;--comp-icon-fill:var(--tct-stoplight-alert, var(--const-stoplight-alert, #c30000))}";const s=class{constructor(i){t(this,i);this.type=undefined;this.label=undefined;this.inline=undefined}get iconMarkup(){return e[this.type]&&e[this.type].markup()||""}get isCustom(){return this.type==="custom"}componentDidLoad(){this.setCustomSVGAttrs()}customIconHandler(){this.setCustomSVGAttrs()}setCustomSVGAttrs(){if(!this.isCustom)return;const t=this.hostElement.querySelector("svg");if(!t)return;t.setAttribute("role","img");t.setAttribute("xmlns","http://www.w3.org/2000/svg");const{label:i}=this;if(i){const o=document.createElement("title");const e=`label-${r()}`;o.id=e;o.textContent=i;t.appendChild(o);t.setAttribute("aria-labelledby",e)}else{t.setAttribute("aria-hidden","true")}}render(){const{label:t}=this;return this.isCustom?i("slot",null):i("svg",{viewBox:"0 0 26 26",xmlns:"http://www.w3.org/2000/svg","aria-hidden":this.label?undefined:"true",role:"img","aria-labelledby":t?"label":undefined},t&&i("title",{id:"label"},t),this.iconMarkup)}get hostElement(){return o(this)}static get watchers(){return{type:["customIconHandler"]}}};s.style=n;export{s as q2_icon};
+//# sourceMappingURL=p-81e36fcd.entry.js.map

package/dist/q2-tecton-elements/{p-8f273db2.entry.js → p-88b303a7.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,h as e,g as i,c as o,H as r}from"./p-277dc8cd.js";import{c as s,l as a}from"./p-f34521a4.js";const n="*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}.q2-optgroup-header{--comp-header-padding:var(--tct-scale-1, var(--app-scale-1x, 5px)) var(--tct-scale-2, var(--app-scale-2x, 10px));background:var(--tct-optgroup-header-background, var(--tct-optgroup-header-bg, var(--t-optgroup-header-bg, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l2, var(--app-gray-l2, #e6e6e6)))))));color:var(--tct-optgroup-header-color, inherit);padding:var(--tct-optgroup-header-padding, var(--t-optgroup-header-padding, var(--comp-header-padding)));font-weight:var(--tct-optgroup-header-font-weight, var(--t-optgroup-header-font-weight, 600));text-transform:var(--tct-optgroup-header-text-transform, var(--t-optgroup-header-text-transform, uppercase));position:sticky;top:calc(var(--comp-popover-top-container-height, 0px) + var(--tct-optgroup-top, var(--t-optgroup-top, 0px)));z-index:5}";const d=class{constructor(e){t(this,e);this.guid=s();this.setHidden=()=>{this.hidden=this.options.every((t=>t.hidden||t._multiSelectHidden))};this.disabled=false;this.label=undefined;this.hidden=false}componentWillLoad(){const t=new MutationObserver(this.setHidden);t.observe(this.hostElement,{childList:true,attributes:true,subtree:true});this.mutationObserver=t;this.setHidden();this.disabledWatcher(this.disabled)}disconnectedCallback(){this.mutationObserver.disconnect();this.mutationObserver=null}get headerId(){return`q2-optgroup-header-${this.guid}`}get options(){return Array.from(this.hostElement.querySelectorAll("q2-option"))}disabledWatcher(t){this.options.forEach((e=>{e.disabledGroup=!!t}))}render(){return e("div",{class:"q2-optgroup-container",hidden:this.hidden,"aria-labelledby":this.headerId,role:"group"},e("div",{class:"q2-optgroup-header",id:this.headerId},this.label&&a(this.label)||""),e("div",{class:"q2-optgroup-options"},e("slot",null)))}get hostElement(){return i(this)}static get watchers(){return{disabled:["disabledWatcher"]}}};d.style=n;const p='*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{--comp-padding:0 var(--app-scale-2x, 10px);--comp-selected-icon-size:var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3x, 15px))));padding:var(--tct-option-padding, var(--t-option-padding, var(--comp-padding)));min-height:44px;align-items:center;cursor:pointer;grid-template-columns:var(--comp-selected-icon-size) 1fr;align-items:center;grid-template-areas:"icon content";gap:var(--tct-scale-1, var(--app-scale-1x, 5px))}:host(:focus),:host(:hover),:host([active]){position:relative;z-index:1}:host([multiline]){--comp-padding:var(--app-scale-2, 10px) var(--app-scale-2, 10px);--comp-selected-icon-size:var(--tct-option-selected-multiline-icon-size, var(--t-option-selected-multiline-icon-size, var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, 26px))))}:host([_no-select]){grid-template-columns:1fr;grid-template-areas:"content"}:host([aria-disabled]){cursor:not-allowed;opacity:var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4));pointer-events:none}:host([aria-hidden]){display:none}:host(:not([hidden]):not([aria-hidden])){display:grid}:host(:not([aria-disabled]):hover),:host([active]),:host(:focus){background:var(--tct-option-active-background, var(--tct-option-active-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))));color:var(--tct-option-active-color, inherit)}:host(:focus){border:1px solid #33b4ff}q2-icon{grid-area:icon;--tct-icon-size:var(--comp-selected-icon-size)}.content{display:block;grid-area:content}:host(:not([multiline])) .content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}';const c=class{constructor(e){t(this,e);this.displayChanged=o(this,"displayChanged",7);this.mutationHandler=t=>{var e;const i=(this.display||"").trim();const o=(((e=this.hostElement)===null||e===void 0?void 0:e.textContent)||"").trim();if(i===o||this.multiline)return;for(const e of t){if(e.type==="childList"||e.type==="characterData"){this.display=o}else if(e.type==="attributes"&&e.attributeName==="display"){this.hostElement.textContent=i}}if(this.hostElement.ariaSelected)this.displayChanged.emit({display:this.display,value:this.value})};this.role="option";this.display=undefined;this.value=undefined;this.disabled=undefined;this.disabledGroup=undefined;this.selected=undefined;this.multiline=undefined;this.active=undefined;this._multiSelectHidden=false}componentWillLoad(){this.initDisplay()}componentDidLoad(){const t=new MutationObserver(this.mutationHandler);t.observe(this.hostElement,{childList:true,subtree:true,attributes:true,characterData:true});this.mutationObserver=t}initDisplay(){var t,e;if(this.multiline)return;if(this.display&&!((e=(t=this.hostElement)===null||t===void 0?void 0:t.textContent)===null||e===void 0?void 0:e.trim())){this.hostElement.textContent=this.display}else if(!this.display&&this.hostElement.textContent.trim()){this.display=this.hostElement.textContent.trim()}}render(){const{disabled:t,disabledGroup:i,selected:o,_multiSelectHidden:s}=this;const a=t||i;return e(r,{tabindex:"-1","aria-disabled":a?"true":undefined,"aria-selected":`${!!o}`,"aria-hidden":s?"true":undefined,display:this.display},this.selected&&e("q2-icon",{type:"checkmark"}),e("div",{class:"content"},e("slot",null)))}get hostElement(){return i(this)}};c.style=p;export{d as q2_optgroup,c as q2_option};
-//# sourceMappingURL=p-8f273db2.entry.js.map
+import{r as t,h as e,g as i,c as o,H as r}from"./p-277dc8cd.js";import{c as s,l as a}from"./p-fb903495.js";const n="*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}.q2-optgroup-header{--comp-header-padding:var(--tct-scale-1, var(--app-scale-1x, 5px)) var(--tct-scale-2, var(--app-scale-2x, 10px));background:var(--tct-optgroup-header-background, var(--tct-optgroup-header-bg, var(--t-optgroup-header-bg, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l2, var(--app-gray-l2, #e6e6e6)))))));color:var(--tct-optgroup-header-color, inherit);padding:var(--tct-optgroup-header-padding, var(--t-optgroup-header-padding, var(--comp-header-padding)));font-weight:var(--tct-optgroup-header-font-weight, var(--t-optgroup-header-font-weight, 600));text-transform:var(--tct-optgroup-header-text-transform, var(--t-optgroup-header-text-transform, uppercase));position:sticky;top:calc(var(--comp-popover-top-container-height, 0px) + var(--tct-optgroup-top, var(--t-optgroup-top, 0px)));z-index:5}";const d=class{constructor(e){t(this,e);this.guid=s();this.setHidden=()=>{this.hidden=this.options.every((t=>t.hidden||t._multiSelectHidden))};this.disabled=false;this.label=undefined;this.hidden=false}componentWillLoad(){const t=new MutationObserver(this.setHidden);t.observe(this.hostElement,{childList:true,attributes:true,subtree:true});this.mutationObserver=t;this.setHidden();this.disabledWatcher(this.disabled)}disconnectedCallback(){this.mutationObserver.disconnect();this.mutationObserver=null}get headerId(){return`q2-optgroup-header-${this.guid}`}get options(){return Array.from(this.hostElement.querySelectorAll("q2-option"))}disabledWatcher(t){this.options.forEach((e=>{e.disabledGroup=!!t}))}render(){return e("div",{class:"q2-optgroup-container",hidden:this.hidden,"aria-labelledby":this.headerId,role:"group"},e("div",{class:"q2-optgroup-header",id:this.headerId},this.label&&a(this.label)||""),e("div",{class:"q2-optgroup-options"},e("slot",null)))}get hostElement(){return i(this)}static get watchers(){return{disabled:["disabledWatcher"]}}};d.style=n;const p='*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{--comp-padding:0 var(--app-scale-2x, 10px);--comp-selected-icon-size:var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3x, 15px))));padding:var(--tct-option-padding, var(--t-option-padding, var(--comp-padding)));min-height:44px;align-items:center;cursor:pointer;grid-template-columns:var(--comp-selected-icon-size) 1fr;align-items:center;grid-template-areas:"icon content";gap:var(--tct-scale-1, var(--app-scale-1x, 5px))}:host(:focus),:host(:hover),:host([active]){position:relative;z-index:1}:host([multiline]){--comp-padding:var(--app-scale-2, 10px) var(--app-scale-2, 10px);--comp-selected-icon-size:var(--tct-option-selected-multiline-icon-size, var(--t-option-selected-multiline-icon-size, var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, 26px))))}:host([_no-select]){grid-template-columns:1fr;grid-template-areas:"content"}:host([aria-disabled]){cursor:not-allowed;opacity:var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4));pointer-events:none}:host([aria-hidden]){display:none}:host(:not([hidden]):not([aria-hidden])){display:grid}:host(:not([aria-disabled]):hover),:host([active]),:host(:focus){background:var(--tct-option-active-background, var(--tct-option-active-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))));color:var(--tct-option-active-color, inherit)}:host(:focus){border:1px solid #33b4ff}q2-icon{grid-area:icon;--tct-icon-size:var(--comp-selected-icon-size)}.content{display:block;grid-area:content}:host(:not([multiline])) .content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}';const c=class{constructor(e){t(this,e);this.displayChanged=o(this,"displayChanged",7);this.mutationHandler=t=>{var e;const i=(this.display||"").trim();const o=(((e=this.hostElement)===null||e===void 0?void 0:e.textContent)||"").trim();if(i===o||this.multiline)return;for(const e of t){if(e.type==="childList"||e.type==="characterData"){this.display=o}else if(e.type==="attributes"&&e.attributeName==="display"){this.hostElement.textContent=i}}if(this.hostElement.ariaSelected)this.displayChanged.emit({display:this.display,value:this.value})};this.role="option";this.display=undefined;this.value=undefined;this.disabled=undefined;this.disabledGroup=undefined;this.selected=undefined;this.multiline=undefined;this.active=undefined;this._multiSelectHidden=false}componentWillLoad(){this.initDisplay()}componentDidLoad(){const t=new MutationObserver(this.mutationHandler);t.observe(this.hostElement,{childList:true,subtree:true,attributes:true,characterData:true});this.mutationObserver=t}initDisplay(){var t,e;if(this.multiline)return;if(this.display&&!((e=(t=this.hostElement)===null||t===void 0?void 0:t.textContent)===null||e===void 0?void 0:e.trim())){this.hostElement.textContent=this.display}else if(!this.display&&this.hostElement.textContent.trim()){this.display=this.hostElement.textContent.trim()}}render(){const{disabled:t,disabledGroup:i,selected:o,_multiSelectHidden:s}=this;const a=t||i;return e(r,{tabindex:"-1","aria-disabled":a?"true":undefined,"aria-selected":`${!!o}`,"aria-hidden":s?"true":undefined,display:this.display},this.selected&&e("q2-icon",{type:"checkmark"}),e("div",{class:"content"},e("slot",null)))}get hostElement(){return i(this)}};c.style=p;export{d as q2_optgroup,c as q2_option};
+//# sourceMappingURL=p-88b303a7.entry.js.map

package/dist/q2-tecton-elements/{p-8f273db2.entry.js.map → p-88b303a7.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["stylesCss","Q2Optgroup","this","guid","createGuid","setHidden","hidden","options","every","opt","_multiSelectHidden","componentWillLoad","observer","MutationObserver","observe","hostElement","childList","attributes","subtree","mutationObserver","disabledWatcher","disabled","disconnectedCallback","disconnect","headerId","Array","from","querySelectorAll","forEach","disabledGroup","render","h","class","role","id","label","loc","Q2Option","mutationHandler","mutations","display","trim","textContent","_a","multiline","mut","type","attributeName","ariaSelected","displayChanged","emit","value","initDisplay","componentDidLoad","characterData","_b","selected","isDisabled","Host","tabindex","undefined"],"sources":["./src/components/q2-optgroup/styles.scss?tag=q2-optgroup&encapsulation=shadow","./src/components/q2-optgroup/index.tsx","./src/components/q2-option/styles.scss?tag=q2-option&encapsulation=shadow","./src/components/q2-option/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n}\n\n.q2-optgroup-header {\n    --comp-header-padding: #{var-list(--tct-scale-1, --app-scale-1x, 5px) var-list(--tct-scale-2, --app-scale-2x, 10px)};\n    background: var-list(\n        --tct-optgroup-header-background,\n        var-prefixer(optgroup-header-bg),\n        --tct-gray-13,\n        --t-gray-13,\n        --tct-gray-l2,\n        --app-gray-l2,\n        #e6e6e6\n    );\n    color: var-list(--tct-optgroup-header-color, inherit);\n    padding: var-list(var-prefixer(optgroup-header-padding), --comp-header-padding);\n    font-weight: var-list(var-prefixer(optgroup-header-font-weight), 600);\n    text-transform: var-list(var-prefixer(optgroup-header-text-transform), uppercase);\n    position: sticky;\n    top: calc(var(--comp-popover-top-container-height, 0px) + var-list(var-prefixer(optgroup-top), 0px));\n    z-index: 5; // Keeps the optgroup over any hover or focus states\n}\n","import { Component, h, ComponentInterface, Prop, Element, Watch, State } from '@stencil/core';\nimport { createGuid, loc } from 'src/utils';\n\n@Component({\n    tag: 'q2-optgroup',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Optgroup implements ComponentInterface {\n    @Prop({ reflect: true }) disabled: boolean = false;\n    @Prop({ reflect: true }) label: string;\n    @Element() hostElement: HTMLElement;\n    @State() hidden: boolean = false;\n    guid: number = createGuid();\n    mutationObserver: MutationObserver;\n\n    /// LIFECYCLE HOOKS ///\n\n    componentWillLoad() {\n        const observer = new MutationObserver(this.setHidden);\n        observer.observe(this.hostElement, { childList: true, attributes: true, subtree: true });\n        this.mutationObserver = observer;\n\n        // set initially\n        this.setHidden();\n        this.disabledWatcher(this.disabled);\n    }\n\n    disconnectedCallback() {\n        this.mutationObserver.disconnect();\n        this.mutationObserver = null;\n    }\n\n    setHidden = () => {\n        this.hidden = this.options.every(opt => opt.hidden || opt._multiSelectHidden);\n    };\n\n    get headerId() {\n        return `q2-optgroup-header-${this.guid}`;\n    }\n\n    get options() {\n        return Array.from(this.hostElement.querySelectorAll('q2-option'));\n    }\n\n    ///// OBSERVERS ///////\n\n    @Watch('disabled')\n    disabledWatcher(disabled: boolean) {\n        this.options.forEach(opt => {\n            opt.disabledGroup = !!disabled;\n        });\n    }\n\n    render() {\n        return (\n            <div\n                class=\"q2-optgroup-container\"\n                hidden={this.hidden}\n                aria-labelledby={this.headerId}\n                role=\"group\"\n            >\n                <div\n                    class=\"q2-optgroup-header\"\n                    id={this.headerId}\n                >\n                    {(this.label && loc(this.label)) || ''}\n                </div>\n                <div class=\"q2-optgroup-options\">\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n}\n","@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    --comp-padding: #{0 var-list(--app-scale-2x, 10px)};\n    --comp-selected-icon-size: #{var-list(var-prefixer(option-selected-icon-size), --tct-scale-3, --app-scale-3x, 15px)};\n    padding: var-list(var-prefixer(option-padding), --comp-padding);\n    min-height: 44px;\n    align-items: center;\n    cursor: pointer;\n    grid-template-columns:\n        var(--comp-selected-icon-size)\n        1fr;\n    align-items: center;\n    grid-template-areas: 'icon content';\n    gap: var-list(--tct-scale-1, --app-scale-1x, 5px);\n}\n\n:host(:focus),\n:host(:hover),\n:host([active]) {\n    position: relative;\n    z-index: 1; // Puts the option above any scroll shadows on the `q2-action-sheet`\n}\n\n:host([multiline]) {\n    --comp-padding: #{var-list(--app-scale-2, 10px) var-list(--app-scale-2, 10px)};\n    --comp-selected-icon-size: #{var-list(var-prefixer(option-selected-multiline-icon-size), var-prefixer(option-selected-icon-size), 26px)};\n}\n\n:host([_no-select]) {\n    grid-template-columns: 1fr;\n    grid-template-areas: 'content';\n}\n\n:host([aria-disabled]) {\n    cursor: not-allowed;\n    opacity: var-list(--tct-disabled-opacity, --app-disabled-opacity, 0.4);\n    pointer-events: none;\n}\n\n:host([aria-hidden]) {\n    display: none;\n}\n\n:host(:not([hidden]):not([aria-hidden])) {\n    display: grid;\n}\n\n:host(:not([aria-disabled]):hover),\n:host([active]),\n:host(:focus) {\n    background: var-list(\n        --tct-option-active-background,\n        --tct-option-active-bg,\n        --tct-gray-14,\n        --t-gray-14,\n        --tct-gray-l3,\n        --app-gray-l3,\n        #f2f2f2\n    );\n    color: var(--tct-option-active-color, inherit);\n}\n\n:host(:focus) {\n    border: 1px solid #33b4ff;\n}\n\nq2-icon {\n    grid-area: icon;\n    --tct-icon-size: var(--comp-selected-icon-size);\n}\n\n.content {\n    display: block;\n    grid-area: content;\n\n    :host(:not([multiline])) & {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n}\n","import { Component, Prop, h, Element, ComponentInterface, Host, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n    tag: 'q2-option',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Option implements ComponentInterface {\n    /**\n     * Used by q2-option-list to set a role on the option\n     * @type {('option' | 'menuitem')}\n     * @private\n     */\n    @Prop({ reflect: true }) role: string = 'option';\n    @Prop({ mutable: true }) display: string;\n    @Prop({ reflect: true }) value: string;\n    @Prop({ reflect: true }) disabled: boolean;\n    /**\n     * Used by consuming elements to disable all options in the group\n     * @private\n     */\n    @Prop({ reflect: true }) disabledGroup: boolean;\n    /**\n     * Used by q2-option-list to indicate the option is selected\n     * @private\n     */\n    @Prop({ reflect: true }) selected: boolean;\n    /**\n     * Used by consuming elements to enable multiline content support\n     * @private\n     */\n    @Prop({ reflect: true }) multiline: boolean;\n    /**\n     * Used by q2-option-list to indicate the option is active\n     * @private\n     */\n    @Prop({ reflect: true }) active: boolean;\n    @Prop({ reflect: true, attribute: '_multiSelectHidden' }) _multiSelectHidden: boolean = false;\n\n    @Element() hostElement: HTMLElement;\n    @Event() displayChanged: EventEmitter<{ value: string; display: string }>;\n\n    mutationObserver: MutationObserver;\n\n    componentWillLoad() {\n        this.initDisplay();\n    }\n\n    componentDidLoad() {\n        const observer = new MutationObserver(this.mutationHandler);\n        observer.observe(this.hostElement, { childList: true, subtree: true, attributes: true, characterData: true });\n        this.mutationObserver = observer;\n    }\n\n    initDisplay() {\n        if (this.multiline) return;\n        if (this.display && !this.hostElement?.textContent?.trim()) {\n            this.hostElement.textContent = this.display;\n        } else if (!this.display && this.hostElement.textContent.trim()) {\n            this.display = this.hostElement.textContent.trim();\n        }\n    }\n\n    mutationHandler = (mutations: MutationRecord[]) => {\n        const display = (this.display || '').trim();\n        const textContent = (this.hostElement?.textContent || '').trim();\n        if (display === textContent || this.multiline) return;\n        for (const mut of mutations) {\n            if (mut.type === 'childList' || mut.type === 'characterData') {\n                this.display = textContent;\n            } else if (mut.type === 'attributes' && mut.attributeName === 'display') {\n                this.hostElement.textContent = display;\n            }\n        }\n        if (this.hostElement.ariaSelected) this.displayChanged.emit({ display: this.display, value: this.value });\n    };\n\n    render() {\n        const { disabled, disabledGroup, selected, _multiSelectHidden } = this;\n        const isDisabled = disabled || disabledGroup;\n\n        return (\n            <Host\n                tabindex=\"-1\"\n                aria-disabled={isDisabled ? 'true' : undefined}\n                aria-selected={`${!!selected}`}\n                aria-hidden={_multiSelectHidden ? 'true' : undefined}\n                display={this.display}\n            >\n                {this.selected && <q2-icon type=\"checkmark\" />}\n                <div class=\"content\">\n                    <slot />\n                </div>\n            </Host>\n        );\n    }\n}\n"],"mappings":"2GAAA,MAAMA,EAAY,m+C,MCQLC,EAAU,M,yBAKnBC,KAAAC,KAAeC,IAoBfF,KAAAG,UAAY,KACRH,KAAKI,OAASJ,KAAKK,QAAQC,OAAMC,GAAOA,EAAIH,QAAUG,EAAIC,oBAAmB,E,cAzBpC,M,iCAGlB,K,CAM3BC,oBACI,MAAMC,EAAW,IAAIC,iBAAiBX,KAAKG,WAC3CO,EAASE,QAAQZ,KAAKa,YAAa,CAAEC,UAAW,KAAMC,WAAY,KAAMC,QAAS,OACjFhB,KAAKiB,iBAAmBP,EAGxBV,KAAKG,YACLH,KAAKkB,gBAAgBlB,KAAKmB,S,CAG9BC,uBACIpB,KAAKiB,iBAAiBI,aACtBrB,KAAKiB,iBAAmB,I,CAOxBK,eACA,MAAO,sBAAsBtB,KAAKC,M,CAGlCI,cACA,OAAOkB,MAAMC,KAAKxB,KAAKa,YAAYY,iBAAiB,a,CAMxDP,gBAAgBC,GACZnB,KAAKK,QAAQqB,SAAQnB,IACjBA,EAAIoB,gBAAkBR,CAAQ,G,CAItCS,SACI,OACIC,EAAA,OACIC,MAAM,wBACN1B,OAAQJ,KAAKI,OAAM,kBACFJ,KAAKsB,SACtBS,KAAK,SAELF,EAAA,OACIC,MAAM,qBACNE,GAAIhC,KAAKsB,UAEPtB,KAAKiC,OAASC,EAAIlC,KAAKiC,QAAW,IAExCJ,EAAA,OAAKC,MAAM,uBACPD,EAAA,c,yGCrEpB,MAAM/B,EAAY,8wE,MCOLqC,EAAQ,M,wEAwDjBnC,KAAAoC,gBAAmBC,I,MACf,MAAMC,GAAWtC,KAAKsC,SAAW,IAAIC,OACrC,MAAMC,KAAeC,EAAAzC,KAAKa,eAAW,MAAA4B,SAAA,SAAAA,EAAED,cAAe,IAAID,OAC1D,GAAID,IAAYE,GAAexC,KAAK0C,UAAW,OAC/C,IAAK,MAAMC,KAAON,EAAW,CACzB,GAAIM,EAAIC,OAAS,aAAeD,EAAIC,OAAS,gBAAiB,CAC1D5C,KAAKsC,QAAUE,C,MACZ,GAAIG,EAAIC,OAAS,cAAgBD,EAAIE,gBAAkB,UAAW,CACrE7C,KAAKa,YAAY2B,YAAcF,C,EAGvC,GAAItC,KAAKa,YAAYiC,aAAc9C,KAAK+C,eAAeC,KAAK,CAAEV,QAAStC,KAAKsC,QAASW,MAAOjD,KAAKiD,OAAQ,E,UA7DrE,S,gMAwBgD,K,CAOxFxC,oBACIT,KAAKkD,a,CAGTC,mBACI,MAAMzC,EAAW,IAAIC,iBAAiBX,KAAKoC,iBAC3C1B,EAASE,QAAQZ,KAAKa,YAAa,CAAEC,UAAW,KAAME,QAAS,KAAMD,WAAY,KAAMqC,cAAe,OACtGpD,KAAKiB,iBAAmBP,C,CAG5BwC,c,QACI,GAAIlD,KAAK0C,UAAW,OACpB,GAAI1C,KAAKsC,YAAYe,GAAAZ,EAAAzC,KAAKa,eAAW,MAAA4B,SAAA,SAAAA,EAAED,eAAW,MAAAa,SAAA,SAAAA,EAAEd,QAAQ,CACxDvC,KAAKa,YAAY2B,YAAcxC,KAAKsC,O,MACjC,IAAKtC,KAAKsC,SAAWtC,KAAKa,YAAY2B,YAAYD,OAAQ,CAC7DvC,KAAKsC,QAAUtC,KAAKa,YAAY2B,YAAYD,M,EAkBpDX,SACI,MAAMT,SAAEA,EAAQQ,cAAEA,EAAa2B,SAAEA,EAAQ9C,mBAAEA,GAAuBR,KAClE,MAAMuD,EAAapC,GAAYQ,EAE/B,OACIE,EAAC2B,EAAI,CACDC,SAAS,KAAI,gBACEF,EAAa,OAASG,UAAS,gBAC/B,KAAKJ,IAAU,cACjB9C,EAAqB,OAASkD,UAC3CpB,QAAStC,KAAKsC,SAEbtC,KAAKsD,UAAYzB,EAAA,WAASe,KAAK,cAChCf,EAAA,OAAKC,MAAM,WACPD,EAAA,c"}
+{"version":3,"names":["stylesCss","Q2Optgroup","this","guid","createGuid","setHidden","hidden","options","every","opt","_multiSelectHidden","componentWillLoad","observer","MutationObserver","observe","hostElement","childList","attributes","subtree","mutationObserver","disabledWatcher","disabled","disconnectedCallback","disconnect","headerId","Array","from","querySelectorAll","forEach","disabledGroup","render","h","class","role","id","label","loc","Q2Option","mutationHandler","mutations","display","trim","textContent","_a","multiline","mut","type","attributeName","ariaSelected","displayChanged","emit","value","initDisplay","componentDidLoad","characterData","_b","selected","isDisabled","Host","tabindex","undefined"],"sources":["./src/components/q2-optgroup/styles.scss?tag=q2-optgroup&encapsulation=shadow","./src/components/q2-optgroup/index.tsx","./src/components/q2-option/styles.scss?tag=q2-option&encapsulation=shadow","./src/components/q2-option/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n}\n\n.q2-optgroup-header {\n    --comp-header-padding: #{var-list(--tct-scale-1, --app-scale-1x, 5px) var-list(--tct-scale-2, --app-scale-2x, 10px)};\n    background: var-list(\n        --tct-optgroup-header-background,\n        var-prefixer(optgroup-header-bg),\n        --tct-gray-13,\n        --t-gray-13,\n        --tct-gray-l2,\n        --app-gray-l2,\n        #e6e6e6\n    );\n    color: var-list(--tct-optgroup-header-color, inherit);\n    padding: var-list(var-prefixer(optgroup-header-padding), --comp-header-padding);\n    font-weight: var-list(var-prefixer(optgroup-header-font-weight), 600);\n    text-transform: var-list(var-prefixer(optgroup-header-text-transform), uppercase);\n    position: sticky;\n    top: calc(var(--comp-popover-top-container-height, 0px) + var-list(var-prefixer(optgroup-top), 0px));\n    z-index: 5; // Keeps the optgroup over any hover or focus states\n}\n","import { Component, h, ComponentInterface, Prop, Element, Watch, State } from '@stencil/core';\nimport { createGuid, loc } from 'src/utils';\n\n@Component({\n    tag: 'q2-optgroup',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Optgroup implements ComponentInterface {\n    @Prop({ reflect: true }) disabled: boolean = false;\n    @Prop({ reflect: true }) label: string;\n    @Element() hostElement: HTMLElement;\n    @State() hidden: boolean = false;\n    guid: number = createGuid();\n    mutationObserver: MutationObserver;\n\n    /// LIFECYCLE HOOKS ///\n\n    componentWillLoad() {\n        const observer = new MutationObserver(this.setHidden);\n        observer.observe(this.hostElement, { childList: true, attributes: true, subtree: true });\n        this.mutationObserver = observer;\n\n        // set initially\n        this.setHidden();\n        this.disabledWatcher(this.disabled);\n    }\n\n    disconnectedCallback() {\n        this.mutationObserver.disconnect();\n        this.mutationObserver = null;\n    }\n\n    setHidden = () => {\n        this.hidden = this.options.every(opt => opt.hidden || opt._multiSelectHidden);\n    };\n\n    get headerId() {\n        return `q2-optgroup-header-${this.guid}`;\n    }\n\n    get options() {\n        return Array.from(this.hostElement.querySelectorAll('q2-option'));\n    }\n\n    ///// OBSERVERS ///////\n\n    @Watch('disabled')\n    disabledWatcher(disabled: boolean) {\n        this.options.forEach(opt => {\n            opt.disabledGroup = !!disabled;\n        });\n    }\n\n    render() {\n        return (\n            <div\n                class=\"q2-optgroup-container\"\n                hidden={this.hidden}\n                aria-labelledby={this.headerId}\n                role=\"group\"\n            >\n                <div\n                    class=\"q2-optgroup-header\"\n                    id={this.headerId}\n                >\n                    {(this.label && loc(this.label)) || ''}\n                </div>\n                <div class=\"q2-optgroup-options\">\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n}\n","@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    --comp-padding: #{0 var-list(--app-scale-2x, 10px)};\n    --comp-selected-icon-size: #{var-list(var-prefixer(option-selected-icon-size), --tct-scale-3, --app-scale-3x, 15px)};\n    padding: var-list(var-prefixer(option-padding), --comp-padding);\n    min-height: 44px;\n    align-items: center;\n    cursor: pointer;\n    grid-template-columns:\n        var(--comp-selected-icon-size)\n        1fr;\n    align-items: center;\n    grid-template-areas: 'icon content';\n    gap: var-list(--tct-scale-1, --app-scale-1x, 5px);\n}\n\n:host(:focus),\n:host(:hover),\n:host([active]) {\n    position: relative;\n    z-index: 1; // Puts the option above any scroll shadows on the `q2-action-sheet`\n}\n\n:host([multiline]) {\n    --comp-padding: #{var-list(--app-scale-2, 10px) var-list(--app-scale-2, 10px)};\n    --comp-selected-icon-size: #{var-list(var-prefixer(option-selected-multiline-icon-size), var-prefixer(option-selected-icon-size), 26px)};\n}\n\n:host([_no-select]) {\n    grid-template-columns: 1fr;\n    grid-template-areas: 'content';\n}\n\n:host([aria-disabled]) {\n    cursor: not-allowed;\n    opacity: var-list(--tct-disabled-opacity, --app-disabled-opacity, 0.4);\n    pointer-events: none;\n}\n\n:host([aria-hidden]) {\n    display: none;\n}\n\n:host(:not([hidden]):not([aria-hidden])) {\n    display: grid;\n}\n\n:host(:not([aria-disabled]):hover),\n:host([active]),\n:host(:focus) {\n    background: var-list(\n        --tct-option-active-background,\n        --tct-option-active-bg,\n        --tct-gray-14,\n        --t-gray-14,\n        --tct-gray-l3,\n        --app-gray-l3,\n        #f2f2f2\n    );\n    color: var(--tct-option-active-color, inherit);\n}\n\n:host(:focus) {\n    border: 1px solid #33b4ff;\n}\n\nq2-icon {\n    grid-area: icon;\n    --tct-icon-size: var(--comp-selected-icon-size);\n}\n\n.content {\n    display: block;\n    grid-area: content;\n\n    :host(:not([multiline])) & {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n}\n","import { Component, Prop, h, Element, ComponentInterface, Host, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n    tag: 'q2-option',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Option implements ComponentInterface {\n    /**\n     * Used by q2-option-list to set a role on the option\n     * @type {('option' | 'menuitem')}\n     * @private\n     */\n    @Prop({ reflect: true }) role: string = 'option';\n    @Prop({ mutable: true }) display: string;\n    @Prop({ reflect: true }) value: string;\n    @Prop({ reflect: true }) disabled: boolean;\n    /**\n     * Used by consuming elements to disable all options in the group\n     * @private\n     */\n    @Prop({ reflect: true }) disabledGroup: boolean;\n    /**\n     * Used by q2-option-list to indicate the option is selected\n     * @private\n     */\n    @Prop({ reflect: true }) selected: boolean;\n    /**\n     * Used by consuming elements to enable multiline content support\n     * @private\n     */\n    @Prop({ reflect: true }) multiline: boolean;\n    /**\n     * Used by q2-option-list to indicate the option is active\n     * @private\n     */\n    @Prop({ reflect: true }) active: boolean;\n    @Prop({ reflect: true, attribute: '_multiSelectHidden' }) _multiSelectHidden: boolean = false;\n\n    @Element() hostElement: HTMLElement;\n\n    /**\n     * Used by consuming elements to indicate the display value of the option has changed.\n     * @private\n     */\n    @Event() displayChanged: EventEmitter<{ value: string; display: string }>;\n\n    mutationObserver: MutationObserver;\n\n    componentWillLoad() {\n        this.initDisplay();\n    }\n\n    componentDidLoad() {\n        const observer = new MutationObserver(this.mutationHandler);\n        observer.observe(this.hostElement, { childList: true, subtree: true, attributes: true, characterData: true });\n        this.mutationObserver = observer;\n    }\n\n    initDisplay() {\n        if (this.multiline) return;\n        if (this.display && !this.hostElement?.textContent?.trim()) {\n            this.hostElement.textContent = this.display;\n        } else if (!this.display && this.hostElement.textContent.trim()) {\n            this.display = this.hostElement.textContent.trim();\n        }\n    }\n\n    mutationHandler = (mutations: MutationRecord[]) => {\n        const display = (this.display || '').trim();\n        const textContent = (this.hostElement?.textContent || '').trim();\n        if (display === textContent || this.multiline) return;\n        for (const mut of mutations) {\n            if (mut.type === 'childList' || mut.type === 'characterData') {\n                this.display = textContent;\n            } else if (mut.type === 'attributes' && mut.attributeName === 'display') {\n                this.hostElement.textContent = display;\n            }\n        }\n        if (this.hostElement.ariaSelected) this.displayChanged.emit({ display: this.display, value: this.value });\n    };\n\n    render() {\n        const { disabled, disabledGroup, selected, _multiSelectHidden } = this;\n        const isDisabled = disabled || disabledGroup;\n\n        return (\n            <Host\n                tabindex=\"-1\"\n                aria-disabled={isDisabled ? 'true' : undefined}\n                aria-selected={`${!!selected}`}\n                aria-hidden={_multiSelectHidden ? 'true' : undefined}\n                display={this.display}\n            >\n                {this.selected && <q2-icon type=\"checkmark\" />}\n                <div class=\"content\">\n                    <slot />\n                </div>\n            </Host>\n        );\n    }\n}\n"],"mappings":"2GAAA,MAAMA,EAAY,m+C,MCQLC,EAAU,M,yBAKnBC,KAAAC,KAAeC,IAoBfF,KAAAG,UAAY,KACRH,KAAKI,OAASJ,KAAKK,QAAQC,OAAMC,GAAOA,EAAIH,QAAUG,EAAIC,oBAAmB,E,cAzBpC,M,iCAGlB,K,CAM3BC,oBACI,MAAMC,EAAW,IAAIC,iBAAiBX,KAAKG,WAC3CO,EAASE,QAAQZ,KAAKa,YAAa,CAAEC,UAAW,KAAMC,WAAY,KAAMC,QAAS,OACjFhB,KAAKiB,iBAAmBP,EAGxBV,KAAKG,YACLH,KAAKkB,gBAAgBlB,KAAKmB,S,CAG9BC,uBACIpB,KAAKiB,iBAAiBI,aACtBrB,KAAKiB,iBAAmB,I,CAOxBK,eACA,MAAO,sBAAsBtB,KAAKC,M,CAGlCI,cACA,OAAOkB,MAAMC,KAAKxB,KAAKa,YAAYY,iBAAiB,a,CAMxDP,gBAAgBC,GACZnB,KAAKK,QAAQqB,SAAQnB,IACjBA,EAAIoB,gBAAkBR,CAAQ,G,CAItCS,SACI,OACIC,EAAA,OACIC,MAAM,wBACN1B,OAAQJ,KAAKI,OAAM,kBACFJ,KAAKsB,SACtBS,KAAK,SAELF,EAAA,OACIC,MAAM,qBACNE,GAAIhC,KAAKsB,UAEPtB,KAAKiC,OAASC,EAAIlC,KAAKiC,QAAW,IAExCJ,EAAA,OAAKC,MAAM,uBACPD,EAAA,c,yGCrEpB,MAAM/B,EAAY,8wE,MCOLqC,EAAQ,M,wEA6DjBnC,KAAAoC,gBAAmBC,I,MACf,MAAMC,GAAWtC,KAAKsC,SAAW,IAAIC,OACrC,MAAMC,KAAeC,EAAAzC,KAAKa,eAAW,MAAA4B,SAAA,SAAAA,EAAED,cAAe,IAAID,OAC1D,GAAID,IAAYE,GAAexC,KAAK0C,UAAW,OAC/C,IAAK,MAAMC,KAAON,EAAW,CACzB,GAAIM,EAAIC,OAAS,aAAeD,EAAIC,OAAS,gBAAiB,CAC1D5C,KAAKsC,QAAUE,C,MACZ,GAAIG,EAAIC,OAAS,cAAgBD,EAAIE,gBAAkB,UAAW,CACrE7C,KAAKa,YAAY2B,YAAcF,C,EAGvC,GAAItC,KAAKa,YAAYiC,aAAc9C,KAAK+C,eAAeC,KAAK,CAAEV,QAAStC,KAAKsC,QAASW,MAAOjD,KAAKiD,OAAQ,E,UAlErE,S,gMAwBgD,K,CAYxFxC,oBACIT,KAAKkD,a,CAGTC,mBACI,MAAMzC,EAAW,IAAIC,iBAAiBX,KAAKoC,iBAC3C1B,EAASE,QAAQZ,KAAKa,YAAa,CAAEC,UAAW,KAAME,QAAS,KAAMD,WAAY,KAAMqC,cAAe,OACtGpD,KAAKiB,iBAAmBP,C,CAG5BwC,c,QACI,GAAIlD,KAAK0C,UAAW,OACpB,GAAI1C,KAAKsC,YAAYe,GAAAZ,EAAAzC,KAAKa,eAAW,MAAA4B,SAAA,SAAAA,EAAED,eAAW,MAAAa,SAAA,SAAAA,EAAEd,QAAQ,CACxDvC,KAAKa,YAAY2B,YAAcxC,KAAKsC,O,MACjC,IAAKtC,KAAKsC,SAAWtC,KAAKa,YAAY2B,YAAYD,OAAQ,CAC7DvC,KAAKsC,QAAUtC,KAAKa,YAAY2B,YAAYD,M,EAkBpDX,SACI,MAAMT,SAAEA,EAAQQ,cAAEA,EAAa2B,SAAEA,EAAQ9C,mBAAEA,GAAuBR,KAClE,MAAMuD,EAAapC,GAAYQ,EAE/B,OACIE,EAAC2B,EAAI,CACDC,SAAS,KAAI,gBACEF,EAAa,OAASG,UAAS,gBAC/B,KAAKJ,IAAU,cACjB9C,EAAqB,OAASkD,UAC3CpB,QAAStC,KAAKsC,SAEbtC,KAAKsD,UAAYzB,EAAA,WAASe,KAAK,cAChCf,EAAA,OAAKC,MAAM,WACPD,EAAA,c"}

package/dist/q2-tecton-elements/p-9889692d.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as i,g as n}from"./p-277dc8cd.js";import{r as s,o as a,i as r,n as o,l as c}from"./p-fb903495.js";const h="*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block;background:var(--tct-section-background, var(--tct-section-background-color, var(--t-section-background-color, var(--tct-section-bg, var(--t-section-bg, var(--app-white, #ffffff))))));color:var(--tct-section-font-color, var(--t-section-font-color, var(--t-text, #4d4d4d)));border-radius:var(--tct-section-border-radius, var(--t-section-border-radius, var(--app-border-radius-1, 3px)));margin:var(--tct-section-margin, var(--t-section-margin, var(--app-scale-3x, 15px)));border-width:var(--tct-section-border-width, 0);border-style:var(--tct-section-border-style, solid);border-color:var(--tct-section-border-color, none)}@media screen and (max-width: 767px){:host{--comp-default-margin:var(--app-scale-3x, 15px) 0;margin:var(--tct-section-margin, var(--t-section-margin, var(--comp-default-margin)))}}@media print{:host{--comp-default-print-margin:var(--app-scale-3x, 15px) 0;margin:var(--tct-section-print-margin, var(--comp-default-print-margin))}}.wrapper{--comp-tween:var(--tct-section-tween, var(--t-section-tween, var(--app-tween-1, 0.2s ease)));--comp-default-wrapper-padding:var(--app-scale-1x, 5px) 0;display:block;padding:var(--tct-section-wrapper-padding, var(--t-section-wrapper-padding, var(--comp-default-wrapper-padding)))}.wrapper:hover{box-shadow:var(--tct-section-wrapper-hover-box-shadow, var(--t-section-wrapper-hover-box-shadow, inherit))}:host([collapsible]) .wrapper{--comp-tween:var(--tct-section-tween, var(--t-section-tween, var(--app-tween-2, 0.4s ease)))}header{--comp-default-header-padding:0 var(--app-scale-3x, 15px);padding:var(--tct-section-header-padding, var(--t-section-header-padding, var(--comp-default-header-padding)));display:flex}@media print{header{padding:var(--tct-section-header-print-padding, 0)}}header.has-header{min-height:var(--tct-section-header-min-height, var(--t-section-header-min-height, 44px))}.header-content{flex:1 1 100%;min-width:0;align-self:center}:host([collapsible]) .header-content{cursor:pointer}.title{margin:var(--tct-section-title-margin, 0);font-size:var(--tct-section-title-font-size, 20px);font-weight:var(--tct-section-title-font-weight, 600);text-transform:var(--tct-section-title-text-transform, uppercase);letter-spacing:var(--tct-section-title-letter-spacing, 0.5px)}q2-icon{transition:transform var(--comp-tween)}:host(:not([expanded])) q2-icon,:host([expanded=false]) q2-icon{transform:rotate(180deg)}.content-wrapper{height:auto}.content-wrapper.is-closed{display:none;overflow:hidden}.content-wrapper.is-transitioning{overflow:hidden}:host([collapsible]) .content-wrapper{transition:height var(--comp-tween)}.content{--comp-default-content-padding:var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);padding:var(--tct-section-content-padding, var(--t-section-content-padding, var(--comp-default-content-padding)))}@media print{.content{padding:var(--tct-section-content-print-padding, 0)}}.content:focus{box-shadow:none}:host([collapsible]) :host(:not([expanded])) .content{visibility:hidden}";const d=class{constructor(i){t(this,i);this.change=e(this,"change",7);this.titleId="title";this.contentId="content";this.onHeaderClick=()=>{this.change.emit({expanded:!this.expanded})};this.onTransitionEnd=()=>{if(this.expanded){this.contentHeight=undefined}else{this.hideContent=true}setTimeout((()=>{this.clearResizeInterval()}),1e3)};this.onHeaderSlotChange=()=>{const t=!!this.hostElement.querySelector('[slot="q2-section-header"]');if(this.hasYieldedHeader!==t){this.hasYieldedHeader=!!t}};this.clearResizeInterval=()=>{this.resizerFn&&clearInterval(this.resizerFn)};this.addHeaderSlotListener=()=>{if(this.headerSlot){this.headerSlot.addEventListener("slotchange",this.onHeaderSlotChange);return}const t=new MutationObserver(this.onHeaderSlotChange);t.observe(this.headerSlotWrapper,{childList:true});this.headerSlotMutationObserver=t};this.removeHeaderSlotListener=()=>{if(this.headerSlot){this.headerSlot.removeEventListener("slotchange",this.onHeaderSlotChange);return}this.headerSlotMutationObserver.disconnect()};this.addContentSlotListener=()=>{if(this.contentSlot){this.contentSlot.addEventListener("slotchange",s);return}const t=new MutationObserver(s);t.observe(this.contentContainer,{childList:true,subtree:true});this.contentSlotMutationObserver=t};this.removeContentSlotListener=()=>{if(this.contentSlot){this.contentSlot.removeEventListener("slotchange",s);return}this.contentSlotMutationObserver.disconnect()};this.label=undefined;this.collapsible=undefined;this.noCollapseIcon=undefined;this.expanded=undefined;this.contentHeight=undefined;this.hideContent=false;this.hasYieldedHeader=false}componentWillLoad(){this.onHeaderSlotChange();const{collapsible:t,expanded:e}=this;this.contentHeight=t&&e?undefined:"0px";this.hideContent=!e}componentDidLoad(){this.addHeaderSlotListener();this.addContentSlotListener();a(this.hostElement)}disconnectedCallback(){this.removeHeaderSlotListener();this.removeContentSlotListener()}defaultChangeHandler(t){if(t.target===this.hostElement&&!this.hostElement.onchange&&!!t.detail){this.expanded=t.detail.expanded}}delegateFocus(t){if(!r(t,this.hostElement))return;this.contentContainer.focus()}async expandedObserver(t){this.clearResizeInterval();this.resizerFn=setInterval(s,5);if(t){this.expandSection()}else{this.collapseSection()}}async collapseSection(){this.contentHeight=this.contentContainerHeight;await o((()=>{this.contentHeight=this.currentHeight}))}async expandSection(){this.hideContent=false;await o((()=>{this.contentHeight=this.currentHeight}))}collapsibleObserver(){this.contentHeight=this.currentHeight}get currentHeight(){const{collapsible:t,expanded:e}=this;if(!t){return null}else if(e){return this.contentContainerHeight}else{return"0"}}get contentContainerHeight(){return`${this.contentContainer.offsetHeight||0}px`}render(){const t=this.label||this.hasYieldedHeader;const e=["content-wrapper"];const{collapsible:n,hideContent:s,contentHeight:a}=this;if(n){if(s)e.push("is-closed");else if(a)e.push("is-transitioning")}const r=!this.hasYieldedHeader&&!!this.label;return i("section",{class:"wrapper"},i("header",{class:t?"has-header":""},i("div",{class:"header-content",id:this.titleId,onClick:this.collapsible&&this.onHeaderClick},r&&i("h2",{class:"title"},c(this.label)),i("div",{ref:t=>this.headerSlotWrapper=t,class:"header-slot-wrapper"},i("slot",{ref:t=>this.headerSlot=t,name:"q2-section-header"}))),this.collapsible&&!this.noCollapseIcon&&i("q2-btn",{label:c(this.label||"tecton.element.section.defaultToggleLabel"),ariaExpanded:`${!!this.expanded}`,ariaControls:this.contentId,"test-id":"toggleButton","hide-label":true,onClick:this.onHeaderClick},i("q2-icon",{type:"chevron-up"}))),i("div",{class:e.join(" "),id:this.contentId,"aria-labelledby":this.titleId,role:"region",onTransitionEnd:this.onTransitionEnd,style:this.collapsible&&{height:this.contentHeight}},i("div",{ref:t=>this.contentContainer=t,class:"content",tabindex:"-1"},i("slot",{ref:t=>this.contentSlot=t}))))}get hostElement(){return n(this)}static get watchers(){return{expanded:["expandedObserver"],collapsible:["collapsibleObserver"]}}};d.style=h;export{d as q2_section};
+//# sourceMappingURL=p-9889692d.entry.js.map

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

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

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

@@ -1 +1 @@
-{"version":3,"names":["stylesCss","TectonTabPane","this","onIFrameLoad","event","iframe","target","contentWindow","postMessage","moduleId","badgeObserver","badge","emit","iframeTitle","split","slice","join","componentWillRender","loadingWrapper","hostElement","shadowRoot","querySelector","style","minHeight","hidden","selected","componentWillLoad","_showForm","showForm","componentDidRender","formElement","parentElement","submit","selectedObserver","loader","render","h","id","guid","index","class","role","tabindex","provided","undefined","name","scrolling","src","authPayload","length","url","onLoad","title","allow","method","action","encType","map","element","type","value","key"],"sources":["./src/components/tecton-tab-pane/styles.scss?tag=tecton-tab-pane&encapsulation=shadow","./src/components/tecton-tab-pane/index.tsx"],"sourcesContent":["@import '../q2-tab-pane/styles.scss';\n\n.loading-wrapper { \n    height: 44px;\n    width: 100%;\n    align-items: center;\n    justify-content: center;\n}\n.loading-wrapper:not([hidden]) {\n    display: flex;\n}\niframe {\n    width: 100%;\n    height: auto;\n    overflow-y: hidden;\n    border: none;\n}\niframe:not([hidden]) {\n    display: inline-block;\n}\n\n.slot-wrapper:focus {\n    outline: none;\n    box-shadow: var(--const-global-focus);\n}\n","import { Component, ComponentInterface, Element, h, Prop, State, Event, EventEmitter, Watch } from '@stencil/core';\nimport { Q2Badge } from '../q2-badge';\n\n@Component({\n    tag: 'tecton-tab-pane',\n    styleUrl: 'styles.scss',\n    shadow: true,\n})\nexport class TectonTabPane implements ComponentInterface {\n    @Prop({ reflect: true }) value: string;\n    @Prop({ reflect: true }) label: string;\n    @Prop({ reflect: true }) name: string;\n    @Prop({ reflect: true }) selected: boolean;\n    @Prop() index: number;\n    @Prop() guid: number;\n    // above props duplicated from q2-tab-pane.\n    // Unable to extend due to Stencil decorator limitation\n    @Prop({ reflect: true }) provided: boolean;\n    @Prop({ reflect: true }) url: string;\n    @Prop({ reflect: true }) moduleId: string;\n    @Prop({ reflect: true }) minHeight: string;\n    @Prop({ reflect: true }) badgeCount: number;\n    @Prop({ reflect: true }) badgeDescription: string;\n    @Prop({ reflect: true }) badgeTheme: Q2Badge['theme'];\n    @Prop({ reflect: true }) badgeStatus: Q2Badge['status'];\n    @Prop() authPayload: { key: string; value: string }[];\n    @Prop() showForm: boolean;\n    @State() _showForm: boolean;\n    @Element() hostElement: HTMLElement;\n\n    @Event({ bubbles: true }) badge: EventEmitter<boolean>;\n\n    @Watch('badgeCount')\n    @Watch('badgeDescription')\n    @Watch('badgeTheme')\n    @Watch('badgeStatus')\n    badgeObserver() {\n        this.badge.emit();\n    }\n\n    get iframeTitle() {\n        return this.moduleId.split('.').slice(-2).join('-');\n    }\n    componentWillRender(): void | Promise<void> {\n        const loadingWrapper: HTMLDivElement = this.hostElement.shadowRoot.querySelector('.loading-wrapper');\n        if (loadingWrapper) {\n            loadingWrapper.style.minHeight = this.minHeight;\n            loadingWrapper.hidden = !this.selected;\n        }\n    }\n\n    componentWillLoad() {\n        this._showForm = this.showForm;\n    }\n\n    componentDidRender() {\n        const formElement = this.hostElement.shadowRoot.querySelector('form');\n\n        if (!!formElement && !!formElement.parentElement) {\n            formElement.submit();\n            this._showForm = false;\n        }\n    }\n\n    ///////// Observers /////////\n    @Watch('selected')\n    selectedObserver() {\n        const loader: HTMLDivElement = this.hostElement.shadowRoot.querySelector('div[slot=\"loading-wrapper\"]');\n        this._showForm = this.showForm; // reset state\n\n        if (loader) {\n            loader.hidden = !this.selected;\n        }\n    }\n\n    ///////// Actions /////////\n    onIFrameLoad = (event: Event) => {\n        const iframe = event.target as HTMLIFrameElement;\n\n        iframe.contentWindow &&\n            iframe.contentWindow.postMessage(\n                `[iFrameSizer]${this.moduleId}:0:false:false:32:true:true:null:documentElementOffset`,\n                '*'\n            );\n    };\n\n    ///////// View Methods /////////\n    render() {\n        return (\n            <div\n                id={`tab-pane-${this.guid}-${this.index}`}\n                class={`tab-pane${this.selected ? '' : ' hidden'}`}\n                role=\"tabpanel\"\n                tabindex=\"-1\"\n                aria-hidden={`${!this.selected}`}\n                aria-labelledby={`tab-${this.guid}-${this.index}`}\n            >\n                {this.selected && this.provided !== undefined && !this.provided && (\n                    <div>\n                        <slot name=\"loading-wrapper\" />\n                        <iframe\n                            hidden\n                            name={this.moduleId}\n                            scrolling=\"no\"\n                            src={this.showForm && this.authPayload.length ? '' : this.url || ''}\n                            data-module-id={this.moduleId}\n                            style={this.minHeight ? { minHeight: this.minHeight } : null}\n                            onLoad={this.onIFrameLoad}\n                            title={this.iframeTitle}\n                            allow=\"geolocation; camera\"\n                        />\n                        {this._showForm && this.authPayload ? (\n                            <form\n                                hidden\n                                method=\"post\"\n                                action={this.url}\n                                target={this.moduleId}\n                                encType=\"multipart/form-data\"\n                            >\n                                {this.authPayload.map(element => {\n                                    return (\n                                        <input\n                                            type=\"hidden\"\n                                            value={element.value}\n                                            name={element.key}\n                                        />\n                                    );\n                                })}\n                            </form>\n                        ) : (\n                            ''\n                        )}\n                    </div>\n                )}\n                <div\n                    class=\"slot-wrapper\"\n                    hidden={this.selected && this.provided !== undefined && !this.provided}\n                >\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n}\n"],"mappings":"yDAAA,MAAMA,EAAY,0hC,MCQLC,EAAa,M,sDAoEtBC,KAAAC,aAAgBC,IACZ,MAAMC,EAASD,EAAME,OAErBD,EAAOE,eACHF,EAAOE,cAAcC,YACjB,gBAAgBN,KAAKO,iEACrB,IACH,E,sZA/CTC,gBACIR,KAAKS,MAAMC,M,CAGXC,kBACA,OAAOX,KAAKO,SAASK,MAAM,KAAKC,OAAO,GAAGC,KAAK,I,CAEnDC,sBACI,MAAMC,EAAiChB,KAAKiB,YAAYC,WAAWC,cAAc,oBACjF,GAAIH,EAAgB,CAChBA,EAAeI,MAAMC,UAAYrB,KAAKqB,UACtCL,EAAeM,QAAUtB,KAAKuB,Q,EAItCC,oBACIxB,KAAKyB,UAAYzB,KAAK0B,Q,CAG1BC,qBACI,MAAMC,EAAc5B,KAAKiB,YAAYC,WAAWC,cAAc,QAE9D,KAAMS,KAAiBA,EAAYC,cAAe,CAC9CD,EAAYE,SACZ9B,KAAKyB,UAAY,K,EAMzBM,mBACI,MAAMC,EAAyBhC,KAAKiB,YAAYC,WAAWC,cAAc,+BACzEnB,KAAKyB,UAAYzB,KAAK0B,SAEtB,GAAIM,EAAQ,CACRA,EAAOV,QAAUtB,KAAKuB,Q,EAgB9BU,SACI,OACIC,EAAA,OACIC,GAAI,YAAYnC,KAAKoC,QAAQpC,KAAKqC,QAClCC,MAAO,WAAWtC,KAAKuB,SAAW,GAAK,YACvCgB,KAAK,WACLC,SAAS,KAAI,cACA,IAAIxC,KAAKuB,WAAU,kBACf,OAAOvB,KAAKoC,QAAQpC,KAAKqC,SAEzCrC,KAAKuB,UAAYvB,KAAKyC,WAAaC,YAAc1C,KAAKyC,UACnDP,EAAA,WACIA,EAAA,QAAMS,KAAK,oBACXT,EAAA,UACIZ,OAAM,KACNqB,KAAM3C,KAAKO,SACXqC,UAAU,KACVC,IAAK7C,KAAK0B,UAAY1B,KAAK8C,YAAYC,OAAS,GAAK/C,KAAKgD,KAAO,GAAE,iBACnDhD,KAAKO,SACrBa,MAAOpB,KAAKqB,UAAY,CAAEA,UAAWrB,KAAKqB,WAAc,KACxD4B,OAAQjD,KAAKC,aACbiD,MAAOlD,KAAKW,YACZwC,MAAM,wBAETnD,KAAKyB,WAAazB,KAAK8C,YACpBZ,EAAA,QACIZ,OAAM,KACN8B,OAAO,OACPC,OAAQrD,KAAKgD,IACb5C,OAAQJ,KAAKO,SACb+C,QAAQ,uBAEPtD,KAAK8C,YAAYS,KAAIC,GAEdtB,EAAA,SACIuB,KAAK,SACLC,MAAOF,EAAQE,MACff,KAAMa,EAAQG,SAIvB,IAMnBzB,EAAA,OACII,MAAM,eACNhB,OAAQtB,KAAKuB,UAAYvB,KAAKyC,WAAaC,YAAc1C,KAAKyC,UAE9DP,EAAA,c"}
+{"version":3,"names":["stylesCss","TectonTabPane","this","onIFrameLoad","event","iframe","target","contentWindow","postMessage","moduleId","badgeObserver","badge","emit","iframeTitle","split","slice","join","componentWillRender","loadingWrapper","hostElement","shadowRoot","querySelector","style","minHeight","hidden","selected","componentWillLoad","_showForm","showForm","componentDidRender","formElement","parentElement","submit","selectedObserver","loader","render","h","id","guid","index","class","role","tabindex","provided","undefined","name","scrolling","src","authPayload","length","url","onLoad","title","allow","method","action","encType","map","element","type","value","key"],"sources":["./src/components/tecton-tab-pane/styles.scss?tag=tecton-tab-pane&encapsulation=shadow","./src/components/tecton-tab-pane/index.tsx"],"sourcesContent":["@import '../q2-tab-pane/styles.scss';\n\n.loading-wrapper { \n    height: 44px;\n    width: 100%;\n    align-items: center;\n    justify-content: center;\n}\n.loading-wrapper:not([hidden]) {\n    display: flex;\n}\niframe {\n    width: 100%;\n    height: auto;\n    overflow-y: hidden;\n    border: none;\n}\niframe:not([hidden]) {\n    display: inline-block;\n}\n\n.slot-wrapper:focus {\n    outline: none;\n    box-shadow: var(--const-global-focus);\n}\n","import { Component, ComponentInterface, Element, h, Prop, State, Event, EventEmitter, Watch } from '@stencil/core';\nimport { Q2Badge } from '../q2-badge';\n\n@Component({\n    tag: 'tecton-tab-pane',\n    styleUrl: 'styles.scss',\n    shadow: true,\n})\nexport class TectonTabPane implements ComponentInterface {\n    @Prop({ reflect: true }) value: string;\n    @Prop({ reflect: true }) label: string;\n    @Prop({ reflect: true }) name: string;\n    @Prop({ reflect: true }) selected: boolean;\n    @Prop() index: number;\n    @Prop() guid: number;\n    // above props duplicated from q2-tab-pane.\n    // Unable to extend due to Stencil decorator limitation\n    @Prop({ reflect: true }) provided: boolean;\n    @Prop({ reflect: true }) url: string;\n    @Prop({ reflect: true }) moduleId: string;\n    @Prop({ reflect: true }) minHeight: string;\n    @Prop({ reflect: true }) badgeCount: number;\n    @Prop({ reflect: true }) badgeDescription: string;\n    @Prop({ reflect: true }) badgeTheme: Q2Badge['theme'];\n    @Prop({ reflect: true }) badgeStatus: Q2Badge['status'];\n    @Prop() authPayload: { key: string; value: string }[];\n    @Prop() showForm: boolean;\n    @State() _showForm: boolean;\n    @Element() hostElement: HTMLElement;\n\n    /**\n     * Emitted when the badge count, description, theme, or status changes.\n     * @private\n     */\n    @Event({ bubbles: true }) badge: EventEmitter<boolean>;\n\n    @Watch('badgeCount')\n    @Watch('badgeDescription')\n    @Watch('badgeTheme')\n    @Watch('badgeStatus')\n    badgeObserver() {\n        this.badge.emit();\n    }\n\n    get iframeTitle() {\n        return this.moduleId.split('.').slice(-2).join('-');\n    }\n    componentWillRender(): void | Promise<void> {\n        const loadingWrapper: HTMLDivElement = this.hostElement.shadowRoot.querySelector('.loading-wrapper');\n        if (loadingWrapper) {\n            loadingWrapper.style.minHeight = this.minHeight;\n            loadingWrapper.hidden = !this.selected;\n        }\n    }\n\n    componentWillLoad() {\n        this._showForm = this.showForm;\n    }\n\n    componentDidRender() {\n        const formElement = this.hostElement.shadowRoot.querySelector('form');\n\n        if (!!formElement && !!formElement.parentElement) {\n            formElement.submit();\n            this._showForm = false;\n        }\n    }\n\n    ///////// Observers /////////\n    @Watch('selected')\n    selectedObserver() {\n        const loader: HTMLDivElement = this.hostElement.shadowRoot.querySelector('div[slot=\"loading-wrapper\"]');\n        this._showForm = this.showForm; // reset state\n\n        if (loader) {\n            loader.hidden = !this.selected;\n        }\n    }\n\n    ///////// Actions /////////\n    onIFrameLoad = (event: Event) => {\n        const iframe = event.target as HTMLIFrameElement;\n\n        iframe.contentWindow &&\n            iframe.contentWindow.postMessage(\n                `[iFrameSizer]${this.moduleId}:0:false:false:32:true:true:null:documentElementOffset`,\n                '*'\n            );\n    };\n\n    ///////// View Methods /////////\n    render() {\n        return (\n            <div\n                id={`tab-pane-${this.guid}-${this.index}`}\n                class={`tab-pane${this.selected ? '' : ' hidden'}`}\n                role=\"tabpanel\"\n                tabindex=\"-1\"\n                aria-hidden={`${!this.selected}`}\n                aria-labelledby={`tab-${this.guid}-${this.index}`}\n            >\n                {this.selected && this.provided !== undefined && !this.provided && (\n                    <div>\n                        <slot name=\"loading-wrapper\" />\n                        <iframe\n                            hidden\n                            name={this.moduleId}\n                            scrolling=\"no\"\n                            src={this.showForm && this.authPayload.length ? '' : this.url || ''}\n                            data-module-id={this.moduleId}\n                            style={this.minHeight ? { minHeight: this.minHeight } : null}\n                            onLoad={this.onIFrameLoad}\n                            title={this.iframeTitle}\n                            allow=\"geolocation; camera\"\n                        />\n                        {this._showForm && this.authPayload ? (\n                            <form\n                                hidden\n                                method=\"post\"\n                                action={this.url}\n                                target={this.moduleId}\n                                encType=\"multipart/form-data\"\n                            >\n                                {this.authPayload.map(element => {\n                                    return (\n                                        <input\n                                            type=\"hidden\"\n                                            value={element.value}\n                                            name={element.key}\n                                        />\n                                    );\n                                })}\n                            </form>\n                        ) : (\n                            ''\n                        )}\n                    </div>\n                )}\n                <div\n                    class=\"slot-wrapper\"\n                    hidden={this.selected && this.provided !== undefined && !this.provided}\n                >\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n}\n"],"mappings":"yDAAA,MAAMA,EAAY,0hC,MCQLC,EAAa,M,sDAwEtBC,KAAAC,aAAgBC,IACZ,MAAMC,EAASD,EAAME,OAErBD,EAAOE,eACHF,EAAOE,cAAcC,YACjB,gBAAgBN,KAAKO,iEACrB,IACH,E,sZA/CTC,gBACIR,KAAKS,MAAMC,M,CAGXC,kBACA,OAAOX,KAAKO,SAASK,MAAM,KAAKC,OAAO,GAAGC,KAAK,I,CAEnDC,sBACI,MAAMC,EAAiChB,KAAKiB,YAAYC,WAAWC,cAAc,oBACjF,GAAIH,EAAgB,CAChBA,EAAeI,MAAMC,UAAYrB,KAAKqB,UACtCL,EAAeM,QAAUtB,KAAKuB,Q,EAItCC,oBACIxB,KAAKyB,UAAYzB,KAAK0B,Q,CAG1BC,qBACI,MAAMC,EAAc5B,KAAKiB,YAAYC,WAAWC,cAAc,QAE9D,KAAMS,KAAiBA,EAAYC,cAAe,CAC9CD,EAAYE,SACZ9B,KAAKyB,UAAY,K,EAMzBM,mBACI,MAAMC,EAAyBhC,KAAKiB,YAAYC,WAAWC,cAAc,+BACzEnB,KAAKyB,UAAYzB,KAAK0B,SAEtB,GAAIM,EAAQ,CACRA,EAAOV,QAAUtB,KAAKuB,Q,EAgB9BU,SACI,OACIC,EAAA,OACIC,GAAI,YAAYnC,KAAKoC,QAAQpC,KAAKqC,QAClCC,MAAO,WAAWtC,KAAKuB,SAAW,GAAK,YACvCgB,KAAK,WACLC,SAAS,KAAI,cACA,IAAIxC,KAAKuB,WAAU,kBACf,OAAOvB,KAAKoC,QAAQpC,KAAKqC,SAEzCrC,KAAKuB,UAAYvB,KAAKyC,WAAaC,YAAc1C,KAAKyC,UACnDP,EAAA,WACIA,EAAA,QAAMS,KAAK,oBACXT,EAAA,UACIZ,OAAM,KACNqB,KAAM3C,KAAKO,SACXqC,UAAU,KACVC,IAAK7C,KAAK0B,UAAY1B,KAAK8C,YAAYC,OAAS,GAAK/C,KAAKgD,KAAO,GAAE,iBACnDhD,KAAKO,SACrBa,MAAOpB,KAAKqB,UAAY,CAAEA,UAAWrB,KAAKqB,WAAc,KACxD4B,OAAQjD,KAAKC,aACbiD,MAAOlD,KAAKW,YACZwC,MAAM,wBAETnD,KAAKyB,WAAazB,KAAK8C,YACpBZ,EAAA,QACIZ,OAAM,KACN8B,OAAO,OACPC,OAAQrD,KAAKgD,IACb5C,OAAQJ,KAAKO,SACb+C,QAAQ,uBAEPtD,KAAK8C,YAAYS,KAAIC,GAEdtB,EAAA,SACIuB,KAAK,SACLC,MAAOF,EAAQE,MACff,KAAMa,EAAQG,SAIvB,IAMnBzB,EAAA,OACII,MAAM,eACNhB,OAAQtB,KAAKuB,UAAYvB,KAAKyC,WAAaC,YAAc1C,KAAKyC,UAE9DP,EAAA,c"}

package/dist/q2-tecton-elements/{p-c057134f.entry.js → p-9dff6592.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as i,h as e,g as s}from"./p-277dc8cd.js";import{l as n,h as a,o as r,i as h,w as d}from"./p-f34521a4.js";const l="*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block;max-width:100%}.q2-editable-field-wrapper:not([hidden]){display:flex}.q2-editable-field-wrapper.editing{align-items:flex-end}:host([block]){display:block;width:100%}:host([block]) .q2-editable-field-wrapper:not([hidden]){display:grid;grid-template-columns:1fr auto auto}q2-input,.text-wrapper{margin:0 var(--tct-scale-2, var(--app-scale-2x, 10px)) 0 0}q2-input{flex:1 1 auto;min-width:170px}.text-wrapper{flex:0 auto;align-self:center;display:inline-block}:host([truncated]) .text-wrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}q2-btn{flex:0 0 44px}dl{margin:var(--tct-scale-0, var(--app-scale-0x, 0))}dt{font-weight:600}dd{margin-left:var(--tct-scale-0, var(--app-scale-0x, 0));display:flex;align-items:center}";const o=class{constructor(e){t(this,e);this.input=i(this,"input",7);this.change=i(this,"change",7);this.scheduledAfterRender=[];this.defaultValue=this.value;this.inputInput=t=>{t.stopPropagation();this.input.emit(t.detail);this.formattedValue=t.detail.formattedValue;this.innerValue=t.detail.value};this.inputChange=t=>{t.stopPropagation()};this.inputKeyDown=t=>{if(t.key==="Escape"||t.key==="Esc"){t.preventDefault();this.cancelClick();return}if(t.key==="Enter"){t.preventDefault();this.saveClick();return}};this.inputClick=t=>{t.stopPropagation()};this.saveClick=t=>{t&&t.stopPropagation();const i=this.hostElement.shadowRoot.querySelector("q2-input").value;this.defaultValue=i;this.change.emit({editing:false,name:"save",value:this.innerValue||i,formattedValue:this.formattedValue||i});setTimeout((()=>{const{errors:t=[]}=this;if(!t.length)return;this.hostElement.focus()}),1)};this.editClick=t=>{t===null||t===void 0?void 0:t.stopPropagation();this.change.emit({editing:true,name:"edit"})};this.cancelClick=t=>{t===null||t===void 0?void 0:t.stopPropagation();this.change.emit({editing:false,name:"cancel"});this.inputElement.setValue(this.defaultValue)};this.value="";this.editing=false;this.label="";this.hideLabel=undefined;this.type=undefined;this.formatModifier=undefined;this.truncated=undefined;this.maxlength=undefined;this.persistentLabel=undefined;this.disabled=undefined;this.block=undefined;this.hints=undefined;this.errors=undefined;this.ariaLabel=undefined;this.formattedValue=undefined}get locLabel(){return this.label&&n(this.label)||""}componentWillLoad(){a(this)}componentDidRender(){this.scheduledAfterRender.forEach((t=>t()));this.scheduledAfterRender=[];this.formattedValue=this.inputElement.formattedValue}componentDidLoad(){r(this.hostElement)}errorsObserver(){var t;const{editing:i,errors:e=[]}=this;const s=this.hostElement.shadowRoot.activeElement;const n=(t=(s===null||s===void 0?void 0:s.tagName)==="Q2-INPUT")!==null&&t!==void 0?t:false;const a=e.length;if(n||!s||!i||!a)return;this.inputElement.focus()}ariaLabelObserver(){a(this)}observesEditing(t,i){if(t===i)return;this.scheduledAfterRender.push(this.hostElement.focus)}get wrapperClass(){return`q2-editable-field-wrapper ${this.editing?"editing":""}`}onHostElementChange(t){if(!h(t,this.hostElement)||this.hostElement.onchange)return;switch(t.detail.name){case"save":this.value=t.detail.value;break;case"cancel":this.inputElement.value=this.value;break}this.editing=t.detail.editing}delegateFocus(t){if(!h(t,this.hostElement))return;this.hostElement.shadowRoot.querySelector(this.editing?"q2-input":"q2-btn.begin-edit").focus()}clickEdit(){var t;if(this.editing)return;(t=this.editBtnElement)===null||t===void 0?void 0:t.click()}clickCancel(){var t;if(!this.editing)return;(t=this.cancelBtnElement)===null||t===void 0?void 0:t.click()}clickSave(){var t;if(!this.editing)return;(t=this.saveBtnElement)===null||t===void 0?void 0:t.click()}async setValue(t,i={clickSave:true}){await this.clickEdit();await d();await this.inputElement.setValue(t);if(i.clickSave){await this.clickSave();await d()}}render(){return e("div",null,this.generateEditStateDOM(),this.generateReadStateDOM())}generateEditStateDOM(){return e("div",{class:this.wrapperClass,hidden:!this.editing},e("q2-input",{ref:t=>this.inputElement=t,label:this.locLabel,hideLabel:this.hideLabel,value:this.value,hints:Array.isArray(this.hints)&&this.hints.map((t=>n(t)))||undefined,errors:Array.isArray(this.errors)&&this.errors.map((t=>n(t)))||undefined,type:this.type,disabled:this.disabled,formatModifier:this.formatModifier,maxlength:this.maxlength,"test-id":"editableInput",onInput:this.inputInput,onChange:this.inputChange,onKeyDown:this.inputKeyDown,onClick:this.inputClick}),e("q2-btn",{ref:t=>this.cancelBtnElement=t,class:"cancel-edit",label:`${n("tecton.element.editableField.cancel")} ${this.locLabel}`,"hide-label":true,"test-id":"cancelButton",onClick:this.cancelClick},e("q2-icon",{type:"close"})),e("q2-btn",{ref:t=>this.saveBtnElement=t,class:"save-edit",label:`${n("tecton.element.editableField.save")} ${this.locLabel}`,"hide-label":true,"test-id":"saveButton",onClick:this.saveClick},e("q2-icon",{type:"checkmark"})))}generateReadStateDOM(){if(this.persistentLabel&&this.locLabel){return e("div",{class:this.wrapperClass,hidden:this.editing},e("dl",null,e("dt",{class:"read-state-label"},this.locLabel),e("dd",null,e("span",{class:"text-wrapper"},this.formattedValue||this.value),this.generateEditBtn())))}return e("div",{class:this.wrapperClass,hidden:this.editing},e("div",{class:"text-wrapper"},this.formattedValue||this.value),this.generateEditBtn())}generateEditBtn(){return e("q2-btn",{ref:t=>this.editBtnElement=t,class:"begin-edit",label:`${n("tecton.element.editableField.edit")} ${this.locLabel}`,"hide-label":true,disabled:this.disabled,"test-id":"editButton",onClick:this.editClick},e("q2-icon",{type:"edit"}))}get hostElement(){return s(this)}static get watchers(){return{errors:["errorsObserver"],ariaLabel:["ariaLabelObserver"],editing:["observesEditing"]}}};o.style=l;export{o as q2_editable_field};
-//# sourceMappingURL=p-c057134f.entry.js.map
+import{r as t,c as i,h as e,g as s}from"./p-277dc8cd.js";import{l as n,h as a,o as r,i as h,w as d}from"./p-fb903495.js";const l="*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block;max-width:100%}.q2-editable-field-wrapper:not([hidden]){display:flex}.q2-editable-field-wrapper.editing{align-items:flex-end}:host([block]){display:block;width:100%}:host([block]) .q2-editable-field-wrapper:not([hidden]){display:grid;grid-template-columns:1fr auto auto}q2-input,.text-wrapper{margin:0 var(--tct-scale-2, var(--app-scale-2x, 10px)) 0 0}q2-input{flex:1 1 auto;min-width:170px}.text-wrapper{flex:0 auto;align-self:center;display:inline-block}:host([truncated]) .text-wrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}q2-btn{flex:0 0 44px}dl{margin:var(--tct-scale-0, var(--app-scale-0x, 0))}dt{font-weight:600}dd{margin-left:var(--tct-scale-0, var(--app-scale-0x, 0));display:flex;align-items:center}";const o=class{constructor(e){t(this,e);this.input=i(this,"input",7);this.change=i(this,"change",7);this.scheduledAfterRender=[];this.defaultValue=this.value;this.inputInput=t=>{t.stopPropagation();this.input.emit(t.detail);this.formattedValue=t.detail.formattedValue;this.innerValue=t.detail.value};this.inputChange=t=>{t.stopPropagation()};this.inputKeyDown=t=>{if(t.key==="Escape"||t.key==="Esc"){t.preventDefault();this.cancelClick();return}if(t.key==="Enter"){t.preventDefault();this.saveClick();return}};this.inputClick=t=>{t.stopPropagation()};this.saveClick=t=>{t&&t.stopPropagation();const i=this.hostElement.shadowRoot.querySelector("q2-input").value;this.defaultValue=i;this.change.emit({editing:false,name:"save",value:this.innerValue||i,formattedValue:this.formattedValue||i});setTimeout((()=>{const{errors:t=[]}=this;if(!t.length)return;this.hostElement.focus()}),1)};this.editClick=t=>{t===null||t===void 0?void 0:t.stopPropagation();this.change.emit({editing:true,name:"edit"})};this.cancelClick=t=>{t===null||t===void 0?void 0:t.stopPropagation();this.change.emit({editing:false,name:"cancel"});this.inputElement.setValue(this.defaultValue)};this.value="";this.editing=false;this.label="";this.hideLabel=undefined;this.type=undefined;this.formatModifier=undefined;this.truncated=undefined;this.maxlength=undefined;this.persistentLabel=undefined;this.disabled=undefined;this.block=undefined;this.hints=undefined;this.errors=undefined;this.ariaLabel=undefined;this.formattedValue=undefined}get locLabel(){return this.label&&n(this.label)||""}componentWillLoad(){a(this)}componentDidRender(){this.scheduledAfterRender.forEach((t=>t()));this.scheduledAfterRender=[];this.formattedValue=this.inputElement.formattedValue}componentDidLoad(){r(this.hostElement)}errorsObserver(){var t;const{editing:i,errors:e=[]}=this;const s=this.hostElement.shadowRoot.activeElement;const n=(t=(s===null||s===void 0?void 0:s.tagName)==="Q2-INPUT")!==null&&t!==void 0?t:false;const a=e.length;if(n||!s||!i||!a)return;this.inputElement.focus()}ariaLabelObserver(){a(this)}observesEditing(t,i){if(t===i)return;this.scheduledAfterRender.push(this.hostElement.focus)}get wrapperClass(){return`q2-editable-field-wrapper ${this.editing?"editing":""}`}onHostElementChange(t){if(!h(t,this.hostElement)||this.hostElement.onchange)return;switch(t.detail.name){case"save":this.value=t.detail.value;break;case"cancel":this.inputElement.value=this.value;break}this.editing=t.detail.editing}delegateFocus(t){if(!h(t,this.hostElement))return;this.hostElement.shadowRoot.querySelector(this.editing?"q2-input":"q2-btn.begin-edit").focus()}clickEdit(){var t;if(this.editing)return;(t=this.editBtnElement)===null||t===void 0?void 0:t.click()}clickCancel(){var t;if(!this.editing)return;(t=this.cancelBtnElement)===null||t===void 0?void 0:t.click()}clickSave(){var t;if(!this.editing)return;(t=this.saveBtnElement)===null||t===void 0?void 0:t.click()}async setValue(t,i={clickSave:true}){await this.clickEdit();await d();await this.inputElement.setValue(t);if(i.clickSave){await this.clickSave();await d()}}render(){return e("div",null,this.generateEditStateDOM(),this.generateReadStateDOM())}generateEditStateDOM(){return e("div",{class:this.wrapperClass,hidden:!this.editing},e("q2-input",{ref:t=>this.inputElement=t,label:this.locLabel,hideLabel:this.hideLabel,value:this.value,hints:Array.isArray(this.hints)&&this.hints.map((t=>n(t)))||undefined,errors:Array.isArray(this.errors)&&this.errors.map((t=>n(t)))||undefined,type:this.type,disabled:this.disabled,formatModifier:this.formatModifier,maxlength:this.maxlength,"test-id":"editableInput",onInput:this.inputInput,onChange:this.inputChange,onKeyDown:this.inputKeyDown,onClick:this.inputClick}),e("q2-btn",{ref:t=>this.cancelBtnElement=t,class:"cancel-edit",label:`${n("tecton.element.editableField.cancel")} ${this.locLabel}`,"hide-label":true,"test-id":"cancelButton",onClick:this.cancelClick},e("q2-icon",{type:"close"})),e("q2-btn",{ref:t=>this.saveBtnElement=t,class:"save-edit",label:`${n("tecton.element.editableField.save")} ${this.locLabel}`,"hide-label":true,"test-id":"saveButton",onClick:this.saveClick},e("q2-icon",{type:"checkmark"})))}generateReadStateDOM(){if(this.persistentLabel&&this.locLabel){return e("div",{class:this.wrapperClass,hidden:this.editing},e("dl",null,e("dt",{class:"read-state-label"},this.locLabel),e("dd",null,e("span",{class:"text-wrapper"},this.formattedValue||this.value),this.generateEditBtn())))}return e("div",{class:this.wrapperClass,hidden:this.editing},e("div",{class:"text-wrapper"},this.formattedValue||this.value),this.generateEditBtn())}generateEditBtn(){return e("q2-btn",{ref:t=>this.editBtnElement=t,class:"begin-edit",label:`${n("tecton.element.editableField.edit")} ${this.locLabel}`,"hide-label":true,disabled:this.disabled,"test-id":"editButton",onClick:this.editClick},e("q2-icon",{type:"edit"}))}get hostElement(){return s(this)}static get watchers(){return{errors:["errorsObserver"],ariaLabel:["ariaLabelObserver"],editing:["observesEditing"]}}};o.style=l;export{o as q2_editable_field};
+//# sourceMappingURL=p-9dff6592.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","Q2EditableField","this","scheduledAfterRender","defaultValue","value","inputInput","event","stopPropagation","input","emit","detail","formattedValue","innerValue","inputChange","e","inputKeyDown","key","preventDefault","cancelClick","saveClick","inputClick","valueFromInputProp","hostElement","shadowRoot","querySelector","change","editing","name","setTimeout","errors","length","focus","editClick","inputElement","setValue","locLabel","label","loc","componentWillLoad","handleAriaLabel","componentDidRender","forEach","fn","componentDidLoad","overrideFocus","errorsObserver","focusedElement","activeElement","isInputFocused","_a","tagName","hasErrors","ariaLabelObserver","observesEditing","newValue","oldValue","push","wrapperClass","onHostElementChange","isEventFromElement","onchange","delegateFocus","clickEdit","editBtnElement","click","clickCancel","cancelBtnElement","clickSave","saveBtnElement","async","options","waitForNextPaint","render","h","generateEditStateDOM","generateReadStateDOM","class","hidden","ref","el","hideLabel","hints","Array","isArray","map","str","undefined","type","disabled","formatModifier","maxlength","onInput","onChange","onKeyDown","onClick","persistentLabel","generateEditBtn"],"sources":["./src/components/q2-editable-field/styles.scss?tag=q2-editable-field&encapsulation=shadow","./src/components/q2-editable-field/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n\n:host {\n    display: inline-block;\n    max-width: 100%;\n}\n\n.q2-editable-field-wrapper:not([hidden]) {\n    display: flex;\n}\n\n.q2-editable-field-wrapper.editing {\n    align-items: flex-end;\n}\n\n:host([block]) {\n    display:block;\n    width: 100%;\n    .q2-editable-field-wrapper:not([hidden]) {\n        display: grid;\n        grid-template-columns: 1fr auto auto;\n    }\n}\n\nq2-input,\n.text-wrapper {\n    margin: 0 var(--tct-scale-2, var(--app-scale-2x, 10px)) 0 0;\n}\n\nq2-input {\n    flex: 1 1 auto;\n    min-width: 170px;\n}\n\n.text-wrapper {\n    flex: 0 auto;\n    align-self: center;\n    display: inline-block;\n}\n\n:host([truncated]) .text-wrapper {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\nq2-btn {\n    flex: 0 0 44px;\n}\n\ndl {\n    margin: var(--tct-scale-0, var(--app-scale-0x, 0));\n}\n\ndt {\n    font-weight: 600;\n}\n\ndd {\n    margin-left: var(--tct-scale-0, var(--app-scale-0x, 0));\n    display: flex;\n    align-items: center;\n}\n","import { Component, State, Prop, h, Listen, Element, Event, EventEmitter, Method, Watch } from '@stencil/core';\nimport { IEventDetail, Q2InputCustomEvent } from 'src/components';\nimport { handleAriaLabel, isEventFromElement, loc, overrideFocus, waitForNextPaint } from 'src/utils';\nimport { Q2Input } from '../q2-input';\nimport { IFormatterValueObject } from '../q2-input/types';\n\ninterface IExtendedQ2InputElement extends HTMLQ2InputElement {\n    formattedValue: IFormatterValueObject['formattedValue'];\n}\n\n@Component({\n    tag: 'q2-editable-field',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2EditableField {\n    @Prop({ reflect: true, mutable: true }) value: string = '';\n    @Prop({ reflect: true, mutable: true }) editing: boolean = false;\n    @Prop({ reflect: true, mutable: true }) label: string = '';\n    @Prop({ reflect: true, mutable: true }) hideLabel: boolean;\n    @Prop({ reflect: true }) type: Q2Input['type'];\n    @Prop({ reflect: true }) formatModifier: string;\n    @Prop({ reflect: true }) truncated: boolean;\n    @Prop({ reflect: true }) maxlength: number;\n    @Prop({ reflect: true }) persistentLabel: boolean;\n    @Prop({ reflect: true }) disabled: boolean;\n    @Prop({ reflect: true }) block: boolean;\n    @Prop() hints: string[];\n    @Prop() errors: string[];\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n    scheduledAfterRender: (() => void)[] = [];\n\n    @Element() hostElement: HTMLElement;\n    inputElement: HTMLQ2InputElement;\n    editBtnElement: HTMLQ2BtnElement;\n    cancelBtnElement: HTMLQ2BtnElement;\n    saveBtnElement: HTMLQ2BtnElement;\n\n    @State() formattedValue: string;\n    innerValue: string;\n    defaultValue: string = this.value;\n\n    get locLabel() {\n        return (this.label && loc(this.label)) || '';\n    }\n\n    /////// LIFECYCLE HOOKS ///////\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n        this.formattedValue = (this.inputElement as IExtendedQ2InputElement).formattedValue;\n    }\n\n    componentDidLoad() {\n        overrideFocus(this.hostElement);\n    }\n\n    //////// OBSERVERS ////////\n\n    @Watch('errors')\n    errorsObserver() {\n        const { editing, errors = [] } = this;\n        const focusedElement = this.hostElement.shadowRoot.activeElement;\n        const isInputFocused = focusedElement?.tagName === 'Q2-INPUT' ?? false;\n        const hasErrors = errors.length;\n        if (isInputFocused || !focusedElement || !editing || !hasErrors) return;\n        this.inputElement.focus();\n    }\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    @Watch('editing')\n    observesEditing(newValue: boolean, oldValue: boolean) {\n        if (newValue === oldValue) return;\n        this.scheduledAfterRender.push(this.hostElement.focus);\n    }\n\n    get wrapperClass() {\n        return `q2-editable-field-wrapper ${this.editing ? 'editing' : ''}`;\n    }\n\n    ///////// HOST ELEMENT EVENTS //////\n\n    @Listen('change')\n    onHostElementChange(event: CustomEvent) {\n        if (!isEventFromElement(event, this.hostElement) || this.hostElement.onchange) return;\n        switch (event.detail.name) {\n            case 'save':\n                this.value = event.detail.value;\n                break;\n\n            case 'cancel':\n                this.inputElement.value = this.value;\n                break;\n        }\n\n        this.editing = event.detail.editing;\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.hostElement.shadowRoot.querySelector<HTMLElement>(this.editing ? 'q2-input' : 'q2-btn.begin-edit').focus();\n    }\n\n    ///////// EVENTS /////////\n\n    /**\n     * Emitted when the user updates the `q2-input` element in the editing state.\n     */\n    @Event() input: EventEmitter<{ formattedValue: string; value: string }>;\n\n    /**\n     * Emitted when the 'Edit', 'Cancel', or 'Save' buttons are clicked.\n     *\n     * The event detail will not include a `value` or `formattedValue` if the event name is 'edit' or 'cancel'.\n     */\n    @Event() change: EventEmitter<{\n        editing: boolean;\n        name: 'edit' | 'cancel' | 'save';\n        value?: string;\n        formattedValue?: string;\n    }>;\n\n    /// Methods ///\n    /**\n     * Emulates clicking the edit button, which will display the `<q2-input>` field.\n     *\n     * @testOnly\n     */\n    @Method()\n    clickEdit() {\n        if (this.editing) return;\n        this.editBtnElement?.click();\n    }\n\n    /**\n     * Emulates clicking the cancel button, which will hide the `<q2-input>` field.\n     *\n     * @testOnly\n     */\n    @Method()\n    clickCancel() {\n        if (!this.editing) return;\n        this.cancelBtnElement?.click();\n    }\n\n    /**\n     * Emulates clicking the save button, saving value in the `<q2-input>` field, and emitting a `change` event.\n     *\n     * @testOnly\n     */\n    @Method()\n    clickSave() {\n        if (!this.editing) return;\n        this.saveBtnElement?.click();\n    }\n\n    /**\n     * Emulates clicking the edit button, and setting the value of the `<q2-input>` field.\n     *\n     * If the `clickSave` argument is `true` (default), the save button will be clicked after the value is set, and a\\\n     * `change` event will be emitted.\n     *\n     * @testOnly\n     */\n    @Method()\n    async setValue(value: string, options: { clickSave?: boolean } = { clickSave: true }) {\n        await this.clickEdit();\n        await waitForNextPaint();\n\n        await this.inputElement.setValue(value);\n\n        if (options.clickSave) {\n            await this.clickSave();\n            await waitForNextPaint();\n        }\n    }\n\n    //////// ACTIONS /////////\n\n    inputInput = (event: Q2InputCustomEvent<IEventDetail> & InputEvent) => {\n        event.stopPropagation();\n        this.input.emit(event.detail);\n        this.formattedValue = event.detail.formattedValue;\n        this.innerValue = event.detail.value;\n    };\n\n    inputChange = (e: CustomEvent) => {\n        e.stopPropagation();\n    };\n\n    inputKeyDown = (e: KeyboardEvent) => {\n        if (e.key === 'Escape' || e.key === 'Esc') {\n            e.preventDefault();\n            this.cancelClick();\n            return;\n        }\n\n        if (e.key === 'Enter') {\n            e.preventDefault();\n            this.saveClick();\n            return;\n        }\n    };\n\n    inputClick = (event: MouseEvent) => {\n        event.stopPropagation();\n    };\n\n    saveClick = (event?: MouseEvent) => {\n        event && event.stopPropagation();\n        const valueFromInputProp = this.hostElement.shadowRoot.querySelector('q2-input').value;\n        this.defaultValue = valueFromInputProp;\n        this.change.emit({\n            editing: false,\n            name: 'save',\n            value: this.innerValue || valueFromInputProp,\n            formattedValue: this.formattedValue || valueFromInputProp,\n        });\n\n        setTimeout(() => {\n            const { errors = [] } = this;\n            if (!errors.length) return;\n            this.hostElement.focus();\n        }, 1);\n    };\n\n    editClick = (event: MouseEvent) => {\n        event?.stopPropagation();\n        this.change.emit({ editing: true, name: 'edit' });\n    };\n\n    cancelClick = (event?: MouseEvent) => {\n        event?.stopPropagation();\n        this.change.emit({ editing: false, name: 'cancel' });\n        this.inputElement.setValue(this.defaultValue);\n    };\n\n    render() {\n        return (\n            <div>\n                {this.generateEditStateDOM()}\n                {this.generateReadStateDOM()}\n            </div>\n        );\n    }\n\n    generateEditStateDOM() {\n        return (\n            <div\n                class={this.wrapperClass}\n                hidden={!this.editing}\n            >\n                <q2-input\n                    ref={el => (this.inputElement = el)}\n                    label={this.locLabel}\n                    hideLabel={this.hideLabel}\n                    value={this.value}\n                    hints={(Array.isArray(this.hints) && this.hints.map(str => loc(str))) || undefined}\n                    errors={(Array.isArray(this.errors) && this.errors.map(str => loc(str))) || undefined}\n                    type={this.type}\n                    disabled={this.disabled}\n                    formatModifier={this.formatModifier}\n                    maxlength={this.maxlength}\n                    test-id=\"editableInput\"\n                    onInput={this.inputInput}\n                    onChange={this.inputChange}\n                    onKeyDown={this.inputKeyDown}\n                    onClick={this.inputClick}\n                />\n                <q2-btn\n                    ref={el => (this.cancelBtnElement = el)}\n                    class=\"cancel-edit\"\n                    label={`${loc('tecton.element.editableField.cancel')} ${this.locLabel}`}\n                    hide-label\n                    test-id=\"cancelButton\"\n                    onClick={this.cancelClick}\n                >\n                    <q2-icon type=\"close\" />\n                </q2-btn>\n                <q2-btn\n                    ref={el => (this.saveBtnElement = el)}\n                    class=\"save-edit\"\n                    label={`${loc('tecton.element.editableField.save')} ${this.locLabel}`}\n                    hide-label\n                    test-id=\"saveButton\"\n                    onClick={this.saveClick}\n                >\n                    <q2-icon type=\"checkmark\" />\n                </q2-btn>\n            </div>\n        );\n    }\n\n    generateReadStateDOM() {\n        if (this.persistentLabel && this.locLabel) {\n            return (\n                <div\n                    class={this.wrapperClass}\n                    hidden={this.editing}\n                >\n                    <dl>\n                        <dt class=\"read-state-label\">{this.locLabel}</dt>\n                        <dd>\n                            <span class=\"text-wrapper\">{this.formattedValue || this.value}</span>\n                            {this.generateEditBtn()}\n                        </dd>\n                    </dl>\n                </div>\n            );\n        }\n        return (\n            <div\n                class={this.wrapperClass}\n                hidden={this.editing}\n            >\n                <div class=\"text-wrapper\">{this.formattedValue || this.value}</div>\n                {this.generateEditBtn()}\n            </div>\n        );\n    }\n\n    generateEditBtn() {\n        return (\n            <q2-btn\n                ref={el => (this.editBtnElement = el)}\n                class=\"begin-edit\"\n                label={`${loc('tecton.element.editableField.edit')} ${this.locLabel}`}\n                hide-label\n                disabled={this.disabled}\n                test-id=\"editButton\"\n                onClick={this.editClick}\n            >\n                <q2-icon type=\"edit\" />\n            </q2-btn>\n        );\n    }\n}\n"],"mappings":"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"}

package/dist/q2-tecton-elements/{p-145849d0.entry.js → p-a5a23edc.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as i,h as e,g as o}from"./p-277dc8cd.js";import{r,o as n,l as a,i as l}from"./p-f34521a4.js";import{s as c,a as s}from"./p-788adb51.js";const p="*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block;position:relative;line-height:0}:host(:not(:last-child)){margin-inline-end:var(--tct-pill-margin, var(--t-pill-margin, var(--app-scale-2x, 10px)))}q2-popover,.btn-wrapper{--comp-pill-min-height:var(--tct-pill-min-height, var(--t-pill-min-height, 44px));--comp-pill-btn-height:var(--tct-pill-btn-height, var(--t-pill-btn-height, 30px))}.btn-wrapper{--comp-pill-btn-border-width:var(--tct-pill-btn-border-width, var(--t-pill-btn-border-width, 2px));--comp-close-size:0px;--comp-btn-background:var(--tct-pill-btn-background, var(--t-pill-btn-background, var(--t-base, #ffffff)));--comp-hover-btn-background:var(--tct-pill-hover-btn-background, var(--t-pill-hover-btn-background, var(--t-gray-13, #e6e6e6)));--comp-btn-padding:var(--tct-pill-btn-padding-inline, var(--t-pill-btn-padding-inline, var(--app-scale-3x, 15px)));--comp-btn-color:var(--tct-pill-btn-color, var(--t-pill-btn-color, var(--t-gray-3, #262626)));--comp-active-btn-color:var(--comp-btn-background);--comp-active-btn-background:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-7, #666666)));--comp-active-btn-border-color:var(--tct-pill-active-btn-border-color, var(--t-pill-active-btn-border-color, var(--t-gray-7, #666666)));--comp-hover-active-btn-background:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));--comp-hover-active-btn-border-color:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));position:relative}:host(:not(:empty)) .btn-wrapper,.btn-wrapper.has-icon{--comp-close-size:var(--comp-pill-btn-height)}:host([active]) .btn-wrapper{--comp-btn-color:var(--tct-pill-active-btn-color, var(--t-pill-active-btn-color, var(--t-base, #ffffff)))}:host([theme=primary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-primary-active-background, var(--t-primary, #61c4ff));--comp-active-btn-color:var(--tct-pill-primary-active-font-color, var(--t-primary-text, #ffffff));--comp-active-btn-border-color:var(--tct-pill-primary-active-border-color, var(--t-primary, #61c4ff));--comp-hover-active-btn-background:var(--tct-pill-primary-active-hover-background, var(--t-primary-l3, #21acff));--comp-hover-active-btn-border-color:var(--tct-pill-primary-active-hover-border-color, var(--t-primary-l3, #21acff))}:host([theme=secondary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-secondary-active-background, var(--t-secondary, #d9e1e6));--comp-active-btn-color:var(--tct-pill-secondary-active-font-color, var(--t-secondary-text, #141414));--comp-active-btn-border-color:var(--tct-pill-secondary-active-border-color, var(--t-secondary, #d9e1e6));--comp-hover-active-btn-background:var(--tct-pill-secondary-active-hover-background, var(--t-secondary-l3, #c9d5db));--comp-hover-active-btn-border-color:var(--tct-pill-secondary-active-hover-border-color, var(--t-secondary-l3, #c9d5db))}:host([theme=tertiary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-tertiary-active-background, var(--t-tertiary, #f4fafe));--comp-active-btn-color:var(--tct-pill-tertiary-active-font-color, var(--t-tertiary-text, #141414));--comp-active-btn-border-color:var(--tct-pill-tertiary-active-border-color, var(--t-tertiary, #f4fafe));--comp-hover-active-btn-background:var(--tct-pill-tertiary-active-hover-background, var(--t-tertiary-l3, #eff8fd));--comp-hover-active-btn-border-color:var(--tct-pill-tertiary-active-hover-border-color, var(--t-tertiary-l3, #eff8fd))}.btn-height-wrapper{height:var(--comp-pill-min-height);display:flex;align-items:center;cursor:pointer}.btn-height-wrapper:focus{box-shadow:none}:host([disabled]) .btn-height-wrapper{cursor:not-allowed}.btn-close,.btn-primary{cursor:pointer;height:var(--comp-pill-btn-height);border-style:solid;border-radius:var(--tct-pill-btn-border-radius, var(--t-pill-btn-border-radius, 30px));transition-property:background, color, padding, width, opacity;transition:var(--tct-pill-btn-tween, var(--t-pill-btn-tween, var(--app-tween-1, 0.2s ease)))}:host([disabled]) .btn-close,:host([disabled]) .btn-primary,:host([disabled]) q2-icon{opacity:var(--tct-pill-disabled-opacity, var(--t-pill-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));cursor:not-allowed}.btn-primary{background:var(--comp-btn-background);border-width:var(--comp-pill-btn-border-width);border-color:var(--tct-pill-btn-border-color, var(--t-pill-btn-border-color, var(--t-a11y-gray-color-AA, #949494)));padding-inline:var(--comp-btn-padding);padding-right:calc(var(--comp-btn-padding) + var(--comp-close-size));font-size:var(--tct-pill-btn-font-size, var(--t-pill-btn-font-size, var(--app-font-size, 14px)));color:var(--comp-btn-color);display:block;width:100%;text-align:start}.btn-primary:focus,.btn-primary:hover{background:var(--comp-hover-btn-background)}:host(:not(:empty)) .btn-primary,.has-icon .btn-primary{padding-right:calc(var(--tct-pill-icon-gap, var(--t-pill-icon-gap, var(--app-scale-1x, 5px))) + var(--comp-close-size))}.has-options .btn-primary{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:var(--tct-pill-max-width, var(--t-pill-max-width, 200px))}:host([active]) .btn-primary{background:var(--comp-active-btn-background);border-color:var(--comp-active-btn-border-color);color:var(--comp-active-btn-color)}:host([active]) .btn-primary:focus,:host([active]) .btn-primary:hover{background:var(--comp-hover-active-btn-background);border-color:var(--comp-hover-active-btn-border-color)}.btn-close{background:transparent;border-color:transparent;border-width:var(--comp-pill-btn-border-width);width:var(--comp-close-size);height:var(--comp-close-size);padding:0;border:0;display:inline-flex;justify-content:center;align-items:center;position:absolute;right:0;top:50%;transform:translateY(-50%);opacity:0}:host([active]) .btn-close{color:var(--comp-active-btn-color)}:host(:not(:empty)) .btn-close,.has-icon .btn-close{opacity:1}q2-icon{--t-icon-stroke-primary:currentColor;width:var(--tct-pill-icon-size, var(--t-pill-icon-size, 14px));height:var(--tct-pill-icon-size, var(--t-pill-icon-size, 14px));transition-property:transform;transition:var(--tct-pill-btn-tween, var(--t-pill-btn-tween, var(--app-tween-1, 0.2s ease)))}div.btn-close{pointer-events:none}:host([open]) div.btn-close q2-icon{transform:rotate(180deg)}:host([active]) button.btn-close:focus,:host([active]) button.btn-close:hover{background:var(--tct-pill-hover-close-btn-background, var(--t-pill-hover-close-btn-background, var(--t-top-a1, rgba(13, 13, 13, 0.35))));border-color:var(--tct-pill-hover-close-btn-border-color, var(--t-pill-hover-close-btn-border-color, var(--t-top-a1, rgba(13, 13, 13, 0.35))))}q2-popover{top:calc(var(--comp-pill-min-height) - (var(--comp-pill-min-height) - var(--comp-pill-btn-height)) / 2)}";const d=class{constructor(e){t(this,e);this.change=i(this,"change",7);var o;this.scheduledAfterRender=[];this.syncValueProperties=()=>{const{value:t,selectedOptions:i}=this;if(!!(i===null||i===void 0?void 0:i.length))this.selectedOptionsChanged(i);else if(t)this.valueChanged(t)};this.getOption=async t=>{if(this.optionList){const i=await this.optionList.getOptions();return i.find((i=>i.value===t))}else{return this.hostElement.querySelector(`q2-option[value="${t}"]`)}};this.updateSelectedOptionElements=async()=>{var t;const{selectedOptions:i=[]}=this;const e=i.map((t=>t.value));const o=await((t=this.optionList)===null||t===void 0?void 0:t.getOptions());if(this.optionCount)this.active=!!e.length;this.selectedOptionElements=(o===null||o===void 0?void 0:o.filter((t=>e.includes(t.value))))||[]};this.determineOptionCount=()=>{const t=this.hostElement.querySelectorAll("q2-option").length;this.optionCount=t};this.clearSelectedOptions=()=>{this.selectedOptions=[];this.value=null;this.active=false;this.open=false;this.primaryBtn.focus();this.change.emit({value:null,values:[],active:false});this.scheduledAfterRender.push(r)};this.handleClick=async t=>{t.stopPropagation();if(this.disabled)return;if(this.optionCount){if(c(this)){this.executeActionSheet(t)}else{await this.popoverElement.toggle()}}else{const{value:t,label:i}=this;const e=this.active=!this.active;const o=e?[{value:t,display:i}]:[];this.selectedOptions=o;this.change.emit({value:t,values:o,active:e})}};this.handleKeydown=async t=>{const i=t.metaKey||t.ctrlKey||t.key==="Tab";if(!this.optionCount||this.disabled||i)return;t.preventDefault();if(c(this,t)){this.executeActionSheet(t)}else{this.optionList.handleExternalKeydown(t)}};this.handleButtonFocusout=async t=>{var i;const e=t.relatedTarget;if((i=(e===null||e===void 0?void 0:e.tagName)==="Q2-OPTION")!==null&&i!==void 0?i:false)return;this.open=false};this.handleChange=t=>{t.stopPropagation();if(!this.optionCount)return;this.handleSelectionChanges(t.detail)};this.handleWrapperClick=()=>{this.primaryBtn.focus();this.primaryBtn.click()};this.onClickElsewhere=t=>{const i=t.target;if(i.localName==="click-elsewhere"){t.stopPropagation();const{popoverElement:i}=this;if(!i)return;i.open=false}};this.hoist=!!((o=window.Tecton)===null||o===void 0?void 0:o.useActionSheets);this.disabled=undefined;this.active=undefined;this.open=undefined;this.multiple=undefined;this.maxLength=undefined;this.label=undefined;this.value=undefined;this.theme=undefined;this.selectedOptions=[];this.popoverMinHeight=150;this.popoverDirection=undefined;this.popoverAlignment="right";this.optionListLabel=undefined;this.optionCount=undefined;this.selectedOptionElements=[]}componentWillLoad(){const t=new MutationObserver(this.determineOptionCount);t.observe(this.hostElement,{childList:true,attributes:true});this.mutationObserver=t}componentDidLoad(){n(this.hostElement);this.syncValueProperties()}componentDidRender(){this.scheduledAfterRender.forEach((t=>t()));this.scheduledAfterRender=[]}disconnectedCallback(){this.mutationObserver.disconnect();this.mutationObserver=null}get buttonContent(){const{label:t,selectedOptions:i,selectedOptionElements:e,optionCount:o}=this;if(!o||e.length===0)return a(t);else if(e.length===1)return a(e[0].display);return a("tecton.element.pill.activeCount",{count:i.length})}get truncatedButtonContent(){const{maxLength:t,buttonContent:i}=this;if(t)return i.length>t?`${i.substring(0,t)}…`:i;else return i}async executeActionSheet(t){const i=await s(this,t);this.handleSelectionChanges(i)}async handleSelectionChanges(t){const{multiple:i}=this;const{value:e="",values:o=[]}=t;const r=i?!!o.length:!!e;if(!this.hostElement.onchange){if(i){this.selectedOptions=o;this.value=undefined}else{const t=await this.getOption(e);this.selectedOptions=t?[{value:t.value,display:t.display}]:[];this.value=(t===null||t===void 0?void 0:t.value)||undefined}}this.change.emit({value:e,values:o,active:r})}async valueChanged(t){var i,e;const{multiple:o,selectedOptions:r}=this;const n=(e=(i=r===null||r===void 0?void 0:r[0])===null||i===void 0?void 0:i.value)!==null&&e!==void 0?e:null;if(o)return;if(t===n)this.updateSelectedOptionElements();else{const i=await this.getOption(t);const{value:e,display:o}=i||{value:t,display:null};this.selectedOptions=e?[{value:e,display:o}]:[]}}selectedOptionsChanged(t){var i,e;const{multiple:o}=this;const r=(e=(i=t===null||t===void 0?void 0:t[0])===null||i===void 0?void 0:i.value)!==null&&e!==void 0?e:null;if(o){if(this.value)this.value=null;this.updateSelectedOptionElements()}else if(this.value===r){this.updateSelectedOptionElements()}else{this.value=r}}delegateFocus(t){if(!l(t,this.hostElement))return;this.primaryBtn.focus()}popoverStateHandler({detail:{open:t}}){if(this.open!==t)this.open=t;if(t)return;this.optionList.setActiveElement(null)}handleSelectedDisplay(){if(this.multiple)return;this.updateSelectedOptionElements()}generateIcon(){const{optionCount:t,active:i}=this;const o=t&&i;const r=o?"button":"div";const n=o||!t?"close":"chevron-down";return e(r,{class:"btn-close",onClick:o&&this.clearSelectedOptions,disabled:o&&this.disabled,"aria-label":o&&a("tecton.element.pill.clearSelection"),type:o&&"button"},e("q2-icon",{type:n}))}generateHiddenElement(){return e("div",{id:"option-description",class:"sr","aria-hidden":"true"},a("tecton.element.optionList.optionCount",[this.optionCount]))}render(){const{optionCount:t,active:i,open:o}=this;const r=["btn-wrapper"];if(t||i)r.push("has-icon");if(t)r.push("has-options");return e("click-elsewhere",{onChange:this.onClickElsewhere},e("div",{class:r.join(" ")},e("div",{class:"btn-height-wrapper",ref:t=>this.primaryBtnWrapper=t,onClick:this.handleWrapperClick,tabIndex:-1},e("button",{class:"btn-primary","test-id":"btn-control",type:"button",role:"combobox",ref:t=>this.primaryBtn=t,onClick:this.handleClick,onKeyDown:this.handleKeydown,onFocusout:this.handleButtonFocusout,disabled:this.disabled,"aria-roledescription":!t&&"filter","aria-controls":t&&"option-list","aria-expanded":t&&`${!!o}`||undefined,"aria-label":this.maxLength&&this.buttonContent,"aria-describedby":t&&"option-description"||undefined},this.truncatedButtonContent,!t&&i&&e("span",{class:"sr"},"(",a("tecton.element.pill.active"),")"))),this.generateIcon(),this.generateHiddenElement()),this.optionCount>0&&e("q2-popover",{ref:t=>this.popoverElement=t,controlElement:this.primaryBtn,open:this.open,minHeight:this.popoverMinHeight,direction:this.popoverDirection,align:this.popoverAlignment},e("q2-option-list",{type:"listbox",ref:t=>this.optionList=t,id:"option-list",onChange:this.handleChange,multiple:this.multiple,selectedOptions:this.selectedOptions,onReady:()=>this.updateSelectedOptionElements(),label:a("tecton.element.optionList.label",[this.optionListLabel])},e("slot",null))))}get hostElement(){return o(this)}static get watchers(){return{value:["valueChanged"],selectedOptions:["selectedOptionsChanged"]}}};d.style=p;export{d as q2_pill};
-//# sourceMappingURL=p-145849d0.entry.js.map
+import{r as t,c as i,h as e,g as o}from"./p-277dc8cd.js";import{r,o as n,l as a,i as l}from"./p-fb903495.js";import{s as c,a as s}from"./p-788adb51.js";const p="*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block;position:relative;line-height:0}:host(:not(:last-child)){margin-inline-end:var(--tct-pill-margin, var(--t-pill-margin, var(--app-scale-2x, 10px)))}q2-popover,.btn-wrapper{--comp-pill-min-height:var(--tct-pill-min-height, var(--t-pill-min-height, 44px));--comp-pill-btn-height:var(--tct-pill-btn-height, var(--t-pill-btn-height, 30px))}.btn-wrapper{--comp-pill-btn-border-width:var(--tct-pill-btn-border-width, var(--t-pill-btn-border-width, 2px));--comp-close-size:0px;--comp-btn-background:var(--tct-pill-btn-background, var(--t-pill-btn-background, var(--t-base, #ffffff)));--comp-hover-btn-background:var(--tct-pill-hover-btn-background, var(--t-pill-hover-btn-background, var(--t-gray-13, #e6e6e6)));--comp-btn-padding:var(--tct-pill-btn-padding-inline, var(--t-pill-btn-padding-inline, var(--app-scale-3x, 15px)));--comp-btn-color:var(--tct-pill-btn-color, var(--t-pill-btn-color, var(--t-gray-3, #262626)));--comp-active-btn-color:var(--comp-btn-background);--comp-active-btn-background:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-7, #666666)));--comp-active-btn-border-color:var(--tct-pill-active-btn-border-color, var(--t-pill-active-btn-border-color, var(--t-gray-7, #666666)));--comp-hover-active-btn-background:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));--comp-hover-active-btn-border-color:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));position:relative}:host(:not(:empty)) .btn-wrapper,.btn-wrapper.has-icon{--comp-close-size:var(--comp-pill-btn-height)}:host([active]) .btn-wrapper{--comp-btn-color:var(--tct-pill-active-btn-color, var(--t-pill-active-btn-color, var(--t-base, #ffffff)))}:host([theme=primary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-primary-active-background, var(--t-primary, #61c4ff));--comp-active-btn-color:var(--tct-pill-primary-active-font-color, var(--t-primary-text, #ffffff));--comp-active-btn-border-color:var(--tct-pill-primary-active-border-color, var(--t-primary, #61c4ff));--comp-hover-active-btn-background:var(--tct-pill-primary-active-hover-background, var(--t-primary-l3, #21acff));--comp-hover-active-btn-border-color:var(--tct-pill-primary-active-hover-border-color, var(--t-primary-l3, #21acff))}:host([theme=secondary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-secondary-active-background, var(--t-secondary, #d9e1e6));--comp-active-btn-color:var(--tct-pill-secondary-active-font-color, var(--t-secondary-text, #141414));--comp-active-btn-border-color:var(--tct-pill-secondary-active-border-color, var(--t-secondary, #d9e1e6));--comp-hover-active-btn-background:var(--tct-pill-secondary-active-hover-background, var(--t-secondary-l3, #c9d5db));--comp-hover-active-btn-border-color:var(--tct-pill-secondary-active-hover-border-color, var(--t-secondary-l3, #c9d5db))}:host([theme=tertiary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-tertiary-active-background, var(--t-tertiary, #f4fafe));--comp-active-btn-color:var(--tct-pill-tertiary-active-font-color, var(--t-tertiary-text, #141414));--comp-active-btn-border-color:var(--tct-pill-tertiary-active-border-color, var(--t-tertiary, #f4fafe));--comp-hover-active-btn-background:var(--tct-pill-tertiary-active-hover-background, var(--t-tertiary-l3, #eff8fd));--comp-hover-active-btn-border-color:var(--tct-pill-tertiary-active-hover-border-color, var(--t-tertiary-l3, #eff8fd))}.btn-height-wrapper{height:var(--comp-pill-min-height);display:flex;align-items:center;cursor:pointer}.btn-height-wrapper:focus{box-shadow:none}:host([disabled]) .btn-height-wrapper{cursor:not-allowed}.btn-close,.btn-primary{cursor:pointer;height:var(--comp-pill-btn-height);border-style:solid;border-radius:var(--tct-pill-btn-border-radius, var(--t-pill-btn-border-radius, 30px));transition-property:background, color, padding, width, opacity;transition:var(--tct-pill-btn-tween, var(--t-pill-btn-tween, var(--app-tween-1, 0.2s ease)))}:host([disabled]) .btn-close,:host([disabled]) .btn-primary,:host([disabled]) q2-icon{opacity:var(--tct-pill-disabled-opacity, var(--t-pill-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));cursor:not-allowed}.btn-primary{background:var(--comp-btn-background);border-width:var(--comp-pill-btn-border-width);border-color:var(--tct-pill-btn-border-color, var(--t-pill-btn-border-color, var(--t-a11y-gray-color-AA, #949494)));padding-inline:var(--comp-btn-padding);padding-right:calc(var(--comp-btn-padding) + var(--comp-close-size));font-size:var(--tct-pill-btn-font-size, var(--t-pill-btn-font-size, var(--app-font-size, 14px)));color:var(--comp-btn-color);display:block;width:100%;text-align:start}.btn-primary:focus,.btn-primary:hover{background:var(--comp-hover-btn-background)}:host(:not(:empty)) .btn-primary,.has-icon .btn-primary{padding-right:calc(var(--tct-pill-icon-gap, var(--t-pill-icon-gap, var(--app-scale-1x, 5px))) + var(--comp-close-size))}.has-options .btn-primary{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:var(--tct-pill-max-width, var(--t-pill-max-width, 200px))}:host([active]) .btn-primary{background:var(--comp-active-btn-background);border-color:var(--comp-active-btn-border-color);color:var(--comp-active-btn-color)}:host([active]) .btn-primary:focus,:host([active]) .btn-primary:hover{background:var(--comp-hover-active-btn-background);border-color:var(--comp-hover-active-btn-border-color)}.btn-close{background:transparent;border-color:transparent;border-width:var(--comp-pill-btn-border-width);width:var(--comp-close-size);height:var(--comp-close-size);padding:0;border:0;display:inline-flex;justify-content:center;align-items:center;position:absolute;right:0;top:50%;transform:translateY(-50%);opacity:0}:host([active]) .btn-close{color:var(--comp-active-btn-color)}:host(:not(:empty)) .btn-close,.has-icon .btn-close{opacity:1}q2-icon{--t-icon-stroke-primary:currentColor;width:var(--tct-pill-icon-size, var(--t-pill-icon-size, 14px));height:var(--tct-pill-icon-size, var(--t-pill-icon-size, 14px));transition-property:transform;transition:var(--tct-pill-btn-tween, var(--t-pill-btn-tween, var(--app-tween-1, 0.2s ease)))}div.btn-close{pointer-events:none}:host([open]) div.btn-close q2-icon{transform:rotate(180deg)}:host([active]) button.btn-close:focus,:host([active]) button.btn-close:hover{background:var(--tct-pill-hover-close-btn-background, var(--t-pill-hover-close-btn-background, var(--t-top-a1, rgba(13, 13, 13, 0.35))));border-color:var(--tct-pill-hover-close-btn-border-color, var(--t-pill-hover-close-btn-border-color, var(--t-top-a1, rgba(13, 13, 13, 0.35))))}q2-popover{top:calc(var(--comp-pill-min-height) - (var(--comp-pill-min-height) - var(--comp-pill-btn-height)) / 2)}";const d=class{constructor(e){t(this,e);this.change=i(this,"change",7);var o;this.scheduledAfterRender=[];this.syncValueProperties=()=>{const{value:t,selectedOptions:i}=this;if(!!(i===null||i===void 0?void 0:i.length))this.selectedOptionsChanged(i);else if(t)this.valueChanged(t)};this.getOption=async t=>{if(this.optionList){const i=await this.optionList.getOptions();return i.find((i=>i.value===t))}else{return this.hostElement.querySelector(`q2-option[value="${t}"]`)}};this.updateSelectedOptionElements=async()=>{var t;const{selectedOptions:i=[]}=this;const e=i.map((t=>t.value));const o=await((t=this.optionList)===null||t===void 0?void 0:t.getOptions());if(this.optionCount)this.active=!!e.length;this.selectedOptionElements=(o===null||o===void 0?void 0:o.filter((t=>e.includes(t.value))))||[]};this.determineOptionCount=()=>{const t=this.hostElement.querySelectorAll("q2-option").length;this.optionCount=t};this.clearSelectedOptions=()=>{this.selectedOptions=[];this.value=null;this.active=false;this.open=false;this.primaryBtn.focus();this.change.emit({value:null,values:[],active:false});this.scheduledAfterRender.push(r)};this.handleClick=async t=>{t.stopPropagation();if(this.disabled)return;if(this.optionCount){if(c(this)){this.executeActionSheet(t)}else{await this.popoverElement.toggle()}}else{const{value:t,label:i}=this;const e=this.active=!this.active;const o=e?[{value:t,display:i}]:[];this.selectedOptions=o;this.change.emit({value:t,values:o,active:e})}};this.handleKeydown=async t=>{const i=t.metaKey||t.ctrlKey||t.key==="Tab";if(!this.optionCount||this.disabled||i)return;t.preventDefault();if(c(this,t)){this.executeActionSheet(t)}else{this.optionList.handleExternalKeydown(t)}};this.handleButtonFocusout=async t=>{var i;const e=t.relatedTarget;if((i=(e===null||e===void 0?void 0:e.tagName)==="Q2-OPTION")!==null&&i!==void 0?i:false)return;this.open=false};this.handleChange=t=>{t.stopPropagation();if(!this.optionCount)return;this.handleSelectionChanges(t.detail)};this.handleWrapperClick=()=>{this.primaryBtn.focus();this.primaryBtn.click()};this.onClickElsewhere=t=>{const i=t.target;if(i.localName==="click-elsewhere"){t.stopPropagation();const{popoverElement:i}=this;if(!i)return;i.open=false}};this.hoist=!!((o=window.Tecton)===null||o===void 0?void 0:o.useActionSheets);this.disabled=undefined;this.active=undefined;this.open=undefined;this.multiple=undefined;this.maxLength=undefined;this.label=undefined;this.value=undefined;this.theme=undefined;this.selectedOptions=[];this.popoverMinHeight=150;this.popoverDirection=undefined;this.popoverAlignment="right";this.optionListLabel=undefined;this.optionCount=undefined;this.selectedOptionElements=[]}componentWillLoad(){const t=new MutationObserver(this.determineOptionCount);t.observe(this.hostElement,{childList:true,attributes:true});this.mutationObserver=t}componentDidLoad(){n(this.hostElement);this.syncValueProperties()}componentDidRender(){this.scheduledAfterRender.forEach((t=>t()));this.scheduledAfterRender=[]}disconnectedCallback(){this.mutationObserver.disconnect();this.mutationObserver=null}get buttonContent(){const{label:t,selectedOptions:i,selectedOptionElements:e,optionCount:o}=this;if(!o||e.length===0)return a(t);else if(e.length===1)return a(e[0].display);return a("tecton.element.pill.activeCount",{count:i.length})}get truncatedButtonContent(){const{maxLength:t,buttonContent:i}=this;if(t)return i.length>t?`${i.substring(0,t)}…`:i;else return i}async executeActionSheet(t){const i=await s(this,t);this.handleSelectionChanges(i)}async handleSelectionChanges(t){const{multiple:i}=this;const{value:e="",values:o=[]}=t;const r=i?!!o.length:!!e;if(!this.hostElement.onchange){if(i){this.selectedOptions=o;this.value=undefined}else{const t=await this.getOption(e);this.selectedOptions=t?[{value:t.value,display:t.display}]:[];this.value=(t===null||t===void 0?void 0:t.value)||undefined}}this.change.emit({value:e,values:o,active:r})}async valueChanged(t){var i,e;const{multiple:o,selectedOptions:r}=this;const n=(e=(i=r===null||r===void 0?void 0:r[0])===null||i===void 0?void 0:i.value)!==null&&e!==void 0?e:null;if(o)return;if(t===n)this.updateSelectedOptionElements();else{const i=await this.getOption(t);const{value:e,display:o}=i||{value:t,display:null};this.selectedOptions=e?[{value:e,display:o}]:[]}}selectedOptionsChanged(t){var i,e;const{multiple:o}=this;const r=(e=(i=t===null||t===void 0?void 0:t[0])===null||i===void 0?void 0:i.value)!==null&&e!==void 0?e:null;if(o){if(this.value)this.value=null;this.updateSelectedOptionElements()}else if(this.value===r){this.updateSelectedOptionElements()}else{this.value=r}}delegateFocus(t){if(!l(t,this.hostElement))return;this.primaryBtn.focus()}popoverStateHandler({detail:{open:t}}){if(this.open!==t)this.open=t;if(t)return;this.optionList.setActiveElement(null)}handleSelectedDisplay(){if(this.multiple)return;this.updateSelectedOptionElements()}generateIcon(){const{optionCount:t,active:i}=this;const o=t&&i;const r=o?"button":"div";const n=o||!t?"close":"chevron-down";return e(r,{class:"btn-close",onClick:o&&this.clearSelectedOptions,disabled:o&&this.disabled,"aria-label":o&&a("tecton.element.pill.clearSelection"),type:o&&"button"},e("q2-icon",{type:n}))}generateHiddenElement(){return e("div",{id:"option-description",class:"sr","aria-hidden":"true"},a("tecton.element.optionList.optionCount",[this.optionCount]))}render(){const{optionCount:t,active:i,open:o}=this;const r=["btn-wrapper"];if(t||i)r.push("has-icon");if(t)r.push("has-options");return e("click-elsewhere",{onChange:this.onClickElsewhere},e("div",{class:r.join(" ")},e("div",{class:"btn-height-wrapper",ref:t=>this.primaryBtnWrapper=t,onClick:this.handleWrapperClick,tabIndex:-1},e("button",{class:"btn-primary","test-id":"btn-control",type:"button",role:"combobox",ref:t=>this.primaryBtn=t,onClick:this.handleClick,onKeyDown:this.handleKeydown,onFocusout:this.handleButtonFocusout,disabled:this.disabled,"aria-roledescription":!t&&"filter","aria-controls":t&&"option-list","aria-expanded":t&&`${!!o}`||undefined,"aria-label":this.maxLength&&this.buttonContent,"aria-describedby":t&&"option-description"||undefined},this.truncatedButtonContent,!t&&i&&e("span",{class:"sr"},"(",a("tecton.element.pill.active"),")"))),this.generateIcon(),this.generateHiddenElement()),this.optionCount>0&&e("q2-popover",{ref:t=>this.popoverElement=t,controlElement:this.primaryBtn,open:this.open,minHeight:this.popoverMinHeight,direction:this.popoverDirection,align:this.popoverAlignment},e("q2-option-list",{type:"listbox",ref:t=>this.optionList=t,id:"option-list",onChange:this.handleChange,multiple:this.multiple,selectedOptions:this.selectedOptions,onReady:()=>this.updateSelectedOptionElements(),label:a("tecton.element.optionList.label",[this.optionListLabel])},e("slot",null))))}get hostElement(){return o(this)}static get watchers(){return{value:["valueChanged"],selectedOptions:["selectedOptionsChanged"]}}};d.style=p;export{d as q2_pill};
+//# sourceMappingURL=p-a5a23edc.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","Q2Pill","this","scheduledAfterRender","syncValueProperties","value","selectedOptions","length","selectedOptionsChanged","valueChanged","getOption","async","optionList","options","getOptions","find","option","hostElement","querySelector","updateSelectedOptionElements","selectedValues","map","_a","optionCount","active","selectedOptionElements","filter","includes","determineOptionCount","numberOfOptions","querySelectorAll","clearSelectedOptions","open","primaryBtn","focus","change","emit","values","push","resizeIframe","handleClick","event","stopPropagation","disabled","shouldShowActionSheet","executeActionSheet","popoverElement","toggle","label","isActive","display","handleKeydown","isTabMetaOrCtrl","metaKey","ctrlKey","key","preventDefault","handleExternalKeydown","handleButtonFocusout","relatedTarget","tagName","handleChange","handleSelectionChanges","detail","handleWrapperClick","click","onClickElsewhere","target","localName","window","Tecton","useActionSheets","componentWillLoad","observer","MutationObserver","observe","childList","attributes","mutationObserver","componentDidLoad","overrideFocus","componentDidRender","forEach","fn","disconnectedCallback","disconnect","buttonContent","loc","count","truncatedButtonContent","maxLength","substring","result","showActionSheetList","changeDetails","multiple","onchange","undefined","selectedOption","newValue","firstValue","_b","delegateFocus","isEventFromElement","popoverStateHandler","setActiveElement","handleSelectedDisplay","generateIcon","isButton","TagName","iconName","h","class","onClick","type","generateHiddenElement","id","render","wrapperClassNames","onChange","join","ref","el","primaryBtnWrapper","tabIndex","role","onKeyDown","onFocusout","controlElement","minHeight","popoverMinHeight","direction","popoverDirection","align","popoverAlignment","onReady","optionListLabel"],"sources":["./src/components/q2-pill/styles.scss?tag=q2-pill&encapsulation=shadow","./src/components/q2-pill/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n    position: relative;\n    line-height: 0;\n}\n\n:host(:not(:last-child)) {\n    margin-inline-end: var-list(var-prefixer(pill-margin), --app-scale-2x, 10px);\n}\n\nq2-popover,\n.btn-wrapper {\n    --comp-pill-min-height: #{var-list(var-prefixer(pill-min-height), 44px)};\n    --comp-pill-btn-height: #{var-list(var-prefixer(pill-btn-height), 30px)};\n}\n\n.btn-wrapper {\n    --comp-pill-btn-border-width: #{var-list(var-prefixer(pill-btn-border-width), 2px)};\n    --comp-close-size: 0px;\n    --comp-btn-background: #{var-list(var-prefixer(pill-btn-background), --t-base, #ffffff)};\n    --comp-hover-btn-background: #{var-list(var-prefixer(pill-hover-btn-background), --t-gray-13, #e6e6e6)};\n    --comp-btn-padding: #{var-list(var-prefixer(pill-btn-padding-inline), --app-scale-3x, 15px)};\n    --comp-btn-color: #{var-list(var-prefixer(pill-btn-color), --t-gray-3, #262626)};\n    --comp-active-btn-color: var(--comp-btn-background);\n    --comp-active-btn-background: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-7, #666666)};\n    --comp-active-btn-border-color: #{var-list(var-prefixer(pill-active-btn-border-color), --t-gray-7, #666666)};\n    --comp-hover-active-btn-background: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-6, #4d4d4d)};\n    --comp-hover-active-btn-border-color: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-6, #4d4d4d)};\n\n    position: relative;\n\n    :host(:not(:empty)) &,\n    &.has-icon {\n        --comp-close-size: var(--comp-pill-btn-height);\n    }\n\n    :host([active]) & {\n        --comp-btn-color: #{var-list(var-prefixer(pill-active-btn-color), --t-base, #ffffff)};\n    }\n\n    :host([theme='primary']) & {\n        --comp-active-btn-background: #{var-list(--tct-pill-primary-active-background, --t-primary, #61c4ff)};\n        --comp-active-btn-color: #{var-list(--tct-pill-primary-active-font-color, --t-primary-text, #ffffff)};\n        --comp-active-btn-border-color: #{var-list(--tct-pill-primary-active-border-color, --t-primary, #61c4ff)};\n        --comp-hover-active-btn-background: #{var-list(\n                --tct-pill-primary-active-hover-background,\n                --t-primary-l3,\n                #21acff\n            )};\n        --comp-hover-active-btn-border-color: #{var-list(\n                --tct-pill-primary-active-hover-border-color,\n                --t-primary-l3,\n                #21acff\n            )};\n    }\n\n    :host([theme='secondary']) & {\n        --comp-active-btn-background: #{var-list(--tct-pill-secondary-active-background, --t-secondary, #d9e1e6)};\n        --comp-active-btn-color: #{var-list(--tct-pill-secondary-active-font-color, --t-secondary-text, #141414)};\n        --comp-active-btn-border-color: #{var-list(--tct-pill-secondary-active-border-color, --t-secondary, #d9e1e6)};\n        --comp-hover-active-btn-background: #{var-list(\n                --tct-pill-secondary-active-hover-background,\n                --t-secondary-l3,\n                #c9d5db\n            )};\n        --comp-hover-active-btn-border-color: #{var-list(\n                --tct-pill-secondary-active-hover-border-color,\n                --t-secondary-l3,\n                #c9d5db\n            )};\n    }\n\n    :host([theme='tertiary']) & {\n        --comp-active-btn-background: #{var-list(--tct-pill-tertiary-active-background, --t-tertiary, #f4fafe)};\n        --comp-active-btn-color: #{var-list(--tct-pill-tertiary-active-font-color, --t-tertiary-text, #141414)};\n        --comp-active-btn-border-color: #{var-list(--tct-pill-tertiary-active-border-color, --t-tertiary, #f4fafe)};\n        --comp-hover-active-btn-background: #{var-list(\n                --tct-pill-tertiary-active-hover-background,\n                --t-tertiary-l3,\n                #eff8fd\n            )};\n        --comp-hover-active-btn-border-color: #{var-list(\n                --tct-pill-tertiary-active-hover-border-color,\n                --t-tertiary-l3,\n                #eff8fd\n            )};\n    }\n}\n\n.btn-height-wrapper {\n    height: var(--comp-pill-min-height);\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n    &:focus {\n        box-shadow: none;\n    }\n\n    :host([disabled]) & {\n        cursor: not-allowed;\n    }\n}\n\n.btn-close,\n.btn-primary {\n    cursor: pointer;\n    height: var(--comp-pill-btn-height);\n    border-style: solid;\n    border-radius: var-list(var-prefixer(pill-btn-border-radius), 30px);\n    transition-property: background, color, padding, width, opacity;\n    transition: var-list(var-prefixer(pill-btn-tween), --app-tween-1, unquote('0.2s ease'));\n}\n\n.btn-close,\n.btn-primary,\nq2-icon {\n    :host([disabled]) & {\n        opacity: var-list(var-prefixer(pill-disabled-opacity), --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n        cursor: not-allowed;\n    }\n}\n\n.btn-primary {\n    background: var(--comp-btn-background);\n    border-width: var-list(--comp-pill-btn-border-width);\n    border-color: var-list(var-prefixer(pill-btn-border-color), --t-a11y-gray-color-AA, #949494);\n    padding-inline: var(--comp-btn-padding);\n    padding-right: calc(var(--comp-btn-padding) + var(--comp-close-size));\n    font-size: var-list(var-prefixer(pill-btn-font-size), --app-font-size, 14px);\n    color: var(--comp-btn-color);\n    display: block;\n    width: 100%;\n    text-align: start;\n\n    &:focus,\n    &:hover {\n        background: var(--comp-hover-btn-background);\n    }\n\n    :host(:not(:empty)) &,\n    .has-icon & {\n        padding-right: calc(#{var-list(var-prefixer(pill-icon-gap), --app-scale-1x, 5px)} + var(--comp-close-size));\n    }\n\n    .has-options & {\n        @include line-clamp(1);\n        max-width: var-list(var-prefixer(pill-max-width), 200px);\n    }\n\n    :host([active]) & {\n        background: var(--comp-active-btn-background);\n        border-color: var(--comp-active-btn-border-color);\n        color: var(--comp-active-btn-color);\n\n        &:focus,\n        &:hover {\n            background: var(--comp-hover-active-btn-background);\n            border-color: var(--comp-hover-active-btn-border-color);\n        }\n    }\n}\n\n.btn-close {\n    background: transparent;\n    border-color: transparent;\n    border-width: var(--comp-pill-btn-border-width);\n    width: var(--comp-close-size);\n    height: var(--comp-close-size);\n    padding: 0;\n    border: 0;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    position: absolute;\n    right: 0;\n    top: 50%;\n    transform: translateY(-50%);\n    opacity: 0;\n    :host([active]) & {\n        color: var(--comp-active-btn-color);\n    }\n\n    :host(:not(:empty)) &,\n    .has-icon & {\n        opacity: 1;\n    }\n}\n\nq2-icon {\n    --t-icon-stroke-primary: currentColor;\n    width: var-list(var-prefixer(pill-icon-size), 14px);\n    height: var-list(var-prefixer(pill-icon-size), 14px);\n    transition-property: transform;\n    transition: var-list(var-prefixer(pill-btn-tween), --app-tween-1, unquote('0.2s ease'));\n}\n\ndiv.btn-close {\n    pointer-events: none;\n\n    :host([open]) & q2-icon {\n        transform: rotate(180deg);\n    }\n}\n\nbutton.btn-close {\n    :host([active]) & {\n        &:focus,\n        &:hover {\n            background: var-list(var-prefixer(pill-hover-close-btn-background), --t-top-a1, rgba(13, 13, 13, 0.35));\n            border-color: var-list(var-prefixer(pill-hover-close-btn-border-color), --t-top-a1, rgba(13, 13, 13, 0.35));\n        }\n    }\n}\n\nq2-popover {\n    top: calc(var(--comp-pill-min-height) - calc(calc(var(--comp-pill-min-height) - var(--comp-pill-btn-height)) / 2));\n}\n","import {\n    Component,\n    State,\n    Prop,\n    h,\n    ComponentInterface,\n    Listen,\n    Watch,\n    Element,\n    EventEmitter,\n    Event,\n} from '@stencil/core';\nimport { isEventFromElement, loc, overrideFocus, resizeIframe } from 'src/utils';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\nimport { IOptionValue } from '../q2-option-list';\n\n@Component({\n    tag: 'q2-pill',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Pill implements ComponentInterface {\n    @Prop() hoist: boolean = !!window.Tecton?.useActionSheets;\n    @Prop({ reflect: true }) disabled: boolean;\n    @Prop({ reflect: true, mutable: true }) active: boolean;\n    @Prop({ reflect: true, mutable: true }) open: boolean;\n    @Prop({ reflect: true }) multiple: boolean;\n    @Prop({ reflect: true }) maxLength: number;\n    @Prop({ reflect: true }) label: string;\n    @Prop({ reflect: true, mutable: true }) value: string;\n    @Prop({ reflect: true }) theme: 'primary' | 'secondary' | 'tertiary';\n    @Prop({ mutable: true }) selectedOptions: IOptionValue[] = [];\n    @Prop() popoverMinHeight: number = 150;\n    @Prop() popoverDirection: 'up' | 'down';\n    @Prop({ mutable: true }) popoverAlignment: 'left' | 'right' = 'right';\n    @Prop() optionListLabel: string;\n\n    @State() optionCount: number;\n    @State() selectedOptionElements: HTMLQ2OptionElement[] = [];\n\n    @Element() hostElement: HTMLElement;\n\n    /**\n     * Emitted when the pill is clicked or the selected options change.\n     * @legacyEvent\n     */\n    @Event() change: EventEmitter<{ value: string; values: IOptionValue[]; active: boolean }>;\n    scheduledAfterRender: (() => void)[] = [];\n    primaryBtn: HTMLButtonElement;\n    primaryBtnWrapper: HTMLElement;\n    optionList: HTMLQ2OptionListElement;\n    mutationObserver: MutationObserver;\n    popoverElement: HTMLQ2PopoverElement;\n\n    /// LifeCycle Hooks ///\n    componentWillLoad() {\n        const observer = new MutationObserver(this.determineOptionCount);\n        observer.observe(this.hostElement, { childList: true, attributes: true });\n        this.mutationObserver = observer;\n    }\n\n    componentDidLoad() {\n        overrideFocus(this.hostElement);\n        this.syncValueProperties();\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    disconnectedCallback() {\n        this.mutationObserver.disconnect();\n        this.mutationObserver = null;\n    }\n\n    /// Getters ///\n    get buttonContent() {\n        const { label, selectedOptions, selectedOptionElements, optionCount } = this;\n\n        if (!optionCount || selectedOptionElements.length === 0) return loc(label);\n        else if (selectedOptionElements.length === 1) return loc(selectedOptionElements[0].display);\n\n        return loc('tecton.element.pill.activeCount', { count: selectedOptions.length });\n    }\n\n    get truncatedButtonContent() {\n        const { maxLength, buttonContent } = this;\n        if (maxLength)\n            return buttonContent.length > maxLength ? `${buttonContent.substring(0, maxLength)}…` : buttonContent;\n        else return buttonContent;\n    }\n\n    /// Helpers ///\n    syncValueProperties = () => {\n        const { value, selectedOptions } = this;\n        if (!!selectedOptions?.length) this.selectedOptionsChanged(selectedOptions);\n        else if (value) this.valueChanged(value);\n    };\n\n    getOption = async (value: string) => {\n        if (this.optionList) {\n            const options = await this.optionList.getOptions();\n            return options.find(option => option.value === value);\n        } else {\n            return this.hostElement.querySelector<HTMLQ2OptionElement>(`q2-option[value=\"${value}\"]`);\n        }\n    };\n\n    updateSelectedOptionElements = async () => {\n        const { selectedOptions = [] } = this;\n        const selectedValues = selectedOptions.map(option => option.value);\n        const options = await this.optionList?.getOptions();\n        if (this.optionCount) this.active = !!selectedValues.length;\n        this.selectedOptionElements = options?.filter(option => selectedValues.includes(option.value)) || [];\n    };\n\n    determineOptionCount = () => {\n        const numberOfOptions = this.hostElement.querySelectorAll('q2-option').length;\n        this.optionCount = numberOfOptions;\n    };\n\n    async executeActionSheet(event: MouseEvent | KeyboardEvent) {\n        const result = await showActionSheetList(this, event);\n        this.handleSelectionChanges(result);\n    }\n\n    async handleSelectionChanges(changeDetails: { value?: string; values?: IOptionValue[] }) {\n        const { multiple } = this;\n        const { value = '', values = [] } = changeDetails;\n        const isActive = multiple ? !!values.length : !!value;\n        if (!this.hostElement.onchange) {\n            if (multiple) {\n                this.selectedOptions = values;\n                this.value = undefined;\n            } else {\n                const selectedOption = await this.getOption(value);\n                this.selectedOptions = selectedOption\n                    ? [{ value: selectedOption.value, display: selectedOption.display }]\n                    : [];\n                this.value = selectedOption?.value || undefined;\n            }\n        }\n\n        this.change.emit({\n            value,\n            values,\n            active: isActive,\n        });\n    }\n\n    clearSelectedOptions = () => {\n        this.selectedOptions = [];\n        this.value = null;\n        this.active = false;\n        this.open = false;\n        this.primaryBtn.focus();\n        this.change.emit({ value: null, values: [], active: false });\n        this.scheduledAfterRender.push(resizeIframe);\n    };\n\n    /// Watchers ///\n    @Watch('value')\n    async valueChanged(newValue) {\n        const { multiple, selectedOptions } = this;\n        const firstValue = selectedOptions?.[0]?.value ?? null;\n        if (multiple) return;\n        if (newValue === firstValue) this.updateSelectedOptionElements();\n        else {\n            const selectedOption = await this.getOption(newValue);\n            const { value, display } = selectedOption || { value: newValue, display: null };\n            this.selectedOptions = value ? [{ value, display }] : [];\n        }\n    }\n\n    @Watch('selectedOptions')\n    selectedOptionsChanged(newValue) {\n        const { multiple } = this;\n        const firstValue = newValue?.[0]?.value ?? null;\n        if (multiple) {\n            if (this.value) this.value = null;\n            this.updateSelectedOptionElements();\n        } else if (this.value === firstValue) {\n            this.updateSelectedOptionElements();\n        } else {\n            this.value = firstValue;\n        }\n    }\n\n    /// Listeners ///\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.primaryBtn.focus();\n    }\n\n    @Listen('popoverStateChanged')\n    popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n        if (this.open !== open) this.open = open;\n        if (open) return;\n        this.optionList.setActiveElement(null);\n    }\n\n    @Listen('displayChanged')\n    handleSelectedDisplay() {\n        if (this.multiple) return;\n        this.updateSelectedOptionElements();\n    }\n    /// Event Handlers ///\n\n    handleClick = async (event: MouseEvent) => {\n        event.stopPropagation();\n        if (this.disabled) return;\n        if (this.optionCount) {\n            if (shouldShowActionSheet(this)) {\n                this.executeActionSheet(event);\n            } else {\n                await this.popoverElement.toggle();\n            }\n        } else {\n            const { value, label } = this;\n            const isActive = (this.active = !this.active);\n            const values = isActive ? [{ value, display: label }] : [];\n            this.selectedOptions = values;\n            this.change.emit({\n                value,\n                values,\n                active: isActive,\n            });\n        }\n    };\n\n    handleKeydown = async (event: KeyboardEvent) => {\n        const isTabMetaOrCtrl = event.metaKey || event.ctrlKey || event.key === 'Tab';\n        if (!this.optionCount || this.disabled || isTabMetaOrCtrl) return;\n\n        event.preventDefault();\n        if (shouldShowActionSheet(this, event)) {\n            this.executeActionSheet(event);\n        } else {\n            this.optionList.handleExternalKeydown(event);\n        }\n    };\n\n    handleButtonFocusout = async (event: FocusEvent) => {\n        const relatedTarget = event.relatedTarget as unknown as HTMLElement;\n        if (relatedTarget?.tagName === 'Q2-OPTION' ?? false) return;\n        this.open = false;\n    };\n\n    handleChange = event => {\n        event.stopPropagation();\n        if (!this.optionCount) return;\n        this.handleSelectionChanges(event.detail);\n    };\n\n    handleWrapperClick = () => {\n        this.primaryBtn.focus();\n        this.primaryBtn.click();\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    /// DOM ///\n    generateIcon() {\n        const { optionCount, active } = this;\n        const isButton = optionCount && active;\n        const TagName = isButton ? 'button' : 'div';\n        const iconName = isButton || !optionCount ? 'close' : 'chevron-down';\n\n        return (\n            <TagName\n                class=\"btn-close\"\n                onClick={isButton && this.clearSelectedOptions}\n                disabled={isButton && this.disabled}\n                aria-label={isButton && loc('tecton.element.pill.clearSelection')}\n                type={isButton && 'button'}\n            >\n                <q2-icon type={iconName}></q2-icon>\n            </TagName>\n        );\n    }\n\n    generateHiddenElement() {\n        return (\n            <div\n                id=\"option-description\"\n                class=\"sr\"\n                aria-hidden=\"true\"\n            >\n                {loc('tecton.element.optionList.optionCount', [this.optionCount])}\n            </div>\n        );\n    }\n\n    render() {\n        const { optionCount, active, open } = this;\n        const wrapperClassNames = ['btn-wrapper'];\n        if (optionCount || active) wrapperClassNames.push('has-icon');\n        if (optionCount) wrapperClassNames.push('has-options');\n\n        return (\n            <click-elsewhere onChange={this.onClickElsewhere}>\n                <div class={wrapperClassNames.join(' ')}>\n                    <div\n                        class=\"btn-height-wrapper\"\n                        ref={el => (this.primaryBtnWrapper = el)}\n                        onClick={this.handleWrapperClick}\n                        tabIndex={-1}\n                    >\n                        <button\n                            class=\"btn-primary\"\n                            test-id=\"btn-control\"\n                            type=\"button\"\n                            role=\"combobox\"\n                            ref={el => (this.primaryBtn = el)}\n                            onClick={this.handleClick}\n                            onKeyDown={this.handleKeydown}\n                            onFocusout={this.handleButtonFocusout}\n                            disabled={this.disabled}\n                            aria-roledescription={!optionCount && 'filter'}\n                            aria-controls={optionCount && 'option-list'}\n                            aria-expanded={(optionCount && `${!!open}`) || undefined}\n                            aria-label={this.maxLength && this.buttonContent}\n                            aria-describedby={(optionCount && 'option-description') || undefined}\n                        >\n                            {this.truncatedButtonContent}\n                            {!optionCount && active && <span class=\"sr\">({loc('tecton.element.pill.active')})</span>}\n                        </button>\n                    </div>\n                    {this.generateIcon()}\n                    {this.generateHiddenElement()}\n                </div>\n                {this.optionCount > 0 && (\n                    <q2-popover\n                        ref={el => (this.popoverElement = el)}\n                        controlElement={this.primaryBtn}\n                        open={this.open}\n                        minHeight={this.popoverMinHeight}\n                        direction={this.popoverDirection}\n                        align={this.popoverAlignment}\n                    >\n                        <q2-option-list\n                            type=\"listbox\"\n                            ref={el => (this.optionList = el)}\n                            id=\"option-list\"\n                            onChange={this.handleChange}\n                            multiple={this.multiple}\n                            selectedOptions={this.selectedOptions}\n                            onReady={() => this.updateSelectedOptionElements()}\n                            label={loc('tecton.element.optionList.label', [this.optionListLabel])}\n                        >\n                            <slot />\n                        </q2-option-list>\n                    </q2-popover>\n                )}\n            </click-elsewhere>\n        );\n    }\n}\n"],"mappings":"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"}