@nyaruka/temba-components 0.86.1 → 0.88.0

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

@@ -1 +1 @@
-{"version":3,"file":"ContactChat.js","sourceRoot":"","sources":["../../../src/contacts/ContactChat.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Contact, CustomEventType, Ticket } from '../interfaces';\nimport { postJSON } from '../utils';\nimport { ContactHistory } from './ContactHistory';\nimport { ContactStoreElement } from './ContactStoreElement';\nimport { Compose } from '../compose/Compose';\n\nconst DEFAULT_REFRESH = 10000;\n\nexport class ContactChat extends ContactStoreElement {\n  public static get styles() {\n    return css`\n      :host {\n        flex-grow: 1;\n        display: flex;\n        flex-direction: row;\n        min-height: 0;\n        --compose-shadow: none;\n        --compose-border: none;\n        --compose-padding: 3px;\n        --compose-curvature: none;\n      }\n\n      .chat-wrapper {\n        display: flex;\n        flex-grow: 1;\n        flex-direction: column;\n        min-height: 0;\n      }\n\n      temba-contact-history {\n        border-bottom: 1px solid #f6f6f6;\n        flex-grow: 1;\n        display: flex;\n        flex-direction: column;\n        min-height: 0;\n      }\n\n      .chatbox {\n        box-shadow: 0px -5px 1rem 0rem rgba(0, 0, 0, 0.07);\n        display: flex;\n        flex-direction: column;\n        --textarea-min-height: 1em;\n        --textarea-height: 1.2em;\n        --widget-box-shadow-focused: none;\n      }\n\n      .chatbox:focus-within {\n        --textarea-height: 4em;\n      }\n\n      .chatbox.full {\n        border-bottom-right-radius: 0 !important;\n      }\n\n      .closed-footer {\n        padding: 1em;\n        background: #f2f2f2;\n        border-top: 3px solid #e1e1e1;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n      }\n\n      a {\n        color: var(--color-link-primary);\n      }\n\n      a:hover {\n        text-decoration: underline;\n        color: var(--color-link-primary-hover);\n      }\n\n      temba-button#reopen-button {\n        --button-y: 1px;\n        --button-x: 12px;\n      }\n\n      temba-completion {\n        --widget-box-shadow: none;\n        --color-widget-border: transparent;\n        --widget-box-shadow-focused: none;\n        --color-focus: transparent;\n        --color-widget-bg-focused: transparent;\n      }\n    `;\n  }\n\n  @property({ type: String, attribute: 'ticket' })\n  ticketUUID: string;\n\n  @property({ type: String })\n  contactsEndpoint = '/api/v2/contacts.json';\n\n  @property({ type: String })\n  currentNote = '';\n\n  @property({ type: Boolean })\n  showDetails = true;\n\n  @property({ type: Boolean })\n  monitor = false;\n\n  @property({ type: Object })\n  currentTicket: Ticket = null;\n\n  @property({ type: Object })\n  currentContact: Contact = null;\n\n  @property({ type: String })\n  agent = '';\n\n  // http promise to monitor for completeness\n  public httpComplete: Promise<void>;\n\n  constructor() {\n    super();\n  }\n\n  refreshInterval = null;\n\n  public connectedCallback() {\n    super.connectedCallback();\n    if (this.monitor) {\n      this.refreshInterval = setInterval(() => {\n        if (this.currentTicket && this.currentTicket.closed_on) {\n          return;\n        }\n        this.refresh();\n      }, DEFAULT_REFRESH);\n    }\n  }\n\n  public disconnectedCallback() {\n    if (this.refreshInterval) {\n      clearInterval(this.refreshInterval);\n    }\n  }\n\n  public getContactHistory(): ContactHistory {\n    return this.shadowRoot.querySelector(\n      'temba-contact-history'\n    ) as ContactHistory;\n  }\n\n  public refresh(scrollToBottom = false): void {\n    const contactHistory = this.getContactHistory();\n    if (contactHistory) {\n      if (scrollToBottom) {\n        contactHistory.scrollToBottom();\n      }\n      contactHistory.refresh();\n      // super.refresh();\n    }\n  }\n\n  public updated(changedProperties: Map<string, any>) {\n    super.updated(changedProperties);\n\n    // if we don't have an endpoint infer one\n    if (\n      changedProperties.has('data') ||\n      changedProperties.has('currentContact')\n    ) {\n      this.currentContact = this.data;\n    }\n  }\n\n  private handleSend(evt: CustomEvent) {\n    const buttonName = evt.detail.name;\n    if (buttonName === 'Send') {\n      const payload = {\n        contact: this.currentContact.uuid,\n      };\n      const compose = evt.currentTarget as Compose;\n      if (compose) {\n        const text = compose.currentText;\n        if (text && text.length > 0) {\n          payload['text'] = text;\n        }\n        const attachments = compose.currentAttachments;\n        if (attachments && attachments.length > 0) {\n          const attachment_uuids = attachments.map(\n            attachment => attachment.uuid\n          );\n          payload['attachments'] = attachment_uuids;\n        }\n      }\n      if (this.currentTicket) {\n        payload['ticket'] = this.currentTicket.uuid;\n      }\n\n      const genericError = buttonName + ' failed, please try again.';\n\n      postJSON(`/api/v2/messages.json`, payload)\n        .then(response => {\n          if (response.status < 400) {\n            compose.reset();\n            this.refresh(true);\n            this.fireCustomEvent(CustomEventType.MessageSent, { msg: payload });\n          } else if (response.status < 500) {\n            if (\n              response.json.text &&\n              response.json.text.length > 0 &&\n              response.json.text[0].length > 0\n            ) {\n              let textError = response.json.text[0];\n              textError = textError.replace(\n                'Ensure this field has no more than',\n                'Maximum allowed text is'\n              );\n              compose.buttonError = textError;\n            } else if (\n              response.json.attachments &&\n              response.json.attachments.length > 0 &&\n              response.json.attachments[0].length > 0\n            ) {\n              let attachmentError = response.json.attachments[0];\n              attachmentError = attachmentError\n                .replace(\n                  'Ensure this field has no more than',\n                  'Maximum allowed attachments is'\n                )\n                .replace('elements', 'files');\n              compose.buttonError = attachmentError;\n            } else {\n              compose.buttonError = genericError;\n            }\n          } else {\n            compose.buttonError = genericError;\n          }\n        })\n        .catch(error => {\n          console.error(error);\n          compose.buttonError = genericError;\n        });\n    }\n  }\n\n  public render(): TemplateResult {\n    const contactHistory = this.currentContact\n      ? this.getTembaContactHistory()\n      : null;\n    const chatbox = this.currentContact ? this.getTembaChatbox() : null;\n\n    const contactHistoryAndChatbox = html`\n      <div class=\"chat-wrapper\">${contactHistory} ${chatbox}</div>\n    `;\n    return html`${contactHistoryAndChatbox}`;\n  }\n\n  private getTembaContactHistory(): TemplateResult {\n    return html` <temba-contact-history\n      .uuid=${this.currentContact.uuid}\n      .contact=${this.currentContact}\n      .ticket=${this.currentTicket ? this.currentTicket.uuid : null}\n      .endDate=${this.currentTicket ? this.currentTicket.closed_on : null}\n      .agent=${this.agent}\n    >\n    </temba-contact-history>`;\n  }\n\n  private getTembaChatbox(): TemplateResult {\n    if (this.currentTicket) {\n      if (this.currentContact && this.currentContact.status !== 'active') {\n        //no chatbox for archived, blocked, or stopped contacts\n        return null;\n      } else {\n        if (!this.currentTicket.closed_on) {\n          //chatbox for active contacts with an open ticket\n          return this.getChatbox();\n        } else {\n          return null;\n        }\n      }\n    }\n\n    if (this.currentContact && this.currentContact.status !== 'active') {\n      //no chatbox for archived, blocked, or stopped contacts\n      return null;\n    } else {\n      //chatbox for active contacts\n      return this.getChatbox();\n    }\n  }\n\n  private getChatbox(): TemplateResult {\n    return html`<div class=\"chatbox\">\n      <temba-compose\n        chatbox\n        attachments\n        counter\n        button\n        @temba-button-clicked=${this.handleSend.bind(this)}\n      >\n      </temba-compose>\n    </div>`;\n  }\n}\n"]}
+{"version":3,"file":"ContactChat.js","sourceRoot":"","sources":["../../../src/contacts/ContactChat.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Contact, CustomEventType, Ticket } from '../interfaces';\nimport { postJSON } from '../utils';\nimport { ContactHistory } from './ContactHistory';\nimport { ContactStoreElement } from './ContactStoreElement';\nimport { Compose } from '../compose/Compose';\n\nconst DEFAULT_REFRESH = 10000;\n\nexport class ContactChat extends ContactStoreElement {\n  public static get styles() {\n    return css`\n      :host {\n        flex-grow: 1;\n        display: flex;\n        flex-direction: row;\n        min-height: 0;\n        --compose-shadow: none;\n        --compose-border: none;\n        --compose-padding: 3px;\n        --compose-curvature: none;\n      }\n\n      .chat-wrapper {\n        display: flex;\n        flex-grow: 1;\n        flex-direction: column;\n        min-height: 0;\n      }\n\n      temba-contact-history {\n        border-bottom: 1px solid #f6f6f6;\n        flex-grow: 1;\n        display: flex;\n        flex-direction: column;\n        min-height: 0;\n      }\n\n      .chatbox {\n        box-shadow: 0px -5px 1rem 0rem rgba(0, 0, 0, 0.07);\n        display: flex;\n        flex-direction: column;\n        --textarea-min-height: 1em;\n        --textarea-height: 1.2em;\n        --widget-box-shadow-focused: none;\n      }\n\n      .chatbox:focus-within {\n        --textarea-height: 4em;\n      }\n\n      .chatbox.full {\n        border-bottom-right-radius: 0 !important;\n      }\n\n      .closed-footer {\n        padding: 1em;\n        background: #f2f2f2;\n        border-top: 3px solid #e1e1e1;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n      }\n\n      a {\n        color: var(--color-link-primary);\n      }\n\n      a:hover {\n        text-decoration: underline;\n        color: var(--color-link-primary-hover);\n      }\n\n      temba-button#reopen-button {\n        --button-y: 1px;\n        --button-x: 12px;\n      }\n\n      temba-completion {\n        --widget-box-shadow: none;\n        --color-widget-border: transparent;\n        --widget-box-shadow-focused: none;\n        --color-focus: transparent;\n        --color-widget-bg-focused: transparent;\n      }\n    `;\n  }\n\n  @property({ type: String, attribute: 'ticket' })\n  ticketUUID: string;\n\n  @property({ type: String })\n  contactsEndpoint = '/api/v2/contacts.json';\n\n  @property({ type: String })\n  currentNote = '';\n\n  @property({ type: Boolean })\n  showDetails = true;\n\n  @property({ type: Boolean })\n  monitor = false;\n\n  @property({ type: Object })\n  currentTicket: Ticket = null;\n\n  @property({ type: Object })\n  currentContact: Contact = null;\n\n  @property({ type: String })\n  agent = '';\n\n  // http promise to monitor for completeness\n  public httpComplete: Promise<void>;\n\n  constructor() {\n    super();\n  }\n\n  refreshInterval = null;\n\n  public connectedCallback() {\n    super.connectedCallback();\n    if (this.monitor) {\n      this.refreshInterval = setInterval(() => {\n        if (this.currentTicket && this.currentTicket.closed_on) {\n          return;\n        }\n        this.refresh();\n      }, DEFAULT_REFRESH);\n    }\n  }\n\n  public disconnectedCallback() {\n    if (this.refreshInterval) {\n      clearInterval(this.refreshInterval);\n    }\n  }\n\n  public getContactHistory(): ContactHistory {\n    return this.shadowRoot.querySelector(\n      'temba-contact-history'\n    ) as ContactHistory;\n  }\n\n  public refresh(scrollToBottom = false): void {\n    const contactHistory = this.getContactHistory();\n    if (contactHistory) {\n      if (scrollToBottom) {\n        contactHistory.scrollToBottom();\n      }\n      contactHistory.refresh();\n      // super.refresh();\n    }\n  }\n\n  public updated(changedProperties: Map<string, any>) {\n    super.updated(changedProperties);\n\n    // if we don't have an endpoint infer one\n    if (\n      changedProperties.has('data') ||\n      changedProperties.has('currentContact')\n    ) {\n      this.currentContact = this.data;\n    }\n  }\n\n  private handleSend(evt: CustomEvent) {\n    const buttonName = evt.detail.name;\n    if (buttonName === 'Send') {\n      const payload = {\n        contact: this.currentContact.uuid\n      };\n      const compose = evt.currentTarget as Compose;\n      if (compose) {\n        const text = compose.currentText;\n        if (text && text.length > 0) {\n          payload['text'] = text;\n        }\n        const attachments = compose.currentAttachments;\n        if (attachments && attachments.length > 0) {\n          const attachment_uuids = attachments.map(\n            (attachment) => attachment.uuid\n          );\n          payload['attachments'] = attachment_uuids;\n        }\n      }\n      if (this.currentTicket) {\n        payload['ticket'] = this.currentTicket.uuid;\n      }\n\n      const genericError = buttonName + ' failed, please try again.';\n\n      postJSON(`/api/v2/messages.json`, payload)\n        .then((response) => {\n          if (response.status < 400) {\n            compose.reset();\n            this.refresh(true);\n            this.fireCustomEvent(CustomEventType.MessageSent, { msg: payload });\n          } else if (response.status < 500) {\n            if (\n              response.json.text &&\n              response.json.text.length > 0 &&\n              response.json.text[0].length > 0\n            ) {\n              let textError = response.json.text[0];\n              textError = textError.replace(\n                'Ensure this field has no more than',\n                'Maximum allowed text is'\n              );\n              compose.buttonError = textError;\n            } else if (\n              response.json.attachments &&\n              response.json.attachments.length > 0 &&\n              response.json.attachments[0].length > 0\n            ) {\n              let attachmentError = response.json.attachments[0];\n              attachmentError = attachmentError\n                .replace(\n                  'Ensure this field has no more than',\n                  'Maximum allowed attachments is'\n                )\n                .replace('elements', 'files');\n              compose.buttonError = attachmentError;\n            } else {\n              compose.buttonError = genericError;\n            }\n          } else {\n            compose.buttonError = genericError;\n          }\n        })\n        .catch((error) => {\n          console.error(error);\n          compose.buttonError = genericError;\n        });\n    }\n  }\n\n  public render(): TemplateResult {\n    const contactHistory = this.currentContact\n      ? this.getTembaContactHistory()\n      : null;\n    const chatbox = this.currentContact ? this.getTembaChatbox() : null;\n\n    const contactHistoryAndChatbox = html`\n      <div class=\"chat-wrapper\">${contactHistory} ${chatbox}</div>\n    `;\n    return html`${contactHistoryAndChatbox}`;\n  }\n\n  private getTembaContactHistory(): TemplateResult {\n    return html` <temba-contact-history\n      .uuid=${this.currentContact.uuid}\n      .contact=${this.currentContact}\n      .ticket=${this.currentTicket ? this.currentTicket.uuid : null}\n      .endDate=${this.currentTicket ? this.currentTicket.closed_on : null}\n      .agent=${this.agent}\n    >\n    </temba-contact-history>`;\n  }\n\n  private getTembaChatbox(): TemplateResult {\n    if (this.currentTicket) {\n      if (this.currentContact && this.currentContact.status !== 'active') {\n        //no chatbox for archived, blocked, or stopped contacts\n        return null;\n      } else {\n        if (!this.currentTicket.closed_on) {\n          //chatbox for active contacts with an open ticket\n          return this.getChatbox();\n        } else {\n          return null;\n        }\n      }\n    }\n\n    if (this.currentContact && this.currentContact.status !== 'active') {\n      //no chatbox for archived, blocked, or stopped contacts\n      return null;\n    } else {\n      //chatbox for active contacts\n      return this.getChatbox();\n    }\n  }\n\n  private getChatbox(): TemplateResult {\n    return html`<div class=\"chatbox\">\n      <temba-compose\n        chatbox\n        attachments\n        counter\n        button\n        @temba-button-clicked=${this.handleSend.bind(this)}\n      >\n      </temba-compose>\n    </div>`;\n  }\n}\n"]}

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

@@ -6,13 +6,13 @@ const STATUS = {
     active: 'Active',
     blocked: 'Blocked',
     stopped: 'Stopped',
-    archived: 'Archived',
+    archived: 'Archived'
 };
 const SCHEMES = {
     tel: 'Phone',
     whatsapp: 'WhatsApp',
     fcm: 'Firebase Cloud Messaging',
-    twitter: 'Twitter',
+    twitter: 'Twitter'
 };
 export class ContactDetails extends ContactStoreElement {
     static get styles() {
@@ -62,7 +62,7 @@ export class ContactDetails extends ContactStoreElement {
         ${this.data.groups.length > 0
             ? html ` <div class="groups">
               <div class="label">Groups</div>
-              ${this.data.groups.map(group => {
+              ${this.data.groups.map((group) => {
                 return html `<temba-label
                   class="group"
                   onclick="goto(event)"
@@ -75,7 +75,7 @@ export class ContactDetails extends ContactStoreElement {
             })}
             </div>`
             : null}
-        ${this.data.urns.map(urn => {
+        ${this.data.urns.map((urn) => {
             const parts = urn.split(':');
             let scheme = SCHEMES[parts[0]];
             if (!scheme) {

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

@@ -1 +1 @@
-{"version":3,"file":"ContactDetails.js","sourceRoot":"","sources":["../../../src/contacts/ContactDetails.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,MAAM,MAAM,GAAG;IACb,MAAM,EAAE,QAAQ;IAChB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,QAAQ,EAAE,UAAU;CACrB,CAAC;AAEF,MAAM,OAAO,GAAG;IACd,GAAG,EAAE,OAAO;IACZ,QAAQ,EAAE,UAAU;IACpB,GAAG,EAAE,0BAA0B;IAC/B,OAAO,EAAE,SAAS;CACnB,CAAC;AAEF,MAAM,OAAO,cAAe,SAAQ,mBAAmB;IACrD,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgCT,CAAC;IACJ,CAAC;IAED,oFAAoF;IACpF,0HAA0H;IAEnH,MAAM;QACX,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACf,OAAO;QACT,CAAC;QAED,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAE5D,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC;YAC3B,CAAC,CAAC,IAAI,CAAA;;gBAEA,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;gBAC7B,OAAO,IAAI,CAAA;;;0CAGe,KAAK,CAAC,IAAI;yBAC3B,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK;;;oBAGrD,KAAK,CAAC,IAAI;+BACC,CAAC;YAClB,CAAC,CAAC;mBACG;YACT,CAAC,CAAC,IAAI;UACN,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;YACzB,MAAM,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;YAC7B,IAAI,MAAM,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;YAC/B,IAAI,CAAC,MAAM,EAAE,CAAC;gBACZ,MAAM,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC,CAAQ,CAAC,CAAC;YACvC,CAAC;YACD,OAAO,IAAI,CAAA;mBACF,MAAM;oBACL,KAAK,CAAC,CAAC,CAAC;;kCAEM,CAAC;QAC3B,CAAC,CAAC;;;;kBAIQ,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;;;UAGhC,IAAI;YACJ,CAAC,CAAC,IAAI,CAAA;;sBAEM,IAAI;;oCAEU;YAC1B,CAAC,CAAC,IAAI;;;;kBAIE,IAAI,CAAC,IAAI,CAAC,UAAU;;;;;;kBAMpB,IAAI,CAAC,IAAI,CAAC,YAAY;;;;;KAKnC,CAAC;IACJ,CAAC;CACF","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { ContactStoreElement } from './ContactStoreElement';\nimport { Icon } from '../vectoricon';\nimport { capitalize } from '../utils';\n\nconst STATUS = {\n  active: 'Active',\n  blocked: 'Blocked',\n  stopped: 'Stopped',\n  archived: 'Archived',\n};\n\nconst SCHEMES = {\n  tel: 'Phone',\n  whatsapp: 'WhatsApp',\n  fcm: 'Firebase Cloud Messaging',\n  twitter: 'Twitter',\n};\n\nexport class ContactDetails extends ContactStoreElement {\n  static get styles() {\n    return css`\n      .urn {\n        display: flex;\n        padding: 0.4em 1em 0.8em 1em;\n        border-bottom: 1px solid #e6e6e6;\n        margin-bottom: 0.5em;\n      }\n\n      .urn .path {\n        margin-left: 0.2em;\n      }\n\n      .wrapper {\n        padding-top: 0em;\n      }\n\n      .groups {\n        padding: 0.4em 0.5em 0.6em 0.5em;\n        border-bottom: 1px solid #e6e6e6;\n        margin-bottom: 0.4em;\n      }\n      .group {\n        margin-right: 0.7em;\n        margin-bottom: 0.7em;\n      }\n\n      .label {\n        font-size: 0.8em;\n        color: rgb(136, 136, 136);\n        margin-left: 0.5em;\n        margin-bottom: 0.4em;\n      }\n    `;\n  }\n\n  // Not sure if we want to include name here or not, so hold onto this for the moment\n  // ${this.data.name ? html`<temba-contact-field name=\"Name\" value=${this.data.name} disabled></temba-contact-field>`:null}\n\n  public render(): TemplateResult {\n    if (!this.data) {\n      return;\n    }\n\n    const lang = this.store.getLanguageName(this.data.language);\n\n    return html`\n      <div class=\"wrapper\">\n        ${this.data.groups.length > 0\n          ? html` <div class=\"groups\">\n              <div class=\"label\">Groups</div>\n              ${this.data.groups.map(group => {\n                return html`<temba-label\n                  class=\"group\"\n                  onclick=\"goto(event)\"\n                  href=\"/contact/filter/${group.uuid}/\"\n                  icon=${group.is_dynamic ? Icon.group_smart : Icon.group}\n                  clickable\n                >\n                  ${group.name}\n                </temba-label>`;\n              })}\n            </div>`\n          : null}\n        ${this.data.urns.map(urn => {\n          const parts = urn.split(':');\n          let scheme = SCHEMES[parts[0]];\n          if (!scheme) {\n            scheme = capitalize(parts[0] as any);\n          }\n          return html`<temba-contact-field\n            name=${scheme}\n            value=${parts[1]}\n            disabled\n          ></temba-contact-field>`;\n        })}\n\n        <temba-contact-field\n          name=\"Status\"\n          value=${STATUS[this.data.status]}\n          disabled\n        ></temba-contact-field>\n        ${lang\n          ? html`<temba-contact-field\n              name=\"Language\"\n              value=${lang}\n              disabled\n            ></temba-contact-field>`\n          : null}\n\n        <temba-contact-field\n          name=\"Created\"\n          value=${this.data.created_on}\n          type=\"datetime\"\n          disabled\n        ></temba-contact-field>\n        <temba-contact-field\n          name=\"Last Seen\"\n          value=${this.data.last_seen_on}\n          type=\"datetime\"\n          disabled\n        ></temba-contact-field>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"ContactDetails.js","sourceRoot":"","sources":["../../../src/contacts/ContactDetails.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,MAAM,MAAM,GAAG;IACb,MAAM,EAAE,QAAQ;IAChB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,QAAQ,EAAE,UAAU;CACrB,CAAC;AAEF,MAAM,OAAO,GAAG;IACd,GAAG,EAAE,OAAO;IACZ,QAAQ,EAAE,UAAU;IACpB,GAAG,EAAE,0BAA0B;IAC/B,OAAO,EAAE,SAAS;CACnB,CAAC;AAEF,MAAM,OAAO,cAAe,SAAQ,mBAAmB;IACrD,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgCT,CAAC;IACJ,CAAC;IAED,oFAAoF;IACpF,0HAA0H;IAEnH,MAAM;QACX,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACf,OAAO;QACT,CAAC;QAED,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAE5D,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC;YAC3B,CAAC,CAAC,IAAI,CAAA;;gBAEA,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;gBAC/B,OAAO,IAAI,CAAA;;;0CAGe,KAAK,CAAC,IAAI;yBAC3B,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK;;;oBAGrD,KAAK,CAAC,IAAI;+BACC,CAAC;YAClB,CAAC,CAAC;mBACG;YACT,CAAC,CAAC,IAAI;UACN,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE;YAC3B,MAAM,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;YAC7B,IAAI,MAAM,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;YAC/B,IAAI,CAAC,MAAM,EAAE,CAAC;gBACZ,MAAM,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC,CAAQ,CAAC,CAAC;YACvC,CAAC;YACD,OAAO,IAAI,CAAA;mBACF,MAAM;oBACL,KAAK,CAAC,CAAC,CAAC;;kCAEM,CAAC;QAC3B,CAAC,CAAC;;;;kBAIQ,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;;;UAGhC,IAAI;YACJ,CAAC,CAAC,IAAI,CAAA;;sBAEM,IAAI;;oCAEU;YAC1B,CAAC,CAAC,IAAI;;;;kBAIE,IAAI,CAAC,IAAI,CAAC,UAAU;;;;;;kBAMpB,IAAI,CAAC,IAAI,CAAC,YAAY;;;;;KAKnC,CAAC;IACJ,CAAC;CACF","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { ContactStoreElement } from './ContactStoreElement';\nimport { Icon } from '../vectoricon';\nimport { capitalize } from '../utils';\n\nconst STATUS = {\n  active: 'Active',\n  blocked: 'Blocked',\n  stopped: 'Stopped',\n  archived: 'Archived'\n};\n\nconst SCHEMES = {\n  tel: 'Phone',\n  whatsapp: 'WhatsApp',\n  fcm: 'Firebase Cloud Messaging',\n  twitter: 'Twitter'\n};\n\nexport class ContactDetails extends ContactStoreElement {\n  static get styles() {\n    return css`\n      .urn {\n        display: flex;\n        padding: 0.4em 1em 0.8em 1em;\n        border-bottom: 1px solid #e6e6e6;\n        margin-bottom: 0.5em;\n      }\n\n      .urn .path {\n        margin-left: 0.2em;\n      }\n\n      .wrapper {\n        padding-top: 0em;\n      }\n\n      .groups {\n        padding: 0.4em 0.5em 0.6em 0.5em;\n        border-bottom: 1px solid #e6e6e6;\n        margin-bottom: 0.4em;\n      }\n      .group {\n        margin-right: 0.7em;\n        margin-bottom: 0.7em;\n      }\n\n      .label {\n        font-size: 0.8em;\n        color: rgb(136, 136, 136);\n        margin-left: 0.5em;\n        margin-bottom: 0.4em;\n      }\n    `;\n  }\n\n  // Not sure if we want to include name here or not, so hold onto this for the moment\n  // ${this.data.name ? html`<temba-contact-field name=\"Name\" value=${this.data.name} disabled></temba-contact-field>`:null}\n\n  public render(): TemplateResult {\n    if (!this.data) {\n      return;\n    }\n\n    const lang = this.store.getLanguageName(this.data.language);\n\n    return html`\n      <div class=\"wrapper\">\n        ${this.data.groups.length > 0\n          ? html` <div class=\"groups\">\n              <div class=\"label\">Groups</div>\n              ${this.data.groups.map((group) => {\n                return html`<temba-label\n                  class=\"group\"\n                  onclick=\"goto(event)\"\n                  href=\"/contact/filter/${group.uuid}/\"\n                  icon=${group.is_dynamic ? Icon.group_smart : Icon.group}\n                  clickable\n                >\n                  ${group.name}\n                </temba-label>`;\n              })}\n            </div>`\n          : null}\n        ${this.data.urns.map((urn) => {\n          const parts = urn.split(':');\n          let scheme = SCHEMES[parts[0]];\n          if (!scheme) {\n            scheme = capitalize(parts[0] as any);\n          }\n          return html`<temba-contact-field\n            name=${scheme}\n            value=${parts[1]}\n            disabled\n          ></temba-contact-field>`;\n        })}\n\n        <temba-contact-field\n          name=\"Status\"\n          value=${STATUS[this.data.status]}\n          disabled\n        ></temba-contact-field>\n        ${lang\n          ? html`<temba-contact-field\n              name=\"Language\"\n              value=${lang}\n              disabled\n            ></temba-contact-field>`\n          : null}\n\n        <temba-contact-field\n          name=\"Created\"\n          value=${this.data.created_on}\n          type=\"datetime\"\n          disabled\n        ></temba-contact-field>\n        <temba-contact-field\n          name=\"Last Seen\"\n          value=${this.data.last_seen_on}\n          type=\"datetime\"\n          disabled\n        ></temba-contact-field>\n      </div>\n    `;\n  }\n}\n"]}

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

@@ -291,7 +291,7 @@ export class ContactFieldEditor extends RapidElement {
         if (icon === 'search') {
             this.fireCustomEvent(CustomEventType.ButtonClicked, {
                 key: this.key,
-                value: this.value,
+                value: this.value
             });
         }
         evt.preventDefault();
@@ -357,7 +357,7 @@ export class ContactFieldEditor extends RapidElement {
                     unset: !this.value,
                     disabled: this.disabled,
                     mutable: !this.disabled,
-                    dirty: this.dirty,
+                    dirty: this.dirty
                 })}
       >
         <div class="label"><div class="name">${this.name}</div></div>
@@ -406,7 +406,7 @@ export class ContactFieldEditor extends RapidElement {
                 unset: !this.value,
                 disabled: this.disabled,
                 mutable: !this.disabled,
-                dirty: this.dirty,
+                dirty: this.dirty
             })}
       >
         ${this.type === 'datetime'

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

@@ -1 +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.js';\nimport { FormElement } from '../FormElement';\nimport { CustomEventType } from '../interfaces';\nimport { RapidElement } from '../RapidElement';\nimport { InputType, TextInput } from '../textinput/TextInput';\nimport { Icon } from '../vectoricon';\nimport { getClasses, WebResponse } from '../utils';\n\nenum Status {\n  Success = 'success',\n  Failure = 'failure',\n  Saving = 'saving',\n  Ready = 'ready',\n}\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  timezone: string;\n\n  @property({ type: String })\n  icon = navigator.clipboard ? Icon.copy : '';\n\n  @property({ type: String })\n  iconClass = '';\n\n  @property({ type: String })\n  status: Status = Status.Ready;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  @property({ type: Boolean })\n  dirty = false;\n\n  static get styles() {\n    return css`\n      :host {\n        --transition-speed: 0ms;\n      }\n\n      .wrapper {\n        --temba-textinput-padding: 1.4em 0.8em 0.4em 0.8em;\n        --disabled-opacity: 1;\n        position: relative;\n        --color-widget-bg: transparent;\n        --color-widget-bg-focused: #fff;\n        --widget-box-shadow: none;\n        padding-bottom: 0.6em;\n        border-bottom: 1px solid #ececec;\n      }\n\n      .wrapper.disabled {\n        --color-widget-border: transparent;\n      }\n\n      .wrapper.mutable:hover {\n      }\n\n      .wrapper.mutable {\n        --color-widget-border: rgb(235, 235, 235);\n        --color-widget-bg: transparent;\n        --input-cursor: pointer;\n\n        border-bottom: none;\n        margin-bottom: 0.5em;\n        padding-bottom: 0em;\n      }\n\n      .mutable.success {\n        --color-widget-border: rgba(var(--success-rgb), 0.6);\n      }\n\n      .mutable.failure {\n        --color-widget-border: rgba(var(--error-rgb), 0.3) !important;\n      }\n\n      .mutable .dirty {\n        --color-widget-border: rgb(235, 235, 235);\n      }\n\n      .prefix {\n        border-top-left-radius: var(--curvature-widget);\n        border-bottom-left-radius: var(--curvature-widget);\n        cursor: pointer !important;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        display: flex;\n        padding: 0em 0.5em;\n        position: absolute;\n        margin-top: 0.2em;\n        pointer-events: none;\n      }\n\n      .wrapper {\n        margin-bottom: 0.5em;\n      }\n\n      .prefix .name,\n      .label .name {\n        padding: 0em 0.4em;\n        color: rgba(100, 100, 100, 0.7);\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        font-size: 0.8em;\n      }\n\n      .disabled .name {\n        margin-top: 1em;\n        margin-left: 0.75em;\n      }\n\n      .disabled .value {\n        margin-left: 0.9em;\n        margin-top: 0.1em;\n        min-height: 1.75em;\n      }\n\n      .postfix {\n        display: flex;\n        align-items: stretch;\n        margin-left: 1em;\n      }\n\n      .popper {\n        background: rgba(0, 0, 0, 0.03);\n        border-top-right-radius: var(--curvature-widget);\n        border-bottom-right-radius: var(--curvature-widget);\n        --icon-color: #888;\n        display: flex;\n        cursor: default;\n        transition: all var(--transition-speed) ease-in-out;\n        align-items: stretch;\n        margin: -1px;\n      }\n\n      temba-icon[name='calendar'] {\n        --icon-color: rgba(0, 0, 0, 0.2);\n      }\n\n      temba-icon:hover {\n        --icon-color: rgba(0, 0, 0, 0.5);\n      }\n\n      temba-icon {\n        cursor: pointer;\n        --icon-color: rgba(0, 0, 0, 0.3);\n      }\n\n      temba-textinput:focus .popper,\n      temba-textinput:hover .popper {\n        display: flex;\n      }\n\n      .disabled temba-textinput .postfix {\n        display: none;\n        padding: none;\n      }\n\n      .unset temba-textinput .popper .copy,\n      .unset temba-textinput .popper .search {\n        display: none;\n      }\n\n      .unset temba-textinput:focus .popper .copy,\n      .unset temba-textinput:hover .popper .copy,\n      .unset temba-textinput:focus .popper .save,\n      .unset temba-textinput:hover .popper .save {\n        display: none;\n      }\n\n      .popper temba-icon {\n        padding: 0.5em 0em;\n        padding-right: 1em;\n      }\n\n      .popper:first-child {\n        padding: 0.5em 0em;\n        padding-right: 0.5em;\n        padding-left: 1em;\n      }\n\n      .popper:last-child {\n        padding-right: 0em;\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      temba-datepicker {\n        position: relative;\n      }\n\n      .save-state {\n        display: flex;\n        align-items: center;\n      }\n\n      .save-button {\n        padding-right: 1em;\n      }\n\n      .dirty .copy,\n      .dirty .search {\n        display: none;\n      }\n\n      .saving .copy,\n      .saving .search {\n        display: none;\n      }\n\n      .success .copy,\n      .success .search {\n        display: none;\n      }\n\n      .failure .copy,\n      .failure .search {\n        display: none;\n      }\n\n      .popper.success {\n        background: rgb(var(--success-rgb));\n      }\n\n      .popper.failure {\n        background: rgb(var(--error-rgb));\n      }\n\n      .popper.success temba-icon,\n      .popper.failure temba-icon {\n        --icon-color: #fff !important;\n      }\n\n      .popper.dirty {\n        background: rgba(0, 0, 0, 0.03);\n      }\n\n      temba-datepicker .popper {\n        border-radius: 0px;\n      }\n\n      temba-datepicker .popper:first-child {\n        padding: 0;\n      }\n\n      .dirty temba-datepicker .popper:first-child {\n        padding-left: 1em;\n      }\n\n      .success temba-datepicker .popper:first-child {\n        padding-left: 1em;\n      }\n\n      .failure temba-datepicker .popper:first-child {\n        padding-left: 1em;\n      }\n\n      .saving temba-datepicker .popper:first-child {\n        padding-left: 1em;\n      }\n\n      temba-datepicker .postfix {\n        margin-left: 0;\n      }\n\n      .saving temba-datepicker,\n      .saving temba-textinput {\n        pointer-events: none !important;\n        cursor: default !important;\n        opacity: 0.7;\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('icon-action');\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\n    if (icon === 'search') {\n      this.fireCustomEvent(CustomEventType.ButtonClicked, {\n        key: this.key,\n        value: this.value,\n      });\n    }\n\n    evt.preventDefault();\n    evt.stopPropagation();\n  }\n\n  public handleResponse(response: WebResponse) {\n    if (response.status === 200) {\n      this.value = response.json.fields[this.key];\n      // this.status = Status.Success;\n      // on success lets go back to ready state for now\n      this.status = Status.Ready;\n      this.dirty = false;\n    } else {\n      this.status = Status.Failure;\n      this.dirty = false;\n    }\n  }\n\n  public handleSubmit() {\n    const input = this.shadowRoot.querySelector(\n      'temba-textinput, temba-datepicker'\n    ) as FormElement;\n\n    if (input.value !== this.value) {\n      this.dirty = true;\n      this.status = Status.Saving;\n      this.value = input.value;\n      this.fireEvent('change');\n    }\n  }\n\n  public handleChange(evt: Event) {\n    evt.preventDefault();\n    evt.stopPropagation();\n  }\n\n  public handleDateChange(evt: Event) {\n    evt.preventDefault();\n    evt.stopPropagation();\n    this.dirty = true;\n  }\n\n  public handleInput(evt: KeyboardEvent) {\n    const input = evt.currentTarget as TextInput;\n    if (evt.key === 'Enter') {\n      input.blur();\n      this.handleSubmit();\n    } else {\n      if (input.value !== this.value) {\n        this.dirty = true;\n      }\n    }\n  }\n\n  private getInputType(type: string): string {\n    if (type === 'numeric') {\n      return InputType.Number;\n    }\n    return InputType.Text;\n  }\n\n  public render(): TemplateResult {\n    if (this.disabled) {\n      return html`<div\n        class=${this.status +\n        ' ' +\n        getClasses({\n          wrapper: true,\n          set: !!this.value,\n          unset: !this.value,\n          disabled: this.disabled,\n          mutable: !this.disabled,\n          dirty: this.dirty,\n        })}\n      >\n        <div class=\"label\"><div class=\"name\">${this.name}</div></div>\n        <div class=\"value\">\n          ${this.type === 'datetime'\n            ? this.value\n              ? html`<temba-date\n                  value=${this.value}\n                  display=\"datetime\"\n                ></temba-date>`\n              : null\n            : this.value}\n        </div>\n      </div>`;\n    }\n\n    const state = html`<div class=\"save-state\">\n      ${this.dirty\n        ? html`<temba-button\n            class=\"save-button\"\n            name=\"Save\"\n            small\n            @click=${this.handleSubmit}\n          ></temba-button>`\n        : html` ${this.status === Status.Saving\n            ? html`<temba-icon\n                spin\n                name=\"${Icon.progress_spinner}\"\n              ></temba-icon>`\n            : null}\n          ${this.status === Status.Success && !this.dirty\n            ? html`<temba-icon name=\"${Icon.success}\"></temba-icon>`\n            : null}\n          ${this.status === Status.Failure\n            ? html`<temba-tip text=\"Failed to save changes, try again later.\"\n                ><temba-icon name=\"${Icon.alert_warning}\"></temba-icon\n              ></temba-tip>`\n            : null}`}\n    </div>`;\n\n    return html`\n      <div\n        class=${this.status +\n        ' ' +\n        getClasses({\n          wrapper: true,\n          set: !!this.value,\n          unset: !this.value,\n          disabled: this.disabled,\n          mutable: !this.disabled,\n          dirty: this.dirty,\n        })}\n      >\n        ${this.type === 'datetime'\n          ? html`\n              <temba-datepicker\n                timezone=${this.timezone}\n                value=\"${this.value ? this.value : ''}\"\n                @change=${this.handleDateChange}\n                ?disabled=${this.disabled}\n                time\n              >\n                <div class=\"prefix\" slot=\"prefix\">\n                  <div class=\"name\">${this.name}</div>\n                </div>\n                <div class=\"postfix\" slot=\"postfix\">\n                  <div\n                    class=\"popper ${this.status}  ${this.dirty ? 'dirty' : ''}\"\n                  >\n                    ${state}\n                  </div>\n                </div>\n              </temba-datepicker>\n            `\n          : html`\n              <temba-textinput\n                class=\"${this.status} ${this.dirty ? 'dirty' : ''}\"\n                value=\"${this.value ? this.value : ''}\"\n                @keyup=${this.handleInput}\n                @change=${this.handleChange}\n                type=${this.getInputType(this.type)}\n                ?disabled=${this.disabled}\n              >\n                <div class=\"prefix\" slot=\"prefix\">\n                  <div class=\"name\">${this.name}</div>\n                </div>\n\n                <div class=\"postfix\">\n                  <div\n                    class=\"popper ${this.iconClass} ${this.status}  ${this.dirty\n                      ? 'dirty'\n                      : ''}\"\n                    @click=${this.handleIconClick}\n                  >\n                    ${state}\n\n                    <temba-icon\n                      class=\"search\"\n                      icon-action=\"search\"\n                      name=\"${Icon.search}\"\n                      animateclick=\"pulse\"\n                    ></temba-icon>\n                    <temba-icon\n                      class=\"copy\"\n                      icon-action=\"copy\"\n                      name=\"${this.icon}\"\n                      animatechange=\"spin\"\n                      animateclick=\"pulse\"\n                    ></temba-icon>\n                  </div>\n                </div>\n              </temba-textinput>\n            `}\n      </div>\n    `;\n  }\n}\n"]}
+{"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.js';\nimport { FormElement } from '../FormElement';\nimport { CustomEventType } from '../interfaces';\nimport { RapidElement } from '../RapidElement';\nimport { InputType, TextInput } from '../textinput/TextInput';\nimport { Icon } from '../vectoricon';\nimport { getClasses, WebResponse } from '../utils';\n\nenum Status {\n  Success = 'success',\n  Failure = 'failure',\n  Saving = 'saving',\n  Ready = 'ready'\n}\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  timezone: string;\n\n  @property({ type: String })\n  icon = navigator.clipboard ? Icon.copy : '';\n\n  @property({ type: String })\n  iconClass = '';\n\n  @property({ type: String })\n  status: Status = Status.Ready;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  @property({ type: Boolean })\n  dirty = false;\n\n  static get styles() {\n    return css`\n      :host {\n        --transition-speed: 0ms;\n      }\n\n      .wrapper {\n        --temba-textinput-padding: 1.4em 0.8em 0.4em 0.8em;\n        --disabled-opacity: 1;\n        position: relative;\n        --color-widget-bg: transparent;\n        --color-widget-bg-focused: #fff;\n        --widget-box-shadow: none;\n        padding-bottom: 0.6em;\n        border-bottom: 1px solid #ececec;\n      }\n\n      .wrapper.disabled {\n        --color-widget-border: transparent;\n      }\n\n      .wrapper.mutable:hover {\n      }\n\n      .wrapper.mutable {\n        --color-widget-border: rgb(235, 235, 235);\n        --color-widget-bg: transparent;\n        --input-cursor: pointer;\n\n        border-bottom: none;\n        margin-bottom: 0.5em;\n        padding-bottom: 0em;\n      }\n\n      .mutable.success {\n        --color-widget-border: rgba(var(--success-rgb), 0.6);\n      }\n\n      .mutable.failure {\n        --color-widget-border: rgba(var(--error-rgb), 0.3) !important;\n      }\n\n      .mutable .dirty {\n        --color-widget-border: rgb(235, 235, 235);\n      }\n\n      .prefix {\n        border-top-left-radius: var(--curvature-widget);\n        border-bottom-left-radius: var(--curvature-widget);\n        cursor: pointer !important;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        display: flex;\n        padding: 0em 0.5em;\n        position: absolute;\n        margin-top: 0.2em;\n        pointer-events: none;\n      }\n\n      .wrapper {\n        margin-bottom: 0.5em;\n      }\n\n      .prefix .name,\n      .label .name {\n        padding: 0em 0.4em;\n        color: rgba(100, 100, 100, 0.7);\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        font-size: 0.8em;\n      }\n\n      .disabled .name {\n        margin-top: 1em;\n        margin-left: 0.75em;\n      }\n\n      .disabled .value {\n        margin-left: 0.9em;\n        margin-top: 0.1em;\n        min-height: 1.75em;\n      }\n\n      .postfix {\n        display: flex;\n        align-items: stretch;\n        margin-left: 1em;\n      }\n\n      .popper {\n        background: rgba(0, 0, 0, 0.03);\n        border-top-right-radius: var(--curvature-widget);\n        border-bottom-right-radius: var(--curvature-widget);\n        --icon-color: #888;\n        display: flex;\n        cursor: default;\n        transition: all var(--transition-speed) ease-in-out;\n        align-items: stretch;\n        margin: -1px;\n      }\n\n      temba-icon[name='calendar'] {\n        --icon-color: rgba(0, 0, 0, 0.2);\n      }\n\n      temba-icon:hover {\n        --icon-color: rgba(0, 0, 0, 0.5);\n      }\n\n      temba-icon {\n        cursor: pointer;\n        --icon-color: rgba(0, 0, 0, 0.3);\n      }\n\n      temba-textinput:focus .popper,\n      temba-textinput:hover .popper {\n        display: flex;\n      }\n\n      .disabled temba-textinput .postfix {\n        display: none;\n        padding: none;\n      }\n\n      .unset temba-textinput .popper .copy,\n      .unset temba-textinput .popper .search {\n        display: none;\n      }\n\n      .unset temba-textinput:focus .popper .copy,\n      .unset temba-textinput:hover .popper .copy,\n      .unset temba-textinput:focus .popper .save,\n      .unset temba-textinput:hover .popper .save {\n        display: none;\n      }\n\n      .popper temba-icon {\n        padding: 0.5em 0em;\n        padding-right: 1em;\n      }\n\n      .popper:first-child {\n        padding: 0.5em 0em;\n        padding-right: 0.5em;\n        padding-left: 1em;\n      }\n\n      .popper:last-child {\n        padding-right: 0em;\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      temba-datepicker {\n        position: relative;\n      }\n\n      .save-state {\n        display: flex;\n        align-items: center;\n      }\n\n      .save-button {\n        padding-right: 1em;\n      }\n\n      .dirty .copy,\n      .dirty .search {\n        display: none;\n      }\n\n      .saving .copy,\n      .saving .search {\n        display: none;\n      }\n\n      .success .copy,\n      .success .search {\n        display: none;\n      }\n\n      .failure .copy,\n      .failure .search {\n        display: none;\n      }\n\n      .popper.success {\n        background: rgb(var(--success-rgb));\n      }\n\n      .popper.failure {\n        background: rgb(var(--error-rgb));\n      }\n\n      .popper.success temba-icon,\n      .popper.failure temba-icon {\n        --icon-color: #fff !important;\n      }\n\n      .popper.dirty {\n        background: rgba(0, 0, 0, 0.03);\n      }\n\n      temba-datepicker .popper {\n        border-radius: 0px;\n      }\n\n      temba-datepicker .popper:first-child {\n        padding: 0;\n      }\n\n      .dirty temba-datepicker .popper:first-child {\n        padding-left: 1em;\n      }\n\n      .success temba-datepicker .popper:first-child {\n        padding-left: 1em;\n      }\n\n      .failure temba-datepicker .popper:first-child {\n        padding-left: 1em;\n      }\n\n      .saving temba-datepicker .popper:first-child {\n        padding-left: 1em;\n      }\n\n      temba-datepicker .postfix {\n        margin-left: 0;\n      }\n\n      .saving temba-datepicker,\n      .saving temba-textinput {\n        pointer-events: none !important;\n        cursor: default !important;\n        opacity: 0.7;\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('icon-action');\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\n    if (icon === 'search') {\n      this.fireCustomEvent(CustomEventType.ButtonClicked, {\n        key: this.key,\n        value: this.value\n      });\n    }\n\n    evt.preventDefault();\n    evt.stopPropagation();\n  }\n\n  public handleResponse(response: WebResponse) {\n    if (response.status === 200) {\n      this.value = response.json.fields[this.key];\n      // this.status = Status.Success;\n      // on success lets go back to ready state for now\n      this.status = Status.Ready;\n      this.dirty = false;\n    } else {\n      this.status = Status.Failure;\n      this.dirty = false;\n    }\n  }\n\n  public handleSubmit() {\n    const input = this.shadowRoot.querySelector(\n      'temba-textinput, temba-datepicker'\n    ) as FormElement;\n\n    if (input.value !== this.value) {\n      this.dirty = true;\n      this.status = Status.Saving;\n      this.value = input.value;\n      this.fireEvent('change');\n    }\n  }\n\n  public handleChange(evt: Event) {\n    evt.preventDefault();\n    evt.stopPropagation();\n  }\n\n  public handleDateChange(evt: Event) {\n    evt.preventDefault();\n    evt.stopPropagation();\n    this.dirty = true;\n  }\n\n  public handleInput(evt: KeyboardEvent) {\n    const input = evt.currentTarget as TextInput;\n    if (evt.key === 'Enter') {\n      input.blur();\n      this.handleSubmit();\n    } else {\n      if (input.value !== this.value) {\n        this.dirty = true;\n      }\n    }\n  }\n\n  private getInputType(type: string): string {\n    if (type === 'numeric') {\n      return InputType.Number;\n    }\n    return InputType.Text;\n  }\n\n  public render(): TemplateResult {\n    if (this.disabled) {\n      return html`<div\n        class=${this.status +\n        ' ' +\n        getClasses({\n          wrapper: true,\n          set: !!this.value,\n          unset: !this.value,\n          disabled: this.disabled,\n          mutable: !this.disabled,\n          dirty: this.dirty\n        })}\n      >\n        <div class=\"label\"><div class=\"name\">${this.name}</div></div>\n        <div class=\"value\">\n          ${this.type === 'datetime'\n            ? this.value\n              ? html`<temba-date\n                  value=${this.value}\n                  display=\"datetime\"\n                ></temba-date>`\n              : null\n            : this.value}\n        </div>\n      </div>`;\n    }\n\n    const state = html`<div class=\"save-state\">\n      ${this.dirty\n        ? html`<temba-button\n            class=\"save-button\"\n            name=\"Save\"\n            small\n            @click=${this.handleSubmit}\n          ></temba-button>`\n        : html` ${this.status === Status.Saving\n            ? html`<temba-icon\n                spin\n                name=\"${Icon.progress_spinner}\"\n              ></temba-icon>`\n            : null}\n          ${this.status === Status.Success && !this.dirty\n            ? html`<temba-icon name=\"${Icon.success}\"></temba-icon>`\n            : null}\n          ${this.status === Status.Failure\n            ? html`<temba-tip text=\"Failed to save changes, try again later.\"\n                ><temba-icon name=\"${Icon.alert_warning}\"></temba-icon\n              ></temba-tip>`\n            : null}`}\n    </div>`;\n\n    return html`\n      <div\n        class=${this.status +\n        ' ' +\n        getClasses({\n          wrapper: true,\n          set: !!this.value,\n          unset: !this.value,\n          disabled: this.disabled,\n          mutable: !this.disabled,\n          dirty: this.dirty\n        })}\n      >\n        ${this.type === 'datetime'\n          ? html`\n              <temba-datepicker\n                timezone=${this.timezone}\n                value=\"${this.value ? this.value : ''}\"\n                @change=${this.handleDateChange}\n                ?disabled=${this.disabled}\n                time\n              >\n                <div class=\"prefix\" slot=\"prefix\">\n                  <div class=\"name\">${this.name}</div>\n                </div>\n                <div class=\"postfix\" slot=\"postfix\">\n                  <div\n                    class=\"popper ${this.status}  ${this.dirty ? 'dirty' : ''}\"\n                  >\n                    ${state}\n                  </div>\n                </div>\n              </temba-datepicker>\n            `\n          : html`\n              <temba-textinput\n                class=\"${this.status} ${this.dirty ? 'dirty' : ''}\"\n                value=\"${this.value ? this.value : ''}\"\n                @keyup=${this.handleInput}\n                @change=${this.handleChange}\n                type=${this.getInputType(this.type)}\n                ?disabled=${this.disabled}\n              >\n                <div class=\"prefix\" slot=\"prefix\">\n                  <div class=\"name\">${this.name}</div>\n                </div>\n\n                <div class=\"postfix\">\n                  <div\n                    class=\"popper ${this.iconClass} ${this.status}  ${this.dirty\n                      ? 'dirty'\n                      : ''}\"\n                    @click=${this.handleIconClick}\n                  >\n                    ${state}\n\n                    <temba-icon\n                      class=\"search\"\n                      icon-action=\"search\"\n                      name=\"${Icon.search}\"\n                      animateclick=\"pulse\"\n                    ></temba-icon>\n                    <temba-icon\n                      class=\"copy\"\n                      icon-action=\"copy\"\n                      name=\"${this.icon}\"\n                      animatechange=\"spin\"\n                      animateclick=\"pulse\"\n                    ></temba-icon>\n                  </div>\n                </div>\n              </temba-textinput>\n            `}\n      </div>\n    `;\n  }\n}\n"]}

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

@@ -88,14 +88,14 @@ export class ContactFields extends ContactStoreElement {
         const field = evt.currentTarget;
         const value = field.value;
         postJSON('/api/v2/contacts.json?uuid=' + this.data.uuid, {
-            fields: { [field.key]: value },
+            fields: { [field.key]: value }
         })
             .then((response) => {
             field.handleResponse(response);
             // returns a single contact with latest updates
             this.setContact(response.json);
         })
-            .catch(error => {
+            .catch((error) => {
             field.handleResponse(error);
         });
     }

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

@@ -1 +1 @@
-{"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.js';\nimport { getClasses, 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      .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      .featured {\n        display: block !important;\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      .toggle {\n        display: flex;\n        background: #fff;\n        align-items: center;\n        margin-bottom: 0.5em;\n      }\n\n      .disabled .toggle {\n        display: none;\n      }\n    `;\n  }\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  @property({ type: String })\n  timezone: string;\n\n  @property({ type: String })\n  role: string;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.handleFieldChanged = this.handleFieldChanged.bind(this);\n  }\n\n  private isAgent(): boolean {\n    return this.role === 'T';\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    postJSON('/api/v2/contacts.json?uuid=' + this.data.uuid, {\n      fields: { [field.key]: value },\n    })\n      .then((response: any) => {\n        field.handleResponse(response);\n\n        // returns a single contact with latest updates\n        this.setContact(response.json);\n      })\n      .catch(error => {\n        field.handleResponse(error);\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).sort(\n        (a: [string, string], b: [string, string]) => {\n          const [ak] = a;\n          const [bk] = b;\n          const fieldA = this.store.getContactField(ak);\n          const fieldB = this.store.getContactField(bk);\n\n          if (fieldA.type === 'ward') {\n            return 1;\n          }\n\n          if (fieldB.type === 'ward') {\n            return -1;\n          }\n\n          if (\n            fieldA.type === 'district' &&\n            fieldB.type !== 'ward' &&\n            fieldB.type !== 'district'\n          ) {\n            return 1;\n          }\n\n          if (\n            fieldB.type === 'district' &&\n            fieldA.type !== 'ward' &&\n            fieldA.type !== 'district'\n          ) {\n            return -1;\n          }\n\n          if (\n            fieldA.type === 'state' &&\n            fieldB.type !== 'ward' &&\n            fieldB.type !== 'district' &&\n            fieldB.type !== 'state'\n          ) {\n            return 1;\n          }\n\n          if (\n            fieldB.type === 'state' &&\n            fieldA.type !== 'ward' &&\n            fieldA.type !== 'district' &&\n            fieldA.type !== 'state'\n          ) {\n            return -1;\n          }\n\n          if (fieldA.featured && !fieldB.featured) {\n            return -1;\n          }\n\n          if (fieldB.featured && !fieldA.featured) {\n            return 1;\n          }\n\n          const priority = fieldB.priority - fieldA.priority;\n          if (priority !== 0) {\n            return priority;\n          }\n\n          return ak.localeCompare(bk);\n        }\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=${getClasses({ set: !!v, unset: !v, featured: field.featured })}\n          key=${field.key}\n          name=${field.label}\n          value=${v}\n          type=${field.value_type}\n          @change=${this.handleFieldChanged}\n          timezone=${this.timezone}\n          ?disabled=${(this.isAgent() && field.agent_access === 'view') ||\n          this.disabled ||\n          field.value_type === 'ward' ||\n          field.value_type === 'district' ||\n          field.value_type === 'state'\n            ? true\n            : false}\n        ></temba-contact-field>`;\n      });\n\n      return html`\n        <div class=${getClasses({ disabled: this.disabled })}>\n          <div class=\"fields ${this.showAll ? 'show-all' : ''}\">${fields}</div>\n          ${Object.keys(this.data.fields).length >= MIN_FOR_FILTER\n            ? html`<div class=\"toggle\">\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                  ></temba-checkbox>\n                </div>\n              </div>`\n            : null}\n        </div>\n      `;\n    }\n\n    return super.render();\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.js';\nimport { getClasses, 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      .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      .featured {\n        display: block !important;\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      .toggle {\n        display: flex;\n        background: #fff;\n        align-items: center;\n        margin-bottom: 0.5em;\n      }\n\n      .disabled .toggle {\n        display: none;\n      }\n    `;\n  }\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  @property({ type: String })\n  timezone: string;\n\n  @property({ type: String })\n  role: string;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.handleFieldChanged = this.handleFieldChanged.bind(this);\n  }\n\n  private isAgent(): boolean {\n    return this.role === 'T';\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    postJSON('/api/v2/contacts.json?uuid=' + this.data.uuid, {\n      fields: { [field.key]: value }\n    })\n      .then((response: any) => {\n        field.handleResponse(response);\n\n        // returns a single contact with latest updates\n        this.setContact(response.json);\n      })\n      .catch((error) => {\n        field.handleResponse(error);\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).sort(\n        (a: [string, string], b: [string, string]) => {\n          const [ak] = a;\n          const [bk] = b;\n          const fieldA = this.store.getContactField(ak);\n          const fieldB = this.store.getContactField(bk);\n\n          if (fieldA.type === 'ward') {\n            return 1;\n          }\n\n          if (fieldB.type === 'ward') {\n            return -1;\n          }\n\n          if (\n            fieldA.type === 'district' &&\n            fieldB.type !== 'ward' &&\n            fieldB.type !== 'district'\n          ) {\n            return 1;\n          }\n\n          if (\n            fieldB.type === 'district' &&\n            fieldA.type !== 'ward' &&\n            fieldA.type !== 'district'\n          ) {\n            return -1;\n          }\n\n          if (\n            fieldA.type === 'state' &&\n            fieldB.type !== 'ward' &&\n            fieldB.type !== 'district' &&\n            fieldB.type !== 'state'\n          ) {\n            return 1;\n          }\n\n          if (\n            fieldB.type === 'state' &&\n            fieldA.type !== 'ward' &&\n            fieldA.type !== 'district' &&\n            fieldA.type !== 'state'\n          ) {\n            return -1;\n          }\n\n          if (fieldA.featured && !fieldB.featured) {\n            return -1;\n          }\n\n          if (fieldB.featured && !fieldA.featured) {\n            return 1;\n          }\n\n          const priority = fieldB.priority - fieldA.priority;\n          if (priority !== 0) {\n            return priority;\n          }\n\n          return ak.localeCompare(bk);\n        }\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=${getClasses({ set: !!v, unset: !v, featured: field.featured })}\n          key=${field.key}\n          name=${field.label}\n          value=${v}\n          type=${field.value_type}\n          @change=${this.handleFieldChanged}\n          timezone=${this.timezone}\n          ?disabled=${(this.isAgent() && field.agent_access === 'view') ||\n          this.disabled ||\n          field.value_type === 'ward' ||\n          field.value_type === 'district' ||\n          field.value_type === 'state'\n            ? true\n            : false}\n        ></temba-contact-field>`;\n      });\n\n      return html`\n        <div class=${getClasses({ disabled: this.disabled })}>\n          <div class=\"fields ${this.showAll ? 'show-all' : ''}\">${fields}</div>\n          ${Object.keys(this.data.fields).length >= MIN_FOR_FILTER\n            ? html`<div class=\"toggle\">\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                  ></temba-checkbox>\n                </div>\n              </div>`\n            : null}\n        </div>\n      `;\n    }\n\n    return super.render();\n  }\n}\n"]}

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

@@ -5,8 +5,8 @@ import { html } from 'lit-html';
 import { CustomEventType } from '../interfaces';
 import { RapidElement } from '../RapidElement';
 import { getAssets, getClasses, postJSON, throttle } from '../utils';
-import { Events, getEventGroupType, getEventStyles, renderAirtimeTransferredEvent, renderCallStartedEvent, renderCampaignFiredEvent, renderChannelEvent, renderContactGroupsEvent, renderContactLanguageChangedEvent, renderContactURNsChanged, renderEmailSent, renderErrorMessage, renderFlowEvent, renderLabelsAdded, renderMsgEvent, renderNameChanged, renderNoteCreated, renderOptinRequested, renderResultEvent, renderTicketAction, renderTicketAssigned, renderUpdateEvent, renderWebhookEvent, } from './events';
-import { fetchContactHistory, MAX_CHAT_REFRESH, MIN_CHAT_REFRESH, SCROLL_THRESHOLD, } from './helpers';
+import { Events, getEventGroupType, getEventStyles, renderAirtimeTransferredEvent, renderCallStartedEvent, renderCampaignFiredEvent, renderChannelEvent, renderContactGroupsEvent, renderContactLanguageChangedEvent, renderContactURNsChanged, renderEmailSent, renderErrorMessage, renderFlowEvent, renderLabelsAdded, renderMsgEvent, renderNameChanged, renderNoteCreated, renderOptinRequested, renderResultEvent, renderTicketAction, renderTicketAssigned, renderUpdateEvent, renderWebhookEvent } from './events';
+import { fetchContactHistory, MAX_CHAT_REFRESH, MIN_CHAT_REFRESH, SCROLL_THRESHOLD } from './helpers';
 // when images load, make sure we are on the bottom of the scroll window if necessary
 export const loadHandler = function (event) {
     const target = event.target;
@@ -50,7 +50,7 @@ export class ContactHistory extends RapidElement {
         return this.getTicket(event.ticket.uuid);
     }
     getTicket(uuid) {
-        return (this.tickets || []).find(ticket => ticket.uuid === uuid);
+        return (this.tickets || []).find((ticket) => ticket.uuid === uuid);
     }
     static get styles() {
         return css `
@@ -194,9 +194,9 @@ export class ContactHistory extends RapidElement {
                 // dedupe any events we get from the server
                 // TODO: perhaps make this a little less crazy
                 let removed = 0;
-                this.eventGroups.forEach(g => {
+                this.eventGroups.forEach((g) => {
                     const before = g.events.length;
-                    g.events = g.events.filter(prev => !fetchedEvents.find(fetched => {
+                    g.events = g.events.filter((prev) => !fetchedEvents.find((fetched) => {
                         return (prev.created_on == fetched.created_on &&
                             prev.type === fetched.type);
                     }));
@@ -208,14 +208,16 @@ export class ContactHistory extends RapidElement {
                 if (this.eventGroups.length > 0) {
                     const sliced = previousGroups.splice(previousGroups.length - 1, 1)[0];
                     forceOpen = sliced.open;
-                    fetchedEvents.splice(0, 0, ...sliced.events);
+                    if (sliced.events.length > 0) {
+                        fetchedEvents.splice(0, 0, ...sliced.events);
+                    }
                 }
                 const grouped = this.getEventGroups(fetchedEvents);
                 if (grouped.length) {
                     if (forceOpen) {
                         grouped[grouped.length - 1].open = forceOpen;
                     }
-                    this.eventGroups = [...previousGroups, ...grouped];
+                    this.eventGroups = [...previousGroups, ...grouped].filter((group) => group.events.length > 0);
                 }
                 this.refreshing = false;
                 this.scheduleRefresh();
@@ -327,13 +329,13 @@ export class ContactHistory extends RapidElement {
         const events = this.getEventsPane();
         events.scrollTo({
             top: events.scrollHeight,
-            behavior: smooth ? 'smooth' : 'auto',
+            behavior: smooth ? 'smooth' : 'auto'
         });
         this.showMessageAlert = false;
         window.setTimeout(() => {
             events.scrollTo({
                 top: events.scrollHeight,
-                behavior: smooth ? 'smooth' : 'auto',
+                behavior: smooth ? 'smooth' : 'auto'
             });
         }, 0);
     }
@@ -354,7 +356,7 @@ export class ContactHistory extends RapidElement {
                 eventGroup = {
                     open: false,
                     events: [event],
-                    type: currentEventGroupType,
+                    type: currentEventGroupType
                 };
             }
             else {
@@ -506,13 +508,13 @@ export class ContactHistory extends RapidElement {
     handleClose(uuid) {
         this.httpComplete = postJSON(`/api/v2/ticket_actions.json`, {
             tickets: [uuid],
-            action: 'close',
+            action: 'close'
         })
             .then(() => {
             this.refreshTickets();
             this.refresh();
             this.fireCustomEvent(CustomEventType.ContentChanged, {
-                ticket: { uuid, status: 'closed' },
+                ticket: { uuid, status: 'closed' }
             });
         })
             .catch((response) => {
@@ -525,15 +527,15 @@ export class ContactHistory extends RapidElement {
                 const ticket = assets[0];
                 if (ticket.assignee && ticket.assignee.email === agent) {
                     this.fireCustomEvent(CustomEventType.ContentChanged, {
-                        ticket: { uuid: this.ticket, assigned: 'self' },
+                        ticket: { uuid: this.ticket, assigned: 'self' }
                     });
                 }
                 else {
                     this.fireCustomEvent(CustomEventType.ContentChanged, {
                         ticket: {
                             uuid: this.ticket,
-                            assigned: ticket.assignee ? ticket.assignee : null,
-                        },
+                            assigned: ticket.assignee ? ticket.assignee : null
+                        }
                     });
                 }
             }
@@ -543,8 +545,8 @@ export class ContactHistory extends RapidElement {
         return [
             {
                 event: 'scroll',
-                method: throttle(this.handleScroll, 50),
-            },
+                method: throttle(this.handleScroll, 50)
+            }
         ];
     }
     /** Check if a ticket event is no longer represented in a session */
@@ -585,7 +587,7 @@ export class ContactHistory extends RapidElement {
             const classes = getClasses({
                 grouping: true,
                 [grouping]: true,
-                expanded: eventGroup.open,
+                expanded: eventGroup.open
             });
             return html `<div class="${classes}">
             ${grouping === 'verbose'
@@ -632,7 +634,7 @@ export class ContactHistory extends RapidElement {
                 this.scrollToBottom(true);
             }}
                 class="new-messages ${getClasses({
-                expanded: this.showMessageAlert,
+                expanded: this.showMessageAlert
             })}"
               >
                 New Messages