q2-tecton-elements 1.50.2 → 1.50.3

package/dist/q2-tecton-elements/{p-2e26e06d.entry.js → p-f50cfb8d.entry.js}

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

package/dist/q2-tecton-elements/{p-d5a11ae4.entry.js → p-f5ce223b.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as i,h as a,F as e,H as o,g as r}from"./p-a5f18e27.js";import{o as s,i as n,w as c,l as h}from"./p-19784a09.js";import{a as p,s as l}from"./p-b7554a79.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 #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block;position:relative;line-height:0}:host(:not(:last-child)){margin-inline-end:var(--tct-tag-margin, var(--t-tag-margin, var(--app-scale-2x, 10px)))}.tag-wrapper{--comp-tag-btn-size:var(--tct-tag-btn-size, var(--t-tag-btn-size, var(--app-scale-6x, 30px)));--comp-tag-background:var(--tct-tag-background, var(--t-tag-background, var(--t-gray-13, #e6e6e6)));--comp-tag-color:var(--tct-tag-color, var(--t-tag-color, var(--t-gray-3, #262626)));background:var(--comp-tag-background);color:var(--comp-tag-color);border-radius:var(--tct-tag-border-radius, var(--t-tag-border-radius, var(--app-border-radius-1, 4px)));position:relative}:host([theme=primary]) .tag-wrapper{--comp-tag-background:var(--tct-tag-primary-background, var(--t-primary, #0079c1));--comp-tag-color:var(--tct-tag-primary-font-color, var(--t-primary-text, #ffffff))}:host([theme=secondary]) .tag-wrapper{--comp-tag-background:var(--tct-tag-secondary-background, var(--t-secondary, #b3c2cc));--comp-tag-color:var(--tct-tag-secondary-font-color, var(--t-secondary-text, #141414))}:host([theme=tertiary]) .tag-wrapper{--comp-tag-background:var(--tct-tag-tertiary-background, var(--t-tertiary, #e8f5fc));--comp-tag-color:var(--tct-tag-tertiary-font-color, var(--t-tertiary-text, #141414))}.tag{display:flex;width:max-content;height:var(--tct-tag-height, var(--t-tag-height, var(--app-scale-6x, 30px)));line-height:var(--tct-tag-height, var(--t-tag-height, var(--app-scale-6x, 30px)));padding-inline:var(--tct-tag-padding-inline, var(--t-tag-padding-inline, var(--app-scale-3x, 15px)))}.tag.has-options{padding-right:6px}.btn-wrapper{--comp-tag-clickable-size:var(--tct-tag-clickable-size, var(--t-tag-clickable-size, 44px));--comp-tag-btn-offset:calc(calc(calc(var(--comp-tag-clickable-size) - var(--comp-tag-btn-size)) / 2) * -1);--comp-tag-background:var(--tct-tag-background, var(--t-tag-background, var(--t-gray-13, #e6e6e6)));height:var(--comp-tag-clickable-size);display:flex;align-items:center;justify-content:center;position:relative;right:var(--comp-tag-btn-offset);top:var(--comp-tag-btn-offset);cursor:pointer}button{height:var(--comp-tag-btn-size);stroke:var(--comp-tag-color);--tct-icon-stroke-primary:var(--comp-tag-color);cursor:pointer;border:0;background:transparent;display:flex;align-items:center;justify-content:center;padding:0;padding-right:6px;--tct-icon-size:18px}";const g=d;const v=class{constructor(a){t(this,a);this.click=i(this,"click",7);var e;this.determineOptionCount=()=>{const t=this.hostElement.querySelectorAll("q2-option").length;this.optionCount=t};this.handleButtonFocusout=async t=>{const i=t.relatedTarget;if((i===null||i===void 0?void 0:i.tagName)==="Q2-OPTION")return;this.open=false};this.handleChange=t=>{t.stopPropagation();if(!this.optionCount)return;const{value:i}=t.detail;this.click.emit({value:i})};this.handleClick=async t=>{t.stopPropagation();this.popoverElement.controlElement=this.dropdownBtn;if(p(this)){const{value:i}=await l(this,t);this.click.emit({value:i})}else{await this.popoverElement.toggle()}};this.handleKeydown=async t=>{const i=t.metaKey||t.ctrlKey||t.key==="Tab";if(i)return;t.preventDefault();this.popoverElement.controlElement=this.dropdownBtn;if(p(this,t)){const{value:i}=await l(this,t);this.click.emit({value:i})}else{this.optionList.handleExternalKeydown(t)}};this.handleWrapperClick=()=>{this.dropdownBtn.focus();this.dropdownBtn.click()};this.onClickElsewhere=t=>{const i=t.target;if(i.localName==="click-elsewhere"){t.stopPropagation();const{popoverElement:i}=this;if(!i)return;i.open=false}};this.optionCount=undefined;this.hoist=!!((e=window.Tecton)===null||e===void 0?void 0:e.useActionSheets);this.label=undefined;this.open=undefined;this.optionListLabel="options";this.popoverAlignment="right";this.popoverDirection=undefined;this.popoverMinHeight=150;this.theme=undefined}disconnectedCallback(){this.mutationObserver.disconnect();this.mutationObserver=null}componentWillLoad(){const t=new MutationObserver(this.determineOptionCount);t.observe(this.hostElement,{childList:true,attributes:true});this.mutationObserver=t}componentDidLoad(){s(this.hostElement)}delegateFocus(t){if(!n(t,this.hostElement))return;if(!this.optionCount)return;this.dropdownBtn.focus()}popoverStateHandler({detail:{open:t}}){if(this.open!==t)this.open=t;if(t)return;this.optionList.setActiveElement(null)}async closePopover(){if(!this.optionCount||!this.open)return;this._togglePopover()}async openPopover(){if(!this.optionCount||this.open)return;this._togglePopover()}async selectOption(t){if(!this.optionCount)return;await this.openPopover();await c();const i=await this.optionList.getOptions();const a=i.find((i=>i.value===t));a===null||a===void 0?void 0:a.click()}_togglePopover(){const{dropdownBtn:t}=this;t===null||t===void 0?void 0:t.click();t===null||t===void 0?void 0:t.focus();t.dispatchEvent(new FocusEvent("focus"))}renderHiddenElement(){return a("div",{id:"option-description",class:"sr","aria-hidden":"true"},h("tecton.element.optionList.optionCount",[this.optionCount]))}render(){const{optionCount:t,open:i}=this;const r=["tag"];if(t)r.push("has-options");return a(o,{key:"b027f018dea8989b53707713d064c817dbccbda4",role:this.optionCount>0?"list":undefined},a("click-elsewhere",{key:"44a07843fe26b539a88d8101f4af1dd80bc9467e",onChange:this.onClickElsewhere},this.optionCount?a(e,null,a("div",{class:"btn-wrapper",onClick:this.handleWrapperClick},a("button",{class:"tag-wrapper",ref:t=>this.dropdownBtn=t,"test-id":"btn-control",type:"button",role:"combobox",onClick:this.handleClick,onKeyDown:this.handleKeydown,onFocusout:this.handleButtonFocusout,"aria-controls":"option-list","aria-expanded":i?"true":"false","aria-describedby":"option-description"},a("div",{class:r.join(" ")},this.label),a("q2-icon",{type:"options"}))),this.renderHiddenElement()):a("div",{class:"tag-wrapper",onClick:t=>t.stopPropagation()},a("div",{class:r.join(" ")},this.label)),this.optionCount>0&&a("q2-popover",{key:"fdbfddc69c582dc832f8cf61451d59488deba732",ref:t=>this.popoverElement=t,controlElement:this.dropdownBtn,open:this.open,minHeight:this.popoverMinHeight,direction:this.popoverDirection,align:this.popoverAlignment},a("q2-option-list",{key:"859634222f8aacc21ebb9615b46fb89658e32792",id:"option-list",ref:t=>this.optionList=t,onChange:this.handleChange,type:"menu",align:"right",label:h("tecton.element.optionList.label",[this.optionListLabel]),"no-select":true},a("slot",{key:"f3ca63429a477b7a4524f9ff897fc689089a15fb"})))))}get hostElement(){return r(this)}};v.style=g;export{v as q2_tag};
-//# sourceMappingURL=p-d5a11ae4.entry.js.map
+import{r as t,c as i,h as a,F as e,H as o,g as r}from"./p-a5f18e27.js";import{o as s,i as n,w as c,l as h}from"./p-ff8ed604.js";import{a as p,s as l}from"./p-b7554a79.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 #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block;position:relative;line-height:0}:host(:not(:last-child)){margin-inline-end:var(--tct-tag-margin, var(--t-tag-margin, var(--app-scale-2x, 10px)))}.tag-wrapper{--comp-tag-btn-size:var(--tct-tag-btn-size, var(--t-tag-btn-size, var(--app-scale-6x, 30px)));--comp-tag-background:var(--tct-tag-background, var(--t-tag-background, var(--t-gray-13, #e6e6e6)));--comp-tag-color:var(--tct-tag-color, var(--t-tag-color, var(--t-gray-3, #262626)));background:var(--comp-tag-background);color:var(--comp-tag-color);border-radius:var(--tct-tag-border-radius, var(--t-tag-border-radius, var(--app-border-radius-1, 4px)));position:relative}:host([theme=primary]) .tag-wrapper{--comp-tag-background:var(--tct-tag-primary-background, var(--t-primary, #0079c1));--comp-tag-color:var(--tct-tag-primary-font-color, var(--t-primary-text, #ffffff))}:host([theme=secondary]) .tag-wrapper{--comp-tag-background:var(--tct-tag-secondary-background, var(--t-secondary, #b3c2cc));--comp-tag-color:var(--tct-tag-secondary-font-color, var(--t-secondary-text, #141414))}:host([theme=tertiary]) .tag-wrapper{--comp-tag-background:var(--tct-tag-tertiary-background, var(--t-tertiary, #e8f5fc));--comp-tag-color:var(--tct-tag-tertiary-font-color, var(--t-tertiary-text, #141414))}.tag{display:flex;width:max-content;height:var(--tct-tag-height, var(--t-tag-height, var(--app-scale-6x, 30px)));line-height:var(--tct-tag-height, var(--t-tag-height, var(--app-scale-6x, 30px)));padding-inline:var(--tct-tag-padding-inline, var(--t-tag-padding-inline, var(--app-scale-3x, 15px)))}.tag.has-options{padding-right:6px}.btn-wrapper{--comp-tag-clickable-size:var(--tct-tag-clickable-size, var(--t-tag-clickable-size, 44px));--comp-tag-btn-offset:calc(calc(calc(var(--comp-tag-clickable-size) - var(--comp-tag-btn-size)) / 2) * -1);--comp-tag-background:var(--tct-tag-background, var(--t-tag-background, var(--t-gray-13, #e6e6e6)));height:var(--comp-tag-clickable-size);display:flex;align-items:center;justify-content:center;position:relative;right:var(--comp-tag-btn-offset);top:var(--comp-tag-btn-offset);cursor:pointer}button{height:var(--comp-tag-btn-size);stroke:var(--comp-tag-color);--tct-icon-stroke-primary:var(--comp-tag-color);cursor:pointer;border:0;background:transparent;display:flex;align-items:center;justify-content:center;padding:0;padding-right:6px;--tct-icon-size:18px}";const g=d;const v=class{constructor(a){t(this,a);this.click=i(this,"click",7);var e;this.determineOptionCount=()=>{const t=this.hostElement.querySelectorAll("q2-option").length;this.optionCount=t};this.handleButtonFocusout=async t=>{const i=t.relatedTarget;if((i===null||i===void 0?void 0:i.tagName)==="Q2-OPTION")return;this.open=false};this.handleChange=t=>{t.stopPropagation();if(!this.optionCount)return;const{value:i}=t.detail;this.click.emit({value:i})};this.handleClick=async t=>{t.stopPropagation();this.popoverElement.controlElement=this.dropdownBtn;if(p(this)){const{value:i}=await l(this,t);this.click.emit({value:i})}else{await this.popoverElement.toggle()}};this.handleKeydown=async t=>{const i=t.metaKey||t.ctrlKey||t.key==="Tab";if(i)return;t.preventDefault();this.popoverElement.controlElement=this.dropdownBtn;if(p(this,t)){const{value:i}=await l(this,t);this.click.emit({value:i})}else{this.optionList.handleExternalKeydown(t)}};this.handleWrapperClick=()=>{this.dropdownBtn.focus();this.dropdownBtn.click()};this.onClickElsewhere=t=>{const i=t.target;if(i.localName==="click-elsewhere"){t.stopPropagation();const{popoverElement:i}=this;if(!i)return;i.open=false}};this.optionCount=undefined;this.hoist=!!((e=window.Tecton)===null||e===void 0?void 0:e.useActionSheets);this.label=undefined;this.open=undefined;this.optionListLabel="options";this.popoverAlignment="right";this.popoverDirection=undefined;this.popoverMinHeight=150;this.theme=undefined}disconnectedCallback(){this.mutationObserver.disconnect();this.mutationObserver=null}componentWillLoad(){const t=new MutationObserver(this.determineOptionCount);t.observe(this.hostElement,{childList:true,attributes:true});this.mutationObserver=t}componentDidLoad(){s(this.hostElement)}delegateFocus(t){if(!n(t,this.hostElement))return;if(!this.optionCount)return;this.dropdownBtn.focus()}popoverStateHandler({detail:{open:t}}){if(this.open!==t)this.open=t;if(t)return;this.optionList.setActiveElement(null)}async closePopover(){if(!this.optionCount||!this.open)return;this._togglePopover()}async openPopover(){if(!this.optionCount||this.open)return;this._togglePopover()}async selectOption(t){if(!this.optionCount)return;await this.openPopover();await c();const i=await this.optionList.getOptions();const a=i.find((i=>i.value===t));a===null||a===void 0?void 0:a.click()}_togglePopover(){const{dropdownBtn:t}=this;t===null||t===void 0?void 0:t.click();t===null||t===void 0?void 0:t.focus();t.dispatchEvent(new FocusEvent("focus"))}renderHiddenElement(){return a("div",{id:"option-description",class:"sr","aria-hidden":"true"},h("tecton.element.optionList.optionCount",[this.optionCount]))}render(){const{optionCount:t,open:i}=this;const r=["tag"];if(t)r.push("has-options");return a(o,{key:"b027f018dea8989b53707713d064c817dbccbda4",role:this.optionCount>0?"list":undefined},a("click-elsewhere",{key:"44a07843fe26b539a88d8101f4af1dd80bc9467e",onChange:this.onClickElsewhere},this.optionCount?a(e,null,a("div",{class:"btn-wrapper",onClick:this.handleWrapperClick},a("button",{class:"tag-wrapper",ref:t=>this.dropdownBtn=t,"test-id":"btn-control",type:"button",role:"combobox",onClick:this.handleClick,onKeyDown:this.handleKeydown,onFocusout:this.handleButtonFocusout,"aria-controls":"option-list","aria-expanded":i?"true":"false","aria-describedby":"option-description"},a("div",{class:r.join(" ")},this.label),a("q2-icon",{type:"options"}))),this.renderHiddenElement()):a("div",{class:"tag-wrapper",onClick:t=>t.stopPropagation()},a("div",{class:r.join(" ")},this.label)),this.optionCount>0&&a("q2-popover",{key:"fdbfddc69c582dc832f8cf61451d59488deba732",ref:t=>this.popoverElement=t,controlElement:this.dropdownBtn,open:this.open,minHeight:this.popoverMinHeight,direction:this.popoverDirection,align:this.popoverAlignment},a("q2-option-list",{key:"859634222f8aacc21ebb9615b46fb89658e32792",id:"option-list",ref:t=>this.optionList=t,onChange:this.handleChange,type:"menu",align:"right",label:h("tecton.element.optionList.label",[this.optionListLabel]),"no-select":true},a("slot",{key:"f3ca63429a477b7a4524f9ff897fc689089a15fb"})))))}get hostElement(){return r(this)}};v.style=g;export{v as q2_tag};
+//# sourceMappingURL=p-f5ce223b.entry.js.map

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

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as i,F as s,g as o}from"./p-a5f18e27.js";import{c as l,d as n,l as r,a,o as c,q as h,i as d,w as p}from"./p-ff8ed604.js";import{a as u,s as v}from"./p-b7554a79.js";const f="*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.q2-element-dropdown{display:none;position:absolute;background-color:var(--app-white, #ffffff);color:var(--t-text, #4d4d4d);left:0;width:100%;z-index:100;margin-top:1px;box-shadow:var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14));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, 4px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.q2-element-dropdown::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.q2-element-dropdown::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown.sizable{display:block;height:auto}.dropdown-open .q2-element-dropdown{display:block;height:auto;overflow:auto;opacity:1;visibility:visible}:host([alignment=right]) .q2-element-dropdown{left:auto;right:0}:host([block]) q2-btn,:host([block]){display:block}:host{--comp-select-margin:var(--tct-select-margin, var(--tct-select-margin-top, var(--t-select-margin-top, var(--app-scale-4, 30px))) 0 var(--tct-select-margin-bottom, var(--t-select-margin-bottom, var(--app-scale-4, 30px))));display:block;margin:var(--comp-select-margin)}.q2-select-container{position:relative;display:block}.q2-select-input{margin:0;--tct-input-min-height:var(--tct-select-input-min-height, var(--t-select-input-min-height));--tct-input-max-height:var(--tct-select-input-max-height, var(--t-select-input-max-height, none))}::slotted([slot=_selected-display]){width:100%;min-height:var(--comp-selected-display-height, 44px)}.custom-display-content{position:absolute;bottom:0;left:calc(var(--tct-scale-2, var(--app-scale-2x, 10px)) + 1px);height:44px;width:calc(100% - 34px - var(--tct-scale-3, var(--app-scale-3x, 15px)));overflow:hidden;cursor:pointer;transition:left var(--tct-tween-2, var(--app-tween-1, 0.2s ease))}.custom-display-content:not([hidden]){display:flex;align-items:center}.is-searchable.is-focused .custom-display-content,.is-searchable .custom-display-content:active{left:calc(var(--tct-scale-3, var(--app-scale-3x, 15px)) + 1px)}.has-error .custom-display-content{width:calc(100% - 68px - var(--tct-scale-3, var(--app-scale-3x, 15px)))}.popover-content{display:flex;flex-direction:column-reverse}.popover-bottom-container{position:sticky;bottom:0;z-index:5}.popover-top-container{position:sticky;top:0;z-index:5}.popover-top-container .multi-select-header{padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-2, var(--app-scale-2x, 10px));background:var(--app-white);display:flex;gap:var(--app-scale-2x, 10px);align-items:center}.popover-top-container .multi-select-header fieldset{margin:0;padding:0;border:0;display:flex;gap:var(--app-scale-2x, 10px)}.popover-top-container .multi-select-header legend{padding:0;float:left}.popover-top-container .multi-select-header label{cursor:pointer;padding:var(--tct-select-multi-select-option-padding, var(--t-select-multi-select-option-padding, var(--tct-btn-badge-padding, var(--t-btn-badge-padding, 2px 5px))));font-size:var(--tct-select-multi-select-option-font-size, var(--t-select-multi-select-option-font-size, var(--tct-btn-badge-font-size, var(--t-btn-badge-font-size, inherit))));border-radius:var(--tct-select-multi-select-option-radius, var(--t-select-multi-select-option-radius, var(--tct-btn-badge-border-radius, var(--t-btn-badge-border-radius, var(--app-border-radius-1, 4px)))));background:var(--tct-select-multi-select-option-background, var(--tct-select-multi-select-option-bg, var(--t-select-multi-select-option-bg, var(--tct-badge-background, var(--tct-btn-badge-bg, var(--t-btn-badge-bg, transparent))))));color:var(--tct-select-multi-select-option-color, var(--t-select-multi-select-option-color, var(--tct-btn-badge-font-color, var(--t-btn-badge-font-color, inherit))))}.popover-top-container .multi-select-header label:hover{background:var(--tct-select-multi-select-option-hover-background, var(--tct-select-multi-select-option-hover-background-color, var(--t-select-multi-select-option-hover-background-color, var(--tct-btn-badge-hover-bg, var(--t-btn-badge-hover-bg, var(--tct-gray-14, var(--t-gray-14, var(--app-gray-l3, #f2f2f2))))))));color:var(--tct-select-multi-select-option-hover-color, var(--tct-select-multi-select-option-color, var(--t-select-multi-select-option-color, var(--tct-btn-badge-hover-font-color, var(--t-btn-badge-hover-font-color, var(--tct-gray-5, var(--t-gray-5, var(--app-gray-d2, #404040))))))))}.popover-top-container .multi-select-header input:checked+label,.popover-top-container .multi-select-header input:checked+label:enabled:hover{background:var(--tct-select-multi-select-option-active-background, var(--tct-select-multi-select-option-active-background-color, var(--t-select-multi-select-option-active-background-color, var(--tct-btn-primary-bg, var(--t-btn-primary-bg, #2e2e2e)))));color:var(--tct-select-multi-select-option-active-color, var(--t-select-multi-select-option-active-color, var(--tct-btn-primary-font-color, var(--t-btn-primary-font-color, var(--app-white, #ffffff)))))}.popover-top-container .multi-select-header input:disabled+label{opacity:var(--tct-select-multi-select-option-disabled-opacity, var(--t-select-multi-select-option-disabled-opacity, var(--tct-btn-disabled-opacity, var(--t-btn-disabled-opacity, var(--app-disabled-opacity, 0.4)))));cursor:not-allowed}.popover-top-container .multi-select-header input:focus+label{box-shadow:var(--const-double-focus-ring)}";const b=f;const m=class{constructor(i){t(this,i);this.change=e(this,"change",7);this.input=e(this,"input",7);var s;this.guid=l();this.lastTouchWasInPopover=false;this.scheduledAfterRender=[];this.addTouchEventListeners=()=>{if(!n()||!this.popoverElement)return;this.popoverElement.addEventListener("touchstart",this.handleTouchStart,{passive:true})};this.clickedElsewhere=t=>{const e=t.target;if(e.localName!=="click-elsewhere")return;t.stopPropagation();const{popoverElement:i}=this;if(!i)return;i.open=false;this.innerInputField.blur()};this.destroyEventListeners=()=>{var t;if(!n())return;(t=screen===null||screen===void 0?void 0:screen.orientation)===null||t===void 0?void 0:t.removeEventListener("change",this.handleOrientationChange);window.removeEventListener("resize",this.handleOrientationChange);visualViewport===null||visualViewport===void 0?void 0:visualViewport.removeEventListener("resize",this.handleOrientationChange);this.removeTouchEventListeners()};this.handleOrientationChange=()=>{var t,e,i;if(!n())return;let s;if(this.isModule){s=(t=window.Tecton)===null||t===void 0?void 0:t.platformDimensions.orientationType.includes("landscape")}else{s=(i=(e=screen===null||screen===void 0?void 0:screen.orientation)===null||e===void 0?void 0:e.type)===null||i===void 0?void 0:i.includes("landscape")}if(s&&this.searchable)this.searchable=false;if(!s)this.searchable=this.originalSearchable};this.handleTouchStart=t=>{if(document.activeElement===this.hostElement){const e=t.target;if(e&&e!==this.hostElement){this.inputFocused=false;this.lastTouchWasInPopover=true;e.focus()}}};this.initEventListeners=()=>{var t;if(!n())return;(t=screen===null||screen===void 0?void 0:screen.orientation)===null||t===void 0?void 0:t.addEventListener("change",this.handleOrientationChange);window.addEventListener("resize",this.handleOrientationChange);visualViewport===null||visualViewport===void 0?void 0:visualViewport.addEventListener("resize",this.handleOrientationChange)};this.initMutationObserver=()=>{const t=new MutationObserver(this.onMutationObserved);t.observe(this.hostElement,{childList:true,subtree:true});this.mutationObserver=t;this.onMutationObserved()};this.inputBlurHandler=()=>{this.inputFocused=false};this.inputChangeHandler=t=>{t.stopPropagation()};this.inputClickHandler=async t=>{t.stopPropagation();if(this.lastTouchWasInPopover&&this.open&&this.searchable){this.lastTouchWasInPopover=false;this.focusInput();return}this.lastTouchWasInPopover=false;if(u(this)){return this.executeActionSheet(t)}this.toggleDropdown();this.focusInput()};this.inputFocusHandler=()=>{this.inputFocused=true};this.inputInputHandler=t=>{t.stopPropagation();const e=t.detail.value;const i=!!this.value;if(i)this.clearValue();if(!this.open)this.openDropdownWithoutActiveElement();this.prioritizeSearch=true;this.searchText=e;this.input.emit({query:e})};this.inputKeydownHandler=t=>{if(this.readonly||this.disabled)return;const{key:e,shiftKey:i}=t;const s=e==="Tab"&&i;const o=this.hasPopoverTop||this.hasPopoverBottom;if(o&&(e==="Tab"||s))return;if(u(this,t)&&!o){return this.executeActionSheet(t)}const l=["ArrowDown","ArrowUp","PageDown","PageUp","Home","End","Escape","Tab"];if(this.searchable&&(e===" "||e==="Enter")&&this.inputField.value==""){t.preventDefault();if(!this.open)this.openDropdownWithoutActiveElement()}if(this.searchable&&!l.includes(e))return;if(this.shouldClearSearchText(t))this.clearSearchText();if(e===" ")t.preventDefault();this.handleOptionListExternalKeydown(t)};this.onCustomDisplayClick=t=>{t.stopPropagation();this.focusInput();this.toggleDropdown()};this.onMutationObserved=()=>{const{hostElement:t,hasPopoverTop:e,hasPopoverBottom:i}=this;const s=t.querySelector(".custom-display-content");const o=t.shadowRoot.querySelector('slot[name="q2-select-display"]');const l=!!o?o.assignedNodes().length>0:s.children.length>0;if(this.hasCustomDisplay!==l){this.hasCustomDisplay=l}const n=t.shadowRoot.querySelector('slot[name="popover-top"]');const r=(n===null||n===void 0?void 0:n.assignedNodes().length)>0;if(e!==r){this.hasPopoverTop=r}const a=t.shadowRoot.querySelector('slot[name="popover-bottom"]');const c=(a===null||a===void 0?void 0:a.assignedNodes().length)>0;if(i!==c){this.hasPopoverBottom=c}this.checkSelectedOptions()};this.onOptionListChange=t=>{t.stopPropagation();const{values:e}=t.detail;if(e.length===0)this.showAllOptions();this.handleSelectionChanges(t.detail)};this.onPopoverState=({detail:{open:t,action:e}})=>{if(!t||this.searchText){if(e!=="select"){this.optionList.setActiveElement(null)}this.inputField.focus()}if(this.open===t)return;this.open=t};this.removeTouchEventListeners=()=>{if(!n()||!this.popoverElement)return;this.popoverElement.removeEventListener("touchstart",this.handleTouchStart)};this.showAllOptions=()=>{this.showSelected=false};this.showSelectedOptions=()=>{this.showSelected=true};this.visibilityToggleKeyDown=t=>{const e=t.key;const i=e==="Tab"&&t.shiftKey;const s=["ArrowLeft","ArrowRight","ArrowUp","ArrowDown"].includes(e);if(s)t.stopPropagation();if(i){t.stopPropagation();if(this.hasPopoverTop)return;this.optionList.setDefaultActiveElement()}};this.hasCustomDisplay=false;this.hasPopoverBottom=false;this.hasPopoverTop=false;this.inputFocused=false;this.open=false;this.prioritizeSearch=false;this.searchText="";this.showSelected=false;this.statusMessage=undefined;this.structuredSelectedOptions=[];this.ariaLabel=undefined;this.clearable=undefined;this.disabled=false;this.errors=undefined;this.hideLabel=undefined;this.hoist=!!((s=window.Tecton)===null||s===void 0?void 0:s.useActionSheets);this.invalid=undefined;this.label=undefined;this.listLabel=r("tecton.element.select.listLabel");this.minRows=3;this.multilineOptions=false;this.multiple=false;this.optional=false;this.placeholder=undefined;this.popDirection=undefined;this.popoverMaxHeight=undefined;this.popoverMode=null;this.readonly=false;this.searchable=false;this.selectedOptions=[];this.value=undefined}disconnectedCallback(){var t;(t=this.mutationObserver)===null||t===void 0?void 0:t.disconnect();this.mutationObserver=null;this.destroyEventListeners()}componentWillLoad(){this.originalSearchable=this.searchable;a(this);this.handleOrientationChange();this.buildStructuredSelectedOptions();this.handleMultilineOptionsUpdate(this.multilineOptions,false)}componentDidLoad(){this.initMutationObserver();this.initEventListeners();c(this.hostElement);setTimeout((()=>this.checkSelectedDisplay()),0);this.setCustomLabel()}componentDidRender(){setTimeout((()=>{this.scheduledAfterRender.forEach((t=>t()));this.scheduledAfterRender=[]}),25)}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=[]}}onClearHandler(){this.clearValue()}handleSelectedDisplay(t){if(!this.multiple&&!!this.value&&this.value===t.detail.value){this.inputField.value=t.detail.display}}delegateFocus(t){const e=h(t,this.hostElement);const i=this.prioritizeSearch=e&&this.searchable;if(i){this.clearSelectedDisplay()}else if(d(t,this.hostElement)){this.innerInputField.focus()}}handleFocusout(t){var e;const i=t.relatedTarget;const s=!((e=this.popoverElement)===null||e===void 0?void 0:e.contains(i))&&!this.hostElement.contains(i);if(s)this.closeDropdown();this.prioritizeSearch=!s&&this.searchable}onHostElementInput(t){if(!this.searchable||t.target!==this.hostElement||this.hostElement.oninput)return;const e=this.optionElements;const i=this.searchText.trim().toLocaleLowerCase();let s=0;e.forEach((t=>{var e;if(i===""){t.hidden=false;return}const o=((e=t.firstElementChild)===null||e===void 0?void 0:e.tagName)==="Q2-CARD"?t.firstElementChild.title:null;const{display:l="",innerText:n=""}=t;const r=[l,o,n];const a=r.some((t=>{var e;return(e=t===null||t===void 0?void 0:t.toLocaleLowerCase().includes(i))!==null&&e!==void 0?e:false}));t.hidden=!a;if(a)s++}));const o=i?"tecton.element.select.searchable.results":"tecton.element.select.allOptions";const l=i?s:e.length;this.setStatusMessage(r(o,[l]))}keydownHandler(t){this.inputKeydownHandler(t)}popoverStateChanged({detail:{open:t}}){if(this.open!==t)this.open=t}async closePopover(){if(!this.open||this.disabled)return;this._togglePopover()}async openPopover(){if(this.open||this.disabled)return;this._togglePopover()}searchOptions(t){if(!this.searchable)return;const{innerInputField:e}=this;e.focus();e.dispatchEvent(new FocusEvent("focus"));e.value=t;e.dispatchEvent(new InputEvent("input"))}async setValue(t,e={closePopover:true}){const i=new Set(Array.isArray(t)?t:[t]);if(!this.open){await this.openPopover();await p()}i.forEach((t=>{var e;(e=this.optionElements.find((e=>e.value===t)))===null||e===void 0?void 0:e.click()}));if(e.closePopover){await this.closePopover();await p()}}ariaLabelObserver(){a(this)}handleMultilineOptionsUpdate(t,e){if(t===e)return;this.optionElements.forEach((e=>e.multiline=t))}openChanged(t){if(t){this.addTouchEventListeners()}else{this.removeTouchEventListeners()}this.scheduledAfterRender.push((async()=>{await p();const{popoverTopContainer:e,popoverElement:i}=this;const s=t&&(e===null||e===void 0?void 0:e.offsetHeight)||0;if(s){i.style.setProperty("--comp-popover-top-container-height",`${s}px`)}else{i.style.removeProperty("--comp-popover-top-container-height")}}))}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}]:[]}}valueUpdated(){if(this.multiple)return;this.clearSearchText()}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 firstSelectedOptionElement(){const{firstSelectedValue:t}=this;return t?this.optionElements.find((({value:e})=>e===t)):null}get firstSelectedValue(){var t;return this.multiple?(t=this.selectedOptions)===null||t===void 0?void 0:t[0]:this.value}get innerInputContainer(){var t,e;return(e=(t=this.inputField)===null||t===void 0?void 0:t.shadowRoot)===null||e===void 0?void 0:e.querySelector(".input-container")}get 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 inputId(){return`select-guid-${this.guid}`}get isModule(){var t,e;const i=window!==window.top;const s=Object.keys((e=(t=window.Tecton)===null||t===void 0?void 0:t.platformDimensions)!==null&&e!==void 0?e:{}).length>0;return i&&s}get optionElements(){return Array.from(this.hostElement.querySelectorAll("q2-option"))}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 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(" ")}_togglePopover(){const{innerInputField:t}=this;t===null||t===void 0?void 0:t.click();t===null||t===void 0?void 0:t.focus();t.dispatchEvent(new FocusEvent("focus"))}calculateMultiSelectSelectedDisplay(){var t,e,i;const{firstSelectedOptionElement:s,firstSelectedValue:o,multilineOptions:l}=this;if(!o)return"";if(s===null||s===void 0?void 0:s.display)return r(s.display);if(l&&this.searchable)return this.searchText;if(l)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)&&r(e.display)||this.value||""}else{return(e===null||e===void 0?void 0:e.display)&&r(e.display)||((t=e===null||e===void 0?void 0:e.textContent)===null||t===void 0?void 0:t.trim())||this.value||""}}checkSelectedDisplay(){let t=this.selectedDisplaySlot;const{value:e,multiple:i,selectedOptions:s,multilineOptions:o,firstSelectedOptionElement:l,prioritizeSearch:n}=this;const r=!e&&i&&!(s===null||s===void 0?void 0:s.length);if(n||!o||r)return this.clearSelectedDisplay();if(!l||l.display)return this.clearSelectedDisplay();const a=l.firstElementChild.cloneNode(true);a.querySelectorAll("[hide-on-select]").forEach((t=>t.remove()));if(t){const e=t.clientHeight===0?"auto":`${t.clientHeight}px`;t.style.setProperty("--comp-selected-display-height",e);if(t.firstElementChild.outerHTML!==a.outerHTML){t.replaceChild(a,t.firstElementChild)}}else{t=document.createElement("div");t.slot="_selected-display";t.appendChild(a);this.hostElement.appendChild(t)}return t}checkSelectedDisplayHeight(){const{selectedDisplaySlot:t}=this;if(!t)return;t.style.setProperty("--comp-selected-display-height","44px")}checkSelectedOptions(){const{multiple:t,selectedOptions:e,value:i}=this;this.optionElements.forEach((s=>{if(t){s.selected=e.includes(s.value)}else{s.selected=s.value===i}}))}clearSearchText(){if(!this.searchText)return;this.searchText="";this.input.emit({query:""})}clearSelectedDisplay(){var t;(t=this.selectedDisplaySlot)===null||t===void 0?void 0:t.remove()}clearValue(){const{multiple:t}=this;this.value="";this.selectedOptions=[];this.change.emit({value:t?undefined:"",selectedOptions:t?[]:undefined})}closeDropdown(){this.open=false;this.lastTouchWasInPopover=false;this.clearSearchText()}async executeActionSheet(t){const e=await v(this,t);this.focusInput();this.handleSelectionChanges(e)}focusInput(){var t;(t=this.inputField)===null||t===void 0?void 0:t.dispatchEvent(new FocusEvent("focus"))}handleOptionListExternalKeydown(t){this.optionList.handleExternalKeydown(t)}handleSelectionChanges(t){const{value:e="",values:i=[]}=t;const s=i.map((t=>t.value));const{multiple:o}=this;if(!this.hostElement.onchange){this.selectedOptions=s}this.change.emit({value:o?undefined:e,selectedOptions:o?s:undefined})}openDropdownWithoutActiveElement(){if(this.readonly||this.disabled)return;this.optionList.setActiveElement(null);this.open=true}setCustomLabel(){var t;const e=this.hostElement.querySelector('[slot="label"]');if(e){(t=this.inputField)===null||t===void 0?void 0:t.appendChild(e.cloneNode(true));this.hostElement.removeChild(e)}}setStatusMessage(t){clearTimeout(this.statusMessageTimer);this.statusMessage="";this.statusMessageTimer=setTimeout((()=>{this.statusMessage=t}),1e3)}shouldClearSearchText(t){return this.searchable&&!!this.searchText&&t.key==="Escape"}toggleDropdown(){if(this.readonly||this.disabled)return;if(this.open&&!this.searchText){this.closeDropdown()}else{this.openDropdownWithoutActiveElement()}}renderCustomDisplay(){const t=this.checkSelectedDisplay();if(!t)return;this.checkSelectedDisplayHeight();return i("slot",{name:"_selected-display",slot:"custom-display"})}renderOptionsDropdown(){return i("q2-popover",{ref:t=>this.popoverElement=t,controlElement:this.innerInputContainer,open:this.open,"max-height":this.popoverMaxHeight,minHeight:this.popoverMinHeight,direction:this.popDirection,mode:this.popoverMode||undefined,block:true},i("div",{class:"popover-content"},i("q2-option-list",{onPopoverState:this.onPopoverState,ref:t=>this.optionList=t,type:"listbox",id:"option-list","show-selected":this.showSelected,label:this.listLabel,multiple:this.multiple,selectedOptions:this.structuredSelectedOptions,onChange:this.onOptionListChange},i("slot",null)),i("div",{class:"popover-top-container",ref:t=>this.popoverTopContainer=t,hidden:!this.multiple&&!this.hasPopoverTop,tabindex:"-1"},i("slot",{name:"popover-top"}),this.multiple&&this.renderVisibilityToggle())),i("div",{class:"popover-bottom-container",hidden:!this.hasPopoverBottom,tabindex:"-1"},i("slot",{name:"popover-bottom"})))}renderSelectField(){var t;return i(s,null,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&&r(this.label)||"",value:this.selectedDisplay,clearable:this.clearable&&(!!this.value||!!((t=this.selectedOptions)===null||t===void 0?void 0:t.length))||undefined,errors:Array.isArray(this.errors)&&this.errors.length>0&&this.errors.map((t=>r(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","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,_role:"combobox",_preventEntry:!this.searchable},this.renderCustomDisplay()),i("div",{class:"custom-display-content",hidden:!this.hasCustomDisplay||!!this.searchText,onClick:this.onCustomDisplayClick},i("slot",{name:"q2-select-display"})),this.renderOptionsDropdown())}renderVisibilityToggle(){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"},i("fieldset",null,i("legend",{"aria-label":r("tecton.element.select.multiHeader.showing")},r("tecton.element.select.multiHeader.showing")),i("div",null,i("input",{class:"sr",type:"radio",id:"all",name:"viewDisplay",value:"all",checked:!o,"aria-label":r("tecton.element.select.multiHeader.allAriaLabel"),"test-id":"allOptionsButton",onClick:this.showAllOptions,onKeyDown:this.visibilityToggleKeyDown}),i("label",{htmlFor:"all"},r("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":r("tecton.element.select.multiHeader.selectedAriaLabel",[s]),checked:o,"test-id":"selectedOptionsButton",onClick:this.showSelectedOptions,onKeyDown:this.visibilityToggleKeyDown}),i("label",{htmlFor:"selected"},r("tecton.element.select.multiHeader.selected",[s])))))}render(){return i("click-elsewhere",{key:"20da1609da099e84a8add699584b7838dee1dd1a",class:this.wrapperClasses,onChange:this.clickedElsewhere},this.renderSelectField())}get hostElement(){return o(this)}static get watchers(){return{ariaLabel:["ariaLabelObserver"],multilineOptions:["handleMultilineOptionsUpdate"],open:["openChanged"],value:["buildStructuredSelectedOptions","valueUpdated"],selectedOptions:["buildStructuredSelectedOptions"]}}};m.style=b;export{m as q2_select};
+//# sourceMappingURL=p-f6e6f43e.entry.js.map

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

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