@nyaruka/temba-components 0.35.2 → 0.36.1

package/src/dropdown/Dropdown.ts

@@ -1,5 +1,5 @@
 import { css, html, TemplateResult } from 'lit';
-import { property } from 'lit/decorators';
+import { property } from 'lit/decorators.js';
 import { RapidElement } from '../RapidElement';
 
 export class Dropdown extends RapidElement {
@@ -71,7 +71,7 @@ export class Dropdown extends RapidElement {
   arrowOffset = this.arrowSize * 2;
 
   @property({ type: Number })
-  offsetX = -10;
+  offsetX = 0;
 
   @property({ type: Number })
   offsetY = 0;
@@ -79,11 +79,7 @@ export class Dropdown extends RapidElement {
   public firstUpdated(props: any) {
     super.firstUpdated(props);
 
-    const dropdown = this.shadowRoot.querySelector(
-      '.dropdown'
-    ) as HTMLDivElement;
     const arrow = this.shadowRoot.querySelector('.arrow') as HTMLDivElement;
-
     arrow.style.borderWidth = this.arrowSize + 'px';
     arrow.style.top = '-' + this.arrowSize + 'px';
 
@@ -93,14 +89,9 @@ export class Dropdown extends RapidElement {
       arrow.style.left = this.arrowOffset + 'px';
     }
 
-    dropdown.style.marginTop = this.offsetY + 'px';
-
-    if (dropdown.offsetLeft + dropdown.clientWidth > window.outerWidth) {
-      dropdown.style.marginLeft =
-        '-' + (dropdown.clientWidth - this.clientWidth - this.offsetX) + 'px';
-    } else {
-      dropdown.style.marginLeft = this.offsetX + 'px';
-    }
+    const dropdown = this.shadowRoot.querySelector(
+      '.dropdown'
+    ) as HTMLDivElement;
 
     dropdown.addEventListener('blur', () => {
       // we nest this to deal with clicking the toggle to close
@@ -116,6 +107,21 @@ export class Dropdown extends RapidElement {
 
   public updated(changedProperties: Map<string, any>) {
     super.updated(changedProperties);
+
+    if (changedProperties.has('offsetY') || changedProperties.has('offsetX')) {
+      const dropdown = this.shadowRoot.querySelector(
+        '.dropdown'
+      ) as HTMLDivElement;
+
+      dropdown.style.marginTop = this.offsetY + 'px';
+      if (dropdown.offsetLeft + dropdown.clientWidth > window.outerWidth) {
+        dropdown.style.marginLeft =
+          '-' + (dropdown.clientWidth - this.clientWidth - this.offsetX) + 'px';
+      } else {
+        dropdown.style.marginLeft = this.offsetX + 'px';
+      }
+    }
+
     if (changedProperties.has('open')) {
       if (this.open) {
         this.classList.add('open');

package/src/fields/FieldManager.ts

@@ -1,5 +1,5 @@
 import { css, html, PropertyValueMap, TemplateResult } from 'lit';
-import { property } from 'lit/decorators';
+import { property } from 'lit/decorators.js';
 import { ContactField, CustomEventType } from '../interfaces';
 
 import { SortableList } from '../list/SortableList';

package/src/flow/FlowStoreElement.ts

@@ -1,5 +1,5 @@
 import { html, PropertyValueMap, TemplateResult } from 'lit';
-import { property } from 'lit/decorators';
+import { property } from 'lit/decorators.js';
 import { FlowDetails } from '../interfaces';
 import { StoreElement } from '../store/StoreElement';
 

package/src/formfield/FormField.ts

@@ -1,5 +1,5 @@
 import { TemplateResult, html, css, LitElement } from 'lit';
-import { property } from 'lit/decorators';
+import { property } from 'lit/decorators.js';
 
 /**
  * A small wrapper to display labels and help text in a smartmin style.

package/src/label/Label.ts

@@ -1,7 +1,7 @@
 import { LitElement, TemplateResult, html, css } from 'lit';
-import { property } from 'lit/decorators';
+import { property } from 'lit/decorators.js';
 import { getClasses } from '../utils';
-import { styleMap } from 'lit-html/directives/style-map';
+import { styleMap } from 'lit-html/directives/style-map.js';
 
 export default class Label extends LitElement {
   static get styles() {

package/src/leafletmap/LeafletMap.ts

@@ -9,7 +9,7 @@ import {
   Path,
 } from 'leaflet';
 import { css, html, LitElement } from 'lit';
-import { property } from 'lit/decorators';
+import { property } from 'lit/decorators.js';
 
 import { FeatureProperties } from '../interfaces';
 import { getUrl, WebResponse } from '../utils';

package/src/list/ContentMenu.ts

@@ -0,0 +1,177 @@
+import { TemplateResult, html, css, PropertyValueMap } from 'lit';
+import { property } from 'lit/decorators.js';
+import { CustomEventType } from '../interfaces';
+
+import { RapidElement } from '../RapidElement';
+import { getUrl, WebResponse } from '../utils';
+
+const HEADERS = {
+  'Temba-Content-Menu': '1',
+  'Temba-Spa': '1',
+};
+
+export interface ContentMenuItem {
+  type: string;
+  as_button: boolean;
+  label: string;
+  url: string;
+  disabled: boolean;
+  modal_id: string;
+  on_submit: string;
+  primary: boolean;
+  title: string;
+  on_click: null;
+  link_class: string;
+}
+
+export enum ContentMenuItemType {
+  LINK = 'link',
+  JS = 'js',
+  URL_POST = 'url_post',
+  MODAX = 'modax',
+  DIVIDER = 'divider',
+}
+
+export class ContentMenu extends RapidElement {
+  static get styles() {
+    return css`
+      .container {
+        --button-y: 0.4em;
+        --button-x: 1em;
+        display: flex;
+      }
+
+      .button_item,
+      .primary_button_item {
+        margin-left: 1rem;
+      }
+
+      .toggle {
+        --icon-color: rgb(102, 102, 102);
+        padding: 0.5rem;
+        margin-left: 0.5rem;
+      }
+
+      .toggle:hover {
+        background: rgba(0, 0, 0, 0.05);
+        border-radius: var(--curvature);
+        --icon-color: rgb(136, 136, 136);
+      }
+
+      .dropdown {
+        padding: 1rem 1.5rem;
+        color: rgb(45, 45, 45);
+        z-index: 50;
+        min-width: 200px;
+      }
+
+      .divider {
+        border-bottom: 1px solid rgb(237, 237, 237);
+        margin: 1rem -1.5em;
+      }
+
+      .item {
+        white-space: nowrap;
+        margin: 0.2em 0em;
+        font-size: 1.1rem;
+        cursor: pointer;
+        font-weight: 400;
+      }
+
+      .item:hover {
+        color: rgb(var(--primary-rgb));
+      }
+    `;
+  }
+
+  @property({ type: String })
+  endpoint: string;
+
+  @property({ type: Array })
+  buttons: ContentMenuItem[] = [];
+
+  @property({ type: Array })
+  items: ContentMenuItem[] = [];
+
+  private fetchContentMenu() {
+    if (this.endpoint) {
+      getUrl(this.endpoint, null, HEADERS)
+        .then((response: WebResponse) => {
+          const json = response.json;
+          const contentMenu = json.items as ContentMenuItem[];
+          if (contentMenu) {
+            this.buttons = contentMenu.filter(item => item.as_button);
+            this.items = contentMenu.filter(item => !item.as_button);
+          } else {
+            this.buttons = [];
+            this.items = [];
+          }
+
+          this.fireCustomEvent(CustomEventType.Loaded, {
+            buttons: this.buttons,
+            items: this.items,
+          });
+        })
+        .catch((error: any) => {
+          console.error(error);
+        });
+    }
+  }
+
+  public refresh() {
+    this.fetchContentMenu();
+  }
+
+  protected updated(changes: Map<string, any>) {
+    if (changes.has('endpoint')) {
+      this.fetchContentMenu();
+    }
+  }
+
+  private handleItemClicked(item: ContentMenuItem) {
+    this.fireCustomEvent(CustomEventType.Selection, item);
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <div class="container">
+        ${this.buttons.map(button => {
+          return html`<temba-button
+            class="${button.primary ? 'primary_button_item' : 'button_item'}"
+            name=${button.label}
+            @click=${() => this.handleItemClicked(button)}
+          >
+            ${button.label}
+          </temba-button>`;
+        })}
+        ${this.items && this.items.length > 0
+          ? html` <temba-dropdown
+              arrowsize="8"
+              arrowoffset="-12"
+              offsetx="-200"
+              offsety="6"
+            >
+              <div slot="toggle" class="toggle">
+                <temba-icon name="menu" size="1.5"></temba-icon>
+              </div>
+              <div slot="dropdown" class="dropdown">
+                ${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=${() => this.handleItemClicked(item)}
+                    >
+                      ${item.label}
+                    </div>`;
+                  }
+                })}
+              </div>
+            </temba-dropdown>`
+          : null}
+      </div>
+    `;
+  }
+}

package/src/list/RunList.ts

@@ -1,8 +1,9 @@
 import { html, TemplateResult } from 'lit';
-import { property } from 'lit/decorators';
+import { property } from 'lit/decorators.js';
 import { Checkbox } from '../checkbox/Checkbox';
 import { Select } from '../select/Select';
 import { capitalize } from '../utils';
+import { Icon } from '../vectoricon';
 import { TembaList } from './TembaList';
 
 const FLOW_COLOR = 'rgb(223, 65, 159)';
@@ -268,7 +269,7 @@ export class RunList extends TembaList {
                       <temba-date
                         value="${this.selectedRun.created_on}"
                         display="duration"
-                      />
+                      ></temba-date>
                     </div>`}
             </div>
           </div>
@@ -286,7 +287,7 @@ export class RunList extends TembaList {
           <temba-icon
             clickable
             style="margin-left:0.75em;"
-            name="trash"
+            name=${Icon.delete}
             onclick="deleteRun(${this.selectedRun.id});"
           ></temba-icon>
         </div>

package/src/list/SortableList.ts

@@ -1,5 +1,5 @@
 import { css, html, PropertyValueMap, TemplateResult } from 'lit';
-import { property } from 'lit/decorators';
+import { property } from 'lit/decorators.js';
 import { CustomEventType } from '../interfaces';
 import { RapidElement } from '../RapidElement';
 

package/src/list/TembaList.ts

@@ -1,5 +1,5 @@
 import { css, html, TemplateResult } from 'lit';
-import { property } from 'lit/decorators';
+import { property } from 'lit/decorators.js';
 import { CustomEventType } from '../interfaces';
 import { RapidElement } from '../RapidElement';
 import { Store } from '../store/Store';
@@ -143,9 +143,7 @@ export class TembaList extends RapidElement {
     }
 
     if (changedProperties.has('mostRecentItem')) {
-      if (this.mostRecentItem) {
-        this.fireCustomEvent(CustomEventType.Refreshed);
-      }
+      this.fireCustomEvent(CustomEventType.Refreshed);
     }
 
     if (changedProperties.has('cursorIndex')) {

package/src/list/TembaMenu.ts

@@ -1,5 +1,5 @@
 import { css, html, TemplateResult } from 'lit';
-import { property } from 'lit/decorators';
+import { property } from 'lit/decorators.js';
 import { CustomEventType } from '../interfaces';
 import { RapidElement } from '../RapidElement';
 import { fetchResults, getClasses } from '../utils';

package/src/list/TicketList.ts

@@ -1,5 +1,5 @@
 import { html, TemplateResult } from 'lit';
-import { property } from 'lit/decorators';
+import { property } from 'lit/decorators.js';
 import { TembaList } from './TembaList';
 import { timeSince } from '../utils';
 import { Contact } from '../interfaces';

package/src/loading/Loading.ts

@@ -1,6 +1,6 @@
 import { html, TemplateResult, css, LitElement } from 'lit';
-import { property } from 'lit/decorators';
-import { styleMap } from 'lit-html/directives/style-map';
+import { property } from 'lit/decorators.js';
+import { styleMap } from 'lit-html/directives/style-map.js';
 import { range } from '../utils';
 
 export class Loading extends LitElement {

package/src/omnibox/Omnibox.ts

@@ -1,6 +1,6 @@
 import { TemplateResult, html, css } from 'lit';
-import { property } from 'lit/decorators';
-import { styleMap } from 'lit-html/directives/style-map';
+import { property } from 'lit/decorators.js';
+import { styleMap } from 'lit-html/directives/style-map.js';
 import { RapidElement } from '../RapidElement';
 import { Select } from '../select/Select';
 import { Icon } from '../vectoricon';

package/src/options/Options.ts

@@ -1,8 +1,8 @@
 import { TemplateResult, html, css } from 'lit';
-import { property } from 'lit/decorators';
+import { property } from 'lit/decorators.js';
 import { CustomEventType } from '../interfaces';
 import { RapidElement, EventHandler } from '../RapidElement';
-import { styleMap } from 'lit-html/directives/style-map';
+import { styleMap } from 'lit-html/directives/style-map.js';
 import {
   getClasses,
   getScrollParent,

package/src/remote/Remote.ts

@@ -1,5 +1,5 @@
 import { css, html, TemplateResult } from 'lit';
-import { property, customElement } from 'lit/decorators';
+import { property, customElement } from 'lit/decorators.js';
 import { RapidElement } from '../RapidElement';
 
 @customElement('temba-remote')

package/src/select/Select.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
 import { TemplateResult, html, css } from 'lit';
-import { property } from 'lit/decorators';
+import { property } from 'lit/decorators.js';
 import {
   getUrl,
   getClasses,
@@ -20,7 +20,7 @@ import {
   executeCompletionQuery,
 } from '../completion/helpers';
 import { Store } from '../store/Store';
-import { styleMap } from 'lit-html/directives/style-map';
+import { styleMap } from 'lit-html/directives/style-map.js';
 import { Icon } from '../vectoricon';
 
 const LOOK_AHEAD = 20;

package/src/shadowless/Shadowless.ts

@@ -1,4 +1,4 @@
-import { customElement, property } from 'lit/decorators';
+import { customElement, property } from 'lit/decorators.js';
 import { TemplateResult, LitElement } from 'lit';
 
 @customElement('temba-shadowless')

package/src/slider/TembaSlider.ts

@@ -1,6 +1,6 @@
 import { css, html, TemplateResult } from 'lit';
-import { styleMap } from 'lit-html/directives/style-map';
-import { property } from 'lit/decorators';
+import { styleMap } from 'lit-html/directives/style-map.js';
+import { property } from 'lit/decorators.js';
 import { FormElement } from '../FormElement';
 import { getClasses } from '../utils';
 

package/src/store/Store.ts

@@ -1,4 +1,4 @@
-import { property } from 'lit/decorators';
+import { property } from 'lit/decorators.js';
 import {
   fetchResults,
   getUrl,
@@ -6,6 +6,8 @@ import {
   Asset,
   WebResponse,
   postUrl,
+  postJSON,
+  postForm,
 } from '../utils';
 import {
   ContactField,
@@ -18,10 +20,6 @@ import {
 } from '../interfaces';
 import { RapidElement } from '../RapidElement';
 import Lru from 'tiny-lru';
-import {
-  HumanizeDurationLanguage,
-  HumanizeDuration,
-} from 'humanize-duration-ts';
 import { DateTime } from 'luxon';
 
 export class Store extends RapidElement {
@@ -66,8 +64,6 @@ export class Store extends RapidElement {
   private workspace: Workspace;
   private featuredFields: ContactField[] = [];
 
-  private langService = new HumanizeDurationLanguage();
-  private humanizer = new HumanizeDuration(this.langService);
 
   // http promise to monitor for completeness
   public httpComplete: Promise<void | WebResponse[]>;
@@ -263,6 +259,14 @@ export class Store extends RapidElement {
       .toLocaleString(DateTime.DATETIME_SHORT);
   }
 
+  public postJSON(url: string, payload: any = '') {
+    return postJSON(url, payload);
+  }
+
+  public postForm(url: string, payload: any | FormData) {
+    return postForm(url, payload);
+  }
+
   public postUrl(
     url: string,
     payload: any = '',

package/src/store/StoreElement.ts

@@ -1,5 +1,5 @@
 import { PropertyValueMap } from 'lit';
-import { property } from 'lit/decorators';
+import { property } from 'lit/decorators.js';
 import { CustomEventType } from '../interfaces';
 import { RapidElement } from '../RapidElement';
 import { Store } from './Store';

package/src/tabpane/Tab.ts

@@ -1,5 +1,5 @@
 import { css, html, TemplateResult } from 'lit';
-import { property } from 'lit/decorators';
+import { property } from 'lit/decorators.js';
 import { RapidElement } from '../RapidElement';
 import { getClasses } from '../utils';
 

package/src/tabpane/TabPane.ts

@@ -1,5 +1,5 @@
 import { css, html, TemplateResult } from 'lit';
-import { property } from 'lit/decorators';
+import { property } from 'lit/decorators.js';
 import { CustomEventType } from '../interfaces';
 import { RapidElement } from '../RapidElement';
 import { getClasses } from '../utils';

package/src/textinput/TextInput.ts

@@ -1,7 +1,7 @@
 import { TemplateResult, html, css } from 'lit';
-import { property } from 'lit/decorators';
-import { ifDefined } from 'lit-html/directives/if-defined';
-import { styleMap } from 'lit-html/directives/style-map';
+import { property } from 'lit/decorators.js';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { styleMap } from 'lit-html/directives/style-map.js';
 import { FormElement } from '../FormElement';
 import { Modax } from '../dialog/Modax';
 import { sanitize } from './helpers';

package/src/tip/Tip.ts

@@ -1,6 +1,6 @@
 import { css, html, TemplateResult } from 'lit';
-import { property } from 'lit/decorators';
-import { styleMap } from 'lit-html/directives/style-map';
+import { property } from 'lit/decorators.js';
+import { styleMap } from 'lit-html/directives/style-map.js';
 import { RapidElement } from '../RapidElement';
 import { getClasses } from '../utils';
 import { getCenter, getMiddle } from './helpers';
@@ -61,6 +61,7 @@ export class Tip extends RapidElement {
       }
     `;
   }
+
   @property({ type: String })
   text: string;
 
@@ -86,11 +87,13 @@ export class Tip extends RapidElement {
   poppedTop: boolean;
 
   arrow: string;
-
   arrowTop: number;
   arrowLeft: number;
   arrowDirection: string;
 
+  lastEnter = 0;
+  failSafe = 0;
+
   public updated(changed: Map<string, any>) {
     if ((changed.has('visible') || changed.has('text')) && this.visible) {
       this.calculatePosition();
@@ -148,9 +151,6 @@ export class Tip extends RapidElement {
     }
   }
 
-  lastEnter = 0;
-  failSafe = 0;
-
   private handleMouseEnter() {
     this.lastEnter = window.setTimeout(() => {
       this.visible = true;

package/src/untyped.d.ts

@@ -16,5 +16,3 @@ declare function moveMouse(x: number, y: number);
 declare function mouseDown();
 declare function mouseUp();
 declare function setViewport({}: any);
-
-declare function readStaticFile(filename: string);

package/src/utils/index.ts

@@ -234,11 +234,7 @@ export const postFormData = (
     postUrl(url, formData, true)
       .then(response => {
         if (response.status >= 200 && response.status < 300) {
-          if (response.json.status === 'success' || response.status === 201) {
-            resolve(response);
-          } else {
-            reject({ errors: response.json.errors });
-          }
+          resolve(response);
         }
         reject('Server failure');
       })

package/src/vectoricon/VectorIcon.ts

@@ -1,5 +1,5 @@
 import { LitElement, TemplateResult, html, css } from 'lit';
-import { property } from 'lit/decorators';
+import { property } from 'lit/decorators.js';
 import { Icon } from '.';
 
 import { getClasses } from '../utils';

package/temba-modules.ts

@@ -41,6 +41,7 @@ import { ContactNameFetch } from './src/contacts/ContactNameFetch';
 import DatePicker from './src/datepicker/DatePicker';
 import { FieldManager } from './src/fields/FieldManager';
 import { SortableList } from './src/list/SortableList';
+import { ContentMenu } from './src/list/ContentMenu';
 import { TembaDate } from './src/date/TembaDate';
 
 export function addCustomElement(name: string, comp: any) {
@@ -69,6 +70,7 @@ addCustomElement('temba-contact-field', ContactFieldEditor);
 addCustomElement('temba-contact-fields', ContactFields);
 addCustomElement('temba-field-manager', FieldManager);
 addCustomElement('temba-urn', ContactUrn);
+addCustomElement('temba-content-menu', ContentMenu);
 
 addCustomElement('temba-field', FormField);
 addCustomElement('temba-dialog', Dialog);
@@ -93,3 +95,4 @@ addCustomElement('temba-contact-badges', ContactBadges);
 addCustomElement('temba-contact-pending', ContactPending);
 addCustomElement('temba-contact-tickets', ContactTickets);
 addCustomElement('temba-slider', TembaSlider);
+addCustomElement('temba-content-menu', ContentMenu);

package/test/MouseHelper.ts

@@ -1,5 +1,5 @@
 import { css, html, TemplateResult } from 'lit';
-import { customElement } from 'lit/decorators';
+import { customElement } from 'lit/decorators.js';
 import { RapidElement } from '../src/RapidElement';
 
 @customElement('mouse-helper')