@nyaruka/temba-components 0.41.7 → 0.42.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/CHANGELOG.md +9 -0
- package/demo/index.html +22 -0
- package/dist/{973a6cc2.js → f3b7c2f1.js} +397 -157
- package/dist/index.js +397 -157
- 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/button/Button.js +3 -3
- package/out-tsc/src/button/Button.js.map +1 -1
- package/out-tsc/src/charcount/CharCount.js +5 -4
- package/out-tsc/src/charcount/CharCount.js.map +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 +531 -0
- package/out-tsc/src/compose/Compose.js.map +1 -0
- package/out-tsc/src/contacts/ContactChat.js +73 -69
- package/out-tsc/src/contacts/ContactChat.js.map +1 -1
- package/out-tsc/src/contacts/ContactHistory.js +1 -1
- package/out-tsc/src/contacts/ContactHistory.js.map +1 -1
- package/out-tsc/src/contacts/events.js +1 -0
- package/out-tsc/src/contacts/events.js.map +1 -1
- package/out-tsc/src/interfaces.js +2 -0
- package/out-tsc/src/interfaces.js.map +1 -1
- package/out-tsc/src/textinput/TextInput.js +3 -1
- package/out-tsc/src/textinput/TextInput.js.map +1 -1
- package/out-tsc/src/utils/index.js +10 -0
- package/out-tsc/src/utils/index.js.map +1 -1
- package/out-tsc/src/vectoricon/index.js +1 -0
- package/out-tsc/src/vectoricon/index.js.map +1 -1
- package/out-tsc/temba-modules.js +2 -0
- package/out-tsc/temba-modules.js.map +1 -1
- package/out-tsc/test/temba-compose.test.js +432 -0
- package/out-tsc/test/temba-compose.test.js.map +1 -0
- package/out-tsc/test/temba-contact-chat.test.js +219 -47
- package/out-tsc/test/temba-contact-chat.test.js.map +1 -1
- package/out-tsc/test/temba-contact-history.test.js +7 -3
- package/out-tsc/test/temba-contact-history.test.js.map +1 -1
- package/out-tsc/test/utils.test.js +12 -8
- package/out-tsc/test/utils.test.js.map +1 -1
- package/package.json +1 -1
- package/screenshots/truth/compose/attachments-and-send-button.png +0 -0
- package/screenshots/truth/compose/attachments-no-send-button.png +0 -0
- package/screenshots/truth/compose/attachments-with-all-files-and-click-send.png +0 -0
- package/screenshots/truth/compose/attachments-with-all-files.png +0 -0
- package/screenshots/truth/compose/attachments-with-failure-files.png +0 -0
- package/screenshots/truth/compose/attachments-with-success-files-and-click-send.png +0 -0
- package/screenshots/truth/compose/attachments-with-success-files.png +0 -0
- package/screenshots/truth/compose/chatbox-attachments-counter-and-send-button.png +0 -0
- package/screenshots/truth/compose/chatbox-attachments-counter-no-send-button.png +0 -0
- package/screenshots/truth/compose/chatbox-attachments-no-counter-and-send-button.png +0 -0
- package/screenshots/truth/compose/chatbox-attachments-no-counter-no-send-button.png +0 -0
- package/screenshots/truth/compose/chatbox-counter-and-send-button.png +0 -0
- package/screenshots/truth/compose/chatbox-counter-no-send-button.png +0 -0
- package/screenshots/truth/compose/chatbox-no-counter-and-send-button.png +0 -0
- package/screenshots/truth/compose/chatbox-no-counter-no-send-button.png +0 -0
- package/screenshots/truth/compose/chatbox-no-text-attachments-with-all-files-and-click-send.png +0 -0
- package/screenshots/truth/compose/chatbox-no-text-attachments-with-all-files.png +0 -0
- package/screenshots/truth/compose/chatbox-no-text-attachments-with-failure-files.png +0 -0
- package/screenshots/truth/compose/chatbox-no-text-attachments-with-success-files-and-click-send.png +0 -0
- package/screenshots/truth/compose/chatbox-no-text-attachments-with-success-files.png +0 -0
- package/screenshots/truth/compose/chatbox-with-text-and-click-send.png +0 -0
- package/screenshots/truth/compose/chatbox-with-text-and-hit-enter.png +0 -0
- package/screenshots/truth/compose/chatbox-with-text-and-spaces.png +0 -0
- package/screenshots/truth/compose/chatbox-with-text-and-url.png +0 -0
- package/screenshots/truth/compose/chatbox-with-text-attachments-no-files-and-click-send.png +0 -0
- package/screenshots/truth/compose/chatbox-with-text-attachments-no-files-and-hit-enter.png +0 -0
- package/screenshots/truth/compose/chatbox-with-text-attachments-no-files.png +0 -0
- package/screenshots/truth/compose/chatbox-with-text-attachments-with-all-files-and-click-send.png +0 -0
- package/screenshots/truth/compose/chatbox-with-text-attachments-with-all-files-and-hit-enter.png +0 -0
- package/screenshots/truth/compose/chatbox-with-text-attachments-with-all-files.png +0 -0
- package/screenshots/truth/compose/chatbox-with-text-attachments-with-failure-files.png +0 -0
- package/screenshots/truth/compose/chatbox-with-text-attachments-with-success-files-and-click-send.png +0 -0
- package/screenshots/truth/compose/chatbox-with-text-attachments-with-success-files-and-hit-enter.png +0 -0
- package/screenshots/truth/compose/chatbox-with-text-attachments-with-success-files.png +0 -0
- package/screenshots/truth/compose/chatbox-with-text-no-spaces.png +0 -0
- package/screenshots/truth/compose/chatbox-with-text.png +0 -0
- package/screenshots/truth/contacts/badges.png +0 -0
- package/screenshots/truth/contacts/compose-attachments-no-text-failure.png +0 -0
- package/screenshots/truth/contacts/compose-attachments-no-text-success.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-generic.png +0 -0
- package/screenshots/truth/contacts/compose-text-and-attachments-failure-text-and-attachments.png +0 -0
- package/screenshots/truth/contacts/compose-text-and-attachments-failure-text.png +0 -0
- package/screenshots/truth/contacts/compose-text-and-attachments-success.png +0 -0
- package/screenshots/truth/contacts/compose-text-no-attachments-failure.png +0 -0
- package/screenshots/truth/contacts/compose-text-no-attachments-success.png +0 -0
- package/screenshots/truth/contacts/contact-active-default.png +0 -0
- package/screenshots/truth/contacts/contact-active-show-chatbox.png +0 -0
- package/screenshots/truth/contacts/contact-active-ticket-closed-show-reopen-button.png +0 -0
- package/screenshots/truth/contacts/contact-active-ticket-open-show-chatbox.png +0 -0
- package/screenshots/truth/contacts/contact-archived-hide-chatbox.png +0 -0
- package/screenshots/truth/contacts/contact-archived-ticket-closed-hide-chatbox.png +0 -0
- package/screenshots/truth/contacts/contact-blocked-hide-chatbox.png +0 -0
- package/screenshots/truth/contacts/contact-stopped-hide-chatbox.png +0 -0
- package/screenshots/truth/contacts/history.png +0 -0
- package/screenshots/truth/counter/summary.png +0 -0
- package/screenshots/truth/counter/text.png +0 -0
- package/screenshots/truth/counter/unicode-variables.png +0 -0
- package/screenshots/truth/counter/unicode.png +0 -0
- package/screenshots/truth/counter/variable.png +0 -0
- package/src/button/Button.ts +3 -3
- package/src/charcount/CharCount.ts +5 -4
- package/src/completion/Completion.ts +4 -0
- package/src/compose/Compose.ts +584 -0
- package/src/contacts/ContactChat.ts +75 -78
- package/src/contacts/ContactHistory.ts +1 -1
- package/src/contacts/events.ts +1 -0
- package/src/interfaces.ts +2 -0
- package/src/textinput/TextInput.ts +3 -1
- package/src/utils/index.ts +12 -0
- package/src/vectoricon/index.ts +1 -0
- package/static/css/temba-components.css +6 -0
- package/temba-modules.ts +2 -0
- package/test/temba-compose.test.ts +633 -0
- package/test/temba-contact-chat.test.ts +354 -110
- package/test/temba-contact-history.test.ts +10 -5
- package/test/utils.test.ts +24 -9
- package/screenshots/truth/contacts/history-expanded.png +0 -0
package/dist/sw.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
if(!self.define){let e,t={};const o=(o,
|
|
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),f={module:{uri:i},exports:r,require:l};t[i]=Promise.all(n.map((e=>f[e]||l(e)))).then((e=>(s(...e),r)))}}define(["./workbox-919adfb7"],(function(e){"use strict";self.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"f3b7c2f1.js",revision:"b44a0987bc32a203a54988c5ade98236"},{url:"templates/components-body.html",revision:"f05d991055735c315fcfb22d12af0fe9"},{url:"templates/components-head.html",revision:"4ba265406ab202a47d2f4724f4400d91"}],{}),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/6f876d5be90e2ba633c77fea62ee08e7/sw.js"],"sourcesContent":["import {registerRoute as workbox_routing_registerRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-routing/registerRoute.mjs';\nimport {CacheFirst as workbox_strategies_CacheFirst} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-strategies/CacheFirst.mjs';\nimport {clientsClaim as workbox_core_clientsClaim} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-core/clientsClaim.mjs';\nimport {precacheAndRoute as workbox_precaching_precacheAndRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-precaching/precacheAndRoute.mjs';\nimport {NavigationRoute as workbox_routing_NavigationRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-routing/NavigationRoute.mjs';\nimport {createHandlerBoundToURL as workbox_precaching_createHandlerBoundToURL} from '/home/runner/work/temba-components/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\": \"f3b7c2f1.js\",\n \"revision\": \"b44a0987bc32a203a54988c5ade98236\"\n },\n {\n \"url\": \"templates/components-body.html\",\n \"revision\": \"f05d991055735c315fcfb22d12af0fe9\"\n },\n {\n \"url\": \"templates/components-head.html\",\n \"revision\": \"4ba265406ab202a47d2f4724f4400d91\"\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/f3b7c2f1.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.42.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/f3b7c2f1.js" crossorigin="anonymous">
|
|
@@ -20,7 +20,7 @@ export class Button extends LitElement {
|
|
|
20
20
|
background-image: var(--button-bg-img);
|
|
21
21
|
color: var(--button-text);
|
|
22
22
|
box-shadow: var(--button-shadow);
|
|
23
|
-
transition: all
|
|
23
|
+
transition: all calc(var(--transition-speed) / 2) ease-in;
|
|
24
24
|
}
|
|
25
25
|
|
|
26
26
|
.button-container {
|
|
@@ -29,7 +29,7 @@ export class Button extends LitElement {
|
|
|
29
29
|
display: block;
|
|
30
30
|
border-radius: var(--curvature);
|
|
31
31
|
outline: none;
|
|
32
|
-
transition: background ease-in
|
|
32
|
+
transition: background ease-in var(--transition-speed);
|
|
33
33
|
user-select: none;
|
|
34
34
|
-webkit-user-select: none;
|
|
35
35
|
text-align: center;
|
|
@@ -64,7 +64,7 @@ export class Button extends LitElement {
|
|
|
64
64
|
padding: var(--button-y) var(--button-x);
|
|
65
65
|
border-radius: var(--curvature);
|
|
66
66
|
border: 1px solid transparent;
|
|
67
|
-
transition:
|
|
67
|
+
transition: var(--transition-speed);
|
|
68
68
|
background: var(--button-mask);
|
|
69
69
|
}
|
|
70
70
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/button/Button.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, TemplateResult, html, css } from 'lit';\nimport { getClasses } from '../utils';\n\nimport { property } from 'lit/decorators.js';\n\nexport class Button extends LitElement {\n static get styles() {\n return css`\n :host {\n display: inline-block;\n font-family: var(--font-family);\n font-weight: 400;\n }\n\n .v-2.button-container {\n background: var(--button-bg);\n background-image: var(--button-bg-img);\n color: var(--button-text);\n box-shadow: var(--button-shadow);\n transition: all
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/button/Button.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, TemplateResult, html, css } from 'lit';\nimport { getClasses } from '../utils';\n\nimport { property } from 'lit/decorators.js';\n\nexport class Button extends LitElement {\n static get styles() {\n return css`\n :host {\n display: inline-block;\n font-family: var(--font-family);\n font-weight: 400;\n }\n\n .v-2.button-container {\n background: var(--button-bg);\n background-image: var(--button-bg-img);\n color: var(--button-text);\n box-shadow: var(--button-shadow);\n transition: all calc(var(--transition-speed) / 2) ease-in;\n }\n\n .button-container {\n color: #fff;\n cursor: pointer;\n display: block;\n border-radius: var(--curvature);\n outline: none;\n transition: background ease-in var(--transition-speed);\n user-select: none;\n -webkit-user-select: none;\n text-align: center;\n }\n\n .button-name {\n white-space: nowrap;\n }\n\n .secondary-button:hover .button-mask {\n border: 1px solid var(--color-button-secondary);\n }\n\n .button-mask:hover {\n background: rgba(0, 0, 0, 0.05);\n }\n\n .button-container:focus {\n outline: none;\n margin: 0;\n }\n\n .button-container:focus {\n box-shadow: var(--widget-box-shadow-focused);\n }\n\n .button-container.secondary-button:focus .button-mask {\n background: transparent;\n }\n\n .button-mask {\n padding: var(--button-y) var(--button-x);\n border-radius: var(--curvature);\n border: 1px solid transparent;\n transition: var(--transition-speed);\n background: var(--button-mask);\n }\n\n .button-container.disabled-button {\n background: rgba(0, 0, 0, 0.05);\n color: rgba(255, 255, 255, 0.45);\n cursor: default;\n }\n\n .button-container.disabled-button .button-mask {\n box-shadow: 0 0 0px 1px var(--color-button-disabled);\n }\n\n .button-container.disabled-button:hover .button-mask {\n box-shadow: 0 0 0px 1px var(--color-button-disabled);\n background: rgba(0, 0, 0, 0.05);\n }\n\n .button-container.active-button .button-mask {\n }\n\n .secondary-button.active-button {\n background: transparent;\n color: var(--color-text);\n }\n\n .secondary-button.active-button .button-mask {\n border: none;\n }\n\n .button-container.secondary-button.active-button:focus .button-mask {\n background: transparent;\n box-shadow: none;\n }\n\n .primary-button {\n background: var(--color-button-primary);\n color: var(--color-button-primary-text);\n }\n\n .light-button {\n background: var(--color-button-light);\n color: var(--color-button-light-text);\n }\n\n .attention-button {\n background: var(--color-button-attention);\n color: var(--color-button-primary-text);\n }\n\n .secondary-button {\n background: transparent;\n color: var(--color-text);\n font-weight: 300;\n }\n\n .destructive-button {\n background: var(--color-button-destructive);\n color: var(--color-button-destructive-text);\n }\n\n .button-mask.disabled-button {\n background: rgba(0, 0, 0, 0.1);\n }\n\n .secondary-button .button-mask:hover {\n background: transparent;\n }\n\n .submit-animation {\n padding: 1px 4px;\n }\n\n .submit-animation temba-loading {\n margin-bottom: -3px;\n line-height: normal;\n }\n `;\n }\n\n @property({ type: Boolean })\n primary: boolean;\n\n @property({ type: Boolean })\n secondary: boolean;\n\n @property({ type: Boolean })\n attention: boolean;\n\n @property({ type: Number })\n v = 1;\n\n @property({ type: Boolean })\n destructive: boolean;\n\n @property({ type: Boolean })\n light: boolean;\n\n @property()\n name: string;\n\n @property({ type: Boolean })\n disabled: boolean;\n\n @property({ type: Boolean })\n submitting: boolean;\n\n @property({ type: Boolean })\n active: boolean;\n\n @property({ type: String })\n href: string;\n\n private handleClick(evt: MouseEvent) {\n if (this.disabled) {\n evt.preventDefault();\n evt.stopPropagation();\n }\n\n if (this.href && !this.disabled) {\n this.ownerDocument.location.href = this.href;\n evt.preventDefault();\n evt.stopPropagation();\n }\n }\n\n private handleKeyUp(event: KeyboardEvent): void {\n this.active = false;\n if (event.key === 'Enter') {\n this.click();\n }\n }\n\n private handleMouseDown(): void {\n if (!this.disabled && !this.submitting) {\n this.active = true;\n this.classList.add('active');\n }\n }\n\n private handleMouseUp(): void {\n this.active = false;\n this.classList.remove('active');\n }\n\n public render(): TemplateResult {\n const buttonName = this.submitting\n ? html`<div class=\"submit-animation\">\n <temba-loading units=\"3\" size=\"8\" color=\"#eee\"></temba-loading>\n </div>`\n : this.name;\n\n return html`\n <div\n class=\"button-container \n v-${this.v}\n ${getClasses({\n 'primary-button':\n this.primary ||\n (!this.primary &&\n !this.secondary &&\n !this.attention &&\n this.v == 1),\n 'secondary-button': this.secondary,\n 'disabled-button': this.disabled,\n 'active-button': this.active,\n 'attention-button': this.attention,\n 'destructive-button': this.destructive,\n 'light-button': this.light,\n })}\"\n tabindex=\"0\"\n @mousedown=${this.handleMouseDown}\n @mouseup=${this.handleMouseUp}\n @mouseleave=${this.handleMouseUp}\n @keyup=${this.handleKeyUp}\n @click=${this.handleClick}\n >\n <div class=\"button-mask\">\n <div class=\"button-name\">${buttonName}</div>\n </div>\n </div>\n `;\n }\n}\n"]}
|
|
@@ -55,10 +55,11 @@ export class CharCount extends RapidElement {
|
|
|
55
55
|
transition: transform cubic-bezier(0.71, 0.18, 0.61, 1.33)
|
|
56
56
|
var(--transition-speed);
|
|
57
57
|
visibility: hidden;
|
|
58
|
-
margin-top:
|
|
59
|
-
right:
|
|
58
|
+
margin-top: var(--temba-charcount-summary-margin-top);
|
|
59
|
+
right: var(--temba-charcount-summary-right);
|
|
60
|
+
bottom: var(--temba-charcount-summary-bottom);
|
|
60
61
|
text-align: left;
|
|
61
|
-
position:
|
|
62
|
+
position: var(--temba-charcount-summary-position);
|
|
62
63
|
z-index: 1000;
|
|
63
64
|
}
|
|
64
65
|
|
|
@@ -90,7 +91,7 @@ export class CharCount extends RapidElement {
|
|
|
90
91
|
display: inline-block;
|
|
91
92
|
padding: 2px 6px;
|
|
92
93
|
border-radius: var(--curvature);
|
|
93
|
-
margin-top:
|
|
94
|
+
margin-top: var(--temba-charcount-counts-margin-top);
|
|
94
95
|
}
|
|
95
96
|
|
|
96
97
|
.segments {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CharCount.js","sourceRoot":"","sources":["../../../src/charcount/CharCount.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAClC,OAAO,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,MAAM,OAAO,SAAU,SAAQ,YAAY;IAA3C;;
|
|
1
|
+
{"version":3,"file":"CharCount.js","sourceRoot":"","sources":["../../../src/charcount/CharCount.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAClC,OAAO,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,MAAM,OAAO,SAAU,SAAQ,YAAY;IAA3C;;QAuHE,aAAQ,GAAa,EAAE,CAAC;IAuE1B,CAAC;IA7LC,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwGT,CAAC;IACJ,CAAC;IAcM,OAAO,CAAC,OAAyB;QACtC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACvB,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YACvB,IAAI,CAAC,cAAc,EAAE,CAAC;SACvB;IACH,CAAC;IAEO,cAAc;QACpB,MAAM,GAAG,GAAG,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAChC,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC,MAAM,CAAC;QACxB,IAAI,CAAC,QAAQ,GAAG,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC;QACjC,IAAI,CAAC,QAAQ,GAAG,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACjD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;IAChC,CAAC;IAEM,MAAM;QACX,MAAM,cAAc,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;QAEhE,IAAI,QAAQ,GAAG,IAAI,CAAA,GAAG,CAAC;QACvB,IAAI,IAAI,CAAC,QAAQ,GAAG,CAAC,EAAE;YACrB,QAAQ,GAAG,IAAI,CAAA,gBAAgB,cAAc,CAAC,CAAC,CAAC,IAAI,CAAA,UAAU,CAAC,CAAC,CAAC,IAAI;aAC9D,IAAI,CAAC,QAAQ,iCAAiC,CAAC;SACvD;aAAM;YACL,QAAQ,GAAG,IAAI,CAAA,gBAAgB,cAAc,CAAC,CAAC,CAAC,IAAI,CAAA,UAAU,CAAC,CAAC,CAAC,IAAI;gCAC3C,CAAC;SAC5B;QAED,IAAI,QAAQ,GAAG,IAAI,CAAC;QACpB,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,cAAc,CAAC,EAAE;YACrE,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAC1B,CAAC,EAAU,EAAE,EAAE,CAAC,IAAI,CAAA,8BAA8B,EAAE,QAAQ,CAC7D,CAAC;YACF,QAAQ,GAAG,IAAI,CAAA;;;;kCAIa,QAAQ;;OAEnC,CAAC;SACH;QAED,MAAM,OAAO,GACX,IAAI,CAAC,KAAK,GAAG,CAAC;YACZ,CAAC,CAAC,IAAI,CAAA;iCACmB,IAAI,CAAC,KAAK;cAC7B,QAAQ,IAAI,QAAQ;cACpB,cAAc;gBACd,CAAC,CAAC,IAAI,CAAA;;;;;;iBAMH;gBACH,CAAC,CAAC,IAAI;iBACH;YACT,CAAC,CAAC,IAAI,CAAC;QAEX,OAAO,IAAI,CAAA,sBACT,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAC5B,yBAAyB,IAAI,CAAC,KAAK,GACjC,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,cAAc;YACjC,CAAC,CAAC,IAAI,CAAA;2BACa,IAAI,CAAC,QAAQ,GAAG,cAAc,CAAC,CAAC,CAAC,IAAI,CAAA,GAAG,CAAC,CAAC,CAAC,IAAI;;iBAEzD;YACT,CAAC,CAAC,IACN,UAAU,OAAO,cAAc,CAAC;IAClC,CAAC;CACF;AAhFC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACd;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACb;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;2CAC5B;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;2CACrB","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { RapidElement } from '../RapidElement';\nimport { splitSMS } from '../sms';\nimport { getExtendedCharacters } from './helpers';\nimport { property } from 'lit/decorators.js';\n\nexport class CharCount extends RapidElement {\n static get styles() {\n return css`\n :host {\n overflow: auto;\n }\n\n :host::after {\n content: '';\n clear: both;\n display: table;\n }\n\n .counter {\n float: right;\n text-align: right;\n position: relative;\n }\n\n .extended {\n font-size: 14px;\n display: flex;\n margin-top: 4px;\n }\n\n .extended-char {\n border: 1px solid #e6e6e6;\n border-radius: var(--curvature-widget);\n padding: 4px;\n text-align: center;\n line-height: 20px;\n margin-right: 4px;\n }\n\n .summary {\n width: 180px;\n padding: 8px 12px;\n font-size: 12px;\n background: white;\n border-radius: var(--curvature-widget);\n overflow: hidden;\n opacity: 0.3;\n transform: scale(0.7);\n box-shadow: var(--shadow);\n transition: transform cubic-bezier(0.71, 0.18, 0.61, 1.33)\n var(--transition-speed);\n visibility: hidden;\n margin-top: var(--temba-charcount-summary-margin-top);\n right: var(--temba-charcount-summary-right);\n bottom: var(--temba-charcount-summary-bottom);\n text-align: left;\n position: var(--temba-charcount-summary-position);\n z-index: 1000;\n }\n\n .fine-print {\n margin-top: 8px;\n margin-left: -12px;\n margin-right: -12px;\n margin-bottom: -8px;\n padding: 8px 12px;\n color: #999;\n background: #f5f5f5;\n font-size: 10px;\n }\n\n .extended-warning {\n margin-top: 8px;\n }\n\n .note {\n font-weight: 600;\n display: inline-block;\n margin-right: 2px;\n }\n\n .counts {\n cursor: pointer;\n transition: all cubic-bezier(0.71, 0.18, 0.61, 1.33) 200ms;\n transform: scale(0.9);\n display: inline-block;\n padding: 2px 6px;\n border-radius: var(--curvature);\n margin-top: var(--temba-charcount-counts-margin-top);\n }\n\n .segments {\n font-size: 85%;\n display: inline-block;\n }\n\n .attention .counts {\n transform: scale(0.95);\n background: var(--color-overlay-light);\n color: var(--color-overlay-light-text);\n }\n\n .attention .segments {\n font-weight: 600;\n }\n\n .counter:hover .summary {\n opacity: 1;\n transform: scale(1);\n visibility: visible;\n }\n `;\n }\n\n @property({ type: String })\n text: string;\n\n @property({ type: Number })\n count: number;\n\n @property({ type: Number, attribute: false })\n segments: number;\n\n @property({ type: Object, attribute: false })\n extended: string[] = [];\n\n public updated(changes: Map<string, any>) {\n super.updated(changes);\n if (changes.has('text')) {\n this.updateSegments();\n }\n }\n\n private updateSegments() {\n const sms = splitSMS(this.text);\n this.count = sms.length;\n this.segments = sms.parts.length;\n this.extended = getExtendedCharacters(this.text);\n this.count = this.text.length;\n }\n\n public render(): TemplateResult {\n const hasExpressions = this.text && this.text.indexOf('@') > -1;\n\n let segments = html`.`;\n if (this.segments > 1) {\n segments = html`and will use ${hasExpressions ? html`at least` : null}\n <b>${this.segments} messages</b> to send over SMS.`;\n } else {\n segments = html`and will use ${hasExpressions ? html`at least` : null} one\n message to send over SMS.`;\n }\n\n let extended = null;\n if (this.extended.length > 0 && (this.segments > 1 || hasExpressions)) {\n extended = this.extended.map(\n (ch: string) => html`<div class=\"extended-char\">${ch}</div>`\n );\n extended = html`\n <div class=\"extended-warning\">\n Some characters require more space over SMS. To save on fees, consider\n replacing them.\n <div class=\"extended\">${extended}</div>\n </div>\n `;\n }\n\n const summary =\n this.count > 1\n ? html` <div class=\"summary\">\n This message is <b>${this.count} characters</b>\n ${segments} ${extended}\n ${hasExpressions\n ? html`\n <div class=\"fine-print\">\n <div class=\"note\">NOTE</div>\n Using variables may result in more messages when sending\n over SMS than this estimate.\n </div>\n `\n : null}\n </div>`\n : null;\n\n return html`<div class=\"counter${\n extended ? ' attention' : ''\n }\"><div class=\"counts\">${this.count}${\n this.segments > 1 || hasExpressions\n ? html`<div class=\"segments\">\n / ${this.segments}${hasExpressions ? html`+` : null}\n <div></div>\n </div>`\n : null\n }</div> ${summary}</div></div>`;\n }\n}\n"]}
|
|
@@ -17,6 +17,7 @@ export class Completion extends FormElement {
|
|
|
17
17
|
this.options = [];
|
|
18
18
|
this.name = '';
|
|
19
19
|
this.value = '';
|
|
20
|
+
this.autogrow = false;
|
|
20
21
|
}
|
|
21
22
|
static get styles() {
|
|
22
23
|
return css `
|
|
@@ -185,6 +186,7 @@ export class Completion extends FormElement {
|
|
|
185
186
|
@input=${this.handleInput}
|
|
186
187
|
@blur=${this.handleOptionCanceled}
|
|
187
188
|
.value=${this.value}
|
|
189
|
+
?autogrow=${this.autogrow}
|
|
188
190
|
?textarea=${this.textarea}
|
|
189
191
|
?submitOnEnter=${this.submitOnEnter}
|
|
190
192
|
>
|
|
@@ -250,4 +252,7 @@ __decorate([
|
|
|
250
252
|
__decorate([
|
|
251
253
|
property({ type: String })
|
|
252
254
|
], Completion.prototype, "counter", void 0);
|
|
255
|
+
__decorate([
|
|
256
|
+
property({ type: Boolean })
|
|
257
|
+
], Completion.prototype, "autogrow", void 0);
|
|
253
258
|
//# sourceMappingURL=Completion.js.map
|
|
@@ -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';\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 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 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 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 ?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\">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';\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 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 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\">Tab to complete, enter to select</div>\n </temba-options>\n </div>\n </temba-field>\n `;\n }\n}\n"]}
|