@nyaruka/temba-components 0.26.6 → 0.26.9

package/out-tsc/src/contacts/ContactFieldEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContactFieldEditor.js","sourceRoot":"","sources":["../../../src/contacts/ContactFieldEditor.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators';\nimport { RapidElement } from '../RapidElement';\nimport { TextInput } from '../textinput/TextInput';\n\nexport class ContactFieldEditor extends RapidElement {\n  @property({ type: String })\n  key: string;\n\n  @property({ type: String })\n  value: string;\n\n  @property({ type: String })\n  name: string;\n\n  @property({ type: String })\n  type: string;\n\n  @property({ type: String })\n  icon = navigator.clipboard ? 'copy' : '';\n\n  @property({ type: String })\n  iconClass = '';\n\n  static get styles() {\n    return css`\n      .prefix {\n        background: rgba(0, 0, 0, 0.05);\n        border-top-left-radius: 4px;\n        border-bottom-left-radius: 4px;\n        color: #888;\n        cursor: pointer;\n        width: 100px;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        display: flex;\n        padding: 0em 0.5em;\n      }\n\n      .prefix .name {\n        padding: 0.5em 0em;\n        color: #888;\n        width: 80px;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n\n      .postfix {\n        display: flex;\n        align-items: stretch;\n      }\n\n      .popper {\n        padding: 0.5em 0.75em;\n        background: rgba(240, 240, 240, 1);\n        border-top-right-radius: 4px;\n        border-bottom-right-radius: 4px;\n        --icon-color: #888;\n        opacity: 0;\n        cursor: default;\n        transform: scale(0.5);\n        transition: all 300ms ease-in-out;\n        display: flex;\n        align-items: stretch;\n        z-index: 1000;\n      }\n\n      .postfix temba-icon[name='calendar'] {\n        --icon-color: #e3e3e3;\n      }\n\n      .popper.check {\n        background: rgba(90, 145, 86, 0.15);\n      }\n\n      .popper.none {\n        opacity: 0;\n      }\n\n      .popper.copy temba-icon:hover {\n        --icon-color: #555;\n      }\n\n      .popper.corner-down-left {\n        // background: var(--color-primary-dark);\n        // --icon-color: var(--color-text-light);\n        opacity: 1;\n        transform: scale(1);\n      }\n\n      temba-icon {\n        cursor: pointer;\n      }\n\n      temba-icon[name='check'] {\n        --icon-color: rgb(90, 145, 86);\n      }\n\n      temba-textinput:hover .popper.copy {\n        opacity: 1;\n        transform: scale(1);\n      }\n\n      temba-textinput:focus .popper.copy {\n        opacity: 1;\n        transform: scale(1);\n      }\n\n      .copy.clicked temba-icon {\n        transform: scale(1.2);\n      }\n\n      temba-icon {\n        transition: all 200ms ease-in-out;\n      }\n    `;\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.handleInput = this.handleInput.bind(this);\n    this.handleSubmit = this.handleSubmit.bind(this);\n  }\n\n  public handleIconClick(evt: MouseEvent) {\n    const ele = evt.target as HTMLDivElement;\n    const icon = ele.getAttribute('name');\n    const input = this.shadowRoot.querySelector('temba-textinput') as TextInput;\n\n    if (icon === 'copy') {\n      if (navigator.clipboard) {\n        this.iconClass = 'clicked';\n        navigator.clipboard.writeText(input.getDisplayValue()).then(() => {\n          window.setTimeout(() => {\n            this.iconClass = '';\n          }, 300);\n        });\n      }\n    }\n    evt.preventDefault();\n    evt.stopPropagation();\n  }\n\n  public handleSubmit() {\n    const input = this.shadowRoot.querySelector('temba-textinput') as TextInput;\n    if (input.value !== this.value) {\n      this.value = input.value;\n      this.fireEvent('change');\n    }\n    this.icon = navigator.clipboard ? 'copy' : '';\n  }\n\n  public handleChange(evt: Event) {\n    evt.preventDefault();\n    evt.stopPropagation();\n  }\n\n  public handleInput(evt: KeyboardEvent) {\n    if (evt.key === 'Enter') {\n      const input = evt.currentTarget as TextInput;\n      input.blur();\n    }\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div>\n        <temba-textinput\n          value=\"${this.value ? this.value : ''}\"\n          ?datetimepicker=${this.type === 'datetime'}\n          @blur=${this.handleSubmit}\n          @keydown=${this.handleInput}\n          @change=${this.handleChange}\n        >\n          <div class=\"prefix\" slot=\"prefix\">\n            <div class=\"name\">${this.name}</div>\n          </div>\n\n          <div class=\"postfix\">\n            ${this.type === 'datetime'\n              ? html`<div\n                  style=\"position: absolute; padding-top: .75em; padding-left: .75em;\"\n                >\n                  <temba-icon name=\"calendar\" />\n                </div>`\n              : null}\n\n            <div\n              class=\"popper ${this.iconClass} ${this.icon ? this.icon : 'none'}\"\n              @click=${this.handleIconClick}\n            >\n              <temba-icon name=\"${this.icon}\" animatechange=\"spin\"></temba-icon>\n            </div>\n          </div>\n        </temba-textinput>\n      </div>\n    `;\n  }\n}\n"]}

package/out-tsc/src/contacts/ContactFields.js

@@ -0,0 +1,106 @@
+import { __decorate } from "tslib";
+import { css, html } from 'lit';
+import { property } from 'lit/decorators';
+import { postJSON } from '../utils';
+import { ContactStoreElement } from './ContactStoreElement';
+export class ContactFields extends ContactStoreElement {
+    static get styles() {
+        return css `
+      :host {
+        display: flex;
+        flex-wrap: wrap;
+        flex-shrink: 1;
+      }
+
+      .field {
+        display: flex;
+        margin: 0.3em 0.3em;
+        box-shadow: 0 0 0.2em rgba(0, 0, 0, 0.15);
+        border-radius: var(--curvature);
+        align-items: center;
+        overflow: hidden;
+      }
+
+      .field.set {
+        background: #fff;
+      }
+
+      .field.unset {
+        opacity: 0.4;
+      }
+
+      .field.unset .label {
+      }
+
+      .field:hover {
+      }
+
+      .field:hover {
+        box-shadow: 1px 1px 6px 2px rgba(0, 0, 0, 0.05),
+          0px 0px 0px 2px var(--color-link-primary);
+        cursor: pointer;
+      }
+
+      .label {
+        padding: 0.25em 1em;
+        border-top-left-radius: var(--curvature);
+        border-bottom-left-radius: var(--curvature);
+        color: #777;
+        font-size: 0.9em;
+        font-weight: 400;
+        box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1) inset;
+      }
+
+      .value {
+        --icon-color: #ddd;
+        max-width: 150px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        padding: 0.25em 1em;
+        border-top-right-radius: var(--curvature);
+        border-bottom-right-radius: var(--curvature);
+        font-size: 0.9em;
+      }
+
+      temba-contact-field {
+        margin: 0.3em;
+        min-width: 320px;
+        flex-grow: 1;
+      }
+    `;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.handleFieldChanged = this.handleFieldChanged.bind(this);
+    }
+    handleFieldChanged(evt) {
+        const field = evt.currentTarget;
+        this.data.fields[field.key] = field.value;
+        postJSON('/api/v2/contacts.json?uuid=' + this.data.uuid, {
+            fields: { [field.key]: field.value },
+        }).then(() => {
+            this.refresh();
+        });
+    }
+    render() {
+        const pinned = this.store.getPinnedFields();
+        const fields = pinned.map((field) => {
+            if (this.data) {
+                const value = this.data.fields[field.key];
+                return html `<temba-contact-field
+          key=${field.key}
+          name=${field.label}
+          value=${value}
+          type=${field.value_type}
+          @change=${this.handleFieldChanged}
+        ></temba-contact-field>`;
+            }
+        });
+        return html `${this.data ? html ` ${fields} ` : null}`;
+    }
+}
+__decorate([
+    property({ type: Boolean })
+], ContactFields.prototype, "dirty", void 0);
+//# sourceMappingURL=ContactFields.js.map

package/out-tsc/src/contacts/ContactFields.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContactFields.js","sourceRoot":"","sources":["../../../src/contacts/ContactFields.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEpC,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE5D,MAAM,OAAO,aAAc,SAAQ,mBAAmB;IACpD,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+DT,CAAC;IACJ,CAAC;IAKD,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/D,CAAC;IAEM,kBAAkB,CAAC,GAAe;QACvC,MAAM,KAAK,GAAG,GAAG,CAAC,aAAmC,CAAC;QACtD,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC;QAC1C,QAAQ,CAAC,6BAA6B,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACvD,MAAM,EAAE,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,KAAK,EAAE;SACrC,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE;YACX,IAAI,CAAC,OAAO,EAAE,CAAC;QACjB,CAAC,CAAC,CAAC;IACL,CAAC;IAEM,MAAM;QACX,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,eAAe,EAAE,CAAC;QAE5C,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,KAAmB,EAAE,EAAE;YAChD,IAAI,IAAI,CAAC,IAAI,EAAE;gBACb,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;gBAC1C,OAAO,IAAI,CAAA;gBACH,KAAK,CAAC,GAAG;iBACR,KAAK,CAAC,KAAK;kBACV,KAAK;iBACN,KAAK,CAAC,UAAU;oBACb,IAAI,CAAC,kBAAkB;gCACX,CAAC;aAC1B;QACH,CAAC,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,IAAI,MAAM,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;IACvD,CAAC;CACF;AAnCC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CACb","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators';\nimport { ContactField } from '../interfaces';\nimport { postJSON } from '../utils';\nimport { ContactFieldEditor } from './ContactFieldEditor';\nimport { ContactStoreElement } from './ContactStoreElement';\n\nexport class ContactFields extends ContactStoreElement {\n  static get styles() {\n    return css`\n      :host {\n        display: flex;\n        flex-wrap: wrap;\n        flex-shrink: 1;\n      }\n\n      .field {\n        display: flex;\n        margin: 0.3em 0.3em;\n        box-shadow: 0 0 0.2em rgba(0, 0, 0, 0.15);\n        border-radius: var(--curvature);\n        align-items: center;\n        overflow: hidden;\n      }\n\n      .field.set {\n        background: #fff;\n      }\n\n      .field.unset {\n        opacity: 0.4;\n      }\n\n      .field.unset .label {\n      }\n\n      .field:hover {\n      }\n\n      .field:hover {\n        box-shadow: 1px 1px 6px 2px rgba(0, 0, 0, 0.05),\n          0px 0px 0px 2px var(--color-link-primary);\n        cursor: pointer;\n      }\n\n      .label {\n        padding: 0.25em 1em;\n        border-top-left-radius: var(--curvature);\n        border-bottom-left-radius: var(--curvature);\n        color: #777;\n        font-size: 0.9em;\n        font-weight: 400;\n        box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1) inset;\n      }\n\n      .value {\n        --icon-color: #ddd;\n        max-width: 150px;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        padding: 0.25em 1em;\n        border-top-right-radius: var(--curvature);\n        border-bottom-right-radius: var(--curvature);\n        font-size: 0.9em;\n      }\n\n      temba-contact-field {\n        margin: 0.3em;\n        min-width: 320px;\n        flex-grow: 1;\n      }\n    `;\n  }\n\n  @property({ type: Boolean })\n  dirty: boolean;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.handleFieldChanged = this.handleFieldChanged.bind(this);\n  }\n\n  public handleFieldChanged(evt: InputEvent) {\n    const field = evt.currentTarget as ContactFieldEditor;\n    this.data.fields[field.key] = field.value;\n    postJSON('/api/v2/contacts.json?uuid=' + this.data.uuid, {\n      fields: { [field.key]: field.value },\n    }).then(() => {\n      this.refresh();\n    });\n  }\n\n  public render(): TemplateResult {\n    const pinned = this.store.getPinnedFields();\n\n    const fields = pinned.map((field: ContactField) => {\n      if (this.data) {\n        const value = this.data.fields[field.key];\n        return html`<temba-contact-field\n          key=${field.key}\n          name=${field.label}\n          value=${value}\n          type=${field.value_type}\n          @change=${this.handleFieldChanged}\n        ></temba-contact-field>`;\n      }\n    });\n\n    return html`${this.data ? html` ${fields} ` : null}`;\n  }\n}\n"]}

package/out-tsc/src/contacts/ContactGroups.js

@@ -0,0 +1,39 @@
+import { css, html } from 'lit';
+import { ContactStoreElement } from './ContactStoreElement';
+export class ContactGroups extends ContactStoreElement {
+    static get styles() {
+        return css `
+      .groups {
+        display: flex;
+        flex-wrap: wrap;
+      }
+
+      temba-label {
+        margin: 0.3em;
+      }
+    `;
+    }
+    render() {
+        return html `${this.data
+            ? html `
+          <div class="groups">
+            ${this.data.groups.map((group) => {
+                return html `
+                <temba-label
+                  onclick="goto(event)"
+                  href="/contact/filter/${group.uuid}/"
+                  icon=${group.is_dynamic ? 'atom' : 'users'}
+                  clickable
+                  light
+                  shadow
+                >
+                  ${group.name}
+                </temba-label>
+              `;
+            })}
+          </div>
+        `
+            : null}`;
+    }
+}
+//# sourceMappingURL=ContactGroups.js.map

package/out-tsc/src/contacts/ContactGroups.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContactGroups.js","sourceRoot":"","sources":["../../../src/contacts/ContactGroups.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAEhD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE5D,MAAM,OAAO,aAAc,SAAQ,mBAAmB;IACpD,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;KAST,CAAC;IACJ,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,IAAI;YACrB,CAAC,CAAC,IAAI,CAAA;;cAEE,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAY,EAAE,EAAE;gBACtC,OAAO,IAAI,CAAA;;;0CAGiB,KAAK,CAAC,IAAI;yBAC3B,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;;;;;oBAKxC,KAAK,CAAC,IAAI;;eAEf,CAAC;YACJ,CAAC,CAAC;;SAEL;YACH,CAAC,CAAC,IAAI,EAAE,CAAC;IACb,CAAC;CACF","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { Group } from '../interfaces';\nimport { ContactStoreElement } from './ContactStoreElement';\n\nexport class ContactGroups extends ContactStoreElement {\n  static get styles() {\n    return css`\n      .groups {\n        display: flex;\n        flex-wrap: wrap;\n      }\n\n      temba-label {\n        margin: 0.3em;\n      }\n    `;\n  }\n\n  public render(): TemplateResult {\n    return html`${this.data\n      ? html`\n          <div class=\"groups\">\n            ${this.data.groups.map((group: Group) => {\n              return html`\n                <temba-label\n                  onclick=\"goto(event)\"\n                  href=\"/contact/filter/${group.uuid}/\"\n                  icon=${group.is_dynamic ? 'atom' : 'users'}\n                  clickable\n                  light\n                  shadow\n                >\n                  ${group.name}\n                </temba-label>\n              `;\n            })}\n          </div>\n        `\n      : null}`;\n  }\n}\n"]}

package/out-tsc/src/contacts/ContactName.js

@@ -0,0 +1,40 @@
+import { __decorate } from "tslib";
+import { css, html } from 'lit';
+import { property } from 'lit/decorators';
+import { ContactStoreElement } from './ContactStoreElement';
+export class ContactName extends ContactStoreElement {
+    constructor() {
+        super(...arguments);
+        this.size = 20;
+    }
+    static get styles() {
+        return css `
+      :host {
+        display: flex;
+      }
+
+      temba-urn {
+        margin-right: 0.2em;
+        margin-top: 2px;
+      }
+    `;
+    }
+    render() {
+        if (this.data) {
+            const urn = this.data.urns.length > 0
+                ? html `<temba-urn
+              size=${this.size}
+              urn="${this.data.urns[0]}"
+            ></temba-urn>`
+                : null;
+            return html `
+        ${urn}
+        <div class="name">${this.data.name}</div>
+      `;
+        }
+    }
+}
+__decorate([
+    property({ type: Number, attribute: 'icon-size' })
+], ContactName.prototype, "size", void 0);
+//# sourceMappingURL=ContactName.js.map

package/out-tsc/src/contacts/ContactName.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContactName.js","sourceRoot":"","sources":["../../../src/contacts/ContactName.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE5D,MAAM,OAAO,WAAY,SAAQ,mBAAmB;IAApD;;QAEE,SAAI,GAAG,EAAE,CAAC;IA8BZ,CAAC;IA5BC,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;KAST,CAAC;IACJ,CAAC;IAEM,MAAM;QACX,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,MAAM,GAAG,GACP,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC;gBACvB,CAAC,CAAC,IAAI,CAAA;qBACK,IAAI,CAAC,IAAI;qBACT,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;0BACZ;gBAChB,CAAC,CAAC,IAAI,CAAC;YACX,OAAO,IAAI,CAAA;UACP,GAAG;4BACe,IAAI,CAAC,IAAI,CAAC,IAAI;OACnC,CAAC;SACH;IACH,CAAC;CACF;AA9BC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;yCACzC","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators';\nimport { ContactStoreElement } from './ContactStoreElement';\n\nexport class ContactName extends ContactStoreElement {\n  @property({ type: Number, attribute: 'icon-size' })\n  size = 20;\n\n  static get styles() {\n    return css`\n      :host {\n        display: flex;\n      }\n\n      temba-urn {\n        margin-right: 0.2em;\n        margin-top: 2px;\n      }\n    `;\n  }\n\n  public render(): TemplateResult {\n    if (this.data) {\n      const urn =\n        this.data.urns.length > 0\n          ? html`<temba-urn\n              size=${this.size}\n              urn=\"${this.data.urns[0]}\"\n            ></temba-urn>`\n          : null;\n      return html`\n        ${urn}\n        <div class=\"name\">${this.data.name}</div>\n      `;\n    }\n  }\n}\n"]}

package/out-tsc/src/contacts/ContactStoreElement.js

@@ -0,0 +1,44 @@
+import { __decorate } from "tslib";
+import { property } from 'lit/decorators';
+import { StoreElement } from '../store/StoreElement';
+export class ContactStoreElement extends StoreElement {
+    prepareData(data) {
+        if (data && data.length > 0) {
+            data = data[0];
+            data.groups.forEach((group) => {
+                group.is_dynamic = this.store.isDynamicGroup(group.uuid);
+            });
+            data.groups.sort((a, b) => {
+                if (!a.is_dynamic || !b.is_dynamic) {
+                    if (a.is_dynamic) {
+                        return -1;
+                    }
+                    if (b.is_dynamic) {
+                        return 1;
+                    }
+                }
+                return a.name.localeCompare(b.name);
+            });
+            return data;
+        }
+        return null;
+    }
+    updated(changes) {
+        super.updated(changes);
+        if (changes.has('contact')) {
+            if (this.contact) {
+                this.url = `/api/v2/contacts.json?uuid=${this.contact}`;
+            }
+            else {
+                this.url = null;
+            }
+        }
+    }
+}
+__decorate([
+    property({ type: String })
+], ContactStoreElement.prototype, "contact", void 0);
+__decorate([
+    property({ type: Object, attribute: false })
+], ContactStoreElement.prototype, "data", void 0);
+//# sourceMappingURL=ContactStoreElement.js.map

package/out-tsc/src/contacts/ContactStoreElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContactStoreElement.js","sourceRoot":"","sources":["../../../src/contacts/ContactStoreElement.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAErD,MAAM,OAAO,mBAAoB,SAAQ,YAAY;IAOnD,WAAW,CAAC,IAAS;QACnB,IAAI,IAAI,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE;YAC3B,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC;YACf,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,KAAY,EAAE,EAAE;gBACnC,KAAK,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;YAC3D,CAAC,CAAC,CAAC;YAEH,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAQ,EAAE,CAAQ,EAAE,EAAE;gBACtC,IAAI,CAAC,CAAC,CAAC,UAAU,IAAI,CAAC,CAAC,CAAC,UAAU,EAAE;oBAClC,IAAI,CAAC,CAAC,UAAU,EAAE;wBAChB,OAAO,CAAC,CAAC,CAAC;qBACX;oBAED,IAAI,CAAC,CAAC,UAAU,EAAE;wBAChB,OAAO,CAAC,CAAC;qBACV;iBACF;gBAED,OAAO,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;YACtC,CAAC,CAAC,CAAC;YAEH,OAAO,IAAI,CAAC;SACb;QACD,OAAO,IAAI,CAAC;IACd,CAAC;IAES,OAAO,CACf,OAA0D;QAE1D,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACvB,IAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE;YAC1B,IAAI,IAAI,CAAC,OAAO,EAAE;gBAChB,IAAI,CAAC,GAAG,GAAG,8BAA8B,IAAI,CAAC,OAAO,EAAE,CAAC;aACzD;iBAAM;gBACL,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC;aACjB;SACF;IACH,CAAC;CACF;AA3CC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDACX;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;iDAC/B","sourcesContent":["import { PropertyValueMap } from 'lit';\nimport { property } from 'lit/decorators';\nimport { Contact, Group } from '../interfaces';\nimport { StoreElement } from '../store/StoreElement';\n\nexport class ContactStoreElement extends StoreElement {\n  @property({ type: String })\n  contact: string;\n\n  @property({ type: Object, attribute: false })\n  data: Contact;\n\n  prepareData(data: any) {\n    if (data && data.length > 0) {\n      data = data[0];\n      data.groups.forEach((group: Group) => {\n        group.is_dynamic = this.store.isDynamicGroup(group.uuid);\n      });\n\n      data.groups.sort((a: Group, b: Group) => {\n        if (!a.is_dynamic || !b.is_dynamic) {\n          if (a.is_dynamic) {\n            return -1;\n          }\n\n          if (b.is_dynamic) {\n            return 1;\n          }\n        }\n\n        return a.name.localeCompare(b.name);\n      });\n\n      return data;\n    }\n    return null;\n  }\n\n  protected updated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.updated(changes);\n    if (changes.has('contact')) {\n      if (this.contact) {\n        this.url = `/api/v2/contacts.json?uuid=${this.contact}`;\n      } else {\n        this.url = null;\n      }\n    }\n  }\n}\n"]}

package/out-tsc/src/contacts/ContactUrn.js

@@ -0,0 +1,38 @@
+import { __decorate } from "tslib";
+import { css, html } from 'lit';
+import { property } from 'lit/decorators';
+import { RapidElement } from '../RapidElement';
+export class ContactUrn extends RapidElement {
+    static get styles() {
+        return css `
+      .urn {
+        box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.04) inset;
+        padding: 3px;
+        border: 1px solid #ddd;
+        border-radius: 18rem;
+        background: #eee;
+        margin-right: 0.2em;
+      }
+    `;
+    }
+    render() {
+        const scheme = this.urn.split(':')[0];
+        return html `
+      <img
+        class="urn"
+        width="${this.size}em"
+        height="${this.size}em"
+        src="${this.prefix ||
+            window.static_url ||
+            '/static/'}img/schemes/${scheme}.svg"
+      />
+    `;
+    }
+}
+__decorate([
+    property({ type: String })
+], ContactUrn.prototype, "urn", void 0);
+__decorate([
+    property({ type: Number })
+], ContactUrn.prototype, "size", void 0);
+//# sourceMappingURL=ContactUrn.js.map

package/out-tsc/src/contacts/ContactUrn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContactUrn.js","sourceRoot":"","sources":["../../../src/contacts/ContactUrn.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,MAAM,OAAO,UAAW,SAAQ,YAAY;IAO1C,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;KAST,CAAC;IACJ,CAAC;IAEM,MAAM;QACX,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;QACtC,OAAO,IAAI,CAAA;;;iBAGE,IAAI,CAAC,IAAI;kBACR,IAAI,CAAC,IAAI;eACZ,IAAI,CAAC,MAAM;YACjB,MAAc,CAAC,UAAU;YAC1B,UAAU,eAAe,MAAM;;KAElC,CAAC;IACJ,CAAC;CACF;AA/BC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACf;AAGZ;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACd","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators';\nimport { RapidElement } from '../RapidElement';\n\nexport class ContactUrn extends RapidElement {\n  @property({ type: String })\n  urn: string;\n\n  @property({ type: Number })\n  size: number;\n\n  static get styles() {\n    return css`\n      .urn {\n        box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.04) inset;\n        padding: 3px;\n        border: 1px solid #ddd;\n        border-radius: 18rem;\n        background: #eee;\n        margin-right: 0.2em;\n      }\n    `;\n  }\n\n  public render(): TemplateResult {\n    const scheme = this.urn.split(':')[0];\n    return html`\n      <img\n        class=\"urn\"\n        width=\"${this.size}em\"\n        height=\"${this.size}em\"\n        src=\"${this.prefix ||\n        (window as any).static_url ||\n        '/static/'}img/schemes/${scheme}.svg\"\n      />\n    `;\n  }\n}\n"]}

package/out-tsc/src/contacts/events.js

@@ -434,6 +434,10 @@ export const getEventStyles = () => {
     .assigned .attn {
       color: #777;
     }
+
+    .attachments {
+      margin-top: 1em;
+    }
   `;
 };
 const FLOW_USER_ID = 'flow';
@@ -538,14 +542,48 @@ export const renderAttachment = (attachment) => {
     }
     else if (ext === 'pdf') {
         return html `<div
-    style="width:100%;height:300px;border-radius:var(--curvature);box-shadow:0px 0px 10px -1px rgb(160 160 160);overflow:hidden"
-  ><embed src="${url}#view=Fit" type="application/pdf" frameBorder="0" scrolling="auto" height="100%" width="100%"></embed></div>`;
+      style="width:100%;height:300px;border-radius:var(--curvature);box-shadow:0px 0px 12px 0px rgba(0,0,0,.1), 0px 0px 2px 0px rgba(0,0,0,.15);overflow:hidden"
+    ><embed src="${url}#view=Fit" type="application/pdf" frameBorder="0" scrolling="auto" height="100%" width="100%"></embed></div>`;
     }
     else if (mediaType === 'video') {
-        return html `<video max-width="400px" height="auto" controls="controls">
+        return html `<video
+      style="border-radius:var(--curvature);box-shadow:0px 0px 12px 0px rgba(0,0,0,.1), 0px 0px 2px 0px rgba(0,0,0,.15);"
+      max-width="400px"
+      height="auto"
+      controls="controls"
+    >
       <source src="${url}" type="video/mp4" />
     </video> `;
     }
+    else if (mediaType === 'audio') {
+        return html `<audio
+      style="border-radius: 99px; box-shadow:0px 0px 12px 0px rgba(0,0,0,.1), 0px 0px 2px 0px rgba(0,0,0,.15);"
+      src="${url}"
+      type="${attType}"
+      controls
+    >
+      <a target="_" href="${url}">${url}</a>
+    </audio>`;
+    }
+    else if (attType === 'geo') {
+        const [lat, long] = url.split(',');
+        const latFloat = parseFloat(lat);
+        const longFloat = parseFloat(long);
+        const geo = `${lat}000000%2C${long}000000`;
+        return html ` <iframe
+      style="border-radius: var(--curvature);box-shadow:0px 0px 12px 0px rgba(0,0,0,.1), 0px 0px 2px 0px rgba(0,0,0,.15);"
+      width="300"
+      height="300"
+      frameborder="0"
+      scrolling="no"
+      marginheight="0"
+      marginwidth="0"
+      src="https://www.openstreetmap.org/export/embed.html?bbox=${longFloat -
+            0.005}000000%2C${latFloat - 0.005}%2C${longFloat +
+            0.005}000000%2C${latFloat +
+            0.005}000000&amp;layer=mapnik&amp;marker=${geo}"
+    ></iframe>`;
+    }
     else {
         return html `<div style="display:flex">
       <temba-icon name="download"></temba-icon>
@@ -553,15 +591,46 @@ export const renderAttachment = (attachment) => {
     </div>`;
     }
     return html `<div
-    style="width:100%;max-width:300px;border-radius:var(--curvature); box-shadow:0px 0px 10px -1px rgb(160 160 160);overflow:hidden"
+    style="width:100%;max-width:300px;border-radius:var(--curvature); box-shadow:0px 0px 6px 0px rgba(0,0,0,.15);overflow:hidden"
   >
     ${inner}
   </div>`;
 };
 export const renderMsgEvent = (event, agent) => {
     const isInbound = event.type === Events.MESSAGE_RECEIVED;
-    const isError = event.status === 'E' || event.status === 'F';
-    const msg = html `<div style="display:flex;align-items:flex-start">
+    const isError = event.status === 'E';
+    const isFailure = event.status === 'F';
+    // summary items which appear under the message bubble
+    const summary = [];
+    if (event.logs_url) {
+        summary.push(html ` <div class="icon-link">
+      <temba-icon
+        onclick="goto(event)"
+        href="${event.logs_url}"
+        name="log"
+        class="${isError || isFailure ? 'error' : ''}"
+      ></temba-icon>
+    </div>`);
+    }
+    else if (isError) {
+        summary.push(html `<temba-icon
+        title="Message delivery error"
+        name="alert-triangle"
+      ></temba-icon>`);
+    }
+    else if (isFailure) {
+        summary.push(html `<temba-icon
+        title="Message delivery failure: ${event.failed_reason_display}"
+        name="alert-triangle"
+      ></temba-icon>`);
+    }
+    if (event.recipient_count > 1) {
+        summary.push(html `<temba-icon size="1" name="megaphone"></temba-icon>
+      <div class="recipients">${event.recipient_count} contacts</div>
+      <div class="separator">•</div>`);
+    }
+    summary.push(html `<div class="time">${timeSince(new Date(event.created_on))}</div>`);
+    return html `<div style="display:flex;align-items:flex-start">
     <div style="display:flex;flex-direction:column">
       ${event.msg.text ? html `<div class="msg">${event.msg.text}</div>` : null}
       ${event.msg.attachments
@@ -577,29 +646,7 @@ export const renderMsgEvent = (event, agent) => {
         style="flex-direction:row${isInbound ? '-reverse' : ''}"
       >
         <div style="flex-grow:1"></div>
-        ${event.logs_url
-        ? html `
-              <div class="icon-link">
-                <temba-icon
-                  onclick="goto(event)"
-                  href="${event.logs_url}"
-                  name="log"
-                  class="${isError ? 'error' : ''}"
-                ></temba-icon>
-              </div>
-            `
-        : isError
-            ? html `<temba-icon
-              title="Message delivery error"
-              name="alert-triangle"
-            ></temba-icon>`
-            : null}
-        ${event.recipient_count > 1
-        ? html `<temba-icon size="1" name="megaphone"></temba-icon>
-              <div class="recipients">${event.recipient_count} contacts</div>
-              <div class="separator">•</div>`
-        : null}
-        <div class="time">${timeSince(new Date(event.created_on))}</div>
+        ${summary}
       </div>
     </div>
 
@@ -613,7 +660,6 @@ export const renderMsgEvent = (event, agent) => {
         </div>`
         : null}
   </div>`;
-    return msg;
 };
 export const renderFlowEvent = (event) => {
     let verb = 'Interrupted';