@nyaruka/temba-components 0.118.1 → 0.118.2

package/CHANGELOG.md

@@ -4,8 +4,14 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [v0.118.2](https://github.com/nyaruka/temba-components/compare/v0.118.1...v0.118.2)
+
+- Fix repositioning of embedded options [`#475`](https://github.com/nyaruka/temba-components/pull/475)
+
 #### [v0.118.1](https://github.com/nyaruka/temba-components/compare/v0.118.0...v0.118.1)
 
+> 30 January 2025
+
 - Use zero height instead of pointer-events for dropdowns [`#474`](https://github.com/nyaruka/temba-components/pull/474)
 
 #### [v0.118.0](https://github.com/nyaruka/temba-components/compare/v0.116.0...v0.118.0)

package/dist/temba-components.js

@@ -573,7 +573,7 @@ let fr=Ys,vr=!1;const br=["es","fr","pt"],yr="data:image/png;base64,iVBORw0KGgoA
             style="margin-right:0.5em; fill: var(--color-text-dark);"
           ></temba-icon>`:null}
       <div style="flex-grow:1">${t.prefix}${this.getName(t)}</div>
-    </div>`}renderOptionDetailDefault(t){return V` ${t.detail} `}getSelection(){return this.options[this.cursorIndex]}handleSelection(t=!1,e=-1){if(this.internalFocusDisabled||-1===e&&(e=this.cursorIndex),-1===e)return;const i=this.options[e];this.fireCustomEvent($e.Selection,{selected:i,tabbed:t,index:e})}moveCursor(t){if(!this.internalFocusDisabled){const e=Math.max(Math.min(this.cursorIndex+t,this.options.length-1),0);this.setCursor(e)}}scrollToTop(){this.shadowRoot.querySelector(".options-scroll").scrollTop=0}ensureOptionVisible(){const t=this.shadowRoot.querySelector(`div[data-option-index="${this.cursorIndex}"]`);t&&t.scrollIntoView({block:"nearest",inline:"start"})}handleKeyDown(t){this.internalFocusDisabled||this.block&&!this.isFocused()||null!==this.offsetParent&&this.options&&this.options.length>0&&(t.ctrlKey&&"n"===t.key||"ArrowDown"===t.key?(this.moveCursor(1),t.preventDefault(),t.stopPropagation(),this.cursorSelection&&this.handleSelection(!1),this.ensureOptionVisible()):t.ctrlKey&&"p"===t.key||"ArrowUp"===t.key?(this.moveCursor(-1),t.preventDefault(),this.cursorSelection&&this.handleSelection(!1),this.ensureOptionVisible()):"Enter"===t.key||"Tab"===t.key||this.spaceSelect&&" "===t.key?(t.preventDefault(),t.stopPropagation(),this.handleSelection("Tab"===t.key)):"Escape"===t.key&&this.fireCustomEvent($e.Canceled))}handleInnerScroll(t){const e=t.target;if(e.scrollHeight>this.scrollHeight&&(this.scrollHeight=e.scrollHeight,this.triggerScroll=!0),this.triggerScroll){100*(e.scrollTop/(e.scrollHeight-e.clientHeight))>this.scrollPct&&(this.fireCustomEvent($e.ScrollThreshold),this.triggerScroll=!1)}}adjustWidth(){if(this.anchorTo){const t=this.anchorTo.getBoundingClientRect();this.width=this.staticWidth>0?this.staticWidth:t.width-2-2*this.marginHorizontal}}calculatePosition(){if(this.visible&&!this.block){const t=this.shadowRoot.querySelector(".options-container").getBoundingClientRect();if(this.anchorTo){const e=this.anchorTo.getBoundingClientRect();this.top=e.bottom,e.bottom+t.height>window.innerHeight&&(this.top=-(t.height+e.height+20)),this.left=e.left}}}getEventHandlers(){return[{event:"keydown",method:this.handleKeyDown,isDocument:!0},{event:"scroll",method:this.calculatePosition,isDocument:!0}]}handleMouseMove(t){if((!this.block||this.cursorHover)&&Math.abs(t.movementX)+Math.abs(t.movementY)>0){const e=t.currentTarget.getAttribute("data-option-index");this.setCursor(parseInt(e))}}handleOptionClick(t){const e=t.currentTarget.getAttribute("data-option-index");if(e){const t=parseInt(e);this.setCursor(t),this.handleSelection(!1,t)}}render(){if(!this.resolvedRenderOption)return null;let t=this.block?0:this.marginVertical;this.poppedTop&&(t*=-1);const e=this.visible?{"margin-left":`${this.marginHorizontal}px`,"margin-top":`${t}px`}:{};this.top&&(e.top=`${this.top}px`),this.left&&(e.left=`${this.left}px`);const i={};this.width&&(i.width=`${this.width}px`);const o=Zt({"options-container":!0,show:this.visible,top:this.poppedTop,anchored:!this.block&&!!this.anchorTo,loading:this.loading,shadow:!this.hideShadow,bordered:this.hideShadow}),n=Zt({options:!0});let s=this.options||[];return 0==s.length&&this.tempOptions&&this.tempOptions.length>0&&(s=this.tempOptions),V`
+    </div>`}renderOptionDetailDefault(t){return V` ${t.detail} `}getSelection(){return this.options[this.cursorIndex]}handleSelection(t=!1,e=-1){if(this.internalFocusDisabled||-1===e&&(e=this.cursorIndex),-1===e)return;const i=this.options[e];this.fireCustomEvent($e.Selection,{selected:i,tabbed:t,index:e})}moveCursor(t){if(!this.internalFocusDisabled){const e=Math.max(Math.min(this.cursorIndex+t,this.options.length-1),0);this.setCursor(e)}}scrollToTop(){this.shadowRoot.querySelector(".options-scroll").scrollTop=0}ensureOptionVisible(){const t=this.shadowRoot.querySelector(`div[data-option-index="${this.cursorIndex}"]`);t&&t.scrollIntoView({block:"nearest",inline:"start"})}handleKeyDown(t){this.internalFocusDisabled||this.block&&!this.isFocused()||null!==this.offsetParent&&this.options&&this.options.length>0&&(t.ctrlKey&&"n"===t.key||"ArrowDown"===t.key?(this.moveCursor(1),t.preventDefault(),t.stopPropagation(),this.cursorSelection&&this.handleSelection(!1),this.ensureOptionVisible()):t.ctrlKey&&"p"===t.key||"ArrowUp"===t.key?(this.moveCursor(-1),t.preventDefault(),this.cursorSelection&&this.handleSelection(!1),this.ensureOptionVisible()):"Enter"===t.key||"Tab"===t.key||this.spaceSelect&&" "===t.key?(t.preventDefault(),t.stopPropagation(),this.handleSelection("Tab"===t.key)):"Escape"===t.key&&this.fireCustomEvent($e.Canceled))}handleInnerScroll(t){const e=t.target;if(e.scrollHeight>this.scrollHeight&&(this.scrollHeight=e.scrollHeight,this.triggerScroll=!0),this.triggerScroll){100*(e.scrollTop/(e.scrollHeight-e.clientHeight))>this.scrollPct&&(this.fireCustomEvent($e.ScrollThreshold),this.triggerScroll=!1)}}adjustWidth(){if(this.anchorTo){const t=this.anchorTo.getBoundingClientRect();this.width=this.staticWidth>0?this.staticWidth:t.width-2-2*this.marginHorizontal}}calculatePosition(){if(this.visible&&!this.block){const t=this.shadowRoot.querySelector(".options-container").getBoundingClientRect();if(this.anchorTo){const e=this.anchorTo.getBoundingClientRect();this.top=e.bottom,e.bottom+t.height>window.innerHeight&&(this.top=e.bottom-(t.height+e.height+10)),this.left=e.left}}}getEventHandlers(){return[{event:"keydown",method:this.handleKeyDown,isDocument:!0},{event:"scroll",method:this.calculatePosition,isDocument:!0}]}handleMouseMove(t){if((!this.block||this.cursorHover)&&Math.abs(t.movementX)+Math.abs(t.movementY)>0){const e=t.currentTarget.getAttribute("data-option-index");this.setCursor(parseInt(e))}}handleOptionClick(t){const e=t.currentTarget.getAttribute("data-option-index");if(e){const t=parseInt(e);this.setCursor(t),this.handleSelection(!1,t)}}render(){if(!this.resolvedRenderOption)return null;let t=this.block?0:this.marginVertical;this.poppedTop&&(t*=-1);const e=this.visible?{"margin-left":`${this.marginHorizontal}px`,"margin-top":`${t}px`}:{};this.top&&(e.top=`${this.top}px`),this.left&&(e.left=`${this.left}px`);const i={};this.width&&(i.width=`${this.width}px`);const o=Zt({"options-container":!0,show:this.visible,top:this.poppedTop,anchored:!this.block&&!!this.anchorTo,loading:this.loading,shadow:!this.hideShadow,bordered:this.hideShadow}),n=Zt({options:!0});let s=this.options||[];return 0==s.length&&this.tempOptions&&this.tempOptions.length>0&&(s=this.tempOptions),V`
       <div class=${o} style=${Ae(e)}>
         <div class="options-scroll" @scroll=${this.handleInnerScroll}>
           <div class="${n}" style=${Ae(i)}>