@nyaruka/temba-components 0.25.2 → 0.26.2

package/src/contacts/ContactHistory.ts

@@ -1,4 +1,5 @@
-import { css, property } from 'lit-element';
+import { css } from 'lit';
+import { property } from 'lit/decorators';
 import { html, TemplateResult } from 'lit-html';
 import { Contact, CustomEventType, Ticket } from '../interfaces';
 import { RapidElement } from '../RapidElement';
@@ -109,22 +110,24 @@ export class ContactHistory extends RapidElement {
     return css`
       ${getEventStyles()}
 
-      :host {
-        flex-grow: 1;
-        flex-direction: column;
+      .wrapper {
+        border: 0px solid green;
         display: flex;
         flex-direction: column;
         align-items: items-stretch;
+        flex-grow: 1;
+        min-height: 0;
       }
 
       .events {
-        height: 200px;
         overflow-y: scroll;
         overflow-x: hidden;
-        flex-grow: 1;
-        border-top-left-radius: var(--curvature);
-        padding-top: 1em;
         background: #fff;
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        min-height: 0;
+        padding-top: 3em;
       }
 
       temba-loading {
@@ -179,12 +182,9 @@ export class ContactHistory extends RapidElement {
       }
 
       .sticky-bin {
-        display: flex;
-        flex-direction: column;
-        z-index: 2;
         border-top-left-radius: var(--curvature);
-        overflow: hidden;
-        box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.15);
+        z-index: 2;
+        box-shadow: rgb(0 0 0 / 15%) 0px 3px 3px 0px;
         background: rgb(240, 240, 240);
       }
 
@@ -381,7 +381,6 @@ export class ContactHistory extends RapidElement {
             if (forceOpen) {
               grouped[grouped.length - 1].open = forceOpen;
             }
-
             this.eventGroups = [...previousGroups, ...grouped];
           }
           this.refreshing = false;
@@ -451,6 +450,7 @@ export class ContactHistory extends RapidElement {
     if (changedProperties.has('refreshing') && !this.refreshing) {
       if (this.lastRefreshAdded > 0) {
         const events = this.getEventsPane();
+
         // if we are near the bottom, push us to the bottom to show new stuff
         if (this.lastHeight > 0) {
           const addedHeight = events.scrollHeight - this.lastHeight;
@@ -572,7 +572,6 @@ export class ContactHistory extends RapidElement {
         }
         eventGroup = {
           open: false,
-          closing: false,
           events: [event],
           type: currentEventGroupType,
         };
@@ -641,30 +640,24 @@ export class ContactHistory extends RapidElement {
   private handleEventGroupShow(event: MouseEvent) {
     const grouping = event.currentTarget as HTMLDivElement;
     const groupIndex = parseInt(grouping.getAttribute('data-group-index'));
-    const eventGroup = this.eventGroups[
-      this.eventGroups.length - groupIndex - 1
-    ];
+    const eventGroup =
+      this.eventGroups[this.eventGroups.length - groupIndex - 1];
     eventGroup.open = true;
     this.requestUpdate('eventGroups');
   }
 
   private handleEventGroupHide(event: MouseEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+
     const grouping = event.currentTarget as HTMLDivElement;
     const groupIndex = parseInt(grouping.getAttribute('data-group-index'));
-    const eventGroup = this.eventGroups[
-      this.eventGroups.length - groupIndex - 1
-    ];
+    const eventGroup =
+      this.eventGroups[this.eventGroups.length - groupIndex - 1];
 
-    // mark us as closing
-    eventGroup.closing = true;
-    this.requestUpdate('eventGroups');
+    eventGroup.open = false;
 
-    // after our animation, close it up for real
-    setTimeout(() => {
-      eventGroup.closing = false;
-      eventGroup.open = false;
-      this.requestUpdate('eventGroups');
-    }, 300);
+    this.requestUpdate('eventGroups');
   }
 
   private handleScroll() {
@@ -720,7 +713,7 @@ export class ContactHistory extends RapidElement {
     return 0;
   }
 
-  public renderEvent(event: ContactEvent): TemplateResult {
+  public renderEvent(event: ContactEvent): any {
     switch (event.type) {
       case Events.IVR_CREATED:
       case Events.MESSAGE_CREATED:
@@ -914,12 +907,16 @@ export class ContactHistory extends RapidElement {
         : null;
 
     return html`
-      ${this.ticket
-        ? html`<div class="sticky-bin">${unfetchedTickets}</div>`
-        : null}
-      ${this.fetching
-        ? html`<temba-loading units="5" size="10"></temba-loading>`
-        : html`<div style="height:0em"></div>`}
+      ${
+        this.ticket
+          ? html`<div class="sticky-bin">${unfetchedTickets}</div>`
+          : null
+      }
+      ${
+        this.fetching
+          ? html`<temba-loading units="5" size="10"></temba-loading>`
+          : html`<div style="height:0em"></div>`
+      }
       <div class="events" @scroll=${this.handleScroll}>
         ${this.eventGroups.map((eventGroup: EventGroup, index: number) => {
           const grouping = getEventGroupType(eventGroup.events[0], this.ticket);
@@ -929,9 +926,7 @@ export class ContactHistory extends RapidElement {
             grouping: true,
             [grouping]: true,
             expanded: eventGroup.open,
-            closing: eventGroup.closing,
           });
-
           return html`<div class="${classes}">
             ${grouping === 'verbose'
               ? html`<div
@@ -939,36 +934,37 @@ export class ContactHistory extends RapidElement {
                   @click=${this.handleEventGroupShow}
                   data-group-index="${groupIndex}"
                 >
-                  ${eventGroup.events.length}
-                  ${eventGroup.events.length === 1 ? html`event` : html`events`}
+                  ${eventGroup.open
+                    ? html`<temba-icon
+                        @click=${this.handleEventGroupHide}
+                        data-group-index="${groupIndex}"
+                        name="x"
+                        clickable
+                      ></temba-icon>`
+                    : html`${eventGroup.events.length}
+                      ${eventGroup.events.length === 1
+                        ? html`event`
+                        : html`events`} `}
                 </div>`
               : null}
-            ${grouping === 'verbose'
-              ? html`
-                  <temba-icon
-                    @click=${this.handleEventGroupHide}
-                    data-group-index="${groupIndex}"
-                    class="grouping-close-button"
-                    name="x"
-                    clickable
-                  ></temba-icon>
-                `
-              : null}
-            ${eventGroup.events.map((event: ContactEvent) => {
-              if (
-                event.type === Events.TICKET_ASSIGNED &&
-                (event as TicketEvent).note
-              ) {
-                const noteEvent = { ...event };
-                noteEvent.type = Events.TICKET_NOTE_ADDED;
-
-                return html`${this.renderEventContainer(
-                  noteEvent
-                )}${this.renderEventContainer(event)}`;
-              } else {
-                return this.renderEventContainer(event);
-              }
-            })}
+
+            <div class="items">
+              ${eventGroup.events.map((event: ContactEvent) => {
+                if (
+                  event.type === Events.TICKET_ASSIGNED &&
+                  (event as TicketEvent).note
+                ) {
+                  const noteEvent = { ...event };
+                  noteEvent.type = Events.TICKET_NOTE_ADDED;
+
+                  return html`${this.renderEventContainer(
+                    noteEvent
+                  )}${this.renderEventContainer(event)}`;
+                } else {
+                  return this.renderEventContainer(event);
+                }
+              })}
+            </div>
           </div>`;
         })}
       </div>
@@ -985,6 +981,7 @@ export class ContactHistory extends RapidElement {
           New Messages
         </div>
       </div>
+      </div>
     `;
   }
 }

package/src/contacts/events.ts

@@ -1,5 +1,4 @@
-import { css } from 'lit-element';
-import { html, TemplateResult } from 'lit-html';
+import { css, html, TemplateResult } from 'lit';
 import { Msg, ObjectReference, User } from '../interfaces';
 import { getClasses, oxford, oxfordFn, oxfordNamed, timeSince } from '../utils';
 import { getDisplayName } from './helpers';
@@ -7,21 +6,54 @@ import { getDisplayName } from './helpers';
 export const getEventStyles = () => {
   return css`
     .grouping {
-      padding: 0 2em;
-      margin: 0 -1em;
+      margin-top: 1em;
     }
 
     .grouping.verbose {
       background: #f9f9f9;
-      max-height: 1px;
-      border-top: 1px solid #f9f9f9;
-      padding-top: 0;
-      padding-bottom: 0;
-      margin-top: 0;
-      margin-bottom: 1.5em;
-      color: #efefef;
+      color: var(--color-dark);
       --color-link-primary: rgba(38, 166, 230, 1);
       pointer-events: none;
+      background: #fefefe;
+      box-shadow: -8px 0px 8px 1px rgba(0, 0, 0, 0.05) inset;
+      margin-right: -16px;
+      padding-right: 16px;
+      margin-bottom: 1.3em;
+    }
+
+    .grouping .items {
+      display: block;
+      user-select: none;
+    }
+
+    .grouping.verbose .items {
+      opacity: 0;
+      max-height: 0;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .grouping.flows .items {
+      padding: 0;
+    }
+
+    .grouping.messages .items {
+      display: flex;
+      flex-direction: column;
+      margin: 0em 0.75em;
+    }
+
+    .grouping.verbose.expanded .items {
+      transition: max-height var(--transition-speed) ease-in-out,
+        opacity var(--transition-speed) ease-in-out;
+      opacity: 1;
+      max-height: 1000px;
+      padding: 1em 1em;
+    }
+
+    .grouping.verbose.expanded {
+      border-top: 1px solid #f3f3f3;
+      border-bottom: 1px solid #f3f3f3;
     }
 
     .grouping.verbose.expanded,
@@ -44,50 +76,37 @@ export const getEventStyles = () => {
     }
 
     .grouping.verbose .attn {
-      color: #fff;
+      color: #666;
     }
 
     .event-count {
       position: relative;
-      top: -1.2em;
       font-size: 0.8em;
       text-align: center;
-      border: 2px solid #f9f9f9;
-      background: #fff;
       margin: 0 auto;
       display: table;
       padding: 3px 10px;
       font-weight: 400;
-      color: #777;
-      border-radius: var(--curvature);
+      color: #999;
       cursor: pointer;
-      min-width: 0%;
+      width: 100%;
       opacity: 1;
-      transition: all var(--transition-speed) ease-in, opacity 0.1ms,
-        margin-top 0ms;
-    }
-
-    .closing .grouping-close-button {
-      opacity: 0 !important;
-      transition: none !important;
+      z-index: 1;
     }
 
-    .event-count {
-      z-index: 1;
-      margin-bottom: 1em;
+    .event-count temba-icon {
+      display: inline-block;
+      position: absolute;
+      right: 5px;
+      top: 5px;
     }
 
     .event-count:hover {
-      padding: 3px 10px;
-      min-width: 50%;
-      background: #f9f9f9;
-      color: #333;
+      color: var(--color-link-primary-hover);
     }
 
     .expanded .event-count {
-      opacity: 0;
-      margin-top: -42px;
-      z-index: 0;
+      padding: 0;
       pointer-events: none;
     }
 
@@ -115,54 +134,18 @@ export const getEventStyles = () => {
       word-wrap: break-word;
     }
 
-    .grouping.verbose.closing {
-      opacity: 0 !important;
-      padding: 0 !important;
-      background: #f9f9f9 !important;
-      max-height: 1px !important;
-      border-top: 1px solid #f9f9f9 !important;
-      padding-top: 0 !important;
-      padding-bottom: 0 !important;
-      margin-top: 0 !important;
-      margin-bottom: 0 !important;
-    }
-
-    .grouping.verbose.closing .event,
-    .grouping.verbose.closing pre {
-      max-height: 0px;
-    }
-
-    .grouping.verbose.expanded {
-      transition: all var(--transition-speed)
-          cubic-bezier(0.68, -0.55, 0.265, 1.05),
-        color 0.1ms;
-      background: #444;
-      color: #efefef;
-      max-height: 1000px;
-      border-top: 1px solid #f1f1f1;
-      padding: 2em;
-      margin-left: 1em;
-      margin-right: 1em;
-      border-radius: var(--curvature);
-      padding-bottom: 1em;
-      box-shadow: inset 0px 11px 4px -15px #000, inset 0px -11px 4px -15px #000;
-    }
-
     .grouping.verbose.expanded .event,
     .grouping.verbose.expanded pre {
       max-height: 500px;
-      margin-bottom: 0.5em;
       opacity: 1;
-      transition: all var(--transition-speed) ease-in-out;
     }
 
     .grouping-close-button {
+      position: relative;
+      display: inline-block;
       opacity: 0;
       float: right;
-      margin-top: -1em !important;
-      margin-right: -1em !important;
-      fill: #f2f2f2;
-      transition: opacity var(--transition-speed) ease-in;
+      --icon-color: #666;
     }
 
     .grouping.verbose.expanded:hover .grouping-close-button {
@@ -176,7 +159,7 @@ export const getEventStyles = () => {
     }
 
     .event {
-      margin-bottom: 1em;
+      margin: 0.25em 0.5em;
       border-radius: var(--curvature);
       flex-grow: 1;
     }
@@ -333,6 +316,7 @@ export const getEventStyles = () => {
       font-size: 80%;
       color: rgba(0, 0, 0, 0.6);
       padding: 6px 3px;
+      margin-bottom: 0.5em;
     }
 
     .msg-summary temba-icon[name='log'] {
@@ -461,7 +445,6 @@ export interface EventGroup {
   type: string;
   events: ContactEvent[];
   open: boolean;
-  closing: boolean;
 }
 
 export enum Events {
@@ -1082,7 +1065,9 @@ export const renderContactLanguageChangedEvent = (
   event: ContactLanguageChangedEvent
 ): TemplateResult => {
   return html`<temba-icon name="contact"></temba-icon>
-    <div class="description">Language updated to ${event.language}</div>`;
+    <div class="description">
+      Language updated to <span class="attn">${event.language}</span>
+    </div>`;
 };
 
 export const renderChannelEvent = (event: ChannelEvent): TemplateResult => {

package/src/contactsearch/ContactSearch.ts

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

package/src/datepicker/DatePicker.ts

@@ -1,10 +1,5 @@
-import {
-  customElement,
-  TemplateResult,
-  html,
-  css,
-  property,
-} from 'lit-element';
+import { TemplateResult, html, css } from 'lit';
+import { property, customElement } from 'lit/decorators';
 
 import { FormElement } from '../FormElement';
 import 'lit-flatpickr';

package/src/dialog/Dialog.ts

@@ -1,5 +1,5 @@
-import { property } from 'lit-element/lib/decorators';
-import { TemplateResult, html, css } from 'lit-element';
+import { property } from 'lit/decorators';
+import { TemplateResult, html, css } from 'lit';
 import { Button } from '../button/Button';
 import { RapidElement } from '../RapidElement';
 import { CustomEventType } from '../interfaces';

package/src/dialog/Modax.ts

@@ -1,8 +1,9 @@
-import { property } from 'lit-element/lib/decorators';
-import { TemplateResult, html, css } from 'lit-element';
+import { TemplateResult, html, css } from 'lit';
+import { property } from 'lit/decorators';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html';
+
 import { RapidElement } from '../RapidElement';
 import { getUrl, serialize, postUrl, WebResponse } from '../utils';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html';
 import { CustomEventType } from '../interfaces';
 import { Dialog } from './Dialog';
 
@@ -100,9 +101,6 @@ export class Modax extends RapidElement {
   @property({ type: String })
   onLoaded: string;
 
-  @property({ type: String })
-  onSubmitted: string;
-
   @property({ type: Boolean })
   noSubmit: boolean;
 

package/src/dropdown/Dropdown.ts

@@ -0,0 +1,136 @@
+import { css, html, TemplateResult } from 'lit';
+import { property } from 'lit/decorators';
+import { RapidElement } from '../RapidElement';
+
+export class Dropdown extends RapidElement {
+  static get styles() {
+    return css`
+      .toggle {
+        cursor: pointer;
+      }
+
+      .dropdown {
+        position: absolute;
+        opacity: 0;
+        z-index: 10;
+        pointer-events: none;
+        padding: 0;
+        border-radius: var(--curvature);
+        background: #fff;
+        transform: translateY(2em);
+        transition: all calc(0.6 * var(--transition-speed)) linear;
+        user-select: none;
+        margin-top: 0px;
+        margin-left: 0px;
+        box-shadow: var(--dropdown-shadow);
+      }
+
+      .dropdown:focus {
+        outline: none;
+      }
+
+      .arrow {
+        content: '';
+        width: 0px;
+        height: 0;
+        top: -6px;
+        z-index: 10;
+        position: absolute;
+        border-left: 6px solid transparent;
+        border-right: 6px solid transparent;
+        border-bottom: 6px solid white;
+      }
+
+      .open .dropdown {
+        opacity: 1;
+        pointer-events: auto;
+        transform: translateY(0);
+      }
+    `;
+  }
+
+  @property({ type: Boolean })
+  open = false;
+
+  @property({ type: Number })
+  arrowSize = 6;
+
+  @property({ type: Number })
+  arrowOffset = this.arrowSize * 2;
+
+  @property({ type: Number })
+  offsetX = -10;
+
+  @property({ type: Number })
+  offsetY = 0;
+
+  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';
+
+    if (this.arrowOffset < 0) {
+      arrow.style.right = Math.abs(this.arrowOffset) + 'px';
+    } else {
+      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';
+    }
+
+    dropdown.addEventListener('blur', () => {
+      // we nest this to deal with clicking the toggle to close
+      // as we don't want it to toggle an immediate open, probably
+      // a better way to deal with this
+      window.setTimeout(() => {
+        this.open = false;
+      }, 200);
+    });
+  }
+
+  public updated(changedProperties: Map<string, any>) {
+    super.updated(changedProperties);
+    if (changedProperties.has('open')) {
+      if (this.open) {
+        this.classList.add('open');
+      } else {
+        this.classList.remove('open');
+      }
+    }
+  }
+
+  public handleOpen(): void {
+    if (!this.open) {
+      this.open = true;
+
+      const dropdown = this.shadowRoot.querySelector(
+        '.dropdown'
+      ) as HTMLDivElement;
+      dropdown.focus();
+    }
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <div class=${this.open ? 'open' : ''}>
+        <slot name="toggle" class="toggle" @click="${this.handleOpen}"></slot>
+        <div class="dropdown" tabindex="0">
+          <div class="arrow"></div>
+          <slot name="dropdown"></slot>
+        </div>
+      </div>
+    `;
+  }
+}

package/src/formfield/FormField.ts

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

package/src/label/Label.ts

@@ -1,11 +1,5 @@
-import {
-  LitElement,
-  TemplateResult,
-  html,
-  css,
-  customElement,
-  property,
-} from 'lit-element';
+import { LitElement, TemplateResult, html, css } from 'lit';
+import { property, customElement } from 'lit/decorators';
 import { getClasses } from '../utils';
 import { styleMap } from 'lit-html/directives/style-map';
 

package/src/leafletmap/LeafletMap.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/camelcase */
 import { Feature, Geometry } from 'geojson';
 import {
   GeoJSON,
@@ -9,7 +8,8 @@ import {
   map as createMap,
   Path,
 } from 'leaflet';
-import { css, html, LitElement, property } from 'lit-element';
+import { css, html, LitElement } from 'lit';
+import { property } from 'lit/decorators';
 
 import { FeatureProperties } from '../interfaces';
 import { getUrl, WebResponse } from '../utils';