@nyaruka/temba-components 0.108.7 → 0.109.0

package/src/contacts/ContactChat.ts

@@ -269,17 +269,16 @@ export class ContactChat extends ContactStoreElement {
         min-height: 0;
       }
 
-      .chatbox {
+      .compose {
         background: #fff;
         display: flex;
         flex-direction: column;
-        --textarea-min-height: 1em;
-        --textarea-height: 1.2em;
+        --textarea-min-height: 8em;
+        --textarea-height: 0.5em;
         --widget-box-shadow-focused: none;
-      }
-
-      .chatbox.full {
-        border-bottom-right-radius: 0 !important;
+        --compose-curvature: 0px;
+        border-top: 1px solid #e6e6e6;
+        overflow: hidden;
       }
 
       .closed-footer {
@@ -314,8 +313,11 @@ export class ContactChat extends ContactStoreElement {
       }
 
       .border {
-        border-top: 1px solid #f1f1f1;
-        margin: 0 1em;
+      }
+
+      temba-compose {
+        border-top-right-radius: 0;
+        border-top-left-radius: 0;
       }
     `;
   }
@@ -487,10 +489,10 @@ export class ContactChat extends ContactStoreElement {
     const contactHistory = this.currentContact
       ? this.getTembaContactHistory()
       : null;
-    const chatbox = this.currentContact ? this.getTembaChatbox() : null;
+    const tembaCompose = this.currentContact ? this.getTembaCompose() : null;
 
     const contactHistoryAndChatbox = html`
-      <div class="chat-wrapper">${contactHistory} ${chatbox}</div>
+      <div class="chat-wrapper">${contactHistory} ${tembaCompose}</div>
     `;
     return html`${contactHistoryAndChatbox}`;
   }
@@ -851,7 +853,7 @@ export class ContactChat extends ContactStoreElement {
     ></temba-chat>`;
   }
 
-  private getTembaChatbox(): TemplateResult {
+  private getTembaCompose(): TemplateResult {
     if (this.currentTicket) {
       if (this.currentContact && this.currentContact.status !== 'active') {
         //no chatbox for archived, blocked, or stopped contacts
@@ -859,7 +861,7 @@ export class ContactChat extends ContactStoreElement {
       } else {
         if (!this.currentTicket.closed_on) {
           //chatbox for active contacts with an open ticket
-          return this.getChatbox();
+          return this.getCompose();
         } else {
           return null;
         }
@@ -871,13 +873,13 @@ export class ContactChat extends ContactStoreElement {
       return null;
     } else {
       //chatbox for active contacts
-      return this.getChatbox();
+      return this.getCompose();
     }
   }
 
-  private getChatbox(): TemplateResult {
+  private getCompose(): TemplateResult {
     return html`<div class="border"></div>
-      <div class="chatbox">
+      <div class="compose">
         <temba-compose
           chatbox
           attachments

package/src/contacts/ContactTickets.ts

@@ -231,7 +231,7 @@ export class ContactTickets extends EndpointMonitorElement {
   ): void {
     super.updated(changes);
 
-    if (changes.has('data')) {
+    if (changes.has('data') && this.data) {
       this.fireCustomEvent(CustomEventType.DetailsChanged, {
         count: this.data.length
       });

package/src/interfaces.ts

@@ -110,6 +110,13 @@ export interface ObjectReference {
   name: string;
 }
 
+export interface Shortcut {
+  uuid: string;
+  name: string;
+  text: string;
+  modified_on: string;
+}
+
 export interface ContactField {
   key: string;
   label: string;

package/src/list/ShortcutList.ts

@@ -0,0 +1,137 @@
+import { css, html, PropertyValueMap, TemplateResult } from 'lit';
+import { property } from 'lit/decorators.js';
+import { Shortcut } from '../interfaces';
+import { StoreMonitorElement } from '../store/StoreMonitorElement';
+import { Options } from '../options/Options';
+
+export class ShortcutList extends StoreMonitorElement {
+  static get styles() {
+    return css`
+      temba-options {
+        display: block;
+        width: 100%;
+        flex-grow: 1;
+      }
+
+      .options-empty {
+        height: 0;
+        overflow: hidden;
+      }
+
+      .no-match {
+        margin: 5px 10px;
+        padding: 10px;
+      }
+
+      .filter {
+        background: #f3f3f3;
+        padding: 0.1em 0.3em;
+        border-radius: var(--curvature);
+      }
+    `;
+  }
+
+  @property({ type: String })
+  filter: string;
+
+  @property({ type: Array })
+  filteredShortcuts = [];
+
+  @property({ type: Number })
+  cursorIndex = 0;
+
+  constructor() {
+    super();
+  }
+
+  protected firstUpdated(
+    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>
+  ): void {
+    super.firstUpdated(changes);
+  }
+
+  public storeUpdated(): void {
+    this.filteredShortcuts = this.store.getShortcuts();
+  }
+
+  public updated(
+    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>
+  ): void {
+    super.updated(changes);
+
+    if (changes.has('filter')) {
+      if (!this.filter) {
+        this.filteredShortcuts = this.store.getShortcuts();
+      } else {
+        this.filteredShortcuts = this.store
+          .getShortcuts()
+          .filter((shortcut: Shortcut) =>
+            shortcut.name.toLowerCase().includes(this.filter.toLowerCase())
+          );
+      }
+      this.cursorIndex = 0;
+    }
+  }
+
+  public renderShortcut(shortcut: Shortcut): TemplateResult {
+    return html`<div style="display:flex;align-items: center;min-width:0">
+      <div
+        style="
+          overflow: hidden;
+          text-overflow: ellipsis;
+          width:100px; 
+          padding-right: 10px;
+          white-space: nowrap;"
+      >
+        ${shortcut.name}
+      </div>
+      <div
+        style=" 
+          font-size: 0.9em;
+          color: rgba(0, 0, 0, 0.4);
+          flex:1;
+          overflow: hidden;
+          text-overflow: ellipsis;
+
+          display: -webkit-box;
+          line-height: 16px;
+          max-height: 16px;
+          -webkit-line-clamp: 1;
+          -webkit-box-orient: vertical;
+        "
+      >
+        ${shortcut.text}
+      </div>
+    </div>`;
+  }
+
+  public getShortcut() {
+    const options = this.shadowRoot.querySelector('temba-options') as Options;
+    return options.getSelection();
+  }
+
+  public render(): TemplateResult {
+    return html`
+      ${this.filteredShortcuts.length === 0
+        ? html`<div class="no-match">
+            ${this.filter
+              ? html`No matches for <span class="filter">${this.filter}</span>.`
+              : html`No shortcuts yet, create some to quickly include them in
+                your messages.`}
+          </div>`
+        : null}
+
+      <temba-options
+        class="options-${this.filteredShortcuts.length === 0
+          ? 'empty'
+          : 'full'}"
+        block
+        cursorHover
+        visible
+        .renderOption=${this.renderShortcut}
+        .cursorIndex=${this.cursorIndex}
+        .options=${this.filteredShortcuts}
+      ></temba-options>
+    `;
+  }
+}

package/src/list/TembaList.ts

@@ -410,9 +410,6 @@ export class TembaList extends RapidElement {
       }
     }
 
-    // TODO: Not sure why this is needed
-    // this.requestUpdate('cursorIndex');
-
     if (this.value) {
       this.setSelection(this.value);
       this.value = null;
@@ -456,7 +453,12 @@ export class TembaList extends RapidElement {
   }
 
   protected handleSelection(event: CustomEvent) {
-    const { selected, index } = event.detail;
+    let index = event.detail.index;
+    const selected = event.detail.selected;
+
+    if (index === -1) {
+      index = 0;
+    }
 
     this.selected = selected;
     this.cursorIndex = index;
@@ -470,8 +472,9 @@ export class TembaList extends RapidElement {
       ${this.renderHeader()}
       <temba-options
         style="${this.getListStyle()}"
-        ?visible=${true}
-        ?block=${true}
+        visible
+        block
+        cursorSelection
         ?hideShadow=${this.hideShadow}
         ?collapsed=${this.collapsed}
         ?loading=${this.loading}

package/src/options/Options.ts

@@ -111,6 +111,7 @@ export class Options extends RapidElement {
         margin: 0.3em;
         cursor: pointer;
         color: var(--color-text-dark);
+        scroll-margin: 5px 0px;
       }
 
       .option * {
@@ -209,6 +210,14 @@ export class Options extends RapidElement {
   @property({ type: Boolean })
   block: boolean;
 
+  // if we allow the focus to follow the cursor
+  @property({ type: Boolean })
+  cursorHover: boolean;
+
+  // fire selection events when cursor changes
+  @property({ type: Boolean })
+  cursorSelection: boolean;
+
   @property({ type: Number })
   scrollPct = 75;
 
@@ -302,67 +311,42 @@ export class Options extends RapidElement {
     return focused;
   }
 
-  public updated(changedProperties: Map<string, any>) {
-    super.updated(changedProperties);
+  public updated(changed: Map<string, any>) {
+    super.updated(changed);
 
     // if our cursor changed, lets make sure our scrollbox is showing it
-    if (!this.internalFocusDisabled && changedProperties.has('cursorIndex')) {
-      const focusedOption = this.shadowRoot.querySelector(
-        `div[data-option-index="${this.cursorIndex}"]`
-      ) as HTMLDivElement;
-
-      if (focusedOption) {
-        const scrollBox = this.shadowRoot.querySelector('.options-container');
-        const scrollBoxRect = scrollBox.getBoundingClientRect();
-        const scrollBoxHeight = scrollBoxRect.height;
-        const focusedEleHeight = focusedOption.getBoundingClientRect().height;
-
-        if (
-          focusedOption.offsetTop + focusedEleHeight >
-          scrollBox.scrollTop + scrollBoxHeight - 5
-        ) {
-          const scrollTo =
-            focusedOption.offsetTop - scrollBoxHeight + focusedEleHeight + 5;
-          scrollBox.scrollTop = scrollTo;
-        } else if (focusedOption.offsetTop < scrollBox.scrollTop) {
-          const scrollTo = focusedOption.offsetTop - 5;
-          scrollBox.scrollTop = scrollTo;
-        }
-      }
-
+    if (!this.internalFocusDisabled && changed.has('cursorIndex')) {
       this.fireCustomEvent(CustomEventType.CursorChanged, {
         index: this.cursorIndex
       });
     }
 
-    if (changedProperties.has('visible') && changedProperties.has('options')) {
+    if (changed.has('visible') && changed.has('options')) {
       if (!this.visible && this.options.length == 0) {
-        this.tempOptions = changedProperties.get('options');
+        this.tempOptions = changed.get('options');
         window.setTimeout(() => {
           this.tempOptions = [];
         }, 300);
       }
     }
 
-    if (changedProperties.has('options')) {
+    if (changed.has('options')) {
       this.calculatePosition();
 
       // allow scrolls to trigger again
       this.triggerScroll = true;
 
-      const prevOptions = changedProperties.get('options');
+      const prevOptions = changed.get('options');
       const previousCount = prevOptions ? prevOptions.length : 0;
       const newCount = this.options ? this.options.length : 0;
 
       if (
         this.cursorIndex === -1 ||
         newCount < previousCount ||
-        (previousCount === 0 &&
-          newCount > 0 &&
-          !changedProperties.has('cursorIndex'))
+        (previousCount === 0 && newCount > 0 && !changed.has('cursorIndex'))
       ) {
         if (!this.internalFocusDisabled) {
-          if (!this.block) {
+          if (!this.block || this.cursorIndex === -1) {
             this.cursorIndex = 0;
           } else {
             if (this.cursorIndex >= newCount) {
@@ -370,7 +354,7 @@ export class Options extends RapidElement {
             }
           }
 
-          if (this.block) {
+          if (this.cursorSelection) {
             this.handleSelection(false);
           }
         }
@@ -379,12 +363,14 @@ export class Options extends RapidElement {
       // if on initial load we don't have enough options to load, trigger a scroll
       // threshold event in case the page size is smaller than our control height
       const scrollBox = this.shadowRoot.querySelector('.options');
-      if (scrollBox.scrollHeight == scrollBox.clientHeight) {
-        this.fireCustomEvent(CustomEventType.ScrollThreshold);
+      if (scrollBox) {
+        if (scrollBox.scrollHeight == scrollBox.clientHeight) {
+          this.fireCustomEvent(CustomEventType.ScrollThreshold);
+        }
       }
     }
 
-    if (changedProperties.has('visible')) {
+    if (changed.has('visible')) {
       window.setTimeout(() => {
         this.calculatePosition();
       }, 100);
@@ -427,6 +413,10 @@ export class Options extends RapidElement {
     return html` ${option.detail} `;
   }
 
+  public getSelection() {
+    return this.options[this.cursorIndex];
+  }
+
   private handleSelection(tabbed = false, index = -1) {
     if (!this.internalFocusDisabled) {
       if (index === -1) {
@@ -468,25 +458,42 @@ export class Options extends RapidElement {
     scrollBox.scrollTop = 0;
   }
 
+  private ensureOptionVisible() {
+    const focusedOption = this.shadowRoot.querySelector(
+      `div[data-option-index="${this.cursorIndex}"]`
+    ) as HTMLDivElement;
+    if (focusedOption) {
+      focusedOption.scrollIntoView({
+        block: 'nearest',
+        inline: 'start'
+      });
+    }
+  }
   private handleKeyDown(evt: KeyboardEvent) {
     if (this.internalFocusDisabled || (this.block && !this.isFocused())) {
       return;
     }
 
+    if (this.offsetParent === null) {
+      return;
+    }
+
     if (this.options && this.options.length > 0) {
       if ((evt.ctrlKey && evt.key === 'n') || evt.key === 'ArrowDown') {
         this.moveCursor(1);
         evt.preventDefault();
         evt.stopPropagation();
-        if (this.block) {
+        if (this.cursorSelection) {
           this.handleSelection(false);
         }
+        this.ensureOptionVisible();
       } else if ((evt.ctrlKey && evt.key === 'p') || evt.key === 'ArrowUp') {
         this.moveCursor(-1);
         evt.preventDefault();
-        if (this.block) {
+        if (this.cursorSelection) {
           this.handleSelection(false);
         }
+        this.ensureOptionVisible();
       } else if (
         evt.key === 'Enter' ||
         evt.key === 'Tab' ||
@@ -495,9 +502,7 @@ export class Options extends RapidElement {
         evt.preventDefault();
         evt.stopPropagation();
         this.handleSelection(evt.key === 'Tab');
-      }
-
-      if (evt.key === 'Escape') {
+      } else if (evt.key === 'Escape') {
         this.fireCustomEvent(CustomEventType.Canceled);
       }
     }
@@ -578,7 +583,7 @@ export class Options extends RapidElement {
   }
 
   private handleMouseMove(evt: MouseEvent) {
-    if (!this.block) {
+    if (!this.block || this.cursorHover) {
       if (Math.abs(evt.movementX) + Math.abs(evt.movementY) > 0) {
         const index = (evt.currentTarget as HTMLElement).getAttribute(
           'data-option-index'
@@ -610,6 +615,10 @@ export class Options extends RapidElement {
   }
 
   public render(): TemplateResult {
+    if (!this.resolvedRenderOption) {
+      return null;
+    }
+
     let vertical = this.block ? 0 : this.marginVertical;
     if (this.poppedTop) {
       vertical *= -1;

package/src/select/Select.ts

@@ -81,7 +81,7 @@ export class Select extends FormElement {
       }
 
       .wrapper-bg {
-        background: #f3f3f3;
+        background: #fff;
         box-shadow: inset 0px 0px 4px rgb(0 0 0 / 10%);
         border-radius: var(--curvature-widget);
       }

package/src/store/Store.ts

@@ -18,7 +18,8 @@ import {
   KeyedAssets,
   CustomEventType,
   Workspace,
-  User
+  User,
+  Shortcut
 } from '../interfaces';
 import { RapidElement } from '../RapidElement';
 import { lru } from 'tiny-lru';
@@ -85,6 +86,9 @@ export class Store extends RapidElement {
   @property({ type: String, attribute: 'users' })
   usersEndpoint: string;
 
+  @property({ type: String, attribute: 'shortcuts' })
+  shortcutsEndpoint: string;
+
   @property({ type: Object, attribute: false })
   private schema: CompletionSchema;
 
@@ -98,6 +102,7 @@ export class Store extends RapidElement {
 
   private fields: { [key: string]: ContactField } = {};
   private groups: { [uuid: string]: ContactGroup } = {};
+  private shortcuts: Shortcut[] = [];
   private languages: any = {};
   private users: User[];
   private workspace: Workspace;
@@ -229,6 +234,10 @@ export class Store extends RapidElement {
       );
     }
 
+    if (this.shortcutsEndpoint) {
+      fetches.push(this.refreshShortcuts());
+    }
+
     this.initialHttpComplete = Promise.all(fetches);
 
     this.initialHttpComplete.then(() => {
@@ -236,6 +245,10 @@ export class Store extends RapidElement {
     });
   }
 
+  public getShortcuts() {
+    return this.shortcuts || [];
+  }
+
   public getAssignableUsers() {
     return this.users.filter((user: User) =>
       ['administrator', 'editor', 'agent'].includes(user.role)
@@ -257,13 +270,19 @@ export class Store extends RapidElement {
     return 'en';
   }
 
-  public refreshGlobals() {
-    getAssets(this.globalsEndpoint).then((assets: Asset[]) => {
+  public async refreshGlobals() {
+    return getAssets(this.globalsEndpoint).then((assets: Asset[]) => {
       this.keyedAssets['globals'] = assets.map((asset: Asset) => asset.key);
     });
   }
 
-  public refreshFields() {
+  public async refreshShortcuts() {
+    return getAssets(this.shortcutsEndpoint).then((shortcuts: Shortcut[]) => {
+      this.shortcuts = shortcuts;
+    });
+  }
+
+  public async refreshFields() {
     return getAssets(this.fieldsEndpoint).then((assets: Asset[]) => {
       this.keyedAssets['fields'] = [];
       this.featuredFields = [];

package/src/tabpane/Tab.ts

@@ -10,11 +10,13 @@ export class Tab extends RapidElement {
         display: none;
         flex-direction: column;
         min-height: 0;
+        pointer-events: none;
       }
 
       :host(.selected) {
         display: flex;
         flex-grow: 1;
+        pointer-events: auto;
       }
     `;
   }

package/src/tabpane/TabPane.ts

@@ -82,7 +82,6 @@ export class TabPane extends RapidElement {
       }
 
       .focusedname .tab.selected {
-        transform: none;
       }
 
       .focusedname .tab .name {
@@ -119,8 +118,6 @@ export class TabPane extends RapidElement {
       }
 
       .embedded .tab.selected {
-        border: none;
-        transform: none;
       }
 
       .tab.selected .dot {
@@ -153,7 +150,10 @@ export class TabPane extends RapidElement {
         flex-direction: column;
         flex-grow: 1;
         background: var(--focused-tab-color, #fff);
-        border-radius: var(--curvature);
+        border-bottom-left-radius: var(--curvature);
+        border-bottom-right-radius: var(--curvature);
+        overflow: hidden;
+
         box-shadow: var(
           --tabs-shadow,
           rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
@@ -217,6 +217,9 @@ export class TabPane extends RapidElement {
       .embedded.pane {
         box-shadow: none;
         margin: 0;
+        border-left: none !important;
+        border-right: none !important;
+        border-bottom: none !important;
       }
 
       .embedded.tabs {
@@ -224,6 +227,13 @@ export class TabPane extends RapidElement {
       }
 
       .embedded .tab {
+        border-top: none !important;
+        border-bottom: none !important;
+        border-radius: 0px;
+      }
+
+      .embedded .tab.first {
+        border-left: none !important;
       }
 
       .embedded.tabs .tab.selected {
@@ -332,6 +342,14 @@ export class TabPane extends RapidElement {
     }
   }
 
+  public focusTab(name: string): Tab {
+    const index = this.tabs.findIndex((tab) => tab.name === name);
+    if (index >= 0) {
+      this.index = index;
+      return this.getTab(index);
+    }
+  }
+
   public setTabDetails(
     index: number,
     details: { count: number; hidden: boolean }
@@ -444,7 +462,11 @@ export class TabPane extends RapidElement {
       ${!this.bottom
         ? html`<div
             @temba-details-changed=${this.handleTabDetailsChanged}
-            style="border: 1px solid ${activeTab?.borderColor};background:${activeTab?.selectionBackground}"
+            style="${activeTab?.borderColor
+              ? `border: 1px solid ${activeTab?.borderColor};`
+              : ''} ${activeTab?.selectionBackground
+              ? `background:${activeTab?.selectionBackground};`
+              : ``}"
             class="pane ${getClasses({
               first: this.index == 0,
               embedded: this.embedded,
@@ -452,6 +474,7 @@ export class TabPane extends RapidElement {
             })}"
           >
             <slot></slot>
+            <slot name="pane-bottom"></slot>
           </div>`
         : null}
     `;