@nyaruka/temba-components 0.21.0 → 0.24.1

package/src/list/TembaMenu.ts

@@ -5,6 +5,7 @@ import { fetchResults, getClasses } from '../utils';
 
 export interface MenuItem {
   id?: string;
+  vanity_id?: string;
   name?: string;
   count?: number;
   icon?: string;
@@ -17,12 +18,18 @@ export interface MenuItem {
   href?: string;
   items?: MenuItem[];
   inline?: boolean;
+  type?: string;
 }
 
 interface MenuItemState {
   collapsed?: string;
 }
 
+const findItem = (items: MenuItem[], id: string) =>
+  (items || []).find((item: MenuItem) => {
+    return item.id == id || item.vanity_id == id;
+  });
+
 export class TembaMenu extends RapidElement {
   static get styles() {
     return css`
@@ -58,6 +65,7 @@ export class TembaMenu extends RapidElement {
         -webkit-user-select: none;
         display: flex;
         font-size: 1.15em;
+        --icon-color: var(--color-text-dark);
       }
 
       .item.selected {
@@ -135,6 +143,9 @@ export class TembaMenu extends RapidElement {
         margin-top: 0.1em;
         border-radius: var(--curvature);
         display: flex;
+
+        min-width: 12em;
+        max-width: 12em;
       }
 
       .item > temba-icon {
@@ -142,7 +153,7 @@ export class TembaMenu extends RapidElement {
       }
 
       .item.inline > temba-icon {
-        margin-right: 0em;
+        // margin-right: 0em;
       }
 
       .item > .details > .name {
@@ -150,12 +161,15 @@ export class TembaMenu extends RapidElement {
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
+        width: 0;
       }
 
       .level-0 > .item {
         padding: 1em 1em;
         margin-top: 0em;
         border-radius: 0px;
+        min-width: inherit;
+        max-width: inherit;
       }
 
       .level-0 > .item > temba-icon {
@@ -203,32 +217,43 @@ export class TembaMenu extends RapidElement {
       }
 
       .inline-children {
-        padding-left: 0.5em;
-      }
-
-      .inline-children {
-        background: #ffffff;
+        // background: #ffffff;
         padding: 0.5em;
         border-bottom-right-radius: var(--curvature);
         border-bottom-left-radius: var(--curvature);
-        font-size: 0.9rem;
+        font-size: 1rem;
         margin-bottom: 0.75em;
-        border: 1px solid #f1f1f1;
+        border: 1px solid #f3f3f3;
+        // box-shadow: var(--shadow);
+        // margin-top: -1px;
+        z-index: 1000;
+        // margin-left: 1em;
+        border-top: none;
+      }
+
+      .inline-children .item {
+        max-width: 11em !important;
+        min-width: 11em !important;
+        // border: 1px solid #f1f1f1;
+        // margin-top: 0.75em;
+        // margin-right: -1em;
+        // padding-right: 0;
       }
 
       .item.inline {
-        border: 1px solid #f1f1f1;
-        margin-top: 0.75em;
+        border: 0px solid transparent;
       }
 
       .item.inline.child-selected,
       .item.inline.selected {
-        background: #f1f1f1;
+        background: #f3f3f3;
+        border: 0px solid #f1f1f1;
         border-bottom-right-radius: 0px !important;
         border-bottom-left-radius: 0px !important;
         z-index: 1000;
         color: #444;
         --icon-color: #444;
+        // box-shadow: var(--shadow);
       }
 
       .level-1,
@@ -288,6 +313,10 @@ export class TembaMenu extends RapidElement {
       .item temba-icon {
       }
 
+      .collapsed .item {
+        margin-bottom: 0.5em;
+      }
+
       .collapsed .item .details {
         overflow: hidden;
         max-height: 0em;
@@ -303,18 +332,19 @@ export class TembaMenu extends RapidElement {
       }
 
       .section {
-        transition: opacity var(--transition-speed) linear !important;
         max-width: 12em;
       }
 
       .collapsed .section {
         opacity: 0;
         max-width: 0em;
-        max-height: 0.3em;
+        max-height: 0.6em;
       }
 
       .collapsed.level-1 {
         overflow: hidden;
+        padding: 0.5em;
+        --icon-color: #999;
       }
 
       .collapsed .item .right {
@@ -334,6 +364,7 @@ export class TembaMenu extends RapidElement {
         max-height: 0em;
         padding: 0em;
         min-height: 0em;
+        margin-bottom: 0em;
       }
 
       .divider {
@@ -349,6 +380,13 @@ export class TembaMenu extends RapidElement {
         padding: 0;
         min-height: 0px;
       }
+
+      .sub-section {
+        font-size: 1.1rem;
+        color: #888;
+        margin-top: 1rem;
+        margin-left: 0.3rem;
+      }
     `;
   }
 
@@ -423,7 +461,7 @@ export class TembaMenu extends RapidElement {
     while (path.length > 0) {
       const step = path.splice(0, 1)[0];
       if (items) {
-        item = items.find(mi => mi.id == step);
+        item = findItem(items, step);
         if (item) {
           if (item.endpoint) {
             item.loading = true;
@@ -432,9 +470,7 @@ export class TembaMenu extends RapidElement {
               // for now we only deal with updating counts and names
               (itemToUpdate.items || []).forEach(
                 (existing: MenuItem, index: number, items: []) => {
-                  const updatedItem = updated.find(
-                    updatedItem => updatedItem.id === existing.id
-                  );
+                  const updatedItem = findItem(updated, existing.id);
 
                   // we were removed!
                   if (!updatedItem) {
@@ -467,40 +503,72 @@ export class TembaMenu extends RapidElement {
     }
   }
 
+  private fireNoPath(missingId: string) {
+    const item = this.getMenuItem();
+
+    const details = {
+      item: item.id,
+      selection: '/' + this.selection.join('/'),
+      endpoint: item.endpoint,
+      path: missingId + '/' + this.pending.join('/') + document.location.search,
+    };
+
+    // remove any excess from our selection
+    const selection = this.selection.join('/');
+    selection.replace(details.path, '');
+    this.selection = selection.split('/');
+
+    this.fireCustomEvent(CustomEventType.NoPath, details);
+    this.pending = [];
+    this.requestUpdate('root');
+  }
+
   // eslint-disable-next-line @typescript-eslint/no-empty-function
-  private loadItems(item: MenuItem) {
+  private loadItems(item: MenuItem, selectFirst = true) {
     if (item && item.endpoint) {
       item.loading = true;
       this.httpComplete = fetchResults(item.endpoint).then(
         (items: MenuItem[]) => {
           // update our item level
-          items.forEach(subItem => (subItem.level = item.level + 1));
+          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 => (inlineItem.level = item.level + 2)
+              );
+            }
+          });
+
           item.items = items;
           item.loading = false;
           this.requestUpdate('root');
+          this.scrollSelectedIntoView();
           if (this.pending && this.pending.length > 0) {
             // auto select the next pending click
             const nextId = this.pending.splice(0, 1)[0];
             if (nextId && items.length > 0) {
-              const nextItem = items.find(item => item.id === nextId);
+              const nextItem = findItem(items, nextId);
               if (nextItem) {
                 this.handleItemClicked(null, nextItem);
               } else {
-                this.fireCustomEvent(CustomEventType.NoPath, {
-                  item: item.id,
-                  endpoint: item.endpoint,
-                  path: nextId + '/' + this.pending.join('/'),
-                });
+                this.fireNoPath(nextId);
               }
             }
           } else {
             // auto select the first item
             if (
+              selectFirst &&
               items.length > 0 &&
               this.selection.length >= 1 &&
               !item.inline
             ) {
-              this.handleItemClicked(null, items[0]);
+              for (const item of items) {
+                if (!item.type) {
+                  this.handleItemClicked(null, item);
+                  break;
+                }
+              }
             }
           }
         }
@@ -527,17 +595,17 @@ export class TembaMenu extends RapidElement {
 
       // update our selection
       if (menuItem.level >= this.selection.length) {
-        this.selection.push(menuItem.id);
+        this.selection.push(menuItem.vanity_id || menuItem.id);
       } else {
         this.selection.splice(
           menuItem.level,
           this.selection.length - menuItem.level,
-          menuItem.id
+          menuItem.vanity_id || menuItem.id
         );
       }
 
       if (menuItem.endpoint) {
-        this.loadItems(menuItem);
+        this.loadItems(menuItem, !menuItem.href);
         this.dispatchEvent(new Event('change'));
       } else {
         this.dispatchEvent(new Event('change'));
@@ -547,19 +615,29 @@ export class TembaMenu extends RapidElement {
           const nextId = this.pending.splice(0, 1)[0];
           const item = this.getMenuItem();
           if (nextId && item && item.items && item.items.length > 0) {
-            const nextItem = item.items.find(item => item.id === nextId);
+            const nextItem = findItem(item.items, nextId);
             if (nextItem) {
               this.handleItemClicked(null, nextItem);
             }
+          } else {
+            this.fireNoPath(nextId);
           }
         }
-
-        this.pending = [];
         this.requestUpdate('root');
       }
     }
   }
 
+  public scrollSelectedIntoView() {
+    // makes sure we are scrolled into view
+    window.setTimeout(() => {
+      const eles = this.shadowRoot.querySelectorAll('.selected');
+      eles.forEach(ele => {
+        ele.scrollIntoView({ block: 'end', behavior: 'smooth' });
+      });
+    }, 0);
+  }
+
   public clickItem(id: string): boolean {
     const path = [...this.selection];
     path.splice(path.length - 1, 1, id);
@@ -567,12 +645,13 @@ export class TembaMenu extends RapidElement {
 
     if (item) {
       this.handleItemClicked(null, item);
+      this.scrollSelectedIntoView();
       return true;
     }
     return false;
   }
 
-  public getMenuItem() {
+  public getMenuItem(): MenuItem {
     return this.getMenuItemForSelection([...this.selection]);
   }
 
@@ -583,7 +662,7 @@ export class TembaMenu extends RapidElement {
     while (path.length > 0) {
       const step = path.splice(0, 1)[0];
       if (items) {
-        item = items.find(mi => mi.id == step);
+        item = findItem(items, step);
         if (item) {
           items = item.items;
         } else {
@@ -623,29 +702,65 @@ export class TembaMenu extends RapidElement {
     }
   }
 
-  public setFocusedItem(path: string) {
+  public async setFocusedItem(path: string) {
     const focusedPath = path.split('/').filter(step => !!step);
-    this.selection = focusedPath;
+
+    // if we don't match at the first level, we are a noop
+    if (focusedPath.length > 0) {
+      const rootItem = findItem(this.root.items, focusedPath[0]);
+      if (!rootItem) {
+        return;
+      }
+    }
+
+    const newPath = [];
+    let level = this.root;
+    while (focusedPath.length > 0) {
+      const nextId = focusedPath.shift();
+      if (nextId) {
+        if (!level.items) {
+          this.loadItems(level, false);
+          await this.httpComplete;
+        }
+
+        level = findItem(level.items, nextId);
+        if (!level) {
+          focusedPath.splice(0, focusedPath.length);
+        } else {
+          newPath.push(nextId);
+        }
+      }
+    }
+
+    this.selection = newPath;
     this.requestUpdate('root');
   }
 
   private isSelected(menuItem: MenuItem) {
     if (menuItem.level < this.selection.length) {
-      return this.selection[menuItem.level] == menuItem.id;
+      const selected =
+        this.selection[menuItem.level] == (menuItem.vanity_id || menuItem.id);
+      return selected;
     }
     return false;
   }
 
   private isExpanded(menuItem: MenuItem) {
-    const expanded = !!this.selection.find(id => menuItem.id === id);
+    const expanded = !!this.selection.find(
+      id => id === menuItem.vanity_id || menuItem.id
+    );
     return expanded;
   }
 
   private renderMenuItem = (menuItem: MenuItem): TemplateResult => {
-    if (menuItem.id === 'divider') {
+    if (menuItem.type === 'divider') {
       return html`<div class="divider"></div>`;
     }
 
+    if (menuItem.type === 'section') {
+      return html`<div class="sub-section">${menuItem.name}</div>`;
+    }
+
     const isSelected = this.isSelected(menuItem);
     const isChildSelected =
       isSelected && this.selection.length > menuItem.level + 1;
@@ -699,7 +814,7 @@ export class TembaMenu extends RapidElement {
         <div class="details" style="flex-grow:1;display:flex">
           <div
             class="name"
-            style="flex-grow:1; flex-shrink:0 white-space: ${this.wraps
+            style="flex-grow:1; flex-shrink:0; white-space: ${this.wraps
               ? 'normal'
               : 'nowrap'};"
           >
@@ -763,7 +878,8 @@ export class TembaMenu extends RapidElement {
     );
 
     this.selection.forEach((id, index) => {
-      const selected = (items || []).find(item => item.id === id);
+      const selected = findItem(items, id);
+
       let collapsed = false;
       if (selected) {
         items = selected.items;
@@ -775,7 +891,7 @@ export class TembaMenu extends RapidElement {
         // otherwise pick a default collapse state
         else {
           if (this.selection.length > selected.level + 2) {
-            collapsed = true;
+            collapsed = false;
           }
         }
       } else {

package/src/omnibox/Omnibox.ts

@@ -1,6 +1,7 @@
 import { TemplateResult, html, css, property } from 'lit-element';
 import { styleMap } from 'lit-html/directives/style-map';
 import { RapidElement } from '../RapidElement';
+import { Select } from '../select/Select';
 
 enum OmniType {
   Group = 'group',
@@ -104,7 +105,9 @@ export class Omnibox extends RapidElement {
     }
 
     if (option.type === OmniType.Group) {
-      return html` <div style=${styleMap(style)}>${option.count}</div> `;
+      return html`
+        <div style=${styleMap(style)}>${option.count.toLocaleString()}</div>
+      `;
     }
 
     return null;
@@ -172,6 +175,11 @@ export class Omnibox extends RapidElement {
     }
   }
 
+  public getValues(): any[] {
+    const select = this.shadowRoot.querySelector('temba-select') as Select;
+    return select.values;
+  }
+
   public render(): TemplateResult {
     return html`
       <temba-select

package/src/select/Select.ts

@@ -455,6 +455,8 @@ export class Select extends FormElement {
   private next: string = null;
   private query: string;
 
+  private removingSelection: boolean;
+
   private lruCache = flru(20);
 
   // http promise to monitor for completeness
@@ -854,7 +856,7 @@ export class Select extends FormElement {
   private handleFocus(): void {
     if (!this.focused && this.visibleOptions.length === 0) {
       this.focused = true;
-      if (this.searchOnFocus) {
+      if (this.searchOnFocus && !this.removingSelection) {
         this.requestUpdate('input');
       }
     }
@@ -1192,6 +1194,12 @@ export class Select extends FormElement {
                           <div
                             class="remove-item"
                             style="margin-top:1px"
+                            @mousedown=${() => {
+                              this.removingSelection = true;
+                            }}
+                            @mouseup=${() => {
+                              this.removingSelection = false;
+                            }}
                             @click=${(evt: MouseEvent) => {
                               evt.preventDefault();
                               evt.stopPropagation();

package/src/textinput/TextInput.ts

@@ -96,6 +96,33 @@ export class TextInput extends FormElement {
         color: var(--color-placeholder);
         font-weight: 300;
       }
+
+      .grow-wrap {
+        display: flex;
+        align-items: stretch;
+        width: 100%;
+      }
+
+      .grow-wrap > div {
+        border: 0px solid green;
+        width: 100%;
+        padding: var(--temba-textinput-padding);
+        flex: 1;
+        margin: 0;
+        background: none;
+        color: var(--color-widget-text);
+        font-family: var(--font-family);
+        font-size: var(--temba-textinput-font-size);
+        line-height: normal;
+        cursor: text;
+        resize: none;
+        font-weight: 300;
+        width: 100%;
+      }
+
+      .grow-wrap textarea {
+        margin-left: -100%;
+      }
     `;
   }
 
@@ -151,6 +178,9 @@ export class TextInput extends FormElement {
   @property({ type: Boolean })
   disabled = false;
 
+  @property({ type: Boolean })
+  autogrow = false;
+
   counterElement: CharCount = null;
   cursorStart = -1;
   cursorEnd = -1;
@@ -189,6 +219,13 @@ export class TextInput extends FormElement {
       this.setValues([this.value]);
       this.fireEvent('change');
 
+      if (this.textarea && this.autogrow) {
+        const autogrow = this.shadowRoot.querySelector(
+          '.grow-wrap > div'
+        ) as HTMLDivElement;
+        autogrow.innerText = this.value + String.fromCharCode(10);
+      }
+
       if (this.cursorStart > -1 && this.cursorEnd > -1) {
         this.inputElement.setSelectionRange(this.cursorStart, this.cursorEnd);
         this.cursorStart = -1;
@@ -288,6 +325,7 @@ export class TextInput extends FormElement {
     if (this.disabled) {
       return;
     }
+
     this.updateValue(update.target.value);
     this.setValues([this.value]);
     this.fireEvent('input');
@@ -416,10 +454,11 @@ export class TextInput extends FormElement {
           }
         }}
         placeholder=${this.placeholder}
-        value="${this.value}"
+        .value=${this.value}
         .disabled=${this.disabled}
       />
     `;
+
     if (this.textarea) {
       input = html`
         <textarea
@@ -433,6 +472,13 @@ export class TextInput extends FormElement {
           .disabled=${this.disabled}
         ></textarea>
       `;
+
+      if (this.autogrow) {
+        input = html` <div class="grow-wrap">
+          <div></div>
+          ${input}
+        </div>`;
+      }
     }
 
     if (this.datepicker || this.datetimepicker) {

package/src/utils/index.ts

@@ -39,29 +39,29 @@ export const getHTTPCookie = (name: string): string => {
   return null;
 };
 
-export const getHeaders = (pjax = false) => {
+export const getHeaders = (headers: any = {}) => {
   const csrf = getHTTPCookie('csrftoken');
-  const headers: any = csrf ? { 'X-CSRFToken': csrf } : {};
+  const fetchHeaders: any = csrf ? { 'X-CSRFToken': csrf } : {};
 
   // mark us as ajax
-  headers['X-Requested-With'] = 'XMLHttpRequest';
+  fetchHeaders['X-Requested-With'] = 'XMLHttpRequest';
 
-  if (pjax) {
-    headers['X-PJAX'] = 'true';
-  }
+  Object.keys(headers).forEach(key => {
+    fetchHeaders[key] = headers[key];
+  });
 
-  return headers;
+  return fetchHeaders;
 };
 
 export const getUrl = (
   url: string,
   controller: AbortController = null,
-  pjax = false
+  headers: { [key: string]: string } = {}
 ): Promise<WebResponse> => {
   return new Promise<WebResponse>((resolve, reject) => {
     const options = {
       method: 'GET',
-      headers: getHeaders(pjax),
+      headers: getHeaders(headers),
     };
 
     if (controller) {
@@ -183,17 +183,18 @@ export interface WebResponse {
 export const postUrl = (
   url: string,
   payload: any,
-  pjax = false,
+  headers: any = {},
   contentType = null
 ): Promise<WebResponse> => {
-  const headers = getHeaders(pjax);
+  const fetchHeaders = getHeaders(headers);
+
   if (contentType) {
-    headers['Content-Type'] = contentType;
+    fetchHeaders['Content-Type'] = contentType;
   }
-  //   headers['Content-Type'] = contentType;
+
   const options = {
     method: 'POST',
-    headers,
+    headers: fetchHeaders,
     body: payload,
   };
 
@@ -474,7 +475,7 @@ export const isDate = (value: string): boolean => {
   return DATE_FORMAT.test(value);
 };
 
-export const debounce = (fn: Function, millis: number, immediate = false) => {
+export const debounce = (fn: any, millis: number, immediate = false) => {
   let timeout: any;
   return function (...args: any) {
     const context = this;
@@ -493,7 +494,7 @@ export const debounce = (fn: Function, millis: number, immediate = false) => {
   };
 };
 
-export const throttle = (fn: Function, millis: number) => {
+export const throttle = (fn: any, millis: number) => {
   let ready = true;
   return function (...args: any) {
     const context = this;

package/src/vectoricon/VectorIcon.ts

@@ -3,7 +3,7 @@ import { property, LitElement, TemplateResult, html, css } from 'lit-element';
 import { getClasses } from '../utils';
 
 // for cache busting, increase whenever the icon set changes
-const ICON_VERSION = 4;
+const ICON_VERSION = 5;
 
 export class VectorIcon extends LitElement {
   @property({ type: String })
@@ -41,6 +41,7 @@ export class VectorIcon extends LitElement {
     return css`
       :host {
         margin: auto;
+        --color1: var(--icon-color);
       }
 
       :host([id='flow']),