@nyaruka/temba-components 0.35.3 → 0.36.1

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

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

package/out-tsc/src/date/TembaDate.js

@@ -1,6 +1,6 @@
 import { __decorate } from "tslib";
 import { css, html } from 'lit';
-import { property } from 'lit/decorators';
+import { property } from 'lit/decorators.js';
 import { RapidElement } from '../RapidElement';
 import { DateTime } from 'luxon';
 export const Display = {

package/out-tsc/src/date/TembaDate.js.map

@@ -1 +1 @@
-{"version":3,"file":"TembaDate.js","sourceRoot":"","sources":["../../../src/date/TembaDate.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators';\nimport { RapidElement } from '../RapidElement';\nimport { Store } from '../store/Store';\nimport { DateTime } from 'luxon';\n\nexport const Display = {\n  date: DateTime.DATE_SHORT,\n  datetime: DateTime.DATETIME_SHORT,\n  time: DateTime.TIME_SIMPLE,\n  timedate: 'timedate',\n  duration: 'duration',\n  relative: 'relative',\n  day: 'LLL d',\n};\n\nexport class TembaDate extends RapidElement {\n  static get styles() {\n    return css`\n      .date {\n        display: block;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }\n    `;\n  }\n\n  @property({ type: String })\n  value: string;\n\n  @property({ type: String })\n  display = 'date';\n\n  @property({ type: Object, attribute: false })\n  datetime: DateTime;\n\n  store: Store;\n\n  protected firstUpdated(\n    changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.firstUpdated(changedProperties);\n    if (changedProperties.has('value')) {\n      this.datetime = DateTime.fromISO(this.value);\n      this.store = document.querySelector('temba-store');\n    }\n  }\n\n  public connectedCallback(): void {\n    super.connectedCallback();\n  }\n\n  public render(): TemplateResult {\n    if (this.datetime && this.store) {\n      this.datetime.setLocale(this.store.getLocale());\n\n      let formatted = '';\n      if (this.display === Display.timedate) {\n        const hours = Math.abs(\n          this.datetime.diffNow().milliseconds / 1000 / 60 / 60\n        );\n        if (hours < 24) {\n          formatted = this.datetime.toLocaleString(Display.time);\n        } else if (hours < 24 * 365) {\n          formatted = this.datetime.toFormat(Display.day);\n        } else {\n          formatted = this.datetime.toLocaleString(Display.date);\n        }\n      } else if (this.display === Display.relative) {\n        const minutes = Math.abs(\n          this.datetime.diffNow().milliseconds / 1000 / 60\n        );\n        if (minutes < 1) {\n          return html`<div class=\"date\">just now</div>`;\n        }\n\n        formatted = this.store.getShortDuration(this.datetime);\n      } else if (this.display === Display.duration) {\n        const minutes = Math.abs(\n          this.datetime.diffNow().milliseconds / 1000 / 60\n        );\n        if (minutes < 1) {\n          return html`<div class=\"date\">just now</div>`;\n        }\n        formatted = this.store.getShortDuration(this.datetime);\n      } else if (this.display === Display.day) {\n        formatted = this.datetime.toLocaleString(Display.day);\n      } else {\n        formatted = this.datetime.toLocaleString(Display[this.display]);\n      }\n      return html`<div class=\"date\">${formatted}</div>`;\n    }\n  }\n}\n"]}
+{"version":3,"file":"TembaDate.js","sourceRoot":"","sources":["../../../src/date/TembaDate.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { RapidElement } from '../RapidElement';\nimport { Store } from '../store/Store';\nimport { DateTime } from 'luxon';\n\nexport const Display = {\n  date: DateTime.DATE_SHORT,\n  datetime: DateTime.DATETIME_SHORT,\n  time: DateTime.TIME_SIMPLE,\n  timedate: 'timedate',\n  duration: 'duration',\n  relative: 'relative',\n  day: 'LLL d',\n};\n\nexport class TembaDate extends RapidElement {\n  static get styles() {\n    return css`\n      .date {\n        display: block;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }\n    `;\n  }\n\n  @property({ type: String })\n  value: string;\n\n  @property({ type: String })\n  display = 'date';\n\n  @property({ type: Object, attribute: false })\n  datetime: DateTime;\n\n  store: Store;\n\n  protected firstUpdated(\n    changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.firstUpdated(changedProperties);\n    if (changedProperties.has('value')) {\n      this.datetime = DateTime.fromISO(this.value);\n      this.store = document.querySelector('temba-store');\n    }\n  }\n\n  public connectedCallback(): void {\n    super.connectedCallback();\n  }\n\n  public render(): TemplateResult {\n    if (this.datetime && this.store) {\n      this.datetime.setLocale(this.store.getLocale());\n\n      let formatted = '';\n      if (this.display === Display.timedate) {\n        const hours = Math.abs(\n          this.datetime.diffNow().milliseconds / 1000 / 60 / 60\n        );\n        if (hours < 24) {\n          formatted = this.datetime.toLocaleString(Display.time);\n        } else if (hours < 24 * 365) {\n          formatted = this.datetime.toFormat(Display.day);\n        } else {\n          formatted = this.datetime.toLocaleString(Display.date);\n        }\n      } else if (this.display === Display.relative) {\n        const minutes = Math.abs(\n          this.datetime.diffNow().milliseconds / 1000 / 60\n        );\n        if (minutes < 1) {\n          return html`<div class=\"date\">just now</div>`;\n        }\n\n        formatted = this.store.getShortDuration(this.datetime);\n      } else if (this.display === Display.duration) {\n        const minutes = Math.abs(\n          this.datetime.diffNow().milliseconds / 1000 / 60\n        );\n        if (minutes < 1) {\n          return html`<div class=\"date\">just now</div>`;\n        }\n        formatted = this.store.getShortDuration(this.datetime);\n      } else if (this.display === Display.day) {\n        formatted = this.datetime.toLocaleString(Display.day);\n      } else {\n        formatted = this.datetime.toLocaleString(Display[this.display]);\n      }\n      return html`<div class=\"date\">${formatted}</div>`;\n    }\n  }\n}\n"]}

package/out-tsc/src/datepicker/DatePicker.js

@@ -1,17 +1,10 @@
 import { __decorate } from "tslib";
 import { html, css } from 'lit';
-import { property } from 'lit/decorators';
+import { property } from 'lit/decorators.js';
 import { FormElement } from '../FormElement';
 import { getClasses } from '../utils';
 import { DateTime } from 'luxon';
 export default class DatePicker extends FormElement {
-    constructor() {
-        super();
-        this.timezone = '';
-        this.timezoneFriendly = '';
-        this.datetime = null;
-        this.time = false;
-    }
     static get styles() {
         return css `
       :host {
@@ -117,6 +110,13 @@ export default class DatePicker extends FormElement {
     serializeValue(value) {
         return value;
     }
+    constructor() {
+        super();
+        this.timezone = '';
+        this.timezoneFriendly = '';
+        this.datetime = null;
+        this.time = false;
+    }
     firstUpdated(changed) {
         if (changed.has('value')) {
             // default to the local browser zone

package/out-tsc/src/datepicker/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../src/datepicker/DatePicker.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css, PropertyValueMap } from 'lit';\nimport { property } from 'lit/decorators';\nimport { FormElement } from '../FormElement';\nimport { getClasses } from '../utils';\nimport { DateTime } from 'luxon';\n\nexport default class DatePicker extends FormElement {\n  static get styles() {\n    return css`\n      :host {\n        display: block;\n      }\n\n      .container {\n        border-radius: var(--curvature);\n        border: 1px solid var(--color-widget-border);\n        display: flex;\n        cursor: pointer;\n        box-shadow: var(--widget-box-shadow);\n      }\n\n      .input-wrapper {\n        padding: var(--temba-textinput-padding);\n        flex-grow: 1;\n      }\n\n      .tz {\n        margin-left: 0.5em;\n        font-size: 0.8em;\n        flex-direction: column;\n        align-self: stretch;\n        color: #888;\n        display: flex;\n        align-items: flex-start;\n        flex-direction: column;\n        padding: 0em 1em;\n        font-weight: 400;\n        cursor: pointer;\n        margin: auto;\n      }\n\n      .tz .label {\n        font-size: 0.8em;\n        color: #aaa;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n      }\n\n      .tz .zone {\n        white-space: nowrap;\n        text-overflow: ellipsis;\n      }\n\n      .tz-wrapper {\n        background: #efefef;\n        border-top-right-radius: var(--curvature);\n        border-bottom-right-radius: var(--curvature);\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n      }\n\n      .container:focus-within {\n        border-color: var(--color-focus);\n        background: var(--color-widget-bg-focused);\n        box-shadow: var(--widget-box-shadow-focused);\n      }\n\n      input {\n        color: var(--color-widget-text);\n        border: 0px;\n        font-family: var(--font-family);\n        font-weight: 300;\n        outline: none;\n        width: 100%;\n        font-size: 13px;\n        padding: 0px;\n        margin: 0px;\n        line-height: 1em;\n      }\n\n      input.unset {\n        color: #ddd;\n      }\n\n      input.unset:focus {\n        color: var(--color-widget-text);\n      }\n\n      input:focus {\n        outline: none;\n      }\n\n      ::-webkit-calendar-picker-indicator {\n        background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"15\" viewBox=\"0 0 24 24\"><path fill=\"%23bbbbbb\" d=\"M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z\"/></svg>');\n        cursor: pointer;\n        margin: 0;\n        padding: 0;\n      }\n\n      ::-webkit-calendar-picker-indicator:hover {\n        background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"15\" viewBox=\"0 0 24 24\"><path fill=\"%23777777\" d=\"M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z\"/></svg>');\n        cursor: pointer;\n        margin: 0;\n        padding: 0;\n      }\n    `;\n  }\n\n  @property({ type: String })\n  timezone = '';\n\n  @property({ type: String })\n  timezoneFriendly = '';\n\n  @property({ type: Object })\n  datetime = null;\n\n  @property({ type: Boolean })\n  time = false;\n\n  /** we just return the value since it should be a string */\n  public serializeValue(value: any): string {\n    return value;\n  }\n\n  public constructor() {\n    super();\n  }\n\n  protected firstUpdated(\n    changed: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    if (changed.has('value')) {\n      // default to the local browser zone\n      if (this.time) {\n        this.timezone =\n          this.timezone || Intl.DateTimeFormat().resolvedOptions().timeZone;\n        this.timezoneFriendly = this.timezone\n          .replace('_', ' ')\n          .replace('/', ', ');\n\n        if (this.value) {\n          // we fire a change event on blur\n          let datetime = DateTime.fromSQL(this.value).setZone(this.timezone);\n          // if we can't read it as a sql stamp, try iso\n          if (datetime.invalid) {\n            datetime = DateTime.fromISO(this.value).setZone(this.timezone);\n          }\n          this.datetime = datetime;\n          this.setValue(this.datetime.toUTC().toISO());\n        }\n      } else {\n        this.datetime = DateTime.fromSQL(this.value);\n        this.setValue(this.datetime.toISODate());\n      }\n    }\n  }\n\n  public updated(changed: Map<string, any>): void {\n    super.updated(changed);\n    if (changed.has('timezone') && this.time) {\n      this.timezone =\n        this.timezone || Intl.DateTimeFormat().resolvedOptions().timeZone;\n      this.timezoneFriendly = this.timezone\n        .replace('_', ' ')\n        .replace('/', ', ');\n      this.requestUpdate('value');\n    }\n  }\n\n  public handleChange(event) {\n    event.preventDefault();\n    event.stopPropagation();\n  }\n\n  public handleBlur(event) {\n    if (this.time) {\n      this.datetime = DateTime.fromISO(event.target.value, {\n        zone: this.timezone,\n      });\n      this.setValue(this.datetime.toUTC().toISO());\n    } else {\n      this.setValue(event.target.value);\n    }\n    this.fireEvent('change');\n  }\n\n  public handleClicked() {\n    this.shadowRoot.querySelector('input').focus();\n  }\n\n  public render(): TemplateResult {\n    const classes = getClasses({ unset: !this.value });\n\n    let dateWidgetValue = null;\n    if (this.time && this.datetime && !this.datetime.invalid) {\n      dateWidgetValue = this.datetime.toFormat(\"yyyy-LL-dd'T'HH:mm\");\n    } else if (!this.time) {\n      dateWidgetValue = this.value;\n    }\n\n    return html`\n      <temba-field\n        name=${this.name}\n        .label=\"${this.label}\"\n        .helpText=\"${this.helpText}\"\n        .errors=${this.errors}\n        .widgetOnly=${this.widgetOnly}\n        .hideLabel=${this.hideLabel}\n        .disabled=${this.disabled}\n      >\n        <div class=\"container\" @click=${this.handleClicked}>\n          <slot name=\"prefix\"></slot>\n          <div class=\"input-wrapper\">\n            <input\n              class=${classes}\n              name=${this.label}\n              value=${dateWidgetValue}\n              type=\"${this.time ? 'datetime-local' : 'date'}\"\n              @change=${this.handleChange}\n              @blur=${this.handleBlur}\n            />\n          </div>\n          ${this.time\n            ? html`\n                <div class=\"tz-wrapper\">\n                  <div class=\"tz\">\n                    <div class=\"label\">Time Zone</div>\n                    <div class=\"zone\">${this.timezoneFriendly}</div>\n                  </div>\n                </div>\n              `\n            : null}\n        </div>\n      </temba-field>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../src/datepicker/DatePicker.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css, PropertyValueMap } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { FormElement } from '../FormElement';\nimport { getClasses } from '../utils';\nimport { DateTime } from 'luxon';\n\nexport default class DatePicker extends FormElement {\n  static get styles() {\n    return css`\n      :host {\n        display: block;\n      }\n\n      .container {\n        border-radius: var(--curvature);\n        border: 1px solid var(--color-widget-border);\n        display: flex;\n        cursor: pointer;\n        box-shadow: var(--widget-box-shadow);\n      }\n\n      .input-wrapper {\n        padding: var(--temba-textinput-padding);\n        flex-grow: 1;\n      }\n\n      .tz {\n        margin-left: 0.5em;\n        font-size: 0.8em;\n        flex-direction: column;\n        align-self: stretch;\n        color: #888;\n        display: flex;\n        align-items: flex-start;\n        flex-direction: column;\n        padding: 0em 1em;\n        font-weight: 400;\n        cursor: pointer;\n        margin: auto;\n      }\n\n      .tz .label {\n        font-size: 0.8em;\n        color: #aaa;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n      }\n\n      .tz .zone {\n        white-space: nowrap;\n        text-overflow: ellipsis;\n      }\n\n      .tz-wrapper {\n        background: #efefef;\n        border-top-right-radius: var(--curvature);\n        border-bottom-right-radius: var(--curvature);\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n      }\n\n      .container:focus-within {\n        border-color: var(--color-focus);\n        background: var(--color-widget-bg-focused);\n        box-shadow: var(--widget-box-shadow-focused);\n      }\n\n      input {\n        color: var(--color-widget-text);\n        border: 0px;\n        font-family: var(--font-family);\n        font-weight: 300;\n        outline: none;\n        width: 100%;\n        font-size: 13px;\n        padding: 0px;\n        margin: 0px;\n        line-height: 1em;\n      }\n\n      input.unset {\n        color: #ddd;\n      }\n\n      input.unset:focus {\n        color: var(--color-widget-text);\n      }\n\n      input:focus {\n        outline: none;\n      }\n\n      ::-webkit-calendar-picker-indicator {\n        background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"15\" viewBox=\"0 0 24 24\"><path fill=\"%23bbbbbb\" d=\"M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z\"/></svg>');\n        cursor: pointer;\n        margin: 0;\n        padding: 0;\n      }\n\n      ::-webkit-calendar-picker-indicator:hover {\n        background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"15\" viewBox=\"0 0 24 24\"><path fill=\"%23777777\" d=\"M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z\"/></svg>');\n        cursor: pointer;\n        margin: 0;\n        padding: 0;\n      }\n    `;\n  }\n\n  @property({ type: String })\n  timezone = '';\n\n  @property({ type: String })\n  timezoneFriendly = '';\n\n  @property({ type: Object })\n  datetime = null;\n\n  @property({ type: Boolean })\n  time = false;\n\n  /** we just return the value since it should be a string */\n  public serializeValue(value: any): string {\n    return value;\n  }\n\n  public constructor() {\n    super();\n  }\n\n  protected firstUpdated(\n    changed: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    if (changed.has('value')) {\n      // default to the local browser zone\n      if (this.time) {\n        this.timezone =\n          this.timezone || Intl.DateTimeFormat().resolvedOptions().timeZone;\n        this.timezoneFriendly = this.timezone\n          .replace('_', ' ')\n          .replace('/', ', ');\n\n        if (this.value) {\n          // we fire a change event on blur\n          let datetime = DateTime.fromSQL(this.value).setZone(this.timezone);\n          // if we can't read it as a sql stamp, try iso\n          if (datetime.invalid) {\n            datetime = DateTime.fromISO(this.value).setZone(this.timezone);\n          }\n          this.datetime = datetime;\n          this.setValue(this.datetime.toUTC().toISO());\n        }\n      } else {\n        this.datetime = DateTime.fromSQL(this.value);\n        this.setValue(this.datetime.toISODate());\n      }\n    }\n  }\n\n  public updated(changed: Map<string, any>): void {\n    super.updated(changed);\n    if (changed.has('timezone') && this.time) {\n      this.timezone =\n        this.timezone || Intl.DateTimeFormat().resolvedOptions().timeZone;\n      this.timezoneFriendly = this.timezone\n        .replace('_', ' ')\n        .replace('/', ', ');\n      this.requestUpdate('value');\n    }\n  }\n\n  public handleChange(event) {\n    event.preventDefault();\n    event.stopPropagation();\n  }\n\n  public handleBlur(event) {\n    if (this.time) {\n      this.datetime = DateTime.fromISO(event.target.value, {\n        zone: this.timezone,\n      });\n      this.setValue(this.datetime.toUTC().toISO());\n    } else {\n      this.setValue(event.target.value);\n    }\n    this.fireEvent('change');\n  }\n\n  public handleClicked() {\n    this.shadowRoot.querySelector('input').focus();\n  }\n\n  public render(): TemplateResult {\n    const classes = getClasses({ unset: !this.value });\n\n    let dateWidgetValue = null;\n    if (this.time && this.datetime && !this.datetime.invalid) {\n      dateWidgetValue = this.datetime.toFormat(\"yyyy-LL-dd'T'HH:mm\");\n    } else if (!this.time) {\n      dateWidgetValue = this.value;\n    }\n\n    return html`\n      <temba-field\n        name=${this.name}\n        .label=\"${this.label}\"\n        .helpText=\"${this.helpText}\"\n        .errors=${this.errors}\n        .widgetOnly=${this.widgetOnly}\n        .hideLabel=${this.hideLabel}\n        .disabled=${this.disabled}\n      >\n        <div class=\"container\" @click=${this.handleClicked}>\n          <slot name=\"prefix\"></slot>\n          <div class=\"input-wrapper\">\n            <input\n              class=${classes}\n              name=${this.label}\n              value=${dateWidgetValue}\n              type=\"${this.time ? 'datetime-local' : 'date'}\"\n              @change=${this.handleChange}\n              @blur=${this.handleBlur}\n            />\n          </div>\n          ${this.time\n            ? html`\n                <div class=\"tz-wrapper\">\n                  <div class=\"tz\">\n                    <div class=\"label\">Time Zone</div>\n                    <div class=\"zone\">${this.timezoneFriendly}</div>\n                  </div>\n                </div>\n              `\n            : null}\n        </div>\n      </temba-field>\n    `;\n  }\n}\n"]}

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

@@ -1,20 +1,11 @@
 import { __decorate } from "tslib";
-import { property } from 'lit/decorators';
+import { property } from 'lit/decorators.js';
 import { html, css } from 'lit';
 import { RapidElement } from '../RapidElement';
 import { CustomEventType } from '../interfaces';
-import { styleMap } from 'lit-html/directives/style-map';
+import { styleMap } from 'lit-html/directives/style-map.js';
 import { getClasses } from '../utils';
 export class Dialog extends RapidElement {
-    constructor() {
-        super();
-        this.size = 'medium';
-        this.primaryButtonName = 'Ok';
-        this.cancelButtonName = 'Cancel';
-        this.width = null;
-        this.submittingName = 'Saving';
-        this.scrollOffset = 0;
-    }
     static get widths() {
         return {
             small: '400px',
@@ -153,6 +144,15 @@ export class Dialog extends RapidElement {
       }
     `;
     }
+    constructor() {
+        super();
+        this.size = 'medium';
+        this.primaryButtonName = 'Ok';
+        this.cancelButtonName = 'Cancel';
+        this.width = null;
+        this.submittingName = 'Saving';
+        this.scrollOffset = 0;
+    }
     updated(changedProperties) {
         if (changedProperties.has('open')) {
             const body = document.querySelector('body');

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

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

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

@@ -1,7 +1,7 @@
 import { __decorate } from "tslib";
 import { html, css } from 'lit';
-import { property } from 'lit/decorators';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html';
+import { property } from 'lit/decorators.js';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
 import { RapidElement } from '../RapidElement';
 import { getUrl, serialize, postUrl } from '../utils';
 import { CustomEventType } from '../interfaces';
@@ -18,9 +18,6 @@ export class Modax extends RapidElement {
     }
     static get styles() {
         return css `
-      :host {
-      }
-
       fieldset {
         border: none;
         margin: 0;
@@ -84,6 +81,7 @@ export class Modax extends RapidElement {
       }
     `;
     }
+    // private cancelToken: CancelTokenSource;
     handleSlotClicked() {
         this.open = true;
     }
@@ -114,17 +112,18 @@ export class Modax extends RapidElement {
     }
     updatePrimaryButton() {
         if (!this.noSubmit) {
-            window.setTimeout(() => {
+            this.updateComplete.then(() => {
                 const submitButton = this.shadowRoot.querySelector("input[type='submit']");
                 if (submitButton) {
                     this.primaryName = submitButton.value;
+                    this.cancelName = 'Cancel';
                 }
                 else {
                     this.primaryName = null;
                     this.cancelName = 'Ok';
                 }
                 this.submitting = false;
-            }, 0);
+            });
         }
     }
     setBody(body) {
@@ -148,7 +147,7 @@ export class Modax extends RapidElement {
             // for (let i = 0; i < scripts.length; i++) {
             const script = this.ownerDocument.createElement('script');
             const code = scripts[i].innerText;
-            if (scripts[i].src) {
+            if (scripts[i].src && scripts[i].src.indexOf("web-dev-server") === -1) {
                 script.src = scripts[i].src;
                 script.type = 'text/javascript';
                 script.async = true;
@@ -168,11 +167,11 @@ export class Modax extends RapidElement {
         if (!scriptOnly) {
             this.body = unsafeHTML(div.innerHTML);
         }
-        window.setTimeout(() => {
+        this.updateComplete.then(() => {
             for (const script of toAdd) {
                 scriptBlock.appendChild(script);
             }
-        }, 0);
+        });
         return !scriptOnly;
     }
     getHeaders() {
@@ -185,22 +184,22 @@ export class Modax extends RapidElement {
         // this.cancelToken = CancelToken.source();
         this.fetching = true;
         this.body = this.getLoading();
-        this.httpComplete = getUrl(this.endpoint, null, this.getHeaders()).then((response) => {
+        getUrl(this.endpoint, null, this.getHeaders()).then((response) => {
             this.setBody(response.body);
-            this.updatePrimaryButton();
             this.fetching = false;
-            window.setTimeout(() => {
+            this.updateComplete.then(() => {
+                this.updatePrimaryButton();
                 this.fireCustomEvent(CustomEventType.Loaded, {
                     body: this.getBody(),
                 });
-            }, 0);
+            });
         });
     }
     submit() {
         this.submitting = true;
         const form = this.shadowRoot.querySelector('form');
         const postData = form ? serialize(form) : {};
-        this.httpComplete = postUrl(this.endpoint, postData, this.getHeaders(), 'application/x-www-form-urlencoded')
+        postUrl(this.endpoint, postData, this.getHeaders(), 'application/x-www-form-urlencoded')
             .then((response) => {
             window.setTimeout(() => {
                 let redirect = response.headers.get('temba-success');
@@ -211,10 +210,10 @@ export class Modax extends RapidElement {
                 }
                 if (redirect) {
                     if (redirect === 'hide') {
-                        window.setTimeout(() => {
+                        this.updateComplete.then(() => {
                             this.open = false;
                             this.fireCustomEvent(CustomEventType.Submitted);
-                        }, 0);
+                        });
                     }
                     else {
                         this.fireCustomEvent(CustomEventType.Redirected, {

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

@@ -1 +1 @@
-{"version":3,"file":"Modax.js","sourceRoot":"","sources":["../../../src/dialog/Modax.ts"],"names":[],"mappings":";AAAA,OAAO,EAAkB,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAE7D,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAe,MAAM,UAAU,CAAC;AACnE,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAGhD,MAAM,OAAO,KAAM,SAAQ,YAAY;IAAvC;;QAuEE,WAAM,GAAG,EAAE,CAAC;QAMZ,SAAI,GAAG,KAAK,CAAC;QAGb,aAAQ,GAAG,KAAK,CAAC;QAkBjB,YAAO,GAAQ,EAAE,CAAC;QAGlB,SAAI,GAAQ,IAAI,CAAC,UAAU,EAAE,CAAC;QAG9B,aAAQ,GAAG,KAAK,CAAC;QAGjB,kBAAa,GAAG,KAAK,CAAC;IAkPxB,CAAC;IA5VC,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiET,CAAC;IACJ,CAAC;IA6CO,iBAAiB;QACvB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACnB,CAAC;IAEM,OAAO,CAAC,OAAyB;QACtC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QAEvB,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YACvB,IAAI,IAAI,CAAC,IAAI,EAAE;gBACb,IAAI,CAAC,SAAS,EAAE,CAAC;aAClB;iBAAM;gBACL,0EAA0E;gBAC1E,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,SAAS,EAAE;oBACrC,mDAAmD;oBACnD,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;wBACrB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;wBAC9B,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;oBAC1B,CAAC,EAAE,GAAG,CAAC,CAAC;iBACT;aACF;SACF;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YACnE,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,cAAc,CAAW,CAAC;YACvE,MAAM,CAAC,eAAe,EAAE,CAAC;SAC1B;IACH,CAAC;IAEO,UAAU;QAChB,OAAO,IAAI,CAAA,oDAAoD,CAAC;IAClE,CAAC;IAEO,mBAAmB;QACzB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;gBACrB,MAAM,YAAY,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAChD,sBAAsB,CAChB,CAAC;gBAET,IAAI,YAAY,EAAE;oBAChB,IAAI,CAAC,WAAW,GAAG,YAAY,CAAC,KAAK,CAAC;iBACvC;qBAAM;oBACL,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;oBACxB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;iBACxB;gBAED,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;YAC1B,CAAC,EAAE,CAAC,CAAC,CAAC;SACP;IACH,CAAC;IAEO,OAAO,CAAC,IAAY;QAC1B,2CAA2C;QAC3C,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,UAAU,CAAQ,CAAC;QACrE,KAAK,MAAM,KAAK,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxC,KAAK,CAAC,MAAM,EAAE,CAAC;SAChB;QAED,oCAAoC;QACpC,MAAM,GAAG,GAAG,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACpD,GAAG,CAAC,SAAS,GAAG,IAAI,CAAC;QACrB,MAAM,OAAO,GAAG,GAAG,CAAC,oBAAoB,CAAC,QAAQ,CAAC,CAAC;QAEnD,mEAAmE;QACnE,MAAM,KAAK,GAAG,GAAG,CAAC,sBAAsB,CAAC,QAAQ,CAAQ,CAAC;QAC1D,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;YACxB,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;SACrB;QAED,MAAM,KAAK,GAAQ,EAAE,CAAC;QACtB,kBAAkB;QAClB,KAAK,IAAI,CAAC,GAAG,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE;YAC5C,6CAA6C;YAC7C,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;YAC1D,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;YAElC,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE;gBAClB,MAAM,CAAC,GAAG,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;gBAC5B,MAAM,CAAC,IAAI,GAAG,iBAAiB,CAAC;gBAChC,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC;gBAEpB,yDAAyD;gBACzD,gEAAgE;gBAChE,MAAM,CAAC,MAAM,GAAG,cAAa,CAAC,CAAC;gBAC/B,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;aACpB;iBAAM,IAAI,IAAI,EAAE;gBACf,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC;gBAC5D,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;gBACnB,uCAAuC;aACxC;YACD,OAAO,CAAC,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC;SACrB;QAED,MAAM,UAAU,GAAG,CAAC,CAAC,GAAG,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;QAE1D,IAAI,CAAC,UAAU,EAAE;YACf,IAAI,CAAC,IAAI,GAAG,UAAU,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;SACvC;QAED,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;YACrB,KAAK,MAAM,MAAM,IAAI,KAAK,EAAE;gBAC1B,WAAW,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;aACjC;QACH,CAAC,EAAE,CAAC,CAAC,CAAC;QAEN,OAAO,CAAC,UAAU,CAAC;IACrB,CAAC;IAEM,UAAU;QACf,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;QAC7B,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;QACtB,OAAO,OAAO,CAAC;IACjB,CAAC;IAEO,SAAS;QACf,yCAAyC;QACzC,2CAA2C;QAC3C,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACrB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;QAC9B,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC,IAAI,CACrE,CAAC,QAAqB,EAAE,EAAE;YACxB,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;YAC5B,IAAI,CAAC,mBAAmB,EAAE,CAAC;YAC3B,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;YACtB,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;gBACrB,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,MAAM,EAAE;oBAC3C,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE;iBACrB,CAAC,CAAC;YACL,CAAC,EAAE,CAAC,CAAC,CAAC;QACR,CAAC,CACF,CAAC;IACJ,CAAC;IAEM,MAAM;QACX,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACvB,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QACnD,MAAM,QAAQ,GAAG,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAE7C,IAAI,CAAC,YAAY,GAAG,OAAO,CACzB,IAAI,CAAC,QAAQ,EACb,QAAQ,EACR,IAAI,CAAC,UAAU,EAAE,EACjB,mCAAmC,CACpC;aACE,IAAI,CAAC,CAAC,QAAqB,EAAE,EAAE;YAC9B,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;gBACrB,IAAI,QAAQ,GAAG,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;gBACrD,IACE,CAAC,QAAQ;oBACT,QAAQ,CAAC,GAAG;oBACZ,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,EAC1C;oBACA,QAAQ,GAAG,QAAQ,CAAC,GAAG,CAAC;iBACzB;gBAED,IAAI,QAAQ,EAAE;oBACZ,IAAI,QAAQ,KAAK,MAAM,EAAE;wBACvB,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;4BACrB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;4BAClB,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC;wBAClD,CAAC,EAAE,CAAC,CAAC,CAAC;qBACP;yBAAM;wBACL,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,UAAU,EAAE;4BAC/C,GAAG,EAAE,QAAQ;yBACd,CAAC,CAAC;wBACH,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;qBACnB;iBACF;qBAAM;oBACL,+CAA+C;oBAC/C,IAAI,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;wBAC/B,IAAI,CAAC,mBAAmB,EAAE,CAAC;qBAC5B;iBACF;YACH,CAAC,EAAE,IAAI,CAAC,CAAC;QACX,CAAC,CAAC;aACD,KAAK,CAAC,KAAK,CAAC,EAAE;YACb,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACvB,CAAC,CAAC,CAAC;IACP,CAAC;IAEO,iBAAiB,CAAC,GAAgB;QACxC,MAAM,MAAM,GAAG,GAAG,CAAC,MAAM,CAAC,MAAM,CAAC;QACjC,IAAI,CAAC,MAAM,CAAC,QAAQ,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE;YAC1C,IAAI,MAAM,CAAC,IAAI,KAAK,IAAI,CAAC,WAAW,EAAE;gBACpC,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;oBACvB,IAAI,CAAC,MAAM,EAAE,CAAC;iBACf;aACF;SACF;QAED,IAAI,MAAM,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,UAAU,IAAI,QAAQ,CAAC,EAAE;YACjD,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YAClB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;YACtB,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;SAC7B;IACH,CAAC;IAEO,kBAAkB;QACxB,6BAA6B;QAC7B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;IACxB,CAAC;IAEO,aAAa;QACnB,OAAO,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC;IAC/D,CAAC;IAEM,OAAO;QACZ,OAAO,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;IACtD,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;;iBAEE,IAAI,CAAC,MAAM;6BACC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW;4BACxC,IAAI,CAAC,UAAU,IAAI,QAAQ;gBACvC,IAAI,CAAC,IAAI;mBACN,IAAI,CAAC,QAAQ;sBACV,IAAI,CAAC,UAAU;uBACd,IAAI,CAAC,aAAa,EAAE;mBACxB,IAAI;oBACH,IAAI,CAAC,QAAQ;gCACD,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC;+BAClC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC;;gCAEjC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE;YACxD,IAAI,CAAC,IAAI;;;;yCAIoB,IAAI,CAAC,iBAAiB;;;KAG1D,CAAC;IACJ,CAAC;CACF;AAtRC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCACf;AAGZ;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACV;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mCAC9B;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uCACX;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yCACR;AAGpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACP;AAGpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCACR;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACV;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uCACV;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACT;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mCACG;AAG9B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uCACX;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CACN","sourcesContent":["import { TemplateResult, html, css } from 'lit';\nimport { property } from 'lit/decorators';\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html';\n\nimport { RapidElement } from '../RapidElement';\nimport { getUrl, serialize, postUrl, WebResponse } from '../utils';\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: 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"]}
+{"version":3,"file":"Modax.js","sourceRoot":"","sources":["../../../src/dialog/Modax.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html.js';\n\nimport { RapidElement } from '../RapidElement';\nimport { getUrl, serialize, postUrl, WebResponse } from '../utils';\nimport { CustomEventType } from '../interfaces';\nimport { Dialog } from './Dialog';\n\nexport class Modax extends RapidElement {\n  static get styles() {\n    return css`\n      fieldset {\n        border: none;\n        margin: 0;\n        padding: 0;\n      }\n\n      .control-group {\n        margin-bottom: var(--control-margin-bottom);\n      }\n\n      .form-actions {\n        display: none;\n      }\n\n      .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: 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  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  public updatePrimaryButton(): void {\n    if (!this.noSubmit) {\n      this.updateComplete.then(()=>{\n        const submitButton = this.shadowRoot.querySelector(\n          \"input[type='submit']\"\n        ) as any;\n\n        if (submitButton) {\n          this.primaryName = submitButton.value;\n          this.cancelName = 'Cancel';\n        } else {\n          this.primaryName = null;\n          this.cancelName = 'Ok';\n        }\n        this.submitting = false;\n      });\n    }\n  }\n\n  private setBody(body: string): boolean {\n    // remove any existing on our previous body\n    const scriptBlock = this.shadowRoot.querySelector('.scripts') as any;\n    for (const child of scriptBlock.children) {\n      child.remove();\n    }\n\n    // parse out any scripts in the body\n    const div = this.ownerDocument.createElement('div');\n    div.innerHTML = body;\n    const scripts = div.getElementsByTagName('script');\n\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 && scripts[i].src.indexOf(\"web-dev-server\") === -1) {\n        script.src = scripts[i].src;\n        script.type = 'text/javascript';\n        script.async = true;\n\n        // TODO: track and fire event once all scripts are loaded\n        // eslint-disable-next-line @typescript-eslint/no-empty-function\n        script.onload = function () {};\n        toAdd.push(script);\n      } else if (code) {\n        script.appendChild(this.ownerDocument.createTextNode(code));\n        toAdd.push(script);\n        // remove it from our current body text\n      }\n      scripts[i].remove();\n    }\n\n    const scriptOnly = !!div.querySelector('.success-script');\n\n    if (!scriptOnly) {\n      this.body = unsafeHTML(div.innerHTML);\n    }\n\n    this.updateComplete.then(()=>{\n      for (const script of toAdd) {\n        scriptBlock.appendChild(script);\n      }\n    });\n    return !scriptOnly;\n  }\n\n  public getHeaders(): any {\n    const headers = this.headers;\n    headers['X-PJAX'] = 1;\n    return headers;\n  }\n\n  private fetchForm() {\n    // const CancelToken = axios.CancelToken;\n    // this.cancelToken = CancelToken.source();\n    this.fetching = true;\n    this.body = this.getLoading();\n    getUrl(this.endpoint, null, this.getHeaders()).then(\n      (response: WebResponse) => {\n        this.setBody(response.body);        \n        this.fetching = false;\n        this.updateComplete.then(()=>{\n          this.updatePrimaryButton();\n          this.fireCustomEvent(CustomEventType.Loaded, {\n            body: this.getBody(),\n          });\n        });\n      }\n    );\n  }\n\n  public submit(): void {\n    this.submitting = true;\n    const form = this.shadowRoot.querySelector('form');\n    const postData = form ? serialize(form) : {};\n\n    postUrl(\n      this.endpoint,\n      postData,\n      this.getHeaders(),\n      'application/x-www-form-urlencoded'\n    )\n      .then((response: WebResponse) => {\n        window.setTimeout(() => {\n          let redirect = response.headers.get('temba-success');\n          if (\n            !redirect &&\n            response.url &&\n            response.url.indexOf(this.endpoint) === -1\n          ) {\n            redirect = response.url;\n          }\n\n          if (redirect) {\n            if (redirect === 'hide') {\n              this.updateComplete.then(()=>{\n                this.open = false;\n                this.fireCustomEvent(CustomEventType.Submitted);\n              });\n            } else {\n              this.fireCustomEvent(CustomEventType.Redirected, {\n                url: redirect,\n              });\n              this.open = false;\n            }\n          } else {\n            // if 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/dropdown/Dropdown.js

@@ -1,6 +1,6 @@
 import { __decorate } from "tslib";
 import { css, html } from 'lit';
-import { property } from 'lit/decorators';
+import { property } from 'lit/decorators.js';
 import { RapidElement } from '../RapidElement';
 export class Dropdown extends RapidElement {
     constructor() {

package/out-tsc/src/dropdown/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../src/dropdown/Dropdown.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators';\nimport { RapidElement } from '../RapidElement';\n\nexport class Dropdown extends RapidElement {\n  static get styles() {\n    return css`\n      .wrapper {\n        position: relative;\n      }\n\n      .toggle {\n        cursor: pointer;\n      }\n\n      .dropdown-wrapper {\n        position: relative;\n        overflow: auto;\n      }\n\n      .dropdown {\n        position: absolute;\n        opacity: 0;\n        z-index: 10;\n        pointer-events: none;\n        padding: 0;\n        border-radius: var(--curvature);\n        background: #fff;\n        transform: translateY(-1em);\n        transition: all calc(0.6 * var(--transition-speed)) linear;\n        user-select: none;\n        margin-top: 0px;\n        margin-left: 0px;\n        box-shadow: var(--dropdown-shadow);\n      }\n\n      .dropdown:focus {\n        outline: none;\n      }\n\n      .arrow {\n        content: '';\n        width: 0px;\n        height: 0;\n        top: -6px;\n        z-index: 10;\n        position: absolute;\n        border-left: 6px solid transparent;\n        border-right: 6px solid transparent;\n        border-bottom: 6px solid white;\n      }\n\n      .open .dropdown {\n        opacity: 1;\n        pointer-events: auto;\n        transform: translateY(0.5em);\n      }\n    `;\n  }\n\n  @property({ type: Boolean })\n  open = false;\n\n  @property({ type: String, attribute: 'drop_align' })\n  dropAlign = 'left';\n\n  @property({ type: Number })\n  arrowSize = 6;\n\n  @property({ type: Number })\n  arrowOffset = this.arrowSize * 2;\n\n  @property({ type: Number })\n  offsetX = 0;\n\n  @property({ type: Number })\n  offsetY = 0;\n\n  public firstUpdated(props: any) {\n    super.firstUpdated(props);\n\n    const arrow = this.shadowRoot.querySelector('.arrow') as HTMLDivElement;\n    arrow.style.borderWidth = this.arrowSize + 'px';\n    arrow.style.top = '-' + this.arrowSize + 'px';\n\n    if (this.arrowOffset < 0) {\n      arrow.style.right = Math.abs(this.arrowOffset) + 'px';\n    } else {\n      arrow.style.left = this.arrowOffset + 'px';\n    }\n\n    const dropdown = this.shadowRoot.querySelector(\n      '.dropdown'\n    ) as HTMLDivElement;\n\n    dropdown.addEventListener('blur', () => {\n      // we nest this to deal with clicking the toggle to close\n      // as we don't want it to toggle an immediate open, probably\n      // a better way to deal with this\n      window.setTimeout(() => {\n        this.open = false;\n        // blur our host element too\n        (this.shadowRoot.host as HTMLDivElement).blur();\n      }, 200);\n    });\n  }\n\n  public updated(changedProperties: Map<string, any>) {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('offsetY') || changedProperties.has('offsetX')) {\n      const dropdown = this.shadowRoot.querySelector(\n        '.dropdown'\n      ) as HTMLDivElement;\n\n      dropdown.style.marginTop = this.offsetY + 'px';\n      if (dropdown.offsetLeft + dropdown.clientWidth > window.outerWidth) {\n        dropdown.style.marginLeft =\n          '-' + (dropdown.clientWidth - this.clientWidth - this.offsetX) + 'px';\n      } else {\n        dropdown.style.marginLeft = this.offsetX + 'px';\n      }\n    }\n\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        this.classList.add('open');\n      } else {\n        this.classList.remove('open');\n      }\n    }\n  }\n\n  public handleToggleClicked(): void {\n    if (!this.open) {\n      this.open = true;\n\n      const dropdown = this.shadowRoot.querySelector(\n        '.dropdown'\n      ) as HTMLDivElement;\n      dropdown.focus();\n    }\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div class=\"wrapper ${this.open ? 'open' : ''}\">\n        <slot\n          name=\"toggle\"\n          class=\"toggle\"\n          @click=\"${this.handleToggleClicked}\"\n        ></slot>\n        <div\n          class=\"dropdown\"\n          tabindex=\"0\"\n          style=\"${this.dropAlign == 'right' ? 'right:0' : ''}\"\n        >\n          <div class=\"arrow\"></div>\n          <div class=\"dropdown-wrapper\">\n            <slot name=\"dropdown\" tabindex=\"1\"></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../src/dropdown/Dropdown.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,MAAM,OAAO,QAAS,SAAQ,YAAY;IAA1C;;QAyDE,SAAI,GAAG,KAAK,CAAC;QAGb,cAAS,GAAG,MAAM,CAAC;QAGnB,cAAS,GAAG,CAAC,CAAC;QAGd,gBAAW,GAAG,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;QAGjC,YAAO,GAAG,CAAC,CAAC;QAGZ,YAAO,GAAG,CAAC,CAAC;IAyFd,CAAC;IAhKC,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmDT,CAAC;IACJ,CAAC;IAoBM,YAAY,CAAC,KAAU;QAC5B,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QAE1B,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAmB,CAAC;QACxE,KAAK,CAAC,KAAK,CAAC,WAAW,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QAChD,KAAK,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QAE9C,IAAI,IAAI,CAAC,WAAW,GAAG,CAAC,EAAE;YACxB,KAAK,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;SACvD;aAAM;YACL,KAAK,CAAC,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;SAC5C;QAED,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAC5C,WAAW,CACM,CAAC;QAEpB,QAAQ,CAAC,gBAAgB,CAAC,MAAM,EAAE,GAAG,EAAE;YACrC,yDAAyD;YACzD,4DAA4D;YAC5D,iCAAiC;YACjC,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;gBACrB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;gBAClB,4BAA4B;gBAC3B,IAAI,CAAC,UAAU,CAAC,IAAuB,CAAC,IAAI,EAAE,CAAC;YAClD,CAAC,EAAE,GAAG,CAAC,CAAC;QACV,CAAC,CAAC,CAAC;IACL,CAAC;IAEM,OAAO,CAAC,iBAAmC;QAChD,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QAEjC,IAAI,iBAAiB,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,iBAAiB,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE;YACxE,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAC5C,WAAW,CACM,CAAC;YAEpB,QAAQ,CAAC,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YAC/C,IAAI,QAAQ,CAAC,UAAU,GAAG,QAAQ,CAAC,WAAW,GAAG,MAAM,CAAC,UAAU,EAAE;gBAClE,QAAQ,CAAC,KAAK,CAAC,UAAU;oBACvB,GAAG,GAAG,CAAC,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC;aACzE;iBAAM;gBACL,QAAQ,CAAC,KAAK,CAAC,UAAU,GAAG,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;aACjD;SACF;QAED,IAAI,iBAAiB,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YACjC,IAAI,IAAI,CAAC,IAAI,EAAE;gBACb,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;aAC5B;iBAAM;gBACL,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;aAC/B;SACF;IACH,CAAC;IAEM,mBAAmB;QACxB,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACd,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;YAEjB,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAC5C,WAAW,CACM,CAAC;YACpB,QAAQ,CAAC,KAAK,EAAE,CAAC;SAClB;IACH,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;4BACa,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE;;;;oBAI/B,IAAI,CAAC,mBAAmB;;;;;mBAKzB,IAAI,CAAC,SAAS,IAAI,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;;;;;;;;KAQxD,CAAC;IACJ,CAAC;CACF;AAxGC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;sCACf;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;2CACjC;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACb;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CACM;AAGjC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCACf;AAGZ;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCACf","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { RapidElement } from '../RapidElement';\n\nexport class Dropdown extends RapidElement {\n  static get styles() {\n    return css`\n      .wrapper {\n        position: relative;\n      }\n\n      .toggle {\n        cursor: pointer;\n      }\n\n      .dropdown-wrapper {\n        position: relative;\n        overflow: auto;\n      }\n\n      .dropdown {\n        position: absolute;\n        opacity: 0;\n        z-index: 10;\n        pointer-events: none;\n        padding: 0;\n        border-radius: var(--curvature);\n        background: #fff;\n        transform: translateY(-1em);\n        transition: all calc(0.6 * var(--transition-speed)) linear;\n        user-select: none;\n        margin-top: 0px;\n        margin-left: 0px;\n        box-shadow: var(--dropdown-shadow);\n      }\n\n      .dropdown:focus {\n        outline: none;\n      }\n\n      .arrow {\n        content: '';\n        width: 0px;\n        height: 0;\n        top: -6px;\n        z-index: 10;\n        position: absolute;\n        border-left: 6px solid transparent;\n        border-right: 6px solid transparent;\n        border-bottom: 6px solid white;\n      }\n\n      .open .dropdown {\n        opacity: 1;\n        pointer-events: auto;\n        transform: translateY(0.5em);\n      }\n    `;\n  }\n\n  @property({ type: Boolean })\n  open = false;\n\n  @property({ type: String, attribute: 'drop_align' })\n  dropAlign = 'left';\n\n  @property({ type: Number })\n  arrowSize = 6;\n\n  @property({ type: Number })\n  arrowOffset = this.arrowSize * 2;\n\n  @property({ type: Number })\n  offsetX = 0;\n\n  @property({ type: Number })\n  offsetY = 0;\n\n  public firstUpdated(props: any) {\n    super.firstUpdated(props);\n\n    const arrow = this.shadowRoot.querySelector('.arrow') as HTMLDivElement;\n    arrow.style.borderWidth = this.arrowSize + 'px';\n    arrow.style.top = '-' + this.arrowSize + 'px';\n\n    if (this.arrowOffset < 0) {\n      arrow.style.right = Math.abs(this.arrowOffset) + 'px';\n    } else {\n      arrow.style.left = this.arrowOffset + 'px';\n    }\n\n    const dropdown = this.shadowRoot.querySelector(\n      '.dropdown'\n    ) as HTMLDivElement;\n\n    dropdown.addEventListener('blur', () => {\n      // we nest this to deal with clicking the toggle to close\n      // as we don't want it to toggle an immediate open, probably\n      // a better way to deal with this\n      window.setTimeout(() => {\n        this.open = false;\n        // blur our host element too\n        (this.shadowRoot.host as HTMLDivElement).blur();\n      }, 200);\n    });\n  }\n\n  public updated(changedProperties: Map<string, any>) {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('offsetY') || changedProperties.has('offsetX')) {\n      const dropdown = this.shadowRoot.querySelector(\n        '.dropdown'\n      ) as HTMLDivElement;\n\n      dropdown.style.marginTop = this.offsetY + 'px';\n      if (dropdown.offsetLeft + dropdown.clientWidth > window.outerWidth) {\n        dropdown.style.marginLeft =\n          '-' + (dropdown.clientWidth - this.clientWidth - this.offsetX) + 'px';\n      } else {\n        dropdown.style.marginLeft = this.offsetX + 'px';\n      }\n    }\n\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        this.classList.add('open');\n      } else {\n        this.classList.remove('open');\n      }\n    }\n  }\n\n  public handleToggleClicked(): void {\n    if (!this.open) {\n      this.open = true;\n\n      const dropdown = this.shadowRoot.querySelector(\n        '.dropdown'\n      ) as HTMLDivElement;\n      dropdown.focus();\n    }\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div class=\"wrapper ${this.open ? 'open' : ''}\">\n        <slot\n          name=\"toggle\"\n          class=\"toggle\"\n          @click=\"${this.handleToggleClicked}\"\n        ></slot>\n        <div\n          class=\"dropdown\"\n          tabindex=\"0\"\n          style=\"${this.dropAlign == 'right' ? 'right:0' : ''}\"\n        >\n          <div class=\"arrow\"></div>\n          <div class=\"dropdown-wrapper\">\n            <slot name=\"dropdown\" tabindex=\"1\"></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}

package/out-tsc/src/fields/FieldManager.js

@@ -1,6 +1,6 @@
 import { __decorate } from "tslib";
 import { css, html } from 'lit';
-import { property } from 'lit/decorators';
+import { property } from 'lit/decorators.js';
 import { CustomEventType } from '../interfaces';
 import { StoreElement } from '../store/StoreElement';
 import { postJSON } from '../utils';