@nyaruka/temba-components 0.129.1 → 0.129.3

package/out-tsc/src/layout/Mask.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Mask.js","sourceRoot":"","sources":["../../../src/layout/Mask.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,MAAM,OAAO,IAAK,SAAQ,UAAU;IAApC;;QAqBE,SAAI,GAAG,KAAK,CAAC;IAOf,CAAC;IALC,MAAM;QACJ,OAAO,IAAI,CAAA,sBAAsB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE;;WAEjD,CAAC;IACV,CAAC;;AA1BM,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;GAiBlB,AAjBY,CAiBX;AAGF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kCACf","sourcesContent":["import { LitElement, css, html } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nexport class Mask extends LitElement {\n  static styles = css`\n    .mask {\n      position: fixed;\n      top: 0;\n      left: 0;\n      z-index: 100;\n      width: 100vw;\n      height: 100vh;\n      background: rgba(0, 0, 0, 0.6);\n      display: none;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .show {\n      display: flex;\n    }\n  `;\n\n  @property({ type: Boolean })\n  show = false;\n\n  render() {\n    return html` <div class=\"mask  ${this.show ? 'show' : ''}\">\n      <slot></slot>\n    </div>`;\n  }\n}\n"]}

package/out-tsc/src/{dialog → layout}/Modax.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modax.js","sourceRoot":"","sources":["../../../src/dialog/Modax.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html.js';\n\nimport { RapidElement } from '../RapidElement';\nimport { getUrl, serialize, postUrl, WebResponse, getClasses } from '../utils';\nimport { CustomEventType } from '../interfaces';\nimport { ButtonType, Dialog, DialogButton } from './Dialog';\n\nexport class Modax extends RapidElement {\n  static get styles() {\n    return css`\n      fieldset {\n        border: none;\n        margin: 0;\n        padding: 0;\n      }\n\n      .control-group {\n        margin-bottom: var(--control-margin-bottom);\n      }\n\n      .form-actions {\n        display: none;\n      }\n\n      button[type='submit'],\n      input[type='submit'] {\n        display: none;\n      }\n\n      .modax-body {\n        padding: 20px;\n        display: block;\n        position: relative;\n        background: var(--body-bg);\n      }\n\n      .modax-body.submitting:before {\n        display: inline-block;\n        content: '';\n        height: 100%;\n        width: 100%;\n        margin-left: -20px;\n        margin-top: -20px;\n        background: rgba(200, 200, 200, 0.1);\n        position: absolute;\n        z-index: 10000;\n      }\n\n      temba-loading {\n        margin: 0 auto;\n        display: block;\n        width: 150px;\n      }\n\n      ul.errorlist {\n        margin-top: 0px;\n        list-style-type: none;\n        padding-left: 0;\n        padding-bottom: 7px;\n      }\n\n      ul.errorlist li {\n        color: var(--color-error);\n        background: rgba(255, 181, 181, 0.17);\n        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),\n          0 1px 2px 0 rgba(0, 0, 0, 0.06);\n        color: tomato;\n        padding: 10px;\n        margin-bottom: 10px;\n        border-radius: 6px;\n      }\n\n      .step-ball {\n        background: rgba(var(--primary-rgb), 0.2);\n        width: 1.2em;\n        height: 1.2em;\n        border-radius: 100%;\n        margin-right: 0.5em;\n        border: 0.15em solid transparent;\n      }\n\n      .step-ball.complete {\n        background: rgba(var(--primary-rgb), 0.7);\n        cursor: pointer;\n      }\n      .step-ball.complete:hover {\n        background: rgba(var(--primary-rgb), 0.8);\n      }\n\n      .step-ball.active {\n        border: 0.15em solid var(--color-primary-dark);\n      }\n\n      .wizard-steps {\n        display: flex;\n        flex-direction: row;\n        margin-left: 0.6em;\n      }\n    `;\n  }\n\n  @property({ type: String })\n  header = '';\n\n  @property({ type: String })\n  endpoint: string;\n\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  @property({ type: Boolean })\n  fetching = false;\n\n  @property({ type: Boolean })\n  submitting: boolean;\n\n  @property({ type: String })\n  primaryName: string;\n\n  @property({ type: String })\n  cancelName: string;\n\n  @property({ type: String })\n  onLoaded: string;\n\n  @property({ type: Boolean })\n  noSubmit: boolean;\n\n  @property({ type: Object })\n  headers: any = {};\n\n  @property({ type: String })\n  body: any = this.getLoading();\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  @property({ type: Array })\n  buttons: DialogButton[] = [];\n\n  @property({ type: Number })\n  wizardStep = 0;\n\n  @property({ type: Number })\n  wizardStepCount = 0;\n\n  @property({ type: Boolean })\n  suspendSubmit = false;\n  // private cancelToken: CancelTokenSource;\n\n  private handleSlotClicked(): void {\n    this.open = true;\n  }\n\n  public updated(changes: Map<string, any>) {\n    super.updated(changes);\n\n    if (changes.has('open')) {\n      if (this.open) {\n        this.fetchForm();\n      } else {\n        // open can get reflected into undefined, make sure we've been open before\n        if (changes.get('open') !== undefined) {\n          // hide our body after our hiding animation is done\n          if (this.open) {\n            window.setTimeout(() => {\n              this.body = this.getLoading();\n              this.submitting = false;\n            }, 500);\n          } else {\n            // clear the modal body out when closed, note that js functions declared on the\n            // window will hang around\n            this.setBody('');\n          }\n        }\n      }\n    }\n\n    if (changes.has('body') && this.open && this.body && !this.fetching) {\n      const dialog = this.shadowRoot.querySelector('temba-dialog') as Dialog;\n      dialog.focusFirstInput();\n    }\n  }\n\n  private getLoading() {\n    return html`<temba-loading units=\"6\" size=\"8\"></temba-loading>`;\n  }\n\n  public updatePrimaryButton(): void {\n    const wizard = this.shadowRoot.querySelector(\n      '#wizard-form'\n    ) as HTMLDivElement;\n    if (wizard) {\n      this.wizardStep = parseInt(wizard.dataset.step);\n      this.wizardStepCount = parseInt(wizard.dataset.steps);\n    }\n\n    if (!this.noSubmit) {\n      this.updateComplete.then(() => {\n        const submitButton = this.shadowRoot.querySelector(\n          \"input[type='submit'],button[type='submit']\"\n        ) as any;\n\n        if (submitButton) {\n          this.buttons = [\n            { type: ButtonType.SECONDARY, name: 'Cancel', closes: true },\n            { type: ButtonType.PRIMARY, name: submitButton.value }\n          ];\n        } else {\n          this.buttons = [\n            { type: ButtonType.SECONDARY, name: 'Ok', closes: true }\n          ];\n        }\n        this.submitting = false;\n      });\n    }\n  }\n\n  private setBody(body: string): boolean {\n    // remove any existing on our previous body\n    const scriptBlock = this.shadowRoot.querySelector('.scripts') as any;\n    for (const child of scriptBlock.children) {\n      child.remove();\n    }\n\n    // parse out any scripts in the body\n    const div = this.ownerDocument.createElement('div');\n    div.innerHTML = body;\n    const scripts = div.getElementsByTagName('script');\n    const toAdd: any = [];\n    // now add them in\n    for (let i = scripts.length - 1; i >= 0; i--) {\n      // for (let i = 0; i < scripts.length; i++) {\n      const script = this.ownerDocument.createElement('script');\n      const code = scripts[i].innerText;\n\n      if (scripts[i].src && scripts[i].src.indexOf('web-dev-server') === -1) {\n        script.src = scripts[i].src;\n        script.type = 'text/javascript';\n        script.async = true;\n\n        // TODO: track and fire event once all scripts are loaded\n        // eslint-disable-next-line @typescript-eslint/no-empty-function\n        script.onload = function () {};\n        toAdd.push(script);\n      } else if (code) {\n        script.appendChild(this.ownerDocument.createTextNode(code));\n        toAdd.push(script);\n        // remove it from our current body text\n      }\n      scripts[i].remove();\n    }\n\n    const scriptOnly = !!div.querySelector('.success-script');\n\n    if (!scriptOnly) {\n      this.body = unsafeHTML(div.innerHTML);\n    }\n\n    this.updateComplete.then(() => {\n      for (const script of toAdd) {\n        scriptBlock.appendChild(script);\n      }\n    });\n    return !scriptOnly;\n  }\n\n  public getHeaders(): any {\n    const headers = this.headers;\n    headers['X-PJAX'] = 1;\n    return headers;\n  }\n\n  private fetchForm() {\n    // const CancelToken = axios.CancelToken;\n    // this.cancelToken = CancelToken.source();\n    this.fetching = true;\n    this.body = this.getLoading();\n    getUrl(this.endpoint, null, this.getHeaders())\n      .then((response: WebResponse) => {\n        // if it's a full page, breakout of the modal\n        if (response.body.indexOf('<!DOCTYPE HTML>') == 0) {\n          this.open = false;\n          document.location = response.url;\n        } else {\n          this.setBody(response.body);\n          this.fetching = false;\n          this.updateComplete.then(() => {\n            this.updatePrimaryButton();\n            this.fireCustomEvent(CustomEventType.Loaded, {\n              body: this.getBody()\n            });\n          });\n        }\n      })\n      .catch((error) => {\n        this.fetching = false;\n        this.open = false;\n        this.fireCustomEvent(CustomEventType.Error, { error });\n      });\n  }\n\n  public submit(extra = {}): void {\n    this.submitting = true;\n    const form = this.shadowRoot.querySelector('form');\n\n    let postData = form ? serialize(form) : '';\n    if (extra) {\n      Object.keys(extra).forEach((key) => {\n        postData +=\n          (postData.length > 1 ? '&' : '') +\n          encodeURIComponent(key) +\n          '=' +\n          encodeURIComponent(extra[key]);\n      });\n    }\n\n    postUrl(\n      this.endpoint,\n      postData,\n      this.getHeaders(),\n      'application/x-www-form-urlencoded'\n    )\n      .then((response: WebResponse) => {\n        window.setTimeout(() => {\n          let redirect = response.headers.get('X-Temba-Success');\n          if (\n            !redirect &&\n            response.url &&\n            response.url.indexOf(this.endpoint) === -1\n          ) {\n            redirect = response.url;\n          }\n\n          if (redirect) {\n            if (redirect === 'hide') {\n              this.updateComplete.then(() => {\n                this.open = false;\n                this.fireCustomEvent(CustomEventType.Submitted);\n              });\n            } else {\n              this.fireCustomEvent(CustomEventType.Redirected, {\n                url: redirect\n              });\n              this.open = false;\n            }\n          } else {\n            if (response.body.indexOf('<!DOCTYPE HTML>') == 0) {\n              this.open = false;\n              document.location = response.url;\n              return;\n            }\n\n            // if we set the body, update our submit button\n            if (this.setBody(response.body)) {\n              this.updateComplete.then(() => {\n                this.updatePrimaryButton();\n              });\n            }\n          }\n        }, 1000);\n      })\n      .catch((error) => {\n        console.error(error);\n      });\n  }\n\n  private handleDialogClick(evt: CustomEvent) {\n    const button = evt.detail.button;\n    const detail = evt.detail.detail;\n    if (!button.disabled && !button.submitting) {\n      if (button.primary || button.destructive) {\n        if (!this.suspendSubmit) {\n          this.submit();\n        }\n      }\n    }\n\n    if (detail.closes) {\n      this.open = false;\n      this.fetching = false;\n      this.cancelName = undefined;\n    }\n  }\n\n  private handleDialogHidden() {\n    // this.cancelToken.cancel();\n    this.open = false;\n    this.fetching = false;\n  }\n\n  private isDestructive(): boolean {\n    return (\n      this.endpoint &&\n      (this.endpoint.indexOf('delete') > -1 ||\n        this.endpoint.indexOf('interrupt') > -1)\n    );\n  }\n\n  private handleGotoStep(evt: MouseEvent) {\n    const step = (evt.target as HTMLDivElement).dataset.gotoStep;\n    if (step) {\n      this.submit({ wizard_goto_step: step });\n    }\n  }\n\n  public getBody() {\n    return this.shadowRoot.querySelector('.modax-body');\n  }\n\n  public render(): TemplateResult {\n    const wizardStepBalls = [];\n\n    const wizard = this.shadowRoot.querySelector(\n      '#wizard-form'\n    ) as HTMLDivElement;\n    if (wizard) {\n      const completed = (wizard.getAttribute('data-completed') || '')\n        .split(',')\n        .filter((step) => step.length > 0);\n\n      for (let i = 0; i < this.wizardStepCount; i++) {\n        wizardStepBalls.push(\n          html`<div\n            data-goto-step=${completed[i]}\n            @click=${this.handleGotoStep.bind(this)}\n            class=\"${getClasses({\n              'step-ball': true,\n              active: this.wizardStep - 1 === i,\n              complete: i < completed.length\n            })}\"\n          ></div>`\n        );\n      }\n    }\n\n    return html`\n      <temba-dialog\n        .header=${this.header}\n        .buttons=${this.buttons}\n        ?open=${this.open}\n        ?loading=${this.fetching}\n        ?submitting=${this.submitting}\n        ?destructive=${this.isDestructive()}\n        ?noFocus=${true}\n        ?disabled=${this.disabled}\n        @temba-button-clicked=${this.handleDialogClick.bind(this)}\n        @temba-dialog-hidden=${this.handleDialogHidden.bind(this)}\n      >\n        <div\n          class=\"modax-body ${this.submitting ? 'submitting' : ''}\"\n          style=\"${this.isMobile() ? 'flex-grow:1' : ''}\"\n        >\n          ${this.body}\n        </div>\n        <div class=\"scripts\"></div>\n        <div slot=\"gutter\">\n          <div class=\"wizard-steps\">${wizardStepBalls}</div>\n        </div>\n      </temba-dialog>\n      <div class=\"slot-wrapper\" @click=${this.handleSlotClicked}>\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"Modax.js","sourceRoot":"","sources":["../../../src/layout/Modax.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html.js';\n\nimport { RapidElement } from '../RapidElement';\nimport { getUrl, serialize, postUrl, WebResponse, getClasses } from '../utils';\nimport { CustomEventType } from '../interfaces';\nimport { ButtonType, Dialog, DialogButton } from './Dialog';\n\nexport class Modax extends RapidElement {\n  static get styles() {\n    return css`\n      fieldset {\n        border: none;\n        margin: 0;\n        padding: 0;\n      }\n\n      .control-group {\n        margin-bottom: var(--control-margin-bottom);\n      }\n\n      .form-actions {\n        display: none;\n      }\n\n      button[type='submit'],\n      input[type='submit'] {\n        display: none;\n      }\n\n      .modax-body {\n        padding: 20px;\n        display: block;\n        position: relative;\n        background: var(--body-bg);\n      }\n\n      .modax-body.submitting:before {\n        display: inline-block;\n        content: '';\n        height: 100%;\n        width: 100%;\n        margin-left: -20px;\n        margin-top: -20px;\n        background: rgba(200, 200, 200, 0.1);\n        position: absolute;\n        z-index: 10000;\n      }\n\n      temba-loading {\n        margin: 0 auto;\n        display: block;\n        width: 150px;\n      }\n\n      ul.errorlist {\n        margin-top: 0px;\n        list-style-type: none;\n        padding-left: 0;\n        padding-bottom: 7px;\n      }\n\n      ul.errorlist li {\n        color: var(--color-error);\n        background: rgba(255, 181, 181, 0.17);\n        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),\n          0 1px 2px 0 rgba(0, 0, 0, 0.06);\n        color: tomato;\n        padding: 10px;\n        margin-bottom: 10px;\n        border-radius: 6px;\n      }\n\n      .step-ball {\n        background: rgba(var(--primary-rgb), 0.2);\n        width: 1.2em;\n        height: 1.2em;\n        border-radius: 100%;\n        margin-right: 0.5em;\n        border: 0.15em solid transparent;\n      }\n\n      .step-ball.complete {\n        background: rgba(var(--primary-rgb), 0.7);\n        cursor: pointer;\n      }\n      .step-ball.complete:hover {\n        background: rgba(var(--primary-rgb), 0.8);\n      }\n\n      .step-ball.active {\n        border: 0.15em solid var(--color-primary-dark);\n      }\n\n      .wizard-steps {\n        display: flex;\n        flex-direction: row;\n        margin-left: 0.6em;\n      }\n    `;\n  }\n\n  @property({ type: String })\n  header = '';\n\n  @property({ type: String })\n  endpoint: string;\n\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  @property({ type: Boolean })\n  fetching = false;\n\n  @property({ type: Boolean })\n  submitting: boolean;\n\n  @property({ type: String })\n  primaryName: string;\n\n  @property({ type: String })\n  cancelName: string;\n\n  @property({ type: String })\n  onLoaded: string;\n\n  @property({ type: Boolean })\n  noSubmit: boolean;\n\n  @property({ type: Object })\n  headers: any = {};\n\n  @property({ type: String })\n  body: any = this.getLoading();\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  @property({ type: Array })\n  buttons: DialogButton[] = [];\n\n  @property({ type: Number })\n  wizardStep = 0;\n\n  @property({ type: Number })\n  wizardStepCount = 0;\n\n  @property({ type: Boolean })\n  suspendSubmit = false;\n  // private cancelToken: CancelTokenSource;\n\n  private handleSlotClicked(): void {\n    this.open = true;\n  }\n\n  public updated(changes: Map<string, any>) {\n    super.updated(changes);\n\n    if (changes.has('open')) {\n      if (this.open) {\n        this.fetchForm();\n      } else {\n        // open can get reflected into undefined, make sure we've been open before\n        if (changes.get('open') !== undefined) {\n          // hide our body after our hiding animation is done\n          if (this.open) {\n            window.setTimeout(() => {\n              this.body = this.getLoading();\n              this.submitting = false;\n            }, 500);\n          } else {\n            // clear the modal body out when closed, note that js functions declared on the\n            // window will hang around\n            this.setBody('');\n          }\n        }\n      }\n    }\n\n    if (changes.has('body') && this.open && this.body && !this.fetching) {\n      const dialog = this.shadowRoot.querySelector('temba-dialog') as Dialog;\n      dialog.focusFirstInput();\n    }\n  }\n\n  private getLoading() {\n    return html`<temba-loading units=\"6\" size=\"8\"></temba-loading>`;\n  }\n\n  public updatePrimaryButton(): void {\n    const wizard = this.shadowRoot.querySelector(\n      '#wizard-form'\n    ) as HTMLDivElement;\n    if (wizard) {\n      this.wizardStep = parseInt(wizard.dataset.step);\n      this.wizardStepCount = parseInt(wizard.dataset.steps);\n    }\n\n    if (!this.noSubmit) {\n      this.updateComplete.then(() => {\n        const submitButton = this.shadowRoot.querySelector(\n          \"input[type='submit'],button[type='submit']\"\n        ) as any;\n\n        if (submitButton) {\n          this.buttons = [\n            { type: ButtonType.SECONDARY, name: 'Cancel', closes: true },\n            { type: ButtonType.PRIMARY, name: submitButton.value }\n          ];\n        } else {\n          this.buttons = [\n            { type: ButtonType.SECONDARY, name: 'Ok', closes: true }\n          ];\n        }\n        this.submitting = false;\n      });\n    }\n  }\n\n  private setBody(body: string): boolean {\n    // remove any existing on our previous body\n    const scriptBlock = this.shadowRoot.querySelector('.scripts') as any;\n    for (const child of scriptBlock.children) {\n      child.remove();\n    }\n\n    // parse out any scripts in the body\n    const div = this.ownerDocument.createElement('div');\n    div.innerHTML = body;\n    const scripts = div.getElementsByTagName('script');\n    const toAdd: any = [];\n    // now add them in\n    for (let i = scripts.length - 1; i >= 0; i--) {\n      // for (let i = 0; i < scripts.length; i++) {\n      const script = this.ownerDocument.createElement('script');\n      const code = scripts[i].innerText;\n\n      if (scripts[i].src && scripts[i].src.indexOf('web-dev-server') === -1) {\n        script.src = scripts[i].src;\n        script.type = 'text/javascript';\n        script.async = true;\n\n        // TODO: track and fire event once all scripts are loaded\n        // eslint-disable-next-line @typescript-eslint/no-empty-function\n        script.onload = function () {};\n        toAdd.push(script);\n      } else if (code) {\n        script.appendChild(this.ownerDocument.createTextNode(code));\n        toAdd.push(script);\n        // remove it from our current body text\n      }\n      scripts[i].remove();\n    }\n\n    const scriptOnly = !!div.querySelector('.success-script');\n\n    if (!scriptOnly) {\n      this.body = unsafeHTML(div.innerHTML);\n    }\n\n    this.updateComplete.then(() => {\n      for (const script of toAdd) {\n        scriptBlock.appendChild(script);\n      }\n    });\n    return !scriptOnly;\n  }\n\n  public getHeaders(): any {\n    const headers = this.headers;\n    headers['X-PJAX'] = 1;\n    return headers;\n  }\n\n  private fetchForm() {\n    // const CancelToken = axios.CancelToken;\n    // this.cancelToken = CancelToken.source();\n    this.fetching = true;\n    this.body = this.getLoading();\n    getUrl(this.endpoint, null, this.getHeaders())\n      .then((response: WebResponse) => {\n        // if it's a full page, breakout of the modal\n        if (response.body.indexOf('<!DOCTYPE HTML>') == 0) {\n          this.open = false;\n          document.location = response.url;\n        } else {\n          this.setBody(response.body);\n          this.fetching = false;\n          this.updateComplete.then(() => {\n            this.updatePrimaryButton();\n            this.fireCustomEvent(CustomEventType.Loaded, {\n              body: this.getBody()\n            });\n          });\n        }\n      })\n      .catch((error) => {\n        this.fetching = false;\n        this.open = false;\n        this.fireCustomEvent(CustomEventType.Error, { error });\n      });\n  }\n\n  public submit(extra = {}): void {\n    this.submitting = true;\n    const form = this.shadowRoot.querySelector('form');\n\n    let postData = form ? serialize(form) : '';\n    if (extra) {\n      Object.keys(extra).forEach((key) => {\n        postData +=\n          (postData.length > 1 ? '&' : '') +\n          encodeURIComponent(key) +\n          '=' +\n          encodeURIComponent(extra[key]);\n      });\n    }\n\n    postUrl(\n      this.endpoint,\n      postData,\n      this.getHeaders(),\n      'application/x-www-form-urlencoded'\n    )\n      .then((response: WebResponse) => {\n        window.setTimeout(() => {\n          let redirect = response.headers.get('X-Temba-Success');\n          if (\n            !redirect &&\n            response.url &&\n            response.url.indexOf(this.endpoint) === -1\n          ) {\n            redirect = response.url;\n          }\n\n          if (redirect) {\n            if (redirect === 'hide') {\n              this.updateComplete.then(() => {\n                this.open = false;\n                this.fireCustomEvent(CustomEventType.Submitted);\n              });\n            } else {\n              this.fireCustomEvent(CustomEventType.Redirected, {\n                url: redirect\n              });\n              this.open = false;\n            }\n          } else {\n            if (response.body.indexOf('<!DOCTYPE HTML>') == 0) {\n              this.open = false;\n              document.location = response.url;\n              return;\n            }\n\n            // if we set the body, update our submit button\n            if (this.setBody(response.body)) {\n              this.updateComplete.then(() => {\n                this.updatePrimaryButton();\n              });\n            }\n          }\n        }, 1000);\n      })\n      .catch((error) => {\n        console.error(error);\n      });\n  }\n\n  private handleDialogClick(evt: CustomEvent) {\n    const button = evt.detail.button;\n    const detail = evt.detail.detail;\n    if (!button.disabled && !button.submitting) {\n      if (button.primary || button.destructive) {\n        if (!this.suspendSubmit) {\n          this.submit();\n        }\n      }\n    }\n\n    if (detail.closes) {\n      this.open = false;\n      this.fetching = false;\n      this.cancelName = undefined;\n    }\n  }\n\n  private handleDialogHidden() {\n    // this.cancelToken.cancel();\n    this.open = false;\n    this.fetching = false;\n  }\n\n  private isDestructive(): boolean {\n    return (\n      this.endpoint &&\n      (this.endpoint.indexOf('delete') > -1 ||\n        this.endpoint.indexOf('interrupt') > -1)\n    );\n  }\n\n  private handleGotoStep(evt: MouseEvent) {\n    const step = (evt.target as HTMLDivElement).dataset.gotoStep;\n    if (step) {\n      this.submit({ wizard_goto_step: step });\n    }\n  }\n\n  public getBody() {\n    return this.shadowRoot.querySelector('.modax-body');\n  }\n\n  public render(): TemplateResult {\n    const wizardStepBalls = [];\n\n    const wizard = this.shadowRoot.querySelector(\n      '#wizard-form'\n    ) as HTMLDivElement;\n    if (wizard) {\n      const completed = (wizard.getAttribute('data-completed') || '')\n        .split(',')\n        .filter((step) => step.length > 0);\n\n      for (let i = 0; i < this.wizardStepCount; i++) {\n        wizardStepBalls.push(\n          html`<div\n            data-goto-step=${completed[i]}\n            @click=${this.handleGotoStep.bind(this)}\n            class=\"${getClasses({\n              'step-ball': true,\n              active: this.wizardStep - 1 === i,\n              complete: i < completed.length\n            })}\"\n          ></div>`\n        );\n      }\n    }\n\n    return html`\n      <temba-dialog\n        .header=${this.header}\n        .buttons=${this.buttons}\n        ?open=${this.open}\n        ?loading=${this.fetching}\n        ?submitting=${this.submitting}\n        ?destructive=${this.isDestructive()}\n        ?noFocus=${true}\n        ?disabled=${this.disabled}\n        @temba-button-clicked=${this.handleDialogClick.bind(this)}\n        @temba-dialog-hidden=${this.handleDialogHidden.bind(this)}\n      >\n        <div\n          class=\"modax-body ${this.submitting ? 'submitting' : ''}\"\n          style=\"${this.isMobile() ? 'flex-grow:1' : ''}\"\n        >\n          ${this.body}\n        </div>\n        <div class=\"scripts\"></div>\n        <div slot=\"gutter\">\n          <div class=\"wizard-steps\">${wizardStepBalls}</div>\n        </div>\n      </temba-dialog>\n      <div class=\"slot-wrapper\" @click=${this.handleSlotClicked}>\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"]}

package/out-tsc/src/layout/Resizer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Resizer.js","sourceRoot":"","sources":["../../../src/layout/Resizer.ts"],"names":[],"mappings":"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","sourcesContent":["import { PropertyValueMap, css, html } from 'lit';\nimport { getClasses } from '../utils';\nimport { property } from 'lit/decorators.js';\nimport { CustomEventType } from '../interfaces';\nimport { ResizeElement } from '../ResizeElement';\n\nexport class Resizer extends ResizeElement {\n  static styles = css`\n    :host {\n      display: block;\n      position: relative;\n      width: var(--box-width, 200px);\n      --resizer-handle-size: 15px;\n    }\n\n    .resizer {\n      position: absolute;\n      right: calc(var(--resizer-handle-size) * -1);\n      height: 100%;\n      cursor: col-resize;\n      padding: 0 calc(var(--resizer-handle-size) / 2);\n      z-index: 1;\n    }\n\n    .resizer-handle {\n      position: relative;\n      width: 4px;\n      background: rgba(0, 0, 0, 0);\n      height: 100%;\n    }\n\n    .resizer:hover .resizer-handle {\n      background: rgba(0, 0, 0, 0.05);\n      width: 3px;\n      margin-right: -1px;\n    }\n\n    .resizing .resizer-handle {\n      background: rgba(0, 0, 0, 0.1) !important;\n      width: 3px;\n      margin-right: -1px;\n    }\n\n    slot {\n      margin-right: var(--resizer-handle-size);\n      background: red;\n    }\n  `;\n\n  initialX: number;\n  boxWidth: number;\n\n  @property({ type: Number })\n  minWidth = 200;\n\n  @property({ type: Number })\n  maxWidth = 2000;\n\n  @property({ type: Boolean })\n  resizing = false;\n\n  @property({ type: Number })\n  currentWidth: number;\n\n  constructor() {\n    super();\n    this.startResize = this.startResize.bind(this);\n    this.resize = this.resize.bind(this);\n    this.stopResize = this.stopResize.bind(this);\n  }\n\n  protected updated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.updated(_changedProperties);\n    if (_changedProperties.has('currentWidth')) {\n      this.style.setProperty('--box-width', `${this.currentWidth}px`);\n    }\n  }\n\n  public setWidth(width: number) {\n    const newWidth = Math.min(Math.max(width, this.minWidth), this.maxWidth);\n    this.currentWidth = newWidth;\n  }\n\n  startResize(e: MouseEvent) {\n    this.initialX = e.x;\n    this.boxWidth = this.offsetWidth;\n    document.body.style.userSelect = 'none';\n    this.resizing = true;\n    window.addEventListener('mousemove', this.resize);\n    window.addEventListener('mouseup', this.stopResize);\n    this.requestUpdate();\n  }\n\n  resize(event: MouseEvent) {\n    const dx = event.x - this.initialX;\n    this.setWidth(this.boxWidth + dx);\n  }\n\n  stopResize() {\n    document.body.style.userSelect = 'initial';\n    window.removeEventListener('mousemove', this.resize);\n    window.removeEventListener('mouseup', this.stopResize);\n    this.requestUpdate();\n    this.resizing = false;\n\n    this.fireCustomEvent(CustomEventType.Resized, { width: this.currentWidth });\n  }\n\n  render() {\n    return html`\n      <div\n        class=${getClasses({ resizer: true, resizing: this.resizing })}\n        @mousedown=\"${this.startResize}\"\n      >\n        <div class=${getClasses({ 'resizer-handle': true })}></div>\n      </div>\n      <slot></slot>\n    `;\n  }\n}\n"]}

package/out-tsc/src/layout/Tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../src/layout/Tab.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { RapidElement } from '../RapidElement';\nimport { getClasses } from '../utils';\n\nexport class Tab extends RapidElement {\n  static get styles() {\n    return css`\n      :host {\n        display: none;\n        flex-direction: column;\n        min-height: 0;\n        pointer-events: none;\n      }\n\n      :host(.selected) {\n        display: flex;\n        flex-grow: 1;\n        pointer-events: auto;\n      }\n    `;\n  }\n\n  @property({ type: String })\n  name: string;\n\n  @property({ type: String })\n  icon: string;\n\n  @property({ type: String })\n  selectionColor: string;\n\n  @property({ type: String })\n  selectionBackground: string;\n\n  @property({ type: String })\n  borderColor: string = 'var(--color-widget-border)';\n\n  @property({ type: String })\n  activityColor: string = `var(--color-link-primary)`;\n\n  @property({ type: Boolean })\n  selected = false;\n\n  @property({ type: Boolean })\n  notify = false;\n\n  @property({ type: Boolean })\n  alert = false;\n\n  @property({ type: Boolean })\n  hidden = false;\n\n  @property({ type: Boolean })\n  hideEmpty = false;\n\n  // show just that there is activity instead of count\n  @property({ type: Boolean })\n  activity = false;\n\n  @property({ type: Number })\n  count = 0;\n\n  @property({ type: Boolean })\n  checked = false;\n\n  @property({ type: Boolean })\n  dirty = false;\n\n  public updated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.updated(changes);\n    if (changes.has('selected')) {\n      this.classList.toggle('selected', this.selected);\n    }\n  }\n\n  public hasBadge() {\n    return this.count > 0;\n  }\n\n  public handleDetailsChanged(event: CustomEvent) {\n    if ('dirty' in event.detail) {\n      this.dirty = event.detail.dirty;\n    }\n    if ('count' in event.detail) {\n      this.count = event.detail.count;\n      if (this.hideEmpty) {\n        this.hidden = this.count === 0;\n      }\n    }\n  }\n\n  public render(): TemplateResult {\n    return html`<slot\n      @temba-details-changed=${this.handleDetailsChanged}\n      class=\"${getClasses({ selected: this.selected })}\"\n    ></slot> `;\n  }\n}\n"]}

package/out-tsc/src/layout/TabPane.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabPane.js","sourceRoot":"","sources":["../../../src/layout/TabPane.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAoC,MAAM,KAAK,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGtC,MAAM,OAAO,OAAQ,SAAQ,YAAY;IAAzC;;QA6NE,aAAQ,GAAG,KAAK,CAAC;QAGjB,cAAS,GAAG,KAAK,CAAC;QAElB,0CAA0C;QAE1C,aAAQ,GAAG,KAAK,CAAC;QAEjB,4CAA4C;QAE5C,gBAAW,GAAG,KAAK,CAAC;QAGpB,UAAK,GAAG,CAAC,CAAC,CAAC;QAGX,YAAO,GAAG,EAAE,CAAC;QAGb,YAAO,GAAU,EAAE,CAAC;IAqNtB,CAAC;IArcC,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuNT,CAAC;IACJ,CAAC;IAyBO,cAAc,CAAC,KAAiB;QACtC,MAAM,QAAQ,GAAG,QAAQ,CACtB,KAAK,CAAC,aAAgC,CAAC,OAAO,CAAC,KAAK,CACtD,CAAC;QAEF,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,KAAK,KAAK,QAAQ,EAAE,CAAC;YAC7C,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;QAClB,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;QACxB,CAAC;QAED,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9B,CAAC;IAEM,gBAAgB;QACrB,MAAM,IAAI,GAAU,EAAE,CAAC;QACvB,KAAK,MAAM,CAAC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAC9B,IAAI,CAAC,CAAC,OAAO,KAAK,WAAW,EAAE,CAAC;gBAC9B,MAAM,GAAG,GAAG,CAAQ,CAAC;gBACrB,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YACjB,CAAC;QACH,CAAC;QACD,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACpB,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;IACjB,CAAC;IAEM,YAAY,CACjB,OAA0D;QAE1D,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QAC5B,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAC9B,YAAY,EACZ,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CACjC,CAAC;IACJ,CAAC;IAEM,OAAO,CAAC,iBAAmC;QAChD,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QAEjC,IAAI,iBAAiB,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,CAAC;YACrC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;gBAClC,GAAG,CAAC,QAAQ,GAAG,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC;YACrC,CAAC,CAAC,CAAC;QACL,CAAC;QAED,IAAI,iBAAiB,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACnC,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,IAAI,CAAC,EAAE,CAAC;gBAC7B,IAAI,IAAI,CAAC,KAAK,KAAK,iBAAiB,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;oBAClD,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;wBAClC,GAAG,CAAC,QAAQ,GAAG,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC;oBACrC,CAAC,CAAC,CAAC;oBACH,IAAI,CAAC,SAAS,CAAC,eAAe,CAAC,cAAc,CAAC,CAAC;gBACjD,CAAC;YACH,CAAC;QACH,CAAC;QAED,6DAA6D;QAC7D,IAAI,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC;YACrC,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACrC,IAAI,GAAG,IAAI,GAAG,CAAC,MAAM,EAAE,CAAC;gBACtB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;oBAC7C,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;oBAC9B,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;wBAC3B,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;wBACf,OAAO;oBACT,CAAC;gBACH,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC;IAEM,QAAQ,CAAC,IAAY;QAC1B,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC;QACjE,IAAI,KAAK,IAAI,CAAC,EAAE,CAAC;YACf,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;YACnB,OAAO,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC5B,CAAC;IACH,CAAC;IAEM,aAAa,CAClB,KAAa,EACb,OAA2C;QAE3C,IAAI,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC;YAChC,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;YAChC,GAAG,CAAC,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC;YAC1B,GAAG,CAAC,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;YAC5B,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC;aAAM,CAAC;YACN,2CAA2C;YAC3C,UAAU,CAAC,GAAG,EAAE;gBACd,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;YACrC,CAAC,EAAE,GAAG,CAAC,CAAC;QACV,CAAC;IACH,CAAC;IAEM,aAAa;QAClB,OAAO,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAClC,CAAC;IAEM,MAAM,CAAC,KAAa;QACzB,OAAO,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;IAC7B,CAAC;IAEM,uBAAuB;QAC5B,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAEM,uBAAuB;QAC5B,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAEM,MAAM;QACX,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC3C,OAAO,IAAI,CAAA;;iBAEE,UAAU,CAAC;YAClB,OAAO,EAAE,IAAI;YACb,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,WAAW,EAAE,IAAI,CAAC,WAAW;YAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC;;UAEA,IAAI,CAAC,OAAO,CAAC,GAAG,CAChB,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;uBAEP,IAAI,CAAC,cAAc;2BACf,KAAK;uBACT,UAAU,CAAC;YAClB,MAAM,EAAE,IAAI;YACZ,KAAK,EAAE,KAAK,IAAI,CAAC;YACjB,QAAQ,EAAE,KAAK,IAAI,IAAI,CAAC,KAAK;YAC7B,MAAM,EAAE,GAAG,CAAC,MAAM;YAClB,MAAM,EAAE,GAAG,CAAC,MAAM;YAClB,KAAK,EAAE,GAAG,CAAC,KAAK;YAChB,KAAK,EAAE,GAAG,CAAC,KAAK;SACjB,CAAC;uBACO,GAAG,CAAC,cAAc,IAAI,KAAK,IAAI,IAAI,CAAC,KAAK;YAChD,CAAC,CAAC,SAAS,GAAG,CAAC,cAAc,iBAAiB,GAAG,CAAC,cAAc,GAAG;YACnE,CAAC,CAAC,EAAE,IAAI,GAAG,CAAC,mBAAmB,IAAI,KAAK,IAAI,IAAI,CAAC,KAAK;YACtD,CAAC,CAAC,oBAAoB,GAAG,CAAC,mBAAmB,GAAG;YAChD,CAAC,CAAC,EAAE;;gBAEJ,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,oBAAoB,GAAG,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,IAAI;kCACrC,GAAG,CAAC,IAAI,IAAI,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE;gBACnD,GAAG,CAAC,QAAQ,EAAE;YACd,CAAC,CAAC,IAAI,CAAA;;wBAEE,GAAG,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ;gBAC9B,CAAC,CAAC,IAAI,CAAA;8BACA,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,cAAc,EAAE;iCAC3C;gBACT,CAAC,CAAC,IAAI;wBACN,GAAG,CAAC,QAAQ,IAAI,GAAG,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK;gBAC3C,CAAC,CAAC,IAAI,CAAA;;gDAEkB,GAAG,CAAC,aAAa;kCAC/B;gBACV,CAAC,CAAC,IAAI;;mBAEX;YACH,CAAC,CAAC,IAAI;gBACN,GAAG,CAAC,OAAO,IAAI,CAAC,GAAG,CAAC,KAAK;YACzB,CAAC,CAAC,IAAI,CAAA,sDAAsD;YAC5D,CAAC,CAAC,IAAI;;WAEX,CACF;;;;;;;;iCAQwB,IAAI,CAAC,uBAAuB;iBAC5C,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,WAAW;YAC7B,CAAC,CAAC;iEAEE,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,WAAW,KAAI,4BAC5B;;mEAGE,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,WAAW,KAAI,4BAC5B;;uEAGE,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,WAAW,KAAI,4BAC5B;;qEAGE,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,WAAW,KAAI,4BAC5B;;aAEC;YACH,CAAC,CAAC,EAAE,IAAI,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,mBAAmB;YACtC,CAAC,CAAC,cAAc,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,mBAAmB,GAAG;YACjD,CAAC,CAAC,EAAE;sBACQ,UAAU,CAAC;YACvB,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,CAAC;YACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC;;;;;KAKL,CAAC;IACJ,CAAC;CACF;AAzOC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yCACX;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CACV;AAIlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yCACX;AAIjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CACR;AAGpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAChB;AAGX;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACd;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;wCACxB","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { CustomEventType } from '../interfaces';\nimport { RapidElement } from '../RapidElement';\nimport { getClasses } from '../utils';\nimport { Tab } from './Tab';\n\nexport class TabPane extends RapidElement {\n  static get styles() {\n    return css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        min-height: 0;\n        flex-grow: 1;\n      }\n\n      .options {\n        display: flex;\n        align-items: stretch;\n        padding: var(--temba-tabs-options-padding, 0);\n        border-bottom: none;\n      }\n\n      .option {\n        user-select: none;\n        padding: 0.5em 0.7em;\n        margin: 0em 0em;\n        cursor: pointer;\n        display: flex;\n        font-size: 1.1em;\n        align-items: center;\n        border: 1px inset transparent;\n        border-bottom: 0px;\n        border-radius: var(--curvature);\n        border-bottom-right-radius: 0px;\n        border-bottom-left-radius: 0px;\n\n        color: var(--color-text-dark);\n        --icon-color: var(--color-text-dark);\n        white-space: nowrap;\n        transition: all 100ms linear;\n      }\n\n      .focusedname .option .name {\n        transition: all 0s linear !important;\n      }\n\n      .focusedname .option.selected .name {\n        transition: all 200ms linear !important;\n      }\n\n      .option.hidden {\n        display: none;\n      }\n\n      .option temba-icon {\n      }\n\n      .option .name {\n        margin-left: 0.4em;\n        max-width: 200px;\n        overflow: hidden;\n        transition: max-width 500ms ease-in-out, margin 500ms ease-in-out;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n      }\n\n      .option .badge {\n        margin-left: 0.4em;\n      }\n\n      @media (max-width: 900px) {\n        .collapses .option .name {\n          max-width: 0px;\n          margin: 0;\n        }\n      }\n\n      @media (max-width: 600px) {\n        .collapses .option .badge {\n          display: none;\n        }\n      }\n\n      .focusedname .option.selected {\n      }\n\n      .focusedname .option .name {\n        max-width: 0px;\n        margin: 0;\n        transition: max-width 200ms linear, margin 200ms linear;\n      }\n\n      .focusedname .option.selected .name {\n        margin-left: 0.4em;\n        max-width: 200px;\n      }\n\n      .option {\n        transform: scale(0.9) translateY(0em);\n        --icon-color: rgba(0, 0, 0, 0.5);\n        color: rgba(0, 0, 0, 0.5);\n      }\n\n      .option.selected {\n      }\n\n      .option.selected,\n      .option.selected:hover {\n        cursor: default;\n        box-shadow: 0px -3px 3px 1px rgba(0, 0, 0, 0.02);\n\n        background: var(--focused-tab-color, #fff);\n        transform: scale(1) translateY(1px);\n        --icon-color: #666;\n        color: #666;\n        border: 1px inset rgba(0, 0, 0, 0.15);\n        border-bottom: 0px;\n      }\n\n      .option.selected .dot {\n        display: none;\n      }\n\n      .unselect .option.selected {\n        cursor: pointer;\n      }\n\n      .unselect .option.selected:hover {\n        background: var(--unselect-tab-color, #eee);\n      }\n\n      .option:hover {\n        --icon-color: #666;\n        color: #666;\n        background: rgba(0, 0, 0, 0.02);\n      }\n\n      .option.dirty {\n        font-weight: 500;\n      }\n\n      .pane {\n        display: flex;\n        flex-direction: column;\n        flex-grow: 1;\n        background: var(--focused-tab-color, #fff);\n        border-bottom-left-radius: var(--curvature);\n        border-bottom-right-radius: var(--curvature);\n        overflow: hidden;\n\n        box-shadow: var(\n          --tabs-shadow,\n          rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,\n          rgba(0, 0, 0, 0.03) 0px 1px 2px 0px\n        );\n        min-height: 0;\n      }\n\n      .pane.first {\n        border-top-left-radius: 0px;\n        overflow: hidden;\n      }\n\n      .count {\n        border-radius: 99px;\n        background: rgba(0, 0, 0, 0.1);\n        color: rgba(0, 0, 0, 0.5);\n        font-size: 0.7em;\n        font-weight: 500;\n        min-width: 1.5em;\n        text-align: center;\n      }\n\n      .dot {\n        height: 0.5em;\n        width: 0.5em;\n        margin-left: 0.2em;\n        background: var(--color-primary-dark);\n        border-radius: 99px;\n      }\n\n      .notify .count {\n        background: var(--color-alert);\n        color: #fff;\n      }\n\n      .alert {\n        color: var(--color-alert);\n        --icon-color: var(--color-alert);\n      }\n\n      .embedded.pane {\n        box-shadow: none;\n        margin: 0;\n        border-left: none !important;\n        border-right: none !important;\n        border-bottom: none !important;\n      }\n\n      .embedded .option {\n        border-bottom: none !important;\n        border-radius: 0em;\n        border-top: none !important;\n      }\n\n      .embedded .option.first {\n        margin-left: 0em;\n        border-top: none !important;\n        border-left: none;\n      }\n\n      .embedded.options .option.selected {\n        box-shadow: none !important;\n      }\n\n      .check {\n        margin-left: 0.4em;\n      }\n\n      .pane {\n        display: flex;\n      }\n    `;\n  }\n\n  @property({ type: Boolean })\n  embedded = false;\n\n  @property({ type: Boolean })\n  collapses = false;\n\n  // do we allow unselecting the current tab\n  @property({ type: Boolean })\n  unselect = false;\n\n  // Only shows the name if the tab is focused\n  @property({ type: Boolean })\n  focusedName = false;\n\n  @property({ type: Number })\n  index = -1;\n\n  @property({ type: String })\n  refresh = '';\n\n  @property({ type: Array, attribute: false })\n  options: Tab[] = [];\n\n  private handleTabClick(event: MouseEvent): void {\n    const newIndex = parseInt(\n      (event.currentTarget as HTMLDivElement).dataset.index\n    );\n\n    if (this.unselect && this.index === newIndex) {\n      this.index = -1;\n    } else {\n      this.index = newIndex;\n    }\n\n    event.preventDefault();\n    event.stopPropagation();\n    this.requestUpdate('index');\n  }\n\n  public handleSlotChange() {\n    const tabs: Tab[] = [];\n    for (const t of this.children) {\n      if (t.tagName === 'TEMBA-TAB') {\n        const tab = t as Tab;\n        tabs.push(tab);\n      }\n    }\n    this.options = tabs;\n    this.index = 0;\n  }\n\n  public firstUpdated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.firstUpdated(changes);\n    this.shadowRoot.addEventListener(\n      'slotchange',\n      this.handleSlotChange.bind(this)\n    );\n  }\n\n  public updated(changedProperties: Map<string, any>) {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('options')) {\n      this.options.forEach((tab, index) => {\n        tab.selected = index == this.index;\n      });\n    }\n\n    if (changedProperties.has('index')) {\n      if (this.options.length >= 0) {\n        if (this.index !== changedProperties.get('index')) {\n          this.options.forEach((tab, index) => {\n            tab.selected = index == this.index;\n          });\n          this.fireEvent(CustomEventType.ContextChanged);\n        }\n      }\n    }\n\n    // if our current tab is hidden, select the first visible one\n    if (this.index > this.options.length) {\n      const tab = this.options[this.index];\n      if (tab && tab.hidden) {\n        for (let i = 0; i < this.options.length; i++) {\n          const other = this.options[i];\n          if (other && !other.hidden) {\n            this.index = i;\n            return;\n          }\n        }\n      }\n    }\n  }\n\n  public focusTab(name: string): Tab {\n    const index = this.options.findIndex((tab) => tab.name === name);\n    if (index >= 0) {\n      this.index = index;\n      return this.getTab(index);\n    }\n  }\n\n  public setTabDetails(\n    index: number,\n    details: { count: number; hidden: boolean }\n  ) {\n    if (index < this.options.length) {\n      const tab = this.options[index];\n      tab.count = details.count;\n      tab.hidden = details.hidden;\n      this.requestUpdate();\n    } else {\n      // not ready yet, set the tab details later\n      setTimeout(() => {\n        this.setTabDetails(index, details);\n      }, 100);\n    }\n  }\n\n  public getCurrentTab(): Tab {\n    return this.options[this.index];\n  }\n\n  public getTab(index: number): Tab {\n    return this.options[index];\n  }\n\n  public handleTabContentChanged() {\n    this.requestUpdate();\n  }\n\n  public handleTabDetailsChanged() {\n    this.requestUpdate();\n  }\n\n  public render(): TemplateResult {\n    const activeTab = this.options[this.index];\n    return html`\n      <div\n        class=\"${getClasses({\n          options: true,\n          collapses: this.collapses,\n          embedded: this.embedded,\n          focusedname: this.focusedName,\n          unselect: this.unselect\n        })}\"\n      >\n        ${this.options.map(\n          (tab, index) => html`\n            <div\n              @click=${this.handleTabClick}\n              data-index=${index}\n              class=\"${getClasses({\n                option: true,\n                first: index == 0,\n                selected: index == this.index,\n                hidden: tab.hidden,\n                notify: tab.notify,\n                alert: tab.alert,\n                dirty: tab.dirty\n              })}\"\n              style=\"${tab.selectionColor && index == this.index\n                ? `color:${tab.selectionColor};--icon-color:${tab.selectionColor};`\n                : ''} ${tab.selectionBackground && index == this.index\n                ? `background-color:${tab.selectionBackground};`\n                : ''}\"\n            >\n              ${tab.icon ? html`<temba-icon name=${tab.icon} />` : null}\n              <div class=\"name\">${tab.name} ${tab.dirty ? ` *` : ``}</div>\n              ${tab.hasBadge()\n                ? html`\n                    <div class=\"badge\">\n                      ${tab.count > 0 && !tab.activity\n                        ? html`<div class=\"count\">\n                            ${tab.activity ? '' : tab.count.toLocaleString()}\n                          </div>`\n                        : null}\n                      ${tab.activity && tab.count > 0 && !tab.dirty\n                        ? html`<div\n                            class=\"dot\"\n                            style=\"background:${tab.activityColor}\"\n                          ></div>`\n                        : null}\n                    </div>\n                  `\n                : null}\n              ${tab.checked && !tab.alert\n                ? html`<temba-icon class=\"check\" name=\"check\"></temba-icon>`\n                : null}\n            </div>\n          `\n        )}\n\n        <div style=\"flex-grow:1\"></div>\n        <div style=\"display:flex; align-items:center\">\n          <slot name=\"tab-right\"></slot>\n        </div>\n      </div>\n      <div\n        @temba-details-changed=${this.handleTabDetailsChanged}\n        style=\"${activeTab?.borderColor\n          ? `\n            border-top: var(--temba-tabs-border-top, 1px solid ${\n              activeTab?.borderColor || 'var(--color-widget-border)'\n            });\n\n            border-left: var(--temba-tabs-border-left, 1px solid ${\n              activeTab?.borderColor || 'var(--color-widget-border)'\n            });\n\n            border-bottom: var(--temba-tabs-border-bottom, 1px solid ${\n              activeTab?.borderColor || 'var(--color-widget-border)'\n            });\n\n            border-right: var(--temba-tabs-border-right, 1px solid ${\n              activeTab?.borderColor || 'var(--color-widget-border)'\n            });\n\n            `\n          : ''} ${activeTab?.selectionBackground\n          ? `background:${activeTab?.selectionBackground};`\n          : ``}\"\n        class=\"pane ${getClasses({\n          first: this.index == 0,\n          embedded: this.embedded\n        })}\"\n      >\n        <slot></slot>\n        <slot name=\"pane-bottom\"></slot>\n      </div>\n    `;\n  }\n}\n"]}

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

@@ -1,6 +1,6 @@
 import { css, html } from 'lit';
 import { TembaList } from './TembaList';
-import { Icon } from '../vectoricon';
+import { Icon } from '../Icons';
 export class NotificationList extends TembaList {
     static get styles() {
         return css `

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

@@ -1 +1 @@
-{"version":3,"file":"NotificationList.js","sourceRoot":"","sources":["../../../src/list/NotificationList.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAsBrC,MAAM,OAAO,gBAAiB,SAAQ,SAAS;IAG7C,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;KA0BT,CAAC;IACJ,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QAjCV,mBAAc,GAAG,KAAK,CAAC;QACvB,0BAAqB,GAAG,IAAI,CAAC;QAiC3B,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QACtB,IAAI,CAAC,YAAY,GAAG,CAAC,YAA0B,EAAkB,EAAE;YACjE,IAAI,IAAI,GAAG,IAAI,CAAC;YAChB,IAAI,IAAI,GAAG,IAAI,CAAC;YAChB,MAAM,KAAK,GAAG,MAAM,CAAC;YAErB,IAAI,YAAY,CAAC,IAAI,KAAK,kBAAkB,EAAE,CAAC;gBAC7C,IAAI,YAAY,CAAC,QAAQ,CAAC,IAAI,KAAK,aAAa,EAAE,CAAC;oBACjD,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC;oBACtB,IAAI;wBACF,oEAAoE,CAAC;gBACzE,CAAC;qBAAM,IAAI,YAAY,CAAC,QAAQ,CAAC,IAAI,KAAK,eAAe,EAAE,CAAC;oBAC1D,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC;oBACtB,IAAI;wBACF,sEAAsE,CAAC;gBAC3E,CAAC;qBAAM,IAAI,YAAY,CAAC,QAAQ,CAAC,IAAI,KAAK,sBAAsB,EAAE,CAAC;oBACjE,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC;oBACpB,IAAI,GAAG,uCAAuC,CAAC;gBACjD,CAAC;qBAAM,IAAI,YAAY,CAAC,QAAQ,CAAC,IAAI,KAAK,0BAA0B,EAAE,CAAC;oBACrE,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC;oBACpB,IAAI,GAAG,gDAAgD,CAAC;gBAC1D,CAAC;qBAAM,IAAI,YAAY,CAAC,QAAQ,CAAC,IAAI,KAAK,oBAAoB,EAAE,CAAC;oBAC/D,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC;oBACpB,IAAI,GAAG,8CAA8C,CAAC;gBACxD,CAAC;YACH,CAAC;iBAAM,IAAI,YAAY,CAAC,IAAI,KAAK,iBAAiB,EAAE,CAAC;gBACnD,IAAI,YAAY,CAAC,MAAM,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;oBAC3C,IAAI,GAAG,IAAI,CAAC,cAAc,CAAC;oBAC3B,IAAI,GAAG,YAAY,YAAY,CAAC,MAAM,CAAC,WAAW,CAAC,cAAc,EAAE,WAAW,CAAC;gBACjF,CAAC;YACH,CAAC;iBAAM,IAAI,YAAY,CAAC,IAAI,KAAK,iBAAiB,EAAE,CAAC;gBACnD,IAAI,YAAY,CAAC,MAAM,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;oBAC3C,IAAI,GAAG,IAAI,CAAC,cAAc,CAAC;oBAC3B,IAAI,GAAG,YAAY,YAAY,CAAC,MAAM,CAAC,WAAW,CAAC,cAAc,EAAE,WAAW,CAAC;gBACjF,CAAC;qBAAM,IAAI,YAAY,CAAC,MAAM,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;oBAClD,IAAI,GAAG,IAAI,CAAC,cAAc,CAAC;oBAC3B,IAAI,GAAG,YAAY,YAAY,CAAC,MAAM,CAAC,WAAW,CAAC,cAAc,EAAE,WAAW,CAAC;gBACjF,CAAC;qBAAM,IAAI,YAAY,CAAC,MAAM,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;oBAClD,IAAI,GAAG,IAAI,CAAC,cAAc,CAAC;oBAC3B,IAAI,GAAG,uBAAuB,CAAC;gBACjC,CAAC;qBAAM,IAAI,YAAY,CAAC,MAAM,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;oBACjD,IAAI,GAAG,IAAI,CAAC,cAAc,CAAC;oBAC3B,IAAI,GAAG,YAAY,YAAY,CAAC,MAAM,CAAC,WAAW,CAAC,cAAc,EAAE,UAAU,CAAC;gBAChF,CAAC;qBAAM,IAAI,YAAY,CAAC,MAAM,CAAC,IAAI,KAAK,YAAY,EAAE,CAAC;oBACrD,IAAI,GAAG,IAAI,CAAC,kBAAkB,CAAC;oBAC/B,IAAI,GAAG,sBAAsB,CAAC;gBAChC,CAAC;YACH,CAAC;iBAAM,IAAI,YAAY,CAAC,IAAI,KAAK,kBAAkB,EAAE,CAAC;gBACpD,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC;gBACpB,IAAI,GAAG,qBAAqB,CAAC;YAC/B,CAAC;iBAAM,IAAI,YAAY,CAAC,IAAI,KAAK,gBAAgB,EAAE,CAAC;gBAClD,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC;gBACpB,IAAI,GAAG,uBAAuB,CAAC;YACjC,CAAC;YACD,OAAO,IAAI,CAAA;uBACM,KAAK,uEAAuE,YAAY,CAAC,OAAO;gBAC7G,CAAC,CAAC,GAAG;gBACL,CAAC,CAAC,GAAG;;UAEL,IAAI;gBACJ,CAAC,CAAC,IAAI,CAAA;kCACkB,IAAI;mBACnB;gBACT,CAAC,CAAC,IAAI;;2CAE2B,IAAI;;;oBAG3B,YAAY,CAAC,UAAU;;;;aAI9B,CAAC;QACV,CAAC,CAAC;IACJ,CAAC;IAEM,YAAY;QACjB,OAAO,IAAI,CAAA;;;WAGJ,CAAC;IACV,CAAC;IAEM,WAAW;QAChB,yBAAyB;QACzB,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;YACrB,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,eAAe,CAAY,CAAC;YAC1E,OAAO,CAAC,WAAW,EAAE,CAAC;QACxB,CAAC,EAAE,IAAI,CAAC,CAAC;IACX,CAAC;CACF","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { TembaList } from './TembaList';\nimport { Options } from '../options/Options';\nimport { Icon } from '../vectoricon';\n\ninterface Notification {\n  created_on: string;\n  type: string;\n  url: string;\n  is_seen: boolean;\n  export?: {\n    type: string;\n    num_records: number;\n  };\n  import?: {\n    type: string;\n    num_records: number;\n  };\n  incident?: {\n    type: string;\n    started_on: string;\n    ended_on?: string;\n  };\n}\n\nexport class NotificationList extends TembaList {\n  reverseRefresh = false;\n  internalFocusDisabled = true;\n  static get styles() {\n    return css`\n      :host {\n        --option-hover-bg: #f9f9f9;\n      }\n\n      .header {\n        padding: 0.25em 1em;\n        background: #f9f9f9;\n        border-top-left-radius: var(--curvature);\n        border-top-right-radius: var(--curvature);\n        display: flex;\n        color: #999;\n        border-bottom: 1px solid #f3f3f3;\n      }\n\n      .header temba-icon {\n        margin-right: 0.35em;\n      }\n\n      .footer {\n        background: #f9f9f9;\n      }\n\n      .title {\n        font-weight: normal;\n      }\n    `;\n  }\n\n  constructor() {\n    super();\n    this.valueKey = 'url';\n    this.renderOption = (notification: Notification): TemplateResult => {\n      let icon = null;\n      let body = null;\n      const color = '#333';\n\n      if (notification.type === 'incident:started') {\n        if (notification.incident.type === 'org:flagged') {\n          icon = Icon.incidents;\n          body =\n            'Your workspace was flagged, please contact support for assistance.';\n        } else if (notification.incident.type === 'org:suspended') {\n          icon = Icon.incidents;\n          body =\n            'Your workspace was suspended, please contact support for assistance.';\n        } else if (notification.incident.type === 'channel:disconnected') {\n          icon = Icon.channel;\n          body = 'Your android channel is not connected';\n        } else if (notification.incident.type === 'channel:templates_failed') {\n          icon = Icon.channel;\n          body = 'Your WhatsApp channel templates failed syncing';\n        } else if (notification.incident.type === 'webhooks:unhealthy') {\n          icon = Icon.webhook;\n          body = 'Your webhook calls are not working properly.';\n        }\n      } else if (notification.type === 'import:finished') {\n        if (notification.import.type === 'contact') {\n          icon = Icon.contact_import;\n          body = `Imported ${notification.import.num_records.toLocaleString()} contacts`;\n        }\n      } else if (notification.type === 'export:finished') {\n        if (notification.export.type === 'contact') {\n          icon = Icon.contact_export;\n          body = `Exported ${notification.export.num_records.toLocaleString()} contacts`;\n        } else if (notification.export.type === 'message') {\n          icon = Icon.message_export;\n          body = `Exported ${notification.export.num_records.toLocaleString()} messages`;\n        } else if (notification.export.type === 'results') {\n          icon = Icon.results_export;\n          body = 'Exported flow results';\n        } else if (notification.export.type === 'ticket') {\n          icon = Icon.tickets_export;\n          body = `Exported ${notification.export.num_records.toLocaleString()} tickets`;\n        } else if (notification.export.type === 'definition') {\n          icon = Icon.definitions_export;\n          body = 'Exported definitions';\n        }\n      } else if (notification.type === 'tickets:activity') {\n        icon = Icon.tickets;\n        body = 'New ticket activity';\n      } else if (notification.type === 'tickets:opened') {\n        icon = Icon.tickets;\n        body = 'New unassigned ticket';\n      }\n      return html`<div\n        style=\"color:${color};display:flex;align-items:flex-start;flex-direction:row;font-weight:${notification.is_seen\n          ? 400\n          : 500}\"\n      >\n        ${icon\n          ? html`<div style=\"margin-right:0.6em\">\n              <temba-icon name=\"${icon}\"></temba-icon>\n            </div>`\n          : null}\n        <div style=\"display:flex;flex-direction:column\">\n          <div style=\"line-height:1.1em\">${body}</div>\n          <temba-date\n            style=\"font-size:80%\"\n            value=${notification.created_on}\n            display=\"duration\"\n          ></temba-date>\n        </div>\n      </div>`;\n    };\n  }\n\n  public renderHeader(): TemplateResult {\n    return html`<div class=\"header\">\n      <temba-icon name=\"notification\"></temba-icon>\n      <div class=\"title\">Notifications</div>\n    </div>`;\n  }\n\n  public scrollToTop(): void {\n    // scroll back to the top\n    window.setTimeout(() => {\n      const options = this.shadowRoot.querySelector('temba-options') as Options;\n      options.scrollToTop();\n    }, 1000);\n  }\n}\n"]}
+{"version":3,"file":"NotificationList.js","sourceRoot":"","sources":["../../../src/list/NotificationList.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { TembaList } from './TembaList';\nimport { Options } from '../display/Options';\nimport { Icon } from '../Icons';\n\ninterface Notification {\n  created_on: string;\n  type: string;\n  url: string;\n  is_seen: boolean;\n  export?: {\n    type: string;\n    num_records: number;\n  };\n  import?: {\n    type: string;\n    num_records: number;\n  };\n  incident?: {\n    type: string;\n    started_on: string;\n    ended_on?: string;\n  };\n}\n\nexport class NotificationList extends TembaList {\n  reverseRefresh = false;\n  internalFocusDisabled = true;\n  static get styles() {\n    return css`\n      :host {\n        --option-hover-bg: #f9f9f9;\n      }\n\n      .header {\n        padding: 0.25em 1em;\n        background: #f9f9f9;\n        border-top-left-radius: var(--curvature);\n        border-top-right-radius: var(--curvature);\n        display: flex;\n        color: #999;\n        border-bottom: 1px solid #f3f3f3;\n      }\n\n      .header temba-icon {\n        margin-right: 0.35em;\n      }\n\n      .footer {\n        background: #f9f9f9;\n      }\n\n      .title {\n        font-weight: normal;\n      }\n    `;\n  }\n\n  constructor() {\n    super();\n    this.valueKey = 'url';\n    this.renderOption = (notification: Notification): TemplateResult => {\n      let icon = null;\n      let body = null;\n      const color = '#333';\n\n      if (notification.type === 'incident:started') {\n        if (notification.incident.type === 'org:flagged') {\n          icon = Icon.incidents;\n          body =\n            'Your workspace was flagged, please contact support for assistance.';\n        } else if (notification.incident.type === 'org:suspended') {\n          icon = Icon.incidents;\n          body =\n            'Your workspace was suspended, please contact support for assistance.';\n        } else if (notification.incident.type === 'channel:disconnected') {\n          icon = Icon.channel;\n          body = 'Your android channel is not connected';\n        } else if (notification.incident.type === 'channel:templates_failed') {\n          icon = Icon.channel;\n          body = 'Your WhatsApp channel templates failed syncing';\n        } else if (notification.incident.type === 'webhooks:unhealthy') {\n          icon = Icon.webhook;\n          body = 'Your webhook calls are not working properly.';\n        }\n      } else if (notification.type === 'import:finished') {\n        if (notification.import.type === 'contact') {\n          icon = Icon.contact_import;\n          body = `Imported ${notification.import.num_records.toLocaleString()} contacts`;\n        }\n      } else if (notification.type === 'export:finished') {\n        if (notification.export.type === 'contact') {\n          icon = Icon.contact_export;\n          body = `Exported ${notification.export.num_records.toLocaleString()} contacts`;\n        } else if (notification.export.type === 'message') {\n          icon = Icon.message_export;\n          body = `Exported ${notification.export.num_records.toLocaleString()} messages`;\n        } else if (notification.export.type === 'results') {\n          icon = Icon.results_export;\n          body = 'Exported flow results';\n        } else if (notification.export.type === 'ticket') {\n          icon = Icon.tickets_export;\n          body = `Exported ${notification.export.num_records.toLocaleString()} tickets`;\n        } else if (notification.export.type === 'definition') {\n          icon = Icon.definitions_export;\n          body = 'Exported definitions';\n        }\n      } else if (notification.type === 'tickets:activity') {\n        icon = Icon.tickets;\n        body = 'New ticket activity';\n      } else if (notification.type === 'tickets:opened') {\n        icon = Icon.tickets;\n        body = 'New unassigned ticket';\n      }\n      return html`<div\n        style=\"color:${color};display:flex;align-items:flex-start;flex-direction:row;font-weight:${notification.is_seen\n          ? 400\n          : 500}\"\n      >\n        ${icon\n          ? html`<div style=\"margin-right:0.6em\">\n              <temba-icon name=\"${icon}\"></temba-icon>\n            </div>`\n          : null}\n        <div style=\"display:flex;flex-direction:column\">\n          <div style=\"line-height:1.1em\">${body}</div>\n          <temba-date\n            style=\"font-size:80%\"\n            value=${notification.created_on}\n            display=\"duration\"\n          ></temba-date>\n        </div>\n      </div>`;\n    };\n  }\n\n  public renderHeader(): TemplateResult {\n    return html`<div class=\"header\">\n      <temba-icon name=\"notification\"></temba-icon>\n      <div class=\"title\">Notifications</div>\n    </div>`;\n  }\n\n  public scrollToTop(): void {\n    // scroll back to the top\n    window.setTimeout(() => {\n      const options = this.shadowRoot.querySelector('temba-options') as Options;\n      options.scrollToTop();\n    }, 1000);\n  }\n}\n"]}

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

@@ -2,7 +2,7 @@ import { __decorate } from "tslib";
 import { css, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { capitalize } from '../utils';
-import { Icon } from '../vectoricon';
+import { Icon } from '../Icons';
 import { TembaList } from './TembaList';
 const FLOW_COLOR = 'rgb(223, 65, 159)';
 export class RunList extends TembaList {

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

@@ -1 +1 @@
-{"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                  style=\"z-index: 10;\"\n                ></temba-select>\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              ''}\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              ${this.selectedRun.created_on\n                ? new Date(this.selectedRun.created_on).toLocaleString()\n                : ''}\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 '../form/Checkbox';\nimport { Select } from '../form/select/Select';\nimport { capitalize } from '../utils';\nimport { Icon } from '../Icons';\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                  style=\"z-index: 10;\"\n                ></temba-select>\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              ''}\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              ${this.selectedRun.created_on\n                ? new Date(this.selectedRun.created_on).toLocaleString()\n                : ''}\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/out-tsc/src/list/ShortcutList.js.map

@@ -1 +1 @@
-{"version":3,"file":"ShortcutList.js","sourceRoot":"","sources":["../../../src/list/ShortcutList.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAoC,MAAM,KAAK,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAGnE,MAAM,OAAO,YAAa,SAAQ,mBAAmB;IACnD,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;KAsBT,CAAC;IACJ,CAAC;IAWD;QACE,KAAK,EAAE,CAAC;QANV,sBAAiB,GAAG,EAAE,CAAC;QAGvB,gBAAW,GAAG,CAAC,CAAC;IAIhB,CAAC;IAES,YAAY,CACpB,OAA0D;QAE1D,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IAC9B,CAAC;IAEM,YAAY;QACjB,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC;IACrD,CAAC;IAEM,OAAO,CACZ,OAA0D;QAE1D,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QAEvB,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC1B,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;gBACjB,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC;YACrD,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,KAAK;qBAChC,YAAY,EAAE;qBACd,MAAM,CAAC,CAAC,QAAkB,EAAE,EAAE,CAC7B,QAAQ,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,CAChE,CAAC;YACN,CAAC;YACD,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;QACvB,CAAC;IACH,CAAC;IAEM,cAAc,CAAC,QAAkB;QACtC,OAAO,IAAI,CAAA;;;;;;;;;UASL,QAAQ,CAAC,IAAI;;;;;;;;;;;;;;;;;UAiBb,QAAQ,CAAC,IAAI;;WAEZ,CAAC;IACV,CAAC;IAEM,WAAW;QAChB,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,eAAe,CAAY,CAAC;QAC1E,OAAO,OAAO,CAAC,YAAY,EAAE,CAAC;IAChC,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,iBAAiB,CAAC,MAAM,KAAK,CAAC;YACnC,CAAC,CAAC,IAAI,CAAA;cACA,IAAI,CAAC,MAAM;gBACX,CAAC,CAAC,IAAI,CAAA,uCAAuC,IAAI,CAAC,MAAM,UAAU;gBAClE,CAAC,CAAC,IAAI,CAAA;+BACW;iBACd;YACT,CAAC,CAAC,IAAI;;;yBAGW,IAAI,CAAC,iBAAiB,CAAC,MAAM,KAAK,CAAC;YAClD,CAAC,CAAC,OAAO;YACT,CAAC,CAAC,MAAM;;;;wBAIM,IAAI,CAAC,cAAc;uBACpB,IAAI,CAAC,WAAW;mBACpB,IAAI,CAAC,iBAAiB;;KAEpC,CAAC;IACJ,CAAC;CACF;AAtGC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACZ;AAGf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;uDACH;AAGvB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDACX","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Shortcut } from '../interfaces';\nimport { StoreMonitorElement } from '../store/StoreMonitorElement';\nimport { Options } from '../options/Options';\n\nexport class ShortcutList extends StoreMonitorElement {\n  static get styles() {\n    return css`\n      temba-options {\n        display: block;\n        width: 100%;\n        flex-grow: 1;\n      }\n\n      .options-empty {\n        height: 0;\n        overflow: hidden;\n      }\n\n      .no-match {\n        margin: 5px 10px;\n        padding: 10px;\n      }\n\n      .filter {\n        background: #f3f3f3;\n        padding: 0.1em 0.3em;\n        border-radius: var(--curvature);\n      }\n    `;\n  }\n\n  @property({ type: String })\n  filter: string;\n\n  @property({ type: Array })\n  filteredShortcuts = [];\n\n  @property({ type: Number })\n  cursorIndex = 0;\n\n  constructor() {\n    super();\n  }\n\n  protected firstUpdated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.firstUpdated(changes);\n  }\n\n  public storeUpdated(): void {\n    this.filteredShortcuts = this.store.getShortcuts();\n  }\n\n  public updated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.updated(changes);\n\n    if (changes.has('filter')) {\n      if (!this.filter) {\n        this.filteredShortcuts = this.store.getShortcuts();\n      } else {\n        this.filteredShortcuts = this.store\n          .getShortcuts()\n          .filter((shortcut: Shortcut) =>\n            shortcut.name.toLowerCase().includes(this.filter.toLowerCase())\n          );\n      }\n      this.cursorIndex = 0;\n    }\n  }\n\n  public renderShortcut(shortcut: Shortcut): TemplateResult {\n    return html`<div style=\"display:flex;align-items: center;min-width:0\">\n      <div\n        style=\"\n          overflow: hidden;\n          text-overflow: ellipsis;\n          width:100px; \n          padding-right: 10px;\n          white-space: nowrap;\"\n      >\n        ${shortcut.name}\n      </div>\n      <div\n        style=\" \n          font-size: 0.9em;\n          color: rgba(0, 0, 0, 0.4);\n          flex:1;\n          overflow: hidden;\n          text-overflow: ellipsis;\n\n          display: -webkit-box;\n          line-height: 16px;\n          max-height: 16px;\n          -webkit-line-clamp: 1;\n          -webkit-box-orient: vertical;\n        \"\n      >\n        ${shortcut.text}\n      </div>\n    </div>`;\n  }\n\n  public getShortcut() {\n    const options = this.shadowRoot.querySelector('temba-options') as Options;\n    return options.getSelection();\n  }\n\n  public render(): TemplateResult {\n    return html`\n      ${this.filteredShortcuts.length === 0\n        ? html`<div class=\"no-match\">\n            ${this.filter\n              ? html`No matches for <span class=\"filter\">${this.filter}</span>.`\n              : html`No shortcuts yet, create some to quickly include them in\n                your messages.`}\n          </div>`\n        : null}\n\n      <temba-options\n        class=\"options-${this.filteredShortcuts.length === 0\n          ? 'empty'\n          : 'full'}\"\n        block\n        cursorHover\n        visible\n        .renderOption=${this.renderShortcut}\n        .cursorIndex=${this.cursorIndex}\n        .options=${this.filteredShortcuts}\n      ></temba-options>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"ShortcutList.js","sourceRoot":"","sources":["../../../src/list/ShortcutList.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAoC,MAAM,KAAK,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAGnE,MAAM,OAAO,YAAa,SAAQ,mBAAmB;IACnD,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;KAsBT,CAAC;IACJ,CAAC;IAWD;QACE,KAAK,EAAE,CAAC;QANV,sBAAiB,GAAG,EAAE,CAAC;QAGvB,gBAAW,GAAG,CAAC,CAAC;IAIhB,CAAC;IAES,YAAY,CACpB,OAA0D;QAE1D,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IAC9B,CAAC;IAEM,YAAY;QACjB,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC;IACrD,CAAC;IAEM,OAAO,CACZ,OAA0D;QAE1D,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QAEvB,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC1B,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;gBACjB,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC;YACrD,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,KAAK;qBAChC,YAAY,EAAE;qBACd,MAAM,CAAC,CAAC,QAAkB,EAAE,EAAE,CAC7B,QAAQ,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,CAChE,CAAC;YACN,CAAC;YACD,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;QACvB,CAAC;IACH,CAAC;IAEM,cAAc,CAAC,QAAkB;QACtC,OAAO,IAAI,CAAA;;;;;;;;;UASL,QAAQ,CAAC,IAAI;;;;;;;;;;;;;;;;;UAiBb,QAAQ,CAAC,IAAI;;WAEZ,CAAC;IACV,CAAC;IAEM,WAAW;QAChB,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,eAAe,CAAY,CAAC;QAC1E,OAAO,OAAO,CAAC,YAAY,EAAE,CAAC;IAChC,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,iBAAiB,CAAC,MAAM,KAAK,CAAC;YACnC,CAAC,CAAC,IAAI,CAAA;cACA,IAAI,CAAC,MAAM;gBACX,CAAC,CAAC,IAAI,CAAA,uCAAuC,IAAI,CAAC,MAAM,UAAU;gBAClE,CAAC,CAAC,IAAI,CAAA;+BACW;iBACd;YACT,CAAC,CAAC,IAAI;;;yBAGW,IAAI,CAAC,iBAAiB,CAAC,MAAM,KAAK,CAAC;YAClD,CAAC,CAAC,OAAO;YACT,CAAC,CAAC,MAAM;;;;wBAIM,IAAI,CAAC,cAAc;uBACpB,IAAI,CAAC,WAAW;mBACpB,IAAI,CAAC,iBAAiB;;KAEpC,CAAC;IACJ,CAAC;CACF;AAtGC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACZ;AAGf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;uDACH;AAGvB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDACX","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Shortcut } from '../interfaces';\nimport { StoreMonitorElement } from '../store/StoreMonitorElement';\nimport { Options } from '../display/Options';\n\nexport class ShortcutList extends StoreMonitorElement {\n  static get styles() {\n    return css`\n      temba-options {\n        display: block;\n        width: 100%;\n        flex-grow: 1;\n      }\n\n      .options-empty {\n        height: 0;\n        overflow: hidden;\n      }\n\n      .no-match {\n        margin: 5px 10px;\n        padding: 10px;\n      }\n\n      .filter {\n        background: #f3f3f3;\n        padding: 0.1em 0.3em;\n        border-radius: var(--curvature);\n      }\n    `;\n  }\n\n  @property({ type: String })\n  filter: string;\n\n  @property({ type: Array })\n  filteredShortcuts = [];\n\n  @property({ type: Number })\n  cursorIndex = 0;\n\n  constructor() {\n    super();\n  }\n\n  protected firstUpdated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.firstUpdated(changes);\n  }\n\n  public storeUpdated(): void {\n    this.filteredShortcuts = this.store.getShortcuts();\n  }\n\n  public updated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.updated(changes);\n\n    if (changes.has('filter')) {\n      if (!this.filter) {\n        this.filteredShortcuts = this.store.getShortcuts();\n      } else {\n        this.filteredShortcuts = this.store\n          .getShortcuts()\n          .filter((shortcut: Shortcut) =>\n            shortcut.name.toLowerCase().includes(this.filter.toLowerCase())\n          );\n      }\n      this.cursorIndex = 0;\n    }\n  }\n\n  public renderShortcut(shortcut: Shortcut): TemplateResult {\n    return html`<div style=\"display:flex;align-items: center;min-width:0\">\n      <div\n        style=\"\n          overflow: hidden;\n          text-overflow: ellipsis;\n          width:100px; \n          padding-right: 10px;\n          white-space: nowrap;\"\n      >\n        ${shortcut.name}\n      </div>\n      <div\n        style=\" \n          font-size: 0.9em;\n          color: rgba(0, 0, 0, 0.4);\n          flex:1;\n          overflow: hidden;\n          text-overflow: ellipsis;\n\n          display: -webkit-box;\n          line-height: 16px;\n          max-height: 16px;\n          -webkit-line-clamp: 1;\n          -webkit-box-orient: vertical;\n        \"\n      >\n        ${shortcut.text}\n      </div>\n    </div>`;\n  }\n\n  public getShortcut() {\n    const options = this.shadowRoot.querySelector('temba-options') as Options;\n    return options.getSelection();\n  }\n\n  public render(): TemplateResult {\n    return html`\n      ${this.filteredShortcuts.length === 0\n        ? html`<div class=\"no-match\">\n            ${this.filter\n              ? html`No matches for <span class=\"filter\">${this.filter}</span>.`\n              : html`No shortcuts yet, create some to quickly include them in\n                your messages.`}\n          </div>`\n        : null}\n\n      <temba-options\n        class=\"options-${this.filteredShortcuts.length === 0\n          ? 'empty'\n          : 'full'}\"\n        block\n        cursorHover\n        visible\n        .renderOption=${this.renderShortcut}\n        .cursorIndex=${this.cursorIndex}\n        .options=${this.filteredShortcuts}\n      ></temba-options>\n    `;\n  }\n}\n"]}

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

@@ -4,7 +4,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { property } from 'lit/decorators.js';
 import { CustomEventType } from '../interfaces';
 import { debounce, fetchResults, getClasses, renderAvatar } from '../utils';
-import { Icon } from '../vectoricon';
+import { Icon } from '../Icons';
 import { ResizeElement } from '../ResizeElement';
 const findItem = (items, id) => {
     const search = items || [];