@nyaruka/temba-components 0.118.3 → 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 +7 -0
- package/demo/index.html +1 -1
- package/dist/temba-components.js +48 -18
- package/dist/temba-components.js.map +1 -1
- package/out-tsc/src/lightbox/Lightbox.js +21 -9
- package/out-tsc/src/lightbox/Lightbox.js.map +1 -1
- package/out-tsc/src/mediapicker/MediaPicker.js +1 -0
- package/out-tsc/src/mediapicker/MediaPicker.js.map +1 -1
- package/out-tsc/src/thumbnail/Thumbnail.js +62 -20
- package/out-tsc/src/thumbnail/Thumbnail.js.map +1 -1
- package/package.json +1 -1
- package/screenshots/truth/compose/attachments-with-files-focused.png +0 -0
- package/screenshots/truth/lightbox/img-zoomed.png +0 -0
- package/src/lightbox/Lightbox.ts +21 -9
- package/src/mediapicker/MediaPicker.ts +1 -0
- package/src/thumbnail/Thumbnail.ts +64 -20
package/CHANGELOG.md
CHANGED
|
@@ -4,8 +4,15 @@ 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
|
+
|
|
7
12
|
#### [v0.118.3](https://github.com/nyaruka/temba-components/compare/v0.118.2...v0.118.3)
|
|
8
13
|
|
|
14
|
+
> 11 February 2025
|
|
15
|
+
|
|
9
16
|
- Don't show time across date boundaries [`#476`](https://github.com/nyaruka/temba-components/pull/476)
|
|
10
17
|
|
|
11
18
|
#### [v0.118.2](https://github.com/nyaruka/temba-components/compare/v0.118.1...v0.118.2)
|
package/demo/index.html
CHANGED
|
@@ -127,7 +127,7 @@
|
|
|
127
127
|
</head>
|
|
128
128
|
|
|
129
129
|
<body>
|
|
130
|
-
<temba-webchat channel="
|
|
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
|
|
package/dist/temba-components.js
CHANGED
|
@@ -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=
|
|
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
|
-
|
|
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
|
|
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(
|
|
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
|
-
.
|
|
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
|
-
|
|
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
|
-
|
|
6715
|
-
class="thumb ${this.contentType}
|
|
6716
|
-
|
|
6717
|
-
|
|
6718
|
-
|
|
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
|
|
6722
|
-
|
|
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 {
|