@nyaruka/temba-components 0.118.4 → 0.118.6

package/out-tsc/src/list/RunList.js

@@ -172,6 +172,7 @@ export class RunList extends TembaList {
                 <temba-select
                   clearable
                   placeholder="Result Preview"
+                  valueKey="key"
                   @change=${this.handleColumnChanged}
                 />
               `

package/out-tsc/src/list/RunList.js.map

@@ -1 +1 @@
-{"version":3,"file":"RunList.js","sourceRoot":"","sources":["../../../src/list/RunList.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAG7C,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,MAAM,UAAU,GAAG,mBAAmB,CAAC;AAEvC,MAAM,OAAO,OAAQ,SAAQ,SAAS;IAqBpC,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;KAiBT,CAAC;IACJ,CAAC;IAEM,YAAY,CAAC,iBAAmC;QACrD,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;IACxC,CAAC;IAEM,OAAO,CAAC,iBAAmC;QAChD,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QACjC,IAAI,iBAAiB,CAAC,GAAG,CAAC,WAAW,CAAC,IAAI,iBAAiB,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC;YACxE,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;gBACd,IAAI,CAAC,QAAQ,GAAG,0BAA0B,IAAI,CAAC,IAAI,GACjD,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EACpC,EAAE,CAAC;YACL,CAAC;QACH,CAAC;QAED,IAAI,iBAAiB,CAAC,GAAG,CAAC,eAAe,CAAC,EAAE,CAAC;YAC3C,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC5B,CAAC;QAED,IAAI,iBAAiB,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,CAAC;YACrC,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;gBACjB,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAC1C,cAAc,CACA,CAAC;gBACjB,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;gBAChC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CACnC,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,OAAO,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,MAAM,EAAE,CAAC,EAC3D,EAAE,CACH,CAAC;YACJ,CAAC;QACH,CAAC;IACH,CAAC;IAEM,mBAAmB,CAAC,GAAQ;QACjC,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YACvB,MAAM,SAAS,GAAG,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;YACrD,IAAI,SAAS,EAAE,CAAC;gBACd,IAAI,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;oBAC7C,IAAI,SAAS,CAAC,QAAQ,EAAE,CAAC;wBACvB,OAAO,SAAS,CAAC,QAAQ,CAAC;oBAC5B,CAAC;gBACH,CAAC;qBAAM,CAAC;oBACN,OAAO,SAAS,CAAC,KAAK,CAAC;gBACzB,CAAC;YACH,CAAC;QACH,CAAC;QACD,OAAO,IAAI,CAAC;IACd,CAAC;IAEM,SAAS,CAAC,EAAU;QACzB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;QACvD,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QACjE,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;IACpC,CAAC;IAEM,OAAO,CAAC,GAAQ;QACrB,IAAI,IAAI,GAAG,IAAI,CAAC;QAChB,IAAI,GAAG,CAAC,SAAS,IAAI,WAAW,EAAE,CAAC;YACjC,IAAI,GAAG,IAAI,CAAA;;;SAGR,CAAC;QACN,CAAC;aAAM,IAAI,GAAG,CAAC,SAAS,IAAI,aAAa,EAAE,CAAC;YAC1C,IAAI,GAAG,IAAI,CAAA;;8BAEa,UAAU;SAC/B,CAAC;QACN,CAAC;aAAM,IAAI,GAAG,CAAC,SAAS,IAAI,SAAS,EAAE,CAAC;YACtC,IAAI,GAAG,IAAI,CAAA;;8BAEa,UAAU;SAC/B,CAAC;QACN,CAAC;aAAM,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,CAAC;YAC1B,IAAI,GAAG,CAAC,SAAS,EAAE,CAAC;gBAClB,IAAI,GAAG,IAAI,CAAA;;;WAGR,CAAC;YACN,CAAC;iBAAM,CAAC;gBACN,IAAI,GAAG,IAAI,CAAA;;;WAGR,CAAC;YACN,CAAC;QACH,CAAC;QACD,OAAO,IAAI,CAAC;IACd,CAAC;IAEM,kBAAkB;QACvB,IAAI,CAAC,YAAY,GAAG,CAAC,GAAQ,EAAkB,EAAE;YAC/C,IAAI,WAAW,GAAG,EAAE,CAAC;YAErB,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,CAAC;gBACnB,WAAW,GAAG,kBAAkB,CAAC;YACnC,CAAC;YAED,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,CAAC;gBACnB,WAAW,IAAI,EAAE,CAAC;YACpB,CAAC;YAED,OAAO,IAAI,CAAA;kCACiB,WAAW;;;;;qBAKxB,GAAG,CAAC,OAAO,CAAC,IAAI,IAAI,GAAG,CAAC,OAAO,CAAC,YAAY;oBAC7C,GAAG,CAAC,OAAO,CAAC,GAAG;;;;;;;;cAQrB,IAAI,CAAC,mBAAmB,CAAC,GAAG,CAAC;;;;iCAIV,GAAG,CAAC,WAAW;;YAEpC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC;;OAEtB,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC;IAEM,kBAAkB;QACvB,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC1B,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC;YAC7C,OAAO,IAAI,CAAC,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAC;QAChD,CAAC;QACD,OAAO,IAAI,CAAC,QAAQ,CAAC;IACvB,CAAC;IAEM,eAAe;QACpB,IAAI,CAAC,SAAS,GACZ,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,YAAY,CAC3C,CAAC,OAAO,CAAC;IACZ,CAAC;IAEM,mBAAmB,CAAC,KAAU;QACnC,IAAI,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACnC,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;QAC9C,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;QAC5B,CAAC;IACH,CAAC;IAEM,cAAc,CAAC,QAAa;QACjC,IAAI,CAAC,WAAW,GAAG,QAAQ,CAAC;IAC9B,CAAC;IAEM,YAAY;QACjB,OAAO,EAAE,CAAC;IACZ,CAAC;IAEM,YAAY;QACjB,OAAO,IAAI,CAAA;;;YAGH,IAAI,CAAC,OAAO;YACZ,CAAC,CAAC,IAAI,CAAA;;;;4BAIU,IAAI,CAAC,mBAAmB;;eAErC;YACH,CAAC,CAAC,IAAI;;;;;;;qBAOG,IAAI,CAAC,eAAe;;;;;;;;;;;;;;;;;;;;;KAqBpC,CAAC;IACJ,CAAC;IAEM,YAAY;QACjB,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YAC1C,OAAO,IAAI,CAAC;QACd,CAAC;QAED,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;QAExD,OAAO,IAAI,CAAA;;;;;;;;;;qBAUM,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,IAAI;YACpC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,YAAY;oBAC/B,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,GAAG;;oCAEZ,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,IAAI;;;;;gBAKjD,IAAI,CAAC,WAAW,CAAC,SAAS;YAC1B,CAAC,CAAC,IAAI,CAAA;;wBAEE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC;;0BAE5B,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC;;;iCAG/B,IAAI,CAAC,WAAW,CAAC,SAAS;mCACxB,IAAI,CAAC,WAAW,CAAC,UAAU;;;;mBAI3C;YACH,CAAC,CAAC,IAAI,CAAA,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC;;;;iCAItB,IAAI,CAAC,WAAW,CAAC,UAAU;;;2BAGjC;;;;;;gBAMX,IAAI,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC,cAAc,EAAE;;;;;;;;YAQ1D,IAAI,CAAC,WAAW;YAChB,CAAC,CAAC,IAAI,CAAA;;;uBAGK,IAAI,CAAC,MAAM;qCACG,IAAI,CAAC,WAAW,CAAC,EAAE;6BAC3B;YACjB,CAAC,CAAC,IAAI;;;UAGR,UAAU,CAAC,MAAM,GAAG,CAAC;YACrB,CAAC,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;oBAeI,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,GAAW,EAAE,EAAE;gBACzD,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;gBAC5C,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC;gBAElC,8DAA8D;gBAC9D,IAAI,IAAI,EAAE,CAAC;oBACT,OAAO,IAAI,CAAA;8BACH,MAAM,CAAC,IAAI;;4BAEb,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI;;8BAEjD,MAAM,CAAC,KAAK;4BACd,CAAC;gBACT,CAAC;gBACD,OAAO,IAAI,CAAC;YACd,CAAC,CAAC;;;aAGP;YACH,CAAC,CAAC,IAAI;;WAEL,CAAC;IACV,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QAzVV,cAAS,GAAG,IAAI,CAAC;QASjB,gBAAW,GAAG,KAAK,CAAC;QAEZ,eAAU,GAAG,EAAE,CAAC;QA+UtB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;QAC5B,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC;QACvB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACvB,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC;CACF;AArWC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCACd;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;wCAC9B;AAGf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CACX;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CACR;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACV;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CACR","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Checkbox } from '../checkbox/Checkbox';\nimport { Select } from '../select/Select';\nimport { capitalize } from '../utils';\nimport { Icon } from '../vectoricon';\nimport { TembaList } from './TembaList';\n\nconst FLOW_COLOR = 'rgb(223, 65, 159)';\n\nexport class RunList extends TembaList {\n  @property({ type: String })\n  flow: string;\n\n  @property({ type: Object, attribute: false })\n  results: any[];\n\n  @property({ type: Boolean })\n  responses = true;\n\n  @property({ type: Object })\n  resultPreview: any;\n\n  @property({ type: Object })\n  selectedRun: any;\n\n  @property({ type: Boolean })\n  allowDelete = false;\n\n  private resultKeys = {};\n\n  static get styles() {\n    return css`\n      :host {\n        overflow-y: auto !important;\n        --contact-name-font-size: 1em;\n      }\n\n      @media only screen and (max-height: 768px) {\n        temba-options {\n          max-height: 20vh;\n        }\n      }\n\n      temba-options {\n        display: block;\n        width: 100%;\n        flex-grow: 1;\n      }\n    `;\n  }\n\n  public firstUpdated(changedProperties: Map<string, any>) {\n    super.firstUpdated(changedProperties);\n  }\n\n  public updated(changedProperties: Map<string, any>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('responses') || changedProperties.has('flow')) {\n      if (this.flow) {\n        this.endpoint = `/api/v2/runs.json?flow=${this.flow}${\n          this.responses ? '&responded=1' : ''\n        }`;\n      }\n    }\n\n    if (changedProperties.has('resultPreview')) {\n      this.createRenderOption();\n    }\n\n    if (changedProperties.has('results')) {\n      if (this.results) {\n        const select = this.shadowRoot.querySelector(\n          'temba-select'\n        ) as Select<any>;\n        select.setOptions(this.results);\n        this.resultKeys = this.results.reduce(\n          (current, result) => ({ ...current, [result.key]: result }),\n          {}\n        );\n      }\n    }\n  }\n\n  public renderResultPreview(run: any) {\n    if (this.resultPreview) {\n      const runResult = run.values[this.resultPreview.key];\n      if (runResult) {\n        if (this.resultPreview.categories.length > 1) {\n          if (runResult.category) {\n            return runResult.category;\n          }\n        } else {\n          return runResult.value;\n        }\n      }\n    }\n    return null;\n  }\n\n  public removeRun(id: number) {\n    this.items = this.items.filter((run) => run.id !== id);\n    this.cursorIndex = Math.min(this.cursorIndex, this.items.length);\n    this.requestUpdate('cursorIndex');\n  }\n\n  public getIcon(run: any): TemplateResult {\n    let icon = null;\n    if (run.exit_type == 'completed') {\n      icon = html`<temba-icon\n        name=\"check\"\n        style=\"--icon-color:#666;margin-left:0.5em\"\n      />`;\n    } else if (run.exit_type == 'interrupted') {\n      icon = html`<temba-icon\n        name=\"x-octagon\"\n        style=\"--icon-color:${FLOW_COLOR};margin-left:0.5em\"\n      />`;\n    } else if (run.exit_type == 'expired') {\n      icon = html`<temba-icon\n        name=\"clock\"\n        style=\"--icon-color:${FLOW_COLOR};margin-left:0.5em\"\n      />`;\n    } else if (!run.exit_type) {\n      if (run.responded) {\n        icon = html`<temba-icon\n          name=\"activity\"\n          style=\"--icon-color:var(--color-primary-dark);margin-left:0.5em\"\n        />`;\n      } else {\n        icon = html`<temba-icon\n          name=\"hourglass\"\n          style=\"--icon-color:var(--color-primary-dark);margin-left:0.5em\"\n        />`;\n      }\n    }\n    return icon;\n  }\n\n  public createRenderOption() {\n    this.renderOption = (run: any): TemplateResult => {\n      let statusStyle = '';\n\n      if (!run.exited_on) {\n        statusStyle = 'font-weight:400;';\n      }\n\n      if (!run.responded) {\n        statusStyle += '';\n      }\n\n      return html`\n        <div class=\"row\" style=\"${statusStyle}display:flex;align-items:center\">\n          <div\n            style=\"width:16em;white-space:nowrap;overflow: hidden; text-overflow: ellipsis;\"\n          >\n            <temba-contact-name\n              name=${run.contact.name || run.contact.anon_display}\n              urn=${run.contact.urn}\n              icon-size=\"15\"\n            />\n          </div>\n\n          <div\n            style=\"margin: 0em 1em;flex:1;white-space:nowrap; overflow:hidden; text-overflow: ellipsis;\"\n          >\n            ${this.renderResultPreview(run)}\n          </div>\n\n          <div style=\"flex-shrink:1\">\n            <temba-date value=\"${run.modified_on}\" display=\"duration\" />\n          </div>\n          ${this.getIcon(run)}\n        </div>\n      `;\n    };\n  }\n\n  public getRefreshEndpoint() {\n    if (this.items.length > 0) {\n      const modifiedOn = this.items[0].modified_on;\n      return this.endpoint + '&after=' + modifiedOn;\n    }\n    return this.endpoint;\n  }\n\n  public toggleResponded() {\n    this.responses = (\n      this.shadowRoot.querySelector('#responded') as Checkbox\n    ).checked;\n  }\n\n  public handleColumnChanged(event: any) {\n    if (event.target.values.length > 0) {\n      this.resultPreview = event.target.values[0];\n    } else {\n      this.resultPreview = null;\n    }\n  }\n\n  public handleSelected(selected: any) {\n    this.selectedRun = selected;\n  }\n\n  public getListStyle(): string {\n    return '';\n  }\n\n  public renderHeader(): TemplateResult {\n    return html`\n      <div style=\"display:flex;width:100%;margin-bottom: 1em;\">\n        <div style=\"flex-grow:1\">\n          ${this.results\n            ? html`\n                <temba-select\n                  clearable\n                  placeholder=\"Result Preview\"\n                  @change=${this.handleColumnChanged}\n                />\n              `\n            : null}\n        </div>\n        <div style=\"margin-left:1em;\">\n          <temba-checkbox\n            id=\"responded\"\n            label=\"Responses Only\"\n            checked=\"true\"\n            @click=${this.toggleResponded}\n          />\n        </div>\n      </div>\n      <div\n        style=\"\n        font-size:0.8em;\n        color:rgba(0,0,0,.4);\n        text-align:right;\n        background:#f9f9f9;\n        border: 1px solid var(--color-widget-border);\n        margin-bottom:-0.5em; \n        padding-bottom: 0.6em;\n        padding-top: 0.3em;\n        padding-right: 4.5em;\n        border-top-right-radius: var(--curvature);\n        border-top-left-radius: var(--curvature)\n    \"\n      >\n        Last Updated\n      </div>\n    `;\n  }\n\n  public renderFooter(): TemplateResult {\n    if (!this.selectedRun || !this.resultKeys) {\n      return null;\n    }\n\n    const resultKeys = Object.keys(this.selectedRun.values);\n\n    return html` <div\n      style=\"margin-top: 1.5em; margin-bottom:0.5em;flex-grow:1;border-radius:var(--curvature); border: 1px solid var(--color-widget-border);\"\n    >\n      <div style=\"display:flex;flex-direction:column;\">\n        <div\n          style=\"font-size:1.5em;background:#f9f9f9;padding:.75em;padding-top:.35em;display:flex;align-items:center;border-top-right-radius:var(--curvature);border-top-left-radius:var(--curvature)\"\n        >\n          <div>\n            <temba-contact-name\n              style=\"cursor:pointer\"\n              name=${this.selectedRun.contact.name ||\n              this.selectedRun.contact.anon_display}\n              urn=${this.selectedRun.contact.urn}\n              onclick=\"goto(event, this)\"\n              href=\"/contact/read/${this.selectedRun.contact.uuid}/\"\n            ></temba-contact-name>\n            <div\n              style=\"display:flex;margin-left:-0.2em;margin-top:0.25em;font-size: 0.65em\"\n            >\n              ${this.selectedRun.exit_type\n                ? html`\n                    <div style=\"margin-left:2em;flex-grow:1;display:flex\">\n                      ${this.getIcon(this.selectedRun)}\n                      <div style=\"margin-left:0.5em\">\n                        ${capitalize(this.selectedRun.exit_type)}&nbsp;\n                      </div>\n                      <temba-date\n                        value=\"${this.selectedRun.exited_on}\"\n                        compare=\"${this.selectedRun.created_on}\"\n                        display=\"duration\"\n                      />\n                    </div>\n                  `\n                : html`${this.getIcon(this.selectedRun)}\n                    <div style=\"margin-left:1.5em;flex-grow:1;display:flex\">\n                      <div>Started&nbsp;</div>\n                      <temba-date\n                        value=\"${this.selectedRun.created_on}\"\n                        display=\"duration\"\n                      ></temba-date>\n                    </div>`}\n            </div>\n          </div>\n          <div style=\"flex-grow:1\"></div>\n          <div style=\"display:flex;flex-direction: column\">\n            <div style=\"font-size:0.75em\">\n              ${new Date(this.selectedRun.created_on).toLocaleString()}\n            </div>\n            <div\n              style=\"font-size:0.6em;align-self:flex-end;color:#888;line-height:0.75em\"\n            >\n              Started\n            </div>\n          </div>\n          ${this.allowDelete\n            ? html` <temba-icon\n                clickable\n                style=\"margin-left:0.75em;\"\n                name=${Icon.delete}\n                onclick=\"deleteRun(${this.selectedRun.id});\"\n              ></temba-icon>`\n            : null}\n        </div>\n\n        ${resultKeys.length > 0\n          ? html`\n              <div style=\"padding:1em;\">\n                <div\n                  style=\"display:flex;font-size:1.2em;position:relative;right:0px\"\n                >\n                  <div style=\"flex-grow:1\"></div>\n                </div>\n\n                <table width=\"100%\">\n                  <tr>\n                    <th style=\"text-align:left\" width=\"25%\">Result</th>\n                    <th style=\"text-align:left\" width=\"25%\">Category</th>\n                    <th style=\"text-align:left\">Value</th>\n                  </tr>\n\n                  ${Object.keys(this.selectedRun.values).map((key: string) => {\n                    const result = this.selectedRun.values[key];\n                    const meta = this.resultKeys[key];\n\n                    // if our result is no longer represented in the flow, skip it\n                    if (meta) {\n                      return html`<tr>\n                        <td>${result.name}</td>\n                        <td>\n                          ${meta.categories.length > 1 ? result.category : '--'}\n                        </td>\n                        <td>${result.value}</td>\n                      </tr>`;\n                    }\n                    return null;\n                  })}\n                </table>\n              </div>\n            `\n          : null}\n      </div>\n    </div>`;\n  }\n\n  constructor() {\n    super();\n    this.reverseRefresh = false;\n    this.valueKey = 'uuid';\n    this.hideShadow = true;\n    this.createRenderOption();\n  }\n}\n"]}
+{"version":3,"file":"RunList.js","sourceRoot":"","sources":["../../../src/list/RunList.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Checkbox } from '../checkbox/Checkbox';\nimport { Select } from '../select/Select';\nimport { capitalize } from '../utils';\nimport { Icon } from '../vectoricon';\nimport { TembaList } from './TembaList';\n\nconst FLOW_COLOR = 'rgb(223, 65, 159)';\n\nexport class RunList extends TembaList {\n  @property({ type: String })\n  flow: string;\n\n  @property({ type: Object, attribute: false })\n  results: any[];\n\n  @property({ type: Boolean })\n  responses = true;\n\n  @property({ type: Object })\n  resultPreview: any;\n\n  @property({ type: Object })\n  selectedRun: any;\n\n  @property({ type: Boolean })\n  allowDelete = false;\n\n  private resultKeys = {};\n\n  static get styles() {\n    return css`\n      :host {\n        overflow-y: auto !important;\n        --contact-name-font-size: 1em;\n      }\n\n      @media only screen and (max-height: 768px) {\n        temba-options {\n          max-height: 20vh;\n        }\n      }\n\n      temba-options {\n        display: block;\n        width: 100%;\n        flex-grow: 1;\n      }\n    `;\n  }\n\n  public firstUpdated(changedProperties: Map<string, any>) {\n    super.firstUpdated(changedProperties);\n  }\n\n  public updated(changedProperties: Map<string, any>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('responses') || changedProperties.has('flow')) {\n      if (this.flow) {\n        this.endpoint = `/api/v2/runs.json?flow=${this.flow}${\n          this.responses ? '&responded=1' : ''\n        }`;\n      }\n    }\n\n    if (changedProperties.has('resultPreview')) {\n      this.createRenderOption();\n    }\n\n    if (changedProperties.has('results')) {\n      if (this.results) {\n        const select = this.shadowRoot.querySelector(\n          'temba-select'\n        ) as Select<any>;\n        select.setOptions(this.results);\n        this.resultKeys = this.results.reduce(\n          (current, result) => ({ ...current, [result.key]: result }),\n          {}\n        );\n      }\n    }\n  }\n\n  public renderResultPreview(run: any) {\n    if (this.resultPreview) {\n      const runResult = run.values[this.resultPreview.key];\n      if (runResult) {\n        if (this.resultPreview.categories.length > 1) {\n          if (runResult.category) {\n            return runResult.category;\n          }\n        } else {\n          return runResult.value;\n        }\n      }\n    }\n    return null;\n  }\n\n  public removeRun(id: number) {\n    this.items = this.items.filter((run) => run.id !== id);\n    this.cursorIndex = Math.min(this.cursorIndex, this.items.length);\n    this.requestUpdate('cursorIndex');\n  }\n\n  public getIcon(run: any): TemplateResult {\n    let icon = null;\n    if (run.exit_type == 'completed') {\n      icon = html`<temba-icon\n        name=\"check\"\n        style=\"--icon-color:#666;margin-left:0.5em\"\n      />`;\n    } else if (run.exit_type == 'interrupted') {\n      icon = html`<temba-icon\n        name=\"x-octagon\"\n        style=\"--icon-color:${FLOW_COLOR};margin-left:0.5em\"\n      />`;\n    } else if (run.exit_type == 'expired') {\n      icon = html`<temba-icon\n        name=\"clock\"\n        style=\"--icon-color:${FLOW_COLOR};margin-left:0.5em\"\n      />`;\n    } else if (!run.exit_type) {\n      if (run.responded) {\n        icon = html`<temba-icon\n          name=\"activity\"\n          style=\"--icon-color:var(--color-primary-dark);margin-left:0.5em\"\n        />`;\n      } else {\n        icon = html`<temba-icon\n          name=\"hourglass\"\n          style=\"--icon-color:var(--color-primary-dark);margin-left:0.5em\"\n        />`;\n      }\n    }\n    return icon;\n  }\n\n  public createRenderOption() {\n    this.renderOption = (run: any): TemplateResult => {\n      let statusStyle = '';\n\n      if (!run.exited_on) {\n        statusStyle = 'font-weight:400;';\n      }\n\n      if (!run.responded) {\n        statusStyle += '';\n      }\n\n      return html`\n        <div class=\"row\" style=\"${statusStyle}display:flex;align-items:center\">\n          <div\n            style=\"width:16em;white-space:nowrap;overflow: hidden; text-overflow: ellipsis;\"\n          >\n            <temba-contact-name\n              name=${run.contact.name || run.contact.anon_display}\n              urn=${run.contact.urn}\n              icon-size=\"15\"\n            />\n          </div>\n\n          <div\n            style=\"margin: 0em 1em;flex:1;white-space:nowrap; overflow:hidden; text-overflow: ellipsis;\"\n          >\n            ${this.renderResultPreview(run)}\n          </div>\n\n          <div style=\"flex-shrink:1\">\n            <temba-date value=\"${run.modified_on}\" display=\"duration\" />\n          </div>\n          ${this.getIcon(run)}\n        </div>\n      `;\n    };\n  }\n\n  public getRefreshEndpoint() {\n    if (this.items.length > 0) {\n      const modifiedOn = this.items[0].modified_on;\n      return this.endpoint + '&after=' + modifiedOn;\n    }\n    return this.endpoint;\n  }\n\n  public toggleResponded() {\n    this.responses = (\n      this.shadowRoot.querySelector('#responded') as Checkbox\n    ).checked;\n  }\n\n  public handleColumnChanged(event: any) {\n    if (event.target.values.length > 0) {\n      this.resultPreview = event.target.values[0];\n    } else {\n      this.resultPreview = null;\n    }\n  }\n\n  public handleSelected(selected: any) {\n    this.selectedRun = selected;\n  }\n\n  public getListStyle(): string {\n    return '';\n  }\n\n  public renderHeader(): TemplateResult {\n    return html`\n      <div style=\"display:flex;width:100%;margin-bottom: 1em;\">\n        <div style=\"flex-grow:1\">\n          ${this.results\n            ? html`\n                <temba-select\n                  clearable\n                  placeholder=\"Result Preview\"\n                  valueKey=\"key\"\n                  @change=${this.handleColumnChanged}\n                />\n              `\n            : null}\n        </div>\n        <div style=\"margin-left:1em;\">\n          <temba-checkbox\n            id=\"responded\"\n            label=\"Responses Only\"\n            checked=\"true\"\n            @click=${this.toggleResponded}\n          />\n        </div>\n      </div>\n      <div\n        style=\"\n        font-size:0.8em;\n        color:rgba(0,0,0,.4);\n        text-align:right;\n        background:#f9f9f9;\n        border: 1px solid var(--color-widget-border);\n        margin-bottom:-0.5em; \n        padding-bottom: 0.6em;\n        padding-top: 0.3em;\n        padding-right: 4.5em;\n        border-top-right-radius: var(--curvature);\n        border-top-left-radius: var(--curvature)\n    \"\n      >\n        Last Updated\n      </div>\n    `;\n  }\n\n  public renderFooter(): TemplateResult {\n    if (!this.selectedRun || !this.resultKeys) {\n      return null;\n    }\n\n    const resultKeys = Object.keys(this.selectedRun.values);\n\n    return html` <div\n      style=\"margin-top: 1.5em; margin-bottom:0.5em;flex-grow:1;border-radius:var(--curvature); border: 1px solid var(--color-widget-border);\"\n    >\n      <div style=\"display:flex;flex-direction:column;\">\n        <div\n          style=\"font-size:1.5em;background:#f9f9f9;padding:.75em;padding-top:.35em;display:flex;align-items:center;border-top-right-radius:var(--curvature);border-top-left-radius:var(--curvature)\"\n        >\n          <div>\n            <temba-contact-name\n              style=\"cursor:pointer\"\n              name=${this.selectedRun.contact.name ||\n              this.selectedRun.contact.anon_display}\n              urn=${this.selectedRun.contact.urn}\n              onclick=\"goto(event, this)\"\n              href=\"/contact/read/${this.selectedRun.contact.uuid}/\"\n            ></temba-contact-name>\n            <div\n              style=\"display:flex;margin-left:-0.2em;margin-top:0.25em;font-size: 0.65em\"\n            >\n              ${this.selectedRun.exit_type\n                ? html`\n                    <div style=\"margin-left:2em;flex-grow:1;display:flex\">\n                      ${this.getIcon(this.selectedRun)}\n                      <div style=\"margin-left:0.5em\">\n                        ${capitalize(this.selectedRun.exit_type)}&nbsp;\n                      </div>\n                      <temba-date\n                        value=\"${this.selectedRun.exited_on}\"\n                        compare=\"${this.selectedRun.created_on}\"\n                        display=\"duration\"\n                      />\n                    </div>\n                  `\n                : html`${this.getIcon(this.selectedRun)}\n                    <div style=\"margin-left:1.5em;flex-grow:1;display:flex\">\n                      <div>Started&nbsp;</div>\n                      <temba-date\n                        value=\"${this.selectedRun.created_on}\"\n                        display=\"duration\"\n                      ></temba-date>\n                    </div>`}\n            </div>\n          </div>\n          <div style=\"flex-grow:1\"></div>\n          <div style=\"display:flex;flex-direction: column\">\n            <div style=\"font-size:0.75em\">\n              ${new Date(this.selectedRun.created_on).toLocaleString()}\n            </div>\n            <div\n              style=\"font-size:0.6em;align-self:flex-end;color:#888;line-height:0.75em\"\n            >\n              Started\n            </div>\n          </div>\n          ${this.allowDelete\n            ? html` <temba-icon\n                clickable\n                style=\"margin-left:0.75em;\"\n                name=${Icon.delete}\n                onclick=\"deleteRun(${this.selectedRun.id});\"\n              ></temba-icon>`\n            : null}\n        </div>\n\n        ${resultKeys.length > 0\n          ? html`\n              <div style=\"padding:1em;\">\n                <div\n                  style=\"display:flex;font-size:1.2em;position:relative;right:0px\"\n                >\n                  <div style=\"flex-grow:1\"></div>\n                </div>\n\n                <table width=\"100%\">\n                  <tr>\n                    <th style=\"text-align:left\" width=\"25%\">Result</th>\n                    <th style=\"text-align:left\" width=\"25%\">Category</th>\n                    <th style=\"text-align:left\">Value</th>\n                  </tr>\n\n                  ${Object.keys(this.selectedRun.values).map((key: string) => {\n                    const result = this.selectedRun.values[key];\n                    const meta = this.resultKeys[key];\n\n                    // if our result is no longer represented in the flow, skip it\n                    if (meta) {\n                      return html`<tr>\n                        <td>${result.name}</td>\n                        <td>\n                          ${meta.categories.length > 1 ? result.category : '--'}\n                        </td>\n                        <td>${result.value}</td>\n                      </tr>`;\n                    }\n                    return null;\n                  })}\n                </table>\n              </div>\n            `\n          : null}\n      </div>\n    </div>`;\n  }\n\n  constructor() {\n    super();\n    this.reverseRefresh = false;\n    this.valueKey = 'uuid';\n    this.hideShadow = true;\n    this.createRenderOption();\n  }\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyaruka/temba-components",
-  "version": "0.118.4",
+  "version": "0.118.6",
   "description": "Web components to support rapidpro and related projects",
   "author": "Nyaruka <code@nyaruka.coim>",
   "main": "dist/index.js",

package/src/list/RunList.ts

@@ -215,6 +215,7 @@ export class RunList extends TembaList {
                 <temba-select
                   clearable
                   placeholder="Result Preview"
+                  valueKey="key"
                   @change=${this.handleColumnChanged}
                 />
               `

package/static/img/schemes/webchat.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+    width="200"
+    height="200"
+    viewBox="0 0 24 24"
+    fill="white"
+    xmlns="http://www.w3.org/2000/svg">
+    <circle cx="12" cy="12" r="10" fill="#4A90E2"/>
+    <path
+        d="M7 9H17"
+        stroke="white"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"/>
+    <path
+        d="M7 13H13"
+        stroke="white"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"/>
+</svg>