q2-tecton-elements 1.37.1 → 1.38.1

package/dist/q2-tecton-elements/p-57e81863.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as i,g as r}from"./p-277dc8cd.js";import{c as o,l as s}from"./p-f34521a4.js";const a="*{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{margin-top:var(--tct-scale-2, var(--app-scale-2x, 10px))}fieldset{padding:var(--tct-input-error-padding, 0);margin:0;border:0}fieldset.has-error{border-color:var(--tct-input-error-border-color, var(--const-stoplight-alert, #c30000));border-width:1px;border-style:solid;border-radius:var(--tct-border-radius-1, var(--app-border-radius-1, 2px));position:relative}fieldset.has-error .error-icon-container{top:8px;right:8px;position:absolute;width:40%;text-align:right;background:linear-gradient(to right, var(--tct-checkbox-group-error-gradient-start, var(--t-base-a0, rgba(255, 255, 255, 0))), var(--tct-checkbox-group-error-gradient-end, var(--t-base, rgb(255, 255, 255))))}fieldset.has-error legend+div.error-icon-container.no-label{top:28px}.group-legend{font-weight:600}legend.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0}.optional-tag{margin-left:var(--tct-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1x, 5px)));color:var(--tct-input-label-optional-font-color, var(--tct-a11y-color, var(--t-a11y-gray-color, var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666)))))));font-size:var(--tct-input-label-optional-font-size, 12px);font-weight:var(--tct-input-label-optional-font-weight, 400)}.flexed{margin:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center}.flexed.left{justify-content:left}";const n=class{constructor(i){t(this,i);this.change=e(this,"change",7);this._id=`checkbox-group-${o()}`;this.onMutationObserved=()=>{this.valueUpdated();this.updateDisabled()};this.onInnerCheckboxChange=t=>{t.stopImmediatePropagation();const e={};setTimeout((()=>{this.checkboxElements.forEach((t=>{e[t.value]=!!t.checked}));this.change.emit(e)}),0)};this.label=undefined;this.value=undefined;this.disabled=false;this.readonly=false;this.optional=false;this.hasError=false}get checkboxElements(){return Array.from(this.hostElement.querySelectorAll("q2-checkbox"))}get protectedValue(){return this.value||{}}componentWillLoad(){this.updateReadonly(this.readonly)}componentDidLoad(){const t=new MutationObserver(this.onMutationObserved);t.observe(this.hostElement,{childList:true});this.mutationObserver=t;this.onMutationObserved()}disconnectedCallback(){if(this.mutationObserver){this.mutationObserver.disconnect();this.mutationObserver=null}}valueUpdated(){if(this.readonly)return;this.checkboxElements.forEach((t=>{if(this.protectedValue.hasOwnProperty(t.value)){t.checked=this.value[t.value]}}))}updateDisabled(){const t=this.disabled;this.checkboxElements.forEach((e=>{e.groupDisabled=t}))}updateReadonly(t){this.checkboxElements.forEach((e=>{e.readonly=t}))}setValue(t){const e=new Set(Array.isArray(t)?t:[t]);this.checkboxElements.forEach((t=>{if(e.has(t.value))t.click()}))}onHostElementChange(t){if(t.target===this.hostElement&&!this.hostElement.onchange){this.value=t.detail}}render(){return i("div",null,this.label||this.optional?i("div",{class:"group-legend"},this.label&&s(this.label),this.optional?i("span",{class:"optional-tag"},s("tecton.element.input.optional")):""):"",i("fieldset",{class:`q2-checkbox-fieldset ${this.hasError?"has-error":""}`,onChange:this.onInnerCheckboxChange,"aria-invalid":`${this.hasError}`},this.label||this.optional?i("legend",{class:"sr-only"},this.label&&s(this.label),this.optional?i("span",{class:"optional-tag"},s("tecton.element.input.optional")):""):"",this.hasError?i("div",{class:`error-icon-container ${this.label||this.optional?"":"no-label"}`},i("q2-icon",{class:"h(4) w(4) mrg-b(2)",type:"error"})):"",this.inputDom()))}inputDom(){return i("slot",null)}get hostElement(){return r(this)}static get watchers(){return{value:["valueUpdated"],disabled:["updateDisabled"],readonly:["updateReadonly"]}}};n.style=a;export{n as q2_checkbox_group};
+//# sourceMappingURL=p-57e81863.entry.js.map

package/dist/q2-tecton-elements/{p-e45856f7.entry.js.map → p-57e81863.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["stylesCss","Q2CheckboxGroup","this","_id","createGuid","onMutationObserved","valueUpdated","updateDisabled","onInnerCheckboxChange","event","stopImmediatePropagation","groupValue","setTimeout","checkboxElements","forEach","check","value","checked","change","emit","Array","from","hostElement","querySelectorAll","protectedValue","componentWillLoad","updateReadonly","readonly","componentDidLoad","observer","MutationObserver","observe","childList","mutationObserver","disconnectedCallback","disconnect","hasOwnProperty","groupDisabled","disabled","checkbox","newReadonly","setValue","values","valuesSet","Set","isArray","has","click","onHostElementChange","target","onchange","detail","render","h","label","optional","class","loc","hasError","onChange","type","inputDom"],"sources":["./src/components/q2-checkbox-group/styles.scss?tag=q2-checkbox-group&encapsulation=shadow","./src/components/q2-checkbox-group/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n\n:host {\n    margin-top: var(--tct-scale-2, var(--app-scale-2x, 10px));\n}\n\nfieldset {\n    padding: var(--tct-input-error-padding, 0);\n    margin: 0;\n    border: 0;\n}\n\nfieldset.has-error {\n    border-color: var(--tct-input-error-border-color, var(--const-stoplight-alert, #c30000));\n    border-width: 1px;\n    border-style: solid;\n    border-radius: var(--tct-border-radius-1, var(--app-border-radius-1, 2px));\n    position: relative;\n}\n\nfieldset.has-error .error-icon-container {\n    top: 8px;\n    right: 8px;\n    position: absolute;\n    width: 40%;\n    text-align: right;\n    background: linear-gradient(\n        to right,\n        var(--tct-checkbox-group-error-gradient-start, var(--t-base-a0, rgba(255, 255, 255, 0))),\n        var(--tct-checkbox-group-error-gradient-end, var(--t-base, rgba(255, 255, 255)))\n    );\n}\n\nfieldset.has-error legend + div.error-icon-container.no-label {\n    top: 28px;\n}\n\n.group-legend {\n    font-weight: 600;\n}\n\nlegend.sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    border: 0;\n}\n\n.optional-tag {\n    margin-left: var(--tct-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1x, 5px)));\n    color: var(\n        --tct-input-label-optional-font-color,\n        var(\n            --tct-a11y-color,\n            var(\n                --t-a11y-gray-color,\n                var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666))))\n            )\n        )\n    );\n    font-size: var(--tct-input-label-optional-font-size, 12px);\n    font-weight: var(--tct-input-label-optional-font-weight, 400);\n}\n\n.flexed {\n    margin: 0;\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: center;\n}\n.flexed.left {\n    justify-content: left;\n}\n","import {\n    Component,\n    Prop,\n    Element,\n    h,\n    Listen,\n    EventEmitter,\n    Event,\n    ComponentInterface,\n    Watch,\n    Method,\n} from '@stencil/core';\nimport { createGuid, loc } from 'src/utils';\n\n@Component({\n    tag: 'q2-checkbox-group',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2CheckboxGroup implements ComponentInterface {\n    @Prop({ reflect: true }) label: string;\n    @Prop({ mutable: true }) value: object;\n    @Prop({ reflect: true }) disabled: boolean = false;\n    @Prop({ reflect: true }) readonly: boolean = false;\n    @Prop({ reflect: true }) optional: boolean = false;\n    @Prop({ reflect: true }) hasError: boolean = false;\n\n    @Element() hostElement: HTMLElement;\n    _id: string = `checkbox-group-${createGuid()}`;\n    mutationObserver: MutationObserver;\n\n    get checkboxElements() {\n        return Array.from(this.hostElement.querySelectorAll('q2-checkbox')) as HTMLQ2CheckboxElement[];\n    }\n\n    get protectedValue(): object {\n        return this.value || {};\n    }\n\n    onMutationObserved = () => {\n        this.valueUpdated();\n        this.updateDisabled();\n    };\n\n    onInnerCheckboxChange = (event: CustomEvent) => {\n        event.stopImmediatePropagation();\n        const groupValue = {};\n        setTimeout(() => {\n            this.checkboxElements.forEach(check => {\n                groupValue[check.value] = !!check.checked;\n            });\n            this.change.emit(groupValue);\n        }, 0);\n    };\n\n    ///// LIFECYCLE HOOK ///////\n\n    componentWillLoad() {\n        this.updateReadonly(this.readonly);\n    }\n\n    componentDidLoad() {\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true });\n        this.mutationObserver = observer;\n        this.onMutationObserved();\n    }\n\n    disconnectedCallback() {\n        if (this.mutationObserver) {\n            this.mutationObserver.disconnect();\n            this.mutationObserver = null;\n        }\n    }\n\n    @Watch('value')\n    valueUpdated() {\n        if (this.readonly) return;\n        this.checkboxElements.forEach(check => {\n            if (this.protectedValue.hasOwnProperty(check.value)) {\n                check.checked = this.value[check.value];\n            }\n        });\n    }\n\n    @Watch('disabled')\n    updateDisabled() {\n        const groupDisabled = this.disabled;\n        this.checkboxElements.forEach(checkbox => {\n            checkbox.groupDisabled = groupDisabled;\n        });\n    }\n\n    @Watch('readonly')\n    updateReadonly(newReadonly: boolean) {\n        this.checkboxElements.forEach(checkbox => {\n            checkbox.readonly = newReadonly;\n        });\n    }\n\n    /// Methods ///\n    @Method()\n    setValue(values: string | string[]) {\n        const valuesSet = new Set(Array.isArray(values) ? values : [values]);\n        this.checkboxElements.forEach(check => {\n            if (valuesSet.has(check.value)) check.click();\n        });\n    }\n\n    ///// HOST ELEMENT EVENTS ///////\n\n    @Event() change: EventEmitter;\n\n    @Listen('change')\n    onHostElementChange(event: CustomEvent) {\n        if (event.target === this.hostElement && !this.hostElement.onchange) {\n            this.value = event.detail;\n        }\n    }\n\n    render() {\n        return (\n            <div>\n                {this.label || this.optional ? (\n                    <div class=\"group-legend\">\n                        {this.label && loc(this.label)}\n                        {this.optional ? <span class=\"optional-tag\">{loc('tecton.element.input.optional')}</span> : ''}\n                    </div>\n                ) : (\n                    ''\n                )}\n                <fieldset\n                    class={`q2-checkbox-fieldset ${this.hasError ? 'has-error' : ''}`}\n                    onChange={this.onInnerCheckboxChange}\n                    aria-invalid={`${this.hasError}`}\n                >\n                    {this.label || this.optional ? (\n                        <legend class=\"sr-only\">\n                            {this.label && loc(this.label)}\n                            {this.optional ? (\n                                <span class=\"optional-tag\">{loc('tecton.element.input.optional')}</span>\n                            ) : (\n                                ''\n                            )}\n                        </legend>\n                    ) : (\n                        ''\n                    )}\n                    {this.hasError ? (\n                        <div class={`error-icon-container ${this.label || this.optional ? '' : 'no-label'}`}>\n                            <q2-icon\n                                class=\"h(4) w(4) mrg-b(2)\"\n                                type=\"error\"\n                            ></q2-icon>\n                        </div>\n                    ) : (\n                        ''\n                    )}\n                    {this.inputDom()}\n                </fieldset>\n            </div>\n        );\n    }\n\n    inputDom() {\n        return <slot />;\n    }\n}\n"],"mappings":"oGAAA,MAAMA,EAAY,yiE,MCmBLC,EAAe,M,wDASxBC,KAAAC,IAAc,kBAAkBC,MAWhCF,KAAAG,mBAAqB,KACjBH,KAAKI,eACLJ,KAAKK,gBAAgB,EAGzBL,KAAAM,sBAAyBC,IACrBA,EAAMC,2BACN,MAAMC,EAAa,GACnBC,YAAW,KACPV,KAAKW,iBAAiBC,SAAQC,IAC1BJ,EAAWI,EAAMC,SAAWD,EAAME,OAAO,IAE7Cf,KAAKgB,OAAOC,KAAKR,EAAW,GAC7B,EAAE,E,wDA9BoC,M,cACA,M,cACA,M,cACA,K,CAMzCE,uBACA,OAAOO,MAAMC,KAAKnB,KAAKoB,YAAYC,iBAAiB,e,CAGpDC,qBACA,OAAOtB,KAAKc,OAAS,E,CAqBzBS,oBACIvB,KAAKwB,eAAexB,KAAKyB,S,CAG7BC,mBACI,MAAMC,EAAW,IAAIC,iBAAiB5B,KAAKG,oBAC3CwB,EAASE,QAAQ7B,KAAKoB,YAAa,CAAEU,UAAW,OAChD9B,KAAK+B,iBAAmBJ,EACxB3B,KAAKG,oB,CAGT6B,uBACI,GAAIhC,KAAK+B,iBAAkB,CACvB/B,KAAK+B,iBAAiBE,aACtBjC,KAAK+B,iBAAmB,I,EAKhC3B,eACI,GAAIJ,KAAKyB,SAAU,OACnBzB,KAAKW,iBAAiBC,SAAQC,IAC1B,GAAIb,KAAKsB,eAAeY,eAAerB,EAAMC,OAAQ,CACjDD,EAAME,QAAUf,KAAKc,MAAMD,EAAMC,M,KAM7CT,iBACI,MAAM8B,EAAgBnC,KAAKoC,SAC3BpC,KAAKW,iBAAiBC,SAAQyB,IAC1BA,EAASF,cAAgBA,CAAa,G,CAK9CX,eAAec,GACXtC,KAAKW,iBAAiBC,SAAQyB,IAC1BA,EAASZ,SAAWa,CAAW,G,CAMvCC,SAASC,GACL,MAAMC,EAAY,IAAIC,IAAIxB,MAAMyB,QAAQH,GAAUA,EAAS,CAACA,IAC5DxC,KAAKW,iBAAiBC,SAAQC,IAC1B,GAAI4B,EAAUG,IAAI/B,EAAMC,OAAQD,EAAMgC,OAAO,G,CASrDC,oBAAoBvC,GAChB,GAAIA,EAAMwC,SAAW/C,KAAKoB,cAAgBpB,KAAKoB,YAAY4B,SAAU,CACjEhD,KAAKc,MAAQP,EAAM0C,M,EAI3BC,SACI,OACIC,EAAA,WACKnD,KAAKoD,OAASpD,KAAKqD,SAChBF,EAAA,OAAKG,MAAM,gBACNtD,KAAKoD,OAASG,EAAIvD,KAAKoD,OACvBpD,KAAKqD,SAAWF,EAAA,QAAMG,MAAM,gBAAgBC,EAAI,kCAA2C,IAC1F,GAIVJ,EAAA,YACIG,MAAO,wBAAwBtD,KAAKwD,SAAW,YAAc,KAC7DC,SAAUzD,KAAKM,sBAAqB,eACtB,GAAGN,KAAKwD,YAErBxD,KAAKoD,OAASpD,KAAKqD,SAChBF,EAAA,UAAQG,MAAM,WACTtD,KAAKoD,OAASG,EAAIvD,KAAKoD,OACvBpD,KAAKqD,SACFF,EAAA,QAAMG,MAAM,gBAAgBC,EAAI,kCAAwC,IAIvE,GAIZvD,KAAKwD,SACFL,EAAA,OAAKG,MAAO,wBAAwBtD,KAAKoD,OAASpD,KAAKqD,SAAW,GAAK,cACnEF,EAAA,WACIG,MAAM,qBACNI,KAAK,WAEP,GAIT1D,KAAK2D,Y,CAMtBA,WACI,OAAOR,EAAA,Y"}
+{"version":3,"names":["stylesCss","Q2CheckboxGroup","this","_id","createGuid","onMutationObserved","valueUpdated","updateDisabled","onInnerCheckboxChange","event","stopImmediatePropagation","groupValue","setTimeout","checkboxElements","forEach","check","value","checked","change","emit","Array","from","hostElement","querySelectorAll","protectedValue","componentWillLoad","updateReadonly","readonly","componentDidLoad","observer","MutationObserver","observe","childList","mutationObserver","disconnectedCallback","disconnect","hasOwnProperty","groupDisabled","disabled","checkbox","newReadonly","setValue","values","valuesSet","Set","isArray","has","click","onHostElementChange","target","onchange","detail","render","h","label","optional","class","loc","hasError","onChange","type","inputDom"],"sources":["./src/components/q2-checkbox-group/styles.scss?tag=q2-checkbox-group&encapsulation=shadow","./src/components/q2-checkbox-group/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n\n:host {\n    margin-top: var(--tct-scale-2, var(--app-scale-2x, 10px));\n}\n\nfieldset {\n    padding: var(--tct-input-error-padding, 0);\n    margin: 0;\n    border: 0;\n}\n\nfieldset.has-error {\n    border-color: var(--tct-input-error-border-color, var(--const-stoplight-alert, #c30000));\n    border-width: 1px;\n    border-style: solid;\n    border-radius: var(--tct-border-radius-1, var(--app-border-radius-1, 2px));\n    position: relative;\n}\n\nfieldset.has-error .error-icon-container {\n    top: 8px;\n    right: 8px;\n    position: absolute;\n    width: 40%;\n    text-align: right;\n    background: linear-gradient(\n        to right,\n        var(--tct-checkbox-group-error-gradient-start, var(--t-base-a0, rgba(255, 255, 255, 0))),\n        var(--tct-checkbox-group-error-gradient-end, var(--t-base, rgba(255, 255, 255)))\n    );\n}\n\nfieldset.has-error legend + div.error-icon-container.no-label {\n    top: 28px;\n}\n\n.group-legend {\n    font-weight: 600;\n}\n\nlegend.sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    border: 0;\n}\n\n.optional-tag {\n    margin-left: var(--tct-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1x, 5px)));\n    color: var(\n        --tct-input-label-optional-font-color,\n        var(\n            --tct-a11y-color,\n            var(\n                --t-a11y-gray-color,\n                var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666))))\n            )\n        )\n    );\n    font-size: var(--tct-input-label-optional-font-size, 12px);\n    font-weight: var(--tct-input-label-optional-font-weight, 400);\n}\n\n.flexed {\n    margin: 0;\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: center;\n}\n.flexed.left {\n    justify-content: left;\n}\n","import {\n    Component,\n    Prop,\n    Element,\n    h,\n    Listen,\n    EventEmitter,\n    Event,\n    ComponentInterface,\n    Watch,\n    Method,\n} from '@stencil/core';\nimport { createGuid, loc } from 'src/utils';\n\n@Component({\n    tag: 'q2-checkbox-group',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2CheckboxGroup implements ComponentInterface {\n    @Prop({ reflect: true }) label: string;\n    @Prop({ mutable: true }) value: object;\n    @Prop({ reflect: true }) disabled: boolean = false;\n    @Prop({ reflect: true }) readonly: boolean = false;\n    @Prop({ reflect: true }) optional: boolean = false;\n    @Prop({ reflect: true }) hasError: boolean = false;\n\n    @Element() hostElement: HTMLElement;\n    _id: string = `checkbox-group-${createGuid()}`;\n    mutationObserver: MutationObserver;\n\n    get checkboxElements() {\n        return Array.from(this.hostElement.querySelectorAll('q2-checkbox')) as HTMLQ2CheckboxElement[];\n    }\n\n    get protectedValue(): object {\n        return this.value || {};\n    }\n\n    onMutationObserved = () => {\n        this.valueUpdated();\n        this.updateDisabled();\n    };\n\n    onInnerCheckboxChange = (event: CustomEvent) => {\n        event.stopImmediatePropagation();\n        const groupValue = {};\n        setTimeout(() => {\n            this.checkboxElements.forEach(check => {\n                groupValue[check.value] = !!check.checked;\n            });\n            this.change.emit(groupValue);\n        }, 0);\n    };\n\n    ///// LIFECYCLE HOOK ///////\n\n    componentWillLoad() {\n        this.updateReadonly(this.readonly);\n    }\n\n    componentDidLoad() {\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true });\n        this.mutationObserver = observer;\n        this.onMutationObserved();\n    }\n\n    disconnectedCallback() {\n        if (this.mutationObserver) {\n            this.mutationObserver.disconnect();\n            this.mutationObserver = null;\n        }\n    }\n\n    @Watch('value')\n    valueUpdated() {\n        if (this.readonly) return;\n        this.checkboxElements.forEach(check => {\n            if (this.protectedValue.hasOwnProperty(check.value)) {\n                check.checked = this.value[check.value];\n            }\n        });\n    }\n\n    @Watch('disabled')\n    updateDisabled() {\n        const groupDisabled = this.disabled;\n        this.checkboxElements.forEach(checkbox => {\n            checkbox.groupDisabled = groupDisabled;\n        });\n    }\n\n    @Watch('readonly')\n    updateReadonly(newReadonly: boolean) {\n        this.checkboxElements.forEach(checkbox => {\n            checkbox.readonly = newReadonly;\n        });\n    }\n\n    /// Methods ///\n    /**\n     * Emulates clicking the `<q2-checkbox>` option(s) with the provided value.\n     *\n     * @testOnly\n     */\n    @Method()\n    setValue(values: string | string[]) {\n        const valuesSet = new Set(Array.isArray(values) ? values : [values]);\n        this.checkboxElements.forEach(check => {\n            if (valuesSet.has(check.value)) check.click();\n        });\n    }\n\n    ///// HOST ELEMENT EVENTS ///////\n\n    @Event() change: EventEmitter;\n\n    @Listen('change')\n    onHostElementChange(event: CustomEvent) {\n        if (event.target === this.hostElement && !this.hostElement.onchange) {\n            this.value = event.detail;\n        }\n    }\n\n    render() {\n        return (\n            <div>\n                {this.label || this.optional ? (\n                    <div class=\"group-legend\">\n                        {this.label && loc(this.label)}\n                        {this.optional ? <span class=\"optional-tag\">{loc('tecton.element.input.optional')}</span> : ''}\n                    </div>\n                ) : (\n                    ''\n                )}\n                <fieldset\n                    class={`q2-checkbox-fieldset ${this.hasError ? 'has-error' : ''}`}\n                    onChange={this.onInnerCheckboxChange}\n                    aria-invalid={`${this.hasError}`}\n                >\n                    {this.label || this.optional ? (\n                        <legend class=\"sr-only\">\n                            {this.label && loc(this.label)}\n                            {this.optional ? (\n                                <span class=\"optional-tag\">{loc('tecton.element.input.optional')}</span>\n                            ) : (\n                                ''\n                            )}\n                        </legend>\n                    ) : (\n                        ''\n                    )}\n                    {this.hasError ? (\n                        <div class={`error-icon-container ${this.label || this.optional ? '' : 'no-label'}`}>\n                            <q2-icon\n                                class=\"h(4) w(4) mrg-b(2)\"\n                                type=\"error\"\n                            ></q2-icon>\n                        </div>\n                    ) : (\n                        ''\n                    )}\n                    {this.inputDom()}\n                </fieldset>\n            </div>\n        );\n    }\n\n    inputDom() {\n        return <slot />;\n    }\n}\n"],"mappings":"oGAAA,MAAMA,EAAY,oiE,MCmBLC,EAAe,M,wDASxBC,KAAAC,IAAc,kBAAkBC,MAWhCF,KAAAG,mBAAqB,KACjBH,KAAKI,eACLJ,KAAKK,gBAAgB,EAGzBL,KAAAM,sBAAyBC,IACrBA,EAAMC,2BACN,MAAMC,EAAa,GACnBC,YAAW,KACPV,KAAKW,iBAAiBC,SAAQC,IAC1BJ,EAAWI,EAAMC,SAAWD,EAAME,OAAO,IAE7Cf,KAAKgB,OAAOC,KAAKR,EAAW,GAC7B,EAAE,E,wDA9BoC,M,cACA,M,cACA,M,cACA,K,CAMzCE,uBACA,OAAOO,MAAMC,KAAKnB,KAAKoB,YAAYC,iBAAiB,e,CAGpDC,qBACA,OAAOtB,KAAKc,OAAS,E,CAqBzBS,oBACIvB,KAAKwB,eAAexB,KAAKyB,S,CAG7BC,mBACI,MAAMC,EAAW,IAAIC,iBAAiB5B,KAAKG,oBAC3CwB,EAASE,QAAQ7B,KAAKoB,YAAa,CAAEU,UAAW,OAChD9B,KAAK+B,iBAAmBJ,EACxB3B,KAAKG,oB,CAGT6B,uBACI,GAAIhC,KAAK+B,iBAAkB,CACvB/B,KAAK+B,iBAAiBE,aACtBjC,KAAK+B,iBAAmB,I,EAKhC3B,eACI,GAAIJ,KAAKyB,SAAU,OACnBzB,KAAKW,iBAAiBC,SAAQC,IAC1B,GAAIb,KAAKsB,eAAeY,eAAerB,EAAMC,OAAQ,CACjDD,EAAME,QAAUf,KAAKc,MAAMD,EAAMC,M,KAM7CT,iBACI,MAAM8B,EAAgBnC,KAAKoC,SAC3BpC,KAAKW,iBAAiBC,SAAQyB,IAC1BA,EAASF,cAAgBA,CAAa,G,CAK9CX,eAAec,GACXtC,KAAKW,iBAAiBC,SAAQyB,IAC1BA,EAASZ,SAAWa,CAAW,G,CAWvCC,SAASC,GACL,MAAMC,EAAY,IAAIC,IAAIxB,MAAMyB,QAAQH,GAAUA,EAAS,CAACA,IAC5DxC,KAAKW,iBAAiBC,SAAQC,IAC1B,GAAI4B,EAAUG,IAAI/B,EAAMC,OAAQD,EAAMgC,OAAO,G,CASrDC,oBAAoBvC,GAChB,GAAIA,EAAMwC,SAAW/C,KAAKoB,cAAgBpB,KAAKoB,YAAY4B,SAAU,CACjEhD,KAAKc,MAAQP,EAAM0C,M,EAI3BC,SACI,OACIC,EAAA,WACKnD,KAAKoD,OAASpD,KAAKqD,SAChBF,EAAA,OAAKG,MAAM,gBACNtD,KAAKoD,OAASG,EAAIvD,KAAKoD,OACvBpD,KAAKqD,SAAWF,EAAA,QAAMG,MAAM,gBAAgBC,EAAI,kCAA2C,IAC1F,GAIVJ,EAAA,YACIG,MAAO,wBAAwBtD,KAAKwD,SAAW,YAAc,KAC7DC,SAAUzD,KAAKM,sBAAqB,eACtB,GAAGN,KAAKwD,YAErBxD,KAAKoD,OAASpD,KAAKqD,SAChBF,EAAA,UAAQG,MAAM,WACTtD,KAAKoD,OAASG,EAAIvD,KAAKoD,OACvBpD,KAAKqD,SACFF,EAAA,QAAMG,MAAM,gBAAgBC,EAAI,kCAAwC,IAIvE,GAIZvD,KAAKwD,SACFL,EAAA,OAAKG,MAAO,wBAAwBtD,KAAKoD,OAASpD,KAAKqD,SAAW,GAAK,cACnEF,EAAA,WACIG,MAAM,qBACNI,KAAK,WAEP,GAIT1D,KAAK2D,Y,CAMtBA,WACI,OAAOR,EAAA,Y"}

package/dist/q2-tecton-elements/p-5843f6c8.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as i,g as s}from"./p-277dc8cd.js";import{l as o,h as l,o as r,w as n,d as a,i as c,e as h}from"./p-f34521a4.js";import{s as d,a as p}from"./p-788adb51.js";const u="*{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}.q2-element-dropdown{display:none;position:absolute;background-color:var(--app-white, #ffffff);color:var(--t-text, #4d4d4d);left:0;width:100%;z-index:100;margin-top:1px;box-shadow:var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3));height:0;overflow:hidden;opacity:0;visibility:hidden;transition:opacity var(--app-tween-1, 0.2s ease);border-radius:var(--tct-dropdown-border-radius, --t-dropdown-border-radius, 0);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 3px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.q2-element-dropdown::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.q2-element-dropdown::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown.sizable{display:block;height:auto}.dropdown-open .q2-element-dropdown{display:block;height:auto;overflow:auto;opacity:1;visibility:visible}:host([alignment=right]) .q2-element-dropdown{left:auto;right:0}:host([block]) q2-btn,:host([block]){display:block}:host{--comp-select-margin:var(--tct-select-margin, var(--tct-select-margin-top, var(--t-select-margin-top, var(--app-scale-4, 30px))) 0 var(--tct-select-margin-bottom, var(--t-select-margin-bottom, var(--app-scale-4, 30px))));display:block;margin:var(--comp-select-margin)}.q2-select-container{position:relative;display:block}.q2-select-input{margin:0;--tct-input-min-height:var(--tct-select-input-min-height, var(--t-select-input-min-height));--tct-input-max-height:var(--tct-select-input-max-height, var(--t-select-input-max-height, none))}::slotted([slot=_selected-display]){width:100%;min-height:var(--comp-selected-display-height, 44px)}.custom-display-content{position:absolute;bottom:0;left:calc(var(--tct-scale-2, var(--app-scale-2x, 10px)) + 1px);height:44px;width:calc(100% - 34px - var(--tct-scale-3, var(--app-scale-3x, 15px)));overflow:hidden;cursor:pointer;transition:left var(--tct-tween-2, var(--app-tween-1, 0.2s ease))}.custom-display-content:not([hidden]){display:flex;align-items:center}.is-searchable.is-focused .custom-display-content,.is-searchable .custom-display-content:active{left:calc(var(--tct-scale-3, var(--app-scale-3x, 15px)) + 1px)}.has-error .custom-display-content{width:calc(100% - 68px - var(--tct-scale-3, var(--app-scale-3x, 15px)))}.popover-content{display:flex;flex-direction:column-reverse}.popover-bottom-container{position:sticky;bottom:0;z-index:5}.popover-top-container{position:sticky;top:0;z-index:5}.popover-top-container .multi-select-header{padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-2, var(--app-scale-2x, 10px));background:var(--app-white);display:flex;gap:var(--app-scale-2x, 10px);align-items:center}.popover-top-container .multi-select-header fieldset{margin:0;padding:0;border:0;display:flex;gap:var(--app-scale-2x, 10px)}.popover-top-container .multi-select-header legend{padding:0;float:left}.popover-top-container .multi-select-header label{cursor:pointer;padding:var(--tct-select-multi-select-option-padding, var(--t-select-multi-select-option-padding, var(--tct-btn-badge-padding, var(--t-btn-badge-padding, 2px 5px))));font-size:var(--tct-select-multi-select-option-font-size, var(--t-select-multi-select-option-font-size, var(--tct-btn-badge-font-size, var(--t-btn-badge-font-size, inherit))));border-radius:var(--tct-select-multi-select-option-radius, var(--t-select-multi-select-option-radius, var(--tct-btn-badge-border-radius, var(--t-btn-badge-border-radius, var(--app-border-radius-1, 3px)))));background:var(--tct-select-multi-select-option-background, var(--tct-select-multi-select-option-bg, var(--t-select-multi-select-option-bg, var(--tct-badge-background, var(--tct-btn-badge-bg, var(--t-btn-badge-bg, transparent))))));color:var(--tct-select-multi-select-option-color, var(--t-select-multi-select-option-color, var(--tct-btn-badge-font-color, var(--t-btn-badge-font-color, inherit))))}.popover-top-container .multi-select-header label:hover{background:var(--tct-select-multi-select-option-hover-background, var(--tct-select-multi-select-option-hover-background-color, var(--t-select-multi-select-option-hover-background-color, var(--tct-btn-badge-hover-bg, var(--t-btn-badge-hover-bg, var(--tct-gray-14, var(--t-gray-14, var(--app-gray-l3, #f2f2f2))))))));color:var(--tct-select-multi-select-option-hover-color, var(--tct-select-multi-select-option-color, var(--t-select-multi-select-option-color, var(--tct-btn-badge-hover-font-color, var(--t-btn-badge-hover-font-color, var(--tct-gray-5, var(--t-gray-5, var(--app-gray-d2, #404040))))))))}.popover-top-container .multi-select-header input:checked+label,.popover-top-container .multi-select-header input:checked+label:enabled:hover{background:var(--tct-select-multi-select-option-active-background, var(--tct-select-multi-select-option-active-background-color, var(--t-select-multi-select-option-active-background-color, var(--tct-btn-primary-bg, var(--t-btn-primary-bg, #2e2e2e)))));color:var(--tct-select-multi-select-option-active-color, var(--t-select-multi-select-option-active-color, var(--tct-btn-primary-font-color, var(--t-btn-primary-font-color, var(--app-white, #ffffff)))))}.popover-top-container .multi-select-header input:disabled+label{opacity:var(--tct-select-multi-select-option-active-color, var(--t-select-multi-select-option-active-color, var(--tct-btn-disabled-opacity, var(--t-btn-disabled-opacity, var(--app-disabled-opacity, 0.4)))));cursor:not-allowed}.popover-top-container .multi-select-header input:focus+label{box-shadow:var(--const-double-focus-ring)}";const v=class{constructor(i){t(this,i);this.change=e(this,"change",7);this.input=e(this,"input",7);var s;this.scheduledAfterRender=[];this.showSelectedOptions=()=>{this.showSelected=true};this.showAllOptions=()=>{this.showSelected=false};this.onMutationObserved=()=>{const{hostElement:t,hasPopoverTop:e,hasPopoverBottom:i}=this;const s=t.querySelector(".custom-display-content");const o=t.shadowRoot.querySelector('slot[name="q2-select-display"]');const l=!!o?o.assignedNodes().length>0:s.children.length>0;if(this.hasCustomDisplay!==l){this.hasCustomDisplay=l}const r=t.shadowRoot.querySelector('slot[name="popover-top"]');const n=r.assignedNodes().length>0;if(e!==n){this.hasPopoverTop=n}const a=t.shadowRoot.querySelector('slot[name="popover-bottom"]');const c=a.assignedNodes().length>0;if(i!==c){this.hasPopoverBottom=c}this.checkSelectedOptions()};this.onOptionListChange=t=>{t.stopPropagation();const{values:e}=t.detail;if(e.length===0)this.showAllOptions();this.handleSelectionChanges(t.detail)};this.onPopoverState=({detail:{open:t,action:e}})=>{if(!t||this.searchText){if(e!=="select"){this.optionList.setActiveElement(null)}this.inputField.focus()}if(this.open===t)return;this.open=t};this.inputKeydownHandler=t=>{if(this.readonly||this.disabled)return;const e=t.key;const i=this.hasPopoverTop||this.hasPopoverBottom;const s=e==="Tab"&&t.shiftKey;if(i&&(e==="Tab"||e==="Enter"||s))return;if(d(this,t)){return this.executeActionSheet(t)}const o=["ArrowDown","ArrowUp","PageDown","PageUp","Home","End","Escape","Tab"];if(this.searchable&&!o.includes(e))return;if(this.shouldClearSearchText(t))this.clearSearchText();if(e===" ")t.preventDefault();this.optionList.handleExternalKeydown(t)};this.visibilityToggleKeyDown=t=>{const e=t.key;const i=e==="Tab"&&t.shiftKey;const s=["ArrowLeft","ArrowRight","ArrowUp","ArrowDown"].includes(e);if(s)t.stopPropagation();if(i){t.stopPropagation();if(this.hasPopoverTop)return;this.optionList.setDefaultActiveElement()}};this.inputClickHandler=async t=>{t.stopPropagation();if(d(this)){return this.executeActionSheet(t)}this.toggleDropdown();this.focusInput()};this.inputInputHandler=t=>{t.stopPropagation();const e=t.detail.value;const i=!!this.value;if(i)this.clearValue();if(!this.open)this.openDropdownWithoutActiveElement();this.prioritizeSearch=true;this.searchText=e;this.input.emit({query:e})};this.inputFocusHandler=()=>{this.inputFocused=true};this.inputBlurHandler=()=>{this.inputFocused=false};this.inputChangeHandler=t=>{t.stopPropagation()};this.clickedElsewhere=t=>{const e=t.target;if(e.localName!=="click-elsewhere")return;t.stopPropagation();if(!this.open)return;this.closeDropdown()};this.onCustomDisplayClick=t=>{t.stopPropagation();this.focusInput();this.toggleDropdown()};this.label=undefined;this.hideLabel=undefined;this.value=undefined;this.selectedOptions=[];this.disabled=false;this.readonly=false;this.invalid=undefined;this.listLabel=o("tecton.element.select.listLabel");this.errors=undefined;this.multiple=false;this.minRows=3;this.popDirection=undefined;this.searchable=false;this.multilineOptions=false;this.optional=false;this.placeholder=undefined;this.hoist=!!((s=window.Tecton)===null||s===void 0?void 0:s.useActionSheets);this.ariaLabel=undefined;this.open=false;this.showSelected=false;this.searchText="";this.hasCustomDisplay=false;this.hasPopoverTop=false;this.hasPopoverBottom=false;this.inputFocused=false;this.statusMessage=undefined;this.prioritizeSearch=false;this.structuredSelectedOptions=[]}componentWillLoad(){l(this);this.buildStructuredSelectedOptions();this.handleMultilineOptionsUpdate(this.multilineOptions,false)}componentDidLoad(){const t=new MutationObserver(this.onMutationObserved);t.observe(this.hostElement,{childList:true,subtree:true});this.mutationObserver=t;this.onMutationObserved();r(this.hostElement);setTimeout((()=>this.checkSelectedDisplay()),0)}componentDidRender(){setTimeout((()=>{this.scheduledAfterRender.forEach((t=>t()));this.scheduledAfterRender=[]}),25)}disconnectedCallback(){var t;(t=this.mutationObserver)===null||t===void 0?void 0:t.disconnect();this.mutationObserver=null}get innerInputField(){var t,e;return(e=(t=this.inputField)===null||t===void 0?void 0:t.shadowRoot)===null||e===void 0?void 0:e.querySelector(".input-field")}get innerInputContainer(){var t,e;return(e=(t=this.inputField)===null||t===void 0?void 0:t.shadowRoot)===null||e===void 0?void 0:e.querySelector(".input-container")}get badgeValue(){var t,e;if(!this.multiple)return null;const i=(e=(t=this.selectedOptions)===null||t===void 0?void 0:t.length)!==null&&e!==void 0?e:0;if(this.open&&this.searchable)return i?`${i}`:null;else return i>1?`+${i-1}`:null}get popoverMinHeight(){const{minRows:t}=this;const e=this.hostElement.querySelector("q2-option:not([hidden])");let i=e&&window.getComputedStyle(e).minHeight;if(!i||i==="0px")i="44px";return t*parseInt(i)}get selectedDisplay(){if(this.prioritizeSearch||this.searchText)return this.searchText;if(this.hasCustomDisplay)return"";return this.multiple?this.calculateMultiSelectSelectedDisplay():this.calculateSingleSelectSelectedDisplay()}get selectedDisplaySlot(){return this.hostElement.querySelector('[slot="_selected-display"]')}get firstSelectedValue(){var t;return this.multiple?(t=this.selectedOptions)===null||t===void 0?void 0:t[0]:this.value}get firstSelectedOptionElement(){const{firstSelectedValue:t}=this;return t?this.optionElements.find((({value:e})=>e===t)):null}get optionElements(){return Array.from(this.hostElement.querySelectorAll("q2-option"))}get wrapperClasses(){const{errors:t}=this;const e=["q2-select-container"];if(Array.isArray(t)&&t.length>0)e.push("has-error");if(this.inputFocused)e.push("is-focused");if(this.searchable)e.push("is-searchable");return e.join(" ")}buildStructuredSelectedOptions(){const{multiple:t,selectedOptions:e,value:i}=this;if(t){this.structuredSelectedOptions=!!(e===null||e===void 0?void 0:e.length)?e.map((t=>typeof t==="string"?{value:t}:t)):[]}else{this.structuredSelectedOptions=i?[{value:i}]:[]}}ariaLabelObserver(){l(this)}valueUpdated(){if(this.multiple)return;this.clearSearchText()}handleMultilineOptionsUpdate(t,e){if(t===e)return;this.optionElements.forEach((e=>e.multiline=t))}openChanged(t){this.scheduledAfterRender.push((()=>{const{popoverTopContainer:e,popoverElement:i}=this;const s=t&&(e===null||e===void 0?void 0:e.offsetHeight)||0;if(s){i.style.setProperty("--comp-popover-top-container-height",`${s}px`)}else{i.style.removeProperty("--comp-popover-top-container-height")}}))}_togglePopover(){const{innerInputField:t}=this;t===null||t===void 0?void 0:t.click();t===null||t===void 0?void 0:t.focus();t.dispatchEvent(new FocusEvent("focus"))}async openPopover(){if(this.open||this.disabled)return;this._togglePopover()}async closePopover(){if(!this.open||this.disabled)return;this._togglePopover()}async setValue(t,e={closePopover:true}){const i=new Set(Array.isArray(t)?t:[t]);if(!this.open){await this.openPopover();await n()}i.forEach((t=>{var e;(e=this.optionElements.find((e=>e.value===t)))===null||e===void 0?void 0:e.click()}));if(e.closePopover){await this.closePopover();await n()}}searchOptions(t){if(!this.searchable)return;const{innerInputField:e}=this;e.focus();e.dispatchEvent(new FocusEvent("focus"));e.value=t;e.dispatchEvent(new InputEvent("input"))}keydownHandler(t){this.inputKeydownHandler(t)}onHostElementChange(t){if(this.readonly||this.disabled)return;if(t.target!==this.hostElement||this.hostElement.onchange)return;if(this.multiple){this.value=null;this.selectedOptions=t.detail.selectedOptions}else{this.value=t.detail.value;this.selectedOptions=[]}}onHostElementInput(t){if(!this.searchable||t.target!==this.hostElement||this.hostElement.oninput)return;const e=this.optionElements;const i=this.searchText.trim().toLocaleLowerCase();let s=0;e.forEach((t=>{var e;if(i===""){t.hidden=false;return}const o=((e=t.firstElementChild)===null||e===void 0?void 0:e.tagName)==="Q2-CARD"?t.firstElementChild.title:null;const{display:l="",innerText:r=""}=t;const n=[l,o,r];const a=n.some((t=>{var e;return(e=t===null||t===void 0?void 0:t.toLocaleLowerCase().includes(i))!==null&&e!==void 0?e:false}));t.hidden=!a;if(a)s++}));const l=i?"tecton.element.select.searchable.results":"tecton.element.select.allOptions";const r=i?s:e.length;this.setStatusMessage(o(l,[r]))}delegateFocus(t){const e=a(t,this.hostElement);const i=this.prioritizeSearch=e&&this.searchable;if(i){this.clearSelectedDisplay()}else if(c(t,this.hostElement)){this.inputField.shadowRoot.querySelector(".input-field").focus()}}handleFocusout(t){const e=h(t,this.hostElement);if(e)this.closeDropdown();this.prioritizeSearch=!e&&this.searchable}handleSelectedDisplay(t){if(this.multiple)return;this.inputField.value=t.detail.display}async executeActionSheet(t){const e=await p(this,t);this.handleSelectionChanges(e)}handleSelectionChanges(t){const{value:e="",values:i=[]}=t;const s=i.map((t=>t.value));const{multiple:o}=this;if(!this.hostElement.onchange){this.selectedOptions=s}this.change.emit({value:o?undefined:e,selectedOptions:o?s:undefined})}clearValue(){const{multiple:t}=this;this.value="";this.selectedOptions=[];this.change.emit({value:t?undefined:"",selectedOptions:t?[]:undefined})}calculateMultiSelectSelectedDisplay(){var t,e,i;const{firstSelectedOptionElement:s,firstSelectedValue:l,multilineOptions:r}=this;if(!l)return"";if(s===null||s===void 0?void 0:s.display)return o(s.display);if(r&&this.searchable)return this.searchText;if(r)return"";return(i=(e=(t=s===null||s===void 0?void 0:s.textContent)===null||t===void 0?void 0:t.trim())!==null&&e!==void 0?e:s===null||s===void 0?void 0:s.value)!==null&&i!==void 0?i:l}calculateSingleSelectSelectedDisplay(){var t;const{firstSelectedOptionElement:e,multilineOptions:i}=this;if(i){return(e===null||e===void 0?void 0:e.display)&&o(e.display)||this.value||""}else{return(e===null||e===void 0?void 0:e.display)&&o(e.display)||((t=e===null||e===void 0?void 0:e.textContent)===null||t===void 0?void 0:t.trim())||this.value||""}}openDropdownWithoutActiveElement(){if(this.readonly||this.disabled)return;this.optionList.setActiveElement(null);this.open=true}closeDropdown(){this.open=false;this.clearSearchText()}clearSearchText(){if(!this.searchText)return;this.searchText="";this.input.emit({query:""})}toggleDropdown(){if(this.readonly||this.disabled)return;if(this.open&&!this.searchText){this.closeDropdown()}else{this.openDropdownWithoutActiveElement()}}focusInput(){var t;(t=this.inputField)===null||t===void 0?void 0:t.dispatchEvent(new FocusEvent("focus"))}setStatusMessage(t){clearTimeout(this.statusMessageTimer);this.statusMessage="";this.statusMessageTimer=setTimeout((()=>{this.statusMessage=t}),1e3)}checkSelectedOptions(){const{multiple:t,selectedOptions:e,value:i}=this;this.optionElements.forEach((s=>{if(t){s.selected=e.includes(s.value)}else{s.selected=s.value===i}}))}clearSelectedDisplay(){var t;(t=this.selectedDisplaySlot)===null||t===void 0?void 0:t.remove()}checkSelectedDisplay(){let t=this.selectedDisplaySlot;const{value:e,multiple:i,selectedOptions:s,multilineOptions:o,firstSelectedOptionElement:l,prioritizeSearch:r}=this;const n=!e&&i&&!(s===null||s===void 0?void 0:s.length);if(r||!o||n)return this.clearSelectedDisplay();if(!l||l.display)return this.clearSelectedDisplay();const a=l.firstElementChild.cloneNode(true);a.querySelectorAll("[hide-on-select]").forEach((t=>t.remove()));if(t){const e=t.clientHeight===0?"auto":`${t.clientHeight}px`;t.style.setProperty("--comp-selected-display-height",e);if(t.firstElementChild.outerHTML!==a.outerHTML){t.replaceChild(a,t.firstElementChild)}}else{t=document.createElement("div");t.slot="_selected-display";t.appendChild(a);this.hostElement.appendChild(t)}return t}checkSelectedDisplayHeight(){const{selectedDisplaySlot:t}=this;if(!t)return;t.style.setProperty("--comp-selected-display-height","44px")}shouldClearSearchText(t){return this.searchable&&!!this.searchText&&t.key==="Escape"}renderCustomDisplay(){const t=this.checkSelectedDisplay();if(!t)return;this.checkSelectedDisplayHeight();return i("slot",{name:"_selected-display",slot:"custom-display"})}render(){const t=!this.searchable;return i("click-elsewhere",{class:this.wrapperClasses,onChange:this.clickedElsewhere},i("div",{"aria-live":"polite","aria-atomic":"true",role:"status",class:"sr"},this.statusMessage),i("q2-input",{ref:t=>this.inputField=t,class:"q2-select-input",label:this.label&&o(this.label)||"",value:this.selectedDisplay,errors:Array.isArray(this.errors)&&this.errors.length>0&&this.errors.map((t=>o(t)))||this.invalid&&["tecton.element.select.invalid"]||[],disabled:this.disabled,optional:this.optional,readonly:this.readonly,placeholder:this.placeholder||undefined,hideLabel:this.hideLabel,ariaExpanded:`${this.open}`,ariaControls:"option-list",ariaHaspopup:"listbox",role:"combobox",pseudo:t,"test-id":"toggleDropdown","hide-messages":true,iconRight:"chevron-down",onClick:this.inputClickHandler,onInput:this.inputInputHandler,onKeyDown:this.inputKeydownHandler,onFocus:this.inputFocusHandler,onBlur:this.inputBlurHandler,onChange:this.inputChangeHandler,badgeValue:this.badgeValue,badgeTheme:this.inputFocused?"primary":undefined},this.renderCustomDisplay()),i("div",{class:"custom-display-content",hidden:!this.hasCustomDisplay||!!this.searchText,onClick:this.onCustomDisplayClick},i("slot",{name:"q2-select-display"})),this.optionsDropdown())}optionsDropdown(){return i("q2-popover",{ref:t=>this.popoverElement=t,controlElement:this.innerInputContainer,open:this.open,minHeight:this.popoverMinHeight,direction:this.popDirection,block:true},i("div",{class:"popover-content"},i("q2-option-list",{onPopoverState:this.onPopoverState,ref:t=>this.optionList=t,type:"listbox",id:"option-list","show-selected":this.showSelected,label:this.listLabel,multiple:this.multiple,selectedOptions:this.structuredSelectedOptions,onChange:this.onOptionListChange},i("slot",null)),i("div",{class:"popover-top-container",ref:t=>this.popoverTopContainer=t,hidden:!this.multiple&&!this.hasPopoverTop,tabindex:"-1"},i("slot",{name:"popover-top"}),this.multiple&&this.visibilityToggle())),i("div",{class:"popover-bottom-container",hidden:!this.hasPopoverBottom,tabindex:"-1"},i("slot",{name:"popover-bottom"})))}visibilityToggle(){var t,e;const s=(e=(t=this.selectedOptions)===null||t===void 0?void 0:t.length)!==null&&e!==void 0?e:0;const{showSelected:l}=this;return i("div",{class:"multi-select-header"},i("fieldset",null,i("legend",{"aria-label":o("tecton.element.select.multiHeader.showing")},o("tecton.element.select.multiHeader.showing")),i("div",null,i("input",{class:"sr",type:"radio",id:"all",name:"viewDisplay",value:"all",checked:!l,"aria-label":o("tecton.element.select.multiHeader.allAriaLabel"),"test-id":"allOptionsButton",onClick:this.showAllOptions,onKeyDown:this.visibilityToggleKeyDown}),i("label",{htmlFor:"all"},o("tecton.element.select.multiHeader.all"))),i("div",null,i("input",{class:"sr",type:"radio",id:"selected",disabled:s===0,name:"viewDisplay",value:"selected","aria-label":o("tecton.element.select.multiHeader.selectedAriaLabel",[s]),checked:l,"test-id":"selectedOptionsButton",onClick:this.showSelectedOptions,onKeyDown:this.visibilityToggleKeyDown}),i("label",{htmlFor:"selected"},o("tecton.element.select.multiHeader.selected",[s])))))}get hostElement(){return s(this)}static get watchers(){return{value:["buildStructuredSelectedOptions","valueUpdated"],selectedOptions:["buildStructuredSelectedOptions"],ariaLabel:["ariaLabelObserver"],multilineOptions:["handleMultilineOptionsUpdate"],open:["openChanged"]}}};v.style=u;export{v as q2_select};
+//# sourceMappingURL=p-5843f6c8.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","Q2Select","this","scheduledAfterRender","showSelectedOptions","showSelected","showAllOptions","onMutationObserved","hostElement","hasPopoverTop","hasPopoverBottom","slotContainer","querySelector","displaySlot","shadowRoot","hasCustomDisplay","assignedNodes","length","children","popTopSlot","topSlotHasNode","popBottomSlot","bottomSlotHasNode","checkSelectedOptions","onOptionListChange","event","stopPropagation","values","detail","handleSelectionChanges","onPopoverState","open","action","searchText","optionList","setActiveElement","inputField","focus","inputKeydownHandler","readonly","disabled","key","hasSlot","isShiftTab","shiftKey","shouldShowActionSheet","executeActionSheet","keysForOptionListToHandle","searchable","includes","shouldClearSearchText","clearSearchText","preventDefault","handleExternalKeydown","visibilityToggleKeyDown","isRadioControlKey","setDefaultActiveElement","inputClickHandler","async","toggleDropdown","focusInput","inputInputHandler","eventValue","value","shouldClearValue","clearValue","openDropdownWithoutActiveElement","prioritizeSearch","input","emit","query","inputFocusHandler","inputFocused","inputBlurHandler","inputChangeHandler","clickedElsewhere","target","localName","closeDropdown","onCustomDisplayClick","loc","_a","window","Tecton","useActionSheets","componentWillLoad","handleAriaLabel","buildStructuredSelectedOptions","handleMultilineOptionsUpdate","multilineOptions","componentDidLoad","observer","MutationObserver","observe","childList","subtree","mutationObserver","overrideFocus","setTimeout","checkSelectedDisplay","componentDidRender","forEach","fn","disconnectedCallback","disconnect","innerInputField","_b","innerInputContainer","badgeValue","multiple","optionsLength","selectedOptions","popoverMinHeight","minRows","firstOption","minHeight","getComputedStyle","parseInt","selectedDisplay","calculateMultiSelectSelectedDisplay","calculateSingleSelectSelectedDisplay","selectedDisplaySlot","firstSelectedValue","firstSelectedOptionElement","optionElements","find","Array","from","querySelectorAll","wrapperClasses","errors","classes","isArray","push","join","structuredSelectedOptions","map","option","ariaLabelObserver","valueUpdated","newValue","oldValue","element","multiline","openChanged","isOpen","popoverTopContainer","popoverElement","height","offsetHeight","style","setProperty","removeProperty","_togglePopover","click","dispatchEvent","FocusEvent","options","closePopover","valuesSet","Set","openPopover","waitForNextPaint","searchOptions","InputEvent","keydownHandler","onHostElementChange","onchange","onHostElementInput","oninput","trim","toLocaleLowerCase","matchedCount","hidden","title","firstElementChild","tagName","display","innerText","searchParams","matched","some","text","statusMessageLocString","count","setStatusMessage","delegateFocus","fromHost","isRelatedTargetWithinHost","clearSelectedDisplay","isEventFromElement","handleFocusout","isLeavingHost","isHostLosingFocus","handleSelectedDisplay","result","showActionSheetList","changeDetails","selectedOptionValues","change","undefined","_c","textContent","message","clearTimeout","statusMessageTimer","statusMessage","selected","remove","namedSlot","hasNoValue","selectionClone","cloneNode","clientHeight","outerHTML","replaceChild","document","createElement","slot","appendChild","checkSelectedDisplayHeight","renderCustomDisplay","hasSelectedDisplay","h","name","render","showAsPseudo","class","onChange","role","ref","el","label","error","invalid","optional","placeholder","hideLabel","ariaExpanded","ariaControls","ariaHaspopup","pseudo","iconRight","onClick","onInput","onKeyDown","onFocus","onBlur","badgeTheme","optionsDropdown","controlElement","direction","popDirection","block","type","id","listLabel","tabindex","visibilityToggle","selectedOptionsCount","checked","htmlFor"],"sources":["./src/components/q2-select/styles.scss?tag=q2-select&encapsulation=shadow","./src/components/q2-select/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../../styles/dropdowns';\n\n:host {\n    --comp-select-margin: #{var-list(\n            --tct-select-margin,\n            unquote(\n                '#{var-list(var-prefixer(select-margin-top), --app-scale-4, 30px)} 0 #{var-list(var-prefixer(select-margin-bottom), --app-scale-4, 30px)}'\n            )\n        )};\n    display: block;\n    margin: var(--comp-select-margin);\n}\n\n.q2-select-container {\n    position: relative;\n    display: block;\n}\n\n.q2-select-input {\n    margin: 0;\n\n    --tct-input-min-height: #{var-list(var-prefixer(select-input-min-height))};\n    --tct-input-max-height: #{var-list(var-prefixer(select-input-max-height), none)};\n}\n\n::slotted([slot='_selected-display']) {\n    width: 100%;\n    min-height: var(--comp-selected-display-height, 44px);\n}\n\n.custom-display-content {\n    position: absolute;\n    bottom: 0;\n    left: calc(var-list(--tct-scale-2, --app-scale-2x, 10px) + 1px);\n    height: 44px;\n    width: calc(100% - 34px - var-list(--tct-scale-3, --app-scale-3x, 15px));\n    overflow: hidden;\n    cursor: pointer;\n    transition: left var-list(--tct-tween-2, --app-tween-1, unquote('0.2s ease'));\n}\n\n.custom-display-content:not([hidden]) {\n    display: flex;\n    align-items: center;\n}\n\n.is-searchable.is-focused .custom-display-content,\n.is-searchable .custom-display-content:active {\n    left: calc(var-list(--tct-scale-3, --app-scale-3x, 15px) + 1px);\n}\n\n.has-error .custom-display-content {\n    width: calc(100% - 68px - var-list(--tct-scale-3, --app-scale-3x, 15px));\n}\n\n.popover-content {\n    display: flex;\n    flex-direction: column-reverse;\n}\n\n.popover-bottom-container {\n    position: sticky;\n    bottom: 0;\n    z-index: 5;\n}\n\n.popover-top-container {\n    position: sticky;\n    top: 0;\n    z-index: 5;\n    .multi-select-header {\n        padding: var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-2, var(--app-scale-2x, 10px));\n        background: var(--app-white);\n        display: flex;\n        gap: var-list(--app-scale-2x, 10px);\n        align-items: center;\n\n        fieldset {\n            margin: 0;\n            padding: 0;\n            border: 0;\n            display: flex;\n            gap: var-list(--app-scale-2x, 10px);\n        }\n\n        legend {\n            padding: 0;\n            float: left;\n        }\n\n        label {\n            cursor: pointer;\n            padding: var-list(\n                var-prefixer(select-multi-select-option-padding),\n                var-prefixer(btn-badge-padding),\n                unquote('2px 5px')\n            );\n            font-size: var-list(\n                var-prefixer(select-multi-select-option-font-size),\n                var-prefixer(btn-badge-font-size),\n                inherit\n            );\n            border-radius: var-list(\n                var-prefixer(select-multi-select-option-radius),\n                var-prefixer(btn-badge-border-radius),\n                --app-border-radius-1,\n                3px\n            );\n            background: var-list(\n                --tct-select-multi-select-option-background,\n                var-prefixer(select-multi-select-option-bg),\n                --tct-badge-background,\n                var-prefixer(btn-badge-bg),\n                transparent\n            );\n            color: var-list(\n                var-prefixer(select-multi-select-option-color),\n                var-prefixer(btn-badge-font-color),\n                inherit\n            );\n\n            &:hover {\n                background: var-list(\n                    --tct-select-multi-select-option-hover-background,\n                    var-prefixer(select-multi-select-option-hover-background-color),\n                    var-prefixer(btn-badge-hover-bg),\n                    var-prefixer(gray-14),\n                    --app-gray-l3,\n                    #f2f2f2\n                );\n                color: var-list(\n                    --tct-select-multi-select-option-hover-color,\n                    var-prefixer(select-multi-select-option-color),\n                    var-prefixer(btn-badge-hover-font-color),\n                    var-prefixer(gray-5),\n                    --app-gray-d2,\n                    #404040\n                );\n            }\n        }\n\n        input {\n            &:checked + label {\n                &,\n                &:enabled:hover {\n                    background: var-list(\n                        --tct-select-multi-select-option-active-background,\n                        var-prefixer(select-multi-select-option-active-background-color),\n                        var-prefixer(btn-primary-bg),\n                        #2e2e2e\n                    );\n                    color: var-list(\n                        var-prefixer(select-multi-select-option-active-color),\n                        var-prefixer(btn-primary-font-color),\n                        --app-white,\n                        #ffffff\n                    );\n                }\n            }\n\n            &:disabled + label {\n                opacity: var-list(\n                    var-prefixer(select-multi-select-option-active-color),\n                    var-prefixer(btn-disabled-opacity),\n                    --app-disabled-opacity,\n                    0.4\n                );\n                cursor: not-allowed;\n            }\n\n            &:focus + label {\n                box-shadow: var(--const-double-focus-ring);\n            }\n        }\n    }\n}\n","import {\n    Component,\n    Prop,\n    Element,\n    h,\n    Listen,\n    State,\n    EventEmitter,\n    Event,\n    ComponentInterface,\n    Watch,\n    Method,\n} from '@stencil/core';\nimport { IEventDetail, Q2InputCustomEvent, Q2OptionListCustomEvent } from 'src/components';\nimport {\n    handleAriaLabel,\n    isEventFromElement,\n    isHostLosingFocus,\n    isRelatedTargetWithinHost,\n    loc,\n    overrideFocus,\n    waitForNextPaint,\n} from '../../utils';\nimport { IOptionValue } from '../q2-option-list';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\n\n@Component({\n    tag: 'q2-select',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Select implements ComponentInterface {\n    @Prop({ reflect: true, mutable: true }) label: string;\n    @Prop({ reflect: true, mutable: true }) hideLabel: boolean;\n    @Prop({ mutable: true }) value: string;\n    @Prop({ mutable: true }) selectedOptions: string[] = [];\n    @Prop({ reflect: true }) disabled: boolean = false;\n    @Prop({ reflect: true }) readonly: boolean = false;\n    @Prop({ reflect: true }) invalid: boolean;\n    @Prop() listLabel: string = loc('tecton.element.select.listLabel');\n    @Prop() errors: string[];\n    @Prop({ reflect: true }) multiple: boolean = false;\n    @Prop() minRows: number = 3;\n    @Prop({ reflect: true }) popDirection: 'up' | 'down';\n    @Prop({ reflect: true }) searchable: boolean = false;\n    @Prop({ reflect: true }) multilineOptions: boolean = false;\n    @Prop({ reflect: true }) optional: boolean = false;\n    @Prop({ reflect: true }) placeholder: string;\n    @Prop() hoist: boolean = !!window.Tecton?.useActionSheets;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n    @Element() hostElement: HTMLElement;\n\n    @State() open: boolean = false;\n    @State() showSelected: boolean = false;\n    @State() searchText: string = '';\n    @State() hasCustomDisplay: boolean = false;\n    @State() hasPopoverTop: boolean = false;\n    @State() hasPopoverBottom: boolean = false;\n    @State() inputFocused: boolean = false;\n    @State() statusMessage: string;\n    @State() prioritizeSearch: boolean = false;\n    @State() structuredSelectedOptions: IOptionValue[] = [];\n\n    inputField?: HTMLQ2InputElement;\n    optionList: HTMLQ2OptionListElement;\n    popoverElement?: HTMLQ2PopoverElement;\n    popoverTopContainer?: HTMLDivElement;\n    scheduledAfterRender: (() => void)[] = [];\n    mutationObserver: MutationObserver;\n\n    /// Lifecycle Hooks ///\n    componentWillLoad() {\n        handleAriaLabel(this);\n        this.buildStructuredSelectedOptions();\n        this.handleMultilineOptionsUpdate(this.multilineOptions, false);\n    }\n\n    componentDidLoad() {\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true, subtree: true });\n        this.mutationObserver = observer;\n        this.onMutationObserved();\n        overrideFocus(this.hostElement);\n        setTimeout(() => this.checkSelectedDisplay(), 0);\n    }\n\n    componentDidRender() {\n        setTimeout(() => {\n            this.scheduledAfterRender.forEach(fn => fn());\n            this.scheduledAfterRender = [];\n        }, 25);\n    }\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    /// Getters ///\n    get innerInputField(): HTMLInputElement | HTMLButtonElement {\n        return this.inputField?.shadowRoot?.querySelector('.input-field');\n    }\n\n    get innerInputContainer(): HTMLElement {\n        return this.inputField?.shadowRoot?.querySelector('.input-container');\n    }\n\n    get badgeValue(): string {\n        if (!this.multiple) return null;\n        const optionsLength = this.selectedOptions?.length ?? 0;\n        if (this.open && this.searchable) return optionsLength ? `${optionsLength}` : null;\n        else return optionsLength > 1 ? `+${optionsLength - 1}` : null;\n    }\n\n    get popoverMinHeight() {\n        const { minRows } = this;\n        const firstOption = this.hostElement.querySelector<HTMLQ2OptionElement>('q2-option:not([hidden])');\n        let minHeight = firstOption && window.getComputedStyle(firstOption).minHeight;\n\n        // Safari doesn't return a min-height for non-visible items\n        if (!minHeight || minHeight === '0px') minHeight = '44px';\n\n        return minRows * parseInt(minHeight);\n    }\n\n    get selectedDisplay() {\n        if (this.prioritizeSearch || this.searchText) return this.searchText;\n        if (this.hasCustomDisplay) return '';\n        return this.multiple ? this.calculateMultiSelectSelectedDisplay() : this.calculateSingleSelectSelectedDisplay();\n    }\n\n    get selectedDisplaySlot() {\n        return this.hostElement.querySelector<HTMLElement>('[slot=\"_selected-display\"]');\n    }\n\n    get firstSelectedValue() {\n        return this.multiple ? this.selectedOptions?.[0] : this.value;\n    }\n\n    get firstSelectedOptionElement() {\n        const { firstSelectedValue } = this;\n        return firstSelectedValue ? this.optionElements.find(({ value }) => value === firstSelectedValue) : null;\n    }\n\n    get optionElements() {\n        return Array.from(this.hostElement.querySelectorAll<HTMLQ2OptionElement>('q2-option'));\n    }\n\n    get wrapperClasses() {\n        const { errors } = this;\n        const classes = ['q2-select-container'];\n        if (Array.isArray(errors) && errors.length > 0) classes.push('has-error');\n        if (this.inputFocused) classes.push('is-focused');\n        if (this.searchable) classes.push('is-searchable');\n        return classes.join(' ');\n    }\n\n    /// Watchers ///\n    @Watch('value')\n    @Watch('selectedOptions')\n    buildStructuredSelectedOptions() {\n        const { multiple, selectedOptions, value } = this;\n        if (multiple) {\n            this.structuredSelectedOptions = !!selectedOptions?.length\n                ? selectedOptions.map(option => (typeof option === 'string' ? { value: option } : option))\n                : [];\n        } else {\n            this.structuredSelectedOptions = value ? [{ value }] : [];\n        }\n    }\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    @Watch('value')\n    valueUpdated() {\n        if (this.multiple) return;\n        this.clearSearchText();\n    }\n\n    @Watch('multilineOptions')\n    handleMultilineOptionsUpdate(newValue, oldValue) {\n        if (newValue === oldValue) return;\n        this.optionElements.forEach(element => (element.multiline = newValue));\n    }\n\n    @Watch('open')\n    openChanged(isOpen: boolean) {\n        this.scheduledAfterRender.push(() => {\n            const { popoverTopContainer, popoverElement } = this;\n            const height = (isOpen && popoverTopContainer?.offsetHeight) || 0;\n            if (height) {\n                popoverElement.style.setProperty('--comp-popover-top-container-height', `${height}px`);\n            } else {\n                popoverElement.style.removeProperty('--comp-popover-top-container-height');\n            }\n        });\n    }\n\n    /// Events ///\n    @Event() change: EventEmitter<{ value: string; selectedOptions: string[] }>;\n    @Event() input: EventEmitter;\n\n    /// Methods ///\n    _togglePopover() {\n        const { innerInputField } = this;\n        innerInputField?.click();\n        innerInputField?.focus();\n        innerInputField.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    /**\n     * Emulates clicking the `<input>` to display the popover if it is hidden.\n     *\n     * @testOnly\n     */\n    @Method()\n    async openPopover() {\n        if (this.open || this.disabled) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates clicking the `<input>` to hide the popover if it is visible.\n     *\n     * @testOnly\n     */\n    @Method()\n    async closePopover() {\n        if (!this.open || this.disabled) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates clicking the `<input>` to display the popover and selecting the option(s) with the specified value(s).\n     *\n     * If the multi-select is enabled and the `closePopover` argument is `true` (default), the popover will be closed\n     * after the option(s) are selected.\n     *\n     * @testOnly\n     */\n    @Method()\n    async setValue(values: string | string[], options: { closePopover?: boolean } = { closePopover: true }) {\n        const valuesSet = new Set(Array.isArray(values) ? values : [values]);\n        if (!this.open) {\n            await this.openPopover();\n            await waitForNextPaint();\n        }\n\n        valuesSet.forEach(value => {\n            this.optionElements.find(option => option.value === value)?.click();\n        });\n\n        if (options.closePopover) {\n            await this.closePopover();\n            await waitForNextPaint();\n        }\n    }\n\n    /**\n     * Emulates focusing the `<input>`, entering the provided value, and emitting an `input` event.\n     *\n     * @warning\n     * Only applicable when the input is searchable.\n     *\n     * @testOnly\n     */\n    @Method()\n    searchOptions(query: string) {\n        if (!this.searchable) return;\n\n        const { innerInputField } = this;\n        innerInputField.focus();\n        innerInputField.dispatchEvent(new FocusEvent('focus'));\n        innerInputField.value = query;\n        innerInputField.dispatchEvent(new InputEvent('input'));\n    }\n\n    /// Listeners ///\n    @Listen('keydown')\n    keydownHandler(event: KeyboardEvent) {\n        this.inputKeydownHandler(event);\n    }\n\n    @Listen('change')\n    onHostElementChange(event: CustomEvent<{ value: string; selectedOptions: string[] }>) {\n        if (this.readonly || this.disabled) return;\n        if (event.target !== this.hostElement || this.hostElement.onchange) return;\n        if (this.multiple) {\n            this.value = null;\n            this.selectedOptions = event.detail.selectedOptions;\n        } else {\n            this.value = event.detail.value;\n            this.selectedOptions = [];\n        }\n    }\n\n    @Listen('input')\n    onHostElementInput(event: CustomEvent) {\n        if (!this.searchable || event.target !== this.hostElement || this.hostElement.oninput) return;\n        const options = this.optionElements;\n        const query = this.searchText.trim().toLocaleLowerCase();\n        let matchedCount = 0;\n        options.forEach(option => {\n            if (query === '') {\n                option.hidden = false;\n                return;\n            }\n\n            const title =\n                option.firstElementChild?.tagName === 'Q2-CARD'\n                    ? (option.firstElementChild as HTMLQ2CardElement).title\n                    : null;\n            const { display = '', innerText = '' } = option;\n            const searchParams = [display, title, innerText];\n            const matched = searchParams.some(text => text?.toLocaleLowerCase().includes(query) ?? false);\n\n            option.hidden = !matched;\n            if (matched) matchedCount++;\n        });\n\n        const statusMessageLocString = query\n            ? 'tecton.element.select.searchable.results'\n            : 'tecton.element.select.allOptions';\n        const count = query ? matchedCount : options.length;\n        this.setStatusMessage(loc(statusMessageLocString, [count]));\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        const fromHost = isRelatedTargetWithinHost(event, this.hostElement);\n        const prioritizeSearch = (this.prioritizeSearch = fromHost && this.searchable);\n        if (prioritizeSearch) {\n            this.clearSelectedDisplay();\n        } else if (isEventFromElement(event, this.hostElement)) {\n            this.inputField.shadowRoot.querySelector<HTMLElement>('.input-field').focus();\n        }\n    }\n\n    @Listen('focusout')\n    handleFocusout(event: FocusEvent) {\n        const isLeavingHost = isHostLosingFocus(event, this.hostElement);\n        if (isLeavingHost) this.closeDropdown();\n        this.prioritizeSearch = !isLeavingHost && this.searchable;\n    }\n\n    @Listen('displayChanged')\n    handleSelectedDisplay(event: CustomEvent) {\n        if (this.multiple) return;\n        this.inputField.value = event.detail.display;\n    }\n\n    /// Helpers ///\n    async executeActionSheet(event: MouseEvent | KeyboardEvent) {\n        const result = await showActionSheetList(this, event);\n        this.handleSelectionChanges(result);\n    }\n\n    handleSelectionChanges(changeDetails: { value?: string; values?: IOptionValue[] }) {\n        const { value = '', values = [] } = changeDetails;\n        const selectedOptionValues = values.map(value => value.value);\n        const { multiple } = this;\n        if (!this.hostElement.onchange) {\n            this.selectedOptions = selectedOptionValues;\n        }\n\n        this.change.emit({\n            value: multiple ? undefined : value,\n            selectedOptions: multiple ? selectedOptionValues : undefined,\n        });\n    }\n\n    showSelectedOptions = () => {\n        this.showSelected = true;\n    };\n\n    showAllOptions = () => {\n        this.showSelected = false;\n    };\n\n    clearValue() {\n        const { multiple } = this;\n        this.value = '';\n        this.selectedOptions = [];\n        this.change.emit({ value: multiple ? undefined : '', selectedOptions: multiple ? [] : undefined });\n    }\n\n    calculateMultiSelectSelectedDisplay() {\n        const { firstSelectedOptionElement, firstSelectedValue, multilineOptions } = this;\n        if (!firstSelectedValue) return '';\n        if (firstSelectedOptionElement?.display) return loc(firstSelectedOptionElement.display);\n        if (multilineOptions && this.searchable) return this.searchText;\n        if (multilineOptions) return '';\n        return (\n            firstSelectedOptionElement?.textContent?.trim() ?? firstSelectedOptionElement?.value ?? firstSelectedValue\n        );\n    }\n\n    calculateSingleSelectSelectedDisplay() {\n        const { firstSelectedOptionElement, multilineOptions } = this;\n        if (multilineOptions) {\n            return (firstSelectedOptionElement?.display && loc(firstSelectedOptionElement.display)) || this.value || '';\n        } else {\n            return (\n                (firstSelectedOptionElement?.display && loc(firstSelectedOptionElement.display)) ||\n                firstSelectedOptionElement?.textContent?.trim() ||\n                this.value ||\n                ''\n            );\n        }\n    }\n\n    onMutationObserved = () => {\n        const { hostElement, hasPopoverTop, hasPopoverBottom } = this;\n        const slotContainer = hostElement.querySelector('.custom-display-content');\n        const displaySlot = hostElement.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"q2-select-display\"]');\n        const hasCustomDisplay = !!displaySlot\n            ? displaySlot.assignedNodes().length > 0\n            : slotContainer.children.length > 0;\n\n        if (this.hasCustomDisplay !== hasCustomDisplay) {\n            this.hasCustomDisplay = hasCustomDisplay;\n        }\n\n        const popTopSlot = hostElement.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"popover-top\"]');\n        const topSlotHasNode = popTopSlot.assignedNodes().length > 0;\n        if (hasPopoverTop !== topSlotHasNode) {\n            this.hasPopoverTop = topSlotHasNode;\n        }\n\n        const popBottomSlot = hostElement.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"popover-bottom\"]');\n        const bottomSlotHasNode = popBottomSlot.assignedNodes().length > 0;\n        if (hasPopoverBottom !== bottomSlotHasNode) {\n            this.hasPopoverBottom = bottomSlotHasNode;\n        }\n\n        this.checkSelectedOptions();\n    };\n\n    onOptionListChange = (event: Q2OptionListCustomEvent<{ value: string; values: IOptionValue[] }>) => {\n        event.stopPropagation();\n        const { values } = event.detail;\n\n        if (values.length === 0) this.showAllOptions();\n        this.handleSelectionChanges(event.detail);\n    };\n\n    openDropdownWithoutActiveElement() {\n        if (this.readonly || this.disabled) return;\n        this.optionList.setActiveElement(null);\n        this.open = true;\n    }\n\n    closeDropdown() {\n        this.open = false;\n        this.clearSearchText();\n    }\n\n    clearSearchText() {\n        if (!this.searchText) return;\n        this.searchText = '';\n        this.input.emit({ query: '' });\n    }\n\n    toggleDropdown() {\n        if (this.readonly || this.disabled) return;\n\n        if (this.open && !this.searchText) {\n            this.closeDropdown();\n        } else {\n            this.openDropdownWithoutActiveElement();\n        }\n    }\n\n    focusInput() {\n        this.inputField?.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    statusMessageTimer: NodeJS.Timeout;\n    setStatusMessage(message) {\n        clearTimeout(this.statusMessageTimer);\n        this.statusMessage = '';\n        this.statusMessageTimer = setTimeout(() => {\n            this.statusMessage = message;\n        }, 1000);\n    }\n\n    checkSelectedOptions() {\n        const { multiple, selectedOptions, value } = this;\n        this.optionElements.forEach(option => {\n            if (multiple) {\n                option.selected = selectedOptions.includes(option.value);\n            } else {\n                option.selected = option.value === value;\n            }\n        });\n    }\n\n    clearSelectedDisplay() {\n        this.selectedDisplaySlot?.remove();\n    }\n\n    checkSelectedDisplay() {\n        let namedSlot = this.selectedDisplaySlot;\n        const { value, multiple, selectedOptions, multilineOptions, firstSelectedOptionElement, prioritizeSearch } =\n            this;\n        const hasNoValue = !value && multiple && !selectedOptions?.length;\n        if (prioritizeSearch || !multilineOptions || hasNoValue) return this.clearSelectedDisplay();\n\n        if (!firstSelectedOptionElement || firstSelectedOptionElement.display) return this.clearSelectedDisplay();\n\n        // Clone selected option and remove elements with hide-on-select attribute\n        const selectionClone = firstSelectedOptionElement.firstElementChild.cloneNode(true) as HTMLElement;\n        selectionClone.querySelectorAll('[hide-on-select]').forEach(element => element.remove());\n\n        if (namedSlot) {\n            const height = namedSlot.clientHeight === 0 ? 'auto' : `${namedSlot.clientHeight}px`;\n            namedSlot.style.setProperty('--comp-selected-display-height', height);\n            if (namedSlot.firstElementChild.outerHTML !== selectionClone.outerHTML) {\n                namedSlot.replaceChild(selectionClone, namedSlot.firstElementChild);\n            }\n        } else {\n            namedSlot = document.createElement('div');\n            namedSlot.slot = '_selected-display';\n            namedSlot.appendChild(selectionClone);\n            this.hostElement.appendChild(namedSlot);\n        }\n        return namedSlot;\n    }\n\n    checkSelectedDisplayHeight() {\n        const { selectedDisplaySlot } = this;\n        if (!selectedDisplaySlot) return;\n        selectedDisplaySlot.style.setProperty('--comp-selected-display-height', '44px');\n    }\n\n    /// Event handlers ///\n    onPopoverState = ({\n        detail: { open, action },\n    }: CustomEvent<{ open: boolean; action: 'close' | 'select' | 'open' }>) => {\n        if (!open || this.searchText) {\n            if (action !== 'select') {\n                this.optionList.setActiveElement(null);\n            }\n            this.inputField.focus();\n        }\n\n        if (this.open === open) return;\n        this.open = open;\n    };\n\n    inputKeydownHandler = (event: KeyboardEvent) => {\n        if (this.readonly || this.disabled) return;\n        const key = event.key;\n        const hasSlot = this.hasPopoverTop || this.hasPopoverBottom;\n        const isShiftTab = key === 'Tab' && event.shiftKey;\n        if (hasSlot && (key === 'Tab' || key === 'Enter' || isShiftTab)) return;\n        if (shouldShowActionSheet(this, event)) {\n            return this.executeActionSheet(event);\n        }\n\n        const keysForOptionListToHandle = [\n            'ArrowDown',\n            'ArrowUp',\n            'PageDown',\n            'PageUp',\n            'Home',\n            'End',\n            'Escape',\n            'Tab',\n        ];\n        if (this.searchable && !keysForOptionListToHandle.includes(key)) return;\n        if (this.shouldClearSearchText(event)) this.clearSearchText();\n\n        // Prevent click event from firing when spacebar is pressed\n        if (key === ' ') event.preventDefault();\n\n        this.optionList.handleExternalKeydown(event);\n    };\n\n    shouldClearSearchText(event: KeyboardEvent) {\n        return this.searchable && !!this.searchText && event.key === 'Escape';\n    }\n\n    visibilityToggleKeyDown = (event: KeyboardEvent) => {\n        const key = event.key;\n        const isShiftTab = key === 'Tab' && event.shiftKey;\n        const isRadioControlKey = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(key);\n        if (isRadioControlKey) event.stopPropagation();\n        if (isShiftTab) {\n            event.stopPropagation();\n            // allows shift+tab keys to select the top slot when present\n            if (this.hasPopoverTop) return;\n\n            this.optionList.setDefaultActiveElement();\n        }\n    };\n\n    inputClickHandler = async (event: MouseEvent) => {\n        event.stopPropagation();\n        if (shouldShowActionSheet(this)) {\n            return this.executeActionSheet(event);\n        }\n        this.toggleDropdown();\n        this.focusInput();\n    };\n\n    inputInputHandler = (event: Q2InputCustomEvent<IEventDetail> & InputEvent) => {\n        event.stopPropagation();\n        const eventValue = event.detail.value;\n        const shouldClearValue = !!this.value;\n\n        if (shouldClearValue) this.clearValue();\n        if (!this.open) this.openDropdownWithoutActiveElement();\n\n        this.prioritizeSearch = true;\n        this.searchText = eventValue;\n        this.input.emit({ query: eventValue });\n    };\n\n    inputFocusHandler = () => {\n        this.inputFocused = true;\n    };\n\n    inputBlurHandler = () => {\n        this.inputFocused = false;\n    };\n\n    inputChangeHandler = (event: Event) => {\n        event.stopPropagation();\n    };\n\n    clickedElsewhere = (event: CustomEvent) => {\n        const target = event.target as HTMLClickElsewhereElement;\n        if (target.localName !== 'click-elsewhere') return;\n        event.stopPropagation();\n        if (!this.open) return;\n        this.closeDropdown();\n    };\n\n    onCustomDisplayClick = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.focusInput();\n        this.toggleDropdown();\n    };\n\n    /// DOM ///\n    renderCustomDisplay() {\n        const hasSelectedDisplay = this.checkSelectedDisplay();\n        if (!hasSelectedDisplay) return;\n        this.checkSelectedDisplayHeight();\n\n        return (\n            <slot\n                name=\"_selected-display\"\n                slot=\"custom-display\"\n            />\n        );\n    }\n\n    render() {\n        const showAsPseudo = !this.searchable;\n\n        return (\n            <click-elsewhere\n                class={this.wrapperClasses}\n                onChange={this.clickedElsewhere}\n            >\n                <div\n                    aria-live=\"polite\"\n                    aria-atomic=\"true\"\n                    role=\"status\"\n                    class=\"sr\"\n                >\n                    {this.statusMessage}\n                </div>\n                <q2-input\n                    ref={el => (this.inputField = el)}\n                    class=\"q2-select-input\"\n                    label={(this.label && loc(this.label)) || ''}\n                    value={this.selectedDisplay}\n                    errors={\n                        (Array.isArray(this.errors) &&\n                            this.errors.length > 0 &&\n                            this.errors.map(error => loc(error))) ||\n                        (this.invalid && ['tecton.element.select.invalid']) ||\n                        []\n                    }\n                    disabled={this.disabled}\n                    optional={this.optional}\n                    readonly={this.readonly}\n                    placeholder={this.placeholder || undefined}\n                    hideLabel={this.hideLabel}\n                    ariaExpanded={`${this.open}`}\n                    ariaControls=\"option-list\"\n                    ariaHaspopup=\"listbox\"\n                    role=\"combobox\"\n                    pseudo={showAsPseudo}\n                    test-id=\"toggleDropdown\"\n                    hide-messages\n                    iconRight=\"chevron-down\"\n                    onClick={this.inputClickHandler}\n                    onInput={this.inputInputHandler}\n                    onKeyDown={this.inputKeydownHandler}\n                    onFocus={this.inputFocusHandler}\n                    onBlur={this.inputBlurHandler}\n                    onChange={this.inputChangeHandler}\n                    badgeValue={this.badgeValue}\n                    badgeTheme={this.inputFocused ? 'primary' : undefined}\n                >\n                    {this.renderCustomDisplay()}\n                </q2-input>\n                <div\n                    class=\"custom-display-content\"\n                    hidden={!this.hasCustomDisplay || !!this.searchText}\n                    onClick={this.onCustomDisplayClick}\n                >\n                    <slot name=\"q2-select-display\" />\n                </div>\n                {this.optionsDropdown()}\n            </click-elsewhere>\n        );\n    }\n\n    optionsDropdown() {\n        return (\n            <q2-popover\n                ref={el => (this.popoverElement = el)}\n                controlElement={this.innerInputContainer}\n                open={this.open}\n                minHeight={this.popoverMinHeight}\n                direction={this.popDirection}\n                block\n            >\n                <div class=\"popover-content\">\n                    <q2-option-list\n                        onPopoverState={this.onPopoverState}\n                        ref={el => (this.optionList = el)}\n                        type=\"listbox\"\n                        id=\"option-list\"\n                        show-selected={this.showSelected}\n                        label={this.listLabel}\n                        multiple={this.multiple}\n                        selectedOptions={this.structuredSelectedOptions}\n                        onChange={this.onOptionListChange}\n                    >\n                        <slot />\n                    </q2-option-list>\n                    <div\n                        class=\"popover-top-container\"\n                        ref={el => (this.popoverTopContainer = el)}\n                        hidden={!this.multiple && !this.hasPopoverTop}\n                        tabindex=\"-1\"\n                    >\n                        <slot name=\"popover-top\"></slot>\n                        {this.multiple && this.visibilityToggle()}\n                    </div>\n                </div>\n                <div\n                    class=\"popover-bottom-container\"\n                    hidden={!this.hasPopoverBottom}\n                    tabindex=\"-1\"\n                >\n                    <slot name=\"popover-bottom\" />\n                </div>\n            </q2-popover>\n        );\n    }\n\n    visibilityToggle() {\n        const selectedOptionsCount = this.selectedOptions?.length ?? 0;\n        const { showSelected } = this;\n        return (\n            <div class=\"multi-select-header\">\n                <fieldset>\n                    <legend aria-label={loc('tecton.element.select.multiHeader.showing')}>\n                        {loc('tecton.element.select.multiHeader.showing')}\n                    </legend>\n                    <div>\n                        <input\n                            class=\"sr\"\n                            type=\"radio\"\n                            id=\"all\"\n                            name=\"viewDisplay\"\n                            value=\"all\"\n                            checked={!showSelected}\n                            aria-label={loc('tecton.element.select.multiHeader.allAriaLabel')}\n                            test-id=\"allOptionsButton\"\n                            onClick={this.showAllOptions}\n                            onKeyDown={this.visibilityToggleKeyDown}\n                        />\n                        <label htmlFor=\"all\">{loc('tecton.element.select.multiHeader.all')}</label>\n                    </div>\n\n                    <div>\n                        <input\n                            class=\"sr\"\n                            type=\"radio\"\n                            id=\"selected\"\n                            disabled={selectedOptionsCount === 0}\n                            name=\"viewDisplay\"\n                            value=\"selected\"\n                            aria-label={loc('tecton.element.select.multiHeader.selectedAriaLabel', [\n                                selectedOptionsCount,\n                            ])}\n                            checked={showSelected}\n                            test-id=\"selectedOptionsButton\"\n                            onClick={this.showSelectedOptions}\n                            onKeyDown={this.visibilityToggleKeyDown}\n                        />\n                        <label htmlFor=\"selected\">\n                            {loc('tecton.element.select.multiHeader.selected', [selectedOptionsCount])}\n                        </label>\n                    </div>\n                </fieldset>\n            </div>\n        );\n    }\n}\n"],"mappings":"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"}

package/dist/q2-tecton-elements/p-5c033ed9.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as i,h as e,F as o,g as a}from"./p-277dc8cd.js";import{l as s,w as r}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}@keyframes showBackdrop{from{opacity:0}}@keyframes hideBackdrop{to{opacity:0}}dialog{--comp-border-radius-default:var(--app-scale-3x, 15px) var(--app-scale-3x, 15px) 0 0;--comp-border-radius:var(--tct-action-sheet-border-radius, var(--comp-border-radius-default));--comp-desktop-border-radius:var(--tct-action-sheet-border-radius, var(--app-scale-3x, 15px));--comp-close-button-size:var(--tct-action-sheet-close-button-size, var(--t-a11y-min-size, 44px));--comp-header-height:var(--tct-action-sheet-header-height, var(--t-a11y-min-size, 44px));--comp-dialog-background:var(--tct-action-sheet-background, var(--t-base, #ffffff));--comp-dialog-color:var(--tct-action-sheet-color, var(--t-text, #4d4d4d));--comp-dialog-padding:var(--tct-action-sheet-padding, var(--app-scale-3x, 15px));--comp-content-gradient-height:var(--tct-action-sheet-content-gradient-height, var(--app-scale-2x, 10px));--comp-dialog-gap:var(--tct-action-sheet-gap, var(--app-scale-2x, 10px));--comp-dialog-max-width:var(--tct-action-sheet-max-width, 400px);--comp-dialog-max-height:var(--tct-action-sheet-max-height, var(--comp-action-sheet-computed-max-height, 75vh));--comp-dialog-min-height:var(--tct-action-sheet-min-height, var(--comp-action-sheet-computed-min-height, 20vh));--comp-dialog-box-shadow:var(--tct-action-sheet-box-shadow, var(--app-shadow-2, 0 3px 6px rgba(0, 0, 0, 0.3)));position:fixed;top:100%;bottom:unset;color:var(--comp-dialog-color);background:var(--comp-dialog-background);transition:transform var(--tct-action-sheet-tween, var(--app-tween-2, 0.4s ease)), opacity var(--tct-action-sheet-tween, var(--app-tween-2, 0.4s ease));width:100%;max-width:var(--comp-dialog-max-width);border:0;border-radius:var(--comp-border-radius);box-shadow:var(--comp-dialog-box-shadow);padding:0;height:auto;overflow:hidden;min-height:var(--comp-dialog-min-height);max-height:var(--comp-dialog-max-height)}dialog::backdrop{opacity:0;background:var(--tct-action-sheet-backdrop-background, var(--t-top-a2, rgba(13, 13, 13, 0.6)))}dialog[open].is-opening,dialog[open].is-open{transform:translateY(-100%)}@media screen and (min-width: 1200px){dialog[open].is-opening,dialog[open].is-open{opacity:1;transform:translateY(0)}}dialog[open].is-opening::backdrop,dialog[open].is-open::backdrop{opacity:1;animation:showBackdrop var(--tct-action-sheet-tween, var(--app-tween-2, 0.4s ease))}dialog[open].is-closing{transform:translateY(10%)}dialog[open].is-closing::backdrop{animation:hideBackdrop var(--tct-action-sheet-tween, var(--app-tween-2, 0.4s ease))}@media screen and (min-width: 1200px){dialog{border-radius:var(--comp-desktop-border-radius);top:0px;bottom:0px;height:fit-content;transform:translateY(10%);opacity:0}}.content{overflow-y:auto;--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 3px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.content::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.content::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.content::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.interior{display:grid;grid-template-rows:44px 1fr auto;gap:var(--comp-dialog-gap);max-height:calc(var(--comp-dialog-max-height) - var(--comp-dialog-padding));padding:var(--comp-dialog-padding)}.interior.is-list header,.interior.is-list footer{position:relative}.interior.is-list header:before,.interior.is-list footer:before{content:"";display:block;position:absolute;left:0;height:var(--comp-content-gradient-height);width:100%;z-index:1}header{display:grid;grid-template-columns:var(--comp-close-button-size) 1fr var(--comp-close-button-size);grid-template-areas:". title close";gap:var(--comp-dialog-gap)}header .title{grid-area:title;text-align:center;line-height:var(--comp-header-height)}header .btn-close{grid-area:close;width:var(--comp-close-button-size);height:var(--comp-close-button-size)}footer{display:flex;justify-content:end}';var c=undefined&&undefined.__rest||function(t,i){var e={};for(var o in t)if(Object.prototype.hasOwnProperty.call(t,o)&&i.indexOf(o)<0)e[o]=t[o];if(t!=null&&typeof Object.getOwnPropertySymbols==="function")for(var a=0,o=Object.getOwnPropertySymbols(t);a<o.length;a++){if(i.indexOf(o[a])<0&&Object.prototype.propertyIsEnumerable.call(t,o[a]))e[o[a]]=t[o[a]]}return e};const l=class{constructor(a){t(this,a);this.close=i(this,"close",7);this.ready=i(this,"ready",3);this.initialSelectedOptions=[];this.selectedOptions={values:[],value:""};this.minHeight=.2;this.maxHeight=.75;this.generateOption=t=>{const i=document.createElement("q2-option");const e=c(t,["innerHTML"]);if(t.innerHTML)i.innerHTML=t.innerHTML;Object.entries(e).forEach((([t,e])=>{if(e===undefined)return;if(typeof e==="boolean"){if(e)i.setAttribute(t,"")}else{i.setAttribute(t,e)}}));return i};this.generateOptgroup=t=>{const i=document.createElement("q2-optgroup");if(t.label)i.setAttribute("label",t.label);if(t.disabled)i.setAttribute("disabled","");if(!!t.options.length)t.options.forEach((t=>i.appendChild(this.generateOption(t))));return i};this.onClick=t=>{const i=t.target;if(!(i instanceof HTMLElement))return;const e=!!i.closest(".interior, q2-action-sheet");if(e)return;this.onCancel(t)};this.onCancel=t=>{var i,e;t.preventDefault();const{initialSelectedOptions:o}=this;this.hide({value:(e=(i=o===null||o===void 0?void 0:o[0])===null||i===void 0?void 0:i.value)!==null&&e!==void 0?e:"",values:o,type:"cancel"})};this.onListChange=t=>{this.selectedOptions=t.detail};this.onListPopoverStateChange=t=>{if(t.detail.open)return;if(t.detail.action==="close"){this.onCancel(t)}else{this.onListDone()}};this.onListDone=()=>{this.hide(Object.assign(Object.assign({},this.selectedOptions),{type:"confirm"}))};this.renderSlot=()=>e("div",{class:"content",ref:t=>this.contentElement=t},e("slot",null));this.renderMessage=({data:t})=>e("q2-message",{type:t.type},t.title&&e("h2",null,t.title),t.description&&e("p",null,t.description));this.renderList=({data:t})=>{const{listProps:i}=t;return e(o,null,e("div",{class:"content",ref:t=>this.contentElement=t},e("q2-option-list",{ref:t=>this.optionListElement=t,multiple:i.multiple,noSelect:i.noSelect,onChange:this.onListChange,onPopoverState:this.onListPopoverStateChange,selectedOptions:i.selectedOptions},e("slot",null))),e("footer",null,i.multiple&&e("q2-btn",{"test-id":"btnDone",intent:"workflow-primary",onClick:this.onListDone},s("tecton.element.actionSheet.done"))))};this.data=undefined;this.title=undefined;this.hideClose=undefined;this.isScrollable=false;this.renderStatus="is-closing"}componentDidLoad(){this.dialogElement.addEventListener("cancel",this.onCancel);this.ready.emit()}disconnectedCallback(){this.dialogElement.removeEventListener("cancel",this.onCancel)}storeInitialValues(){const{data:t}=this;if(!t)return;if(t.appearance==="list"){this.initialSelectedOptions=t.listProps.selectedOptions}}focusContent(){const{data:t}=this;if(!t)return;if(t.appearance==="list"){const{event:i}=t;if(i instanceof KeyboardEvent){this.optionListElement.handleExternalKeydown(i)}else{this.optionListElement.focus()}}}hidePostHook(){const{data:t}=this;if(!t)return;if(t.appearance==="list"){this.hostElement.innerHTML=null}}showPreHook(){const{data:t}=this;if(!t)return;if(t.appearance==="list"){this.hostElement.innerHTML=null;t.options.forEach((t=>{this.hostElement.appendChild("options"in t?this.generateOptgroup(t):this.generateOption(t))}))}}updateDialogMinMaxHeight(){const t=window.innerHeight;this.dialogElement.style.setProperty("--comp-action-sheet-computed-min-height",`${Math.floor(t*this.minHeight)}px`);this.dialogElement.style.setProperty("--comp-action-sheet-computed-max-height",`${Math.floor(t*this.maxHeight)}px`)}async hide(t={value:"",values:[],type:"confirm"}){this.close.emit(t);this.renderStatus="is-closing";this.dialogElement.addEventListener("transitionend",(()=>{if(this.renderStatus!=="is-closing")return;this.dialogElement.close();this.renderStatus=null;this.data=undefined;this.initialSelectedOptions=[];this.selectedOptions={values:[],value:""};this.hidePostHook()}),{once:true})}async show(){this.showPreHook();await r();this.updateDialogMinMaxHeight();this.storeInitialValues();if(this.dialogElement.open)return;this.dialogElement.showModal();this.renderStatus="is-opening";this.dialogElement.addEventListener("transitionend",(()=>{if(this.renderStatus!=="is-opening")return;this.renderStatus="is-open";this.focusContent()}),{once:true})}render(){var t;const{data:i}=this;const o=(i===null||i===void 0?void 0:i.title)||this.title||!this.hideClose;const a=this.renderStatus||"";let s=null;switch(i===null||i===void 0?void 0:i.appearance){case"message":s=this.renderMessage;break;case"list":s=this.renderList;break;default:s=this.renderSlot;break}const r=(i===null||i===void 0?void 0:i.appearance)||"slot";const n=`interior is-${r}`;return e("dialog",{ref:t=>this.dialogElement=t,class:a,onClick:this.onClick},e("div",{class:n},o&&e("header",null,e("div",{class:"title"},(i===null||i===void 0?void 0:i.title)||this.title),!this.hideClose&&e("q2-btn",{class:"btn-close","test-id":"btnClose",onClick:this.onCancel,label:"tecton.element.actionSheet.close","hide-label":true},e("q2-icon",{type:"close"}))),((t=this.data)===null||t===void 0?void 0:t.description)&&e("p",null,i.description),s&&e(s,{data:this.data})))}get hostElement(){return a(this)}};l.style=n;export{l as q2_action_sheet};
+//# sourceMappingURL=p-5c033ed9.entry.js.map

package/dist/q2-tecton-elements/{p-09d4b3d3.entry.js.map → p-5c033ed9.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["stylesCss","Q2ActionSheet","this","initialSelectedOptions","selectedOptions","values","value","minHeight","maxHeight","generateOption","option","optionElement","document","createElement","attributes","__rest","innerHTML","Object","entries","forEach","key","undefined","setAttribute","generateOptgroup","optgroupElement","label","disabled","options","length","opt","appendChild","onClick","event","eventTarget","target","HTMLElement","isInContent","closest","onCancel","preventDefault","hide","_b","_a","type","onListChange","detail","onListPopoverStateChange","open","action","onListDone","assign","renderSlot","h","class","ref","el","contentElement","renderMessage","data","title","description","renderList","listProps","Fragment","optionListElement","multiple","noSelect","onChange","onPopoverState","intent","loc","componentDidLoad","dialogElement","addEventListener","ready","emit","disconnectedCallback","removeEventListener","storeInitialValues","appearance","focusContent","KeyboardEvent","handleExternalKeydown","focus","hidePostHook","hostElement","showPreHook","updateDialogMinMaxHeight","windowHeight","window","innerHeight","style","setProperty","Math","floor","async","close","renderStatus","once","waitForNextPaint","showModal","render","showHeader","hideClose","RenderContent","interiorClasses"],"sources":["./src/components/q2-action-sheet/styles.scss?tag=q2-action-sheet&encapsulation=shadow","./src/components/q2-action-sheet/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n@keyframes showBackdrop {\n    from {\n        opacity: 0;\n    }\n}\n\n@keyframes hideBackdrop {\n    to {\n        opacity: 0;\n    }\n}\n\n// CSS variables don't inherit into the ::backdrop pseudo-element\n$animation-tween: #{var-list(--tct-action-sheet-tween, --app-tween-2, unquote('0.4s ease'))};\n\ndialog {\n    --comp-border-radius-default: var(--app-scale-3x, 15px) var(--app-scale-3x, 15px) 0 0;\n    --comp-border-radius: #{var-list(--tct-action-sheet-border-radius, --comp-border-radius-default)};\n    --comp-desktop-border-radius: #{var-list(--tct-action-sheet-border-radius, --app-scale-3x, 15px)};\n    --comp-close-button-size: #{var-list(--tct-action-sheet-close-button-size, --t-a11y-min-size, 44px)};\n    --comp-header-height: #{var-list(--tct-action-sheet-header-height, --t-a11y-min-size, 44px)};\n    --comp-dialog-background: #{var-list(--tct-action-sheet-background, --t-base, #ffffff)};\n    --comp-dialog-color: #{var-list(--tct-action-sheet-color, --t-text, #4d4d4d)};\n    --comp-dialog-padding: #{var-list(--tct-action-sheet-padding, --app-scale-3x, 15px)};\n    --comp-content-gradient-height: #{var-list(--tct-action-sheet-content-gradient-height, --app-scale-2x, 10px)};\n    --comp-dialog-gap: #{var-list(--tct-action-sheet-gap, --app-scale-2x, 10px)};\n    --comp-dialog-max-width: #{var-list(--tct-action-sheet-max-width, 400px)};\n    --comp-dialog-max-height: #{var-list(--tct-action-sheet-max-height, --comp-action-sheet-computed-max-height, 75vh)};\n    --comp-dialog-min-height: #{var-list(--tct-action-sheet-min-height, --comp-action-sheet-computed-min-height, 20vh)};\n    --comp-dialog-box-shadow: #{var-list(\n            --tct-action-sheet-box-shadow,\n            --app-shadow-2,\n            unquote('0 3px 6px rgba(0, 0, 0, 0.3)')\n        )};\n\n    position: fixed;\n    top: 100%;\n    bottom: unset;\n    color: var(--comp-dialog-color);\n    background: var(--comp-dialog-background);\n    transition: transform $animation-tween, opacity $animation-tween;\n    width: 100%;\n    max-width: var(--comp-dialog-max-width);\n    border: 0;\n    border-radius: var(--comp-border-radius);\n    box-shadow: var(--comp-dialog-box-shadow);\n    padding: 0;\n    height: auto;\n    overflow: hidden;\n    min-height: var(--comp-dialog-min-height);\n    max-height: var(--comp-dialog-max-height);\n\n    &::backdrop {\n        opacity: 0;\n        background: var-list(--tct-action-sheet-backdrop-background, --t-top-a2, rgba(13, 13, 13, 0.6));\n    }\n\n    &[open] {\n        &.is-opening,\n        &.is-open {\n            transform: translateY(-100%);\n\n            @media screen and (min-width: 1200px) {\n                opacity: 1;\n                transform: translateY(0);\n            }\n\n            &::backdrop {\n                opacity: 1;\n                animation: showBackdrop $animation-tween;\n            }\n        }\n\n        &.is-closing {\n            transform: translateY(10%);\n\n            &::backdrop {\n                animation: hideBackdrop $animation-tween;\n            }\n        }\n    }\n\n    @media screen and (min-width: 1200px) {\n        border-radius: var(--comp-desktop-border-radius);\n        top: 0px;\n        bottom: 0px;\n        height: fit-content;\n        transform: translateY(10%);\n        opacity: 0;\n    }\n}\n\n.content {\n    overflow-y: auto;\n    @include tiny-scrollbar();\n}\n\n.interior {\n    display: grid;\n    grid-template-rows: 44px 1fr auto;\n    gap: var(--comp-dialog-gap);\n    max-height: calc(var(--comp-dialog-max-height) - var(--comp-dialog-padding));\n    padding: var(--comp-dialog-padding);\n\n    // Scroll overlays\n    &.is-list {\n        header,\n        footer {\n            position: relative;\n\n            &:before {\n                content: '';\n                display: block;\n                position: absolute;\n                left: 0;\n                height: var(--comp-content-gradient-height);\n                width: 100%;\n                z-index: 1;\n            }\n        }\n    }\n}\n\nheader {\n    display: grid;\n    grid-template-columns: var(--comp-close-button-size) 1fr var(--comp-close-button-size);\n    grid-template-areas: '. title close';\n    gap: var(--comp-dialog-gap);\n\n    .title {\n        grid-area: title;\n        text-align: center;\n        line-height: var(--comp-header-height);\n    }\n\n    .btn-close {\n        grid-area: close;\n        width: var(--comp-close-button-size);\n        height: var(--comp-close-button-size);\n    }\n}\n\nfooter {\n    display: flex;\n    justify-content: end;\n}\n","import {\n    Component,\n    ComponentInterface,\n    Prop,\n    Method,\n    h,\n    State,\n    Event,\n    EventEmitter,\n    Fragment,\n    Element,\n} from '@stencil/core';\nimport { Q2OptionListCustomEvent } from 'src/components';\nimport {\n    ActionSheetListCloseData,\n    ActionSheetData,\n    ActionSheetListData,\n    ActionSheetMessageData,\n    ActionSheetSelectedOption,\n    ActionSheetListOption,\n    ActionSheetListOptgroup,\n} from 'q2-tecton-common/lib/utility/action-sheet';\nimport { loc, waitForNextPaint } from 'src/utils';\n\n@Component({\n    tag: 'q2-action-sheet',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2ActionSheet implements ComponentInterface {\n    @Prop({ mutable: true }) data: ActionSheetData;\n    @Prop() title: string;\n    @Prop() hideClose: boolean;\n\n    @State() isScrollable: boolean = false;\n    @State() renderStatus: 'is-open' | 'is-closing' | 'is-opening' = 'is-closing';\n    dialogElement: HTMLDialogElement;\n    contentElement: HTMLDivElement;\n    optionListElement: HTMLQ2OptionListElement;\n    initialSelectedOptions: ActionSheetSelectedOption[] = [];\n    selectedOptions: { values: ActionSheetSelectedOption[]; value: string } = { values: [], value: '' };\n    minHeight: number = 0.2;\n    maxHeight: number = 0.75;\n\n    @Element() hostElement: HTMLElement;\n\n    /// LifeCycle Hooks ///\n    componentDidLoad() {\n        this.dialogElement.addEventListener('cancel', this.onCancel);\n        this.ready.emit();\n    }\n\n    disconnectedCallback() {\n        this.dialogElement.removeEventListener('cancel', this.onCancel);\n    }\n\n    /// Helpers ///\n    storeInitialValues() {\n        const { data } = this;\n        if (!data) return;\n        if (data.appearance === 'list') {\n            this.initialSelectedOptions = data.listProps.selectedOptions;\n        }\n    }\n\n    focusContent() {\n        const { data } = this;\n        if (!data) return;\n        if (data.appearance === 'list') {\n            const { event } = data;\n            if (event instanceof KeyboardEvent) {\n                this.optionListElement.handleExternalKeydown(event);\n            } else {\n                this.optionListElement.focus();\n            }\n        }\n    }\n\n    generateOption = (option: ActionSheetListOption) => {\n        const optionElement = document.createElement('q2-option');\n        const { innerHTML, ...attributes } = option;\n        if (option.innerHTML) optionElement.innerHTML = option.innerHTML;\n        Object.entries(attributes).forEach(([key, value]) => {\n            if (value === undefined) return;\n            if (typeof value === 'boolean') {\n                if (value) optionElement.setAttribute(key, '');\n            } else {\n                optionElement.setAttribute(key, value);\n            }\n        });\n        return optionElement;\n    };\n\n    generateOptgroup = (option: ActionSheetListOptgroup) => {\n        const optgroupElement = document.createElement('q2-optgroup');\n        if (option.label) optgroupElement.setAttribute('label', option.label);\n        if (option.disabled) optgroupElement.setAttribute('disabled', '');\n        if (!!option.options.length)\n            option.options.forEach(opt => optgroupElement.appendChild(this.generateOption(opt)));\n        return optgroupElement;\n    };\n\n    hidePostHook() {\n        const { data } = this;\n        if (!data) return;\n        if (data.appearance === 'list') {\n            this.hostElement.innerHTML = null;\n        }\n    }\n\n    showPreHook() {\n        const { data } = this;\n        if (!data) return;\n        if (data.appearance === 'list') {\n            this.hostElement.innerHTML = null;\n            data.options.forEach(option => {\n                this.hostElement.appendChild(\n                    'options' in option ? this.generateOptgroup(option) : this.generateOption(option)\n                );\n            });\n        }\n    }\n\n    updateDialogMinMaxHeight() {\n        const windowHeight = window.innerHeight;\n        this.dialogElement.style.setProperty(\n            '--comp-action-sheet-computed-min-height',\n            `${Math.floor(windowHeight * this.minHeight)}px`\n        );\n        this.dialogElement.style.setProperty(\n            '--comp-action-sheet-computed-max-height',\n            `${Math.floor(windowHeight * this.maxHeight)}px`\n        );\n    }\n\n    /// Event Handlers ///\n    onClick = (event: MouseEvent) => {\n        const eventTarget = event.target as HTMLElement;\n        if (!(eventTarget instanceof HTMLElement)) return;\n\n        const isInContent = !!eventTarget.closest('.interior, q2-action-sheet');\n        if (isInContent) return;\n        this.onCancel(event);\n    };\n\n    onCancel = (event: Event) => {\n        event.preventDefault();\n        const { initialSelectedOptions } = this;\n        this.hide({\n            value: initialSelectedOptions?.[0]?.value ?? '',\n            values: initialSelectedOptions,\n            type: 'cancel',\n        });\n    };\n\n    onListChange = (event: Q2OptionListCustomEvent<{ value: string; values: ActionSheetSelectedOption[] }>) => {\n        this.selectedOptions = event.detail;\n    };\n\n    onListPopoverStateChange = (\n        event: Q2OptionListCustomEvent<{ open: boolean; action: 'close' | 'select' | 'open' }>\n    ) => {\n        if (event.detail.open) return;\n\n        if (event.detail.action === 'close') {\n            this.onCancel(event);\n        } else {\n            this.onListDone();\n        }\n    };\n\n    onListDone = () => {\n        this.hide({\n            ...this.selectedOptions,\n            type: 'confirm',\n        });\n    };\n\n    /// Events ///\n    @Event() close: EventEmitter<ActionSheetListCloseData>;\n    @Event({ bubbles: false }) ready: EventEmitter;\n\n    /// Methods ///\n    @Method()\n    async hide(data: ActionSheetListCloseData = { value: '', values: [], type: 'confirm' }) {\n        this.close.emit(data);\n        this.renderStatus = 'is-closing';\n        this.dialogElement.addEventListener(\n            'transitionend',\n            () => {\n                if (this.renderStatus !== 'is-closing') return;\n                this.dialogElement.close();\n                this.renderStatus = null;\n                this.data = undefined;\n                this.initialSelectedOptions = [];\n                this.selectedOptions = { values: [], value: '' };\n                this.hidePostHook();\n            },\n            { once: true }\n        );\n    }\n\n    @Method()\n    async show() {\n        this.showPreHook();\n        await waitForNextPaint();\n        this.updateDialogMinMaxHeight();\n        this.storeInitialValues();\n\n        if (this.dialogElement.open) return;\n\n        this.dialogElement.showModal();\n        this.renderStatus = 'is-opening';\n        this.dialogElement.addEventListener(\n            'transitionend',\n            () => {\n                if (this.renderStatus !== 'is-opening') return;\n                this.renderStatus = 'is-open';\n                this.focusContent();\n            },\n            { once: true }\n        );\n    }\n\n    /// DOM ///\n    renderSlot = () => {\n        return (\n            <div\n                class=\"content\"\n                ref={el => (this.contentElement = el)}\n            >\n                <slot />\n            </div>\n        );\n    };\n\n    renderMessage = ({ data }: { data: ActionSheetMessageData }) => {\n        return (\n            <q2-message type={data.type}>\n                {data.title && <h2>{data.title}</h2>}\n                {data.description && <p>{data.description}</p>}\n            </q2-message>\n        );\n    };\n\n    renderList = ({ data }: { data: ActionSheetListData }) => {\n        const { listProps } = data;\n\n        return (\n            <Fragment>\n                <div\n                    class=\"content\"\n                    ref={el => (this.contentElement = el)}\n                >\n                    <q2-option-list\n                        ref={el => (this.optionListElement = el)}\n                        multiple={listProps.multiple}\n                        noSelect={listProps.noSelect}\n                        onChange={this.onListChange}\n                        onPopoverState={this.onListPopoverStateChange}\n                        selectedOptions={listProps.selectedOptions}\n                    >\n                        <slot />\n                    </q2-option-list>\n                </div>\n                <footer>\n                    {listProps.multiple && (\n                        <q2-btn\n                            test-id=\"btnDone\"\n                            intent=\"workflow-primary\"\n                            onClick={this.onListDone}\n                        >\n                            {loc('tecton.element.actionSheet.done')}\n                        </q2-btn>\n                    )}\n                </footer>\n            </Fragment>\n        );\n    };\n\n    render() {\n        const { data } = this;\n        const showHeader = data?.title || this.title || !this.hideClose;\n        const renderStatus = this.renderStatus || '';\n\n        let RenderContent = null;\n        switch (data?.appearance) {\n            case 'message':\n                RenderContent = this.renderMessage;\n                break;\n\n            case 'list':\n                RenderContent = this.renderList;\n                break;\n\n            default:\n                RenderContent = this.renderSlot;\n                break;\n        }\n        const appearance = data?.appearance || 'slot';\n        const interiorClasses = `interior is-${appearance}`;\n\n        return (\n            <dialog\n                ref={el => (this.dialogElement = el)}\n                class={renderStatus}\n                onClick={this.onClick}\n            >\n                <div class={interiorClasses}>\n                    {showHeader && (\n                        <header>\n                            <div class=\"title\">{data?.title || this.title}</div>\n                            {!this.hideClose && (\n                                <q2-btn\n                                    class=\"btn-close\"\n                                    test-id=\"btnClose\"\n                                    onClick={this.onCancel}\n                                    label=\"tecton.element.actionSheet.close\"\n                                    hide-label\n                                >\n                                    <q2-icon type=\"close\" />\n                                </q2-btn>\n                            )}\n                        </header>\n                    )}\n                    {this.data?.description && <p>{data.description}</p>}\n                    {RenderContent && <RenderContent data={this.data} />}\n                </div>\n            </dialog>\n        );\n    }\n}\n"],"mappings":"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"}
+{"version":3,"names":["stylesCss","Q2ActionSheet","this","initialSelectedOptions","selectedOptions","values","value","minHeight","maxHeight","generateOption","option","optionElement","document","createElement","attributes","__rest","innerHTML","Object","entries","forEach","key","undefined","setAttribute","generateOptgroup","optgroupElement","label","disabled","options","length","opt","appendChild","onClick","event","eventTarget","target","HTMLElement","isInContent","closest","onCancel","preventDefault","hide","_b","_a","type","onListChange","detail","onListPopoverStateChange","open","action","onListDone","assign","renderSlot","h","class","ref","el","contentElement","renderMessage","data","title","description","renderList","listProps","Fragment","optionListElement","multiple","noSelect","onChange","onPopoverState","intent","loc","componentDidLoad","dialogElement","addEventListener","ready","emit","disconnectedCallback","removeEventListener","storeInitialValues","appearance","focusContent","KeyboardEvent","handleExternalKeydown","focus","hidePostHook","hostElement","showPreHook","updateDialogMinMaxHeight","windowHeight","window","innerHeight","style","setProperty","Math","floor","async","close","renderStatus","once","waitForNextPaint","showModal","render","showHeader","hideClose","RenderContent","interiorClasses"],"sources":["./src/components/q2-action-sheet/styles.scss?tag=q2-action-sheet&encapsulation=shadow","./src/components/q2-action-sheet/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n@keyframes showBackdrop {\n    from {\n        opacity: 0;\n    }\n}\n\n@keyframes hideBackdrop {\n    to {\n        opacity: 0;\n    }\n}\n\n// CSS variables don't inherit into the ::backdrop pseudo-element\n$animation-tween: #{var-list(--tct-action-sheet-tween, --app-tween-2, unquote('0.4s ease'))};\n\ndialog {\n    --comp-border-radius-default: var(--app-scale-3x, 15px) var(--app-scale-3x, 15px) 0 0;\n    --comp-border-radius: #{var-list(--tct-action-sheet-border-radius, --comp-border-radius-default)};\n    --comp-desktop-border-radius: #{var-list(--tct-action-sheet-border-radius, --app-scale-3x, 15px)};\n    --comp-close-button-size: #{var-list(--tct-action-sheet-close-button-size, --t-a11y-min-size, 44px)};\n    --comp-header-height: #{var-list(--tct-action-sheet-header-height, --t-a11y-min-size, 44px)};\n    --comp-dialog-background: #{var-list(--tct-action-sheet-background, --t-base, #ffffff)};\n    --comp-dialog-color: #{var-list(--tct-action-sheet-color, --t-text, #4d4d4d)};\n    --comp-dialog-padding: #{var-list(--tct-action-sheet-padding, --app-scale-3x, 15px)};\n    --comp-content-gradient-height: #{var-list(--tct-action-sheet-content-gradient-height, --app-scale-2x, 10px)};\n    --comp-dialog-gap: #{var-list(--tct-action-sheet-gap, --app-scale-2x, 10px)};\n    --comp-dialog-max-width: #{var-list(--tct-action-sheet-max-width, 400px)};\n    --comp-dialog-max-height: #{var-list(--tct-action-sheet-max-height, --comp-action-sheet-computed-max-height, 75vh)};\n    --comp-dialog-min-height: #{var-list(--tct-action-sheet-min-height, --comp-action-sheet-computed-min-height, 20vh)};\n    --comp-dialog-box-shadow: #{var-list(\n            --tct-action-sheet-box-shadow,\n            --app-shadow-2,\n            unquote('0 3px 6px rgba(0, 0, 0, 0.3)')\n        )};\n\n    position: fixed;\n    top: 100%;\n    bottom: unset;\n    color: var(--comp-dialog-color);\n    background: var(--comp-dialog-background);\n    transition: transform $animation-tween, opacity $animation-tween;\n    width: 100%;\n    max-width: var(--comp-dialog-max-width);\n    border: 0;\n    border-radius: var(--comp-border-radius);\n    box-shadow: var(--comp-dialog-box-shadow);\n    padding: 0;\n    height: auto;\n    overflow: hidden;\n    min-height: var(--comp-dialog-min-height);\n    max-height: var(--comp-dialog-max-height);\n\n    &::backdrop {\n        opacity: 0;\n        background: var-list(--tct-action-sheet-backdrop-background, --t-top-a2, rgba(13, 13, 13, 0.6));\n    }\n\n    &[open] {\n        &.is-opening,\n        &.is-open {\n            transform: translateY(-100%);\n\n            @media screen and (min-width: 1200px) {\n                opacity: 1;\n                transform: translateY(0);\n            }\n\n            &::backdrop {\n                opacity: 1;\n                animation: showBackdrop $animation-tween;\n            }\n        }\n\n        &.is-closing {\n            transform: translateY(10%);\n\n            &::backdrop {\n                animation: hideBackdrop $animation-tween;\n            }\n        }\n    }\n\n    @media screen and (min-width: 1200px) {\n        border-radius: var(--comp-desktop-border-radius);\n        top: 0px;\n        bottom: 0px;\n        height: fit-content;\n        transform: translateY(10%);\n        opacity: 0;\n    }\n}\n\n.content {\n    overflow-y: auto;\n    @include tiny-scrollbar();\n}\n\n.interior {\n    display: grid;\n    grid-template-rows: 44px 1fr auto;\n    gap: var(--comp-dialog-gap);\n    max-height: calc(var(--comp-dialog-max-height) - var(--comp-dialog-padding));\n    padding: var(--comp-dialog-padding);\n\n    // Scroll overlays\n    &.is-list {\n        header,\n        footer {\n            position: relative;\n\n            &:before {\n                content: '';\n                display: block;\n                position: absolute;\n                left: 0;\n                height: var(--comp-content-gradient-height);\n                width: 100%;\n                z-index: 1;\n            }\n        }\n    }\n}\n\nheader {\n    display: grid;\n    grid-template-columns: var(--comp-close-button-size) 1fr var(--comp-close-button-size);\n    grid-template-areas: '. title close';\n    gap: var(--comp-dialog-gap);\n\n    .title {\n        grid-area: title;\n        text-align: center;\n        line-height: var(--comp-header-height);\n    }\n\n    .btn-close {\n        grid-area: close;\n        width: var(--comp-close-button-size);\n        height: var(--comp-close-button-size);\n    }\n}\n\nfooter {\n    display: flex;\n    justify-content: end;\n}\n","import {\n    Component,\n    ComponentInterface,\n    Prop,\n    Method,\n    h,\n    State,\n    Event,\n    EventEmitter,\n    Fragment,\n    Element,\n} from '@stencil/core';\nimport { Q2OptionListCustomEvent } from 'src/components';\nimport {\n    ActionSheetListCloseData,\n    ActionSheetData,\n    ActionSheetListData,\n    ActionSheetMessageData,\n    ActionSheetSelectedOption,\n    ActionSheetListOption,\n    ActionSheetListOptgroup,\n} from 'q2-tecton-common/lib/utility/action-sheet';\nimport { loc, waitForNextPaint } from 'src/utils';\n\n@Component({\n    tag: 'q2-action-sheet',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2ActionSheet implements ComponentInterface {\n    @Prop({ mutable: true }) data: ActionSheetData;\n    @Prop() title: string;\n    @Prop() hideClose: boolean;\n\n    @State() isScrollable: boolean = false;\n    @State() renderStatus: 'is-open' | 'is-closing' | 'is-opening' = 'is-closing';\n    dialogElement: HTMLDialogElement;\n    contentElement: HTMLDivElement;\n    optionListElement: HTMLQ2OptionListElement;\n    initialSelectedOptions: ActionSheetSelectedOption[] = [];\n    selectedOptions: { values: ActionSheetSelectedOption[]; value: string } = { values: [], value: '' };\n    minHeight: number = 0.2;\n    maxHeight: number = 0.75;\n\n    @Element() hostElement: HTMLElement;\n\n    /// LifeCycle Hooks ///\n    componentDidLoad() {\n        this.dialogElement.addEventListener('cancel', this.onCancel);\n        this.ready.emit();\n    }\n\n    disconnectedCallback() {\n        this.dialogElement.removeEventListener('cancel', this.onCancel);\n    }\n\n    /// Helpers ///\n    storeInitialValues() {\n        const { data } = this;\n        if (!data) return;\n        if (data.appearance === 'list') {\n            this.initialSelectedOptions = data.listProps.selectedOptions;\n        }\n    }\n\n    focusContent() {\n        const { data } = this;\n        if (!data) return;\n        if (data.appearance === 'list') {\n            const { event } = data;\n            if (event instanceof KeyboardEvent) {\n                this.optionListElement.handleExternalKeydown(event);\n            } else {\n                this.optionListElement.focus();\n            }\n        }\n    }\n\n    generateOption = (option: ActionSheetListOption) => {\n        const optionElement = document.createElement('q2-option');\n        const { innerHTML, ...attributes } = option;\n        if (option.innerHTML) optionElement.innerHTML = option.innerHTML;\n        Object.entries(attributes).forEach(([key, value]) => {\n            if (value === undefined) return;\n            if (typeof value === 'boolean') {\n                if (value) optionElement.setAttribute(key, '');\n            } else {\n                optionElement.setAttribute(key, value);\n            }\n        });\n        return optionElement;\n    };\n\n    generateOptgroup = (option: ActionSheetListOptgroup) => {\n        const optgroupElement = document.createElement('q2-optgroup');\n        if (option.label) optgroupElement.setAttribute('label', option.label);\n        if (option.disabled) optgroupElement.setAttribute('disabled', '');\n        if (!!option.options.length)\n            option.options.forEach(opt => optgroupElement.appendChild(this.generateOption(opt)));\n        return optgroupElement;\n    };\n\n    hidePostHook() {\n        const { data } = this;\n        if (!data) return;\n        if (data.appearance === 'list') {\n            this.hostElement.innerHTML = null;\n        }\n    }\n\n    showPreHook() {\n        const { data } = this;\n        if (!data) return;\n        if (data.appearance === 'list') {\n            this.hostElement.innerHTML = null;\n            data.options.forEach(option => {\n                this.hostElement.appendChild(\n                    'options' in option ? this.generateOptgroup(option) : this.generateOption(option)\n                );\n            });\n        }\n    }\n\n    updateDialogMinMaxHeight() {\n        const windowHeight = window.innerHeight;\n        this.dialogElement.style.setProperty(\n            '--comp-action-sheet-computed-min-height',\n            `${Math.floor(windowHeight * this.minHeight)}px`\n        );\n        this.dialogElement.style.setProperty(\n            '--comp-action-sheet-computed-max-height',\n            `${Math.floor(windowHeight * this.maxHeight)}px`\n        );\n    }\n\n    /// Event Handlers ///\n    onClick = (event: MouseEvent) => {\n        const eventTarget = event.target as HTMLElement;\n        if (!(eventTarget instanceof HTMLElement)) return;\n\n        const isInContent = !!eventTarget.closest('.interior, q2-action-sheet');\n        if (isInContent) return;\n        this.onCancel(event);\n    };\n\n    onCancel = (event: Event) => {\n        event.preventDefault();\n        const { initialSelectedOptions } = this;\n        this.hide({\n            value: initialSelectedOptions?.[0]?.value ?? '',\n            values: initialSelectedOptions,\n            type: 'cancel',\n        });\n    };\n\n    onListChange = (event: Q2OptionListCustomEvent<{ value: string; values: ActionSheetSelectedOption[] }>) => {\n        this.selectedOptions = event.detail;\n    };\n\n    onListPopoverStateChange = (\n        event: Q2OptionListCustomEvent<{ open: boolean; action: 'close' | 'select' | 'open' }>\n    ) => {\n        if (event.detail.open) return;\n\n        if (event.detail.action === 'close') {\n            this.onCancel(event);\n        } else {\n            this.onListDone();\n        }\n    };\n\n    onListDone = () => {\n        this.hide({\n            ...this.selectedOptions,\n            type: 'confirm',\n        });\n    };\n\n    /// Events ///\n    @Event() close: EventEmitter<ActionSheetListCloseData>;\n    @Event({ bubbles: false }) ready: EventEmitter;\n\n    /// Methods ///\n    @Method()\n    async hide(data: ActionSheetListCloseData = { value: '', values: [], type: 'confirm' }) {\n        this.close.emit(data);\n        this.renderStatus = 'is-closing';\n        this.dialogElement.addEventListener(\n            'transitionend',\n            () => {\n                if (this.renderStatus !== 'is-closing') return;\n                this.dialogElement.close();\n                this.renderStatus = null;\n                this.data = undefined;\n                this.initialSelectedOptions = [];\n                this.selectedOptions = { values: [], value: '' };\n                this.hidePostHook();\n            },\n            { once: true }\n        );\n    }\n\n    @Method()\n    async show() {\n        this.showPreHook();\n        await waitForNextPaint();\n        this.updateDialogMinMaxHeight();\n        this.storeInitialValues();\n\n        if (this.dialogElement.open) return;\n\n        this.dialogElement.showModal();\n        this.renderStatus = 'is-opening';\n        this.dialogElement.addEventListener(\n            'transitionend',\n            () => {\n                if (this.renderStatus !== 'is-opening') return;\n                this.renderStatus = 'is-open';\n                this.focusContent();\n            },\n            { once: true }\n        );\n    }\n\n    /// DOM ///\n    renderSlot = () => {\n        return (\n            <div\n                class=\"content\"\n                ref={el => (this.contentElement = el)}\n            >\n                <slot />\n            </div>\n        );\n    };\n\n    renderMessage = ({ data }: { data: ActionSheetMessageData }) => {\n        return (\n            <q2-message type={data.type}>\n                {data.title && <h2>{data.title}</h2>}\n                {data.description && <p>{data.description}</p>}\n            </q2-message>\n        );\n    };\n\n    renderList = ({ data }: { data: ActionSheetListData }) => {\n        const { listProps } = data;\n\n        return (\n            <Fragment>\n                <div\n                    class=\"content\"\n                    ref={el => (this.contentElement = el)}\n                >\n                    <q2-option-list\n                        ref={el => (this.optionListElement = el)}\n                        multiple={listProps.multiple}\n                        noSelect={listProps.noSelect}\n                        onChange={this.onListChange}\n                        onPopoverState={this.onListPopoverStateChange}\n                        selectedOptions={listProps.selectedOptions}\n                    >\n                        <slot />\n                    </q2-option-list>\n                </div>\n                <footer>\n                    {listProps.multiple && (\n                        <q2-btn\n                            test-id=\"btnDone\"\n                            intent=\"workflow-primary\"\n                            onClick={this.onListDone}\n                        >\n                            {loc('tecton.element.actionSheet.done')}\n                        </q2-btn>\n                    )}\n                </footer>\n            </Fragment>\n        );\n    };\n\n    render() {\n        const { data } = this;\n        const showHeader = data?.title || this.title || !this.hideClose;\n        const renderStatus = this.renderStatus || '';\n\n        let RenderContent = null;\n        switch (data?.appearance) {\n            case 'message':\n                RenderContent = this.renderMessage;\n                break;\n\n            case 'list':\n                RenderContent = this.renderList;\n                break;\n\n            default:\n                RenderContent = this.renderSlot;\n                break;\n        }\n        const appearance = data?.appearance || 'slot';\n        const interiorClasses = `interior is-${appearance}`;\n\n        return (\n            <dialog\n                ref={el => (this.dialogElement = el)}\n                class={renderStatus}\n                onClick={this.onClick}\n            >\n                <div class={interiorClasses}>\n                    {showHeader && (\n                        <header>\n                            <div class=\"title\">{data?.title || this.title}</div>\n                            {!this.hideClose && (\n                                <q2-btn\n                                    class=\"btn-close\"\n                                    test-id=\"btnClose\"\n                                    onClick={this.onCancel}\n                                    label=\"tecton.element.actionSheet.close\"\n                                    hide-label\n                                >\n                                    <q2-icon type=\"close\" />\n                                </q2-btn>\n                            )}\n                        </header>\n                    )}\n                    {this.data?.description && <p>{data.description}</p>}\n                    {RenderContent && <RenderContent data={this.data} />}\n                </div>\n            </dialog>\n        );\n    }\n}\n"],"mappings":"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"}