@nyaruka/temba-components 0.61.1 → 0.62.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.devcontainer/devcontainer.json +0 -1
- package/CHANGELOG.md +13 -1
- package/demo/index.html +262 -316
- package/dist/{831cf8d6.js → 5ca3af22.js} +30 -12
- package/dist/index.js +30 -12
- package/dist/sw.js +1 -1
- package/dist/sw.js.map +1 -1
- package/dist/templates/components-body.html +1 -1
- package/dist/templates/components-head.html +1 -1
- package/out-tsc/src/completion/Completion.js +5 -0
- package/out-tsc/src/completion/Completion.js.map +1 -1
- package/out-tsc/src/compose/Compose.js +111 -47
- package/out-tsc/src/compose/Compose.js.map +1 -1
- package/out-tsc/src/interfaces.js.map +1 -1
- package/out-tsc/src/select/Select.js +1 -1
- package/out-tsc/src/select/Select.js.map +1 -1
- package/out-tsc/src/textinput/TextInput.js +2 -0
- package/out-tsc/src/textinput/TextInput.js.map +1 -1
- package/out-tsc/test/temba-compose.test.js +7 -5
- package/out-tsc/test/temba-compose.test.js.map +1 -1
- package/package.json +1 -1
- package/screenshots/truth/contacts/compose-attachments-no-text-failure.png +0 -0
- package/screenshots/truth/contacts/compose-text-and-attachments-failure-attachments.png +0 -0
- package/screenshots/truth/contacts/compose-text-and-attachments-failure-text-and-attachments.png +0 -0
- package/src/completion/Completion.ts +4 -0
- package/src/compose/Compose.ts +124 -51
- package/src/interfaces.ts +5 -0
- package/src/select/Select.ts +1 -1
- package/src/textinput/TextInput.ts +2 -0
- package/test/temba-compose.test.ts +7 -5
|
@@ -171,7 +171,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
|
|
|
171
171
|
.grow-wrap textarea {
|
|
172
172
|
margin-left: -100%;
|
|
173
173
|
}
|
|
174
|
-
`}constructor(){super(),this.placeholder="",this.loading=!0,this.submitOnEnter=!0,this.autogrow=!1,this.counterElement=null,this.cursorStart=-1,this.cursorEnd=-1}firstUpdated(t){if(super.firstUpdated(t),this.inputElement=this.shadowRoot.querySelector(".textinput"),t.has("counter")){let t=this.getParentModax();t&&(t=t.shadowRoot),t||(t=document),this.counterElement=t.querySelector(this.counter),this.counterElement.text=this.value}}updated(t){if(super.updated(t),t.has("value")){if(this.fireEvent("change"),this.textarea&&this.autogrow){this.shadowRoot.querySelector(".grow-wrap > div").innerText=this.value+String.fromCharCode(10)}this.cursorStart>-1&&this.cursorEnd>-1&&(this.inputElement.setSelectionRange(this.cursorStart,this.cursorEnd),this.cursorStart=-1,this.cursorEnd=-1)}}getDisplayValue(){return this.inputElement.value}handleClear(t){t.stopPropagation(),t.preventDefault(),this.value=null}updateValue(t){const e=this.inputElement.selectionStart,i=this.inputElement.selectionEnd,n=this.sanitizeGSM(t);n!==t&&(this.cursorStart=e,this.cursorEnd=i),this.value=n,this.textarea&&(this.inputElement.value=this.value),this.counterElement&&(this.counterElement.text=t)}sanitizeGSM(t){return this.gsm?(t=>t?t.replace(/[\u2018\u2019]/g,"'").replace(/[\u201C\u201D]/g,'"').replace(/[\u2013\u2014]/g,"-").replace(/\u2026/g,"...").replace(/\u2002/g," "):t)(t):t}handleChange(t){this.disabled||(this.updateValue(t.target.value),this.fireEvent("change"))}handleContainerClick(){this.disabled||this.inputElement&&this.inputElement.click()}handleContainerFocus(){this.disabled||this.inputElement&&this.inputElement.focus()}handleInput(t){this.disabled||(this.updateValue(t.target.value),this.fireEvent("input"))}serializeValue(t){return t}getParentModax(){let t=this;for(;t;){if(t=t.parentElement?t.parentElement:t.getRootNode().host,!t)return null;if("TEMBA-MODAX"==t.tagName)return t}}getParentForm(){let t=this;for(;t;){if(t=t.parentElement?t.parentElement:t.getRootNode().host,!t)return null;if("FORM"===t.tagName)return t}}click(){super.click(),this.handleContainerClick()}focus(){super.focus(),this.handleContainerFocus()}render(){const t={height:""+(this.textarea?"100%":"auto")},e=this.clearable&&this.inputElement&&this.inputElement.value?D`<temba-icon
|
|
174
|
+
`}constructor(){super(),this.placeholder="",this.loading=!0,this.submitOnEnter=!0,this.autogrow=!1,this.counterElement=null,this.cursorStart=-1,this.cursorEnd=-1}firstUpdated(t){if(super.firstUpdated(t),this.inputElement=this.shadowRoot.querySelector(".textinput"),t.has("counter")){let t=this.getParentModax();t&&(t=t.shadowRoot),t||(t=document),this.counterElement=t.querySelector(this.counter),this.counterElement.text=this.value}}updated(t){if(super.updated(t),t.has("value")){if(this.fireEvent("change"),this.textarea&&this.autogrow){this.shadowRoot.querySelector(".grow-wrap > div").innerText=this.value+String.fromCharCode(10)}this.cursorStart>-1&&this.cursorEnd>-1&&(this.inputElement.setSelectionRange(this.cursorStart,this.cursorEnd),this.cursorStart=-1,this.cursorEnd=-1)}}getDisplayValue(){return this.inputElement.value}handleClear(t){t.stopPropagation(),t.preventDefault(),this.value=null}updateValue(t){const e=this.inputElement.selectionStart,i=this.inputElement.selectionEnd,n=this.sanitizeGSM(t);n!==t&&(this.cursorStart=e,this.cursorEnd=i),this.value=n,this.textarea&&(this.inputElement.value=this.value),this.counterElement&&(this.counterElement.text=t)}sanitizeGSM(t){return this.gsm?(t=>t?t.replace(/[\u2018\u2019]/g,"'").replace(/[\u201C\u201D]/g,'"').replace(/[\u2013\u2014]/g,"-").replace(/\u2026/g,"...").replace(/\u2002/g," "):t)(t):t}handleChange(t){this.disabled||(this.updateValue(t.target.value),this.fireEvent("change"))}handleContainerClick(){this.disabled||this.inputElement&&this.inputElement.click()}handleContainerFocus(){this.disabled||this.inputElement&&(this.inputElement.focus(),this.inputElement.setSelectionRange(this.value.length,this.value.length))}handleInput(t){this.disabled||(this.updateValue(t.target.value),this.fireEvent("input"))}serializeValue(t){return t}getParentModax(){let t=this;for(;t;){if(t=t.parentElement?t.parentElement:t.getRootNode().host,!t)return null;if("TEMBA-MODAX"==t.tagName)return t}}getParentForm(){let t=this;for(;t;){if(t=t.parentElement?t.parentElement:t.getRootNode().host,!t)return null;if("FORM"===t.tagName)return t}}click(){super.click(),this.handleContainerClick()}focus(){super.focus(),this.handleContainerFocus()}render(){const t={height:""+(this.textarea?"100%":"auto")},e=this.clearable&&this.inputElement&&this.inputElement.value?D`<temba-icon
|
|
175
175
|
name="x"
|
|
176
176
|
class="clear-icon"
|
|
177
177
|
@click=${this.handleClear}
|
|
@@ -193,6 +193,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
|
|
|
193
193
|
<textarea
|
|
194
194
|
class="textinput"
|
|
195
195
|
name=${this.name}
|
|
196
|
+
maxlength="${ft(this.maxlength)}"
|
|
196
197
|
placeholder=${this.placeholder}
|
|
197
198
|
@change=${this.handleChange}
|
|
198
199
|
@input=${this.handleInput}
|
|
@@ -766,7 +767,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
|
|
|
766
767
|
style="margin-right:0.5em;"
|
|
767
768
|
></temba-icon>`:null}<span>${this.getName(t)}</span>
|
|
768
769
|
</div>
|
|
769
|
-
`:null}serializeValue(t){return!this.jsonValue&&(this.staticOptions.length>0||this.tags)?t.value:super.serializeValue(t)}setSelection(t){for(const e of this.staticOptions)if(e.value===t)return void(0!==this.values.length&&this.values[0].value===""+t||this.setValues([e]))}handleClear(t){t.preventDefault(),t.stopPropagation(),this.setValues([])}setValues(t){this.values=t,this.requestUpdate("values")}addValue(t){this.values.push(t),this.requestUpdate("values")}removeValue(t){const e=this.values.indexOf(t);e>-1&&this.values.splice(e,1),this.requestUpdate("values")}popValue(){this.values.pop(),this.requestUpdate("values")}clear(){this.values=[],this.requestUpdate("values")}render(){const t=0===this.values.length?this.placeholder:"",e=D`
|
|
770
|
+
`:null}serializeValue(t){return!this.jsonValue&&(this.staticOptions.length>0||this.tags)?t.value:super.serializeValue(t)}setSelection(t){for(const e of this.staticOptions)if(this.getValue(e.value)===t)return void(0!==this.values.length&&this.values[0].value===""+t||this.setValues([e]))}handleClear(t){t.preventDefault(),t.stopPropagation(),this.setValues([])}setValues(t){this.values=t,this.requestUpdate("values")}addValue(t){this.values.push(t),this.requestUpdate("values")}removeValue(t){const e=this.values.indexOf(t);e>-1&&this.values.splice(e,1),this.requestUpdate("values")}popValue(){this.values.pop(),this.requestUpdate("values")}clear(){this.values=[],this.requestUpdate("values")}render(){const t=0===this.values.length?this.placeholder:"",e=D`
|
|
770
771
|
<div class="placeholder">${t}</div>
|
|
771
772
|
`,i=this.clearable&&this.values.length>0&&!this.multi?D`<temba-icon
|
|
772
773
|
name="${pt.select_clear}"
|
|
@@ -889,7 +890,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
|
|
|
889
890
|
|
|
890
891
|
</temba-field>
|
|
891
892
|
|
|
892
|
-
`}}t([ct({type:Boolean})],Ra.prototype,"multi",void 0),t([ct({type:Boolean})],Ra.prototype,"searchOnFocus",void 0),t([ct({type:String})],Ra.prototype,"placeholder",void 0),t([ct()],Ra.prototype,"name",void 0),t([ct()],Ra.prototype,"endpoint",void 0),t([ct({type:String})],Ra.prototype,"nameKey",void 0),t([ct({type:String})],Ra.prototype,"valueKey",void 0),t([ct({attribute:!1})],Ra.prototype,"currentFunction",void 0),t([ct({type:String})],Ra.prototype,"queryParam",void 0),t([ct({type:String})],Ra.prototype,"input",void 0),t([ct({type:Array})],Ra.prototype,"visibleOptions",void 0),t([ct({type:Array})],Ra.prototype,"completionOptions",void 0),t([ct({type:Number})],Ra.prototype,"quietMillis",void 0),t([ct({type:Boolean})],Ra.prototype,"fetching",void 0),t([ct({type:Boolean})],Ra.prototype,"searchable",void 0),t([ct({type:String})],Ra.prototype,"expressions",void 0),t([ct({type:Boolean})],Ra.prototype,"cache",void 0),t([ct({type:String})],Ra.prototype,"cacheKey",void 0),t([ct({type:Boolean})],Ra.prototype,"focused",void 0),t([ct({type:Boolean})],Ra.prototype,"disabled",void 0),t([ct({attribute:!1})],Ra.prototype,"selectedIndex",void 0),t([ct({type:Number})],Ra.prototype,"cursorIndex",void 0),t([ct({attribute:!1})],Ra.prototype,"anchorElement",void 0),t([ct({attribute:!1})],Ra.prototype,"anchorExpressions",void 0),t([ct({type:Object})],Ra.prototype,"anchorPosition",void 0),t([ct({type:Boolean})],Ra.prototype,"tags",void 0),t([ct({type:Boolean,attribute:"space_select"})],Ra.prototype,"spaceSelect",void 0),t([ct({type:Boolean})],Ra.prototype,"jsonValue",void 0),t([ct({type:Boolean})],Ra.prototype,"hideErrors",void 0),t([ct({type:Boolean})],Ra.prototype,"clearable",void 0),t([ct({type:String})],Ra.prototype,"flavor",void 0),t([ct({type:String,attribute:"info_text"})],Ra.prototype,"infoText",void 0),t([ct({type:Array})],Ra.prototype,"values",void 0),t([ct({type:Object})],Ra.prototype,"selection",void 0),t([ct({attribute:!1})],Ra.prototype,"getName",void 0),t([ct({attribute:!1})],Ra.prototype,"isMatch",void 0),t([ct({attribute:!1})],Ra.prototype,"getValue",void 0),t([ct({type:Number,attribute:"option-width"})],Ra.prototype,"optionWidth",void 0),t([ct({type:Boolean,attribute:"anchor-right"})],Ra.prototype,"anchorRight",void 0),t([ct({attribute:!1})],Ra.prototype,"shouldExclude",void 0),t([ct({attribute:!1})],Ra.prototype,"sortFunction",void 0),t([ct({attribute:!1})],Ra.prototype,"renderOption",void 0),t([ct({attribute:!1})],Ra.prototype,"renderOptionName",void 0),t([ct({attribute:!1})],Ra.prototype,"renderOptionDetail",void 0),t([ct({attribute:!1})],Ra.prototype,"renderSelectedItem",void 0),t([ct({attribute:!1})],Ra.prototype,"createArbitraryOption",void 0),t([ct({attribute:!1})],Ra.prototype,"getOptions",void 0),t([ct({attribute:!1})],Ra.prototype,"isComplete",void 0),t([ct({type:Array,attribute:"options"})],Ra.prototype,"staticOptions",void 0);class Ba extends ut{constructor(){super(...arguments),this.submitOnEnter=!1,this.anchorPosition={left:0,top:0},this.placeholder="",this.options=[],this.name="",this.value="",this.autogrow=!1}static get styles(){return r`
|
|
893
|
+
`}}t([ct({type:Boolean})],Ra.prototype,"multi",void 0),t([ct({type:Boolean})],Ra.prototype,"searchOnFocus",void 0),t([ct({type:String})],Ra.prototype,"placeholder",void 0),t([ct()],Ra.prototype,"name",void 0),t([ct()],Ra.prototype,"endpoint",void 0),t([ct({type:String})],Ra.prototype,"nameKey",void 0),t([ct({type:String})],Ra.prototype,"valueKey",void 0),t([ct({attribute:!1})],Ra.prototype,"currentFunction",void 0),t([ct({type:String})],Ra.prototype,"queryParam",void 0),t([ct({type:String})],Ra.prototype,"input",void 0),t([ct({type:Array})],Ra.prototype,"visibleOptions",void 0),t([ct({type:Array})],Ra.prototype,"completionOptions",void 0),t([ct({type:Number})],Ra.prototype,"quietMillis",void 0),t([ct({type:Boolean})],Ra.prototype,"fetching",void 0),t([ct({type:Boolean})],Ra.prototype,"searchable",void 0),t([ct({type:String})],Ra.prototype,"expressions",void 0),t([ct({type:Boolean})],Ra.prototype,"cache",void 0),t([ct({type:String})],Ra.prototype,"cacheKey",void 0),t([ct({type:Boolean})],Ra.prototype,"focused",void 0),t([ct({type:Boolean})],Ra.prototype,"disabled",void 0),t([ct({attribute:!1})],Ra.prototype,"selectedIndex",void 0),t([ct({type:Number})],Ra.prototype,"cursorIndex",void 0),t([ct({attribute:!1})],Ra.prototype,"anchorElement",void 0),t([ct({attribute:!1})],Ra.prototype,"anchorExpressions",void 0),t([ct({type:Object})],Ra.prototype,"anchorPosition",void 0),t([ct({type:Boolean})],Ra.prototype,"tags",void 0),t([ct({type:Boolean,attribute:"space_select"})],Ra.prototype,"spaceSelect",void 0),t([ct({type:Boolean})],Ra.prototype,"jsonValue",void 0),t([ct({type:Boolean})],Ra.prototype,"hideErrors",void 0),t([ct({type:Boolean})],Ra.prototype,"clearable",void 0),t([ct({type:String})],Ra.prototype,"flavor",void 0),t([ct({type:String,attribute:"info_text"})],Ra.prototype,"infoText",void 0),t([ct({type:Array})],Ra.prototype,"values",void 0),t([ct({type:Object})],Ra.prototype,"selection",void 0),t([ct({attribute:!1})],Ra.prototype,"getName",void 0),t([ct({attribute:!1})],Ra.prototype,"isMatch",void 0),t([ct({attribute:!1})],Ra.prototype,"getValue",void 0),t([ct({type:Number,attribute:"option-width"})],Ra.prototype,"optionWidth",void 0),t([ct({type:Boolean,attribute:"anchor-right"})],Ra.prototype,"anchorRight",void 0),t([ct({attribute:!1})],Ra.prototype,"shouldExclude",void 0),t([ct({attribute:!1})],Ra.prototype,"sortFunction",void 0),t([ct({attribute:!1})],Ra.prototype,"renderOption",void 0),t([ct({attribute:!1})],Ra.prototype,"renderOptionName",void 0),t([ct({attribute:!1})],Ra.prototype,"renderOptionDetail",void 0),t([ct({attribute:!1})],Ra.prototype,"renderSelectedItem",void 0),t([ct({attribute:!1})],Ra.prototype,"createArbitraryOption",void 0),t([ct({attribute:!1})],Ra.prototype,"getOptions",void 0),t([ct({attribute:!1})],Ra.prototype,"isComplete",void 0),t([ct({type:Array,attribute:"options"})],Ra.prototype,"staticOptions",void 0);class Ba extends ut{constructor(){super(...arguments),this.maxLength=10,this.submitOnEnter=!1,this.anchorPosition={left:0,top:0},this.placeholder="",this.options=[],this.name="",this.value="",this.autogrow=!1}static get styles(){return r`
|
|
893
894
|
:host {
|
|
894
895
|
display: block;
|
|
895
896
|
}
|
|
@@ -963,6 +964,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
|
|
|
963
964
|
@click=${this.handleClick}
|
|
964
965
|
@input=${this.handleInput}
|
|
965
966
|
@blur=${this.handleOptionCanceled}
|
|
967
|
+
maxlength=${this.maxLength}
|
|
966
968
|
.value=${this.value}
|
|
967
969
|
?autogrow=${this.autogrow}
|
|
968
970
|
?textarea=${this.textarea}
|
|
@@ -986,7 +988,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
|
|
|
986
988
|
</temba-options>
|
|
987
989
|
</div>
|
|
988
990
|
</temba-field>
|
|
989
|
-
`}}var qa;t([ct({type:Boolean})],Ba.prototype,"session",void 0),t([ct({type:Boolean})],Ba.prototype,"submitOnEnter",void 0),t([ct({type:Object})],Ba.prototype,"anchorPosition",void 0),t([ct({attribute:!1})],Ba.prototype,"currentFunction",void 0),t([ct({type:String})],Ba.prototype,"placeholder",void 0),t([ct({attribute:!1})],Ba.prototype,"textInputElement",void 0),t([ct({attribute:!1})],Ba.prototype,"anchorElement",void 0),t([ct({type:Array})],Ba.prototype,"options",void 0),t([ct({type:String})],Ba.prototype,"name",void 0),t([ct({type:String})],Ba.prototype,"value",void 0),t([ct({type:Boolean})],Ba.prototype,"textarea",void 0),t([ct({type:Boolean})],Ba.prototype,"gsm",void 0),t([ct({type:String})],Ba.prototype,"counter",void 0),t([ct({type:Boolean})],Ba.prototype,"autogrow",void 0),function(t){t.PRIMARY="primary",t.SECONDARY="secondary",t.DESTRUCTIVE="destructive"}(qa||(qa={}));class Ua extends lt{static get widths(){return{small:"400px",medium:"600px",large:"655px"}}static get styles(){return r`
|
|
991
|
+
`}}var qa;t([ct({type:Number})],Ba.prototype,"maxLength",void 0),t([ct({type:Boolean})],Ba.prototype,"session",void 0),t([ct({type:Boolean})],Ba.prototype,"submitOnEnter",void 0),t([ct({type:Object})],Ba.prototype,"anchorPosition",void 0),t([ct({attribute:!1})],Ba.prototype,"currentFunction",void 0),t([ct({type:String})],Ba.prototype,"placeholder",void 0),t([ct({attribute:!1})],Ba.prototype,"textInputElement",void 0),t([ct({attribute:!1})],Ba.prototype,"anchorElement",void 0),t([ct({type:Array})],Ba.prototype,"options",void 0),t([ct({type:String})],Ba.prototype,"name",void 0),t([ct({type:String})],Ba.prototype,"value",void 0),t([ct({type:Boolean})],Ba.prototype,"textarea",void 0),t([ct({type:Boolean})],Ba.prototype,"gsm",void 0),t([ct({type:String})],Ba.prototype,"counter",void 0),t([ct({type:Boolean})],Ba.prototype,"autogrow",void 0),function(t){t.PRIMARY="primary",t.SECONDARY="secondary",t.DESTRUCTIVE="destructive"}(qa||(qa={}));class Ua extends lt{static get widths(){return{small:"400px",medium:"600px",large:"655px"}}static get styles(){return r`
|
|
990
992
|
:host {
|
|
991
993
|
position: absolute;
|
|
992
994
|
z-index: 10000;
|
|
@@ -5922,13 +5924,27 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
|
|
|
5922
5924
|
color: rgba(250, 0, 0, 0.75);
|
|
5923
5925
|
font-size: var(--help-text-size);
|
|
5924
5926
|
}
|
|
5925
|
-
|
|
5927
|
+
|
|
5928
|
+
.language {
|
|
5929
|
+
margin-bottom: 0.6em;
|
|
5930
|
+
display: block;
|
|
5931
|
+
}
|
|
5932
|
+
`}constructor(){super(),this.maxAttachments=3,this.maxLength=640,this.currentText="",this.initialText="",this.accept="",this.endpoint=Jt,this.languages=[],this.currentAttachments=[],this.failedAttachments=[],this.buttonName="Send",this.buttonDisabled=!0,this.buttonError="",this.langValues={},this.currentLanguage="und"}firstUpdated(t){super.firstUpdated(t),t.has("languages")&&this.languages.length>0&&(this.currentLanguage=this.languages[0].iso),t.has("value")&&(this.langValues=this.getDeserializedValue()||{}),this.setFocusOnChatbox()}updated(t){if(super.updated(t),t.has("currentLanguage")&&this.langValues){let t={text:"",attachments:[]};this.currentLanguage in this.langValues&&(t=this.langValues[this.currentLanguage]),this.currentText=t.text,this.initialText=t.text,this.currentAttachments=t.attachments,this.setFocusOnChatbox();const e=this.shadowRoot.querySelector(".chatbox");e&&(e.value=this.initialText)}if(this.langValues&&(t.has("currentText")||t.has("currentAttachments"))){this.toggleButton();const t=this.currentText?this.currentText.trim():"";t||this.currentAttachments.length>0?(this.langValues[this.currentLanguage]={text:t,attachments:this.currentAttachments},this.fireCustomEvent(Ee.ContentChanged,this.langValues)):delete this.langValues[this.currentLanguage],this.requestUpdate("langValues"),this.setValue(this.langValues)}}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}handleDragEnter(t){this.highlight(t)}handleDragOver(t){this.highlight(t)}handleDragLeave(t){this.unhighlight(t)}handleDrop(t){if(this.canAcceptAttachments()){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.canAcceptAttachments()&&(this.pendingDrop=!0,this.preventDefaults(t))}unhighlight(t){this.canAcceptAttachments()&&(this.pendingDrop=!1,this.preventDefaults(t))}handleUploadFileIconClicked(){this.dispatchEvent(new Event("change"))}handleUploadFileInputChanged(t){const e=t.target.files;this.uploadFiles(e)}canAcceptAttachments(){return this.attachments&&this.currentAttachments.length<this.maxAttachments}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((e=>{if(this.currentAttachments.length>=this.maxAttachments)this.addFailedAttachment(t,"Too many attachments");else{const t=e.json;t&&this.addCurrentAttachment(t)}})).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})}}handleLanguageChange(t){const e=t.target;this.currentLanguage=e.values[0].iso}render(){return D`
|
|
5926
5933
|
<temba-field
|
|
5927
5934
|
name=${this.name}
|
|
5928
5935
|
.errors=${this.errors}
|
|
5929
5936
|
.widgetOnly=${this.widgetOnly}
|
|
5930
|
-
value=${this.value}
|
|
5937
|
+
.value=${this.value}
|
|
5931
5938
|
>
|
|
5939
|
+
${this.languages.length>1?D`<temba-select
|
|
5940
|
+
@change=${this.handleLanguageChange}
|
|
5941
|
+
class="language"
|
|
5942
|
+
name="language"
|
|
5943
|
+
.staticOptions=${this.languages}
|
|
5944
|
+
valueKey="iso"
|
|
5945
|
+
>
|
|
5946
|
+
</temba-select>`:null}
|
|
5947
|
+
|
|
5932
5948
|
<div
|
|
5933
5949
|
class=${ee({container:!0,highlight:this.pendingDrop})}
|
|
5934
5950
|
@click="${this.handleContainerClick}"
|
|
@@ -5946,22 +5962,24 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
|
|
|
5946
5962
|
<div class="items actions">${this.getActions()}</div>
|
|
5947
5963
|
</div>
|
|
5948
5964
|
</temba-field>
|
|
5949
|
-
`}getChatbox(){return this.completion?D
|
|
5965
|
+
`}getChatbox(){return this.completion?D`<temba-completion
|
|
5950
5966
|
class="chatbox"
|
|
5951
|
-
value=${this.initialText}
|
|
5967
|
+
.value=${this.initialText}
|
|
5952
5968
|
gsm
|
|
5953
5969
|
textarea
|
|
5954
5970
|
autogrow
|
|
5971
|
+
maxlength=${this.maxLength}
|
|
5955
5972
|
@change=${this.handleChatboxChange}
|
|
5956
5973
|
@keydown=${this.handleSendEnter}
|
|
5957
5974
|
placeholder="Write something here"
|
|
5958
5975
|
>
|
|
5959
|
-
</temba-completion>`:D
|
|
5976
|
+
</temba-completion>`:D`<temba-textinput
|
|
5960
5977
|
class="chatbox"
|
|
5961
5978
|
gsm
|
|
5962
5979
|
textarea
|
|
5963
5980
|
autogrow
|
|
5964
|
-
|
|
5981
|
+
maxlength=${this.maxLength}
|
|
5982
|
+
.value=${this.initialText}
|
|
5965
5983
|
@change=${this.handleChatboxChange}
|
|
5966
5984
|
@keydown=${this.handleSendEnter}
|
|
5967
5985
|
placeholder="Write something here"
|
|
@@ -6008,7 +6026,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
|
|
|
6008
6026
|
</div>`:null}
|
|
6009
6027
|
`}getActions(){return D`
|
|
6010
6028
|
<div class="actions-left">
|
|
6011
|
-
${this.
|
|
6029
|
+
${this.canAcceptAttachments()?this.getUploader():null}
|
|
6012
6030
|
</div>
|
|
6013
6031
|
<div class="actions-center"></div>
|
|
6014
6032
|
<div class="actions-right">
|
|
@@ -6042,7 +6060,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
|
|
|
6042
6060
|
name=${this.buttonName}
|
|
6043
6061
|
@click=${this.handleSendClick}
|
|
6044
6062
|
?disabled=${this.buttonDisabled}
|
|
6045
|
-
></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,"
|
|
6063
|
+
></temba-button>`}}t([ct({type:Number})],lh.prototype,"maxAttachments",void 0),t([ct({type:Number})],lh.prototype,"maxLength",void 0),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,"languages",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:Object})],lh.prototype,"langValues",void 0),t([ct({type:String})],lh.prototype,"currentLanguage",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`
|
|
6046
6064
|
:host {
|
|
6047
6065
|
position: absolute;
|
|
6048
6066
|
}
|
package/dist/index.js
CHANGED
|
@@ -171,7 +171,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
|
|
|
171
171
|
.grow-wrap textarea {
|
|
172
172
|
margin-left: -100%;
|
|
173
173
|
}
|
|
174
|
-
`}constructor(){super(),this.placeholder="",this.loading=!0,this.submitOnEnter=!0,this.autogrow=!1,this.counterElement=null,this.cursorStart=-1,this.cursorEnd=-1}firstUpdated(t){if(super.firstUpdated(t),this.inputElement=this.shadowRoot.querySelector(".textinput"),t.has("counter")){let t=this.getParentModax();t&&(t=t.shadowRoot),t||(t=document),this.counterElement=t.querySelector(this.counter),this.counterElement.text=this.value}}updated(t){if(super.updated(t),t.has("value")){if(this.fireEvent("change"),this.textarea&&this.autogrow){this.shadowRoot.querySelector(".grow-wrap > div").innerText=this.value+String.fromCharCode(10)}this.cursorStart>-1&&this.cursorEnd>-1&&(this.inputElement.setSelectionRange(this.cursorStart,this.cursorEnd),this.cursorStart=-1,this.cursorEnd=-1)}}getDisplayValue(){return this.inputElement.value}handleClear(t){t.stopPropagation(),t.preventDefault(),this.value=null}updateValue(t){const e=this.inputElement.selectionStart,i=this.inputElement.selectionEnd,n=this.sanitizeGSM(t);n!==t&&(this.cursorStart=e,this.cursorEnd=i),this.value=n,this.textarea&&(this.inputElement.value=this.value),this.counterElement&&(this.counterElement.text=t)}sanitizeGSM(t){return this.gsm?(t=>t?t.replace(/[\u2018\u2019]/g,"'").replace(/[\u201C\u201D]/g,'"').replace(/[\u2013\u2014]/g,"-").replace(/\u2026/g,"...").replace(/\u2002/g," "):t)(t):t}handleChange(t){this.disabled||(this.updateValue(t.target.value),this.fireEvent("change"))}handleContainerClick(){this.disabled||this.inputElement&&this.inputElement.click()}handleContainerFocus(){this.disabled||this.inputElement&&this.inputElement.focus()}handleInput(t){this.disabled||(this.updateValue(t.target.value),this.fireEvent("input"))}serializeValue(t){return t}getParentModax(){let t=this;for(;t;){if(t=t.parentElement?t.parentElement:t.getRootNode().host,!t)return null;if("TEMBA-MODAX"==t.tagName)return t}}getParentForm(){let t=this;for(;t;){if(t=t.parentElement?t.parentElement:t.getRootNode().host,!t)return null;if("FORM"===t.tagName)return t}}click(){super.click(),this.handleContainerClick()}focus(){super.focus(),this.handleContainerFocus()}render(){const t={height:""+(this.textarea?"100%":"auto")},e=this.clearable&&this.inputElement&&this.inputElement.value?D`<temba-icon
|
|
174
|
+
`}constructor(){super(),this.placeholder="",this.loading=!0,this.submitOnEnter=!0,this.autogrow=!1,this.counterElement=null,this.cursorStart=-1,this.cursorEnd=-1}firstUpdated(t){if(super.firstUpdated(t),this.inputElement=this.shadowRoot.querySelector(".textinput"),t.has("counter")){let t=this.getParentModax();t&&(t=t.shadowRoot),t||(t=document),this.counterElement=t.querySelector(this.counter),this.counterElement.text=this.value}}updated(t){if(super.updated(t),t.has("value")){if(this.fireEvent("change"),this.textarea&&this.autogrow){this.shadowRoot.querySelector(".grow-wrap > div").innerText=this.value+String.fromCharCode(10)}this.cursorStart>-1&&this.cursorEnd>-1&&(this.inputElement.setSelectionRange(this.cursorStart,this.cursorEnd),this.cursorStart=-1,this.cursorEnd=-1)}}getDisplayValue(){return this.inputElement.value}handleClear(t){t.stopPropagation(),t.preventDefault(),this.value=null}updateValue(t){const e=this.inputElement.selectionStart,i=this.inputElement.selectionEnd,n=this.sanitizeGSM(t);n!==t&&(this.cursorStart=e,this.cursorEnd=i),this.value=n,this.textarea&&(this.inputElement.value=this.value),this.counterElement&&(this.counterElement.text=t)}sanitizeGSM(t){return this.gsm?(t=>t?t.replace(/[\u2018\u2019]/g,"'").replace(/[\u201C\u201D]/g,'"').replace(/[\u2013\u2014]/g,"-").replace(/\u2026/g,"...").replace(/\u2002/g," "):t)(t):t}handleChange(t){this.disabled||(this.updateValue(t.target.value),this.fireEvent("change"))}handleContainerClick(){this.disabled||this.inputElement&&this.inputElement.click()}handleContainerFocus(){this.disabled||this.inputElement&&(this.inputElement.focus(),this.inputElement.setSelectionRange(this.value.length,this.value.length))}handleInput(t){this.disabled||(this.updateValue(t.target.value),this.fireEvent("input"))}serializeValue(t){return t}getParentModax(){let t=this;for(;t;){if(t=t.parentElement?t.parentElement:t.getRootNode().host,!t)return null;if("TEMBA-MODAX"==t.tagName)return t}}getParentForm(){let t=this;for(;t;){if(t=t.parentElement?t.parentElement:t.getRootNode().host,!t)return null;if("FORM"===t.tagName)return t}}click(){super.click(),this.handleContainerClick()}focus(){super.focus(),this.handleContainerFocus()}render(){const t={height:""+(this.textarea?"100%":"auto")},e=this.clearable&&this.inputElement&&this.inputElement.value?D`<temba-icon
|
|
175
175
|
name="x"
|
|
176
176
|
class="clear-icon"
|
|
177
177
|
@click=${this.handleClear}
|
|
@@ -193,6 +193,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
|
|
|
193
193
|
<textarea
|
|
194
194
|
class="textinput"
|
|
195
195
|
name=${this.name}
|
|
196
|
+
maxlength="${ft(this.maxlength)}"
|
|
196
197
|
placeholder=${this.placeholder}
|
|
197
198
|
@change=${this.handleChange}
|
|
198
199
|
@input=${this.handleInput}
|
|
@@ -766,7 +767,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
|
|
|
766
767
|
style="margin-right:0.5em;"
|
|
767
768
|
></temba-icon>`:null}<span>${this.getName(t)}</span>
|
|
768
769
|
</div>
|
|
769
|
-
`:null}serializeValue(t){return!this.jsonValue&&(this.staticOptions.length>0||this.tags)?t.value:super.serializeValue(t)}setSelection(t){for(const e of this.staticOptions)if(e.value===t)return void(0!==this.values.length&&this.values[0].value===""+t||this.setValues([e]))}handleClear(t){t.preventDefault(),t.stopPropagation(),this.setValues([])}setValues(t){this.values=t,this.requestUpdate("values")}addValue(t){this.values.push(t),this.requestUpdate("values")}removeValue(t){const e=this.values.indexOf(t);e>-1&&this.values.splice(e,1),this.requestUpdate("values")}popValue(){this.values.pop(),this.requestUpdate("values")}clear(){this.values=[],this.requestUpdate("values")}render(){const t=0===this.values.length?this.placeholder:"",e=D`
|
|
770
|
+
`:null}serializeValue(t){return!this.jsonValue&&(this.staticOptions.length>0||this.tags)?t.value:super.serializeValue(t)}setSelection(t){for(const e of this.staticOptions)if(this.getValue(e.value)===t)return void(0!==this.values.length&&this.values[0].value===""+t||this.setValues([e]))}handleClear(t){t.preventDefault(),t.stopPropagation(),this.setValues([])}setValues(t){this.values=t,this.requestUpdate("values")}addValue(t){this.values.push(t),this.requestUpdate("values")}removeValue(t){const e=this.values.indexOf(t);e>-1&&this.values.splice(e,1),this.requestUpdate("values")}popValue(){this.values.pop(),this.requestUpdate("values")}clear(){this.values=[],this.requestUpdate("values")}render(){const t=0===this.values.length?this.placeholder:"",e=D`
|
|
770
771
|
<div class="placeholder">${t}</div>
|
|
771
772
|
`,i=this.clearable&&this.values.length>0&&!this.multi?D`<temba-icon
|
|
772
773
|
name="${pt.select_clear}"
|
|
@@ -889,7 +890,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
|
|
|
889
890
|
|
|
890
891
|
</temba-field>
|
|
891
892
|
|
|
892
|
-
`}}t([ct({type:Boolean})],Ra.prototype,"multi",void 0),t([ct({type:Boolean})],Ra.prototype,"searchOnFocus",void 0),t([ct({type:String})],Ra.prototype,"placeholder",void 0),t([ct()],Ra.prototype,"name",void 0),t([ct()],Ra.prototype,"endpoint",void 0),t([ct({type:String})],Ra.prototype,"nameKey",void 0),t([ct({type:String})],Ra.prototype,"valueKey",void 0),t([ct({attribute:!1})],Ra.prototype,"currentFunction",void 0),t([ct({type:String})],Ra.prototype,"queryParam",void 0),t([ct({type:String})],Ra.prototype,"input",void 0),t([ct({type:Array})],Ra.prototype,"visibleOptions",void 0),t([ct({type:Array})],Ra.prototype,"completionOptions",void 0),t([ct({type:Number})],Ra.prototype,"quietMillis",void 0),t([ct({type:Boolean})],Ra.prototype,"fetching",void 0),t([ct({type:Boolean})],Ra.prototype,"searchable",void 0),t([ct({type:String})],Ra.prototype,"expressions",void 0),t([ct({type:Boolean})],Ra.prototype,"cache",void 0),t([ct({type:String})],Ra.prototype,"cacheKey",void 0),t([ct({type:Boolean})],Ra.prototype,"focused",void 0),t([ct({type:Boolean})],Ra.prototype,"disabled",void 0),t([ct({attribute:!1})],Ra.prototype,"selectedIndex",void 0),t([ct({type:Number})],Ra.prototype,"cursorIndex",void 0),t([ct({attribute:!1})],Ra.prototype,"anchorElement",void 0),t([ct({attribute:!1})],Ra.prototype,"anchorExpressions",void 0),t([ct({type:Object})],Ra.prototype,"anchorPosition",void 0),t([ct({type:Boolean})],Ra.prototype,"tags",void 0),t([ct({type:Boolean,attribute:"space_select"})],Ra.prototype,"spaceSelect",void 0),t([ct({type:Boolean})],Ra.prototype,"jsonValue",void 0),t([ct({type:Boolean})],Ra.prototype,"hideErrors",void 0),t([ct({type:Boolean})],Ra.prototype,"clearable",void 0),t([ct({type:String})],Ra.prototype,"flavor",void 0),t([ct({type:String,attribute:"info_text"})],Ra.prototype,"infoText",void 0),t([ct({type:Array})],Ra.prototype,"values",void 0),t([ct({type:Object})],Ra.prototype,"selection",void 0),t([ct({attribute:!1})],Ra.prototype,"getName",void 0),t([ct({attribute:!1})],Ra.prototype,"isMatch",void 0),t([ct({attribute:!1})],Ra.prototype,"getValue",void 0),t([ct({type:Number,attribute:"option-width"})],Ra.prototype,"optionWidth",void 0),t([ct({type:Boolean,attribute:"anchor-right"})],Ra.prototype,"anchorRight",void 0),t([ct({attribute:!1})],Ra.prototype,"shouldExclude",void 0),t([ct({attribute:!1})],Ra.prototype,"sortFunction",void 0),t([ct({attribute:!1})],Ra.prototype,"renderOption",void 0),t([ct({attribute:!1})],Ra.prototype,"renderOptionName",void 0),t([ct({attribute:!1})],Ra.prototype,"renderOptionDetail",void 0),t([ct({attribute:!1})],Ra.prototype,"renderSelectedItem",void 0),t([ct({attribute:!1})],Ra.prototype,"createArbitraryOption",void 0),t([ct({attribute:!1})],Ra.prototype,"getOptions",void 0),t([ct({attribute:!1})],Ra.prototype,"isComplete",void 0),t([ct({type:Array,attribute:"options"})],Ra.prototype,"staticOptions",void 0);class Ba extends ut{constructor(){super(...arguments),this.submitOnEnter=!1,this.anchorPosition={left:0,top:0},this.placeholder="",this.options=[],this.name="",this.value="",this.autogrow=!1}static get styles(){return r`
|
|
893
|
+
`}}t([ct({type:Boolean})],Ra.prototype,"multi",void 0),t([ct({type:Boolean})],Ra.prototype,"searchOnFocus",void 0),t([ct({type:String})],Ra.prototype,"placeholder",void 0),t([ct()],Ra.prototype,"name",void 0),t([ct()],Ra.prototype,"endpoint",void 0),t([ct({type:String})],Ra.prototype,"nameKey",void 0),t([ct({type:String})],Ra.prototype,"valueKey",void 0),t([ct({attribute:!1})],Ra.prototype,"currentFunction",void 0),t([ct({type:String})],Ra.prototype,"queryParam",void 0),t([ct({type:String})],Ra.prototype,"input",void 0),t([ct({type:Array})],Ra.prototype,"visibleOptions",void 0),t([ct({type:Array})],Ra.prototype,"completionOptions",void 0),t([ct({type:Number})],Ra.prototype,"quietMillis",void 0),t([ct({type:Boolean})],Ra.prototype,"fetching",void 0),t([ct({type:Boolean})],Ra.prototype,"searchable",void 0),t([ct({type:String})],Ra.prototype,"expressions",void 0),t([ct({type:Boolean})],Ra.prototype,"cache",void 0),t([ct({type:String})],Ra.prototype,"cacheKey",void 0),t([ct({type:Boolean})],Ra.prototype,"focused",void 0),t([ct({type:Boolean})],Ra.prototype,"disabled",void 0),t([ct({attribute:!1})],Ra.prototype,"selectedIndex",void 0),t([ct({type:Number})],Ra.prototype,"cursorIndex",void 0),t([ct({attribute:!1})],Ra.prototype,"anchorElement",void 0),t([ct({attribute:!1})],Ra.prototype,"anchorExpressions",void 0),t([ct({type:Object})],Ra.prototype,"anchorPosition",void 0),t([ct({type:Boolean})],Ra.prototype,"tags",void 0),t([ct({type:Boolean,attribute:"space_select"})],Ra.prototype,"spaceSelect",void 0),t([ct({type:Boolean})],Ra.prototype,"jsonValue",void 0),t([ct({type:Boolean})],Ra.prototype,"hideErrors",void 0),t([ct({type:Boolean})],Ra.prototype,"clearable",void 0),t([ct({type:String})],Ra.prototype,"flavor",void 0),t([ct({type:String,attribute:"info_text"})],Ra.prototype,"infoText",void 0),t([ct({type:Array})],Ra.prototype,"values",void 0),t([ct({type:Object})],Ra.prototype,"selection",void 0),t([ct({attribute:!1})],Ra.prototype,"getName",void 0),t([ct({attribute:!1})],Ra.prototype,"isMatch",void 0),t([ct({attribute:!1})],Ra.prototype,"getValue",void 0),t([ct({type:Number,attribute:"option-width"})],Ra.prototype,"optionWidth",void 0),t([ct({type:Boolean,attribute:"anchor-right"})],Ra.prototype,"anchorRight",void 0),t([ct({attribute:!1})],Ra.prototype,"shouldExclude",void 0),t([ct({attribute:!1})],Ra.prototype,"sortFunction",void 0),t([ct({attribute:!1})],Ra.prototype,"renderOption",void 0),t([ct({attribute:!1})],Ra.prototype,"renderOptionName",void 0),t([ct({attribute:!1})],Ra.prototype,"renderOptionDetail",void 0),t([ct({attribute:!1})],Ra.prototype,"renderSelectedItem",void 0),t([ct({attribute:!1})],Ra.prototype,"createArbitraryOption",void 0),t([ct({attribute:!1})],Ra.prototype,"getOptions",void 0),t([ct({attribute:!1})],Ra.prototype,"isComplete",void 0),t([ct({type:Array,attribute:"options"})],Ra.prototype,"staticOptions",void 0);class Ba extends ut{constructor(){super(...arguments),this.maxLength=10,this.submitOnEnter=!1,this.anchorPosition={left:0,top:0},this.placeholder="",this.options=[],this.name="",this.value="",this.autogrow=!1}static get styles(){return r`
|
|
893
894
|
:host {
|
|
894
895
|
display: block;
|
|
895
896
|
}
|
|
@@ -963,6 +964,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
|
|
|
963
964
|
@click=${this.handleClick}
|
|
964
965
|
@input=${this.handleInput}
|
|
965
966
|
@blur=${this.handleOptionCanceled}
|
|
967
|
+
maxlength=${this.maxLength}
|
|
966
968
|
.value=${this.value}
|
|
967
969
|
?autogrow=${this.autogrow}
|
|
968
970
|
?textarea=${this.textarea}
|
|
@@ -986,7 +988,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
|
|
|
986
988
|
</temba-options>
|
|
987
989
|
</div>
|
|
988
990
|
</temba-field>
|
|
989
|
-
`}}var qa;t([ct({type:Boolean})],Ba.prototype,"session",void 0),t([ct({type:Boolean})],Ba.prototype,"submitOnEnter",void 0),t([ct({type:Object})],Ba.prototype,"anchorPosition",void 0),t([ct({attribute:!1})],Ba.prototype,"currentFunction",void 0),t([ct({type:String})],Ba.prototype,"placeholder",void 0),t([ct({attribute:!1})],Ba.prototype,"textInputElement",void 0),t([ct({attribute:!1})],Ba.prototype,"anchorElement",void 0),t([ct({type:Array})],Ba.prototype,"options",void 0),t([ct({type:String})],Ba.prototype,"name",void 0),t([ct({type:String})],Ba.prototype,"value",void 0),t([ct({type:Boolean})],Ba.prototype,"textarea",void 0),t([ct({type:Boolean})],Ba.prototype,"gsm",void 0),t([ct({type:String})],Ba.prototype,"counter",void 0),t([ct({type:Boolean})],Ba.prototype,"autogrow",void 0),function(t){t.PRIMARY="primary",t.SECONDARY="secondary",t.DESTRUCTIVE="destructive"}(qa||(qa={}));class Ua extends lt{static get widths(){return{small:"400px",medium:"600px",large:"655px"}}static get styles(){return r`
|
|
991
|
+
`}}var qa;t([ct({type:Number})],Ba.prototype,"maxLength",void 0),t([ct({type:Boolean})],Ba.prototype,"session",void 0),t([ct({type:Boolean})],Ba.prototype,"submitOnEnter",void 0),t([ct({type:Object})],Ba.prototype,"anchorPosition",void 0),t([ct({attribute:!1})],Ba.prototype,"currentFunction",void 0),t([ct({type:String})],Ba.prototype,"placeholder",void 0),t([ct({attribute:!1})],Ba.prototype,"textInputElement",void 0),t([ct({attribute:!1})],Ba.prototype,"anchorElement",void 0),t([ct({type:Array})],Ba.prototype,"options",void 0),t([ct({type:String})],Ba.prototype,"name",void 0),t([ct({type:String})],Ba.prototype,"value",void 0),t([ct({type:Boolean})],Ba.prototype,"textarea",void 0),t([ct({type:Boolean})],Ba.prototype,"gsm",void 0),t([ct({type:String})],Ba.prototype,"counter",void 0),t([ct({type:Boolean})],Ba.prototype,"autogrow",void 0),function(t){t.PRIMARY="primary",t.SECONDARY="secondary",t.DESTRUCTIVE="destructive"}(qa||(qa={}));class Ua extends lt{static get widths(){return{small:"400px",medium:"600px",large:"655px"}}static get styles(){return r`
|
|
990
992
|
:host {
|
|
991
993
|
position: absolute;
|
|
992
994
|
z-index: 10000;
|
|
@@ -5922,13 +5924,27 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
|
|
|
5922
5924
|
color: rgba(250, 0, 0, 0.75);
|
|
5923
5925
|
font-size: var(--help-text-size);
|
|
5924
5926
|
}
|
|
5925
|
-
|
|
5927
|
+
|
|
5928
|
+
.language {
|
|
5929
|
+
margin-bottom: 0.6em;
|
|
5930
|
+
display: block;
|
|
5931
|
+
}
|
|
5932
|
+
`}constructor(){super(),this.maxAttachments=3,this.maxLength=640,this.currentText="",this.initialText="",this.accept="",this.endpoint=Jt,this.languages=[],this.currentAttachments=[],this.failedAttachments=[],this.buttonName="Send",this.buttonDisabled=!0,this.buttonError="",this.langValues={},this.currentLanguage="und"}firstUpdated(t){super.firstUpdated(t),t.has("languages")&&this.languages.length>0&&(this.currentLanguage=this.languages[0].iso),t.has("value")&&(this.langValues=this.getDeserializedValue()||{}),this.setFocusOnChatbox()}updated(t){if(super.updated(t),t.has("currentLanguage")&&this.langValues){let t={text:"",attachments:[]};this.currentLanguage in this.langValues&&(t=this.langValues[this.currentLanguage]),this.currentText=t.text,this.initialText=t.text,this.currentAttachments=t.attachments,this.setFocusOnChatbox();const e=this.shadowRoot.querySelector(".chatbox");e&&(e.value=this.initialText)}if(this.langValues&&(t.has("currentText")||t.has("currentAttachments"))){this.toggleButton();const t=this.currentText?this.currentText.trim():"";t||this.currentAttachments.length>0?(this.langValues[this.currentLanguage]={text:t,attachments:this.currentAttachments},this.fireCustomEvent(Ee.ContentChanged,this.langValues)):delete this.langValues[this.currentLanguage],this.requestUpdate("langValues"),this.setValue(this.langValues)}}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}handleDragEnter(t){this.highlight(t)}handleDragOver(t){this.highlight(t)}handleDragLeave(t){this.unhighlight(t)}handleDrop(t){if(this.canAcceptAttachments()){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.canAcceptAttachments()&&(this.pendingDrop=!0,this.preventDefaults(t))}unhighlight(t){this.canAcceptAttachments()&&(this.pendingDrop=!1,this.preventDefaults(t))}handleUploadFileIconClicked(){this.dispatchEvent(new Event("change"))}handleUploadFileInputChanged(t){const e=t.target.files;this.uploadFiles(e)}canAcceptAttachments(){return this.attachments&&this.currentAttachments.length<this.maxAttachments}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((e=>{if(this.currentAttachments.length>=this.maxAttachments)this.addFailedAttachment(t,"Too many attachments");else{const t=e.json;t&&this.addCurrentAttachment(t)}})).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})}}handleLanguageChange(t){const e=t.target;this.currentLanguage=e.values[0].iso}render(){return D`
|
|
5926
5933
|
<temba-field
|
|
5927
5934
|
name=${this.name}
|
|
5928
5935
|
.errors=${this.errors}
|
|
5929
5936
|
.widgetOnly=${this.widgetOnly}
|
|
5930
|
-
value=${this.value}
|
|
5937
|
+
.value=${this.value}
|
|
5931
5938
|
>
|
|
5939
|
+
${this.languages.length>1?D`<temba-select
|
|
5940
|
+
@change=${this.handleLanguageChange}
|
|
5941
|
+
class="language"
|
|
5942
|
+
name="language"
|
|
5943
|
+
.staticOptions=${this.languages}
|
|
5944
|
+
valueKey="iso"
|
|
5945
|
+
>
|
|
5946
|
+
</temba-select>`:null}
|
|
5947
|
+
|
|
5932
5948
|
<div
|
|
5933
5949
|
class=${ee({container:!0,highlight:this.pendingDrop})}
|
|
5934
5950
|
@click="${this.handleContainerClick}"
|
|
@@ -5946,22 +5962,24 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
|
|
|
5946
5962
|
<div class="items actions">${this.getActions()}</div>
|
|
5947
5963
|
</div>
|
|
5948
5964
|
</temba-field>
|
|
5949
|
-
`}getChatbox(){return this.completion?D
|
|
5965
|
+
`}getChatbox(){return this.completion?D`<temba-completion
|
|
5950
5966
|
class="chatbox"
|
|
5951
|
-
value=${this.initialText}
|
|
5967
|
+
.value=${this.initialText}
|
|
5952
5968
|
gsm
|
|
5953
5969
|
textarea
|
|
5954
5970
|
autogrow
|
|
5971
|
+
maxlength=${this.maxLength}
|
|
5955
5972
|
@change=${this.handleChatboxChange}
|
|
5956
5973
|
@keydown=${this.handleSendEnter}
|
|
5957
5974
|
placeholder="Write something here"
|
|
5958
5975
|
>
|
|
5959
|
-
</temba-completion>`:D
|
|
5976
|
+
</temba-completion>`:D`<temba-textinput
|
|
5960
5977
|
class="chatbox"
|
|
5961
5978
|
gsm
|
|
5962
5979
|
textarea
|
|
5963
5980
|
autogrow
|
|
5964
|
-
|
|
5981
|
+
maxlength=${this.maxLength}
|
|
5982
|
+
.value=${this.initialText}
|
|
5965
5983
|
@change=${this.handleChatboxChange}
|
|
5966
5984
|
@keydown=${this.handleSendEnter}
|
|
5967
5985
|
placeholder="Write something here"
|
|
@@ -6008,7 +6026,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
|
|
|
6008
6026
|
</div>`:null}
|
|
6009
6027
|
`}getActions(){return D`
|
|
6010
6028
|
<div class="actions-left">
|
|
6011
|
-
${this.
|
|
6029
|
+
${this.canAcceptAttachments()?this.getUploader():null}
|
|
6012
6030
|
</div>
|
|
6013
6031
|
<div class="actions-center"></div>
|
|
6014
6032
|
<div class="actions-right">
|
|
@@ -6042,7 +6060,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
|
|
|
6042
6060
|
name=${this.buttonName}
|
|
6043
6061
|
@click=${this.handleSendClick}
|
|
6044
6062
|
?disabled=${this.buttonDisabled}
|
|
6045
|
-
></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,"
|
|
6063
|
+
></temba-button>`}}t([ct({type:Number})],lh.prototype,"maxAttachments",void 0),t([ct({type:Number})],lh.prototype,"maxLength",void 0),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,"languages",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:Object})],lh.prototype,"langValues",void 0),t([ct({type:String})],lh.prototype,"currentLanguage",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`
|
|
6046
6064
|
:host {
|
|
6047
6065
|
position: absolute;
|
|
6048
6066
|
}
|
package/dist/sw.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
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
|
|
1
|
+
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:"5ca3af22.js",revision:"7a64c6765fa1af9fe3c5ce99618b381b"},{url:"templates/components-body.html",revision:"e4801b1ab09d2a3763eb83a75c4f2ac1"},{url:"templates/components-head.html",revision:"5b9f34d113d9af7abfee5540956c4bf4"}],{}),e.registerRoute(new e.NavigationRoute(e.createHandlerBoundToURL("/index.html"))),e.registerRoute("polyfills/*.js",new e.CacheFirst,"GET")}));
|
|
2
2
|
//# sourceMappingURL=sw.js.map
|
package/dist/sw.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sw.js","sources":["../../tmp/
|
|
1
|
+
{"version":3,"file":"sw.js","sources":["../../tmp/8c49a83c721a22862579bc82e1db5e97/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\": \"5ca3af22.js\",\n \"revision\": \"7a64c6765fa1af9fe3c5ce99618b381b\"\n },\n {\n \"url\": \"templates/components-body.html\",\n \"revision\": \"e4801b1ab09d2a3763eb83a75c4f2ac1\"\n },\n {\n \"url\": \"templates/components-head.html\",\n \"revision\": \"5b9f34d113d9af7abfee5540956c4bf4\"\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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<script type="module" src="{{STATIC_URL}}@nyaruka/temba-components/dist/
|
|
1
|
+
<script type="module" src="{{STATIC_URL}}@nyaruka/temba-components/dist/5ca3af22.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.62.0"</script>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<link rel="modulepreload" href="{{STATIC_URL}}@nyaruka/temba-components/dist/
|
|
1
|
+
<link rel="modulepreload" href="{{STATIC_URL}}@nyaruka/temba-components/dist/5ca3af22.js" crossorigin="anonymous">
|
|
@@ -12,6 +12,7 @@ import { msg } from '@lit/localize';
|
|
|
12
12
|
export class Completion extends FormElement {
|
|
13
13
|
constructor() {
|
|
14
14
|
super(...arguments);
|
|
15
|
+
this.maxLength = 10;
|
|
15
16
|
this.submitOnEnter = false;
|
|
16
17
|
this.anchorPosition = { left: 0, top: 0 };
|
|
17
18
|
this.placeholder = '';
|
|
@@ -196,6 +197,7 @@ export class Completion extends FormElement {
|
|
|
196
197
|
@click=${this.handleClick}
|
|
197
198
|
@input=${this.handleInput}
|
|
198
199
|
@blur=${this.handleOptionCanceled}
|
|
200
|
+
maxlength=${this.maxLength}
|
|
199
201
|
.value=${this.value}
|
|
200
202
|
?autogrow=${this.autogrow}
|
|
201
203
|
?textarea=${this.textarea}
|
|
@@ -224,6 +226,9 @@ export class Completion extends FormElement {
|
|
|
224
226
|
`;
|
|
225
227
|
}
|
|
226
228
|
}
|
|
229
|
+
__decorate([
|
|
230
|
+
property({ type: Number })
|
|
231
|
+
], Completion.prototype, "maxLength", void 0);
|
|
227
232
|
__decorate([
|
|
228
233
|
property({ type: Boolean })
|
|
229
234
|
], Completion.prototype, "session", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Completion.js","sourceRoot":"","sources":["../../../src/completion/Completion.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, css, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { TextInput } from '../textinput/TextInput';\nimport {\n renderCompletionOption,\n updateInputElementWithCompletion,\n executeCompletionQuery,\n} from './helpers';\n\nimport { FormElement } from '../FormElement';\nimport { CompletionOption, Position } from '../interfaces';\nimport { Store } from '../store/Store';\nimport { styleMap } from 'lit-html/directives/style-map.js';\nimport { msg } from '@lit/localize';\n\n/**\n * Completion is a text input that handles excellent completion options in a popup\n */\nexport class Completion extends FormElement {\n static get styles() {\n return css`\n :host {\n display: block;\n }\n\n temba-options {\n --widget-box-shadow-focused: 0 0 4px rgba(0, 0, 0, 0.15);\n --color-focus: #e6e6e6;\n }\n\n .comp-container {\n position: relative;\n height: 100%;\n }\n\n #anchor {\n /* background: rgba(132, 40, 158, .1); */\n position: absolute;\n visibility: hidden;\n width: 250px;\n height: 20px;\n }\n\n .fn-marker {\n font-weight: bold;\n font-size: 42px;\n }\n\n .option-slot {\n background: #fff;\n }\n\n .current-fn {\n padding: 10px;\n margin: 5px;\n background: var(--color-primary-light);\n color: rgba(0, 0, 0, 0.5);\n border-radius: var(--curvature-widget);\n font-size: 90%;\n }\n\n .footer {\n padding: 5px 10px;\n background: var(--color-primary-light);\n color: rgba(0, 0, 0, 0.5);\n font-size: 80%;\n border-bottom-left-radius: var(--curvature-widget);\n border-bottom-right-radius: var(--curvature-widget);\n }\n\n code {\n background: rgba(0, 0, 0, 0.1);\n padding: 1px 5px;\n border-radius: var(--curvature);\n }\n `;\n }\n\n @property({ type: Boolean })\n session: boolean;\n\n @property({ type: Boolean })\n submitOnEnter = false;\n\n @property({ type: Object })\n anchorPosition: Position = { left: 0, top: 0 };\n\n @property({ attribute: false })\n currentFunction: CompletionOption;\n\n @property({ type: String })\n placeholder = '';\n\n @property({ attribute: false })\n textInputElement: TextInput;\n\n @property({ attribute: false })\n anchorElement: HTMLDivElement;\n\n @property({ type: Array })\n options: any[] = [];\n\n @property({ type: String })\n name = '';\n\n @property({ type: String })\n value = '';\n\n @property({ type: Boolean })\n textarea: boolean;\n\n @property({ type: Boolean })\n gsm: boolean;\n\n @property({ type: String })\n counter: string;\n\n @property({ type: Boolean })\n autogrow = false;\n\n private hiddenElement: HTMLInputElement;\n private query: string;\n\n public firstUpdated() {\n this.textInputElement = this.shadowRoot.querySelector(\n 'temba-textinput'\n ) as TextInput;\n this.anchorElement = this.shadowRoot.querySelector('#anchor');\n\n // create our hidden container so it gets included in our host element's form\n this.hiddenElement = document.createElement('input');\n this.hiddenElement.setAttribute('type', 'hidden');\n this.hiddenElement.setAttribute('name', this.getAttribute('name'));\n this.hiddenElement.setAttribute('value', this.getAttribute('value') || '');\n this.appendChild(this.hiddenElement);\n }\n\n private handleKeyUp(evt: KeyboardEvent) {\n // if we have options, ignore keys that are meant for them\n if (this.options && this.options.length > 0) {\n if (evt.key === 'ArrowUp' || evt.key === 'ArrowDown') {\n return;\n }\n\n if (evt.ctrlKey) {\n if (evt.key === 'n' || evt.key === 'p') {\n return;\n }\n }\n\n if (\n evt.key === 'Enter' ||\n evt.key === 'Escape' ||\n evt.key === 'Tab' ||\n evt.key.startsWith('Control')\n ) {\n evt.stopPropagation();\n evt.preventDefault();\n return;\n }\n\n this.executeQuery(evt.currentTarget as TextInput);\n }\n }\n\n public hasVisibleOptions() {\n return this.options.length > 0;\n }\n\n private executeQuery(ele: TextInput) {\n const store: Store = document.querySelector('temba-store');\n if (!ele.inputElement) {\n return;\n }\n const result = executeCompletionQuery(\n ele.inputElement,\n store,\n this.session\n );\n\n this.query = result.query;\n this.options = result.options;\n this.anchorPosition = result.anchorPosition;\n }\n\n private handleClick(evt: MouseEvent) {\n this.executeQuery(evt.currentTarget as TextInput);\n }\n\n public updated(changedProperties: Map<string, any>) {\n super.updated(changedProperties);\n\n // if our cursor changed, lets make sure our scrollbox is showing it\n if (changedProperties.has('value')) {\n this.hiddenElement.setAttribute('value', this.value);\n }\n }\n\n private handleInput(evt: KeyboardEvent) {\n const ele = evt.currentTarget as TextInput;\n this.executeQuery(ele);\n this.value = ele.inputElement.value;\n this.fireEvent('change');\n }\n\n private handleOptionCanceled() {\n // delay in case we are actively selecting\n window.setTimeout(() => {\n this.options = [];\n this.query = '';\n }, 100);\n }\n\n private handleOptionSelection(evt: CustomEvent) {\n const option = evt.detail.selected as CompletionOption;\n const tabbed = evt.detail.tabbed;\n\n updateInputElementWithCompletion(\n this.query,\n this.textInputElement.inputElement,\n option\n );\n this.query = '';\n this.options = [];\n\n if (tabbed) {\n this.executeQuery(this.textInputElement);\n }\n }\n\n public click() {\n super.click();\n const input = this.shadowRoot.querySelector('temba-textinput') as TextInput;\n if (input) {\n input.click();\n }\n }\n\n public focus() {\n super.focus();\n const input = this.shadowRoot.querySelector('temba-textinput') as TextInput;\n if (input) {\n input.focus();\n }\n }\n\n public render(): TemplateResult {\n const anchorStyles = this.anchorPosition\n ? {\n top: `${this.anchorPosition.top}px`,\n left: `${this.anchorPosition.left}px`,\n }\n : {};\n\n return html`\n <temba-field\n name=${this.name}\n .label=${this.label}\n .helpText=${this.helpText}\n .errors=${this.errors}\n .widgetOnly=${this.widgetOnly}\n >\n <div class=\"comp-container\">\n <div id=\"anchor\" style=${styleMap(anchorStyles)}></div>\n <temba-textinput\n name=${this.name}\n placeholder=${this.placeholder}\n gsm=${this.gsm}\n counter=${ifDefined(this.counter)}\n @keyup=${this.handleKeyUp}\n @click=${this.handleClick}\n @input=${this.handleInput}\n @blur=${this.handleOptionCanceled}\n .value=${this.value}\n ?autogrow=${this.autogrow}\n ?textarea=${this.textarea}\n ?submitOnEnter=${this.submitOnEnter}\n >\n </temba-textinput>\n <temba-options\n @temba-selection=${this.handleOptionSelection}\n @temba-canceled=${this.handleOptionCanceled}\n .renderOption=${renderCompletionOption}\n .anchorTo=${this.anchorElement}\n .options=${this.options}\n ?visible=${this.options && this.options.length > 0}\n >\n ${this.currentFunction\n ? html`\n <div class=\"current-fn\">\n ${renderCompletionOption(this.currentFunction, true)}\n </div>\n `\n : null}\n <div class=\"footer\">${msg('Tab to complete, enter to select')}</div>\n </temba-options>\n </div>\n </temba-field>\n `;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"Completion.js","sourceRoot":"","sources":["../../../src/completion/Completion.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, css, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { TextInput } from '../textinput/TextInput';\nimport {\n renderCompletionOption,\n updateInputElementWithCompletion,\n executeCompletionQuery,\n} from './helpers';\n\nimport { FormElement } from '../FormElement';\nimport { CompletionOption, Position } from '../interfaces';\nimport { Store } from '../store/Store';\nimport { styleMap } from 'lit-html/directives/style-map.js';\nimport { msg } from '@lit/localize';\n\n/**\n * Completion is a text input that handles excellent completion options in a popup\n */\nexport class Completion extends FormElement {\n static get styles() {\n return css`\n :host {\n display: block;\n }\n\n temba-options {\n --widget-box-shadow-focused: 0 0 4px rgba(0, 0, 0, 0.15);\n --color-focus: #e6e6e6;\n }\n\n .comp-container {\n position: relative;\n height: 100%;\n }\n\n #anchor {\n /* background: rgba(132, 40, 158, .1); */\n position: absolute;\n visibility: hidden;\n width: 250px;\n height: 20px;\n }\n\n .fn-marker {\n font-weight: bold;\n font-size: 42px;\n }\n\n .option-slot {\n background: #fff;\n }\n\n .current-fn {\n padding: 10px;\n margin: 5px;\n background: var(--color-primary-light);\n color: rgba(0, 0, 0, 0.5);\n border-radius: var(--curvature-widget);\n font-size: 90%;\n }\n\n .footer {\n padding: 5px 10px;\n background: var(--color-primary-light);\n color: rgba(0, 0, 0, 0.5);\n font-size: 80%;\n border-bottom-left-radius: var(--curvature-widget);\n border-bottom-right-radius: var(--curvature-widget);\n }\n\n code {\n background: rgba(0, 0, 0, 0.1);\n padding: 1px 5px;\n border-radius: var(--curvature);\n }\n `;\n }\n\n @property({ type: Number })\n maxLength = 10;\n\n @property({ type: Boolean })\n session: boolean;\n\n @property({ type: Boolean })\n submitOnEnter = false;\n\n @property({ type: Object })\n anchorPosition: Position = { left: 0, top: 0 };\n\n @property({ attribute: false })\n currentFunction: CompletionOption;\n\n @property({ type: String })\n placeholder = '';\n\n @property({ attribute: false })\n textInputElement: TextInput;\n\n @property({ attribute: false })\n anchorElement: HTMLDivElement;\n\n @property({ type: Array })\n options: any[] = [];\n\n @property({ type: String })\n name = '';\n\n @property({ type: String })\n value = '';\n\n @property({ type: Boolean })\n textarea: boolean;\n\n @property({ type: Boolean })\n gsm: boolean;\n\n @property({ type: String })\n counter: string;\n\n @property({ type: Boolean })\n autogrow = false;\n\n private hiddenElement: HTMLInputElement;\n private query: string;\n\n public firstUpdated() {\n this.textInputElement = this.shadowRoot.querySelector(\n 'temba-textinput'\n ) as TextInput;\n this.anchorElement = this.shadowRoot.querySelector('#anchor');\n\n // create our hidden container so it gets included in our host element's form\n this.hiddenElement = document.createElement('input');\n this.hiddenElement.setAttribute('type', 'hidden');\n this.hiddenElement.setAttribute('name', this.getAttribute('name'));\n this.hiddenElement.setAttribute('value', this.getAttribute('value') || '');\n this.appendChild(this.hiddenElement);\n }\n\n private handleKeyUp(evt: KeyboardEvent) {\n // if we have options, ignore keys that are meant for them\n if (this.options && this.options.length > 0) {\n if (evt.key === 'ArrowUp' || evt.key === 'ArrowDown') {\n return;\n }\n\n if (evt.ctrlKey) {\n if (evt.key === 'n' || evt.key === 'p') {\n return;\n }\n }\n\n if (\n evt.key === 'Enter' ||\n evt.key === 'Escape' ||\n evt.key === 'Tab' ||\n evt.key.startsWith('Control')\n ) {\n evt.stopPropagation();\n evt.preventDefault();\n return;\n }\n\n this.executeQuery(evt.currentTarget as TextInput);\n }\n }\n\n public hasVisibleOptions() {\n return this.options.length > 0;\n }\n\n private executeQuery(ele: TextInput) {\n const store: Store = document.querySelector('temba-store');\n if (!ele.inputElement) {\n return;\n }\n const result = executeCompletionQuery(\n ele.inputElement,\n store,\n this.session\n );\n\n this.query = result.query;\n this.options = result.options;\n this.anchorPosition = result.anchorPosition;\n }\n\n private handleClick(evt: MouseEvent) {\n this.executeQuery(evt.currentTarget as TextInput);\n }\n\n public updated(changedProperties: Map<string, any>) {\n super.updated(changedProperties);\n\n // if our cursor changed, lets make sure our scrollbox is showing it\n if (changedProperties.has('value')) {\n this.hiddenElement.setAttribute('value', this.value);\n }\n }\n\n private handleInput(evt: KeyboardEvent) {\n const ele = evt.currentTarget as TextInput;\n this.executeQuery(ele);\n this.value = ele.inputElement.value;\n this.fireEvent('change');\n }\n\n private handleOptionCanceled() {\n // delay in case we are actively selecting\n window.setTimeout(() => {\n this.options = [];\n this.query = '';\n }, 100);\n }\n\n private handleOptionSelection(evt: CustomEvent) {\n const option = evt.detail.selected as CompletionOption;\n const tabbed = evt.detail.tabbed;\n\n updateInputElementWithCompletion(\n this.query,\n this.textInputElement.inputElement,\n option\n );\n this.query = '';\n this.options = [];\n\n if (tabbed) {\n this.executeQuery(this.textInputElement);\n }\n }\n\n public click() {\n super.click();\n const input = this.shadowRoot.querySelector('temba-textinput') as TextInput;\n if (input) {\n input.click();\n }\n }\n\n public focus() {\n super.focus();\n const input = this.shadowRoot.querySelector('temba-textinput') as TextInput;\n if (input) {\n input.focus();\n }\n }\n\n public render(): TemplateResult {\n const anchorStyles = this.anchorPosition\n ? {\n top: `${this.anchorPosition.top}px`,\n left: `${this.anchorPosition.left}px`,\n }\n : {};\n\n return html`\n <temba-field\n name=${this.name}\n .label=${this.label}\n .helpText=${this.helpText}\n .errors=${this.errors}\n .widgetOnly=${this.widgetOnly}\n >\n <div class=\"comp-container\">\n <div id=\"anchor\" style=${styleMap(anchorStyles)}></div>\n <temba-textinput\n name=${this.name}\n placeholder=${this.placeholder}\n gsm=${this.gsm}\n counter=${ifDefined(this.counter)}\n @keyup=${this.handleKeyUp}\n @click=${this.handleClick}\n @input=${this.handleInput}\n @blur=${this.handleOptionCanceled}\n maxlength=${this.maxLength}\n .value=${this.value}\n ?autogrow=${this.autogrow}\n ?textarea=${this.textarea}\n ?submitOnEnter=${this.submitOnEnter}\n >\n </temba-textinput>\n <temba-options\n @temba-selection=${this.handleOptionSelection}\n @temba-canceled=${this.handleOptionCanceled}\n .renderOption=${renderCompletionOption}\n .anchorTo=${this.anchorElement}\n .options=${this.options}\n ?visible=${this.options && this.options.length > 0}\n >\n ${this.currentFunction\n ? html`\n <div class=\"current-fn\">\n ${renderCompletionOption(this.currentFunction, true)}\n </div>\n `\n : null}\n <div class=\"footer\">${msg('Tab to complete, enter to select')}</div>\n </temba-options>\n </div>\n </temba-field>\n `;\n }\n}\n"]}
|