@nyaruka/temba-components 0.26.9 → 0.27.0

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

@@ -3,36 +3,30 @@ import { css, html } from 'lit';
 import { property } from 'lit/decorators';
 import { postJSON } from '../utils';
 import { ContactStoreElement } from './ContactStoreElement';
+const MIN_FOR_FILTER = 10;
 export class ContactFields extends ContactStoreElement {
     static get styles() {
         return css `
       :host {
-        display: flex;
-        flex-wrap: wrap;
-        flex-shrink: 1;
+        --curvature-widget: 0px;
+        border-radius: 6px;
       }
 
       .field {
         display: flex;
         margin: 0.3em 0.3em;
         box-shadow: 0 0 0.2em rgba(0, 0, 0, 0.15);
-        border-radius: var(--curvature);
+        border-radius: 0px;
         align-items: center;
         overflow: hidden;
       }
 
-      .field.set {
-        background: #fff;
-      }
-
-      .field.unset {
-        opacity: 0.4;
+      .show-all .unset {
+        display: block;
       }
 
-      .field.unset .label {
-      }
-
-      .field:hover {
+      .unset {
+        display: none;
       }
 
       .field:hover {
@@ -43,8 +37,8 @@ export class ContactFields extends ContactStoreElement {
 
       .label {
         padding: 0.25em 1em;
-        border-top-left-radius: var(--curvature);
-        border-bottom-left-radius: var(--curvature);
+        border-top-left-radius: 0px;
+        border-bottom-left-radius: 0px;
         color: #777;
         font-size: 0.9em;
         font-weight: 400;
@@ -58,15 +52,20 @@ export class ContactFields extends ContactStoreElement {
         overflow: hidden;
         text-overflow: ellipsis;
         padding: 0.25em 1em;
-        border-top-right-radius: var(--curvature);
-        border-bottom-right-radius: var(--curvature);
+        border-top-right-radius: 0px;
+        border-bottom-right-radius: 0px;
         font-size: 0.9em;
       }
 
       temba-contact-field {
-        margin: 0.3em;
-        min-width: 320px;
-        flex-grow: 1;
+      }
+
+      .footer {
+        margin-bottom: 0;
+        display: flex;
+        background: #fff;
+        align-items: center;
+        margin-top: 0.5em;
       }
     `;
     }
@@ -74,33 +73,92 @@ export class ContactFields extends ContactStoreElement {
         super.connectedCallback();
         this.handleFieldChanged = this.handleFieldChanged.bind(this);
     }
+    updated(changes) {
+        super.updated(changes);
+        if (changes.has('data')) {
+            if (Object.keys(this.data.fields).length <= MIN_FOR_FILTER) {
+                this.showAll = true;
+            }
+        }
+    }
     handleFieldChanged(evt) {
         const field = evt.currentTarget;
-        this.data.fields[field.key] = field.value;
+        const value = field.value;
+        this.data.fields[field.key] = value;
         postJSON('/api/v2/contacts.json?uuid=' + this.data.uuid, {
-            fields: { [field.key]: field.value },
-        }).then(() => {
-            this.refresh();
+            fields: { [field.key]: value },
+        }).then((response) => {
+            this.updateStoreContact(response.json);
         });
     }
+    handleToggle(evt) {
+        const checkbox = evt.currentTarget;
+        this.showAll = checkbox.checked;
+    }
     render() {
-        const pinned = this.store.getPinnedFields();
-        const fields = pinned.map((field) => {
-            if (this.data) {
-                const value = this.data.fields[field.key];
+        if (this.data) {
+            const fieldsToShow = Object.entries(this.data.fields)
+                .filter((entry) => {
+                return ((this.pinned && this.store.getContactField(entry[0]).pinned) ||
+                    (!this.pinned && !this.store.getContactField(entry[0]).pinned));
+            })
+                .sort((a, b) => {
+                const [ak] = a;
+                const [bk] = b;
+                const priority = this.store.getContactField(bk).priority -
+                    this.store.getContactField(ak).priority;
+                if (priority !== 0) {
+                    return priority;
+                }
+                return ak.localeCompare(bk);
+            });
+            if (fieldsToShow.length == 0) {
+                return html `<slot name="empty"></slot>`;
+            }
+            const fields = fieldsToShow.map((entry) => {
+                const [k, v] = entry;
+                const field = this.store.getContactField(k);
                 return html `<temba-contact-field
+          class=${v ? 'set' : 'unset'}
           key=${field.key}
           name=${field.label}
-          value=${value}
+          value=${v}
           type=${field.value_type}
           @change=${this.handleFieldChanged}
         ></temba-contact-field>`;
-            }
-        });
-        return html `${this.data ? html ` ${fields} ` : null}`;
+            });
+            return html `
+        <div class="${this.showAll || this.pinned ? 'show-all' : ''}">
+          ${fields}
+        </div>
+
+        ${!this.pinned && Object.keys(this.data.fields).length >= MIN_FOR_FILTER
+                ? html `<div class="footer">
+              <div style="flex-grow: 1"></div>
+              <div>
+                <temba-checkbox
+                  ?checked=${this.showAll}
+                  @change=${this.handleToggle}
+                  label="Show All"
+                />
+              </div>
+            </div>`
+                : null}
+      `;
+        }
+        return null;
     }
 }
+__decorate([
+    property({ type: Boolean })
+], ContactFields.prototype, "pinned", void 0);
+__decorate([
+    property({ type: Boolean })
+], ContactFields.prototype, "system", void 0);
 __decorate([
     property({ type: Boolean })
 ], ContactFields.prototype, "dirty", void 0);
+__decorate([
+    property({ type: Boolean })
+], ContactFields.prototype, "showAll", void 0);
 //# sourceMappingURL=ContactFields.js.map

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

@@ -1 +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"]}
+{"version":3,"file":"ContactFields.js","sourceRoot":"","sources":["../../../src/contacts/ContactFields.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators';\nimport { postJSON } from '../utils';\nimport { ContactFieldEditor } from './ContactFieldEditor';\nimport { ContactStoreElement } from './ContactStoreElement';\nimport { Checkbox } from '../checkbox/Checkbox';\n\nconst MIN_FOR_FILTER = 10;\n\nexport class ContactFields extends ContactStoreElement {\n  static get styles() {\n    return css`\n      :host {\n        --curvature-widget: 0px;\n        border-radius: 6px;\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: 0px;\n        align-items: center;\n        overflow: hidden;\n      }\n\n      .show-all .unset {\n        display: block;\n      }\n\n      .unset {\n        display: none;\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: 0px;\n        border-bottom-left-radius: 0px;\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: 0px;\n        border-bottom-right-radius: 0px;\n        font-size: 0.9em;\n      }\n\n      temba-contact-field {\n      }\n\n      .footer {\n        margin-bottom: 0;\n        display: flex;\n        background: #fff;\n        align-items: center;\n        margin-top: 0.5em;\n      }\n    `;\n  }\n\n  @property({ type: Boolean })\n  pinned: boolean;\n\n  @property({ type: Boolean })\n  system: boolean;\n\n  @property({ type: Boolean })\n  dirty: boolean;\n\n  @property({ type: Boolean })\n  showAll: boolean;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.handleFieldChanged = this.handleFieldChanged.bind(this);\n  }\n\n  protected updated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.updated(changes);\n    if (changes.has('data')) {\n      if (Object.keys(this.data.fields).length <= MIN_FOR_FILTER) {\n        this.showAll = true;\n      }\n    }\n  }\n\n  public handleFieldChanged(evt: InputEvent) {\n    const field = evt.currentTarget as ContactFieldEditor;\n    const value = field.value;\n    this.data.fields[field.key] = value;\n    postJSON('/api/v2/contacts.json?uuid=' + this.data.uuid, {\n      fields: { [field.key]: value },\n    }).then((response: any) => {\n      this.updateStoreContact(response.json);\n    });\n  }\n\n  public handleToggle(evt: Event) {\n    const checkbox = evt.currentTarget as Checkbox;\n    this.showAll = checkbox.checked;\n  }\n\n  public render(): TemplateResult {\n    if (this.data) {\n      const fieldsToShow = Object.entries(this.data.fields)\n        .filter((entry: [string, string]) => {\n          return (\n            (this.pinned && this.store.getContactField(entry[0]).pinned) ||\n            (!this.pinned && !this.store.getContactField(entry[0]).pinned)\n          );\n        })\n        .sort((a: [string, string], b: [string, string]) => {\n          const [ak] = a;\n          const [bk] = b;\n          const priority =\n            this.store.getContactField(bk).priority -\n            this.store.getContactField(ak).priority;\n          if (priority !== 0) {\n            return priority;\n          }\n\n          return ak.localeCompare(bk);\n        });\n\n      if (fieldsToShow.length == 0) {\n        return html`<slot name=\"empty\"></slot>`;\n      }\n\n      const fields = fieldsToShow.map((entry: [string, string]) => {\n        const [k, v] = entry;\n        const field = this.store.getContactField(k);\n        return html`<temba-contact-field\n          class=${v ? 'set' : 'unset'}\n          key=${field.key}\n          name=${field.label}\n          value=${v}\n          type=${field.value_type}\n          @change=${this.handleFieldChanged}\n        ></temba-contact-field>`;\n      });\n\n      return html`\n        <div class=\"${this.showAll || this.pinned ? 'show-all' : ''}\">\n          ${fields}\n        </div>\n\n        ${!this.pinned && Object.keys(this.data.fields).length >= MIN_FOR_FILTER\n          ? html`<div class=\"footer\">\n              <div style=\"flex-grow: 1\"></div>\n              <div>\n                <temba-checkbox\n                  ?checked=${this.showAll}\n                  @change=${this.handleToggle}\n                  label=\"Show All\"\n                />\n              </div>\n            </div>`\n          : null}\n      `;\n    }\n\n    return null;\n  }\n}\n"]}

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

@@ -0,0 +1,238 @@
+import { __decorate } from "tslib";
+import { css, html } from 'lit';
+import { property } from 'lit/decorators';
+import { ScheduledEventType } from '../interfaces';
+import { StoreElement } from '../store/StoreElement';
+const ICONS = {
+    [ScheduledEventType.CampaignEvent]: 'campaign',
+    [ScheduledEventType.ScheduledBroadcast]: 'message-square',
+    [ScheduledEventType.ScheduledTrigger]: 'radio',
+};
+export class ContactPending extends StoreElement {
+    constructor() {
+        super(...arguments);
+        this.lang_weekly = 'Weekly';
+        this.lang_daily = 'Daily';
+        this.lang_once = 'Once';
+        this.REPEAT_PERIOD = {
+            O: this.lang_once,
+            D: this.lang_daily,
+            W: this.lang_weekly,
+        };
+    }
+    static get styles() {
+        return css `
+      :host {
+        --text-color: rgba(50, 50, 50, 0.65);
+      }
+
+      a,
+      .linked {
+        color: var(--color-link-primary);
+        cursor: pointer;
+      }
+
+      a:hover,
+      .linked:hover {
+        text-decoration: underline;
+        color: var(--color-link-primary-hover);
+      }
+
+      .type {
+        background: rgba(0, 0, 0, 0.02);
+        padding: 1em;
+        display: flex;
+        align-self: stretch;
+        --icon-color: rgba(50, 50, 50, 0.25);
+        border-top-left-radius: var(--curvature);
+        border-bottom-left-radius: var(--curvature);
+      }
+
+      .details {
+        display: flex;
+        flex-direction: column;
+        padding: 0.5em 1em;
+        flex-grow: 1;
+      }
+
+      .campaign {
+        display: flex;
+        color: var(--text-color);
+        --icon-color: var(--text-color);
+        align-self: center;
+        white-space: nowrap;
+      }
+
+      .message {
+        // font-style: italic;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        padding: 0.1em;
+      }
+
+      .event {
+        margin-bottom: 0.5em;
+        // background: rgba(0,0,0,.02);
+        border-radius: var(--curvature);
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.055),
+          0 0 0px 1px rgba(0, 0, 0, 0.02);
+      }
+
+      .time {
+        white-space: nowrap;
+        background: rgba(0, 0, 0, 0.02);
+        border-top-right-radius: var(--curvature);
+        border-bottom-right-radius: var(--curvature);
+        display: flex;
+        align-self: stretch;
+        padding: 0 1em;
+        min-width: 5em;
+      }
+
+      .duration {
+        align-self: center;
+        flex-grow: 1;
+        text-align: center;
+      }
+
+      .flow {
+        display: inline-block;
+      }
+
+      temba-tip {
+        cursor: default;
+      }
+
+      .scheduled-by {
+        font-size: 0.85em;
+        display: flex;
+        color: var(--text-color);
+        --icon-color: var(--text-color);
+      }
+
+      .scheduled-by temba-icon {
+        margin-right: 0.25em;
+      }
+
+      .campaign_event .scheduled-by:hover {
+        color: var(--color-link-primary);
+        --icon-color: var(--color-link-primary);
+        cursor: pointer;
+      }
+
+      .scheduled-by .name {
+        flex-grow: 1;
+      }
+    `;
+    }
+    updated(changes) {
+        super.updated(changes);
+        if (changes.has('contact')) {
+            if (this.contact) {
+                this.url = `/contact/scheduled/${this.contact}/`;
+            }
+            else {
+                this.url = null;
+            }
+        }
+    }
+    renderEvent(event) {
+        return html `
+      <div class="event ${event.type}">
+        <div class="type">
+          <temba-icon
+            size="2"
+            name="${event.message ? 'message-square' : 'flow'}"
+          ></temba-icon>
+        </div>
+
+        <div class="details">
+          <div>
+            ${event.flow
+            ? html `
+                  <div
+                    class="flow linked"
+                    href="/flow/editor/${event.flow.uuid}/"
+                    onclick="goto(event)"
+                  >
+                    ${event.flow.name}
+                  </div>
+                `
+            : null}
+            ${event.message
+            ? html ` <div class="message">${event.message}</div> `
+            : null}
+          </div>
+
+          <div class="scheduled-by">
+            ${event.campaign
+            ? html `<div
+                  style="display:flex"
+                  href="/campaign/read/${event.campaign.uuid}/"
+                  onclick="goto(event, this)"
+                >
+                  <temba-icon name="campaign"></temba-icon>
+                  <div class="name">${event.campaign.name}</div>
+                </div>`
+            : html `
+                  ${event.type === ScheduledEventType.ScheduledTrigger
+                ? html `<temba-icon
+                        name="${ICONS[event.type]}"
+                      ></temba-icon>`
+                : null}
+                  <div class="name">
+                    ${this.REPEAT_PERIOD[event.repeat_period]}
+                  </div>
+                `}
+          </div>
+        </div>
+
+        <div class="time">
+          <div class="duration">
+            <temba-tip
+              text=${this.store.formatDate(event.scheduled)}
+              position="left"
+            >
+              ${this.store.getShortDuration(event.scheduled)}
+            </temba-tip>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    render() {
+        if (this.data) {
+            if (this.data.length > 0) {
+                return html `
+          ${this.data.map(event => {
+                    return this.renderEvent(event);
+                })}
+        `;
+            }
+            else {
+                return html `<slot name="empty"></slot>`;
+            }
+        }
+    }
+}
+__decorate([
+    property({ type: String })
+], ContactPending.prototype, "contact", void 0);
+__decorate([
+    property({ type: Object, attribute: false })
+], ContactPending.prototype, "data", void 0);
+__decorate([
+    property({ type: String })
+], ContactPending.prototype, "lang_weekly", void 0);
+__decorate([
+    property({ type: String })
+], ContactPending.prototype, "lang_daily", void 0);
+__decorate([
+    property({ type: String })
+], ContactPending.prototype, "lang_once", void 0);
+//# sourceMappingURL=ContactPending.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContactPending.js","sourceRoot":"","sources":["../../../src/contacts/ContactPending.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators';\nimport { ScheduledEvent, ScheduledEventType } from '../interfaces';\nimport { StoreElement } from '../store/StoreElement';\n\nconst ICONS = {\n  [ScheduledEventType.CampaignEvent]: 'campaign',\n  [ScheduledEventType.ScheduledBroadcast]: 'message-square',\n  [ScheduledEventType.ScheduledTrigger]: 'radio',\n};\n\nexport class ContactPending extends StoreElement {\n  @property({ type: String })\n  contact: string;\n\n  @property({ type: Object, attribute: false })\n  data: ScheduledEvent[];\n\n  @property({ type: String })\n  lang_weekly = 'Weekly';\n\n  @property({ type: String })\n  lang_daily = 'Daily';\n\n  @property({ type: String })\n  lang_once = 'Once';\n\n  REPEAT_PERIOD = {\n    O: this.lang_once,\n    D: this.lang_daily,\n    W: this.lang_weekly,\n  };\n\n  static get styles() {\n    return css`\n      :host {\n        --text-color: rgba(50, 50, 50, 0.65);\n      }\n\n      a,\n      .linked {\n        color: var(--color-link-primary);\n        cursor: pointer;\n      }\n\n      a:hover,\n      .linked:hover {\n        text-decoration: underline;\n        color: var(--color-link-primary-hover);\n      }\n\n      .type {\n        background: rgba(0, 0, 0, 0.02);\n        padding: 1em;\n        display: flex;\n        align-self: stretch;\n        --icon-color: rgba(50, 50, 50, 0.25);\n        border-top-left-radius: var(--curvature);\n        border-bottom-left-radius: var(--curvature);\n      }\n\n      .details {\n        display: flex;\n        flex-direction: column;\n        padding: 0.5em 1em;\n        flex-grow: 1;\n      }\n\n      .campaign {\n        display: flex;\n        color: var(--text-color);\n        --icon-color: var(--text-color);\n        align-self: center;\n        white-space: nowrap;\n      }\n\n      .message {\n        // font-style: italic;\n        display: -webkit-box;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        padding: 0.1em;\n      }\n\n      .event {\n        margin-bottom: 0.5em;\n        // background: rgba(0,0,0,.02);\n        border-radius: var(--curvature);\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.055),\n          0 0 0px 1px rgba(0, 0, 0, 0.02);\n      }\n\n      .time {\n        white-space: nowrap;\n        background: rgba(0, 0, 0, 0.02);\n        border-top-right-radius: var(--curvature);\n        border-bottom-right-radius: var(--curvature);\n        display: flex;\n        align-self: stretch;\n        padding: 0 1em;\n        min-width: 5em;\n      }\n\n      .duration {\n        align-self: center;\n        flex-grow: 1;\n        text-align: center;\n      }\n\n      .flow {\n        display: inline-block;\n      }\n\n      temba-tip {\n        cursor: default;\n      }\n\n      .scheduled-by {\n        font-size: 0.85em;\n        display: flex;\n        color: var(--text-color);\n        --icon-color: var(--text-color);\n      }\n\n      .scheduled-by temba-icon {\n        margin-right: 0.25em;\n      }\n\n      .campaign_event .scheduled-by:hover {\n        color: var(--color-link-primary);\n        --icon-color: var(--color-link-primary);\n        cursor: pointer;\n      }\n\n      .scheduled-by .name {\n        flex-grow: 1;\n      }\n    `;\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 = `/contact/scheduled/${this.contact}/`;\n      } else {\n        this.url = null;\n      }\n    }\n  }\n\n  public renderEvent(event: ScheduledEvent) {\n    return html`\n      <div class=\"event ${event.type}\">\n        <div class=\"type\">\n          <temba-icon\n            size=\"2\"\n            name=\"${event.message ? 'message-square' : 'flow'}\"\n          ></temba-icon>\n        </div>\n\n        <div class=\"details\">\n          <div>\n            ${event.flow\n              ? html`\n                  <div\n                    class=\"flow linked\"\n                    href=\"/flow/editor/${event.flow.uuid}/\"\n                    onclick=\"goto(event)\"\n                  >\n                    ${event.flow.name}\n                  </div>\n                `\n              : null}\n            ${event.message\n              ? html` <div class=\"message\">${event.message}</div> `\n              : null}\n          </div>\n\n          <div class=\"scheduled-by\">\n            ${event.campaign\n              ? html`<div\n                  style=\"display:flex\"\n                  href=\"/campaign/read/${event.campaign.uuid}/\"\n                  onclick=\"goto(event, this)\"\n                >\n                  <temba-icon name=\"campaign\"></temba-icon>\n                  <div class=\"name\">${event.campaign.name}</div>\n                </div>`\n              : html`\n                  ${event.type === ScheduledEventType.ScheduledTrigger\n                    ? html`<temba-icon\n                        name=\"${ICONS[event.type]}\"\n                      ></temba-icon>`\n                    : null}\n                  <div class=\"name\">\n                    ${this.REPEAT_PERIOD[event.repeat_period]}\n                  </div>\n                `}\n          </div>\n        </div>\n\n        <div class=\"time\">\n          <div class=\"duration\">\n            <temba-tip\n              text=${this.store.formatDate(event.scheduled)}\n              position=\"left\"\n            >\n              ${this.store.getShortDuration(event.scheduled)}\n            </temba-tip>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  public render(): TemplateResult {\n    if (this.data) {\n      if (this.data.length > 0) {\n        return html`\n          ${this.data.map(event => {\n            return this.renderEvent(event);\n          })}\n        `;\n      } else {\n        return html`<slot name=\"empty\"></slot>`;\n      }\n    }\n  }\n}\n"]}

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

@@ -23,6 +23,9 @@ export class ContactStoreElement extends StoreElement {
         }
         return null;
     }
+    updateStoreContact(value) {
+        this.store.updateCache(`/api/v2/contacts.json?uuid=${this.contact}`, value);
+    }
     updated(changes) {
         super.updated(changes);
         if (changes.has('contact')) {

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

@@ -1 +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"]}
+{"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;IAEM,kBAAkB,CAAC,KAAU;QAClC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,8BAA8B,IAAI,CAAC,OAAO,EAAE,EAAE,KAAK,CAAC,CAAC;IAC9E,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;AA/CC;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  public updateStoreContact(value: any) {\n    this.store.updateCache(`/api/v2/contacts.json?uuid=${this.contact}`, value);\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/events.js

@@ -550,7 +550,7 @@ export const renderAttachment = (attachment) => {
       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"
+      controls
     >
       <source src="${url}" type="video/mp4" />
     </video> `;