@nyaruka/temba-components 0.59.0 → 0.60.1

package/.devcontainer/devcontainer.json

@@ -11,7 +11,14 @@
 		"--hostname=temba-components"
 	],
 	"remoteUser": "node",
-	"postCreateCommand": "sudo chown -R node /workspaces/temba-components/static/svg && sudo chown node /workspaces/temba-components && sudo chown node /workspaces/temba-components/screenshots && yarn install"
+	"postCreateCommand": "sudo chown -R node /workspaces/temba-components/static/svg && sudo chown node /workspaces/temba-components && sudo chown node /workspaces/temba-components/screenshots && yarn install",
+	"customizations": {
+		"vscode": {
+			"extensions": [
+				"lfs.vscode-emacs-friendly"
+			]
+		}
+	}
 	// "features": {},
 	// "customizations": {},
 }

package/CHANGELOG.md

@@ -4,8 +4,21 @@ 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.60.1](https://github.com/nyaruka/temba-components/compare/v0.60.0...v0.60.1)
+
+- Fix compose reset [`#369`](https://github.com/nyaruka/temba-components/pull/369)
+
+#### [v0.60.0](https://github.com/nyaruka/temba-components/compare/v0.59.0...v0.60.0)
+
+> 2 October 2023
+
+- Make completion an option on compose [`#368`](https://github.com/nyaruka/temba-components/pull/368)
+- Add emacs keymap to devcontainer [`b6c1d3a`](https://github.com/nyaruka/temba-components/commit/b6c1d3a907dd78bf1d2a8184b7600ec4364c7460)
+
 #### [v0.59.0](https://github.com/nyaruka/temba-components/compare/v0.58.8...v0.59.0)
 
+> 28 September 2023
+
 - Rendering for optin events [`#367`](https://github.com/nyaruka/temba-components/pull/367)
 - Fix reading created_by for msg events [`#364`](https://github.com/nyaruka/temba-components/pull/364)
 - Add logical icon names for optin and optout [`#365`](https://github.com/nyaruka/temba-components/pull/365)

package/dist/{a0408c72.js → 196cda88.js}

@@ -5825,7 +5825,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
       .items {
       }
 
-      temba-completion {
+      .chatbox {
         margin-left: 0.3em;
         margin-top: 0.3em;
         --color-widget-border: none;
@@ -5920,7 +5920,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
         color: rgba(250, 0, 0, 0.75);
         font-size: var(--help-text-size);
       }
-    `}constructor(){super(),this.currentText="",this.accept="",this.endpoint=Jt,this.currentAttachments=[],this.failedAttachments=[],this.buttonName="Send",this.buttonDisabled=!0,this.buttonError="",this.value=""}deserializeComposeValue(){if(this.value){const t=JSON.parse(this.value);this.chatbox&&(this.currentText=t.text),this.attachments&&(this.currentAttachments=t.attachments)}}serializeComposeValue(){const t={text:this.currentText,attachments:this.currentAttachments};this.value=JSON.stringify(t)}firstUpdated(t){super.firstUpdated(t),this.deserializeComposeValue(),this.setFocusOnChatbox()}updated(t){super.updated(t),(t.has("currentText")||t.has("currentAttachments"))&&(this.toggleButton(),this.serializeComposeValue(),this.fireCustomEvent(Ee.ContentChanged,this.value)),this.setFocusOnChatbox()}setFocusOnChatbox(){if(this.chatbox){const t=this.shadowRoot.querySelector("temba-completion");t&&window.setTimeout((()=>{t.focus()}),0)}}reset(){this.currentText="",this.currentAttachments=[],this.failedAttachments=[],this.buttonError=""}handleContainerClick(t){this.setFocusOnChatbox()}handleChatboxChange(t){const e=t.target;this.currentText=e.value}handleDragEnter(t){this.highlight(t)}handleDragOver(t){this.highlight(t)}handleDragLeave(t){this.unhighlight(t)}handleDrop(t){this.unhighlight(t);const e=t.dataTransfer;if(e){const t=e.files;this.uploadFiles(t)}}preventDefaults(t){t.preventDefault(),t.stopPropagation()}highlight(t){this.pendingDrop=!0,this.preventDefaults(t)}unhighlight(t){this.pendingDrop=!1,this.preventDefaults(t)}handleUploadFileIconClicked(){this.dispatchEvent(new Event("change"))}handleUploadFileInputChanged(t){const e=t.target.files;this.uploadFiles(e)}uploadFiles(t){let e=[];e=this.currentAttachments&&this.currentAttachments.length>0?[...t].filter((t=>{if(-1===this.currentAttachments.findIndex((e=>e.filename===t.name&&e.size===t.size)))return t})):[...t],e.map((t=>{this.uploadFile(t)}))}uploadFile(t){this.uploading=!0;const e=this.endpoint,i=new FormData;i.append("file",t),le(e,i).then((t=>{const e=t.json;e&&this.addCurrentAttachment(e)})).catch((e=>{let i="";i=400===e.status?e.json.file[0]:"Server failure",console.error(i),this.addFailedAttachment(t,i)})).finally((()=>{this.uploading=!1}))}addCurrentAttachment(t){this.currentAttachments.push(t),this.requestUpdate("currentAttachments")}removeCurrentAttachment(t){this.currentAttachments=this.currentAttachments.filter((e=>e!==t)),this.requestUpdate("currentAttachments")}addFailedAttachment(t,e){const i={uuid:Math.random().toString(36).slice(2,6),content_type:t.type,filename:t.name,url:t.name,size:t.size,error:e};this.failedAttachments.push(i),this.requestUpdate("failedAttachments")}removeFailedAttachment(t){this.failedAttachments=this.failedAttachments.filter((e=>e!==t)),this.requestUpdate("failedAttachments")}handleRemoveFileClicked(t){const e=t.target,i=this.currentAttachments.find((({uuid:t})=>t===e.id));i&&this.removeCurrentAttachment(i);const n=this.failedAttachments.find((({uuid:t})=>t===e.id));n&&this.removeFailedAttachment(n)}toggleButton(){if(this.button){this.buttonError="";const t=0===this.currentText.trim().length,e=0===this.currentAttachments.length;this.chatbox&&this.attachments?this.buttonDisabled=t&&e:this.chatbox?this.buttonDisabled=t:this.attachments?this.buttonDisabled=e:this.buttonDisabled=!0}}handleSendClick(t){t.stopPropagation(),this.handleSend()}handleSendEnter(t){if("Enter"===t.key&&!t.shiftKey){t.target.hasVisibleOptions()||this.handleSend(),this.preventDefaults(t)}}handleSend(){if(!this.buttonDisabled){this.buttonDisabled=!0;const t=this.buttonName;this.fireCustomEvent(Ee.ButtonClicked,{name:t})}}render(){return D`
+    `}constructor(){super(),this.currentText="",this.initialText="",this.accept="",this.endpoint=Jt,this.currentAttachments=[],this.failedAttachments=[],this.buttonName="Send",this.buttonDisabled=!0,this.buttonError="",this.value=""}deserializeComposeValue(){if(this.value){const t=JSON.parse(this.value);this.chatbox&&(this.initialText=t.text),this.attachments&&(this.currentAttachments=t.attachments)}}serializeComposeValue(){const t={text:this.currentText,attachments:this.currentAttachments};this.value=JSON.stringify(t)}firstUpdated(t){super.firstUpdated(t),this.deserializeComposeValue(),this.setFocusOnChatbox()}updated(t){super.updated(t),(t.has("currentText")||t.has("currentAttachments"))&&(this.toggleButton(),this.serializeComposeValue(),this.fireCustomEvent(Ee.ContentChanged,this.value)),this.setFocusOnChatbox()}setFocusOnChatbox(){if(this.chatbox){const t=this.shadowRoot.querySelector(".chatbox");t&&window.setTimeout((()=>{t.focus()}),0)}}reset(){this.shadowRoot.querySelector(".chatbox").value="",this.initialText="",this.currentText="",this.currentAttachments=[],this.failedAttachments=[],this.buttonError=""}handleContainerClick(t){this.setFocusOnChatbox()}handleChatboxChange(t){const e=t.target;this.currentText=e.value,this.toggleButton(),this.serializeComposeValue(),this.fireCustomEvent(Ee.ContentChanged,this.value)}handleDragEnter(t){this.highlight(t)}handleDragOver(t){this.highlight(t)}handleDragLeave(t){this.unhighlight(t)}handleDrop(t){this.unhighlight(t);const e=t.dataTransfer;if(e){const t=e.files;this.uploadFiles(t)}}preventDefaults(t){t.preventDefault(),t.stopPropagation()}highlight(t){this.pendingDrop=!0,this.preventDefaults(t)}unhighlight(t){this.pendingDrop=!1,this.preventDefaults(t)}handleUploadFileIconClicked(){this.dispatchEvent(new Event("change"))}handleUploadFileInputChanged(t){const e=t.target.files;this.uploadFiles(e)}uploadFiles(t){let e=[];e=this.currentAttachments&&this.currentAttachments.length>0?[...t].filter((t=>{if(-1===this.currentAttachments.findIndex((e=>e.filename===t.name&&e.size===t.size)))return t})):[...t],e.map((t=>{this.uploadFile(t)}))}uploadFile(t){this.uploading=!0;const e=this.endpoint,i=new FormData;i.append("file",t),le(e,i).then((t=>{const e=t.json;e&&this.addCurrentAttachment(e)})).catch((e=>{let i="";i=400===e.status?e.json.file[0]:"Server failure",console.error(i),this.addFailedAttachment(t,i)})).finally((()=>{this.uploading=!1}))}addCurrentAttachment(t){this.currentAttachments.push(t),this.requestUpdate("currentAttachments")}removeCurrentAttachment(t){this.currentAttachments=this.currentAttachments.filter((e=>e!==t)),this.requestUpdate("currentAttachments")}addFailedAttachment(t,e){const i={uuid:Math.random().toString(36).slice(2,6),content_type:t.type,filename:t.name,url:t.name,size:t.size,error:e};this.failedAttachments.push(i),this.requestUpdate("failedAttachments")}removeFailedAttachment(t){this.failedAttachments=this.failedAttachments.filter((e=>e!==t)),this.requestUpdate("failedAttachments")}handleRemoveFileClicked(t){const e=t.target,i=this.currentAttachments.find((({uuid:t})=>t===e.id));i&&this.removeCurrentAttachment(i);const n=this.failedAttachments.find((({uuid:t})=>t===e.id));n&&this.removeFailedAttachment(n)}toggleButton(){if(this.button){this.buttonError="";const t=0===this.currentText.trim().length,e=0===this.currentAttachments.length;this.chatbox&&this.attachments?this.buttonDisabled=t&&e:this.chatbox?this.buttonDisabled=t:this.attachments?this.buttonDisabled=e:this.buttonDisabled=!0}}handleSendClick(t){t.stopPropagation(),this.handleSend()}handleSendEnter(t){if(this.button&&"Enter"===t.key&&!t.shiftKey)if(this.completion){t.target.hasVisibleOptions()||(this.handleSend(),this.preventDefaults(t))}else this.handleSend(),this.preventDefaults(t)}handleSend(){if(!this.buttonDisabled){this.buttonDisabled=!0;const t=this.buttonName;this.fireCustomEvent(Ee.ButtonClicked,{name:t})}}render(){return D`
       <temba-field
         name=${this.name}
         .errors=${this.errors}
@@ -5937,23 +5937,34 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
         >
           <div class="drop-mask"><div>Upload Attachment</div></div>
 
-          ${this.chatbox?D`<div class="items chatbox">${this.getChatbox()}</div>`:null}
+          ${this.chatbox?D`${this.getChatbox()}`:null}
           ${this.attachments?D`<div class="items attachments">
                 ${this.getAttachments()}
               </div>`:null}
           <div class="items actions">${this.getActions()}</div>
         </div>
       </temba-field>
-    `}getChatbox(){return D` <temba-completion
-      value=${this.currentText}
-      gsm
-      textarea
-      autogrow
-      @change=${this.handleChatboxChange}
-      @keydown=${this.handleSendEnter}
-      placeholder="Write something here"
-    >
-    </temba-completion>`}getAttachments(){return D`
+    `}getChatbox(){return this.completion?D` <temba-completion
+        class="chatbox"
+        value=${this.initialText}
+        gsm
+        textarea
+        autogrow
+        @change=${this.handleChatboxChange}
+        @keydown=${this.handleSendEnter}
+        placeholder="Write something here"
+      >
+      </temba-completion>`:D` <temba-textinput
+        class="chatbox"
+        gsm
+        textarea
+        autogrow
+        value=${this.initialText}
+        @change=${this.handleChatboxChange}
+        @keydown=${this.handleSendEnter}
+        placeholder="Write something here"
+      >
+      </temba-textinput>`}getAttachments(){return D`
       ${this.currentAttachments&&this.currentAttachments.length>0||this.failedAttachments&&this.failedAttachments.length>0?D` <div class="attachments-list">
             ${this.currentAttachments.map((t=>{return D` <div class="attachment-item">
                 <div
@@ -6022,12 +6033,14 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
             @click="${this.handleUploadFileIconClicked}"
             clickable
           ></temba-icon>
-        </label>`}getCounter(){return D`<temba-charcount text="${this.currentText}"></temba-charcount>`}getButton(){return D` <temba-button
+        </label>`}getCounter(){return D`<temba-charcount
+      .text="${this.currentText}"
+    ></temba-charcount>`}getButton(){return D` <temba-button
       id="send-button"
       name=${this.buttonName}
       @click=${this.handleSendClick}
       ?disabled=${this.buttonDisabled}
-    ></temba-button>`}}t([ct({type:Boolean})],lh.prototype,"chatbox",void 0),t([ct({type:Boolean})],lh.prototype,"attachments",void 0),t([ct({type:Boolean})],lh.prototype,"counter",void 0),t([ct({type:Boolean})],lh.prototype,"pendingDrop",void 0),t([ct({type:Boolean})],lh.prototype,"button",void 0),t([ct({type:String})],lh.prototype,"currentText",void 0),t([ct({type:String})],lh.prototype,"accept",void 0),t([ct({type:String,attribute:!1})],lh.prototype,"endpoint",void 0),t([ct({type:Boolean,attribute:!1})],lh.prototype,"uploading",void 0),t([ct({type:Array})],lh.prototype,"currentAttachments",void 0),t([ct({type:Array,attribute:!1})],lh.prototype,"failedAttachments",void 0),t([ct({type:String})],lh.prototype,"buttonName",void 0),t([ct({type:Boolean,attribute:!1})],lh.prototype,"buttonDisabled",void 0),t([ct({type:String,attribute:!1})],lh.prototype,"buttonError",void 0),t([ct({type:Boolean,attribute:"widget_only"})],lh.prototype,"widgetOnly",void 0),t([ct({type:Array})],lh.prototype,"errors",void 0),t([ct({type:String})],lh.prototype,"value",void 0);class hh extends lt{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`
+    ></temba-button>`}}t([ct({type:Boolean})],lh.prototype,"completion",void 0),t([ct({type:Boolean})],lh.prototype,"chatbox",void 0),t([ct({type:Boolean})],lh.prototype,"attachments",void 0),t([ct({type:Boolean})],lh.prototype,"counter",void 0),t([ct({type:Boolean})],lh.prototype,"pendingDrop",void 0),t([ct({type:Boolean})],lh.prototype,"button",void 0),t([ct({type:String})],lh.prototype,"currentText",void 0),t([ct({type:String})],lh.prototype,"initialText",void 0),t([ct({type:String})],lh.prototype,"accept",void 0),t([ct({type:String,attribute:!1})],lh.prototype,"endpoint",void 0),t([ct({type:Boolean,attribute:!1})],lh.prototype,"uploading",void 0),t([ct({type:Array})],lh.prototype,"currentAttachments",void 0),t([ct({type:Array,attribute:!1})],lh.prototype,"failedAttachments",void 0),t([ct({type:String})],lh.prototype,"buttonName",void 0),t([ct({type:Boolean,attribute:!1})],lh.prototype,"buttonDisabled",void 0),t([ct({type:String,attribute:!1})],lh.prototype,"buttonError",void 0),t([ct({type:Boolean,attribute:"widget_only"})],lh.prototype,"widgetOnly",void 0),t([ct({type:Array})],lh.prototype,"errors",void 0),t([ct({type:String})],lh.prototype,"value",void 0);class hh extends lt{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`
       :host {
         position: absolute;
       }

package/dist/index.js

@@ -5825,7 +5825,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
       .items {
       }
 
-      temba-completion {
+      .chatbox {
         margin-left: 0.3em;
         margin-top: 0.3em;
         --color-widget-border: none;
@@ -5920,7 +5920,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
         color: rgba(250, 0, 0, 0.75);
         font-size: var(--help-text-size);
       }
-    `}constructor(){super(),this.currentText="",this.accept="",this.endpoint=Jt,this.currentAttachments=[],this.failedAttachments=[],this.buttonName="Send",this.buttonDisabled=!0,this.buttonError="",this.value=""}deserializeComposeValue(){if(this.value){const t=JSON.parse(this.value);this.chatbox&&(this.currentText=t.text),this.attachments&&(this.currentAttachments=t.attachments)}}serializeComposeValue(){const t={text:this.currentText,attachments:this.currentAttachments};this.value=JSON.stringify(t)}firstUpdated(t){super.firstUpdated(t),this.deserializeComposeValue(),this.setFocusOnChatbox()}updated(t){super.updated(t),(t.has("currentText")||t.has("currentAttachments"))&&(this.toggleButton(),this.serializeComposeValue(),this.fireCustomEvent(Ee.ContentChanged,this.value)),this.setFocusOnChatbox()}setFocusOnChatbox(){if(this.chatbox){const t=this.shadowRoot.querySelector("temba-completion");t&&window.setTimeout((()=>{t.focus()}),0)}}reset(){this.currentText="",this.currentAttachments=[],this.failedAttachments=[],this.buttonError=""}handleContainerClick(t){this.setFocusOnChatbox()}handleChatboxChange(t){const e=t.target;this.currentText=e.value}handleDragEnter(t){this.highlight(t)}handleDragOver(t){this.highlight(t)}handleDragLeave(t){this.unhighlight(t)}handleDrop(t){this.unhighlight(t);const e=t.dataTransfer;if(e){const t=e.files;this.uploadFiles(t)}}preventDefaults(t){t.preventDefault(),t.stopPropagation()}highlight(t){this.pendingDrop=!0,this.preventDefaults(t)}unhighlight(t){this.pendingDrop=!1,this.preventDefaults(t)}handleUploadFileIconClicked(){this.dispatchEvent(new Event("change"))}handleUploadFileInputChanged(t){const e=t.target.files;this.uploadFiles(e)}uploadFiles(t){let e=[];e=this.currentAttachments&&this.currentAttachments.length>0?[...t].filter((t=>{if(-1===this.currentAttachments.findIndex((e=>e.filename===t.name&&e.size===t.size)))return t})):[...t],e.map((t=>{this.uploadFile(t)}))}uploadFile(t){this.uploading=!0;const e=this.endpoint,i=new FormData;i.append("file",t),le(e,i).then((t=>{const e=t.json;e&&this.addCurrentAttachment(e)})).catch((e=>{let i="";i=400===e.status?e.json.file[0]:"Server failure",console.error(i),this.addFailedAttachment(t,i)})).finally((()=>{this.uploading=!1}))}addCurrentAttachment(t){this.currentAttachments.push(t),this.requestUpdate("currentAttachments")}removeCurrentAttachment(t){this.currentAttachments=this.currentAttachments.filter((e=>e!==t)),this.requestUpdate("currentAttachments")}addFailedAttachment(t,e){const i={uuid:Math.random().toString(36).slice(2,6),content_type:t.type,filename:t.name,url:t.name,size:t.size,error:e};this.failedAttachments.push(i),this.requestUpdate("failedAttachments")}removeFailedAttachment(t){this.failedAttachments=this.failedAttachments.filter((e=>e!==t)),this.requestUpdate("failedAttachments")}handleRemoveFileClicked(t){const e=t.target,i=this.currentAttachments.find((({uuid:t})=>t===e.id));i&&this.removeCurrentAttachment(i);const n=this.failedAttachments.find((({uuid:t})=>t===e.id));n&&this.removeFailedAttachment(n)}toggleButton(){if(this.button){this.buttonError="";const t=0===this.currentText.trim().length,e=0===this.currentAttachments.length;this.chatbox&&this.attachments?this.buttonDisabled=t&&e:this.chatbox?this.buttonDisabled=t:this.attachments?this.buttonDisabled=e:this.buttonDisabled=!0}}handleSendClick(t){t.stopPropagation(),this.handleSend()}handleSendEnter(t){if("Enter"===t.key&&!t.shiftKey){t.target.hasVisibleOptions()||this.handleSend(),this.preventDefaults(t)}}handleSend(){if(!this.buttonDisabled){this.buttonDisabled=!0;const t=this.buttonName;this.fireCustomEvent(Ee.ButtonClicked,{name:t})}}render(){return D`
+    `}constructor(){super(),this.currentText="",this.initialText="",this.accept="",this.endpoint=Jt,this.currentAttachments=[],this.failedAttachments=[],this.buttonName="Send",this.buttonDisabled=!0,this.buttonError="",this.value=""}deserializeComposeValue(){if(this.value){const t=JSON.parse(this.value);this.chatbox&&(this.initialText=t.text),this.attachments&&(this.currentAttachments=t.attachments)}}serializeComposeValue(){const t={text:this.currentText,attachments:this.currentAttachments};this.value=JSON.stringify(t)}firstUpdated(t){super.firstUpdated(t),this.deserializeComposeValue(),this.setFocusOnChatbox()}updated(t){super.updated(t),(t.has("currentText")||t.has("currentAttachments"))&&(this.toggleButton(),this.serializeComposeValue(),this.fireCustomEvent(Ee.ContentChanged,this.value)),this.setFocusOnChatbox()}setFocusOnChatbox(){if(this.chatbox){const t=this.shadowRoot.querySelector(".chatbox");t&&window.setTimeout((()=>{t.focus()}),0)}}reset(){this.shadowRoot.querySelector(".chatbox").value="",this.initialText="",this.currentText="",this.currentAttachments=[],this.failedAttachments=[],this.buttonError=""}handleContainerClick(t){this.setFocusOnChatbox()}handleChatboxChange(t){const e=t.target;this.currentText=e.value,this.toggleButton(),this.serializeComposeValue(),this.fireCustomEvent(Ee.ContentChanged,this.value)}handleDragEnter(t){this.highlight(t)}handleDragOver(t){this.highlight(t)}handleDragLeave(t){this.unhighlight(t)}handleDrop(t){this.unhighlight(t);const e=t.dataTransfer;if(e){const t=e.files;this.uploadFiles(t)}}preventDefaults(t){t.preventDefault(),t.stopPropagation()}highlight(t){this.pendingDrop=!0,this.preventDefaults(t)}unhighlight(t){this.pendingDrop=!1,this.preventDefaults(t)}handleUploadFileIconClicked(){this.dispatchEvent(new Event("change"))}handleUploadFileInputChanged(t){const e=t.target.files;this.uploadFiles(e)}uploadFiles(t){let e=[];e=this.currentAttachments&&this.currentAttachments.length>0?[...t].filter((t=>{if(-1===this.currentAttachments.findIndex((e=>e.filename===t.name&&e.size===t.size)))return t})):[...t],e.map((t=>{this.uploadFile(t)}))}uploadFile(t){this.uploading=!0;const e=this.endpoint,i=new FormData;i.append("file",t),le(e,i).then((t=>{const e=t.json;e&&this.addCurrentAttachment(e)})).catch((e=>{let i="";i=400===e.status?e.json.file[0]:"Server failure",console.error(i),this.addFailedAttachment(t,i)})).finally((()=>{this.uploading=!1}))}addCurrentAttachment(t){this.currentAttachments.push(t),this.requestUpdate("currentAttachments")}removeCurrentAttachment(t){this.currentAttachments=this.currentAttachments.filter((e=>e!==t)),this.requestUpdate("currentAttachments")}addFailedAttachment(t,e){const i={uuid:Math.random().toString(36).slice(2,6),content_type:t.type,filename:t.name,url:t.name,size:t.size,error:e};this.failedAttachments.push(i),this.requestUpdate("failedAttachments")}removeFailedAttachment(t){this.failedAttachments=this.failedAttachments.filter((e=>e!==t)),this.requestUpdate("failedAttachments")}handleRemoveFileClicked(t){const e=t.target,i=this.currentAttachments.find((({uuid:t})=>t===e.id));i&&this.removeCurrentAttachment(i);const n=this.failedAttachments.find((({uuid:t})=>t===e.id));n&&this.removeFailedAttachment(n)}toggleButton(){if(this.button){this.buttonError="";const t=0===this.currentText.trim().length,e=0===this.currentAttachments.length;this.chatbox&&this.attachments?this.buttonDisabled=t&&e:this.chatbox?this.buttonDisabled=t:this.attachments?this.buttonDisabled=e:this.buttonDisabled=!0}}handleSendClick(t){t.stopPropagation(),this.handleSend()}handleSendEnter(t){if(this.button&&"Enter"===t.key&&!t.shiftKey)if(this.completion){t.target.hasVisibleOptions()||(this.handleSend(),this.preventDefaults(t))}else this.handleSend(),this.preventDefaults(t)}handleSend(){if(!this.buttonDisabled){this.buttonDisabled=!0;const t=this.buttonName;this.fireCustomEvent(Ee.ButtonClicked,{name:t})}}render(){return D`
       <temba-field
         name=${this.name}
         .errors=${this.errors}
@@ -5937,23 +5937,34 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
         >
           <div class="drop-mask"><div>Upload Attachment</div></div>
 
-          ${this.chatbox?D`<div class="items chatbox">${this.getChatbox()}</div>`:null}
+          ${this.chatbox?D`${this.getChatbox()}`:null}
           ${this.attachments?D`<div class="items attachments">
                 ${this.getAttachments()}
               </div>`:null}
           <div class="items actions">${this.getActions()}</div>
         </div>
       </temba-field>
-    `}getChatbox(){return D` <temba-completion
-      value=${this.currentText}
-      gsm
-      textarea
-      autogrow
-      @change=${this.handleChatboxChange}
-      @keydown=${this.handleSendEnter}
-      placeholder="Write something here"
-    >
-    </temba-completion>`}getAttachments(){return D`
+    `}getChatbox(){return this.completion?D` <temba-completion
+        class="chatbox"
+        value=${this.initialText}
+        gsm
+        textarea
+        autogrow
+        @change=${this.handleChatboxChange}
+        @keydown=${this.handleSendEnter}
+        placeholder="Write something here"
+      >
+      </temba-completion>`:D` <temba-textinput
+        class="chatbox"
+        gsm
+        textarea
+        autogrow
+        value=${this.initialText}
+        @change=${this.handleChatboxChange}
+        @keydown=${this.handleSendEnter}
+        placeholder="Write something here"
+      >
+      </temba-textinput>`}getAttachments(){return D`
       ${this.currentAttachments&&this.currentAttachments.length>0||this.failedAttachments&&this.failedAttachments.length>0?D` <div class="attachments-list">
             ${this.currentAttachments.map((t=>{return D` <div class="attachment-item">
                 <div
@@ -6022,12 +6033,14 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
             @click="${this.handleUploadFileIconClicked}"
             clickable
           ></temba-icon>
-        </label>`}getCounter(){return D`<temba-charcount text="${this.currentText}"></temba-charcount>`}getButton(){return D` <temba-button
+        </label>`}getCounter(){return D`<temba-charcount
+      .text="${this.currentText}"
+    ></temba-charcount>`}getButton(){return D` <temba-button
       id="send-button"
       name=${this.buttonName}
       @click=${this.handleSendClick}
       ?disabled=${this.buttonDisabled}
-    ></temba-button>`}}t([ct({type:Boolean})],lh.prototype,"chatbox",void 0),t([ct({type:Boolean})],lh.prototype,"attachments",void 0),t([ct({type:Boolean})],lh.prototype,"counter",void 0),t([ct({type:Boolean})],lh.prototype,"pendingDrop",void 0),t([ct({type:Boolean})],lh.prototype,"button",void 0),t([ct({type:String})],lh.prototype,"currentText",void 0),t([ct({type:String})],lh.prototype,"accept",void 0),t([ct({type:String,attribute:!1})],lh.prototype,"endpoint",void 0),t([ct({type:Boolean,attribute:!1})],lh.prototype,"uploading",void 0),t([ct({type:Array})],lh.prototype,"currentAttachments",void 0),t([ct({type:Array,attribute:!1})],lh.prototype,"failedAttachments",void 0),t([ct({type:String})],lh.prototype,"buttonName",void 0),t([ct({type:Boolean,attribute:!1})],lh.prototype,"buttonDisabled",void 0),t([ct({type:String,attribute:!1})],lh.prototype,"buttonError",void 0),t([ct({type:Boolean,attribute:"widget_only"})],lh.prototype,"widgetOnly",void 0),t([ct({type:Array})],lh.prototype,"errors",void 0),t([ct({type:String})],lh.prototype,"value",void 0);class hh extends lt{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`
+    ></temba-button>`}}t([ct({type:Boolean})],lh.prototype,"completion",void 0),t([ct({type:Boolean})],lh.prototype,"chatbox",void 0),t([ct({type:Boolean})],lh.prototype,"attachments",void 0),t([ct({type:Boolean})],lh.prototype,"counter",void 0),t([ct({type:Boolean})],lh.prototype,"pendingDrop",void 0),t([ct({type:Boolean})],lh.prototype,"button",void 0),t([ct({type:String})],lh.prototype,"currentText",void 0),t([ct({type:String})],lh.prototype,"initialText",void 0),t([ct({type:String})],lh.prototype,"accept",void 0),t([ct({type:String,attribute:!1})],lh.prototype,"endpoint",void 0),t([ct({type:Boolean,attribute:!1})],lh.prototype,"uploading",void 0),t([ct({type:Array})],lh.prototype,"currentAttachments",void 0),t([ct({type:Array,attribute:!1})],lh.prototype,"failedAttachments",void 0),t([ct({type:String})],lh.prototype,"buttonName",void 0),t([ct({type:Boolean,attribute:!1})],lh.prototype,"buttonDisabled",void 0),t([ct({type:String,attribute:!1})],lh.prototype,"buttonError",void 0),t([ct({type:Boolean,attribute:"widget_only"})],lh.prototype,"widgetOnly",void 0),t([ct({type:Array})],lh.prototype,"errors",void 0),t([ct({type:String})],lh.prototype,"value",void 0);class hh extends lt{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`
       :host {
         position: absolute;
       }

package/dist/sw.js

@@ -1,2 +1,2 @@
-if(!self.define){let e,t={};const o=(o,n)=>(o=new URL(o+".js",n).href,t[o]||new Promise((t=>{if("document"in self){const e=document.createElement("script");e.src=o,e.onload=t,document.head.appendChild(e)}else e=o,importScripts(o),t()})).then((()=>{let e=t[o];if(!e)throw new Error(`Module ${o} didn’t register its module`);return e})));self.define=(n,s)=>{const i=e||("document"in self?document.currentScript.src:"")||location.href;if(t[i])return;let r={};const f=e=>o(e,i),l={module:{uri:i},exports:r,require:f};t[i]=Promise.all(n.map((e=>l[e]||f(e)))).then((e=>(s(...e),r)))}}define(["./workbox-919adfb7"],(function(e){"use strict";self.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"a0408c72.js",revision:"2f4026df29f733bb93eae5a159bac78e"},{url:"templates/components-body.html",revision:"c7d8c9cfd043ae2a2b093ab98e2fffb4"},{url:"templates/components-head.html",revision:"f054ad8888930a0f743e8fd6fcc7ef12"}],{}),e.registerRoute(new e.NavigationRoute(e.createHandlerBoundToURL("/index.html"))),e.registerRoute("polyfills/*.js",new e.CacheFirst,"GET")}));
+if(!self.define){let e,t={};const o=(o,n)=>(o=new URL(o+".js",n).href,t[o]||new Promise((t=>{if("document"in self){const e=document.createElement("script");e.src=o,e.onload=t,document.head.appendChild(e)}else e=o,importScripts(o),t()})).then((()=>{let e=t[o];if(!e)throw new Error(`Module ${o} didn’t register its module`);return e})));self.define=(n,s)=>{const i=e||("document"in self?document.currentScript.src:"")||location.href;if(t[i])return;let r={};const l=e=>o(e,i),c={module:{uri:i},exports:r,require:l};t[i]=Promise.all(n.map((e=>c[e]||l(e)))).then((e=>(s(...e),r)))}}define(["./workbox-919adfb7"],(function(e){"use strict";self.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"196cda88.js",revision:"01b7b43dc164e7109279c07e6a29e13c"},{url:"templates/components-body.html",revision:"a5e236ef1e371527aa559a02a941e88b"},{url:"templates/components-head.html",revision:"0964163972f7dcd6b8b08a990c7a2c2e"}],{}),e.registerRoute(new e.NavigationRoute(e.createHandlerBoundToURL("/index.html"))),e.registerRoute("polyfills/*.js",new e.CacheFirst,"GET")}));
 //# sourceMappingURL=sw.js.map

package/dist/sw.js.map

@@ -1 +1 @@
-{"version":3,"file":"sw.js","sources":["../../tmp/a1173265e4514d18030ae79c8de71eda/sw.js"],"sourcesContent":["import {registerRoute as workbox_routing_registerRoute} from '/workspaces/temba-components/node_modules/workbox-routing/registerRoute.mjs';\nimport {CacheFirst as workbox_strategies_CacheFirst} from '/workspaces/temba-components/node_modules/workbox-strategies/CacheFirst.mjs';\nimport {clientsClaim as workbox_core_clientsClaim} from '/workspaces/temba-components/node_modules/workbox-core/clientsClaim.mjs';\nimport {precacheAndRoute as workbox_precaching_precacheAndRoute} from '/workspaces/temba-components/node_modules/workbox-precaching/precacheAndRoute.mjs';\nimport {NavigationRoute as workbox_routing_NavigationRoute} from '/workspaces/temba-components/node_modules/workbox-routing/NavigationRoute.mjs';\nimport {createHandlerBoundToURL as workbox_precaching_createHandlerBoundToURL} from '/workspaces/temba-components/node_modules/workbox-precaching/createHandlerBoundToURL.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\n\n\n\n\n\n\nself.skipWaiting();\n\nworkbox_core_clientsClaim();\n\n\n/**\n * The precacheAndRoute() method efficiently caches and responds to\n * requests for URLs in the manifest.\n * See https://goo.gl/S9QRab\n */\nworkbox_precaching_precacheAndRoute([\n  {\n    \"url\": \"a0408c72.js\",\n    \"revision\": \"2f4026df29f733bb93eae5a159bac78e\"\n  },\n  {\n    \"url\": \"templates/components-body.html\",\n    \"revision\": \"c7d8c9cfd043ae2a2b093ab98e2fffb4\"\n  },\n  {\n    \"url\": \"templates/components-head.html\",\n    \"revision\": \"f054ad8888930a0f743e8fd6fcc7ef12\"\n  }\n], {});\n\nworkbox_routing_registerRoute(new workbox_routing_NavigationRoute(workbox_precaching_createHandlerBoundToURL(\"/index.html\")));\n\n\nworkbox_routing_registerRoute(\"polyfills/*.js\", new workbox_strategies_CacheFirst(), 'GET');\n\n\n\n\n"],"names":["self","skipWaiting","workbox_core_clientsClaim","workbox_precaching_precacheAndRoute","url","revision","workbox","registerRoute","workbox_routing_NavigationRoute","workbox_precaching_createHandlerBoundToURL","workbox_strategies_CacheFirst"],"mappings":"0nBAwBAA,KAAKC,cAELC,EAAAA,eAQAC,EAAAA,iBAAoC,CAClC,CACEC,IAAO,cACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,qCAEb,CAAE,GAEwBC,EAAAC,cAAC,IAAIC,EAAAA,gBAAgCC,EAAAA,wBAA2C,iBAGhFH,EAAAC,cAAC,iBAAkB,IAAIG,aAAiC"}
+{"version":3,"file":"sw.js","sources":["../../tmp/5cae798e2c458439a67eb82ff7339ca5/sw.js"],"sourcesContent":["import {registerRoute as workbox_routing_registerRoute} from '/workspaces/temba-components/node_modules/workbox-routing/registerRoute.mjs';\nimport {CacheFirst as workbox_strategies_CacheFirst} from '/workspaces/temba-components/node_modules/workbox-strategies/CacheFirst.mjs';\nimport {clientsClaim as workbox_core_clientsClaim} from '/workspaces/temba-components/node_modules/workbox-core/clientsClaim.mjs';\nimport {precacheAndRoute as workbox_precaching_precacheAndRoute} from '/workspaces/temba-components/node_modules/workbox-precaching/precacheAndRoute.mjs';\nimport {NavigationRoute as workbox_routing_NavigationRoute} from '/workspaces/temba-components/node_modules/workbox-routing/NavigationRoute.mjs';\nimport {createHandlerBoundToURL as workbox_precaching_createHandlerBoundToURL} from '/workspaces/temba-components/node_modules/workbox-precaching/createHandlerBoundToURL.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\n\n\n\n\n\n\nself.skipWaiting();\n\nworkbox_core_clientsClaim();\n\n\n/**\n * The precacheAndRoute() method efficiently caches and responds to\n * requests for URLs in the manifest.\n * See https://goo.gl/S9QRab\n */\nworkbox_precaching_precacheAndRoute([\n  {\n    \"url\": \"196cda88.js\",\n    \"revision\": \"01b7b43dc164e7109279c07e6a29e13c\"\n  },\n  {\n    \"url\": \"templates/components-body.html\",\n    \"revision\": \"a5e236ef1e371527aa559a02a941e88b\"\n  },\n  {\n    \"url\": \"templates/components-head.html\",\n    \"revision\": \"0964163972f7dcd6b8b08a990c7a2c2e\"\n  }\n], {});\n\nworkbox_routing_registerRoute(new workbox_routing_NavigationRoute(workbox_precaching_createHandlerBoundToURL(\"/index.html\")));\n\n\nworkbox_routing_registerRoute(\"polyfills/*.js\", new workbox_strategies_CacheFirst(), 'GET');\n\n\n\n\n"],"names":["self","skipWaiting","workbox_core_clientsClaim","workbox_precaching_precacheAndRoute","url","revision","workbox","registerRoute","workbox_routing_NavigationRoute","workbox_precaching_createHandlerBoundToURL","workbox_strategies_CacheFirst"],"mappings":"0nBAwBAA,KAAKC,cAELC,EAAAA,eAQAC,EAAAA,iBAAoC,CAClC,CACEC,IAAO,cACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,qCAEb,CAAE,GAEwBC,EAAAC,cAAC,IAAIC,EAAAA,gBAAgCC,EAAAA,wBAA2C,iBAGhFH,EAAAC,cAAC,iBAAkB,IAAIG,aAAiC"}

package/dist/templates/components-body.html

@@ -1 +1 @@
-<script type="module" src="{{STATIC_URL}}@nyaruka/temba-components/dist/a0408c72.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.59.0"</script>
+<script type="module" src="{{STATIC_URL}}@nyaruka/temba-components/dist/196cda88.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.60.1"</script>

package/dist/templates/components-head.html

@@ -1 +1 @@
-<link rel="modulepreload" href="{{STATIC_URL}}@nyaruka/temba-components/dist/a0408c72.js" crossorigin="anonymous">
+<link rel="modulepreload" href="{{STATIC_URL}}@nyaruka/temba-components/dist/196cda88.js" crossorigin="anonymous">

package/out-tsc/src/compose/Compose.js

@@ -61,7 +61,7 @@ export class Compose extends FormElement {
       .items {
       }
 
-      temba-completion {
+      .chatbox {
         margin-left: 0.3em;
         margin-top: 0.3em;
         --color-widget-border: none;
@@ -161,6 +161,7 @@ export class Compose extends FormElement {
     constructor() {
         super();
         this.currentText = '';
+        this.initialText = '';
         this.accept = ''; //e.g. ".xls,.xlsx"
         this.endpoint = DEFAULT_MEDIA_ENDPOINT;
         this.currentAttachments = [];
@@ -174,7 +175,7 @@ export class Compose extends FormElement {
         if (this.value) {
             const parsed_value = JSON.parse(this.value);
             if (this.chatbox) {
-                this.currentText = parsed_value.text;
+                this.initialText = parsed_value.text;
             }
             if (this.attachments) {
                 this.currentAttachments = parsed_value.attachments;
@@ -205,7 +206,7 @@ export class Compose extends FormElement {
     }
     setFocusOnChatbox() {
         if (this.chatbox) {
-            const completion = this.shadowRoot.querySelector('temba-completion');
+            const completion = this.shadowRoot.querySelector('.chatbox');
             if (completion) {
                 window.setTimeout(() => {
                     completion.focus();
@@ -214,6 +215,8 @@ export class Compose extends FormElement {
         }
     }
     reset() {
+        this.shadowRoot.querySelector('.chatbox').value = '';
+        this.initialText = '';
         this.currentText = '';
         this.currentAttachments = [];
         this.failedAttachments = [];
@@ -223,8 +226,11 @@ export class Compose extends FormElement {
         this.setFocusOnChatbox();
     }
     handleChatboxChange(evt) {
-        const completion = evt.target;
-        this.currentText = completion.value;
+        const chatbox = evt.target;
+        this.currentText = chatbox.value;
+        this.toggleButton();
+        this.serializeComposeValue();
+        this.fireCustomEvent(CustomEventType.ContentChanged, this.value);
     }
     handleDragEnter(evt) {
         this.highlight(evt);
@@ -367,12 +373,20 @@ export class Compose extends FormElement {
         this.handleSend();
     }
     handleSendEnter(evt) {
-        if (evt.key === 'Enter' && !evt.shiftKey) {
-            const chat = evt.target;
-            if (!chat.hasVisibleOptions()) {
-                this.handleSend();
+        if (this.button) {
+            if (evt.key === 'Enter' && !evt.shiftKey) {
+                if (this.completion) {
+                    const chat = evt.target;
+                    if (!chat.hasVisibleOptions()) {
+                        this.handleSend();
+                        this.preventDefaults(evt);
+                    }
+                }
+                else {
+                    this.handleSend();
+                    this.preventDefaults(evt);
+                }
             }
-            this.preventDefaults(evt);
         }
     }
     handleSend() {
@@ -400,9 +414,7 @@ export class Compose extends FormElement {
         >
           <div class="drop-mask"><div>Upload Attachment</div></div>
 
-          ${this.chatbox
-            ? html `<div class="items chatbox">${this.getChatbox()}</div>`
-            : null}
+          ${this.chatbox ? html `${this.getChatbox()}` : null}
           ${this.attachments
             ? html `<div class="items attachments">
                 ${this.getAttachments()}
@@ -414,16 +426,32 @@ export class Compose extends FormElement {
     `;
     }
     getChatbox() {
-        return html ` <temba-completion
-      value=${this.currentText}
-      gsm
-      textarea
-      autogrow
-      @change=${this.handleChatboxChange}
-      @keydown=${this.handleSendEnter}
-      placeholder="Write something here"
-    >
-    </temba-completion>`;
+        if (this.completion) {
+            return html ` <temba-completion
+        class="chatbox"
+        value=${this.initialText}
+        gsm
+        textarea
+        autogrow
+        @change=${this.handleChatboxChange}
+        @keydown=${this.handleSendEnter}
+        placeholder="Write something here"
+      >
+      </temba-completion>`;
+        }
+        else {
+            return html ` <temba-textinput
+        class="chatbox"
+        gsm
+        textarea
+        autogrow
+        value=${this.initialText}
+        @change=${this.handleChatboxChange}
+        @keydown=${this.handleSendEnter}
+        placeholder="Write something here"
+      >
+      </temba-textinput>`;
+        }
     }
     getAttachments() {
         return html `
@@ -518,7 +546,9 @@ export class Compose extends FormElement {
         }
     }
     getCounter() {
-        return html `<temba-charcount text="${this.currentText}"></temba-charcount>`;
+        return html `<temba-charcount
+      .text="${this.currentText}"
+    ></temba-charcount>`;
     }
     getButton() {
         return html ` <temba-button
@@ -529,6 +559,9 @@ export class Compose extends FormElement {
     ></temba-button>`;
     }
 }
+__decorate([
+    property({ type: Boolean })
+], Compose.prototype, "completion", void 0);
 __decorate([
     property({ type: Boolean })
 ], Compose.prototype, "chatbox", void 0);
@@ -547,6 +580,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], Compose.prototype, "currentText", void 0);
+__decorate([
+    property({ type: String })
+], Compose.prototype, "initialText", void 0);
 __decorate([
     property({ type: String })
 ], Compose.prototype, "accept", void 0);

package/out-tsc/src/compose/Compose.js.map

@@ -1 +1 @@
-{"version":3,"file":"Compose.js","sourceRoot":"","sources":["../../../src/compose/Compose.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css } from 'lit';\nimport { FormElement } from '../FormElement';\nimport { property } from 'lit/decorators.js';\nimport { Icon } from '../vectoricon';\nimport { CustomEventType } from '../interfaces';\nimport {\n  formatFileSize,\n  formatFileType,\n  getClasses,\n  postFormData,\n  truncate,\n  DEFAULT_MEDIA_ENDPOINT,\n  WebResponse,\n} from '../utils';\nimport { Completion } from '../completion/Completion';\n\nexport interface Attachment {\n  uuid: string;\n  content_type: string;\n  url: string;\n  filename: string;\n  size: number;\n  error: string;\n}\n\nexport class Compose extends FormElement {\n  static get styles() {\n    return css`\n      .container {\n        display: flex;\n        flex-direction: column;\n        justify-content: space-between;\n        position: relative;\n\n        border-radius: var(--curvature-widget);\n        background: var(--color-widget-bg);\n        border: 1px solid var(--color-widget-border);\n        transition: all ease-in-out var(--transition-speed);\n        box-shadow: var(--widget-box-shadow);\n        caret-color: var(--input-caret);\n        padding: var(--temba-textinput-padding);\n      }\n      .container:focus-within {\n        border-color: var(--color-focus);\n        background: var(--color-widget-bg-focused);\n        box-shadow: var(--widget-box-shadow-focused);\n      }\n\n      .drop-mask {\n        opacity: 0;\n        pointer-events: none;\n        position: absolute;\n        z-index: 1;\n        height: 100%;\n        width: 100%;\n        bottom: 0;\n        right: 0;\n        background: rgba(210, 243, 184, 0.8);\n        border-radius: var(--curvature-widget);\n        margin: -0.5em;\n        padding: 0.5em;\n        transition: opacity ease-in-out var(--transition-speed);\n        display: flex;\n        align-items: center;\n        text-align: center;\n      }\n\n      .highlight .drop-mask {\n        opacity: 1;\n      }\n\n      .drop-mask > div {\n        margin: auto;\n        border-radius: var(--curvature-widget);\n        font-weight: 400;\n        color: rgba(0, 0, 0, 0.5);\n      }\n\n      .items {\n      }\n\n      temba-completion {\n        margin-left: 0.3em;\n        margin-top: 0.3em;\n        --color-widget-border: none;\n        --curvature-widget: none;\n        --widget-box-shadow: none;\n        --widget-box-shadow-focused: none;\n        --temba-textinput-padding: 0;\n      }\n\n      .attachments {\n        display: flex;\n        flex-direction: column;\n      }\n      .attachments-list {\n        display: flex;\n        flex-direction: row;\n        flex-wrap: wrap;\n      }\n      .attachment-item {\n        background: rgba(100, 100, 100, 0.1);\n        border-radius: 2px;\n        margin: 0.3em;\n        display: flex;\n        color: var(--color-widget-text);\n      }\n      .attachment-item.error {\n        background: rgba(250, 0, 0, 0.1);\n        color: rgba(250, 0, 0, 0.75);\n      }\n      .remove-item {\n        cursor: pointer !important;\n        padding: 3px 6px;\n        border-right: 1px solid rgba(100, 100, 100, 0.2);\n        margin-top: 1px;\n        background: rgba(100, 100, 100, 0.05);\n      }\n\n      .remove-item:hover {\n        background: rgba(100, 100, 100, 0.1);\n      }\n\n      .remove-item.error:hover {\n        background: rgba(250, 0, 0, 0.1);\n      }\n\n      .remove-item.error {\n        background: rgba(250, 0, 0, 0.05);\n        color: rgba(250, 0, 0, 0.75);\n      }\n      .attachment-name {\n        align-self: center;\n        font-size: 12px;\n        padding: 2px 8px;\n      }\n\n      .actions {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        margin-left: 0.25em;\n        padding: 0.2em;\n      }\n\n      #upload-input {\n        display: none;\n      }\n      .upload-label {\n        display: flex;\n        align-items: center;\n      }\n      .upload-icon {\n        color: rgb(102, 102, 102);\n      }\n      .actions-right {\n        display: flex;\n        align-items: center;\n      }\n      temba-charcount {\n        margin-right: 5px;\n        overflow: hidden;\n        --temba-charcount-counts-margin-top: 0px;\n        --temba-charcount-summary-margin-top: 0px;\n        --temba-charcount-summary-position: fixed;\n        --temba-charcount-summary-right: 105px;\n        --temba-charcount-summary-bottom: 105px;\n      }\n      temba-button {\n        --button-y: 1px;\n        --button-x: 12px;\n      }\n      .send-error {\n        color: rgba(250, 0, 0, 0.75);\n        font-size: var(--help-text-size);\n      }\n    `;\n  }\n\n  @property({ type: Boolean })\n  chatbox: boolean;\n\n  @property({ type: Boolean })\n  attachments: boolean;\n\n  @property({ type: Boolean })\n  counter: boolean;\n\n  @property({ type: Boolean })\n  pendingDrop: boolean;\n\n  @property({ type: Boolean })\n  button: boolean;\n\n  @property({ type: String })\n  currentText = '';\n\n  @property({ type: String })\n  accept = ''; //e.g. \".xls,.xlsx\"\n\n  @property({ type: String, attribute: false })\n  endpoint = DEFAULT_MEDIA_ENDPOINT;\n\n  @property({ type: Boolean, attribute: false })\n  uploading: boolean;\n\n  @property({ type: Array })\n  currentAttachments: Attachment[] = [];\n\n  @property({ type: Array, attribute: false })\n  failedAttachments: Attachment[] = [];\n\n  @property({ type: String })\n  buttonName = 'Send';\n\n  @property({ type: Boolean, attribute: false })\n  buttonDisabled = true;\n\n  @property({ type: String, attribute: false })\n  buttonError = '';\n\n  @property({ type: Boolean, attribute: 'widget_only' })\n  widgetOnly: boolean;\n\n  @property({ type: Array })\n  errors: string[];\n\n  @property({ type: String })\n  value = '';\n\n  public constructor() {\n    super();\n  }\n\n  private deserializeComposeValue(): void {\n    if (this.value) {\n      const parsed_value = JSON.parse(this.value);\n      if (this.chatbox) {\n        this.currentText = parsed_value.text;\n      }\n      if (this.attachments) {\n        this.currentAttachments = parsed_value.attachments;\n      }\n    }\n  }\n\n  private serializeComposeValue(): void {\n    const composeValue = {\n      text: this.currentText,\n      attachments: this.currentAttachments,\n    };\n    // update this.value...\n    this.value = JSON.stringify(composeValue);\n  }\n\n  public firstUpdated(changes: Map<string, any>): void {\n    super.firstUpdated(changes);\n\n    this.deserializeComposeValue();\n    this.setFocusOnChatbox();\n  }\n\n  public updated(changes: Map<string, any>): void {\n    super.updated(changes);\n\n    if (changes.has('currentText') || changes.has('currentAttachments')) {\n      this.toggleButton();\n      this.serializeComposeValue();\n      this.fireCustomEvent(CustomEventType.ContentChanged, this.value);\n    }\n\n    this.setFocusOnChatbox();\n  }\n\n  private setFocusOnChatbox(): void {\n    if (this.chatbox) {\n      const completion = this.shadowRoot.querySelector(\n        'temba-completion'\n      ) as Completion;\n      if (completion) {\n        window.setTimeout(() => {\n          completion.focus();\n        }, 0);\n      }\n    }\n  }\n\n  public reset(): void {\n    this.currentText = '';\n    this.currentAttachments = [];\n    this.failedAttachments = [];\n    this.buttonError = '';\n  }\n\n  private handleContainerClick(evt: Event) {\n    this.setFocusOnChatbox();\n  }\n\n  private handleChatboxChange(evt: Event) {\n    const completion = evt.target as Completion;\n    this.currentText = completion.value;\n  }\n\n  private handleDragEnter(evt: DragEvent): void {\n    this.highlight(evt);\n  }\n\n  private handleDragOver(evt: DragEvent): void {\n    this.highlight(evt);\n  }\n\n  private handleDragLeave(evt: DragEvent): void {\n    this.unhighlight(evt);\n  }\n\n  private handleDrop(evt: DragEvent): void {\n    this.unhighlight(evt);\n\n    const dt = evt.dataTransfer;\n    if (dt) {\n      const files = dt.files;\n      this.uploadFiles(files);\n    }\n  }\n\n  private preventDefaults(evt: Event): void {\n    evt.preventDefault();\n    evt.stopPropagation();\n  }\n\n  private highlight(evt: DragEvent): void {\n    this.pendingDrop = true;\n    this.preventDefaults(evt);\n  }\n\n  private unhighlight(evt: DragEvent): void {\n    this.pendingDrop = false;\n    this.preventDefaults(evt);\n  }\n\n  private handleUploadFileIconClicked(): void {\n    this.dispatchEvent(new Event('change'));\n  }\n\n  private handleUploadFileInputChanged(evt: Event): void {\n    const target = evt.target as HTMLInputElement;\n    const files = target.files;\n    this.uploadFiles(files);\n  }\n\n  public uploadFiles(files: FileList): void {\n    let filesToUpload = [];\n    if (this.currentAttachments && this.currentAttachments.length > 0) {\n      //remove duplicate files that have already been uploaded\n      filesToUpload = [...files].filter(file => {\n        const index = this.currentAttachments.findIndex(\n          value => value.filename === file.name && value.size === file.size\n        );\n        if (index === -1) {\n          return file;\n        }\n      });\n    } else {\n      filesToUpload = [...files];\n    }\n    filesToUpload.map(fileToUpload => {\n      this.uploadFile(fileToUpload);\n    });\n  }\n\n  private uploadFile(file: File): void {\n    this.uploading = true;\n\n    const url = this.endpoint;\n    const payload = new FormData();\n    payload.append('file', file);\n    postFormData(url, payload)\n      .then((response: WebResponse) => {\n        const attachment = response.json as Attachment;\n        if (attachment) {\n          this.addCurrentAttachment(attachment);\n        }\n      })\n      .catch((error: WebResponse) => {\n        let uploadError = '';\n        if (error.status === 400) {\n          uploadError = error.json.file[0];\n        } else {\n          uploadError = 'Server failure';\n        }\n        console.error(uploadError);\n        this.addFailedAttachment(file, uploadError);\n      })\n      .finally(() => {\n        this.uploading = false;\n      });\n  }\n\n  private addCurrentAttachment(attachmentToAdd: any) {\n    this.currentAttachments.push(attachmentToAdd);\n    this.requestUpdate('currentAttachments');\n  }\n  private removeCurrentAttachment(attachmentToRemove: any) {\n    this.currentAttachments = this.currentAttachments.filter(\n      currentAttachment => currentAttachment !== attachmentToRemove\n    );\n    this.requestUpdate('currentAttachments');\n  }\n\n  private addFailedAttachment(file: File, error: string) {\n    const failedAttachment = {\n      uuid: Math.random().toString(36).slice(2, 6),\n      content_type: file.type,\n      filename: file.name,\n      url: file.name,\n      size: file.size,\n      error: error,\n    } as Attachment;\n    this.failedAttachments.push(failedAttachment);\n    this.requestUpdate('failedAttachments');\n  }\n  private removeFailedAttachment(attachmentToRemove: any) {\n    this.failedAttachments = this.failedAttachments.filter(\n      (failedAttachment: any) => failedAttachment !== attachmentToRemove\n    );\n    this.requestUpdate('failedAttachments');\n  }\n\n  private handleRemoveFileClicked(evt: Event): void {\n    const target = evt.target as HTMLDivElement;\n\n    const currentAttachmentToRemove = this.currentAttachments.find(\n      ({ uuid }) => uuid === target.id\n    );\n    if (currentAttachmentToRemove) {\n      this.removeCurrentAttachment(currentAttachmentToRemove);\n    }\n\n    const failedAttachmentToRemove = this.failedAttachments.find(\n      ({ uuid }) => uuid === target.id\n    );\n    if (failedAttachmentToRemove) {\n      this.removeFailedAttachment(failedAttachmentToRemove);\n    }\n  }\n\n  public toggleButton() {\n    if (this.button) {\n      this.buttonError = '';\n      const chatboxEmpty = this.currentText.trim().length === 0;\n      const attachmentsEmpty = this.currentAttachments.length === 0;\n      if (this.chatbox && this.attachments) {\n        this.buttonDisabled = chatboxEmpty && attachmentsEmpty;\n      } else if (this.chatbox) {\n        this.buttonDisabled = chatboxEmpty;\n      } else if (this.attachments) {\n        this.buttonDisabled = attachmentsEmpty;\n      } else {\n        this.buttonDisabled = true;\n      }\n    }\n  }\n\n  private handleSendClick(evt: Event) {\n    evt.stopPropagation();\n    this.handleSend();\n  }\n\n  private handleSendEnter(evt: KeyboardEvent) {\n    if (evt.key === 'Enter' && !evt.shiftKey) {\n      const chat = evt.target as Completion;\n      if (!chat.hasVisibleOptions()) {\n        this.handleSend();\n      }\n      this.preventDefaults(evt);\n    }\n  }\n\n  private handleSend() {\n    if (!this.buttonDisabled) {\n      this.buttonDisabled = true;\n      const name = this.buttonName;\n      this.fireCustomEvent(CustomEventType.ButtonClicked, { name });\n    }\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <temba-field\n        name=${this.name}\n        .errors=${this.errors}\n        .widgetOnly=${this.widgetOnly}\n        value=${this.value}\n      >\n        <div\n          class=${getClasses({ container: true, highlight: this.pendingDrop })}\n          @click=\"${this.handleContainerClick}\"\n          @dragenter=\"${this.handleDragEnter}\"\n          @dragover=\"${this.handleDragOver}\"\n          @dragleave=\"${this.handleDragLeave}\"\n          @drop=\"${this.handleDrop}\"\n        >\n          <div class=\"drop-mask\"><div>Upload Attachment</div></div>\n\n          ${this.chatbox\n            ? html`<div class=\"items chatbox\">${this.getChatbox()}</div>`\n            : null}\n          ${this.attachments\n            ? html`<div class=\"items attachments\">\n                ${this.getAttachments()}\n              </div>`\n            : null}\n          <div class=\"items actions\">${this.getActions()}</div>\n        </div>\n      </temba-field>\n    `;\n  }\n\n  private getChatbox(): TemplateResult {\n    return html` <temba-completion\n      value=${this.currentText}\n      gsm\n      textarea\n      autogrow\n      @change=${this.handleChatboxChange}\n      @keydown=${this.handleSendEnter}\n      placeholder=\"Write something here\"\n    >\n    </temba-completion>`;\n  }\n\n  private getAttachments(): TemplateResult {\n    return html`\n      ${(this.currentAttachments && this.currentAttachments.length > 0) ||\n      (this.failedAttachments && this.failedAttachments.length > 0)\n        ? html` <div class=\"attachments-list\">\n            ${this.currentAttachments.map(validAttachment => {\n              return html` <div class=\"attachment-item\">\n                <div\n                  class=\"remove-item\"\n                  @click=\"${this.handleRemoveFileClicked}\"\n                >\n                  <temba-icon\n                    id=\"${validAttachment.uuid}\"\n                    name=\"${Icon.delete_small}\"\n                  ></temba-icon>\n                </div>\n                <div class=\"attachment-name\">\n                  <span\n                    title=\"${validAttachment.filename} (${formatFileSize(\n                      validAttachment.size,\n                      2\n                    )}) ${validAttachment.content_type}\"\n                    >${truncate(validAttachment.filename, 25)}\n                    (${formatFileSize(validAttachment.size, 0)})\n                    ${formatFileType(validAttachment.content_type)}</span\n                  >\n                </div>\n              </div>`;\n            })}\n            ${this.failedAttachments.map(invalidAttachment => {\n              return html` <div class=\"attachment-item error\">\n                <div\n                  class=\"remove-item error\"\n                  @click=\"${this.handleRemoveFileClicked}\"\n                >\n                  <temba-icon\n                    id=\"${invalidAttachment.uuid}\"\n                    name=\"${Icon.delete_small}\"\n                  ></temba-icon>\n                </div>\n                <div class=\"attachment-name\">\n                  <span\n                    title=\"${invalidAttachment.filename} (${formatFileSize(\n                      0,\n                      0\n                    )}) - Attachment failed - ${invalidAttachment.error}\"\n                    >${truncate(invalidAttachment.filename, 25)}\n                    (${formatFileSize(0, 0)}) - Attachment failed</span\n                  >\n                </div>\n              </div>`;\n            })}\n          </div>`\n        : null}\n    `;\n  }\n\n  private getActions(): TemplateResult {\n    return html`\n      <div class=\"actions-left\">\n        ${this.attachments ? this.getUploader() : null}\n      </div>\n      <div class=\"actions-center\"></div>\n      <div class=\"actions-right\">\n        ${this.buttonError\n          ? html`<div class=\"send-error\">${this.buttonError}</div>`\n          : null}\n        ${this.counter ? this.getCounter() : null}\n        ${this.button ? this.getButton() : null}\n      </div>\n    `;\n  }\n\n  private getUploader(): TemplateResult {\n    if (this.uploading) {\n      return html`<temba-loading units=\"3\" size=\"12\"></temba-loading>`;\n    } else {\n      return html` <input\n          type=\"file\"\n          id=\"upload-input\"\n          multiple\n          accept=\"${this.accept}\"\n          @change=\"${this.handleUploadFileInputChanged}\"\n        />\n        <label\n          id=\"upload-label\"\n          class=\"actions-left upload-label\"\n          for=\"upload-input\"\n        >\n          <temba-icon\n            id=\"upload-icon\"\n            class=\"upload-icon\"\n            name=\"${Icon.attachment}\"\n            @click=\"${this.handleUploadFileIconClicked}\"\n            clickable\n          ></temba-icon>\n        </label>`;\n    }\n  }\n\n  private getCounter(): TemplateResult {\n    return html`<temba-charcount text=\"${this.currentText}\"></temba-charcount>`;\n  }\n\n  private getButton(): TemplateResult {\n    return html` <temba-button\n      id=\"send-button\"\n      name=${this.buttonName}\n      @click=${this.handleSendClick}\n      ?disabled=${this.buttonDisabled}\n    ></temba-button>`;\n  }\n}\n"]}
+{"version":3,"file":"Compose.js","sourceRoot":"","sources":["../../../src/compose/Compose.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css } from 'lit';\nimport { FormElement } from '../FormElement';\nimport { property } from 'lit/decorators.js';\nimport { Icon } from '../vectoricon';\nimport { CustomEventType } from '../interfaces';\nimport {\n  formatFileSize,\n  formatFileType,\n  getClasses,\n  postFormData,\n  truncate,\n  DEFAULT_MEDIA_ENDPOINT,\n  WebResponse,\n} from '../utils';\nimport { Completion } from '../completion/Completion';\n\nexport interface Attachment {\n  uuid: string;\n  content_type: string;\n  url: string;\n  filename: string;\n  size: number;\n  error: string;\n}\n\nexport class Compose extends FormElement {\n  static get styles() {\n    return css`\n      .container {\n        display: flex;\n        flex-direction: column;\n        justify-content: space-between;\n        position: relative;\n\n        border-radius: var(--curvature-widget);\n        background: var(--color-widget-bg);\n        border: 1px solid var(--color-widget-border);\n        transition: all ease-in-out var(--transition-speed);\n        box-shadow: var(--widget-box-shadow);\n        caret-color: var(--input-caret);\n        padding: var(--temba-textinput-padding);\n      }\n      .container:focus-within {\n        border-color: var(--color-focus);\n        background: var(--color-widget-bg-focused);\n        box-shadow: var(--widget-box-shadow-focused);\n      }\n\n      .drop-mask {\n        opacity: 0;\n        pointer-events: none;\n        position: absolute;\n        z-index: 1;\n        height: 100%;\n        width: 100%;\n        bottom: 0;\n        right: 0;\n        background: rgba(210, 243, 184, 0.8);\n        border-radius: var(--curvature-widget);\n        margin: -0.5em;\n        padding: 0.5em;\n        transition: opacity ease-in-out var(--transition-speed);\n        display: flex;\n        align-items: center;\n        text-align: center;\n      }\n\n      .highlight .drop-mask {\n        opacity: 1;\n      }\n\n      .drop-mask > div {\n        margin: auto;\n        border-radius: var(--curvature-widget);\n        font-weight: 400;\n        color: rgba(0, 0, 0, 0.5);\n      }\n\n      .items {\n      }\n\n      .chatbox {\n        margin-left: 0.3em;\n        margin-top: 0.3em;\n        --color-widget-border: none;\n        --curvature-widget: none;\n        --widget-box-shadow: none;\n        --widget-box-shadow-focused: none;\n        --temba-textinput-padding: 0;\n      }\n\n      .attachments {\n        display: flex;\n        flex-direction: column;\n      }\n      .attachments-list {\n        display: flex;\n        flex-direction: row;\n        flex-wrap: wrap;\n      }\n      .attachment-item {\n        background: rgba(100, 100, 100, 0.1);\n        border-radius: 2px;\n        margin: 0.3em;\n        display: flex;\n        color: var(--color-widget-text);\n      }\n      .attachment-item.error {\n        background: rgba(250, 0, 0, 0.1);\n        color: rgba(250, 0, 0, 0.75);\n      }\n      .remove-item {\n        cursor: pointer !important;\n        padding: 3px 6px;\n        border-right: 1px solid rgba(100, 100, 100, 0.2);\n        margin-top: 1px;\n        background: rgba(100, 100, 100, 0.05);\n      }\n\n      .remove-item:hover {\n        background: rgba(100, 100, 100, 0.1);\n      }\n\n      .remove-item.error:hover {\n        background: rgba(250, 0, 0, 0.1);\n      }\n\n      .remove-item.error {\n        background: rgba(250, 0, 0, 0.05);\n        color: rgba(250, 0, 0, 0.75);\n      }\n      .attachment-name {\n        align-self: center;\n        font-size: 12px;\n        padding: 2px 8px;\n      }\n\n      .actions {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        margin-left: 0.25em;\n        padding: 0.2em;\n      }\n\n      #upload-input {\n        display: none;\n      }\n      .upload-label {\n        display: flex;\n        align-items: center;\n      }\n      .upload-icon {\n        color: rgb(102, 102, 102);\n      }\n      .actions-right {\n        display: flex;\n        align-items: center;\n      }\n      temba-charcount {\n        margin-right: 5px;\n        overflow: hidden;\n        --temba-charcount-counts-margin-top: 0px;\n        --temba-charcount-summary-margin-top: 0px;\n        --temba-charcount-summary-position: fixed;\n        --temba-charcount-summary-right: 105px;\n        --temba-charcount-summary-bottom: 105px;\n      }\n      temba-button {\n        --button-y: 1px;\n        --button-x: 12px;\n      }\n      .send-error {\n        color: rgba(250, 0, 0, 0.75);\n        font-size: var(--help-text-size);\n      }\n    `;\n  }\n\n  @property({ type: Boolean })\n  completion: boolean;\n\n  @property({ type: Boolean })\n  chatbox: boolean;\n\n  @property({ type: Boolean })\n  attachments: boolean;\n\n  @property({ type: Boolean })\n  counter: boolean;\n\n  @property({ type: Boolean })\n  pendingDrop: boolean;\n\n  @property({ type: Boolean })\n  button: boolean;\n\n  @property({ type: String })\n  currentText = '';\n\n  @property({ type: String })\n  initialText = '';\n\n  @property({ type: String })\n  accept = ''; //e.g. \".xls,.xlsx\"\n\n  @property({ type: String, attribute: false })\n  endpoint = DEFAULT_MEDIA_ENDPOINT;\n\n  @property({ type: Boolean, attribute: false })\n  uploading: boolean;\n\n  @property({ type: Array })\n  currentAttachments: Attachment[] = [];\n\n  @property({ type: Array, attribute: false })\n  failedAttachments: Attachment[] = [];\n\n  @property({ type: String })\n  buttonName = 'Send';\n\n  @property({ type: Boolean, attribute: false })\n  buttonDisabled = true;\n\n  @property({ type: String, attribute: false })\n  buttonError = '';\n\n  @property({ type: Boolean, attribute: 'widget_only' })\n  widgetOnly: boolean;\n\n  @property({ type: Array })\n  errors: string[];\n\n  @property({ type: String })\n  value = '';\n\n  public constructor() {\n    super();\n  }\n\n  private deserializeComposeValue(): void {\n    if (this.value) {\n      const parsed_value = JSON.parse(this.value);\n      if (this.chatbox) {\n        this.initialText = parsed_value.text;\n      }\n      if (this.attachments) {\n        this.currentAttachments = parsed_value.attachments;\n      }\n    }\n  }\n\n  private serializeComposeValue(): void {\n    const composeValue = {\n      text: this.currentText,\n      attachments: this.currentAttachments,\n    };\n    // update this.value...\n    this.value = JSON.stringify(composeValue);\n  }\n\n  public firstUpdated(changes: Map<string, any>): void {\n    super.firstUpdated(changes);\n\n    this.deserializeComposeValue();\n    this.setFocusOnChatbox();\n  }\n\n  public updated(changes: Map<string, any>): void {\n    super.updated(changes);\n\n    if (changes.has('currentText') || changes.has('currentAttachments')) {\n      this.toggleButton();\n      this.serializeComposeValue();\n      this.fireCustomEvent(CustomEventType.ContentChanged, this.value);\n    }\n\n    this.setFocusOnChatbox();\n  }\n\n  private setFocusOnChatbox(): void {\n    if (this.chatbox) {\n      const completion = this.shadowRoot.querySelector(\n        '.chatbox'\n      ) as Completion;\n      if (completion) {\n        window.setTimeout(() => {\n          completion.focus();\n        }, 0);\n      }\n    }\n  }\n\n  public reset(): void {\n    (this.shadowRoot.querySelector('.chatbox') as HTMLInputElement).value = '';\n    this.initialText = '';\n    this.currentText = '';\n    this.currentAttachments = [];\n    this.failedAttachments = [];\n    this.buttonError = '';\n  }\n\n  private handleContainerClick(evt: Event) {\n    this.setFocusOnChatbox();\n  }\n\n  private handleChatboxChange(evt: Event) {\n    const chatbox = evt.target as HTMLInputElement;\n    this.currentText = chatbox.value;\n    this.toggleButton();\n    this.serializeComposeValue();\n    this.fireCustomEvent(CustomEventType.ContentChanged, this.value);\n  }\n\n  private handleDragEnter(evt: DragEvent): void {\n    this.highlight(evt);\n  }\n\n  private handleDragOver(evt: DragEvent): void {\n    this.highlight(evt);\n  }\n\n  private handleDragLeave(evt: DragEvent): void {\n    this.unhighlight(evt);\n  }\n\n  private handleDrop(evt: DragEvent): void {\n    this.unhighlight(evt);\n\n    const dt = evt.dataTransfer;\n    if (dt) {\n      const files = dt.files;\n      this.uploadFiles(files);\n    }\n  }\n\n  private preventDefaults(evt: Event): void {\n    evt.preventDefault();\n    evt.stopPropagation();\n  }\n\n  private highlight(evt: DragEvent): void {\n    this.pendingDrop = true;\n    this.preventDefaults(evt);\n  }\n\n  private unhighlight(evt: DragEvent): void {\n    this.pendingDrop = false;\n    this.preventDefaults(evt);\n  }\n\n  private handleUploadFileIconClicked(): void {\n    this.dispatchEvent(new Event('change'));\n  }\n\n  private handleUploadFileInputChanged(evt: Event): void {\n    const target = evt.target as HTMLInputElement;\n    const files = target.files;\n    this.uploadFiles(files);\n  }\n\n  public uploadFiles(files: FileList): void {\n    let filesToUpload = [];\n    if (this.currentAttachments && this.currentAttachments.length > 0) {\n      //remove duplicate files that have already been uploaded\n      filesToUpload = [...files].filter(file => {\n        const index = this.currentAttachments.findIndex(\n          value => value.filename === file.name && value.size === file.size\n        );\n        if (index === -1) {\n          return file;\n        }\n      });\n    } else {\n      filesToUpload = [...files];\n    }\n    filesToUpload.map(fileToUpload => {\n      this.uploadFile(fileToUpload);\n    });\n  }\n\n  private uploadFile(file: File): void {\n    this.uploading = true;\n\n    const url = this.endpoint;\n    const payload = new FormData();\n    payload.append('file', file);\n    postFormData(url, payload)\n      .then((response: WebResponse) => {\n        const attachment = response.json as Attachment;\n        if (attachment) {\n          this.addCurrentAttachment(attachment);\n        }\n      })\n      .catch((error: WebResponse) => {\n        let uploadError = '';\n        if (error.status === 400) {\n          uploadError = error.json.file[0];\n        } else {\n          uploadError = 'Server failure';\n        }\n        console.error(uploadError);\n        this.addFailedAttachment(file, uploadError);\n      })\n      .finally(() => {\n        this.uploading = false;\n      });\n  }\n\n  private addCurrentAttachment(attachmentToAdd: any) {\n    this.currentAttachments.push(attachmentToAdd);\n    this.requestUpdate('currentAttachments');\n  }\n  private removeCurrentAttachment(attachmentToRemove: any) {\n    this.currentAttachments = this.currentAttachments.filter(\n      currentAttachment => currentAttachment !== attachmentToRemove\n    );\n    this.requestUpdate('currentAttachments');\n  }\n\n  private addFailedAttachment(file: File, error: string) {\n    const failedAttachment = {\n      uuid: Math.random().toString(36).slice(2, 6),\n      content_type: file.type,\n      filename: file.name,\n      url: file.name,\n      size: file.size,\n      error: error,\n    } as Attachment;\n    this.failedAttachments.push(failedAttachment);\n    this.requestUpdate('failedAttachments');\n  }\n  private removeFailedAttachment(attachmentToRemove: any) {\n    this.failedAttachments = this.failedAttachments.filter(\n      (failedAttachment: any) => failedAttachment !== attachmentToRemove\n    );\n    this.requestUpdate('failedAttachments');\n  }\n\n  private handleRemoveFileClicked(evt: Event): void {\n    const target = evt.target as HTMLDivElement;\n\n    const currentAttachmentToRemove = this.currentAttachments.find(\n      ({ uuid }) => uuid === target.id\n    );\n    if (currentAttachmentToRemove) {\n      this.removeCurrentAttachment(currentAttachmentToRemove);\n    }\n\n    const failedAttachmentToRemove = this.failedAttachments.find(\n      ({ uuid }) => uuid === target.id\n    );\n    if (failedAttachmentToRemove) {\n      this.removeFailedAttachment(failedAttachmentToRemove);\n    }\n  }\n\n  public toggleButton() {\n    if (this.button) {\n      this.buttonError = '';\n      const chatboxEmpty = this.currentText.trim().length === 0;\n      const attachmentsEmpty = this.currentAttachments.length === 0;\n      if (this.chatbox && this.attachments) {\n        this.buttonDisabled = chatboxEmpty && attachmentsEmpty;\n      } else if (this.chatbox) {\n        this.buttonDisabled = chatboxEmpty;\n      } else if (this.attachments) {\n        this.buttonDisabled = attachmentsEmpty;\n      } else {\n        this.buttonDisabled = true;\n      }\n    }\n  }\n\n  private handleSendClick(evt: Event) {\n    evt.stopPropagation();\n    this.handleSend();\n  }\n\n  private handleSendEnter(evt: KeyboardEvent) {\n    if (this.button) {\n      if (evt.key === 'Enter' && !evt.shiftKey) {\n        if (this.completion) {\n          const chat = evt.target as Completion;\n          if (!chat.hasVisibleOptions()) {\n            this.handleSend();\n            this.preventDefaults(evt);\n          }\n        } else {\n          this.handleSend();\n          this.preventDefaults(evt);\n        }\n      }\n    }\n  }\n\n  private handleSend() {\n    if (!this.buttonDisabled) {\n      this.buttonDisabled = true;\n      const name = this.buttonName;\n      this.fireCustomEvent(CustomEventType.ButtonClicked, { name });\n    }\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <temba-field\n        name=${this.name}\n        .errors=${this.errors}\n        .widgetOnly=${this.widgetOnly}\n        value=${this.value}\n      >\n        <div\n          class=${getClasses({ container: true, highlight: this.pendingDrop })}\n          @click=\"${this.handleContainerClick}\"\n          @dragenter=\"${this.handleDragEnter}\"\n          @dragover=\"${this.handleDragOver}\"\n          @dragleave=\"${this.handleDragLeave}\"\n          @drop=\"${this.handleDrop}\"\n        >\n          <div class=\"drop-mask\"><div>Upload Attachment</div></div>\n\n          ${this.chatbox ? html`${this.getChatbox()}` : null}\n          ${this.attachments\n            ? html`<div class=\"items attachments\">\n                ${this.getAttachments()}\n              </div>`\n            : null}\n          <div class=\"items actions\">${this.getActions()}</div>\n        </div>\n      </temba-field>\n    `;\n  }\n\n  private getChatbox(): TemplateResult {\n    if (this.completion) {\n      return html` <temba-completion\n        class=\"chatbox\"\n        value=${this.initialText}\n        gsm\n        textarea\n        autogrow\n        @change=${this.handleChatboxChange}\n        @keydown=${this.handleSendEnter}\n        placeholder=\"Write something here\"\n      >\n      </temba-completion>`;\n    } else {\n      return html` <temba-textinput\n        class=\"chatbox\"\n        gsm\n        textarea\n        autogrow\n        value=${this.initialText}\n        @change=${this.handleChatboxChange}\n        @keydown=${this.handleSendEnter}\n        placeholder=\"Write something here\"\n      >\n      </temba-textinput>`;\n    }\n  }\n\n  private getAttachments(): TemplateResult {\n    return html`\n      ${(this.currentAttachments && this.currentAttachments.length > 0) ||\n      (this.failedAttachments && this.failedAttachments.length > 0)\n        ? html` <div class=\"attachments-list\">\n            ${this.currentAttachments.map(validAttachment => {\n              return html` <div class=\"attachment-item\">\n                <div\n                  class=\"remove-item\"\n                  @click=\"${this.handleRemoveFileClicked}\"\n                >\n                  <temba-icon\n                    id=\"${validAttachment.uuid}\"\n                    name=\"${Icon.delete_small}\"\n                  ></temba-icon>\n                </div>\n                <div class=\"attachment-name\">\n                  <span\n                    title=\"${validAttachment.filename} (${formatFileSize(\n                      validAttachment.size,\n                      2\n                    )}) ${validAttachment.content_type}\"\n                    >${truncate(validAttachment.filename, 25)}\n                    (${formatFileSize(validAttachment.size, 0)})\n                    ${formatFileType(validAttachment.content_type)}</span\n                  >\n                </div>\n              </div>`;\n            })}\n            ${this.failedAttachments.map(invalidAttachment => {\n              return html` <div class=\"attachment-item error\">\n                <div\n                  class=\"remove-item error\"\n                  @click=\"${this.handleRemoveFileClicked}\"\n                >\n                  <temba-icon\n                    id=\"${invalidAttachment.uuid}\"\n                    name=\"${Icon.delete_small}\"\n                  ></temba-icon>\n                </div>\n                <div class=\"attachment-name\">\n                  <span\n                    title=\"${invalidAttachment.filename} (${formatFileSize(\n                      0,\n                      0\n                    )}) - Attachment failed - ${invalidAttachment.error}\"\n                    >${truncate(invalidAttachment.filename, 25)}\n                    (${formatFileSize(0, 0)}) - Attachment failed</span\n                  >\n                </div>\n              </div>`;\n            })}\n          </div>`\n        : null}\n    `;\n  }\n\n  private getActions(): TemplateResult {\n    return html`\n      <div class=\"actions-left\">\n        ${this.attachments ? this.getUploader() : null}\n      </div>\n      <div class=\"actions-center\"></div>\n      <div class=\"actions-right\">\n        ${this.buttonError\n          ? html`<div class=\"send-error\">${this.buttonError}</div>`\n          : null}\n        ${this.counter ? this.getCounter() : null}\n        ${this.button ? this.getButton() : null}\n      </div>\n    `;\n  }\n\n  private getUploader(): TemplateResult {\n    if (this.uploading) {\n      return html`<temba-loading units=\"3\" size=\"12\"></temba-loading>`;\n    } else {\n      return html` <input\n          type=\"file\"\n          id=\"upload-input\"\n          multiple\n          accept=\"${this.accept}\"\n          @change=\"${this.handleUploadFileInputChanged}\"\n        />\n        <label\n          id=\"upload-label\"\n          class=\"actions-left upload-label\"\n          for=\"upload-input\"\n        >\n          <temba-icon\n            id=\"upload-icon\"\n            class=\"upload-icon\"\n            name=\"${Icon.attachment}\"\n            @click=\"${this.handleUploadFileIconClicked}\"\n            clickable\n          ></temba-icon>\n        </label>`;\n    }\n  }\n\n  private getCounter(): TemplateResult {\n    return html`<temba-charcount\n      .text=\"${this.currentText}\"\n    ></temba-charcount>`;\n  }\n\n  private getButton(): TemplateResult {\n    return html` <temba-button\n      id=\"send-button\"\n      name=${this.buttonName}\n      @click=${this.handleSendClick}\n      ?disabled=${this.buttonDisabled}\n    ></temba-button>`;\n  }\n}\n"]}

package/out-tsc/test/temba-compose.test.js

@@ -8,7 +8,7 @@ const getCompose = async (attrs = {}, width = 500, height = 500) => {
     return compose;
 };
 export const updateComponent = async (compose, text, attachments, errorAttachments) => {
-    compose.currentText = text ? text : '';
+    compose.initialText = text ? text : '';
     compose.currentAttachments = attachments ? attachments : [];
     compose.failedAttachments = errorAttachments ? errorAttachments : [];
     await compose.updateComplete;
@@ -213,8 +213,8 @@ describe('temba-compose chatbox', () => {
             button: true,
         });
         await updateComponent(compose, getValidText());
-        const completion = compose.shadowRoot.querySelector('temba-completion');
-        completion.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
+        const chatbox = compose.shadowRoot.querySelector('.chatbox');
+        chatbox.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
         await assertScreenshot('compose/chatbox-with-text-and-hit-enter', getClip(compose));
     });
 });
@@ -403,8 +403,8 @@ describe('temba-compose chatbox with text and attachments no files', () => {
             button: true,
         });
         await updateComponent(compose, getValidText());
-        const completion = compose.shadowRoot.querySelector('temba-completion');
-        completion.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
+        const chatbox = compose.shadowRoot.querySelector('.chatbox');
+        chatbox.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
         await assertScreenshot('compose/chatbox-with-text-attachments-no-files-and-hit-enter', getClip(compose));
     });
 });
@@ -546,8 +546,8 @@ describe('temba-compose chatbox with text and attachments with files', () => {
             button: true,
         });
         await updateComponent(compose, getValidText(), getValidAttachments());
-        const completion = compose.shadowRoot.querySelector('temba-completion');
-        completion.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
+        const chatbox = compose.shadowRoot.querySelector('.chatbox');
+        chatbox.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
         await assertScreenshot('compose/chatbox-with-text-attachments-with-success-files-and-hit-enter', getClip(compose));
     });
     it('chatbox with text, attachments with success and failure uploaded files, and hit enter', async () => {
@@ -557,8 +557,8 @@ describe('temba-compose chatbox with text and attachments with files', () => {
             button: true,
         });
         await updateComponent(compose, getValidText(), getValidAttachments(), getInvalidAttachments());
-        const completion = compose.shadowRoot.querySelector('temba-completion');
-        completion.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
+        const chatbox = compose.shadowRoot.querySelector('.chatbox');
+        chatbox.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
         const newClip = getClip(compose);
         await assertScreenshot('compose/chatbox-with-text-attachments-with-all-files-and-hit-enter', newClip);
     });

package/out-tsc/test/temba-compose.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"temba-compose.test.js","sourceRoot":"","sources":["../../test/temba-compose.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { assert, expect } from '@open-wc/testing';\nimport { Attachment, Compose } from '../src/compose/Compose';\nimport { assertScreenshot, getClip, getComponent } from './utils.test';\nimport { Button } from '../src/button/Button';\nimport { Completion } from '../src/completion/Completion';\nimport { DEFAULT_MEDIA_ENDPOINT } from '../src/utils';\n\nconst TAG = 'temba-compose';\nconst getCompose = async (attrs: any = {}, width = 500, height = 500) => {\n  const compose = (await getComponent(\n    TAG,\n    attrs,\n    '',\n    width,\n    height,\n    'display:flex;flex-direction:column;flex-grow:1;'\n  )) as Compose;\n  return compose;\n};\n\nexport const updateComponent = async (\n  compose: Compose,\n  text?: string,\n  attachments?: Attachment[],\n  errorAttachments?: Attachment[]\n): Promise<void> => {\n  compose.currentText = text ? text : '';\n  compose.currentAttachments = attachments ? attachments : [];\n  compose.failedAttachments = errorAttachments ? errorAttachments : [];\n  await compose.updateComplete;\n};\n\nconst getInitialValue = (text?: string, attachments?: Attachment[]): any => {\n  const composeValue = {\n    text: text ? text : '',\n    attachments: attachments ? attachments : [],\n  };\n  return composeValue;\n};\nconst getComposeValue = (value: any): string => {\n  return JSON.stringify(value);\n};\nconst getComposeValues = (value: any): any[] => {\n  return [value];\n};\n\nexport const getValidText = () => {\n  return 'sà-wàd-dee!';\n};\n// for a server limit of 640 chars, return a string that is 640+ chars\nexport const getInvalidText = () => {\n  return \"p}h<r0P<?SCIbV1+pwW1Hj8g^J&=Sm2f)K=5LjFFUZ№5@ybpoLZ7DJ(27qdWxQMaO)I1nB4(D%d3c(H)QXOF6F?4>&d{lhd5?0`Lio!yAGMO№*AxN5{z5s.IO*dy?tm}vXJ#Lf-HlD;xmNp}0<P42=w#ll9)B-e9>Q#'{~Vp<dl:xC9`T^lhh@TosCZ^:(H<Ji<E(~PojvYk^rPB+poYy^Ne~Su1:9?IgH'4S5Q9v0g№FEIUc~!{S7;746j'Sd@Nfu3=x?CsuR;YLP4j+AOzDARZG?0(Ji(NMg=r%n0Fq?R1?E%Yf`bcoVZAJ^bl0J'^@;lH>T.HmxYxwS;1?(bfrh?pRdd73:iMxrfx5luQ(}<dCD1b3g'G0CtkB№;8KkbL=>krG{RO%Va4wwr%P>jE*+n(E11}Ju9#<.f^)<MTH09^b{RQv7~H`#@Hda6{MV&H@xdyEKq#M@nZng8WTU66!F@*!)w*EpQ+65XKuQCaESgq=PHmtqi@l;F?PHvl^g@Z:+}}Xyr`IC2=3?20^I'qSU*tkyinM^JF.ZI>}~XzRQJn№v3o-w?Vy&gC:c.l(&9{`M#-'N}{T#7lw8(4:iY621'>C^.&hVZn:R!G}Ek){D#'KkiJWawq#7~GLBN*?V!ncw)d%&(tXj\";\n};\n\n// valid = attachments that are uploaded sent to the server when the user clicks send\nexport const getValidAttachments = (numFiles = 2): Attachment[] => {\n  const attachments = [];\n  let index = 1;\n  while (index <= numFiles) {\n    const s = 's' + index;\n    const attachment = {\n      uuid: s,\n      content_type: 'image/png',\n      type: 'image/png',\n      filename: 'name_' + s,\n      url: 'url_' + s,\n      size: 1024,\n      error: null,\n    } as Attachment;\n    attachments.push(attachment);\n    index++;\n  }\n  return attachments;\n};\n// invalid = attachments that are not uploaded and are not sent to the server when the user clicks send\nexport const getInvalidAttachments = (): Attachment[] => {\n  const f1 = 'f1';\n  const fail1 = {\n    uuid: f1,\n    content_type: 'image/png',\n    type: 'image/png',\n    filename: 'name_' + f1,\n    url: 'url_' + f1,\n    size: 26624,\n    error: 'Limit for file uploads is 25.0 MB',\n  } as Attachment;\n  const f2 = 'f2';\n  const fail2 = {\n    uuid: f2,\n    content_type: 'application/octet-stream',\n    type: 'application/octet-stream',\n    filename: 'name_' + f2,\n    url: 'url_' + f2,\n    size: 1024,\n    error: 'Unsupported file type',\n  } as Attachment;\n\n  return [fail1, fail2];\n};\n\n// for a test width of 500, return a string that is 60+ chars with spaces\n// to test that line breaks / word wrapping works as expected\nconst getValidText_Long_WithSpaces = () => {\n  return 'bbbbbbbbbb bbbbbbbbbb bbbbbbbbbb bbbbbbbbbb bbbbbbbbbb bbbbbbbbbb bbbbbbbbbb ';\n};\nconst getValidText_Long_WithNoSpaces = () => {\n  return 'bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb';\n};\nconst getValidText_Long_WithUrl = () => {\n  return 'http://www.yourmomyourmomyourmomyourmomyourmomyourmomyourmomyourmomyourmomyourmomyourmom.com';\n};\n\ndescribe('temba-compose chatbox', () => {\n  it('can be created', async () => {\n    const compose: Compose = await getCompose();\n    assert.instanceOf(compose, Compose);\n    expect(compose.endpoint).equals(DEFAULT_MEDIA_ENDPOINT);\n  });\n\n  it('cannot be created with a different endpoint', async () => {\n    const compose: Compose = await getCompose({\n      endpoint: '/schmsgmedia/schmupload/',\n    });\n    assert.instanceOf(compose, Compose);\n    expect(compose.endpoint).equals(DEFAULT_MEDIA_ENDPOINT);\n  });\n\n  it('chatbox no counter no send button', async () => {\n    const compose: Compose = await getCompose({\n      chatbox: true,\n    });\n    await assertScreenshot(\n      'compose/chatbox-no-counter-no-send-button',\n      getClip(compose)\n    );\n  });\n\n  it('chatbox no counter and send button', async () => {\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      button: true,\n    });\n    await assertScreenshot(\n      'compose/chatbox-no-counter-and-send-button',\n      getClip(compose)\n    );\n  });\n\n  it('chatbox counter no send button', async () => {\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      counter: true,\n    });\n    await assertScreenshot(\n      'compose/chatbox-counter-no-send-button',\n      getClip(compose)\n    );\n  });\n\n  it('chatbox counter and send button', async () => {\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      counter: true,\n      button: true,\n    });\n    await assertScreenshot(\n      'compose/chatbox-counter-and-send-button',\n      getClip(compose)\n    );\n  });\n\n  it('chatbox counter and send button deserialize and serialize', async () => {\n    const initialValue = getInitialValue();\n    const composeValue = getComposeValue(initialValue);\n\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      counter: true,\n      button: true,\n      value: composeValue,\n    });\n    // deserialize\n    expect(compose.currentText).to.equal('');\n    expect(compose.currentAttachments).to.deep.equal([]);\n    // serialize\n    expect(compose.value).to.equal(composeValue);\n  });\n\n  it('chatbox with text', async () => {\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      counter: true,\n      button: true,\n    });\n    await updateComponent(compose, getValidText());\n    await assertScreenshot('compose/chatbox-with-text', getClip(compose));\n  });\n\n  it('chatbox with text deserialize and serialize', async () => {\n    const initialValue = getInitialValue(getValidText());\n    const composeValue = getComposeValue(initialValue);\n\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      counter: true,\n      button: true,\n      value: composeValue,\n    });\n    // deserialize\n    expect(compose.currentText).to.equal(getValidText());\n    expect(compose.currentAttachments).to.deep.equal([]);\n    // serialize\n    expect(compose.value).to.equal(composeValue);\n  });\n\n  it('chatbox with text and spaces', async () => {\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      counter: true,\n      button: true,\n    });\n    await updateComponent(compose, getValidText_Long_WithSpaces());\n    await assertScreenshot(\n      'compose/chatbox-with-text-and-spaces',\n      getClip(compose)\n    );\n  });\n\n  it('chatbox with text and no spaces', async () => {\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      counter: true,\n      button: true,\n    });\n    await updateComponent(compose, getValidText_Long_WithNoSpaces());\n    await assertScreenshot(\n      'compose/chatbox-with-text-no-spaces',\n      getClip(compose)\n    );\n  });\n\n  it('chatbox with text and url', async () => {\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      counter: true,\n      button: true,\n    });\n    await updateComponent(compose, getValidText_Long_WithUrl());\n    await assertScreenshot(\n      'compose/chatbox-with-text-and-url',\n      getClip(compose)\n    );\n  });\n\n  it('chatbox with text and click send', async () => {\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      counter: true,\n      button: true,\n    });\n    await updateComponent(compose, getValidText());\n    const send = compose.shadowRoot.querySelector(\n      'temba-button#send-button'\n    ) as Button;\n    send.click();\n    await assertScreenshot(\n      'compose/chatbox-with-text-and-click-send',\n      getClip(compose)\n    );\n  });\n\n  it('chatbox with text and hit enter', async () => {\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      counter: true,\n      button: true,\n    });\n    await updateComponent(compose, getValidText());\n    const completion = compose.shadowRoot.querySelector(\n      'temba-completion'\n    ) as Completion;\n    completion.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));\n    await assertScreenshot(\n      'compose/chatbox-with-text-and-hit-enter',\n      getClip(compose)\n    );\n  });\n});\n\ndescribe('temba-compose attachments', () => {\n  it('attachments no send button', async () => {\n    const compose: Compose = await getCompose({\n      attachments: true,\n    });\n    await assertScreenshot(\n      'compose/attachments-no-send-button',\n      getClip(compose)\n    );\n  });\n\n  it('attachments and send button', async () => {\n    const compose: Compose = await getCompose({\n      attachments: true,\n      button: true,\n    });\n    await assertScreenshot(\n      'compose/attachments-and-send-button',\n      getClip(compose)\n    );\n  });\n\n  it('attachments and send button deserialize and serialize', async () => {\n    const initialValue = getInitialValue();\n    const composeValue = getComposeValue(initialValue);\n\n    const compose: Compose = await getCompose({\n      attachments: true,\n      button: true,\n      value: composeValue,\n    });\n    // deserialize\n    expect(compose.currentText).to.equal('');\n    expect(compose.currentAttachments).to.deep.equal([]);\n    // serialize\n    expect(compose.value).to.equal(composeValue);\n  });\n\n  it('attachments with success uploaded files', async () => {\n    const compose: Compose = await getCompose({\n      attachments: true,\n      button: true,\n    });\n    await updateComponent(compose, null, getValidAttachments());\n    await assertScreenshot(\n      'compose/attachments-with-success-files',\n      getClip(compose)\n    );\n  });\n\n  it('attachments with success uploaded files deserialize and serialize', async () => {\n    const initialValue = getInitialValue(null, getValidAttachments());\n    const composeValue = getComposeValue(initialValue);\n    const composeValues = getComposeValues(initialValue);\n\n    const compose: Compose = await getCompose({\n      attachments: true,\n      button: true,\n      value: composeValue,\n    });\n    // deserialize\n    expect(compose.currentText).to.equal('');\n    expect(compose.currentAttachments).to.deep.equal(getValidAttachments());\n    // serialize\n    expect(compose.value).to.equal(composeValue);\n  });\n\n  it('attachments with failure uploaded files', async () => {\n    const compose: Compose = await getCompose({\n      attachments: true,\n      button: true,\n    });\n    await updateComponent(compose, null, null, getInvalidAttachments());\n    await assertScreenshot(\n      'compose/attachments-with-failure-files',\n      getClip(compose)\n    );\n  });\n\n  it('attachments with success and failure uploaded files', async () => {\n    const compose: Compose = await getCompose({\n      attachments: true,\n      button: true,\n    });\n    await updateComponent(\n      compose,\n      null,\n      getValidAttachments(),\n      getInvalidAttachments()\n    );\n    await assertScreenshot(\n      'compose/attachments-with-all-files',\n      getClip(compose)\n    );\n  });\n\n  it('attachments with success uploaded files and click send', async () => {\n    const compose: Compose = await getCompose({\n      attachments: true,\n      button: true,\n    });\n    await updateComponent(compose, null, getValidAttachments());\n    const send = compose.shadowRoot.querySelector(\n      'temba-button#send-button'\n    ) as Button;\n    send.click();\n    await assertScreenshot(\n      'compose/attachments-with-success-files-and-click-send',\n      getClip(compose)\n    );\n  });\n\n  it('attachments with success and failure uploaded files and click send', async () => {\n    const compose: Compose = await getCompose({\n      attachments: true,\n      button: true,\n    });\n    await updateComponent(\n      compose,\n      null,\n      getValidAttachments(),\n      getInvalidAttachments()\n    );\n    const send = compose.shadowRoot.querySelector(\n      'temba-button#send-button'\n    ) as Button;\n    send.click();\n    await assertScreenshot(\n      'compose/attachments-with-all-files-and-click-send',\n      getClip(compose)\n    );\n  });\n});\n\ndescribe('temba-compose chatbox and attachments', () => {\n  it('chatbox and attachments no counter no send button', async () => {\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      attachments: true,\n    });\n    await assertScreenshot(\n      'compose/chatbox-attachments-no-counter-no-send-button',\n      getClip(compose)\n    );\n  });\n\n  it('chatbox and attachments no counter and send button', async () => {\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      attachments: true,\n      button: true,\n    });\n    await assertScreenshot(\n      'compose/chatbox-attachments-no-counter-and-send-button',\n      getClip(compose)\n    );\n  });\n\n  it('chatbox and attachments counter no send button', async () => {\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      attachments: true,\n      counter: true,\n    });\n    await assertScreenshot(\n      'compose/chatbox-attachments-counter-no-send-button',\n      getClip(compose)\n    );\n  });\n\n  it('chatbox and attachments counter and send button', async () => {\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      attachments: true,\n      counter: true,\n      button: true,\n    });\n    await assertScreenshot(\n      'compose/chatbox-attachments-counter-and-send-button',\n      getClip(compose)\n    );\n  });\n\n  it('chatbox and attachments counter and send button deserialize and serialize', async () => {\n    const initialValue = getInitialValue();\n    const composeValue = getComposeValue(initialValue);\n\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      attachments: true,\n      counter: true,\n      button: true,\n      value: composeValue,\n    });\n    // deserialize\n    expect(compose.currentText).to.equal('');\n    expect(compose.currentAttachments).to.deep.equal([]);\n    // serialize\n    expect(compose.value).to.equal(composeValue);\n  });\n});\n\ndescribe('temba-compose chatbox with text and attachments no files', () => {\n  it('chatbox with text, attachments no files', async () => {\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      attachments: true,\n      counter: true,\n      button: true,\n    });\n    updateComponent(compose, getValidText());\n    await assertScreenshot(\n      'compose/chatbox-with-text-attachments-no-files',\n      getClip(compose)\n    );\n  });\n\n  it('chatbox with text, attachments no files deserialize and serialize', async () => {\n    const initialValue = getInitialValue(getValidText());\n    const composeValue = getComposeValue(initialValue);\n\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      attachments: true,\n      counter: true,\n      button: true,\n      value: composeValue,\n    });\n    // deserialize\n    expect(compose.currentText).to.equal(getValidText());\n    expect(compose.currentAttachments).to.deep.equal([]);\n    // serialize\n    expect(compose.value).to.equal(composeValue);\n  });\n\n  it('chatbox with text, attachments no files, and click send', async () => {\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      attachments: true,\n      counter: true,\n      button: true,\n    });\n    updateComponent(compose, getValidText());\n    const send = compose.shadowRoot.querySelector(\n      'temba-button#send-button'\n    ) as Button;\n    send.click();\n    await assertScreenshot(\n      'compose/chatbox-with-text-attachments-no-files-and-click-send',\n      getClip(compose)\n    );\n  });\n\n  it('chatbox with text, attachments no files, and hit enter', async () => {\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      attachments: true,\n      counter: true,\n      button: true,\n    });\n    await updateComponent(compose, getValidText());\n    const completion = compose.shadowRoot.querySelector(\n      'temba-completion'\n    ) as Completion;\n    completion.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));\n    await assertScreenshot(\n      'compose/chatbox-with-text-attachments-no-files-and-hit-enter',\n      getClip(compose)\n    );\n  });\n});\n\ndescribe('temba-compose chatbox no text and attachments with files', () => {\n  it('chatbox no text, attachments with success uploaded files', async () => {\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      attachments: true,\n      button: true,\n    });\n    await updateComponent(compose, null, getValidAttachments());\n    await assertScreenshot(\n      'compose/chatbox-no-text-attachments-with-success-files',\n      getClip(compose)\n    );\n  });\n\n  it('chatbox no text, attachments with success uploaded files deserialize and serialize', async () => {\n    const initialValue = getInitialValue(null, getValidAttachments());\n    const composeValue = getComposeValue(initialValue);\n\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      attachments: true,\n      button: true,\n      value: composeValue,\n    });\n    // deserialize\n    expect(compose.currentText).to.equal('');\n    expect(compose.currentAttachments).to.deep.equal(getValidAttachments());\n    // serialize\n    expect(compose.value).to.equal(composeValue);\n  });\n\n  it('chatbox no text, attachments with failure uploaded files', async () => {\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      attachments: true,\n      button: true,\n    });\n    await updateComponent(compose, null, null, getInvalidAttachments());\n    await assertScreenshot(\n      'compose/chatbox-no-text-attachments-with-failure-files',\n      getClip(compose)\n    );\n  });\n\n  it('chatbox no text, attachments with success and failure uploaded files', async () => {\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      attachments: true,\n      button: true,\n    });\n    await updateComponent(\n      compose,\n      null,\n      getValidAttachments(),\n      getInvalidAttachments()\n    );\n    await assertScreenshot(\n      'compose/chatbox-no-text-attachments-with-all-files',\n      getClip(compose)\n    );\n  });\n\n  it('chatbox no text, attachments with success uploaded files, and click send', async () => {\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      attachments: true,\n      button: true,\n    });\n    await updateComponent(compose, null, getValidAttachments());\n    const send = compose.shadowRoot.querySelector(\n      'temba-button#send-button'\n    ) as Button;\n    send.click();\n    await assertScreenshot(\n      'compose/chatbox-no-text-attachments-with-success-files-and-click-send',\n      getClip(compose)\n    );\n  });\n\n  it('chatbox no text, attachments with success and failure uploaded files, and click send', async () => {\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      attachments: true,\n      button: true,\n    });\n    await updateComponent(\n      compose,\n      null,\n      getValidAttachments(),\n      getInvalidAttachments()\n    );\n    const send = compose.shadowRoot.querySelector(\n      'temba-button#send-button'\n    ) as Button;\n    send.click();\n    await assertScreenshot(\n      'compose/chatbox-no-text-attachments-with-all-files-and-click-send',\n      getClip(compose)\n    );\n  });\n});\n\ndescribe('temba-compose chatbox with text and attachments with files', () => {\n  it('chatbox with text, attachments with success uploaded files', async () => {\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      attachments: true,\n      button: true,\n    });\n    await updateComponent(compose, getValidText(), getValidAttachments());\n    await assertScreenshot(\n      'compose/chatbox-with-text-attachments-with-success-files',\n      getClip(compose)\n    );\n  });\n\n  it('chatbox with text, attachments with success uploaded files deserialize and serialize', async () => {\n    const initialValue = getInitialValue(getValidText(), getValidAttachments());\n    const composeValue = getComposeValue(initialValue);\n\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      attachments: true,\n      button: true,\n      value: composeValue,\n    });\n    // deserialize\n    expect(compose.currentText).to.equal(getValidText());\n    expect(compose.currentAttachments).to.deep.equal(getValidAttachments());\n    // serialize\n    expect(compose.value).to.equal(composeValue);\n  });\n\n  it('chatbox with text, attachments with failure uploaded files', async () => {\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      attachments: true,\n      button: true,\n    });\n    await updateComponent(\n      compose,\n      getValidText(),\n      null,\n      getInvalidAttachments()\n    );\n    await assertScreenshot(\n      'compose/chatbox-with-text-attachments-with-failure-files',\n      getClip(compose)\n    );\n  });\n\n  it('chatbox with text, attachments with success and failure uploaded files', async () => {\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      attachments: true,\n      button: true,\n    });\n    await updateComponent(\n      compose,\n      getValidText(),\n      getValidAttachments(),\n      getInvalidAttachments()\n    );\n    await assertScreenshot(\n      'compose/chatbox-with-text-attachments-with-all-files',\n      getClip(compose)\n    );\n  });\n\n  it('chatbox with text, attachments with success uploaded files, and click send', async () => {\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      attachments: true,\n      button: true,\n    });\n    await updateComponent(compose, getValidText(), getValidAttachments());\n    const send = compose.shadowRoot.querySelector(\n      'temba-button#send-button'\n    ) as Button;\n    send.click();\n    await assertScreenshot(\n      'compose/chatbox-with-text-attachments-with-success-files-and-click-send',\n      getClip(compose)\n    );\n  });\n\n  it('chatbox with text, attachments with success and failure uploaded files, and click send', async () => {\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      attachments: true,\n      button: true,\n    });\n    await updateComponent(\n      compose,\n      getValidText(),\n      getValidAttachments(),\n      getInvalidAttachments()\n    );\n    const send = compose.shadowRoot.querySelector(\n      'temba-button#send-button'\n    ) as Button;\n    send.click();\n    await assertScreenshot(\n      'compose/chatbox-with-text-attachments-with-all-files-and-click-send',\n      getClip(compose)\n    );\n  });\n\n  it('chatbox with text, attachments with success uploaded files, and hit enter', async () => {\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      attachments: true,\n      button: true,\n    });\n    await updateComponent(compose, getValidText(), getValidAttachments());\n    const completion = compose.shadowRoot.querySelector(\n      'temba-completion'\n    ) as Completion;\n    completion.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));\n    await assertScreenshot(\n      'compose/chatbox-with-text-attachments-with-success-files-and-hit-enter',\n      getClip(compose)\n    );\n  });\n\n  it('chatbox with text, attachments with success and failure uploaded files, and hit enter', async () => {\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      attachments: true,\n      button: true,\n    });\n    await updateComponent(\n      compose,\n      getValidText(),\n      getValidAttachments(),\n      getInvalidAttachments()\n    );\n    const completion = compose.shadowRoot.querySelector(\n      'temba-completion'\n    ) as Completion;\n    completion.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));\n    const newClip = getClip(compose);\n    await assertScreenshot(\n      'compose/chatbox-with-text-attachments-with-all-files-and-hit-enter',\n      newClip\n    );\n  });\n});\n"]}
+{"version":3,"file":"temba-compose.test.js","sourceRoot":"","sources":["../../test/temba-compose.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { assert, expect } from '@open-wc/testing';\nimport { Attachment, Compose } from '../src/compose/Compose';\nimport { assertScreenshot, getClip, getComponent } from './utils.test';\nimport { Button } from '../src/button/Button';\nimport { Completion } from '../src/completion/Completion';\nimport { DEFAULT_MEDIA_ENDPOINT } from '../src/utils';\n\nconst TAG = 'temba-compose';\nconst getCompose = async (attrs: any = {}, width = 500, height = 500) => {\n  const compose = (await getComponent(\n    TAG,\n    attrs,\n    '',\n    width,\n    height,\n    'display:flex;flex-direction:column;flex-grow:1;'\n  )) as Compose;\n  return compose;\n};\n\nexport const updateComponent = async (\n  compose: Compose,\n  text?: string,\n  attachments?: Attachment[],\n  errorAttachments?: Attachment[]\n): Promise<void> => {\n  compose.initialText = text ? text : '';\n  compose.currentAttachments = attachments ? attachments : [];\n  compose.failedAttachments = errorAttachments ? errorAttachments : [];\n  await compose.updateComplete;\n};\n\nconst getInitialValue = (text?: string, attachments?: Attachment[]): any => {\n  const composeValue = {\n    text: text ? text : '',\n    attachments: attachments ? attachments : [],\n  };\n  return composeValue;\n};\nconst getComposeValue = (value: any): string => {\n  return JSON.stringify(value);\n};\nconst getComposeValues = (value: any): any[] => {\n  return [value];\n};\n\nexport const getValidText = () => {\n  return 'sà-wàd-dee!';\n};\n// for a server limit of 640 chars, return a string that is 640+ chars\nexport const getInvalidText = () => {\n  return \"p}h<r0P<?SCIbV1+pwW1Hj8g^J&=Sm2f)K=5LjFFUZ№5@ybpoLZ7DJ(27qdWxQMaO)I1nB4(D%d3c(H)QXOF6F?4>&d{lhd5?0`Lio!yAGMO№*AxN5{z5s.IO*dy?tm}vXJ#Lf-HlD;xmNp}0<P42=w#ll9)B-e9>Q#'{~Vp<dl:xC9`T^lhh@TosCZ^:(H<Ji<E(~PojvYk^rPB+poYy^Ne~Su1:9?IgH'4S5Q9v0g№FEIUc~!{S7;746j'Sd@Nfu3=x?CsuR;YLP4j+AOzDARZG?0(Ji(NMg=r%n0Fq?R1?E%Yf`bcoVZAJ^bl0J'^@;lH>T.HmxYxwS;1?(bfrh?pRdd73:iMxrfx5luQ(}<dCD1b3g'G0CtkB№;8KkbL=>krG{RO%Va4wwr%P>jE*+n(E11}Ju9#<.f^)<MTH09^b{RQv7~H`#@Hda6{MV&H@xdyEKq#M@nZng8WTU66!F@*!)w*EpQ+65XKuQCaESgq=PHmtqi@l;F?PHvl^g@Z:+}}Xyr`IC2=3?20^I'qSU*tkyinM^JF.ZI>}~XzRQJn№v3o-w?Vy&gC:c.l(&9{`M#-'N}{T#7lw8(4:iY621'>C^.&hVZn:R!G}Ek){D#'KkiJWawq#7~GLBN*?V!ncw)d%&(tXj\";\n};\n\n// valid = attachments that are uploaded sent to the server when the user clicks send\nexport const getValidAttachments = (numFiles = 2): Attachment[] => {\n  const attachments = [];\n  let index = 1;\n  while (index <= numFiles) {\n    const s = 's' + index;\n    const attachment = {\n      uuid: s,\n      content_type: 'image/png',\n      type: 'image/png',\n      filename: 'name_' + s,\n      url: 'url_' + s,\n      size: 1024,\n      error: null,\n    } as Attachment;\n    attachments.push(attachment);\n    index++;\n  }\n  return attachments;\n};\n// invalid = attachments that are not uploaded and are not sent to the server when the user clicks send\nexport const getInvalidAttachments = (): Attachment[] => {\n  const f1 = 'f1';\n  const fail1 = {\n    uuid: f1,\n    content_type: 'image/png',\n    type: 'image/png',\n    filename: 'name_' + f1,\n    url: 'url_' + f1,\n    size: 26624,\n    error: 'Limit for file uploads is 25.0 MB',\n  } as Attachment;\n  const f2 = 'f2';\n  const fail2 = {\n    uuid: f2,\n    content_type: 'application/octet-stream',\n    type: 'application/octet-stream',\n    filename: 'name_' + f2,\n    url: 'url_' + f2,\n    size: 1024,\n    error: 'Unsupported file type',\n  } as Attachment;\n\n  return [fail1, fail2];\n};\n\n// for a test width of 500, return a string that is 60+ chars with spaces\n// to test that line breaks / word wrapping works as expected\nconst getValidText_Long_WithSpaces = () => {\n  return 'bbbbbbbbbb bbbbbbbbbb bbbbbbbbbb bbbbbbbbbb bbbbbbbbbb bbbbbbbbbb bbbbbbbbbb ';\n};\nconst getValidText_Long_WithNoSpaces = () => {\n  return 'bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb';\n};\nconst getValidText_Long_WithUrl = () => {\n  return 'http://www.yourmomyourmomyourmomyourmomyourmomyourmomyourmomyourmomyourmomyourmomyourmom.com';\n};\n\ndescribe('temba-compose chatbox', () => {\n  it('can be created', async () => {\n    const compose: Compose = await getCompose();\n    assert.instanceOf(compose, Compose);\n    expect(compose.endpoint).equals(DEFAULT_MEDIA_ENDPOINT);\n  });\n\n  it('cannot be created with a different endpoint', async () => {\n    const compose: Compose = await getCompose({\n      endpoint: '/schmsgmedia/schmupload/',\n    });\n    assert.instanceOf(compose, Compose);\n    expect(compose.endpoint).equals(DEFAULT_MEDIA_ENDPOINT);\n  });\n\n  it('chatbox no counter no send button', async () => {\n    const compose: Compose = await getCompose({\n      chatbox: true,\n    });\n    await assertScreenshot(\n      'compose/chatbox-no-counter-no-send-button',\n      getClip(compose)\n    );\n  });\n\n  it('chatbox no counter and send button', async () => {\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      button: true,\n    });\n    await assertScreenshot(\n      'compose/chatbox-no-counter-and-send-button',\n      getClip(compose)\n    );\n  });\n\n  it('chatbox counter no send button', async () => {\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      counter: true,\n    });\n    await assertScreenshot(\n      'compose/chatbox-counter-no-send-button',\n      getClip(compose)\n    );\n  });\n\n  it('chatbox counter and send button', async () => {\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      counter: true,\n      button: true,\n    });\n    await assertScreenshot(\n      'compose/chatbox-counter-and-send-button',\n      getClip(compose)\n    );\n  });\n\n  it('chatbox counter and send button deserialize and serialize', async () => {\n    const initialValue = getInitialValue();\n    const composeValue = getComposeValue(initialValue);\n\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      counter: true,\n      button: true,\n      value: composeValue,\n    });\n    // deserialize\n    expect(compose.currentText).to.equal('');\n    expect(compose.currentAttachments).to.deep.equal([]);\n    // serialize\n    expect(compose.value).to.equal(composeValue);\n  });\n\n  it('chatbox with text', async () => {\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      counter: true,\n      button: true,\n    });\n    await updateComponent(compose, getValidText());\n    await assertScreenshot('compose/chatbox-with-text', getClip(compose));\n  });\n\n  it('chatbox with text deserialize and serialize', async () => {\n    const initialValue = getInitialValue(getValidText());\n    const composeValue = getComposeValue(initialValue);\n\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      counter: true,\n      button: true,\n      value: composeValue,\n    });\n    // deserialize\n    expect(compose.currentText).to.equal(getValidText());\n    expect(compose.currentAttachments).to.deep.equal([]);\n    // serialize\n    expect(compose.value).to.equal(composeValue);\n  });\n\n  it('chatbox with text and spaces', async () => {\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      counter: true,\n      button: true,\n    });\n    await updateComponent(compose, getValidText_Long_WithSpaces());\n    await assertScreenshot(\n      'compose/chatbox-with-text-and-spaces',\n      getClip(compose)\n    );\n  });\n\n  it('chatbox with text and no spaces', async () => {\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      counter: true,\n      button: true,\n    });\n    await updateComponent(compose, getValidText_Long_WithNoSpaces());\n    await assertScreenshot(\n      'compose/chatbox-with-text-no-spaces',\n      getClip(compose)\n    );\n  });\n\n  it('chatbox with text and url', async () => {\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      counter: true,\n      button: true,\n    });\n    await updateComponent(compose, getValidText_Long_WithUrl());\n    await assertScreenshot(\n      'compose/chatbox-with-text-and-url',\n      getClip(compose)\n    );\n  });\n\n  it('chatbox with text and click send', async () => {\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      counter: true,\n      button: true,\n    });\n    await updateComponent(compose, getValidText());\n    const send = compose.shadowRoot.querySelector(\n      'temba-button#send-button'\n    ) as Button;\n    send.click();\n    await assertScreenshot(\n      'compose/chatbox-with-text-and-click-send',\n      getClip(compose)\n    );\n  });\n\n  it('chatbox with text and hit enter', async () => {\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      counter: true,\n      button: true,\n    });\n    await updateComponent(compose, getValidText());\n    const chatbox = compose.shadowRoot.querySelector('.chatbox') as Completion;\n    chatbox.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));\n    await assertScreenshot(\n      'compose/chatbox-with-text-and-hit-enter',\n      getClip(compose)\n    );\n  });\n});\n\ndescribe('temba-compose attachments', () => {\n  it('attachments no send button', async () => {\n    const compose: Compose = await getCompose({\n      attachments: true,\n    });\n    await assertScreenshot(\n      'compose/attachments-no-send-button',\n      getClip(compose)\n    );\n  });\n\n  it('attachments and send button', async () => {\n    const compose: Compose = await getCompose({\n      attachments: true,\n      button: true,\n    });\n    await assertScreenshot(\n      'compose/attachments-and-send-button',\n      getClip(compose)\n    );\n  });\n\n  it('attachments and send button deserialize and serialize', async () => {\n    const initialValue = getInitialValue();\n    const composeValue = getComposeValue(initialValue);\n\n    const compose: Compose = await getCompose({\n      attachments: true,\n      button: true,\n      value: composeValue,\n    });\n    // deserialize\n    expect(compose.currentText).to.equal('');\n    expect(compose.currentAttachments).to.deep.equal([]);\n    // serialize\n    expect(compose.value).to.equal(composeValue);\n  });\n\n  it('attachments with success uploaded files', async () => {\n    const compose: Compose = await getCompose({\n      attachments: true,\n      button: true,\n    });\n    await updateComponent(compose, null, getValidAttachments());\n    await assertScreenshot(\n      'compose/attachments-with-success-files',\n      getClip(compose)\n    );\n  });\n\n  it('attachments with success uploaded files deserialize and serialize', async () => {\n    const initialValue = getInitialValue(null, getValidAttachments());\n    const composeValue = getComposeValue(initialValue);\n    const composeValues = getComposeValues(initialValue);\n\n    const compose: Compose = await getCompose({\n      attachments: true,\n      button: true,\n      value: composeValue,\n    });\n    // deserialize\n    expect(compose.currentText).to.equal('');\n    expect(compose.currentAttachments).to.deep.equal(getValidAttachments());\n    // serialize\n    expect(compose.value).to.equal(composeValue);\n  });\n\n  it('attachments with failure uploaded files', async () => {\n    const compose: Compose = await getCompose({\n      attachments: true,\n      button: true,\n    });\n    await updateComponent(compose, null, null, getInvalidAttachments());\n    await assertScreenshot(\n      'compose/attachments-with-failure-files',\n      getClip(compose)\n    );\n  });\n\n  it('attachments with success and failure uploaded files', async () => {\n    const compose: Compose = await getCompose({\n      attachments: true,\n      button: true,\n    });\n    await updateComponent(\n      compose,\n      null,\n      getValidAttachments(),\n      getInvalidAttachments()\n    );\n    await assertScreenshot(\n      'compose/attachments-with-all-files',\n      getClip(compose)\n    );\n  });\n\n  it('attachments with success uploaded files and click send', async () => {\n    const compose: Compose = await getCompose({\n      attachments: true,\n      button: true,\n    });\n    await updateComponent(compose, null, getValidAttachments());\n    const send = compose.shadowRoot.querySelector(\n      'temba-button#send-button'\n    ) as Button;\n    send.click();\n    await assertScreenshot(\n      'compose/attachments-with-success-files-and-click-send',\n      getClip(compose)\n    );\n  });\n\n  it('attachments with success and failure uploaded files and click send', async () => {\n    const compose: Compose = await getCompose({\n      attachments: true,\n      button: true,\n    });\n    await updateComponent(\n      compose,\n      null,\n      getValidAttachments(),\n      getInvalidAttachments()\n    );\n    const send = compose.shadowRoot.querySelector(\n      'temba-button#send-button'\n    ) as Button;\n    send.click();\n    await assertScreenshot(\n      'compose/attachments-with-all-files-and-click-send',\n      getClip(compose)\n    );\n  });\n});\n\ndescribe('temba-compose chatbox and attachments', () => {\n  it('chatbox and attachments no counter no send button', async () => {\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      attachments: true,\n    });\n    await assertScreenshot(\n      'compose/chatbox-attachments-no-counter-no-send-button',\n      getClip(compose)\n    );\n  });\n\n  it('chatbox and attachments no counter and send button', async () => {\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      attachments: true,\n      button: true,\n    });\n    await assertScreenshot(\n      'compose/chatbox-attachments-no-counter-and-send-button',\n      getClip(compose)\n    );\n  });\n\n  it('chatbox and attachments counter no send button', async () => {\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      attachments: true,\n      counter: true,\n    });\n    await assertScreenshot(\n      'compose/chatbox-attachments-counter-no-send-button',\n      getClip(compose)\n    );\n  });\n\n  it('chatbox and attachments counter and send button', async () => {\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      attachments: true,\n      counter: true,\n      button: true,\n    });\n    await assertScreenshot(\n      'compose/chatbox-attachments-counter-and-send-button',\n      getClip(compose)\n    );\n  });\n\n  it('chatbox and attachments counter and send button deserialize and serialize', async () => {\n    const initialValue = getInitialValue();\n    const composeValue = getComposeValue(initialValue);\n\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      attachments: true,\n      counter: true,\n      button: true,\n      value: composeValue,\n    });\n    // deserialize\n    expect(compose.currentText).to.equal('');\n    expect(compose.currentAttachments).to.deep.equal([]);\n    // serialize\n    expect(compose.value).to.equal(composeValue);\n  });\n});\n\ndescribe('temba-compose chatbox with text and attachments no files', () => {\n  it('chatbox with text, attachments no files', async () => {\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      attachments: true,\n      counter: true,\n      button: true,\n    });\n    updateComponent(compose, getValidText());\n    await assertScreenshot(\n      'compose/chatbox-with-text-attachments-no-files',\n      getClip(compose)\n    );\n  });\n\n  it('chatbox with text, attachments no files deserialize and serialize', async () => {\n    const initialValue = getInitialValue(getValidText());\n    const composeValue = getComposeValue(initialValue);\n\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      attachments: true,\n      counter: true,\n      button: true,\n      value: composeValue,\n    });\n    // deserialize\n    expect(compose.currentText).to.equal(getValidText());\n    expect(compose.currentAttachments).to.deep.equal([]);\n    // serialize\n    expect(compose.value).to.equal(composeValue);\n  });\n\n  it('chatbox with text, attachments no files, and click send', async () => {\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      attachments: true,\n      counter: true,\n      button: true,\n    });\n    updateComponent(compose, getValidText());\n    const send = compose.shadowRoot.querySelector(\n      'temba-button#send-button'\n    ) as Button;\n    send.click();\n    await assertScreenshot(\n      'compose/chatbox-with-text-attachments-no-files-and-click-send',\n      getClip(compose)\n    );\n  });\n\n  it('chatbox with text, attachments no files, and hit enter', async () => {\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      attachments: true,\n      counter: true,\n      button: true,\n    });\n    await updateComponent(compose, getValidText());\n    const chatbox = compose.shadowRoot.querySelector('.chatbox') as HTMLElement;\n    chatbox.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));\n    await assertScreenshot(\n      'compose/chatbox-with-text-attachments-no-files-and-hit-enter',\n      getClip(compose)\n    );\n  });\n});\n\ndescribe('temba-compose chatbox no text and attachments with files', () => {\n  it('chatbox no text, attachments with success uploaded files', async () => {\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      attachments: true,\n      button: true,\n    });\n    await updateComponent(compose, null, getValidAttachments());\n    await assertScreenshot(\n      'compose/chatbox-no-text-attachments-with-success-files',\n      getClip(compose)\n    );\n  });\n\n  it('chatbox no text, attachments with success uploaded files deserialize and serialize', async () => {\n    const initialValue = getInitialValue(null, getValidAttachments());\n    const composeValue = getComposeValue(initialValue);\n\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      attachments: true,\n      button: true,\n      value: composeValue,\n    });\n    // deserialize\n    expect(compose.currentText).to.equal('');\n    expect(compose.currentAttachments).to.deep.equal(getValidAttachments());\n    // serialize\n    expect(compose.value).to.equal(composeValue);\n  });\n\n  it('chatbox no text, attachments with failure uploaded files', async () => {\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      attachments: true,\n      button: true,\n    });\n    await updateComponent(compose, null, null, getInvalidAttachments());\n    await assertScreenshot(\n      'compose/chatbox-no-text-attachments-with-failure-files',\n      getClip(compose)\n    );\n  });\n\n  it('chatbox no text, attachments with success and failure uploaded files', async () => {\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      attachments: true,\n      button: true,\n    });\n    await updateComponent(\n      compose,\n      null,\n      getValidAttachments(),\n      getInvalidAttachments()\n    );\n    await assertScreenshot(\n      'compose/chatbox-no-text-attachments-with-all-files',\n      getClip(compose)\n    );\n  });\n\n  it('chatbox no text, attachments with success uploaded files, and click send', async () => {\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      attachments: true,\n      button: true,\n    });\n    await updateComponent(compose, null, getValidAttachments());\n    const send = compose.shadowRoot.querySelector(\n      'temba-button#send-button'\n    ) as Button;\n    send.click();\n    await assertScreenshot(\n      'compose/chatbox-no-text-attachments-with-success-files-and-click-send',\n      getClip(compose)\n    );\n  });\n\n  it('chatbox no text, attachments with success and failure uploaded files, and click send', async () => {\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      attachments: true,\n      button: true,\n    });\n    await updateComponent(\n      compose,\n      null,\n      getValidAttachments(),\n      getInvalidAttachments()\n    );\n    const send = compose.shadowRoot.querySelector(\n      'temba-button#send-button'\n    ) as Button;\n    send.click();\n    await assertScreenshot(\n      'compose/chatbox-no-text-attachments-with-all-files-and-click-send',\n      getClip(compose)\n    );\n  });\n});\n\ndescribe('temba-compose chatbox with text and attachments with files', () => {\n  it('chatbox with text, attachments with success uploaded files', async () => {\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      attachments: true,\n      button: true,\n    });\n    await updateComponent(compose, getValidText(), getValidAttachments());\n    await assertScreenshot(\n      'compose/chatbox-with-text-attachments-with-success-files',\n      getClip(compose)\n    );\n  });\n\n  it('chatbox with text, attachments with success uploaded files deserialize and serialize', async () => {\n    const initialValue = getInitialValue(getValidText(), getValidAttachments());\n    const composeValue = getComposeValue(initialValue);\n\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      attachments: true,\n      button: true,\n      value: composeValue,\n    });\n    // deserialize\n    expect(compose.currentText).to.equal(getValidText());\n    expect(compose.currentAttachments).to.deep.equal(getValidAttachments());\n    // serialize\n    expect(compose.value).to.equal(composeValue);\n  });\n\n  it('chatbox with text, attachments with failure uploaded files', async () => {\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      attachments: true,\n      button: true,\n    });\n    await updateComponent(\n      compose,\n      getValidText(),\n      null,\n      getInvalidAttachments()\n    );\n    await assertScreenshot(\n      'compose/chatbox-with-text-attachments-with-failure-files',\n      getClip(compose)\n    );\n  });\n\n  it('chatbox with text, attachments with success and failure uploaded files', async () => {\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      attachments: true,\n      button: true,\n    });\n    await updateComponent(\n      compose,\n      getValidText(),\n      getValidAttachments(),\n      getInvalidAttachments()\n    );\n    await assertScreenshot(\n      'compose/chatbox-with-text-attachments-with-all-files',\n      getClip(compose)\n    );\n  });\n\n  it('chatbox with text, attachments with success uploaded files, and click send', async () => {\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      attachments: true,\n      button: true,\n    });\n    await updateComponent(compose, getValidText(), getValidAttachments());\n    const send = compose.shadowRoot.querySelector(\n      'temba-button#send-button'\n    ) as Button;\n    send.click();\n    await assertScreenshot(\n      'compose/chatbox-with-text-attachments-with-success-files-and-click-send',\n      getClip(compose)\n    );\n  });\n\n  it('chatbox with text, attachments with success and failure uploaded files, and click send', async () => {\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      attachments: true,\n      button: true,\n    });\n    await updateComponent(\n      compose,\n      getValidText(),\n      getValidAttachments(),\n      getInvalidAttachments()\n    );\n    const send = compose.shadowRoot.querySelector(\n      'temba-button#send-button'\n    ) as Button;\n    send.click();\n    await assertScreenshot(\n      'compose/chatbox-with-text-attachments-with-all-files-and-click-send',\n      getClip(compose)\n    );\n  });\n\n  it('chatbox with text, attachments with success uploaded files, and hit enter', async () => {\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      attachments: true,\n      button: true,\n    });\n    await updateComponent(compose, getValidText(), getValidAttachments());\n    const chatbox = compose.shadowRoot.querySelector('.chatbox') as HTMLElement;\n    chatbox.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));\n    await assertScreenshot(\n      'compose/chatbox-with-text-attachments-with-success-files-and-hit-enter',\n      getClip(compose)\n    );\n  });\n\n  it('chatbox with text, attachments with success and failure uploaded files, and hit enter', async () => {\n    const compose: Compose = await getCompose({\n      chatbox: true,\n      attachments: true,\n      button: true,\n    });\n    await updateComponent(\n      compose,\n      getValidText(),\n      getValidAttachments(),\n      getInvalidAttachments()\n    );\n    const chatbox = compose.shadowRoot.querySelector(\n      '.chatbox'\n    ) as HTMLInputElement;\n    chatbox.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));\n    const newClip = getClip(compose);\n    await assertScreenshot(\n      'compose/chatbox-with-text-attachments-with-all-files-and-hit-enter',\n      newClip\n    );\n  });\n});\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyaruka/temba-components",
-  "version": "0.59.0",
+  "version": "0.60.1",
   "description": "Web components to support rapidpro and related projects",
   "author": "Nyaruka <code@nyaruka.coim>",
   "main": "dist/index.js",

package/src/compose/Compose.ts

@@ -79,7 +79,7 @@ export class Compose extends FormElement {
       .items {
       }
 
-      temba-completion {
+      .chatbox {
         margin-left: 0.3em;
         margin-top: 0.3em;
         --color-widget-border: none;
@@ -177,6 +177,9 @@ export class Compose extends FormElement {
     `;
   }
 
+  @property({ type: Boolean })
+  completion: boolean;
+
   @property({ type: Boolean })
   chatbox: boolean;
 
@@ -195,6 +198,9 @@ export class Compose extends FormElement {
   @property({ type: String })
   currentText = '';
 
+  @property({ type: String })
+  initialText = '';
+
   @property({ type: String })
   accept = ''; //e.g. ".xls,.xlsx"
 
@@ -236,7 +242,7 @@ export class Compose extends FormElement {
     if (this.value) {
       const parsed_value = JSON.parse(this.value);
       if (this.chatbox) {
-        this.currentText = parsed_value.text;
+        this.initialText = parsed_value.text;
       }
       if (this.attachments) {
         this.currentAttachments = parsed_value.attachments;
@@ -275,7 +281,7 @@ export class Compose extends FormElement {
   private setFocusOnChatbox(): void {
     if (this.chatbox) {
       const completion = this.shadowRoot.querySelector(
-        'temba-completion'
+        '.chatbox'
       ) as Completion;
       if (completion) {
         window.setTimeout(() => {
@@ -286,6 +292,8 @@ export class Compose extends FormElement {
   }
 
   public reset(): void {
+    (this.shadowRoot.querySelector('.chatbox') as HTMLInputElement).value = '';
+    this.initialText = '';
     this.currentText = '';
     this.currentAttachments = [];
     this.failedAttachments = [];
@@ -297,8 +305,11 @@ export class Compose extends FormElement {
   }
 
   private handleChatboxChange(evt: Event) {
-    const completion = evt.target as Completion;
-    this.currentText = completion.value;
+    const chatbox = evt.target as HTMLInputElement;
+    this.currentText = chatbox.value;
+    this.toggleButton();
+    this.serializeComposeValue();
+    this.fireCustomEvent(CustomEventType.ContentChanged, this.value);
   }
 
   private handleDragEnter(evt: DragEvent): void {
@@ -467,12 +478,19 @@ export class Compose extends FormElement {
   }
 
   private handleSendEnter(evt: KeyboardEvent) {
-    if (evt.key === 'Enter' && !evt.shiftKey) {
-      const chat = evt.target as Completion;
-      if (!chat.hasVisibleOptions()) {
-        this.handleSend();
+    if (this.button) {
+      if (evt.key === 'Enter' && !evt.shiftKey) {
+        if (this.completion) {
+          const chat = evt.target as Completion;
+          if (!chat.hasVisibleOptions()) {
+            this.handleSend();
+            this.preventDefaults(evt);
+          }
+        } else {
+          this.handleSend();
+          this.preventDefaults(evt);
+        }
       }
-      this.preventDefaults(evt);
     }
   }
 
@@ -502,9 +520,7 @@ export class Compose extends FormElement {
         >
           <div class="drop-mask"><div>Upload Attachment</div></div>
 
-          ${this.chatbox
-            ? html`<div class="items chatbox">${this.getChatbox()}</div>`
-            : null}
+          ${this.chatbox ? html`${this.getChatbox()}` : null}
           ${this.attachments
             ? html`<div class="items attachments">
                 ${this.getAttachments()}
@@ -517,16 +533,31 @@ export class Compose extends FormElement {
   }
 
   private getChatbox(): TemplateResult {
-    return html` <temba-completion
-      value=${this.currentText}
-      gsm
-      textarea
-      autogrow
-      @change=${this.handleChatboxChange}
-      @keydown=${this.handleSendEnter}
-      placeholder="Write something here"
-    >
-    </temba-completion>`;
+    if (this.completion) {
+      return html` <temba-completion
+        class="chatbox"
+        value=${this.initialText}
+        gsm
+        textarea
+        autogrow
+        @change=${this.handleChatboxChange}
+        @keydown=${this.handleSendEnter}
+        placeholder="Write something here"
+      >
+      </temba-completion>`;
+    } else {
+      return html` <temba-textinput
+        class="chatbox"
+        gsm
+        textarea
+        autogrow
+        value=${this.initialText}
+        @change=${this.handleChatboxChange}
+        @keydown=${this.handleSendEnter}
+        placeholder="Write something here"
+      >
+      </temba-textinput>`;
+    }
   }
 
   private getAttachments(): TemplateResult {
@@ -630,7 +661,9 @@ export class Compose extends FormElement {
   }
 
   private getCounter(): TemplateResult {
-    return html`<temba-charcount text="${this.currentText}"></temba-charcount>`;
+    return html`<temba-charcount
+      .text="${this.currentText}"
+    ></temba-charcount>`;
   }
 
   private getButton(): TemplateResult {

package/test/temba-compose.test.ts

@@ -24,7 +24,7 @@ export const updateComponent = async (
   attachments?: Attachment[],
   errorAttachments?: Attachment[]
 ): Promise<void> => {
-  compose.currentText = text ? text : '';
+  compose.initialText = text ? text : '';
   compose.currentAttachments = attachments ? attachments : [];
   compose.failedAttachments = errorAttachments ? errorAttachments : [];
   await compose.updateComplete;
@@ -276,10 +276,8 @@ describe('temba-compose chatbox', () => {
       button: true,
     });
     await updateComponent(compose, getValidText());
-    const completion = compose.shadowRoot.querySelector(
-      'temba-completion'
-    ) as Completion;
-    completion.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
+    const chatbox = compose.shadowRoot.querySelector('.chatbox') as Completion;
+    chatbox.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
     await assertScreenshot(
       'compose/chatbox-with-text-and-hit-enter',
       getClip(compose)
@@ -548,10 +546,8 @@ describe('temba-compose chatbox with text and attachments no files', () => {
       button: true,
     });
     await updateComponent(compose, getValidText());
-    const completion = compose.shadowRoot.querySelector(
-      'temba-completion'
-    ) as Completion;
-    completion.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
+    const chatbox = compose.shadowRoot.querySelector('.chatbox') as HTMLElement;
+    chatbox.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
     await assertScreenshot(
       'compose/chatbox-with-text-attachments-no-files-and-hit-enter',
       getClip(compose)
@@ -774,10 +770,8 @@ describe('temba-compose chatbox with text and attachments with files', () => {
       button: true,
     });
     await updateComponent(compose, getValidText(), getValidAttachments());
-    const completion = compose.shadowRoot.querySelector(
-      'temba-completion'
-    ) as Completion;
-    completion.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
+    const chatbox = compose.shadowRoot.querySelector('.chatbox') as HTMLElement;
+    chatbox.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
     await assertScreenshot(
       'compose/chatbox-with-text-attachments-with-success-files-and-hit-enter',
       getClip(compose)
@@ -796,10 +790,10 @@ describe('temba-compose chatbox with text and attachments with files', () => {
       getValidAttachments(),
       getInvalidAttachments()
     );
-    const completion = compose.shadowRoot.querySelector(
-      'temba-completion'
-    ) as Completion;
-    completion.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
+    const chatbox = compose.shadowRoot.querySelector(
+      '.chatbox'
+    ) as HTMLInputElement;
+    chatbox.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
     const newClip = getClip(compose);
     await assertScreenshot(
       'compose/chatbox-with-text-attachments-with-all-files-and-hit-enter',