@nyaruka/temba-components 0.24.0 → 0.25.2

package/dist/sw.js

@@ -1,2 +1,2 @@
-if(!self.define){const e=e=>{"require"!==e&&(e+=".js");let r=Promise.resolve();return t[e]||(r=new Promise(async r=>{if("document"in self){const t=document.createElement("script");t.src=e,document.head.appendChild(t),t.onload=r}else importScripts(e),r()})),r.then(()=>{if(!t[e])throw new Error(`Module ${e} didn’t register its module`);return t[e]})},r=(r,t)=>{Promise.all(r.map(e)).then(e=>t(1===e.length?e[0]:e))},t={require:Promise.resolve(r)};self.define=(r,s,o)=>{t[r]||(t[r]=Promise.resolve().then(()=>{let t={};const n={uri:location.origin+r.slice(1)};return Promise.all(s.map(r=>{switch(r){case"exports":return t;case"module":return n;default:return e(r)}})).then(e=>{const r=o(...e);return t.default||(t.default=r),t})}))}}define("./sw.js",["./workbox-80efdfd1"],(function(e){"use strict";e.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"ef1b57e2.js",revision:"197036068e252f090cc7282a245da584"},{url:"templates/components-body.html",revision:"50ed235b9a1d4fc5d965f9bb00ebca41"},{url:"templates/components-head.html",revision:"e8272aa33ec2dc7efe1ed8d48b5a85f1"}],{}),e.registerRoute(new e.NavigationRoute(e.createHandlerBoundToURL("/index.html"))),e.registerRoute("polyfills/*.js",new e.CacheFirst,"GET")}));
+if(!self.define){const e=e=>{"require"!==e&&(e+=".js");let r=Promise.resolve();return t[e]||(r=new Promise(async r=>{if("document"in self){const t=document.createElement("script");t.src=e,document.head.appendChild(t),t.onload=r}else importScripts(e),r()})),r.then(()=>{if(!t[e])throw new Error(`Module ${e} didn’t register its module`);return t[e]})},r=(r,t)=>{Promise.all(r.map(e)).then(e=>t(1===e.length?e[0]:e))},t={require:Promise.resolve(r)};self.define=(r,s,o)=>{t[r]||(t[r]=Promise.resolve().then(()=>{let t={};const n={uri:location.origin+r.slice(1)};return Promise.all(s.map(r=>{switch(r){case"exports":return t;case"module":return n;default:return e(r)}})).then(e=>{const r=o(...e);return t.default||(t.default=r),t})}))}}define("./sw.js",["./workbox-80efdfd1"],(function(e){"use strict";e.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"56e0e480.js",revision:"4702fa865e5a4f587f47ae137e4bf7ef"},{url:"templates/components-body.html",revision:"223ec554e0cfc75a47d9fe30edfd0660"},{url:"templates/components-head.html",revision:"a90c85c4eac954bf7deee78bda6811b5"}],{}),e.registerRoute(new e.NavigationRoute(e.createHandlerBoundToURL("/index.html"))),e.registerRoute("polyfills/*.js",new e.CacheFirst,"GET")}));
 //# sourceMappingURL=sw.js.map

package/dist/sw.js.map

@@ -1 +1 @@
-{"version":3,"file":"sw.js","sources":["../../../../../tmp/cef30b2bb62fb553fcb64a9f2709e9a0/sw.js"],"sourcesContent":["import {registerRoute as workbox_routing_registerRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-routing/registerRoute.mjs';\nimport {CacheFirst as workbox_strategies_CacheFirst} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-strategies/CacheFirst.mjs';\nimport {skipWaiting as workbox_core_skipWaiting} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-core/skipWaiting.mjs';\nimport {clientsClaim as workbox_core_clientsClaim} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-core/clientsClaim.mjs';\nimport {precacheAndRoute as workbox_precaching_precacheAndRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-precaching/precacheAndRoute.mjs';\nimport {NavigationRoute as workbox_routing_NavigationRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-routing/NavigationRoute.mjs';\nimport {createHandlerBoundToURL as workbox_precaching_createHandlerBoundToURL} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-precaching/createHandlerBoundToURL.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\n\n\n\n\n\n\nworkbox_core_skipWaiting();\n\nworkbox_core_clientsClaim();\n\n\n/**\n * The precacheAndRoute() method efficiently caches and responds to\n * requests for URLs in the manifest.\n * See https://goo.gl/S9QRab\n */\nworkbox_precaching_precacheAndRoute([\n  {\n    \"url\": \"ef1b57e2.js\",\n    \"revision\": \"197036068e252f090cc7282a245da584\"\n  },\n  {\n    \"url\": \"templates/components-body.html\",\n    \"revision\": \"50ed235b9a1d4fc5d965f9bb00ebca41\"\n  },\n  {\n    \"url\": \"templates/components-head.html\",\n    \"revision\": \"e8272aa33ec2dc7efe1ed8d48b5a85f1\"\n  }\n], {});\n\nworkbox_routing_registerRoute(new workbox_routing_NavigationRoute(workbox_precaching_createHandlerBoundToURL(\"/index.html\")));\n\n\nworkbox_routing_registerRoute(\"polyfills/*.js\", new workbox_strategies_CacheFirst(), 'GET');\n\n\n\n\n"],"names":["workbox_routing_NavigationRoute","workbox_precaching_createHandlerBoundToURL","workbox_strategies_CacheFirst"],"mappings":"k1BAmCoC,CAClC,KACS,uBACK,oCAEd,KACS,0CACK,oCAEd,KACS,0CACK,qCAEb,oBAE2B,IAAIA,kBAAgCC,0BAA2C,iCAG/E,iBAAkB,IAAIC,aAAiC"}
+{"version":3,"file":"sw.js","sources":["../../../../../tmp/c28cb13a5abf82d706d823250cbc5e3f/sw.js"],"sourcesContent":["import {registerRoute as workbox_routing_registerRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-routing/registerRoute.mjs';\nimport {CacheFirst as workbox_strategies_CacheFirst} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-strategies/CacheFirst.mjs';\nimport {skipWaiting as workbox_core_skipWaiting} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-core/skipWaiting.mjs';\nimport {clientsClaim as workbox_core_clientsClaim} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-core/clientsClaim.mjs';\nimport {precacheAndRoute as workbox_precaching_precacheAndRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-precaching/precacheAndRoute.mjs';\nimport {NavigationRoute as workbox_routing_NavigationRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-routing/NavigationRoute.mjs';\nimport {createHandlerBoundToURL as workbox_precaching_createHandlerBoundToURL} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-precaching/createHandlerBoundToURL.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\n\n\n\n\n\n\nworkbox_core_skipWaiting();\n\nworkbox_core_clientsClaim();\n\n\n/**\n * The precacheAndRoute() method efficiently caches and responds to\n * requests for URLs in the manifest.\n * See https://goo.gl/S9QRab\n */\nworkbox_precaching_precacheAndRoute([\n  {\n    \"url\": \"56e0e480.js\",\n    \"revision\": \"4702fa865e5a4f587f47ae137e4bf7ef\"\n  },\n  {\n    \"url\": \"templates/components-body.html\",\n    \"revision\": \"223ec554e0cfc75a47d9fe30edfd0660\"\n  },\n  {\n    \"url\": \"templates/components-head.html\",\n    \"revision\": \"a90c85c4eac954bf7deee78bda6811b5\"\n  }\n], {});\n\nworkbox_routing_registerRoute(new workbox_routing_NavigationRoute(workbox_precaching_createHandlerBoundToURL(\"/index.html\")));\n\n\nworkbox_routing_registerRoute(\"polyfills/*.js\", new workbox_strategies_CacheFirst(), 'GET');\n\n\n\n\n"],"names":["workbox_routing_NavigationRoute","workbox_precaching_createHandlerBoundToURL","workbox_strategies_CacheFirst"],"mappings":"k1BAmCoC,CAClC,KACS,uBACK,oCAEd,KACS,0CACK,oCAEd,KACS,0CACK,qCAEb,oBAE2B,IAAIA,kBAAgCC,0BAA2C,iCAG/E,iBAAkB,IAAIC,aAAiC"}

package/dist/templates/components-body.html

@@ -1 +1 @@
-<script type="module" src="{{STATIC_URL}}@nyaruka/temba-components/dist/ef1b57e2.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.24.0"</script>
+<script type="module" src="{{STATIC_URL}}@nyaruka/temba-components/dist/56e0e480.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.25.2"</script>

package/dist/templates/components-head.html

@@ -1 +1 @@
-<link rel="modulepreload" href="{{STATIC_URL}}@nyaruka/temba-components/dist/ef1b57e2.js" crossorigin="anonymous">
+<link rel="modulepreload" href="{{STATIC_URL}}@nyaruka/temba-components/dist/56e0e480.js" crossorigin="anonymous">

package/out-tsc/src/contactsearch/ContactSearch.js

@@ -51,9 +51,6 @@ export class ContactSearch extends FormElement {
         vertical-align: top;
       }
 
-      .summary {
-      }
-
       table {
         width: 100%;
       }
@@ -186,43 +183,46 @@ export class ContactSearch extends FormElement {
                 const lastSeenOn = this.summary.query.indexOf('last_seen_on') > -1;
                 summary = html `
           <div class="summary ${this.expanded ? 'expanded' : ''}">
-          <table cellspacing="0" cellpadding="0">
-            <tr class="header">
-              <td colspan="2">
-              Found <a
-              class="linked"
-              target="_"
-              href="/contact/?search=${encodeURIComponent(this.summary.query)}"
-              
-            >${count.toLocaleString()}</a> contact${count !== 1 ? 's' : ''}</div>
-              </td>
-              ${fields.map(field => html ` <td class="field-header">${field.label}</td> `)}
-              <td></td>
-              <td class="field-header date">
-                ${lastSeenOn ? 'Last Seen' : 'Created'}
-              </td>
-            </tr>
+            <table cellspacing="0" cellpadding="0">
+              <tr class="header">
+                <td colspan="2">
+                  Found
+                  <a
+                    class="linked"
+                    target="_"
+                    href="/contact/?search=${encodeURIComponent(this.summary.query)}"
+                  >
+                    ${count.toLocaleString()}
+                  </a>
+                  contact${count !== 1 ? 's' : ''}
+                </td>
+                ${fields.map(field => html ` <td class="field-header">${field.label}</td> `)}
+                <td></td>
+                <td class="field-header date">
+                  ${lastSeenOn ? 'Last Seen' : 'Created'}
+                </td>
+              </tr>
 
-            ${this.summary.sample.map((contact) => html `
-                <tr class="contact">
-                  <td class="urn">${contact.primary_urn_formatted}</td>
-                  <td class="name">${contact.name}</td>
-                  ${fields.map(field => html `
-                      <td class="field">
-                        ${(contact.fields[field.uuid] || { text: '' })
-                    .text}
-                      </td>
-                    `)}
-                  <td></td>
-                  <td class="date">
-                    ${lastSeenOn
+              ${this.summary.sample.map((contact) => html `
+                  <tr class="contact">
+                    <td class="urn">
+                      ${contact.primary_urn_formatted}
+                    </td>
+                    <td class="name">${contact.name}</td>
+                    ${fields.map(field => html `
+                        <td class="field">
+                          ${(contact.fields[field.uuid] || { text: '' }).text}
+                        </td>
+                      `)}
+                    <td></td>
+                    <td class="date">
+                      ${lastSeenOn
                     ? contact.last_seen_on || '--'
                     : contact.created_on}
-                  </td>
-                </tr>
-              `)}
-
-            ${this.summary.total > this.summary.sample.length
+                    </td>
+                  </tr>
+                `)}
+              ${this.summary.total > this.summary.sample.length
                     ? html `<tr class="table-footer">
                     <td class="query-details" colspan=${fields.length + 3}></td>
                     <td class="more">
@@ -235,8 +235,7 @@ export class ContactSearch extends FormElement {
                     </td>
                   </tr>`
                     : null}
-            
-          </table>
+            </table>
           </div>
         `;
             }

package/out-tsc/src/contactsearch/ContactSearch.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContactSearch.js","sourceRoot":"","sources":["../../../src/contactsearch/ContactSearch.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, property, css } from 'lit-element';\nimport { getUrl, WebResponse } from '../utils';\nimport { TextInput } from '../textinput/TextInput';\nimport '../alert/Alert';\nimport { Contact, CustomEventType } from '../interfaces';\nimport { styleMap } from 'lit-html/directives/style-map';\nimport { FormElement } from '../FormElement';\n\nconst QUEIT_MILLIS = 1000;\n\ninterface SummaryResponse {\n  total: number;\n  sample: Contact[];\n  query: string;\n  fields: { [uuid: string]: { label: string; type: string } };\n  error?: string;\n}\n\nexport class ContactSearch extends FormElement {\n  static get styles() {\n    return css`\n      :host {\n        color: var(--color-text);\n      }\n\n      .urn {\n        width: 120px;\n      }\n\n      .name {\n        width: 160px;\n      }\n\n      .date {\n        text-align: right;\n      }\n\n      .field-header {\n        font-size: 80%;\n        color: var(--color-text-dark);\n      }\n\n      .field-header.date {\n        text-align: right;\n      }\n\n      .more {\n        font-size: 90%;\n        padding-top: 5px;\n        padding-right: 3px;\n        text-align: right;\n        width: 100px;\n        vertical-align: top;\n      }\n\n      .summary {\n      }\n\n      table {\n        width: 100%;\n      }\n\n      .contact td {\n        border-bottom: 1px solid var(--color-borders);\n        padding: 5px 3px;\n      }\n\n      .table-footer td {\n        padding: 10px 3px;\n      }\n\n      .query-replaced,\n      .count-replaced {\n        display: inline-block;\n        background: var(--color-primary-light);\n        color: var(--color-text-dark);\n        padding: 3px 6px;\n        border-radius: var(--curvature);\n        font-size: 85%;\n        margin: 0px 3px;\n      }\n\n      temba-loading {\n        margin-top: 10px;\n        margin-right: 10px;\n        opacity: 0;\n      }\n\n      .error {\n        margin-top: 10px;\n      }\n\n      .match-count {\n        padding: 4px;\n        margin-top: 6px;\n      }\n\n      .linked {\n        color: var(--color-link-primary);\n        text-decoration: none;\n        cursor: pointer;\n      }\n\n      .header td {\n        border-bottom: 0px solid var(--color-borders);\n        padding: 5px 3px;\n      }\n\n      .expanded .header td {\n        border-bottom: 2px solid var(--color-borders);\n      }\n\n      td.field-header,\n      tr.table-footer,\n      tr.contact {\n        display: none;\n      }\n\n      .expanded td.field-header {\n        display: table-cell;\n      }\n\n      .expanded tr.contact,\n      .expanded tr.table-footer {\n        display: table-row;\n      }\n\n      .query {\n        display: var(--contact-search-query-display);\n        margin-bottom: 10px;\n      }\n    `;\n  }\n\n  // private cancelToken: CancelTokenSource;\n\n  @property({ type: Boolean })\n  fetching: boolean;\n\n  @property({ type: Boolean })\n  expanded: boolean;\n\n  @property({ type: String })\n  endpoint: string;\n\n  @property({ type: String })\n  placeholder = '';\n\n  @property({ type: String })\n  name = '';\n\n  @property({ type: String })\n  query = '';\n\n  @property({ type: Number })\n  inactiveThreshold = 1000;\n\n  @property({ type: Number })\n  inactiveDays = 90;\n\n  @property({ attribute: false })\n  summary: SummaryResponse;\n\n  private lastQuery: number;\n\n  public updated(changedProperties: Map<string, any>) {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('query')) {\n      this.fetching = !!this.query;\n\n      // clear our summary on any change\n      this.summary = null;\n      if (this.lastQuery) {\n        window.clearTimeout(this.lastQuery);\n      }\n\n      if (this.query.trim().length > 0) {\n        this.lastQuery = window.setTimeout(() => {\n          this.fetchSummary(this.query);\n        }, QUEIT_MILLIS);\n      }\n    }\n  }\n\n  public executeQuery(query: string): any {\n    const url = this.endpoint + query.replace('\\n', ' ');\n    getUrl(url).then((response: WebResponse) => {\n      if (response.status === 200) {\n        const summary = response.json as SummaryResponse;\n        this.fireCustomEvent(CustomEventType.FetchComplete, summary);\n      }\n    });\n  }\n\n  public fetchSummary(query: string): any {\n    const url = this.endpoint + query.replace('\\n', ' ');\n    getUrl(url).then((response: WebResponse) => {\n      this.fetching = false;\n      if (response.status === 200) {\n        this.summary = response.json as SummaryResponse;\n\n        if (this.summary.error) {\n          this.errors = [this.summary.error];\n        } else {\n          this.errors = [];\n        }\n        this.requestUpdate('errors');\n        this.fireCustomEvent(CustomEventType.ContentChanged, this.summary);\n      }\n    });\n  }\n\n  private handleQueryChange(evt: KeyboardEvent) {\n    const input = evt.target as TextInput;\n    this.query = input.inputElement.value;\n  }\n\n  public render(): TemplateResult {\n    let summary: TemplateResult;\n    if (this.summary) {\n      const fields = Object.keys(this.summary.fields || []).map(\n        (uuid: string) => {\n          return { uuid, ...this.summary.fields[uuid] };\n        }\n      );\n\n      if (!this.summary.error) {\n        const count = this.summary.total;\n        const lastSeenOn = this.summary.query.indexOf('last_seen_on') > -1;\n\n        summary = html`\n          <div class=\"summary ${this.expanded ? 'expanded' : ''}\">\n          <table cellspacing=\"0\" cellpadding=\"0\">\n            <tr class=\"header\">\n              <td colspan=\"2\">\n              Found <a\n              class=\"linked\"\n              target=\"_\"\n              href=\"/contact/?search=${encodeURIComponent(this.summary.query)}\"\n              \n            >${count.toLocaleString()}</a> contact${\n          count !== 1 ? 's' : ''\n        }</div>\n              </td>\n              ${fields.map(\n                field => html` <td class=\"field-header\">${field.label}</td> `\n              )}\n              <td></td>\n              <td class=\"field-header date\">\n                ${lastSeenOn ? 'Last Seen' : 'Created'}\n              </td>\n            </tr>\n\n            ${this.summary.sample.map(\n              (contact: Contact) => html`\n                <tr class=\"contact\">\n                  <td class=\"urn\">${(contact as any).primary_urn_formatted}</td>\n                  <td class=\"name\">${contact.name}</td>\n                  ${fields.map(\n                    field => html`\n                      <td class=\"field\">\n                        ${((contact as any).fields[field.uuid] || { text: '' })\n                          .text}\n                      </td>\n                    `\n                  )}\n                  <td></td>\n                  <td class=\"date\">\n                    ${lastSeenOn\n                      ? contact.last_seen_on || '--'\n                      : contact.created_on}\n                  </td>\n                </tr>\n              `\n            )}\n\n            ${\n              this.summary.total > this.summary.sample.length\n                ? html`<tr class=\"table-footer\">\n                    <td class=\"query-details\" colspan=${fields.length + 3}></td>\n                    <td class=\"more\">\n                      <a\n                        class=\"linked\"\n                        target=\"_\"\n                        href=\"/contact/?search=${encodeURIComponent(\n                          this.summary.query\n                        )}\"\n                        >more</a\n                      >\n                    </td>\n                  </tr>`\n                : null\n            }\n            \n          </table>\n          </div>\n        `;\n      }\n    }\n\n    const loadingStyle = this.fetching ? { opacity: '1' } : {};\n\n    return html`\n      <div class=\"query\">\n        <temba-textinput\n          .label=${this.label}\n          .helpText=${this.helpText}\n          .widgetOnly=${this.widgetOnly}\n          .errors=${this.errors}\n          name=${this.name}\n          .inputRoot=${this}\n          @input=${this.handleQueryChange}\n          placeholder=${this.placeholder}\n          .value=${this.query}\n          textarea\n          autogrow\n        >\n        </temba-textinput>\n      </div>\n\n      ${this.fetching\n        ? html`<temba-loading\n            units=\"4\"\n            style=${styleMap(loadingStyle)}\n          ></temba-loading>`\n        : this.summary\n        ? html` <div class=\"summary\">${summary}</div> `\n        : null}\n    `;\n  }\n}\n"]}
+{"version":3,"file":"ContactSearch.js","sourceRoot":"","sources":["../../../src/contactsearch/ContactSearch.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, property, css } from 'lit-element';\nimport { getUrl, WebResponse } from '../utils';\nimport { TextInput } from '../textinput/TextInput';\nimport '../alert/Alert';\nimport { Contact, CustomEventType } from '../interfaces';\nimport { styleMap } from 'lit-html/directives/style-map';\nimport { FormElement } from '../FormElement';\n\nconst QUEIT_MILLIS = 1000;\n\ninterface SummaryResponse {\n  total: number;\n  sample: Contact[];\n  query: string;\n  fields: { [uuid: string]: { label: string; type: string } };\n  error?: string;\n}\n\nexport class ContactSearch extends FormElement {\n  static get styles() {\n    return css`\n      :host {\n        color: var(--color-text);\n      }\n\n      .urn {\n        width: 120px;\n      }\n\n      .name {\n        width: 160px;\n      }\n\n      .date {\n        text-align: right;\n      }\n\n      .field-header {\n        font-size: 80%;\n        color: var(--color-text-dark);\n      }\n\n      .field-header.date {\n        text-align: right;\n      }\n\n      .more {\n        font-size: 90%;\n        padding-top: 5px;\n        padding-right: 3px;\n        text-align: right;\n        width: 100px;\n        vertical-align: top;\n      }\n\n      table {\n        width: 100%;\n      }\n\n      .contact td {\n        border-bottom: 1px solid var(--color-borders);\n        padding: 5px 3px;\n      }\n\n      .table-footer td {\n        padding: 10px 3px;\n      }\n\n      .query-replaced,\n      .count-replaced {\n        display: inline-block;\n        background: var(--color-primary-light);\n        color: var(--color-text-dark);\n        padding: 3px 6px;\n        border-radius: var(--curvature);\n        font-size: 85%;\n        margin: 0px 3px;\n      }\n\n      temba-loading {\n        margin-top: 10px;\n        margin-right: 10px;\n        opacity: 0;\n      }\n\n      .error {\n        margin-top: 10px;\n      }\n\n      .match-count {\n        padding: 4px;\n        margin-top: 6px;\n      }\n\n      .linked {\n        color: var(--color-link-primary);\n        text-decoration: none;\n        cursor: pointer;\n      }\n\n      .header td {\n        border-bottom: 0px solid var(--color-borders);\n        padding: 5px 3px;\n      }\n\n      .expanded .header td {\n        border-bottom: 2px solid var(--color-borders);\n      }\n\n      td.field-header,\n      tr.table-footer,\n      tr.contact {\n        display: none;\n      }\n\n      .expanded td.field-header {\n        display: table-cell;\n      }\n\n      .expanded tr.contact,\n      .expanded tr.table-footer {\n        display: table-row;\n      }\n\n      .query {\n        display: var(--contact-search-query-display);\n        margin-bottom: 10px;\n      }\n    `;\n  }\n\n  // private cancelToken: CancelTokenSource;\n\n  @property({ type: Boolean })\n  fetching: boolean;\n\n  @property({ type: Boolean })\n  expanded: boolean;\n\n  @property({ type: String })\n  endpoint: string;\n\n  @property({ type: String })\n  placeholder = '';\n\n  @property({ type: String })\n  name = '';\n\n  @property({ type: String })\n  query = '';\n\n  @property({ type: Number })\n  inactiveThreshold = 1000;\n\n  @property({ type: Number })\n  inactiveDays = 90;\n\n  @property({ attribute: false })\n  summary: SummaryResponse;\n\n  private lastQuery: number;\n\n  public updated(changedProperties: Map<string, any>) {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('query')) {\n      this.fetching = !!this.query;\n\n      // clear our summary on any change\n      this.summary = null;\n      if (this.lastQuery) {\n        window.clearTimeout(this.lastQuery);\n      }\n\n      if (this.query.trim().length > 0) {\n        this.lastQuery = window.setTimeout(() => {\n          this.fetchSummary(this.query);\n        }, QUEIT_MILLIS);\n      }\n    }\n  }\n\n  public executeQuery(query: string): any {\n    const url = this.endpoint + query.replace('\\n', ' ');\n    getUrl(url).then((response: WebResponse) => {\n      if (response.status === 200) {\n        const summary = response.json as SummaryResponse;\n        this.fireCustomEvent(CustomEventType.FetchComplete, summary);\n      }\n    });\n  }\n\n  public fetchSummary(query: string): any {\n    const url = this.endpoint + query.replace('\\n', ' ');\n    getUrl(url).then((response: WebResponse) => {\n      this.fetching = false;\n      if (response.status === 200) {\n        this.summary = response.json as SummaryResponse;\n\n        if (this.summary.error) {\n          this.errors = [this.summary.error];\n        } else {\n          this.errors = [];\n        }\n        this.requestUpdate('errors');\n        this.fireCustomEvent(CustomEventType.ContentChanged, this.summary);\n      }\n    });\n  }\n\n  private handleQueryChange(evt: KeyboardEvent) {\n    const input = evt.target as TextInput;\n    this.query = input.inputElement.value;\n  }\n\n  public render(): TemplateResult {\n    let summary: TemplateResult;\n    if (this.summary) {\n      const fields = Object.keys(this.summary.fields || []).map(\n        (uuid: string) => {\n          return { uuid, ...this.summary.fields[uuid] };\n        }\n      );\n\n      if (!this.summary.error) {\n        const count = this.summary.total;\n        const lastSeenOn = this.summary.query.indexOf('last_seen_on') > -1;\n\n        summary = html`\n          <div class=\"summary ${this.expanded ? 'expanded' : ''}\">\n            <table cellspacing=\"0\" cellpadding=\"0\">\n              <tr class=\"header\">\n                <td colspan=\"2\">\n                  Found\n                  <a\n                    class=\"linked\"\n                    target=\"_\"\n                    href=\"/contact/?search=${encodeURIComponent(\n                      this.summary.query\n                    )}\"\n                  >\n                    ${count.toLocaleString()}\n                  </a>\n                  contact${count !== 1 ? 's' : ''}\n                </td>\n                ${fields.map(\n                  field => html` <td class=\"field-header\">${field.label}</td> `\n                )}\n                <td></td>\n                <td class=\"field-header date\">\n                  ${lastSeenOn ? 'Last Seen' : 'Created'}\n                </td>\n              </tr>\n\n              ${this.summary.sample.map(\n                (contact: Contact) => html`\n                  <tr class=\"contact\">\n                    <td class=\"urn\">\n                      ${(contact as any).primary_urn_formatted}\n                    </td>\n                    <td class=\"name\">${contact.name}</td>\n                    ${fields.map(\n                      field => html`\n                        <td class=\"field\">\n                          ${(\n                            (contact as any).fields[field.uuid] || { text: '' }\n                          ).text}\n                        </td>\n                      `\n                    )}\n                    <td></td>\n                    <td class=\"date\">\n                      ${lastSeenOn\n                        ? contact.last_seen_on || '--'\n                        : contact.created_on}\n                    </td>\n                  </tr>\n                `\n              )}\n              ${this.summary.total > this.summary.sample.length\n                ? html`<tr class=\"table-footer\">\n                    <td class=\"query-details\" colspan=${fields.length + 3}></td>\n                    <td class=\"more\">\n                      <a\n                        class=\"linked\"\n                        target=\"_\"\n                        href=\"/contact/?search=${encodeURIComponent(\n                          this.summary.query\n                        )}\"\n                        >more</a\n                      >\n                    </td>\n                  </tr>`\n                : null}\n            </table>\n          </div>\n        `;\n      }\n    }\n\n    const loadingStyle = this.fetching ? { opacity: '1' } : {};\n\n    return html`\n      <div class=\"query\">\n        <temba-textinput\n          .label=${this.label}\n          .helpText=${this.helpText}\n          .widgetOnly=${this.widgetOnly}\n          .errors=${this.errors}\n          name=${this.name}\n          .inputRoot=${this}\n          @input=${this.handleQueryChange}\n          placeholder=${this.placeholder}\n          .value=${this.query}\n          textarea\n          autogrow\n        >\n        </temba-textinput>\n      </div>\n\n      ${this.fetching\n        ? html`<temba-loading\n            units=\"4\"\n            style=${styleMap(loadingStyle)}\n          ></temba-loading>`\n        : this.summary\n        ? html` <div class=\"summary\">${summary}</div> `\n        : null}\n    `;\n  }\n}\n"]}

package/out-tsc/src/dialog/Dialog.js

@@ -55,7 +55,7 @@ export class Dialog extends RapidElement {
         position: fixed;
         top: 0px;
         left: 0px;
-        transition: opacity linear calc(var(--transitions-speed) / 2ms);
+        transition: opacity linear calc(var(--transition-speed) / 2ms);
         pointer-events: none;
       }
 

package/out-tsc/src/dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/dialog/Dialog.ts"],"names":[],"mappings":"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","sourcesContent":["import { property } from 'lit-element/lib/decorators';\nimport { TemplateResult, html, css } from 'lit-element';\nimport { Button } from '../button/Button';\nimport { RapidElement } from '../RapidElement';\nimport { CustomEventType } from '../interfaces';\nimport { styleMap } from 'lit-html/directives/style-map';\nimport { getClasses } from '../utils';\n\nexport class Dialog extends RapidElement {\n  static get widths(): { [size: string]: string } {\n    return {\n      small: '400px',\n      medium: '600px',\n      large: '655px',\n    };\n  }\n\n  static get styles() {\n    return css`\n      :host {\n        position: absolute;\n        z-index: 10000;\n        font-family: var(--font-family);\n        background: white;\n      }\n\n      .flex {\n        display: flex;\n        flex-direction: column;\n        width: 100%;\n        position: relative;\n        left: 0px;\n        top: 0px;\n        align-items: center;\n      }\n\n      .flex-grow {\n        flex-grow: 1;\n      }\n\n      .bottom-padding {\n        padding: 3rem;\n      }\n\n      .dialog-mask {\n        width: 100%;\n        background: rgba(0, 0, 0, 0.5);\n        opacity: 0;\n        position: fixed;\n        top: 0px;\n        left: 0px;\n        transition: opacity linear calc(var(--transitions-speed) / 2ms);\n        pointer-events: none;\n      }\n\n      .dialog-container {\n        margin-top: -10000px;\n        position: relative;\n        transition: transform cubic-bezier(0.71, 0.18, 0.61, 1.33)\n            var(--transition-speed),\n          opacity ease-in-out calc(var(--transition-speed) - 50ms);\n        border-radius: var(--curvature);\n        box-shadow: 0px 0px 2px 4px rgba(0, 0, 0, 0.06);\n        overflow: hidden;\n        transform: scale(0.7);\n        background: white;\n      }\n\n      .dialog-body {\n        background: #fff;\n        max-height: 75vh;\n        overflow-y: auto;\n      }\n\n      .dialog-mask.dialog-open {\n        opacity: 1;\n        pointer-events: auto;\n      }\n\n      .dialog-mask.dialog-open .dialog-container {\n        top: inherit;\n      }\n\n      .dialog-mask.dialog-animation-end .dialog-container {\n        margin-top: 10vh;\n        transform: scale(1) !important;\n      }\n\n      .dialog-mask.dialog-ready .dialog-container {\n        margin-top: 10vh;\n        transform: none;\n      }\n\n      .dialog-mask.dialog-loading .dialog-container {\n        margin-top: -10000px;\n      }\n\n      .header-text {\n        font-size: 20px;\n        padding: 12px 20px;\n        font-weight: 300;\n        color: var(--header-text);\n        background: var(--header-bg);\n      }\n\n      .dialog-footer {\n        background: var(--color-primary-light);\n        padding: 10px;\n        display: flex;\n        flex-flow: row-reverse;\n      }\n\n      temba-button {\n        margin-left: 10px;\n      }\n\n      .dialog-body temba-loading {\n        position: absolute;\n        right: 12px;\n        margin-top: -30px;\n        padding-bottom: 9px;\n        display: none;\n      }\n\n      #page-loader {\n        text-align: center;\n        display: block;\n        position: relative;\n        opacity: 0;\n        margin: auto;\n        margin-top: 30px;\n        width: 154px;\n        transition: opacity calc(var(--transition-speed) * 5ms) ease-in\n          calc(var(--transition-speed * 2));\n        visibility: hidden;\n      }\n\n      .dialog-mask.dialog-loading #page-loader {\n        opacity: 1;\n        visibility: visible;\n      }\n\n      #submit-loader {\n        flex-grow: 1;\n        text-align: right;\n      }\n    `;\n  }\n\n  @property({ type: Boolean })\n  open: boolean;\n\n  @property()\n  header: string;\n\n  @property()\n  body: string;\n\n  @property({ type: Boolean })\n  submitting: boolean;\n\n  @property({ type: Boolean })\n  destructive: boolean;\n\n  @property({ type: Boolean })\n  disabled: boolean;\n\n  @property({ type: Boolean })\n  loading: boolean;\n\n  @property({ type: Boolean })\n  hideOnClick: boolean;\n\n  @property({ type: Boolean })\n  noFocus: boolean;\n\n  @property()\n  size = 'medium';\n\n  @property({ type: String })\n  primaryButtonName = 'Ok';\n\n  @property({ type: String })\n  cancelButtonName = 'Cancel';\n\n  @property()\n  submittingName = 'Saving';\n\n  @property()\n  animationEnd: boolean;\n\n  @property()\n  ready: boolean;\n\n  @property({ attribute: false })\n  onButtonClicked: (button: Button) => void;\n\n  scrollOffset: any = 0;\n\n  public constructor() {\n    super();\n  }\n\n  public updated(changedProperties: Map<string, any>) {\n    if (changedProperties.has('open')) {\n      const body = document.querySelector('body');\n\n      if (this.open) {\n        this.animationEnd = true;\n        window.setTimeout(() => {\n          this.ready = true;\n          this.animationEnd = false;\n        }, 400);\n\n        const scrollbarWidth = window.outerWidth - body.clientWidth;\n        this.scrollOffset = -document.documentElement.scrollTop;\n        body.style.position = 'fixed';\n        body.style.overflowY = 'scroll';\n        body.style.top = this.scrollOffset + 'px';\n        body.style.width = '100%';\n        body.style.overflowY = 'hidden';\n        body.style.paddingRight = scrollbarWidth + 'px';\n      } else {\n        body.style.position = '';\n        body.style.overflowY = '';\n        body.style.width = '';\n        body.style.marginRight = '';\n        body.style.paddingRight = '0px';\n        window.scrollTo(0, parseInt(this.scrollOffset || '0') * -1);\n      }\n\n      // make sure our buttons aren't in progress on show\n      if (this.open && !changedProperties.get('open')) {\n        this.shadowRoot\n          .querySelectorAll('temba-button')\n          .forEach((button: Button) => (button.disabled = false));\n\n        if (!this.noFocus) {\n          this.focusFirstInput();\n        }\n      } else {\n        window.setTimeout(() => {\n          this.ready = false;\n        }, 400);\n      }\n    }\n  }\n\n  public focusFirstInput(): void {\n    window.setTimeout(() => {\n      let input = this.querySelector(\n        'temba-textinput, temba-completion, input[type=\"text\"], textarea'\n      ) as any;\n      if (input) {\n        input = input.textInputElement || input.inputElement || input;\n        if (!input.readOnly) {\n          input.focus();\n          input.click();\n        }\n      }\n    }, 100);\n  }\n\n  public handleClick(evt: MouseEvent) {\n    const button = evt.currentTarget as Button;\n    if (!button.disabled) {\n      this.fireCustomEvent(CustomEventType.ButtonClicked, { button });\n      if (button.name === this.cancelButtonName) {\n        this.open = false;\n      }\n    }\n  }\n\n  private getDocumentHeight(): number {\n    const body = document.body;\n    const html = document.documentElement;\n    return Math.max(\n      body.scrollHeight,\n      body.offsetHeight,\n      html.clientHeight,\n      html.scrollHeight,\n      html.offsetHeight\n    );\n  }\n\n  private clickCancel() {\n    const cancel = this.getCancelButton();\n    if (cancel) {\n      cancel.click();\n    }\n  }\n\n  public getCancelButton(): Button {\n    return this.shadowRoot.querySelector(\n      `temba-button[name='${this.cancelButtonName}']`\n    );\n  }\n\n  public getPrimaryButton(): Button {\n    return this.shadowRoot.querySelector(`temba-button[primary]`);\n  }\n\n  private handleKeyUp(event: KeyboardEvent) {\n    if (event.key === 'Escape') {\n      this.clickCancel();\n    }\n  }\n\n  private handleClickMask(event: MouseEvent) {\n    if (this.hideOnClick) {\n      const id = (event.target as HTMLElement).id;\n      if (id === 'dialog-mask' || id === 'dialog-bg') {\n        this.fireCustomEvent(CustomEventType.DialogHidden);\n        this.clickCancel();\n      }\n    }\n  }\n\n  public show(): void {\n    this.open = true;\n  }\n\n  public hide(): void {\n    this.open = false;\n  }\n\n  public render(): TemplateResult {\n    const height = this.getDocumentHeight();\n\n    const maskStyle = {\n      height: `${height + 100}px`,\n    };\n    const dialogStyle = { width: Dialog.widths[this.size] };\n\n    const header = this.header\n      ? html`\n          <div class=\"dialog-header\">\n            <div class=\"header-text\">${this.header}</div>\n          </div>\n        `\n      : null;\n\n    return html`\n      <div\n        id=\"dialog-mask\"\n        @click=${this.handleClickMask}\n        class=\"dialog-mask ${getClasses({\n          'dialog-open': this.open,\n          'dialog-loading': this.loading,\n          'dialog-animation-end': this.animationEnd,\n          'dialog-ready': this.ready,\n        })}\"\n        style=${styleMap(maskStyle)}\n      >\n        <div style=\"position: absolute; width: 100%;\">\n          <temba-loading\n            id=\"page-loader\"\n            units=\"6\"\n            size=\"12\"\n            color=\"#ccc\"\n          ></temba-loading>\n        </div>\n\n        <div class=\"flex\">\n          <div class=\"flex-grow\"></div>\n          <div\n            @keyup=${this.handleKeyUp}\n            style=${styleMap(dialogStyle)}\n            class=\"dialog-container\"\n          >\n            ${header}\n            <div class=\"dialog-body\" @keypress=${this.handleKeyUp}>\n              ${this.body ? this.body : html`<slot></slot>`}\n              <temba-loading units=\"6\" size=\"8\"></temba-loading>\n            </div>\n\n            <div class=\"dialog-footer\">\n                ${\n                  this.primaryButtonName\n                    ? html`\n                        <temba-button\n                          @click=${this.handleClick}\n                          .name=${this.primaryButtonName}\n                          ?destructive=${this.destructive}\n                          ?primary=${!this.destructive}\n                          ?submitting=${this.submitting}\n                          ?disabled=${this.disabled}\n                          >}</temba-button\n                        >\n                      `\n                    : null\n                }\n                <temba-button\n                  @click=${this.handleClick}\n                  name=${this.cancelButtonName}\n                  secondary\n                ></temba-button>\n              </div>\n            </div>\n            <div class=\"flex-grow bottom-padding\"></div>\n            <div class=\"bottom-padding\"></div>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/dialog/Dialog.ts"],"names":[],"mappings":"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","sourcesContent":["import { property } from 'lit-element/lib/decorators';\nimport { TemplateResult, html, css } from 'lit-element';\nimport { Button } from '../button/Button';\nimport { RapidElement } from '../RapidElement';\nimport { CustomEventType } from '../interfaces';\nimport { styleMap } from 'lit-html/directives/style-map';\nimport { getClasses } from '../utils';\n\nexport class Dialog extends RapidElement {\n  static get widths(): { [size: string]: string } {\n    return {\n      small: '400px',\n      medium: '600px',\n      large: '655px',\n    };\n  }\n\n  static get styles() {\n    return css`\n      :host {\n        position: absolute;\n        z-index: 10000;\n        font-family: var(--font-family);\n        background: white;\n      }\n\n      .flex {\n        display: flex;\n        flex-direction: column;\n        width: 100%;\n        position: relative;\n        left: 0px;\n        top: 0px;\n        align-items: center;\n      }\n\n      .flex-grow {\n        flex-grow: 1;\n      }\n\n      .bottom-padding {\n        padding: 3rem;\n      }\n\n      .dialog-mask {\n        width: 100%;\n        background: rgba(0, 0, 0, 0.5);\n        opacity: 0;\n        position: fixed;\n        top: 0px;\n        left: 0px;\n        transition: opacity linear calc(var(--transition-speed) / 2ms);\n        pointer-events: none;\n      }\n\n      .dialog-container {\n        margin-top: -10000px;\n        position: relative;\n        transition: transform cubic-bezier(0.71, 0.18, 0.61, 1.33)\n            var(--transition-speed),\n          opacity ease-in-out calc(var(--transition-speed) - 50ms);\n        border-radius: var(--curvature);\n        box-shadow: 0px 0px 2px 4px rgba(0, 0, 0, 0.06);\n        overflow: hidden;\n        transform: scale(0.7);\n        background: white;\n      }\n\n      .dialog-body {\n        background: #fff;\n        max-height: 75vh;\n        overflow-y: auto;\n      }\n\n      .dialog-mask.dialog-open {\n        opacity: 1;\n        pointer-events: auto;\n      }\n\n      .dialog-mask.dialog-open .dialog-container {\n        top: inherit;\n      }\n\n      .dialog-mask.dialog-animation-end .dialog-container {\n        margin-top: 10vh;\n        transform: scale(1) !important;\n      }\n\n      .dialog-mask.dialog-ready .dialog-container {\n        margin-top: 10vh;\n        transform: none;\n      }\n\n      .dialog-mask.dialog-loading .dialog-container {\n        margin-top: -10000px;\n      }\n\n      .header-text {\n        font-size: 20px;\n        padding: 12px 20px;\n        font-weight: 300;\n        color: var(--header-text);\n        background: var(--header-bg);\n      }\n\n      .dialog-footer {\n        background: var(--color-primary-light);\n        padding: 10px;\n        display: flex;\n        flex-flow: row-reverse;\n      }\n\n      temba-button {\n        margin-left: 10px;\n      }\n\n      .dialog-body temba-loading {\n        position: absolute;\n        right: 12px;\n        margin-top: -30px;\n        padding-bottom: 9px;\n        display: none;\n      }\n\n      #page-loader {\n        text-align: center;\n        display: block;\n        position: relative;\n        opacity: 0;\n        margin: auto;\n        margin-top: 30px;\n        width: 154px;\n        transition: opacity calc(var(--transition-speed) * 5ms) ease-in\n          calc(var(--transition-speed * 2));\n        visibility: hidden;\n      }\n\n      .dialog-mask.dialog-loading #page-loader {\n        opacity: 1;\n        visibility: visible;\n      }\n\n      #submit-loader {\n        flex-grow: 1;\n        text-align: right;\n      }\n    `;\n  }\n\n  @property({ type: Boolean })\n  open: boolean;\n\n  @property()\n  header: string;\n\n  @property()\n  body: string;\n\n  @property({ type: Boolean })\n  submitting: boolean;\n\n  @property({ type: Boolean })\n  destructive: boolean;\n\n  @property({ type: Boolean })\n  disabled: boolean;\n\n  @property({ type: Boolean })\n  loading: boolean;\n\n  @property({ type: Boolean })\n  hideOnClick: boolean;\n\n  @property({ type: Boolean })\n  noFocus: boolean;\n\n  @property()\n  size = 'medium';\n\n  @property({ type: String })\n  primaryButtonName = 'Ok';\n\n  @property({ type: String })\n  cancelButtonName = 'Cancel';\n\n  @property()\n  submittingName = 'Saving';\n\n  @property()\n  animationEnd: boolean;\n\n  @property()\n  ready: boolean;\n\n  @property({ attribute: false })\n  onButtonClicked: (button: Button) => void;\n\n  scrollOffset: any = 0;\n\n  public constructor() {\n    super();\n  }\n\n  public updated(changedProperties: Map<string, any>) {\n    if (changedProperties.has('open')) {\n      const body = document.querySelector('body');\n\n      if (this.open) {\n        this.animationEnd = true;\n        window.setTimeout(() => {\n          this.ready = true;\n          this.animationEnd = false;\n        }, 400);\n\n        const scrollbarWidth = window.outerWidth - body.clientWidth;\n        this.scrollOffset = -document.documentElement.scrollTop;\n        body.style.position = 'fixed';\n        body.style.overflowY = 'scroll';\n        body.style.top = this.scrollOffset + 'px';\n        body.style.width = '100%';\n        body.style.overflowY = 'hidden';\n        body.style.paddingRight = scrollbarWidth + 'px';\n      } else {\n        body.style.position = '';\n        body.style.overflowY = '';\n        body.style.width = '';\n        body.style.marginRight = '';\n        body.style.paddingRight = '0px';\n        window.scrollTo(0, parseInt(this.scrollOffset || '0') * -1);\n      }\n\n      // make sure our buttons aren't in progress on show\n      if (this.open && !changedProperties.get('open')) {\n        this.shadowRoot\n          .querySelectorAll('temba-button')\n          .forEach((button: Button) => (button.disabled = false));\n\n        if (!this.noFocus) {\n          this.focusFirstInput();\n        }\n      } else {\n        window.setTimeout(() => {\n          this.ready = false;\n        }, 400);\n      }\n    }\n  }\n\n  public focusFirstInput(): void {\n    window.setTimeout(() => {\n      let input = this.querySelector(\n        'temba-textinput, temba-completion, input[type=\"text\"], textarea'\n      ) as any;\n      if (input) {\n        input = input.textInputElement || input.inputElement || input;\n        if (!input.readOnly) {\n          input.focus();\n          input.click();\n        }\n      }\n    }, 100);\n  }\n\n  public handleClick(evt: MouseEvent) {\n    const button = evt.currentTarget as Button;\n    if (!button.disabled) {\n      this.fireCustomEvent(CustomEventType.ButtonClicked, { button });\n      if (button.name === this.cancelButtonName) {\n        this.open = false;\n      }\n    }\n  }\n\n  private getDocumentHeight(): number {\n    const body = document.body;\n    const html = document.documentElement;\n    return Math.max(\n      body.scrollHeight,\n      body.offsetHeight,\n      html.clientHeight,\n      html.scrollHeight,\n      html.offsetHeight\n    );\n  }\n\n  private clickCancel() {\n    const cancel = this.getCancelButton();\n    if (cancel) {\n      cancel.click();\n    }\n  }\n\n  public getCancelButton(): Button {\n    return this.shadowRoot.querySelector(\n      `temba-button[name='${this.cancelButtonName}']`\n    );\n  }\n\n  public getPrimaryButton(): Button {\n    return this.shadowRoot.querySelector(`temba-button[primary]`);\n  }\n\n  private handleKeyUp(event: KeyboardEvent) {\n    if (event.key === 'Escape') {\n      this.clickCancel();\n    }\n  }\n\n  private handleClickMask(event: MouseEvent) {\n    if (this.hideOnClick) {\n      const id = (event.target as HTMLElement).id;\n      if (id === 'dialog-mask' || id === 'dialog-bg') {\n        this.fireCustomEvent(CustomEventType.DialogHidden);\n        this.clickCancel();\n      }\n    }\n  }\n\n  public show(): void {\n    this.open = true;\n  }\n\n  public hide(): void {\n    this.open = false;\n  }\n\n  public render(): TemplateResult {\n    const height = this.getDocumentHeight();\n\n    const maskStyle = {\n      height: `${height + 100}px`,\n    };\n    const dialogStyle = { width: Dialog.widths[this.size] };\n\n    const header = this.header\n      ? html`\n          <div class=\"dialog-header\">\n            <div class=\"header-text\">${this.header}</div>\n          </div>\n        `\n      : null;\n\n    return html`\n      <div\n        id=\"dialog-mask\"\n        @click=${this.handleClickMask}\n        class=\"dialog-mask ${getClasses({\n          'dialog-open': this.open,\n          'dialog-loading': this.loading,\n          'dialog-animation-end': this.animationEnd,\n          'dialog-ready': this.ready,\n        })}\"\n        style=${styleMap(maskStyle)}\n      >\n        <div style=\"position: absolute; width: 100%;\">\n          <temba-loading\n            id=\"page-loader\"\n            units=\"6\"\n            size=\"12\"\n            color=\"#ccc\"\n          ></temba-loading>\n        </div>\n\n        <div class=\"flex\">\n          <div class=\"flex-grow\"></div>\n          <div\n            @keyup=${this.handleKeyUp}\n            style=${styleMap(dialogStyle)}\n            class=\"dialog-container\"\n          >\n            ${header}\n            <div class=\"dialog-body\" @keypress=${this.handleKeyUp}>\n              ${this.body ? this.body : html`<slot></slot>`}\n              <temba-loading units=\"6\" size=\"8\"></temba-loading>\n            </div>\n\n            <div class=\"dialog-footer\">\n                ${\n                  this.primaryButtonName\n                    ? html`\n                        <temba-button\n                          @click=${this.handleClick}\n                          .name=${this.primaryButtonName}\n                          ?destructive=${this.destructive}\n                          ?primary=${!this.destructive}\n                          ?submitting=${this.submitting}\n                          ?disabled=${this.disabled}\n                          >}</temba-button\n                        >\n                      `\n                    : null\n                }\n                <temba-button\n                  @click=${this.handleClick}\n                  name=${this.cancelButtonName}\n                  secondary\n                ></temba-button>\n              </div>\n            </div>\n            <div class=\"flex-grow bottom-padding\"></div>\n            <div class=\"bottom-padding\"></div>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}

package/out-tsc/src/options/Options.js

@@ -31,17 +31,22 @@ export class Options extends RapidElement {
     static get styles() {
         return css `
       .options-container {
-        visibility: hidden;
-        border-radius: var(--curvature-widget);
         background: var(--color-widget-bg-focused);
         user-select: none;
         box-shadow: var(--options-shadow);
-        border: 1px solid var(--color-widget-border);
         border-radius: var(--curvature-widget);
         overflow: hidden;
         margin-top: var(--options-margin-top);
         display: flex;
         flex-direction: column;
+        transform: scaleY(0.5) translateY(-5em);
+        transition: transform var(--transition-speed)
+            cubic-bezier(0.71, 0.18, 0.61, 1.33),
+          opacity var(--transition-speed) cubic-bezier(0.71, 0.18, 0.61, 1.33);
+        z-index: 10000;
+        pointer-events: none;
+        opacity: 0;
+        border: 1px transparent;
       }
 
       .anchored {
@@ -102,12 +107,15 @@ export class Options extends RapidElement {
       }
 
       .show {
-        visibility: visible;
         z-index: 10000;
+        transform: scaleY(1) translateY(0);
+        border: 1px solid var(--color-widget-border);
+        pointer-events: auto;
+        opacity: 1;
       }
 
       .option {
-        font-size: 14px;
+        font-size: var(--temba-options-font-size);
         padding: 5px 10px;
         border-radius: 4px;
         margin: 0.3em;
@@ -222,6 +230,14 @@ export class Options extends RapidElement {
                 index: this.cursorIndex,
             });
         }
+        if (changedProperties.has('visible') && changedProperties.has('options')) {
+            if (!this.visible && this.options.length == 0) {
+                this.tempOptions = changedProperties.get('options');
+                window.setTimeout(() => {
+                    this.tempOptions = [];
+                }, 300);
+            }
+        }
         if (changedProperties.has('options')) {
             this.calculatePosition();
             // allow scrolls to trigger again
@@ -399,6 +415,11 @@ export class Options extends RapidElement {
             }
         }
     }
+    // we need to swallow mouse down so we don't grab focus
+    handleMouseDown(evt) {
+        evt.preventDefault();
+        evt.stopPropagation();
+    }
     handleOptionClick(evt) {
         evt.preventDefault();
         evt.stopPropagation();
@@ -434,16 +455,26 @@ export class Options extends RapidElement {
         const classesInner = getClasses({
             options: true,
         });
-        const options = this.options || [];
+        let options = this.options || [];
+        if (options.length == 0 &&
+            this.tempOptions &&
+            this.tempOptions.length > 0) {
+            options = this.tempOptions;
+        }
         return html `
       <div class=${classes} style=${styleMap(containerStyle)}>
-        <div class="options-scroll" @scroll=${this.handleInnerScroll}>
+        <div
+          class="options-scroll"
+          @scroll=${this.handleInnerScroll}
+          @mousedown=${this.handleMouseDown}
+        >
           <div class="${classesInner}" style=${styleMap(optionsStyle)}>
             ${options.map((option, index) => {
             return html `<div
                 data-option-index="${index}"
                 @mousemove=${this.handleMouseMove}
                 @click=${this.handleOptionClick}
+                @mousedown=${this.handleMouseDown}
                 class="option ${index === this.cursorIndex ? 'focused' : ''}"
               >
                 ${this.resolvedRenderOption(option, index === this.cursorIndex)}
@@ -494,6 +525,9 @@ __decorate([
 __decorate([
     property({ type: Array })
 ], Options.prototype, "options", void 0);
+__decorate([
+    property({ type: Array })
+], Options.prototype, "tempOptions", void 0);
 __decorate([
     property({ type: Boolean })
 ], Options.prototype, "poppedTop", void 0);

package/out-tsc/src/options/Options.js.map

@@ -1 +1 @@
-{"version":3,"file":"Options.js","sourceRoot":"","sources":["../../../src/options/Options.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, property, css } from 'lit-element';\nimport { CustomEventType } from '../interfaces';\nimport { RapidElement, EventHandler } from '../RapidElement';\nimport { styleMap } from 'lit-html/directives/style-map';\nimport {\n  getClasses,\n  getScrollParent,\n  isElementVisible,\n  throttle,\n} from '../utils';\n\ninterface NameFunction {\n  (option: any): string;\n}\n\nexport class Options extends RapidElement {\n  static get styles() {\n    return css`\n      .options-container {\n        visibility: hidden;\n        border-radius: var(--curvature-widget);\n        background: var(--color-widget-bg-focused);\n        user-select: none;\n        box-shadow: var(--options-shadow);\n        border: 1px solid var(--color-widget-border);\n        border-radius: var(--curvature-widget);\n        overflow: hidden;\n        margin-top: var(--options-margin-top);\n        display: flex;\n        flex-direction: column;\n      }\n\n      .anchored {\n        position: fixed;\n      }\n\n      :host([block]) .options-container {\n        flex-grow: 1;\n        height: 100%;\n        border: none;\n      }\n\n      :host([block]) .options-scroll {\n        height: 100%;\n        z-index: 9000;\n        visibility: visible;\n        overflow-y: auto;\n        flex-grow: 1;\n        -webkit-mask-image: -webkit-radial-gradient(white, black);\n      }\n\n      :host([block]) {\n        box-shadow: var(--options-block-shadow);\n        border-radius: var(--curvature);\n        display: block;\n        height: 100%;\n      }\n\n      :host([block]) .options {\n        margin-bottom: 1.5em;\n      }\n\n      .options-scroll {\n        display: flex;\n        flex-direction: column;\n      }\n\n      :host([collapsed]) temba-icon {\n        flex-grow: 1;\n        margin-right: 0px !important;\n        padding-top: 0.25em;\n        padding-bottom: 0.25em;\n      }\n\n      :host([collapsed]) .name {\n        display: none;\n      }\n\n      :host([collapsed]) .count {\n        display: none;\n      }\n\n      .options {\n        border-radius: var(--curvature-widget);\n        overflow-y: auto;\n        max-height: 225px;\n        border: none;\n      }\n\n      .show {\n        visibility: visible;\n        z-index: 10000;\n      }\n\n      .option {\n        font-size: 14px;\n        padding: 5px 10px;\n        border-radius: 4px;\n        margin: 0.3em;\n        cursor: pointer;\n        color: var(--color-text-dark);\n      }\n\n      .option * {\n        user-select: none;\n        -webkit-user-select: none;\n        -ms-user-select: none;\n        overflow-wrap: break-word;\n        word-wrap: break-word;\n        -ms-word-break: break-all;\n        word-break: break-word;\n        -ms-hyphens: auto;\n        -moz-hyphens: auto;\n        -webkit-hyphens: auto;\n        hyphens: auto;\n      }\n\n      .option.focused {\n        background: var(--color-selection);\n        color: var(--color-text-dark);\n      }\n\n      .option .detail {\n        font-size: 85%;\n        color: rgba(0, 0, 0, 0.4);\n      }\n\n      code {\n        background: rgba(0, 0, 0, 0.05);\n        padding: 1px 5px;\n        border-radius: var(--curvature-widget);\n      }\n\n      :host([block]) {\n        position: relative;\n      }\n\n      :host([block]) .options {\n        overflow-y: initial;\n      }\n\n      temba-loading {\n        align-self: center;\n        margin-top: 0.025em;\n      }\n\n      .loader-bar {\n        pointer-events: none;\n        align-items: center;\n        background: #eee;\n        max-height: 0;\n        transition: max-height 200ms ease-in-out;\n        border-bottom-left-radius: var(--curvature-widget);\n        border-bottom-right-radius: var(--curvature-widget);\n        display: flex;\n        overflow: hidden;\n      }\n\n      .loading .loader-bar {\n        max-height: 1.1em;\n      }\n    `;\n  }\n\n  @property({ type: Number })\n  top: number;\n\n  @property({ type: Number })\n  left: number;\n\n  @property({ type: Number })\n  width: number;\n\n  @property({ type: Number })\n  marginHorizontal = 0;\n\n  @property({ type: Number })\n  marginVertical = 7;\n\n  @property({ type: Object })\n  anchorTo: HTMLElement;\n\n  @property({ type: Boolean })\n  visible: boolean;\n\n  @property({ type: Boolean })\n  block: boolean;\n\n  @property({ type: Number })\n  scrollPct = 75;\n\n  @property({ type: Number })\n  cursorIndex = -1;\n\n  @property({ type: Array })\n  options: any[];\n\n  @property({ type: Boolean })\n  poppedTop: boolean;\n\n  @property({ type: Boolean })\n  spaceSelect: boolean;\n\n  @property({ type: String })\n  nameKey = 'name';\n\n  @property({ type: Boolean })\n  loading = false;\n\n  @property({ type: Boolean })\n  collapsed: boolean;\n\n  @property({ attribute: false })\n  getName: { (option: any): string } = function (option: any) {\n    return option[this.nameKey || 'name'];\n  };\n\n  @property({ attribute: false })\n  renderInputOption: { (): TemplateResult } = function () {\n    return null;\n  };\n\n  @property({ attribute: false })\n  renderOption: { (option: any, selected: boolean): TemplateResult };\n\n  @property({ attribute: false })\n  renderOptionName: { (option: any, selected: boolean): TemplateResult };\n\n  @property({ attribute: false })\n  renderOptionDetail: { (option: any, selected: boolean): TemplateResult };\n\n  @property({ type: Number })\n  scrollHeight = 0;\n\n  @property({ type: Boolean })\n  triggerScroll = false;\n\n  scrollParent: HTMLElement = null;\n\n  resolvedRenderOption: { (option: any, selected: boolean): TemplateResult };\n\n  public firstUpdated() {\n    if (!this.block) {\n      this.scrollParent = getScrollParent(this);\n      this.calculatePosition = this.calculatePosition.bind(this);\n      if (this.scrollParent) {\n        this.scrollParent.addEventListener('scroll', this.calculatePosition);\n      }\n      this.calculatePosition();\n    }\n\n    this.resolvedRenderOption = (\n      this.renderOption || this.renderOptionDefault\n    ).bind(this);\n  }\n\n  public disconnectedCallback() {\n    if (!this.block) {\n      if (this.scrollParent) {\n        this.scrollParent.removeEventListener('scroll', this.calculatePosition);\n      }\n    }\n  }\n\n  private isFocused() {\n    const focused =\n      this.closestElement(document.activeElement.tagName) ===\n      document.activeElement;\n\n    return focused;\n  }\n\n  public updated(changedProperties: Map<string, any>) {\n    super.updated(changedProperties);\n\n    // if our cursor changed, lets make sure our scrollbox is showing it\n    if (changedProperties.has('cursorIndex')) {\n      const focusedOption = this.shadowRoot.querySelector(\n        `div[data-option-index=\"${this.cursorIndex}\"]`\n      ) as HTMLDivElement;\n\n      if (focusedOption) {\n        const scrollBox = this.shadowRoot.querySelector('.options-container');\n        const scrollBoxRect = scrollBox.getBoundingClientRect();\n        const scrollBoxHeight = scrollBoxRect.height;\n        const focusedEleHeight = focusedOption.getBoundingClientRect().height;\n\n        if (\n          focusedOption.offsetTop + focusedEleHeight >\n          scrollBox.scrollTop + scrollBoxHeight - 5\n        ) {\n          const scrollTo =\n            focusedOption.offsetTop - scrollBoxHeight + focusedEleHeight + 5;\n          scrollBox.scrollTop = scrollTo;\n        } else if (focusedOption.offsetTop < scrollBox.scrollTop) {\n          const scrollTo = focusedOption.offsetTop - 5;\n          scrollBox.scrollTop = scrollTo;\n        }\n      }\n\n      this.fireCustomEvent(CustomEventType.CursorChanged, {\n        index: this.cursorIndex,\n      });\n    }\n\n    if (changedProperties.has('options')) {\n      this.calculatePosition();\n\n      // allow scrolls to trigger again\n      this.triggerScroll = true;\n\n      const prevOptions = changedProperties.get('options');\n      const previousCount = prevOptions ? prevOptions.length : 0;\n      const newCount = this.options ? this.options.length : 0;\n\n      if (\n        this.cursorIndex === -1 ||\n        newCount < previousCount ||\n        (previousCount === 0 &&\n          newCount > 0 &&\n          !changedProperties.has('cursorIndex'))\n      ) {\n        if (!this.block) {\n          this.cursorIndex = 0;\n        } else {\n          if (this.cursorIndex >= newCount) {\n            this.cursorIndex = newCount - 1;\n          }\n        }\n\n        if (this.block) {\n          this.handleSelection(false);\n        }\n      }\n\n      // if on initial load we don't have enough options to load, trigger a scroll\n      // threshold event in case the page size is smaller than our control height\n      const scrollBox = this.shadowRoot.querySelector('.options');\n      if (scrollBox.scrollHeight == scrollBox.clientHeight) {\n        this.fireCustomEvent(CustomEventType.ScrollThreshold);\n      }\n    }\n\n    if (changedProperties.has('visible')) {\n      window.setTimeout(() => {\n        this.calculatePosition();\n      }, 100);\n    }\n  }\n\n  private renderOptionDefault(option: any, selected: boolean): TemplateResult {\n    const renderOptionName = (\n      this.renderOptionName || this.renderOptionNameDefault\n    ).bind(this);\n    const renderOptionDetail = (\n      this.renderOptionDetail || this.renderOptionDetailDefault\n    ).bind(this);\n\n    if (selected) {\n      return html`\n        <div class=\"name\">${renderOptionName(option, selected)}</div>\n        <div class=\"detail\">${renderOptionDetail(option, selected)}</div>\n      `;\n    } else {\n      return html`\n        <div class=\"name\">${renderOptionName(option, selected)}</div>\n      `;\n    }\n  }\n\n  private renderOptionNameDefault(option: any): TemplateResult {\n    return html`<div style=\"display:flex; align-items:flex-start\">\n      ${option.icon\n        ? html`<temba-icon\n            name=\"${option.icon}\"\n            style=\"margin-right:0.5em; fill: var(--color-text-dark);\"\n          ></temba-icon>`\n        : null}\n      <div style=\"flex-grow:1\">${option.prefix}${this.getName(option)}</div>\n    </div>`;\n  }\n\n  private renderOptionDetailDefault(option: any): TemplateResult {\n    return html` ${option.detail} `;\n  }\n\n  private handleSelection(tabbed = false, index = -1) {\n    if (index === -1) {\n      index = this.cursorIndex;\n    }\n\n    const selected = this.options[index];\n    this.fireCustomEvent(CustomEventType.Selection, {\n      selected,\n      tabbed,\n      index,\n    });\n  }\n\n  private moveCursor(direction: number): void {\n    const newIndex = Math.max(\n      Math.min(this.cursorIndex + direction, this.options.length - 1),\n      0\n    );\n    this.setCursor(newIndex);\n  }\n\n  private setCursor: (index: number) => void = throttle(function (\n    index: number\n  ) {\n    if (index !== this.cursorIndex) {\n      this.cursorIndex = index;\n    }\n  },\n  50);\n\n  private handleKeyDown(evt: KeyboardEvent) {\n    if (this.block && !this.isFocused()) {\n      return;\n    }\n\n    if (this.options && this.options.length > 0) {\n      if ((evt.ctrlKey && evt.key === 'n') || evt.key === 'ArrowDown') {\n        this.moveCursor(1);\n        evt.preventDefault();\n        evt.stopPropagation();\n        if (this.block) {\n          this.handleSelection(false);\n        }\n      } else if ((evt.ctrlKey && evt.key === 'p') || evt.key === 'ArrowUp') {\n        this.moveCursor(-1);\n        evt.preventDefault();\n        if (this.block) {\n          this.handleSelection(false);\n        }\n      } else if (\n        evt.key === 'Enter' ||\n        evt.key === 'Tab' ||\n        (this.spaceSelect && evt.key === ' ')\n      ) {\n        evt.preventDefault();\n        evt.stopPropagation();\n        this.handleSelection(evt.key === 'Tab');\n      }\n\n      if (evt.key === 'Escape') {\n        this.fireCustomEvent(CustomEventType.Canceled);\n      }\n    }\n  }\n\n  private handleInnerScroll(evt: Event) {\n    const scrollbox = evt.target as HTMLDivElement;\n\n    // scroll height has changed, enable scroll trigger\n    if (scrollbox.scrollHeight > this.scrollHeight) {\n      this.scrollHeight = scrollbox.scrollHeight;\n      this.triggerScroll = true;\n    }\n\n    if (this.triggerScroll) {\n      const scrollPct =\n        scrollbox.scrollTop / (scrollbox.scrollHeight - scrollbox.clientHeight);\n      if (scrollPct * 100 > this.scrollPct) {\n        this.fireCustomEvent(CustomEventType.ScrollThreshold);\n        this.triggerScroll = false;\n      }\n    }\n  }\n\n  private calculatePosition() {\n    if (this.visible && !this.block) {\n      const optionsBounds = this.shadowRoot\n        .querySelector('.options-container')\n        .getBoundingClientRect();\n\n      if (this.anchorTo) {\n        const anchorBounds = this.anchorTo.getBoundingClientRect();\n        const topTop = anchorBounds.top - optionsBounds.height;\n\n        if (this.anchorTo && this.scrollParent) {\n          if (!isElementVisible(this.anchorTo, this.scrollParent)) {\n            // this.fireCustomEvent(CustomEventType.Canceled);\n          }\n        }\n\n        if (\n          topTop > 0 &&\n          anchorBounds.bottom + optionsBounds.height > window.innerHeight\n        ) {\n          this.top = topTop; //  + window.pageYOffset;\n          this.poppedTop = true;\n        } else {\n          this.top = anchorBounds.bottom; //  + window.pageYOffset;\n          this.poppedTop = false;\n        }\n\n        this.left = anchorBounds.left;\n        this.width = anchorBounds.width - 2 - this.marginHorizontal * 2;\n      }\n    }\n  }\n\n  public getEventHandlers(): EventHandler[] {\n    return [\n      {\n        event: 'keydown',\n        method: this.handleKeyDown,\n        isDocument: true,\n      },\n      {\n        event: 'scroll',\n        method: this.calculatePosition,\n        isDocument: true,\n      },\n    ];\n  }\n\n  private handleMouseMove(evt: MouseEvent) {\n    if (!this.block) {\n      if (Math.abs(evt.movementX) + Math.abs(evt.movementY) > 0) {\n        const index = (evt.currentTarget as HTMLElement).getAttribute(\n          'data-option-index'\n        );\n        this.setCursor(parseInt(index));\n      }\n    }\n  }\n\n  private handleOptionClick(evt: MouseEvent) {\n    evt.preventDefault();\n    evt.stopPropagation();\n\n    const index = (evt.currentTarget as HTMLElement).getAttribute(\n      'data-option-index'\n    );\n\n    if (index) {\n      const newIndex = parseInt(index);\n      this.setCursor(newIndex);\n      this.handleSelection(false, newIndex);\n    }\n  }\n\n  public render(): TemplateResult {\n    let vertical = this.block ? 0 : this.marginVertical;\n    if (this.poppedTop) {\n      vertical *= -1;\n    }\n\n    const containerStyle = {\n      top: this.top ? `${this.top}px` : '0px',\n      left: this.left ? `${this.left}px` : '0px',\n      'margin-left': `${this.marginHorizontal}px`,\n      'margin-top': `${vertical}px`,\n    };\n\n    const optionsStyle = {};\n    if (this.width) {\n      optionsStyle['width'] = `${this.width}px`;\n    }\n\n    const classes = getClasses({\n      'options-container': true,\n      show: this.visible,\n      top: this.poppedTop,\n      anchored: !this.block,\n      loading: this.loading,\n    });\n\n    const classesInner = getClasses({\n      options: true,\n    });\n\n    const options = this.options || [];\n    return html`\n      <div class=${classes} style=${styleMap(containerStyle)}>\n        <div class=\"options-scroll\" @scroll=${this.handleInnerScroll}>\n          <div class=\"${classesInner}\" style=${styleMap(optionsStyle)}>\n            ${options.map((option, index) => {\n              return html`<div\n                data-option-index=\"${index}\"\n                @mousemove=${this.handleMouseMove}\n                @click=${this.handleOptionClick}\n                class=\"option ${index === this.cursorIndex ? 'focused' : ''}\"\n              >\n                ${this.resolvedRenderOption(option, index === this.cursorIndex)}\n              </div>`;\n            })}\n            ${this.block ? html`<div style=\"height:0.1em\"></div>` : null}\n          </div>\n          <slot></slot>\n        </div>\n\n        <div class=\"loader-bar\">\n          <temba-loading></temba-loading>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"Options.js","sourceRoot":"","sources":["../../../src/options/Options.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, property, css } from 'lit-element';\nimport { CustomEventType } from '../interfaces';\nimport { RapidElement, EventHandler } from '../RapidElement';\nimport { styleMap } from 'lit-html/directives/style-map';\nimport {\n  getClasses,\n  getScrollParent,\n  isElementVisible,\n  throttle,\n} from '../utils';\n\nexport class Options extends RapidElement {\n  static get styles() {\n    return css`\n      .options-container {\n        background: var(--color-widget-bg-focused);\n        user-select: none;\n        box-shadow: var(--options-shadow);\n        border-radius: var(--curvature-widget);\n        overflow: hidden;\n        margin-top: var(--options-margin-top);\n        display: flex;\n        flex-direction: column;\n        transform: scaleY(0.5) translateY(-5em);\n        transition: transform var(--transition-speed)\n            cubic-bezier(0.71, 0.18, 0.61, 1.33),\n          opacity var(--transition-speed) cubic-bezier(0.71, 0.18, 0.61, 1.33);\n        z-index: 10000;\n        pointer-events: none;\n        opacity: 0;\n        border: 1px transparent;\n      }\n\n      .anchored {\n        position: fixed;\n      }\n\n      :host([block]) .options-container {\n        flex-grow: 1;\n        height: 100%;\n        border: none;\n      }\n\n      :host([block]) .options-scroll {\n        height: 100%;\n        z-index: 9000;\n        visibility: visible;\n        overflow-y: auto;\n        flex-grow: 1;\n        -webkit-mask-image: -webkit-radial-gradient(white, black);\n      }\n\n      :host([block]) {\n        box-shadow: var(--options-block-shadow);\n        border-radius: var(--curvature);\n        display: block;\n        height: 100%;\n      }\n\n      :host([block]) .options {\n        margin-bottom: 1.5em;\n      }\n\n      .options-scroll {\n        display: flex;\n        flex-direction: column;\n      }\n\n      :host([collapsed]) temba-icon {\n        flex-grow: 1;\n        margin-right: 0px !important;\n        padding-top: 0.25em;\n        padding-bottom: 0.25em;\n      }\n\n      :host([collapsed]) .name {\n        display: none;\n      }\n\n      :host([collapsed]) .count {\n        display: none;\n      }\n\n      .options {\n        border-radius: var(--curvature-widget);\n        overflow-y: auto;\n        max-height: 225px;\n        border: none;\n      }\n\n      .show {\n        z-index: 10000;\n        transform: scaleY(1) translateY(0);\n        border: 1px solid var(--color-widget-border);\n        pointer-events: auto;\n        opacity: 1;\n      }\n\n      .option {\n        font-size: var(--temba-options-font-size);\n        padding: 5px 10px;\n        border-radius: 4px;\n        margin: 0.3em;\n        cursor: pointer;\n        color: var(--color-text-dark);\n      }\n\n      .option * {\n        user-select: none;\n        -webkit-user-select: none;\n        -ms-user-select: none;\n        overflow-wrap: break-word;\n        word-wrap: break-word;\n        -ms-word-break: break-all;\n        word-break: break-word;\n        -ms-hyphens: auto;\n        -moz-hyphens: auto;\n        -webkit-hyphens: auto;\n        hyphens: auto;\n      }\n\n      .option.focused {\n        background: var(--color-selection);\n        color: var(--color-text-dark);\n      }\n\n      .option .detail {\n        font-size: 85%;\n        color: rgba(0, 0, 0, 0.4);\n      }\n\n      code {\n        background: rgba(0, 0, 0, 0.05);\n        padding: 1px 5px;\n        border-radius: var(--curvature-widget);\n      }\n\n      :host([block]) {\n        position: relative;\n      }\n\n      :host([block]) .options {\n        overflow-y: initial;\n      }\n\n      temba-loading {\n        align-self: center;\n        margin-top: 0.025em;\n      }\n\n      .loader-bar {\n        pointer-events: none;\n        align-items: center;\n        background: #eee;\n        max-height: 0;\n        transition: max-height 200ms ease-in-out;\n        border-bottom-left-radius: var(--curvature-widget);\n        border-bottom-right-radius: var(--curvature-widget);\n        display: flex;\n        overflow: hidden;\n      }\n\n      .loading .loader-bar {\n        max-height: 1.1em;\n      }\n    `;\n  }\n\n  @property({ type: Number })\n  top: number;\n\n  @property({ type: Number })\n  left: number;\n\n  @property({ type: Number })\n  width: number;\n\n  @property({ type: Number })\n  marginHorizontal = 0;\n\n  @property({ type: Number })\n  marginVertical = 7;\n\n  @property({ type: Object })\n  anchorTo: HTMLElement;\n\n  @property({ type: Boolean })\n  visible: boolean;\n\n  @property({ type: Boolean })\n  block: boolean;\n\n  @property({ type: Number })\n  scrollPct = 75;\n\n  @property({ type: Number })\n  cursorIndex = -1;\n\n  @property({ type: Array })\n  options: any[];\n\n  @property({ type: Array })\n  tempOptions: any[];\n\n  @property({ type: Boolean })\n  poppedTop: boolean;\n\n  @property({ type: Boolean })\n  spaceSelect: boolean;\n\n  @property({ type: String })\n  nameKey = 'name';\n\n  @property({ type: Boolean })\n  loading = false;\n\n  @property({ type: Boolean })\n  collapsed: boolean;\n\n  @property({ attribute: false })\n  getName: { (option: any): string } = function (option: any) {\n    return option[this.nameKey || 'name'];\n  };\n\n  @property({ attribute: false })\n  renderInputOption: { (): TemplateResult } = function () {\n    return null;\n  };\n\n  @property({ attribute: false })\n  renderOption: { (option: any, selected: boolean): TemplateResult };\n\n  @property({ attribute: false })\n  renderOptionName: { (option: any, selected: boolean): TemplateResult };\n\n  @property({ attribute: false })\n  renderOptionDetail: { (option: any, selected: boolean): TemplateResult };\n\n  @property({ type: Number })\n  scrollHeight = 0;\n\n  @property({ type: Boolean })\n  triggerScroll = false;\n\n  scrollParent: HTMLElement = null;\n\n  resolvedRenderOption: { (option: any, selected: boolean): TemplateResult };\n\n  public firstUpdated() {\n    if (!this.block) {\n      this.scrollParent = getScrollParent(this);\n      this.calculatePosition = this.calculatePosition.bind(this);\n      if (this.scrollParent) {\n        this.scrollParent.addEventListener('scroll', this.calculatePosition);\n      }\n      this.calculatePosition();\n    }\n\n    this.resolvedRenderOption = (\n      this.renderOption || this.renderOptionDefault\n    ).bind(this);\n  }\n\n  public disconnectedCallback() {\n    if (!this.block) {\n      if (this.scrollParent) {\n        this.scrollParent.removeEventListener('scroll', this.calculatePosition);\n      }\n    }\n  }\n\n  private isFocused() {\n    const focused =\n      this.closestElement(document.activeElement.tagName) ===\n      document.activeElement;\n\n    return focused;\n  }\n\n  public updated(changedProperties: Map<string, any>) {\n    super.updated(changedProperties);\n\n    // if our cursor changed, lets make sure our scrollbox is showing it\n    if (changedProperties.has('cursorIndex')) {\n      const focusedOption = this.shadowRoot.querySelector(\n        `div[data-option-index=\"${this.cursorIndex}\"]`\n      ) as HTMLDivElement;\n\n      if (focusedOption) {\n        const scrollBox = this.shadowRoot.querySelector('.options-container');\n        const scrollBoxRect = scrollBox.getBoundingClientRect();\n        const scrollBoxHeight = scrollBoxRect.height;\n        const focusedEleHeight = focusedOption.getBoundingClientRect().height;\n\n        if (\n          focusedOption.offsetTop + focusedEleHeight >\n          scrollBox.scrollTop + scrollBoxHeight - 5\n        ) {\n          const scrollTo =\n            focusedOption.offsetTop - scrollBoxHeight + focusedEleHeight + 5;\n          scrollBox.scrollTop = scrollTo;\n        } else if (focusedOption.offsetTop < scrollBox.scrollTop) {\n          const scrollTo = focusedOption.offsetTop - 5;\n          scrollBox.scrollTop = scrollTo;\n        }\n      }\n\n      this.fireCustomEvent(CustomEventType.CursorChanged, {\n        index: this.cursorIndex,\n      });\n    }\n\n    if (changedProperties.has('visible') && changedProperties.has('options')) {\n      if (!this.visible && this.options.length == 0) {\n        this.tempOptions = changedProperties.get('options');\n        window.setTimeout(() => {\n          this.tempOptions = [];\n        }, 300);\n      }\n    }\n\n    if (changedProperties.has('options')) {\n      this.calculatePosition();\n\n      // allow scrolls to trigger again\n      this.triggerScroll = true;\n\n      const prevOptions = changedProperties.get('options');\n      const previousCount = prevOptions ? prevOptions.length : 0;\n      const newCount = this.options ? this.options.length : 0;\n\n      if (\n        this.cursorIndex === -1 ||\n        newCount < previousCount ||\n        (previousCount === 0 &&\n          newCount > 0 &&\n          !changedProperties.has('cursorIndex'))\n      ) {\n        if (!this.block) {\n          this.cursorIndex = 0;\n        } else {\n          if (this.cursorIndex >= newCount) {\n            this.cursorIndex = newCount - 1;\n          }\n        }\n\n        if (this.block) {\n          this.handleSelection(false);\n        }\n      }\n\n      // if on initial load we don't have enough options to load, trigger a scroll\n      // threshold event in case the page size is smaller than our control height\n      const scrollBox = this.shadowRoot.querySelector('.options');\n      if (scrollBox.scrollHeight == scrollBox.clientHeight) {\n        this.fireCustomEvent(CustomEventType.ScrollThreshold);\n      }\n    }\n\n    if (changedProperties.has('visible')) {\n      window.setTimeout(() => {\n        this.calculatePosition();\n      }, 100);\n    }\n  }\n\n  private renderOptionDefault(option: any, selected: boolean): TemplateResult {\n    const renderOptionName = (\n      this.renderOptionName || this.renderOptionNameDefault\n    ).bind(this);\n    const renderOptionDetail = (\n      this.renderOptionDetail || this.renderOptionDetailDefault\n    ).bind(this);\n\n    if (selected) {\n      return html`\n        <div class=\"name\">${renderOptionName(option, selected)}</div>\n        <div class=\"detail\">${renderOptionDetail(option, selected)}</div>\n      `;\n    } else {\n      return html`\n        <div class=\"name\">${renderOptionName(option, selected)}</div>\n      `;\n    }\n  }\n\n  private renderOptionNameDefault(option: any): TemplateResult {\n    return html`<div style=\"display:flex; align-items:flex-start\">\n      ${option.icon\n        ? html`<temba-icon\n            name=\"${option.icon}\"\n            style=\"margin-right:0.5em; fill: var(--color-text-dark);\"\n          ></temba-icon>`\n        : null}\n      <div style=\"flex-grow:1\">${option.prefix}${this.getName(option)}</div>\n    </div>`;\n  }\n\n  private renderOptionDetailDefault(option: any): TemplateResult {\n    return html` ${option.detail} `;\n  }\n\n  private handleSelection(tabbed = false, index = -1) {\n    if (index === -1) {\n      index = this.cursorIndex;\n    }\n\n    const selected = this.options[index];\n    this.fireCustomEvent(CustomEventType.Selection, {\n      selected,\n      tabbed,\n      index,\n    });\n  }\n\n  private moveCursor(direction: number): void {\n    const newIndex = Math.max(\n      Math.min(this.cursorIndex + direction, this.options.length - 1),\n      0\n    );\n    this.setCursor(newIndex);\n  }\n\n  private setCursor: (index: number) => void = throttle(function (\n    index: number\n  ) {\n    if (index !== this.cursorIndex) {\n      this.cursorIndex = index;\n    }\n  },\n  50);\n\n  private handleKeyDown(evt: KeyboardEvent) {\n    if (this.block && !this.isFocused()) {\n      return;\n    }\n\n    if (this.options && this.options.length > 0) {\n      if ((evt.ctrlKey && evt.key === 'n') || evt.key === 'ArrowDown') {\n        this.moveCursor(1);\n        evt.preventDefault();\n        evt.stopPropagation();\n        if (this.block) {\n          this.handleSelection(false);\n        }\n      } else if ((evt.ctrlKey && evt.key === 'p') || evt.key === 'ArrowUp') {\n        this.moveCursor(-1);\n        evt.preventDefault();\n        if (this.block) {\n          this.handleSelection(false);\n        }\n      } else if (\n        evt.key === 'Enter' ||\n        evt.key === 'Tab' ||\n        (this.spaceSelect && evt.key === ' ')\n      ) {\n        evt.preventDefault();\n        evt.stopPropagation();\n        this.handleSelection(evt.key === 'Tab');\n      }\n\n      if (evt.key === 'Escape') {\n        this.fireCustomEvent(CustomEventType.Canceled);\n      }\n    }\n  }\n\n  private handleInnerScroll(evt: Event) {\n    const scrollbox = evt.target as HTMLDivElement;\n\n    // scroll height has changed, enable scroll trigger\n    if (scrollbox.scrollHeight > this.scrollHeight) {\n      this.scrollHeight = scrollbox.scrollHeight;\n      this.triggerScroll = true;\n    }\n\n    if (this.triggerScroll) {\n      const scrollPct =\n        scrollbox.scrollTop / (scrollbox.scrollHeight - scrollbox.clientHeight);\n      if (scrollPct * 100 > this.scrollPct) {\n        this.fireCustomEvent(CustomEventType.ScrollThreshold);\n        this.triggerScroll = false;\n      }\n    }\n  }\n\n  private calculatePosition() {\n    if (this.visible && !this.block) {\n      const optionsBounds = this.shadowRoot\n        .querySelector('.options-container')\n        .getBoundingClientRect();\n\n      if (this.anchorTo) {\n        const anchorBounds = this.anchorTo.getBoundingClientRect();\n        const topTop = anchorBounds.top - optionsBounds.height;\n\n        if (this.anchorTo && this.scrollParent) {\n          if (!isElementVisible(this.anchorTo, this.scrollParent)) {\n            // this.fireCustomEvent(CustomEventType.Canceled);\n          }\n        }\n\n        if (\n          topTop > 0 &&\n          anchorBounds.bottom + optionsBounds.height > window.innerHeight\n        ) {\n          this.top = topTop; //  + window.pageYOffset;\n          this.poppedTop = true;\n        } else {\n          this.top = anchorBounds.bottom; //  + window.pageYOffset;\n          this.poppedTop = false;\n        }\n\n        this.left = anchorBounds.left;\n        this.width = anchorBounds.width - 2 - this.marginHorizontal * 2;\n      }\n    }\n  }\n\n  public getEventHandlers(): EventHandler[] {\n    return [\n      {\n        event: 'keydown',\n        method: this.handleKeyDown,\n        isDocument: true,\n      },\n      {\n        event: 'scroll',\n        method: this.calculatePosition,\n        isDocument: true,\n      },\n    ];\n  }\n\n  private handleMouseMove(evt: MouseEvent) {\n    if (!this.block) {\n      if (Math.abs(evt.movementX) + Math.abs(evt.movementY) > 0) {\n        const index = (evt.currentTarget as HTMLElement).getAttribute(\n          'data-option-index'\n        );\n        this.setCursor(parseInt(index));\n      }\n    }\n  }\n\n  // we need to swallow mouse down so we don't grab focus\n  private handleMouseDown(evt: MouseEvent) {\n    evt.preventDefault();\n    evt.stopPropagation();\n  }\n\n  private handleOptionClick(evt: MouseEvent) {\n    evt.preventDefault();\n    evt.stopPropagation();\n\n    const index = (evt.currentTarget as HTMLElement).getAttribute(\n      'data-option-index'\n    );\n\n    if (index) {\n      const newIndex = parseInt(index);\n      this.setCursor(newIndex);\n      this.handleSelection(false, newIndex);\n    }\n  }\n\n  public render(): TemplateResult {\n    let vertical = this.block ? 0 : this.marginVertical;\n    if (this.poppedTop) {\n      vertical *= -1;\n    }\n\n    const containerStyle = {\n      top: this.top ? `${this.top}px` : '0px',\n      left: this.left ? `${this.left}px` : '0px',\n      'margin-left': `${this.marginHorizontal}px`,\n      'margin-top': `${vertical}px`,\n    };\n\n    const optionsStyle = {};\n    if (this.width) {\n      optionsStyle['width'] = `${this.width}px`;\n    }\n\n    const classes = getClasses({\n      'options-container': true,\n      show: this.visible,\n      top: this.poppedTop,\n      anchored: !this.block,\n      loading: this.loading,\n    });\n\n    const classesInner = getClasses({\n      options: true,\n    });\n\n    let options = this.options || [];\n    if (\n      options.length == 0 &&\n      this.tempOptions &&\n      this.tempOptions.length > 0\n    ) {\n      options = this.tempOptions;\n    }\n\n    return html`\n      <div class=${classes} style=${styleMap(containerStyle)}>\n        <div\n          class=\"options-scroll\"\n          @scroll=${this.handleInnerScroll}\n          @mousedown=${this.handleMouseDown}\n        >\n          <div class=\"${classesInner}\" style=${styleMap(optionsStyle)}>\n            ${options.map((option, index) => {\n              return html`<div\n                data-option-index=\"${index}\"\n                @mousemove=${this.handleMouseMove}\n                @click=${this.handleOptionClick}\n                @mousedown=${this.handleMouseDown}\n                class=\"option ${index === this.cursorIndex ? 'focused' : ''}\"\n              >\n                ${this.resolvedRenderOption(option, index === this.cursorIndex)}\n              </div>`;\n            })}\n            ${this.block ? html`<div style=\"height:0.1em\"></div>` : null}\n          </div>\n          <slot></slot>\n        </div>\n\n        <div class=\"loader-bar\">\n          <temba-loading></temba-loading>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}