@nyaruka/temba-components 0.67.3 → 0.68.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyaruka/temba-components",
-  "version": "0.67.3",
+  "version": "0.68.0",
   "description": "Web components to support rapidpro and related projects",
   "author": "Nyaruka <code@nyaruka.coim>",
   "main": "dist/index.js",
@@ -26,7 +26,8 @@
     "test:watch": "wtr --node-resolve --watch",
     "storybook": "concurrently --kill-others --names tsc,storybook \"npm run tsc:watch\" \"start-storybook --node-resolve --watch --open\"",
     "storybook:build": "build-storybook",
-    "svg": "rimraf static/svg/work && node svg.js --resolution=150",
+    "svg": "rimraf static/svg/work && node svg.js --resolution=150 --output='./static/svg/index.svg' --usage='./src/vectoricon/index.ts'",
+    "svg-wc": "rimraf static/svg/work && node svg.js --resolution=150 --output='./static/svg/webchat.svg' --usage='./src/webchat/index.ts'",
     "version": "yarn run build && auto-changelog -p && git add CHANGELOG.md",
     "locale:extract": "lit-localize extract --config localize.config.json",
     "locale:build": "lit-localize build --config localize.config.json"
@@ -34,6 +35,7 @@
   "dependencies": {
     "@lit/localize": "^0.11.4",
     "color-hash": "^2.0.2",
+    "croppie": "^2.6.5",
     "geojson": "^0.5.0",
     "highlight.js": "^10.7.1",
     "image-size": "^0.9.7",

package/src/contacts/ContactTickets.ts

@@ -155,7 +155,6 @@ export class ContactTickets extends StoreElement {
 
       .user {
         display: flex;
-        padding: 0.4em 0.7em;
         align-items: center;
         border-radius: var(--curvature);
         cursor: pointer;
@@ -166,8 +165,6 @@ export class ContactTickets extends StoreElement {
       }
 
       .user .avatar {
-        font-size: 0.5em;
-        margin-right: 1em;
       }
 
       .user .name {
@@ -251,7 +248,7 @@ export class ContactTickets extends StoreElement {
       return null;
     }
     return html`<div class="user">
-      <div class="avatar">${renderAvatar({ user: user })}</div>
+      <div class="avatar">${renderAvatar({ user: user, scale: 0.6 })}</div>
       <div class="name">${getFullName(user)}</div>
     </div>`;
   }
@@ -355,10 +352,11 @@ export class ContactTickets extends StoreElement {
                       <div slot="toggle" class="toggle">
                         ${ticket.assignee
                           ? html`
-                              <div style="font-size:0.5em">
+                              <div>
                                 ${renderAvatar({
                                   name: ticket.assignee.name,
-                                  position: 'left',
+                                  user: ticket.assignee,
+                                  scale: 0.7,
                                 })}
                               </div>
                             `

package/src/contacts/events.ts

@@ -697,12 +697,6 @@ export const getEventGroupType = (event: ContactEvent, ticket: string) => {
   return 'verbose';
 };
 
-export const renderUserAvatar = (user: User) => {
-  return html`<div style="width:3.5em;font-size:0.8em">
-    ${renderAvatar({ user, position: 'left' })}
-  </div>`;
-};
-
 export const renderAttachment = (attachment: string): TemplateResult => {
   const idx = attachment.indexOf(':');
   const attType = attachment.substr(0, idx);
@@ -881,7 +875,7 @@ export const renderMsgEvent = (
 
     ${!isInbound && event.created_by
       ? html`<div style="margin-left:0.8em;margin-top:0.3em;font-size:0.9em">
-          ${renderUserAvatar(event.created_by)}
+          ${renderAvatar({ user: event.created_by })}
         </div>`
       : null}
   </div>`;
@@ -1016,8 +1010,8 @@ export const renderNoteCreated = (event: TicketEvent): TemplateResult => {
         ></temba-date>
       </div>
     </div>
-    <div style="margin-left:0.8em;margin-top:0.3em;font-size:0.8em">
-      ${renderUserAvatar(event.created_by)}
+    <div style="margin-left:0.8em;margin-top:0.3em;">
+      ${renderAvatar({ user: event.created_by })}
     </div>
   </div>`;
 };

package/src/imagepicker/CroppieCSS.ts

@@ -0,0 +1,254 @@
+import { css } from 'lit';
+
+export const CroppieCSS = css`
+  .croppie-container {
+    width: 100%;
+    height: 100%;
+  }
+
+  .croppie-container .cr-image {
+    z-index: -1;
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform-origin: 0 0;
+    max-height: none;
+    max-width: none;
+  }
+
+  .croppie-container .cr-boundary {
+    position: relative;
+    overflow: hidden;
+    margin: 0 auto;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .croppie-container .cr-viewport,
+  .croppie-container .cr-resizer {
+    position: absolute;
+    border: 2px solid #fff;
+    margin: auto;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    box-shadow: 0 0 2000px 2000px rgba(0, 0, 0, 0.5);
+    z-index: 0;
+  }
+
+  .croppie-container .cr-resizer {
+    z-index: 2;
+    box-shadow: none;
+    pointer-events: none;
+  }
+
+  .croppie-container .cr-resizer-vertical,
+  .croppie-container .cr-resizer-horisontal {
+    position: absolute;
+    pointer-events: all;
+  }
+
+  .croppie-container .cr-resizer-vertical::after,
+  .croppie-container .cr-resizer-horisontal::after {
+    display: block;
+    position: absolute;
+    box-sizing: border-box;
+    border: 1px solid black;
+    background: #fff;
+    width: 10px;
+    height: 10px;
+    content: '';
+  }
+
+  .croppie-container .cr-resizer-vertical {
+    bottom: -5px;
+    cursor: row-resize;
+    width: 100%;
+    height: 10px;
+  }
+
+  .croppie-container .cr-resizer-vertical::after {
+    left: 50%;
+    margin-left: -5px;
+  }
+
+  .croppie-container .cr-resizer-horisontal {
+    right: -5px;
+    cursor: col-resize;
+    width: 10px;
+    height: 100%;
+  }
+
+  .croppie-container .cr-resizer-horisontal::after {
+    top: 50%;
+    margin-top: -5px;
+  }
+
+  .croppie-container .cr-original-image {
+    display: none;
+  }
+
+  .croppie-container .cr-vp-circle {
+    border-radius: 50%;
+  }
+
+  .croppie-container .cr-overlay {
+    z-index: 1;
+    position: absolute;
+    cursor: move;
+    touch-action: none;
+  }
+
+  .croppie-container .cr-slider-wrap {
+    width: 75%;
+    margin: 15px auto;
+    text-align: center;
+  }
+
+  .croppie-result {
+    position: relative;
+    overflow: hidden;
+  }
+
+  .croppie-result img {
+    position: absolute;
+  }
+
+  .croppie-container .cr-image,
+  .croppie-container .cr-overlay,
+  .croppie-container .cr-viewport {
+    -webkit-transform: translateZ(0);
+    -moz-transform: translateZ(0);
+    -ms-transform: translateZ(0);
+    transform: translateZ(0);
+  }
+
+  /*************************************/
+  /***** STYLING RANGE INPUT ***********/
+  /*************************************/
+  /*http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html */
+  /*************************************/
+
+  .cr-slider {
+    -webkit-appearance: none;
+    /*removes default webkit styles*/
+    /*border: 1px solid white; */ /*fix for FF unable to apply focus style bug */
+    width: 300px;
+    /*required for proper track sizing in FF*/
+    max-width: 100%;
+    padding-top: 8px;
+    padding-bottom: 8px;
+    background-color: transparent;
+  }
+
+  .cr-slider::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 3px;
+    background: rgba(0, 0, 0, 0.5);
+    border: 0;
+    border-radius: 3px;
+  }
+
+  .cr-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    border: none;
+    height: 16px;
+    width: 16px;
+    border-radius: 50%;
+    background: #ddd;
+    margin-top: -6px;
+  }
+
+  .cr-slider:focus {
+    outline: none;
+  }
+  /*
+.cr-slider:focus::-webkit-slider-runnable-track {
+background: #ccc;
+}
+*/
+
+  .cr-slider::-moz-range-track {
+    width: 100%;
+    height: 3px;
+    background: rgba(0, 0, 0, 0.5);
+    border: 0;
+    border-radius: 3px;
+  }
+
+  .cr-slider::-moz-range-thumb {
+    border: none;
+    height: 16px;
+    width: 16px;
+    border-radius: 50%;
+    background: #ddd;
+    margin-top: -6px;
+  }
+
+  /*hide the outline behind the border*/
+  .cr-slider:-moz-focusring {
+    outline: 1px solid white;
+    outline-offset: -1px;
+  }
+
+  .cr-slider::-ms-track {
+    width: 100%;
+    height: 5px;
+    background: transparent;
+    /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
+    border-color: transparent; /*leave room for the larger thumb to overflow with a transparent border */
+    border-width: 6px 0;
+    color: transparent; /*remove default tick marks*/
+  }
+  .cr-slider::-ms-fill-lower {
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 10px;
+  }
+  .cr-slider::-ms-fill-upper {
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 10px;
+  }
+  .cr-slider::-ms-thumb {
+    border: none;
+    height: 16px;
+    width: 16px;
+    border-radius: 50%;
+    background: #ddd;
+    margin-top: 1px;
+  }
+  .cr-slider:focus::-ms-fill-lower {
+    background: rgba(0, 0, 0, 0.5);
+  }
+  .cr-slider:focus::-ms-fill-upper {
+    background: rgba(0, 0, 0, 0.5);
+  }
+  /*******************************************/
+
+  /***********************************/
+  /* Rotation Tools */
+  /***********************************/
+  .cr-rotate-controls {
+    position: absolute;
+    bottom: 5px;
+    left: 5px;
+    z-index: 1;
+  }
+  .cr-rotate-controls button {
+    border: 0;
+    background: none;
+  }
+  .cr-rotate-controls i:before {
+    display: inline-block;
+    font-style: normal;
+    font-weight: 900;
+    font-size: 22px;
+  }
+  .cr-rotate-l i:before {
+    content: '↺';
+  }
+  .cr-rotate-r i:before {
+    content: '↻';
+  }
+`;

package/src/imagepicker/ImagePicker.ts

@@ -0,0 +1,272 @@
+/* eslint-disable @typescript-eslint/no-this-alias */
+import { html, css, PropertyValueMap } from 'lit';
+import 'croppie/croppie.js';
+import { CroppieCSS } from './CroppieCSS';
+import { property } from 'lit/decorators.js';
+import { Icon } from '../vectoricon';
+import { FormElement } from '../FormElement';
+
+export class ImagePicker extends FormElement {
+  static styles = css`
+    ${CroppieCSS}
+
+    .croppie {
+      max-width: 400px;
+      border: 0px solid #ccc;
+      border-radius: 0.5em;
+      overflow: hidden;
+      background: #fff;
+      margin-top: -20%;
+      box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.1);
+    }
+
+    .croppie .controls {
+      display: flex;
+      align-items: center;
+      flex-direction: row;
+      justify-content: center;
+      position: absolute;
+      z-index: 1;
+      width: 400px;
+      margin-top: -42px;
+    }
+
+    .toggle {
+      height: 110px;
+      width: 110px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .circle .toggle {
+      border-radius: 50%;
+    }
+
+    .toggle.set {
+      box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 7px 0px,
+        rgba(0, 0, 0, 0.2) 0px 1px 2px 0px, inset 0 0 0 5px rgba(0, 0, 0, 0.1);
+    }
+
+    .toggle.set:hover {
+      box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 7px 0px,
+        rgba(0, 0, 0, 0.2) 0px 1px 2px 0px, inset 0 0 0 5px rgba(0, 0, 0, 0.2);
+    }
+
+    .toggle temba-icon {
+      color: rgba(0, 0, 0, 0.2);
+      padding: 5px;
+    }
+
+    toggle:hover temba-icon {
+      color: rgba(0, 0, 0, 0.8);
+    }
+
+    .toggle.set temba-icon {
+      border-radius: 50%;
+      margin-right: -90%;
+      margin-bottom: -50%;
+      background: rgba(240, 240, 240, 1);
+      box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px 0px;
+    }
+
+    .toggle.set:hover temba-icon {
+      background: #fff;
+      color: var(--color-primary-dark);
+    }
+
+    .circle .toggle.set temba-icon {
+      margin-right: -70%;
+      margin-bottom: -70%;
+    }
+
+    .hidden {
+      display: none;
+    }
+
+    .controls temba-icon {
+      margin: 0em 0.75em;
+      background: rgba(255, 255, 255, 0.8);
+      border-radius: 50%;
+      padding: 6px;
+      transition: all 0.1s ease-in-out;
+    }
+
+    .controls {
+      pointer-events: none;
+      display: flex;
+    }
+
+    .controls temba-icon {
+      pointer-events: all;
+    }
+
+    .controls temba-icon.close {
+      color: rgba(0, 0, 0, 0.2);
+      background: rgba(255, 255, 255, 0.2);
+    }
+
+    .controls temba-icon.submit {
+      color: rgba(0, 0, 0, 0.2);
+      box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1);
+    }
+
+    .controls temba-icon:hover {
+      color: white;
+      cursor: pointer;
+      background: var(--color-primary-dark);
+    }
+  `;
+
+  @property({ type: String })
+  tempImage: string;
+
+  @property({ type: String })
+  url: string;
+
+  @property({ type: String })
+  shape = 'square';
+
+  @property({ type: Boolean, attribute: false })
+  showCroppie = false;
+
+  uploadReader = new FileReader();
+  croppie: any;
+
+  protected firstUpdated(
+    changed: PropertyValueMap<any> | Map<PropertyKey, unknown>
+  ): void {
+    super.firstUpdated(changed);
+    const picker = this;
+
+    this.uploadReader.onload = function () {
+      picker.launchCroppie(picker.uploadReader.result as any);
+    };
+  }
+
+  public updated(changed: Map<string, any>): void {
+    super.updated(changed);
+    if (changed.has('url')) {
+      this.setAttribute('url', this.url);
+    }
+  }
+
+  private closeCroppie() {
+    this.showCroppie = false;
+    const wrapper = this.shadowRoot.querySelector('.croppie .embed');
+    if (wrapper.firstChild) {
+      wrapper.removeChild(wrapper.firstChild);
+    }
+  }
+
+  private launchCroppie(url: string) {
+    const wrapper = this.shadowRoot.querySelector('.croppie .embed');
+    if (wrapper.firstChild) {
+      wrapper.removeChild(wrapper.firstChild);
+    }
+    this.showCroppie = true;
+    const croppie = document.createElement('div');
+    wrapper.appendChild(croppie);
+
+    const Croppie = (window as any).Croppie;
+    this.croppie = new Croppie(croppie, {
+      enableExif: true,
+      viewport: {
+        width: 300,
+        height: 300,
+        type: this.shape,
+      },
+      boundary: {
+        width: 400,
+        height: 400,
+      },
+    });
+
+    this.croppie.bind({ url });
+  }
+
+  private saveResult() {
+    const picker = this;
+    this.croppie
+      .result({
+        type: 'blob',
+        size: 'viewport',
+        format: 'webp',
+        quality: 1,
+        circle: false,
+      })
+      .then(function (resp: any) {
+        const blob = resp;
+        picker.url = URL.createObjectURL(blob);
+
+        // const blob = dataURItoBlob(resp);
+        const fd = new FormData();
+        fd.append(picker.name, blob, 'filename.webp');
+
+        picker.value = fd;
+        picker.closeCroppie();
+
+        console.log('image changed', picker.name, picker.value, picker.url);
+        // picker.dispatchEvent(new CustomEvent('image-changed', { detail: resp }));
+      });
+  }
+
+  private handleToggleClicked() {
+    const fileInput = this.shadowRoot.querySelector('#file');
+    (fileInput as any).click();
+  }
+
+  private handleFileChanged(e: Event) {
+    const input = e.target as any;
+    if (input.files.length > 0) {
+      this.uploadReader.readAsDataURL(input.files[0]);
+    }
+    input.value = '';
+  }
+
+  protected render() {
+    return html`
+    <div class="wrapper ${this.shape} ${this.label ? 'label' : ''}">
+      <temba-field
+        name=${this.name}
+        label=${this.label}
+        .helpText=${this.helpText}
+        .errors=${this.errors}
+        .widgetOnly=${this.widgetOnly}
+        .helpAlways=${true}
+        ?disabled=${this.disabled}
+      >
+        <input class='hidden' type="file" accept="image/*" capture="camera" id="file" name="file" @change=${
+          this.handleFileChanged
+        }/>
+        <div class='toggle ${this.url ? 'set' : ''}  ${
+      this.showCroppie ? 'hidden' : ''
+    }' @click=${this.handleToggleClicked} style="background: ${
+      this.url
+        ? `url('${this.url}') center / contain no-repeat`
+        : 'rgba(0, 0, 0, 0.1)'
+    }">
+          <temba-icon name=${Icon.upload_image} size="1.5"></temba-icon>
+        </div>
+        
+        <temba-mask ?show=${this.showCroppie} class="${
+      this.showCroppie ? 'editing' : ''
+    }">
+          <div class='croppie'>
+            <div class='embed'></div>
+            <div class='controls'>
+              <temba-icon class="close" size="1" name=${Icon.close} @click=${
+      this.closeCroppie
+    }></temba-icon>
+              <div style="flex-grow:1"></div>
+              <temba-icon class="submit" size="1" name=${Icon.submit} @click=${
+      this.saveResult
+    }></temba-icon>
+            </div>
+        </temba-mask>
+      </temba-field>
+    </div>
+    `;
+  }
+}

package/src/interfaces.ts

@@ -55,6 +55,7 @@ export interface User {
   email?: string;
   role?: string;
   created_on?: string;
+  avatar?: string;
 }
 
 export interface Ticket {
@@ -66,7 +67,7 @@ export interface Ticket {
   status: string;
   contact: ObjectReference;
   topic: ObjectReference;
-  assignee?: { email: string; name: string };
+  assignee?: { email: string; name: string; avatar?: string };
 }
 
 export interface FlowResult {

package/src/list/NotificationList.ts

@@ -95,6 +95,9 @@ export class NotificationList extends TembaList {
         } else if (notification.export.type === 'results') {
           icon = Icon.results_export;
           body = 'Exported flow results';
+        } else if (notification.export.type === 'ticket') {
+          icon = Icon.tickets_export;
+          body = 'Exported tickets';
         }
       } else if (notification.type === 'tickets:activity') {
         icon = Icon.tickets;

package/src/list/TembaMenu.ts

@@ -993,7 +993,7 @@ export class TembaMenu extends RapidElement {
     });
 
     if (menuItem.avatar) {
-      icon = renderAvatar({ name: menuItem.avatar, tip: false });
+      icon = renderAvatar({ name: menuItem.avatar, tip: false, scale: 1.2 });
       if (menuItem.bubble) {
         icon = html`${icon}${menuItem.bubble
           ? html`<div