@nyaruka/temba-components 0.23.0 → 0.25.1

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

@@ -13,6 +13,8 @@ export class Modax extends RapidElement {
         this.fetching = false;
         this.headers = {};
         this.body = this.getLoading();
+        this.disabled = false;
+        this.suspendSubmit = false;
     }
     static get styles() {
         return css `
@@ -237,14 +239,15 @@ export class Modax extends RapidElement {
         const button = evt.detail.button;
         if (!button.disabled && !button.submitting) {
             if (button.name === this.primaryName) {
-                this.submit();
+                if (!this.suspendSubmit) {
+                    this.submit();
+                }
             }
         }
         if (button.name === (this.cancelName || 'Cancel')) {
             this.open = false;
             this.fetching = false;
             this.cancelName = undefined;
-            // this.cancelToken.cancel();
         }
     }
     handleDialogHidden() {
@@ -269,6 +272,7 @@ export class Modax extends RapidElement {
         ?submitting=${this.submitting}
         ?destructive=${this.isDestructive()}
         ?noFocus=${true}
+        ?disabled=${this.disabled}
         @temba-button-clicked=${this.handleDialogClick.bind(this)}
         @temba-dialog-hidden=${this.handleDialogHidden.bind(this)}
       >
@@ -319,4 +323,10 @@ __decorate([
 __decorate([
     property({ type: String })
 ], Modax.prototype, "body", void 0);
+__decorate([
+    property({ type: Boolean })
+], Modax.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], Modax.prototype, "suspendSubmit", void 0);
 //# sourceMappingURL=Modax.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Modax.js","sourceRoot":"","sources":["../../../src/dialog/Modax.ts"],"names":[],"mappings":"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","sourcesContent":["import { property } from 'lit-element/lib/decorators';\nimport { TemplateResult, html, css } from 'lit-element';\nimport { RapidElement } from '../RapidElement';\nimport { getUrl, serialize, postUrl, WebResponse } from '../utils';\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html';\nimport { CustomEventType } from '../interfaces';\nimport { Dialog } from './Dialog';\n\nexport class Modax extends RapidElement {\n  static get styles() {\n    return css`\n      :host {\n      }\n\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      .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-dialog {\n        --transition-speed: var(--transition-speed);\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        font-weight: 300;\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: String })\n  onSubmitted: 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  // private cancelToken: CancelTokenSource;\n\n  // http promise to monitor for completeness\n  public httpComplete: Promise<void | WebResponse>;\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          window.setTimeout(() => {\n            this.body = this.getLoading();\n            this.submitting = false;\n          }, 500);\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  private updatePrimaryButton(): void {\n    if (!this.noSubmit) {\n      window.setTimeout(() => {\n        const submitButton = this.shadowRoot.querySelector(\n          \"input[type='submit']\"\n        ) as any;\n\n        if (submitButton) {\n          this.primaryName = submitButton.value;\n        } else {\n          this.primaryName = null;\n          this.cancelName = 'Ok';\n        }\n\n        this.submitting = false;\n      }, 0);\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\n    // IE bleeds through, avoid bootstrap form spans that breaks layout\n    const spans = div.getElementsByClassName('span12') as any;\n    for (const span of spans) {\n      span.className = '';\n    }\n\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) {\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    window.setTimeout(() => {\n      for (const script of toAdd) {\n        scriptBlock.appendChild(script);\n      }\n    }, 0);\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    this.httpComplete = getUrl(this.endpoint, null, this.getHeaders()).then(\n      (response: WebResponse) => {\n        this.setBody(response.body);\n        this.updatePrimaryButton();\n        this.fetching = false;\n        window.setTimeout(() => {\n          this.fireCustomEvent(CustomEventType.Loaded, {\n            body: this.getBody(),\n          });\n        }, 0);\n      }\n    );\n  }\n\n  public submit(): void {\n    this.submitting = true;\n    const form = this.shadowRoot.querySelector('form');\n    const postData = form ? serialize(form) : {};\n\n    this.httpComplete = 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('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              window.setTimeout(() => {\n                this.open = false;\n                this.fireCustomEvent(CustomEventType.Submitted);\n              }, 0);\n            } else {\n              this.fireCustomEvent(CustomEventType.Redirected, {\n                url: redirect,\n              });\n              this.open = false;\n            }\n          } else {\n            // if we set the body, update our submit button\n            if (this.setBody(response.body)) {\n              this.updatePrimaryButton();\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    if (!button.disabled && !button.submitting) {\n      if (button.name === this.primaryName) {\n        this.submit();\n      }\n    }\n\n    if (button.name === (this.cancelName || 'Cancel')) {\n      this.open = false;\n      this.fetching = false;\n      this.cancelName = undefined;\n      // this.cancelToken.cancel();\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 this.endpoint && this.endpoint.indexOf('delete') > -1;\n  }\n\n  public getBody() {\n    return this.shadowRoot.querySelector('.modax-body');\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <temba-dialog\n        header=${this.header}\n        .primaryButtonName=${this.noSubmit ? null : this.primaryName}\n        .cancelButtonName=${this.cancelName || 'Cancel'}\n        ?open=${this.open}\n        ?loading=${this.fetching}\n        ?submitting=${this.submitting}\n        ?destructive=${this.isDestructive()}\n        ?noFocus=${true}\n        @temba-button-clicked=${this.handleDialogClick.bind(this)}\n        @temba-dialog-hidden=${this.handleDialogHidden.bind(this)}\n      >\n        <div class=\"modax-body${this.submitting ? ' submitting' : ''}\">\n          ${this.body}\n        </div>\n        <div class=\"scripts\"></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/dialog/Modax.ts"],"names":[],"mappings":"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","sourcesContent":["import { property } from 'lit-element/lib/decorators';\nimport { TemplateResult, html, css } from 'lit-element';\nimport { RapidElement } from '../RapidElement';\nimport { getUrl, serialize, postUrl, WebResponse } from '../utils';\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html';\nimport { CustomEventType } from '../interfaces';\nimport { Dialog } from './Dialog';\n\nexport class Modax extends RapidElement {\n  static get styles() {\n    return css`\n      :host {\n      }\n\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      .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-dialog {\n        --transition-speed: var(--transition-speed);\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        font-weight: 300;\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: String })\n  onSubmitted: 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: Boolean })\n  suspendSubmit = false;\n  // private cancelToken: CancelTokenSource;\n\n  // http promise to monitor for completeness\n  public httpComplete: Promise<void | WebResponse>;\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          window.setTimeout(() => {\n            this.body = this.getLoading();\n            this.submitting = false;\n          }, 500);\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  private updatePrimaryButton(): void {\n    if (!this.noSubmit) {\n      window.setTimeout(() => {\n        const submitButton = this.shadowRoot.querySelector(\n          \"input[type='submit']\"\n        ) as any;\n\n        if (submitButton) {\n          this.primaryName = submitButton.value;\n        } else {\n          this.primaryName = null;\n          this.cancelName = 'Ok';\n        }\n\n        this.submitting = false;\n      }, 0);\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\n    // IE bleeds through, avoid bootstrap form spans that breaks layout\n    const spans = div.getElementsByClassName('span12') as any;\n    for (const span of spans) {\n      span.className = '';\n    }\n\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) {\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    window.setTimeout(() => {\n      for (const script of toAdd) {\n        scriptBlock.appendChild(script);\n      }\n    }, 0);\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    this.httpComplete = getUrl(this.endpoint, null, this.getHeaders()).then(\n      (response: WebResponse) => {\n        this.setBody(response.body);\n        this.updatePrimaryButton();\n        this.fetching = false;\n        window.setTimeout(() => {\n          this.fireCustomEvent(CustomEventType.Loaded, {\n            body: this.getBody(),\n          });\n        }, 0);\n      }\n    );\n  }\n\n  public submit(): void {\n    this.submitting = true;\n    const form = this.shadowRoot.querySelector('form');\n    const postData = form ? serialize(form) : {};\n\n    this.httpComplete = 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('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              window.setTimeout(() => {\n                this.open = false;\n                this.fireCustomEvent(CustomEventType.Submitted);\n              }, 0);\n            } else {\n              this.fireCustomEvent(CustomEventType.Redirected, {\n                url: redirect,\n              });\n              this.open = false;\n            }\n          } else {\n            // if we set the body, update our submit button\n            if (this.setBody(response.body)) {\n              this.updatePrimaryButton();\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    if (!button.disabled && !button.submitting) {\n      if (button.name === this.primaryName) {\n        if (!this.suspendSubmit) {\n          this.submit();\n        }\n      }\n    }\n\n    if (button.name === (this.cancelName || 'Cancel')) {\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 this.endpoint && this.endpoint.indexOf('delete') > -1;\n  }\n\n  public getBody() {\n    return this.shadowRoot.querySelector('.modax-body');\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <temba-dialog\n        header=${this.header}\n        .primaryButtonName=${this.noSubmit ? null : this.primaryName}\n        .cancelButtonName=${this.cancelName || 'Cancel'}\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 class=\"modax-body${this.submitting ? ' submitting' : ''}\">\n          ${this.body}\n        </div>\n        <div class=\"scripts\"></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/interfaces.js

@@ -10,6 +10,7 @@ export var CustomEventType;
     CustomEventType["ScrollThreshold"] = "temba-scroll-threshold";
     CustomEventType["ContentChanged"] = "temba-content-changed";
     CustomEventType["ContextChanged"] = "temba-context-changed";
+    CustomEventType["FetchComplete"] = "temba-fetch-complete";
     CustomEventType["Submitted"] = "temba-submitted";
     CustomEventType["Redirected"] = "temba-redirected";
     CustomEventType["NoPath"] = "temba-no-path";

package/out-tsc/src/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../src/interfaces.ts"],"names":[],"mappings":"AAqKA,MAAM,CAAN,IAAY,eAcX;AAdD,WAAY,eAAe;IACzB,0CAAuB,CAAA;IACvB,8CAA2B,CAAA;IAC3B,yDAAsC,CAAA;IACtC,gDAA6B,CAAA;IAC7B,gDAA6B,CAAA;IAC7B,yDAAsC,CAAA;IACtC,uDAAoC,CAAA;IACpC,6DAA0C,CAAA;IAC1C,2DAAwC,CAAA;IACxC,2DAAwC,CAAA;IACxC,gDAA6B,CAAA;IAC7B,kDAA+B,CAAA;IAC/B,2CAAwB,CAAA;AAC1B,CAAC,EAdW,eAAe,KAAf,eAAe,QAc1B","sourcesContent":["export interface User {\n  id?: number;\n  first_name?: string;\n  last_name?: string;\n  email?: string;\n  role?: string;\n  created_on?: string;\n}\n\nexport interface Ticket {\n  uuid: string;\n  subject: string;\n  body?: string;\n  closed_on: string;\n  opened_on: string;\n  status: string;\n  contact: ObjectReference;\n  ticketer: ObjectReference;\n  topic: ObjectReference;\n  assignee?: User;\n}\n\nexport interface Msg {\n  text: string;\n  status: string;\n  channel: ObjectReference;\n  quick_replies: string[];\n  urn: string;\n  id: number;\n  direction: string;\n  type: string;\n  created_by?: User;\n  attachments: string[];\n}\n\nexport interface ObjectReference {\n  uuid: string;\n  name: string;\n}\n\nexport interface ContactField {\n  key: string;\n  label: string;\n  value_type: string;\n  pinned: boolean;\n}\n\nexport interface ContactGroup {\n  uuid: string;\n  count: number;\n  name: string;\n  query?: string;\n  status: string;\n}\n\nexport interface URN {\n  scheme: string;\n  path: string;\n}\n\nexport interface Group {\n  name: string;\n  uuid: string;\n  is_dynamic?: boolean;\n}\n\nexport interface ContactTicket {\n  name: string;\n  uuid: string;\n  status: string;\n\n  contact: {\n    uuid: string;\n    name: string;\n    created_on: Date;\n    last_seen_on: Date;\n  };\n}\n\nexport interface Contact {\n  name: string;\n  uuid: string;\n  stopped: boolean;\n  blocked: boolean;\n  urns: string[];\n  lang: string;\n  fields: { [key: string]: string };\n  groups: Group[];\n  modified_on: string;\n  created_on: string;\n  last_seen_on: string;\n\n  last_msg?: Msg;\n  direction?: string;\n  ticket: {\n    uuid: string;\n    subject: string;\n    closed_on?: string;\n    last_activity_on: string;\n    assignee?: User;\n    topic?: ObjectReference;\n  };\n}\n\nexport interface FeatureProperties {\n  name: string;\n  osm_id: string;\n  level: number;\n  children?: FeatureProperties[];\n  has_children?: boolean;\n  aliases?: string;\n  parent_osm_id?: string;\n  id?: number;\n  path?: string;\n}\n\nexport interface Position {\n  top: number;\n  left: number;\n}\n\nexport interface FunctionExample {\n  template: string;\n  output: string;\n}\n\nexport interface CompletionOption {\n  name?: string;\n  summary: string;\n\n  // functions\n  signature?: string;\n  detail?: string;\n  examples?: FunctionExample[];\n}\n\nexport interface CompletionResult {\n  anchorPosition: Position;\n  query: string;\n  options: CompletionOption[];\n  currentFunction: CompletionOption;\n}\n\nexport interface CompletionProperty {\n  key: string;\n  help: string;\n  type: string;\n}\n\nexport interface CompletionType {\n  name: string;\n\n  key_source?: string;\n  property_template?: CompletionProperty;\n  properties?: CompletionProperty[];\n}\n\nexport interface CompletionSchema {\n  types: CompletionType[];\n  root: CompletionProperty[];\n  root_no_session: CompletionProperty[];\n}\n\nexport type KeyedAssets = { [assetType: string]: string[] };\n\nexport enum CustomEventType {\n  Loaded = 'temba-loaded',\n  Canceled = 'temba-canceled',\n  CursorChanged = 'temba-cursor-changed',\n  Refreshed = 'temba-refreshed',\n  Selection = 'temba-selection',\n  ButtonClicked = 'temba-button-clicked',\n  DialogHidden = 'temba-dialog-hidden',\n  ScrollThreshold = 'temba-scroll-threshold',\n  ContentChanged = 'temba-content-changed',\n  ContextChanged = 'temba-context-changed',\n  Submitted = 'temba-submitted',\n  Redirected = 'temba-redirected',\n  NoPath = 'temba-no-path',\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../src/interfaces.ts"],"names":[],"mappings":"AAqKA,MAAM,CAAN,IAAY,eAeX;AAfD,WAAY,eAAe;IACzB,0CAAuB,CAAA;IACvB,8CAA2B,CAAA;IAC3B,yDAAsC,CAAA;IACtC,gDAA6B,CAAA;IAC7B,gDAA6B,CAAA;IAC7B,yDAAsC,CAAA;IACtC,uDAAoC,CAAA;IACpC,6DAA0C,CAAA;IAC1C,2DAAwC,CAAA;IACxC,2DAAwC,CAAA;IACxC,yDAAsC,CAAA;IACtC,gDAA6B,CAAA;IAC7B,kDAA+B,CAAA;IAC/B,2CAAwB,CAAA;AAC1B,CAAC,EAfW,eAAe,KAAf,eAAe,QAe1B","sourcesContent":["export interface User {\n  id?: number;\n  first_name?: string;\n  last_name?: string;\n  email?: string;\n  role?: string;\n  created_on?: string;\n}\n\nexport interface Ticket {\n  uuid: string;\n  subject: string;\n  body?: string;\n  closed_on: string;\n  opened_on: string;\n  status: string;\n  contact: ObjectReference;\n  ticketer: ObjectReference;\n  topic: ObjectReference;\n  assignee?: User;\n}\n\nexport interface Msg {\n  text: string;\n  status: string;\n  channel: ObjectReference;\n  quick_replies: string[];\n  urn: string;\n  id: number;\n  direction: string;\n  type: string;\n  created_by?: User;\n  attachments: string[];\n}\n\nexport interface ObjectReference {\n  uuid: string;\n  name: string;\n}\n\nexport interface ContactField {\n  key: string;\n  label: string;\n  value_type: string;\n  pinned: boolean;\n}\n\nexport interface ContactGroup {\n  uuid: string;\n  count: number;\n  name: string;\n  query?: string;\n  status: string;\n}\n\nexport interface URN {\n  scheme: string;\n  path: string;\n}\n\nexport interface Group {\n  name: string;\n  uuid: string;\n  is_dynamic?: boolean;\n}\n\nexport interface ContactTicket {\n  name: string;\n  uuid: string;\n  status: string;\n\n  contact: {\n    uuid: string;\n    name: string;\n    created_on: Date;\n    last_seen_on: Date;\n  };\n}\n\nexport interface Contact {\n  name: string;\n  uuid: string;\n  stopped: boolean;\n  blocked: boolean;\n  urns: string[];\n  lang: string;\n  fields: { [key: string]: string };\n  groups: Group[];\n  modified_on: string;\n  created_on: string;\n  last_seen_on: string;\n\n  last_msg?: Msg;\n  direction?: string;\n  ticket: {\n    uuid: string;\n    subject: string;\n    closed_on?: string;\n    last_activity_on: string;\n    assignee?: User;\n    topic?: ObjectReference;\n  };\n}\n\nexport interface FeatureProperties {\n  name: string;\n  osm_id: string;\n  level: number;\n  children?: FeatureProperties[];\n  has_children?: boolean;\n  aliases?: string;\n  parent_osm_id?: string;\n  id?: number;\n  path?: string;\n}\n\nexport interface Position {\n  top: number;\n  left: number;\n}\n\nexport interface FunctionExample {\n  template: string;\n  output: string;\n}\n\nexport interface CompletionOption {\n  name?: string;\n  summary: string;\n\n  // functions\n  signature?: string;\n  detail?: string;\n  examples?: FunctionExample[];\n}\n\nexport interface CompletionResult {\n  anchorPosition: Position;\n  query: string;\n  options: CompletionOption[];\n  currentFunction: CompletionOption;\n}\n\nexport interface CompletionProperty {\n  key: string;\n  help: string;\n  type: string;\n}\n\nexport interface CompletionType {\n  name: string;\n\n  key_source?: string;\n  property_template?: CompletionProperty;\n  properties?: CompletionProperty[];\n}\n\nexport interface CompletionSchema {\n  types: CompletionType[];\n  root: CompletionProperty[];\n  root_no_session: CompletionProperty[];\n}\n\nexport type KeyedAssets = { [assetType: string]: string[] };\n\nexport enum CustomEventType {\n  Loaded = 'temba-loaded',\n  Canceled = 'temba-canceled',\n  CursorChanged = 'temba-cursor-changed',\n  Refreshed = 'temba-refreshed',\n  Selection = 'temba-selection',\n  ButtonClicked = 'temba-button-clicked',\n  DialogHidden = 'temba-dialog-hidden',\n  ScrollThreshold = 'temba-scroll-threshold',\n  ContentChanged = 'temba-content-changed',\n  ContextChanged = 'temba-context-changed',\n  FetchComplete = 'temba-fetch-complete',\n  Submitted = 'temba-submitted',\n  Redirected = 'temba-redirected',\n  NoPath = 'temba-no-path',\n}\n"]}

package/out-tsc/src/omnibox/Omnibox.js

@@ -56,7 +56,9 @@ export class Omnibox extends RapidElement {
             }
         }
         if (option.type === OmniType.Group) {
-            return html ` <div style=${styleMap(style)}>${option.count}</div> `;
+            return html `
+        <div style=${styleMap(style)}>${option.count.toLocaleString()}</div>
+      `;
         }
         return null;
     }
@@ -114,6 +116,10 @@ export class Omnibox extends RapidElement {
             }
         }
     }
+    getValues() {
+        const select = this.shadowRoot.querySelector('temba-select');
+        return select.values;
+    }
     render() {
         return html `
       <temba-select

package/out-tsc/src/omnibox/Omnibox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Omnibox.js","sourceRoot":"","sources":["../../../src/omnibox/Omnibox.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css, property } from 'lit-element';\nimport { styleMap } from 'lit-html/directives/style-map';\nimport { RapidElement } from '../RapidElement';\n\nenum OmniType {\n  Group = 'group',\n  Contact = 'contact',\n  Urn = 'urn',\n}\n\ninterface OmniOption {\n  id: string;\n  name: string;\n  type: OmniType;\n  urn?: string;\n  count?: number;\n  contact?: string;\n  scheme?: string;\n}\n\nconst postNameStyle = {\n  color: 'var(--color-text-dark)',\n  padding: '0px 6px',\n  fontSize: '12px',\n};\n\nexport class Omnibox extends RapidElement {\n  static get styles() {\n    return css`\n      temba-select:focus {\n        outline: none;\n        box-shadow: none;\n      }\n\n      :host {\n      }\n    `;\n  }\n\n  @property()\n  endpoint: string;\n\n  @property()\n  name: string;\n\n  @property({ type: Boolean })\n  groups = false;\n\n  @property({ type: Boolean })\n  contacts = false;\n\n  @property({ type: Boolean })\n  urns = false;\n\n  @property({ type: Array })\n  value: OmniOption[] = [];\n\n  @property({ type: Array })\n  errors: string[];\n\n  @property()\n  placeholder = 'Select recipients';\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  @property({ type: String, attribute: 'help_text' })\n  helpText: string;\n\n  @property({ type: Boolean, attribute: 'help_always' })\n  helpAlways: boolean;\n\n  @property({ type: Boolean, attribute: 'widget_only' })\n  widgetOnly: boolean;\n\n  @property({ type: Boolean, attribute: 'hide_label' })\n  hideLabel: boolean;\n\n  @property({ type: String })\n  label: string;\n\n  /** An option in the drop down */\n  private renderOption(option: OmniOption): TemplateResult {\n    return html`\n      <div style=\"display:flex;\">\n        <div style=\"margin-right: 8px\">${this.getIcon(option)}</div>\n        <div style=\"flex: 1\">${option.name}</div>\n        <div\n          style=\"background: rgba(50, 50, 50, 0.15); margin-left: 5px; display: flex; align-items: center; border-radius: 4px\"\n        >\n          ${this.getPostName(option)}\n        </div>\n      </div>\n    `;\n  }\n\n  private getPostName(option: OmniOption): TemplateResult {\n    const style = { ...postNameStyle };\n\n    if (option.urn && option.type === OmniType.Contact) {\n      if (option.urn !== option.name) {\n        return html` <div style=${styleMap(style)}>${option.urn}</div> `;\n      }\n    }\n\n    if (option.type === OmniType.Group) {\n      return html` <div style=${styleMap(style)}>${option.count}</div> `;\n    }\n\n    return null;\n  }\n\n  /** Selection in the multi-select select box */\n  private renderSelection(option: OmniOption): TemplateResult {\n    return html`\n      <div\n        style=\"flex:1 1 auto; display: flex; align-items: stretch; color: var(--color-text-dark); font-size: 12px;\"\n      >\n        <div style=\"align-self: center; padding: 0px 7px; color: #bbb\">\n          ${this.getIcon(option)}\n        </div>\n        <div\n          class=\"name\"\n          style=\"align-self: center; padding: 0px; font-size: 12px;\"\n        >\n          ${option.name}\n        </div>\n        <div\n          style=\"background: rgba(100, 100, 100, 0.05); border-left: 1px solid rgba(100, 100, 100, 0.1); margin-left: 12px; display: flex; align-items: center\"\n        >\n          ${this.getPostName(option)}\n        </div>\n      </div>\n    `;\n  }\n\n  private getIcon(option: OmniOption): TemplateResult {\n    if (option.type === OmniType.Group) {\n      return html` <temba-icon name=\"users\" /> `;\n    }\n\n    if (option.type === OmniType.Contact) {\n      return html` <temba-icon name=\"user\" /> `;\n    }\n  }\n\n  private getEndpoint() {\n    const endpoint = this.endpoint;\n    let types = '&types=';\n    if (this.groups) {\n      types += 'g';\n    }\n\n    if (this.contacts) {\n      types += 'c';\n    }\n\n    if (this.urns) {\n      types += 'u';\n    }\n\n    return endpoint + types;\n  }\n\n  /** If we support urns, let them enter an arbitrary number */\n  private createArbitraryOption(input: string): any {\n    if (this.urns) {\n      const num = parseFloat(input);\n      if (!isNaN(num) && isFinite(num)) {\n        return { id: 'tel:' + input, name: input, type: 'urn' };\n      }\n    }\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <temba-select\n        name=${this.name}\n        endpoint=${this.getEndpoint()}\n        placeholder=${this.placeholder}\n        queryParam=\"search\"\n        .label=${this.label}\n        .helpText=${this.helpText}\n        .widgetOnly=${this.widgetOnly}\n        ?disabled=${this.disabled}\n        .errors=${this.errors}\n        .values=${this.value}\n        .renderOption=${this.renderOption.bind(this)}\n        .renderSelectedItem=${this.renderSelection.bind(this)}\n        .createArbitraryOption=${this.createArbitraryOption.bind(this)}\n        .inputRoot=${this}\n        searchable\n        searchOnFocus\n        multi\n      ></temba-select>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"Omnibox.js","sourceRoot":"","sources":["../../../src/omnibox/Omnibox.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css, property } from 'lit-element';\nimport { styleMap } from 'lit-html/directives/style-map';\nimport { RapidElement } from '../RapidElement';\nimport { Select } from '../select/Select';\n\nenum OmniType {\n  Group = 'group',\n  Contact = 'contact',\n  Urn = 'urn',\n}\n\ninterface OmniOption {\n  id: string;\n  name: string;\n  type: OmniType;\n  urn?: string;\n  count?: number;\n  contact?: string;\n  scheme?: string;\n}\n\nconst postNameStyle = {\n  color: 'var(--color-text-dark)',\n  padding: '0px 6px',\n  fontSize: '12px',\n};\n\nexport class Omnibox extends RapidElement {\n  static get styles() {\n    return css`\n      temba-select:focus {\n        outline: none;\n        box-shadow: none;\n      }\n\n      :host {\n      }\n    `;\n  }\n\n  @property()\n  endpoint: string;\n\n  @property()\n  name: string;\n\n  @property({ type: Boolean })\n  groups = false;\n\n  @property({ type: Boolean })\n  contacts = false;\n\n  @property({ type: Boolean })\n  urns = false;\n\n  @property({ type: Array })\n  value: OmniOption[] = [];\n\n  @property({ type: Array })\n  errors: string[];\n\n  @property()\n  placeholder = 'Select recipients';\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  @property({ type: String, attribute: 'help_text' })\n  helpText: string;\n\n  @property({ type: Boolean, attribute: 'help_always' })\n  helpAlways: boolean;\n\n  @property({ type: Boolean, attribute: 'widget_only' })\n  widgetOnly: boolean;\n\n  @property({ type: Boolean, attribute: 'hide_label' })\n  hideLabel: boolean;\n\n  @property({ type: String })\n  label: string;\n\n  /** An option in the drop down */\n  private renderOption(option: OmniOption): TemplateResult {\n    return html`\n      <div style=\"display:flex;\">\n        <div style=\"margin-right: 8px\">${this.getIcon(option)}</div>\n        <div style=\"flex: 1\">${option.name}</div>\n        <div\n          style=\"background: rgba(50, 50, 50, 0.15); margin-left: 5px; display: flex; align-items: center; border-radius: 4px\"\n        >\n          ${this.getPostName(option)}\n        </div>\n      </div>\n    `;\n  }\n\n  private getPostName(option: OmniOption): TemplateResult {\n    const style = { ...postNameStyle };\n\n    if (option.urn && option.type === OmniType.Contact) {\n      if (option.urn !== option.name) {\n        return html` <div style=${styleMap(style)}>${option.urn}</div> `;\n      }\n    }\n\n    if (option.type === OmniType.Group) {\n      return html`\n        <div style=${styleMap(style)}>${option.count.toLocaleString()}</div>\n      `;\n    }\n\n    return null;\n  }\n\n  /** Selection in the multi-select select box */\n  private renderSelection(option: OmniOption): TemplateResult {\n    return html`\n      <div\n        style=\"flex:1 1 auto; display: flex; align-items: stretch; color: var(--color-text-dark); font-size: 12px;\"\n      >\n        <div style=\"align-self: center; padding: 0px 7px; color: #bbb\">\n          ${this.getIcon(option)}\n        </div>\n        <div\n          class=\"name\"\n          style=\"align-self: center; padding: 0px; font-size: 12px;\"\n        >\n          ${option.name}\n        </div>\n        <div\n          style=\"background: rgba(100, 100, 100, 0.05); border-left: 1px solid rgba(100, 100, 100, 0.1); margin-left: 12px; display: flex; align-items: center\"\n        >\n          ${this.getPostName(option)}\n        </div>\n      </div>\n    `;\n  }\n\n  private getIcon(option: OmniOption): TemplateResult {\n    if (option.type === OmniType.Group) {\n      return html` <temba-icon name=\"users\" /> `;\n    }\n\n    if (option.type === OmniType.Contact) {\n      return html` <temba-icon name=\"user\" /> `;\n    }\n  }\n\n  private getEndpoint() {\n    const endpoint = this.endpoint;\n    let types = '&types=';\n    if (this.groups) {\n      types += 'g';\n    }\n\n    if (this.contacts) {\n      types += 'c';\n    }\n\n    if (this.urns) {\n      types += 'u';\n    }\n\n    return endpoint + types;\n  }\n\n  /** If we support urns, let them enter an arbitrary number */\n  private createArbitraryOption(input: string): any {\n    if (this.urns) {\n      const num = parseFloat(input);\n      if (!isNaN(num) && isFinite(num)) {\n        return { id: 'tel:' + input, name: input, type: 'urn' };\n      }\n    }\n  }\n\n  public getValues(): any[] {\n    const select = this.shadowRoot.querySelector('temba-select') as Select;\n    return select.values;\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <temba-select\n        name=${this.name}\n        endpoint=${this.getEndpoint()}\n        placeholder=${this.placeholder}\n        queryParam=\"search\"\n        .label=${this.label}\n        .helpText=${this.helpText}\n        .widgetOnly=${this.widgetOnly}\n        ?disabled=${this.disabled}\n        .errors=${this.errors}\n        .values=${this.value}\n        .renderOption=${this.renderOption.bind(this)}\n        .renderSelectedItem=${this.renderSelection.bind(this)}\n        .createArbitraryOption=${this.createArbitraryOption.bind(this)}\n        .inputRoot=${this}\n        searchable\n        searchOnFocus\n        multi\n      ></temba-select>\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,7 +455,12 @@ 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}>
@@ -444,6 +470,7 @@ export class Options extends RapidElement {
                 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 +521,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":";AAAA,OAAO,EAAkB,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAClE,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,YAAY,EAAgB,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACzD,OAAO,EACL,UAAU,EACV,eAAe,EACf,gBAAgB,EAChB,QAAQ,GACT,MAAM,UAAU,CAAC;AAMlB,MAAM,OAAO,OAAQ,SAAQ,YAAY;IAAzC;;QA+JE,qBAAgB,GAAG,CAAC,CAAC;QAGrB,mBAAc,GAAG,CAAC,CAAC;QAYnB,cAAS,GAAG,EAAE,CAAC;QAGf,gBAAW,GAAG,CAAC,CAAC,CAAC;QAYjB,YAAO,GAAG,MAAM,CAAC;QAGjB,YAAO,GAAG,KAAK,CAAC;QAMhB,YAAO,GAA8B,UAAU,MAAW;YACxD,OAAO,MAAM,CAAC,IAAI,CAAC,OAAO,IAAI,MAAM,CAAC,CAAC;QACxC,CAAC,CAAC;QAGF,sBAAiB,GAA2B;YAC1C,OAAO,IAAI,CAAC;QACd,CAAC,CAAC;QAYF,iBAAY,GAAG,CAAC,CAAC;QAGjB,kBAAa,GAAG,KAAK,CAAC;QAEtB,iBAAY,GAAgB,IAAI,CAAC;QA0KzB,cAAS,GAA4B,QAAQ,CAAC,UACpD,KAAa;YAEb,IAAI,KAAK,KAAK,IAAI,CAAC,WAAW,EAAE;gBAC9B,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;aAC1B;QACH,CAAC,EACD,EAAE,CAAC,CAAC;IA0LN,CAAC;IAxkBC,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgJT,CAAC;IACJ,CAAC;IA+EM,YAAY;QACjB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YACf,IAAI,CAAC,YAAY,GAAG,eAAe,CAAC,IAAI,CAAC,CAAC;YAC1C,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAC3D,IAAI,IAAI,CAAC,YAAY,EAAE;gBACrB,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;aACtE;YACD,IAAI,CAAC,iBAAiB,EAAE,CAAC;SAC1B;QAED,IAAI,CAAC,oBAAoB,GAAG,CAC1B,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,mBAAmB,CAC9C,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACf,CAAC;IAEM,oBAAoB;QACzB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YACf,IAAI,IAAI,CAAC,YAAY,EAAE;gBACrB,IAAI,CAAC,YAAY,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;aACzE;SACF;IACH,CAAC;IAEO,SAAS;QACf,MAAM,OAAO,GACX,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;YACnD,QAAQ,CAAC,aAAa,CAAC;QAEzB,OAAO,OAAO,CAAC;IACjB,CAAC;IAEM,OAAO,CAAC,iBAAmC;QAChD,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QAEjC,oEAAoE;QACpE,IAAI,iBAAiB,CAAC,GAAG,CAAC,aAAa,CAAC,EAAE;YACxC,MAAM,aAAa,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CACjD,0BAA0B,IAAI,CAAC,WAAW,IAAI,CAC7B,CAAC;YAEpB,IAAI,aAAa,EAAE;gBACjB,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;gBACtE,MAAM,aAAa,GAAG,SAAS,CAAC,qBAAqB,EAAE,CAAC;gBACxD,MAAM,eAAe,GAAG,aAAa,CAAC,MAAM,CAAC;gBAC7C,MAAM,gBAAgB,GAAG,aAAa,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC;gBAEtE,IACE,aAAa,CAAC,SAAS,GAAG,gBAAgB;oBAC1C,SAAS,CAAC,SAAS,GAAG,eAAe,GAAG,CAAC,EACzC;oBACA,MAAM,QAAQ,GACZ,aAAa,CAAC,SAAS,GAAG,eAAe,GAAG,gBAAgB,GAAG,CAAC,CAAC;oBACnE,SAAS,CAAC,SAAS,GAAG,QAAQ,CAAC;iBAChC;qBAAM,IAAI,aAAa,CAAC,SAAS,GAAG,SAAS,CAAC,SAAS,EAAE;oBACxD,MAAM,QAAQ,GAAG,aAAa,CAAC,SAAS,GAAG,CAAC,CAAC;oBAC7C,SAAS,CAAC,SAAS,GAAG,QAAQ,CAAC;iBAChC;aACF;YAED,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,aAAa,EAAE;gBAClD,KAAK,EAAE,IAAI,CAAC,WAAW;aACxB,CAAC,CAAC;SACJ;QAED,IAAI,iBAAiB,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE;YACpC,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAEzB,iCAAiC;YACjC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;YAE1B,MAAM,WAAW,GAAG,iBAAiB,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;YACrD,MAAM,aAAa,GAAG,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;YAC3D,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;YAExD,IACE,IAAI,CAAC,WAAW,KAAK,CAAC,CAAC;gBACvB,QAAQ,GAAG,aAAa;gBACxB,CAAC,aAAa,KAAK,CAAC;oBAClB,QAAQ,GAAG,CAAC;oBACZ,CAAC,iBAAiB,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC,EACxC;gBACA,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;oBACf,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;iBACtB;qBAAM;oBACL,IAAI,IAAI,CAAC,WAAW,IAAI,QAAQ,EAAE;wBAChC,IAAI,CAAC,WAAW,GAAG,QAAQ,GAAG,CAAC,CAAC;qBACjC;iBACF;gBAED,IAAI,IAAI,CAAC,KAAK,EAAE;oBACd,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;iBAC7B;aACF;YAED,4EAA4E;YAC5E,2EAA2E;YAC3E,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;YAC5D,IAAI,SAAS,CAAC,YAAY,IAAI,SAAS,CAAC,YAAY,EAAE;gBACpD,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;aACvD;SACF;QAED,IAAI,iBAAiB,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE;YACpC,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;gBACrB,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAC3B,CAAC,EAAE,GAAG,CAAC,CAAC;SACT;IACH,CAAC;IAEO,mBAAmB,CAAC,MAAW,EAAE,QAAiB;QACxD,MAAM,gBAAgB,GAAG,CACvB,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,uBAAuB,CACtD,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACb,MAAM,kBAAkB,GAAG,CACzB,IAAI,CAAC,kBAAkB,IAAI,IAAI,CAAC,yBAAyB,CAC1D,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAEb,IAAI,QAAQ,EAAE;YACZ,OAAO,IAAI,CAAA;4BACW,gBAAgB,CAAC,MAAM,EAAE,QAAQ,CAAC;8BAChC,kBAAkB,CAAC,MAAM,EAAE,QAAQ,CAAC;OAC3D,CAAC;SACH;aAAM;YACL,OAAO,IAAI,CAAA;4BACW,gBAAgB,CAAC,MAAM,EAAE,QAAQ,CAAC;OACvD,CAAC;SACH;IACH,CAAC;IAEO,uBAAuB,CAAC,MAAW;QACzC,OAAO,IAAI,CAAA;QACP,MAAM,CAAC,IAAI;YACX,CAAC,CAAC,IAAI,CAAA;oBACM,MAAM,CAAC,IAAI;;yBAEN;YACjB,CAAC,CAAC,IAAI;iCACmB,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC;WAC1D,CAAC;IACV,CAAC;IAEO,yBAAyB,CAAC,MAAW;QAC3C,OAAO,IAAI,CAAA,IAAI,MAAM,CAAC,MAAM,GAAG,CAAC;IAClC,CAAC;IAEO,eAAe,CAAC,MAAM,GAAG,KAAK,EAAE,KAAK,GAAG,CAAC,CAAC;QAChD,IAAI,KAAK,KAAK,CAAC,CAAC,EAAE;YAChB,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC;SAC1B;QAED,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QACrC,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,SAAS,EAAE;YAC9C,QAAQ;YACR,MAAM;YACN,KAAK;SACN,CAAC,CAAC;IACL,CAAC;IAEO,UAAU,CAAC,SAAiB;QAClC,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CACvB,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,GAAG,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,EAC/D,CAAC,CACF,CAAC;QACF,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;IAC3B,CAAC;IAWO,aAAa,CAAC,GAAkB;QACtC,IAAI,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,EAAE;YACnC,OAAO;SACR;QAED,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE;YAC3C,IAAI,CAAC,GAAG,CAAC,OAAO,IAAI,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,IAAI,GAAG,CAAC,GAAG,KAAK,WAAW,EAAE;gBAC/D,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;gBACnB,GAAG,CAAC,cAAc,EAAE,CAAC;gBACrB,GAAG,CAAC,eAAe,EAAE,CAAC;gBACtB,IAAI,IAAI,CAAC,KAAK,EAAE;oBACd,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;iBAC7B;aACF;iBAAM,IAAI,CAAC,GAAG,CAAC,OAAO,IAAI,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,IAAI,GAAG,CAAC,GAAG,KAAK,SAAS,EAAE;gBACpE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;gBACpB,GAAG,CAAC,cAAc,EAAE,CAAC;gBACrB,IAAI,IAAI,CAAC,KAAK,EAAE;oBACd,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;iBAC7B;aACF;iBAAM,IACL,GAAG,CAAC,GAAG,KAAK,OAAO;gBACnB,GAAG,CAAC,GAAG,KAAK,KAAK;gBACjB,CAAC,IAAI,CAAC,WAAW,IAAI,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,EACrC;gBACA,GAAG,CAAC,cAAc,EAAE,CAAC;gBACrB,GAAG,CAAC,eAAe,EAAE,CAAC;gBACtB,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,GAAG,KAAK,KAAK,CAAC,CAAC;aACzC;YAED,IAAI,GAAG,CAAC,GAAG,KAAK,QAAQ,EAAE;gBACxB,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;aAChD;SACF;IACH,CAAC;IAEO,iBAAiB,CAAC,GAAU;QAClC,MAAM,SAAS,GAAG,GAAG,CAAC,MAAwB,CAAC;QAE/C,mDAAmD;QACnD,IAAI,SAAS,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,EAAE;YAC9C,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC,YAAY,CAAC;YAC3C,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;SAC3B;QAED,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,MAAM,SAAS,GACb,SAAS,CAAC,SAAS,GAAG,CAAC,SAAS,CAAC,YAAY,GAAG,SAAS,CAAC,YAAY,CAAC,CAAC;YAC1E,IAAI,SAAS,GAAG,GAAG,GAAG,IAAI,CAAC,SAAS,EAAE;gBACpC,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;gBACtD,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;aAC5B;SACF;IACH,CAAC;IAEO,iBAAiB;QACvB,IAAI,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YAC/B,MAAM,aAAa,GAAG,IAAI,CAAC,UAAU;iBAClC,aAAa,CAAC,oBAAoB,CAAC;iBACnC,qBAAqB,EAAE,CAAC;YAE3B,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,MAAM,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC,qBAAqB,EAAE,CAAC;gBAC3D,MAAM,MAAM,GAAG,YAAY,CAAC,GAAG,GAAG,aAAa,CAAC,MAAM,CAAC;gBAEvD,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,EAAE;oBACtC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,EAAE;wBACvD,kDAAkD;qBACnD;iBACF;gBAED,IACE,MAAM,GAAG,CAAC;oBACV,YAAY,CAAC,MAAM,GAAG,aAAa,CAAC,MAAM,GAAG,MAAM,CAAC,WAAW,EAC/D;oBACA,IAAI,CAAC,GAAG,GAAG,MAAM,CAAC,CAAC,yBAAyB;oBAC5C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;iBACvB;qBAAM;oBACL,IAAI,CAAC,GAAG,GAAG,YAAY,CAAC,MAAM,CAAC,CAAC,yBAAyB;oBACzD,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;iBACxB;gBAED,IAAI,CAAC,IAAI,GAAG,YAAY,CAAC,IAAI,CAAC;gBAC9B,IAAI,CAAC,KAAK,GAAG,YAAY,CAAC,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC;aACjE;SACF;IACH,CAAC;IAEM,gBAAgB;QACrB,OAAO;YACL;gBACE,KAAK,EAAE,SAAS;gBAChB,MAAM,EAAE,IAAI,CAAC,aAAa;gBAC1B,UAAU,EAAE,IAAI;aACjB;YACD;gBACE,KAAK,EAAE,QAAQ;gBACf,MAAM,EAAE,IAAI,CAAC,iBAAiB;gBAC9B,UAAU,EAAE,IAAI;aACjB;SACF,CAAC;IACJ,CAAC;IAEO,eAAe,CAAC,GAAe;QACrC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YACf,IAAI,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE;gBACzD,MAAM,KAAK,GAAI,GAAG,CAAC,aAA6B,CAAC,YAAY,CAC3D,mBAAmB,CACpB,CAAC;gBACF,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;aACjC;SACF;IACH,CAAC;IAEO,iBAAiB,CAAC,GAAe;QACvC,GAAG,CAAC,cAAc,EAAE,CAAC;QACrB,GAAG,CAAC,eAAe,EAAE,CAAC;QAEtB,MAAM,KAAK,GAAI,GAAG,CAAC,aAA6B,CAAC,YAAY,CAC3D,mBAAmB,CACpB,CAAC;QAEF,IAAI,KAAK,EAAE;YACT,MAAM,QAAQ,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;YACjC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;YACzB,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;SACvC;IACH,CAAC;IAEM,MAAM;QACX,IAAI,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC;QACpD,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,QAAQ,IAAI,CAAC,CAAC,CAAC;SAChB;QAED,MAAM,cAAc,GAAG;YACrB,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,KAAK;YACvC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,KAAK;YAC1C,aAAa,EAAE,GAAG,IAAI,CAAC,gBAAgB,IAAI;YAC3C,YAAY,EAAE,GAAG,QAAQ,IAAI;SAC9B,CAAC;QAEF,MAAM,YAAY,GAAG,EAAE,CAAC;QACxB,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,YAAY,CAAC,OAAO,CAAC,GAAG,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC;SAC3C;QAED,MAAM,OAAO,GAAG,UAAU,CAAC;YACzB,mBAAmB,EAAE,IAAI;YACzB,IAAI,EAAE,IAAI,CAAC,OAAO;YAClB,GAAG,EAAE,IAAI,CAAC,SAAS;YACnB,QAAQ,EAAE,CAAC,IAAI,CAAC,KAAK;YACrB,OAAO,EAAE,IAAI,CAAC,OAAO;SACtB,CAAC,CAAC;QAEH,MAAM,YAAY,GAAG,UAAU,CAAC;YAC9B,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;QAEH,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,EAAE,CAAC;QACnC,OAAO,IAAI,CAAA;mBACI,OAAO,UAAU,QAAQ,CAAC,cAAc,CAAC;8CACd,IAAI,CAAC,iBAAiB;wBAC5C,YAAY,WAAW,QAAQ,CAAC,YAAY,CAAC;cACvD,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;YAC9B,OAAO,IAAI,CAAA;qCACY,KAAK;6BACb,IAAI,CAAC,eAAe;yBACxB,IAAI,CAAC,iBAAiB;gCACf,KAAK,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;;kBAEzD,IAAI,CAAC,oBAAoB,CAAC,MAAM,EAAE,KAAK,KAAK,IAAI,CAAC,WAAW,CAAC;qBAC1D,CAAC;QACV,CAAC,CAAC;cACA,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA,kCAAkC,CAAC,CAAC,CAAC,IAAI;;;;;;;;;KASnE,CAAC;IACJ,CAAC;CACF;AAnbC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCACf;AAGZ;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCACd;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACb;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDACN;AAGrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CACR;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCACL;AAGtB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCACX;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;sCACb;AAGf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACZ;AAGf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACV;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;wCACX;AAGf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CACT;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CACP;AAGrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACV;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCACZ;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CACT;AAGnB;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;wCAG7B;AAGF;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;kDAG7B;AAGF;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;6CACoC;AAGnE;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;iDACwC;AAGvE;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;mDAC0C;AAGzE;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CACV;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8CACN","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 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                @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"]}