@nyaruka/temba-components 0.118.2 → 0.118.4

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,21 @@ 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.118.4](https://github.com/nyaruka/temba-components/compare/v0.118.3...v0.118.4)
8
+
9
+ - Respect aspect ratio on thumbnails [`#477`](https://github.com/nyaruka/temba-components/pull/477)
10
+ - Remove cruft [`6d54f7e`](https://github.com/nyaruka/temba-components/commit/6d54f7e9484b00ad1f25304f667112ad36a758d2)
11
+
12
+ #### [v0.118.3](https://github.com/nyaruka/temba-components/compare/v0.118.2...v0.118.3)
13
+
14
+ > 11 February 2025
15
+
16
+ - Don't show time across date boundaries [`#476`](https://github.com/nyaruka/temba-components/pull/476)
17
+
7
18
  #### [v0.118.2](https://github.com/nyaruka/temba-components/compare/v0.118.1...v0.118.2)
8
19
 
20
+ > 31 January 2025
21
+
9
22
  - Fix repositioning of embedded options [`#475`](https://github.com/nyaruka/temba-components/pull/475)
10
23
 
11
24
  #### [v0.118.1](https://github.com/nyaruka/temba-components/compare/v0.118.0...v0.118.1)
package/demo/index.html CHANGED
@@ -127,7 +127,7 @@
127
127
  </head>
128
128
 
129
129
  <body>
130
- <temba-webchat channel="5ea6f54b-96b0-4e0f-aa00-c6cccc588a55"></temba-webchat>
130
+ <temba-webchat channel="967cd415-8616-4b11-b38f-60f70e0999f4"></temba-webchat>
131
131
  <temba-store completion="/static/api/completion.json" functions="/static/api/functions.json"
132
132
  fields="/static/api/fields.json" globals="/static/api/globals.json" groups="/static/api/groups.json"></temba-store>
133
133
 
@@ -6095,7 +6095,7 @@ let fr=Ys,vr=!1;const br=["es","fr","pt"],yr="data:image/png;base64,iVBORw0KGgoA
6095
6095
  .date {
6096
6096
  display: inline;
6097
6097
  }
6098
- `}firstUpdated(t){super.firstUpdated(t),this.store=document.querySelector("temba-store")}updated(t){super.updated(t),t.has("value")&&(this.datetime=Hs.fromISO(this.value))}connectedCallback(){super.connectedCallback()}render(){if(this.datetime&&this.store){this.datetime.setLocale(this.store.getLocale());let t="";if(this.display===Yh.timedate){const e=Math.abs(this.datetime.diffNow().milliseconds/1e3/60/60);t=e<24?this.datetime.toLocaleString(Yh.time):e<8760?this.datetime.toFormat(Yh.day):this.datetime.toLocaleString(Yh.date)}else if(this.display===Yh.relative){if(Math.abs(this.datetime.diffNow().milliseconds/1e3/60)<1)return V`<span
6098
+ `}firstUpdated(t){super.firstUpdated(t),this.store=document.querySelector("temba-store")}updated(t){super.updated(t),t.has("value")&&(this.datetime=Hs.fromISO(this.value))}connectedCallback(){super.connectedCallback()}render(){if(this.datetime&&this.store){this.datetime.setLocale(this.store.getLocale());let t="";if(this.display===Yh.timedate){const e=Math.abs(this.datetime.diffNow().milliseconds/1e3/60/60),i=this.datetime.get("day");t=e<24&&i==Hs.now().get("day")?this.datetime.toLocaleString(Yh.time):e<8760?this.datetime.toFormat(Yh.day):this.datetime.toLocaleString(Yh.date)}else if(this.display===Yh.relative){if(Math.abs(this.datetime.diffNow().milliseconds/1e3/60)<1)return V`<span
6099
6099
  class="date"
6100
6100
  title="${this.datetime.toLocaleString(Yh.datetime)}"
6101
6101
  >just now</span
@@ -6406,7 +6406,7 @@ let fr=Ys,vr=!1;const br=["es","fr","pt"],yr="data:image/png;base64,iVBORw0KGgoA
6406
6406
  </temba-tabs>
6407
6407
  `}getCounter(){return V`<temba-charcount
6408
6408
  .text="${this.currentText}"
6409
- ></temba-charcount>`}}t([ce({type:Number})],tc.prototype,"index",void 0),t([ce({type:Number})],tc.prototype,"maxAttachments",void 0),t([ce({type:Number})],tc.prototype,"maxLength",void 0),t([ce({type:Boolean})],tc.prototype,"completion",void 0),t([ce({type:Boolean})],tc.prototype,"attachments",void 0),t([ce({type:Boolean})],tc.prototype,"quickReplies",void 0),t([ce({type:Boolean})],tc.prototype,"optIns",void 0),t([ce({type:Boolean})],tc.prototype,"templates",void 0),t([ce({type:Boolean})],tc.prototype,"counter",void 0),t([ce({type:Boolean})],tc.prototype,"autogrow",void 0),t([ce({type:Boolean})],tc.prototype,"shortcuts",void 0),t([ce({type:String})],tc.prototype,"currentText",void 0),t([ce({type:String})],tc.prototype,"initialText",void 0),t([ce({type:String})],tc.prototype,"accept",void 0),t([ce({type:String,attribute:!1})],tc.prototype,"endpoint",void 0),t([ce({type:Boolean,attribute:!1})],tc.prototype,"uploading",void 0),t([ce({type:Array})],tc.prototype,"languages",void 0),t([ce({type:Array})],tc.prototype,"currentAttachments",void 0),t([ce({type:Array})],tc.prototype,"currentQuickReplies",void 0),t([ce({type:Array})],tc.prototype,"currentOptin",void 0),t([ce({type:Array})],tc.prototype,"variables",void 0),t([ce({type:String})],tc.prototype,"template",void 0),t([ce({type:Object})],tc.prototype,"currentTemplate",void 0),t([ce({type:String})],tc.prototype,"locale",void 0),t([ce({type:String})],tc.prototype,"optinEndpoint",void 0),t([ce({type:String})],tc.prototype,"templateEndpoint",void 0),t([ce({type:Boolean,attribute:!1})],tc.prototype,"empty",void 0),t([ce({type:Boolean,attribute:"widget_only"})],tc.prototype,"widgetOnly",void 0),t([ce({type:Array})],tc.prototype,"errors",void 0),t([ce({type:Object})],tc.prototype,"langValues",void 0),t([ce({type:String})],tc.prototype,"currentLanguage",void 0),t([ce({type:Object})],tc.prototype,"currentTab",void 0),t([ce({type:Boolean})],tc.prototype,"hasPendingText",void 0),t([ce({type:Object})],tc.prototype,"activeShortcut",void 0);class ec extends pe{constructor(){super(...arguments),this.animationTime=300,this.show=!1,this.zoom=!1,this.zoomPct=.9,this.scale=1,this.xTrans="0px",this.yTrans="0px"}static get styles(){return r`
6409
+ ></temba-charcount>`}}t([ce({type:Number})],tc.prototype,"index",void 0),t([ce({type:Number})],tc.prototype,"maxAttachments",void 0),t([ce({type:Number})],tc.prototype,"maxLength",void 0),t([ce({type:Boolean})],tc.prototype,"completion",void 0),t([ce({type:Boolean})],tc.prototype,"attachments",void 0),t([ce({type:Boolean})],tc.prototype,"quickReplies",void 0),t([ce({type:Boolean})],tc.prototype,"optIns",void 0),t([ce({type:Boolean})],tc.prototype,"templates",void 0),t([ce({type:Boolean})],tc.prototype,"counter",void 0),t([ce({type:Boolean})],tc.prototype,"autogrow",void 0),t([ce({type:Boolean})],tc.prototype,"shortcuts",void 0),t([ce({type:String})],tc.prototype,"currentText",void 0),t([ce({type:String})],tc.prototype,"initialText",void 0),t([ce({type:String})],tc.prototype,"accept",void 0),t([ce({type:String,attribute:!1})],tc.prototype,"endpoint",void 0),t([ce({type:Boolean,attribute:!1})],tc.prototype,"uploading",void 0),t([ce({type:Array})],tc.prototype,"languages",void 0),t([ce({type:Array})],tc.prototype,"currentAttachments",void 0),t([ce({type:Array})],tc.prototype,"currentQuickReplies",void 0),t([ce({type:Array})],tc.prototype,"currentOptin",void 0),t([ce({type:Array})],tc.prototype,"variables",void 0),t([ce({type:String})],tc.prototype,"template",void 0),t([ce({type:Object})],tc.prototype,"currentTemplate",void 0),t([ce({type:String})],tc.prototype,"locale",void 0),t([ce({type:String})],tc.prototype,"optinEndpoint",void 0),t([ce({type:String})],tc.prototype,"templateEndpoint",void 0),t([ce({type:Boolean,attribute:!1})],tc.prototype,"empty",void 0),t([ce({type:Boolean,attribute:"widget_only"})],tc.prototype,"widgetOnly",void 0),t([ce({type:Array})],tc.prototype,"errors",void 0),t([ce({type:Object})],tc.prototype,"langValues",void 0),t([ce({type:String})],tc.prototype,"currentLanguage",void 0),t([ce({type:Object})],tc.prototype,"currentTab",void 0),t([ce({type:Boolean})],tc.prototype,"hasPendingText",void 0),t([ce({type:Object})],tc.prototype,"activeShortcut",void 0);class ec extends pe{constructor(){super(...arguments),this.animationTime=300,this.show=!1,this.zoom=!1,this.zoomPct=.9,this.scale=1,this.xTrans=0,this.yTrans=0}static get styles(){return r`
6410
6410
  :host {
6411
6411
  z-index: 10000;
6412
6412
  position: absolute;
@@ -6436,7 +6436,20 @@ let fr=Ys,vr=!1;const br=["es","fr","pt"],yr="data:image/png;base64,iVBORw0KGgoA
6436
6436
  overflow: hidden;
6437
6437
  box-shadow: 0 0 12px 3px rgba(0, 0, 0, 0.15);
6438
6438
  }
6439
- `}updated(t){t.has("show")&&this.show&&window.setTimeout((()=>{this.zoom=!0}),0),t.has("zoom")&&!this.zoom&&this.show&&window.setTimeout((()=>{this.show=!1}),this.animationTime)}showElement(t){const e=t.getBoundingClientRect();this.ele=t.cloneNode(),this.ele.zoom=!0,this.left=e.left,this.top=e.top,this.width=e.width,this.height=e.height,this.xTrans="0px",this.yTrans="0px",this.scale=1;let i=this.width,o=this.height,n=this.scale;const s=window.innerHeight*this.zoomPct,r=window.innerWidth*this.zoomPct;this.width*(s/this.height)<r?(o=window.innerHeight*this.zoomPct,n=o/this.height,i=this.width*n):(i=window.innerWidth*this.zoomPct,n=i/this.width,o=this.height*n);const a=(i-this.width)/2,l=(window.innerWidth-i)/2;this.xTrans=l-this.left+a+"px";const h=(o-this.height)/2,c=(window.innerHeight-o)/2;this.yTrans=c-this.top+h+"px",this.scale=n,this.show=!0}handleClick(){this.zoom=!1}render(){const t={transition:`transform ${this.animationTime}ms ease, box-shadow ${this.animationTime}ms ease`};return this.show&&(t.left=this.left+"px",t.top=this.top+"px",t.width=this.width+"px",t.height=this.height+"px"),this.zoom&&(t.transform=`translate(${this.xTrans}, ${this.yTrans}) scale(${this.scale}, ${this.scale})`),V`
6439
+
6440
+ .download {
6441
+ background: rgba(0, 0, 0, 0.5);
6442
+ position: absolute;
6443
+ display:flex;
6444
+ align-items:center;
6445
+ color:#fff;
6446
+ padding:0.5em;
6447
+ border-radius:var(--curvature);
6448
+ background:rgba(0,0,0,0.5);
6449
+ }
6450
+
6451
+ }
6452
+ `}updated(t){t.has("show")&&this.show&&window.setTimeout((()=>{this.zoom=!0}),0),t.has("zoom")&&!this.zoom&&this.show&&window.setTimeout((()=>{this.show=!1}),this.animationTime)}showElement(t){const e=t.getBoundingClientRect();this.ele=t.cloneNode(),this.ele.zoom=!0,this.left=e.left,this.top=e.top,this.width=e.width,this.height=e.height,this.xTrans=0,this.yTrans=0,this.scale=1;let i=this.width,o=this.height,n=this.scale;const s=window.innerHeight*this.zoomPct,r=window.innerWidth*this.zoomPct;this.width*(s/this.height)<r?(o=window.innerHeight*this.zoomPct,n=o/this.height,i=this.width*n):(i=window.innerWidth*this.zoomPct,n=i/this.width,o=this.height*n);const a=(i-this.width)/2,l=(window.innerWidth-i)/2;this.xTrans=l-this.left+a;const h=(o-this.height)/2,c=(window.innerHeight-o)/2;this.yTrans=c-this.top+h,this.scale=n,this.show=!0}handleClick(){this.zoom=!1}render(){const t={transition:`transform ${this.animationTime}ms ease, box-shadow ${this.animationTime}ms ease`};return this.show&&(t.left=this.left+"px",t.top=this.top+"px",t.width=this.width+"px"),this.zoom&&(t.transform=`translate(${this.xTrans}px, ${this.yTrans}px) scale(${this.scale}, ${this.scale})`),V`
6440
6453
  <div
6441
6454
  class=${Zt({container:!0,show:this.show,zoom:this.zoom})}
6442
6455
  @click=${this.handleClick}
@@ -6446,7 +6459,7 @@ let fr=Ys,vr=!1;const br=["es","fr","pt"],yr="data:image/png;base64,iVBORw0KGgoA
6446
6459
  style="transition: all ${this.animationTime}ms; ease"
6447
6460
  ></div>
6448
6461
  <div class=${Zt({matte:!0})} style=${Ae(t)}>
6449
- ${this.show?this.ele:null}
6462
+ ${this.show?V`${this.ele}`:null}
6450
6463
  </div>
6451
6464
  </div>
6452
6465
  `}}t([ce({type:Number})],ec.prototype,"animationTime",void 0),t([ce({type:Boolean})],ec.prototype,"show",void 0),t([ce({type:Boolean})],ec.prototype,"zoom",void 0),t([ce({type:Number})],ec.prototype,"zoomPct",void 0);class ic extends me{constructor(){super(...arguments),this.expanded=!1,this.previewColor="#ffffff",this.labelColor="#ffffffee",this.selecting=!1,this.saturation=100,this.lightness=50,this.hex=""}static get styles(){return r`
@@ -6642,7 +6655,7 @@ let fr=Ys,vr=!1;const br=["es","fr","pt"],yr="data:image/png;base64,iVBORw0KGgoA
6642
6655
  margin-right: var(--resizer-handle-size);
6643
6656
  background: red;
6644
6657
  }
6645
- `,t([ce({type:Number})],oc.prototype,"minWidth",void 0),t([ce({type:Number})],oc.prototype,"maxWidth",void 0),t([ce({type:Boolean})],oc.prototype,"resizing",void 0),t([ce({type:Number})],oc.prototype,"currentWidth",void 0),function(t){t.IMAGE="image",t.AUDIO="audio",t.VIDEO="video",t.DOCUMENT="document",t.OTHER="other"}(Jh||(Jh={}));const nc={[Jh.IMAGE]:Fl.attachment_image,[Jh.AUDIO]:Fl.attachment_audio,[Jh.VIDEO]:Fl.attachment_video,[Jh.DOCUMENT]:Fl.attachment_document,[Jh.OTHER]:Fl.attachment};class sc extends pe{static get styles(){return r`
6658
+ `,t([ce({type:Number})],oc.prototype,"minWidth",void 0),t([ce({type:Number})],oc.prototype,"maxWidth",void 0),t([ce({type:Boolean})],oc.prototype,"resizing",void 0),t([ce({type:Number})],oc.prototype,"currentWidth",void 0),function(t){t.IMAGE="image",t.AUDIO="audio",t.VIDEO="video",t.DOCUMENT="document",t.OTHER="other"}(Jh||(Jh={}));const nc={[Jh.IMAGE]:Fl.attachment_image,[Jh.AUDIO]:Fl.attachment_audio,[Jh.VIDEO]:Fl.attachment_video,[Jh.DOCUMENT]:Fl.attachment_document,[Jh.OTHER]:Fl.attachment};class sc extends pe{constructor(){super(...arguments),this.ratio=0,this.preview=!0}static get styles(){return r`
6646
6659
  :host {
6647
6660
  display: inline;
6648
6661
  }
@@ -6666,8 +6679,7 @@ let fr=Ys,vr=!1;const br=["es","fr","pt"],yr="data:image/png;base64,iVBORw0KGgoA
6666
6679
  .zoom .thumb {
6667
6680
  border-radius: 0px !important;
6668
6681
  width: calc(var(--thumb-size, 4em) + 0.8em);
6669
- height: calc(var(--thumb-size, 4em) + 0.8em);
6670
- max-height: calc(var(--thumb-size, 4em) + 0.8em);
6682
+ max-height: calc(90vh - 10em);
6671
6683
  }
6672
6684
 
6673
6685
  .thumb {
@@ -6675,8 +6687,7 @@ let fr=Ys,vr=!1;const br=["es","fr","pt"],yr="data:image/png;base64,iVBORw0KGgoA
6675
6687
  background-position: center;
6676
6688
  background-repeat: no-repeat;
6677
6689
  border-radius: var(--curvature);
6678
- max-height: var(--thumb-size, 4em);
6679
- height: var(--thumb-size, 4em);
6690
+ max-height: calc(var(--thumb-size, 4em) * 2);
6680
6691
  width: var(--thumb-size, 4em);
6681
6692
  display: flex;
6682
6693
  align-items: center;
@@ -6702,26 +6713,44 @@ let fr=Ys,vr=!1;const br=["es","fr","pt"],yr="data:image/png;base64,iVBORw0KGgoA
6702
6713
  display: block;
6703
6714
  }
6704
6715
 
6705
- .zoom temba-icon {
6716
+ .download {
6706
6717
  display: none;
6718
+ position: absolute;
6719
+ right: 0em;
6720
+ bottom: 0em;
6721
+ border-radius: var(--curvature);
6722
+ transform: scale(0.2) translate(3em, 3em);
6723
+ padding: 0.4em;
6724
+ }
6725
+
6726
+ .zoom .download {
6727
+ display: block;
6728
+ background: rgba(0, 0, 0, 0.5);
6707
6729
  }
6708
- `}updated(t){if(super.updated(t),t.has("attachment")&&this.attachment){const t=this.attachment.indexOf(":");if(-1===t)this.url=this.attachment;else{const e=this.attachment.substring(0,t);this.url=this.attachment.substring(t+1),e.startsWith("image")?this.contentType=Jh.IMAGE:e.startsWith("audio")?this.contentType=Jh.AUDIO:e.startsWith("video")?this.contentType=Jh.VIDEO:e.startsWith("application")?this.contentType=Jh.DOCUMENT:this.contentType=Jh.OTHER}}}handleThumbnailClicked(){this.contentType===Jh.IMAGE?window.setTimeout((()=>{document.querySelector("temba-lightbox").showElement(this)}),100):window.open(this.url,"_blank")}render(){return V`
6730
+
6731
+ .zoom .download:hover {
6732
+ background: rgba(0, 0, 0, 0.6);
6733
+ cursor: pointer;
6734
+ }
6735
+ `}updated(t){if(super.updated(t),t.has("contentType")&&this.contentType===Jh.IMAGE){const t=this.shadowRoot.querySelector(".observe");t&&new ResizeObserver(((e,i)=>{t.clientHeight>0&&t.clientWidth>0&&(this.ratio=t.clientHeight/t.clientWidth,this.preview=0===this.ratio||this.ratio>.25&&this.ratio<=1.5,i.disconnect())})).observe(t)}if(t.has("attachment")&&this.attachment){const t=this.attachment.indexOf(":");if(-1===t)this.url=this.attachment;else{const e=this.attachment.substring(0,t);this.url=this.attachment.substring(t+1),e.startsWith("image")?this.contentType=Jh.IMAGE:e.startsWith("audio")?this.contentType=Jh.AUDIO:e.startsWith("video")?this.contentType=Jh.VIDEO:e.startsWith("application")?this.contentType=Jh.DOCUMENT:this.contentType=Jh.OTHER}}}handleThumbnailClicked(){this.contentType===Jh.IMAGE&&this.preview?window.setTimeout((()=>{document.querySelector("temba-lightbox").showElement(this)}),100):window.open(this.url,"_blank")}handleDownload(t){t.stopPropagation(),t.preventDefault(),window.open(this.url,"_blank")}render(){return V`
6709
6736
  <div
6710
6737
  @click=${this.handleThumbnailClicked.bind(this)}
6711
6738
  class="${Zt({wrapper:!0,zoom:this.zoom})}"
6712
6739
  url=${this.url}
6713
6740
  >
6714
- <div
6715
- class="thumb ${this.contentType} "
6716
- style="${this.url?Ae({backgroundImage:`url(${this.url})`}):""}"
6717
- >
6718
- ${this.contentType!==Jh.IMAGE?V`<temba-icon
6741
+ ${this.contentType===Jh.IMAGE&&this.preview?V`<div class=""><div class="download" @click=${this.handleDownload.bind(this)}><temba-icon size="1" style="color:#fff;" name="download"></temba-icon></div><img
6742
+ class="observe thumb ${this.contentType}"
6743
+ src="${this.url}"
6744
+ ></img></div>`:V`<div
6745
+ style="padding:1em; background:rgba(0,0,0,.05);border-radius:var(--curvature);"
6746
+ >
6747
+ <temba-icon
6719
6748
  size="1.5"
6720
6749
  name="${nc[this.contentType]}"
6721
- ></temba-icon>`:null}
6722
- </div>
6750
+ ></temba-icon>
6751
+ </div>`}
6723
6752
  </div>
6724
- `}}t([ce({type:String})],sc.prototype,"url",void 0),t([ce({type:String})],sc.prototype,"attachment",void 0),t([ce({type:Boolean,attribute:!1})],sc.prototype,"zoom",void 0),t([ce({type:String,attribute:!1})],sc.prototype,"contentType",void 0);var rc;!function(t){t.DISCONNECTED="disconnected",t.CONNECTING="connecting",t.CONNECTED="connected"}(rc||(rc={}));const ac=function(t){const e=t.msg_in?Nl.MsgIn:Nl.MsgOut,i=t.msg_in||t.msg_out;return{id:i.id,type:e,text:i.text,date:new Date(i.time),user:i.user,attachments:i.attachments}};class lc extends lt{static get styles(){return r`
6753
+ `}}t([ce({type:String})],sc.prototype,"url",void 0),t([ce({type:String})],sc.prototype,"attachment",void 0),t([ce({type:Number})],sc.prototype,"ratio",void 0),t([ce({type:Boolean})],sc.prototype,"preview",void 0),t([ce({type:Boolean,attribute:!1})],sc.prototype,"zoom",void 0),t([ce({type:String,attribute:!1})],sc.prototype,"contentType",void 0);var rc;!function(t){t.DISCONNECTED="disconnected",t.CONNECTING="connecting",t.CONNECTED="connected"}(rc||(rc={}));const ac=function(t){const e=t.msg_in?Nl.MsgIn:Nl.MsgOut,i=t.msg_in||t.msg_out;return{id:i.id,type:e,text:i.text,date:new Date(i.time),user:i.user,attachments:i.attachments}};class lc extends lt{static get styles(){return r`
6725
6754
  :host {
6726
6755
  display: flex;
6727
6756
  align-items: center;
@@ -7761,6 +7790,7 @@ const{I:pc}=rt,mc=()=>document.createComment(""),gc=(t,e,i)=>{const o=t._$AA.par
7761
7790
  flex-direction: row;
7762
7791
  flex-wrap: wrap;
7763
7792
  padding: 0.2em;
7793
+ align-items: center;
7764
7794
  }
7765
7795
 
7766
7796
  .attachment-item {