@nyaruka/temba-components 0.121.6 → 0.121.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -4,8 +4,14 @@ All notable changes to this project will be documented in this file. Dates are d
4
4
 
5
5
  Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
6
6
 
7
+ #### [v0.121.7](https://github.com/nyaruka/temba-components/compare/v0.121.6...v0.121.7)
8
+
9
+ - Fix blur handler for dropdowns [`#500`](https://github.com/nyaruka/temba-components/pull/500)
10
+
7
11
  #### [v0.121.6](https://github.com/nyaruka/temba-components/compare/v0.121.5...v0.121.6)
8
12
 
13
+ > 8 May 2025
14
+
9
15
  - Use read url instead of target_url for notifications [`#498`](https://github.com/nyaruka/temba-components/pull/498)
10
16
 
11
17
  #### [v0.121.5](https://github.com/nyaruka/temba-components/compare/v0.121.4...v0.121.5)
@@ -4231,7 +4231,7 @@ let yr=Ks,br=!1;const _r=["es","fr","pt"],xr="data:image/png;base64,iVBORw0KGgoA
4231
4231
  .right {
4232
4232
  right: 0;
4233
4233
  }
4234
- `}constructor(){super(),this.open=!1,this.dormant=!0,this.arrowSize=8,this.margin=10,this.mask=!1,this.dropdownStyle={},this.arrowStyle={},this.calculatePosition=this.calculatePosition.bind(this)}firstUpdated(t){super.firstUpdated(t),this.resetBlurHandler()}resetBlurHandler(){const t=this.shadowRoot.querySelector(".dropdown");this.activeFocus&&this.activeFocus.removeEventListener("blur",this.blurHandler),this.activeFocus=t,this.blurHandler=this.handleBlur.bind(this),this.activeFocus.addEventListener("blur",this.blurHandler)}handleBlur(t){const e=t.relatedTarget;this.contains(e)?(e.addEventListener("blur",this.blurHandler),this.activeFocus=e):this.closeDropdown()}openDropdown(){this.open=!0,this.dormant=!1,this.resetBlurHandler();const t=this.shadowRoot.querySelector(".dropdown");t.focus(),t.click(),this.fireCustomEvent(Oe.Opened)}closeDropdown(){this.activeFocus.removeEventListener("blur",this.blurHandler),this.open=!1,this.resetBlurHandler(),window.setTimeout((()=>{this.dormant=!0}),250),this.blur()}updated(t){super.updated(t),t.has("open")&&(this.dropdownStyle={}),t.has("dropdownStyle")&&0===Object.keys(this.dropdownStyle).length&&this.calculatePosition()}calculatePosition(){const t=this.shadowRoot.querySelector(".dropdown"),e=this.querySelector('*[slot="toggle"]'),i=this.shadowRoot.querySelector(".arrow");let n=!1,o=!1;if(t&&e){const s=t.getBoundingClientRect(),r=e.getBoundingClientRect(),a=i.getBoundingClientRect();if(!e)return;const l={border:"1px solid rgba(0,0,0,0.1)",marginTop:"0.5em"};s.right>window.innerWidth&&(l.left=r.right-s.width+"px",delete l.right,o=!0),s.bottom>window.innerHeight&&(l.top=r.top-s.height+"px",l["margin-top"]="-0.5em",n=!0);let c=r.width/2-a.width/2;c<=0&&(l.marginLeft="-10px",c=10);const h={left:c+"px",borderWidth:this.arrowSize+"px",top:"-"+this.arrowSize+"px"};n&&(h.transform="rotate(180deg)",h.top="auto",h.bottom="-"+this.arrowSize+"px"),o&&(h.right=r.width/2-a.width/2+"px",delete h.left),this.arrowStyle=h,this.dropdownStyle=l}this.requestUpdate()}handleToggleClicked(t){t.preventDefault(),t.stopPropagation(),!this.open&&this.dormant&&this.openDropdown()}render(){return G`
4234
+ `}constructor(){super(),this.open=!1,this.dormant=!0,this.arrowSize=8,this.margin=10,this.mask=!1,this.dropdownStyle={},this.arrowStyle={},this.calculatePosition=this.calculatePosition.bind(this)}resetBlurHandler(){const t=this.shadowRoot.querySelector(".dropdown");this.activeFocus&&this.activeFocus.removeEventListener("blur",this.blurHandler),this.activeFocus=t,this.blurHandler=this.handleBlur.bind(this),this.activeFocus.addEventListener("blur",this.blurHandler)}handleBlur(t){const e=t.relatedTarget;this.contains(e)?(e.addEventListener("blur",this.blurHandler),this.activeFocus=e):this.closeDropdown()}openDropdown(){this.open=!0,this.dormant=!1,this.resetBlurHandler();const t=this.shadowRoot.querySelector(".dropdown");t.focus(),t.click(),this.fireCustomEvent(Oe.Opened)}closeDropdown(){this.activeFocus.removeEventListener("blur",this.blurHandler),this.open=!1,window.setTimeout((()=>{this.dormant=!0}),250),this.blur()}updated(t){super.updated(t),t.has("open")&&(this.dropdownStyle={}),t.has("dropdownStyle")&&0===Object.keys(this.dropdownStyle).length&&this.calculatePosition()}calculatePosition(){const t=this.shadowRoot.querySelector(".dropdown"),e=this.querySelector('*[slot="toggle"]'),i=this.shadowRoot.querySelector(".arrow");let n=!1,o=!1;if(t&&e){const s=t.getBoundingClientRect(),r=e.getBoundingClientRect(),a=i.getBoundingClientRect();if(!e)return;const l={border:"1px solid rgba(0,0,0,0.1)",marginTop:"0.5em"};s.right>window.innerWidth&&(l.left=r.right-s.width+"px",delete l.right,o=!0),s.bottom>window.innerHeight&&(l.top=r.top-s.height+"px",l["margin-top"]="-0.5em",n=!0);let c=r.width/2-a.width/2;c<=0&&(l.marginLeft="-10px",c=10);const h={left:c+"px",borderWidth:this.arrowSize+"px",top:"-"+this.arrowSize+"px"};n&&(h.transform="rotate(180deg)",h.top="auto",h.bottom="-"+this.arrowSize+"px"),o&&(h.right=r.width/2-a.width/2+"px",delete h.left),this.arrowStyle=h,this.dropdownStyle=l}this.requestUpdate()}handleToggleClicked(t){t.preventDefault(),t.stopPropagation(),!this.open&&this.dormant&&this.openDropdown()}render(){return G`
4235
4235
  ${this.mask?G`<div class="mask ${this.open?"open":""}" />`:null}
4236
4236
 
4237
4237
  <div
@@ -8632,7 +8632,7 @@ const{I:cu}=at,hu=()=>document.createComment(""),uu=(t,e,i)=>{const n=t._$AA.par
8632
8632
  </div>`}}renderHeader(){return G`<div class="header">
8633
8633
  <temba-icon name="notification"></temba-icon>
8634
8634
  <div class="title">Notifications</div>
8635
- </div>`}handleSelection(t){super.handleSelected(t)}scrollToTop(){window.setTimeout((()=>{this.shadowRoot.querySelector("temba-options").scrollToTop()}),1e3)}}),db("temba-list",sh),db("temba-sortable-list",Uh),db("temba-run-list",zh),db("temba-flow-details",Nh),db("temba-label",Ch),db("temba-menu",bh),db("temba-contact-search",hh),db("temba-icon",uh),db("temba-dropdown",xh),db("temba-tabs",wh),db("temba-tab",kh),db("temba-contact-badges",Oh),db("temba-contact-pending",Ih),db("temba-slider",$h),db("temba-content-menu",Vh),db("temba-compose",Yh),db("temba-color-picker",Kh),db("temba-resizer",Qh),db("temba-thumbnail",eu),db("temba-webchat",ou),db("temba-image-picker",ru),db("temba-mask",au),db("temba-user",kr),db("temba-template-editor",lu),db("temba-toast",vu),db("temba-chat",jc),db("temba-media-picker",bu),db("temba-flow-editor",nb),db("temba-flow-node",ib),db("temba-contact-notepad",ob),db("temba-outbox-monitor",sb),db("temba-progress",rb),db("temba-start-progress",ab),db("temba-shortcuts",lb),db("temba-popup-select",cb),db("temba-user-select",hb),db("temba-workspace-select",ub);class pb extends ct{static get styles(){return a`
8635
+ </div>`}scrollToTop(){window.setTimeout((()=>{this.shadowRoot.querySelector("temba-options").scrollToTop()}),1e3)}}),db("temba-list",sh),db("temba-sortable-list",Uh),db("temba-run-list",zh),db("temba-flow-details",Nh),db("temba-label",Ch),db("temba-menu",bh),db("temba-contact-search",hh),db("temba-icon",uh),db("temba-dropdown",xh),db("temba-tabs",wh),db("temba-tab",kh),db("temba-contact-badges",Oh),db("temba-contact-pending",Ih),db("temba-slider",$h),db("temba-content-menu",Vh),db("temba-compose",Yh),db("temba-color-picker",Kh),db("temba-resizer",Qh),db("temba-thumbnail",eu),db("temba-webchat",ou),db("temba-image-picker",ru),db("temba-mask",au),db("temba-user",kr),db("temba-template-editor",lu),db("temba-toast",vu),db("temba-chat",jc),db("temba-media-picker",bu),db("temba-flow-editor",nb),db("temba-flow-node",ib),db("temba-contact-notepad",ob),db("temba-outbox-monitor",sb),db("temba-progress",rb),db("temba-start-progress",ab),db("temba-shortcuts",lb),db("temba-popup-select",cb),db("temba-user-select",hb),db("temba-workspace-select",ub);class pb extends ct{static get styles(){return a`
8636
8636
  :host {
8637
8637
  line-height: normal;
8638
8638
  }