@nyaruka/temba-components 0.86.0 → 0.87.0

package/src/options/Options.ts

@@ -7,7 +7,7 @@ import {
   getClasses,
   getScrollParent,
   isElementVisible,
-  throttle,
+  throttle
 } from '../utils';
 
 export class Options extends RapidElement {
@@ -330,7 +330,7 @@ export class Options extends RapidElement {
       }
 
       this.fireCustomEvent(CustomEventType.CursorChanged, {
-        index: this.cursorIndex,
+        index: this.cursorIndex
       });
     }
 
@@ -437,7 +437,7 @@ export class Options extends RapidElement {
     this.fireCustomEvent(CustomEventType.Selection, {
       selected,
       tabbed,
-      index,
+      index
     });
   }
 
@@ -566,13 +566,13 @@ export class Options extends RapidElement {
       {
         event: 'keydown',
         method: this.handleKeyDown,
-        isDocument: true,
+        isDocument: true
       },
       {
         event: 'scroll',
         method: this.calculatePosition,
-        isDocument: true,
-      },
+        isDocument: true
+      }
     ];
   }
 
@@ -616,7 +616,7 @@ export class Options extends RapidElement {
 
     const containerStyle = {
       'margin-left': `${this.marginHorizontal}px`,
-      'margin-top': `${vertical}px`,
+      'margin-top': `${vertical}px`
     };
 
     if (this.top) {
@@ -639,11 +639,11 @@ export class Options extends RapidElement {
       anchored: !this.block,
       loading: this.loading,
       shadow: !this.hideShadow,
-      bordered: this.hideShadow,
+      bordered: this.hideShadow
     });
 
     const classesInner = getClasses({
-      options: true,
+      options: true
     });
 
     let options = this.options || [];

package/src/remote/Remote.ts

@@ -20,7 +20,7 @@ export default class Remote extends RapidElement {
     super.updated(changes);
 
     if (changes.has('endpoint')) {
-      getUrl(this.endpoint).then(response => {
+      getUrl(this.endpoint).then((response) => {
         this.body = unsafeHTML(response.body);
       });
     }

package/src/select/Select.ts

@@ -6,7 +6,7 @@ import {
   getClasses,
   fetchResults,
   WebResponse,
-  postJSON,
+  postJSON
 } from '../utils';
 import '../options/Options';
 import { EventHandler } from '../RapidElement';
@@ -17,7 +17,7 @@ import { CompletionOption, CustomEventType, Position } from '../interfaces';
 import {
   renderCompletionOption,
   updateInputElementWithCompletion,
-  executeCompletionQuery,
+  executeCompletionQuery
 } from '../completion/helpers';
 import { Store } from '../store/Store';
 import { styleMap } from 'lit-html/directives/style-map.js';
@@ -550,7 +550,7 @@ export class Select extends FormElement {
           if (results && results.length > 0) {
             if (value) {
               // if we started with a value, see if we can find it in the results
-              const existing = results.find(option => {
+              const existing = results.find((option) => {
                 return this.getValue(option) === value;
               });
 
@@ -660,7 +660,7 @@ export class Select extends FormElement {
 
   public setSelectedValue(value: string) {
     if (this.staticOptions.length > 0) {
-      const existing = this.staticOptions.find(option => {
+      const existing = this.staticOptions.find((option) => {
         return this.getValue(option) === value;
       });
 
@@ -686,7 +686,7 @@ export class Select extends FormElement {
           this.value = this.serializeValue(this.values[0]);
         } else {
           if (this.inputRoot.parentElement) {
-            this.values.forEach(value => {
+            this.values.forEach((value) => {
               const ele = document.createElement('input');
               ele.setAttribute('type', 'hidden');
               ele.setAttribute('name', name);
@@ -731,7 +731,7 @@ export class Select extends FormElement {
     const selected = event.detail.selected;
     // check if we should post it
     if (selected.post && this.endpoint) {
-      postJSON(this.endpoint, selected).then(response => {
+      postJSON(this.endpoint, selected).then((response) => {
         if (response.status >= 200 && response.status < 300) {
           this.setSelectedOption(response.json);
           this.lruCache = lru(20, 60000);
@@ -801,7 +801,7 @@ export class Select extends FormElement {
 
   private setVisibleOptions(options: any[]) {
     // if we have an exclusion filter apply it
-    options = options.filter(option => {
+    options = options.filter((option) => {
       // exclude unnamed
       if (!this.getNameInternal(option)) {
         return false;
@@ -854,16 +854,16 @@ export class Select extends FormElement {
     if (this.values.length > 0) {
       if (this.multi) {
         options = options.filter(
-          option =>
+          (option) =>
             !this.values.find(
-              selected => this.getValue(selected) === this.getValue(option)
+              (selected) => this.getValue(selected) === this.getValue(option)
             )
         );
       } else {
         // if no search, single select should set our cursor to the selected item
         if (!this.input) {
           this.cursorIndex = options.findIndex(
-            option => this.getValue(option) === this.getValue(this.values[0])
+            (option) => this.getValue(option) === this.getValue(this.values[0])
           );
         } else {
           this.cursorIndex = 0;
@@ -880,7 +880,7 @@ export class Select extends FormElement {
     this.visibleOptions = options;
 
     this.fireCustomEvent(CustomEventType.ContentChanged, {
-      options: this.visibleOptions,
+      options: this.visibleOptions
     });
   }
 
@@ -978,7 +978,7 @@ export class Select extends FormElement {
               this.lruCache.set(url, {
                 options: results,
                 complete: true,
-                next: null,
+                next: null
               });
 
               this.complete = true;
@@ -1017,7 +1017,7 @@ export class Select extends FormElement {
                 this.lruCache.set(url, {
                   options: results,
                   complete: this.complete,
-                  next: this.next,
+                  next: this.next
                 });
               }
 
@@ -1069,12 +1069,12 @@ export class Select extends FormElement {
     const expression = {
       name: ele.value,
       value: ele.value,
-      expression: true,
+      expression: true
     };
 
     if (this.multi) {
       if (
-        !this.values.find(option => {
+        !this.values.find((option) => {
           return (
             option.expression &&
             option.value &&
@@ -1184,10 +1184,10 @@ export class Select extends FormElement {
       { event: CustomEventType.Canceled, method: this.handleCancel },
       {
         event: CustomEventType.CursorChanged,
-        method: this.handleCursorChanged,
+        method: this.handleCursorChanged
       },
       { event: 'blur', method: this.handleBlur },
-      { event: 'focus', method: this.handleFocus },
+      { event: 'focus', method: this.handleFocus }
     ];
   }
 
@@ -1296,13 +1296,13 @@ export class Select extends FormElement {
       'search-input': this.input.length > 0,
       'no-search-input': this.input.length === 0,
       [this.flavor]: this.flavor !== null,
-      disabled: this.disabled,
+      disabled: this.disabled
     });
 
     const anchorStyles = this.anchorPosition
       ? {
           top: '0px',
-          left: `${this.anchorPosition.left - 10}px`,
+          left: `${this.anchorPosition.left - 10}px`
         }
       : {};
 

package/src/sms/gsmsplitter.ts

@@ -13,11 +13,11 @@ export const gsmSplit = function (message, options) {
         {
           content: options.summary ? undefined : '',
           length: 0,
-          bytes: 0,
-        },
+          bytes: 0
+        }
       ],
       totalLength: 0,
-      totalBytes: 0,
+      totalBytes: 0
     };
   }
 
@@ -32,7 +32,7 @@ export const gsmSplit = function (message, options) {
     const msg = {
       content: options.summary ? undefined : messagePart,
       length: length,
-      bytes: bytes,
+      bytes: bytes
     };
     messages.push(msg);
 
@@ -74,17 +74,17 @@ export const gsmSplit = function (message, options) {
             ? undefined
             : messages[0].content + messages[1].content,
           length: totalLength,
-          bytes: totalBytes,
-        },
+          bytes: totalBytes
+        }
       ],
       totalLength: totalLength,
-      totalBytes: totalBytes,
+      totalBytes: totalBytes
     };
   }
 
   return {
     parts: messages,
     totalLength: totalLength,
-    totalBytes: totalBytes,
+    totalBytes: totalBytes
   };
 };

package/src/sms/gsmvalidator.ts

@@ -8,7 +8,7 @@ const GSM_charCodes = [
   120, 121, 122, 123, 124, 125, 126, 161, 163, 164, 165, 167, 191, 196, 197,
   198, 199, 201, 209, 214, 216, 220, 223, 224, 228, 229, 230, 232, 233, 236,
   241, 242, 246, 248, 249, 252, 915, 916, 920, 923, 926, 928, 931, 934, 936,
-  937, 8364,
+  937, 8364
 ];
 
 // '\f|^€{}[~]\\'

package/src/sms/index.ts

@@ -20,7 +20,7 @@ export const splitSMS = function (message: string, options: any = {}) {
   const characterset = options && options.characterset;
 
   options = {
-    summary: options && options.summary,
+    summary: options && options.summary
   };
 
   const isGsm =
@@ -52,6 +52,6 @@ export const splitSMS = function (message: string, options: any = {}) {
     parts: splitResult.parts,
     bytes: splitResult.totalBytes,
     length: splitResult.totalLength,
-    remainingInPart: remainingInPart,
+    remainingInPart: remainingInPart
   };
 };

package/src/sms/unicodesplitter.ts

@@ -11,11 +11,11 @@ export const unicodeSplit = function (message, options) {
         {
           content: options.summary ? undefined : '',
           length: 0,
-          bytes: 0,
-        },
+          bytes: 0
+        }
       ],
       totalLength: 0,
-      totalBytes: 0,
+      totalBytes: 0
     };
   }
 
@@ -34,7 +34,7 @@ export const unicodeSplit = function (message, options) {
         ? message.substring(partStart, partEnd + 1)
         : message.substring(partStart),
       length: length,
-      bytes: bytes,
+      bytes: bytes
     };
     messages.push(msg);
 
@@ -70,17 +70,17 @@ export const unicodeSplit = function (message, options) {
         {
           content: options.summary ? undefined : message,
           length: totalLength,
-          bytes: totalBytes,
-        },
+          bytes: totalBytes
+        }
       ],
       totalLength: totalLength,
-      totalBytes: totalBytes,
+      totalBytes: totalBytes
     };
   }
 
   return {
     parts: messages,
     totalLength: totalLength,
-    totalBytes: totalBytes,
+    totalBytes: totalBytes
   };
 };

package/src/store/Store.ts

@@ -8,7 +8,7 @@ import {
   postUrl,
   postJSON,
   postForm,
-  getCookie,
+  getCookie
 } from '../utils';
 import {
   ContactField,
@@ -18,7 +18,7 @@ import {
   KeyedAssets,
   CustomEventType,
   Workspace,
-  User,
+  User
 } from '../interfaces';
 import { RapidElement } from '../RapidElement';
 import { lru } from 'tiny-lru';
@@ -30,7 +30,7 @@ import { sourceLocale, targetLocales } from '../locales/locale-codes';
 const { setLocale } = configureLocalization({
   sourceLocale,
   targetLocales,
-  loadLocale: locale => import(`./locales/${locale}.js`),
+  loadLocale: (locale) => import(`./locales/${locale}.js`)
 });
 
 export class Store extends RapidElement {
@@ -137,7 +137,7 @@ export class Store extends RapidElement {
     const fetches = [];
     if (this.completionEndpoint) {
       fetches.push(
-        getUrl(this.completionEndpoint).then(response => {
+        getUrl(this.completionEndpoint).then((response) => {
           this.schema = response.json['context'] as CompletionSchema;
           this.fnOptions = response.json['functions'] as CompletionOption[];
         })
@@ -257,7 +257,7 @@ export class Store extends RapidElement {
 
       this.fireCustomEvent(CustomEventType.StoreUpdated, {
         url: this.fieldsEndpoint,
-        data: this.keyedAssets['fields'],
+        data: this.keyedAssets['fields']
       });
     });
   }
@@ -285,7 +285,7 @@ export class Store extends RapidElement {
     if (changedProperties.has('ready') && this.ready) {
       const locale = this.getLanguageCode();
       const target = targetLocales.find(
-        targetLocale => targetLocale === locale
+        (targetLocale) => targetLocale === locale
       );
 
       if (target) {
@@ -373,7 +373,7 @@ export class Store extends RapidElement {
   ): Promise<WebResponse> {
     options = options || {};
     if (!options.force && this.cache.has(url)) {
-      return new Promise<WebResponse>(resolve => {
+      return new Promise<WebResponse>((resolve) => {
         resolve(this.cache.get(url));
       });
     }
@@ -407,12 +407,12 @@ export class Store extends RapidElement {
     const results = this.cache.get(key);
 
     if (!options.force && results) {
-      return new Promise<any[]>(resolve => {
+      return new Promise<any[]>((resolve) => {
         resolve(results);
       });
     }
 
-    return new Promise<any[]>(resolve => {
+    return new Promise<any[]>((resolve) => {
       const pending = this.pendingResolves[url] || [];
       pending.push(resolve);
       this.pendingResolves[url] = pending;
@@ -453,7 +453,7 @@ export class Store extends RapidElement {
     if (cached && !options.force) {
       this.fireCustomEvent(CustomEventType.StoreUpdated, { url, data: cached });
     } else {
-      fetchResults(url).then(data => {
+      fetchResults(url).then((data) => {
         if (!data) {
           delete this.fetching[url];
           return;

package/src/store/StoreElement.ts

@@ -28,7 +28,7 @@ export class StoreElement extends StoreMonitorElement {
   public refresh() {
     this.store.makeRequest(this.url, {
       prepareData: this.prepareData,
-      force: true,
+      force: true
     });
   }
 
@@ -38,7 +38,7 @@ export class StoreElement extends StoreMonitorElement {
       this.data = event.detail.data;
       this.fireCustomEvent(CustomEventType.Refreshed, {
         data: event.detail.data,
-        previous,
+        previous
       });
     }
   }

package/src/tabpane/TabPane.ts

@@ -319,7 +319,7 @@ export class TabPane extends RapidElement {
             class="pane ${getClasses({
               first: this.index == 0,
               embedded: this.embedded,
-              bottom: this.bottom,
+              bottom: this.bottom
             })}"
           >
             <slot></slot>
@@ -332,7 +332,7 @@ export class TabPane extends RapidElement {
           bottom: this.bottom,
           collapses: this.collapses,
           embedded: this.embedded,
-          focusedname: this.focusedName,
+          focusedname: this.focusedName
         })}"
       >
         ${this.tabs.map(
@@ -345,7 +345,7 @@ export class TabPane extends RapidElement {
                 first: index == 0,
                 selected: index == this.index,
                 hidden: tab.hidden,
-                notify: tab.notify,
+                notify: tab.notify
               })}"
               style="${tab.selectionColor && index == this.index
                 ? `color:${tab.selectionColor};--icon-color:${tab.selectionColor};`
@@ -383,7 +383,7 @@ export class TabPane extends RapidElement {
             class="pane ${getClasses({
               first: this.index == 0,
               embedded: this.embedded,
-              bottom: this.bottom,
+              bottom: this.bottom
             })}"
           >
             <slot></slot>

package/src/templates/TemplateEditor.ts

@@ -29,7 +29,7 @@ interface Template {
 export class TemplateEditor extends FormElement {
   static shadowRootOptions = {
     ...LitElement.shadowRootOptions,
-    delegatesFocus: true,
+    delegatesFocus: true
   };
 
   static get styles() {
@@ -166,7 +166,7 @@ export class TemplateEditor extends FormElement {
     this.selectedTemplate = (event.target as any).values[0] as Template;
     const [lang, loc] = this.lang.split('-');
     if (this.selectedTemplate) {
-      this.selectedTemplate.translations.forEach(translation => {
+      this.selectedTemplate.translations.forEach((translation) => {
         if (
           translation.locale === this.lang ||
           (!loc && translation.locale.split('-')[0] === lang)
@@ -195,7 +195,7 @@ export class TemplateEditor extends FormElement {
     this.fireCustomEvent(CustomEventType.ContextChanged, {
       template: this.selectedTemplate,
       translation: this.translation,
-      variables: this.variables,
+      variables: this.variables
     });
   }
 
@@ -206,7 +206,7 @@ export class TemplateEditor extends FormElement {
     this.fireCustomEvent(CustomEventType.ContentChanged, {
       template: this.selectedTemplate,
       translation: this.translation,
-      variables: this.variables,
+      variables: this.variables
     });
   }
 
@@ -241,14 +241,14 @@ export class TemplateEditor extends FormElement {
 
   public renderComponents(components: Component[]): TemplateResult {
     const nonButtons = components
-      .filter(comp => !comp.type.startsWith('button/'))
+      .filter((comp) => !comp.type.startsWith('button/'))
       .map(
-        component =>
+        (component) =>
           html`<div class="${component['name']}">
             ${this.renderVariables(component)}
           </div>`
       );
-    const buttonComponents = components.filter(comp =>
+    const buttonComponents = components.filter((comp) =>
       comp.type.startsWith('button/')
     );
     const buttons =
@@ -261,7 +261,7 @@ export class TemplateEditor extends FormElement {
   }
 
   public renderButtons(components): TemplateResult {
-    const buttons = components.map(component => {
+    const buttons = components.map((component) => {
       if (component.display) {
         return html`
           <div class="button">
@@ -301,7 +301,7 @@ export class TemplateEditor extends FormElement {
           class="picker"
           value="${this.template}"
           endpoint="${this.url}?comps_as_list=true"
-          shouldExclude=${template => template.status !== 'approved'}
+          shouldExclude=${(template) => template.status !== 'approved'}
           placeholder="Select a template"
           @temba-content-changed=${this.swallowEvent}
           @change=${this.handleTemplateChanged}

package/src/textinput/TextInput.ts

@@ -10,7 +10,7 @@ import { CharCount } from '../charcount/CharCount';
 export enum InputType {
   Text = 'text',
   Password = 'password',
-  Number = 'number',
+  Number = 'number'
 }
 
 export class TextInput extends FormElement {
@@ -349,7 +349,7 @@ export class TextInput extends FormElement {
   // TODO make this a formelement and have contactsearch set the root
   public render(): TemplateResult {
     const containerStyle = {
-      height: `${this.textarea ? '100%' : 'auto'}`,
+      height: `${this.textarea ? '100%' : 'auto'}`
     };
 
     const clear =

package/src/thumbnail/Thumbnail.ts

@@ -45,7 +45,7 @@ export class Thumbnail extends RapidElement {
   @property({ type: Boolean })
   zooming = false;
 
-  public handleClick(evt: MouseEvent) {
+  public handleClick() {
     window.setTimeout(() => {
       const lightbox = document.querySelector('temba-lightbox') as Lightbox;
       lightbox.showElement(this);
@@ -60,7 +60,7 @@ export class Thumbnail extends RapidElement {
           style=${styleMap({
             background: 'red',
             borderRadius: '0',
-            boxShadow: 'var(--widget-box-shadow)',
+            boxShadow: 'var(--widget-box-shadow)'
           })}
         >
           <div
@@ -79,7 +79,7 @@ export class Thumbnail extends RapidElement {
               alignItems: 'center',
               justifyContent: 'center',
               fontWeight: '400',
-              color: '#bbb',
+              color: '#bbb'
             })}
           >
             ${this.label}
@@ -92,7 +92,7 @@ export class Thumbnail extends RapidElement {
         padding: 'var(--thumb-padding, 0.4em)',
         background: '#fff',
         borderRadius: 'var(--curvature)',
-        boxShadow: 'var(--widget-box-shadow)',
+        boxShadow: 'var(--widget-box-shadow)'
       })}">
 
           <div class="thumb" style=${styleMap({
@@ -108,7 +108,7 @@ export class Thumbnail extends RapidElement {
             alignItems: 'center',
             justifyContent: 'center',
             fontWeight: '400',
-            color: '#bbb',
+            color: '#bbb'
           })}>
             ${this.label}
             </div>

package/src/tip/Tip.ts

@@ -169,12 +169,12 @@ export class Tip extends RapidElement {
   public render(): TemplateResult {
     const tipStyle: any = {
       top: this.top ? `${this.top}px` : '0px',
-      left: this.left ? `${this.left}px` : '0px',
+      left: this.left ? `${this.left}px` : '0px'
     };
 
     const arrowStyle: any = {
       top: this.arrowTop ? `${this.arrowTop}px` : '0px',
-      left: this.arrowLeft ? `${this.arrowLeft}px` : '0px',
+      left: this.arrowLeft ? `${this.arrowLeft}px` : '0px'
     };
 
     if (this.width) {
@@ -185,7 +185,7 @@ export class Tip extends RapidElement {
       tip: true,
       show: this.visible,
       top: this.poppedTop,
-      'hide-on-change': this.hideOnChange,
+      'hide-on-change': this.hideOnChange
     });
 
     return html`