@nyaruka/temba-components 0.95.0 → 0.97.0

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

@@ -26,10 +26,11 @@ export class ContactFieldEditor extends RapidElement {
         return css `
       :host {
         --transition-speed: 0ms;
+        margin-bottom: 1em;
+        display: block;
       }
 
       .wrapper {
-        --temba-textinput-padding: 1.4em 0.8em 0.4em 0.8em;
         --disabled-opacity: 1;
         position: relative;
         --color-widget-bg: transparent;
@@ -76,10 +77,16 @@ export class ContactFieldEditor extends RapidElement {
         overflow: hidden;
         text-overflow: ellipsis;
         display: flex;
-        padding: 0em 0.5em;
         position: absolute;
-        margin-top: 0.2em;
+        margin-top: -0.6em;
+        margin-left: 0.5em;
         pointer-events: none;
+        background: #fff;
+        border-radius: var(--curvature);
+      }
+
+      temba-select .prefix {
+        margin-top: -1em;
       }
 
       .wrapper {
@@ -261,12 +268,23 @@ export class ContactFieldEditor extends RapidElement {
         margin-left: 0;
       }
 
+      temba-datepicker {
+        --temba-textinput-padding: 0.8em 0.8em 0.4em 0.8em;
+      }
+
       .saving temba-datepicker,
       .saving temba-textinput {
         pointer-events: none !important;
         cursor: default !important;
         opacity: 0.7;
       }
+
+      temba-select {
+        --color-widget-bg: white;
+      }
+
+      temba-option {
+      }
     `;
     }
     connectedCallback() {
@@ -310,6 +328,21 @@ export class ContactFieldEditor extends RapidElement {
             this.dirty = false;
         }
     }
+    handleSelectChange(evt) {
+        const select = evt.currentTarget;
+        let value = '';
+        evt.preventDefault();
+        evt.stopPropagation();
+        if (select.values.length > 0) {
+            value = select.values[0].path;
+        }
+        if (value !== this.value) {
+            this.dirty = true;
+            this.status = Status.Saving;
+            this.value = value;
+            this.fireEvent('change');
+        }
+    }
     handleSubmit() {
         const input = this.shadowRoot.querySelector('temba-textinput, temba-datepicker');
         if (input.value !== this.value) {
@@ -346,6 +379,103 @@ export class ContactFieldEditor extends RapidElement {
         }
         return InputType.Text;
     }
+    renderDateField(state) {
+        return html ` <temba-datepicker
+      timezone=${this.timezone}
+      value="${this.value ? this.value : ''}"
+      @change=${this.handleDateChange}
+      ?disabled=${this.disabled}
+      time
+    >
+      <div class="prefix" slot="prefix">
+        <div class="name">${this.name}</div>
+      </div>
+      <div class="postfix" slot="postfix">
+        <div class="popper ${this.status}  ${this.dirty ? 'dirty' : ''}">
+          ${state}
+        </div>
+      </div>
+    </temba-datepicker>`;
+    }
+    renderTextField(state) {
+        return html `
+      <temba-textinput
+        class="${this.status} ${this.dirty ? 'dirty' : ''}"
+        value="${this.value ? this.value : ''}"
+        @keyup=${this.handleInput}
+        @change=${this.handleChange}
+        type=${this.getInputType(this.type)}
+        ?disabled=${this.disabled}
+      >
+        <div class="prefix" slot="prefix">
+          <div class="name">${this.name}</div>
+        </div>
+
+        <div class="postfix">
+          <div
+            class="popper ${this.iconClass} ${this.status}  ${this.dirty
+            ? 'dirty'
+            : ''}"
+            @click=${this.handleIconClick}
+          >
+            ${state}
+            <temba-icon
+              class="search"
+              icon-action="search"
+              name="${Icon.search}"
+              animateclick="pulse"
+            ></temba-icon>
+            <temba-icon
+              class="copy"
+              icon-action="copy"
+              name="${this.icon}"
+              animatechange="spin"
+              animateclick="pulse"
+            ></temba-icon>
+          </div>
+        </div>
+      </temba-textinput>
+    `;
+    }
+    getOptions(response) {
+        return response.json[0].children;
+    }
+    renderSelectedLocation(option) {
+        if (!option) {
+            return null;
+        }
+        return html `
+      <div
+        class="selected-location"
+        style="display:flex;margin-top:1em;margin-left:0.1em"
+      >
+        <span>${option['path']}</span>
+      </div>
+    `;
+    }
+    renderLocationField(level = 'state') {
+        return html `
+      <temba-select
+        endpoint="/api/internal/locations.json?level=${level}"
+        nameKey="path"
+        valueKey="path"
+        @change=${this.handleSelectChange}
+        .resnderSelectedItem=${this.renderSelectedLocation}
+        placeholder="Select a ${level}"
+        queryParam="query"
+        searchable
+        clearable
+        inpsutStyle=${JSON.stringify({ 'margin-top': '1.1em !important;' })}
+        values=${this.value
+            ? JSON.stringify([{ path: this.value, osm_id: this.value }])
+            : '[]'}
+      >
+        <div class="prefix" slot="prefix">
+          <div class="name">${this.name}</div>
+        </div>
+      </temba-select>
+    `;
+    }
     render() {
         if (this.disabled) {
             return html `<div
@@ -410,65 +540,12 @@ export class ContactFieldEditor extends RapidElement {
             })}
       >
         ${this.type === 'datetime'
-            ? html `
-              <temba-datepicker
-                timezone=${this.timezone}
-                value="${this.value ? this.value : ''}"
-                @change=${this.handleDateChange}
-                ?disabled=${this.disabled}
-                time
-              >
-                <div class="prefix" slot="prefix">
-                  <div class="name">${this.name}</div>
-                </div>
-                <div class="postfix" slot="postfix">
-                  <div
-                    class="popper ${this.status}  ${this.dirty ? 'dirty' : ''}"
-                  >
-                    ${state}
-                  </div>
-                </div>
-              </temba-datepicker>
-            `
-            : html `
-              <temba-textinput
-                class="${this.status} ${this.dirty ? 'dirty' : ''}"
-                value="${this.value ? this.value : ''}"
-                @keyup=${this.handleInput}
-                @change=${this.handleChange}
-                type=${this.getInputType(this.type)}
-                ?disabled=${this.disabled}
-              >
-                <div class="prefix" slot="prefix">
-                  <div class="name">${this.name}</div>
-                </div>
-
-                <div class="postfix">
-                  <div
-                    class="popper ${this.iconClass} ${this.status}  ${this.dirty
-                ? 'dirty'
-                : ''}"
-                    @click=${this.handleIconClick}
-                  >
-                    ${state}
-
-                    <temba-icon
-                      class="search"
-                      icon-action="search"
-                      name="${Icon.search}"
-                      animateclick="pulse"
-                    ></temba-icon>
-                    <temba-icon
-                      class="copy"
-                      icon-action="copy"
-                      name="${this.icon}"
-                      animatechange="spin"
-                      animateclick="pulse"
-                    ></temba-icon>
-                  </div>
-                </div>
-              </temba-textinput>
-            `}
+            ? this.renderDateField(state)
+            : this.type === 'state' ||
+                this.type === 'district' ||
+                this.type === 'ward'
+                ? this.renderLocationField(this.type)
+                : this.renderTextField(state)}
       </div>
     `;
     }

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

@@ -1 +1 @@
-{"version":3,"file":"ContactFieldEditor.js","sourceRoot":"","sources":["../../../src/contacts/ContactFieldEditor.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { FormElement } from '../FormElement';\nimport { CustomEventType } from '../interfaces';\nimport { RapidElement } from '../RapidElement';\nimport { InputType, TextInput } from '../textinput/TextInput';\nimport { Icon } from '../vectoricon';\nimport { getClasses, WebResponse } from '../utils';\n\nenum Status {\n  Success = 'success',\n  Failure = 'failure',\n  Saving = 'saving',\n  Ready = 'ready'\n}\n\nexport class ContactFieldEditor extends RapidElement {\n  @property({ type: String })\n  key: string;\n\n  @property({ type: String })\n  value: string;\n\n  @property({ type: String })\n  name: string;\n\n  @property({ type: String })\n  type: string;\n\n  @property({ type: String })\n  timezone: string;\n\n  @property({ type: String })\n  icon = navigator.clipboard ? Icon.copy : '';\n\n  @property({ type: String })\n  iconClass = '';\n\n  @property({ type: String })\n  status: Status = Status.Ready;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  @property({ type: Boolean })\n  dirty = false;\n\n  static get styles() {\n    return css`\n      :host {\n        --transition-speed: 0ms;\n      }\n\n      .wrapper {\n        --temba-textinput-padding: 1.4em 0.8em 0.4em 0.8em;\n        --disabled-opacity: 1;\n        position: relative;\n        --color-widget-bg: transparent;\n        --color-widget-bg-focused: #fff;\n        --widget-box-shadow: none;\n        padding-bottom: 0.6em;\n        border-bottom: 1px solid #ececec;\n      }\n\n      .wrapper.disabled {\n        --color-widget-border: transparent;\n      }\n\n      .wrapper.mutable:hover {\n      }\n\n      .wrapper.mutable {\n        --color-widget-border: rgb(235, 235, 235);\n        --color-widget-bg: transparent;\n        --input-cursor: pointer;\n\n        border-bottom: none;\n        margin-bottom: 0.5em;\n        padding-bottom: 0em;\n      }\n\n      .mutable.success {\n        --color-widget-border: rgba(var(--success-rgb), 0.6);\n      }\n\n      .mutable.failure {\n        --color-widget-border: rgba(var(--error-rgb), 0.3) !important;\n      }\n\n      .mutable .dirty {\n        --color-widget-border: rgb(235, 235, 235);\n      }\n\n      .prefix {\n        border-top-left-radius: var(--curvature-widget);\n        border-bottom-left-radius: var(--curvature-widget);\n        cursor: pointer !important;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        display: flex;\n        padding: 0em 0.5em;\n        position: absolute;\n        margin-top: 0.2em;\n        pointer-events: none;\n      }\n\n      .wrapper {\n        margin-bottom: 0.5em;\n      }\n\n      .prefix .name,\n      .label .name {\n        padding: 0em 0.4em;\n        color: rgba(100, 100, 100, 0.7);\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        font-size: 0.8em;\n      }\n\n      .disabled .name {\n        margin-top: 1em;\n        margin-left: 0.75em;\n      }\n\n      .disabled .value {\n        margin-left: 0.9em;\n        margin-top: 0.1em;\n        min-height: 1.75em;\n      }\n\n      .postfix {\n        display: flex;\n        align-items: stretch;\n        margin-left: 1em;\n      }\n\n      .popper {\n        background: rgba(0, 0, 0, 0.03);\n        border-top-right-radius: var(--curvature-widget);\n        border-bottom-right-radius: var(--curvature-widget);\n        --icon-color: #888;\n        display: flex;\n        cursor: default;\n        transition: all var(--transition-speed) ease-in-out;\n        align-items: stretch;\n        margin: -1px;\n      }\n\n      temba-icon[name='calendar'] {\n        --icon-color: rgba(0, 0, 0, 0.2);\n      }\n\n      temba-icon:hover {\n        --icon-color: rgba(0, 0, 0, 0.5);\n      }\n\n      temba-icon {\n        cursor: pointer;\n        --icon-color: rgba(0, 0, 0, 0.3);\n      }\n\n      temba-textinput:focus .popper,\n      temba-textinput:hover .popper {\n        display: flex;\n      }\n\n      .disabled temba-textinput .postfix {\n        display: none;\n        padding: none;\n      }\n\n      .unset temba-textinput .popper .copy,\n      .unset temba-textinput .popper .search {\n        display: none;\n      }\n\n      .unset temba-textinput:focus .popper .copy,\n      .unset temba-textinput:hover .popper .copy,\n      .unset temba-textinput:focus .popper .save,\n      .unset temba-textinput:hover .popper .save {\n        display: none;\n      }\n\n      .popper temba-icon {\n        padding: 0.5em 0em;\n        padding-right: 1em;\n      }\n\n      .popper:first-child {\n        padding: 0.5em 0em;\n        padding-right: 0.5em;\n        padding-left: 1em;\n      }\n\n      .popper:last-child {\n        padding-right: 0em;\n      }\n\n      .copy.clicked temba-icon {\n        transform: scale(1.2);\n      }\n\n      temba-icon {\n        transition: all 200ms ease-in-out;\n      }\n\n      temba-datepicker {\n        position: relative;\n      }\n\n      .save-state {\n        display: flex;\n        align-items: center;\n      }\n\n      .save-button {\n        padding-right: 1em;\n      }\n\n      .dirty .copy,\n      .dirty .search {\n        display: none;\n      }\n\n      .saving .copy,\n      .saving .search {\n        display: none;\n      }\n\n      .success .copy,\n      .success .search {\n        display: none;\n      }\n\n      .failure .copy,\n      .failure .search {\n        display: none;\n      }\n\n      .popper.success {\n        background: rgb(var(--success-rgb));\n      }\n\n      .popper.failure {\n        background: rgb(var(--error-rgb));\n      }\n\n      .popper.success temba-icon,\n      .popper.failure temba-icon {\n        --icon-color: #fff !important;\n      }\n\n      .popper.dirty {\n        background: rgba(0, 0, 0, 0.03);\n      }\n\n      temba-datepicker .popper {\n        border-radius: 0px;\n      }\n\n      temba-datepicker .popper:first-child {\n        padding: 0;\n      }\n\n      .dirty temba-datepicker .popper:first-child {\n        padding-left: 1em;\n      }\n\n      .success temba-datepicker .popper:first-child {\n        padding-left: 1em;\n      }\n\n      .failure temba-datepicker .popper:first-child {\n        padding-left: 1em;\n      }\n\n      .saving temba-datepicker .popper:first-child {\n        padding-left: 1em;\n      }\n\n      temba-datepicker .postfix {\n        margin-left: 0;\n      }\n\n      .saving temba-datepicker,\n      .saving temba-textinput {\n        pointer-events: none !important;\n        cursor: default !important;\n        opacity: 0.7;\n      }\n    `;\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.handleInput = this.handleInput.bind(this);\n    this.handleSubmit = this.handleSubmit.bind(this);\n  }\n\n  public handleIconClick(evt: MouseEvent) {\n    const ele = evt.target as HTMLDivElement;\n    const icon = ele.getAttribute('icon-action');\n    const input = this.shadowRoot.querySelector('temba-textinput') as TextInput;\n\n    if (icon === 'copy') {\n      if (navigator.clipboard) {\n        this.iconClass = 'clicked';\n        navigator.clipboard.writeText(input.getDisplayValue()).then(() => {\n          window.setTimeout(() => {\n            this.iconClass = '';\n          }, 300);\n        });\n      }\n    }\n\n    if (icon === 'search') {\n      this.fireCustomEvent(CustomEventType.ButtonClicked, {\n        key: this.key,\n        value: this.value\n      });\n    }\n\n    evt.preventDefault();\n    evt.stopPropagation();\n  }\n\n  public handleResponse(response: WebResponse) {\n    if (response.status === 200) {\n      this.value = response.json.fields[this.key];\n      // this.status = Status.Success;\n      // on success lets go back to ready state for now\n      this.status = Status.Ready;\n      this.dirty = false;\n    } else {\n      this.status = Status.Failure;\n      this.dirty = false;\n    }\n  }\n\n  public handleSubmit() {\n    const input = this.shadowRoot.querySelector(\n      'temba-textinput, temba-datepicker'\n    ) as FormElement;\n\n    if (input.value !== this.value) {\n      this.dirty = true;\n      this.status = Status.Saving;\n      this.value = input.value;\n      this.fireEvent('change');\n    }\n  }\n\n  public handleChange(evt: Event) {\n    evt.preventDefault();\n    evt.stopPropagation();\n  }\n\n  public handleDateChange(evt: Event) {\n    evt.preventDefault();\n    evt.stopPropagation();\n    this.dirty = true;\n  }\n\n  public handleInput(evt: KeyboardEvent) {\n    const input = evt.currentTarget as TextInput;\n    if (evt.key === 'Enter') {\n      input.blur();\n      this.handleSubmit();\n    } else {\n      if (input.value !== this.value) {\n        this.dirty = true;\n      }\n    }\n  }\n\n  private getInputType(type: string): string {\n    if (type === 'numeric') {\n      return InputType.Number;\n    }\n    return InputType.Text;\n  }\n\n  public render(): TemplateResult {\n    if (this.disabled) {\n      return html`<div\n        class=${this.status +\n        ' ' +\n        getClasses({\n          wrapper: true,\n          set: !!this.value,\n          unset: !this.value,\n          disabled: this.disabled,\n          mutable: !this.disabled,\n          dirty: this.dirty\n        })}\n      >\n        <div class=\"label\"><div class=\"name\">${this.name}</div></div>\n        <div class=\"value\">\n          ${this.type === 'datetime'\n            ? this.value\n              ? html`<temba-date\n                  value=${this.value}\n                  display=\"datetime\"\n                ></temba-date>`\n              : null\n            : this.value}\n        </div>\n      </div>`;\n    }\n\n    const state = html`<div class=\"save-state\">\n      ${this.dirty\n        ? html`<temba-button\n            class=\"save-button\"\n            name=\"Save\"\n            small\n            @click=${this.handleSubmit}\n          ></temba-button>`\n        : html` ${this.status === Status.Saving\n            ? html`<temba-icon\n                spin\n                name=\"${Icon.progress_spinner}\"\n              ></temba-icon>`\n            : null}\n          ${this.status === Status.Success && !this.dirty\n            ? html`<temba-icon name=\"${Icon.success}\"></temba-icon>`\n            : null}\n          ${this.status === Status.Failure\n            ? html`<temba-tip text=\"Failed to save changes, try again later.\"\n                ><temba-icon name=\"${Icon.alert_warning}\"></temba-icon\n              ></temba-tip>`\n            : null}`}\n    </div>`;\n\n    return html`\n      <div\n        class=${this.status +\n        ' ' +\n        getClasses({\n          wrapper: true,\n          set: !!this.value,\n          unset: !this.value,\n          disabled: this.disabled,\n          mutable: !this.disabled,\n          dirty: this.dirty\n        })}\n      >\n        ${this.type === 'datetime'\n          ? html`\n              <temba-datepicker\n                timezone=${this.timezone}\n                value=\"${this.value ? this.value : ''}\"\n                @change=${this.handleDateChange}\n                ?disabled=${this.disabled}\n                time\n              >\n                <div class=\"prefix\" slot=\"prefix\">\n                  <div class=\"name\">${this.name}</div>\n                </div>\n                <div class=\"postfix\" slot=\"postfix\">\n                  <div\n                    class=\"popper ${this.status}  ${this.dirty ? 'dirty' : ''}\"\n                  >\n                    ${state}\n                  </div>\n                </div>\n              </temba-datepicker>\n            `\n          : html`\n              <temba-textinput\n                class=\"${this.status} ${this.dirty ? 'dirty' : ''}\"\n                value=\"${this.value ? this.value : ''}\"\n                @keyup=${this.handleInput}\n                @change=${this.handleChange}\n                type=${this.getInputType(this.type)}\n                ?disabled=${this.disabled}\n              >\n                <div class=\"prefix\" slot=\"prefix\">\n                  <div class=\"name\">${this.name}</div>\n                </div>\n\n                <div class=\"postfix\">\n                  <div\n                    class=\"popper ${this.iconClass} ${this.status}  ${this.dirty\n                      ? 'dirty'\n                      : ''}\"\n                    @click=${this.handleIconClick}\n                  >\n                    ${state}\n\n                    <temba-icon\n                      class=\"search\"\n                      icon-action=\"search\"\n                      name=\"${Icon.search}\"\n                      animateclick=\"pulse\"\n                    ></temba-icon>\n                    <temba-icon\n                      class=\"copy\"\n                      icon-action=\"copy\"\n                      name=\"${this.icon}\"\n                      animatechange=\"spin\"\n                      animateclick=\"pulse\"\n                    ></temba-icon>\n                  </div>\n                </div>\n              </temba-textinput>\n            `}\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"ContactFieldEditor.js","sourceRoot":"","sources":["../../../src/contacts/ContactFieldEditor.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { FormElement } from '../FormElement';\nimport { CustomEventType } from '../interfaces';\nimport { RapidElement } from '../RapidElement';\nimport { InputType, TextInput } from '../textinput/TextInput';\nimport { Icon } from '../vectoricon';\nimport { getClasses, WebResponse } from '../utils';\nimport { Select } from '../select/Select';\n\nenum Status {\n  Success = 'success',\n  Failure = 'failure',\n  Saving = 'saving',\n  Ready = 'ready'\n}\n\nexport class ContactFieldEditor extends RapidElement {\n  @property({ type: String })\n  key: string;\n\n  @property({ type: String })\n  value: string;\n\n  @property({ type: String })\n  name: string;\n\n  @property({ type: String })\n  type: string;\n\n  @property({ type: String })\n  timezone: string;\n\n  @property({ type: String })\n  icon = navigator.clipboard ? Icon.copy : '';\n\n  @property({ type: String })\n  iconClass = '';\n\n  @property({ type: String })\n  status: Status = Status.Ready;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  @property({ type: Boolean })\n  dirty = false;\n\n  static get styles() {\n    return css`\n      :host {\n        --transition-speed: 0ms;\n        margin-bottom: 1em;\n        display: block;\n      }\n\n      .wrapper {\n        --disabled-opacity: 1;\n        position: relative;\n        --color-widget-bg: transparent;\n        --color-widget-bg-focused: #fff;\n        --widget-box-shadow: none;\n        padding-bottom: 0.6em;\n        border-bottom: 1px solid #ececec;\n      }\n\n      .wrapper.disabled {\n        --color-widget-border: transparent;\n      }\n\n      .wrapper.mutable:hover {\n      }\n\n      .wrapper.mutable {\n        --color-widget-border: rgb(235, 235, 235);\n        --color-widget-bg: transparent;\n        --input-cursor: pointer;\n\n        border-bottom: none;\n        margin-bottom: 0.5em;\n        padding-bottom: 0em;\n      }\n\n      .mutable.success {\n        --color-widget-border: rgba(var(--success-rgb), 0.6);\n      }\n\n      .mutable.failure {\n        --color-widget-border: rgba(var(--error-rgb), 0.3) !important;\n      }\n\n      .mutable .dirty {\n        --color-widget-border: rgb(235, 235, 235);\n      }\n\n      .prefix {\n        border-top-left-radius: var(--curvature-widget);\n        border-bottom-left-radius: var(--curvature-widget);\n        cursor: pointer !important;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        display: flex;\n        position: absolute;\n        margin-top: -0.6em;\n        margin-left: 0.5em;\n        pointer-events: none;\n        background: #fff;\n        border-radius: var(--curvature);\n      }\n\n      temba-select .prefix {\n        margin-top: -1em;\n      }\n\n      .wrapper {\n        margin-bottom: 0.5em;\n      }\n\n      .prefix .name,\n      .label .name {\n        padding: 0em 0.4em;\n        color: rgba(100, 100, 100, 0.7);\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        font-size: 0.8em;\n      }\n\n      .disabled .name {\n        margin-top: 1em;\n        margin-left: 0.75em;\n      }\n\n      .disabled .value {\n        margin-left: 0.9em;\n        margin-top: 0.1em;\n        min-height: 1.75em;\n      }\n\n      .postfix {\n        display: flex;\n        align-items: stretch;\n        margin-left: 1em;\n      }\n\n      .popper {\n        background: rgba(0, 0, 0, 0.03);\n        border-top-right-radius: var(--curvature-widget);\n        border-bottom-right-radius: var(--curvature-widget);\n        --icon-color: #888;\n        display: flex;\n        cursor: default;\n        transition: all var(--transition-speed) ease-in-out;\n        align-items: stretch;\n        margin: -1px;\n      }\n\n      temba-icon[name='calendar'] {\n        --icon-color: rgba(0, 0, 0, 0.2);\n      }\n\n      temba-icon:hover {\n        --icon-color: rgba(0, 0, 0, 0.5);\n      }\n\n      temba-icon {\n        cursor: pointer;\n        --icon-color: rgba(0, 0, 0, 0.3);\n      }\n\n      temba-textinput:focus .popper,\n      temba-textinput:hover .popper {\n        display: flex;\n      }\n\n      .disabled temba-textinput .postfix {\n        display: none;\n        padding: none;\n      }\n\n      .unset temba-textinput .popper .copy,\n      .unset temba-textinput .popper .search {\n        display: none;\n      }\n\n      .unset temba-textinput:focus .popper .copy,\n      .unset temba-textinput:hover .popper .copy,\n      .unset temba-textinput:focus .popper .save,\n      .unset temba-textinput:hover .popper .save {\n        display: none;\n      }\n\n      .popper temba-icon {\n        padding: 0.5em 0em;\n        padding-right: 1em;\n      }\n\n      .popper:first-child {\n        padding: 0.5em 0em;\n        padding-right: 0.5em;\n        padding-left: 1em;\n      }\n\n      .popper:last-child {\n        padding-right: 0em;\n      }\n\n      .copy.clicked temba-icon {\n        transform: scale(1.2);\n      }\n\n      temba-icon {\n        transition: all 200ms ease-in-out;\n      }\n\n      temba-datepicker {\n        position: relative;\n      }\n\n      .save-state {\n        display: flex;\n        align-items: center;\n      }\n\n      .save-button {\n        padding-right: 1em;\n      }\n\n      .dirty .copy,\n      .dirty .search {\n        display: none;\n      }\n\n      .saving .copy,\n      .saving .search {\n        display: none;\n      }\n\n      .success .copy,\n      .success .search {\n        display: none;\n      }\n\n      .failure .copy,\n      .failure .search {\n        display: none;\n      }\n\n      .popper.success {\n        background: rgb(var(--success-rgb));\n      }\n\n      .popper.failure {\n        background: rgb(var(--error-rgb));\n      }\n\n      .popper.success temba-icon,\n      .popper.failure temba-icon {\n        --icon-color: #fff !important;\n      }\n\n      .popper.dirty {\n        background: rgba(0, 0, 0, 0.03);\n      }\n\n      temba-datepicker .popper {\n        border-radius: 0px;\n      }\n\n      temba-datepicker .popper:first-child {\n        padding: 0;\n      }\n\n      .dirty temba-datepicker .popper:first-child {\n        padding-left: 1em;\n      }\n\n      .success temba-datepicker .popper:first-child {\n        padding-left: 1em;\n      }\n\n      .failure temba-datepicker .popper:first-child {\n        padding-left: 1em;\n      }\n\n      .saving temba-datepicker .popper:first-child {\n        padding-left: 1em;\n      }\n\n      temba-datepicker .postfix {\n        margin-left: 0;\n      }\n\n      temba-datepicker {\n        --temba-textinput-padding: 0.8em 0.8em 0.4em 0.8em;\n      }\n\n      .saving temba-datepicker,\n      .saving temba-textinput {\n        pointer-events: none !important;\n        cursor: default !important;\n        opacity: 0.7;\n      }\n\n      temba-select {\n        --color-widget-bg: white;\n      }\n\n      temba-option {\n      }\n    `;\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.handleInput = this.handleInput.bind(this);\n    this.handleSubmit = this.handleSubmit.bind(this);\n  }\n\n  public handleIconClick(evt: MouseEvent) {\n    const ele = evt.target as HTMLDivElement;\n    const icon = ele.getAttribute('icon-action');\n    const input = this.shadowRoot.querySelector('temba-textinput') as TextInput;\n\n    if (icon === 'copy') {\n      if (navigator.clipboard) {\n        this.iconClass = 'clicked';\n        navigator.clipboard.writeText(input.getDisplayValue()).then(() => {\n          window.setTimeout(() => {\n            this.iconClass = '';\n          }, 300);\n        });\n      }\n    }\n\n    if (icon === 'search') {\n      this.fireCustomEvent(CustomEventType.ButtonClicked, {\n        key: this.key,\n        value: this.value\n      });\n    }\n\n    evt.preventDefault();\n    evt.stopPropagation();\n  }\n\n  public handleResponse(response: WebResponse) {\n    if (response.status === 200) {\n      this.value = response.json.fields[this.key];\n      // this.status = Status.Success;\n      // on success lets go back to ready state for now\n      this.status = Status.Ready;\n      this.dirty = false;\n    } else {\n      this.status = Status.Failure;\n      this.dirty = false;\n    }\n  }\n\n  public handleSelectChange(evt: CustomEvent) {\n    const select = evt.currentTarget as Select;\n    let value = '';\n\n    evt.preventDefault();\n    evt.stopPropagation();\n\n    if (select.values.length > 0) {\n      value = select.values[0].path;\n    }\n\n    if (value !== this.value) {\n      this.dirty = true;\n      this.status = Status.Saving;\n      this.value = value;\n      this.fireEvent('change');\n    }\n  }\n\n  public handleSubmit() {\n    const input = this.shadowRoot.querySelector(\n      'temba-textinput, temba-datepicker'\n    ) as FormElement;\n\n    if (input.value !== this.value) {\n      this.dirty = true;\n      this.status = Status.Saving;\n      this.value = input.value;\n      this.fireEvent('change');\n    }\n  }\n\n  public handleChange(evt: Event) {\n    evt.preventDefault();\n    evt.stopPropagation();\n  }\n\n  public handleDateChange(evt: Event) {\n    evt.preventDefault();\n    evt.stopPropagation();\n    this.dirty = true;\n  }\n\n  public handleInput(evt: KeyboardEvent) {\n    const input = evt.currentTarget as TextInput;\n    if (evt.key === 'Enter') {\n      input.blur();\n      this.handleSubmit();\n    } else {\n      if (input.value !== this.value) {\n        this.dirty = true;\n      }\n    }\n  }\n\n  private getInputType(type: string): string {\n    if (type === 'numeric') {\n      return InputType.Number;\n    }\n    return InputType.Text;\n  }\n\n  private renderDateField(state: TemplateResult) {\n    return html` <temba-datepicker\n      timezone=${this.timezone}\n      value=\"${this.value ? this.value : ''}\"\n      @change=${this.handleDateChange}\n      ?disabled=${this.disabled}\n      time\n    >\n      <div class=\"prefix\" slot=\"prefix\">\n        <div class=\"name\">${this.name}</div>\n      </div>\n      <div class=\"postfix\" slot=\"postfix\">\n        <div class=\"popper ${this.status}  ${this.dirty ? 'dirty' : ''}\">\n          ${state}\n        </div>\n      </div>\n    </temba-datepicker>`;\n  }\n\n  private renderTextField(state: TemplateResult) {\n    return html`\n      <temba-textinput\n        class=\"${this.status} ${this.dirty ? 'dirty' : ''}\"\n        value=\"${this.value ? this.value : ''}\"\n        @keyup=${this.handleInput}\n        @change=${this.handleChange}\n        type=${this.getInputType(this.type)}\n        ?disabled=${this.disabled}\n      >\n        <div class=\"prefix\" slot=\"prefix\">\n          <div class=\"name\">${this.name}</div>\n        </div>\n\n        <div class=\"postfix\">\n          <div\n            class=\"popper ${this.iconClass} ${this.status}  ${this.dirty\n              ? 'dirty'\n              : ''}\"\n            @click=${this.handleIconClick}\n          >\n            ${state}\n            <temba-icon\n              class=\"search\"\n              icon-action=\"search\"\n              name=\"${Icon.search}\"\n              animateclick=\"pulse\"\n            ></temba-icon>\n            <temba-icon\n              class=\"copy\"\n              icon-action=\"copy\"\n              name=\"${this.icon}\"\n              animatechange=\"spin\"\n              animateclick=\"pulse\"\n            ></temba-icon>\n          </div>\n        </div>\n      </temba-textinput>\n    `;\n  }\n\n  private getOptions(response: WebResponse) {\n    return response.json[0].children;\n  }\n\n  private renderSelectedLocation(option: any) {\n    if (!option) {\n      return null;\n    }\n\n    return html`\n      <div\n        class=\"selected-location\"\n        style=\"display:flex;margin-top:1em;margin-left:0.1em\"\n      >\n        <span>${option['path']}</span>\n      </div>\n    `;\n  }\n\n  public renderLocationField(level: string = 'state') {\n    return html`\n      <temba-select\n        endpoint=\"/api/internal/locations.json?level=${level}\"\n        nameKey=\"path\"\n        valueKey=\"path\"\n        @change=${this.handleSelectChange}\n        .resnderSelectedItem=${this.renderSelectedLocation}\n        placeholder=\"Select a ${level}\"\n        queryParam=\"query\"\n        searchable\n        clearable\n        inpsutStyle=${JSON.stringify({ 'margin-top': '1.1em !important;' })}\n        values=${this.value\n          ? JSON.stringify([{ path: this.value, osm_id: this.value }])\n          : '[]'}\n      >\n        <div class=\"prefix\" slot=\"prefix\">\n          <div class=\"name\">${this.name}</div>\n        </div>\n      </temba-select>\n    `;\n  }\n\n  public render(): TemplateResult {\n    if (this.disabled) {\n      return html`<div\n        class=${this.status +\n        ' ' +\n        getClasses({\n          wrapper: true,\n          set: !!this.value,\n          unset: !this.value,\n          disabled: this.disabled,\n          mutable: !this.disabled,\n          dirty: this.dirty\n        })}\n      >\n        <div class=\"label\"><div class=\"name\">${this.name}</div></div>\n        <div class=\"value\">\n          ${this.type === 'datetime'\n            ? this.value\n              ? html`<temba-date\n                  value=${this.value}\n                  display=\"datetime\"\n                ></temba-date>`\n              : null\n            : this.value}\n        </div>\n      </div>`;\n    }\n\n    const state = html`<div class=\"save-state\">\n      ${this.dirty\n        ? html`<temba-button\n            class=\"save-button\"\n            name=\"Save\"\n            small\n            @click=${this.handleSubmit}\n          ></temba-button>`\n        : html` ${this.status === Status.Saving\n            ? html`<temba-icon\n                spin\n                name=\"${Icon.progress_spinner}\"\n              ></temba-icon>`\n            : null}\n          ${this.status === Status.Success && !this.dirty\n            ? html`<temba-icon name=\"${Icon.success}\"></temba-icon>`\n            : null}\n          ${this.status === Status.Failure\n            ? html`<temba-tip text=\"Failed to save changes, try again later.\"\n                ><temba-icon name=\"${Icon.alert_warning}\"></temba-icon\n              ></temba-tip>`\n            : null}`}\n    </div>`;\n\n    return html`\n      <div\n        class=${this.status +\n        ' ' +\n        getClasses({\n          wrapper: true,\n          set: !!this.value,\n          unset: !this.value,\n          disabled: this.disabled,\n          mutable: !this.disabled,\n          dirty: this.dirty\n        })}\n      >\n        ${this.type === 'datetime'\n          ? this.renderDateField(state)\n          : this.type === 'state' ||\n            this.type === 'district' ||\n            this.type === 'ward'\n          ? this.renderLocationField(this.type)\n          : this.renderTextField(state)}\n      </div>\n    `;\n  }\n}\n"]}

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

@@ -13,7 +13,7 @@ export class ContactFields extends ContactStoreElement {
         return css `
       .field {
         display: flex;
-        margin: 0.3em 0.3em;
+        margin: 1em 0.3em;
         box-shadow: 0 0 0.2em rgba(0, 0, 0, 0.15);
         border-radius: 0px;
         align-items: center;
@@ -165,10 +165,7 @@ export class ContactFields extends ContactStoreElement {
           @change=${this.handleFieldChanged}
           timezone=${this.timezone}
           ?disabled=${(this.isAgent() && field.agent_access === 'view') ||
-                    this.disabled ||
-                    field.value_type === 'ward' ||
-                    field.value_type === 'district' ||
-                    field.value_type === 'state'
+                    this.disabled
                     ? true
                     : false}
         ></temba-contact-field>`;

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

@@ -1 +1 @@
-{"version":3,"file":"ContactFields.js","sourceRoot":"","sources":["../../../src/contacts/ContactFields.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { getClasses, postJSON } from '../utils';\nimport { ContactFieldEditor } from './ContactFieldEditor';\nimport { ContactStoreElement } from './ContactStoreElement';\nimport { Checkbox } from '../checkbox/Checkbox';\n\nconst MIN_FOR_FILTER = 10;\n\nexport class ContactFields extends ContactStoreElement {\n  static get styles() {\n    return css`\n      .field {\n        display: flex;\n        margin: 0.3em 0.3em;\n        box-shadow: 0 0 0.2em rgba(0, 0, 0, 0.15);\n        border-radius: 0px;\n        align-items: center;\n        overflow: hidden;\n      }\n\n      .show-all .unset,\n      .featured {\n        display: block !important;\n      }\n\n      .unset {\n        display: none;\n      }\n\n      .field:hover {\n        box-shadow: 1px 1px 6px 2px rgba(0, 0, 0, 0.05),\n          0px 0px 0px 2px var(--color-link-primary);\n        cursor: pointer;\n      }\n\n      .label {\n        padding: 0.25em 1em;\n        border-top-left-radius: 0px;\n        border-bottom-left-radius: 0px;\n        color: #777;\n        font-size: 0.9em;\n        font-weight: 400;\n        box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1) inset;\n      }\n\n      .value {\n        --icon-color: #ddd;\n        max-width: 150px;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        padding: 0.25em 1em;\n        border-top-right-radius: 0px;\n        border-bottom-right-radius: 0px;\n        font-size: 0.9em;\n      }\n\n      .toggle {\n        display: flex;\n        background: #fff;\n        align-items: center;\n        margin-bottom: 0.5em;\n      }\n\n      .disabled .toggle {\n        display: none;\n      }\n    `;\n  }\n\n  @property({ type: Boolean })\n  system: boolean;\n\n  @property({ type: Boolean })\n  dirty: boolean;\n\n  @property({ type: Boolean })\n  showAll: boolean;\n\n  @property({ type: String })\n  timezone: string;\n\n  @property({ type: String })\n  role: string;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.handleFieldChanged = this.handleFieldChanged.bind(this);\n  }\n\n  private isAgent(): boolean {\n    return this.role === 'T';\n  }\n\n  protected updated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.updated(changes);\n    if (changes.has('data')) {\n      if (Object.keys(this.data.fields).length <= MIN_FOR_FILTER) {\n        this.showAll = true;\n      }\n    }\n  }\n\n  public handleFieldChanged(evt: InputEvent) {\n    const field = evt.currentTarget as ContactFieldEditor;\n    const value = field.value;\n    postJSON('/api/v2/contacts.json?uuid=' + this.data.uuid, {\n      fields: { [field.key]: value }\n    })\n      .then((response: any) => {\n        field.handleResponse(response);\n\n        // returns a single contact with latest updates\n        this.setContact(response.json);\n      })\n      .catch((error) => {\n        field.handleResponse(error);\n      });\n  }\n\n  public handleToggle(evt: Event) {\n    const checkbox = evt.currentTarget as Checkbox;\n    this.showAll = checkbox.checked;\n  }\n\n  public render(): TemplateResult {\n    if (this.data) {\n      const fieldsToShow = Object.entries(this.data.fields).sort(\n        (a: [string, string], b: [string, string]) => {\n          const [ak] = a;\n          const [bk] = b;\n          const fieldA = this.store.getContactField(ak);\n          const fieldB = this.store.getContactField(bk);\n\n          if (fieldA.type === 'ward') {\n            return 1;\n          }\n\n          if (fieldB.type === 'ward') {\n            return -1;\n          }\n\n          if (\n            fieldA.type === 'district' &&\n            fieldB.type !== 'ward' &&\n            fieldB.type !== 'district'\n          ) {\n            return 1;\n          }\n\n          if (\n            fieldB.type === 'district' &&\n            fieldA.type !== 'ward' &&\n            fieldA.type !== 'district'\n          ) {\n            return -1;\n          }\n\n          if (\n            fieldA.type === 'state' &&\n            fieldB.type !== 'ward' &&\n            fieldB.type !== 'district' &&\n            fieldB.type !== 'state'\n          ) {\n            return 1;\n          }\n\n          if (\n            fieldB.type === 'state' &&\n            fieldA.type !== 'ward' &&\n            fieldA.type !== 'district' &&\n            fieldA.type !== 'state'\n          ) {\n            return -1;\n          }\n\n          if (fieldA.featured && !fieldB.featured) {\n            return -1;\n          }\n\n          if (fieldB.featured && !fieldA.featured) {\n            return 1;\n          }\n\n          const priority = fieldB.priority - fieldA.priority;\n          if (priority !== 0) {\n            return priority;\n          }\n\n          return ak.localeCompare(bk);\n        }\n      );\n\n      if (fieldsToShow.length == 0) {\n        return html`<slot name=\"empty\"></slot>`;\n      }\n\n      const fields = fieldsToShow.map((entry: [string, string]) => {\n        const [k, v] = entry;\n        const field = this.store.getContactField(k);\n        return html`<temba-contact-field\n          class=${getClasses({ set: !!v, unset: !v, featured: field.featured })}\n          key=${field.key}\n          name=${field.label}\n          value=${v}\n          type=${field.value_type}\n          @change=${this.handleFieldChanged}\n          timezone=${this.timezone}\n          ?disabled=${(this.isAgent() && field.agent_access === 'view') ||\n          this.disabled ||\n          field.value_type === 'ward' ||\n          field.value_type === 'district' ||\n          field.value_type === 'state'\n            ? true\n            : false}\n        ></temba-contact-field>`;\n      });\n\n      return html`\n        <div class=${getClasses({ disabled: this.disabled })}>\n          <div class=\"fields ${this.showAll ? 'show-all' : ''}\">${fields}</div>\n          ${Object.keys(this.data.fields).length >= MIN_FOR_FILTER\n            ? html`<div class=\"toggle\">\n                <div style=\"flex-grow: 1\"></div>\n                <div>\n                  <temba-checkbox\n                    ?checked=${this.showAll}\n                    @change=${this.handleToggle}\n                    label=\"Show All\"\n                  ></temba-checkbox>\n                </div>\n              </div>`\n            : null}\n        </div>\n      `;\n    }\n\n    return super.render();\n  }\n}\n"]}
+{"version":3,"file":"ContactFields.js","sourceRoot":"","sources":["../../../src/contacts/ContactFields.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { getClasses, postJSON } from '../utils';\nimport { ContactFieldEditor } from './ContactFieldEditor';\nimport { ContactStoreElement } from './ContactStoreElement';\nimport { Checkbox } from '../checkbox/Checkbox';\n\nconst MIN_FOR_FILTER = 10;\n\nexport class ContactFields extends ContactStoreElement {\n  static get styles() {\n    return css`\n      .field {\n        display: flex;\n        margin: 1em 0.3em;\n        box-shadow: 0 0 0.2em rgba(0, 0, 0, 0.15);\n        border-radius: 0px;\n        align-items: center;\n        overflow: hidden;\n      }\n\n      .show-all .unset,\n      .featured {\n        display: block !important;\n      }\n\n      .unset {\n        display: none;\n      }\n\n      .field:hover {\n        box-shadow: 1px 1px 6px 2px rgba(0, 0, 0, 0.05),\n          0px 0px 0px 2px var(--color-link-primary);\n        cursor: pointer;\n      }\n\n      .label {\n        padding: 0.25em 1em;\n        border-top-left-radius: 0px;\n        border-bottom-left-radius: 0px;\n        color: #777;\n        font-size: 0.9em;\n        font-weight: 400;\n        box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1) inset;\n      }\n\n      .value {\n        --icon-color: #ddd;\n        max-width: 150px;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        padding: 0.25em 1em;\n        border-top-right-radius: 0px;\n        border-bottom-right-radius: 0px;\n        font-size: 0.9em;\n      }\n\n      .toggle {\n        display: flex;\n        background: #fff;\n        align-items: center;\n        margin-bottom: 0.5em;\n      }\n\n      .disabled .toggle {\n        display: none;\n      }\n    `;\n  }\n\n  @property({ type: Boolean })\n  system: boolean;\n\n  @property({ type: Boolean })\n  dirty: boolean;\n\n  @property({ type: Boolean })\n  showAll: boolean;\n\n  @property({ type: String })\n  timezone: string;\n\n  @property({ type: String })\n  role: string;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.handleFieldChanged = this.handleFieldChanged.bind(this);\n  }\n\n  private isAgent(): boolean {\n    return this.role === 'T';\n  }\n\n  protected updated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.updated(changes);\n    if (changes.has('data')) {\n      if (Object.keys(this.data.fields).length <= MIN_FOR_FILTER) {\n        this.showAll = true;\n      }\n    }\n  }\n\n  public handleFieldChanged(evt: InputEvent) {\n    const field = evt.currentTarget as ContactFieldEditor;\n    const value = field.value;\n    postJSON('/api/v2/contacts.json?uuid=' + this.data.uuid, {\n      fields: { [field.key]: value }\n    })\n      .then((response: any) => {\n        field.handleResponse(response);\n\n        // returns a single contact with latest updates\n        this.setContact(response.json);\n      })\n      .catch((error) => {\n        field.handleResponse(error);\n      });\n  }\n\n  public handleToggle(evt: Event) {\n    const checkbox = evt.currentTarget as Checkbox;\n    this.showAll = checkbox.checked;\n  }\n\n  public render(): TemplateResult {\n    if (this.data) {\n      const fieldsToShow = Object.entries(this.data.fields).sort(\n        (a: [string, string], b: [string, string]) => {\n          const [ak] = a;\n          const [bk] = b;\n          const fieldA = this.store.getContactField(ak);\n          const fieldB = this.store.getContactField(bk);\n\n          if (fieldA.type === 'ward') {\n            return 1;\n          }\n\n          if (fieldB.type === 'ward') {\n            return -1;\n          }\n\n          if (\n            fieldA.type === 'district' &&\n            fieldB.type !== 'ward' &&\n            fieldB.type !== 'district'\n          ) {\n            return 1;\n          }\n\n          if (\n            fieldB.type === 'district' &&\n            fieldA.type !== 'ward' &&\n            fieldA.type !== 'district'\n          ) {\n            return -1;\n          }\n\n          if (\n            fieldA.type === 'state' &&\n            fieldB.type !== 'ward' &&\n            fieldB.type !== 'district' &&\n            fieldB.type !== 'state'\n          ) {\n            return 1;\n          }\n\n          if (\n            fieldB.type === 'state' &&\n            fieldA.type !== 'ward' &&\n            fieldA.type !== 'district' &&\n            fieldA.type !== 'state'\n          ) {\n            return -1;\n          }\n\n          if (fieldA.featured && !fieldB.featured) {\n            return -1;\n          }\n\n          if (fieldB.featured && !fieldA.featured) {\n            return 1;\n          }\n\n          const priority = fieldB.priority - fieldA.priority;\n          if (priority !== 0) {\n            return priority;\n          }\n\n          return ak.localeCompare(bk);\n        }\n      );\n\n      if (fieldsToShow.length == 0) {\n        return html`<slot name=\"empty\"></slot>`;\n      }\n\n      const fields = fieldsToShow.map((entry: [string, string]) => {\n        const [k, v] = entry;\n        const field = this.store.getContactField(k);\n        return html`<temba-contact-field\n          class=${getClasses({ set: !!v, unset: !v, featured: field.featured })}\n          key=${field.key}\n          name=${field.label}\n          value=${v}\n          type=${field.value_type}\n          @change=${this.handleFieldChanged}\n          timezone=${this.timezone}\n          ?disabled=${(this.isAgent() && field.agent_access === 'view') ||\n          this.disabled\n            ? true\n            : false}\n        ></temba-contact-field>`;\n      });\n\n      return html`\n        <div class=${getClasses({ disabled: this.disabled })}>\n          <div class=\"fields ${this.showAll ? 'show-all' : ''}\">${fields}</div>\n          ${Object.keys(this.data.fields).length >= MIN_FOR_FILTER\n            ? html`<div class=\"toggle\">\n                <div style=\"flex-grow: 1\"></div>\n                <div>\n                  <temba-checkbox\n                    ?checked=${this.showAll}\n                    @change=${this.handleToggle}\n                    label=\"Show All\"\n                  ></temba-checkbox>\n                </div>\n              </div>`\n            : null}\n        </div>\n      `;\n    }\n\n    return super.render();\n  }\n}\n"]}

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

@@ -49,6 +49,7 @@ export class Options extends RapidElement {
           opacity var(--transition-speed) cubic-bezier(0.71, 0.18, 0.61, 1.33);
         opacity: 0;
         border: 1px transparent;
+        z-index: 1000;
       }
 
       .shadow {

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, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { CustomEventType } from '../interfaces';\nimport { RapidElement, EventHandler } from '../RapidElement';\nimport { styleMap } from 'lit-html/directives/style-map.js';\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-options-bg);\n        user-select: none;\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        opacity: 0;\n        border: 1px transparent;\n      }\n\n      .shadow {\n        box-shadow: var(--options-shadow);\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        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        border-radius: var(--curvature);\n        display: block;\n        height: 100%;\n      }\n\n      :host([block]) .shadow {\n        box-shadow: var(--options-block-shadow);\n      }\n\n      .bordered {\n        border: 1px solid var(--color-widget-border) !important;\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        transform: scaleY(1) translateY(0);\n        border: 1px solid var(--color-widget-border);\n        opacity: 1;\n        z-index: 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 .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 var(--transition-speed) 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      .option:hover {\n        background: var(--option-hover-bg);\n        color: var(--option-hover-text);\n      }\n\n      .option.focused {\n        background: var(--color-selection);\n        color: var(--color-text-dark);\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, attribute: 'static-width' })\n  staticWidth: number;\n\n  @property({ type: Boolean, attribute: 'anchor-right' })\n  anchorRight: boolean;\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: Boolean })\n  internalFocusDisabled = false;\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({ type: Boolean })\n  hideShadow = false;\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 (!this.internalFocusDisabled && 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.internalFocusDisabled) {\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\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 (!this.internalFocusDisabled) {\n      if (index === -1) {\n        index = this.cursorIndex;\n      }\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    if (!this.internalFocusDisabled) {\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\n  private setCursor: (index: number) => void = throttle(function (\n    index: number\n  ) {\n    if (!this.internalFocusDisabled) {\n      if (index !== this.cursorIndex) {\n        this.cursorIndex = index;\n      }\n    }\n  },\n  50);\n\n  public scrollToTop() {\n    const scrollBox = this.shadowRoot.querySelector('.options-scroll');\n    scrollBox.scrollTop = 0;\n  }\n\n  private handleKeyDown(evt: KeyboardEvent) {\n    if (this.internalFocusDisabled || (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 =\n          this.staticWidth > 0\n            ? this.staticWidth\n            : anchorBounds.width - 2 - this.marginHorizontal * 2;\n\n        if (this.anchorRight) {\n          this.left = anchorBounds.right - this.width;\n        }\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      'margin-left': `${this.marginHorizontal}px`,\n      'margin-top': `${vertical}px`\n    };\n\n    if (this.top) {\n      containerStyle['top'] = `${this.top}px`;\n    }\n\n    if (this.left) {\n      containerStyle['left'] = `${this.left}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      shadow: !this.hideShadow,\n      bordered: this.hideShadow\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 &&\n                !this.internalFocusDisabled\n                  ? 'focused'\n                  : ''}\"\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, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { CustomEventType } from '../interfaces';\nimport { RapidElement, EventHandler } from '../RapidElement';\nimport { styleMap } from 'lit-html/directives/style-map.js';\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-options-bg);\n        user-select: none;\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        opacity: 0;\n        border: 1px transparent;\n        z-index: 1000;\n      }\n\n      .shadow {\n        box-shadow: var(--options-shadow);\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        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        border-radius: var(--curvature);\n        display: block;\n        height: 100%;\n      }\n\n      :host([block]) .shadow {\n        box-shadow: var(--options-block-shadow);\n      }\n\n      .bordered {\n        border: 1px solid var(--color-widget-border) !important;\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        transform: scaleY(1) translateY(0);\n        border: 1px solid var(--color-widget-border);\n        opacity: 1;\n        z-index: 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 .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 var(--transition-speed) 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      .option:hover {\n        background: var(--option-hover-bg);\n        color: var(--option-hover-text);\n      }\n\n      .option.focused {\n        background: var(--color-selection);\n        color: var(--color-text-dark);\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, attribute: 'static-width' })\n  staticWidth: number;\n\n  @property({ type: Boolean, attribute: 'anchor-right' })\n  anchorRight: boolean;\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: Boolean })\n  internalFocusDisabled = false;\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({ type: Boolean })\n  hideShadow = false;\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 (!this.internalFocusDisabled && 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.internalFocusDisabled) {\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\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 (!this.internalFocusDisabled) {\n      if (index === -1) {\n        index = this.cursorIndex;\n      }\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    if (!this.internalFocusDisabled) {\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\n  private setCursor: (index: number) => void = throttle(function (\n    index: number\n  ) {\n    if (!this.internalFocusDisabled) {\n      if (index !== this.cursorIndex) {\n        this.cursorIndex = index;\n      }\n    }\n  },\n  50);\n\n  public scrollToTop() {\n    const scrollBox = this.shadowRoot.querySelector('.options-scroll');\n    scrollBox.scrollTop = 0;\n  }\n\n  private handleKeyDown(evt: KeyboardEvent) {\n    if (this.internalFocusDisabled || (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 =\n          this.staticWidth > 0\n            ? this.staticWidth\n            : anchorBounds.width - 2 - this.marginHorizontal * 2;\n\n        if (this.anchorRight) {\n          this.left = anchorBounds.right - this.width;\n        }\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      'margin-left': `${this.marginHorizontal}px`,\n      'margin-top': `${vertical}px`\n    };\n\n    if (this.top) {\n      containerStyle['top'] = `${this.top}px`;\n    }\n\n    if (this.left) {\n      containerStyle['left'] = `${this.left}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      shadow: !this.hideShadow,\n      bordered: this.hideShadow\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 &&\n                !this.internalFocusDisabled\n                  ? 'focused'\n                  : ''}\"\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"]}