q2-tecton-elements 1.36.0 → 1.37.0

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

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","Q2Radio","this","_id","createGuid","isLoaded","inputChange","event","stopPropagation","groupReadonly","preventDefault","target","HTMLInputElement","checked","componentWillLoad","handleAriaLabel","componentDidLoad","overrideFocus","hostElement","click","inputField","ariaLabelObserver","checkedObserver","change","emit","value","onHostClick","disabled","stopImmediatePropagation","delegateFocus","focus","render","h","class","groupTileLayout","ref","el","id","type","name","groupDisabled","label","hideLabel","loc","undefined","onChange","htmlFor","viewBox","stroke","fill","cx","cy","r"],"sources":["./src/components/q2-radio/styles.scss?tag=q2-radio&encapsulation=shadow","./src/components/q2-radio/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n}\n\n.radio-container {\n    --comp-radio-margin: #{var-list(\n            --tct-radio-margin,\n            unquote(\n                '#{var-list(--tct-radio-margin-vertical, --tct-scale-2, 10px)} #{var-list(--tct-radio-margin-horizontal, --tct-scale-3, 15px)}'\n            )\n        )};\n    margin: var(--comp-radio-margin);\n\n    label[for] {\n        color: var-list(--tct-radio-label-color);\n        font-weight: var-list(--tct-radio-font-weight, --tct-checkbox-font-weight, 400);\n        align-items: center;\n        cursor: pointer;\n        margin-right: 1rem;\n        display: grid;\n        grid-template-columns: 18px 1fr;\n        gap: var-list(--tct-scale-1, --app-scale-1x, 5px);\n    }\n\n    svg {\n        border-radius: 50%;\n        transition: box-shadow var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n        outline: 0;\n        width: 100%;\n    }\n\n    circle:nth-child(1) {\n        stroke-width: 2;\n        stroke: var-list(--tct-radio-stroke-color, --t-a11y-gray-color-AA, #949494);\n    }\n\n    input {\n        &:focus {\n            & + label svg {\n                box-shadow: var(--const-double-focus-ring);\n            }\n            & + label circle:nth-child(1) {\n                stroke: var-list(\n                    --tct-radio-focus-stroke-color,\n                    --tct-checkbox-check-stroke-color,\n                    --t-checkbox-fill,\n                    #2e2e2e\n                );\n            }\n        }\n\n        &:checked {\n            & + label circle:nth-child(1) {\n                fill: var-list(--tct-radio-checked-background-fill, --tct-radio-checked-bg, transparent);\n                stroke: var-list(\n                    --tct-radio-checked-stroke-color,\n                    --tct-radio-stroke-color,\n                    --t-a11y-gray-color-AA,\n                    #949494\n                );\n            }\n            & + label .label-content {\n                font-weight: var-list(--tct-checkbox-selected-font-weight, 600);\n                letter-spacing: var-list(--tct-checkbox-selected-letter-spacing, 0.25);\n            }\n            & + label circle:nth-child(2) {\n                fill: var-list(--tct-radio-checked-fill, --tct-checkbox-check-stroke-color, --t-checkbox-fill, #2e2e2e);\n            }\n        }\n    }\n}\n\n.radio-tile {\n    flex-basis: 100px;\n    flex-grow: 0;\n    flex-wrap: wrap;\n\n    label[for] {\n        color: var-list(--tct-radio-label-color);\n        align-items: center;\n        border-radius: 3px;\n        border: 2px solid var-list(--tct-radio-stroke-color, --t-a11y-gray-color-AA, #949494);\n        cursor: pointer;\n        display: block;\n        padding: 10px;\n        position: relative;\n        text-align: center;\n        transition: border-color var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n        white-space: nowrap;\n    }\n\n    input {\n        &:focus + label,\n        &:focus:checked + label {\n            border-color: var-list(var-prefixer(checkbox-check-stroke-color), --t-checkbox-fill, #2e2e2e);\n            box-shadow: var(--const-double-focus-ring), var-list(--tct-global-focus, unquote('0 0 0 2px #33b4ff'));\n        }\n\n        &:checked + label {\n            border-color: var-list(var-prefixer(checkbox-check-stroke-color), --t-checkbox-fill, #2e2e2e);\n            box-shadow: inset 0 0 0 2px #ffffff;\n\n            &:after {\n                border-bottom-width: 3px;\n                border-bottom: 5px solid var-list(var-prefixer(checkbox-check-stroke-color), --t-checkbox-fill, #2e2e2e);\n                border-left-width: 5px;\n                border-left: 8px solid transparent;\n                border-right-width: 5px;\n                border-right: 8px solid transparent;\n                bottom: 0;\n                content: '';\n                height: 0;\n                left: 50%;\n                margin-left: -5px;\n                position: absolute;\n                width: 0;\n            }\n        }\n    }\n}\n\ninput:disabled + label[for] {\n    cursor: not-allowed;\n    opacity: var-list(--tct-disabled-opacity, --app-disabled-opacity, 0.4);\n}\n","import { Component, Prop, h, Element, ComponentInterface, Listen, Watch, Event, EventEmitter } from '@stencil/core';\nimport { createGuid, handleAriaLabel, loc, overrideFocus } from 'src/utils';\n\n@Component({\n    tag: 'q2-radio',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Radio implements ComponentInterface {\n    @Prop({ reflect: true, mutable: true }) label: string;\n    @Prop({ reflect: true, mutable: true }) hideLabel: boolean;\n    @Prop({ reflect: true }) value: string;\n    @Prop({ reflect: true }) disabled: boolean = false;\n    @Prop({ reflect: true }) checked: boolean = false;\n    @Prop() tabIndex: number = 0;\n    /**\n     * Used by q2-radio-group to apply a name to all options in the group\n     * @private\n     */\n    @Prop({ reflect: true }) name: string;\n    /**\n     * Used by q2-radio-group to disable all options in the group\n     * @private\n     */\n    @Prop({ reflect: false }) groupDisabled: boolean = false;\n    /**\n     * Used by q2-radio-group to make all options in the group readonly\n     * @private\n     */\n    @Prop({ reflect: false }) groupReadonly: boolean = false;\n    /**\n     * Used by q2-radio-group to make the options display as tiles\n     * @private\n     */\n    @Prop({ reflect: false }) groupTileLayout: boolean = false;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n    @Element() hostElement: HTMLElement;\n    _id: string = `radio-${createGuid()}`;\n    inputField: HTMLInputElement;\n    isLoaded: boolean = false;\n\n    @Event() change: EventEmitter;\n\n    ////////// LIFECYCLE HOOKS ////////\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n    }\n\n    componentDidLoad(): void {\n        this.isLoaded = true;\n        overrideFocus(this.hostElement);\n        this.hostElement.click = () => this.inputField.click();\n    }\n\n    ////////// OBSERVERS //////////\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    @Watch('checked')\n    checkedObserver() {\n        if (!this.isLoaded) return;\n        if (!this.checked) return;\n        this.change.emit({ value: this.value });\n    }\n\n    /////// HOST ELEMENT EVENTS ///////\n    @Listen('click')\n    onHostClick(event: Event) {\n        if (this.disabled) {\n            event.stopImmediatePropagation();\n        }\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (event.target === this.hostElement) {\n            this.inputField.focus();\n        }\n    }\n\n    inputChange = (event: Event) => {\n        event.stopPropagation();\n        if (this.groupReadonly) {\n            event.preventDefault();\n            return false;\n        }\n\n        if (event.target instanceof HTMLInputElement) {\n            this.checked = event.target.checked;\n        }\n    };\n\n    render() {\n        return (\n            <div class={this.groupTileLayout ? 'radio-tile' : 'radio-container'}>\n                <input\n                    ref={el => (this.inputField = el)}\n                    class=\"sr\"\n                    id={this._id}\n                    type=\"radio\"\n                    name={this.name}\n                    value={this.value}\n                    disabled={this.disabled || this.groupDisabled}\n                    checked={this.checked}\n                    aria-label={this.label && this.hideLabel ? loc(this.label) : undefined}\n                    onChange={this.inputChange}\n                    test-id=\"q2RadioInnerRadioBox\"\n                ></input>\n\n                <label\n                    htmlFor={this._id}\n                    test-id=\"radioButton\"\n                >\n                    {!this.groupTileLayout && (\n                        <svg viewBox=\"0 0 18 18\">\n                            <circle\n                                stroke=\"none\"\n                                fill=\"none\"\n                                cx=\"9\"\n                                cy=\"9\"\n                                r=\"8\"\n                            />\n                            <circle\n                                stroke=\"none\"\n                                fill=\"none\"\n                                cx=\"9\"\n                                cy=\"9\"\n                                r=\"4\"\n                            />\n                        </svg>\n                    )}\n                    {!this.hideLabel && (\n                        <div class=\"label-content\">\n                            {(this.label && loc(this.label)) || ''}\n                            <slot></slot>\n                        </div>\n                    )}\n                </label>\n            </div>\n        );\n    }\n}\n"],"mappings":"kHAAA,MAAMA,EAAY,kmH,MCQLC,EAAO,M,wDAgChBC,KAAAC,IAAc,SAASC,MAEvBF,KAAAG,SAAoB,MA6CpBH,KAAAI,YAAeC,IACXA,EAAMC,kBACN,GAAIN,KAAKO,cAAe,CACpBF,EAAMG,iBACN,OAAO,K,CAGX,GAAIH,EAAMI,kBAAkBC,iBAAkB,CAC1CV,KAAKW,QAAUN,EAAMI,OAAOE,O,oFAnFS,M,aACD,M,cACjB,E,uCAUwB,M,mBAKA,M,qBAKE,M,yBAcrDC,oBACIC,EAAgBb,K,CAGpBc,mBACId,KAAKG,SAAW,KAChBY,EAAcf,KAAKgB,aACnBhB,KAAKgB,YAAYC,MAAQ,IAAMjB,KAAKkB,WAAWD,O,CAMnDE,oBACIN,EAAgBb,K,CAIpBoB,kBACI,IAAKpB,KAAKG,SAAU,OACpB,IAAKH,KAAKW,QAAS,OACnBX,KAAKqB,OAAOC,KAAK,CAAEC,MAAOvB,KAAKuB,O,CAKnCC,YAAYnB,GACR,GAAIL,KAAKyB,SAAU,CACfpB,EAAMqB,0B,EAKdC,cAActB,GACV,GAAIA,EAAMI,SAAWT,KAAKgB,YAAa,CACnChB,KAAKkB,WAAWU,O,EAgBxBC,SACI,OACIC,EAAA,OAAKC,MAAO/B,KAAKgC,gBAAkB,aAAe,mBAC9CF,EAAA,SACIG,IAAKC,GAAOlC,KAAKkB,WAAagB,EAC9BH,MAAM,KACNI,GAAInC,KAAKC,IACTmC,KAAK,QACLC,KAAMrC,KAAKqC,KACXd,MAAOvB,KAAKuB,MACZE,SAAUzB,KAAKyB,UAAYzB,KAAKsC,cAChC3B,QAASX,KAAKW,QAAO,aACTX,KAAKuC,OAASvC,KAAKwC,UAAYC,EAAIzC,KAAKuC,OAASG,UAC7DC,SAAU3C,KAAKI,YAAW,UAClB,yBAGZ0B,EAAA,SACIc,QAAS5C,KAAKC,IAAG,UACT,gBAEND,KAAKgC,iBACHF,EAAA,OAAKe,QAAQ,aACTf,EAAA,UACIgB,OAAO,OACPC,KAAK,OACLC,GAAG,IACHC,GAAG,IACHC,EAAE,MAENpB,EAAA,UACIgB,OAAO,OACPC,KAAK,OACLC,GAAG,IACHC,GAAG,IACHC,EAAE,QAIZlD,KAAKwC,WACHV,EAAA,OAAKC,MAAM,iBACL/B,KAAKuC,OAASE,EAAIzC,KAAKuC,QAAW,GACpCT,EAAA,e"}

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

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

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

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

package/dist/q2-tecton-elements/p-99ab3236.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["polyfill","w","window","d","document","documentElement","style","__forceSmoothScrollPolyfill__","Element","HTMLElement","SCROLL_TIME","original","scroll","scrollTo","scrollBy","elementScroll","prototype","scrollElement","scrollIntoView","now","performance","bind","Date","isMicrosoftBrowser","userAgent","userAgentPatterns","RegExp","join","test","ROUNDING_TOLERANCE","navigator","x","y","this","scrollLeft","scrollTop","ease","k","Math","cos","PI","shouldBailOut","firstArg","behavior","undefined","TypeError","hasScrollableSpace","el","axis","clientHeight","scrollHeight","clientWidth","scrollWidth","canOverflow","overflowValue","getComputedStyle","isScrollable","isScrollableY","isScrollableX","findScrollableParent","body","parentNode","host","step","context","time","value","currentX","currentY","elapsed","startTime","startX","startY","method","call","scrollable","requestAnimationFrame","smoothScroll","scrollX","pageXOffset","scrollY","pageYOffset","arguments","left","top","SyntaxError","scrollableParent","parentRects","getBoundingClientRect","clientRects","position","module","exports","isMobile","isHostLosingFocus","event","hostElement","type","focusInTypes","isFocusIn","includes","elementGainingFocus","target","relatedTarget","isElementNestedInHostElement","element","parentElement","isRelatedTargetWithinHost","contains","isEventFromElement","_a","composedPath","overrideFocus","focus","dispatchEvent","FocusEvent","bubbles","addSmoothScrollPolyfill","isSafari","isFirefox","toLowerCase","isTouchDevice","maxTouchPoints","guid","createGuid","nextPaint","fn","waitForNextPaint","Promise","resolve","loc","key","subs","Tecton","noStrings","_c","_b","TectonElements","labelDOM","label","hideLabel","helpText","optional","h","class","readonly","htmlFor","inputId","handleAriaLabel","ariaLabel","FW_WRAPPERS_EMPTY_PROP","Symbol","toString","handleRenamedProp","oldProp","newProp","removeOldProp","handleDeprecationWarning","deprecatedItemName","deprecatedItemType","location","hostname","componentName","constructor","name","slice","console","warn","error","messagesDOM","hasError","appearance","description","id","inputDescribedBy","messages","map","message","setMessageHeight","messageContainer","shadowRoot","querySelector","q2Message","height","showMessages","hasFocus","getPropertyValue","classList","add","removeProperty","remove","setProperty","resizeIframe","handleColor","intent","color"],"sources":["../../node_modules/smoothscroll-polyfill/dist/smoothscroll.js","./src/utils/index.tsx"],"sourcesContent":["/* smoothscroll v0.4.4 - 2019 - Dustan Kasten, Jeremias Menichelli - MIT License */\n(function () {\n  'use strict';\n\n  // polyfill\n  function polyfill() {\n    // aliases\n    var w = window;\n    var d = document;\n\n    // return if scroll behavior is supported and polyfill is not forced\n    if (\n      'scrollBehavior' in d.documentElement.style &&\n      w.__forceSmoothScrollPolyfill__ !== true\n    ) {\n      return;\n    }\n\n    // globals\n    var Element = w.HTMLElement || w.Element;\n    var SCROLL_TIME = 468;\n\n    // object gathering original scroll methods\n    var original = {\n      scroll: w.scroll || w.scrollTo,\n      scrollBy: w.scrollBy,\n      elementScroll: Element.prototype.scroll || scrollElement,\n      scrollIntoView: Element.prototype.scrollIntoView\n    };\n\n    // define timing method\n    var now =\n      w.performance && w.performance.now\n        ? w.performance.now.bind(w.performance)\n        : Date.now;\n\n    /**\n     * indicates if a the current browser is made by Microsoft\n     * @method isMicrosoftBrowser\n     * @param {String} userAgent\n     * @returns {Boolean}\n     */\n    function isMicrosoftBrowser(userAgent) {\n      var userAgentPatterns = ['MSIE ', 'Trident/', 'Edge/'];\n\n      return new RegExp(userAgentPatterns.join('|')).test(userAgent);\n    }\n\n    /*\n     * IE has rounding bug rounding down clientHeight and clientWidth and\n     * rounding up scrollHeight and scrollWidth causing false positives\n     * on hasScrollableSpace\n     */\n    var ROUNDING_TOLERANCE = isMicrosoftBrowser(w.navigator.userAgent) ? 1 : 0;\n\n    /**\n     * changes scroll position inside an element\n     * @method scrollElement\n     * @param {Number} x\n     * @param {Number} y\n     * @returns {undefined}\n     */\n    function scrollElement(x, y) {\n      this.scrollLeft = x;\n      this.scrollTop = y;\n    }\n\n    /**\n     * returns result of applying ease math function to a number\n     * @method ease\n     * @param {Number} k\n     * @returns {Number}\n     */\n    function ease(k) {\n      return 0.5 * (1 - Math.cos(Math.PI * k));\n    }\n\n    /**\n     * indicates if a smooth behavior should be applied\n     * @method shouldBailOut\n     * @param {Number|Object} firstArg\n     * @returns {Boolean}\n     */\n    function shouldBailOut(firstArg) {\n      if (\n        firstArg === null ||\n        typeof firstArg !== 'object' ||\n        firstArg.behavior === undefined ||\n        firstArg.behavior === 'auto' ||\n        firstArg.behavior === 'instant'\n      ) {\n        // first argument is not an object/null\n        // or behavior is auto, instant or undefined\n        return true;\n      }\n\n      if (typeof firstArg === 'object' && firstArg.behavior === 'smooth') {\n        // first argument is an object and behavior is smooth\n        return false;\n      }\n\n      // throw error when behavior is not supported\n      throw new TypeError(\n        'behavior member of ScrollOptions ' +\n          firstArg.behavior +\n          ' is not a valid value for enumeration ScrollBehavior.'\n      );\n    }\n\n    /**\n     * indicates if an element has scrollable space in the provided axis\n     * @method hasScrollableSpace\n     * @param {Node} el\n     * @param {String} axis\n     * @returns {Boolean}\n     */\n    function hasScrollableSpace(el, axis) {\n      if (axis === 'Y') {\n        return el.clientHeight + ROUNDING_TOLERANCE < el.scrollHeight;\n      }\n\n      if (axis === 'X') {\n        return el.clientWidth + ROUNDING_TOLERANCE < el.scrollWidth;\n      }\n    }\n\n    /**\n     * indicates if an element has a scrollable overflow property in the axis\n     * @method canOverflow\n     * @param {Node} el\n     * @param {String} axis\n     * @returns {Boolean}\n     */\n    function canOverflow(el, axis) {\n      var overflowValue = w.getComputedStyle(el, null)['overflow' + axis];\n\n      return overflowValue === 'auto' || overflowValue === 'scroll';\n    }\n\n    /**\n     * indicates if an element can be scrolled in either axis\n     * @method isScrollable\n     * @param {Node} el\n     * @param {String} axis\n     * @returns {Boolean}\n     */\n    function isScrollable(el) {\n      var isScrollableY = hasScrollableSpace(el, 'Y') && canOverflow(el, 'Y');\n      var isScrollableX = hasScrollableSpace(el, 'X') && canOverflow(el, 'X');\n\n      return isScrollableY || isScrollableX;\n    }\n\n    /**\n     * finds scrollable parent of an element\n     * @method findScrollableParent\n     * @param {Node} el\n     * @returns {Node} el\n     */\n    function findScrollableParent(el) {\n      while (el !== d.body && isScrollable(el) === false) {\n        el = el.parentNode || el.host;\n      }\n\n      return el;\n    }\n\n    /**\n     * self invoked function that, given a context, steps through scrolling\n     * @method step\n     * @param {Object} context\n     * @returns {undefined}\n     */\n    function step(context) {\n      var time = now();\n      var value;\n      var currentX;\n      var currentY;\n      var elapsed = (time - context.startTime) / SCROLL_TIME;\n\n      // avoid elapsed times higher than one\n      elapsed = elapsed > 1 ? 1 : elapsed;\n\n      // apply easing to elapsed time\n      value = ease(elapsed);\n\n      currentX = context.startX + (context.x - context.startX) * value;\n      currentY = context.startY + (context.y - context.startY) * value;\n\n      context.method.call(context.scrollable, currentX, currentY);\n\n      // scroll more if we have not reached our destination\n      if (currentX !== context.x || currentY !== context.y) {\n        w.requestAnimationFrame(step.bind(w, context));\n      }\n    }\n\n    /**\n     * scrolls window or element with a smooth behavior\n     * @method smoothScroll\n     * @param {Object|Node} el\n     * @param {Number} x\n     * @param {Number} y\n     * @returns {undefined}\n     */\n    function smoothScroll(el, x, y) {\n      var scrollable;\n      var startX;\n      var startY;\n      var method;\n      var startTime = now();\n\n      // define scroll context\n      if (el === d.body) {\n        scrollable = w;\n        startX = w.scrollX || w.pageXOffset;\n        startY = w.scrollY || w.pageYOffset;\n        method = original.scroll;\n      } else {\n        scrollable = el;\n        startX = el.scrollLeft;\n        startY = el.scrollTop;\n        method = scrollElement;\n      }\n\n      // scroll looping over a frame\n      step({\n        scrollable: scrollable,\n        method: method,\n        startTime: startTime,\n        startX: startX,\n        startY: startY,\n        x: x,\n        y: y\n      });\n    }\n\n    // ORIGINAL METHODS OVERRIDES\n    // w.scroll and w.scrollTo\n    w.scroll = w.scrollTo = function() {\n      // avoid action when no arguments are passed\n      if (arguments[0] === undefined) {\n        return;\n      }\n\n      // avoid smooth behavior if not required\n      if (shouldBailOut(arguments[0]) === true) {\n        original.scroll.call(\n          w,\n          arguments[0].left !== undefined\n            ? arguments[0].left\n            : typeof arguments[0] !== 'object'\n              ? arguments[0]\n              : w.scrollX || w.pageXOffset,\n          // use top prop, second argument if present or fallback to scrollY\n          arguments[0].top !== undefined\n            ? arguments[0].top\n            : arguments[1] !== undefined\n              ? arguments[1]\n              : w.scrollY || w.pageYOffset\n        );\n\n        return;\n      }\n\n      // LET THE SMOOTHNESS BEGIN!\n      smoothScroll.call(\n        w,\n        d.body,\n        arguments[0].left !== undefined\n          ? ~~arguments[0].left\n          : w.scrollX || w.pageXOffset,\n        arguments[0].top !== undefined\n          ? ~~arguments[0].top\n          : w.scrollY || w.pageYOffset\n      );\n    };\n\n    // w.scrollBy\n    w.scrollBy = function() {\n      // avoid action when no arguments are passed\n      if (arguments[0] === undefined) {\n        return;\n      }\n\n      // avoid smooth behavior if not required\n      if (shouldBailOut(arguments[0])) {\n        original.scrollBy.call(\n          w,\n          arguments[0].left !== undefined\n            ? arguments[0].left\n            : typeof arguments[0] !== 'object' ? arguments[0] : 0,\n          arguments[0].top !== undefined\n            ? arguments[0].top\n            : arguments[1] !== undefined ? arguments[1] : 0\n        );\n\n        return;\n      }\n\n      // LET THE SMOOTHNESS BEGIN!\n      smoothScroll.call(\n        w,\n        d.body,\n        ~~arguments[0].left + (w.scrollX || w.pageXOffset),\n        ~~arguments[0].top + (w.scrollY || w.pageYOffset)\n      );\n    };\n\n    // Element.prototype.scroll and Element.prototype.scrollTo\n    Element.prototype.scroll = Element.prototype.scrollTo = function() {\n      // avoid action when no arguments are passed\n      if (arguments[0] === undefined) {\n        return;\n      }\n\n      // avoid smooth behavior if not required\n      if (shouldBailOut(arguments[0]) === true) {\n        // if one number is passed, throw error to match Firefox implementation\n        if (typeof arguments[0] === 'number' && arguments[1] === undefined) {\n          throw new SyntaxError('Value could not be converted');\n        }\n\n        original.elementScroll.call(\n          this,\n          // use left prop, first number argument or fallback to scrollLeft\n          arguments[0].left !== undefined\n            ? ~~arguments[0].left\n            : typeof arguments[0] !== 'object' ? ~~arguments[0] : this.scrollLeft,\n          // use top prop, second argument or fallback to scrollTop\n          arguments[0].top !== undefined\n            ? ~~arguments[0].top\n            : arguments[1] !== undefined ? ~~arguments[1] : this.scrollTop\n        );\n\n        return;\n      }\n\n      var left = arguments[0].left;\n      var top = arguments[0].top;\n\n      // LET THE SMOOTHNESS BEGIN!\n      smoothScroll.call(\n        this,\n        this,\n        typeof left === 'undefined' ? this.scrollLeft : ~~left,\n        typeof top === 'undefined' ? this.scrollTop : ~~top\n      );\n    };\n\n    // Element.prototype.scrollBy\n    Element.prototype.scrollBy = function() {\n      // avoid action when no arguments are passed\n      if (arguments[0] === undefined) {\n        return;\n      }\n\n      // avoid smooth behavior if not required\n      if (shouldBailOut(arguments[0]) === true) {\n        original.elementScroll.call(\n          this,\n          arguments[0].left !== undefined\n            ? ~~arguments[0].left + this.scrollLeft\n            : ~~arguments[0] + this.scrollLeft,\n          arguments[0].top !== undefined\n            ? ~~arguments[0].top + this.scrollTop\n            : ~~arguments[1] + this.scrollTop\n        );\n\n        return;\n      }\n\n      this.scroll({\n        left: ~~arguments[0].left + this.scrollLeft,\n        top: ~~arguments[0].top + this.scrollTop,\n        behavior: arguments[0].behavior\n      });\n    };\n\n    // Element.prototype.scrollIntoView\n    Element.prototype.scrollIntoView = function() {\n      // avoid smooth behavior if not required\n      if (shouldBailOut(arguments[0]) === true) {\n        original.scrollIntoView.call(\n          this,\n          arguments[0] === undefined ? true : arguments[0]\n        );\n\n        return;\n      }\n\n      // LET THE SMOOTHNESS BEGIN!\n      var scrollableParent = findScrollableParent(this);\n      var parentRects = scrollableParent.getBoundingClientRect();\n      var clientRects = this.getBoundingClientRect();\n\n      if (scrollableParent !== d.body) {\n        // reveal element inside parent\n        smoothScroll.call(\n          this,\n          scrollableParent,\n          scrollableParent.scrollLeft + clientRects.left - parentRects.left,\n          scrollableParent.scrollTop + clientRects.top - parentRects.top\n        );\n\n        // reveal parent in viewport unless is fixed\n        if (w.getComputedStyle(scrollableParent).position !== 'fixed') {\n          w.scrollBy({\n            left: parentRects.left,\n            top: parentRects.top,\n            behavior: 'smooth'\n          });\n        }\n      } else {\n        // reveal element in viewport\n        w.scrollBy({\n          left: clientRects.left,\n          top: clientRects.top,\n          behavior: 'smooth'\n        });\n      }\n    };\n  }\n\n  if (typeof exports === 'object' && typeof module !== 'undefined') {\n    // commonjs\n    module.exports = { polyfill: polyfill };\n  } else {\n    // global\n    polyfill();\n  }\n\n}());\n","import { h } from '@stencil/core';\nimport { Q2Btn } from 'src/components/q2-btn';\nimport { Q2Calendar } from 'src/components/q2-calendar';\nimport { Q2Carousel } from 'src/components/q2-carousel';\nimport { Q2Checkbox } from 'src/components/q2-checkbox';\nimport { Q2Dropdown } from 'src/components/q2-dropdown';\nimport { Q2DropdownItem } from 'src/components/q2-dropdown-item';\nimport { Q2EditableField } from 'src/components/q2-editable-field';\nimport { Q2Input } from 'src/components/q2-input';\nimport { Q2Loading } from 'src/components/q2-loading';\nimport { Q2Radio } from 'src/components/q2-radio';\nimport { Q2Select } from 'src/components/q2-select';\nimport { FormFieldTypes, IDict } from 'src/util';\nimport smoothScroll from 'smoothscroll-polyfill';\n\nexport function isMobile(): boolean {\n    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|Mobile|IEMobile|Windows Phone|Opera Mini/i.test(\n        navigator.userAgent\n    );\n}\n\nexport function isHostLosingFocus(event: FocusEvent, hostElement: HTMLElement) {\n    const type = event.type;\n    const focusInTypes = ['focusin', 'focus'];\n    const isFocusIn = focusInTypes.includes(type);\n\n    // on focusin: `target` is element losing focus, `relatedTarget` is element gaining focus\n    // on focusout: `target` is element gaining focus, `relatedTarget` is element losing focus\n    const elementGainingFocus = isFocusIn ? event.target : event.relatedTarget;\n\n    const isElementNestedInHostElement = (element: HTMLElement) => {\n        if (element === hostElement) return true;\n        if (element.parentElement) {\n            return isElementNestedInHostElement(element.parentElement);\n        }\n        return false;\n    };\n\n    if (!(elementGainingFocus instanceof HTMLElement)) return true;\n    return !isElementNestedInHostElement(elementGainingFocus);\n}\n\nexport function isRelatedTargetWithinHost(event: FocusEvent, element: HTMLElement) {\n    return event.relatedTarget !== element && !element.contains(event.relatedTarget as Node);\n}\n\nexport function isEventFromElement(event: Event, element: HTMLElement): boolean {\n    return event.composedPath?.()[0] === element;\n}\n\nexport function overrideFocus(hostElement: HTMLElement) {\n    hostElement.focus = () => hostElement?.dispatchEvent(new FocusEvent('focus', { bubbles: false }));\n}\n\nexport function addSmoothScrollPolyfill() {\n    if (!isSafari()) return false;\n    smoothScroll.polyfill();\n    return (window.__forceSmoothScrollPolyfill__ = true);\n}\n\nexport function isFirefox() {\n    const userAgent = navigator.userAgent.toLowerCase();\n    return userAgent.includes('firefox');\n}\n\nexport function isTouchDevice() {\n    return 'ontouchstart' in window || navigator.maxTouchPoints > 0;\n}\n\nexport function isSafari() {\n    const userAgent = navigator.userAgent.toLowerCase();\n    return userAgent.includes('safari') && !userAgent.includes('chrome');\n}\n\nlet guid: number = 1000;\nexport function createGuid(): number {\n    return guid++;\n}\n\nexport function nextPaint(fn: (value?: unknown) => void) {\n    requestAnimationFrame(() => {\n        requestAnimationFrame(fn);\n    });\n}\n\nexport function waitForNextPaint() {\n    return new Promise(resolve => nextPaint(resolve));\n}\n\nexport function capitalize(value: string) {\n    return `${value.charAt(0).toUpperCase()}${value.slice(1)}`;\n}\n\nexport function pick(props: string[]): (obj: object) => object {\n    return obj => {\n        return props.reduce((memo, prop) => {\n            return {\n                ...memo,\n                [prop]: obj[prop],\n            };\n        }, {});\n    };\n}\n\nexport function loc(key: string, subs?: IDict<any> | string[]) {\n    if (!key) return '';\n    if (window.Tecton?.noStrings === true) {\n        return key;\n    }\n    return window?.TectonElements?.loc(key, subs) ?? key;\n}\n\nexport function labelDOM(target: FormFieldTypes) {\n    const { label, hideLabel } = target;\n    if (!label || hideLabel) return;\n    let helpText = '';\n    if (target.optional) {\n        helpText = <span class=\"optional-tag\">{loc('tecton.element.input.optional')}</span>;\n    }\n    if (target.readonly) {\n        helpText = <span class=\"optional-tag\">{loc('tecton.element.input.readonly')}</span>;\n    }\n    return (\n        <label\n            htmlFor={target.inputId}\n            class={target.readonly ? 'readonly-field' : ''}\n        >\n            {loc(target.label)}\n            {helpText}\n        </label>\n    );\n}\n\nexport function handleAriaLabel(\n    target:\n        | Q2Input\n        | Q2Select\n        | Q2Radio\n        | Q2Checkbox\n        | Q2EditableField\n        | Q2Dropdown\n        | Q2DropdownItem\n        | Q2Loading\n        | Q2Carousel\n        | Q2Calendar\n        | Q2Btn\n) {\n    const { ariaLabel } = target;\n    if (!ariaLabel) return;\n\n    // If empty ariaLabel prop is set to primitive symbol by framework wrapper, set ariaLabel to undefined and return\n    const FW_WRAPPERS_EMPTY_PROP = Symbol().toString();\n    if (ariaLabel === FW_WRAPPERS_EMPTY_PROP) {\n        target.ariaLabel = undefined;\n        return;\n    }\n\n    // If ariaLabel is set, set hideLabel to true and set label to ariaLabel\n    if ('hideLabel' in target) target.hideLabel = true;\n    target.label = loc(ariaLabel);\n    target.ariaLabel = undefined;\n}\n\n/**\n * Handles when a prop has been renamed on a component without introducing a breaking change.\n */\nexport function handleRenamedProp(target: object, oldProp: string, newProp: string, removeOldProp?: boolean) {\n    if (typeof target[oldProp] === 'undefined') return;\n\n    // If old prop has value, aka set in component, call handleDeprecationWarning()\n    if (target[oldProp]) {\n        handleDeprecationWarning(target, oldProp, 'prop');\n    }\n\n    target[newProp] = target[oldProp];\n\n    if (removeOldProp) {\n        delete target[oldProp];\n    }\n}\n\nexport function handleDeprecationWarning(\n    target: object,\n    deprecatedItemName: string,\n    deprecatedItemType: 'function' | 'prop' | 'method' | 'event'\n) {\n    if (window.location.hostname === 'localhost' || window.location.host === 'stack.q2developer.com') {\n        if (target[deprecatedItemName] === 'undefined') return;\n\n        const componentName = target.constructor.name.toLowerCase().slice(2);\n\n        switch (deprecatedItemType) {\n            case 'prop':\n                if (deprecatedItemName === 'size' && componentName === 'btn') {\n                    console.warn(\n                        `The property of size in q2-btn should not be typeof number, or typeof string containing a number. This functionality will be deprecated in an upcoming relase. Instead please use typeof string with any of the following values: \"small\" / \"medium\" / \"large\" / \"none\" `\n                    );\n                } else {\n                    console.warn(\n                        `The property ${deprecatedItemName} in q2-${componentName} has been marked for deprecation and will be removed in an upcoming major release.`\n                    );\n                }\n                break;\n\n            case 'function':\n                console.warn(\n                    `The function ${deprecatedItemName} in ${componentName} has been marked for deprecation and will be removed in an upcoming major release.`\n                );\n                break;\n\n            case 'method':\n                console.warn(\n                    `The method ${deprecatedItemName} in ${componentName} has been marked for deprecation and will be removed in an upcoming major release.`\n                );\n                break;\n\n            case 'event':\n                console.warn(\n                    `The event ${deprecatedItemName} in ${componentName} has been marked for deprecation and will be removed in an upcoming major release.`\n                );\n                break;\n\n            default:\n                console.error(\n                    `handleDeprecationWarning --> No type found for desired deprecation: ${deprecatedItemName} in q2-${componentName}: deprecatedItemType = ${deprecatedItemName}`\n                );\n        }\n    }\n}\n\nexport function messagesDOM(target: FormFieldTypes) {\n    const type = target.hasError ? 'danger' : 'info';\n\n    return (\n        <div class=\"messages-container\">\n            <q2-message\n                appearance=\"minimal\"\n                description\n                type={type}\n                test-id=\"message\"\n            >\n                <ul id={target.inputDescribedBy}>\n                    {target.messages.map(message => (\n                        <li test-id=\"messageListItem\">{loc(message)}</li>\n                    ))}\n                </ul>\n            </q2-message>\n        </div>\n    );\n}\n\nexport function setMessageHeight(target: FormFieldTypes) {\n    const messageContainer = (target.hostElement.shadowRoot as ShadowRoot).querySelector<HTMLDivElement>(\n        '.messages-container'\n    );\n    const q2Message = messageContainer.querySelector('q2-message');\n    nextPaint(() => {\n        const height = target.showMessages && target.hasFocus ? q2Message.getBoundingClientRect().height : 0;\n\n        if (messageContainer.style.getPropertyValue('height') === `${height}px`) return;\n\n        if (height === 0) {\n            q2Message.classList.add('invisible');\n            messageContainer.style.removeProperty('height');\n        } else {\n            q2Message.classList.remove('invisible');\n            messageContainer.style.setProperty('height', `${height}px`);\n        }\n    });\n}\n\nexport const resizeIframe = () => {\n    return window.TectonElements?.resizeIframe?.();\n};\n\n// Handling color attribute (deprecated)\nexport const handleColor = (target: Q2Btn) => {\n    if (!target.intent && ['primary', 'secondary'].includes(target.color)) {\n        target.intent = `workflow-${target.color}` as HTMLQ2BtnElement['intent'];\n        target.color = undefined;\n    }\n};\n"],"mappings":"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"}

package/dist/q2-tecton-elements/p-ae2fa966.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as e,h as i,g as s}from"./p-277dc8cd.js";import{l,h as o,o as r,d as a,i as n,e as c}from"./p-99ab3236.js";import{s as d,a as h}from"./p-788adb51.js";const p="*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}: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}.multi-select-header{padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-2, var(--app-scale-2x, 10px));position:sticky;top:0;z-index:5;background:var(--app-white);display:flex;gap:var(--app-scale-2x, 10px);align-items:center}.multi-select-header fieldset{margin:0;padding:0;border:0;display:flex;gap:var(--app-scale-2x, 10px)}.multi-select-header legend{padding:0;float:left}.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))))}.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))))))))}.multi-select-header input:checked+label,.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)))))}.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}.multi-select-header input:focus+label{box-shadow:var(--const-double-focus-ring)}";const u=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 t=this.hostElement.querySelector(".custom-display-content");const e=this.hostElement.shadowRoot.querySelector('slot[name="q2-select-display"]');const i=!!e?e.assignedNodes().length>0:t.children.length>0;if(this.hasCustomDisplay!==i){this.hasCustomDisplay=i}};this.onOptionListChange=t=>{t.stopPropagation();const{values:e}=t.detail;if(e.length===0)this.showAllOptions();this.handleSelectionChanges(t.detail)};this.popoverStateChanged=({detail:{open:t}})=>{if(this.open===t)return;this.open=t;if(t&&!this.searchText)return;this.optionList.setActiveElement(null);this.inputField.focus()};this.inputKeydownHandler=t=>{if(this.readonly||this.disabled)return;const e=["ArrowDown","ArrowUp","PageDown","PageUp","Home","End","Escape","Tab"];if(d(this,t)){return this.executeActionSheet(t)}if(this.searchable&&!e.includes(t.key))return;if(this.shouldClearSearchText(t))this.clearSearchText();if(t.key===" ")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();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=this.inputField.value;const i=t.detail.value;const s=e!==i;const l=!!this.value&&s;if(l)this.clearValue();if(!this.open)this.openDropdownWithoutActiveElement();this.prioritizeSearch=true;this.searchText=i;this.input.emit({query:i})};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=l("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.inputFocused=false;this.statusMessage=undefined;this.prioritizeSearch=false;this.structuredSelectedOptions=[]}componentWillLoad(){o(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 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(){o(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{multiple:e,multiSelectHeader:i,popoverElement:s}=this;const l=t&&e&&(i===null||i===void 0?void 0:i.offsetHeight)||0;if(l){s.style.setProperty("--comp-multi-select-header-height",`${l}px`)}else{s.style.removeProperty("--comp-multi-select-header-height")}}))}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 l=((e=t.firstElementChild)===null||e===void 0?void 0:e.tagName)==="Q2-CARD"?t.firstElementChild.title:null;const{display:o="",innerText:r=""}=t;const a=[o,l,r];const n=a.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=!n;if(n)s++}));const o=i?"tecton.element.select.searchable.results":"tecton.element.select.allOptions";const r=i?s:e.length;this.setStatusMessage(l(o,[r]))}delegateFocus(t){const e=a(t,this.hostElement);const i=this.prioritizeSearch=e&&this.searchable;if(i){this.clearSelectedDisplay()}else if(n(t,this.hostElement)){this.inputField.shadowRoot.querySelector(".input-field").focus()}}handleFocusout(t){const e=c(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 h(this,t);this.handleSelectionChanges(e)}handleSelectionChanges(t){const{value:e="",values:i=[]}=t;const s=i.map((t=>t.value));const{multiple:l}=this;if(!this.hostElement.onchange){this.selectedOptions=s}this.change.emit({value:l?undefined:e,selectedOptions:l?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:o,multilineOptions:r}=this;if(!o)return"";if(s===null||s===void 0?void 0:s.display)return l(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:o}calculateSingleSelectSelectedDisplay(){var t;const{firstSelectedOptionElement:e,multilineOptions:i}=this;if(i){return(e===null||e===void 0?void 0:e.display)&&l(e.display)||this.value||""}else{return(e===null||e===void 0?void 0:e.display)&&l(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)}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:l,firstSelectedOptionElement:o,prioritizeSearch:r}=this;const a=!e&&i&&!(s===null||s===void 0?void 0:s.length);if(r||!l||a)return this.clearSelectedDisplay();if(!o||o.display)return this.clearSelectedDisplay();const n=o.firstElementChild.cloneNode(true);n.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!==n.outerHTML){t.replaceChild(n,t.firstElementChild)}}else{t=document.createElement("div");t.slot="_selected-display";t.appendChild(n);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&&l(this.label)||"",value:this.selectedDisplay,errors:Array.isArray(this.errors)&&this.errors.length>0&&this.errors.map((t=>l(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.innerInputField,open:this.open,minHeight:this.popoverMinHeight,direction:this.popDirection,onPopoverStateChanged:this.popoverStateChanged,block:true},i("div",{class:"popover-content",tabindex:"-1"},i("q2-option-list",{ref:t=>this.optionList=t,type:"listbox",id:"option-list","show-selected":this.showSelected,"aria-label":this.listLabel,multiple:this.multiple,selectedOptions:this.structuredSelectedOptions,onChange:this.onOptionListChange},i("slot",null)),this.multiple&&this.visibilityToggle()))}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:o}=this;return i("div",{class:"multi-select-header",ref:t=>this.multiSelectHeader=t},i("fieldset",null,i("legend",{"aria-label":l("tecton.element.select.multiHeader.showing")},l("tecton.element.select.multiHeader.showing")),i("div",null,i("input",{class:"sr",type:"radio",id:"all",name:"viewDisplay",value:"all",checked:!o,"aria-label":l("tecton.element.select.multiHeader.allAriaLabel"),"test-id":"allOptionsButton",onClick:this.showAllOptions,onKeyDown:this.visibilityToggleKeyDown}),i("label",{htmlFor:"all"},l("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":l("tecton.element.select.multiHeader.selectedAriaLabel",[s]),checked:o,"test-id":"selectedOptionsButton",onClick:this.showSelectedOptions,onKeyDown:this.visibilityToggleKeyDown}),i("label",{htmlFor:"selected"},l("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"]}}};u.style=p;export{u as q2_select};
-//# sourceMappingURL=p-ae2fa966.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","Q2Select","this","scheduledAfterRender","showSelectedOptions","showSelected","showAllOptions","onMutationObserved","slotContainer","hostElement","querySelector","displaySlot","shadowRoot","hasCustomDisplay","assignedNodes","length","children","onOptionListChange","event","stopPropagation","values","detail","handleSelectionChanges","popoverStateChanged","open","searchText","optionList","setActiveElement","inputField","focus","inputKeydownHandler","readonly","disabled","keysForOptionListToHandle","shouldShowActionSheet","executeActionSheet","searchable","includes","key","shouldClearSearchText","clearSearchText","preventDefault","handleExternalKeydown","visibilityToggleKeyDown","isShiftTab","shiftKey","isRadioControlKey","setDefaultActiveElement","inputClickHandler","async","toggleDropdown","focusInput","inputInputHandler","inputValue","value","eventValue","didChangeText","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","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","multiSelectHeader","popoverElement","height","offsetHeight","style","setProperty","removeProperty","keydownHandler","onHostElementChange","onchange","onHostElementInput","oninput","options","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","dispatchEvent","FocusEvent","message","clearTimeout","statusMessageTimer","statusMessage","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","onPopoverStateChanged","block","tabindex","type","id","listLabel","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.multi-select-header {\n    padding: var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-2, var(--app-scale-2x, 10px));\n    position: sticky;\n    top: 0;\n    z-index: 5;\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(var-prefixer(select-multi-select-option-color), var-prefixer(btn-badge-font-color), inherit);\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","import {\n    Component,\n    Prop,\n    Element,\n    h,\n    Listen,\n    State,\n    EventEmitter,\n    Event,\n    ComponentInterface,\n    Watch,\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} 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() 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    multiSelectHeader?: 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(): HTMLElement {\n        return this.inputField?.shadowRoot?.querySelector('.input-field');\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) {\n        this.scheduledAfterRender.push(() => {\n            const { multiple, multiSelectHeader, popoverElement } = this;\n            const height = (isOpen && multiple && multiSelectHeader?.offsetHeight) || 0;\n            if (height) {\n                popoverElement.style.setProperty('--comp-multi-select-header-height', `${height}px`);\n            } else {\n                popoverElement.style.removeProperty('--comp-multi-select-header-height');\n            }\n        });\n    }\n\n    /// Events ///\n    @Event() change: EventEmitter<{ value: string; selectedOptions: string[] }>;\n    @Event() input: EventEmitter;\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 slotContainer = this.hostElement.querySelector('.custom-display-content');\n        const displaySlot = this.hostElement.shadowRoot.querySelector<HTMLSlotElement>(\n            'slot[name=\"q2-select-display\"]'\n        );\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\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    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    popoverStateChanged = ({ detail: { open } }: CustomEvent<{ open: boolean }>) => {\n        if (this.open === open) return;\n        this.open = open;\n        if (open && !this.searchText) return;\n        this.optionList.setActiveElement(null);\n        this.inputField.focus();\n    };\n\n    inputKeydownHandler = (event: KeyboardEvent) => {\n        if (this.readonly || this.disabled) return;\n        const keysForOptionListToHandle = [\n            'ArrowDown',\n            'ArrowUp',\n            'PageDown',\n            'PageUp',\n            'Home',\n            'End',\n            'Escape',\n            'Tab',\n        ];\n        if (shouldShowActionSheet(this, event)) {\n            return this.executeActionSheet(event);\n        }\n        if (this.searchable && !keysForOptionListToHandle.includes(event.key)) return;\n        if (this.shouldClearSearchText(event)) this.clearSearchText();\n\n        // Prevent click event from firing when spacebar is pressed\n        if (event.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            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 inputValue = this.inputField.value;\n        const eventValue = event.detail.value;\n        const didChangeText = inputValue !== eventValue;\n        const shouldClearValue = !!this.value && didChangeText;\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.innerInputField}\n                open={this.open}\n                minHeight={this.popoverMinHeight}\n                direction={this.popDirection}\n                onPopoverStateChanged={this.popoverStateChanged}\n                block\n            >\n                <div\n                    class=\"popover-content\"\n                    tabindex=\"-1\"\n                >\n                    <q2-option-list\n                        ref={el => (this.optionList = el)}\n                        type=\"listbox\"\n                        id=\"option-list\"\n                        show-selected={this.showSelected}\n                        aria-label={this.listLabel}\n                        multiple={this.multiple}\n                        selectedOptions={this.structuredSelectedOptions}\n                        onChange={this.onOptionListChange}\n                    >\n                        <slot />\n                    </q2-option-list>\n                    {this.multiple && this.visibilityToggle()}\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\n                class=\"multi-select-header\"\n                ref={el => (this.multiSelectHeader = el)}\n            >\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-b8d1c16f.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as i,h as o,F as e,g as a}from"./p-277dc8cd.js";import{l as r,w as s}from"./p-99ab3236.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 #33b4ff #06C)}: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}.interior.is-list header:before{top:calc(100% + var(--comp-dialog-gap));background:linear-gradient(to bottom, var(--t-base) 0%, var(--t-base-a0) 100%)}.interior.is-list footer:before{top:calc((var(--comp-dialog-gap) + var(--comp-content-gradient-height)) * -1);background:linear-gradient(to top, var(--t-base) 0%, var(--t-base-a0) 100%)}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 o={};for(var e in t)if(Object.prototype.hasOwnProperty.call(t,e)&&i.indexOf(e)<0)o[e]=t[e];if(t!=null&&typeof Object.getOwnPropertySymbols==="function")for(var a=0,e=Object.getOwnPropertySymbols(t);a<e.length;a++){if(i.indexOf(e[a])<0&&Object.prototype.propertyIsEnumerable.call(t,e[a]))o[e[a]]=t[e[a]]}return o};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 o=c(t,["innerHTML"]);if(t.innerHTML)i.innerHTML=t.innerHTML;Object.entries(o).forEach((([t,o])=>{if(o===undefined)return;if(typeof o==="boolean"){if(o)i.setAttribute(t,"")}else{i.setAttribute(t,o)}}));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 o=!!i.closest(".interior, q2-action-sheet");if(o)return;this.onCancel(t)};this.onCancel=t=>{var i,o;t.preventDefault();const{initialSelectedOptions:e}=this;this.hide({value:(o=(i=e===null||e===void 0?void 0:e[0])===null||i===void 0?void 0:i.value)!==null&&o!==void 0?o:"",values:e,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=()=>o("div",{class:"content",ref:t=>this.contentElement=t},o("slot",null));this.renderMessage=({data:t})=>o("q2-message",{type:t.type},t.title&&o("h2",null,t.title),t.description&&o("p",null,t.description));this.renderList=({data:t})=>{const{listProps:i}=t;return o(e,null,o("div",{class:"content",ref:t=>this.contentElement=t},o("q2-option-list",{ref:t=>this.optionListElement=t,multiple:i.multiple,noSelect:i.noSelect,onChange:this.onListChange,onPopoverState:this.onListPopoverStateChange,selectedOptions:i.selectedOptions},o("slot",null))),o("footer",null,i.multiple&&o("q2-btn",{"test-id":"btnDone",intent:"workflow-primary",onClick:this.onListDone},r("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 s();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 e=(i===null||i===void 0?void 0:i.title)||this.title||!this.hideClose;const a=this.renderStatus||"";let r=null;switch(i===null||i===void 0?void 0:i.appearance){case"message":r=this.renderMessage;break;case"list":r=this.renderList;break;default:r=this.renderSlot;break}const s=(i===null||i===void 0?void 0:i.appearance)||"slot";const n=`interior is-${s}`;return o("dialog",{ref:t=>this.dialogElement=t,class:a,onClick:this.onClick},o("div",{class:n},e&&o("header",null,o("div",{class:"title"},(i===null||i===void 0?void 0:i.title)||this.title),!this.hideClose&&o("q2-btn",{class:"btn-close","test-id":"btnClose",onClick:this.onCancel,label:"tecton.element.actionSheet.close","hide-label":true},o("q2-icon",{type:"close"}))),((t=this.data)===null||t===void 0?void 0:t.description)&&o("p",null,i.description),r&&o(r,{data:this.data})))}get hostElement(){return a(this)}};l.style=n;export{l as q2_action_sheet};
-//# sourceMappingURL=p-b8d1c16f.entry.js.map

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

@@ -1 +0,0 @@
-{"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        header:before {\n            top: calc(100% + var(--comp-dialog-gap));\n            background: linear-gradient(to bottom, var(--t-base) 0%, var(--t-base-a0) 100%);\n        }\n\n        footer:before {\n            top: calc(calc(var(--comp-dialog-gap) + var(--comp-content-gradient-height)) * -1);\n            background: linear-gradient(to top, var(--t-base) 0%, var(--t-base-a0) 100%);\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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"}

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

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","Q2CheckboxGroup","this","_id","createGuid","onMutationObserved","valueUpdated","updateDisabled","onInnerCheckboxChange","event","stopImmediatePropagation","groupValue","checkboxElements","forEach","check","value","checked","change","emit","Array","from","hostElement","querySelectorAll","protectedValue","componentDidLoad","observer","MutationObserver","observe","childList","mutationObserver","disconnectedCallback","disconnect","readonly","hasOwnProperty","groupDisabled","disabled","checkbox","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 { Component, Prop, Element, h, Listen, EventEmitter, Event, ComponentInterface, Watch } 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        this.checkboxElements.forEach(check => {\n            groupValue[check.value] = !!check.checked;\n        });\n        this.change.emit(groupValue);\n    };\n\n    ///// LIFECYCLE HOOK ///////\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    ///// 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,MCQLC,EAAe,M,wDASxBC,KAAAC,IAAc,kBAAkBC,MAWhCF,KAAAG,mBAAqB,KACjBH,KAAKI,eACLJ,KAAKK,gBAAgB,EAGzBL,KAAAM,sBAAyBC,IACrBA,EAAMC,2BACN,MAAMC,EAAa,GACnBT,KAAKU,iBAAiBC,SAAQC,IAC1BH,EAAWG,EAAMC,SAAWD,EAAME,OAAO,IAE7Cd,KAAKe,OAAOC,KAAKP,EAAW,E,wDA5Ba,M,cACA,M,cACA,M,cACA,K,CAMzCC,uBACA,OAAOO,MAAMC,KAAKlB,KAAKmB,YAAYC,iBAAiB,e,CAGpDC,qBACA,OAAOrB,KAAKa,OAAS,E,CAmBzBS,mBACI,MAAMC,EAAW,IAAIC,iBAAiBxB,KAAKG,oBAC3CoB,EAASE,QAAQzB,KAAKmB,YAAa,CAAEO,UAAW,OAChD1B,KAAK2B,iBAAmBJ,EACxBvB,KAAKG,oB,CAGTyB,uBACI,GAAI5B,KAAK2B,iBAAkB,CACvB3B,KAAK2B,iBAAiBE,aACtB7B,KAAK2B,iBAAmB,I,EAKhCvB,eACI,GAAIJ,KAAK8B,SAAU,OACnB9B,KAAKU,iBAAiBC,SAAQC,IAC1B,GAAIZ,KAAKqB,eAAeU,eAAenB,EAAMC,OAAQ,CACjDD,EAAME,QAAUd,KAAKa,MAAMD,EAAMC,M,KAM7CR,iBACI,MAAM2B,EAAgBhC,KAAKiC,SAC3BjC,KAAKU,iBAAiBC,SAAQuB,IAC1BA,EAASF,cAAgBA,CAAa,G,CAS9CG,oBAAoB5B,GAChB,GAAIA,EAAM6B,SAAWpC,KAAKmB,cAAgBnB,KAAKmB,YAAYkB,SAAU,CACjErC,KAAKa,MAAQN,EAAM+B,M,EAI3BC,SACI,OACIC,EAAA,WACKxC,KAAKyC,OAASzC,KAAK0C,SAChBF,EAAA,OAAKG,MAAM,gBACN3C,KAAKyC,OAASG,EAAI5C,KAAKyC,OACvBzC,KAAK0C,SAAWF,EAAA,QAAMG,MAAM,gBAAgBC,EAAI,kCAA2C,IAC1F,GAIVJ,EAAA,YACIG,MAAO,wBAAwB3C,KAAK6C,SAAW,YAAc,KAC7DC,SAAU9C,KAAKM,sBAAqB,eACtB,GAAGN,KAAK6C,YAErB7C,KAAKyC,OAASzC,KAAK0C,SAChBF,EAAA,UAAQG,MAAM,WACT3C,KAAKyC,OAASG,EAAI5C,KAAKyC,OACvBzC,KAAK0C,SACFF,EAAA,QAAMG,MAAM,gBAAgBC,EAAI,kCAAwC,IAIvE,GAIZ5C,KAAK6C,SACFL,EAAA,OAAKG,MAAO,wBAAwB3C,KAAKyC,OAASzC,KAAK0C,SAAW,GAAK,cACnEF,EAAA,WACIG,MAAM,qBACNI,KAAK,WAEP,GAIT/C,KAAKgD,Y,CAMtBA,WACI,OAAOR,EAAA,Y"}

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

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