@nyaruka/temba-components 0.46.0 → 0.47.1

package/dist/sw.js

@@ -1,2 +1,2 @@
-if(!self.define){let e,t={};const o=(o,n)=>(o=new URL(o+".js",n).href,t[o]||new Promise((t=>{if("document"in self){const e=document.createElement("script");e.src=o,e.onload=t,document.head.appendChild(e)}else e=o,importScripts(o),t()})).then((()=>{let e=t[o];if(!e)throw new Error(`Module ${o} didn’t register its module`);return e})));self.define=(n,s)=>{const i=e||("document"in self?document.currentScript.src:"")||location.href;if(t[i])return;let r={};const 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:"041a136a.js",revision:"aff6ee4042394b36cd3b90fab4441403"},{url:"templates/components-body.html",revision:"1f8f52ccde63fce8eb1dd523e501ff57"},{url:"templates/components-head.html",revision:"88f90114b613458d968ac323b1d56af1"}],{}),e.registerRoute(new e.NavigationRoute(e.createHandlerBoundToURL("/index.html"))),e.registerRoute("polyfills/*.js",new e.CacheFirst,"GET")}));
+if(!self.define){let e,t={};const o=(o,n)=>(o=new URL(o+".js",n).href,t[o]||new Promise((t=>{if("document"in self){const e=document.createElement("script");e.src=o,e.onload=t,document.head.appendChild(e)}else e=o,importScripts(o),t()})).then((()=>{let e=t[o];if(!e)throw new Error(`Module ${o} didn’t register its module`);return e})));self.define=(n,s)=>{const i=e||("document"in self?document.currentScript.src:"")||location.href;if(t[i])return;let r={};const c=e=>o(e,i),l={module:{uri:i},exports:r,require:c};t[i]=Promise.all(n.map((e=>l[e]||c(e)))).then((e=>(s(...e),r)))}}define(["./workbox-919adfb7"],(function(e){"use strict";self.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"c5dc6c86.js",revision:"2b5ef027b7713274a4d505973792c290"},{url:"templates/components-body.html",revision:"c1e51f9b84aca0c63c2ab08c3d8ef1a0"},{url:"templates/components-head.html",revision:"f511b87d2303fdd35406541abd0eb4d0"}],{}),e.registerRoute(new e.NavigationRoute(e.createHandlerBoundToURL("/index.html"))),e.registerRoute("polyfills/*.js",new e.CacheFirst,"GET")}));
 //# sourceMappingURL=sw.js.map

package/dist/sw.js.map

@@ -1 +1 @@
-{"version":3,"file":"sw.js","sources":["../../../../../tmp/4f3aa99fd9d4de0a533bbe20291f5b64/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\": \"041a136a.js\",\n    \"revision\": \"aff6ee4042394b36cd3b90fab4441403\"\n  },\n  {\n    \"url\": \"templates/components-body.html\",\n    \"revision\": \"1f8f52ccde63fce8eb1dd523e501ff57\"\n  },\n  {\n    \"url\": \"templates/components-head.html\",\n    \"revision\": \"88f90114b613458d968ac323b1d56af1\"\n  }\n], {});\n\nworkbox_routing_registerRoute(new workbox_routing_NavigationRoute(workbox_precaching_createHandlerBoundToURL(\"/index.html\")));\n\n\nworkbox_routing_registerRoute(\"polyfills/*.js\", new workbox_strategies_CacheFirst(), 'GET');\n\n\n\n\n"],"names":["self","skipWaiting","workbox_core_clientsClaim","workbox_precaching_precacheAndRoute","url","revision","workbox","registerRoute","workbox_routing_NavigationRoute","workbox_precaching_createHandlerBoundToURL","workbox_strategies_CacheFirst"],"mappings":"0nBAwBAA,KAAKC,cAELC,EAAAA,eAQAC,EAAAA,iBAAoC,CAClC,CACEC,IAAO,cACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,qCAEb,CAAE,GAEwBC,EAAAC,cAAC,IAAIC,EAAAA,gBAAgCC,EAAAA,wBAA2C,iBAGhFH,EAAAC,cAAC,iBAAkB,IAAIG,aAAiC"}
+{"version":3,"file":"sw.js","sources":["../../../../../tmp/2cdacda589fceb78eac1177ac7400559/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\": \"c5dc6c86.js\",\n    \"revision\": \"2b5ef027b7713274a4d505973792c290\"\n  },\n  {\n    \"url\": \"templates/components-body.html\",\n    \"revision\": \"c1e51f9b84aca0c63c2ab08c3d8ef1a0\"\n  },\n  {\n    \"url\": \"templates/components-head.html\",\n    \"revision\": \"f511b87d2303fdd35406541abd0eb4d0\"\n  }\n], {});\n\nworkbox_routing_registerRoute(new workbox_routing_NavigationRoute(workbox_precaching_createHandlerBoundToURL(\"/index.html\")));\n\n\nworkbox_routing_registerRoute(\"polyfills/*.js\", new workbox_strategies_CacheFirst(), 'GET');\n\n\n\n\n"],"names":["self","skipWaiting","workbox_core_clientsClaim","workbox_precaching_precacheAndRoute","url","revision","workbox","registerRoute","workbox_routing_NavigationRoute","workbox_precaching_createHandlerBoundToURL","workbox_strategies_CacheFirst"],"mappings":"0nBAwBAA,KAAKC,cAELC,EAAAA,eAQAC,EAAAA,iBAAoC,CAClC,CACEC,IAAO,cACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,qCAEb,CAAE,GAEwBC,EAAAC,cAAC,IAAIC,EAAAA,gBAAgCC,EAAAA,wBAA2C,iBAGhFH,EAAAC,cAAC,iBAAkB,IAAIG,aAAiC"}

package/dist/templates/components-body.html

@@ -1 +1 @@
-<script type="module" src="{{STATIC_URL}}@nyaruka/temba-components/dist/041a136a.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.46.0"</script>
+<script type="module" src="{{STATIC_URL}}@nyaruka/temba-components/dist/c5dc6c86.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.47.1"</script>

package/dist/templates/components-head.html

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

package/out-tsc/src/completion/Completion.js

@@ -162,6 +162,13 @@ export class Completion extends FormElement {
             input.click();
         }
     }
+    focus() {
+        super.focus();
+        const input = this.shadowRoot.querySelector('temba-textinput');
+        if (input) {
+            input.focus();
+        }
+    }
     render() {
         const anchorStyles = this.anchorPosition
             ? {

package/out-tsc/src/completion/Completion.js.map

@@ -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  @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 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"]}
+{"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    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\">Tab to complete, enter to select</div>\n          </temba-options>\n        </div>\n      </temba-field>\n    `;\n  }\n}\n"]}

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

@@ -202,20 +202,16 @@ export class Compose extends FormElement {
         super.updated(changes);
         if (changes.has('currentText') || changes.has('currentAttachments')) {
             this.toggleButton();
-            this.setFocusOnChatbox();
             this.serializeComposeValue();
         }
-        if (changes.has('buttonError')) {
-            this.setFocusOnChatbox();
-        }
+        this.setFocusOnChatbox();
     }
     setFocusOnChatbox() {
         if (this.chatbox) {
             const completion = this.shadowRoot.querySelector('temba-completion');
             if (completion) {
-                //simulate a click inside the completion to set focus
                 window.setTimeout(() => {
-                    completion.click();
+                    completion.focus();
                 }, 0);
             }
         }
@@ -226,6 +222,9 @@ export class Compose extends FormElement {
         this.failedAttachments = [];
         this.buttonError = '';
     }
+    handleContainerClick(evt) {
+        this.setFocusOnChatbox();
+    }
     handleChatboxChange(evt) {
         const completion = evt.target;
         this.currentText = completion.value;
@@ -399,6 +398,7 @@ export class Compose extends FormElement {
       >
         <div
           class=${getClasses({ container: true, highlight: this.pendingDrop })}
+          @click="${this.handleContainerClick}"
           @dragenter="${this.handleDragEnter}"
           @dragover="${this.handleDragOver}"
           @dragleave="${this.handleDragLeave}"

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

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

package/out-tsc/src/contacts/ContactFieldEditor.js

@@ -4,43 +4,48 @@ import { property } from 'lit/decorators.js';
 import { CustomEventType } from '../interfaces';
 import { RapidElement } from '../RapidElement';
 import { Icon } from '../vectoricon';
+import { getClasses } from '../utils';
 export class ContactFieldEditor extends RapidElement {
     constructor() {
         super(...arguments);
         this.icon = navigator.clipboard ? Icon.copy : '';
         this.iconClass = '';
+        this.disabled = false;
     }
     static get styles() {
         return css `
       .wrapper {
         --widget-box-shadow: none;
+        --temba-textinput-padding: 1.4em 0.8em 0.4em 0.8em;
+        --disabled-opacity: 1;
+        position: relative;
       }
 
       .prefix {
-        background: rgba(0, 0, 0, 0.05);
         border-top-left-radius: var(--curvature-widget);
         border-bottom-left-radius: var(--curvature-widget);
         color: #888;
         cursor: pointer;
-        width: 200px;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
         display: flex;
         padding: 0em 0.5em;
+        position: absolute;
+        margin-top: 0.2em;
       }
 
       .wrapper {
-        margin-bottom: -1px;
+        margin-bottom: 0.5em;
       }
 
       .prefix .name {
-        padding: 0.5em 0em;
-        color: #888;
-        width: 200px;
+        padding: 0em 0.4em;
+        color: #999;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
+        font-size: 0.8em;
       }
 
       .postfix {
@@ -86,6 +91,16 @@ export class ContactFieldEditor extends RapidElement {
         transform: scale(1);
       }
 
+      .disabled temba-textinput .postfix {
+        display: none;
+      }
+
+      .disabled {
+        --color-widget-border: transparent;
+        padding-bottom: 0.4em;
+        border-bottom: 1px solid #e6e6e6;
+      }
+
       .unset temba-textinput:focus .popper,
       .unset temba-textinput:hover .popper {
         opacity: 0;
@@ -104,7 +119,6 @@ export class ContactFieldEditor extends RapidElement {
       }
 
       temba-datepicker {
-        --curvature: 0px;
         position: relative;
       }
     `;
@@ -157,13 +171,21 @@ export class ContactFieldEditor extends RapidElement {
     }
     render() {
         return html `
-      <div class="wrapper ${this.value ? 'set' : 'unset'}">
+      <div
+        class=${getClasses({
+            wrapper: true,
+            set: !!this.value,
+            unset: !this.value,
+            disabled: this.disabled,
+        })}
+      >
         ${this.type === 'datetime'
             ? html `
               <temba-datepicker
                 timezone=${this.timezone}
                 value="${this.value ? this.value : ''}"
                 @change=${this.handleSubmit}
+                ?disabled=${this.disabled}
                 time
               >
                 <div class="prefix" slot="prefix">
@@ -177,6 +199,7 @@ export class ContactFieldEditor extends RapidElement {
                 @blur=${this.handleSubmit}
                 @keydown=${this.handleInput}
                 @change=${this.handleChange}
+                ?disabled=${this.disabled}
               >
                 <div class="prefix" slot="prefix">
                   <div class="name">${this.name}</div>
@@ -233,4 +256,7 @@ __decorate([
 __decorate([
     property({ type: String })
 ], ContactFieldEditor.prototype, "iconClass", void 0);
+__decorate([
+    property({ type: Boolean })
+], ContactFieldEditor.prototype, "disabled", void 0);
 //# sourceMappingURL=ContactFieldEditor.js.map

package/out-tsc/src/contacts/ContactFieldEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContactFieldEditor.js","sourceRoot":"","sources":["../../../src/contacts/ContactFieldEditor.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { FormElement } from '../FormElement';\nimport { CustomEventType } from '../interfaces';\nimport { RapidElement } from '../RapidElement';\nimport { TextInput } from '../textinput/TextInput';\nimport { Icon } from '../vectoricon';\n\nexport class ContactFieldEditor extends RapidElement {\n  @property({ type: String })\n  key: string;\n\n  @property({ type: String })\n  value: string;\n\n  @property({ type: String })\n  name: string;\n\n  @property({ type: String })\n  type: string;\n\n  @property({ type: String })\n  timezone: string;\n\n  @property({ type: String })\n  icon = navigator.clipboard ? Icon.copy : '';\n\n  @property({ type: String })\n  iconClass = '';\n\n  static get styles() {\n    return css`\n      .wrapper {\n        --widget-box-shadow: none;\n      }\n\n      .prefix {\n        background: rgba(0, 0, 0, 0.05);\n        border-top-left-radius: var(--curvature-widget);\n        border-bottom-left-radius: var(--curvature-widget);\n        color: #888;\n        cursor: pointer;\n        width: 200px;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        display: flex;\n        padding: 0em 0.5em;\n      }\n\n      .wrapper {\n        margin-bottom: -1px;\n      }\n\n      .prefix .name {\n        padding: 0.5em 0em;\n        color: #888;\n        width: 200px;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n\n      .postfix {\n        display: flex;\n        align-items: stretch;\n      }\n\n      .popper {\n        padding: 0.5em 0.75em;\n        background: rgba(240, 240, 240, 1);\n        border-top-right-radius: var(--curvature-widget);\n        border-bottom-right-radius: var(--curvature-widget);\n        --icon-color: #888;\n        opacity: 0;\n        cursor: default;\n        transform: scale(0.5);\n        transition: all var(--transition-speed) ease-in-out;\n        display: flex;\n        align-items: stretch;\n        z-index: 1000;\n      }\n\n      temba-icon[name='calendar'] {\n        --icon-color: rgba(0, 0, 0, 0.2);\n      }\n\n      temba-icon:hover {\n        --icon-color: rgba(0, 0, 0, 0.5);\n      }\n\n      temba-icon {\n        cursor: pointer;\n        --icon-color: rgba(0, 0, 0, 0.3);\n      }\n\n      temba-textinput:hover .popper {\n        opacity: 1;\n        transform: scale(1);\n      }\n\n      temba-textinput:focus .popper {\n        opacity: 1;\n        transform: scale(1);\n      }\n\n      .unset temba-textinput:focus .popper,\n      .unset temba-textinput:hover .popper {\n        opacity: 0;\n      }\n\n      .copy.clicked temba-icon {\n        transform: scale(1.2);\n      }\n\n      temba-icon {\n        transition: all 200ms ease-in-out;\n      }\n\n      temba-icon.search {\n        margin-right: 1em;\n      }\n\n      temba-datepicker {\n        --curvature: 0px;\n        position: relative;\n      }\n    `;\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.handleInput = this.handleInput.bind(this);\n    this.handleSubmit = this.handleSubmit.bind(this);\n  }\n\n  public handleIconClick(evt: MouseEvent) {\n    const ele = evt.target as HTMLDivElement;\n    const icon = ele.getAttribute('icon-action');\n    const input = this.shadowRoot.querySelector('temba-textinput') as TextInput;\n\n    if (icon === 'copy') {\n      if (navigator.clipboard) {\n        this.iconClass = 'clicked';\n        navigator.clipboard.writeText(input.getDisplayValue()).then(() => {\n          window.setTimeout(() => {\n            this.iconClass = '';\n          }, 300);\n        });\n      }\n    }\n\n    if (icon === 'search') {\n      this.fireCustomEvent(CustomEventType.ButtonClicked, {\n        key: this.key,\n        value: this.value,\n      });\n    }\n\n    evt.preventDefault();\n    evt.stopPropagation();\n  }\n\n  public handleSubmit() {\n    const input = this.shadowRoot.querySelector(\n      'temba-textinput, temba-datepicker'\n    ) as FormElement;\n    if (input.value !== this.value) {\n      this.value = input.value;\n      this.fireEvent('change');\n    }\n    this.icon = navigator.clipboard ? 'copy' : '';\n  }\n\n  public handleChange(evt: Event) {\n    evt.preventDefault();\n    evt.stopPropagation();\n  }\n\n  public handleInput(evt: KeyboardEvent) {\n    if (evt.key === 'Enter') {\n      const input = evt.currentTarget as TextInput;\n      input.blur();\n    }\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div class=\"wrapper ${this.value ? 'set' : 'unset'}\">\n        ${this.type === 'datetime'\n          ? html`\n              <temba-datepicker\n                timezone=${this.timezone}\n                value=\"${this.value ? this.value : ''}\"\n                @change=${this.handleSubmit}\n                time\n              >\n                <div class=\"prefix\" slot=\"prefix\">\n                  <div class=\"name\">${this.name}</div>\n                </div>\n              </temba-datepicker>\n            `\n          : html`\n              <temba-textinput\n                value=\"${this.value ? this.value : ''}\"\n                @blur=${this.handleSubmit}\n                @keydown=${this.handleInput}\n                @change=${this.handleChange}\n              >\n                <div class=\"prefix\" slot=\"prefix\">\n                  <div class=\"name\">${this.name}</div>\n                </div>\n\n                <div class=\"postfix\">\n                  <div\n                    class=\"popper ${this.iconClass}\"\n                    @click=${this.handleIconClick}\n                  >\n                    ${this.value\n                      ? html`\n                  <temba-icon\n                    class=\"search\"\n                    icon-action=\"search\"\n                    name=\"${Icon.search}\"\n                    animateclick=\"pulse\"\n                  ></temba-icon>\n                  </div>\n                `\n                      : null}\n                    <temba-icon\n                      icon-action=\"copy\"\n                      name=\"${this.icon}\"\n                      animatechange=\"spin\"\n                      animateclick=\"pulse\"\n                    ></temba-icon>\n                  </div>\n                </div>\n              </temba-textinput>\n            `}\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"ContactFieldEditor.js","sourceRoot":"","sources":["../../../src/contacts/ContactFieldEditor.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { FormElement } from '../FormElement';\nimport { CustomEventType } from '../interfaces';\nimport { RapidElement } from '../RapidElement';\nimport { TextInput } from '../textinput/TextInput';\nimport { Icon } from '../vectoricon';\nimport { getClasses } from '../utils';\n\nexport class ContactFieldEditor extends RapidElement {\n  @property({ type: String })\n  key: string;\n\n  @property({ type: String })\n  value: string;\n\n  @property({ type: String })\n  name: string;\n\n  @property({ type: String })\n  type: string;\n\n  @property({ type: String })\n  timezone: string;\n\n  @property({ type: String })\n  icon = navigator.clipboard ? Icon.copy : '';\n\n  @property({ type: String })\n  iconClass = '';\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  static get styles() {\n    return css`\n      .wrapper {\n        --widget-box-shadow: none;\n        --temba-textinput-padding: 1.4em 0.8em 0.4em 0.8em;\n        --disabled-opacity: 1;\n        position: relative;\n      }\n\n      .prefix {\n        border-top-left-radius: var(--curvature-widget);\n        border-bottom-left-radius: var(--curvature-widget);\n        color: #888;\n        cursor: pointer;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        display: flex;\n        padding: 0em 0.5em;\n        position: absolute;\n        margin-top: 0.2em;\n      }\n\n      .wrapper {\n        margin-bottom: 0.5em;\n      }\n\n      .prefix .name {\n        padding: 0em 0.4em;\n        color: #999;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        font-size: 0.8em;\n      }\n\n      .postfix {\n        display: flex;\n        align-items: stretch;\n      }\n\n      .popper {\n        padding: 0.5em 0.75em;\n        background: rgba(240, 240, 240, 1);\n        border-top-right-radius: var(--curvature-widget);\n        border-bottom-right-radius: var(--curvature-widget);\n        --icon-color: #888;\n        opacity: 0;\n        cursor: default;\n        transform: scale(0.5);\n        transition: all var(--transition-speed) ease-in-out;\n        display: flex;\n        align-items: stretch;\n        z-index: 1000;\n      }\n\n      temba-icon[name='calendar'] {\n        --icon-color: rgba(0, 0, 0, 0.2);\n      }\n\n      temba-icon:hover {\n        --icon-color: rgba(0, 0, 0, 0.5);\n      }\n\n      temba-icon {\n        cursor: pointer;\n        --icon-color: rgba(0, 0, 0, 0.3);\n      }\n\n      temba-textinput:hover .popper {\n        opacity: 1;\n        transform: scale(1);\n      }\n\n      temba-textinput:focus .popper {\n        opacity: 1;\n        transform: scale(1);\n      }\n\n      .disabled temba-textinput .postfix {\n        display: none;\n      }\n\n      .disabled {\n        --color-widget-border: transparent;\n        padding-bottom: 0.4em;\n        border-bottom: 1px solid #e6e6e6;\n      }\n\n      .unset temba-textinput:focus .popper,\n      .unset temba-textinput:hover .popper {\n        opacity: 0;\n      }\n\n      .copy.clicked temba-icon {\n        transform: scale(1.2);\n      }\n\n      temba-icon {\n        transition: all 200ms ease-in-out;\n      }\n\n      temba-icon.search {\n        margin-right: 1em;\n      }\n\n      temba-datepicker {\n        position: relative;\n      }\n    `;\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.handleInput = this.handleInput.bind(this);\n    this.handleSubmit = this.handleSubmit.bind(this);\n  }\n\n  public handleIconClick(evt: MouseEvent) {\n    const ele = evt.target as HTMLDivElement;\n    const icon = ele.getAttribute('icon-action');\n    const input = this.shadowRoot.querySelector('temba-textinput') as TextInput;\n\n    if (icon === 'copy') {\n      if (navigator.clipboard) {\n        this.iconClass = 'clicked';\n        navigator.clipboard.writeText(input.getDisplayValue()).then(() => {\n          window.setTimeout(() => {\n            this.iconClass = '';\n          }, 300);\n        });\n      }\n    }\n\n    if (icon === 'search') {\n      this.fireCustomEvent(CustomEventType.ButtonClicked, {\n        key: this.key,\n        value: this.value,\n      });\n    }\n\n    evt.preventDefault();\n    evt.stopPropagation();\n  }\n\n  public handleSubmit() {\n    const input = this.shadowRoot.querySelector(\n      'temba-textinput, temba-datepicker'\n    ) as FormElement;\n    if (input.value !== this.value) {\n      this.value = input.value;\n      this.fireEvent('change');\n    }\n    this.icon = navigator.clipboard ? 'copy' : '';\n  }\n\n  public handleChange(evt: Event) {\n    evt.preventDefault();\n    evt.stopPropagation();\n  }\n\n  public handleInput(evt: KeyboardEvent) {\n    if (evt.key === 'Enter') {\n      const input = evt.currentTarget as TextInput;\n      input.blur();\n    }\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div\n        class=${getClasses({\n          wrapper: true,\n          set: !!this.value,\n          unset: !this.value,\n          disabled: this.disabled,\n        })}\n      >\n        ${this.type === 'datetime'\n          ? html`\n              <temba-datepicker\n                timezone=${this.timezone}\n                value=\"${this.value ? this.value : ''}\"\n                @change=${this.handleSubmit}\n                ?disabled=${this.disabled}\n                time\n              >\n                <div class=\"prefix\" slot=\"prefix\">\n                  <div class=\"name\">${this.name}</div>\n                </div>\n              </temba-datepicker>\n            `\n          : html`\n              <temba-textinput\n                value=\"${this.value ? this.value : ''}\"\n                @blur=${this.handleSubmit}\n                @keydown=${this.handleInput}\n                @change=${this.handleChange}\n                ?disabled=${this.disabled}\n              >\n                <div class=\"prefix\" slot=\"prefix\">\n                  <div class=\"name\">${this.name}</div>\n                </div>\n\n                <div class=\"postfix\">\n                  <div\n                    class=\"popper ${this.iconClass}\"\n                    @click=${this.handleIconClick}\n                  >\n                    ${this.value\n                      ? html`\n                  <temba-icon\n                    class=\"search\"\n                    icon-action=\"search\"\n                    name=\"${Icon.search}\"\n                    animateclick=\"pulse\"\n                  ></temba-icon>\n                  </div>\n                `\n                      : null}\n                    <temba-icon\n                      icon-action=\"copy\"\n                      name=\"${this.icon}\"\n                      animatechange=\"spin\"\n                      animateclick=\"pulse\"\n                    ></temba-icon>\n                  </div>\n                </div>\n              </temba-textinput>\n            `}\n      </div>\n    `;\n  }\n}\n"]}

package/out-tsc/src/contacts/ContactFields.js

@@ -1,18 +1,20 @@
 import { __decorate } from "tslib";
 import { css, html } from 'lit';
 import { property } from 'lit/decorators.js';
-import { postJSON } from '../utils';
+import { getClasses, postJSON } from '../utils';
 import { ContactStoreElement } from './ContactStoreElement';
 const MIN_FOR_FILTER = 10;
 export class ContactFields extends ContactStoreElement {
+    constructor() {
+        super(...arguments);
+        this.disabled = false;
+    }
     static get styles() {
         return css `
       :host {
-        --curvature-widget: 0px;
       }
 
       .fields {
-        box-shadow: var(--widget-box-shadow);
       }
 
       .field {
@@ -63,12 +65,15 @@ export class ContactFields extends ContactStoreElement {
       temba-contact-field {
       }
 
-      .footer {
-        margin-bottom: 0;
+      .toggle {
         display: flex;
         background: #fff;
         align-items: center;
-        margin-top: 0.5em;
+        margin-bottom: 0.5em;
+      }
+
+      .disabled .toggle {
+        display: none;
       }
     `;
     }
@@ -129,26 +134,31 @@ export class ContactFields extends ContactStoreElement {
           type=${field.value_type}
           @change=${this.handleFieldChanged}
           timezone=${this.timezone}
+          ?disabled=${this.disabled}
         ></temba-contact-field>`;
             });
             return html `
-        <div class="fields ${this.showAll || this.featured ? 'show-all' : ''}">
-          ${fields}
-        </div>
-
-        ${!this.featured &&
+        <div class=${getClasses({ disabled: this.disabled })}>
+          ${!this.featured &&
                 Object.keys(this.data.fields).length >= MIN_FOR_FILTER
-                ? html `<div class="footer">
-              <div style="flex-grow: 1"></div>
-              <div>
-                <temba-checkbox
-                  ?checked=${this.showAll}
-                  @change=${this.handleToggle}
-                  label="Show All"
-                />
-              </div>
-            </div>`
+                ? html `<div class="toggle">
+                <div style="flex-grow: 1"></div>
+                <div>
+                  <temba-checkbox
+                    ?checked=${this.showAll}
+                    @change=${this.handleToggle}
+                    label="Show All"
+                  />
+                </div>
+              </div>`
                 : null}
+
+          <div
+            class="fields ${this.showAll || this.featured ? 'show-all' : ''}"
+          >
+            ${fields}
+          </div>
+        </div>
       `;
         }
         return super.render();
@@ -169,4 +179,7 @@ __decorate([
 __decorate([
     property({ type: String })
 ], ContactFields.prototype, "timezone", void 0);
+__decorate([
+    property({ type: Boolean })
+], ContactFields.prototype, "disabled", void 0);
 //# sourceMappingURL=ContactFields.js.map

package/out-tsc/src/contacts/ContactFields.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContactFields.js","sourceRoot":"","sources":["../../../src/contacts/ContactFields.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { postJSON } from '../utils';\nimport { ContactFieldEditor } from './ContactFieldEditor';\nimport { ContactStoreElement } from './ContactStoreElement';\nimport { Checkbox } from '../checkbox/Checkbox';\n\nconst MIN_FOR_FILTER = 10;\n\nexport class ContactFields extends ContactStoreElement {\n  static get styles() {\n    return css`\n      :host {\n        --curvature-widget: 0px;\n      }\n\n      .fields {\n        box-shadow: var(--widget-box-shadow);\n      }\n\n      .field {\n        display: flex;\n        margin: 0.3em 0.3em;\n        box-shadow: 0 0 0.2em rgba(0, 0, 0, 0.15);\n        border-radius: 0px;\n        align-items: center;\n        overflow: hidden;\n      }\n\n      .show-all .unset {\n        display: block;\n      }\n\n      .unset {\n        display: none;\n      }\n\n      .field:hover {\n        box-shadow: 1px 1px 6px 2px rgba(0, 0, 0, 0.05),\n          0px 0px 0px 2px var(--color-link-primary);\n        cursor: pointer;\n      }\n\n      .label {\n        padding: 0.25em 1em;\n        border-top-left-radius: 0px;\n        border-bottom-left-radius: 0px;\n        color: #777;\n        font-size: 0.9em;\n        font-weight: 400;\n        box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1) inset;\n      }\n\n      .value {\n        --icon-color: #ddd;\n        max-width: 150px;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        padding: 0.25em 1em;\n        border-top-right-radius: 0px;\n        border-bottom-right-radius: 0px;\n        font-size: 0.9em;\n      }\n\n      temba-contact-field {\n      }\n\n      .footer {\n        margin-bottom: 0;\n        display: flex;\n        background: #fff;\n        align-items: center;\n        margin-top: 0.5em;\n      }\n    `;\n  }\n\n  @property({ type: Boolean })\n  featured: boolean;\n\n  @property({ type: Boolean })\n  system: boolean;\n\n  @property({ type: Boolean })\n  dirty: boolean;\n\n  @property({ type: Boolean })\n  showAll: boolean;\n\n  @property({ type: String })\n  timezone: string;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.handleFieldChanged = this.handleFieldChanged.bind(this);\n  }\n\n  protected updated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.updated(changes);\n    if (changes.has('data')) {\n      if (Object.keys(this.data.fields).length <= MIN_FOR_FILTER) {\n        this.showAll = true;\n      }\n    }\n  }\n\n  public handleFieldChanged(evt: InputEvent) {\n    const field = evt.currentTarget as ContactFieldEditor;\n    const value = field.value;\n    postJSON('/api/v2/contacts.json?uuid=' + this.data.uuid, {\n      fields: { [field.key]: value },\n    }).then((response: any) => {\n      // returns a single contact with latest updates\n      this.setContact(response.json);\n    });\n  }\n\n  public handleToggle(evt: Event) {\n    const checkbox = evt.currentTarget as Checkbox;\n    this.showAll = checkbox.checked;\n  }\n\n  public render(): TemplateResult {\n    if (this.data) {\n      const fieldsToShow = Object.entries(this.data.fields)\n        .filter((entry: [string, string]) => {\n          return (\n            (this.featured && this.store.getContactField(entry[0]).featured) ||\n            (!this.featured && !this.store.getContactField(entry[0]).featured)\n          );\n        })\n        .sort((a: [string, string], b: [string, string]) => {\n          const [ak] = a;\n          const [bk] = b;\n          const priority =\n            this.store.getContactField(bk).priority -\n            this.store.getContactField(ak).priority;\n          if (priority !== 0) {\n            return priority;\n          }\n\n          return ak.localeCompare(bk);\n        });\n\n      if (fieldsToShow.length == 0) {\n        return html`<slot name=\"empty\"></slot>`;\n      }\n\n      const fields = fieldsToShow.map((entry: [string, string]) => {\n        const [k, v] = entry;\n        const field = this.store.getContactField(k);\n        return html`<temba-contact-field\n          class=${v ? 'set' : 'unset'}\n          key=${field.key}\n          name=${field.label}\n          value=${v}\n          type=${field.value_type}\n          @change=${this.handleFieldChanged}\n          timezone=${this.timezone}\n        ></temba-contact-field>`;\n      });\n\n      return html`\n        <div class=\"fields ${this.showAll || this.featured ? 'show-all' : ''}\">\n          ${fields}\n        </div>\n\n        ${!this.featured &&\n        Object.keys(this.data.fields).length >= MIN_FOR_FILTER\n          ? html`<div class=\"footer\">\n              <div style=\"flex-grow: 1\"></div>\n              <div>\n                <temba-checkbox\n                  ?checked=${this.showAll}\n                  @change=${this.handleToggle}\n                  label=\"Show All\"\n                />\n              </div>\n            </div>`\n          : null}\n      `;\n    }\n\n    return super.render();\n  }\n}\n"]}
+{"version":3,"file":"ContactFields.js","sourceRoot":"","sources":["../../../src/contacts/ContactFields.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { getClasses, postJSON } from '../utils';\nimport { ContactFieldEditor } from './ContactFieldEditor';\nimport { ContactStoreElement } from './ContactStoreElement';\nimport { Checkbox } from '../checkbox/Checkbox';\n\nconst MIN_FOR_FILTER = 10;\n\nexport class ContactFields extends ContactStoreElement {\n  static get styles() {\n    return css`\n      :host {\n      }\n\n      .fields {\n      }\n\n      .field {\n        display: flex;\n        margin: 0.3em 0.3em;\n        box-shadow: 0 0 0.2em rgba(0, 0, 0, 0.15);\n        border-radius: 0px;\n        align-items: center;\n        overflow: hidden;\n      }\n\n      .show-all .unset {\n        display: block;\n      }\n\n      .unset {\n        display: none;\n      }\n\n      .field:hover {\n        box-shadow: 1px 1px 6px 2px rgba(0, 0, 0, 0.05),\n          0px 0px 0px 2px var(--color-link-primary);\n        cursor: pointer;\n      }\n\n      .label {\n        padding: 0.25em 1em;\n        border-top-left-radius: 0px;\n        border-bottom-left-radius: 0px;\n        color: #777;\n        font-size: 0.9em;\n        font-weight: 400;\n        box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1) inset;\n      }\n\n      .value {\n        --icon-color: #ddd;\n        max-width: 150px;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        padding: 0.25em 1em;\n        border-top-right-radius: 0px;\n        border-bottom-right-radius: 0px;\n        font-size: 0.9em;\n      }\n\n      temba-contact-field {\n      }\n\n      .toggle {\n        display: flex;\n        background: #fff;\n        align-items: center;\n        margin-bottom: 0.5em;\n      }\n\n      .disabled .toggle {\n        display: none;\n      }\n    `;\n  }\n\n  @property({ type: Boolean })\n  featured: boolean;\n\n  @property({ type: Boolean })\n  system: boolean;\n\n  @property({ type: Boolean })\n  dirty: boolean;\n\n  @property({ type: Boolean })\n  showAll: boolean;\n\n  @property({ type: String })\n  timezone: string;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.handleFieldChanged = this.handleFieldChanged.bind(this);\n  }\n\n  protected updated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.updated(changes);\n    if (changes.has('data')) {\n      if (Object.keys(this.data.fields).length <= MIN_FOR_FILTER) {\n        this.showAll = true;\n      }\n    }\n  }\n\n  public handleFieldChanged(evt: InputEvent) {\n    const field = evt.currentTarget as ContactFieldEditor;\n    const value = field.value;\n    postJSON('/api/v2/contacts.json?uuid=' + this.data.uuid, {\n      fields: { [field.key]: value },\n    }).then((response: any) => {\n      // returns a single contact with latest updates\n      this.setContact(response.json);\n    });\n  }\n\n  public handleToggle(evt: Event) {\n    const checkbox = evt.currentTarget as Checkbox;\n    this.showAll = checkbox.checked;\n  }\n\n  public render(): TemplateResult {\n    if (this.data) {\n      const fieldsToShow = Object.entries(this.data.fields)\n        .filter((entry: [string, string]) => {\n          return (\n            (this.featured && this.store.getContactField(entry[0]).featured) ||\n            (!this.featured && !this.store.getContactField(entry[0]).featured)\n          );\n        })\n        .sort((a: [string, string], b: [string, string]) => {\n          const [ak] = a;\n          const [bk] = b;\n          const priority =\n            this.store.getContactField(bk).priority -\n            this.store.getContactField(ak).priority;\n          if (priority !== 0) {\n            return priority;\n          }\n\n          return ak.localeCompare(bk);\n        });\n\n      if (fieldsToShow.length == 0) {\n        return html`<slot name=\"empty\"></slot>`;\n      }\n\n      const fields = fieldsToShow.map((entry: [string, string]) => {\n        const [k, v] = entry;\n        const field = this.store.getContactField(k);\n        return html`<temba-contact-field\n          class=${v ? 'set' : 'unset'}\n          key=${field.key}\n          name=${field.label}\n          value=${v}\n          type=${field.value_type}\n          @change=${this.handleFieldChanged}\n          timezone=${this.timezone}\n          ?disabled=${this.disabled}\n        ></temba-contact-field>`;\n      });\n\n      return html`\n        <div class=${getClasses({ disabled: this.disabled })}>\n          ${!this.featured &&\n          Object.keys(this.data.fields).length >= MIN_FOR_FILTER\n            ? html`<div class=\"toggle\">\n                <div style=\"flex-grow: 1\"></div>\n                <div>\n                  <temba-checkbox\n                    ?checked=${this.showAll}\n                    @change=${this.handleToggle}\n                    label=\"Show All\"\n                  />\n                </div>\n              </div>`\n            : null}\n\n          <div\n            class=\"fields ${this.showAll || this.featured ? 'show-all' : ''}\"\n          >\n            ${fields}\n          </div>\n        </div>\n      `;\n    }\n\n    return super.render();\n  }\n}\n"]}