@nyaruka/temba-components 0.86.1 → 0.87.0

package/src/fields/FieldManager.ts

@@ -4,7 +4,6 @@ import { ContactField, CustomEventType } from '../interfaces';
 
 import { SortableList } from '../list/SortableList';
 import { StoreElement } from '../store/StoreElement';
-import { TextInput } from '../textinput/TextInput';
 import { postJSON } from '../utils';
 
 const TYPE_NAMES = {
@@ -14,7 +13,7 @@ const TYPE_NAMES = {
   datetime: 'Date & Time',
   state: 'State',
   ward: 'Ward',
-  district: 'District',
+  district: 'District'
 };
 
 const matches = (field: ContactField, query: string): boolean => {
@@ -153,7 +152,7 @@ export class FieldManager extends StoreElement {
   }
 
   private filterFields() {
-    const filteredKeys = this.store.getFieldKeys().filter(key => {
+    const filteredKeys = this.store.getFieldKeys().filter((key) => {
       const field = this.store.getContactField(key);
       if (field.featured) {
         return false;
@@ -169,7 +168,7 @@ export class FieldManager extends StoreElement {
     });
 
     const featured: ContactField[] = [];
-    this.store.getFeaturedFields().forEach(field => {
+    this.store.getFeaturedFields().forEach((field) => {
       if (matches(field, this.query)) {
         featured.push(field);
       }
@@ -321,7 +320,7 @@ export class FieldManager extends StoreElement {
               ${this.query
                 ? html`
                     <div class="scroll-box">
-                      ${this.featuredFields.map(field =>
+                      ${this.featuredFields.map((field) =>
                         this.renderField(field)
                       )}
                     </div>
@@ -333,7 +332,7 @@ export class FieldManager extends StoreElement {
                       @temba-drag-start=${this.handleDragStart}
                       @temba-drag-stop=${this.handleDragStop}
                     >
-                      ${this.featuredFields.map(field =>
+                      ${this.featuredFields.map((field) =>
                         this.renderField(field)
                       )}
                     </temba-sortable-list>
@@ -348,7 +347,7 @@ export class FieldManager extends StoreElement {
           <div class="label">Everything Else</div>
         </div>
         <div class="scroll-box">
-          ${this.otherFieldKeys.map(field =>
+          ${this.otherFieldKeys.map((field) =>
             this.renderField(this.store.getContactField(field))
           )}
         </div>

package/src/imagepicker/ImagePicker.ts

@@ -174,12 +174,12 @@ export class ImagePicker extends FormElement {
       viewport: {
         width: 300,
         height: 300,
-        type: this.shape,
+        type: this.shape
       },
       boundary: {
         width: 400,
-        height: 400,
-      },
+        height: 400
+      }
     });
 
     this.croppie.bind({ url });
@@ -193,7 +193,7 @@ export class ImagePicker extends FormElement {
         size: 'viewport',
         format: 'webp',
         quality: 1,
-        circle: false,
+        circle: false
       })
       .then(function (resp: any) {
         const blob = resp;

package/src/interfaces.ts

@@ -25,18 +25,18 @@ export interface Attachment {
 export enum DateStyle {
   DayFirst = 'day_first',
   MonthFirst = 'month_first',
-  YearFirst = 'year_first',
+  YearFirst = 'year_first'
 }
 
 export enum ScheduledEventType {
   CampaignEvent = 'campaign_event',
   ScheduledBroadcast = 'scheduled_broadcast',
-  ScheduledTrigger = 'scheduled_trigger',
+  ScheduledTrigger = 'scheduled_trigger'
 }
 
 export enum TicketStatus {
   Open = 'open',
-  Closed = 'closed',
+  Closed = 'closed'
 }
 
 export interface ScheduledEvent {
@@ -259,5 +259,5 @@ export enum CustomEventType {
   OrderChanged = 'temba-order-changed',
   DragStart = 'temba-drag-start',
   DragStop = 'temba-drag-stop',
-  Resized = 'temba-resized',
+  Resized = 'temba-resized'
 }

package/src/label/Label.ts

@@ -133,7 +133,7 @@ export default class Label extends LitElement {
           tertiary: this.tertiary,
           shadow: this.shadow,
           danger: this.danger,
-          dark: this.dark,
+          dark: this.dark
         })}"
         style=${styleMap(labelStyle)}
       >

package/src/leafletmap/LeafletMap.ts

@@ -6,7 +6,7 @@ import {
   LeafletMouseEvent,
   Map as RenderedMap,
   map as createMap,
-  Path,
+  Path
 } from 'leaflet';
 import { css, html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -124,7 +124,7 @@ export class LeafletMap extends LitElement {
         mouseout: (event: LeafletEvent) => {
           event.target.setStyle(normalFeature);
           this.hovered = null;
-        },
+        }
       });
     };
 
@@ -140,14 +140,14 @@ export class LeafletMap extends LitElement {
             {
               name: data.name,
               osm_id: this.osmId,
-              level: 0,
-            },
+              level: 0
+            }
           ];
         }
 
         this.states = geoJSON(data.geometry, {
           style: visibleStyle,
-          onEachFeature,
+          onEachFeature
         });
         this.renderedMap.fitBounds(this.states.getBounds(), {});
         this.states.addTo(this.renderedMap);
@@ -203,7 +203,7 @@ export class LeafletMap extends LitElement {
     this.renderedMap = createMap(mapElement, {
       attributionControl: false,
       scrollWheelZoom: false,
-      zoomControl: false,
+      zoomControl: false
     }).setView([0, 1], 4);
     this.renderedMap.dragging.disable();
     this.renderedMap.doubleClickZoom.disable();

package/src/leafletmap/helpers.ts

@@ -3,14 +3,14 @@ export const normalFeature = {
   opacity: 1,
   color: 'white',
   fillOpacity: 0.7,
-  fillColor: '#2387ca',
+  fillColor: '#2387ca'
 };
 
 export const highlightedFeature = {
   weight: 3,
   color: 'white',
   fillOpacity: 1,
-  fillColor: '#2387ca',
+  fillColor: '#2387ca'
 };
 
 export const visibleStyle = () => {

package/src/lightbox/Lightbox.ts

@@ -127,7 +127,7 @@ export class Lightbox extends RapidElement {
 
   public render() {
     const styles = {
-      transition: `transform ${this.animationTime}ms ease, box-shadow ${this.animationTime}ms ease`,
+      transition: `transform ${this.animationTime}ms ease, box-shadow ${this.animationTime}ms ease`
     };
 
     if (this.show) {
@@ -148,7 +148,7 @@ export class Lightbox extends RapidElement {
         class=${getClasses({
           container: true,
           show: this.show,
-          zoom: this.zoom,
+          zoom: this.zoom
         })}
         @click=${this.handleClick}
       >

package/src/list/ContentMenu.ts

@@ -7,7 +7,7 @@ import { getUrl, WebResponse } from '../utils';
 
 const HEADERS = {
   'Temba-Content-Menu': '1',
-  'Temba-Spa': '1',
+  'Temba-Spa': '1'
 };
 export interface ContentMenuItem {
   type: string;
@@ -28,7 +28,7 @@ export enum ContentMenuItemType {
   JS = 'js',
   URL_POST = 'url_post',
   MODAX = 'modax',
-  DIVIDER = 'divider',
+  DIVIDER = 'divider'
 }
 
 export class ContentMenu extends RapidElement {
@@ -112,8 +112,8 @@ export class ContentMenu extends RapidElement {
 
           //populate (or initialize) the buttons and items
           if (contentMenu) {
-            this.buttons = contentMenu.filter(item => item.as_button);
-            this.items = contentMenu.filter(item => !item.as_button);
+            this.buttons = contentMenu.filter((item) => item.as_button);
+            this.items = contentMenu.filter((item) => !item.as_button);
           } else {
             this.buttons = [];
             this.items = [];
@@ -122,7 +122,7 @@ export class ContentMenu extends RapidElement {
           //fire custom loaded event type when we're finished
           this.fireCustomEvent(CustomEventType.Loaded, {
             buttons: this.buttons,
-            items: this.items,
+            items: this.items
           });
         })
         .catch((error: any) => {
@@ -150,11 +150,11 @@ export class ContentMenu extends RapidElement {
   public render(): TemplateResult {
     return html`
       <div class="container">
-        ${this.buttons.map(button => {
+        ${this.buttons.map((button) => {
           return html`<temba-button
             class="${button.primary ? 'primary_button_item' : 'button_item'}"
             name=${button.label}
-            @click=${event => this.handleItemClicked(button, event)}
+            @click=${(event) => this.handleItemClicked(button, event)}
           >
             ${button.label}
           </temba-button>`;
@@ -170,14 +170,14 @@ export class ContentMenu extends RapidElement {
                 <temba-icon name="menu" size="1.5"></temba-icon>
               </div>
               <div slot="dropdown" class="dropdown">
-                ${this.items.map(item => {
+                ${this.items.map((item) => {
                   if (item.type === ContentMenuItemType.DIVIDER) {
                     return html` <div class="divider"></div>`;
                   } else {
                     return html` <div
                       class="item"
                       name=${item.label}
-                      @click=${event => this.handleItemClicked(item, event)}
+                      @click=${(event) => this.handleItemClicked(item, event)}
                     >
                       ${item.label}
                     </div>`;

package/src/list/RunList.ts

@@ -94,7 +94,7 @@ export class RunList extends TembaList {
   }
 
   public removeRun(id: number) {
-    this.items = this.items.filter(run => run.id !== id);
+    this.items = this.items.filter((run) => run.id !== id);
     this.cursorIndex = Math.min(this.cursorIndex, this.items.length);
     this.requestUpdate('cursorIndex');
   }

package/src/list/SortableList.ts

@@ -86,14 +86,14 @@ export class SortableList extends RapidElement {
     return this.shadowRoot
       .querySelector('slot')
       .assignedElements()
-      .map(ele => ele.id);
+      .map((ele) => ele.id);
   }
 
   private getRowIndex(id: string): number {
     return this.shadowRoot
       .querySelector('slot')
       .assignedElements()
-      .findIndex(ele => ele.id === id);
+      .findIndex((ele) => ele.id === id);
   }
 
   private getOverlappingElement(mouseY: number): HTMLDivElement {
@@ -102,7 +102,7 @@ export class SortableList extends RapidElement {
     const ele = this.shadowRoot
       .querySelector('slot')
       .assignedElements()
-      .find(otherEle => {
+      .find((otherEle) => {
         const rect = otherEle.getBoundingClientRect();
 
         // don't return ourselves
@@ -150,7 +150,7 @@ export class SortableList extends RapidElement {
       Math.abs(event.clientY - this.yDown) > DRAG_THRESHOLD
     ) {
       this.fireCustomEvent(CustomEventType.DragStart, {
-        id: this.downEle.id,
+        id: this.downEle.id
       });
 
       this.ghostElement = this.downEle.cloneNode(true) as HTMLDivElement;
@@ -185,7 +185,7 @@ export class SortableList extends RapidElement {
           from: dragId,
           to: otherId,
           fromIdx: this.draggingIdx,
-          toIdx: otherIdx,
+          toIdx: otherIdx
         });
 
         // TODO: Dont do swapping, just send the full order?
@@ -198,7 +198,7 @@ export class SortableList extends RapidElement {
   private handleMouseUp() {
     if (this.draggingId) {
       this.fireCustomEvent(CustomEventType.DragStop, {
-        id: this.draggingId,
+        id: this.draggingId
       });
 
       this.draggingId = null;

package/src/list/TembaList.ts

@@ -178,7 +178,7 @@ export class TembaList extends RapidElement {
   }
 
   public setSelection(value: string) {
-    const index = this.items.findIndex(item => {
+    const index = this.items.findIndex((item) => {
       return this.getValue(item) === value;
     });
     this.cursorIndex = index;
@@ -188,7 +188,7 @@ export class TembaList extends RapidElement {
   }
 
   public getItemIndex(value: string) {
-    return this.items.findIndex(option => this.getValue(option) === value);
+    return this.items.findIndex((option) => this.getValue(option) === value);
   }
 
   public removeItem(value: string) {
@@ -259,7 +259,7 @@ export class TembaList extends RapidElement {
           }
           const newValue = this.getValue(newOption);
           const removeIndex = items.findIndex(
-            option => this.getValue(option) === newValue
+            (option) => this.getValue(option) === newValue
           );
 
           if (removeIndex > -1) {
@@ -287,7 +287,7 @@ export class TembaList extends RapidElement {
           const prevValue = this.getValue(prevItem);
           if (prevValue !== this.getValue(newItem)) {
             const newIndex = newItems.findIndex(
-              option => this.getValue(option) === prevValue
+              (option) => this.getValue(option) === prevValue
             );
             this.cursorIndex = newIndex;
 
@@ -373,7 +373,7 @@ export class TembaList extends RapidElement {
       newItem &&
       this.getValue(newItem) !== this.getValue(this.selected)
     ) {
-      const index = fetchedItems.findIndex(item => {
+      const index = fetchedItems.findIndex((item) => {
         return this.getValue(item) === this.getValue(this.selected);
       });
 

package/src/list/TembaMenu.ts

@@ -1,4 +1,4 @@
-import { css, html, PropertyValueMap, TemplateResult } from 'lit';
+import { css, html, TemplateResult } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { property } from 'lit/decorators.js';
 import { CustomEventType } from '../interfaces';
@@ -716,7 +716,7 @@ export class TembaMenu extends ResizeElement {
     if (changes.has('endpoint')) {
       this.root = {
         level: -1,
-        endpoint: this.endpoint,
+        endpoint: this.endpoint
       };
 
       if (!this.wait) {
@@ -747,7 +747,7 @@ export class TembaMenu extends ResizeElement {
       // we need to wait until the load is complete before doing the replace
       await this.httpComplete;
       const id = path.shift();
-      item = (item.items || []).find(_item => _item.id == id);
+      item = (item.items || []).find((_item) => _item.id == id);
     }
 
     this.loadItems(item);
@@ -768,10 +768,10 @@ export class TembaMenu extends ResizeElement {
       item.loading = true;
       this.httpComplete = fetchResults(item.endpoint).then(
         (items: MenuItem[]) => {
-          items.forEach(newItem => {
+          items.forEach((newItem) => {
             if (!newItem.items) {
               const prevItem = (item.items || []).find(
-                prev => prev.id == newItem.id
+                (prev) => prev.id == newItem.id
               );
               if (prevItem && prevItem.items) {
                 newItem.items = prevItem.items;
@@ -780,11 +780,11 @@ export class TembaMenu extends ResizeElement {
           });
 
           // update our item level
-          items.forEach(subItem => {
+          items.forEach((subItem) => {
             subItem.level = item.level + 1;
             // if we came with preset items, set the level for them accordingly
             if (subItem.items) {
-              subItem.items.forEach(inlineItem => {
+              subItem.items.forEach((inlineItem) => {
                 inlineItem.level = item.level + 2;
               });
             }
@@ -827,7 +827,7 @@ export class TembaMenu extends ResizeElement {
         this.fireCustomEvent(CustomEventType.ButtonClicked, {
           item: menuItem,
           selection: this.getSelection(),
-          parent,
+          parent
         });
       }
 
@@ -839,7 +839,7 @@ export class TembaMenu extends ResizeElement {
         this.fireCustomEvent(CustomEventType.ButtonClicked, {
           item: menuItem,
           selection: this.getSelection(),
-          parent,
+          parent
         });
       }
       return;
@@ -870,7 +870,7 @@ export class TembaMenu extends ResizeElement {
       this.fireCustomEvent(CustomEventType.ButtonClicked, {
         item: menuItem,
         selection: this.getSelection(),
-        parent,
+        parent
       });
       return;
     }
@@ -904,7 +904,7 @@ export class TembaMenu extends ResizeElement {
     this.fireCustomEvent(CustomEventType.ButtonClicked, {
       item: menuItem,
       selection: this.getSelection(),
-      parent,
+      parent
     });
   }
 
@@ -912,7 +912,7 @@ export class TembaMenu extends ResizeElement {
     // makes sure we are scrolled into view
     window.setTimeout(() => {
       const eles = this.shadowRoot.querySelectorAll('.selected');
-      eles.forEach(ele => {
+      eles.forEach((ele) => {
         ele.scrollIntoView({ block: 'end', behavior: 'smooth' });
       });
     }, 0);
@@ -969,7 +969,7 @@ export class TembaMenu extends ResizeElement {
   }
 
   public async setFocusedItem(path: string) {
-    const focusedPath = path.split('/').filter(step => !!step);
+    const focusedPath = path.split('/').filter((step) => !!step);
     if (!this.root) {
       return;
     }
@@ -1017,7 +1017,7 @@ export class TembaMenu extends ResizeElement {
 
   private isExpanded(menuItem: MenuItem) {
     const expanded = !!this.selection.find(
-      id => id === menuItem.vanity_id || menuItem.id
+      (id) => id === menuItem.vanity_id || menuItem.id
     );
     return expanded;
   }
@@ -1047,7 +1047,7 @@ export class TembaMenu extends ResizeElement {
     if (menuItem.type === 'modax-button') {
       return html`<temba-button
         name=${menuItem.name}
-        @click=${event => {
+        @click=${(event) => {
           this.handleItemClicked(event, menuItem);
         }}
       />`;
@@ -1092,14 +1092,14 @@ export class TembaMenu extends ResizeElement {
       expanded: this.isExpanded(menuItem),
       iconless: !icon && !collapsedIcon && !menuItem.avatar,
       pressed: this.pressedItem && this.pressedItem.id == menuItem.id,
-      'show-mobile': menuItem.mobile,
+      'show-mobile': menuItem.mobile
     });
 
     if (menuItem.avatar) {
       icon = renderAvatar({
         name: menuItem.avatar,
         tip: false,
-        scale: parent ? 0.9 : 1.2,
+        scale: parent ? 0.9 : 1.2
       });
       if (menuItem.bubble) {
         icon = html`${icon}${menuItem.bubble
@@ -1117,7 +1117,7 @@ export class TembaMenu extends ResizeElement {
         href=${ifDefined(menuItem.href ? menuItem.href : undefined)}
         id="menu-${menuItem.id}"
         class="${itemClasses}"
-        @click=${event => {
+        @click=${(event) => {
           event.preventDefault();
           this.pressedItem = null;
           this.handleItemClicked(event, menuItem, parent);
@@ -1219,14 +1219,14 @@ export class TembaMenu extends ResizeElement {
         <div class="top-spacer"></div>
 
         ${items
-          .filter(item => !item.bottom)
+          .filter((item) => !item.bottom)
           .map((item: MenuItem) => {
             return this.renderMenuItem(item);
           })}
 
         <div class="empty"></div>
         ${items
-          .filter(item => !!item.bottom)
+          .filter((item) => !!item.bottom)
           .map((item: MenuItem) => {
             return this.renderMenuItem(item);
           })}
@@ -1263,14 +1263,14 @@ export class TembaMenu extends ResizeElement {
             class="${getClasses({
               level: true,
               ['level-' + (index + 1)]: true,
-              collapsed,
+              collapsed
             })}"
           >
             ${!this.submenu
               ? html`
                   <slot
                     class="${getClasses({
-                      'show-header': selected.show_header,
+                      'show-header': selected.show_header
                     })}"
                     name="header"
                   ></slot>
@@ -1307,7 +1307,7 @@ export class TembaMenu extends ResizeElement {
       class="${getClasses({
         root: true,
         'fully-collapsed': this.collapsed,
-        mobile: this.isMobile(),
+        mobile: this.isMobile()
       })}"
     >
       ${levels}

package/src/loading/Loading.ts

@@ -63,7 +63,7 @@ export class Loading extends LitElement {
             height: this.size + 'px',
             margin: margin + 'px',
             animationDelay: `-${1 - num * (1 / this.units)}s`,
-            background: this.color,
+            background: this.color
           };
           return html`
             <div class="loading-unit" style=${styleMap(ballStyle)}></div>

package/src/locales/es.ts

@@ -11,5 +11,5 @@ export const templates = {
   sd149dff460c8dc41: `Skip contacts currently in a flow`,
   sc85010c81b71421e: `Avoid interrupting a contact who is already in a flow.`,
   s3e3fa53e834f4fda: `Skip repeat contacts`,
-  s95e715d82602bced: `Avoid restarting a contact who has been in this flow in the last 90 days.`,
+  s95e715d82602bced: `Avoid restarting a contact who has been in this flow in the last 90 days.`
 };

package/src/locales/fr.ts

@@ -11,5 +11,5 @@ export const templates = {
   sd149dff460c8dc41: `Skip contacts currently in a flow`,
   sc85010c81b71421e: `Avoid interrupting a contact who is already in a flow.`,
   s3e3fa53e834f4fda: `Skip repeat contacts`,
-  s95e715d82602bced: `Avoid restarting a contact who has been in this flow in the last 90 days.`,
+  s95e715d82602bced: `Avoid restarting a contact who has been in this flow in the last 90 days.`
 };

package/src/locales/pt.ts

@@ -11,5 +11,5 @@ export const templates = {
   sd149dff460c8dc41: `Skip contacts currently in a flow`,
   sc85010c81b71421e: `Avoid interrupting a contact who is already in a flow.`,
   s3e3fa53e834f4fda: `Skip repeat contacts`,
-  s95e715d82602bced: `Avoid restarting a contact who has been in this flow in the last 90 days.`,
+  s95e715d82602bced: `Avoid restarting a contact who has been in this flow in the last 90 days.`
 };

package/src/omnibox/Omnibox.ts

@@ -7,7 +7,7 @@ import { Icon } from '../vectoricon';
 
 enum OmniType {
   Group = 'group',
-  Contact = 'contact',
+  Contact = 'contact'
 }
 
 export interface OmniOption {
@@ -23,7 +23,7 @@ export interface OmniOption {
 const postNameStyle = {
   color: 'var(--color-text-dark)',
   padding: '0px 6px',
-  fontSize: '12px',
+  fontSize: '12px'
 };
 
 export class Omnibox extends RapidElement {