@nyaruka/temba-components 0.35.3 → 0.37.0

package/src/contacts/ContactChat.ts

@@ -1,5 +1,5 @@
 import { css, html, TemplateResult } from 'lit';
-import { property } from 'lit/decorators';
+import { property } from 'lit/decorators.js';
 import { Contact, CustomEventType, Ticket } from '../interfaces';
 import { COOKIE_KEYS, getCookieBoolean, postJSON, setCookie } from '../utils';
 import { TextInput } from '../textinput/TextInput';
@@ -194,6 +194,9 @@ export class ContactChat extends ContactStoreElement {
   @property({ type: String })
   agent = '';
 
+  // http promise to monitor for completeness
+  public httpComplete: Promise<void>;
+
   constructor() {
     super();
     this.showDetails = getCookieBoolean(COOKIE_KEYS.TICKET_SHOW_DETAILS);
@@ -272,7 +275,7 @@ export class ContactChat extends ContactStoreElement {
     this.currentChat = chat.value;
   }
 
-  private handleReopen() {
+  private handleTicketReopen() {
     const uuid = this.currentTicket.uuid;
     postJSON(`/api/v2/ticket_actions.json`, {
       tickets: [uuid],
@@ -321,163 +324,188 @@ export class ContactChat extends ContactStoreElement {
   }
 
   public render(): TemplateResult {
-    return html`
-      <div
-        style="flex-grow: 1; margin-right: 0em; display:flex; flex-direction:row; min-height: 0;"
-        class="left-pane  ${this.showDetails ? 'open' : ''}"
-      >
-        <div class="chat-wrapper">
-          ${this.currentContact
-            ? html`<temba-contact-history
-                    .uuid=${this.currentContact.uuid}
-                    .contact=${this.currentContact}
-                    .ticket=${
-                      this.currentTicket ? this.currentTicket.uuid : null
-                    }
-                    .endDate=${
-                      this.currentTicket ? this.currentTicket.closed_on : null
-                    }
-                    .agent=${this.agent}
-                  ></temba-contact-history>
-
-                  ${
-                    this.currentTicket && this.currentTicket.closed_on
-                      ? html`<div class="closed-footer">
-                          <temba-button
-                            id="reopen-button"
-                            name="Reopen"
-                            @click=${this.handleReopen}
-                          ></temba-button>
-                        </div>`
-                      : html` <div
-                          class="chatbox ${this.toolbar ? 'full' : ''}"
-                          style="${this.currentContact.status !== 'active'
-                            ? 'display:none'
-                            : ''}"
-                        >
-                          <temba-completion
-                            @change=${this.handleChatChange}
-                            .value=${this.currentChat}
-                            @keydown=${(e: KeyboardEvent) => {
-                              if (e.key === 'Enter' && !e.shiftKey) {
-                                const chat = e.target as Completion;
-                                if (!chat.hasVisibleOptions()) {
-                                  this.handleSend();
-                                  e.preventDefault();
-                                  e.stopPropagation();
-                                }
-                              }
-                            }}
-                            textarea
-                          >
-                          </temba-completion>
-                          <temba-button
-                            id="send-button"
-                            name="Send"
-                            @click=${this.handleSend}
-                            ?disabled=${this.currentChat.trim().length === 0}
-                          ></temba-button>
-                        </div>`
-                  }
-                  </div>`
-            : null}
+    const contactHistory = this.currentContact
+      ? this.getTembaContactHistory()
+      : null;
+    const chatbox = this.currentContact ? this.getTembaChatbox() : null;
+
+    const contactHistoryAndChatbox = html`<div
+      style="flex-grow: 1; margin-right: 0em; display:flex; flex-direction:row; min-height: 0;"
+      class="left-pane  ${this.showDetails ? 'open' : ''}"
+    >
+      <div class="chat-wrapper">${contactHistory} ${chatbox}</div>
+    </div>`;
+
+    if (this.toolbar) {
+      const contactDetails = this.currentContact
+        ? this.getTembaContactDetails()
+        : null;
+      const toggleContactDetails = this.currentContact
+        ? this.getToggleDetailsTembaTip()
+        : null;
+      const addNoteAndAssignTicketTembaTips =
+        this.currentContact && this.currentTicket
+          ? this.getAddNoteAndAssignTicketTembaTips()
+          : null;
+      const addNoteAndAssignTicketTembaModaxes = this.currentTicket
+        ? this.getAddNoteAndAssignTicketTembaModaxes()
+        : null;
+
+      const contactDetailsAndActions = html`${contactDetails}
+        <div class="toolbar ${this.showDetails ? '' : 'closed'}">
+          ${toggleContactDetails} ${addNoteAndAssignTicketTembaTips}
         </div>
-      </div>
-
-      ${this.toolbar
-        ? html`${
-            this.currentContact
-              ? html`<temba-contact-details
-                  style="z-index: 10"
-                  class="${this.showDetails ? '' : 'hidden'}"
-                  showGroups="true"
-                  .visible=${this.showDetails}
-                  .ticket=${this.currentTicket}
-                  .contact=${this.currentContact}
-                ></temba-contact-details>`
-              : null
-          }
+        ${addNoteAndAssignTicketTembaModaxes}`;
 
-        <div class="toolbar ${this.showDetails ? '' : 'closed'}">
-          ${
-            this.currentContact
-              ? html`
-                  <temba-tip
-                    style="margin-top:5px"
-                    text="${this.showDetails ? 'Hide Details' : 'Show Details'}"
-                    position="left"
-                    hideOnChange
-                  >
-                    <temba-icon
-                      id="details-button"
-                      name="${this.showDetails
-                        ? Icon.menu_collapse
-                        : 'layout-left'}"
-                      @click="${this.handleDetailSlider}"
-                      clickable
-                      animatechange="spin"
-                    ></temba-icon>
-                  </temba-tip>
-
-                  ${this.currentTicket
-                    ? html`<temba-tip
-                          style="margin-top:5px"
-                          text="Assign"
-                          position="left"
-                        >
-                          <temba-icon
-                            id="assign-button"
-                            name="${Icon.users}"
-                            @click="${() => {
-                              const modax = this.shadowRoot.getElementById(
-                                'assign-dialog'
-                              ) as Modax;
-                              modax.open = true;
-                            }}"
-                            clickable
-                          ></temba-icon>
-                        </temba-tip>
-                        <temba-tip
-                          style="margin-top:5px"
-                          text="Add Note"
-                          position="left"
-                        >
-                          <temba-icon
-                            id="add-note-button"
-                            name="${Icon.add_note}"
-                            @click="${() => {
-                              const note = this.shadowRoot.getElementById(
-                                'note-dialog'
-                              ) as Modax;
-                              note.open = true;
-                            }}"
-                            clickable
-                          ></temba-icon>
-                        </temba-tip>`
-                    : null}
-                `
-              : null
+      return html`${contactHistoryAndChatbox} ${contactDetailsAndActions}`;
+    }
+
+    return html`${contactHistoryAndChatbox}`;
+  }
+
+  private getTembaContactHistory(): TemplateResult {
+    return html` <temba-contact-history
+      .uuid=${this.currentContact.uuid}
+      .contact=${this.currentContact}
+      .ticket=${this.currentTicket ? this.currentTicket.uuid : null}
+      .endDate=${this.currentTicket ? this.currentTicket.closed_on : null}
+      .agent=${this.agent}
+    >
+    </temba-contact-history>`;
+  }
+
+  private getTembaChatbox(): TemplateResult {
+    if (this.currentTicket) {
+      if (this.currentContact && this.currentContact.status !== 'active') {
+        //no chatbox for archived, blocked, or stopped contacts
+        return null;
+      } else {
+        if (this.currentTicket.closed_on) {
+          //reopen button for active contacts with a closed ticket
+          return html` <div class="closed-footer">
+            <temba-button
+              id="reopen-button"
+              name="Reopen"
+              @click=${this.handleTicketReopen}
+            ></temba-button>
+          </div>`;
+        } else {
+          //chatbox for active contacts with an open ticket
+          return this.getChatbox();
+        }
+      }
+    }
+
+    if (this.currentContact && this.currentContact.status !== 'active') {
+      //no chatbox for archived, blocked, or stopped contacts
+      return null;
+    } else {
+      //chatbox for active contacts
+      return this.getChatbox();
+    }
+  }
+
+  private getChatbox(): TemplateResult {
+    return html` <div class="chatbox ${this.toolbar ? 'full' : ''}">
+      <temba-completion
+        @change=${this.handleChatChange}
+        .value=${this.currentChat}
+        @keydown=${(e: KeyboardEvent) => {
+          if (e.key === 'Enter' && !e.shiftKey) {
+            const chat = e.target as Completion;
+            if (!chat.hasVisibleOptions()) {
+              this.handleSend();
+              e.preventDefault();
+              e.stopPropagation();
+            }
           }
-        </div>
-      </div>
-
-      ${
-        this.currentTicket
-          ? html`<temba-modax
-              header="Add Note"
-              id="note-dialog"
-              @temba-submitted=${this.refresh}
-              endpoint="/ticket/note/${this.currentTicket.uuid}/"
-            ></temba-modax>
-            <temba-modax
-              header="Assign Ticket"
-              id="assign-dialog"
-              @temba-submitted=${this.handleTicketAssigned}
-              endpoint="/ticket/assign/${this.currentTicket.uuid}/"
-            /></temba-modax>`
-          : null
-      }`
-        : null}
-    `;
+        }}
+        textarea
+      >
+      </temba-completion>
+      <temba-button
+        id="send-button"
+        name="Send"
+        @click=${this.handleSend}
+        ?disabled=${this.currentChat.trim().length === 0}
+      ></temba-button>
+    </div>`;
+  }
+
+  private getTembaContactDetails(): TemplateResult {
+    return html` <temba-contact-details
+      style="z-index: 10"
+      class="${this.showDetails ? '' : 'hidden'}"
+      showGroups="true"
+      .visible=${this.showDetails}
+      .ticket=${this.currentTicket}
+      .contact=${this.currentContact}
+    >
+    </temba-contact-details>`;
+  }
+
+  private getToggleDetailsTembaTip(): TemplateResult {
+    return html` <temba-tip
+      style="margin-top:5px"
+      text="${this.showDetails ? 'Hide Details' : 'Show Details'}"
+      position="left"
+      hideOnChange
+    >
+      <temba-icon
+        id="details-button"
+        name="${this.showDetails ? Icon.menu_collapse : 'layout-left'}"
+        @click="${this.handleDetailSlider}"
+        clickable
+        animatechange="spin"
+      ></temba-icon>
+    </temba-tip>`;
+  }
+
+  private getAddNoteAndAssignTicketTembaTips(): TemplateResult {
+    return html` <temba-tip
+        style="margin-top:5px"
+        text="Assign"
+        position="left"
+      >
+        <temba-icon
+          id="assign-button"
+          name="${Icon.users}"
+          @click="${() => {
+            const modax = this.shadowRoot.getElementById(
+              'assign-dialog'
+            ) as Modax;
+            modax.open = true;
+          }}"
+          clickable
+        ></temba-icon>
+      </temba-tip>
+      <temba-tip style="margin-top:5px" text="Add Note" position="left">
+        <temba-icon
+          id="add-note-button"
+          name="${Icon.add_note}"
+          @click="${() => {
+            const note = this.shadowRoot.getElementById('note-dialog') as Modax;
+            note.open = true;
+          }}"
+          clickable
+        ></temba-icon>
+      </temba-tip>`;
+  }
+
+  private getAddNoteAndAssignTicketTembaModaxes(): TemplateResult {
+    return html` <temba-modax
+        header="Add Note"
+        id="note-dialog"
+        @temba-submitted=${this.refresh}
+        endpoint="/ticket/note/${this.currentTicket.uuid}/"
+      >
+      </temba-modax>
+      <temba-modax
+        header="Assign Ticket"
+        id="assign-dialog"
+        @temba-submitted=${this.handleTicketAssigned}
+        endpoint="/ticket/assign/${this.currentTicket.uuid}/"
+      >
+      </temba-modax>`;
   }
 }

package/src/contacts/ContactDetails.ts

@@ -1,5 +1,5 @@
 import { css, html, TemplateResult } from 'lit';
-import { property } from 'lit/decorators';
+import { property } from 'lit/decorators.js';
 import { Contact, Group, Ticket } from '../interfaces';
 import { RapidElement } from '../RapidElement';
 import { isDate, timeSince, truncate } from '../utils';

package/src/contacts/ContactFieldEditor.ts

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

package/src/contacts/ContactFields.ts

@@ -1,5 +1,5 @@
 import { css, html, PropertyValueMap, TemplateResult } from 'lit';
-import { property } from 'lit/decorators';
+import { property } from 'lit/decorators.js';
 import { postJSON } from '../utils';
 import { ContactFieldEditor } from './ContactFieldEditor';
 import { ContactStoreElement } from './ContactStoreElement';

package/src/contacts/ContactHistory.ts

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

package/src/contacts/ContactName.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 ContactName extends RapidElement {

package/src/contacts/ContactNameFetch.ts

@@ -1,5 +1,5 @@
 import { css, html, TemplateResult } from 'lit';
-import { property } from 'lit/decorators';
+import { property } from 'lit/decorators.js';
 import { ContactStoreElement } from './ContactStoreElement';
 
 export class ContactNameFetch extends ContactStoreElement {

package/src/contacts/ContactPending.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,
   ScheduledEvent,

package/src/contacts/ContactStoreElement.ts

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

package/src/contacts/ContactTickets.ts

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

package/src/contacts/ContactUrn.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 ContactUrn extends RapidElement {

package/src/contactsearch/ContactSearch.ts

@@ -1,5 +1,5 @@
 import { TemplateResult, html, css } from 'lit';
-import { property } from 'lit/decorators';
+import { property } from 'lit/decorators.js';
 import { getClasses, postJSON, WebResponse } from '../utils';
 import { TextInput } from '../textinput/TextInput';
 import '../alert/Alert';

package/src/date/TembaDate.ts

@@ -1,5 +1,5 @@
 import { css, html, PropertyValueMap, TemplateResult } from 'lit';
-import { property } from 'lit/decorators';
+import { property } from 'lit/decorators.js';
 import { RapidElement } from '../RapidElement';
 import { Store } from '../store/Store';
 import { DateTime } from 'luxon';

package/src/datepicker/DatePicker.ts

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

package/src/dialog/Dialog.ts

@@ -1,9 +1,9 @@
-import { property } from 'lit/decorators';
+import { property } from 'lit/decorators.js';
 import { TemplateResult, html, css } from 'lit';
 import { Button } from '../button/Button';
 import { RapidElement } from '../RapidElement';
 import { CustomEventType } from '../interfaces';
-import { styleMap } from 'lit-html/directives/style-map';
+import { styleMap } from 'lit-html/directives/style-map.js';
 import { getClasses } from '../utils';
 
 export class Dialog extends RapidElement {

package/src/dialog/Modax.ts

@@ -1,6 +1,6 @@
 import { TemplateResult, html, css } from 'lit';
-import { property } from 'lit/decorators';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html';
+import { property } from 'lit/decorators.js';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
 
 import { RapidElement } from '../RapidElement';
 import { getUrl, serialize, postUrl, WebResponse } from '../utils';
@@ -10,9 +10,6 @@ import { Dialog } from './Dialog';
 export class Modax extends RapidElement {
   static get styles() {
     return css`
-      :host {
-      }
-
       fieldset {
         border: none;
         margin: 0;
@@ -117,9 +114,6 @@ export class Modax extends RapidElement {
   suspendSubmit = false;
   // private cancelToken: CancelTokenSource;
 
-  // http promise to monitor for completeness
-  public httpComplete: Promise<void | WebResponse>;
-
   private handleSlotClicked(): void {
     this.open = true;
   }
@@ -152,22 +146,22 @@ export class Modax extends RapidElement {
     return html`<temba-loading units="6" size="8"></temba-loading>`;
   }
 
-  private updatePrimaryButton(): void {
+  public updatePrimaryButton(): void {
     if (!this.noSubmit) {
-      window.setTimeout(() => {
+      this.updateComplete.then(()=>{
         const submitButton = this.shadowRoot.querySelector(
           "input[type='submit']"
         ) as any;
 
         if (submitButton) {
           this.primaryName = submitButton.value;
+          this.cancelName = 'Cancel';
         } else {
           this.primaryName = null;
           this.cancelName = 'Ok';
         }
-
         this.submitting = false;
-      }, 0);
+      });
     }
   }
 
@@ -196,7 +190,7 @@ export class Modax extends RapidElement {
       const script = this.ownerDocument.createElement('script');
       const code = scripts[i].innerText;
 
-      if (scripts[i].src) {
+      if (scripts[i].src && scripts[i].src.indexOf("web-dev-server") === -1) {
         script.src = scripts[i].src;
         script.type = 'text/javascript';
         script.async = true;
@@ -219,12 +213,11 @@ export class Modax extends RapidElement {
       this.body = unsafeHTML(div.innerHTML);
     }
 
-    window.setTimeout(() => {
+    this.updateComplete.then(()=>{
       for (const script of toAdd) {
         scriptBlock.appendChild(script);
       }
-    }, 0);
-
+    });
     return !scriptOnly;
   }
 
@@ -239,16 +232,16 @@ export class Modax extends RapidElement {
     // this.cancelToken = CancelToken.source();
     this.fetching = true;
     this.body = this.getLoading();
-    this.httpComplete = getUrl(this.endpoint, null, this.getHeaders()).then(
+    getUrl(this.endpoint, null, this.getHeaders()).then(
       (response: WebResponse) => {
-        this.setBody(response.body);
-        this.updatePrimaryButton();
+        this.setBody(response.body);        
         this.fetching = false;
-        window.setTimeout(() => {
+        this.updateComplete.then(()=>{
+          this.updatePrimaryButton();
           this.fireCustomEvent(CustomEventType.Loaded, {
             body: this.getBody(),
           });
-        }, 0);
+        });
       }
     );
   }
@@ -258,7 +251,7 @@ export class Modax extends RapidElement {
     const form = this.shadowRoot.querySelector('form');
     const postData = form ? serialize(form) : {};
 
-    this.httpComplete = postUrl(
+    postUrl(
       this.endpoint,
       postData,
       this.getHeaders(),
@@ -277,10 +270,10 @@ export class Modax extends RapidElement {
 
           if (redirect) {
             if (redirect === 'hide') {
-              window.setTimeout(() => {
+              this.updateComplete.then(()=>{
                 this.open = false;
                 this.fireCustomEvent(CustomEventType.Submitted);
-              }, 0);
+              });
             } else {
               this.fireCustomEvent(CustomEventType.Redirected, {
                 url: redirect,

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 {

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() {