@nyaruka/temba-components 0.53.4 → 0.54.0

package/dist/sw.js

@@ -1,2 +1,2 @@
-if(!self.define){let e,t={};const o=(o,n)=>(o=new URL(o+".js",n).href,t[o]||new Promise((t=>{if("document"in self){const e=document.createElement("script");e.src=o,e.onload=t,document.head.appendChild(e)}else e=o,importScripts(o),t()})).then((()=>{let e=t[o];if(!e)throw new Error(`Module ${o} didn’t register its module`);return e})));self.define=(n,s)=>{const i=e||("document"in self?document.currentScript.src:"")||location.href;if(t[i])return;let r={};const f=e=>o(e,i),c={module:{uri:i},exports:r,require:f};t[i]=Promise.all(n.map((e=>c[e]||f(e)))).then((e=>(s(...e),r)))}}define(["./workbox-919adfb7"],(function(e){"use strict";self.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"ac762c4d.js",revision:"defc65bb296f3dcf664306d1596e1c7e"},{url:"templates/components-body.html",revision:"223f4ac8434dd7f9991db0ff923c4588"},{url:"templates/components-head.html",revision:"4a63f772e6af7f2ff48707edee46cb6d"}],{}),e.registerRoute(new e.NavigationRoute(e.createHandlerBoundToURL("/index.html"))),e.registerRoute("polyfills/*.js",new e.CacheFirst,"GET")}));
+if(!self.define){let e,t={};const o=(o,n)=>(o=new URL(o+".js",n).href,t[o]||new Promise((t=>{if("document"in self){const e=document.createElement("script");e.src=o,e.onload=t,document.head.appendChild(e)}else e=o,importScripts(o),t()})).then((()=>{let e=t[o];if(!e)throw new Error(`Module ${o} didn’t register its module`);return e})));self.define=(n,s)=>{const i=e||("document"in self?document.currentScript.src:"")||location.href;if(t[i])return;let r={};const l=e=>o(e,i),c={module:{uri:i},exports:r,require:l};t[i]=Promise.all(n.map((e=>c[e]||l(e)))).then((e=>(s(...e),r)))}}define(["./workbox-919adfb7"],(function(e){"use strict";self.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"9e03337b.js",revision:"572ea7478a12fc349caaafa984a3483c"},{url:"templates/components-body.html",revision:"e0067460a9d51678ec8972930bfd11d0"},{url:"templates/components-head.html",revision:"17618c09de1da890cf8f871d6927ce54"}],{}),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/dc5095fa5a58f7cd8d23a34e422ebe74/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\": \"ac762c4d.js\",\n    \"revision\": \"defc65bb296f3dcf664306d1596e1c7e\"\n  },\n  {\n    \"url\": \"templates/components-body.html\",\n    \"revision\": \"223f4ac8434dd7f9991db0ff923c4588\"\n  },\n  {\n    \"url\": \"templates/components-head.html\",\n    \"revision\": \"4a63f772e6af7f2ff48707edee46cb6d\"\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/1143aee02c07868d87720826144a3568/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\": \"9e03337b.js\",\n    \"revision\": \"572ea7478a12fc349caaafa984a3483c\"\n  },\n  {\n    \"url\": \"templates/components-body.html\",\n    \"revision\": \"e0067460a9d51678ec8972930bfd11d0\"\n  },\n  {\n    \"url\": \"templates/components-head.html\",\n    \"revision\": \"17618c09de1da890cf8f871d6927ce54\"\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/ac762c4d.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.53.4"</script>
+<script type="module" src="{{STATIC_URL}}@nyaruka/temba-components/dist/9e03337b.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.54.0"</script>

package/dist/templates/components-head.html

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

package/localize.config.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://raw.githubusercontent.com/lit/lit/main/packages/localize-tools/config.schema.json",
+  "sourceLocale": "en",
+  "targetLocales": ["es", "fr", "pt"],
+  "tsConfig": "./tsconfig.json",
+  "output": {
+    "mode": "runtime",
+    "outputDir": "./src/locales",
+    "localeCodesModule": "./src/locales/locale-codes.ts"
+  },
+  "interchange": {
+    "format": "xliff",
+    "xliffDir": "./xliff/"
+  }
+}

package/out-tsc/src/FormElement.js

@@ -7,70 +7,30 @@ import { property } from 'lit/decorators.js';
  */
 export class FormElement extends RapidElement {
     constructor() {
-        super(...arguments);
-        this.hiddenInputs = [];
+        super();
         this.name = '';
-        this.values = [];
-        this.value = '';
+        this.value = null;
         this.inputRoot = this;
         this.disabled = false;
+        this.internals = this.attachInternals();
     }
-    setValue(value) {
-        if (!value) {
-            this.setValues([]);
-        }
-        else {
-            this.setValues([value]);
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('value')) {
+            this.internals.setFormValue(this.value);
         }
-        this.value = value;
-    }
-    setValues(values) {
-        this.values = values;
-        this.requestUpdate('values');
     }
-    addValue(value) {
-        this.values.push(value);
-        this.requestUpdate('values');
+    get form() {
+        return this.internals.form;
     }
-    removeValue(valueToRemove) {
-        this.values = this.values.filter((value) => value !== valueToRemove);
-        this.requestUpdate('values');
-    }
-    popValue() {
-        this.values.pop();
-        this.requestUpdate('values');
-    }
-    clear() {
-        this.values = [];
-        this.requestUpdate('values');
+    get type() {
+        return this.localName;
     }
     serializeValue(value) {
         return JSON.stringify(value);
     }
-    updateInputs() {
-        for (let ele = null; (ele = this.hiddenInputs.pop());) {
-            ele.remove();
-        }
-        for (const value of this.values) {
-            const name = this.getAttribute('name');
-            if (name) {
-                const ele = document.createElement('input');
-                ele.setAttribute('type', 'hidden');
-                ele.setAttribute('name', name);
-                ele.setAttribute('value', this.serializeValue(value));
-                this.hiddenInputs.push(ele);
-                this.inputRoot.parentElement.appendChild(ele);
-            }
-        }
-    }
-    updated(changedProperties) {
-        super.updated(changedProperties);
-        // if our cursor changed, lets make sure our scrollbox is showing it
-        if (changedProperties.has('values')) {
-            this.updateInputs();
-        }
-    }
 }
+FormElement.formAssociated = true;
 __decorate([
     property({ type: String })
 ], FormElement.prototype, "name", void 0);
@@ -92,9 +52,6 @@ __decorate([
 __decorate([
     property({ type: Array })
 ], FormElement.prototype, "errors", void 0);
-__decorate([
-    property({ type: Array })
-], FormElement.prototype, "values", void 0);
 __decorate([
     property({ type: String })
 ], FormElement.prototype, "value", void 0);

package/out-tsc/src/FormElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormElement.js","sourceRoot":"","sources":["../../src/FormElement.ts"],"names":[],"mappings":"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","sourcesContent":["import { RapidElement } from './RapidElement';\nimport { property } from 'lit/decorators.js';\n\n/**\n * FormElement is a component that appends a hidden input (outside of\n * its own shadow) with its value to be included in forms.\n */\nexport class FormElement extends RapidElement {\n  private hiddenInputs: HTMLInputElement[] = [];\n\n  @property({ type: String })\n  name = '';\n\n  @property({ type: String, attribute: 'help_text' })\n  helpText: string;\n\n  @property({ type: Boolean, attribute: 'help_always' })\n  helpAlways: boolean;\n\n  @property({ type: Boolean, attribute: 'widget_only' })\n  widgetOnly: boolean;\n\n  @property({ type: Boolean, attribute: 'hide_label' })\n  hideLabel: boolean;\n\n  @property({ type: String })\n  label: string;\n\n  @property({ type: Array })\n  errors: string[];\n\n  @property({ type: Array })\n  values: any[] = [];\n\n  @property({ type: String })\n  value = '';\n\n  @property({ attribute: false })\n  inputRoot: HTMLElement = this;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  public setValue(value: any) {\n    if (!value) {\n      this.setValues([]);\n    } else {\n      this.setValues([value]);\n    }\n    this.value = value;\n  }\n\n  public setValues(values: any[]) {\n    this.values = values;\n    this.requestUpdate('values');\n  }\n\n  public addValue(value: any) {\n    this.values.push(value);\n    this.requestUpdate('values');\n  }\n\n  public removeValue(valueToRemove: any) {\n    this.values = this.values.filter((value: any) => value !== valueToRemove);\n    this.requestUpdate('values');\n  }\n\n  public popValue() {\n    this.values.pop();\n    this.requestUpdate('values');\n  }\n\n  public clear() {\n    this.values = [];\n    this.requestUpdate('values');\n  }\n\n  public serializeValue(value: any): string {\n    return JSON.stringify(value);\n  }\n\n  private updateInputs(): void {\n    for (let ele = null; (ele = this.hiddenInputs.pop()); ) {\n      ele.remove();\n    }\n\n    for (const value of this.values) {\n      const name = this.getAttribute('name');\n      if (name) {\n        const ele = document.createElement('input');\n        ele.setAttribute('type', 'hidden');\n        ele.setAttribute('name', name);\n        ele.setAttribute('value', this.serializeValue(value));\n        this.hiddenInputs.push(ele);\n        this.inputRoot.parentElement.appendChild(ele);\n      }\n    }\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('values')) {\n      this.updateInputs();\n    }\n  }\n}\n"]}
+{"version":3,"file":"FormElement.js","sourceRoot":"","sources":["../../src/FormElement.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C;;;GAGG;AACH,MAAM,OAAO,WAAY,SAAQ,YAAY;IAmC3C;QACE,KAAK,EAAE,CAAC;QAlCV,SAAI,GAAG,EAAE,CAAC;QAqBV,UAAK,GAAG,IAAI,CAAC;QAGb,cAAS,GAAgB,IAAI,CAAC;QAG9B,aAAQ,GAAG,KAAK,CAAC;QAQf,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;IAC1C,CAAC;IAEM,OAAO,CAAC,iBAAmC;QAChD,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QACjC,IAAI,iBAAiB,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;YAClC,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SACzC;IACH,CAAC;IAED,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;IAC7B,CAAC;IAED,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,SAAS,CAAC;IACxB,CAAC;IAEM,cAAc,CAAC,KAAU;QAC9B,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAC/B,CAAC;;AA1BM,0BAAc,GAAG,IAAI,CAAC;AA7B7B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;6CAClC;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;+CAClC;AAGpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;+CAClC;AAGpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;8CAClC;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACb;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;2CACT;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACd;AAGb;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;8CACD;AAG9B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CACX","sourcesContent":["import { RapidElement } from './RapidElement';\nimport { property } from 'lit/decorators.js';\n\n/**\n * FormElement is a component that appends a hidden input (outside of\n * its own shadow) with its value to be included in forms.\n */\nexport class FormElement extends RapidElement {\n  @property({ type: String })\n  name = '';\n\n  @property({ type: String, attribute: 'help_text' })\n  helpText: string;\n\n  @property({ type: Boolean, attribute: 'help_always' })\n  helpAlways: boolean;\n\n  @property({ type: Boolean, attribute: 'widget_only' })\n  widgetOnly: boolean;\n\n  @property({ type: Boolean, attribute: 'hide_label' })\n  hideLabel: boolean;\n\n  @property({ type: String })\n  label: string;\n\n  @property({ type: Array })\n  errors: string[];\n\n  @property({ type: String })\n  value = null;\n\n  @property({ attribute: false })\n  inputRoot: HTMLElement = this;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  static formAssociated = true;\n\n  private internals: ElementInternals;\n\n  constructor() {\n    super();\n    this.internals = this.attachInternals();\n  }\n\n  public updated(changedProperties: Map<string, any>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('value')) {\n      this.internals.setFormValue(this.value);\n    }\n  }\n\n  get form() {\n    return this.internals.form;\n  }\n\n  get type() {\n    return this.localName;\n  }\n\n  public serializeValue(value: any): string {\n    return JSON.stringify(value);\n  }\n}\n"]}

package/out-tsc/src/aliaseditor/AliasEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"AliasEditor.js","sourceRoot":"","sources":["../../../src/aliaseditor/AliasEditor.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, TemplateResult } from 'lit';\nimport { FeatureProperties } from '../interfaces';\nimport { getUrl, postJSON, WebResponse } from '../utils';\nimport { TextInput } from '../textinput/TextInput';\nimport { styleMap } from 'lit-html/directives/style-map.js';\nimport { FormElement } from '../FormElement';\nimport { Icon } from '../vectoricon';\n\nimport { property } from 'lit/decorators.js';\n\nexport class AliasEditor extends LitElement {\n  static get styles() {\n    return css`\n      :host {\n        line-height: normal;\n      }\n\n      temba-textinput {\n        height: 150px;\n      }\n\n      #left-column {\n        display: inline-block;\n        margin-left: 10px;\n        width: 300px;\n        z-index: 100;\n      }\n\n      .search {\n        margin-bottom: 10px;\n      }\n\n      .feature {\n        padding: 4px 14px;\n        font-size: 16px;\n      }\n\n      .level-0 {\n        margin-left: 0px;\n      }\n\n      .level-1 {\n        margin-left: 5px;\n        font-size: 95%;\n      }\n\n      .level-2 {\n        margin-left: 10px;\n        font-size: 90%;\n      }\n\n      .level-3 {\n        margin-left: 15px;\n        font-size: 85%;\n      }\n\n      .feature-name {\n        display: inline-block;\n      }\n\n      .clickable {\n        text-decoration: none;\n        cursor: pointer;\n        color: var(--color-link-primary);\n      }\n\n      .clickable.secondary {\n        color: var(--color-link-secondary);\n      }\n\n      .clickable:hover {\n        text-decoration: underline;\n        color: var(--color-link-primary-hover);\n      }\n\n      .feature:hover .showonhover {\n        visibility: visible;\n      }\n\n      .showonhover {\n        visibility: hidden;\n      }\n\n      .aliases {\n        color: #bbb;\n        font-size: 80%;\n        display: inline;\n        margin-left: 5px;\n      }\n\n      temba-label {\n        margin-right: 3px;\n        margin-bottom: 3px;\n        vertical-align: top;\n      }\n\n      .selected {\n        display: flex;\n        flex-direction: column;\n        padding: 15px;\n        padding-bottom: 40px;\n      }\n\n      .selected .name {\n        font-size: 18px;\n        padding: 5px;\n      }\n\n      .selected .help {\n        padding: 5px 2px;\n        font-size: 11px;\n        color: var(--color-secondary-light);\n      }\n\n      #right-column {\n        vertical-align: top;\n        margin-left: 20px;\n        display: inline-block;\n      }\n\n      leaflet-map {\n        height: 250px;\n        width: 450px;\n        border: 0px solid #999;\n        border-radius: var(--curvature);\n      }\n\n      .edit {\n        display: inline-block;\n        margin-right: 0px;\n      }\n    `;\n  }\n\n  @property({ type: Array, attribute: false })\n  path: FeatureProperties[] = [];\n\n  @property()\n  endpoint: string;\n\n  @property()\n  osmId: string;\n\n  @property({ type: Object })\n  hovered: FeatureProperties;\n\n  @property({ type: Object })\n  editFeature: FeatureProperties;\n\n  @property({ type: String, attribute: false })\n  editFeatureAliases: string;\n\n  public constructor() {\n    super();\n  }\n\n  public updated(changedProperties: Map<string, any>) {\n    if (changedProperties.has('osmId')) {\n      // going up the tree doesn't require a fetch\n      const newPath = [];\n      for (const feature of this.path) {\n        newPath.push(feature);\n        if (feature.osm_id === this.osmId) {\n          this.path = [...newPath];\n          this.hideAliasDialog();\n          return;\n        }\n      }\n\n      this.fetchFeature();\n    }\n  }\n\n  private fetchFeature() {\n    getUrl(this.getEndpoint() + 'boundaries/' + this.osmId + '/').then(\n      (response: WebResponse) => {\n        this.path = response.json as FeatureProperties[];\n        this.hideAliasDialog();\n      }\n    );\n  }\n\n  private handleMapClicked(feature: FeatureProperties): void {\n    this.hovered = null;\n    if (!feature || feature.osm_id !== this.osmId) {\n      this.osmId = feature.osm_id;\n    }\n  }\n\n  private handlePlaceClicked(feature: FeatureProperties) {\n    this.osmId = feature.osm_id;\n  }\n\n  private handleSearchSelection(evt: CustomEvent) {\n    const selection = evt.detail.selected as FeatureProperties;\n    this.showAliasDialog(selection);\n    const select = this.shadowRoot.querySelector('temba-select') as FormElement;\n    select.clear();\n  }\n\n  private isMatch(option: any, query: string) {\n    return `${option.name} ${option.aliases}`.toLowerCase().indexOf(query) > -1;\n  }\n\n  private renderFeature(\n    feature: FeatureProperties,\n    remainingPath: FeatureProperties[]\n  ): TemplateResult {\n    const selectedFeature = this.path[this.path.length - 1];\n    const clickable =\n      (feature.has_children || feature.level === 0) &&\n      feature !== selectedFeature;\n    const renderedFeature = html`\n      <div class=\"feature\">\n        <div\n          @mouseover=${() => {\n            if (feature.level > 0) {\n              this.hovered = feature;\n            }\n          }}\n          @mouseout=${() => {\n            this.hovered = null;\n          }}\n          class=\"level-${feature.level}\"\n        >\n          <div\n            class=\"feature-name ${clickable ? 'clickable' : ''}\"\n            @click=${() => {\n              if (clickable) {\n                this.handlePlaceClicked(feature);\n              }\n            }}\n          >\n            ${feature.name}\n          </div>\n\n          <div class=\"aliases\">\n            ${feature.aliases.split('\\n').map((alias: string) =>\n              alias.trim().length > 0\n                ? html`\n                    <temba-label\n                      class=\"alias\"\n                      @click=${() => {\n                        this.showAliasDialog(feature);\n                      }}\n                      light\n                      clickable\n                      >${alias}</temba-label\n                    >\n                  `\n                : null\n            )}\n            ${feature.level > 0\n              ? html`\n                  <div\n                    class=\"edit clickable showonhover\"\n                    @click=${(evt: MouseEvent) => {\n                      this.showAliasDialog(feature);\n                      evt.preventDefault();\n                      evt.stopPropagation();\n                    }}\n                  >\n                    <temba-icon name=\"${Icon.updated}\" />\n                  </div>\n                `\n              : ''}\n          </div>\n        </div>\n      </div>\n    `;\n\n    const renderedChildren = (feature.children || []).map(\n      (child: FeatureProperties) => {\n        if (\n          remainingPath.length > 0 &&\n          remainingPath[0].osm_id === child.osm_id\n        ) {\n          return this.renderFeature(remainingPath[0], remainingPath.slice(1));\n        }\n\n        if (\n          remainingPath.length === 0 ||\n          remainingPath[0].children.length === 0\n        ) {\n          return this.renderFeature(child, remainingPath);\n        }\n\n        return null;\n      }\n    );\n\n    return html` ${renderedFeature} ${renderedChildren} `;\n  }\n\n  public showAliasDialog(feature: FeatureProperties) {\n    this.editFeatureAliases = feature.aliases;\n    this.editFeature = feature;\n    const aliasDialog = this.shadowRoot.getElementById('alias-dialog');\n    if (aliasDialog) {\n      aliasDialog.setAttribute('open', '');\n    }\n  }\n\n  public hideAliasDialog() {\n    const aliasDialog = this.shadowRoot.getElementById('alias-dialog');\n    this.editFeature = null;\n    this.editFeatureAliases = null;\n    if (aliasDialog) {\n      aliasDialog.removeAttribute('open');\n    }\n\n    this.requestUpdate();\n  }\n\n  private getEndpoint(): string {\n    return this.endpoint + (!this.endpoint.endsWith('/') ? '/' : '');\n  }\n\n  private handleDialogClick(evt: CustomEvent) {\n    const button = evt.detail.button;\n    if (button.name === 'Save') {\n      const textarea = this.shadowRoot.getElementById(\n        this.editFeature.osm_id\n      ) as TextInput;\n      const aliases = textarea.inputElement.value;\n      const payload = { osm_id: this.editFeature.osm_id, aliases };\n      postJSON(\n        this.getEndpoint() + 'boundaries/' + this.editFeature.osm_id + '/',\n        payload\n      ).then(() => {\n        this.fetchFeature();\n      });\n    }\n\n    if (button.name === 'Cancel') {\n      this.hideAliasDialog();\n    }\n  }\n\n  private getOptions(response: WebResponse) {\n    return response.json.filter((option: any) => option.level > 0);\n  }\n\n  private getOptionsComplete(newestOptions: FeatureProperties[]) {\n    return newestOptions.length === 0;\n  }\n\n  private renderOptionDetail(option: FeatureProperties): TemplateResult {\n    const labelStyles = {\n      marginTop: '3px',\n      marginRight: '3px',\n    };\n\n    const aliasList = option.aliases.split('\\n');\n    const aliases = aliasList.map((alias: string) =>\n      alias.trim().length > 0\n        ? html`\n            <temba-label style=${styleMap(labelStyles)} class=\"alias\" dark\n              >${alias}</temba-label\n            >\n          `\n        : null\n    );\n    return html`\n      <div class=\"path\">${option.path.replace(/>/gi, '‣')}</div>\n      <div class=\"aliases\">${aliases}</div>\n    `;\n  }\n\n  public render(): TemplateResult {\n    if (this.path.length === 0) {\n      return html``;\n    }\n\n    // if we are a leaf, have our map show the level above\n    const selectedFeature = this.path[this.path.length - 1];\n    const mapFeature =\n      selectedFeature.children.length === 0\n        ? this.path[this.path.length - 2]\n        : selectedFeature;\n\n    const editFeatureId = this.editFeature ? this.editFeature.osm_id : null;\n    const editFeatureName = this.editFeature ? this.editFeature.name : null;\n\n    return html`\n      <div id=\"left-column\">\n        <div class=\"search\">\n          <temba-select\n            placeholder=\"Search\"\n            endpoint=\"${this.getEndpoint()}boundaries/${this.path[0].osm_id}/?\"\n            .renderOptionDetail=${this.renderOptionDetail}\n            .getOptions=${this.getOptions}\n            .isComplete=${this.getOptionsComplete}\n            .isMatch=${this.isMatch}\n            @temba-selection=${this.handleSearchSelection.bind(this)}\n            queryParam=\"q\"\n            searchable\n          ></temba-select>\n        </div>\n        <div class=\"feature-tree\">\n          ${this.renderFeature(this.path[0], this.path.slice(1))}\n        </div>\n      </div>\n\n      <div id=\"right-column\">\n        <leaflet-map\n          endpoint=${this.getEndpoint()}\n          .feature=${mapFeature}\n          .osmId=${mapFeature.osm_id}\n          .hovered=${this.hovered}\n          .onFeatureClicked=${this.handleMapClicked.bind(this)}\n        >\n        </leaflet-map>\n      </div>\n\n      <temba-dialog\n        id=\"alias-dialog\"\n        header=\"Aliases for ${editFeatureName}\"\n        primaryButtonName=\"Save\"\n        @temba-button-clicked=${this.handleDialogClick.bind(this)}\n      >\n        <div class=\"selected\">\n          <temba-textinput\n            .helpText=\"Enter other aliases for ${editFeatureName}, one per line\"\n            name=\"aliases\"\n            id=${editFeatureId}\n            .value=${this.editFeatureAliases}\n            textarea\n          ></temba-textinput>\n        </div>\n      </temba-dialog>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"AliasEditor.js","sourceRoot":"","sources":["../../../src/aliaseditor/AliasEditor.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, TemplateResult } from 'lit';\nimport { FeatureProperties } from '../interfaces';\nimport { getUrl, postJSON, WebResponse } from '../utils';\nimport { TextInput } from '../textinput/TextInput';\nimport { styleMap } from 'lit-html/directives/style-map.js';\nimport { FormElement } from '../FormElement';\nimport { Icon } from '../vectoricon';\n\nimport { property } from 'lit/decorators.js';\nimport { Select } from '../select/Select';\n\nexport class AliasEditor extends LitElement {\n  static get styles() {\n    return css`\n      :host {\n        line-height: normal;\n      }\n\n      temba-textinput {\n        height: 150px;\n      }\n\n      #left-column {\n        display: inline-block;\n        margin-left: 10px;\n        width: 300px;\n        z-index: 100;\n      }\n\n      .search {\n        margin-bottom: 10px;\n      }\n\n      .feature {\n        padding: 4px 14px;\n        font-size: 16px;\n      }\n\n      .level-0 {\n        margin-left: 0px;\n      }\n\n      .level-1 {\n        margin-left: 5px;\n        font-size: 95%;\n      }\n\n      .level-2 {\n        margin-left: 10px;\n        font-size: 90%;\n      }\n\n      .level-3 {\n        margin-left: 15px;\n        font-size: 85%;\n      }\n\n      .feature-name {\n        display: inline-block;\n      }\n\n      .clickable {\n        text-decoration: none;\n        cursor: pointer;\n        color: var(--color-link-primary);\n      }\n\n      .clickable.secondary {\n        color: var(--color-link-secondary);\n      }\n\n      .clickable:hover {\n        text-decoration: underline;\n        color: var(--color-link-primary-hover);\n      }\n\n      .feature:hover .showonhover {\n        visibility: visible;\n      }\n\n      .showonhover {\n        visibility: hidden;\n      }\n\n      .aliases {\n        color: #bbb;\n        font-size: 80%;\n        display: inline;\n        margin-left: 5px;\n      }\n\n      temba-label {\n        margin-right: 3px;\n        margin-bottom: 3px;\n        vertical-align: top;\n      }\n\n      .selected {\n        display: flex;\n        flex-direction: column;\n        padding: 15px;\n        padding-bottom: 40px;\n      }\n\n      .selected .name {\n        font-size: 18px;\n        padding: 5px;\n      }\n\n      .selected .help {\n        padding: 5px 2px;\n        font-size: 11px;\n        color: var(--color-secondary-light);\n      }\n\n      #right-column {\n        vertical-align: top;\n        margin-left: 20px;\n        display: inline-block;\n      }\n\n      leaflet-map {\n        height: 250px;\n        width: 450px;\n        border: 0px solid #999;\n        border-radius: var(--curvature);\n      }\n\n      .edit {\n        display: inline-block;\n        margin-right: 0px;\n      }\n    `;\n  }\n\n  @property({ type: Array, attribute: false })\n  path: FeatureProperties[] = [];\n\n  @property()\n  endpoint: string;\n\n  @property()\n  osmId: string;\n\n  @property({ type: Object })\n  hovered: FeatureProperties;\n\n  @property({ type: Object })\n  editFeature: FeatureProperties;\n\n  @property({ type: String, attribute: false })\n  editFeatureAliases: string;\n\n  public constructor() {\n    super();\n  }\n\n  public updated(changedProperties: Map<string, any>) {\n    if (changedProperties.has('osmId')) {\n      // going up the tree doesn't require a fetch\n      const newPath = [];\n      for (const feature of this.path) {\n        newPath.push(feature);\n        if (feature.osm_id === this.osmId) {\n          this.path = [...newPath];\n          this.hideAliasDialog();\n          return;\n        }\n      }\n\n      this.fetchFeature();\n    }\n  }\n\n  private fetchFeature() {\n    getUrl(this.getEndpoint() + 'boundaries/' + this.osmId + '/').then(\n      (response: WebResponse) => {\n        this.path = response.json as FeatureProperties[];\n        this.hideAliasDialog();\n      }\n    );\n  }\n\n  private handleMapClicked(feature: FeatureProperties): void {\n    this.hovered = null;\n    if (!feature || feature.osm_id !== this.osmId) {\n      this.osmId = feature.osm_id;\n    }\n  }\n\n  private handlePlaceClicked(feature: FeatureProperties) {\n    this.osmId = feature.osm_id;\n  }\n\n  private handleSearchSelection(evt: CustomEvent) {\n    const selection = evt.detail.selected as FeatureProperties;\n    this.showAliasDialog(selection);\n    const select = this.shadowRoot.querySelector('temba-select') as Select;\n    select.clear();\n  }\n\n  private isMatch(option: any, query: string) {\n    return `${option.name} ${option.aliases}`.toLowerCase().indexOf(query) > -1;\n  }\n\n  private renderFeature(\n    feature: FeatureProperties,\n    remainingPath: FeatureProperties[]\n  ): TemplateResult {\n    const selectedFeature = this.path[this.path.length - 1];\n    const clickable =\n      (feature.has_children || feature.level === 0) &&\n      feature !== selectedFeature;\n    const renderedFeature = html`\n      <div class=\"feature\">\n        <div\n          @mouseover=${() => {\n            if (feature.level > 0) {\n              this.hovered = feature;\n            }\n          }}\n          @mouseout=${() => {\n            this.hovered = null;\n          }}\n          class=\"level-${feature.level}\"\n        >\n          <div\n            class=\"feature-name ${clickable ? 'clickable' : ''}\"\n            @click=${() => {\n              if (clickable) {\n                this.handlePlaceClicked(feature);\n              }\n            }}\n          >\n            ${feature.name}\n          </div>\n\n          <div class=\"aliases\">\n            ${feature.aliases.split('\\n').map((alias: string) =>\n              alias.trim().length > 0\n                ? html`\n                    <temba-label\n                      class=\"alias\"\n                      @click=${() => {\n                        this.showAliasDialog(feature);\n                      }}\n                      light\n                      clickable\n                      >${alias}</temba-label\n                    >\n                  `\n                : null\n            )}\n            ${feature.level > 0\n              ? html`\n                  <div\n                    class=\"edit clickable showonhover\"\n                    @click=${(evt: MouseEvent) => {\n                      this.showAliasDialog(feature);\n                      evt.preventDefault();\n                      evt.stopPropagation();\n                    }}\n                  >\n                    <temba-icon name=\"${Icon.updated}\" />\n                  </div>\n                `\n              : ''}\n          </div>\n        </div>\n      </div>\n    `;\n\n    const renderedChildren = (feature.children || []).map(\n      (child: FeatureProperties) => {\n        if (\n          remainingPath.length > 0 &&\n          remainingPath[0].osm_id === child.osm_id\n        ) {\n          return this.renderFeature(remainingPath[0], remainingPath.slice(1));\n        }\n\n        if (\n          remainingPath.length === 0 ||\n          remainingPath[0].children.length === 0\n        ) {\n          return this.renderFeature(child, remainingPath);\n        }\n\n        return null;\n      }\n    );\n\n    return html` ${renderedFeature} ${renderedChildren} `;\n  }\n\n  public showAliasDialog(feature: FeatureProperties) {\n    this.editFeatureAliases = feature.aliases;\n    this.editFeature = feature;\n    const aliasDialog = this.shadowRoot.getElementById('alias-dialog');\n    if (aliasDialog) {\n      aliasDialog.setAttribute('open', '');\n    }\n  }\n\n  public hideAliasDialog() {\n    const aliasDialog = this.shadowRoot.getElementById('alias-dialog');\n    this.editFeature = null;\n    this.editFeatureAliases = null;\n    if (aliasDialog) {\n      aliasDialog.removeAttribute('open');\n    }\n\n    this.requestUpdate();\n  }\n\n  private getEndpoint(): string {\n    return this.endpoint + (!this.endpoint.endsWith('/') ? '/' : '');\n  }\n\n  private handleDialogClick(evt: CustomEvent) {\n    const button = evt.detail.button;\n    if (button.name === 'Save') {\n      const textarea = this.shadowRoot.getElementById(\n        this.editFeature.osm_id\n      ) as TextInput;\n      const aliases = textarea.inputElement.value;\n      const payload = { osm_id: this.editFeature.osm_id, aliases };\n      postJSON(\n        this.getEndpoint() + 'boundaries/' + this.editFeature.osm_id + '/',\n        payload\n      ).then(() => {\n        this.fetchFeature();\n      });\n    }\n\n    if (button.name === 'Cancel') {\n      this.hideAliasDialog();\n    }\n  }\n\n  private getOptions(response: WebResponse) {\n    return response.json.filter((option: any) => option.level > 0);\n  }\n\n  private getOptionsComplete(newestOptions: FeatureProperties[]) {\n    return newestOptions.length === 0;\n  }\n\n  private renderOptionDetail(option: FeatureProperties): TemplateResult {\n    const labelStyles = {\n      marginTop: '3px',\n      marginRight: '3px',\n    };\n\n    const aliasList = option.aliases.split('\\n');\n    const aliases = aliasList.map((alias: string) =>\n      alias.trim().length > 0\n        ? html`\n            <temba-label style=${styleMap(labelStyles)} class=\"alias\" dark\n              >${alias}</temba-label\n            >\n          `\n        : null\n    );\n    return html`\n      <div class=\"path\">${option.path.replace(/>/gi, '‣')}</div>\n      <div class=\"aliases\">${aliases}</div>\n    `;\n  }\n\n  public render(): TemplateResult {\n    if (this.path.length === 0) {\n      return html``;\n    }\n\n    // if we are a leaf, have our map show the level above\n    const selectedFeature = this.path[this.path.length - 1];\n    const mapFeature =\n      selectedFeature.children.length === 0\n        ? this.path[this.path.length - 2]\n        : selectedFeature;\n\n    const editFeatureId = this.editFeature ? this.editFeature.osm_id : null;\n    const editFeatureName = this.editFeature ? this.editFeature.name : null;\n\n    return html`\n      <div id=\"left-column\">\n        <div class=\"search\">\n          <temba-select\n            placeholder=\"Search\"\n            endpoint=\"${this.getEndpoint()}boundaries/${this.path[0].osm_id}/?\"\n            .renderOptionDetail=${this.renderOptionDetail}\n            .getOptions=${this.getOptions}\n            .isComplete=${this.getOptionsComplete}\n            .isMatch=${this.isMatch}\n            @temba-selection=${this.handleSearchSelection.bind(this)}\n            queryParam=\"q\"\n            searchable\n          ></temba-select>\n        </div>\n        <div class=\"feature-tree\">\n          ${this.renderFeature(this.path[0], this.path.slice(1))}\n        </div>\n      </div>\n\n      <div id=\"right-column\">\n        <leaflet-map\n          endpoint=${this.getEndpoint()}\n          .feature=${mapFeature}\n          .osmId=${mapFeature.osm_id}\n          .hovered=${this.hovered}\n          .onFeatureClicked=${this.handleMapClicked.bind(this)}\n        >\n        </leaflet-map>\n      </div>\n\n      <temba-dialog\n        id=\"alias-dialog\"\n        header=\"Aliases for ${editFeatureName}\"\n        primaryButtonName=\"Save\"\n        @temba-button-clicked=${this.handleDialogClick.bind(this)}\n      >\n        <div class=\"selected\">\n          <temba-textinput\n            .helpText=\"Enter other aliases for ${editFeatureName}, one per line\"\n            name=\"aliases\"\n            id=${editFeatureId}\n            .value=${this.editFeatureAliases}\n            textarea\n          ></temba-textinput>\n        </div>\n      </temba-dialog>\n    `;\n  }\n}\n"]}

package/out-tsc/src/checkbox/Checkbox.js

@@ -68,10 +68,10 @@ export class Checkbox extends FormElement {
         super.updated(changes);
         if (changes.has('checked')) {
             if (this.checked || this.partial) {
-                this.setValue(1);
+                this.value = '1';
             }
             else {
-                this.setValue('');
+                this.value = '';
             }
             this.fireEvent('change');
         }

package/out-tsc/src/checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/checkbox/Checkbox.ts"],"names":[],"mappings":";AAAA,OAAO,EAAkB,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAErC,MAAM,OAAO,QAAS,SAAQ,WAAW;IAAzC;;QAwDE,SAAI,GAAG,EAAE,CAAC;QASV,aAAQ,GAAG,KAAK,CAAC;QAGjB,SAAI,GAAG,GAAG,CAAC;QAGX,kBAAa,GAAG,OAAO,CAAC;IAgE1B,CAAC;IAtIC,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkDT,CAAC;IACJ,CAAC;IAoBM,OAAO,CAAC,OAAyB;QACtC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACvB,IAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE;YAC1B,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,EAAE;gBAChC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;aAClB;iBAAM;gBACL,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;aACnB;YAED,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;SAC1B;IACH,CAAC;IAEM,cAAc,CAAC,KAAU;QAC9B,OAAO,KAAK,CAAC;IACf,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;SAC9B;IACH,CAAC;IAEM,KAAK;QACV,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,KAAK,CAAC,KAAK,EAAE,CAAC;IAChB,CAAC;IAEM,MAAM;QACX,MAAM,IAAI,GAAG,IAAI,CAAA;cACP,IAAI,CAAC,OAAO;YAClB,CAAC,CAAC,IAAI,CAAC,gBAAgB;YACvB,CAAC,CAAC,IAAI,CAAC,OAAO;gBACd,CAAC,CAAC,IAAI,CAAC,gBAAgB;gBACvB,CAAC,CAAC,IAAI,CAAC,QAAQ;cACT,IAAI,CAAC,IAAI;uBACA,IAAI,CAAC,aAAa;OAClC,CAAC;QAEJ,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;QAEnD,OAAO,IAAI,CAAA;4BACa,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;;iBAEpC,IAAI,CAAC,IAAI;sBACJ,IAAI,CAAC,QAAQ;oBACf,IAAI,CAAC,MAAM;wBACP,IAAI,CAAC,UAAU;wBACf,IAAI;sBACN,IAAI,CAAC,QAAQ;mBAChB,IAAI,CAAC,WAAW;;2CAEQ,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;cAC5D,IAAI;cACJ,IAAI,CAAC,KAAK;YACV,CAAC,CAAC,IAAI,CAAA,+BAA+B,IAAI,CAAC,KAAK,QAAQ;YACvD,CAAC,CAAC,IAAI;;;;KAIf,CAAC;IACJ,CAAC;CACF;AA/EC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yCACX;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yCACX;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CACX;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAChB;AAGX;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CACH","sourcesContent":["import { TemplateResult, html, css } from 'lit';\nimport { FormElement } from '../FormElement';\nimport { property } from 'lit/decorators.js';\nimport { Icon } from '../vectoricon';\n\nexport class Checkbox extends FormElement {\n  static get styles() {\n    return css`\n      :host {\n        color: var(--color-text);\n        display: inline-block;\n      }\n\n      :host([label]) {\n        width: 100%;\n      }\n\n      .wrapper.label {\n        padding: 10px;\n        border-radius: var(--curvature);\n      }\n\n      .wrapper.label:hover {\n        background: #f9f9f9;\n      }\n\n      temba-field {\n        --help-text-margin-left: 24px;\n        cursor: pointer;\n      }\n\n      .checkbox-container {\n        cursor: pointer;\n        display: flex;\n        user-select: none;\n        -webkit-user-select: none;\n      }\n\n      .checkbox-label {\n        font-family: var(--font-family);\n        padding: 0px;\n        margin-left: 8px;\n        font-weight: 300;\n        font-size: 14px;\n        line-height: 19px;\n        flex-grow: 1;\n      }\n\n      .far {\n        height: 16px;\n        margin-top: 1px;\n      }\n\n      .disabled {\n        cursor: not-allowed;\n        --icon-color: #ccc;\n      }\n    `;\n  }\n\n  @property({ type: String })\n  name = '';\n\n  @property({ type: Boolean })\n  checked: boolean;\n\n  @property({ type: Boolean })\n  partial: boolean;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  @property({ type: Number })\n  size = 1.2;\n\n  @property({ type: String })\n  animateChange = 'pulse';\n\n  public updated(changes: Map<string, any>) {\n    super.updated(changes);\n    if (changes.has('checked')) {\n      if (this.checked || this.partial) {\n        this.setValue(1);\n      } else {\n        this.setValue('');\n      }\n\n      this.fireEvent('change');\n    }\n  }\n\n  public serializeValue(value: any): string {\n    return value;\n  }\n\n  private handleClick(): void {\n    if (!this.disabled) {\n      this.checked = !this.checked;\n    }\n  }\n\n  public click(): void {\n    this.handleClick();\n    super.click();\n  }\n\n  public render(): TemplateResult {\n    const icon = html`<temba-icon\n      name=\"${this.checked\n        ? Icon.checkbox_checked\n        : this.partial\n        ? Icon.checkbox_partial\n        : Icon.checkbox}\"\n      size=\"${this.size}\"\n      animatechange=\"${this.animateChange}\"\n    />`;\n\n    this.label = this.label ? this.label.trim() : null;\n\n    return html`\n      <div class=\"wrapper ${this.label ? 'label' : ''}\">\n        <temba-field\n          name=${this.name}\n          .helpText=${this.helpText}\n          .errors=${this.errors}\n          .widgetOnly=${this.widgetOnly}\n          .helpAlways=${true}\n          ?disabled=${this.disabled}\n          @click=${this.handleClick}\n        >\n          <div class=\"checkbox-container ${this.disabled ? 'disabled' : ''}\">\n            ${icon}\n            ${this.label\n              ? html`<div class=\"checkbox-label\">${this.label}</div>`\n              : null}\n          </div>\n        </temba-field>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/checkbox/Checkbox.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';\n\nexport class Checkbox extends FormElement {\n  static get styles() {\n    return css`\n      :host {\n        color: var(--color-text);\n        display: inline-block;\n      }\n\n      :host([label]) {\n        width: 100%;\n      }\n\n      .wrapper.label {\n        padding: 10px;\n        border-radius: var(--curvature);\n      }\n\n      .wrapper.label:hover {\n        background: #f9f9f9;\n      }\n\n      temba-field {\n        --help-text-margin-left: 24px;\n        cursor: pointer;\n      }\n\n      .checkbox-container {\n        cursor: pointer;\n        display: flex;\n        user-select: none;\n        -webkit-user-select: none;\n      }\n\n      .checkbox-label {\n        font-family: var(--font-family);\n        padding: 0px;\n        margin-left: 8px;\n        font-weight: 300;\n        font-size: 14px;\n        line-height: 19px;\n        flex-grow: 1;\n      }\n\n      .far {\n        height: 16px;\n        margin-top: 1px;\n      }\n\n      .disabled {\n        cursor: not-allowed;\n        --icon-color: #ccc;\n      }\n    `;\n  }\n\n  @property({ type: String })\n  name = '';\n\n  @property({ type: Boolean })\n  checked: boolean;\n\n  @property({ type: Boolean })\n  partial: boolean;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  @property({ type: Number })\n  size = 1.2;\n\n  @property({ type: String })\n  animateChange = 'pulse';\n\n  public updated(changes: Map<string, any>) {\n    super.updated(changes);\n    if (changes.has('checked')) {\n      if (this.checked || this.partial) {\n        this.value = '1';\n      } else {\n        this.value = '';\n      }\n\n      this.fireEvent('change');\n    }\n  }\n\n  public serializeValue(value: any): string {\n    return value;\n  }\n\n  private handleClick(): void {\n    if (!this.disabled) {\n      this.checked = !this.checked;\n    }\n  }\n\n  public click(): void {\n    this.handleClick();\n    super.click();\n  }\n\n  public render(): TemplateResult {\n    const icon = html`<temba-icon\n      name=\"${this.checked\n        ? Icon.checkbox_checked\n        : this.partial\n        ? Icon.checkbox_partial\n        : Icon.checkbox}\"\n      size=\"${this.size}\"\n      animatechange=\"${this.animateChange}\"\n    />`;\n\n    this.label = this.label ? this.label.trim() : null;\n\n    return html`\n      <div class=\"wrapper ${this.label ? 'label' : ''}\">\n        <temba-field\n          name=${this.name}\n          .helpText=${this.helpText}\n          .errors=${this.errors}\n          .widgetOnly=${this.widgetOnly}\n          .helpAlways=${true}\n          ?disabled=${this.disabled}\n          @click=${this.handleClick}\n        >\n          <div class=\"checkbox-container ${this.disabled ? 'disabled' : ''}\">\n            ${icon}\n            ${this.label\n              ? html`<div class=\"checkbox-label\">${this.label}</div>`\n              : null}\n          </div>\n        </temba-field>\n      </div>\n    `;\n  }\n}\n"]}

package/out-tsc/src/colorpicker/ColorPicker.js

@@ -128,7 +128,6 @@ export class ColorPicker extends FormElement {
     }
     firstUpdated(_changedProperties) {
         super.firstUpdated(_changedProperties);
-        this.setValue(this.value);
     }
     updated(changed) {
         super.updated(changed);
@@ -180,7 +179,7 @@ export class ColorPicker extends FormElement {
             this.hue = (x / rect.width) * 360;
             this.lightness = 100 - (y / rect.height) * 100;
             this.previewColor = `hsla(${this.hue}, ${this.saturation}%, ${this.lightness}%, 1)`;
-            this.setValue(this.hex);
+            this.value = this.hex;
             this.selecting = true;
             this.expanded = false;
         }
@@ -192,7 +191,7 @@ export class ColorPicker extends FormElement {
         const hex = event.target.value;
         if (hex.startsWith('#')) {
             this.previewColor = hex;
-            this.setValue(hex);
+            this.value = hex;
         }
     }
     serializeValue(value) {

package/out-tsc/src/colorpicker/ColorPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.js","sourceRoot":"","sources":["../../../src/colorpicker/ColorPicker.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAoB,MAAM,KAAK,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAGhD,MAAM,OAAO,WAAY,SAAQ,WAAW;IAA5C;;QAEE,aAAQ,GAAG,KAAK,CAAC;QAGjB,iBAAY,GAAG,SAAS,CAAC;QAGzB,eAAU,GAAG,WAAW,CAAC;QAGzB,cAAS,GAAG,KAAK,CAAC;QAGU,eAAU,GAAG,GAAG,CAAC;QACjB,cAAS,GAAG,EAAE,CAAC;QACf,QAAG,GAAG,EAAE,CAAC;IAoPvC,CAAC;IAlPC,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6GT,CAAC;IACJ,CAAC;IAES,YAAY,CACpB,kBAAqE;QAErE,KAAK,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC;QACvC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAEM,OAAO,CAAC,OAAyB;QACtC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QAEvB,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;YACxB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,IAAI,SAAS,CAAC;YAC5C,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC;SACvB;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE;YAC5B,IAAI,IAAI,CAAC,SAAS,EAAE;gBAClB,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;oBACrB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;gBACzB,CAAC,EAAE,GAAG,CAAC,CAAC;aACT;SACF;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,IAAI,IAAI,CAAC,GAAG,EAAE;YAC3C,IAAI,CAAC,GAAG,GAAG,QAAQ,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;SAChE;IACH,CAAC;IAEO,UAAU,CAAC,KAAiB;QAClC,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;SACvB;IACH,CAAC;IAEO,cAAc,CAAC,KAAiB;QACtC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC;QAC/B,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC;IACxB,CAAC;IAEO,eAAe,CAAC,KAAiB;QACvC,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,MAAM,IAAI,GAAI,KAAK,CAAC,MAAsB,CAAC,qBAAqB,EAAE,CAAC;YACnE,MAAM,CAAC,GAAG,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC;YACpC,MAAM,CAAC,GAAG,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC;YACnC,IAAI,CAAC,GAAG,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC;YAClC,IAAI,CAAC,SAAS,GAAG,GAAG,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,GAAG,CAAC;YAC/C,IAAI,CAAC,YAAY,GAAG,QAAQ,IAAI,CAAC,GAAG,KAAK,IAAI,CAAC,UAAU,MAAM,IAAI,CAAC,SAAS,OAAO,CAAC;YACpF,IAAI,CAAC,GAAG,GAAG,QAAQ,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;SAChE;IACH,CAAC;IAEO,kBAAkB,CAAC,KAAiB;QAC1C,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACrB,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,eAAe,CAAoB,CAAC,KAAK,EAAE,CAAC;IAC7E,CAAC;IAEO,gBAAgB,CAAC,KAAiB;QACxC,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,MAAM,IAAI,GAAI,KAAK,CAAC,MAAsB,CAAC,qBAAqB,EAAE,CAAC;YACnE,MAAM,CAAC,GAAG,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC;YACpC,MAAM,CAAC,GAAG,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC;YACnC,IAAI,CAAC,GAAG,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC;YAClC,IAAI,CAAC,SAAS,GAAG,GAAG,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,GAAG,CAAC;YAC/C,IAAI,CAAC,YAAY,GAAG,QAAQ,IAAI,CAAC,GAAG,KAAK,IAAI,CAAC,UAAU,MAAM,IAAI,CAAC,SAAS,OAAO,CAAC;YACpF,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YACxB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;YACtB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;SACvB;QAED,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,EAAE;SACH;IACH,CAAC;IAEO,cAAc,CAAC,KAAiB;QACtC,MAAM,GAAG,GAAI,KAAK,CAAC,MAAoB,CAAC,KAAK,CAAC;QAC9C,IAAI,GAAG,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE;YACvB,IAAI,CAAC,YAAY,GAAG,GAAG,CAAC;YACxB,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;SACpB;IACH,CAAC;IAEM,cAAc,CAAC,KAAU;QAC9B,OAAO,KAAK,CAAC;IACf,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;;eAEA,IAAI,CAAC,IAAI;oBACJ,IAAI,CAAC,QAAQ;kBACf,IAAI,CAAC,MAAM;sBACP,IAAI,CAAC,UAAU;qBAChB,IAAI,CAAC,SAAS;oBACf,IAAI,CAAC,QAAQ;;;uBAGV,UAAU,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC;yBACpD,UAAU,CAAC,EAAE,gBAAgB,EAAE,IAAI,EAAE,CAAC;;wBAEvC,UAAU,CAAC;YACjB,OAAO,EAAE,IAAI;YACb,SAAS,EAAE,IAAI,CAAC,SAAS;SAC1B,CAAC;+BACa,IAAI,CAAC,UAAU,eAAe,IAAI,CAAC,YAAY;yBACrD,IAAI,CAAC,kBAAkB;;kBAE9B,IAAI,CAAC,KAAK;;;;;wBAKJ,IAAI,CAAC,UAAU;6BACV,IAAI,CAAC,eAAe;4BACrB,IAAI,CAAC,cAAc;yBACtB,IAAI,CAAC,gBAAgB;;;;sBAIxB,IAAI,CAAC,GAAG;uBACP,IAAI,CAAC,cAAc;;;;;;KAMrC,CAAC;IACJ,CAAC;CACF;AAlQC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CACX;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDACF;AAGzB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CACF;AAGzB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8CACV;AAEU;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAa;AACZ;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAkB;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAgB;AACf;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAU","sourcesContent":["import { html, css, PropertyValueMap } from 'lit';\nimport { FormElement } from '../FormElement';\nimport { property } from 'lit/decorators.js';\nimport { getClasses, hslToHex } from '../utils';\nimport { TextInput } from '../textinput/TextInput';\n\nexport class ColorPicker extends FormElement {\n  @property({ type: Boolean })\n  expanded = false;\n\n  @property({ type: String })\n  previewColor = '#ffffff';\n\n  @property({ type: String })\n  labelColor = '#ffffffee';\n\n  @property({ type: Boolean })\n  selecting = false;\n\n  @property({ type: Number }) hue: number;\n  @property({ type: Number }) saturation = 100;\n  @property({ type: Number }) lightness = 50;\n  @property({ type: String }) hex = '';\n\n  static get styles() {\n    return css`\n      :host {\n        color: var(--color-text);\n        display: inline-block;\n        --curvature: 0.55em;\n        width: 100%;\n\n        --temba-textinput-padding: 0.4em;\n      }\n\n      temba-textinput {\n        margin-left: 0.3em;\n        width: 5em;\n      }\n\n      temba-field {\n        display: block;\n        width: 100%;\n      }\n\n      .wrapper {\n        border: 1px solid var(--color-widget-border);\n        padding: calc(var(--curvature) / 2);\n        border-radius: calc(var(--curvature) * 1.5);\n        transition: all calc(var(--transition-speed) * 2) var(--bounce);\n\n        display: flex;\n        flex-grow: 0;\n      }\n\n      .picker-wrapper {\n        display: flex;\n        flex-direction: row;\n        align-items: stretch;\n        transition: all calc(var(--transition-speed) * 2) var(--bounce);\n        flex-grow: 0;\n      }\n\n      .preview {\n        width: initial;\n        border-radius: var(--curvature);\n        padding: 0.2em 0.5em;\n        font-weight: 400;\n        border: 2px solid rgba(0, 0, 0, 0.1);\n        white-space: nowrap;\n        cursor: pointer;\n        transition: transform calc(var(--transition-speed) * 0.5) var(--bounce);\n      }\n\n      .preview.selecting {\n        transform: scale(1.05);\n      }\n\n      .wrapper.expanded {\n        flex-grow: 1 !important;\n      }\n\n      .wrapper.expanded .picker-wrapper {\n        flex-grow: 1 !important;\n      }\n\n      .wrapper.expanded .preview {\n        pointer-events: none;\n      }\n\n      .wrapper.expanded .color-picker {\n        margin-left: calc(var(--curvature) / 2);\n      }\n\n      .wrapper.expanded temba-textinput {\n        display: block;\n      }\n\n      .color-picker {\n        border-radius: var(--curvature);\n        cursor: pointer;\n        transition: all calc(var(--transition-speed) * 2) var(--bounce);\n        flex-grow: 1;\n        position: relative;\n        width: 100%;\n        height: 100%;\n        background-image: linear-gradient(\n            to bottom,\n            rgba(0, 0, 0, 0) 60%,\n            rgba(0, 0, 0, 0.5) 90%,\n            rgba(0, 0, 0, 1)\n          ),\n          linear-gradient(\n            to top,\n            rgba(255, 255, 255, 0) 60%,\n            rgba(255, 255, 255, 0.8) 90%,\n            rgba(255, 255, 255, 1)\n          ),\n          linear-gradient(\n            to right,\n            hsla(0, 100%, 50%, 1),\n            hsla(60, 100%, 50%, 1),\n            hsla(120, 100%, 50%, 1),\n            hsla(180, 100%, 50%, 1),\n            hsla(240, 100%, 50%, 1),\n            hsla(300, 100%, 50%, 1),\n            hsla(360, 100%, 50%, 1)\n          );\n        mix-blend-mode: multiply;\n      }\n\n      .color-picker:focus {\n        outline: none;\n      }\n    `;\n  }\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.firstUpdated(_changedProperties);\n    this.setValue(this.value);\n  }\n\n  public updated(changed: Map<string, any>): void {\n    super.updated(changed);\n\n    if (changed.has('value')) {\n      this.previewColor = this.value || '#9c9c9c';\n      this.hex = this.value;\n    }\n\n    if (changed.has('selecting')) {\n      if (this.selecting) {\n        window.setTimeout(() => {\n          this.selecting = false;\n        }, 100);\n      }\n    }\n\n    if (changed.has('previewLabel') && this.hue) {\n      this.hex = hslToHex(this.hue, this.saturation, this.lightness);\n    }\n  }\n\n  private handleBlur(event: FocusEvent) {\n    if (this.expanded) {\n      this.expanded = false;\n    }\n  }\n\n  private handleMouseOut(event: MouseEvent) {\n    this.previewColor = this.value;\n    this.hex = this.value;\n  }\n\n  private handleMouseMove(event: MouseEvent) {\n    if (this.expanded) {\n      const rect = (event.target as HTMLElement).getBoundingClientRect();\n      const x = event.clientX - rect.left;\n      const y = event.clientY - rect.top;\n      this.hue = (x / rect.width) * 360;\n      this.lightness = 100 - (y / rect.height) * 100;\n      this.previewColor = `hsla(${this.hue}, ${this.saturation}%, ${this.lightness}%, 1)`;\n      this.hex = hslToHex(this.hue, this.saturation, this.lightness);\n    }\n  }\n\n  private handlePreviewClick(event: MouseEvent) {\n    this.expanded = !this.expanded;\n    this.selecting = true;\n    (this.shadowRoot.querySelector('.color-picker') as HTMLDivElement).focus();\n  }\n\n  private handleColorClick(event: MouseEvent) {\n    if (this.expanded) {\n      const rect = (event.target as HTMLElement).getBoundingClientRect();\n      const x = event.clientX - rect.left;\n      const y = event.clientY - rect.top;\n      this.hue = (x / rect.width) * 360;\n      this.lightness = 100 - (y / rect.height) * 100;\n      this.previewColor = `hsla(${this.hue}, ${this.saturation}%, ${this.lightness}%, 1)`;\n      this.setValue(this.hex);\n      this.selecting = true;\n      this.expanded = false;\n    }\n\n    if (!this.expanded) {\n      //\n    }\n  }\n\n  private handleHexInput(event: InputEvent) {\n    const hex = (event.target as TextInput).value;\n    if (hex.startsWith('#')) {\n      this.previewColor = hex;\n      this.setValue(hex);\n    }\n  }\n\n  public serializeValue(value: any): string {\n    return value;\n  }\n\n  public render() {\n    return html`\n      <temba-field\n        name=${this.name}\n        .helpText=${this.helpText}\n        .errors=${this.errors}\n        .widgetOnly=${this.widgetOnly}\n        .hideLabel=${this.hideLabel}\n        .disabled=${this.disabled}\n      >\n        <div style=\"display:flex\" tabindex=\"0\">\n          <div class=${getClasses({ wrapper: true, expanded: this.expanded })}>\n            <div class=${getClasses({ 'picker-wrapper': true })}>\n              <div\n                class=${getClasses({\n                  preview: true,\n                  selecting: this.selecting,\n                })}\n                style=\"color:${this.labelColor};background:${this.previewColor}\"\n                @click=${this.handlePreviewClick}\n              >\n                ${this.label}\n              </div>\n              <div\n                class=\"color-picker\"\n                tabindex=\"0\"\n                @blur=${this.handleBlur}\n                @mousemove=${this.handleMouseMove}\n                @mouseout=${this.handleMouseOut}\n                @click=${this.handleColorClick}\n              ></div>\n            </div>\n            <temba-textinput\n              value=${this.hex}\n              @input=${this.handleHexInput}\n              placeholder=\"#000000\"\n            ></temba-textinput>\n          </div>\n        </div>\n      </temba-field>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"ColorPicker.js","sourceRoot":"","sources":["../../../src/colorpicker/ColorPicker.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, PropertyValueMap } from 'lit';\nimport { FormElement } from '../FormElement';\nimport { property } from 'lit/decorators.js';\nimport { getClasses, hslToHex } from '../utils';\nimport { TextInput } from '../textinput/TextInput';\n\nexport class ColorPicker extends FormElement {\n  @property({ type: Boolean })\n  expanded = false;\n\n  @property({ type: String })\n  previewColor = '#ffffff';\n\n  @property({ type: String })\n  labelColor = '#ffffffee';\n\n  @property({ type: Boolean })\n  selecting = false;\n\n  @property({ type: Number }) hue: number;\n  @property({ type: Number }) saturation = 100;\n  @property({ type: Number }) lightness = 50;\n  @property({ type: String }) hex = '';\n\n  static get styles() {\n    return css`\n      :host {\n        color: var(--color-text);\n        display: inline-block;\n        --curvature: 0.55em;\n        width: 100%;\n\n        --temba-textinput-padding: 0.4em;\n      }\n\n      temba-textinput {\n        margin-left: 0.3em;\n        width: 5em;\n      }\n\n      temba-field {\n        display: block;\n        width: 100%;\n      }\n\n      .wrapper {\n        border: 1px solid var(--color-widget-border);\n        padding: calc(var(--curvature) / 2);\n        border-radius: calc(var(--curvature) * 1.5);\n        transition: all calc(var(--transition-speed) * 2) var(--bounce);\n\n        display: flex;\n        flex-grow: 0;\n      }\n\n      .picker-wrapper {\n        display: flex;\n        flex-direction: row;\n        align-items: stretch;\n        transition: all calc(var(--transition-speed) * 2) var(--bounce);\n        flex-grow: 0;\n      }\n\n      .preview {\n        width: initial;\n        border-radius: var(--curvature);\n        padding: 0.2em 0.5em;\n        font-weight: 400;\n        border: 2px solid rgba(0, 0, 0, 0.1);\n        white-space: nowrap;\n        cursor: pointer;\n        transition: transform calc(var(--transition-speed) * 0.5) var(--bounce);\n      }\n\n      .preview.selecting {\n        transform: scale(1.05);\n      }\n\n      .wrapper.expanded {\n        flex-grow: 1 !important;\n      }\n\n      .wrapper.expanded .picker-wrapper {\n        flex-grow: 1 !important;\n      }\n\n      .wrapper.expanded .preview {\n        pointer-events: none;\n      }\n\n      .wrapper.expanded .color-picker {\n        margin-left: calc(var(--curvature) / 2);\n      }\n\n      .wrapper.expanded temba-textinput {\n        display: block;\n      }\n\n      .color-picker {\n        border-radius: var(--curvature);\n        cursor: pointer;\n        transition: all calc(var(--transition-speed) * 2) var(--bounce);\n        flex-grow: 1;\n        position: relative;\n        width: 100%;\n        height: 100%;\n        background-image: linear-gradient(\n            to bottom,\n            rgba(0, 0, 0, 0) 60%,\n            rgba(0, 0, 0, 0.5) 90%,\n            rgba(0, 0, 0, 1)\n          ),\n          linear-gradient(\n            to top,\n            rgba(255, 255, 255, 0) 60%,\n            rgba(255, 255, 255, 0.8) 90%,\n            rgba(255, 255, 255, 1)\n          ),\n          linear-gradient(\n            to right,\n            hsla(0, 100%, 50%, 1),\n            hsla(60, 100%, 50%, 1),\n            hsla(120, 100%, 50%, 1),\n            hsla(180, 100%, 50%, 1),\n            hsla(240, 100%, 50%, 1),\n            hsla(300, 100%, 50%, 1),\n            hsla(360, 100%, 50%, 1)\n          );\n        mix-blend-mode: multiply;\n      }\n\n      .color-picker:focus {\n        outline: none;\n      }\n    `;\n  }\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.firstUpdated(_changedProperties);\n  }\n\n  public updated(changed: Map<string, any>): void {\n    super.updated(changed);\n\n    if (changed.has('value')) {\n      this.previewColor = this.value || '#9c9c9c';\n      this.hex = this.value;\n    }\n\n    if (changed.has('selecting')) {\n      if (this.selecting) {\n        window.setTimeout(() => {\n          this.selecting = false;\n        }, 100);\n      }\n    }\n\n    if (changed.has('previewLabel') && this.hue) {\n      this.hex = hslToHex(this.hue, this.saturation, this.lightness);\n    }\n  }\n\n  private handleBlur(event: FocusEvent) {\n    if (this.expanded) {\n      this.expanded = false;\n    }\n  }\n\n  private handleMouseOut(event: MouseEvent) {\n    this.previewColor = this.value;\n    this.hex = this.value;\n  }\n\n  private handleMouseMove(event: MouseEvent) {\n    if (this.expanded) {\n      const rect = (event.target as HTMLElement).getBoundingClientRect();\n      const x = event.clientX - rect.left;\n      const y = event.clientY - rect.top;\n      this.hue = (x / rect.width) * 360;\n      this.lightness = 100 - (y / rect.height) * 100;\n      this.previewColor = `hsla(${this.hue}, ${this.saturation}%, ${this.lightness}%, 1)`;\n      this.hex = hslToHex(this.hue, this.saturation, this.lightness);\n    }\n  }\n\n  private handlePreviewClick(event: MouseEvent) {\n    this.expanded = !this.expanded;\n    this.selecting = true;\n    (this.shadowRoot.querySelector('.color-picker') as HTMLDivElement).focus();\n  }\n\n  private handleColorClick(event: MouseEvent) {\n    if (this.expanded) {\n      const rect = (event.target as HTMLElement).getBoundingClientRect();\n      const x = event.clientX - rect.left;\n      const y = event.clientY - rect.top;\n      this.hue = (x / rect.width) * 360;\n      this.lightness = 100 - (y / rect.height) * 100;\n      this.previewColor = `hsla(${this.hue}, ${this.saturation}%, ${this.lightness}%, 1)`;\n      this.value = this.hex;\n      this.selecting = true;\n      this.expanded = false;\n    }\n\n    if (!this.expanded) {\n      //\n    }\n  }\n\n  private handleHexInput(event: InputEvent) {\n    const hex = (event.target as TextInput).value;\n    if (hex.startsWith('#')) {\n      this.previewColor = hex;\n      this.value = hex;\n    }\n  }\n\n  public serializeValue(value: any): string {\n    return value;\n  }\n\n  public render() {\n    return html`\n      <temba-field\n        name=${this.name}\n        .helpText=${this.helpText}\n        .errors=${this.errors}\n        .widgetOnly=${this.widgetOnly}\n        .hideLabel=${this.hideLabel}\n        .disabled=${this.disabled}\n      >\n        <div style=\"display:flex\" tabindex=\"0\">\n          <div class=${getClasses({ wrapper: true, expanded: this.expanded })}>\n            <div class=${getClasses({ 'picker-wrapper': true })}>\n              <div\n                class=${getClasses({\n                  preview: true,\n                  selecting: this.selecting,\n                })}\n                style=\"color:${this.labelColor};background:${this.previewColor}\"\n                @click=${this.handlePreviewClick}\n              >\n                ${this.label}\n              </div>\n              <div\n                class=\"color-picker\"\n                tabindex=\"0\"\n                @blur=${this.handleBlur}\n                @mousemove=${this.handleMouseMove}\n                @mouseout=${this.handleMouseOut}\n                @click=${this.handleColorClick}\n              ></div>\n            </div>\n            <temba-textinput\n              value=${this.hex}\n              @input=${this.handleHexInput}\n              placeholder=\"#000000\"\n            ></temba-textinput>\n          </div>\n        </div>\n      </temba-field>\n    `;\n  }\n}\n"]}

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

@@ -5,6 +5,7 @@ import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { renderCompletionOption, updateInputElementWithCompletion, executeCompletionQuery, } from './helpers';
 import { FormElement } from '../FormElement';
 import { styleMap } from 'lit-html/directives/style-map.js';
+import { msg } from '@lit/localize';
 /**
  * Completion is a text input that handles excellent completion options in a popup
  */
@@ -216,7 +217,7 @@ export class Completion extends FormElement {
                   </div>
                 `
             : null}
-            <div class="footer">Tab to complete, enter to select</div>
+            <div class="footer">${msg('Tab to complete, enter to select')}</div>
           </temba-options>
         </div>
       </temba-field>

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 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"]}
+{"version":3,"file":"Completion.js","sourceRoot":"","sources":["../../../src/completion/Completion.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, css, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { TextInput } from '../textinput/TextInput';\nimport {\n  renderCompletionOption,\n  updateInputElementWithCompletion,\n  executeCompletionQuery,\n} from './helpers';\n\nimport { FormElement } from '../FormElement';\nimport { CompletionOption, Position } from '../interfaces';\nimport { Store } from '../store/Store';\nimport { styleMap } from 'lit-html/directives/style-map.js';\nimport { msg } from '@lit/localize';\n\n/**\n * Completion is a text input that handles excellent completion options in a popup\n */\nexport class Completion extends FormElement {\n  static get styles() {\n    return css`\n      :host {\n        display: block;\n      }\n\n      temba-options {\n        --widget-box-shadow-focused: 0 0 4px rgba(0, 0, 0, 0.15);\n        --color-focus: #e6e6e6;\n      }\n\n      .comp-container {\n        position: relative;\n        height: 100%;\n      }\n\n      #anchor {\n        /* background: rgba(132, 40, 158, .1); */\n        position: absolute;\n        visibility: hidden;\n        width: 250px;\n        height: 20px;\n      }\n\n      .fn-marker {\n        font-weight: bold;\n        font-size: 42px;\n      }\n\n      .option-slot {\n        background: #fff;\n      }\n\n      .current-fn {\n        padding: 10px;\n        margin: 5px;\n        background: var(--color-primary-light);\n        color: rgba(0, 0, 0, 0.5);\n        border-radius: var(--curvature-widget);\n        font-size: 90%;\n      }\n\n      .footer {\n        padding: 5px 10px;\n        background: var(--color-primary-light);\n        color: rgba(0, 0, 0, 0.5);\n        font-size: 80%;\n        border-bottom-left-radius: var(--curvature-widget);\n        border-bottom-right-radius: var(--curvature-widget);\n      }\n\n      code {\n        background: rgba(0, 0, 0, 0.1);\n        padding: 1px 5px;\n        border-radius: var(--curvature);\n      }\n    `;\n  }\n\n  @property({ type: Boolean })\n  session: boolean;\n\n  @property({ type: Boolean })\n  submitOnEnter = false;\n\n  @property({ type: Object })\n  anchorPosition: Position = { left: 0, top: 0 };\n\n  @property({ attribute: false })\n  currentFunction: CompletionOption;\n\n  @property({ type: String })\n  placeholder = '';\n\n  @property({ attribute: false })\n  textInputElement: TextInput;\n\n  @property({ attribute: false })\n  anchorElement: HTMLDivElement;\n\n  @property({ type: Array })\n  options: any[] = [];\n\n  @property({ type: String })\n  name = '';\n\n  @property({ type: String })\n  value = '';\n\n  @property({ type: Boolean })\n  textarea: boolean;\n\n  @property({ type: Boolean })\n  gsm: boolean;\n\n  @property({ type: String })\n  counter: string;\n\n  @property({ type: Boolean })\n  autogrow = false;\n\n  private hiddenElement: HTMLInputElement;\n  private query: string;\n\n  public firstUpdated() {\n    this.textInputElement = this.shadowRoot.querySelector(\n      'temba-textinput'\n    ) as TextInput;\n    this.anchorElement = this.shadowRoot.querySelector('#anchor');\n\n    // create our hidden container so it gets included in our host element's form\n    this.hiddenElement = document.createElement('input');\n    this.hiddenElement.setAttribute('type', 'hidden');\n    this.hiddenElement.setAttribute('name', this.getAttribute('name'));\n    this.hiddenElement.setAttribute('value', this.getAttribute('value') || '');\n    this.appendChild(this.hiddenElement);\n  }\n\n  private handleKeyUp(evt: KeyboardEvent) {\n    // if we have options, ignore keys that are meant for them\n    if (this.options && this.options.length > 0) {\n      if (evt.key === 'ArrowUp' || evt.key === 'ArrowDown') {\n        return;\n      }\n\n      if (evt.ctrlKey) {\n        if (evt.key === 'n' || evt.key === 'p') {\n          return;\n        }\n      }\n\n      if (\n        evt.key === 'Enter' ||\n        evt.key === 'Escape' ||\n        evt.key === 'Tab' ||\n        evt.key.startsWith('Control')\n      ) {\n        evt.stopPropagation();\n        evt.preventDefault();\n        return;\n      }\n\n      this.executeQuery(evt.currentTarget as TextInput);\n    }\n  }\n\n  public hasVisibleOptions() {\n    return this.options.length > 0;\n  }\n\n  private executeQuery(ele: TextInput) {\n    const store: Store = document.querySelector('temba-store');\n    if (!ele.inputElement) {\n      return;\n    }\n    const result = executeCompletionQuery(\n      ele.inputElement,\n      store,\n      this.session\n    );\n\n    this.query = result.query;\n    this.options = result.options;\n    this.anchorPosition = result.anchorPosition;\n  }\n\n  private handleClick(evt: MouseEvent) {\n    this.executeQuery(evt.currentTarget as TextInput);\n  }\n\n  public updated(changedProperties: Map<string, any>) {\n    super.updated(changedProperties);\n\n    // if our cursor changed, lets make sure our scrollbox is showing it\n    if (changedProperties.has('value')) {\n      this.hiddenElement.setAttribute('value', this.value);\n    }\n  }\n\n  private handleInput(evt: KeyboardEvent) {\n    const ele = evt.currentTarget as TextInput;\n    this.executeQuery(ele);\n    this.value = ele.inputElement.value;\n    this.fireEvent('change');\n  }\n\n  private handleOptionCanceled() {\n    // delay in case we are actively selecting\n    window.setTimeout(() => {\n      this.options = [];\n      this.query = '';\n    }, 100);\n  }\n\n  private handleOptionSelection(evt: CustomEvent) {\n    const option = evt.detail.selected as CompletionOption;\n    const tabbed = evt.detail.tabbed;\n\n    updateInputElementWithCompletion(\n      this.query,\n      this.textInputElement.inputElement,\n      option\n    );\n    this.query = '';\n    this.options = [];\n\n    if (tabbed) {\n      this.executeQuery(this.textInputElement);\n    }\n  }\n\n  public click() {\n    super.click();\n    const input = this.shadowRoot.querySelector('temba-textinput') as TextInput;\n    if (input) {\n      input.click();\n    }\n  }\n\n  public focus() {\n    super.focus();\n    const input = this.shadowRoot.querySelector('temba-textinput') as TextInput;\n    if (input) {\n      input.focus();\n    }\n  }\n\n  public render(): TemplateResult {\n    const anchorStyles = this.anchorPosition\n      ? {\n          top: `${this.anchorPosition.top}px`,\n          left: `${this.anchorPosition.left}px`,\n        }\n      : {};\n\n    return html`\n      <temba-field\n        name=${this.name}\n        .label=${this.label}\n        .helpText=${this.helpText}\n        .errors=${this.errors}\n        .widgetOnly=${this.widgetOnly}\n      >\n        <div class=\"comp-container\">\n          <div id=\"anchor\" style=${styleMap(anchorStyles)}></div>\n          <temba-textinput\n            name=${this.name}\n            placeholder=${this.placeholder}\n            gsm=${this.gsm}\n            counter=${ifDefined(this.counter)}\n            @keyup=${this.handleKeyUp}\n            @click=${this.handleClick}\n            @input=${this.handleInput}\n            @blur=${this.handleOptionCanceled}\n            .value=${this.value}\n            ?autogrow=${this.autogrow}\n            ?textarea=${this.textarea}\n            ?submitOnEnter=${this.submitOnEnter}\n          >\n          </temba-textinput>\n          <temba-options\n            @temba-selection=${this.handleOptionSelection}\n            @temba-canceled=${this.handleOptionCanceled}\n            .renderOption=${renderCompletionOption}\n            .anchorTo=${this.anchorElement}\n            .options=${this.options}\n            ?visible=${this.options && this.options.length > 0}\n          >\n            ${this.currentFunction\n              ? html`\n                  <div class=\"current-fn\">\n                    ${renderCompletionOption(this.currentFunction, true)}\n                  </div>\n                `\n              : null}\n            <div class=\"footer\">${msg('Tab to complete, enter to select')}</div>\n          </temba-options>\n        </div>\n      </temba-field>\n    `;\n  }\n}\n"]}

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

@@ -189,9 +189,6 @@ export class Compose extends FormElement {
         };
         // update this.value...
         this.value = JSON.stringify(composeValue);
-        // and then also update this.values...
-        // so that the hidden input is updated via FormElement.updateInputs()
-        this.values = [composeValue];
     }
     firstUpdated(changes) {
         super.firstUpdated(changes);