@nyaruka/temba-components 0.86.1 → 0.88.0

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

@@ -18,7 +18,7 @@ export class Dialog extends ResizeElement {
         return {
             small: '400px',
             medium: '600px',
-            large: '655px',
+            large: '655px'
         };
     }
     static get styles() {
@@ -205,13 +205,13 @@ export class Dialog extends ResizeElement {
             this.buttons.push({
                 name: this.cancelButtonName,
                 type: ButtonType.SECONDARY,
-                closes: true,
+                closes: true
             });
         }
         if (changes.has('primaryButtonName') && this.primaryButtonName) {
             this.buttons.push({
                 name: this.primaryButtonName,
-                type: ButtonType.PRIMARY,
+                type: ButtonType.PRIMARY
             });
         }
     }
@@ -324,7 +324,7 @@ export class Dialog extends ResizeElement {
         const dialogStyle = {
             width: this.width,
             minWidth: '250px',
-            maxWidth: '600px',
+            maxWidth: '600px'
         };
         if (!this.width) {
             dialogStyle['width'] = Dialog.widths[this.size];
@@ -352,7 +352,7 @@ export class Dialog extends ResizeElement {
             'dialog-loading': this.loading,
             'dialog-animation-end': this.animationEnd,
             'dialog-ready': this.ready,
-            mobile: this.isMobile(),
+            mobile: this.isMobile()
         })}"
       >
         <div style="position: absolute; width: 100%;">

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.js';\nimport { TemplateResult, html, css, PropertyValueMap } from 'lit';\nimport { Button } from '../button/Button';\nimport { CustomEventType } from '../interfaces';\nimport { styleMap } from 'lit-html/directives/style-map.js';\nimport { getClasses } from '../utils';\nimport { ResizeElement } from '../ResizeElement';\n\nexport enum ButtonType {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  DESTRUCTIVE = 'destructive',\n}\nexport class DialogButton {\n  name?: string;\n  id?: string;\n  details?: any;\n  type?: string;\n  closes?: boolean;\n}\n\nexport class Dialog extends ResizeElement {\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-grow {\n        flex-grow: 1;\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        height: 100vh;\n      }\n\n      .mobile .flex {\n        height: 100%;\n        position: fixed;\n      }\n\n      .mobile .grow-top {\n        flex-grow: 0;\n      }\n\n      .mobile .grow-bottom {\n        flex-grow: 0;\n      }\n\n      .grow-top {\n        flex-grow: 1;\n      }\n\n      .grow-bottom {\n        flex-grow: 3;\n      }\n\n      .bottom-padding {\n        padding: 3rem;\n      }\n\n      .dialog-mask {\n        width: 100%;\n        height: 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      .mobile.dialog-mask .dialog-container {\n        border-radius: 0px;\n      }\n\n      .dialog-mask .dialog-container {\n        position: relative;\n        transition: transform var(--transition-speed) var(--bounce),\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.9) translatey(2em);\n        background: white;\n        margin: auto;\n        display: flex;\n        flex-direction: column;\n      }\n\n      .dialog-body {\n        background: #fff;\n        overflow-y: auto;\n        flex-grow: 1;\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        transform: scale(1) !important;\n      }\n\n      .dialog-mask.dialog-ready .dialog-container {\n        transform: none;\n      }\n\n      .dialog-mask.dialog-loading .dialog-container {\n        margin-top: -10000px;\n      }\n\n      .header-text {\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        font-size: 20px;\n        padding: 12px 20px;\n        color: var(--header-text);\n        background: var(--header-bg);\n      }\n\n      .header-text .title {\n        flex-grow: 1;\n      }\n\n      .header-text .status {\n        font-size: 0.6em;\n        font-weight: bold;\n      }\n\n      .dialog-footer {\n        background: var(--color-primary-light);\n        padding: 10px;\n        display: flex;\n        flex-flow: row;\n        align-items: center;\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({ type: Array })\n  buttons: DialogButton[] = [];\n\n  @property({ attribute: false })\n  onButtonClicked: (button: Button) => void;\n\n  scrollOffset: any = 0;\n\n  public constructor() {\n    super();\n  }\n\n  protected firstUpdated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    if (changes.has('cancelButtonName') && this.cancelButtonName) {\n      this.buttons.push({\n        name: this.cancelButtonName,\n        type: ButtonType.SECONDARY,\n        closes: true,\n      });\n    }\n\n    if (changes.has('primaryButtonName') && this.primaryButtonName) {\n      this.buttons.push({\n        name: this.primaryButtonName,\n        type: ButtonType.PRIMARY,\n      });\n    }\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        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      } 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      let detail: DialogButton = {};\n      if (button.index >= 0 && button.index < this.buttons.length) {\n        detail = this.buttons[button.index];\n      }\n\n      this.fireCustomEvent(CustomEventType.ButtonClicked, { button, detail });\n      if (button.name === this.cancelButtonName || (detail && detail.closes)) {\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 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    if (this.isMobile()) {\n      dialogStyle['width'] = '100%';\n      dialogStyle['height'] = '100%';\n      delete dialogStyle['maxWidth'];\n    }\n\n    const header = this.header\n      ? html`\n          <div class=\"dialog-header\">\n            <div class=\"header-text\">\n              <div class=\"title\">${this.header}</div>\n            </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          mobile: this.isMobile(),\n        })}\"\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=\"grow-top\" style=\"${\n            this.isMobile() ? 'flex-grow:0' : ''\n          }\"></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              <div class=\"flex-grow\">\n                <slot name=\"gutter\"></slot>\n              </div>\n              ${this.buttons.map(\n                (button: DialogButton, index) => html`\n                  <temba-button\n                    name=${button.name}\n                    ?destructive=${button.type == 'primary' && this.destructive}\n                    ?primary=${button.type == 'primary' && !this.destructive}\n                    ?secondary=${button.type == 'secondary'}\n                    ?submitting=${this.submitting}\n                    ?disabled=${this.disabled && !button.closes}\n                    index=${index}\n                    @click=${this.handleClick}\n                  ></temba-button>\n                `\n              )}\n              </div>\n            </div>\n            <div class=\"grow-bottom\"></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, PropertyValueMap } from 'lit';\nimport { Button } from '../button/Button';\nimport { CustomEventType } from '../interfaces';\nimport { styleMap } from 'lit-html/directives/style-map.js';\nimport { getClasses } from '../utils';\nimport { ResizeElement } from '../ResizeElement';\n\nexport enum ButtonType {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  DESTRUCTIVE = 'destructive'\n}\nexport class DialogButton {\n  name?: string;\n  id?: string;\n  details?: any;\n  type?: string;\n  closes?: boolean;\n}\n\nexport class Dialog extends ResizeElement {\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-grow {\n        flex-grow: 1;\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        height: 100vh;\n      }\n\n      .mobile .flex {\n        height: 100%;\n        position: fixed;\n      }\n\n      .mobile .grow-top {\n        flex-grow: 0;\n      }\n\n      .mobile .grow-bottom {\n        flex-grow: 0;\n      }\n\n      .grow-top {\n        flex-grow: 1;\n      }\n\n      .grow-bottom {\n        flex-grow: 3;\n      }\n\n      .bottom-padding {\n        padding: 3rem;\n      }\n\n      .dialog-mask {\n        width: 100%;\n        height: 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      .mobile.dialog-mask .dialog-container {\n        border-radius: 0px;\n      }\n\n      .dialog-mask .dialog-container {\n        position: relative;\n        transition: transform var(--transition-speed) var(--bounce),\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.9) translatey(2em);\n        background: white;\n        margin: auto;\n        display: flex;\n        flex-direction: column;\n      }\n\n      .dialog-body {\n        background: #fff;\n        overflow-y: auto;\n        flex-grow: 1;\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        transform: scale(1) !important;\n      }\n\n      .dialog-mask.dialog-ready .dialog-container {\n        transform: none;\n      }\n\n      .dialog-mask.dialog-loading .dialog-container {\n        margin-top: -10000px;\n      }\n\n      .header-text {\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        font-size: 20px;\n        padding: 12px 20px;\n        color: var(--header-text);\n        background: var(--header-bg);\n      }\n\n      .header-text .title {\n        flex-grow: 1;\n      }\n\n      .header-text .status {\n        font-size: 0.6em;\n        font-weight: bold;\n      }\n\n      .dialog-footer {\n        background: var(--color-primary-light);\n        padding: 10px;\n        display: flex;\n        flex-flow: row;\n        align-items: center;\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({ type: Array })\n  buttons: DialogButton[] = [];\n\n  @property({ attribute: false })\n  onButtonClicked: (button: Button) => void;\n\n  scrollOffset: any = 0;\n\n  public constructor() {\n    super();\n  }\n\n  protected firstUpdated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    if (changes.has('cancelButtonName') && this.cancelButtonName) {\n      this.buttons.push({\n        name: this.cancelButtonName,\n        type: ButtonType.SECONDARY,\n        closes: true\n      });\n    }\n\n    if (changes.has('primaryButtonName') && this.primaryButtonName) {\n      this.buttons.push({\n        name: this.primaryButtonName,\n        type: ButtonType.PRIMARY\n      });\n    }\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        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      } 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      let detail: DialogButton = {};\n      if (button.index >= 0 && button.index < this.buttons.length) {\n        detail = this.buttons[button.index];\n      }\n\n      this.fireCustomEvent(CustomEventType.ButtonClicked, { button, detail });\n      if (button.name === this.cancelButtonName || (detail && detail.closes)) {\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 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    if (this.isMobile()) {\n      dialogStyle['width'] = '100%';\n      dialogStyle['height'] = '100%';\n      delete dialogStyle['maxWidth'];\n    }\n\n    const header = this.header\n      ? html`\n          <div class=\"dialog-header\">\n            <div class=\"header-text\">\n              <div class=\"title\">${this.header}</div>\n            </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          mobile: this.isMobile()\n        })}\"\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=\"grow-top\" style=\"${\n            this.isMobile() ? 'flex-grow:0' : ''\n          }\"></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              <div class=\"flex-grow\">\n                <slot name=\"gutter\"></slot>\n              </div>\n              ${this.buttons.map(\n                (button: DialogButton, index) => html`\n                  <temba-button\n                    name=${button.name}\n                    ?destructive=${button.type == 'primary' && this.destructive}\n                    ?primary=${button.type == 'primary' && !this.destructive}\n                    ?secondary=${button.type == 'secondary'}\n                    ?submitting=${this.submitting}\n                    ?disabled=${this.disabled && !button.closes}\n                    index=${index}\n                    @click=${this.handleClick}\n                  ></temba-button>\n                `\n              )}\n              </div>\n            </div>\n            <div class=\"grow-bottom\"></div>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}

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

@@ -160,12 +160,12 @@ export class Modax extends RapidElement {
                 if (submitButton) {
                     this.buttons = [
                         { type: ButtonType.SECONDARY, name: 'Cancel', closes: true },
-                        { type: ButtonType.PRIMARY, name: submitButton.value },
+                        { type: ButtonType.PRIMARY, name: submitButton.value }
                     ];
                 }
                 else {
                     this.buttons = [
-                        { type: ButtonType.SECONDARY, name: 'Ok', closes: true },
+                        { type: ButtonType.SECONDARY, name: 'Ok', closes: true }
                     ];
                 }
                 this.submitting = false;
@@ -236,7 +236,7 @@ export class Modax extends RapidElement {
                 this.updateComplete.then(() => {
                     this.updatePrimaryButton();
                     this.fireCustomEvent(CustomEventType.Loaded, {
-                        body: this.getBody(),
+                        body: this.getBody()
                     });
                 });
             }
@@ -247,7 +247,7 @@ export class Modax extends RapidElement {
         const form = this.shadowRoot.querySelector('form');
         let postData = form ? serialize(form) : '';
         if (extra) {
-            Object.keys(extra).forEach(key => {
+            Object.keys(extra).forEach((key) => {
                 postData +=
                     (postData.length > 1 ? '&' : '') +
                         encodeURIComponent(key) +
@@ -273,7 +273,7 @@ export class Modax extends RapidElement {
                     }
                     else {
                         this.fireCustomEvent(CustomEventType.Redirected, {
-                            url: redirect,
+                            url: redirect
                         });
                         this.open = false;
                     }
@@ -288,7 +288,7 @@ export class Modax extends RapidElement {
                 }
             }, 1000);
         })
-            .catch(error => {
+            .catch((error) => {
             console.error(error);
         });
     }
@@ -331,7 +331,7 @@ export class Modax extends RapidElement {
         if (wizard) {
             const completed = (wizard.getAttribute('data-completed') || '')
                 .split(',')
-                .filter(step => step.length > 0);
+                .filter((step) => step.length > 0);
             for (let i = 0; i < this.wizardStepCount; i++) {
                 wizardStepBalls.push(html `<div
             data-goto-step=${completed[i]}
@@ -339,7 +339,7 @@ export class Modax extends RapidElement {
             class="${getClasses({
                     'step-ball': true,
                     active: this.wizardStep - 1 === i,
-                    complete: i < completed.length,
+                    complete: i < completed.length
                 })}"
           ></div>`);
             }

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

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

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

@@ -209,7 +209,7 @@ export class Dropdown extends RapidElement {
             right: this.right,
             left: this.left,
             top: this.top,
-            bottom: this.bottom,
+            bottom: this.bottom
         })}"
           tabindex="0"
           @mousedown=${this.handleDropdownMouseDown}

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.js';\nimport { RapidElement } from '../RapidElement';\nimport { getClasses } from '../utils';\nimport { ContactStoreElement } from '../contacts/ContactStoreElement';\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: 2;\n        pointer-events: none;\n        padding: 0;\n        border-radius: var(--curvature);\n        background: #fff;\n        transform: translateY(1em) scale(0.9);\n        transition: all calc(0.8 * var(--transition-speed)) var(--bounce);\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) scale(1);\n      }\n\n      .mask {\n        position: absolute;\n        left: 0;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        background: rgba(0, 0, 0, 0.7);\n        opacity: 0;\n        transition: opacity var(--transition-speed) ease-in-out;\n        pointer-events: none;\n        z-index: 1;\n      }\n\n      .mask.open {\n        opacity: 1;\n        pointer-events: auto;\n      }\n\n      .right {\n        right: 0;\n      }\n    `;\n  }\n\n  @property({ type: Boolean })\n  open = false;\n\n  @property({ type: Boolean })\n  top = false;\n\n  @property({ type: Boolean })\n  bottom = false;\n\n  @property({ type: Boolean })\n  left = false;\n\n  @property({ type: Boolean })\n  right = false;\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  @property({ type: Boolean })\n  mask = false;\n\n  constructor() {\n    super();\n    this.ensureOnScreen = this.ensureOnScreen.bind(this);\n  }\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    const dropdown = this.shadowRoot.querySelector(\n      '.dropdown'\n    ) as HTMLDivElement;\n\n    if (changedProperties.has('offsetY') || changedProperties.has('offsetX')) {\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        if (this.right) {\n          dropdown.style.marginRight = this.offsetX + 'px';\n        } else {\n          dropdown.style.marginLeft = this.offsetX + 'px';\n        }\n      }\n    }\n\n    if (changedProperties.has('open')) {\n      // check right away if we are on the screen, and then again moments after render\n      window.setTimeout(this.ensureOnScreen, 0);\n      window.setTimeout(this.ensureOnScreen, 100);\n    }\n  }\n\n  public ensureOnScreen() {\n    const dropdown = this.shadowRoot.querySelector(\n      '.dropdown'\n    ) as HTMLDivElement;\n\n    if (dropdown) {\n      // dropdown will go off the screen, let's push it up\n      const toggle = this.querySelector('div[slot=\"toggle\"]');\n\n      if (!toggle) {\n        return;\n      }\n\n      if (dropdown.getBoundingClientRect().bottom > window.innerHeight - 100) {\n        if (this.bottom) {\n          dropdown.style.top = toggle.clientHeight + 'px';\n        } else {\n          dropdown.style.top = '';\n          dropdown.style.bottom = toggle.clientHeight + 'px';\n        }\n      } else if (dropdown.getBoundingClientRect().top < 0) {\n        if (this.bottom) {\n          dropdown.style.top = toggle.clientHeight + 'px';\n        } else {\n          dropdown.style.top = toggle.clientHeight + 'px';\n          dropdown.style.bottom = '';\n        }\n      }\n\n      if (dropdown.getBoundingClientRect().right > window.innerWidth) {\n        dropdown.style.left = '';\n        dropdown.style.right = '0px';\n      } else if (dropdown.getBoundingClientRect().left < 0) {\n        dropdown.style.left = 0 + 'px';\n        dropdown.style.right = '';\n      }\n    }\n  }\n\n  public handleToggleClicked(event: MouseEvent): void {\n    event.preventDefault();\n    event.stopPropagation();\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  private handleDropdownMouseDown(event: MouseEvent): void {\n    // block mouse down when clicking inside dropdown so we don't lose focus yet\n    event.preventDefault();\n    event.stopPropagation();\n  }\n\n  public render(): TemplateResult {\n    return html`\n      ${this.mask\n        ? html`<div class=\"mask  ${this.open ? 'open' : ''}\" />`\n        : null}\n\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=\"${getClasses({\n            dropdown: true,\n            right: this.right,\n            left: this.left,\n            top: this.top,\n            bottom: this.bottom,\n          })}\"\n          tabindex=\"0\"\n          @mousedown=${this.handleDropdownMouseDown}\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":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { RapidElement } from '../RapidElement';\nimport { getClasses } from '../utils';\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: 2;\n        pointer-events: none;\n        padding: 0;\n        border-radius: var(--curvature);\n        background: #fff;\n        transform: translateY(1em) scale(0.9);\n        transition: all calc(0.8 * var(--transition-speed)) var(--bounce);\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) scale(1);\n      }\n\n      .mask {\n        position: absolute;\n        left: 0;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        background: rgba(0, 0, 0, 0.7);\n        opacity: 0;\n        transition: opacity var(--transition-speed) ease-in-out;\n        pointer-events: none;\n        z-index: 1;\n      }\n\n      .mask.open {\n        opacity: 1;\n        pointer-events: auto;\n      }\n\n      .right {\n        right: 0;\n      }\n    `;\n  }\n\n  @property({ type: Boolean })\n  open = false;\n\n  @property({ type: Boolean })\n  top = false;\n\n  @property({ type: Boolean })\n  bottom = false;\n\n  @property({ type: Boolean })\n  left = false;\n\n  @property({ type: Boolean })\n  right = false;\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  @property({ type: Boolean })\n  mask = false;\n\n  constructor() {\n    super();\n    this.ensureOnScreen = this.ensureOnScreen.bind(this);\n  }\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    const dropdown = this.shadowRoot.querySelector(\n      '.dropdown'\n    ) as HTMLDivElement;\n\n    if (changedProperties.has('offsetY') || changedProperties.has('offsetX')) {\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        if (this.right) {\n          dropdown.style.marginRight = this.offsetX + 'px';\n        } else {\n          dropdown.style.marginLeft = this.offsetX + 'px';\n        }\n      }\n    }\n\n    if (changedProperties.has('open')) {\n      // check right away if we are on the screen, and then again moments after render\n      window.setTimeout(this.ensureOnScreen, 0);\n      window.setTimeout(this.ensureOnScreen, 100);\n    }\n  }\n\n  public ensureOnScreen() {\n    const dropdown = this.shadowRoot.querySelector(\n      '.dropdown'\n    ) as HTMLDivElement;\n\n    if (dropdown) {\n      // dropdown will go off the screen, let's push it up\n      const toggle = this.querySelector('div[slot=\"toggle\"]');\n\n      if (!toggle) {\n        return;\n      }\n\n      if (dropdown.getBoundingClientRect().bottom > window.innerHeight - 100) {\n        if (this.bottom) {\n          dropdown.style.top = toggle.clientHeight + 'px';\n        } else {\n          dropdown.style.top = '';\n          dropdown.style.bottom = toggle.clientHeight + 'px';\n        }\n      } else if (dropdown.getBoundingClientRect().top < 0) {\n        if (this.bottom) {\n          dropdown.style.top = toggle.clientHeight + 'px';\n        } else {\n          dropdown.style.top = toggle.clientHeight + 'px';\n          dropdown.style.bottom = '';\n        }\n      }\n\n      if (dropdown.getBoundingClientRect().right > window.innerWidth) {\n        dropdown.style.left = '';\n        dropdown.style.right = '0px';\n      } else if (dropdown.getBoundingClientRect().left < 0) {\n        dropdown.style.left = 0 + 'px';\n        dropdown.style.right = '';\n      }\n    }\n  }\n\n  public handleToggleClicked(event: MouseEvent): void {\n    event.preventDefault();\n    event.stopPropagation();\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  private handleDropdownMouseDown(event: MouseEvent): void {\n    // block mouse down when clicking inside dropdown so we don't lose focus yet\n    event.preventDefault();\n    event.stopPropagation();\n  }\n\n  public render(): TemplateResult {\n    return html`\n      ${this.mask\n        ? html`<div class=\"mask  ${this.open ? 'open' : ''}\" />`\n        : null}\n\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=\"${getClasses({\n            dropdown: true,\n            right: this.right,\n            left: this.left,\n            top: this.top,\n            bottom: this.bottom\n          })}\"\n          tabindex=\"0\"\n          @mousedown=${this.handleDropdownMouseDown}\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

@@ -11,7 +11,7 @@ const TYPE_NAMES = {
     datetime: 'Date & Time',
     state: 'State',
     ward: 'Ward',
-    district: 'District',
+    district: 'District'
 };
 const matches = (field, query) => {
     if (!query) {
@@ -132,7 +132,7 @@ export class FieldManager extends StoreElement {
         this.url = this.store.fieldsEndpoint;
     }
     filterFields() {
-        const filteredKeys = this.store.getFieldKeys().filter(key => {
+        const filteredKeys = this.store.getFieldKeys().filter((key) => {
             const field = this.store.getContactField(key);
             if (field.featured) {
                 return false;
@@ -146,7 +146,7 @@ export class FieldManager extends StoreElement {
                 .label.localeCompare(this.store.getContactField(b).label);
         });
         const featured = [];
-        this.store.getFeaturedFields().forEach(field => {
+        this.store.getFeaturedFields().forEach((field) => {
             if (matches(field, this.query)) {
                 featured.push(field);
             }
@@ -280,7 +280,7 @@ export class FieldManager extends StoreElement {
               ${this.query
                 ? html `
                     <div class="scroll-box">
-                      ${this.featuredFields.map(field => this.renderField(field))}
+                      ${this.featuredFields.map((field) => this.renderField(field))}
                     </div>
                   `
                 : html `
@@ -290,7 +290,7 @@ export class FieldManager extends StoreElement {
                       @temba-drag-start=${this.handleDragStart}
                       @temba-drag-stop=${this.handleDragStop}
                     >
-                      ${this.featuredFields.map(field => this.renderField(field))}
+                      ${this.featuredFields.map((field) => this.renderField(field))}
                     </temba-sortable-list>
                   `}
             </div>
@@ -303,7 +303,7 @@ export class FieldManager extends StoreElement {
           <div class="label">Everything Else</div>
         </div>
         <div class="scroll-box">
-          ${this.otherFieldKeys.map(field => this.renderField(this.store.getContactField(field)))}
+          ${this.otherFieldKeys.map((field) => this.renderField(this.store.getContactField(field)))}
         </div>
       </div>
     `;

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

@@ -1 +1 @@
-{"version":3,"file":"FieldManager.js","sourceRoot":"","sources":["../../../src/fields/FieldManager.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ContactField, CustomEventType } from '../interfaces';\n\nimport { SortableList } from '../list/SortableList';\nimport { StoreElement } from '../store/StoreElement';\nimport { TextInput } from '../textinput/TextInput';\nimport { postJSON } from '../utils';\n\nconst TYPE_NAMES = {\n  text: 'Text',\n  numeric: 'Number',\n  number: 'Number',\n  datetime: 'Date & Time',\n  state: 'State',\n  ward: 'Ward',\n  district: 'District',\n};\n\nconst matches = (field: ContactField, query: string): boolean => {\n  if (!query) {\n    return true;\n  }\n  const search = (\n    field.label +\n    field.key +\n    TYPE_NAMES[field.value_type]\n  ).toLowerCase();\n  if (search.toLowerCase().indexOf(query) > -1) {\n    return true;\n  }\n  return false;\n};\n\nexport class FieldManager extends StoreElement {\n  static get styles() {\n    return css`\n      :host {\n        display: flex;\n        flex-grow: 1;\n        flex-direction: column;\n        min-height: 0px;\n      }\n\n      .featured,\n      .other-fields {\n        background: #fff;\n        border-radius: var(--curvature);\n        box-shadow: var(--shadow);\n        margin-bottom: 1em;\n        display: flex;\n        flex-direction: column;\n      }\n\n      .featured {\n        max-height: 40%;\n      }\n\n      .other-fields {\n        flex-grow: 2;\n        min-height: 0px;\n        margin-bottom: 0px;\n      }\n\n      temba-textinput {\n        margin-bottom: 1em;\n      }\n\n      .scroll-box {\n        overflow-y: auto;\n        flex-grow: 1;\n        flex-direction: column;\n        display: flex;\n      }\n\n      .header temba-icon {\n        margin-right: 0.5em;\n      }\n\n      .label {\n        flex-grow: 1;\n      }\n\n      .header {\n        padding: 0.5em 1em;\n        display: flex;\n        align-items: flex-start;\n        border-bottom: 1px solid var(--color-widget-border);\n      }\n\n      .featured-field {\n        user-select: none;\n      }\n\n      temba-sortable-list {\n        padding: 0.5em 0em;\n        width: 100%;\n        overflow-y: auto;\n      }\n\n      .scroll-box {\n        padding: 0.5em 0em;\n      }\n\n      temba-icon[name='usages']:hover {\n        --icon-color: var(--color-link-primary);\n      }\n\n      .field:hover temba-icon[name='delete_small'] {\n        opacity: 1 !important;\n        cursor: pointer !important;\n        pointer-events: all !important;\n      }\n\n      temba-icon[name='delete_small']:hover {\n        --icon-color: var(--color-link-primary);\n      }\n\n      .field {\n        border: 1px solid transparent;\n        margin: 0 0.5em;\n        border-radius: var(--curvature);\n      }\n\n      .featured temba-sortable-list .field:hover {\n        cursor: move;\n        border-color: #e6e6e6;\n        background: #fcfcfc;\n      }\n    `;\n  }\n\n  @property({ type: String, attribute: 'priority-endpoint' })\n  priorityEndpoint: string;\n\n  @property({ type: Object, attribute: false })\n  featuredFields: ContactField[];\n\n  @property({ type: Object, attribute: false })\n  otherFieldKeys: string[] = [];\n\n  @property({ type: String })\n  draggingId: string;\n\n  @property({ type: String })\n  query = '';\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.firstUpdated(_changedProperties);\n    this.url = this.store.fieldsEndpoint;\n  }\n\n  private filterFields() {\n    const filteredKeys = this.store.getFieldKeys().filter(key => {\n      const field = this.store.getContactField(key);\n      if (field.featured) {\n        return false;\n      }\n      return matches(field, this.query);\n    });\n\n    // sort by the label instead of the key\n    filteredKeys.sort((a, b) => {\n      return this.store\n        .getContactField(a)\n        .label.localeCompare(this.store.getContactField(b).label);\n    });\n\n    const featured: ContactField[] = [];\n    this.store.getFeaturedFields().forEach(field => {\n      if (matches(field, this.query)) {\n        featured.push(field);\n      }\n    });\n\n    this.otherFieldKeys = filteredKeys;\n    this.featuredFields = featured;\n  }\n\n  protected updated(\n    properties: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.update(properties);\n    if (properties.has('data')) {\n      this.filterFields();\n    } else if (properties.has('query')) {\n      this.filterFields();\n    }\n  }\n\n  private handleSaveOrder(event) {\n    const list = event.currentTarget as SortableList;\n    postJSON(\n      this.priorityEndpoint,\n      list\n        .getIds()\n        .reverse()\n        .reduce((map, key, idx) => {\n          map[key] = idx;\n          return map;\n        }, {})\n    ).then(() => {\n      this.store.refreshFields();\n    });\n  }\n\n  private handleOrderChanged(event) {\n    const swapsies = event.detail;\n    const temp = this.featuredFields[swapsies.fromIdx];\n    this.featuredFields[swapsies.fromIdx] = this.featuredFields[swapsies.toIdx];\n    this.featuredFields[swapsies.toIdx] = temp;\n    this.requestUpdate('featuredFields');\n  }\n\n  private handleDragStart(event) {\n    this.draggingId = event.detail.id;\n  }\n\n  private handleDragStop() {\n    this.draggingId = null;\n  }\n\n  private handleFieldAction(event: MouseEvent) {\n    const ele = event.target as HTMLDivElement;\n    const key = ele.dataset.key;\n    const action = ele.dataset.action;\n    this.fireCustomEvent(CustomEventType.Selection, { key, action });\n  }\n\n  private handleSearch(event) {\n    this.query = (event.target.value || '').trim();\n  }\n\n  private hasUsages(field: ContactField): boolean {\n    return (\n      field.usages.campaign_events + field.usages.flows + field.usages.groups >\n      0\n    );\n  }\n\n  private renderField(field: ContactField) {\n    return html`\n      <div\n        class=\"field sortable\"\n        id=\"${field.key}\"\n        style=\"\n            display: flex; \n            flex-direction: row; \n            align-items: center;\n            padding: 0.25em 1em; \n            ${field.key === this.draggingId\n          ? 'background: var(--color-selection)'\n          : ''}\"\n      >\n        <div\n          style=\"display: flex; min-width: 200px; width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 2em\"\n        >\n          <span\n            @click=${this.handleFieldAction}\n            data-key=${field.key}\n            data-action=\"update\"\n            style=\"color: var(--color-link-primary); cursor:pointer;\"\n          >\n            ${field.label}\n          </span>\n          ${this.hasUsages(field)\n            ? html`\n                <temba-icon\n                  size=\"0.8\"\n                  style=\"color: #ccc; margin-left: 0.7em;\"\n                  name=\"usages\"\n                  data-key=${field.key}\n                  data-action=\"usages\"\n                  @click=${this.handleFieldAction}\n                  clickable\n                ></temba-icon>\n              `\n            : null}\n          <div class=\"flex-grow:1\"></div>\n        </div>\n        <div\n          style=\"flex-grow:1; font-family: Roboto Mono, monospace; font-size:0.8em;\"\n        >\n          @fields.${field.key}\n        </div>\n        <div>${TYPE_NAMES[field.value_type]}</div>\n        <temba-icon\n          style=\"pointer-events:none;color:#ccc;margin-left:0.3em;margin-right:-0.5em;opacity:0\"\n          name=\"delete_small\"\n          data-key=${field.key}\n          data-action=\"delete\"\n          @click=${this.handleFieldAction}\n        ></temba-icon>\n      </div>\n    `;\n  }\n\n  public render(): TemplateResult {\n    if (!this.featuredFields) {\n      return null;\n    }\n\n    return html`\n      <temba-textinput\n        id=\"search\"\n        placeholder=\"Search\"\n        @change=${this.handleSearch}\n        clearable\n        value=${this.query}\n      ></temba-textinput>\n\n      ${this.featuredFields.length > 0\n        ? html`\n            <div class=\"featured\">\n              <div class=\"header\">\n                <temba-icon name=\"featured\"></temba-icon>\n                <div class=\"label\">Featured</div>\n              </div>\n              ${this.query\n                ? html`\n                    <div class=\"scroll-box\">\n                      ${this.featuredFields.map(field =>\n                        this.renderField(field)\n                      )}\n                    </div>\n                  `\n                : html`\n                    <temba-sortable-list\n                      @change=${this.handleSaveOrder}\n                      @temba-order-changed=${this.handleOrderChanged}\n                      @temba-drag-start=${this.handleDragStart}\n                      @temba-drag-stop=${this.handleDragStop}\n                    >\n                      ${this.featuredFields.map(field =>\n                        this.renderField(field)\n                      )}\n                    </temba-sortable-list>\n                  `}\n            </div>\n          `\n        : null}\n\n      <div class=\"other-fields\">\n        <div class=\"header\">\n          <temba-icon name=\"fields\"></temba-icon>\n          <div class=\"label\">Everything Else</div>\n        </div>\n        <div class=\"scroll-box\">\n          ${this.otherFieldKeys.map(field =>\n            this.renderField(this.store.getContactField(field))\n          )}\n        </div>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"FieldManager.js","sourceRoot":"","sources":["../../../src/fields/FieldManager.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ContactField, CustomEventType } from '../interfaces';\n\nimport { SortableList } from '../list/SortableList';\nimport { StoreElement } from '../store/StoreElement';\nimport { postJSON } from '../utils';\n\nconst TYPE_NAMES = {\n  text: 'Text',\n  numeric: 'Number',\n  number: 'Number',\n  datetime: 'Date & Time',\n  state: 'State',\n  ward: 'Ward',\n  district: 'District'\n};\n\nconst matches = (field: ContactField, query: string): boolean => {\n  if (!query) {\n    return true;\n  }\n  const search = (\n    field.label +\n    field.key +\n    TYPE_NAMES[field.value_type]\n  ).toLowerCase();\n  if (search.toLowerCase().indexOf(query) > -1) {\n    return true;\n  }\n  return false;\n};\n\nexport class FieldManager extends StoreElement {\n  static get styles() {\n    return css`\n      :host {\n        display: flex;\n        flex-grow: 1;\n        flex-direction: column;\n        min-height: 0px;\n      }\n\n      .featured,\n      .other-fields {\n        background: #fff;\n        border-radius: var(--curvature);\n        box-shadow: var(--shadow);\n        margin-bottom: 1em;\n        display: flex;\n        flex-direction: column;\n      }\n\n      .featured {\n        max-height: 40%;\n      }\n\n      .other-fields {\n        flex-grow: 2;\n        min-height: 0px;\n        margin-bottom: 0px;\n      }\n\n      temba-textinput {\n        margin-bottom: 1em;\n      }\n\n      .scroll-box {\n        overflow-y: auto;\n        flex-grow: 1;\n        flex-direction: column;\n        display: flex;\n      }\n\n      .header temba-icon {\n        margin-right: 0.5em;\n      }\n\n      .label {\n        flex-grow: 1;\n      }\n\n      .header {\n        padding: 0.5em 1em;\n        display: flex;\n        align-items: flex-start;\n        border-bottom: 1px solid var(--color-widget-border);\n      }\n\n      .featured-field {\n        user-select: none;\n      }\n\n      temba-sortable-list {\n        padding: 0.5em 0em;\n        width: 100%;\n        overflow-y: auto;\n      }\n\n      .scroll-box {\n        padding: 0.5em 0em;\n      }\n\n      temba-icon[name='usages']:hover {\n        --icon-color: var(--color-link-primary);\n      }\n\n      .field:hover temba-icon[name='delete_small'] {\n        opacity: 1 !important;\n        cursor: pointer !important;\n        pointer-events: all !important;\n      }\n\n      temba-icon[name='delete_small']:hover {\n        --icon-color: var(--color-link-primary);\n      }\n\n      .field {\n        border: 1px solid transparent;\n        margin: 0 0.5em;\n        border-radius: var(--curvature);\n      }\n\n      .featured temba-sortable-list .field:hover {\n        cursor: move;\n        border-color: #e6e6e6;\n        background: #fcfcfc;\n      }\n    `;\n  }\n\n  @property({ type: String, attribute: 'priority-endpoint' })\n  priorityEndpoint: string;\n\n  @property({ type: Object, attribute: false })\n  featuredFields: ContactField[];\n\n  @property({ type: Object, attribute: false })\n  otherFieldKeys: string[] = [];\n\n  @property({ type: String })\n  draggingId: string;\n\n  @property({ type: String })\n  query = '';\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.firstUpdated(_changedProperties);\n    this.url = this.store.fieldsEndpoint;\n  }\n\n  private filterFields() {\n    const filteredKeys = this.store.getFieldKeys().filter((key) => {\n      const field = this.store.getContactField(key);\n      if (field.featured) {\n        return false;\n      }\n      return matches(field, this.query);\n    });\n\n    // sort by the label instead of the key\n    filteredKeys.sort((a, b) => {\n      return this.store\n        .getContactField(a)\n        .label.localeCompare(this.store.getContactField(b).label);\n    });\n\n    const featured: ContactField[] = [];\n    this.store.getFeaturedFields().forEach((field) => {\n      if (matches(field, this.query)) {\n        featured.push(field);\n      }\n    });\n\n    this.otherFieldKeys = filteredKeys;\n    this.featuredFields = featured;\n  }\n\n  protected updated(\n    properties: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.update(properties);\n    if (properties.has('data')) {\n      this.filterFields();\n    } else if (properties.has('query')) {\n      this.filterFields();\n    }\n  }\n\n  private handleSaveOrder(event) {\n    const list = event.currentTarget as SortableList;\n    postJSON(\n      this.priorityEndpoint,\n      list\n        .getIds()\n        .reverse()\n        .reduce((map, key, idx) => {\n          map[key] = idx;\n          return map;\n        }, {})\n    ).then(() => {\n      this.store.refreshFields();\n    });\n  }\n\n  private handleOrderChanged(event) {\n    const swapsies = event.detail;\n    const temp = this.featuredFields[swapsies.fromIdx];\n    this.featuredFields[swapsies.fromIdx] = this.featuredFields[swapsies.toIdx];\n    this.featuredFields[swapsies.toIdx] = temp;\n    this.requestUpdate('featuredFields');\n  }\n\n  private handleDragStart(event) {\n    this.draggingId = event.detail.id;\n  }\n\n  private handleDragStop() {\n    this.draggingId = null;\n  }\n\n  private handleFieldAction(event: MouseEvent) {\n    const ele = event.target as HTMLDivElement;\n    const key = ele.dataset.key;\n    const action = ele.dataset.action;\n    this.fireCustomEvent(CustomEventType.Selection, { key, action });\n  }\n\n  private handleSearch(event) {\n    this.query = (event.target.value || '').trim();\n  }\n\n  private hasUsages(field: ContactField): boolean {\n    return (\n      field.usages.campaign_events + field.usages.flows + field.usages.groups >\n      0\n    );\n  }\n\n  private renderField(field: ContactField) {\n    return html`\n      <div\n        class=\"field sortable\"\n        id=\"${field.key}\"\n        style=\"\n            display: flex; \n            flex-direction: row; \n            align-items: center;\n            padding: 0.25em 1em; \n            ${field.key === this.draggingId\n          ? 'background: var(--color-selection)'\n          : ''}\"\n      >\n        <div\n          style=\"display: flex; min-width: 200px; width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 2em\"\n        >\n          <span\n            @click=${this.handleFieldAction}\n            data-key=${field.key}\n            data-action=\"update\"\n            style=\"color: var(--color-link-primary); cursor:pointer;\"\n          >\n            ${field.label}\n          </span>\n          ${this.hasUsages(field)\n            ? html`\n                <temba-icon\n                  size=\"0.8\"\n                  style=\"color: #ccc; margin-left: 0.7em;\"\n                  name=\"usages\"\n                  data-key=${field.key}\n                  data-action=\"usages\"\n                  @click=${this.handleFieldAction}\n                  clickable\n                ></temba-icon>\n              `\n            : null}\n          <div class=\"flex-grow:1\"></div>\n        </div>\n        <div\n          style=\"flex-grow:1; font-family: Roboto Mono, monospace; font-size:0.8em;\"\n        >\n          @fields.${field.key}\n        </div>\n        <div>${TYPE_NAMES[field.value_type]}</div>\n        <temba-icon\n          style=\"pointer-events:none;color:#ccc;margin-left:0.3em;margin-right:-0.5em;opacity:0\"\n          name=\"delete_small\"\n          data-key=${field.key}\n          data-action=\"delete\"\n          @click=${this.handleFieldAction}\n        ></temba-icon>\n      </div>\n    `;\n  }\n\n  public render(): TemplateResult {\n    if (!this.featuredFields) {\n      return null;\n    }\n\n    return html`\n      <temba-textinput\n        id=\"search\"\n        placeholder=\"Search\"\n        @change=${this.handleSearch}\n        clearable\n        value=${this.query}\n      ></temba-textinput>\n\n      ${this.featuredFields.length > 0\n        ? html`\n            <div class=\"featured\">\n              <div class=\"header\">\n                <temba-icon name=\"featured\"></temba-icon>\n                <div class=\"label\">Featured</div>\n              </div>\n              ${this.query\n                ? html`\n                    <div class=\"scroll-box\">\n                      ${this.featuredFields.map((field) =>\n                        this.renderField(field)\n                      )}\n                    </div>\n                  `\n                : html`\n                    <temba-sortable-list\n                      @change=${this.handleSaveOrder}\n                      @temba-order-changed=${this.handleOrderChanged}\n                      @temba-drag-start=${this.handleDragStart}\n                      @temba-drag-stop=${this.handleDragStop}\n                    >\n                      ${this.featuredFields.map((field) =>\n                        this.renderField(field)\n                      )}\n                    </temba-sortable-list>\n                  `}\n            </div>\n          `\n        : null}\n\n      <div class=\"other-fields\">\n        <div class=\"header\">\n          <temba-icon name=\"fields\"></temba-icon>\n          <div class=\"label\">Everything Else</div>\n        </div>\n        <div class=\"scroll-box\">\n          ${this.otherFieldKeys.map((field) =>\n            this.renderField(this.store.getContactField(field))\n          )}\n        </div>\n      </div>\n    `;\n  }\n}\n"]}

package/out-tsc/src/imagepicker/ImagePicker.js

@@ -46,12 +46,12 @@ export class ImagePicker extends FormElement {
             viewport: {
                 width: 300,
                 height: 300,
-                type: this.shape,
+                type: this.shape
             },
             boundary: {
                 width: 400,
-                height: 400,
-            },
+                height: 400
+            }
         });
         this.croppie.bind({ url });
     }
@@ -63,7 +63,7 @@ export class ImagePicker extends FormElement {
             size: 'viewport',
             format: 'webp',
             quality: 1,
-            circle: false,
+            circle: false
         })
             .then(function (resp) {
             const blob = resp;

package/out-tsc/src/imagepicker/ImagePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImagePicker.js","sourceRoot":"","sources":["../../../src/imagepicker/ImagePicker.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-this-alias */\nimport { html, css, PropertyValueMap } from 'lit';\nimport { CroppieCSS } from './CroppieCSS';\nimport { property } from 'lit/decorators.js';\nimport { Icon } from '../vectoricon';\nimport { FormElement } from '../FormElement';\n\nexport class ImagePicker extends FormElement {\n  static styles = css`\n    ${CroppieCSS}\n\n    .croppie {\n      max-width: 400px;\n      border: 0px solid #ccc;\n      border-radius: 0.5em;\n      overflow: hidden;\n      background: #fff;\n      margin-top: -20%;\n      box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.1);\n    }\n\n    .croppie .controls {\n      display: flex;\n      align-items: center;\n      flex-direction: row;\n      justify-content: center;\n      position: absolute;\n      z-index: 1;\n      width: 400px;\n      margin-top: -42px;\n    }\n\n    .toggle {\n      height: 110px;\n      width: 110px;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .circle .toggle {\n      border-radius: 50%;\n    }\n\n    .toggle.set {\n      box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 7px 0px,\n        rgba(0, 0, 0, 0.2) 0px 1px 2px 0px, inset 0 0 0 5px rgba(0, 0, 0, 0.1);\n    }\n\n    .toggle.set:hover {\n      box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 7px 0px,\n        rgba(0, 0, 0, 0.2) 0px 1px 2px 0px, inset 0 0 0 5px rgba(0, 0, 0, 0.2);\n    }\n\n    .toggle temba-icon {\n      color: rgba(0, 0, 0, 0.2);\n      padding: 5px;\n    }\n\n    toggle:hover temba-icon {\n      color: rgba(0, 0, 0, 0.8);\n    }\n\n    .toggle.set temba-icon {\n      border-radius: 50%;\n      margin-right: -90%;\n      margin-bottom: -50%;\n      background: rgba(240, 240, 240, 1);\n      box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px 0px;\n    }\n\n    .toggle.set:hover temba-icon {\n      background: #fff;\n      color: var(--color-primary-dark);\n    }\n\n    .circle .toggle.set temba-icon {\n      margin-right: -70%;\n      margin-bottom: -70%;\n    }\n\n    .hidden {\n      display: none;\n    }\n\n    .controls temba-icon {\n      margin: 0em 0.75em;\n      background: rgba(255, 255, 255, 0.8);\n      border-radius: 50%;\n      padding: 6px;\n      transition: all 0.1s ease-in-out;\n    }\n\n    .controls {\n      pointer-events: none;\n      display: flex;\n    }\n\n    .controls temba-icon {\n      pointer-events: all;\n    }\n\n    .controls temba-icon.close {\n      color: rgba(0, 0, 0, 0.2);\n      background: rgba(255, 255, 255, 0.2);\n    }\n\n    .controls temba-icon.submit {\n      color: rgba(0, 0, 0, 0.2);\n      box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1);\n    }\n\n    .controls temba-icon:hover {\n      color: white;\n      cursor: pointer;\n      background: var(--color-primary-dark);\n    }\n  `;\n\n  @property({ type: String })\n  tempImage: string;\n\n  @property({ type: String })\n  url: string;\n\n  @property({ type: String })\n  shape = 'square';\n\n  @property({ type: Boolean, attribute: false })\n  showCroppie = false;\n\n  uploadReader = new FileReader();\n  croppie: any;\n\n  protected firstUpdated(\n    changed: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.firstUpdated(changed);\n    const picker = this;\n\n    this.uploadReader.onload = function () {\n      picker.launchCroppie(picker.uploadReader.result as any);\n    };\n  }\n\n  public updated(changed: Map<string, any>): void {\n    super.updated(changed);\n    if (changed.has('url')) {\n      this.setAttribute('url', this.url);\n    }\n  }\n\n  private closeCroppie() {\n    this.showCroppie = false;\n    const wrapper = this.shadowRoot.querySelector('.croppie .embed');\n    if (wrapper.firstChild) {\n      wrapper.removeChild(wrapper.firstChild);\n    }\n  }\n\n  private launchCroppie(url: string) {\n    const wrapper = this.shadowRoot.querySelector('.croppie .embed');\n    if (wrapper.firstChild) {\n      wrapper.removeChild(wrapper.firstChild);\n    }\n    this.showCroppie = true;\n    const ele = document.createElement('div');\n    wrapper.appendChild(ele);\n\n    const Croppie = (window as any).Croppie;\n    this.croppie = new Croppie(ele, {\n      enableExif: true,\n      viewport: {\n        width: 300,\n        height: 300,\n        type: this.shape,\n      },\n      boundary: {\n        width: 400,\n        height: 400,\n      },\n    });\n\n    this.croppie.bind({ url });\n  }\n\n  private saveResult() {\n    const picker = this;\n    this.croppie\n      .result({\n        type: 'blob',\n        size: 'viewport',\n        format: 'webp',\n        quality: 1,\n        circle: false,\n      })\n      .then(function (resp: any) {\n        const blob = resp;\n        picker.url = URL.createObjectURL(blob);\n\n        // const blob = dataURItoBlob(resp);\n        const fd = new FormData();\n        fd.append(picker.name, blob, 'filename.webp');\n\n        picker.value = fd;\n        picker.closeCroppie();\n      });\n  }\n\n  private handleToggleClicked() {\n    const fileInput = this.shadowRoot.querySelector('#file');\n    (fileInput as any).click();\n  }\n\n  private handleFileChanged(e: Event) {\n    const input = e.target as any;\n    if (input.files.length > 0) {\n      this.uploadReader.readAsDataURL(input.files[0]);\n    }\n    input.value = '';\n  }\n\n  protected render() {\n    return html`\n    <div class=\"wrapper ${this.shape} ${this.label ? 'label' : ''}\">\n      <temba-field\n        name=${this.name}\n        label=${this.label}\n        .helpText=${this.helpText}\n        .errors=${this.errors}\n        .widgetOnly=${this.widgetOnly}\n        .helpAlways=${true}\n        ?disabled=${this.disabled}\n      >\n        <input class='hidden' type=\"file\" accept=\"image/*\" capture=\"camera\" id=\"file\" name=\"file\" @change=${\n          this.handleFileChanged\n        }/>\n        <div class='toggle ${this.url ? 'set' : ''}  ${\n      this.showCroppie ? 'hidden' : ''\n    }' @click=${this.handleToggleClicked} style=\"background: ${\n      this.url\n        ? `url('${this.url}') center / contain no-repeat`\n        : 'rgba(0, 0, 0, 0.1)'\n    }\">\n          <temba-icon name=${Icon.upload_image} size=\"1.5\"></temba-icon>\n        </div>\n        \n        <temba-mask ?show=${this.showCroppie} class=\"${\n      this.showCroppie ? 'editing' : ''\n    }\">\n          <div class='croppie'>\n            <div class='embed'></div>\n            <div class='controls'>\n              <temba-icon class=\"close\" size=\"1\" name=${Icon.close} @click=${\n      this.closeCroppie\n    }></temba-icon>\n              <div style=\"flex-grow:1\"></div>\n              <temba-icon class=\"submit\" size=\"1\" name=${Icon.submit} @click=${\n      this.saveResult\n    }></temba-icon>\n            </div>\n        </temba-mask>\n      </temba-field>\n    </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"ImagePicker.js","sourceRoot":"","sources":["../../../src/imagepicker/ImagePicker.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-this-alias */\nimport { html, css, PropertyValueMap } from 'lit';\nimport { CroppieCSS } from './CroppieCSS';\nimport { property } from 'lit/decorators.js';\nimport { Icon } from '../vectoricon';\nimport { FormElement } from '../FormElement';\n\nexport class ImagePicker extends FormElement {\n  static styles = css`\n    ${CroppieCSS}\n\n    .croppie {\n      max-width: 400px;\n      border: 0px solid #ccc;\n      border-radius: 0.5em;\n      overflow: hidden;\n      background: #fff;\n      margin-top: -20%;\n      box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.1);\n    }\n\n    .croppie .controls {\n      display: flex;\n      align-items: center;\n      flex-direction: row;\n      justify-content: center;\n      position: absolute;\n      z-index: 1;\n      width: 400px;\n      margin-top: -42px;\n    }\n\n    .toggle {\n      height: 110px;\n      width: 110px;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .circle .toggle {\n      border-radius: 50%;\n    }\n\n    .toggle.set {\n      box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 7px 0px,\n        rgba(0, 0, 0, 0.2) 0px 1px 2px 0px, inset 0 0 0 5px rgba(0, 0, 0, 0.1);\n    }\n\n    .toggle.set:hover {\n      box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 7px 0px,\n        rgba(0, 0, 0, 0.2) 0px 1px 2px 0px, inset 0 0 0 5px rgba(0, 0, 0, 0.2);\n    }\n\n    .toggle temba-icon {\n      color: rgba(0, 0, 0, 0.2);\n      padding: 5px;\n    }\n\n    toggle:hover temba-icon {\n      color: rgba(0, 0, 0, 0.8);\n    }\n\n    .toggle.set temba-icon {\n      border-radius: 50%;\n      margin-right: -90%;\n      margin-bottom: -50%;\n      background: rgba(240, 240, 240, 1);\n      box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px 0px;\n    }\n\n    .toggle.set:hover temba-icon {\n      background: #fff;\n      color: var(--color-primary-dark);\n    }\n\n    .circle .toggle.set temba-icon {\n      margin-right: -70%;\n      margin-bottom: -70%;\n    }\n\n    .hidden {\n      display: none;\n    }\n\n    .controls temba-icon {\n      margin: 0em 0.75em;\n      background: rgba(255, 255, 255, 0.8);\n      border-radius: 50%;\n      padding: 6px;\n      transition: all 0.1s ease-in-out;\n    }\n\n    .controls {\n      pointer-events: none;\n      display: flex;\n    }\n\n    .controls temba-icon {\n      pointer-events: all;\n    }\n\n    .controls temba-icon.close {\n      color: rgba(0, 0, 0, 0.2);\n      background: rgba(255, 255, 255, 0.2);\n    }\n\n    .controls temba-icon.submit {\n      color: rgba(0, 0, 0, 0.2);\n      box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1);\n    }\n\n    .controls temba-icon:hover {\n      color: white;\n      cursor: pointer;\n      background: var(--color-primary-dark);\n    }\n  `;\n\n  @property({ type: String })\n  tempImage: string;\n\n  @property({ type: String })\n  url: string;\n\n  @property({ type: String })\n  shape = 'square';\n\n  @property({ type: Boolean, attribute: false })\n  showCroppie = false;\n\n  uploadReader = new FileReader();\n  croppie: any;\n\n  protected firstUpdated(\n    changed: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.firstUpdated(changed);\n    const picker = this;\n\n    this.uploadReader.onload = function () {\n      picker.launchCroppie(picker.uploadReader.result as any);\n    };\n  }\n\n  public updated(changed: Map<string, any>): void {\n    super.updated(changed);\n    if (changed.has('url')) {\n      this.setAttribute('url', this.url);\n    }\n  }\n\n  private closeCroppie() {\n    this.showCroppie = false;\n    const wrapper = this.shadowRoot.querySelector('.croppie .embed');\n    if (wrapper.firstChild) {\n      wrapper.removeChild(wrapper.firstChild);\n    }\n  }\n\n  private launchCroppie(url: string) {\n    const wrapper = this.shadowRoot.querySelector('.croppie .embed');\n    if (wrapper.firstChild) {\n      wrapper.removeChild(wrapper.firstChild);\n    }\n    this.showCroppie = true;\n    const ele = document.createElement('div');\n    wrapper.appendChild(ele);\n\n    const Croppie = (window as any).Croppie;\n    this.croppie = new Croppie(ele, {\n      enableExif: true,\n      viewport: {\n        width: 300,\n        height: 300,\n        type: this.shape\n      },\n      boundary: {\n        width: 400,\n        height: 400\n      }\n    });\n\n    this.croppie.bind({ url });\n  }\n\n  private saveResult() {\n    const picker = this;\n    this.croppie\n      .result({\n        type: 'blob',\n        size: 'viewport',\n        format: 'webp',\n        quality: 1,\n        circle: false\n      })\n      .then(function (resp: any) {\n        const blob = resp;\n        picker.url = URL.createObjectURL(blob);\n\n        // const blob = dataURItoBlob(resp);\n        const fd = new FormData();\n        fd.append(picker.name, blob, 'filename.webp');\n\n        picker.value = fd;\n        picker.closeCroppie();\n      });\n  }\n\n  private handleToggleClicked() {\n    const fileInput = this.shadowRoot.querySelector('#file');\n    (fileInput as any).click();\n  }\n\n  private handleFileChanged(e: Event) {\n    const input = e.target as any;\n    if (input.files.length > 0) {\n      this.uploadReader.readAsDataURL(input.files[0]);\n    }\n    input.value = '';\n  }\n\n  protected render() {\n    return html`\n    <div class=\"wrapper ${this.shape} ${this.label ? 'label' : ''}\">\n      <temba-field\n        name=${this.name}\n        label=${this.label}\n        .helpText=${this.helpText}\n        .errors=${this.errors}\n        .widgetOnly=${this.widgetOnly}\n        .helpAlways=${true}\n        ?disabled=${this.disabled}\n      >\n        <input class='hidden' type=\"file\" accept=\"image/*\" capture=\"camera\" id=\"file\" name=\"file\" @change=${\n          this.handleFileChanged\n        }/>\n        <div class='toggle ${this.url ? 'set' : ''}  ${\n      this.showCroppie ? 'hidden' : ''\n    }' @click=${this.handleToggleClicked} style=\"background: ${\n      this.url\n        ? `url('${this.url}') center / contain no-repeat`\n        : 'rgba(0, 0, 0, 0.1)'\n    }\">\n          <temba-icon name=${Icon.upload_image} size=\"1.5\"></temba-icon>\n        </div>\n        \n        <temba-mask ?show=${this.showCroppie} class=\"${\n      this.showCroppie ? 'editing' : ''\n    }\">\n          <div class='croppie'>\n            <div class='embed'></div>\n            <div class='controls'>\n              <temba-icon class=\"close\" size=\"1\" name=${Icon.close} @click=${\n      this.closeCroppie\n    }></temba-icon>\n              <div style=\"flex-grow:1\"></div>\n              <temba-icon class=\"submit\" size=\"1\" name=${Icon.submit} @click=${\n      this.saveResult\n    }></temba-icon>\n            </div>\n        </temba-mask>\n      </temba-field>\n    </div>\n    `;\n  }\n}\n"]}