@verdocs/web-sdk 5.0.72 → 5.0.73

package/dist/esm-es5/verdocs-field-attachment_13.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["verdocsFieldAttachmentCss","PaperclipIcon","AttachedIcon","VerdocsFieldAttachment","class_1","hostRef","_this","this","source","sourceid","fieldname","field","disabled","editable","moveable","done","xscale","yscale","pagenumber","showingProperties","dialogOpen","selectedFile","focused","handleUploadNext","e","console","log","detail","_a","attached","emit","handleUploadRemove","preventDefault","stopPropagation","deleted","fieldName","prototype","focusField","setTimeout","showSettingsPanel","settingsPanel","document","getElementById","concat","showPanel","hideSettingsPanel","hidePanel","handleShow","render","_b","_c","_d","_e","_f","_g","_h","Store","getField","index","_j","_k","required","_l","value","_m","label","_o","settings","backgroundColor","getRGBA","hasFile","h","Host","class","innerHTML","style","onClick","Fragment","id","transform","Math","floor","SettingsIcon","anchor","onClickAway","templateId","onClose","onDelete","onSettingsChanged","settingsChanged","helpText","existingFile","onNext","onRemove","onExit","verdocsFieldCheckboxCss","VerdocsFieldCheckbox","class_2","checked","htmlFor","name","type","verdocsFieldDateCss","VerdocsFieldDate","class_3","containerId","random","toString","substring","picker","show","componentDidLoad","AirDatepicker","locale","localeEn","isMobile","autoClose","onShow","onHide","onSelect","date","formattedDate","event","CustomEvent","hostEl","dispatchEvent","placeholder","formattedValue","format","Date","FORMAT_DATE","onFocus","onBlur","verdocsFieldDropdownCss","VerdocsFieldDropdown","class_4","selectEl","showPicker","handleChange","fieldChange","target","options","onChange","ref","el","map","option","selected","length","verdocsFieldInitialCss","VerdocsFieldInitial","class_5","initials","tempInitials","hideDialog","dialog","remove","handleAdopt","createElement","setAttribute","addEventListener","body","append","base64","src","alt","verdocsFieldRadioCss","RadioIconUnselected","RadioIconSelected","VerdocsFieldRadio","class_6","group","maxWidth","verdocsFieldSignatureCss","VerdocsFieldSignature","class_7","tempSignature","verdocsFieldTextareaCss","VerdocsFieldTextarea","class_8","endpoint","VerdocsEndpoint","getDefault","inputEl","focus","componentDidRender","interact","dynamicDrop","resizable","edges","top","bottom","left","right","listeners","start","handleResizeStart","bind","move","handleResize","end","handleResizeEnd","dataset","x","y","rect","width","height","parseFloat","deltaRect","Object","assign","split","translateX","translateY","round","updateField","then","catch","verdocsFieldTextboxCss","VerdocsFieldTextbox","class_9","multiline","modifiers","restrictSize","min","dX","dY","currentLeft","currentBottom","updatedField","__awaiter","getTemplate","template","sent","newTemplate","JSON","parse","stringify","fieldIndex","fields","findIndex","updateTemplate","_p","default","_q","maxlength","verdocsFieldTimestampCss","VerdocsFieldTimestamp","class_10","formatted","toISOString","FORMAT_TIMESTAMP","verdocsInitialDialogCss","VerdocsInitialDialog","fontLoaded","enteredInitials","mode","componentWillLoad","toUpperCase","ds","FontFace","load","font","fonts","add","redrawSignature","componentDidUpdate","canvasElement","canvasWidth","context","getContext","clearRect","fontSize","measureText","textAlign","textBaseline","fillText","handleNameChange","handleCancel","exit","data","toDataURL","next","key","onInput","display","variant","verdocsSignatureDialogCss","VerdocsSignatureDialog","enteredName","size","verdocsUploadDialogCss","TrashIcon","VerdocsUploadDialog","class_11","maxSize","draggingOver","confirmDelete","selectedFiles","errorMessage","handleDismiss","handleDone","handleDragOver","handleDragLeave","handleDrop","handleSetSelected","Array","from","dataTransfer","files","handleRemoveAttachment","newFiles","__spreadArray","splice","totalSize","reduce","acc","file","handleDeleteAttachment","handleSelectFile","fileInput","click","handleFileChange","marginTop","onDragOver","onDragLeave","onDrop","accept","heading","message","showCancel"],"sources":["src/components/fields/verdocs-field-attachment/verdocs-field-attachment.scss?tag=verdocs-field-attachment","src/components/fields/verdocs-field-attachment/verdocs-field-attachment.tsx","src/components/fields/verdocs-field-checkbox/verdocs-field-checkbox.scss?tag=verdocs-field-checkbox","src/components/fields/verdocs-field-checkbox/verdocs-field-checkbox.tsx","src/components/fields/verdocs-field-date/verdocs-field-date.scss?tag=verdocs-field-date","src/components/fields/verdocs-field-date/verdocs-field-date.tsx","src/components/fields/verdocs-field-dropdown/verdocs-field-dropdown.scss?tag=verdocs-field-dropdown","src/components/fields/verdocs-field-dropdown/verdocs-field-dropdown.tsx","src/components/fields/verdocs-field-initial/verdocs-field-initial.scss?tag=verdocs-field-initial","src/components/fields/verdocs-field-initial/verdocs-field-initial.tsx","src/components/fields/verdocs-field-radio/verdocs-field-radio.scss?tag=verdocs-field-radio","src/components/fields/verdocs-field-radio/verdocs-field-radio.tsx","src/components/fields/verdocs-field-signature/verdocs-field-signature.scss?tag=verdocs-field-signature","src/components/fields/verdocs-field-signature/verdocs-field-signature.tsx","src/components/fields/verdocs-field-textarea/verdocs-field-textarea.scss?tag=verdocs-field-textarea","src/components/fields/verdocs-field-textarea/verdocs-field-textarea.tsx","src/components/fields/verdocs-field-textbox/verdocs-field-textbox.scss?tag=verdocs-field-textbox","src/components/fields/verdocs-field-textbox/verdocs-field-textbox.tsx","src/components/fields/verdocs-field-timestamp/verdocs-field-timestamp.scss?tag=verdocs-field-timestamp","src/components/fields/verdocs-field-timestamp/verdocs-field-timestamp.tsx","src/components/dialogs/verdocs-initial-dialog/verdocs-initial-dialog.scss?tag=verdocs-initial-dialog","src/components/dialogs/verdocs-initial-dialog/verdocs-initial-dialog.tsx","src/components/dialogs/verdocs-signature-dialog/verdocs-signature-dialog.scss?tag=verdocs-signature-dialog","src/components/dialogs/verdocs-signature-dialog/verdocs-signature-dialog.tsx","src/components/dialogs/verdocs-upload-dialog/verdocs-upload-dialog.scss?tag=verdocs-upload-dialog","src/components/dialogs/verdocs-upload-dialog/verdocs-upload-dialog.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-attachment {\n  font-family: $verdocs-primary-font;\n  box-sizing: border-box;\n  width: 24px;\n  height: 24px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  scroll-margin: 20px 0;\n  background-color: transparent;\n  transform-origin: bottom left;\n\n  &.focused {\n    animation: verdocs-field-pulse 0.4s 1;\n  }\n\n  label {\n    top: -14px;\n    left: -1px;\n    height: 14px;\n    color: white;\n    padding: 0 4px;\n    font-size: 9px;\n    line-height: 13px;\n    position: absolute;\n    background: #4a4a99;\n    border-top-left-radius: 2px;\n    border-top-right-radius: 2px;\n  }\n\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n\n  &.disabled svg {\n    opacity: 0.5;\n\n    span {\n      cursor: inherit;\n    }\n  }\n\n  .attach {\n    // This is needed to bring down the cursor from the parent element, which is where interactjs applies it\n    cursor: inherit;\n    width: 24px;\n    height: 24px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  &.required {\n    .attach {\n      border: 1px solid $verdocs-red-1;\n    }\n  }\n\n  verdocs-button-panel {\n    top: 1px;\n    left: -19px;\n    opacity: 0.5;\n    z-index: 1000;\n    cursor: pointer;\n    position: absolute;\n    transform: scale(0.6);\n\n    &[data-active],\n    &:hover {\n      opacity: 1;\n    }\n\n    .icon {\n      svg {\n        fill: #333333;\n      }\n\n      &:hover {\n        svg {\n          fill: #000000;\n        }\n      }\n    }\n  }\n\n  .settings-icon {\n    position: absolute;\n    top: -3px;\n    left: -20px;\n    display: inline-block;\n    cursor: pointer;\n    opacity: 0.3;\n\n    svg {\n      fill: $border-color;\n    }\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n}\n\n@keyframes verdocs-field-pulse {\n  0% {\n    background-color: rgba(0, 0, 0, 0.35);\n  }\n  50% {\n    background-color: rgba(0, 0, 0, 0);\n  }\n  100% {\n    background-color: rgba(0, 0, 0, 0.35);\n  }\n}\n","import {ITemplateField, getRGBA, IEnvelopeField} from '@verdocs/js-sdk';\nimport {Component, h, Host, Prop, Method, Event, EventEmitter, State, Fragment, Element} from '@stencil/core';\nimport {SettingsIcon} from '../../../utils/Icons';\nimport {Store} from '../../../utils/Datastore';\n\nexport interface ISelectedFile {\n  lastModified: number;\n  size: number;\n  type: string;\n  name: string;\n  data: string;\n}\n\nconst PaperclipIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13\" /></svg>`;\n\nconst AttachedIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#339933\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-file-check\"><path d=\"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z\"/><path d=\"M14 2v4a2 2 0 0 0 2 2h4\"/><path d=\"m9 15 2 2 4-4\"/></svg>`;\n\n/**\n * Displays an attachment field.\n */\n@Component({\n  tag: 'verdocs-field-attachment',\n  styleUrl: 'verdocs-field-attachment.scss',\n  shadow: false,\n})\nexport class VerdocsFieldAttachment {\n  @Element() el: HTMLElement;\n\n  /**\n   * Fields may be attached to templates or envelopes, but only template fields may be edited.\n   */\n  @Prop({reflect: true}) source: 'template' | 'envelope' = 'template';\n\n  /**\n   * The source template or envelope ID the field is found in.\n   */\n  @Prop({reflect: true}) sourceid: string = '';\n\n  /**\n   * The name of the field to display.\n   */\n  @Prop({reflect: true}) fieldname: string = '';\n\n  /**\n   * Override the field's settings. This is intended to be used during signing when fields are being\n   * mutated.\n   */\n  @Prop() field: IEnvelopeField | null | undefined = null;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop({reflect: true}) disabled?: boolean = false;\n\n  /**\n   * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n   * changed, so it should typically only be enabled in the Builder.\n   */\n  @Prop({reflect: true}) editable?: boolean = false;\n\n  /**\n   * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n   */\n  @Prop({reflect: true}) moveable?: boolean = false;\n\n  /**\n   * If set, the field is considered \"done\" and is drawn in a display-final-value state.\n   */\n  @Prop({reflect: true}) done?: boolean = false;\n\n  /**\n   * If set, the field will be be scaled horizontally by this factor.\n   */\n  @Prop({reflect: true}) xscale?: number = 1;\n\n  /**\n   * If set, the field will be be scaled vertically by this factor.\n   */\n  @Prop({reflect: true}) yscale?: number = 1;\n\n  /**\n   * The page the field is on\n   */\n  @Prop({reflect: true}) pagenumber?: number = 1;\n\n  /**\n   * Event fired when the field's settings are changed.\n   */\n  @Event({composed: true}) settingsChanged: EventEmitter<{fieldName: string; field: ITemplateField}>;\n\n  /**\n   * Event fired when a file is attached by the signer.\n   */\n  @Event({composed: true}) attached: EventEmitter<ISelectedFile>;\n\n  /**\n   * Event fired when the field is deleted. Note that this is for the FIELD (e.g. in\n   * Build) not for any attachments (during signing).\n   */\n  @Event({composed: true}) deleted: EventEmitter<{fieldName: string}>;\n\n  @State() showingProperties?: boolean = false;\n  @State() dialogOpen?: boolean = false;\n  @State() selectedFile?: ISelectedFile | null = null;\n  @State() focused = false;\n\n  @Method()\n  async focusField() {\n    // Our input field is fake, so we fake the flash too\n    this.focused = true;\n    this.dialogOpen = true;\n    setTimeout(() => {\n      this.focused = false;\n    }, 500);\n  }\n\n  @Method()\n  async showSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.showPanel) {\n      settingsPanel.showPanel();\n    }\n  }\n\n  @Method()\n  async hideSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.hidePanel) {\n      settingsPanel.hidePanel();\n    }\n  }\n\n  handleShow() {\n    this.dialogOpen = true;\n  }\n\n  handleUploadNext = (e: any) => {\n    console.log('Upload next', e);\n    this.dialogOpen = false;\n    this.selectedFile = e.detail[0];\n    this.attached?.emit(e.detail[0]);\n  };\n\n  handleUploadRemove = (e: any) => {\n    e.preventDefault();\n    e.stopPropagation();\n    this.dialogOpen = false;\n    this.selectedFile = null;\n    this.deleted?.emit({fieldName: this.fieldname});\n  };\n\n  render() {\n    const {source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1} = this;\n\n    const {index, field} = Store.getField(source, sourceid, fieldname, this.field);\n    const {required = false, value = '', label = '', settings = {}} = field || {};\n    const backgroundColor = getRGBA(index);\n\n    const hasFile = value || !!this.selectedFile;\n\n    if (done) {\n      return (\n        <Host class={{done}}>\n          <div class=\"attach\" innerHTML={hasFile ? AttachedIcon : PaperclipIcon} />\n        </Host>\n      );\n    }\n\n    return (\n      <Host class={{required, disabled, done, focused}} style={{backgroundColor}}>\n        {label && <label>{label}</label>}\n\n        <div class=\"attach\" innerHTML={hasFile ? AttachedIcon : PaperclipIcon} onClick={() => !disabled && this.handleShow()} />\n\n        {editable && (\n          <Fragment>\n            <div\n              id={`verdocs-settings-panel-trigger-${fieldname}`}\n              style={{transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})`}}\n              class=\"settings-icon\"\n              innerHTML={SettingsIcon}\n              onClick={(e: any) => {\n                e.stopPropagation();\n                this.showingProperties = !this.showingProperties;\n              }}\n            />\n\n            {this.showingProperties && (\n              <verdocs-portal anchor={`verdocs-settings-panel-trigger-${fieldname}`} onClickAway={() => (this.showingProperties = false)}>\n                <verdocs-template-field-properties\n                  templateId={sourceid}\n                  fieldName={fieldname}\n                  onClose={() => (this.showingProperties = false)}\n                  onDelete={() => {\n                    this.deleted?.emit({fieldName: fieldname});\n                    return this.hideSettingsPanel();\n                  }}\n                  onSettingsChanged={e => {\n                    this.settingsChanged?.emit(e.detail);\n                    return this.hideSettingsPanel();\n                  }}\n                  helpText={'Attachments allow the user to attach their own documents (e.g. resumes or disclosures) to a signing flow.'}\n                />\n              </verdocs-portal>\n            )}\n          </Fragment>\n        )}\n\n        {this.dialogOpen && (\n          <verdocs-portal>\n            <verdocs-upload-dialog\n              existingFile={settings}\n              onNext={e => this.handleUploadNext(e)}\n              onRemove={e => this.handleUploadRemove(e)}\n              onExit={() => (this.dialogOpen = false)}\n            />\n          </verdocs-portal>\n        )}\n      </Host>\n    );\n  }\n}\n","@import '../../../theme.scss';\n\n// See https://www.kallmanation.com/styling-a-checkbox-with-only-css\nverdocs-field-checkbox {\n  padding: 0;\n  width: 16px;\n  height: 16px;\n  display: block;\n  scroll-margin: 20px 0;\n  box-sizing: border-box;\n  transform-origin: bottom left;\n  font-family: $verdocs-primary-font;\n\n  // To avoid conflicting with the use of a label for the checkbox itself\n  div.label {\n    top: -14px;\n    left: -1px;\n    height: 14px;\n    color: white;\n    padding: 0 4px;\n    font-size: 9px;\n    line-height: 13px;\n    position: absolute;\n    background: #4a4a99;\n    border-top-left-radius: 2px;\n    border-top-right-radius: 2px;\n  }\n\n  label {\n    // This is needed to bring down the cursor from the parent element, which is where interactjs applies it\n    cursor: inherit;\n\n    width: 14px;\n    height: 14px;\n    display: block;\n    box-sizing: border-box;\n  }\n\n  &.disabled label {\n    opacity: 0.5;\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.4s 1;\n  }\n\n  label > input[type='checkbox'] {\n    display: none;\n  }\n\n  label > input[type='checkbox'] + *::before {\n    margin: 0;\n    content: '';\n    width: 12px;\n    height: 12px;\n    display: block;\n    line-height: 12px;\n    border-radius: 2px;\n    box-sizing: border-box;\n    border: 1px solid $verdocs-grey-2;\n  }\n\n  label > input[type='checkbox']:checked + * {\n    color: $verdocs-green;\n  }\n\n  label > input[type='checkbox']:checked + *::before {\n    content: '✓';\n    color: white;\n    font-size: 12px;\n    text-align: center;\n    background: $verdocs-green;\n    border-color: $verdocs-green;\n  }\n\n  &.required {\n    border: 1px solid $verdocs-red-1;\n  }\n\n  &.hide {\n    display: none;\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.4s 1;\n  }\n\n  verdocs-button-panel {\n    display: block;\n    margin-left: -20px;\n    margin-top: -17px;\n    transform: scale(0.7);\n  }\n\n  .settings-icon {\n    position: absolute;\n    top: -5px;\n    left: -20px;\n    display: inline-block;\n    cursor: pointer;\n    opacity: 0.3;\n\n    svg {\n      fill: $border-color;\n    }\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n}\n\n@keyframes verdocs-field-pulse {\n  0% {\n    background-color: rgba(0, 0, 0, 0.35);\n  }\n  50% {\n    background-color: rgba(0, 0, 0, 0);\n  }\n  100% {\n    background-color: rgba(0, 0, 0, 0.35);\n  }\n}\n","import {ITemplateField, getRGBA, IEnvelopeField} from '@verdocs/js-sdk';\nimport {Component, Event, EventEmitter, Fragment, h, Host, Method, Prop, State} from '@stencil/core';\nimport {SettingsIcon} from '../../../utils/Icons';\nimport {Store} from '../../../utils/Datastore';\n\n/**\n * Displays a checkbox.\n */\n@Component({\n  tag: 'verdocs-field-checkbox',\n  styleUrl: 'verdocs-field-checkbox.scss',\n  shadow: false,\n})\nexport class VerdocsFieldCheckbox {\n  /**\n   * Fields may be attached to templates or envelopes, but only template fields may be edited.\n   */\n  @Prop({reflect: true}) source: 'template' | 'envelope' = 'template';\n\n  /**\n   * The source template or envelope ID the field is found in.\n   */\n  @Prop({reflect: true}) sourceid: string = '';\n\n  /**\n   * The name of the field to display.\n   */\n  @Prop({reflect: true}) fieldname: string = '';\n\n  /**\n   * Override the field's settings. This is intended to be used during signing when fields are being\n   * mutated.\n   */\n  @Prop() field: IEnvelopeField | null | undefined = null;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop({reflect: true}) disabled?: boolean = false;\n\n  /**\n   * If set, the field is considered \"done\" and is drawn in a display-final-value state.\n   */\n  @Prop({reflect: true}) done?: boolean = false;\n\n  /**\n   * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n   * changed, so it should typically only be enabled in the Builder.\n   */\n  @Prop({reflect: true}) editable?: boolean = false;\n\n  /**\n   * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n   */\n  @Prop({reflect: true}) moveable?: boolean = false;\n\n  /**\n   * If set, the field will be be scaled horizontally by this factor.\n   */\n  @Prop({reflect: true}) xscale?: number = 1;\n\n  /**\n   * If set, the field will be be scaled vertically by this factor.\n   */\n  @Prop({reflect: true}) yscale?: number = 1;\n\n  /**\n   * The page the field is on\n   */\n  @Prop({reflect: true}) pagenumber?: number = 1;\n\n  /**\n   * Event fired when the field's settings are changed.\n   */\n  @Event({composed: true}) settingsChanged: EventEmitter<{fieldName: string; field: ITemplateField}>;\n\n  /**\n   * Event fired when the field is deleted.\n   */\n  @Event({composed: true}) deleted: EventEmitter<{fieldName: string}>;\n\n  @State() showingProperties?: boolean = false;\n  @State() focused?: boolean = false;\n\n  @Method()\n  async focusField() {\n    // We don't have a visible input that we can actually focus on, so we fake it\n    this.focused = true;\n    setTimeout(() => {\n      this.focused = false;\n    }, 500);\n  }\n\n  @Method()\n  async showSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.showPanel) {\n      settingsPanel.showPanel();\n    }\n  }\n\n  @Method()\n  async hideSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.hidePanel) {\n      settingsPanel.hidePanel();\n    }\n  }\n\n  render() {\n    const {source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1} = this;\n\n    const {index, field} = Store.getField(source, sourceid, fieldname, this.field);\n    const {required = false, label = '', value = false} = field || {};\n    const backgroundColor = getRGBA(index);\n\n    const checked = value === 'true';\n\n    if (done) {\n      return <Host class={{done}}>{checked ? '✓' : '☐'}</Host>;\n    }\n\n    return (\n      <Host class={{required, disabled, done, focused}} style={{backgroundColor}}>\n        {label && <div class=\"label\">{label}</div>}\n\n        <label htmlFor={fieldname}>\n          <input id={fieldname} name={fieldname} type=\"checkbox\" checked={checked} disabled={disabled} required={required} />\n          <span />\n\n          {editable && (\n            <Fragment>\n              <div\n                id={`verdocs-settings-panel-trigger-${fieldname}`}\n                style={{transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})`}}\n                class=\"settings-icon\"\n                innerHTML={SettingsIcon}\n                onClick={(e: any) => {\n                  e.stopPropagation();\n                  this.showingProperties = !this.showingProperties;\n                }}\n              />\n\n              {this.showingProperties && (\n                <verdocs-portal anchor={`verdocs-settings-panel-trigger-${field.name}`} onClickAway={() => (this.showingProperties = false)}>\n                  <verdocs-template-field-properties\n                    templateId={sourceid}\n                    fieldName={field.name}\n                    onClose={() => (this.showingProperties = false)}\n                    onDelete={() => {\n                      this.deleted?.emit({fieldName: fieldname});\n                      return this.hideSettingsPanel();\n                    }}\n                    onSettingsChanged={e => {\n                      this.settingsChanged?.emit(e.detail);\n                      return this.hideSettingsPanel();\n                    }}\n                    helpText={'Check boxes allow the user to select one or more (non-exclusive) options.'}\n                  />\n                </verdocs-portal>\n              )}\n            </Fragment>\n          )}\n        </label>\n      </Host>\n    );\n  }\n}\n","@import '../../../theme.scss';\n\nverdocs-field-date {\n  font-family: $verdocs-primary-font;\n  width: 74px;\n  height: 20px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  scroll-margin: 20px 0;\n  letter-spacing: 0.3px;\n  background-color: transparent;\n  transform-origin: bottom left;\n\n  &.focused {\n    animation: verdocs-field-pulse 0.4s 1;\n  }\n\n  label {\n    top: -14px;\n    left: 0;\n    height: 14px;\n    color: white;\n    padding: 0 4px;\n    font-size: 9px;\n    line-height: 13px;\n    position: absolute;\n    background: #4a4a99;\n    border-top-left-radius: 2px;\n    border-top-right-radius: 2px;\n  }\n\n  input {\n    position: absolute;\n\n    font-size: 12px;\n\n    // This is needed to bring down the cursor from the parent element, which is where interactjs applies it\n    cursor: inherit;\n\n    box-sizing: border-box;\n    color: rgba(0, 0, 0, 0.87);\n    font-weight: 500;\n    transform-origin: 0 0;\n    height: 100%;\n    width: 100%;\n    background: none;\n    border: 1px solid $light-border-color;\n    appearance: none;\n\n    &.hide {\n      display: none;\n    }\n  }\n\n  &.disabled input {\n    opacity: 0.5;\n  }\n\n  &.required {\n    input {\n      border: 1px solid $verdocs-red-1;\n    }\n  }\n\n  verdocs-button-panel {\n    top: -3px;\n    left: -2px;\n    opacity: 0.5;\n    z-index: 1000;\n    cursor: pointer;\n    position: absolute;\n    transform: scale(0.6);\n\n    &[data-active],\n    &:hover {\n      opacity: 1;\n    }\n\n    .icon {\n      svg {\n        fill: #333333;\n      }\n\n      &:hover {\n        svg {\n          fill: #000000;\n        }\n      }\n    }\n  }\n\n  .settings-icon {\n    position: absolute;\n    top: -3px;\n    left: -18px;\n    display: inline-block;\n    cursor: pointer;\n    opacity: 0.3;\n\n    svg {\n      fill: $border-color;\n    }\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n}\n\n.air-datepicker-cell.-year-.-other-decade-,\n.air-datepicker-cell.-day-.-other-month- {\n  color: var(--adp-color-other-month);\n}\n.air-datepicker-cell.-year-.-other-decade-:hover,\n.air-datepicker-cell.-day-.-other-month-:hover {\n  color: var(--adp-color-other-month-hover);\n}\n.-disabled-.-focus-.air-datepicker-cell.-year-.-other-decade-,\n.-disabled-.-focus-.air-datepicker-cell.-day-.-other-month- {\n  color: var(--adp-color-other-month);\n}\n.-selected-.air-datepicker-cell.-year-.-other-decade-,\n.-selected-.air-datepicker-cell.-day-.-other-month- {\n  color: #fff;\n  background: var(--adp-background-color-selected-other-month);\n}\n.-selected-.-focus-.air-datepicker-cell.-year-.-other-decade-,\n.-selected-.-focus-.air-datepicker-cell.-day-.-other-month- {\n  background: var(--adp-background-color-selected-other-month-focused);\n}\n.-in-range-.air-datepicker-cell.-year-.-other-decade-,\n.-in-range-.air-datepicker-cell.-day-.-other-month- {\n  background-color: var(--adp-background-color-in-range);\n  color: var(--adp-color);\n}\n.-in-range-.-focus-.air-datepicker-cell.-year-.-other-decade-,\n.-in-range-.-focus-.air-datepicker-cell.-day-.-other-month- {\n  background-color: var(--adp-background-color-in-range-focused);\n}\n.air-datepicker-cell.-year-.-other-decade-:empty,\n.air-datepicker-cell.-day-.-other-month-:empty {\n  background: none;\n  border: none;\n}\n.air-datepicker-cell {\n  border-radius: var(--adp-cell-border-radius);\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  position: relative;\n  align-items: center;\n  justify-content: center;\n  z-index: 1;\n}\n.air-datepicker-cell.-focus- {\n  background: var(--adp-cell-background-color-hover);\n}\n.air-datepicker-cell.-current- {\n  color: var(--adp-color-current-date);\n}\n.air-datepicker-cell.-current-.-focus- {\n  color: var(--adp-color);\n}\n.air-datepicker-cell.-current-.-in-range- {\n  color: var(--adp-color-current-date);\n}\n.air-datepicker-cell.-disabled- {\n  cursor: default;\n  color: var(--adp-color-disabled);\n}\n.air-datepicker-cell.-disabled-.-focus- {\n  color: var(--adp-color-disabled);\n}\n.air-datepicker-cell.-disabled-.-in-range- {\n  color: var(--adp-color-disabled-in-range);\n}\n.air-datepicker-cell.-disabled-.-current-.-focus- {\n  color: var(--adp-color-disabled);\n}\n.air-datepicker-cell.-in-range- {\n  background: var(--adp-cell-background-color-in-range);\n  border-radius: 0;\n}\n.air-datepicker-cell.-in-range-:hover {\n  background: var(--adp-cell-background-color-in-range-hover);\n}\n.air-datepicker-cell.-range-from- {\n  border: 1px solid var(--adp-cell-border-color-in-range);\n  background-color: var(--adp-cell-background-color-in-range);\n  border-radius: var(--adp-cell-border-radius) 0 0 var(--adp-cell-border-radius);\n}\n.air-datepicker-cell.-range-to- {\n  border: 1px solid var(--adp-cell-border-color-in-range);\n  background-color: var(--adp-cell-background-color-in-range);\n  border-radius: 0 var(--adp-cell-border-radius) var(--adp-cell-border-radius) 0;\n}\n.air-datepicker-cell.-range-to-.-range-from- {\n  border-radius: var(--adp-cell-border-radius);\n}\n.air-datepicker-cell.-selected- {\n  color: #fff;\n  border: none;\n  background: var(--adp-cell-background-color-selected);\n}\n.air-datepicker-cell.-selected-.-current- {\n  color: #fff;\n  background: var(--adp-cell-background-color-selected);\n}\n.air-datepicker-cell.-selected-.-focus- {\n  background: var(--adp-cell-background-color-selected-hover);\n}\n.air-datepicker-body {\n  transition: all var(--adp-transition-duration) var(--adp-transition-ease);\n}\n.air-datepicker-body.-hidden- {\n  display: none;\n}\n.air-datepicker-body--day-names {\n  display: grid;\n  grid-template-columns: repeat(7, var(--adp-day-cell-width));\n  margin: 8px 0 3px;\n}\n.air-datepicker-body--day-name {\n  color: var(--adp-day-name-color);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  text-align: center;\n  text-transform: uppercase;\n  font-size: 0.8em;\n}\n.air-datepicker-body--day-name.-clickable- {\n  cursor: pointer;\n}\n.air-datepicker-body--day-name.-clickable-:hover {\n  color: var(--adp-day-name-color-hover);\n}\n.air-datepicker-body--cells {\n  display: grid;\n}\n.air-datepicker-body--cells.-days- {\n  grid-template-columns: repeat(7, var(--adp-day-cell-width));\n  grid-auto-rows: var(--adp-day-cell-height);\n}\n.air-datepicker-body--cells.-months- {\n  grid-template-columns: repeat(3, 1fr);\n  grid-auto-rows: var(--adp-month-cell-height);\n}\n.air-datepicker-body--cells.-years- {\n  grid-template-columns: repeat(4, 1fr);\n  grid-auto-rows: var(--adp-year-cell-height);\n}\n.air-datepicker-nav {\n  display: flex;\n  justify-content: space-between;\n  border-bottom: 1px solid var(--adp-border-color-inner);\n  min-height: var(--adp-nav-height);\n  padding: var(--adp-padding);\n  box-sizing: content-box;\n}\n.-only-timepicker- .air-datepicker-nav {\n  display: none;\n}\n.air-datepicker-nav--title,\n.air-datepicker-nav--action {\n  display: flex;\n  cursor: pointer;\n  align-items: center;\n  justify-content: center;\n}\n.air-datepicker-nav--action {\n  width: var(--adp-nav-action-size);\n  border-radius: var(--adp-border-radius);\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  user-select: none;\n}\n.air-datepicker-nav--action:hover {\n  background: var(--adp-background-color-hover);\n}\n.air-datepicker-nav--action:active {\n  background: var(--adp-background-color-active);\n}\n.air-datepicker-nav--action.-disabled- {\n  visibility: hidden;\n}\n.air-datepicker-nav--action svg {\n  width: 32px;\n  height: 32px;\n}\n.air-datepicker-nav--action path {\n  fill: none;\n  stroke: var(--adp-nav-arrow-color);\n  stroke-width: 2px;\n}\n.air-datepicker-nav--title {\n  border-radius: var(--adp-border-radius);\n  padding: 0 8px;\n}\n.air-datepicker-nav--title i {\n  font-style: normal;\n  color: var(--adp-nav-color-secondary);\n  margin-left: 0.3em;\n}\n.air-datepicker-nav--title:hover {\n  background: var(--adp-background-color-hover);\n}\n.air-datepicker-nav--title:active {\n  background: var(--adp-background-color-active);\n}\n.air-datepicker-nav--title.-disabled- {\n  cursor: default;\n  background: none;\n}\n.air-datepicker-buttons {\n  display: grid;\n  grid-auto-columns: 1fr;\n  grid-auto-flow: column;\n}\n.air-datepicker-button {\n  display: inline-flex;\n  color: var(--adp-btn-color);\n  border-radius: var(--adp-btn-border-radius);\n  cursor: pointer;\n  height: var(--adp-btn-height);\n  border: none;\n  background: rgba(255, 255, 255, 0);\n}\n.air-datepicker-button:hover {\n  color: var(--adp-btn-color-hover);\n  background: var(--adp-btn-background-color-hover);\n}\n.air-datepicker-button:focus {\n  color: var(--adp-btn-color-hover);\n  background: var(--adp-btn-background-color-hover);\n  outline: none;\n}\n.air-datepicker-button:active {\n  background: var(--adp-btn-background-color-active);\n}\n.air-datepicker-button span {\n  outline: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n}\n.air-datepicker-time {\n  display: grid;\n  grid-template-columns: max-content 1fr;\n  grid-column-gap: 12px;\n  align-items: center;\n  position: relative;\n  padding: 0 var(--adp-time-padding-inner);\n}\n.-only-timepicker- .air-datepicker-time {\n  border-top: none;\n}\n.air-datepicker-time--current {\n  display: flex;\n  align-items: center;\n  flex: 1;\n  font-size: 14px;\n  text-align: center;\n}\n.air-datepicker-time--current-colon {\n  margin: 0 2px 3px;\n  line-height: 1;\n}\n.air-datepicker-time--current-hours,\n.air-datepicker-time--current-minutes {\n  line-height: 1;\n  font-size: 19px;\n  font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;\n  position: relative;\n  z-index: 1;\n}\n.air-datepicker-time--current-hours:after,\n.air-datepicker-time--current-minutes:after {\n  content: '';\n  background: var(--adp-background-color-hover);\n  border-radius: var(--adp-border-radius);\n  position: absolute;\n  left: -2px;\n  top: -3px;\n  right: -2px;\n  bottom: -2px;\n  z-index: -1;\n  opacity: 0;\n}\n.air-datepicker-time--current-hours.-focus-:after,\n.air-datepicker-time--current-minutes.-focus-:after {\n  opacity: 1;\n}\n.air-datepicker-time--current-ampm {\n  text-transform: uppercase;\n  align-self: flex-end;\n  color: var(--adp-time-day-period-color);\n  margin-left: 6px;\n  font-size: 11px;\n  margin-bottom: 1px;\n}\n.air-datepicker-time--row {\n  display: flex;\n  align-items: center;\n  font-size: 11px;\n  height: 17px;\n  background: linear-gradient(to right, var(--adp-time-track-color), var(--adp-time-track-color)) left 50%/100% var(--adp-time-track-height) no-repeat;\n}\n.air-datepicker-time--row:first-child {\n  margin-bottom: 4px;\n}\n.air-datepicker-time--row input[type='range'] {\n  background: none;\n  cursor: pointer;\n  flex: 1;\n  height: 100%;\n  width: 100%;\n  padding: 0;\n  margin: 0;\n  -webkit-appearance: none;\n}\n.air-datepicker-time--row input[type='range']::-webkit-slider-thumb {\n  -webkit-appearance: none;\n}\n.air-datepicker-time--row input[type='range']::-ms-tooltip {\n  display: none;\n}\n.air-datepicker-time--row input[type='range']:hover::-webkit-slider-thumb {\n  border-color: var(--adp-time-track-color-hover);\n}\n.air-datepicker-time--row input[type='range']:hover::-moz-range-thumb {\n  border-color: var(--adp-time-track-color-hover);\n}\n.air-datepicker-time--row input[type='range']:hover::-ms-thumb {\n  border-color: var(--adp-time-track-color-hover);\n}\n.air-datepicker-time--row input[type='range']:focus {\n  outline: none;\n}\n.air-datepicker-time--row input[type='range']:focus::-webkit-slider-thumb {\n  background: var(--adp-cell-background-color-selected);\n  border-color: var(--adp-cell-background-color-selected);\n}\n.air-datepicker-time--row input[type='range']:focus::-moz-range-thumb {\n  background: var(--adp-cell-background-color-selected);\n  border-color: var(--adp-cell-background-color-selected);\n}\n.air-datepicker-time--row input[type='range']:focus::-ms-thumb {\n  background: var(--adp-cell-background-color-selected);\n  border-color: var(--adp-cell-background-color-selected);\n}\n.air-datepicker-time--row input[type='range']::-webkit-slider-thumb {\n  box-sizing: border-box;\n  height: 12px;\n  width: 12px;\n  border-radius: 3px;\n  border: 1px solid var(--adp-time-track-color);\n  background: #fff;\n  cursor: pointer;\n  -webkit-transition: background var(--adp-transition-duration);\n  transition: background var(--adp-transition-duration);\n}\n.air-datepicker-time--row input[type='range']::-moz-range-thumb {\n  box-sizing: border-box;\n  height: 12px;\n  width: 12px;\n  border-radius: 3px;\n  border: 1px solid var(--adp-time-track-color);\n  background: #fff;\n  cursor: pointer;\n  -moz-transition: background var(--adp-transition-duration);\n  transition: background var(--adp-transition-duration);\n}\n.air-datepicker-time--row input[type='range']::-ms-thumb {\n  box-sizing: border-box;\n  height: 12px;\n  width: 12px;\n  border-radius: 3px;\n  border: 1px solid var(--adp-time-track-color);\n  background: #fff;\n  cursor: pointer;\n  -ms-transition: background var(--adp-transition-duration);\n  transition: background var(--adp-transition-duration);\n}\n.air-datepicker-time--row input[type='range']::-webkit-slider-thumb {\n  margin-top: calc(var(--adp-time-thumb-size) / 2 * -1);\n}\n.air-datepicker-time--row input[type='range']::-webkit-slider-runnable-track {\n  border: none;\n  height: var(--adp-time-track-height);\n  cursor: pointer;\n  color: rgba(0, 0, 0, 0);\n  background: rgba(0, 0, 0, 0);\n}\n.air-datepicker-time--row input[type='range']::-moz-range-track {\n  border: none;\n  height: var(--adp-time-track-height);\n  cursor: pointer;\n  color: rgba(0, 0, 0, 0);\n  background: rgba(0, 0, 0, 0);\n}\n.air-datepicker-time--row input[type='range']::-ms-track {\n  border: none;\n  height: var(--adp-time-track-height);\n  cursor: pointer;\n  color: rgba(0, 0, 0, 0);\n  background: rgba(0, 0, 0, 0);\n}\n.air-datepicker-time--row input[type='range']::-ms-fill-lower {\n  background: rgba(0, 0, 0, 0);\n}\n.air-datepicker-time--row input[type='range']::-ms-fill-upper {\n  background: rgba(0, 0, 0, 0);\n}\n.air-datepicker {\n  --adp-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';\n  --adp-font-size: 14px;\n  --adp-width: 246px;\n  --adp-z-index: 100;\n  --adp-padding: 4px;\n  --adp-grid-areas: 'nav' 'body' 'timepicker' 'buttons';\n  --adp-transition-duration: 0.3s;\n  --adp-transition-ease: ease-out;\n  --adp-transition-offset: 8px;\n  --adp-background-color: #fff;\n  --adp-background-color-hover: #f0f0f0;\n  --adp-background-color-active: #eaeaea;\n  --adp-background-color-in-range: rgba(92, 196, 239, 0.1);\n  --adp-background-color-in-range-focused: rgba(92, 196, 239, 0.2);\n  --adp-background-color-selected-other-month-focused: #8ad5f4;\n  --adp-background-color-selected-other-month: #a2ddf6;\n  --adp-color: #4a4a4a;\n  --adp-color-secondary: #9c9c9c;\n  --adp-accent-color: #4eb5e6;\n  --adp-color-current-date: var(--adp-accent-color);\n  --adp-color-other-month: #dedede;\n  --adp-color-disabled: #aeaeae;\n  --adp-color-disabled-in-range: #939393;\n  --adp-color-other-month-hover: #c5c5c5;\n  --adp-border-color: #dbdbdb;\n  --adp-border-color-inner: #efefef;\n  --adp-border-radius: 4px;\n  --adp-border-color-inline: #d7d7d7;\n  --adp-nav-height: 32px;\n  --adp-nav-arrow-color: var(--adp-color-secondary);\n  --adp-nav-action-size: 32px;\n  --adp-nav-color-secondary: var(--adp-color-secondary);\n  --adp-day-name-color: #ff9a19;\n  --adp-day-name-color-hover: #8ad5f4;\n  --adp-day-cell-width: 1fr;\n  --adp-day-cell-height: 32px;\n  --adp-month-cell-height: 42px;\n  --adp-year-cell-height: 56px;\n  --adp-pointer-size: 10px;\n  --adp-poiner-border-radius: 2px;\n  --adp-pointer-offset: 14px;\n  --adp-cell-border-radius: 4px;\n  --adp-cell-background-color-hover: var(--adp-background-color-hover);\n  --adp-cell-background-color-selected: #5cc4ef;\n  --adp-cell-background-color-selected-hover: #45bced;\n  --adp-cell-background-color-in-range: rgba(92, 196, 239, 0.1);\n  --adp-cell-background-color-in-range-hover: rgba(92, 196, 239, 0.2);\n  --adp-cell-border-color-in-range: var(--adp-cell-background-color-selected);\n  --adp-btn-height: 32px;\n  --adp-btn-color: var(--adp-accent-color);\n  --adp-btn-color-hover: var(--adp-color);\n  --adp-btn-border-radius: var(--adp-border-radius);\n  --adp-btn-background-color-hover: var(--adp-background-color-hover);\n  --adp-btn-background-color-active: var(--adp-background-color-active);\n  --adp-time-track-height: 1px;\n  --adp-time-track-color: #dedede;\n  --adp-time-track-color-hover: #b1b1b1;\n  --adp-time-thumb-size: 12px;\n  --adp-time-padding-inner: 10px;\n  --adp-time-day-period-color: var(--adp-color-secondary);\n  --adp-mobile-font-size: 16px;\n  --adp-mobile-nav-height: 40px;\n  --adp-mobile-width: 320px;\n  --adp-mobile-day-cell-height: 38px;\n  --adp-mobile-month-cell-height: 48px;\n  --adp-mobile-year-cell-height: 64px;\n}\n.air-datepicker-overlay {\n  --adp-overlay-background-color: rgba(0, 0, 0, 0.3);\n  --adp-overlay-transition-duration: 0.3s;\n  --adp-overlay-transition-ease: ease-out;\n  --adp-overlay-z-index: 99;\n}\n.air-datepicker {\n  background: var(--adp-background-color);\n  border: 1px solid var(--adp-border-color);\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n  border-radius: var(--adp-border-radius);\n  box-sizing: content-box;\n  display: grid;\n  grid-template-columns: 1fr;\n  grid-template-rows: repeat(4, max-content);\n  grid-template-areas: var(--adp-grid-areas);\n  font-family: var(--adp-font-family), sans-serif;\n  font-size: var(--adp-font-size);\n  color: var(--adp-color);\n  width: var(--adp-width);\n  position: absolute;\n  transition:\n    opacity var(--adp-transition-duration) var(--adp-transition-ease),\n    transform var(--adp-transition-duration) var(--adp-transition-ease);\n  z-index: var(--adp-z-index);\n}\n.air-datepicker:not(.-custom-position-) {\n  opacity: 0;\n}\n.air-datepicker.-from-top- {\n  transform: translateY(calc(var(--adp-transition-offset) * -1));\n}\n.air-datepicker.-from-right- {\n  transform: translateX(var(--adp-transition-offset));\n}\n.air-datepicker.-from-bottom- {\n  transform: translateY(var(--adp-transition-offset));\n}\n.air-datepicker.-from-left- {\n  transform: translateX(calc(var(--adp-transition-offset) * -1));\n}\n.air-datepicker.-active-:not(.-custom-position-) {\n  transform: translate(0, 0);\n  opacity: 1;\n}\n.air-datepicker.-active-.-custom-position- {\n  transition: none;\n}\n.air-datepicker.-inline- {\n  border-color: var(--adp-border-color-inline);\n  box-shadow: none;\n  position: static;\n  left: auto;\n  right: auto;\n  opacity: 1;\n  transform: none;\n}\n.air-datepicker.-inline- .air-datepicker--pointer {\n  display: none;\n}\n.air-datepicker.-is-mobile- {\n  --adp-font-size: var(--adp-mobile-font-size);\n  --adp-day-cell-height: var(--adp-mobile-day-cell-height);\n  --adp-month-cell-height: var(--adp-mobile-month-cell-height);\n  --adp-year-cell-height: var(--adp-mobile-year-cell-height);\n  --adp-nav-height: var(--adp-mobile-nav-height);\n  --adp-nav-action-size: var(--adp-mobile-nav-height);\n  position: fixed;\n  width: var(--adp-mobile-width);\n  border: none;\n}\n.air-datepicker.-is-mobile- * {\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n.air-datepicker.-is-mobile- .air-datepicker--pointer {\n  display: none;\n}\n.air-datepicker.-is-mobile-:not(.-custom-position-) {\n  transform: translate(-50%, calc(-50% + var(--adp-transition-offset)));\n}\n.air-datepicker.-is-mobile-.-active-:not(.-custom-position-) {\n  transform: translate(-50%, -50%);\n}\n.air-datepicker.-custom-position- {\n  transition: none;\n}\n.air-datepicker-global-container {\n  position: absolute;\n  left: 0;\n  top: 0;\n}\n.air-datepicker--pointer {\n  --pointer-half-size: calc(var(--adp-pointer-size) / 2);\n  position: absolute;\n  width: var(--adp-pointer-size);\n  height: var(--adp-pointer-size);\n  z-index: -1;\n}\n.air-datepicker--pointer:after {\n  content: '';\n  position: absolute;\n  background: #fff;\n  border-top: 1px solid var(--adp-border-color-inline);\n  border-right: 1px solid var(--adp-border-color-inline);\n  border-top-right-radius: var(--adp-poiner-border-radius);\n  width: var(--adp-pointer-size);\n  height: var(--adp-pointer-size);\n  box-sizing: border-box;\n}\n.-top-left- .air-datepicker--pointer,\n.-top-center- .air-datepicker--pointer,\n.-top-right- .air-datepicker--pointer,\n[data-popper-placement^='top'] .air-datepicker--pointer {\n  top: calc(100% - var(--pointer-half-size) + 1px);\n}\n.-top-left- .air-datepicker--pointer:after,\n.-top-center- .air-datepicker--pointer:after,\n.-top-right- .air-datepicker--pointer:after,\n[data-popper-placement^='top'] .air-datepicker--pointer:after {\n  transform: rotate(135deg);\n}\n.-right-top- .air-datepicker--pointer,\n.-right-center- .air-datepicker--pointer,\n.-right-bottom- .air-datepicker--pointer,\n[data-popper-placement^='right'] .air-datepicker--pointer {\n  right: calc(100% - var(--pointer-half-size) + 1px);\n}\n.-right-top- .air-datepicker--pointer:after,\n.-right-center- .air-datepicker--pointer:after,\n.-right-bottom- .air-datepicker--pointer:after,\n[data-popper-placement^='right'] .air-datepicker--pointer:after {\n  transform: rotate(225deg);\n}\n.-bottom-left- .air-datepicker--pointer,\n.-bottom-center- .air-datepicker--pointer,\n.-bottom-right- .air-datepicker--pointer,\n[data-popper-placement^='bottom'] .air-datepicker--pointer {\n  bottom: calc(100% - var(--pointer-half-size) + 1px);\n}\n.-bottom-left- .air-datepicker--pointer:after,\n.-bottom-center- .air-datepicker--pointer:after,\n.-bottom-right- .air-datepicker--pointer:after,\n[data-popper-placement^='bottom'] .air-datepicker--pointer:after {\n  transform: rotate(315deg);\n}\n.-left-top- .air-datepicker--pointer,\n.-left-center- .air-datepicker--pointer,\n.-left-bottom- .air-datepicker--pointer,\n[data-popper-placement^='left'] .air-datepicker--pointer {\n  left: calc(100% - var(--pointer-half-size) + 1px);\n}\n.-left-top- .air-datepicker--pointer:after,\n.-left-center- .air-datepicker--pointer:after,\n.-left-bottom- .air-datepicker--pointer:after,\n[data-popper-placement^='left'] .air-datepicker--pointer:after {\n  transform: rotate(45deg);\n}\n.-top-left- .air-datepicker--pointer,\n.-bottom-left- .air-datepicker--pointer {\n  left: var(--adp-pointer-offset);\n}\n.-top-right- .air-datepicker--pointer,\n.-bottom-right- .air-datepicker--pointer {\n  right: var(--adp-pointer-offset);\n}\n.-top-center- .air-datepicker--pointer,\n.-bottom-center- .air-datepicker--pointer {\n  left: calc(50% - var(--adp-pointer-size) / 2);\n}\n.-left-top- .air-datepicker--pointer,\n.-right-top- .air-datepicker--pointer {\n  top: var(--adp-pointer-offset);\n}\n.-left-bottom- .air-datepicker--pointer,\n.-right-bottom- .air-datepicker--pointer {\n  bottom: var(--adp-pointer-offset);\n}\n.-left-center- .air-datepicker--pointer,\n.-right-center- .air-datepicker--pointer {\n  top: calc(50% - var(--adp-pointer-size) / 2);\n}\n.air-datepicker--navigation {\n  grid-area: nav;\n}\n.air-datepicker--content {\n  box-sizing: content-box;\n  padding: var(--adp-padding);\n  grid-area: body;\n}\n.-only-timepicker- .air-datepicker--content {\n  display: none;\n}\n.air-datepicker--time {\n  grid-area: timepicker;\n}\n.air-datepicker--buttons {\n  grid-area: buttons;\n}\n.air-datepicker--buttons,\n.air-datepicker--time {\n  padding: var(--adp-padding);\n  border-top: 1px solid var(--adp-border-color-inner);\n}\n.air-datepicker-overlay {\n  position: fixed;\n  background: var(--adp-overlay-background-color);\n  left: 0;\n  top: 0;\n  width: 0;\n  height: 0;\n  opacity: 0;\n  transition:\n    opacity var(--adp-overlay-transition-duration) var(--adp-overlay-transition-ease),\n    left 0s,\n    height 0s,\n    width 0s;\n  transition-delay: 0s, var(--adp-overlay-transition-duration), var(--adp-overlay-transition-duration), var(--adp-overlay-transition-duration);\n  z-index: var(--adp-overlay-z-index);\n}\n.air-datepicker-overlay.-active- {\n  opacity: 1;\n  width: 100%;\n  height: 100%;\n  transition:\n    opacity var(--adp-overlay-transition-duration) var(--adp-overlay-transition-ease),\n    height 0s,\n    width 0s;\n}\n\n@keyframes verdocs-field-pulse {\n  0% {\n    background-color: rgba(0, 0, 0, 0.35);\n  }\n  50% {\n    background-color: rgba(0, 0, 0, 0);\n  }\n  100% {\n    background-color: rgba(0, 0, 0, 0.35);\n  }\n}\n","import {format} from 'date-fns';\nimport {getRGBA} from '@verdocs/js-sdk';\nimport AirDatepicker from 'air-datepicker';\nimport localeEn from 'air-datepicker/locale/en';\nimport type {ITemplateField} from '@verdocs/js-sdk';\nimport {Component, Element, Event, EventEmitter, h, Host, Method, Prop, Fragment, State} from '@stencil/core';\nimport {SettingsIcon} from '../../../utils/Icons';\nimport {FORMAT_DATE} from '../../../utils/Types';\nimport {Store} from '../../../utils/Datastore';\n\n/**\n * Displays a date field. When tapped or clicked, the input element will display a date picker component.\n */\n@Component({\n  tag: 'verdocs-field-date',\n  styleUrl: 'verdocs-field-date.scss',\n  shadow: false,\n})\nexport class VerdocsFieldDate {\n  @Element()\n  private hostEl: HTMLInputElement;\n\n  /**\n   * Fields may be attached to templates or envelopes, but only template fields may be edited.\n   */\n  @Prop({reflect: true}) source: 'template' | 'envelope' = 'template';\n\n  /**\n   * The source template or envelope ID the field is found in.\n   */\n  @Prop({reflect: true}) sourceid: string = '';\n\n  /**\n   * The name of the field to display.\n   */\n  @Prop({reflect: true}) fieldname: string = '';\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop({reflect: true}) disabled?: boolean = false;\n\n  /**\n   * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n   * changed, so it should typically only be enabled in the Builder.\n   */\n  @Prop({reflect: true}) editable?: boolean = false;\n\n  /**\n   * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n   */\n  @Prop({reflect: true}) moveable?: boolean = false;\n\n  /**\n   * If set, the field is considered \"done\" and is drawn in a display-final-value state.\n   */\n  @Prop({reflect: true}) done?: boolean = false;\n\n  /**\n   * If set, the field will be be scaled horizontally by this factor.\n   */\n  @Prop({reflect: true}) xscale?: number = 1;\n\n  /**\n   * If set, the field will be be scaled vertically by this factor.\n   */\n  @Prop({reflect: true}) yscale?: number = 1;\n\n  /**\n   * The page the field is on\n   */\n  @Prop({reflect: true}) pagenumber?: number = 1;\n\n  /**\n   * If set, the field will be be scaled vertically by this factor.\n   */\n  @Prop() field?: ITemplateField;\n\n  /**\n   * Event fired on every character entered into / deleted from the field.\n   */\n  @Event({composed: true}) settingsPress: EventEmitter;\n\n  /**\n   * Event fired when the field's settings are changed.\n   */\n  @Event({composed: true}) settingsChanged: EventEmitter<{fieldName: string; field: ITemplateField}>;\n\n  /**\n   * Event fired when the field is deleted.\n   */\n  @Event({composed: true}) deleted: EventEmitter<{fieldName: string}>;\n\n  @State() containerId = `verdocs-date-picker-${Math.random().toString(36).substring(2, 11)}`;\n\n  @State() showingProperties?: boolean = false;\n\n  @Method()\n  async focusField() {\n    // Our input field is fake, so we fake the flash too\n    this.focused = true;\n    this.picker?.show();\n    setTimeout(() => {\n      this.focused = false;\n    }, 500);\n  }\n\n  picker: AirDatepicker<HTMLElement> | null = null;\n\n  componentDidLoad() {\n    this.picker = new AirDatepicker<HTMLElement>(`#${this.containerId}`, {\n      locale: localeEn,\n      isMobile: true,\n      autoClose: true,\n      onShow: () => (this.focused = true),\n      onHide: () => (this.focused = false),\n      onSelect: ({date, formattedDate}) => {\n        const event = new CustomEvent('fieldChange', {detail: {date, formattedDate}});\n        this.hostEl.dispatchEvent(event);\n      },\n    });\n  }\n\n  @Method()\n  async showSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.showPanel) {\n      settingsPanel.showPanel();\n    }\n  }\n\n  @Method()\n  async hideSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.hidePanel) {\n      settingsPanel.hidePanel();\n    }\n  }\n\n  @State() focused?: boolean = false;\n\n  // NOTE: We don't use a \"date\" field here because browsers vary widely in their formatting of it.\n  render() {\n    const {source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1} = this;\n\n    const {index, field} = Store.getField(source, sourceid, fieldname, this.field);\n    const {required = false, placeholder = 'Date...', value = '', label = ''} = field || {};\n    const backgroundColor = getRGBA(index);\n\n    const formattedValue = value ? format(new Date(value), FORMAT_DATE) : '';\n\n    if (this.done) {\n      return <Host class={{done}}>{formattedValue}</Host>;\n    }\n\n    return (\n      <Host class={{required, disabled, done, focused}} style={{backgroundColor}}>\n        {label && <label>{label}</label>}\n\n        <input\n          name={fieldname}\n          class=\"input-el\"\n          type=\"text\"\n          value={formattedValue}\n          id={this.containerId}\n          disabled={disabled}\n          placeholder={placeholder}\n          onFocus={() => (this.focused = true)}\n          onBlur={() => (this.focused = false)}\n        />\n\n        {editable && (\n          <Fragment>\n            <div\n              id={`verdocs-settings-panel-trigger-${fieldname}`}\n              style={{transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})`}}\n              class=\"settings-icon\"\n              innerHTML={SettingsIcon}\n              onClick={(e: any) => {\n                e.stopPropagation();\n                this.showingProperties = !this.showingProperties;\n              }}\n            />\n\n            {this.showingProperties && (\n              <verdocs-portal anchor={`verdocs-settings-panel-trigger-${field.name}`} onClickAway={() => (this.showingProperties = false)}>\n                <verdocs-template-field-properties\n                  templateId={sourceid}\n                  fieldName={fieldname}\n                  onClose={() => (this.showingProperties = false)}\n                  onDelete={() => {\n                    this.deleted?.emit({fieldName: fieldname});\n                    return this.hideSettingsPanel();\n                  }}\n                  onSettingsChanged={e => {\n                    this.settingsChanged?.emit(e.detail);\n                    return this.hideSettingsPanel();\n                  }}\n                  helpText={'Date fields allow the user to select a date.'}\n                />\n              </verdocs-portal>\n            )}\n          </Fragment>\n        )}\n      </Host>\n    );\n  }\n}\n","@import '../../../theme.scss';\n\nverdocs-field-dropdown {\n  font-family: $verdocs-primary-font;\n  width: 85px;\n  height: 20px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  scroll-margin: 20px 0;\n  background-color: transparent;\n  transform-origin: bottom left;\n\n  label {\n    top: -14px;\n    left: 0;\n    height: 14px;\n    color: white;\n    padding: 0 4px;\n    font-size: 9px;\n    line-height: 13px;\n    position: absolute;\n    background: #4a4a99;\n    border-top-left-radius: 2px;\n    border-top-right-radius: 2px;\n  }\n\n  select {\n    // This is needed to bring down the cursor from the parent element, which is where interactjs applies it\n    cursor: inherit;\n\n    position: absolute;\n    background: linear-gradient(55deg, transparent 50%, #333 50%), linear-gradient(125deg, #333 50%, transparent 50%), linear-gradient(to right, transparent, transparent);\n    background-position:\n      calc(100% - 7px) 6px,\n      calc(100% - 3px) 6px,\n      100% 0;\n    background-size:\n      5px 5px,\n      5px 5px,\n      2.5em 2.5em;\n    background-repeat: no-repeat;\n    appearance: none;\n\n    box-sizing: border-box;\n    color: rgba(0, 0, 0, 0.87);\n    font-weight: 500;\n    transform-origin: 0 0;\n    height: 100%;\n    width: 100%;\n    font-size: 11px;\n    border: 1px solid rgba(0, 0, 0, 0.2);\n    padding: 0 5px;\n\n    &:focus {\n      outline: none;\n    }\n\n    &.hide {\n      display: none;\n    }\n  }\n\n  &.disabled select {\n    opacity: 0.5;\n  }\n\n  &.required {\n    select {\n      border: 1px solid $verdocs-red-1;\n    }\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.4s 1;\n  }\n\n  verdocs-button-panel {\n    display: block;\n    margin-left: -33px;\n    margin-top: -1px;\n    transform: scale(0.7);\n  }\n\n  .settings-icon {\n    position: absolute;\n    top: -2px;\n    left: -20px;\n    display: inline-block;\n    cursor: pointer;\n    opacity: 0.3;\n\n    svg {\n      fill: $border-color;\n    }\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n}\n\n@keyframes verdocs-field-pulse {\n  0% {\n    background-color: rgba(0, 0, 0, 0.35);\n  }\n  50% {\n    background-color: rgba(0, 0, 0, 0);\n  }\n  100% {\n    background-color: rgba(0, 0, 0, 0.35);\n  }\n}\n","import {ITemplateField, getRGBA, IEnvelopeField} from '@verdocs/js-sdk';\nimport {Component, Event, EventEmitter, h, Host, Method, Prop, Fragment, State} from '@stencil/core';\nimport {SettingsIcon} from '../../../utils/Icons';\nimport {Store} from '../../../utils/Datastore';\n\n/**\n * Displays a dropdown field that allows the user to choose one of a list of options.\n */\n@Component({\n  tag: 'verdocs-field-dropdown',\n  styleUrl: 'verdocs-field-dropdown.scss',\n  shadow: false,\n})\nexport class VerdocsFieldDropdown {\n  selectEl: HTMLSelectElement;\n\n  /**\n   * Fields may be attached to templates or envelopes, but only template fields may be edited.\n   */\n  @Prop({reflect: true}) source: 'template' | 'envelope' = 'template';\n\n  /**\n   * The source template or envelope ID the field is found in.\n   */\n  @Prop({reflect: true}) sourceid: string = '';\n\n  /**\n   * The name of the field to display.\n   */\n  @Prop({reflect: true}) fieldname: string = '';\n\n  /**\n   * Override the field's settings. This is intended to be used during signing when fields are being\n   * mutated.\n   */\n  @Prop() field: IEnvelopeField | null | undefined = null;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop({reflect: true}) disabled?: boolean = false;\n\n  /**\n   * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n   * changed, so it should typically only be enabled in the Builder.\n   */\n  @Prop({reflect: true}) editable?: boolean = false;\n\n  /**\n   * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n   */\n  @Prop({reflect: true}) moveable?: boolean = false;\n\n  /**\n   * If set, the field is considered \"done\" and is drawn in a display-final-value state.\n   */\n  @Prop({reflect: true}) done?: boolean = false;\n\n  /**\n   * If set, the field will be be scaled horizontally by this factor.\n   */\n  @Prop({reflect: true}) xscale?: number = 1;\n\n  /**\n   * If set, the field will be be scaled vertically by this factor.\n   */\n  @Prop({reflect: true}) yscale?: number = 1;\n\n  /**\n   * The page the field is on\n   */\n  @Prop({reflect: true}) pagenumber?: number = 1;\n\n  /**\n   * Event fired when the input field value changes. Note that this will only be fired on blur, tab-out, ENTER key press, etc.\n   * It is generally the best event to subscribe to than `input` for most cases EXCEPT autocomplete fields that need to see every\n   * keypress.\n   */\n  @Event({composed: true}) fieldChange: EventEmitter<string>;\n\n  /**\n   * Event fired when the field's settings are changed.\n   */\n  @Event({composed: true}) settingsChanged: EventEmitter<{fieldName: string; field: ITemplateField}>;\n\n  /**\n   * Event fired when the field is deleted.\n   */\n  @Event({composed: true}) deleted: EventEmitter<{fieldName: string}>;\n\n  @State() showingProperties?: boolean = false;\n  @State() focused = false;\n\n  @Method()\n  async focusField() {\n    // Our input field is fake, so we fake the flash too\n    this.focused = true;\n    setTimeout(() => {\n      this.focused = false;\n    }, 500);\n\n    this.selectEl?.showPicker();\n  }\n\n  handleChange(e: any) {\n    this.fieldChange.emit(e.target.value);\n  }\n\n  @Method()\n  async showSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.showPanel) {\n      settingsPanel.showPanel();\n    }\n  }\n\n  @Method()\n  async hideSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.hidePanel) {\n      settingsPanel.hidePanel();\n    }\n  }\n\n  render() {\n    const {source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1} = this;\n\n    const {index, field} = Store.getField(source, sourceid, fieldname, this.field);\n    let {required = false, value = '', label = '', options} = field || {};\n    const backgroundColor = getRGBA(index);\n\n    if (done) {\n      return <Host class={{done}}>{value}</Host>;\n    }\n\n    // TODO: Look for other places this mistaken assumption was made.\n    // Defaults only apply in destructuring if undefined. null doesn't trigger it.\n    options ||= [];\n\n    return (\n      <Host class={{required, disabled, done, focused}} style={{backgroundColor}}>\n        {label && <label>{label}</label>}\n\n        <select disabled={disabled} onChange={e => this.handleChange(e)} ref={el => (this.selectEl = el as HTMLSelectElement)}>\n          <option value=\"\">Select...</option>\n          {options.map(option => (\n            <option value={option.id} selected={option.id === value}>\n              {option.label}\n            </option>\n          ))}\n          {!options.length && <option value=\"NA\">N/A</option>}\n        </select>\n\n        {editable && (\n          <Fragment>\n            <div\n              id={`verdocs-settings-panel-trigger-${fieldname}`}\n              style={{transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})`}}\n              class=\"settings-icon\"\n              innerHTML={SettingsIcon}\n              onClick={(e: any) => {\n                e.stopPropagation();\n                this.showingProperties = !this.showingProperties;\n              }}\n            />\n\n            {this.showingProperties && (\n              <verdocs-portal anchor={`verdocs-settings-panel-trigger-${fieldname}`} onClickAway={() => (this.showingProperties = false)}>\n                <verdocs-template-field-properties\n                  templateId={sourceid}\n                  fieldName={fieldname}\n                  onClose={() => (this.showingProperties = false)}\n                  onDelete={() => {\n                    this.deleted?.emit({fieldName: fieldname});\n                    return this.hideSettingsPanel();\n                  }}\n                  onSettingsChanged={e => {\n                    this.settingsChanged?.emit(e.detail);\n                    return this.hideSettingsPanel();\n                  }}\n                  helpText={\"Dropdowns are used to capture a recipient's selection of one of several options.\"}\n                />\n              </verdocs-portal>\n            )}\n          </Fragment>\n        )}\n      </Host>\n    );\n  }\n}\n","@import '../../../theme.scss';\n\nverdocs-field-initial {\n  font-family: $verdocs-primary-font;\n  width: 83px;\n  height: 36px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  letter-spacing: 0.3px;\n  scroll-margin: 20px 0;\n  background-color: transparent;\n  transform-origin: bottom left;\n  border: 1px solid rgba(0, 0, 0, 0.2);\n\n  label {\n    top: -14px;\n    left: -1px;\n    height: 14px;\n    color: white;\n    padding: 0 4px;\n    font-size: 9px;\n    line-height: 13px;\n    position: absolute;\n    background: #4a4a99;\n    border-top-left-radius: 2px;\n    border-top-right-radius: 2px;\n  }\n\n  &.done {\n    border: none;\n    opacity: 1;\n  }\n\n  img {\n    display: block;\n    max-width: 100%;\n    max-height: 100%;\n  }\n\n  &.disabled img {\n    opacity: 0.5;\n  }\n\n  button {\n    // This is needed to bring down the cursor from the parent element, which is where interactjs applies it\n    cursor: inherit;\n\n    box-sizing: border-box;\n    border: none;\n    color: rgba(0, 0, 0, 0.87);\n    font-weight: 500;\n    transform-origin: 0 0;\n    height: 100%;\n    width: 100%;\n    background: none;\n    font-size: 11px;\n\n    &.hide {\n      display: none;\n    }\n  }\n\n  &.required {\n    border: 1px solid $verdocs-red-1;\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.4s 1;\n  }\n\n  verdocs-button-panel {\n    top: -3px;\n    left: -2px;\n    opacity: 0.5;\n    z-index: 1000;\n    cursor: pointer;\n    position: absolute;\n    transform: scale(0.6);\n\n    &[data-active],\n    &:hover {\n      opacity: 1;\n    }\n\n    .icon {\n      svg {\n        fill: #333333;\n      }\n\n      &:hover {\n        svg {\n          fill: #000000;\n        }\n      }\n    }\n  }\n\n  .settings-icon {\n    position: absolute;\n    top: -3px;\n    left: -20px;\n    display: inline-block;\n    cursor: pointer;\n    opacity: 0.3;\n\n    svg {\n      fill: $border-color;\n    }\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n}\n\n@keyframes verdocs-field-pulse {\n  0% {\n    background-color: rgba(0, 0, 0, 0.35);\n  }\n  50% {\n    background-color: rgba(0, 0, 0, 0);\n  }\n  100% {\n    background-color: rgba(0, 0, 0, 0.35);\n  }\n}\n","import {ITemplateField, getRGBA, IEnvelopeField} from '@verdocs/js-sdk';\nimport {Component, Event, EventEmitter, h, Host, Method, Prop, Fragment, State} from '@stencil/core';\nimport {SettingsIcon} from '../../../utils/Icons';\nimport {Store} from '../../../utils/Datastore';\n\n/**\n * Displays an initial field. If an initial already exists, it will be displayed and the field\n * will be disabled. Otherwise, a placeholder button will be shown. Clicking the button will\n * show a dialog to adopt an initial.\n *\n * NOTE: When initial fields are completed they will be filled with an initial \"stamp\".\n * This requires operation against a live, valid envelope. If you are testing this component\n * in Storybook, it will not be visible here.\n */\n@Component({\n  tag: 'verdocs-field-initial',\n  styleUrl: 'verdocs-field-initial.scss',\n  shadow: false,\n})\nexport class VerdocsFieldInitial {\n  /**\n   * Fields may be attached to templates or envelopes, but only template fields may be edited.\n   */\n  @Prop({reflect: true}) source: 'template' | 'envelope' = 'template';\n\n  /**\n   * The source template or envelope ID the field is found in.\n   */\n  @Prop({reflect: true}) sourceid: string = '';\n\n  /**\n   * The name of the field to display.\n   */\n  @Prop({reflect: true}) fieldname: string = '';\n\n  /**\n   * Override the field's settings. This is intended to be used during signing when fields are being\n   * mutated.\n   */\n  @Prop() field: IEnvelopeField | null | undefined = null;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop({reflect: true}) disabled?: boolean = false;\n\n  /**\n   * The document or template field to display.\n   */\n  @Prop({reflect: true}) initials: string = '';\n\n  /**\n   * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n   * changed, so it should typically only be enabled in the Builder.\n   */\n  @Prop({reflect: true}) editable?: boolean = false;\n\n  /**\n   * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n   */\n  @Prop({reflect: true}) moveable?: boolean = false;\n\n  /**\n   * If set, the field is considered \"done\" and is drawn in a display-final-value state.\n   */\n  @Prop({reflect: true}) done?: boolean = false;\n\n  /**\n   * If set, the field will be be scaled horizontally by this factor.\n   */\n  @Prop({reflect: true}) xscale?: number = 1;\n\n  /**\n   * If set, the field will be be scaled vertically by this factor.\n   */\n  @Prop({reflect: true}) yscale?: number = 1;\n\n  /**\n   * The page the field is on\n   */\n  @Prop({reflect: true}) pagenumber?: number = 1;\n\n  /**\n   * Event emitted when an initial block is adopted by the user. The event detail will contain the base64 string of the initial image.\n   */\n  @Event({composed: true}) adopt: EventEmitter<string>;\n\n  /**\n   * Event fired when the step is cancelled. This is called exit to avoid conflicts with the JS-reserved \"cancel\" event name.\n   */\n  @Event({composed: true}) exit: EventEmitter;\n\n  /**\n   * Event fired when the input field value changes. Note that this will only be fired on blur, tab-out, ENTER key press, etc.\n   * It is generally the best event to subscribe to than `input` for most cases EXCEPT autocomplete fields that need to see every\n   * keypress.\n   */\n  @Event({composed: true}) fieldChange: EventEmitter<string>;\n\n  /**\n   * Event fired when the field's settings are changed.\n   */\n  @Event({composed: true}) settingsChanged: EventEmitter<{fieldName: string; field: ITemplateField}>;\n\n  /**\n   * Event fired on every character entered into / deleted from the field.\n   */\n  @Event({composed: true}) settingsPress: EventEmitter;\n\n  /**\n   * Event fired when the field is deleted.\n   */\n  @Event({composed: true}) deleted: EventEmitter<{fieldName: string}>;\n\n  @State() showingProperties?: boolean = false;\n  @State() focused?: boolean = false;\n\n  @Method() async focusField() {\n    this.handleShow();\n  }\n\n  @State()\n  tempInitials: string = '';\n\n  private dialog?: any;\n\n  hideDialog() {\n    this.dialog?.remove();\n    this.dialog = null;\n    this.focused = false;\n  }\n\n  handleAdopt(e: any) {\n    console.log('[INITIAL] Adopted initials');\n    this.tempInitials = e.detail;\n    this.fieldChange?.emit(this.tempInitials);\n    this.hideDialog();\n  }\n\n  handleShow() {\n    this.dialog = document.createElement('verdocs-initial-dialog');\n    this.dialog.setAttribute('initials', this.initials);\n    // this.dialog.setAttribute('roleindex', this.roleindex);\n    this.dialog.addEventListener('exit', () => this.hideDialog());\n    this.dialog.addEventListener('next', (e: any) => this.handleAdopt(e));\n    document.body.append(this.dialog);\n    this.focused = true;\n  }\n\n  @Method()\n  async showSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.showPanel) {\n      settingsPanel.showPanel();\n    }\n  }\n\n  @Method()\n  async hideSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.hidePanel) {\n      settingsPanel.hidePanel();\n    }\n  }\n\n  render() {\n    const {source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1} = this;\n\n    const {index, field} = Store.getField(source, sourceid, fieldname, this.field);\n    const {required = false, value = '', label = '', settings = {}} = field || {};\n    const backgroundColor = getRGBA(index);\n    const {base64} = settings;\n\n    if (done) {\n      return <Host class={{done}}>{value && <img src={value} alt=\"Initial\" />}</Host>;\n    }\n\n    return (\n      <Host class={{required, disabled, done, focused}} style={{backgroundColor}}>\n        {label && <label>{label}</label>}\n\n        {base64 ? <img src={base64} alt=\"Initial\" /> : <button onClick={() => !disabled && this.handleShow()}>Initial</button>}\n\n        {editable && (\n          <Fragment>\n            <div\n              id={`verdocs-settings-panel-trigger-${fieldname}`}\n              style={{transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})`}}\n              class=\"settings-icon\"\n              innerHTML={SettingsIcon}\n              onClick={(e: any) => {\n                e.stopPropagation();\n                this.showingProperties = !this.showingProperties;\n              }}\n            />\n\n            {this.showingProperties && (\n              <verdocs-portal anchor={`verdocs-settings-panel-trigger-${fieldname}`} onClickAway={() => (this.showingProperties = false)}>\n                <verdocs-template-field-properties\n                  templateId={sourceid}\n                  fieldName={fieldname}\n                  onClose={() => (this.showingProperties = false)}\n                  onDelete={() => {\n                    this.deleted?.emit({fieldName: field.name});\n                    return this.hideSettingsPanel();\n                  }}\n                  onSettingsChanged={e => {\n                    this.settingsChanged?.emit(e.detail);\n                    return this.hideSettingsPanel();\n                  }}\n                  helpText={\"initial fields capture the recipient's initials on a clause or page.\"}\n                />\n              </verdocs-portal>\n            )}\n          </Fragment>\n        )}\n      </Host>\n    );\n  }\n}\n","@import '../../../theme.scss';\n\n// See https://www.sliderrevolution.com/resources/styling-radio-buttons/\nverdocs-field-radio {\n  font-family: $verdocs-primary-font;\n  width: 14px;\n  height: 14px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  scroll-margin: 20px 0;\n  background-color: transparent;\n  transform-origin: bottom left;\n  border-radius: 100%;\n\n  &.focused {\n    animation: verdocs-field-pulse 0.4s 1;\n  }\n\n  svg {\n    margin-top: 4px;\n  }\n\n  &.disabled.done {\n    opacity: 1;\n  }\n\n  // To avoid conflicting with the use of a label for the checkbox itself\n  div.label {\n    top: -14px;\n    left: -1px;\n    height: 14px;\n    color: white;\n    padding: 0 4px;\n    font-size: 9px;\n    line-height: 13px;\n    position: absolute;\n    background: #4a4a99;\n    border-top-left-radius: 2px;\n    border-top-right-radius: 2px;\n  }\n\n  div.group {\n    top: 14px;\n    left: -1px;\n    height: 14px;\n    color: white;\n    padding: 0 4px;\n    font-size: 9px;\n    line-height: 13px;\n    position: absolute;\n    background: #bb0589;\n    border-bottom-left-radius: 2px;\n    border-bottom-right-radius: 2px;\n  }\n\n  input {\n    // This is needed to bring down the cursor from the parent element, which is where interactjs applies it\n    cursor: inherit;\n  }\n\n  &.disabled input {\n    opacity: 0.5;\n  }\n\n  &.done input[type='radio'] {\n    margin: 0;\n    padding: 0;\n    width: 10px;\n    height: 10px;\n  }\n\n  &:not(.done) input[type='radio'] {\n    position: absolute;\n    opacity: 0;\n\n    + label {\n      &:before {\n        content: '';\n        //background: $verdocs-grey-3;\n        border-radius: 100%;\n        border: 1px solid rgba(0, 0, 0, 0.6);\n        display: inline-block;\n        width: 12px;\n        height: 12px;\n        position: absolute;\n        left: 0;\n        top: 0;\n        cursor: pointer;\n        text-align: center;\n        transition: all 250ms ease;\n      }\n    }\n\n    &:checked {\n      + label {\n        &:before {\n          background-color: $verdocs-green;\n          box-shadow: inset 0 0 0 2px $verdocs-grey-3;\n        }\n      }\n    }\n\n    &:focus {\n      + label {\n        &:before {\n          outline: none;\n          border-color: $verdocs-green;\n        }\n      }\n    }\n\n    &:disabled {\n      + label {\n        &:before {\n          box-shadow: inset 0 0 0 4px $verdocs-grey-3;\n          border-color: darken($verdocs-grey-3, 25%);\n          background: darken($verdocs-grey-3, 25%);\n        }\n      }\n    }\n\n    + label {\n      &:empty {\n        &:before {\n          margin-right: 0;\n        }\n      }\n    }\n  }\n\n  &.required {\n    border: 1px solid $verdocs-red-1;\n  }\n\n  &.hide {\n    display: none;\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.4s 1;\n  }\n\n  verdocs-button-panel {\n    margin-left: -20px;\n    margin-top: -7px;\n    transform: scale(0.7);\n  }\n\n  .settings-icon {\n    position: absolute;\n    top: -6px;\n    left: -20px;\n    display: inline-block;\n    cursor: pointer;\n    opacity: 0.3;\n\n    svg {\n      fill: $border-color;\n    }\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n}\n\n@keyframes verdocs-field-pulse {\n  0% {\n    background-color: rgba(0, 0, 0, 0.35);\n  }\n  50% {\n    background-color: rgba(0, 0, 0, 0);\n  }\n  100% {\n    background-color: rgba(0, 0, 0, 0.35);\n  }\n}\n","import {ITemplateField, getRGBA, IEnvelopeField} from '@verdocs/js-sdk';\nimport {Component, Event, EventEmitter, h, Host, Method, Prop, Fragment, State} from '@stencil/core';\nimport {SettingsIcon} from '../../../utils/Icons';\nimport {Store} from '../../../utils/Datastore';\n\nconst RadioIconUnselected = `<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z\"></path></svg>`;\n\nconst RadioIconSelected = `<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z\"></path></svg>`;\n\n/**\n * Displays a radio button.\n */\n@Component({\n  tag: 'verdocs-field-radio',\n  styleUrl: 'verdocs-field-radio.scss',\n  shadow: false,\n})\nexport class VerdocsFieldRadio {\n  /**\n   * Fields may be attached to templates or envelopes, but only template fields may be edited.\n   */\n  @Prop({reflect: true}) source: 'template' | 'envelope' = 'template';\n\n  /**\n   * The source template or envelope ID the field is found in.\n   */\n  @Prop({reflect: true}) sourceid: string = '';\n\n  /**\n   * The name of the field to display.\n   */\n  @Prop({reflect: true}) fieldname: string = '';\n\n  /**\n   * Override the field's settings. This is intended to be used during signing when fields are being\n   * mutated.\n   */\n  @Prop() field: IEnvelopeField | null | undefined = null;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used in Storybook mode.\n   */\n  @Prop({reflect: true}) disabled?: boolean = false;\n\n  /**\n   * If set, overrides the field's required object. Primarily used in Storybook mode.\n   */\n  @Prop({reflect: true}) required?: boolean = false;\n\n  /**\n   * If set, the field is considered \"done\" and is drawn in a display-final-value state.\n   */\n  @Prop({reflect: true}) done?: boolean = false;\n\n  /**\n   * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n   * changed, so it should typically only be enabled in the Builder.\n   */\n  @Prop({reflect: true}) editable?: boolean = false;\n\n  /**\n   * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n   */\n  @Prop({reflect: true}) moveable?: boolean = false;\n\n  /**\n   * If set, the field will be be scaled horizontally by this factor.\n   */\n  @Prop({reflect: true}) xscale?: number = 1;\n\n  /**\n   * If set, the field will be be scaled vertically by this factor.\n   */\n  @Prop({reflect: true}) yscale?: number = 1;\n\n  /**\n   * The page the field is on\n   */\n  @Prop({reflect: true}) pagenumber?: number = 1;\n\n  @State() showingProperties?: boolean = false;\n  @State() focused = false;\n\n  /**\n   * Event fired when the field's settings are changed.\n   */\n  @Event({composed: true}) settingsChanged: EventEmitter<{fieldName: string; field: ITemplateField}>;\n\n  /**\n   * Event fired when the field is deleted.\n   */\n  @Event({composed: true}) deleted: EventEmitter<{fieldName: string}>;\n\n  @Method()\n  async focusField() {\n    // Our input field is fake, so we fake the flash too\n    this.focused = true;\n    setTimeout(() => {\n      this.focused = false;\n    }, 500);\n  }\n\n  @Method()\n  async showSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.showPanel) {\n      settingsPanel.showPanel();\n    }\n  }\n\n  @Method()\n  async hideSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.hidePanel) {\n      settingsPanel.hidePanel();\n    }\n  }\n\n  render() {\n    const {source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1} = this;\n\n    const {index, field} = Store.getField(source, sourceid, fieldname, this.field);\n    const {name, required = false, label = '', group = '', value = false} = field || {};\n    const backgroundColor = getRGBA(index);\n\n    const selected = value === 'true';\n\n    if (done) {\n      return (\n        <Host class={{done}} style={{maxWidth: '10px'}}>\n          <span innerHTML={selected ? RadioIconSelected : RadioIconUnselected} />\n        </Host>\n      );\n    }\n\n    return (\n      <Host class={{required: this.required || required, disabled, done, focused}} style={{backgroundColor}}>\n        {label && <div class=\"label\">{label}</div>}\n        {editable && group && <div class=\"group\">{group}</div>}\n\n        <input id={fieldname} type=\"radio\" name={group || fieldname} value={name} checked={!!selected} disabled={disabled} required={required} />\n        <label htmlFor={fieldname} />\n\n        {editable && (\n          <Fragment>\n            <div\n              id={`verdocs-settings-panel-trigger-${fieldname}`}\n              style={{transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})`}}\n              class=\"settings-icon\"\n              innerHTML={SettingsIcon}\n              onClick={(e: any) => {\n                e.stopPropagation();\n                this.showingProperties = !this.showingProperties;\n              }}\n            />\n\n            {this.showingProperties && (\n              <verdocs-portal anchor={`verdocs-settings-panel-trigger-${fieldname}`} onClickAway={() => (this.showingProperties = false)}>\n                <verdocs-template-field-properties\n                  templateId={sourceid}\n                  fieldName={fieldname}\n                  onClose={() => (this.showingProperties = false)}\n                  onDelete={() => {\n                    this.deleted?.emit({fieldName: fieldname});\n                    return this.hideSettingsPanel();\n                  }}\n                  onSettingsChanged={e => {\n                    this.settingsChanged?.emit(e.detail);\n                    return this.hideSettingsPanel();\n                  }}\n                  helpText={\"Radio buttons capture the recipient's selection of just one of several related (exclusive) options.\"}\n                />\n              </verdocs-portal>\n            )}\n          </Fragment>\n        )}\n      </Host>\n    );\n  }\n}\n","@import '../../../theme.scss';\n\nverdocs-field-signature {\n  font-family: $verdocs-primary-font;\n  width: 83px;\n  height: 36px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  scroll-margin: 20px 0;\n  letter-spacing: 0.3px;\n  background-color: transparent;\n  transform-origin: bottom left;\n  border: 1px solid rgba(0, 0, 0, 0.2);\n\n  label {\n    top: -14px;\n    left: -1px;\n    height: 14px;\n    color: white;\n    padding: 0 4px;\n    font-size: 9px;\n    line-height: 13px;\n    position: absolute;\n    background: #4a4a99;\n    border-top-left-radius: 2px;\n    border-top-right-radius: 2px;\n  }\n\n  &.done {\n    border: none;\n    opacity: 1;\n  }\n\n  img {\n    display: block;\n    max-width: 100%;\n    max-height: 100%;\n  }\n\n  &.disabled img {\n    opacity: 0.5;\n  }\n\n  button {\n    // This is needed to bring down the cursor from the parent element, which is where interactjs applies it\n    cursor: inherit;\n\n    box-sizing: border-box;\n    border: none;\n    color: rgba(0, 0, 0, 0.87);\n    font-weight: 500;\n    transform-origin: 0 0;\n    height: 100%;\n    width: 100%;\n    background: none;\n    font-size: 11px;\n\n    &.hide {\n      display: none;\n    }\n  }\n\n  &.required {\n    border: 1px solid rgb(204, 0, 0);\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.4s 1;\n  }\n\n  verdocs-button-panel {\n    top: -3px;\n    left: -2px;\n    opacity: 0.5;\n    z-index: 1000;\n    cursor: pointer;\n    position: absolute;\n    transform: scale(0.6);\n\n    &[data-active],\n    &:hover {\n      opacity: 1;\n    }\n\n    .icon {\n      svg {\n        fill: #333333;\n      }\n\n      &:hover {\n        svg {\n          fill: #000000;\n        }\n      }\n    }\n  }\n\n  .settings-icon {\n    position: absolute;\n    top: -3px;\n    left: -20px;\n    display: inline-block;\n    cursor: pointer;\n    opacity: 0.3;\n\n    svg {\n      fill: $border-color;\n    }\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n}\n\n@keyframes verdocs-field-pulse {\n  0% {\n    background-color: rgba(0, 0, 0, 0.35);\n  }\n  50% {\n    background-color: rgba(0, 0, 0, 0);\n  }\n  100% {\n    background-color: rgba(0, 0, 0, 0.35);\n  }\n}\n","import {ITemplateField, getRGBA, IEnvelopeField} from '@verdocs/js-sdk';\nimport {Component, h, Host, Prop, Event, EventEmitter, Method, Fragment, State} from '@stencil/core';\nimport {SettingsIcon} from '../../../utils/Icons';\nimport {Store} from '../../../utils/Datastore';\n\n/**\n * Displays a signature field. If a signature already exists, it will be displayed and the field\n * will be disabled. Otherwise, a placeholder button will be shown. Clicking the button will\n * show a dialog to adopt a signature.\n *\n * NOTE: When signature fields are completed they will be filled with a signature \"stamp\".\n * This requires operation against a live, valid envelope. If you are testing this component\n * in Storybook, it will not be visible here.\n */\n@Component({\n  tag: 'verdocs-field-signature',\n  styleUrl: 'verdocs-field-signature.scss',\n  shadow: false,\n})\nexport class VerdocsFieldSignature {\n  /**\n   * Fields may be attached to templates or envelopes, but only template fields may be edited.\n   */\n  @Prop({reflect: true}) source: 'template' | 'envelope' = 'template';\n\n  /**\n   * The source template or envelope ID the field is found in.\n   */\n  @Prop({reflect: true}) sourceid: string = '';\n\n  /**\n   * The name of the field to display.\n   */\n  @Prop({reflect: true}) fieldname: string = '';\n\n  /**\n   * Override the field's settings. This is intended to be used during signing when fields are being\n   * mutated.\n   */\n  @Prop() field: IEnvelopeField | null | undefined = null;\n\n  /**\n   * If set, the signature creation dialog will be initialized with this text.\n   */\n  @Prop({reflect: true}) name?: string = '';\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop({reflect: true}) disabled?: boolean = false;\n\n  /**\n   * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n   * changed, so it should typically only be enabled in the Builder.\n   */\n  @Prop({reflect: true}) editable?: boolean = false;\n\n  /**\n   * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n   */\n  @Prop({reflect: true}) moveable?: boolean = false;\n\n  /**\n   * If set, the field is considered \"done\" and is drawn in a display-final-value state.\n   */\n  @Prop({reflect: true}) done?: boolean = false;\n\n  /**\n   * If set, the field will be be scaled horizontally by this factor.\n   */\n  @Prop({reflect: true}) xscale?: number = 1;\n\n  /**\n   * If set, the field will be be scaled vertically by this factor.\n   */\n  @Prop({reflect: true}) yscale?: number = 1;\n\n  /**\n   * The page the field is on\n   */\n  @Prop({reflect: true}) pagenumber?: number = 1;\n\n  /**\n   * Event emitted when the field has changed.\n   */\n  @Event({composed: true}) fieldChange: EventEmitter<string>;\n\n  /**\n   * Event fired on every character entered into / deleted from the field.\n   */\n  @Event({composed: true}) settingsPress: EventEmitter;\n\n  /**\n   * Event fired when the field's settings are changed.\n   */\n  @Event({composed: true}) settingsChanged: EventEmitter<{fieldName: string; field: ITemplateField}>;\n\n  /**\n   * Event fired when the field is deleted.\n   */\n  @Event({composed: true}) deleted: EventEmitter<{fieldName: string}>;\n\n  @State() showingProperties?: boolean = false;\n  @State() focused?: boolean = false;\n\n  @Method() async focusField() {\n    this.handleShow();\n  }\n\n  @State()\n  tempSignature: string = '';\n\n  private dialog?: any;\n\n  hideDialog() {\n    this.dialog?.remove();\n    this.dialog = null;\n    this.focused = false;\n  }\n\n  handleAdopt(e: any) {\n    console.log('[SIGNATURE] Adopted signature');\n    this.tempSignature = e.detail;\n    this.fieldChange?.emit(this.tempSignature);\n    this.hideDialog();\n  }\n\n  handleShow() {\n    this.dialog = document.createElement('verdocs-signature-dialog');\n    this.dialog.setAttribute('name', this.name);\n    // this.dialog.setAttribute('roleindex', this.roleindex);\n    this.dialog.addEventListener('exit', () => this.hideDialog());\n    this.dialog.addEventListener('next', (e: any) => this.handleAdopt(e));\n    document.body.append(this.dialog);\n    this.focused = true;\n  }\n\n  @Method()\n  async showSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.showPanel) {\n      settingsPanel.showPanel();\n    }\n  }\n\n  @Method()\n  async hideSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.hidePanel) {\n      settingsPanel.hidePanel();\n    }\n    this.showingProperties = false;\n  }\n\n  render() {\n    const {source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1} = this;\n\n    const {index, field} = Store.getField(source, sourceid, fieldname, this.field);\n    const {required = false, value = '', label = '', settings = {}} = field || {};\n    const {base64} = settings;\n    const backgroundColor = getRGBA(index);\n\n    if (done) {\n      return <Host class={{done}}>{value && <img src={base64} alt=\"\" />}</Host>;\n    }\n\n    return (\n      <Host class={{required, disabled, done, focused}} style={{backgroundColor}}>\n        {label && <label>{label}</label>}\n\n        {base64 ? <img src={base64} alt=\"\" /> : <button onClick={() => !disabled && this.handleShow()}>Signature</button>}\n\n        {editable && (\n          <Fragment>\n            <div\n              id={`verdocs-settings-panel-trigger-${fieldname}`}\n              style={{transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})`}}\n              class=\"settings-icon\"\n              innerHTML={SettingsIcon}\n              onClick={(e: any) => {\n                e.stopPropagation();\n                this.showingProperties = !this.showingProperties;\n              }}\n            />\n\n            {this.showingProperties && (\n              <verdocs-portal anchor={`verdocs-settings-panel-trigger-${fieldname}`} onClickAway={() => (this.showingProperties = false)}>\n                <verdocs-template-field-properties\n                  templateId={sourceid}\n                  fieldName={fieldname}\n                  onClose={() => this.hideSettingsPanel()}\n                  onDelete={() => {\n                    this.deleted?.emit({fieldName: fieldname});\n                    return this.hideSettingsPanel();\n                  }}\n                  onSettingsChanged={e => {\n                    this.settingsChanged?.emit(e.detail);\n                    return this.hideSettingsPanel();\n                  }}\n                  helpText={\"Signature fields capture a recipient's signature on a document.\"}\n                />\n              </verdocs-portal>\n            )}\n          </Fragment>\n        )}\n      </Host>\n    );\n  }\n}\n","@import '../../../theme.scss';\n\nverdocs-field-textarea {\n  width: 150px;\n  height: 15px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  scroll-margin: 20px 0;\n  box-sizing: border-box;\n  background-color: transparent;\n  transform-origin: bottom left;\n  font-family: $verdocs-primary-font;\n  border: 1px solid rgba(0, 0, 0, 0.2);\n\n  textarea {\n    // This is needed to bring down the cursor from the parent element, which is where interactjs applies it\n    cursor: inherit;\n\n    width: 100%;\n    height: 100%;\n    resize: none;\n    border: none;\n    outline: none;\n    padding: 0 3px;\n    font-size: 11px;\n    background: none;\n    font-weight: 500;\n    transform-origin: 0 0;\n    box-sizing: border-box;\n    color: rgba(0, 0, 0, 0.87);\n\n    &.hide {\n      display: none;\n    }\n  }\n\n  &.disabled textarea {\n    opacity: 0.5;\n  }\n\n  label {\n    top: -14px;\n    left: -1px;\n    height: 14px;\n    color: white;\n    padding: 0 4px;\n    font-size: 9px;\n    line-height: 13px;\n    position: absolute;\n    background: #4a4a99;\n    border-top-left-radius: 2px;\n    border-top-right-radius: 2px;\n  }\n\n  &.required {\n    border: 1px solid rgb(204, 0, 0);\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.4s 1;\n  }\n\n  verdocs-button-panel {\n    top: -3px;\n    left: -2px;\n    opacity: 0.5;\n    z-index: 1000;\n    cursor: pointer;\n    position: absolute;\n    transform: scale(0.6);\n\n    &[data-active],\n    &:hover {\n      opacity: 1;\n    }\n\n    .icon {\n      svg {\n        fill: #333333;\n      }\n\n      &:hover {\n        svg {\n          fill: #000000;\n        }\n      }\n    }\n  }\n\n  .settings-icon {\n    position: absolute;\n    top: -3px;\n    left: -20px;\n    display: inline-block;\n    cursor: pointer;\n    opacity: 0.3;\n\n    svg {\n      fill: $border-color;\n    }\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n}\n\n@keyframes verdocs-field-pulse {\n  0% {\n    background-color: rgba(0, 0, 0, 0.35);\n  }\n  50% {\n    background-color: rgba(0, 0, 0, 0);\n  }\n  100% {\n    background-color: rgba(0, 0, 0, 0.35);\n  }\n}\n","import interact from 'interactjs';\nimport {IEnvelopeField, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {ITemplateField, updateField, getRGBA} from '@verdocs/js-sdk';\nimport {Component, h, Host, Prop, Method, Event, EventEmitter, Element, Fragment, State} from '@stencil/core';\nimport {SettingsIcon} from '../../../utils/Icons';\nimport {Store} from '../../../utils/Datastore';\n\n/**\n * Display a multi-line text input field. Reminder: the \"position\" of the field is specified\n * as the BOTTOM-LEFT corner.\n */\n@Component({\n  tag: 'verdocs-field-textarea',\n  styleUrl: 'verdocs-field-textarea.scss',\n  shadow: false,\n})\nexport class VerdocsFieldTextarea {\n  @Element() el: HTMLElement;\n  private inputEl: HTMLTextAreaElement;\n\n  /**\n   * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n   * This component self-manages its resize (width) behavior when in edit-template mode, and uses\n   * this endpoint to save changes.\n   */\n  @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n  /**\n   * Fields may be attached to templates or envelopes, but only template fields may be edited.\n   */\n  @Prop({reflect: true}) source: 'template' | 'envelope' = 'template';\n\n  /**\n   * The source template or envelope ID the field is found in.\n   */\n  @Prop({reflect: true}) sourceid: string = '';\n\n  /**\n   * The name of the field to display.\n   */\n  @Prop({reflect: true}) fieldname: string = '';\n\n  /**\n   * Override the field's settings. This is intended to be used during signing when fields are being\n   * mutated.\n   */\n  @Prop() field: IEnvelopeField | null | undefined = null;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop({reflect: true}) disabled?: boolean = false;\n\n  /**\n   * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n   * changed, so it should typically only be enabled in the Builder.\n   */\n  @Prop({reflect: true}) editable?: boolean = false;\n\n  /**\n   * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n   */\n  @Prop({reflect: true}) moveable?: boolean = false;\n\n  /**\n   * If set, the field is considered \"done\" and is drawn in a display-final-value state.\n   */\n  @Prop({reflect: true}) done?: boolean = false;\n\n  /**\n   * If set, the field will be be scaled horizontally by this factor.\n   */\n  @Prop({reflect: true}) xscale?: number = 1;\n\n  /**\n   * If set, the field will be be scaled vertically by this factor.\n   */\n  @Prop({reflect: true}) yscale?: number = 1;\n\n  /**\n   * The page the field is on\n   */\n  @Prop({reflect: true}) pagenumber?: number = 1;\n\n  @Method()\n  async focusField() {\n    this.inputEl.focus();\n  }\n\n  /**\n   * Event fired when the field's settings are changed.\n   */\n  @Event({composed: true}) settingsChanged: EventEmitter<{fieldName: string; field: ITemplateField}>;\n\n  /**\n   * Event fired when the field is deleted.\n   */\n  @Event({composed: true}) deleted: EventEmitter<{fieldName: string}>;\n\n  @State() showingProperties?: boolean = false;\n\n  @Method()\n  async showSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.showPanel) {\n      settingsPanel.showPanel();\n    }\n  }\n\n  @Method()\n  async hideSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.hidePanel) {\n      settingsPanel.hidePanel();\n    }\n  }\n\n  @State() focused?: boolean = false;\n\n  componentDidRender() {\n    interact.dynamicDrop(true);\n\n    if (this.editable) {\n      interact(this.el).resizable({\n        edges: {top: true, bottom: true, left: true, right: true},\n        listeners: {\n          start: this.handleResizeStart.bind(this),\n          move: this.handleResize.bind(this),\n          end: this.handleResizeEnd.bind(this),\n        },\n      });\n    }\n  }\n\n  handleResizeStart(e: any) {\n    e.preventDefault();\n    e.stopPropagation();\n  }\n\n  handleResize(e: any) {\n    let {x = 0, y = 0, h = 0} = e.target.dataset;\n    let {width, height} = e.rect;\n\n    x = (parseFloat(x) || 0) + e.deltaRect.left;\n    y = (parseFloat(y) || 0) + e.deltaRect.top;\n    h = (parseFloat(h) || 0) + e.deltaRect.height;\n\n    Object.assign(e.target.style, {\n      width: `${width}px`,\n      height: `${height}px`,\n      transform: `translate(${x}px, ${y + h}px)`,\n    });\n\n    Object.assign(e.target.dataset, {x, y, h});\n  }\n\n  handleResizeEnd(e: any) {\n    const {source, sourceid, fieldname} = this;\n    const {field} = Store.getField(source, sourceid, fieldname, this.field);\n    if (!field) {\n      return;\n    }\n\n    const [translateX, translateY] = e.target.style.transform.split('(')[1].split(')')[0].split(',').map(parseFloat);\n\n    const width = Math.round(parseFloat(e.target.style.width) / this.xscale);\n    const height = Math.round(parseFloat(e.target.style.height) / this.yscale);\n    const x = Math.round(field.x + translateX / this.xscale);\n    const y = Math.round(field.y - translateY / this.yscale);\n\n    updateField(this.endpoint, this.sourceid, this.fieldname, {x, y, width, height})\n      .then(field => {\n        this.settingsChanged?.emit({fieldName: this.fieldname, field});\n        Object.assign(e.target.dataset, {x: 0, y: 0, h: 0});\n      })\n      .catch(e => console.log('Field update failed', e));\n  }\n\n  render() {\n    const {source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1} = this;\n\n    const {index, field} = Store.getField(source, sourceid, fieldname, this.field);\n    const {required = false, placeholder = '', value = '', label = ''} = field || {};\n    const backgroundColor = getRGBA(index);\n\n    if (done) {\n      return <Host class={{done}}>{value}</Host>;\n    }\n\n    return (\n      <Host class={{required, disabled, done, focused}} style={{backgroundColor}}>\n        {label && <label>{label}</label>}\n\n        <textarea\n          name={fieldname}\n          disabled={disabled}\n          required={required}\n          placeholder={placeholder}\n          ref={el => (this.inputEl = el)}\n          onFocus={() => (this.focused = true)}\n          onBlur={() => (this.focused = false)}\n        >\n          {value}\n        </textarea>\n\n        {editable && (\n          <Fragment>\n            <div\n              id={`verdocs-settings-panel-trigger-${fieldname}`}\n              style={{transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})`}}\n              class=\"settings-icon\"\n              innerHTML={SettingsIcon}\n              onClick={(e: any) => {\n                e.stopPropagation();\n                this.showingProperties = !this.showingProperties;\n              }}\n            />\n\n            {this.showingProperties && (\n              <verdocs-portal anchor={`verdocs-settings-panel-trigger-${fieldname}`} onClickAway={() => (this.showingProperties = false)}>\n                <verdocs-template-field-properties\n                  templateId={sourceid}\n                  fieldName={fieldname}\n                  onClose={() => (this.showingProperties = false)}\n                  onDelete={() => {\n                    this.deleted?.emit({fieldName: fieldname});\n                    return this.hideSettingsPanel();\n                  }}\n                  onSettingsChanged={e => {\n                    this.settingsChanged?.emit(e.detail);\n                    return this.hideSettingsPanel();\n                  }}\n                  helpText={'Text areas may be used to create multi-line text fields.'}\n                />\n              </verdocs-portal>\n            )}\n          </Fragment>\n        )}\n      </Host>\n    );\n  }\n}\n","@import '../../../theme.scss';\n\nverdocs-field-textbox {\n  font-family: $verdocs-primary-font;\n  box-sizing: border-box;\n  width: 150px;\n  height: 15px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  scroll-margin: 20px 0;\n  letter-spacing: -0.2px;\n  background-color: transparent;\n  transform-origin: bottom left;\n  border: 1px solid rgba(0, 0, 0, 0.2);\n\n  .edge-top,\n  .edge-right,\n  .edge-left,\n  .edge-bottom {\n    position: absolute;\n    z-index: 10;\n  }\n\n  .edge-top {\n    top: -2px;\n    left: 0;\n    right: 0;\n    height: 5px;\n  }\n\n  .edge-right {\n    top: 0;\n    bottom: 0;\n    right: -2px;\n    width: 5px;\n  }\n\n  .edge-left {\n    top: 0;\n    left: -2px;\n    bottom: 0;\n    width: 5px;\n  }\n\n  .edge-bottom {\n    bottom: -2px;\n    left: 0;\n    right: 0;\n    height: 5px;\n  }\n\n  input {\n    // This is needed to bring down the cursor from the parent element, which is where interactjs applies it\n    cursor: inherit;\n\n    width: 100%;\n    height: 100%;\n    border: none;\n    outline: none;\n    padding: 0 3px;\n    font-size: 11px;\n    background: none;\n    font-weight: 500;\n    position: absolute;\n    transform-origin: 0 0;\n    box-sizing: border-box;\n    color: rgba(0, 0, 0, 0.87);\n\n    &.hide {\n      display: none;\n    }\n  }\n\n  &.disabled input {\n    opacity: 0.5;\n  }\n\n  textarea {\n    // This is needed to bring down the cursor from the parent element, which is where interactjs applies it\n    cursor: inherit;\n\n    width: 100%;\n    height: 100%;\n    resize: none;\n    border: none;\n    outline: none;\n    padding: 0 3px;\n    font-size: 11px;\n    background: none;\n    font-weight: 500;\n    transform-origin: 0 0;\n    box-sizing: border-box;\n    color: rgba(0, 0, 0, 0.87);\n\n    &.hide {\n      display: none;\n    }\n  }\n\n  &.disabled textarea {\n    opacity: 0.5;\n  }\n\n  label {\n    top: -14px;\n    left: -1px;\n    height: 14px;\n    color: white;\n    padding: 0 4px;\n    font-size: 9px;\n    line-height: 13px;\n    position: absolute;\n    background: #4a4a99;\n    border-top-left-radius: 2px;\n    border-top-right-radius: 2px;\n  }\n\n  &.required {\n    border: 1px solid rgb(204, 0, 0);\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.4s 1;\n  }\n\n  verdocs-button-panel {\n    top: -3px;\n    left: -2px;\n    opacity: 0.5;\n    z-index: 1000;\n    cursor: pointer;\n    position: absolute;\n    transform: scale(0.6);\n\n    &[data-active],\n    &:hover {\n      opacity: 1;\n    }\n\n    .icon {\n      svg {\n        fill: #333333;\n      }\n\n      &:hover {\n        svg {\n          fill: #000000;\n        }\n      }\n    }\n  }\n\n  // @see https://community.logmein.com/t5/LastPass-Support-Discussions/placeholder-text-overrides-data-lpignore-quot-true-quot/td-p/295135\n  // LastPass is ignoring the data-lpignore attribute in some cases\n  [data-lastpass-icon-root] {\n    display: none !important;\n  }\n\n  .settings-icon {\n    position: absolute;\n    top: -4px;\n    left: -18px;\n    display: inline-block;\n    cursor: pointer;\n    opacity: 0.3;\n\n    svg {\n      fill: $border-color;\n    }\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n}\n\n@keyframes verdocs-field-pulse {\n  0% {\n    background-color: rgba(0, 0, 0, 0.35);\n  }\n  50% {\n    background-color: rgba(0, 0, 0, 0);\n  }\n  100% {\n    background-color: rgba(0, 0, 0, 0.35);\n  }\n}\n","import interact from 'interactjs';\nimport {getRGBA, IEnvelopeField, ITemplateField, updateField, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, h, Host, Element, Prop, Method, Event, EventEmitter, Fragment, State} from '@stencil/core';\nimport {SettingsIcon} from '../../../utils/Icons';\nimport {Store} from '../../../utils/Datastore';\n\n/**\n * Display a simple 1-line text input field.\n */\n@Component({\n  tag: 'verdocs-field-textbox',\n  styleUrl: 'verdocs-field-textbox.scss',\n  shadow: false,\n})\nexport class VerdocsFieldTextbox {\n  @Element() el: HTMLElement;\n  private inputEl: HTMLInputElement | HTMLTextAreaElement;\n\n  /**\n   * Fields may be attached to templates or envelopes, but only template fields may be edited.\n   */\n  @Prop({reflect: true}) source: 'template' | 'envelope' = 'template';\n\n  /**\n   * The source template or envelope ID the field is found in.\n   */\n  @Prop({reflect: true}) sourceid: string = '';\n\n  /**\n   * The name of the field to display.\n   */\n  @Prop({reflect: true}) fieldname: string = '';\n\n  /**\n   * Override the field's settings. This is intended to be used during signing when fields are being\n   * mutated.\n   */\n  @Prop() field: IEnvelopeField | null | undefined = null;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop({reflect: true}) disabled?: boolean = false;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop({reflect: true}) multiline?: boolean = false;\n\n  /**\n   * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n   * changed, so it should typically only be enabled in the Builder.\n   */\n  @Prop({reflect: true}) editable?: boolean = false;\n\n  /**\n   * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n   */\n  @Prop({reflect: true}) moveable?: boolean = false;\n\n  /**\n   * If set, the field is considered \"done\" and is drawn in a display-final-value state.\n   */\n  @Prop({reflect: true}) done?: boolean = false;\n\n  /**\n   * If set, the field will be be scaled horizontally by this factor.\n   */\n  @Prop({reflect: true}) xscale?: number = 1;\n\n  /**\n   * If set, the field will be be scaled vertically by this factor.\n   */\n  @Prop({reflect: true}) yscale?: number = 1;\n\n  /**\n   * The page the field is on\n   */\n  @Prop({reflect: true}) pagenumber?: number = 1;\n\n  /**\n   * Event fired when the field's settings are changed.\n   */\n  @Event({composed: true}) settingsChanged: EventEmitter<{fieldName: string; field: ITemplateField}>;\n\n  /**\n   * Event fired when the field is deleted.\n   */\n  @Event({composed: true}) deleted: EventEmitter<{fieldName: string}>;\n\n  @State() showingProperties?: boolean = false;\n  @State() focused?: boolean = false;\n\n  @Method()\n  async focusField() {\n    this.inputEl.focus();\n  }\n\n  @Method()\n  async showSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.showPanel) {\n      settingsPanel.showPanel();\n    }\n  }\n\n  @Method()\n  async hideSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.hidePanel) {\n      settingsPanel.hidePanel();\n    }\n    this.showingProperties = false;\n  }\n\n  componentDidRender() {\n    interact.dynamicDrop(true);\n\n    if (this.editable) {\n      interact(this.el).resizable({\n        edges: {\n          top: '.edge-top',\n          left: '.edge-left',\n          bottom: '.edge-bottom',\n          right: '.edge-right',\n        },\n        modifiers: [\n          interact.modifiers.restrictSize({\n            min: {width: 30, height: 15},\n          }),\n        ],\n        listeners: {\n          start: this.handleResizeStart.bind(this),\n          move: this.handleResize.bind(this),\n          end: this.handleResizeEnd.bind(this),\n        },\n      });\n    }\n  }\n\n  handleResizeStart(e: any) {\n    e.preventDefault();\n    e.stopPropagation();\n  }\n\n  handleResize(e: any) {\n    let {width, height} = e.rect;\n\n    const dX = e.deltaRect.left;\n    const dY = e.deltaRect.bottom;\n    const currentLeft = parseFloat(e.target.style.left);\n    const currentBottom = parseFloat(e.target.style.bottom);\n\n    width /= this.xscale;\n    height /= this.yscale;\n\n    Object.assign(e.target.style, {\n      width: `${width}px`,\n      height: `${height}px`,\n      left: `${currentLeft + dX}px`,\n      bottom: `${currentBottom - dY}px`,\n    });\n  }\n\n  handleResizeEnd(e: any) {\n    const {sourceid, fieldname} = this;\n\n    const width = Math.round(parseFloat(e.target.style.width));\n    let height = Math.round(parseFloat(e.target.style.height));\n\n    if (height < 20) {\n      height = 15;\n    }\n    const multiline = height > 15;\n\n    updateField(VerdocsEndpoint.getDefault(), sourceid, fieldname, {width, height, multiline})\n      .then(async updatedField => {\n        const template = await Store.getTemplate(VerdocsEndpoint.getDefault(), this.sourceid);\n        const newTemplate = JSON.parse(JSON.stringify(template));\n        const fieldIndex = newTemplate.fields.findIndex(field => field.name === fieldname);\n        if (fieldIndex > -1) {\n          newTemplate.fields[fieldIndex] = updatedField;\n        }\n        Store.updateTemplate(this.sourceid, newTemplate);\n\n        this.settingsChanged?.emit({fieldName: fieldname, field: updatedField});\n        Object.assign(e.target.dataset, {x: 0, y: 0, h: 0});\n      })\n      .catch(e => console.log('Field update failed', e));\n  }\n\n  render() {\n    const {source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1} = this;\n    const {index, field} = Store.getField(source, sourceid, fieldname, this.field);\n    let {required = false, placeholder = '', label = '', width = 150, default: value = '', multiline = false} = field || {};\n    const backgroundColor = getRGBA(index);\n\n    // TODO: Consolidate value/defaultValue handling between template and envelope fields.\n    if ((field as any)?.value) {\n      value = (field as any)?.value;\n    }\n\n    // TODO: This is an outdated technique from the old system. We should compute it.\n    const maxlength = width / 5;\n\n    if (done) {\n      return <Host class={{done}}>{value}</Host>;\n    }\n\n    return (\n      <Host class={{required, disabled, done, focused}} style={{backgroundColor}}>\n        {editable && <div class=\"edge-top\" />}\n        {editable && <div class=\"edge-right\" />}\n        {editable && <div class=\"edge-left\" />}\n        {editable && <div class=\"edge-bottom\" />}\n\n        {label && <label>{label}</label>}\n\n        {multiline ? (\n          <textarea\n            name={fieldname}\n            disabled={disabled}\n            required={required}\n            placeholder={placeholder}\n            ref={el => (this.inputEl = el)}\n            onFocus={() => (this.focused = true)}\n            onBlur={() => (this.focused = false)}\n          >\n            {value}\n          </textarea>\n        ) : (\n          <input\n            type=\"text\"\n            name={fieldname}\n            value={value}\n            disabled={disabled}\n            required={required}\n            placeholder={placeholder}\n            maxlength={maxlength}\n            ref={el => (this.inputEl = el)}\n            onFocus={() => (this.focused = true)}\n            onBlur={() => (this.focused = false)}\n          />\n        )}\n\n        {editable && (\n          <Fragment>\n            <div\n              id={`verdocs-settings-panel-trigger-${fieldname}`}\n              style={{transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})`}}\n              class=\"settings-icon\"\n              innerHTML={SettingsIcon}\n              onClick={(e: any) => {\n                e.stopPropagation();\n                this.showingProperties = !this.showingProperties;\n              }}\n            />\n\n            {this.showingProperties && (\n              <verdocs-portal anchor={`verdocs-settings-panel-trigger-${fieldname}`} onClickAway={() => (this.showingProperties = false)}>\n                <verdocs-template-field-properties\n                  templateId={sourceid}\n                  fieldName={fieldname}\n                  onClose={() => this.hideSettingsPanel()}\n                  onDelete={() => {\n                    this.deleted?.emit({fieldName: fieldname});\n                    return this.hideSettingsPanel();\n                  }}\n                  onSettingsChanged={e => {\n                    this.settingsChanged?.emit(e.detail);\n                    return this.hideSettingsPanel();\n                  }}\n                  helpText={\n                    'Text boxes may be used to capture simple text input. Participant-entered values will be stored for later retrieval via the \"name\" field.<br /><br />If marked required, the participant must complete the field before proceeding.'\n                  }\n                />\n              </verdocs-portal>\n            )}\n          </Fragment>\n        )}\n      </Host>\n    );\n  }\n}\n","@import '../../../theme.scss';\n\nverdocs-field-timestamp {\n  width: 160px;\n  height: 15px;\n  display: block;\n  font-size: 9px;\n  position: relative;\n  scroll-margin: 20px 0;\n  background-color: transparent;\n  transform-origin: bottom left;\n  font-family: $verdocs-primary-font;\n\n  &.done {\n    opacity: 1;\n  }\n\n  input {\n    position: absolute;\n\n    // This is needed to bring down the cursor from the parent element, which is where interactjs applies it\n    cursor: inherit;\n\n    opacity: 0.5;\n    width: 100%;\n    height: 100%;\n    font-size: 9px;\n    background: none;\n    font-weight: 500;\n    transform-origin: 0 0;\n    box-sizing: border-box;\n    color: rgba(0, 0, 0, 0.87);\n    border: 1px solid rgba(0, 0, 0, 0.2);\n\n    &.hide {\n      display: none;\n    }\n  }\n\n  label {\n    top: -14px;\n    left: -1px;\n    height: 14px;\n    color: white;\n    padding: 0 4px;\n    font-size: 9px;\n    line-height: 13px;\n    position: absolute;\n    background: #4a4a99;\n    border-top-left-radius: 2px;\n    border-top-right-radius: 2px;\n  }\n\n  &.required {\n    border: 1px solid rgb(204, 0, 0);\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.4s 1;\n  }\n\n  verdocs-button-panel {\n    top: -3px;\n    left: -2px;\n    opacity: 0.5;\n    z-index: 1000;\n    cursor: pointer;\n    position: absolute;\n    transform: scale(0.6);\n\n    &[data-active],\n    &:hover {\n      opacity: 1;\n    }\n\n    .icon {\n      svg {\n        fill: #333333;\n      }\n\n      &:hover {\n        svg {\n          fill: #000000;\n        }\n      }\n    }\n  }\n\n  .settings-icon {\n    position: absolute;\n    top: -3px;\n    left: -20px;\n    display: inline-block;\n    cursor: pointer;\n    opacity: 0.3;\n\n    svg {\n      fill: $border-color;\n    }\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n}\n","import {format} from 'date-fns/format';\nimport {ITemplateField, getRGBA, IEnvelopeField} from '@verdocs/js-sdk';\nimport {Component, h, Host, Prop, Method, Event, EventEmitter, Fragment, State} from '@stencil/core';\nimport {FORMAT_TIMESTAMP} from '../../../utils/Types';\nimport {SettingsIcon} from '../../../utils/Icons';\nimport {Store} from '../../../utils/Datastore';\n\n/**\n * Display a timestamp. Timestamps are not editable by signers. Instead, they are automatically\n * filled when the signer submits the document.\n */\n@Component({\n  tag: 'verdocs-field-timestamp',\n  styleUrl: 'verdocs-field-timestamp.scss',\n  shadow: false,\n})\nexport class VerdocsFieldTimestamp {\n  private el: HTMLInputElement;\n\n  /**\n   * Fields may be attached to templates or envelopes, but only template fields may be edited.\n   */\n  @Prop({reflect: true}) source: 'template' | 'envelope' = 'template';\n\n  /**\n   * The source template or envelope ID the field is found in.\n   */\n  @Prop({reflect: true}) sourceid: string = '';\n\n  /**\n   * The name of the field to display.\n   */\n  @Prop({reflect: true}) fieldname: string = '';\n\n  /**\n   * Override the field's settings. This is intended to be used during signing when fields are being\n   * mutated.\n   */\n  @Prop() field: IEnvelopeField | null | undefined = null;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop({reflect: true}) disabled?: boolean = false;\n\n  /**\n   * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n   * changed, so it should typically only be enabled in the Builder.\n   */\n  @Prop({reflect: true}) editable?: boolean = false;\n\n  /**\n   * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n   */\n  @Prop({reflect: true}) moveable?: boolean = false;\n\n  /**\n   * If set, the field is considered \"done\" and is drawn in a display-final-value state.\n   */\n  @Prop({reflect: true}) done?: boolean = false;\n\n  /**\n   * If set, the field will be be scaled horizontally by this factor.\n   */\n  @Prop({reflect: true}) xscale?: number = 1;\n\n  /**\n   * If set, the field will be be scaled vertically by this factor.\n   */\n  @Prop({reflect: true}) yscale?: number = 1;\n\n  /**\n   * The page the field is on\n   */\n  @Prop() pagenumber?: number = 1;\n\n  /**\n   * Event fired when the field's settings are changed.\n   */\n  @Event({composed: true}) settingsChanged: EventEmitter<{fieldName: string; field: ITemplateField}>;\n\n  /**\n   * Event fired when the field is deleted.\n   */\n  @Event({composed: true}) deleted: EventEmitter<{fieldName: string}>;\n\n  @State() showingProperties?: boolean = false;\n\n  @Method() async focusField() {\n    this.el.focus();\n  }\n\n  @Method()\n  async showSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.showPanel) {\n      settingsPanel.showPanel();\n    }\n  }\n\n  @Method()\n  async hideSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.hidePanel) {\n      settingsPanel.hidePanel();\n    }\n    this.showingProperties = false;\n  }\n\n  render() {\n    const {source, sourceid, fieldname, editable = false, done = false, disabled = false, xscale = 1, yscale = 1} = this;\n\n    const {index, field} = Store.getField(source, sourceid, fieldname, this.field);\n    const {required = false, placeholder = '', value = '', label = ''} = field || {};\n    const backgroundColor = getRGBA(index);\n\n    const formatted = format(new Date(value || new Date().toISOString()), FORMAT_TIMESTAMP);\n\n    if (done) {\n      return <Host class={{done}}>{formatted}</Host>;\n    }\n\n    return (\n      <Host class={{required, disabled, done}} style={{backgroundColor}}>\n        {label && <label>{label}</label>}\n        <input type=\"text\" placeholder={placeholder} value={formatted} disabled={true} ref={el => (this.el = el)} />\n\n        {editable && (\n          <Fragment>\n            <div\n              id={`verdocs-settings-panel-trigger-${fieldname}`}\n              style={{transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})`}}\n              class=\"settings-icon\"\n              innerHTML={SettingsIcon}\n              onClick={(e: any) => {\n                e.stopPropagation();\n                this.showingProperties = !this.showingProperties;\n              }}\n            />\n\n            {this.showingProperties && (\n              <verdocs-portal anchor={`verdocs-settings-panel-trigger-${fieldname}`} onClickAway={() => (this.showingProperties = false)}>\n                <verdocs-template-field-properties\n                  templateId={sourceid}\n                  fieldName={fieldname}\n                  onClose={() => this.hideSettingsPanel()}\n                  onDelete={() => {\n                    this.deleted?.emit({fieldName: fieldname});\n                    return this.hideSettingsPanel();\n                  }}\n                  onSettingsChanged={e => {\n                    this.settingsChanged?.emit(e.detail);\n                    return this.hideSettingsPanel();\n                  }}\n                  helpText={'Time stamps are automatically set when the recipient signs the document.'}\n                />\n              </verdocs-portal>\n            )}\n          </Fragment>\n        )}\n      </Host>\n    );\n  }\n}\n","@import '../../../theme.scss';\n\nverdocs-initial-dialog {\n  font-family: $primary-font;\n  box-sizing: border-box;\n  position: fixed;\n  z-index: 10000;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: #0000007f;\n\n  .dialog {\n    width: 100%;\n    max-width: 340px;\n    border-radius: 4px;\n    overflow: hidden;\n    box-shadow: 3px 3px 5px 1px rgba(40, 40, 40, 0.4);\n    background: $dialog-bg;\n  }\n\n  .heading {\n    display: flex;\n    flex-direction: row;\n    padding: 20px 20px 0 20px;\n    line-height: 28px;\n    font-size: 20px;\n    font-weight: 500;\n  }\n\n  .content {\n    font-size: 14px;\n    padding: 20px;\n  }\n\n  .buttons {\n    display: flex;\n    margin: 20px 0 0 0;\n    flex-direction: row;\n    justify-content: flex-end;\n    align-items: center;\n\n    verdocs-button {\n      margin-left: 16px;\n    }\n  }\n\n  canvas {\n    background: #fff;\n    box-sizing: border-box;\n    margin: 0 auto;\n    width: 300px;\n    // TODO: The original app had an aspect ratio of (80 / 305) * (signatureBodyWidth - 20)\n    height: 79px;\n    max-width: 100%;\n    box-shadow: 0 0 6px 0 #0000001f;\n  }\n\n  .disclaimer {\n    text-align: justify;\n    padding: 8px 0;\n    font-size: 11px;\n    line-height: 14px;\n    color: rgba(0, 0, 0, 0.54);\n  }\n\n  .as-shown {\n    font-size: 11px;\n    margin: 4px 0 20px 4px;\n    color: rgba(0, 0, 0, 0.54);\n  }\n\n  .tabs {\n    display: flex;\n    flex-direction: row;\n\n    .tab {\n      padding: 8px 15px;\n      cursor: pointer;\n\n      &.active {\n        border-bottom: 2px solid $light-border-color;\n      }\n\n      &:hover {\n        color: $primary-color;\n      }\n    }\n  }\n}\n","import {Component, Prop, Host, h, Event, EventEmitter, State} from '@stencil/core';\n\n/**\n * Display a dialog that allows the user to specify an initials image, either by using a signature-font-generated image\n * based on their full name, or by hand-drawing their initials with a mouse or tablet.\n */\n@Component({\n  tag: 'verdocs-initial-dialog',\n  styleUrl: 'verdocs-initial-dialog.scss',\n})\nexport class VerdocsInitialDialog {\n  private canvasElement?: HTMLCanvasElement;\n\n  /**\n   * Initial signature text\n   */\n  @Prop() initials: string = '';\n\n  /**\n   * Event fired when the initials are adopted.\n   */\n  @Event({composed: true}) next: EventEmitter<string>;\n\n  /**\n   * Event fired when the step is cancelled. This is called exit to avoid conflicts with the JS-reserved \"cancel\" event name.\n   */\n  @Event({composed: true}) exit: EventEmitter;\n\n  @State() fontLoaded = false;\n\n  @State() enteredInitials: string = '';\n\n  @State() mode: string = 'type';\n\n  componentWillLoad() {\n    this.enteredInitials = this.initials.toUpperCase();\n\n    const ds = new FontFace('Dancing Script', 'url(https://fonts.gstatic.com/s/dancingscript/v19/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3Sup6hNX6plRP.woff)');\n    ds.load().then(font => {\n      document.fonts.add(font);\n      this.fontLoaded = true;\n    });\n  }\n\n  componentDidLoad() {\n    this.redrawSignature();\n  }\n\n  componentDidUpdate() {\n    this.redrawSignature();\n  }\n\n  redrawSignature() {\n    console.log('redrawing sig');\n    if (!this.canvasElement) {\n      console.log('no canvas');\n      return;\n    }\n\n    const canvasWidth = this.canvasElement.width;\n    console.log('cw', canvasWidth);\n\n    const context = this.canvasElement.getContext('2d');\n    context.clearRect(0, 0, this.canvasElement.width, this.canvasElement.height);\n\n    let fontSize = 100;\n    do {\n      fontSize -= 2;\n      context.font = `${fontSize}px Dancing Script`;\n    } while (context.measureText(this.enteredInitials).width > canvasWidth - 32); // 32px padding each side\n\n    context.textAlign = 'center';\n    context.textBaseline = 'middle';\n    context.font = `${fontSize}px Dancing Script`;\n    context.fillText(this.enteredInitials, this.canvasElement.width / 2, this.canvasElement.height / 2);\n  }\n\n  handleNameChange(e: any) {\n    this.enteredInitials = e.target.value;\n  }\n\n  handleCancel(e: any) {\n    e.stopPropagation();\n    e.preventDefault();\n    this.exit.emit();\n  }\n\n  handleAdopt(e: any) {\n    e.stopPropagation();\n    e.preventDefault();\n    const data = this.canvasElement.toDataURL('image/png');\n    this.next.emit(data);\n  }\n\n  /*\n  selColor(hex: string) {\n    this.color = hex;\n    this.animateDraw();\n  }\n\n  stopDraw() {\n    this.paint = false;\n    this.adoptedAndSigned = !this.hasSignature();\n  }\n\n  draw(e) {\n    this.paint = true;\n    this.addPoints(e, false);\n    this.animateDraw();\n  }\n\n  recordPoints(e) {\n    if (this.paint) {\n      this.addPoints(e, true);\n      this.animateDraw();\n    }\n  }\n\n  animateDraw() {\n    this.canvas.clearRect(0, 0, this.canvas.canvas.offsetWidth, this.canvas.canvas.offsetHeight);\n\n    this.canvas.strokeStyle = this.color || '#000000';\n    this.canvas.lineJoin = 'round';\n    this.canvas.lineWidth = 3;\n\n    for (let i = 0; i < this.points.length; i++) {\n      this.canvas.beginPath();\n      if (this.points[i].drag && i) {\n        this.canvas.moveTo(this.points[i - 1].x, this.points[i - 1].y);\n        // this.canvas.arc(this.points[i - 1].x, this.points[i - 1].y, 2, 0, 2 * Math.PI, false);\n      } else {\n        this.canvas.moveTo(this.points[i].x - 1, this.points[i].y);\n        // this.canvas.arc(this.points[i].x, this.points[i].y, 2, 0, 2 * Math.PI, false);\n      }\n\n      this.canvas.lineTo(this.points[i].x, this.points[i].y);\n      this.canvas.closePath();\n      this.canvas.stroke();\n    }\n  }\n\n  drawCurve(color: string, curve: number) {\n    this.canvas.beginPath();\n  }\n\n\n\n  addPoints(e, drag: boolean) {\n    if (window) {\n      let x;\n      let y;\n      e.preventDefault();\n      if (e.touches && e.touches.length > 0) {\n        x = e.touches[0].clientX;\n      } else {\n        x = e.clientX;\n      }\n\n      if (e.touches && e.touches.length > 0) {\n        y = e.touches[0].clientY;\n      } else {\n        y = e.clientY;\n      }\n      const rect = this.signatureCanvas.nativeElement.getBoundingClientRect();\n      this.points.push({\n        x: x - rect.left,\n        y: y - rect.top,\n        drag: drag\n      });\n    }\n  }\n\n  clearPad() {\n    this.canvas.clearRect(0, 0, this.canvas.canvas.offsetWidth, this.canvas.canvas.offsetHeight);\n    this.points = [];\n    this.adoptedAndSigned = !this.hasSignature();\n  }\n\n    async adoptAndSign() {\n    try {\n      this.adoptedAndSigned = true;\n      await this.updateFullName();\n      await this.captureSignatureFromCanvas();\n      const message = this.signatureMode === 'Signature' ? 'Saving Signature' : 'Saving Initial';\n      this.snackbarService.open(message, 'OK', this.snackbarService.initConfig(null, 'bottom'));\n      this.handleMode();\n    } catch (err) {\n      this.snackbarService.open('Failed to apply signature', 'OK', this.snackbarService.initConfig(null, 'bottom'));\n    }\n  }\n\n  handleMode() {\n    let currentField;\n    switch (this.mode) {\n      case 'signerview':\n        if (this.signatureMode === 'Signature') {\n          this.signatureService.postSignatureBlob().then(result => {\n            if (result && result.id && result.url) {\n              currentField = this.signatureService.currField;\n              this.signatureService.updateSigned(currentField.fName, true);\n              this.signatureService.toggleSig(false);\n              this.signatureService.setSignatureId(result.id);\n              this.signatureService.putSignatureField(this.envelopeId, this.fieldName, result.id).then(res => {\n                this.eventTracker.createEvent({\n                  category: 'verdoc',\n                  action: 'verdoc signed',\n                  label: `verdoc id: ${this.envelopeId}`\n                })\n                if (res && res.settings) {\n                  this.signatureService.setSignatureData(res.settings.base64);\n                  this.signatureService.setSignatureId(res.settings.signature_id);\n                }\n                this.snackbarService.dismiss();\n                this.dialog.close({ status: 'saved', temp_sig: res.settings.base64, sig_id: res.settings.signature_id });\n              }).catch(err => {\n                this.snackbarService.open('Failed to save signature. Please try again.', 'DISMISS', {\n                  duration: 3000\n                });\n                this.adoptedAndSigned = false;\n                return err;\n              });\n            }\n          });\n        } else {\n          this.signatureService.postInitialBlob().then(result => {\n            if (result && result.id && result.url) {\n              currentField = this.signatureService.currField;\n              this.signatureService.updateInitialed(currentField.fName, true);\n              this.signatureService.setInitialId(result.id);\n              this.signatureService.toggleSig(false);\n              this.signatureService.putInitialField(this.envelopeId, this.fieldName, result.id).then(res => {\n                if (res && res.settings) {\n                  this.signatureService.setInitialData(res.settings.base64);\n                  this.signatureService.setInitialId(res.settings.initial_id);\n                }\n                this.snackbarService.dismiss();\n                this.dialog.close({ status: 'saved', temp_int: res.settings.base64, int_id: res.settings.initial_id });\n              }).catch(err => {\n                this.snackbarService.open('Failed to save initial. Please try again.', 'DISMISS', {\n                  duration: 3000\n                });\n                this.adoptedAndSigned = false;\n                return err;\n              });\n            }\n          });\n        }\n        break;\n    }\n  }\n   */\n\n  render() {\n    return (\n      <Host onClick={e => this.handleCancel(e)}>\n        <div class=\"dialog\">\n          <div class=\"heading\">Create Your Initial</div>\n\n          <div class=\"content\">\n            <verdocs-text-input placeholder=\"Initials...\" label=\"Initials\" value={this.enteredInitials} onInput={e => this.handleNameChange(e)} />\n            <div class=\"as-shown\">As shown on driver's license or govt. ID card.</div>\n\n            {/*<div class=\"tabs\">*/}\n            {/*  <div class={{tab: true, active: this.mode === 'type'}} onClick={() => (this.mode = 'type')}>*/}\n            {/*    Type*/}\n            {/*  </div>*/}\n            {/*  <div class={{tab: true, active: this.mode === 'draw'}} onClick={() => (this.mode = 'draw')}>*/}\n            {/*    Draw*/}\n            {/*  </div>*/}\n            {/*</div>*/}\n\n            {this.fontLoaded ? <canvas ref={el => (this.canvasElement = el as HTMLCanvasElement)} /> : <div style={{display: 'none'}} />}\n\n            <div class=\"disclaimer\">\n              By clicking Adopt, I agree that the signature will be the electronic representation of my signature for all purposes when I (or my agent) use them on documents,\n              including legally binding contracts &mdash; just the same as a pen-and-paper signature or initial.\n            </div>\n\n            <div class=\"buttons\">\n              <verdocs-button label=\"CANCEL\" variant=\"outline\" onClick={e => this.handleCancel(e)} />\n              <verdocs-button label=\"Adopt & Sign\" onClick={e => this.handleAdopt(e)} />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n","@import '../../../theme.scss';\n\nverdocs-signature-dialog {\n  font-family: $primary-font;\n  box-sizing: border-box;\n  position: fixed;\n  z-index: 10000;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: #0000007f;\n\n  .dialog {\n    width: 100%;\n    max-width: 340px;\n    border-radius: 4px;\n    overflow: hidden;\n    box-shadow: 3px 3px 5px 1px rgba(40, 40, 40, 0.4);\n    background: $dialog-bg;\n  }\n\n  .heading {\n    display: flex;\n    flex-direction: row;\n    padding: 20px 20px 0 20px;\n    line-height: 28px;\n    font-size: 20px;\n    font-weight: 500;\n  }\n\n  .content {\n    font-size: 14px;\n    padding: 20px;\n  }\n\n  .buttons {\n    display: flex;\n    margin: 20px 0 0 0;\n    flex-direction: row;\n    justify-content: flex-end;\n    align-items: center;\n\n    verdocs-button {\n      margin-left: 16px;\n    }\n  }\n\n  canvas {\n    background: $verdocs-grey-4;\n    box-sizing: border-box;\n    margin: 0 auto;\n    width: 300px;\n    // TODO: The original app had an aspect ratio of (80 / 305) * (signatureBodyWidth - 20)\n    height: 79px;\n    max-width: 100%;\n    box-shadow: 0 0 6px 0 #0000001f;\n  }\n\n  .disclaimer {\n    text-align: justify;\n    padding: 8px 0;\n    font-size: 11px;\n    line-height: 14px;\n    color: rgba(0, 0, 0, 0.54);\n  }\n\n  .as-shown {\n    font-size: 11px;\n    margin: 4px 0 20px 4px;\n    color: rgba(0, 0, 0, 0.54);\n  }\n\n  .tabs {\n    display: flex;\n    flex-direction: row;\n\n    .tab {\n      padding: 8px 15px;\n      cursor: pointer;\n\n      &.active {\n        border-bottom: 2px solid $light-border-color;\n      }\n\n      &:hover {\n        color: $primary-color;\n      }\n    }\n  }\n}\n","import {Component, Prop, h, Event, EventEmitter, State, Host} from '@stencil/core';\n\n/**\n * Display a dialog that allows the user to specify a signature image, either by using a signature-font-generated image\n * based on their full name, or by hand-drawing their signature with a mouse or tablet.\n */\n@Component({\n  tag: 'verdocs-signature-dialog',\n  styleUrl: 'verdocs-signature-dialog.scss',\n})\nexport class VerdocsSignatureDialog {\n  private canvasElement?: HTMLCanvasElement;\n\n  /**\n   * Initial signature text\n   */\n  @Prop() name: string = '';\n\n  /**\n   * Fired when the user completes the dialog and clicks Adopt. The event detail will contain a base64-encoded string\n   * representation of the signature adopted.\n   */\n  @Event({composed: true}) next: EventEmitter<string>;\n\n  /**\n   * Event fired when the step is cancelled. This is called exit to avoid conflicts with the JS-reserved \"cancel\" event name.\n   */\n  @Event({composed: true}) exit: EventEmitter;\n\n  @State() fontLoaded = false;\n\n  @State() enteredName: string = '';\n\n  @State() mode: string = 'type';\n\n  componentWillLoad() {\n    this.enteredName = this.name;\n\n    const ds = new FontFace('Dancing Script', 'url(https://fonts.gstatic.com/s/dancingscript/v19/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3Sup6hNX6plRP.woff)');\n    ds.load().then(font => {\n      document.fonts.add(font);\n      this.fontLoaded = true;\n    });\n  }\n\n  componentDidLoad() {\n    this.redrawSignature();\n  }\n\n  componentDidUpdate() {\n    this.redrawSignature();\n  }\n\n  redrawSignature() {\n    if (!this.canvasElement) {\n      return;\n    }\n\n    const canvasWidth = this.canvasElement.width;\n\n    const context = this.canvasElement.getContext('2d');\n    context.clearRect(0, 0, this.canvasElement.width, this.canvasElement.height);\n\n    let fontSize = 100;\n    do {\n      fontSize -= 2;\n      context.font = `${fontSize}px Dancing Script`;\n    } while (context.measureText(this.enteredName).width > canvasWidth - 32); // 32px padding each side\n\n    context.textAlign = 'center';\n    context.textBaseline = 'middle';\n    context.font = `${fontSize}px Dancing Script`;\n    context.fillText(this.enteredName, this.canvasElement.width / 2, this.canvasElement.height / 2);\n  }\n\n  handleNameChange(e: any) {\n    this.enteredName = e.target.value;\n  }\n\n  handleCancel(e: any) {\n    e.stopPropagation();\n    e.preventDefault();\n    this.exit.emit();\n  }\n\n  handleAdopt(e: any) {\n    e.stopPropagation();\n    e.preventDefault();\n    const data = this.canvasElement.toDataURL('image/png');\n    this.next.emit(data);\n  }\n\n  /*\n  selColor(hex: string) {\n    this.color = hex;\n    this.animateDraw();\n  }\n\n  stopDraw() {\n    this.paint = false;\n    this.adoptedAndSigned = !this.hasSignature();\n  }\n\n  draw(e) {\n    this.paint = true;\n    this.addPoints(e, false);\n    this.animateDraw();\n  }\n\n  recordPoints(e) {\n    if (this.paint) {\n      this.addPoints(e, true);\n      this.animateDraw();\n    }\n  }\n\n  animateDraw() {\n    this.canvas.clearRect(0, 0, this.canvas.canvas.offsetWidth, this.canvas.canvas.offsetHeight);\n\n    this.canvas.strokeStyle = this.color || '#000000';\n    this.canvas.lineJoin = 'round';\n    this.canvas.lineWidth = 3;\n\n    for (let i = 0; i < this.points.length; i++) {\n      this.canvas.beginPath();\n      if (this.points[i].drag && i) {\n        this.canvas.moveTo(this.points[i - 1].x, this.points[i - 1].y);\n        // this.canvas.arc(this.points[i - 1].x, this.points[i - 1].y, 2, 0, 2 * Math.PI, false);\n      } else {\n        this.canvas.moveTo(this.points[i].x - 1, this.points[i].y);\n        // this.canvas.arc(this.points[i].x, this.points[i].y, 2, 0, 2 * Math.PI, false);\n      }\n\n      this.canvas.lineTo(this.points[i].x, this.points[i].y);\n      this.canvas.closePath();\n      this.canvas.stroke();\n    }\n  }\n\n  drawCurve(color: string, curve: number) {\n    this.canvas.beginPath();\n  }\n\n\n\n  addPoints(e, drag: boolean) {\n    if (window) {\n      let x;\n      let y;\n      e.preventDefault();\n      if (e.touches && e.touches.length > 0) {\n        x = e.touches[0].clientX;\n      } else {\n        x = e.clientX;\n      }\n\n      if (e.touches && e.touches.length > 0) {\n        y = e.touches[0].clientY;\n      } else {\n        y = e.clientY;\n      }\n      const rect = this.signatureCanvas.nativeElement.getBoundingClientRect();\n      this.points.push({\n        x: x - rect.left,\n        y: y - rect.top,\n        drag: drag\n      });\n    }\n  }\n\n  clearPad() {\n    this.canvas.clearRect(0, 0, this.canvas.canvas.offsetWidth, this.canvas.canvas.offsetHeight);\n    this.points = [];\n    this.adoptedAndSigned = !this.hasSignature();\n  }\n\n    async adoptAndSign() {\n    try {\n      this.adoptedAndSigned = true;\n      await this.updateFullName();\n      await this.captureSignatureFromCanvas();\n      const message = this.signatureMode === 'Signature' ? 'Saving Signature' : 'Saving Initial';\n      this.snackbarService.open(message, 'OK', this.snackbarService.initConfig(null, 'bottom'));\n      this.handleMode();\n    } catch (err) {\n      this.snackbarService.open('Failed to apply signature', 'OK', this.snackbarService.initConfig(null, 'bottom'));\n    }\n  }\n\n  handleMode() {\n    let currentField;\n    switch (this.mode) {\n      case 'signerview':\n        if (this.signatureMode === 'Signature') {\n          this.signatureService.postSignatureBlob().then(result => {\n            if (result && result.id && result.url) {\n              currentField = this.signatureService.currField;\n              this.signatureService.updateSigned(currentField.fName, true);\n              this.signatureService.toggleSig(false);\n              this.signatureService.setSignatureId(result.id);\n              this.signatureService.putSignatureField(this.envelopeId, this.fieldName, result.id).then(res => {\n                this.eventTracker.createEvent({\n                  category: 'verdoc',\n                  action: 'verdoc signed',\n                  label: `verdoc id: ${this.envelopeId}`\n                })\n                if (res && res.settings) {\n                  this.signatureService.setSignatureData(res.settings.base64);\n                  this.signatureService.setSignatureId(res.settings.signature_id);\n                }\n                this.snackbarService.dismiss();\n                this.dialog.close({ status: 'saved', temp_sig: res.settings.base64, sig_id: res.settings.signature_id });\n              }).catch(err => {\n                this.snackbarService.open('Failed to save signature. Please try again.', 'DISMISS', {\n                  duration: 3000\n                });\n                this.adoptedAndSigned = false;\n                return err;\n              });\n            }\n          });\n        } else {\n          this.signatureService.postInitialBlob().then(result => {\n            if (result && result.id && result.url) {\n              currentField = this.signatureService.currField;\n              this.signatureService.updateInitialed(currentField.fName, true);\n              this.signatureService.setInitialId(result.id);\n              this.signatureService.toggleSig(false);\n              this.signatureService.putInitialField(this.envelopeId, this.fieldName, result.id).then(res => {\n                if (res && res.settings) {\n                  this.signatureService.setInitialData(res.settings.base64);\n                  this.signatureService.setInitialId(res.settings.initial_id);\n                }\n                this.snackbarService.dismiss();\n                this.dialog.close({ status: 'saved', temp_int: res.settings.base64, int_id: res.settings.initial_id });\n              }).catch(err => {\n                this.snackbarService.open('Failed to save initial. Please try again.', 'DISMISS', {\n                  duration: 3000\n                });\n                this.adoptedAndSigned = false;\n                return err;\n              });\n            }\n          });\n        }\n        break;\n    }\n  }\n   */\n\n  render() {\n    return (\n      <Host onClick={e => this.handleCancel(e)}>\n        <div class=\"dialog\">\n          <div class=\"heading\">Create Your Signature</div>\n\n          <div class=\"content\">\n            <verdocs-text-input placeholder=\"Full Name...\" label=\"Full Name\" value={this.enteredName} onInput={e => this.handleNameChange(e)} onClick={e => e.stopPropagation()} />\n            <div class=\"as-shown\">As shown on driver's license or govt. ID card.</div>\n\n            {/*<div class=\"tabs\">*/}\n            {/*  <div class={{tab: true, active: this.mode === 'type'}} onClick={() => (this.mode = 'type')}>*/}\n            {/*    Type*/}\n            {/*  </div>*/}\n            {/*<div class={{tab: true, active: this.mode === 'draw'}} onClick={() => (this.mode = 'draw')}>*/}\n            {/*  Draw*/}\n            {/*</div>*/}\n            {/*</div>*/}\n\n            {this.fontLoaded ? <canvas ref={el => (this.canvasElement = el as HTMLCanvasElement)} /> : <div style={{display: 'none'}} />}\n\n            <div class=\"disclaimer\">\n              By clicking Adopt, I agree that the signature will be the electronic representation of my signature for all purposes when I (or my agent) use them on documents,\n              including legally binding contracts &mdash; just the same as a pen-and-paper signature or initial.\n            </div>\n\n            <div class=\"buttons\">\n              <verdocs-button label=\"CANCEL\" size=\"normal\" variant=\"outline\" onClick={e => this.handleCancel(e)} />\n              <verdocs-button label=\"Adopt & Sign\" size=\"normal\" onClick={e => this.handleAdopt(e)} />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n","@import '../../../theme.scss';\n\nverdocs-upload-dialog {\n  position: fixed;\n  box-sizing: border-box;\n  font-family: $primary-font;\n\n  div {\n    box-sizing: border-box;\n  }\n\n  .background-overlay {\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    display: flex;\n    z-index: 10000;\n    position: fixed;\n    align-items: center;\n    background: #0000007f;\n    justify-content: center;\n  }\n\n  // Not simple .dialog to avoid conflicts with ok-dialog. Should review that more.\n  .upload-dialog-content {\n    width: 320px;\n    display: flex;\n    flex-direction: column;\n    border-radius: 4px;\n    overflow: hidden;\n    background: $verdocs-grey-4;\n    padding: 16px;\n    box-shadow: 3px 3px 5px 1px rgba(40, 40, 40, 0.4);\n  }\n\n  .heading {\n    display: flex;\n    font-size: 20px;\n    font-weight: 500;\n    flex-direction: row;\n  }\n\n  .buttons {\n    display: flex;\n    align-items: center;\n    flex-direction: row;\n    justify-content: flex-end;\n\n    verdocs-button {\n      margin-left: 16px;\n    }\n  }\n\n  .current-label {\n    margin: 20px 0 5px 0;\n  }\n\n  .drop-target {\n    opacity: 1;\n    width: 100%;\n    display: flex;\n    margin: 20px 0;\n    min-height: 260px;\n    padding: 30px 15px;\n    text-align: center;\n    align-items: center;\n    flex-direction: column;\n    justify-content: center;\n    background-color: #f5f5f5;\n    color: $verdocs-grey-1;\n    border: 2px dashed #979797;\n\n    p {\n      margin: 12px 0;\n      font-weight: 500;\n\n      &.subscript {\n        margin: 20px;\n        color: $verdocs-bg-4;\n        font-size: 14px;\n      }\n    }\n\n    &.dragging-over {\n      border: 5px solid $verdocs-deep-blue;\n    }\n\n    > verdocs-button {\n      margin: 12px 0;\n      display: inline-block;\n    }\n  }\n\n  .attachments {\n    height: 56px;\n    font-size: 0;\n    margin: 20px 0;\n    padding: 0 16px;\n    line-height: 56px;\n    white-space: normal;\n    box-shadow:\n      0 1px 3px 0 rgb(0 0 0 / 20%),\n      0 2px 2px 0 rgb(0 0 0 / 12%),\n      0 0 2px 0 rgb(0 0 0 / 14%);\n\n    .attachment {\n      gap: 10px;\n      display: flex;\n      align-items: center;\n      flex-direction: row;\n\n      .icon {\n        width: 18px;\n        height: 18px;\n        line-height: 18px;\n\n        &.trash {\n          cursor: pointer;\n        }\n      }\n\n      .name {\n        flex: 1;\n        font-size: 14px;\n        overflow: hidden;\n        font-weight: 400;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n      }\n    }\n  }\n\n  .error {\n    margin: 20px 0;\n    color: $verdocs-red-1;\n  }\n}\n","import {Component, h, Event, EventEmitter, Fragment, Host, State, Prop} from '@stencil/core';\n\nconst TrashIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\" /></svg>`;\n\nconst PaperclipIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13\" /></svg>`;\n\n/**\n * Display a file upload tool. Note that the file is not actually transmitted, so it may be used by\n * callers with a variety of workflows. Instead, data about the chosen file will be passed to the\n * caller via the onNext event handler. A delete event is also exposed to delete existing attachments.\n * To represent an existing attachment, set the existingFile property.\n */\n@Component({\n  tag: 'verdocs-upload-dialog',\n  styleUrl: 'verdocs-upload-dialog.scss',\n})\nexport class VerdocsUploadDialog {\n  private fileInput?: HTMLInputElement;\n\n  @Prop({mutable: true})\n  maxSize: number = 20 * 1024 * 1024;\n\n  @Prop({mutable: true})\n  existingFile: any;\n\n  /**\n   * Event fired when the step is cancelled. This is called exit to avoid conflicts with the JS-reserved \"cancel\" event name.\n   */\n  @Event({composed: true}) exit: EventEmitter;\n\n  /**\n   * Event fired when the dialog is closed. The event data will contain the file selected.\n   */\n  @Event({composed: true}) next: EventEmitter<File[]>;\n\n  /**\n   * Event fired when an existing attachment is deleted. The parent component is\n   * responsible for the actual removal.\n   */\n  @Event({composed: true}) remove: EventEmitter;\n\n  @State() draggingOver = false;\n  @State() confirmDelete = false;\n  @State() selectedFiles = [] as File[];\n  @State() errorMessage = '';\n\n  handleCancel() {\n    this.exit.emit();\n  }\n\n  // We need a separate event handler for clicking the background because it can receive events \"through\" other child components\n  handleDismiss(e: any) {\n    if (e.target.class === 'background-overlay') {\n      e.preventDefault();\n      this.handleCancel();\n    }\n  }\n\n  handleDone() {\n    this.next.emit(this.selectedFiles);\n  }\n\n  handleDragOver(e) {\n    e.preventDefault();\n    this.draggingOver = true;\n  }\n\n  handleDragLeave(e) {\n    e.preventDefault();\n    this.draggingOver = false;\n  }\n\n  async handleDrop(e) {\n    e.preventDefault();\n    this.draggingOver = false;\n    this.handleSetSelected(Array.from(e.dataTransfer.files));\n  }\n\n  handleRemoveAttachment(index: number) {\n    const newFiles = [...this.selectedFiles];\n    newFiles.splice(index, 1);\n    this.handleSetSelected(newFiles);\n  }\n\n  handleSetSelected(files: any[]) {\n    this.selectedFiles = files;\n    this.errorMessage = '';\n\n    const totalSize = this.selectedFiles.reduce((acc, file) => acc + file.size, 0);\n    if (totalSize > this.maxSize) {\n      this.errorMessage = 'Total file size must not exceed 20MB.';\n    }\n  }\n\n  handleDeleteAttachment(e: any) {\n    // Stop the parent from seeing \"next\" and thinking an upload was done.\n    // TODO: Rethink having so many commonalities in nested dialogs (next/exit).\n    e.preventDefault();\n    e.stopPropagation();\n\n    this.remove?.emit();\n    this.existingFile = null;\n    this.confirmDelete = false;\n  }\n\n  handleSelectFile() {\n    this.fileInput?.click();\n  }\n\n  async handleFileChange() {\n    const selectedFiles = Array.from(this.fileInput?.files);\n    let droppedFiles = [] as File[];\n    for (let i = 0; i < this.fileInput?.files.length; i++) {\n      droppedFiles.push(this.fileInput?.files[i]);\n    }\n\n    this.handleSetSelected(selectedFiles);\n  }\n\n  render() {\n    const existingFile = this.existingFile?.name ? this.existingFile : null;\n\n    return (\n      <Host>\n        <div class=\"background-overlay\" onClick={e => this.handleDismiss(e)}>\n          <div class=\"upload-dialog-content\">\n            <div class=\"heading\">Upload attachment</div>\n\n            {this.selectedFiles.length < 1 && existingFile && (\n              <Fragment>\n                <div class=\"current-label\">Current Attachment</div>\n                <div class=\"attachments\" style={{marginTop: '0'}}>\n                  <div class=\"attachment\">\n                    <div class=\"icon\" innerHTML={PaperclipIcon} />\n                    <div class=\"name\">{existingFile.name}</div>\n                    <div class=\"icon trash\" innerHTML={TrashIcon} onClick={() => (this.confirmDelete = true)} />\n                  </div>\n                </div>\n              </Fragment>\n            )}\n\n            {this.selectedFiles.length < 1 && !existingFile && (\n              <div\n                class={{'drop-target': true, 'dragging-over': this.draggingOver}}\n                onDragOver={e => this.handleDragOver(e)}\n                onDragLeave={e => this.handleDragLeave(e)}\n                onDrop={e => this.handleDrop(e)}\n              >\n                <p>Drag and drop your files here</p>\n                <p class=\"subscript\">Supported files: PDF, Word, JPG, PNG</p>\n\n                <verdocs-button label={!!existingFile ? 'Replace files' : 'Select files'} onClick={() => this.handleSelectFile()} />\n                <input\n                  type=\"file\"\n                  ref={el => (this.fileInput = el as HTMLInputElement)}\n                  style={{display: 'none'}}\n                  accept=\".pdf,application/pdf,.doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,image/*\"\n                  onChange={() => this.handleFileChange()}\n                />\n              </div>\n            )}\n\n            {this.selectedFiles.length > 0 && (\n              <div class=\"attachments\">\n                {this.selectedFiles.map((file, index) => (\n                  <div class=\"attachment\">\n                    <div class=\"icon\" innerHTML={PaperclipIcon} />\n                    <div class=\"name\">{file.name}</div>\n                    <div class=\"icon trash\" innerHTML={TrashIcon} onClick={() => this.handleRemoveAttachment(index)} />\n                  </div>\n                ))}\n              </div>\n            )}\n\n            {!!this.errorMessage && <div class=\"error\">{this.errorMessage}</div>}\n\n            <div class=\"buttons\">\n              <verdocs-button label=\"Cancel\" variant=\"outline\" onClick={() => this.handleCancel()} />\n              <verdocs-button label=\"Upload\" onClick={() => this.handleDone()} disabled={!!this.errorMessage || this.selectedFiles.length < 1} />\n            </div>\n          </div>\n        </div>\n\n        {this.confirmDelete && (\n          <verdocs-ok-dialog\n            heading=\"Delete Attachment?\"\n            message=\"Are you sure you wish to delete this attachment? This action cannot be undone.\"\n            showCancel={true}\n            onExit={e => {\n              // So we don't close the upload dialog\n              e.preventDefault();\n              e.stopPropagation();\n              this.confirmDelete = false;\n            }}\n            onNext={e => this.handleDeleteAttachment(e)}\n          />\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["verdocsFieldAttachmentCss","PaperclipIcon","AttachedIcon","VerdocsFieldAttachment","class_1","hostRef","_this","this","source","sourceid","fieldname","field","disabled","editable","moveable","done","xscale","yscale","pagenumber","showingProperties","dialogOpen","selectedFile","focused","handleUploadNext","e","console","log","detail","_a","attached","emit","handleUploadRemove","preventDefault","stopPropagation","deleted","fieldName","prototype","focusField","setTimeout","showSettingsPanel","settingsPanel","document","getElementById","concat","showPanel","hideSettingsPanel","hidePanel","handleShow","render","_b","_c","_d","_e","_f","_g","_h","Store","getField","index","_j","_k","required","_l","value","_m","label","_o","settings","backgroundColor","getRGBA","hasFile","h","Host","class","innerHTML","style","onClick","Fragment","id","transform","Math","floor","SettingsIcon","anchor","onClickAway","templateId","onClose","onDelete","onSettingsChanged","settingsChanged","helpText","existingFile","onNext","onRemove","onExit","verdocsFieldCheckboxCss","VerdocsFieldCheckbox","class_2","checked","htmlFor","name","type","verdocsFieldDateCss","VerdocsFieldDate","class_3","containerId","random","toString","substring","picker","show","componentDidLoad","AirDatepicker","locale","localeEn","isMobile","autoClose","onShow","onHide","onSelect","date","formattedDate","event","CustomEvent","hostEl","dispatchEvent","placeholder","formattedValue","format","Date","FORMAT_DATE","onFocus","onBlur","verdocsFieldDropdownCss","VerdocsFieldDropdown","class_4","selectEl","showPicker","handleChange","fieldChange","target","options","onChange","ref","el","map","option","selected","length","verdocsFieldInitialCss","VerdocsFieldInitial","class_5","initials","tempInitials","hideDialog","dialog","remove","handleAdopt","createElement","setAttribute","addEventListener","body","append","base64","src","alt","verdocsFieldRadioCss","RadioIconUnselected","RadioIconSelected","VerdocsFieldRadio","class_6","group","maxWidth","verdocsFieldSignatureCss","VerdocsFieldSignature","class_7","tempSignature","verdocsFieldTextareaCss","VerdocsFieldTextarea","class_8","endpoint","VerdocsEndpoint","getDefault","inputEl","focus","componentDidRender","interact","dynamicDrop","resizable","edges","top","bottom","left","right","listeners","start","handleResizeStart","bind","move","handleResize","end","handleResizeEnd","dataset","x","y","rect","width","height","parseFloat","deltaRect","Object","assign","split","translateX","translateY","round","updateField","then","catch","verdocsFieldTextboxCss","VerdocsFieldTextbox","class_9","multiline","modifiers","restrictSize","min","originalBottom","dX","dY","currentLeft","currentBottom","newBottom","getTemplate","template","sent","oldField","fields","find","f","fbot","updatedField","__awaiter","newTemplate","JSON","parse","stringify","fieldIndex","findIndex","updateTemplate","_p","default","_q","maxlength","verdocsFieldTimestampCss","VerdocsFieldTimestamp","class_10","formatted","toISOString","FORMAT_TIMESTAMP","verdocsInitialDialogCss","VerdocsInitialDialog","fontLoaded","enteredInitials","mode","componentWillLoad","toUpperCase","ds","FontFace","load","font","fonts","add","redrawSignature","componentDidUpdate","canvasElement","canvasWidth","context","getContext","clearRect","fontSize","measureText","textAlign","textBaseline","fillText","handleNameChange","handleCancel","exit","data","toDataURL","next","key","onInput","display","variant","verdocsSignatureDialogCss","VerdocsSignatureDialog","enteredName","size","verdocsUploadDialogCss","TrashIcon","VerdocsUploadDialog","class_11","maxSize","draggingOver","confirmDelete","selectedFiles","errorMessage","handleDismiss","handleDone","handleDragOver","handleDragLeave","handleDrop","handleSetSelected","Array","from","dataTransfer","files","handleRemoveAttachment","newFiles","__spreadArray","splice","totalSize","reduce","acc","file","handleDeleteAttachment","handleSelectFile","fileInput","click","handleFileChange","marginTop","onDragOver","onDragLeave","onDrop","accept","heading","message","showCancel"],"sources":["src/components/fields/verdocs-field-attachment/verdocs-field-attachment.scss?tag=verdocs-field-attachment","src/components/fields/verdocs-field-attachment/verdocs-field-attachment.tsx","src/components/fields/verdocs-field-checkbox/verdocs-field-checkbox.scss?tag=verdocs-field-checkbox","src/components/fields/verdocs-field-checkbox/verdocs-field-checkbox.tsx","src/components/fields/verdocs-field-date/verdocs-field-date.scss?tag=verdocs-field-date","src/components/fields/verdocs-field-date/verdocs-field-date.tsx","src/components/fields/verdocs-field-dropdown/verdocs-field-dropdown.scss?tag=verdocs-field-dropdown","src/components/fields/verdocs-field-dropdown/verdocs-field-dropdown.tsx","src/components/fields/verdocs-field-initial/verdocs-field-initial.scss?tag=verdocs-field-initial","src/components/fields/verdocs-field-initial/verdocs-field-initial.tsx","src/components/fields/verdocs-field-radio/verdocs-field-radio.scss?tag=verdocs-field-radio","src/components/fields/verdocs-field-radio/verdocs-field-radio.tsx","src/components/fields/verdocs-field-signature/verdocs-field-signature.scss?tag=verdocs-field-signature","src/components/fields/verdocs-field-signature/verdocs-field-signature.tsx","src/components/fields/verdocs-field-textarea/verdocs-field-textarea.scss?tag=verdocs-field-textarea","src/components/fields/verdocs-field-textarea/verdocs-field-textarea.tsx","src/components/fields/verdocs-field-textbox/verdocs-field-textbox.scss?tag=verdocs-field-textbox","src/components/fields/verdocs-field-textbox/verdocs-field-textbox.tsx","src/components/fields/verdocs-field-timestamp/verdocs-field-timestamp.scss?tag=verdocs-field-timestamp","src/components/fields/verdocs-field-timestamp/verdocs-field-timestamp.tsx","src/components/dialogs/verdocs-initial-dialog/verdocs-initial-dialog.scss?tag=verdocs-initial-dialog","src/components/dialogs/verdocs-initial-dialog/verdocs-initial-dialog.tsx","src/components/dialogs/verdocs-signature-dialog/verdocs-signature-dialog.scss?tag=verdocs-signature-dialog","src/components/dialogs/verdocs-signature-dialog/verdocs-signature-dialog.tsx","src/components/dialogs/verdocs-upload-dialog/verdocs-upload-dialog.scss?tag=verdocs-upload-dialog","src/components/dialogs/verdocs-upload-dialog/verdocs-upload-dialog.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-attachment {\n  font-family: $verdocs-primary-font;\n  box-sizing: border-box;\n  width: 24px;\n  height: 24px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  scroll-margin: 20px 0;\n  background-color: transparent;\n  transform-origin: bottom left;\n\n  &.focused {\n    animation: verdocs-field-pulse 0.4s 1;\n  }\n\n  label {\n    top: -14px;\n    left: -1px;\n    height: 14px;\n    color: white;\n    padding: 0 4px;\n    font-size: 9px;\n    line-height: 13px;\n    position: absolute;\n    background: #4a4a99;\n    border-top-left-radius: 2px;\n    border-top-right-radius: 2px;\n  }\n\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n\n  &.disabled svg {\n    opacity: 0.5;\n\n    span {\n      cursor: inherit;\n    }\n  }\n\n  .attach {\n    // This is needed to bring down the cursor from the parent element, which is where interactjs applies it\n    cursor: inherit;\n    width: 24px;\n    height: 24px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  &.required {\n    .attach {\n      border: 1px solid $verdocs-red-1;\n    }\n  }\n\n  verdocs-button-panel {\n    top: 1px;\n    left: -19px;\n    opacity: 0.5;\n    z-index: 1000;\n    cursor: pointer;\n    position: absolute;\n    transform: scale(0.6);\n\n    &[data-active],\n    &:hover {\n      opacity: 1;\n    }\n\n    .icon {\n      svg {\n        fill: #333333;\n      }\n\n      &:hover {\n        svg {\n          fill: #000000;\n        }\n      }\n    }\n  }\n\n  .settings-icon {\n    position: absolute;\n    top: -3px;\n    left: -20px;\n    display: inline-block;\n    cursor: pointer;\n    opacity: 0.3;\n\n    svg {\n      fill: $border-color;\n    }\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n}\n\n@keyframes verdocs-field-pulse {\n  0% {\n    background-color: rgba(0, 0, 0, 0.35);\n  }\n  50% {\n    background-color: rgba(0, 0, 0, 0);\n  }\n  100% {\n    background-color: rgba(0, 0, 0, 0.35);\n  }\n}\n","import {ITemplateField, getRGBA, IEnvelopeField} from '@verdocs/js-sdk';\nimport {Component, h, Host, Prop, Method, Event, EventEmitter, State, Fragment, Element} from '@stencil/core';\nimport {SettingsIcon} from '../../../utils/Icons';\nimport {Store} from '../../../utils/Datastore';\n\nexport interface ISelectedFile {\n  lastModified: number;\n  size: number;\n  type: string;\n  name: string;\n  data: string;\n}\n\nconst PaperclipIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13\" /></svg>`;\n\nconst AttachedIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#339933\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-file-check\"><path d=\"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z\"/><path d=\"M14 2v4a2 2 0 0 0 2 2h4\"/><path d=\"m9 15 2 2 4-4\"/></svg>`;\n\n/**\n * Displays an attachment field.\n */\n@Component({\n  tag: 'verdocs-field-attachment',\n  styleUrl: 'verdocs-field-attachment.scss',\n  shadow: false,\n})\nexport class VerdocsFieldAttachment {\n  @Element() el: HTMLElement;\n\n  /**\n   * Fields may be attached to templates or envelopes, but only template fields may be edited.\n   */\n  @Prop({reflect: true}) source: 'template' | 'envelope' = 'template';\n\n  /**\n   * The source template or envelope ID the field is found in.\n   */\n  @Prop({reflect: true}) sourceid: string = '';\n\n  /**\n   * The name of the field to display.\n   */\n  @Prop({reflect: true}) fieldname: string = '';\n\n  /**\n   * Override the field's settings. This is intended to be used during signing when fields are being\n   * mutated.\n   */\n  @Prop() field: IEnvelopeField | null | undefined = null;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop({reflect: true}) disabled?: boolean = false;\n\n  /**\n   * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n   * changed, so it should typically only be enabled in the Builder.\n   */\n  @Prop({reflect: true}) editable?: boolean = false;\n\n  /**\n   * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n   */\n  @Prop({reflect: true}) moveable?: boolean = false;\n\n  /**\n   * If set, the field is considered \"done\" and is drawn in a display-final-value state.\n   */\n  @Prop({reflect: true}) done?: boolean = false;\n\n  /**\n   * If set, the field will be be scaled horizontally by this factor.\n   */\n  @Prop({reflect: true}) xscale?: number = 1;\n\n  /**\n   * If set, the field will be be scaled vertically by this factor.\n   */\n  @Prop({reflect: true}) yscale?: number = 1;\n\n  /**\n   * The page the field is on\n   */\n  @Prop({reflect: true}) pagenumber?: number = 1;\n\n  /**\n   * Event fired when the field's settings are changed.\n   */\n  @Event({composed: true}) settingsChanged: EventEmitter<{fieldName: string; field: ITemplateField}>;\n\n  /**\n   * Event fired when a file is attached by the signer.\n   */\n  @Event({composed: true}) attached: EventEmitter<ISelectedFile>;\n\n  /**\n   * Event fired when the field is deleted. Note that this is for the FIELD (e.g. in\n   * Build) not for any attachments (during signing).\n   */\n  @Event({composed: true}) deleted: EventEmitter<{fieldName: string}>;\n\n  @State() showingProperties?: boolean = false;\n  @State() dialogOpen?: boolean = false;\n  @State() selectedFile?: ISelectedFile | null = null;\n  @State() focused = false;\n\n  @Method()\n  async focusField() {\n    // Our input field is fake, so we fake the flash too\n    this.focused = true;\n    this.dialogOpen = true;\n    setTimeout(() => {\n      this.focused = false;\n    }, 500);\n  }\n\n  @Method()\n  async showSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.showPanel) {\n      settingsPanel.showPanel();\n    }\n  }\n\n  @Method()\n  async hideSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.hidePanel) {\n      settingsPanel.hidePanel();\n    }\n  }\n\n  handleShow() {\n    this.dialogOpen = true;\n  }\n\n  handleUploadNext = (e: any) => {\n    console.log('Upload next', e);\n    this.dialogOpen = false;\n    this.selectedFile = e.detail[0];\n    this.attached?.emit(e.detail[0]);\n  };\n\n  handleUploadRemove = (e: any) => {\n    e.preventDefault();\n    e.stopPropagation();\n    this.dialogOpen = false;\n    this.selectedFile = null;\n    this.deleted?.emit({fieldName: this.fieldname});\n  };\n\n  render() {\n    const {source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1} = this;\n\n    const {index, field} = Store.getField(source, sourceid, fieldname, this.field);\n    const {required = false, value = '', label = '', settings = {}} = field || {};\n    const backgroundColor = getRGBA(index);\n\n    const hasFile = value || !!this.selectedFile;\n\n    if (done) {\n      return (\n        <Host class={{done}}>\n          <div class=\"attach\" innerHTML={hasFile ? AttachedIcon : PaperclipIcon} />\n        </Host>\n      );\n    }\n\n    return (\n      <Host class={{required, disabled, done, focused}} style={{backgroundColor}}>\n        {label && <label>{label}</label>}\n\n        <div class=\"attach\" innerHTML={hasFile ? AttachedIcon : PaperclipIcon} onClick={() => !disabled && this.handleShow()} />\n\n        {editable && (\n          <Fragment>\n            <div\n              id={`verdocs-settings-panel-trigger-${fieldname}`}\n              style={{transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})`}}\n              class=\"settings-icon\"\n              innerHTML={SettingsIcon}\n              onClick={(e: any) => {\n                e.stopPropagation();\n                this.showingProperties = !this.showingProperties;\n              }}\n            />\n\n            {this.showingProperties && (\n              <verdocs-portal anchor={`verdocs-settings-panel-trigger-${fieldname}`} onClickAway={() => (this.showingProperties = false)}>\n                <verdocs-template-field-properties\n                  templateId={sourceid}\n                  fieldName={fieldname}\n                  onClose={() => (this.showingProperties = false)}\n                  onDelete={() => {\n                    this.deleted?.emit({fieldName: fieldname});\n                    return this.hideSettingsPanel();\n                  }}\n                  onSettingsChanged={e => {\n                    this.settingsChanged?.emit(e.detail);\n                    return this.hideSettingsPanel();\n                  }}\n                  helpText={'Attachments allow the user to attach their own documents (e.g. resumes or disclosures) to a signing flow.'}\n                />\n              </verdocs-portal>\n            )}\n          </Fragment>\n        )}\n\n        {this.dialogOpen && (\n          <verdocs-portal>\n            <verdocs-upload-dialog\n              existingFile={settings}\n              onNext={e => this.handleUploadNext(e)}\n              onRemove={e => this.handleUploadRemove(e)}\n              onExit={() => (this.dialogOpen = false)}\n            />\n          </verdocs-portal>\n        )}\n      </Host>\n    );\n  }\n}\n","@import '../../../theme.scss';\n\n// See https://www.kallmanation.com/styling-a-checkbox-with-only-css\nverdocs-field-checkbox {\n  padding: 0;\n  width: 16px;\n  height: 16px;\n  display: block;\n  scroll-margin: 20px 0;\n  box-sizing: border-box;\n  transform-origin: bottom left;\n  font-family: $verdocs-primary-font;\n\n  // To avoid conflicting with the use of a label for the checkbox itself\n  div.label {\n    top: -14px;\n    left: -1px;\n    height: 14px;\n    color: white;\n    padding: 0 4px;\n    font-size: 9px;\n    line-height: 13px;\n    position: absolute;\n    background: #4a4a99;\n    border-top-left-radius: 2px;\n    border-top-right-radius: 2px;\n  }\n\n  label {\n    // This is needed to bring down the cursor from the parent element, which is where interactjs applies it\n    cursor: inherit;\n\n    width: 14px;\n    height: 14px;\n    display: block;\n    box-sizing: border-box;\n  }\n\n  &.disabled label {\n    opacity: 0.5;\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.4s 1;\n  }\n\n  label > input[type='checkbox'] {\n    display: none;\n  }\n\n  label > input[type='checkbox'] + *::before {\n    margin: 0;\n    content: '';\n    width: 12px;\n    height: 12px;\n    display: block;\n    line-height: 12px;\n    border-radius: 2px;\n    box-sizing: border-box;\n    border: 1px solid $verdocs-grey-2;\n  }\n\n  label > input[type='checkbox']:checked + * {\n    color: $verdocs-green;\n  }\n\n  label > input[type='checkbox']:checked + *::before {\n    content: '✓';\n    color: white;\n    font-size: 12px;\n    text-align: center;\n    background: $verdocs-green;\n    border-color: $verdocs-green;\n  }\n\n  &.required {\n    border: 1px solid $verdocs-red-1;\n  }\n\n  &.hide {\n    display: none;\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.4s 1;\n  }\n\n  verdocs-button-panel {\n    display: block;\n    margin-left: -20px;\n    margin-top: -17px;\n    transform: scale(0.7);\n  }\n\n  .settings-icon {\n    position: absolute;\n    top: -5px;\n    left: -20px;\n    display: inline-block;\n    cursor: pointer;\n    opacity: 0.3;\n\n    svg {\n      fill: $border-color;\n    }\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n}\n\n@keyframes verdocs-field-pulse {\n  0% {\n    background-color: rgba(0, 0, 0, 0.35);\n  }\n  50% {\n    background-color: rgba(0, 0, 0, 0);\n  }\n  100% {\n    background-color: rgba(0, 0, 0, 0.35);\n  }\n}\n","import {ITemplateField, getRGBA, IEnvelopeField} from '@verdocs/js-sdk';\nimport {Component, Event, EventEmitter, Fragment, h, Host, Method, Prop, State} from '@stencil/core';\nimport {SettingsIcon} from '../../../utils/Icons';\nimport {Store} from '../../../utils/Datastore';\n\n/**\n * Displays a checkbox.\n */\n@Component({\n  tag: 'verdocs-field-checkbox',\n  styleUrl: 'verdocs-field-checkbox.scss',\n  shadow: false,\n})\nexport class VerdocsFieldCheckbox {\n  /**\n   * Fields may be attached to templates or envelopes, but only template fields may be edited.\n   */\n  @Prop({reflect: true}) source: 'template' | 'envelope' = 'template';\n\n  /**\n   * The source template or envelope ID the field is found in.\n   */\n  @Prop({reflect: true}) sourceid: string = '';\n\n  /**\n   * The name of the field to display.\n   */\n  @Prop({reflect: true}) fieldname: string = '';\n\n  /**\n   * Override the field's settings. This is intended to be used during signing when fields are being\n   * mutated.\n   */\n  @Prop() field: IEnvelopeField | null | undefined = null;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop({reflect: true}) disabled?: boolean = false;\n\n  /**\n   * If set, the field is considered \"done\" and is drawn in a display-final-value state.\n   */\n  @Prop({reflect: true}) done?: boolean = false;\n\n  /**\n   * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n   * changed, so it should typically only be enabled in the Builder.\n   */\n  @Prop({reflect: true}) editable?: boolean = false;\n\n  /**\n   * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n   */\n  @Prop({reflect: true}) moveable?: boolean = false;\n\n  /**\n   * If set, the field will be be scaled horizontally by this factor.\n   */\n  @Prop({reflect: true}) xscale?: number = 1;\n\n  /**\n   * If set, the field will be be scaled vertically by this factor.\n   */\n  @Prop({reflect: true}) yscale?: number = 1;\n\n  /**\n   * The page the field is on\n   */\n  @Prop({reflect: true}) pagenumber?: number = 1;\n\n  /**\n   * Event fired when the field's settings are changed.\n   */\n  @Event({composed: true}) settingsChanged: EventEmitter<{fieldName: string; field: ITemplateField}>;\n\n  /**\n   * Event fired when the field is deleted.\n   */\n  @Event({composed: true}) deleted: EventEmitter<{fieldName: string}>;\n\n  @State() showingProperties?: boolean = false;\n  @State() focused?: boolean = false;\n\n  @Method()\n  async focusField() {\n    // We don't have a visible input that we can actually focus on, so we fake it\n    this.focused = true;\n    setTimeout(() => {\n      this.focused = false;\n    }, 500);\n  }\n\n  @Method()\n  async showSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.showPanel) {\n      settingsPanel.showPanel();\n    }\n  }\n\n  @Method()\n  async hideSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.hidePanel) {\n      settingsPanel.hidePanel();\n    }\n  }\n\n  render() {\n    const {source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1} = this;\n\n    const {index, field} = Store.getField(source, sourceid, fieldname, this.field);\n    const {required = false, label = '', value = false} = field || {};\n    const backgroundColor = getRGBA(index);\n\n    const checked = value === 'true';\n\n    if (done) {\n      return <Host class={{done}}>{checked ? '✓' : '☐'}</Host>;\n    }\n\n    return (\n      <Host class={{required, disabled, done, focused}} style={{backgroundColor}}>\n        {label && <div class=\"label\">{label}</div>}\n\n        <label htmlFor={fieldname}>\n          <input id={fieldname} name={fieldname} type=\"checkbox\" checked={checked} disabled={disabled} required={required} />\n          <span />\n\n          {editable && (\n            <Fragment>\n              <div\n                id={`verdocs-settings-panel-trigger-${fieldname}`}\n                style={{transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})`}}\n                class=\"settings-icon\"\n                innerHTML={SettingsIcon}\n                onClick={(e: any) => {\n                  e.stopPropagation();\n                  this.showingProperties = !this.showingProperties;\n                }}\n              />\n\n              {this.showingProperties && (\n                <verdocs-portal anchor={`verdocs-settings-panel-trigger-${field.name}`} onClickAway={() => (this.showingProperties = false)}>\n                  <verdocs-template-field-properties\n                    templateId={sourceid}\n                    fieldName={field.name}\n                    onClose={() => (this.showingProperties = false)}\n                    onDelete={() => {\n                      this.deleted?.emit({fieldName: fieldname});\n                      return this.hideSettingsPanel();\n                    }}\n                    onSettingsChanged={e => {\n                      this.settingsChanged?.emit(e.detail);\n                      return this.hideSettingsPanel();\n                    }}\n                    helpText={'Check boxes allow the user to select one or more (non-exclusive) options.'}\n                  />\n                </verdocs-portal>\n              )}\n            </Fragment>\n          )}\n        </label>\n      </Host>\n    );\n  }\n}\n","@import '../../../theme.scss';\n\nverdocs-field-date {\n  font-family: $verdocs-primary-font;\n  width: 74px;\n  height: 20px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  scroll-margin: 20px 0;\n  letter-spacing: 0.3px;\n  background-color: transparent;\n  transform-origin: bottom left;\n\n  &.focused {\n    animation: verdocs-field-pulse 0.4s 1;\n  }\n\n  label {\n    top: -14px;\n    left: 0;\n    height: 14px;\n    color: white;\n    padding: 0 4px;\n    font-size: 9px;\n    line-height: 13px;\n    position: absolute;\n    background: #4a4a99;\n    border-top-left-radius: 2px;\n    border-top-right-radius: 2px;\n  }\n\n  input {\n    position: absolute;\n\n    font-size: 12px;\n\n    // This is needed to bring down the cursor from the parent element, which is where interactjs applies it\n    cursor: inherit;\n\n    box-sizing: border-box;\n    color: rgba(0, 0, 0, 0.87);\n    font-weight: 500;\n    transform-origin: 0 0;\n    height: 100%;\n    width: 100%;\n    background: none;\n    border: 1px solid $light-border-color;\n    appearance: none;\n\n    &.hide {\n      display: none;\n    }\n  }\n\n  &.disabled input {\n    opacity: 0.5;\n  }\n\n  &.required {\n    input {\n      border: 1px solid $verdocs-red-1;\n    }\n  }\n\n  verdocs-button-panel {\n    top: -3px;\n    left: -2px;\n    opacity: 0.5;\n    z-index: 1000;\n    cursor: pointer;\n    position: absolute;\n    transform: scale(0.6);\n\n    &[data-active],\n    &:hover {\n      opacity: 1;\n    }\n\n    .icon {\n      svg {\n        fill: #333333;\n      }\n\n      &:hover {\n        svg {\n          fill: #000000;\n        }\n      }\n    }\n  }\n\n  .settings-icon {\n    position: absolute;\n    top: -3px;\n    left: -18px;\n    display: inline-block;\n    cursor: pointer;\n    opacity: 0.3;\n\n    svg {\n      fill: $border-color;\n    }\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n}\n\n.air-datepicker-cell.-year-.-other-decade-,\n.air-datepicker-cell.-day-.-other-month- {\n  color: var(--adp-color-other-month);\n}\n.air-datepicker-cell.-year-.-other-decade-:hover,\n.air-datepicker-cell.-day-.-other-month-:hover {\n  color: var(--adp-color-other-month-hover);\n}\n.-disabled-.-focus-.air-datepicker-cell.-year-.-other-decade-,\n.-disabled-.-focus-.air-datepicker-cell.-day-.-other-month- {\n  color: var(--adp-color-other-month);\n}\n.-selected-.air-datepicker-cell.-year-.-other-decade-,\n.-selected-.air-datepicker-cell.-day-.-other-month- {\n  color: #fff;\n  background: var(--adp-background-color-selected-other-month);\n}\n.-selected-.-focus-.air-datepicker-cell.-year-.-other-decade-,\n.-selected-.-focus-.air-datepicker-cell.-day-.-other-month- {\n  background: var(--adp-background-color-selected-other-month-focused);\n}\n.-in-range-.air-datepicker-cell.-year-.-other-decade-,\n.-in-range-.air-datepicker-cell.-day-.-other-month- {\n  background-color: var(--adp-background-color-in-range);\n  color: var(--adp-color);\n}\n.-in-range-.-focus-.air-datepicker-cell.-year-.-other-decade-,\n.-in-range-.-focus-.air-datepicker-cell.-day-.-other-month- {\n  background-color: var(--adp-background-color-in-range-focused);\n}\n.air-datepicker-cell.-year-.-other-decade-:empty,\n.air-datepicker-cell.-day-.-other-month-:empty {\n  background: none;\n  border: none;\n}\n.air-datepicker-cell {\n  border-radius: var(--adp-cell-border-radius);\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  position: relative;\n  align-items: center;\n  justify-content: center;\n  z-index: 1;\n}\n.air-datepicker-cell.-focus- {\n  background: var(--adp-cell-background-color-hover);\n}\n.air-datepicker-cell.-current- {\n  color: var(--adp-color-current-date);\n}\n.air-datepicker-cell.-current-.-focus- {\n  color: var(--adp-color);\n}\n.air-datepicker-cell.-current-.-in-range- {\n  color: var(--adp-color-current-date);\n}\n.air-datepicker-cell.-disabled- {\n  cursor: default;\n  color: var(--adp-color-disabled);\n}\n.air-datepicker-cell.-disabled-.-focus- {\n  color: var(--adp-color-disabled);\n}\n.air-datepicker-cell.-disabled-.-in-range- {\n  color: var(--adp-color-disabled-in-range);\n}\n.air-datepicker-cell.-disabled-.-current-.-focus- {\n  color: var(--adp-color-disabled);\n}\n.air-datepicker-cell.-in-range- {\n  background: var(--adp-cell-background-color-in-range);\n  border-radius: 0;\n}\n.air-datepicker-cell.-in-range-:hover {\n  background: var(--adp-cell-background-color-in-range-hover);\n}\n.air-datepicker-cell.-range-from- {\n  border: 1px solid var(--adp-cell-border-color-in-range);\n  background-color: var(--adp-cell-background-color-in-range);\n  border-radius: var(--adp-cell-border-radius) 0 0 var(--adp-cell-border-radius);\n}\n.air-datepicker-cell.-range-to- {\n  border: 1px solid var(--adp-cell-border-color-in-range);\n  background-color: var(--adp-cell-background-color-in-range);\n  border-radius: 0 var(--adp-cell-border-radius) var(--adp-cell-border-radius) 0;\n}\n.air-datepicker-cell.-range-to-.-range-from- {\n  border-radius: var(--adp-cell-border-radius);\n}\n.air-datepicker-cell.-selected- {\n  color: #fff;\n  border: none;\n  background: var(--adp-cell-background-color-selected);\n}\n.air-datepicker-cell.-selected-.-current- {\n  color: #fff;\n  background: var(--adp-cell-background-color-selected);\n}\n.air-datepicker-cell.-selected-.-focus- {\n  background: var(--adp-cell-background-color-selected-hover);\n}\n.air-datepicker-body {\n  transition: all var(--adp-transition-duration) var(--adp-transition-ease);\n}\n.air-datepicker-body.-hidden- {\n  display: none;\n}\n.air-datepicker-body--day-names {\n  display: grid;\n  grid-template-columns: repeat(7, var(--adp-day-cell-width));\n  margin: 8px 0 3px;\n}\n.air-datepicker-body--day-name {\n  color: var(--adp-day-name-color);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  text-align: center;\n  text-transform: uppercase;\n  font-size: 0.8em;\n}\n.air-datepicker-body--day-name.-clickable- {\n  cursor: pointer;\n}\n.air-datepicker-body--day-name.-clickable-:hover {\n  color: var(--adp-day-name-color-hover);\n}\n.air-datepicker-body--cells {\n  display: grid;\n}\n.air-datepicker-body--cells.-days- {\n  grid-template-columns: repeat(7, var(--adp-day-cell-width));\n  grid-auto-rows: var(--adp-day-cell-height);\n}\n.air-datepicker-body--cells.-months- {\n  grid-template-columns: repeat(3, 1fr);\n  grid-auto-rows: var(--adp-month-cell-height);\n}\n.air-datepicker-body--cells.-years- {\n  grid-template-columns: repeat(4, 1fr);\n  grid-auto-rows: var(--adp-year-cell-height);\n}\n.air-datepicker-nav {\n  display: flex;\n  justify-content: space-between;\n  border-bottom: 1px solid var(--adp-border-color-inner);\n  min-height: var(--adp-nav-height);\n  padding: var(--adp-padding);\n  box-sizing: content-box;\n}\n.-only-timepicker- .air-datepicker-nav {\n  display: none;\n}\n.air-datepicker-nav--title,\n.air-datepicker-nav--action {\n  display: flex;\n  cursor: pointer;\n  align-items: center;\n  justify-content: center;\n}\n.air-datepicker-nav--action {\n  width: var(--adp-nav-action-size);\n  border-radius: var(--adp-border-radius);\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  user-select: none;\n}\n.air-datepicker-nav--action:hover {\n  background: var(--adp-background-color-hover);\n}\n.air-datepicker-nav--action:active {\n  background: var(--adp-background-color-active);\n}\n.air-datepicker-nav--action.-disabled- {\n  visibility: hidden;\n}\n.air-datepicker-nav--action svg {\n  width: 32px;\n  height: 32px;\n}\n.air-datepicker-nav--action path {\n  fill: none;\n  stroke: var(--adp-nav-arrow-color);\n  stroke-width: 2px;\n}\n.air-datepicker-nav--title {\n  border-radius: var(--adp-border-radius);\n  padding: 0 8px;\n}\n.air-datepicker-nav--title i {\n  font-style: normal;\n  color: var(--adp-nav-color-secondary);\n  margin-left: 0.3em;\n}\n.air-datepicker-nav--title:hover {\n  background: var(--adp-background-color-hover);\n}\n.air-datepicker-nav--title:active {\n  background: var(--adp-background-color-active);\n}\n.air-datepicker-nav--title.-disabled- {\n  cursor: default;\n  background: none;\n}\n.air-datepicker-buttons {\n  display: grid;\n  grid-auto-columns: 1fr;\n  grid-auto-flow: column;\n}\n.air-datepicker-button {\n  display: inline-flex;\n  color: var(--adp-btn-color);\n  border-radius: var(--adp-btn-border-radius);\n  cursor: pointer;\n  height: var(--adp-btn-height);\n  border: none;\n  background: rgba(255, 255, 255, 0);\n}\n.air-datepicker-button:hover {\n  color: var(--adp-btn-color-hover);\n  background: var(--adp-btn-background-color-hover);\n}\n.air-datepicker-button:focus {\n  color: var(--adp-btn-color-hover);\n  background: var(--adp-btn-background-color-hover);\n  outline: none;\n}\n.air-datepicker-button:active {\n  background: var(--adp-btn-background-color-active);\n}\n.air-datepicker-button span {\n  outline: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n}\n.air-datepicker-time {\n  display: grid;\n  grid-template-columns: max-content 1fr;\n  grid-column-gap: 12px;\n  align-items: center;\n  position: relative;\n  padding: 0 var(--adp-time-padding-inner);\n}\n.-only-timepicker- .air-datepicker-time {\n  border-top: none;\n}\n.air-datepicker-time--current {\n  display: flex;\n  align-items: center;\n  flex: 1;\n  font-size: 14px;\n  text-align: center;\n}\n.air-datepicker-time--current-colon {\n  margin: 0 2px 3px;\n  line-height: 1;\n}\n.air-datepicker-time--current-hours,\n.air-datepicker-time--current-minutes {\n  line-height: 1;\n  font-size: 19px;\n  font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;\n  position: relative;\n  z-index: 1;\n}\n.air-datepicker-time--current-hours:after,\n.air-datepicker-time--current-minutes:after {\n  content: '';\n  background: var(--adp-background-color-hover);\n  border-radius: var(--adp-border-radius);\n  position: absolute;\n  left: -2px;\n  top: -3px;\n  right: -2px;\n  bottom: -2px;\n  z-index: -1;\n  opacity: 0;\n}\n.air-datepicker-time--current-hours.-focus-:after,\n.air-datepicker-time--current-minutes.-focus-:after {\n  opacity: 1;\n}\n.air-datepicker-time--current-ampm {\n  text-transform: uppercase;\n  align-self: flex-end;\n  color: var(--adp-time-day-period-color);\n  margin-left: 6px;\n  font-size: 11px;\n  margin-bottom: 1px;\n}\n.air-datepicker-time--row {\n  display: flex;\n  align-items: center;\n  font-size: 11px;\n  height: 17px;\n  background: linear-gradient(to right, var(--adp-time-track-color), var(--adp-time-track-color)) left 50%/100% var(--adp-time-track-height) no-repeat;\n}\n.air-datepicker-time--row:first-child {\n  margin-bottom: 4px;\n}\n.air-datepicker-time--row input[type='range'] {\n  background: none;\n  cursor: pointer;\n  flex: 1;\n  height: 100%;\n  width: 100%;\n  padding: 0;\n  margin: 0;\n  -webkit-appearance: none;\n}\n.air-datepicker-time--row input[type='range']::-webkit-slider-thumb {\n  -webkit-appearance: none;\n}\n.air-datepicker-time--row input[type='range']::-ms-tooltip {\n  display: none;\n}\n.air-datepicker-time--row input[type='range']:hover::-webkit-slider-thumb {\n  border-color: var(--adp-time-track-color-hover);\n}\n.air-datepicker-time--row input[type='range']:hover::-moz-range-thumb {\n  border-color: var(--adp-time-track-color-hover);\n}\n.air-datepicker-time--row input[type='range']:hover::-ms-thumb {\n  border-color: var(--adp-time-track-color-hover);\n}\n.air-datepicker-time--row input[type='range']:focus {\n  outline: none;\n}\n.air-datepicker-time--row input[type='range']:focus::-webkit-slider-thumb {\n  background: var(--adp-cell-background-color-selected);\n  border-color: var(--adp-cell-background-color-selected);\n}\n.air-datepicker-time--row input[type='range']:focus::-moz-range-thumb {\n  background: var(--adp-cell-background-color-selected);\n  border-color: var(--adp-cell-background-color-selected);\n}\n.air-datepicker-time--row input[type='range']:focus::-ms-thumb {\n  background: var(--adp-cell-background-color-selected);\n  border-color: var(--adp-cell-background-color-selected);\n}\n.air-datepicker-time--row input[type='range']::-webkit-slider-thumb {\n  box-sizing: border-box;\n  height: 12px;\n  width: 12px;\n  border-radius: 3px;\n  border: 1px solid var(--adp-time-track-color);\n  background: #fff;\n  cursor: pointer;\n  -webkit-transition: background var(--adp-transition-duration);\n  transition: background var(--adp-transition-duration);\n}\n.air-datepicker-time--row input[type='range']::-moz-range-thumb {\n  box-sizing: border-box;\n  height: 12px;\n  width: 12px;\n  border-radius: 3px;\n  border: 1px solid var(--adp-time-track-color);\n  background: #fff;\n  cursor: pointer;\n  -moz-transition: background var(--adp-transition-duration);\n  transition: background var(--adp-transition-duration);\n}\n.air-datepicker-time--row input[type='range']::-ms-thumb {\n  box-sizing: border-box;\n  height: 12px;\n  width: 12px;\n  border-radius: 3px;\n  border: 1px solid var(--adp-time-track-color);\n  background: #fff;\n  cursor: pointer;\n  -ms-transition: background var(--adp-transition-duration);\n  transition: background var(--adp-transition-duration);\n}\n.air-datepicker-time--row input[type='range']::-webkit-slider-thumb {\n  margin-top: calc(var(--adp-time-thumb-size) / 2 * -1);\n}\n.air-datepicker-time--row input[type='range']::-webkit-slider-runnable-track {\n  border: none;\n  height: var(--adp-time-track-height);\n  cursor: pointer;\n  color: rgba(0, 0, 0, 0);\n  background: rgba(0, 0, 0, 0);\n}\n.air-datepicker-time--row input[type='range']::-moz-range-track {\n  border: none;\n  height: var(--adp-time-track-height);\n  cursor: pointer;\n  color: rgba(0, 0, 0, 0);\n  background: rgba(0, 0, 0, 0);\n}\n.air-datepicker-time--row input[type='range']::-ms-track {\n  border: none;\n  height: var(--adp-time-track-height);\n  cursor: pointer;\n  color: rgba(0, 0, 0, 0);\n  background: rgba(0, 0, 0, 0);\n}\n.air-datepicker-time--row input[type='range']::-ms-fill-lower {\n  background: rgba(0, 0, 0, 0);\n}\n.air-datepicker-time--row input[type='range']::-ms-fill-upper {\n  background: rgba(0, 0, 0, 0);\n}\n.air-datepicker {\n  --adp-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';\n  --adp-font-size: 14px;\n  --adp-width: 246px;\n  --adp-z-index: 100;\n  --adp-padding: 4px;\n  --adp-grid-areas: 'nav' 'body' 'timepicker' 'buttons';\n  --adp-transition-duration: 0.3s;\n  --adp-transition-ease: ease-out;\n  --adp-transition-offset: 8px;\n  --adp-background-color: #fff;\n  --adp-background-color-hover: #f0f0f0;\n  --adp-background-color-active: #eaeaea;\n  --adp-background-color-in-range: rgba(92, 196, 239, 0.1);\n  --adp-background-color-in-range-focused: rgba(92, 196, 239, 0.2);\n  --adp-background-color-selected-other-month-focused: #8ad5f4;\n  --adp-background-color-selected-other-month: #a2ddf6;\n  --adp-color: #4a4a4a;\n  --adp-color-secondary: #9c9c9c;\n  --adp-accent-color: #4eb5e6;\n  --adp-color-current-date: var(--adp-accent-color);\n  --adp-color-other-month: #dedede;\n  --adp-color-disabled: #aeaeae;\n  --adp-color-disabled-in-range: #939393;\n  --adp-color-other-month-hover: #c5c5c5;\n  --adp-border-color: #dbdbdb;\n  --adp-border-color-inner: #efefef;\n  --adp-border-radius: 4px;\n  --adp-border-color-inline: #d7d7d7;\n  --adp-nav-height: 32px;\n  --adp-nav-arrow-color: var(--adp-color-secondary);\n  --adp-nav-action-size: 32px;\n  --adp-nav-color-secondary: var(--adp-color-secondary);\n  --adp-day-name-color: #ff9a19;\n  --adp-day-name-color-hover: #8ad5f4;\n  --adp-day-cell-width: 1fr;\n  --adp-day-cell-height: 32px;\n  --adp-month-cell-height: 42px;\n  --adp-year-cell-height: 56px;\n  --adp-pointer-size: 10px;\n  --adp-poiner-border-radius: 2px;\n  --adp-pointer-offset: 14px;\n  --adp-cell-border-radius: 4px;\n  --adp-cell-background-color-hover: var(--adp-background-color-hover);\n  --adp-cell-background-color-selected: #5cc4ef;\n  --adp-cell-background-color-selected-hover: #45bced;\n  --adp-cell-background-color-in-range: rgba(92, 196, 239, 0.1);\n  --adp-cell-background-color-in-range-hover: rgba(92, 196, 239, 0.2);\n  --adp-cell-border-color-in-range: var(--adp-cell-background-color-selected);\n  --adp-btn-height: 32px;\n  --adp-btn-color: var(--adp-accent-color);\n  --adp-btn-color-hover: var(--adp-color);\n  --adp-btn-border-radius: var(--adp-border-radius);\n  --adp-btn-background-color-hover: var(--adp-background-color-hover);\n  --adp-btn-background-color-active: var(--adp-background-color-active);\n  --adp-time-track-height: 1px;\n  --adp-time-track-color: #dedede;\n  --adp-time-track-color-hover: #b1b1b1;\n  --adp-time-thumb-size: 12px;\n  --adp-time-padding-inner: 10px;\n  --adp-time-day-period-color: var(--adp-color-secondary);\n  --adp-mobile-font-size: 16px;\n  --adp-mobile-nav-height: 40px;\n  --adp-mobile-width: 320px;\n  --adp-mobile-day-cell-height: 38px;\n  --adp-mobile-month-cell-height: 48px;\n  --adp-mobile-year-cell-height: 64px;\n}\n.air-datepicker-overlay {\n  --adp-overlay-background-color: rgba(0, 0, 0, 0.3);\n  --adp-overlay-transition-duration: 0.3s;\n  --adp-overlay-transition-ease: ease-out;\n  --adp-overlay-z-index: 99;\n}\n.air-datepicker {\n  background: var(--adp-background-color);\n  border: 1px solid var(--adp-border-color);\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n  border-radius: var(--adp-border-radius);\n  box-sizing: content-box;\n  display: grid;\n  grid-template-columns: 1fr;\n  grid-template-rows: repeat(4, max-content);\n  grid-template-areas: var(--adp-grid-areas);\n  font-family: var(--adp-font-family), sans-serif;\n  font-size: var(--adp-font-size);\n  color: var(--adp-color);\n  width: var(--adp-width);\n  position: absolute;\n  transition:\n    opacity var(--adp-transition-duration) var(--adp-transition-ease),\n    transform var(--adp-transition-duration) var(--adp-transition-ease);\n  z-index: var(--adp-z-index);\n}\n.air-datepicker:not(.-custom-position-) {\n  opacity: 0;\n}\n.air-datepicker.-from-top- {\n  transform: translateY(calc(var(--adp-transition-offset) * -1));\n}\n.air-datepicker.-from-right- {\n  transform: translateX(var(--adp-transition-offset));\n}\n.air-datepicker.-from-bottom- {\n  transform: translateY(var(--adp-transition-offset));\n}\n.air-datepicker.-from-left- {\n  transform: translateX(calc(var(--adp-transition-offset) * -1));\n}\n.air-datepicker.-active-:not(.-custom-position-) {\n  transform: translate(0, 0);\n  opacity: 1;\n}\n.air-datepicker.-active-.-custom-position- {\n  transition: none;\n}\n.air-datepicker.-inline- {\n  border-color: var(--adp-border-color-inline);\n  box-shadow: none;\n  position: static;\n  left: auto;\n  right: auto;\n  opacity: 1;\n  transform: none;\n}\n.air-datepicker.-inline- .air-datepicker--pointer {\n  display: none;\n}\n.air-datepicker.-is-mobile- {\n  --adp-font-size: var(--adp-mobile-font-size);\n  --adp-day-cell-height: var(--adp-mobile-day-cell-height);\n  --adp-month-cell-height: var(--adp-mobile-month-cell-height);\n  --adp-year-cell-height: var(--adp-mobile-year-cell-height);\n  --adp-nav-height: var(--adp-mobile-nav-height);\n  --adp-nav-action-size: var(--adp-mobile-nav-height);\n  position: fixed;\n  width: var(--adp-mobile-width);\n  border: none;\n}\n.air-datepicker.-is-mobile- * {\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n.air-datepicker.-is-mobile- .air-datepicker--pointer {\n  display: none;\n}\n.air-datepicker.-is-mobile-:not(.-custom-position-) {\n  transform: translate(-50%, calc(-50% + var(--adp-transition-offset)));\n}\n.air-datepicker.-is-mobile-.-active-:not(.-custom-position-) {\n  transform: translate(-50%, -50%);\n}\n.air-datepicker.-custom-position- {\n  transition: none;\n}\n.air-datepicker-global-container {\n  position: absolute;\n  left: 0;\n  top: 0;\n}\n.air-datepicker--pointer {\n  --pointer-half-size: calc(var(--adp-pointer-size) / 2);\n  position: absolute;\n  width: var(--adp-pointer-size);\n  height: var(--adp-pointer-size);\n  z-index: -1;\n}\n.air-datepicker--pointer:after {\n  content: '';\n  position: absolute;\n  background: #fff;\n  border-top: 1px solid var(--adp-border-color-inline);\n  border-right: 1px solid var(--adp-border-color-inline);\n  border-top-right-radius: var(--adp-poiner-border-radius);\n  width: var(--adp-pointer-size);\n  height: var(--adp-pointer-size);\n  box-sizing: border-box;\n}\n.-top-left- .air-datepicker--pointer,\n.-top-center- .air-datepicker--pointer,\n.-top-right- .air-datepicker--pointer,\n[data-popper-placement^='top'] .air-datepicker--pointer {\n  top: calc(100% - var(--pointer-half-size) + 1px);\n}\n.-top-left- .air-datepicker--pointer:after,\n.-top-center- .air-datepicker--pointer:after,\n.-top-right- .air-datepicker--pointer:after,\n[data-popper-placement^='top'] .air-datepicker--pointer:after {\n  transform: rotate(135deg);\n}\n.-right-top- .air-datepicker--pointer,\n.-right-center- .air-datepicker--pointer,\n.-right-bottom- .air-datepicker--pointer,\n[data-popper-placement^='right'] .air-datepicker--pointer {\n  right: calc(100% - var(--pointer-half-size) + 1px);\n}\n.-right-top- .air-datepicker--pointer:after,\n.-right-center- .air-datepicker--pointer:after,\n.-right-bottom- .air-datepicker--pointer:after,\n[data-popper-placement^='right'] .air-datepicker--pointer:after {\n  transform: rotate(225deg);\n}\n.-bottom-left- .air-datepicker--pointer,\n.-bottom-center- .air-datepicker--pointer,\n.-bottom-right- .air-datepicker--pointer,\n[data-popper-placement^='bottom'] .air-datepicker--pointer {\n  bottom: calc(100% - var(--pointer-half-size) + 1px);\n}\n.-bottom-left- .air-datepicker--pointer:after,\n.-bottom-center- .air-datepicker--pointer:after,\n.-bottom-right- .air-datepicker--pointer:after,\n[data-popper-placement^='bottom'] .air-datepicker--pointer:after {\n  transform: rotate(315deg);\n}\n.-left-top- .air-datepicker--pointer,\n.-left-center- .air-datepicker--pointer,\n.-left-bottom- .air-datepicker--pointer,\n[data-popper-placement^='left'] .air-datepicker--pointer {\n  left: calc(100% - var(--pointer-half-size) + 1px);\n}\n.-left-top- .air-datepicker--pointer:after,\n.-left-center- .air-datepicker--pointer:after,\n.-left-bottom- .air-datepicker--pointer:after,\n[data-popper-placement^='left'] .air-datepicker--pointer:after {\n  transform: rotate(45deg);\n}\n.-top-left- .air-datepicker--pointer,\n.-bottom-left- .air-datepicker--pointer {\n  left: var(--adp-pointer-offset);\n}\n.-top-right- .air-datepicker--pointer,\n.-bottom-right- .air-datepicker--pointer {\n  right: var(--adp-pointer-offset);\n}\n.-top-center- .air-datepicker--pointer,\n.-bottom-center- .air-datepicker--pointer {\n  left: calc(50% - var(--adp-pointer-size) / 2);\n}\n.-left-top- .air-datepicker--pointer,\n.-right-top- .air-datepicker--pointer {\n  top: var(--adp-pointer-offset);\n}\n.-left-bottom- .air-datepicker--pointer,\n.-right-bottom- .air-datepicker--pointer {\n  bottom: var(--adp-pointer-offset);\n}\n.-left-center- .air-datepicker--pointer,\n.-right-center- .air-datepicker--pointer {\n  top: calc(50% - var(--adp-pointer-size) / 2);\n}\n.air-datepicker--navigation {\n  grid-area: nav;\n}\n.air-datepicker--content {\n  box-sizing: content-box;\n  padding: var(--adp-padding);\n  grid-area: body;\n}\n.-only-timepicker- .air-datepicker--content {\n  display: none;\n}\n.air-datepicker--time {\n  grid-area: timepicker;\n}\n.air-datepicker--buttons {\n  grid-area: buttons;\n}\n.air-datepicker--buttons,\n.air-datepicker--time {\n  padding: var(--adp-padding);\n  border-top: 1px solid var(--adp-border-color-inner);\n}\n.air-datepicker-overlay {\n  position: fixed;\n  background: var(--adp-overlay-background-color);\n  left: 0;\n  top: 0;\n  width: 0;\n  height: 0;\n  opacity: 0;\n  transition:\n    opacity var(--adp-overlay-transition-duration) var(--adp-overlay-transition-ease),\n    left 0s,\n    height 0s,\n    width 0s;\n  transition-delay: 0s, var(--adp-overlay-transition-duration), var(--adp-overlay-transition-duration), var(--adp-overlay-transition-duration);\n  z-index: var(--adp-overlay-z-index);\n}\n.air-datepicker-overlay.-active- {\n  opacity: 1;\n  width: 100%;\n  height: 100%;\n  transition:\n    opacity var(--adp-overlay-transition-duration) var(--adp-overlay-transition-ease),\n    height 0s,\n    width 0s;\n}\n\n@keyframes verdocs-field-pulse {\n  0% {\n    background-color: rgba(0, 0, 0, 0.35);\n  }\n  50% {\n    background-color: rgba(0, 0, 0, 0);\n  }\n  100% {\n    background-color: rgba(0, 0, 0, 0.35);\n  }\n}\n","import {format} from 'date-fns';\nimport {getRGBA} from '@verdocs/js-sdk';\nimport AirDatepicker from 'air-datepicker';\nimport localeEn from 'air-datepicker/locale/en';\nimport type {ITemplateField} from '@verdocs/js-sdk';\nimport {Component, Element, Event, EventEmitter, h, Host, Method, Prop, Fragment, State} from '@stencil/core';\nimport {SettingsIcon} from '../../../utils/Icons';\nimport {FORMAT_DATE} from '../../../utils/Types';\nimport {Store} from '../../../utils/Datastore';\n\n/**\n * Displays a date field. When tapped or clicked, the input element will display a date picker component.\n */\n@Component({\n  tag: 'verdocs-field-date',\n  styleUrl: 'verdocs-field-date.scss',\n  shadow: false,\n})\nexport class VerdocsFieldDate {\n  @Element()\n  private hostEl: HTMLInputElement;\n\n  /**\n   * Fields may be attached to templates or envelopes, but only template fields may be edited.\n   */\n  @Prop({reflect: true}) source: 'template' | 'envelope' = 'template';\n\n  /**\n   * The source template or envelope ID the field is found in.\n   */\n  @Prop({reflect: true}) sourceid: string = '';\n\n  /**\n   * The name of the field to display.\n   */\n  @Prop({reflect: true}) fieldname: string = '';\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop({reflect: true}) disabled?: boolean = false;\n\n  /**\n   * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n   * changed, so it should typically only be enabled in the Builder.\n   */\n  @Prop({reflect: true}) editable?: boolean = false;\n\n  /**\n   * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n   */\n  @Prop({reflect: true}) moveable?: boolean = false;\n\n  /**\n   * If set, the field is considered \"done\" and is drawn in a display-final-value state.\n   */\n  @Prop({reflect: true}) done?: boolean = false;\n\n  /**\n   * If set, the field will be be scaled horizontally by this factor.\n   */\n  @Prop({reflect: true}) xscale?: number = 1;\n\n  /**\n   * If set, the field will be be scaled vertically by this factor.\n   */\n  @Prop({reflect: true}) yscale?: number = 1;\n\n  /**\n   * The page the field is on\n   */\n  @Prop({reflect: true}) pagenumber?: number = 1;\n\n  /**\n   * If set, the field will be be scaled vertically by this factor.\n   */\n  @Prop() field?: ITemplateField;\n\n  /**\n   * Event fired on every character entered into / deleted from the field.\n   */\n  @Event({composed: true}) settingsPress: EventEmitter;\n\n  /**\n   * Event fired when the field's settings are changed.\n   */\n  @Event({composed: true}) settingsChanged: EventEmitter<{fieldName: string; field: ITemplateField}>;\n\n  /**\n   * Event fired when the field is deleted.\n   */\n  @Event({composed: true}) deleted: EventEmitter<{fieldName: string}>;\n\n  @State() containerId = `verdocs-date-picker-${Math.random().toString(36).substring(2, 11)}`;\n\n  @State() showingProperties?: boolean = false;\n\n  @Method()\n  async focusField() {\n    // Our input field is fake, so we fake the flash too\n    this.focused = true;\n    this.picker?.show();\n    setTimeout(() => {\n      this.focused = false;\n    }, 500);\n  }\n\n  picker: AirDatepicker<HTMLElement> | null = null;\n\n  componentDidLoad() {\n    this.picker = new AirDatepicker<HTMLElement>(`#${this.containerId}`, {\n      locale: localeEn,\n      isMobile: true,\n      autoClose: true,\n      onShow: () => (this.focused = true),\n      onHide: () => (this.focused = false),\n      onSelect: ({date, formattedDate}) => {\n        const event = new CustomEvent('fieldChange', {detail: {date, formattedDate}});\n        this.hostEl.dispatchEvent(event);\n      },\n    });\n  }\n\n  @Method()\n  async showSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.showPanel) {\n      settingsPanel.showPanel();\n    }\n  }\n\n  @Method()\n  async hideSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.hidePanel) {\n      settingsPanel.hidePanel();\n    }\n  }\n\n  @State() focused?: boolean = false;\n\n  // NOTE: We don't use a \"date\" field here because browsers vary widely in their formatting of it.\n  render() {\n    const {source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1} = this;\n\n    const {index, field} = Store.getField(source, sourceid, fieldname, this.field);\n    const {required = false, placeholder = 'Date...', value = '', label = ''} = field || {};\n    const backgroundColor = getRGBA(index);\n\n    const formattedValue = value ? format(new Date(value), FORMAT_DATE) : '';\n\n    if (this.done) {\n      return <Host class={{done}}>{formattedValue}</Host>;\n    }\n\n    return (\n      <Host class={{required, disabled, done, focused}} style={{backgroundColor}}>\n        {label && <label>{label}</label>}\n\n        <input\n          name={fieldname}\n          class=\"input-el\"\n          type=\"text\"\n          value={formattedValue}\n          id={this.containerId}\n          disabled={disabled}\n          placeholder={placeholder}\n          onFocus={() => (this.focused = true)}\n          onBlur={() => (this.focused = false)}\n        />\n\n        {editable && (\n          <Fragment>\n            <div\n              id={`verdocs-settings-panel-trigger-${fieldname}`}\n              style={{transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})`}}\n              class=\"settings-icon\"\n              innerHTML={SettingsIcon}\n              onClick={(e: any) => {\n                e.stopPropagation();\n                this.showingProperties = !this.showingProperties;\n              }}\n            />\n\n            {this.showingProperties && (\n              <verdocs-portal anchor={`verdocs-settings-panel-trigger-${field.name}`} onClickAway={() => (this.showingProperties = false)}>\n                <verdocs-template-field-properties\n                  templateId={sourceid}\n                  fieldName={fieldname}\n                  onClose={() => (this.showingProperties = false)}\n                  onDelete={() => {\n                    this.deleted?.emit({fieldName: fieldname});\n                    return this.hideSettingsPanel();\n                  }}\n                  onSettingsChanged={e => {\n                    this.settingsChanged?.emit(e.detail);\n                    return this.hideSettingsPanel();\n                  }}\n                  helpText={'Date fields allow the user to select a date.'}\n                />\n              </verdocs-portal>\n            )}\n          </Fragment>\n        )}\n      </Host>\n    );\n  }\n}\n","@import '../../../theme.scss';\n\nverdocs-field-dropdown {\n  font-family: $verdocs-primary-font;\n  width: 85px;\n  height: 20px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  scroll-margin: 20px 0;\n  background-color: transparent;\n  transform-origin: bottom left;\n\n  label {\n    top: -14px;\n    left: 0;\n    height: 14px;\n    color: white;\n    padding: 0 4px;\n    font-size: 9px;\n    line-height: 13px;\n    position: absolute;\n    background: #4a4a99;\n    border-top-left-radius: 2px;\n    border-top-right-radius: 2px;\n  }\n\n  select {\n    // This is needed to bring down the cursor from the parent element, which is where interactjs applies it\n    cursor: inherit;\n\n    position: absolute;\n    background: linear-gradient(55deg, transparent 50%, #333 50%), linear-gradient(125deg, #333 50%, transparent 50%), linear-gradient(to right, transparent, transparent);\n    background-position:\n      calc(100% - 7px) 6px,\n      calc(100% - 3px) 6px,\n      100% 0;\n    background-size:\n      5px 5px,\n      5px 5px,\n      2.5em 2.5em;\n    background-repeat: no-repeat;\n    appearance: none;\n\n    box-sizing: border-box;\n    color: rgba(0, 0, 0, 0.87);\n    font-weight: 500;\n    transform-origin: 0 0;\n    height: 100%;\n    width: 100%;\n    font-size: 11px;\n    border: 1px solid rgba(0, 0, 0, 0.2);\n    padding: 0 5px;\n\n    &:focus {\n      outline: none;\n    }\n\n    &.hide {\n      display: none;\n    }\n  }\n\n  &.disabled select {\n    opacity: 0.5;\n  }\n\n  &.required {\n    select {\n      border: 1px solid $verdocs-red-1;\n    }\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.4s 1;\n  }\n\n  verdocs-button-panel {\n    display: block;\n    margin-left: -33px;\n    margin-top: -1px;\n    transform: scale(0.7);\n  }\n\n  .settings-icon {\n    position: absolute;\n    top: -2px;\n    left: -20px;\n    display: inline-block;\n    cursor: pointer;\n    opacity: 0.3;\n\n    svg {\n      fill: $border-color;\n    }\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n}\n\n@keyframes verdocs-field-pulse {\n  0% {\n    background-color: rgba(0, 0, 0, 0.35);\n  }\n  50% {\n    background-color: rgba(0, 0, 0, 0);\n  }\n  100% {\n    background-color: rgba(0, 0, 0, 0.35);\n  }\n}\n","import {ITemplateField, getRGBA, IEnvelopeField} from '@verdocs/js-sdk';\nimport {Component, Event, EventEmitter, h, Host, Method, Prop, Fragment, State} from '@stencil/core';\nimport {SettingsIcon} from '../../../utils/Icons';\nimport {Store} from '../../../utils/Datastore';\n\n/**\n * Displays a dropdown field that allows the user to choose one of a list of options.\n */\n@Component({\n  tag: 'verdocs-field-dropdown',\n  styleUrl: 'verdocs-field-dropdown.scss',\n  shadow: false,\n})\nexport class VerdocsFieldDropdown {\n  selectEl: HTMLSelectElement;\n\n  /**\n   * Fields may be attached to templates or envelopes, but only template fields may be edited.\n   */\n  @Prop({reflect: true}) source: 'template' | 'envelope' = 'template';\n\n  /**\n   * The source template or envelope ID the field is found in.\n   */\n  @Prop({reflect: true}) sourceid: string = '';\n\n  /**\n   * The name of the field to display.\n   */\n  @Prop({reflect: true}) fieldname: string = '';\n\n  /**\n   * Override the field's settings. This is intended to be used during signing when fields are being\n   * mutated.\n   */\n  @Prop() field: IEnvelopeField | null | undefined = null;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop({reflect: true}) disabled?: boolean = false;\n\n  /**\n   * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n   * changed, so it should typically only be enabled in the Builder.\n   */\n  @Prop({reflect: true}) editable?: boolean = false;\n\n  /**\n   * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n   */\n  @Prop({reflect: true}) moveable?: boolean = false;\n\n  /**\n   * If set, the field is considered \"done\" and is drawn in a display-final-value state.\n   */\n  @Prop({reflect: true}) done?: boolean = false;\n\n  /**\n   * If set, the field will be be scaled horizontally by this factor.\n   */\n  @Prop({reflect: true}) xscale?: number = 1;\n\n  /**\n   * If set, the field will be be scaled vertically by this factor.\n   */\n  @Prop({reflect: true}) yscale?: number = 1;\n\n  /**\n   * The page the field is on\n   */\n  @Prop({reflect: true}) pagenumber?: number = 1;\n\n  /**\n   * Event fired when the input field value changes. Note that this will only be fired on blur, tab-out, ENTER key press, etc.\n   * It is generally the best event to subscribe to than `input` for most cases EXCEPT autocomplete fields that need to see every\n   * keypress.\n   */\n  @Event({composed: true}) fieldChange: EventEmitter<string>;\n\n  /**\n   * Event fired when the field's settings are changed.\n   */\n  @Event({composed: true}) settingsChanged: EventEmitter<{fieldName: string; field: ITemplateField}>;\n\n  /**\n   * Event fired when the field is deleted.\n   */\n  @Event({composed: true}) deleted: EventEmitter<{fieldName: string}>;\n\n  @State() showingProperties?: boolean = false;\n  @State() focused = false;\n\n  @Method()\n  async focusField() {\n    // Our input field is fake, so we fake the flash too\n    this.focused = true;\n    setTimeout(() => {\n      this.focused = false;\n    }, 500);\n\n    this.selectEl?.showPicker();\n  }\n\n  handleChange(e: any) {\n    this.fieldChange.emit(e.target.value);\n  }\n\n  @Method()\n  async showSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.showPanel) {\n      settingsPanel.showPanel();\n    }\n  }\n\n  @Method()\n  async hideSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.hidePanel) {\n      settingsPanel.hidePanel();\n    }\n  }\n\n  render() {\n    const {source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1} = this;\n\n    const {index, field} = Store.getField(source, sourceid, fieldname, this.field);\n    let {required = false, value = '', label = '', options} = field || {};\n    const backgroundColor = getRGBA(index);\n\n    if (done) {\n      return <Host class={{done}}>{value}</Host>;\n    }\n\n    // TODO: Look for other places this mistaken assumption was made.\n    // Defaults only apply in destructuring if undefined. null doesn't trigger it.\n    options ||= [];\n\n    return (\n      <Host class={{required, disabled, done, focused}} style={{backgroundColor}}>\n        {label && <label>{label}</label>}\n\n        <select disabled={disabled} onChange={e => this.handleChange(e)} ref={el => (this.selectEl = el as HTMLSelectElement)}>\n          <option value=\"\">Select...</option>\n          {options.map(option => (\n            <option value={option.id} selected={option.id === value}>\n              {option.label}\n            </option>\n          ))}\n          {!options.length && <option value=\"NA\">N/A</option>}\n        </select>\n\n        {editable && (\n          <Fragment>\n            <div\n              id={`verdocs-settings-panel-trigger-${fieldname}`}\n              style={{transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})`}}\n              class=\"settings-icon\"\n              innerHTML={SettingsIcon}\n              onClick={(e: any) => {\n                e.stopPropagation();\n                this.showingProperties = !this.showingProperties;\n              }}\n            />\n\n            {this.showingProperties && (\n              <verdocs-portal anchor={`verdocs-settings-panel-trigger-${fieldname}`} onClickAway={() => (this.showingProperties = false)}>\n                <verdocs-template-field-properties\n                  templateId={sourceid}\n                  fieldName={fieldname}\n                  onClose={() => (this.showingProperties = false)}\n                  onDelete={() => {\n                    this.deleted?.emit({fieldName: fieldname});\n                    return this.hideSettingsPanel();\n                  }}\n                  onSettingsChanged={e => {\n                    this.settingsChanged?.emit(e.detail);\n                    return this.hideSettingsPanel();\n                  }}\n                  helpText={\"Dropdowns are used to capture a recipient's selection of one of several options.\"}\n                />\n              </verdocs-portal>\n            )}\n          </Fragment>\n        )}\n      </Host>\n    );\n  }\n}\n","@import '../../../theme.scss';\n\nverdocs-field-initial {\n  font-family: $verdocs-primary-font;\n  width: 83px;\n  height: 36px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  letter-spacing: 0.3px;\n  scroll-margin: 20px 0;\n  background-color: transparent;\n  transform-origin: bottom left;\n  border: 1px solid rgba(0, 0, 0, 0.2);\n\n  label {\n    top: -14px;\n    left: -1px;\n    height: 14px;\n    color: white;\n    padding: 0 4px;\n    font-size: 9px;\n    line-height: 13px;\n    position: absolute;\n    background: #4a4a99;\n    border-top-left-radius: 2px;\n    border-top-right-radius: 2px;\n  }\n\n  &.done {\n    border: none;\n    opacity: 1;\n  }\n\n  img {\n    display: block;\n    max-width: 100%;\n    max-height: 100%;\n  }\n\n  &.disabled img {\n    opacity: 0.5;\n  }\n\n  button {\n    // This is needed to bring down the cursor from the parent element, which is where interactjs applies it\n    cursor: inherit;\n\n    box-sizing: border-box;\n    border: none;\n    color: rgba(0, 0, 0, 0.87);\n    font-weight: 500;\n    transform-origin: 0 0;\n    height: 100%;\n    width: 100%;\n    background: none;\n    font-size: 11px;\n\n    &.hide {\n      display: none;\n    }\n  }\n\n  &.required {\n    border: 1px solid $verdocs-red-1;\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.4s 1;\n  }\n\n  verdocs-button-panel {\n    top: -3px;\n    left: -2px;\n    opacity: 0.5;\n    z-index: 1000;\n    cursor: pointer;\n    position: absolute;\n    transform: scale(0.6);\n\n    &[data-active],\n    &:hover {\n      opacity: 1;\n    }\n\n    .icon {\n      svg {\n        fill: #333333;\n      }\n\n      &:hover {\n        svg {\n          fill: #000000;\n        }\n      }\n    }\n  }\n\n  .settings-icon {\n    position: absolute;\n    top: -3px;\n    left: -20px;\n    display: inline-block;\n    cursor: pointer;\n    opacity: 0.3;\n\n    svg {\n      fill: $border-color;\n    }\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n}\n\n@keyframes verdocs-field-pulse {\n  0% {\n    background-color: rgba(0, 0, 0, 0.35);\n  }\n  50% {\n    background-color: rgba(0, 0, 0, 0);\n  }\n  100% {\n    background-color: rgba(0, 0, 0, 0.35);\n  }\n}\n","import {ITemplateField, getRGBA, IEnvelopeField} from '@verdocs/js-sdk';\nimport {Component, Event, EventEmitter, h, Host, Method, Prop, Fragment, State} from '@stencil/core';\nimport {SettingsIcon} from '../../../utils/Icons';\nimport {Store} from '../../../utils/Datastore';\n\n/**\n * Displays an initial field. If an initial already exists, it will be displayed and the field\n * will be disabled. Otherwise, a placeholder button will be shown. Clicking the button will\n * show a dialog to adopt an initial.\n *\n * NOTE: When initial fields are completed they will be filled with an initial \"stamp\".\n * This requires operation against a live, valid envelope. If you are testing this component\n * in Storybook, it will not be visible here.\n */\n@Component({\n  tag: 'verdocs-field-initial',\n  styleUrl: 'verdocs-field-initial.scss',\n  shadow: false,\n})\nexport class VerdocsFieldInitial {\n  /**\n   * Fields may be attached to templates or envelopes, but only template fields may be edited.\n   */\n  @Prop({reflect: true}) source: 'template' | 'envelope' = 'template';\n\n  /**\n   * The source template or envelope ID the field is found in.\n   */\n  @Prop({reflect: true}) sourceid: string = '';\n\n  /**\n   * The name of the field to display.\n   */\n  @Prop({reflect: true}) fieldname: string = '';\n\n  /**\n   * Override the field's settings. This is intended to be used during signing when fields are being\n   * mutated.\n   */\n  @Prop() field: IEnvelopeField | null | undefined = null;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop({reflect: true}) disabled?: boolean = false;\n\n  /**\n   * The document or template field to display.\n   */\n  @Prop({reflect: true}) initials: string = '';\n\n  /**\n   * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n   * changed, so it should typically only be enabled in the Builder.\n   */\n  @Prop({reflect: true}) editable?: boolean = false;\n\n  /**\n   * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n   */\n  @Prop({reflect: true}) moveable?: boolean = false;\n\n  /**\n   * If set, the field is considered \"done\" and is drawn in a display-final-value state.\n   */\n  @Prop({reflect: true}) done?: boolean = false;\n\n  /**\n   * If set, the field will be be scaled horizontally by this factor.\n   */\n  @Prop({reflect: true}) xscale?: number = 1;\n\n  /**\n   * If set, the field will be be scaled vertically by this factor.\n   */\n  @Prop({reflect: true}) yscale?: number = 1;\n\n  /**\n   * The page the field is on\n   */\n  @Prop({reflect: true}) pagenumber?: number = 1;\n\n  /**\n   * Event emitted when an initial block is adopted by the user. The event detail will contain the base64 string of the initial image.\n   */\n  @Event({composed: true}) adopt: EventEmitter<string>;\n\n  /**\n   * Event fired when the step is cancelled. This is called exit to avoid conflicts with the JS-reserved \"cancel\" event name.\n   */\n  @Event({composed: true}) exit: EventEmitter;\n\n  /**\n   * Event fired when the input field value changes. Note that this will only be fired on blur, tab-out, ENTER key press, etc.\n   * It is generally the best event to subscribe to than `input` for most cases EXCEPT autocomplete fields that need to see every\n   * keypress.\n   */\n  @Event({composed: true}) fieldChange: EventEmitter<string>;\n\n  /**\n   * Event fired when the field's settings are changed.\n   */\n  @Event({composed: true}) settingsChanged: EventEmitter<{fieldName: string; field: ITemplateField}>;\n\n  /**\n   * Event fired on every character entered into / deleted from the field.\n   */\n  @Event({composed: true}) settingsPress: EventEmitter;\n\n  /**\n   * Event fired when the field is deleted.\n   */\n  @Event({composed: true}) deleted: EventEmitter<{fieldName: string}>;\n\n  @State() showingProperties?: boolean = false;\n  @State() focused?: boolean = false;\n\n  @Method() async focusField() {\n    this.handleShow();\n  }\n\n  @State()\n  tempInitials: string = '';\n\n  private dialog?: any;\n\n  hideDialog() {\n    this.dialog?.remove();\n    this.dialog = null;\n    this.focused = false;\n  }\n\n  handleAdopt(e: any) {\n    console.log('[INITIAL] Adopted initials');\n    this.tempInitials = e.detail;\n    this.fieldChange?.emit(this.tempInitials);\n    this.hideDialog();\n  }\n\n  handleShow() {\n    this.dialog = document.createElement('verdocs-initial-dialog');\n    this.dialog.setAttribute('initials', this.initials);\n    // this.dialog.setAttribute('roleindex', this.roleindex);\n    this.dialog.addEventListener('exit', () => this.hideDialog());\n    this.dialog.addEventListener('next', (e: any) => this.handleAdopt(e));\n    document.body.append(this.dialog);\n    this.focused = true;\n  }\n\n  @Method()\n  async showSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.showPanel) {\n      settingsPanel.showPanel();\n    }\n  }\n\n  @Method()\n  async hideSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.hidePanel) {\n      settingsPanel.hidePanel();\n    }\n  }\n\n  render() {\n    const {source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1} = this;\n\n    const {index, field} = Store.getField(source, sourceid, fieldname, this.field);\n    const {required = false, value = '', label = '', settings = {}} = field || {};\n    const backgroundColor = getRGBA(index);\n    const {base64} = settings;\n\n    if (done) {\n      return <Host class={{done}}>{value && <img src={value} alt=\"Initial\" />}</Host>;\n    }\n\n    return (\n      <Host class={{required, disabled, done, focused}} style={{backgroundColor}}>\n        {label && <label>{label}</label>}\n\n        {base64 ? <img src={base64} alt=\"Initial\" /> : <button onClick={() => !disabled && this.handleShow()}>Initial</button>}\n\n        {editable && (\n          <Fragment>\n            <div\n              id={`verdocs-settings-panel-trigger-${fieldname}`}\n              style={{transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})`}}\n              class=\"settings-icon\"\n              innerHTML={SettingsIcon}\n              onClick={(e: any) => {\n                e.stopPropagation();\n                this.showingProperties = !this.showingProperties;\n              }}\n            />\n\n            {this.showingProperties && (\n              <verdocs-portal anchor={`verdocs-settings-panel-trigger-${fieldname}`} onClickAway={() => (this.showingProperties = false)}>\n                <verdocs-template-field-properties\n                  templateId={sourceid}\n                  fieldName={fieldname}\n                  onClose={() => (this.showingProperties = false)}\n                  onDelete={() => {\n                    this.deleted?.emit({fieldName: field.name});\n                    return this.hideSettingsPanel();\n                  }}\n                  onSettingsChanged={e => {\n                    this.settingsChanged?.emit(e.detail);\n                    return this.hideSettingsPanel();\n                  }}\n                  helpText={\"initial fields capture the recipient's initials on a clause or page.\"}\n                />\n              </verdocs-portal>\n            )}\n          </Fragment>\n        )}\n      </Host>\n    );\n  }\n}\n","@import '../../../theme.scss';\n\n// See https://www.sliderrevolution.com/resources/styling-radio-buttons/\nverdocs-field-radio {\n  font-family: $verdocs-primary-font;\n  width: 14px;\n  height: 14px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  scroll-margin: 20px 0;\n  background-color: transparent;\n  transform-origin: bottom left;\n  border-radius: 100%;\n\n  &.focused {\n    animation: verdocs-field-pulse 0.4s 1;\n  }\n\n  svg {\n    margin-top: 4px;\n  }\n\n  &.disabled.done {\n    opacity: 1;\n  }\n\n  // To avoid conflicting with the use of a label for the checkbox itself\n  div.label {\n    top: -14px;\n    left: -1px;\n    height: 14px;\n    color: white;\n    padding: 0 4px;\n    font-size: 9px;\n    line-height: 13px;\n    position: absolute;\n    background: #4a4a99;\n    border-top-left-radius: 2px;\n    border-top-right-radius: 2px;\n  }\n\n  div.group {\n    top: 14px;\n    left: -1px;\n    height: 14px;\n    color: white;\n    padding: 0 4px;\n    font-size: 9px;\n    line-height: 13px;\n    position: absolute;\n    background: #bb0589;\n    border-bottom-left-radius: 2px;\n    border-bottom-right-radius: 2px;\n  }\n\n  input {\n    // This is needed to bring down the cursor from the parent element, which is where interactjs applies it\n    cursor: inherit;\n  }\n\n  &.disabled input {\n    opacity: 0.5;\n  }\n\n  &.done input[type='radio'] {\n    margin: 0;\n    padding: 0;\n    width: 10px;\n    height: 10px;\n  }\n\n  &:not(.done) input[type='radio'] {\n    position: absolute;\n    opacity: 0;\n\n    + label {\n      &:before {\n        content: '';\n        //background: $verdocs-grey-3;\n        border-radius: 100%;\n        border: 1px solid rgba(0, 0, 0, 0.6);\n        display: inline-block;\n        width: 12px;\n        height: 12px;\n        position: absolute;\n        left: 0;\n        top: 0;\n        cursor: pointer;\n        text-align: center;\n        transition: all 250ms ease;\n      }\n    }\n\n    &:checked {\n      + label {\n        &:before {\n          background-color: $verdocs-green;\n          box-shadow: inset 0 0 0 2px $verdocs-grey-3;\n        }\n      }\n    }\n\n    &:focus {\n      + label {\n        &:before {\n          outline: none;\n          border-color: $verdocs-green;\n        }\n      }\n    }\n\n    &:disabled {\n      + label {\n        &:before {\n          box-shadow: inset 0 0 0 4px $verdocs-grey-3;\n          border-color: darken($verdocs-grey-3, 25%);\n          background: darken($verdocs-grey-3, 25%);\n        }\n      }\n    }\n\n    + label {\n      &:empty {\n        &:before {\n          margin-right: 0;\n        }\n      }\n    }\n  }\n\n  &.required {\n    border: 1px solid $verdocs-red-1;\n  }\n\n  &.hide {\n    display: none;\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.4s 1;\n  }\n\n  verdocs-button-panel {\n    margin-left: -20px;\n    margin-top: -7px;\n    transform: scale(0.7);\n  }\n\n  .settings-icon {\n    position: absolute;\n    top: -6px;\n    left: -20px;\n    display: inline-block;\n    cursor: pointer;\n    opacity: 0.3;\n\n    svg {\n      fill: $border-color;\n    }\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n}\n\n@keyframes verdocs-field-pulse {\n  0% {\n    background-color: rgba(0, 0, 0, 0.35);\n  }\n  50% {\n    background-color: rgba(0, 0, 0, 0);\n  }\n  100% {\n    background-color: rgba(0, 0, 0, 0.35);\n  }\n}\n","import {ITemplateField, getRGBA, IEnvelopeField} from '@verdocs/js-sdk';\nimport {Component, Event, EventEmitter, h, Host, Method, Prop, Fragment, State} from '@stencil/core';\nimport {SettingsIcon} from '../../../utils/Icons';\nimport {Store} from '../../../utils/Datastore';\n\nconst RadioIconUnselected = `<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z\"></path></svg>`;\n\nconst RadioIconSelected = `<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z\"></path></svg>`;\n\n/**\n * Displays a radio button.\n */\n@Component({\n  tag: 'verdocs-field-radio',\n  styleUrl: 'verdocs-field-radio.scss',\n  shadow: false,\n})\nexport class VerdocsFieldRadio {\n  /**\n   * Fields may be attached to templates or envelopes, but only template fields may be edited.\n   */\n  @Prop({reflect: true}) source: 'template' | 'envelope' = 'template';\n\n  /**\n   * The source template or envelope ID the field is found in.\n   */\n  @Prop({reflect: true}) sourceid: string = '';\n\n  /**\n   * The name of the field to display.\n   */\n  @Prop({reflect: true}) fieldname: string = '';\n\n  /**\n   * Override the field's settings. This is intended to be used during signing when fields are being\n   * mutated.\n   */\n  @Prop() field: IEnvelopeField | null | undefined = null;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used in Storybook mode.\n   */\n  @Prop({reflect: true}) disabled?: boolean = false;\n\n  /**\n   * If set, overrides the field's required object. Primarily used in Storybook mode.\n   */\n  @Prop({reflect: true}) required?: boolean = false;\n\n  /**\n   * If set, the field is considered \"done\" and is drawn in a display-final-value state.\n   */\n  @Prop({reflect: true}) done?: boolean = false;\n\n  /**\n   * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n   * changed, so it should typically only be enabled in the Builder.\n   */\n  @Prop({reflect: true}) editable?: boolean = false;\n\n  /**\n   * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n   */\n  @Prop({reflect: true}) moveable?: boolean = false;\n\n  /**\n   * If set, the field will be be scaled horizontally by this factor.\n   */\n  @Prop({reflect: true}) xscale?: number = 1;\n\n  /**\n   * If set, the field will be be scaled vertically by this factor.\n   */\n  @Prop({reflect: true}) yscale?: number = 1;\n\n  /**\n   * The page the field is on\n   */\n  @Prop({reflect: true}) pagenumber?: number = 1;\n\n  @State() showingProperties?: boolean = false;\n  @State() focused = false;\n\n  /**\n   * Event fired when the field's settings are changed.\n   */\n  @Event({composed: true}) settingsChanged: EventEmitter<{fieldName: string; field: ITemplateField}>;\n\n  /**\n   * Event fired when the field is deleted.\n   */\n  @Event({composed: true}) deleted: EventEmitter<{fieldName: string}>;\n\n  @Method()\n  async focusField() {\n    // Our input field is fake, so we fake the flash too\n    this.focused = true;\n    setTimeout(() => {\n      this.focused = false;\n    }, 500);\n  }\n\n  @Method()\n  async showSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.showPanel) {\n      settingsPanel.showPanel();\n    }\n  }\n\n  @Method()\n  async hideSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.hidePanel) {\n      settingsPanel.hidePanel();\n    }\n  }\n\n  render() {\n    const {source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1} = this;\n\n    const {index, field} = Store.getField(source, sourceid, fieldname, this.field);\n    const {name, required = false, label = '', group = '', value = false} = field || {};\n    const backgroundColor = getRGBA(index);\n\n    const selected = value === 'true';\n\n    if (done) {\n      return (\n        <Host class={{done}} style={{maxWidth: '10px'}}>\n          <span innerHTML={selected ? RadioIconSelected : RadioIconUnselected} />\n        </Host>\n      );\n    }\n\n    return (\n      <Host class={{required: this.required || required, disabled, done, focused}} style={{backgroundColor}}>\n        {label && <div class=\"label\">{label}</div>}\n        {editable && group && <div class=\"group\">{group}</div>}\n\n        <input id={fieldname} type=\"radio\" name={group || fieldname} value={name} checked={!!selected} disabled={disabled} required={required} />\n        <label htmlFor={fieldname} />\n\n        {editable && (\n          <Fragment>\n            <div\n              id={`verdocs-settings-panel-trigger-${fieldname}`}\n              style={{transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})`}}\n              class=\"settings-icon\"\n              innerHTML={SettingsIcon}\n              onClick={(e: any) => {\n                e.stopPropagation();\n                this.showingProperties = !this.showingProperties;\n              }}\n            />\n\n            {this.showingProperties && (\n              <verdocs-portal anchor={`verdocs-settings-panel-trigger-${fieldname}`} onClickAway={() => (this.showingProperties = false)}>\n                <verdocs-template-field-properties\n                  templateId={sourceid}\n                  fieldName={fieldname}\n                  onClose={() => (this.showingProperties = false)}\n                  onDelete={() => {\n                    this.deleted?.emit({fieldName: fieldname});\n                    return this.hideSettingsPanel();\n                  }}\n                  onSettingsChanged={e => {\n                    this.settingsChanged?.emit(e.detail);\n                    return this.hideSettingsPanel();\n                  }}\n                  helpText={\"Radio buttons capture the recipient's selection of just one of several related (exclusive) options.\"}\n                />\n              </verdocs-portal>\n            )}\n          </Fragment>\n        )}\n      </Host>\n    );\n  }\n}\n","@import '../../../theme.scss';\n\nverdocs-field-signature {\n  font-family: $verdocs-primary-font;\n  width: 83px;\n  height: 36px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  scroll-margin: 20px 0;\n  letter-spacing: 0.3px;\n  background-color: transparent;\n  transform-origin: bottom left;\n  border: 1px solid rgba(0, 0, 0, 0.2);\n\n  label {\n    top: -14px;\n    left: -1px;\n    height: 14px;\n    color: white;\n    padding: 0 4px;\n    font-size: 9px;\n    line-height: 13px;\n    position: absolute;\n    background: #4a4a99;\n    border-top-left-radius: 2px;\n    border-top-right-radius: 2px;\n  }\n\n  &.done {\n    border: none;\n    opacity: 1;\n  }\n\n  img {\n    display: block;\n    max-width: 100%;\n    max-height: 100%;\n  }\n\n  &.disabled img {\n    opacity: 0.5;\n  }\n\n  button {\n    // This is needed to bring down the cursor from the parent element, which is where interactjs applies it\n    cursor: inherit;\n\n    box-sizing: border-box;\n    border: none;\n    color: rgba(0, 0, 0, 0.87);\n    font-weight: 500;\n    transform-origin: 0 0;\n    height: 100%;\n    width: 100%;\n    background: none;\n    font-size: 11px;\n\n    &.hide {\n      display: none;\n    }\n  }\n\n  &.required {\n    border: 1px solid rgb(204, 0, 0);\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.4s 1;\n  }\n\n  verdocs-button-panel {\n    top: -3px;\n    left: -2px;\n    opacity: 0.5;\n    z-index: 1000;\n    cursor: pointer;\n    position: absolute;\n    transform: scale(0.6);\n\n    &[data-active],\n    &:hover {\n      opacity: 1;\n    }\n\n    .icon {\n      svg {\n        fill: #333333;\n      }\n\n      &:hover {\n        svg {\n          fill: #000000;\n        }\n      }\n    }\n  }\n\n  .settings-icon {\n    position: absolute;\n    top: -3px;\n    left: -20px;\n    display: inline-block;\n    cursor: pointer;\n    opacity: 0.3;\n\n    svg {\n      fill: $border-color;\n    }\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n}\n\n@keyframes verdocs-field-pulse {\n  0% {\n    background-color: rgba(0, 0, 0, 0.35);\n  }\n  50% {\n    background-color: rgba(0, 0, 0, 0);\n  }\n  100% {\n    background-color: rgba(0, 0, 0, 0.35);\n  }\n}\n","import {ITemplateField, getRGBA, IEnvelopeField} from '@verdocs/js-sdk';\nimport {Component, h, Host, Prop, Event, EventEmitter, Method, Fragment, State} from '@stencil/core';\nimport {SettingsIcon} from '../../../utils/Icons';\nimport {Store} from '../../../utils/Datastore';\n\n/**\n * Displays a signature field. If a signature already exists, it will be displayed and the field\n * will be disabled. Otherwise, a placeholder button will be shown. Clicking the button will\n * show a dialog to adopt a signature.\n *\n * NOTE: When signature fields are completed they will be filled with a signature \"stamp\".\n * This requires operation against a live, valid envelope. If you are testing this component\n * in Storybook, it will not be visible here.\n */\n@Component({\n  tag: 'verdocs-field-signature',\n  styleUrl: 'verdocs-field-signature.scss',\n  shadow: false,\n})\nexport class VerdocsFieldSignature {\n  /**\n   * Fields may be attached to templates or envelopes, but only template fields may be edited.\n   */\n  @Prop({reflect: true}) source: 'template' | 'envelope' = 'template';\n\n  /**\n   * The source template or envelope ID the field is found in.\n   */\n  @Prop({reflect: true}) sourceid: string = '';\n\n  /**\n   * The name of the field to display.\n   */\n  @Prop({reflect: true}) fieldname: string = '';\n\n  /**\n   * Override the field's settings. This is intended to be used during signing when fields are being\n   * mutated.\n   */\n  @Prop() field: IEnvelopeField | null | undefined = null;\n\n  /**\n   * If set, the signature creation dialog will be initialized with this text.\n   */\n  @Prop({reflect: true}) name?: string = '';\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop({reflect: true}) disabled?: boolean = false;\n\n  /**\n   * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n   * changed, so it should typically only be enabled in the Builder.\n   */\n  @Prop({reflect: true}) editable?: boolean = false;\n\n  /**\n   * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n   */\n  @Prop({reflect: true}) moveable?: boolean = false;\n\n  /**\n   * If set, the field is considered \"done\" and is drawn in a display-final-value state.\n   */\n  @Prop({reflect: true}) done?: boolean = false;\n\n  /**\n   * If set, the field will be be scaled horizontally by this factor.\n   */\n  @Prop({reflect: true}) xscale?: number = 1;\n\n  /**\n   * If set, the field will be be scaled vertically by this factor.\n   */\n  @Prop({reflect: true}) yscale?: number = 1;\n\n  /**\n   * The page the field is on\n   */\n  @Prop({reflect: true}) pagenumber?: number = 1;\n\n  /**\n   * Event emitted when the field has changed.\n   */\n  @Event({composed: true}) fieldChange: EventEmitter<string>;\n\n  /**\n   * Event fired on every character entered into / deleted from the field.\n   */\n  @Event({composed: true}) settingsPress: EventEmitter;\n\n  /**\n   * Event fired when the field's settings are changed.\n   */\n  @Event({composed: true}) settingsChanged: EventEmitter<{fieldName: string; field: ITemplateField}>;\n\n  /**\n   * Event fired when the field is deleted.\n   */\n  @Event({composed: true}) deleted: EventEmitter<{fieldName: string}>;\n\n  @State() showingProperties?: boolean = false;\n  @State() focused?: boolean = false;\n\n  @Method() async focusField() {\n    this.handleShow();\n  }\n\n  @State()\n  tempSignature: string = '';\n\n  private dialog?: any;\n\n  hideDialog() {\n    this.dialog?.remove();\n    this.dialog = null;\n    this.focused = false;\n  }\n\n  handleAdopt(e: any) {\n    console.log('[SIGNATURE] Adopted signature');\n    this.tempSignature = e.detail;\n    this.fieldChange?.emit(this.tempSignature);\n    this.hideDialog();\n  }\n\n  handleShow() {\n    this.dialog = document.createElement('verdocs-signature-dialog');\n    this.dialog.setAttribute('name', this.name);\n    // this.dialog.setAttribute('roleindex', this.roleindex);\n    this.dialog.addEventListener('exit', () => this.hideDialog());\n    this.dialog.addEventListener('next', (e: any) => this.handleAdopt(e));\n    document.body.append(this.dialog);\n    this.focused = true;\n  }\n\n  @Method()\n  async showSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.showPanel) {\n      settingsPanel.showPanel();\n    }\n  }\n\n  @Method()\n  async hideSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.hidePanel) {\n      settingsPanel.hidePanel();\n    }\n    this.showingProperties = false;\n  }\n\n  render() {\n    const {source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1} = this;\n\n    const {index, field} = Store.getField(source, sourceid, fieldname, this.field);\n    const {required = false, value = '', label = '', settings = {}} = field || {};\n    const {base64} = settings;\n    const backgroundColor = getRGBA(index);\n\n    if (done) {\n      return <Host class={{done}}>{value && <img src={base64} alt=\"\" />}</Host>;\n    }\n\n    return (\n      <Host class={{required, disabled, done, focused}} style={{backgroundColor}}>\n        {label && <label>{label}</label>}\n\n        {base64 ? <img src={base64} alt=\"\" /> : <button onClick={() => !disabled && this.handleShow()}>Signature</button>}\n\n        {editable && (\n          <Fragment>\n            <div\n              id={`verdocs-settings-panel-trigger-${fieldname}`}\n              style={{transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})`}}\n              class=\"settings-icon\"\n              innerHTML={SettingsIcon}\n              onClick={(e: any) => {\n                e.stopPropagation();\n                this.showingProperties = !this.showingProperties;\n              }}\n            />\n\n            {this.showingProperties && (\n              <verdocs-portal anchor={`verdocs-settings-panel-trigger-${fieldname}`} onClickAway={() => (this.showingProperties = false)}>\n                <verdocs-template-field-properties\n                  templateId={sourceid}\n                  fieldName={fieldname}\n                  onClose={() => this.hideSettingsPanel()}\n                  onDelete={() => {\n                    this.deleted?.emit({fieldName: fieldname});\n                    return this.hideSettingsPanel();\n                  }}\n                  onSettingsChanged={e => {\n                    this.settingsChanged?.emit(e.detail);\n                    return this.hideSettingsPanel();\n                  }}\n                  helpText={\"Signature fields capture a recipient's signature on a document.\"}\n                />\n              </verdocs-portal>\n            )}\n          </Fragment>\n        )}\n      </Host>\n    );\n  }\n}\n","@import '../../../theme.scss';\n\nverdocs-field-textarea {\n  width: 150px;\n  height: 15px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  scroll-margin: 20px 0;\n  box-sizing: border-box;\n  background-color: transparent;\n  transform-origin: bottom left;\n  font-family: $verdocs-primary-font;\n  border: 1px solid rgba(0, 0, 0, 0.2);\n\n  textarea {\n    // This is needed to bring down the cursor from the parent element, which is where interactjs applies it\n    cursor: inherit;\n\n    width: 100%;\n    height: 100%;\n    resize: none;\n    border: none;\n    outline: none;\n    padding: 0 3px;\n    font-size: 11px;\n    background: none;\n    font-weight: 500;\n    transform-origin: 0 0;\n    box-sizing: border-box;\n    color: rgba(0, 0, 0, 0.87);\n\n    &.hide {\n      display: none;\n    }\n  }\n\n  &.disabled textarea {\n    opacity: 0.5;\n  }\n\n  label {\n    top: -14px;\n    left: -1px;\n    height: 14px;\n    color: white;\n    padding: 0 4px;\n    font-size: 9px;\n    line-height: 13px;\n    position: absolute;\n    background: #4a4a99;\n    border-top-left-radius: 2px;\n    border-top-right-radius: 2px;\n  }\n\n  &.required {\n    border: 1px solid rgb(204, 0, 0);\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.4s 1;\n  }\n\n  verdocs-button-panel {\n    top: -3px;\n    left: -2px;\n    opacity: 0.5;\n    z-index: 1000;\n    cursor: pointer;\n    position: absolute;\n    transform: scale(0.6);\n\n    &[data-active],\n    &:hover {\n      opacity: 1;\n    }\n\n    .icon {\n      svg {\n        fill: #333333;\n      }\n\n      &:hover {\n        svg {\n          fill: #000000;\n        }\n      }\n    }\n  }\n\n  .settings-icon {\n    position: absolute;\n    top: -3px;\n    left: -20px;\n    display: inline-block;\n    cursor: pointer;\n    opacity: 0.3;\n\n    svg {\n      fill: $border-color;\n    }\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n}\n\n@keyframes verdocs-field-pulse {\n  0% {\n    background-color: rgba(0, 0, 0, 0.35);\n  }\n  50% {\n    background-color: rgba(0, 0, 0, 0);\n  }\n  100% {\n    background-color: rgba(0, 0, 0, 0.35);\n  }\n}\n","import interact from 'interactjs';\nimport {IEnvelopeField, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {ITemplateField, updateField, getRGBA} from '@verdocs/js-sdk';\nimport {Component, h, Host, Prop, Method, Event, EventEmitter, Element, Fragment, State} from '@stencil/core';\nimport {SettingsIcon} from '../../../utils/Icons';\nimport {Store} from '../../../utils/Datastore';\n\n/**\n * Display a multi-line text input field. Reminder: the \"position\" of the field is specified\n * as the BOTTOM-LEFT corner.\n */\n@Component({\n  tag: 'verdocs-field-textarea',\n  styleUrl: 'verdocs-field-textarea.scss',\n  shadow: false,\n})\nexport class VerdocsFieldTextarea {\n  @Element() el: HTMLElement;\n  private inputEl: HTMLTextAreaElement;\n\n  /**\n   * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n   * This component self-manages its resize (width) behavior when in edit-template mode, and uses\n   * this endpoint to save changes.\n   */\n  @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n  /**\n   * Fields may be attached to templates or envelopes, but only template fields may be edited.\n   */\n  @Prop({reflect: true}) source: 'template' | 'envelope' = 'template';\n\n  /**\n   * The source template or envelope ID the field is found in.\n   */\n  @Prop({reflect: true}) sourceid: string = '';\n\n  /**\n   * The name of the field to display.\n   */\n  @Prop({reflect: true}) fieldname: string = '';\n\n  /**\n   * Override the field's settings. This is intended to be used during signing when fields are being\n   * mutated.\n   */\n  @Prop() field: IEnvelopeField | null | undefined = null;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop({reflect: true}) disabled?: boolean = false;\n\n  /**\n   * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n   * changed, so it should typically only be enabled in the Builder.\n   */\n  @Prop({reflect: true}) editable?: boolean = false;\n\n  /**\n   * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n   */\n  @Prop({reflect: true}) moveable?: boolean = false;\n\n  /**\n   * If set, the field is considered \"done\" and is drawn in a display-final-value state.\n   */\n  @Prop({reflect: true}) done?: boolean = false;\n\n  /**\n   * If set, the field will be be scaled horizontally by this factor.\n   */\n  @Prop({reflect: true}) xscale?: number = 1;\n\n  /**\n   * If set, the field will be be scaled vertically by this factor.\n   */\n  @Prop({reflect: true}) yscale?: number = 1;\n\n  /**\n   * The page the field is on\n   */\n  @Prop({reflect: true}) pagenumber?: number = 1;\n\n  @Method()\n  async focusField() {\n    this.inputEl.focus();\n  }\n\n  /**\n   * Event fired when the field's settings are changed.\n   */\n  @Event({composed: true}) settingsChanged: EventEmitter<{fieldName: string; field: ITemplateField}>;\n\n  /**\n   * Event fired when the field is deleted.\n   */\n  @Event({composed: true}) deleted: EventEmitter<{fieldName: string}>;\n\n  @State() showingProperties?: boolean = false;\n\n  @Method()\n  async showSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.showPanel) {\n      settingsPanel.showPanel();\n    }\n  }\n\n  @Method()\n  async hideSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.hidePanel) {\n      settingsPanel.hidePanel();\n    }\n  }\n\n  @State() focused?: boolean = false;\n\n  componentDidRender() {\n    interact.dynamicDrop(true);\n\n    if (this.editable) {\n      interact(this.el).resizable({\n        edges: {top: true, bottom: true, left: true, right: true},\n        listeners: {\n          start: this.handleResizeStart.bind(this),\n          move: this.handleResize.bind(this),\n          end: this.handleResizeEnd.bind(this),\n        },\n      });\n    }\n  }\n\n  handleResizeStart(e: any) {\n    e.preventDefault();\n    e.stopPropagation();\n  }\n\n  handleResize(e: any) {\n    let {x = 0, y = 0, h = 0} = e.target.dataset;\n    let {width, height} = e.rect;\n\n    x = (parseFloat(x) || 0) + e.deltaRect.left;\n    y = (parseFloat(y) || 0) + e.deltaRect.top;\n    h = (parseFloat(h) || 0) + e.deltaRect.height;\n\n    Object.assign(e.target.style, {\n      width: `${width}px`,\n      height: `${height}px`,\n      transform: `translate(${x}px, ${y + h}px)`,\n    });\n\n    Object.assign(e.target.dataset, {x, y, h});\n  }\n\n  handleResizeEnd(e: any) {\n    const {source, sourceid, fieldname} = this;\n    const {field} = Store.getField(source, sourceid, fieldname, this.field);\n    if (!field) {\n      return;\n    }\n\n    const [translateX, translateY] = e.target.style.transform.split('(')[1].split(')')[0].split(',').map(parseFloat);\n\n    const width = Math.round(parseFloat(e.target.style.width) / this.xscale);\n    const height = Math.round(parseFloat(e.target.style.height) / this.yscale);\n    const x = Math.round(field.x + translateX / this.xscale);\n    const y = Math.round(field.y - translateY / this.yscale);\n\n    updateField(this.endpoint, this.sourceid, this.fieldname, {x, y, width, height})\n      .then(field => {\n        this.settingsChanged?.emit({fieldName: this.fieldname, field});\n        Object.assign(e.target.dataset, {x: 0, y: 0, h: 0});\n      })\n      .catch(e => console.log('Field update failed', e));\n  }\n\n  render() {\n    const {source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1} = this;\n\n    const {index, field} = Store.getField(source, sourceid, fieldname, this.field);\n    const {required = false, placeholder = '', value = '', label = ''} = field || {};\n    const backgroundColor = getRGBA(index);\n\n    if (done) {\n      return <Host class={{done}}>{value}</Host>;\n    }\n\n    return (\n      <Host class={{required, disabled, done, focused}} style={{backgroundColor}}>\n        {label && <label>{label}</label>}\n\n        <textarea\n          name={fieldname}\n          disabled={disabled}\n          required={required}\n          placeholder={placeholder}\n          ref={el => (this.inputEl = el)}\n          onFocus={() => (this.focused = true)}\n          onBlur={() => (this.focused = false)}\n        >\n          {value}\n        </textarea>\n\n        {editable && (\n          <Fragment>\n            <div\n              id={`verdocs-settings-panel-trigger-${fieldname}`}\n              style={{transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})`}}\n              class=\"settings-icon\"\n              innerHTML={SettingsIcon}\n              onClick={(e: any) => {\n                e.stopPropagation();\n                this.showingProperties = !this.showingProperties;\n              }}\n            />\n\n            {this.showingProperties && (\n              <verdocs-portal anchor={`verdocs-settings-panel-trigger-${fieldname}`} onClickAway={() => (this.showingProperties = false)}>\n                <verdocs-template-field-properties\n                  templateId={sourceid}\n                  fieldName={fieldname}\n                  onClose={() => (this.showingProperties = false)}\n                  onDelete={() => {\n                    this.deleted?.emit({fieldName: fieldname});\n                    return this.hideSettingsPanel();\n                  }}\n                  onSettingsChanged={e => {\n                    this.settingsChanged?.emit(e.detail);\n                    return this.hideSettingsPanel();\n                  }}\n                  helpText={'Text areas may be used to create multi-line text fields.'}\n                />\n              </verdocs-portal>\n            )}\n          </Fragment>\n        )}\n      </Host>\n    );\n  }\n}\n","@import '../../../theme.scss';\n\nverdocs-field-textbox {\n  font-family: $verdocs-primary-font;\n  box-sizing: border-box;\n  width: 150px;\n  height: 15px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  scroll-margin: 20px 0;\n  letter-spacing: -0.2px;\n  background-color: transparent;\n  transform-origin: bottom left;\n  border: 1px solid rgba(0, 0, 0, 0.2);\n\n  .edge-top,\n  .edge-right,\n  .edge-left,\n  .edge-bottom {\n    position: absolute;\n    z-index: 10;\n  }\n\n  .edge-top {\n    top: -2px;\n    left: 0;\n    right: 0;\n    height: 5px;\n  }\n\n  .edge-right {\n    top: 0;\n    bottom: 0;\n    right: -2px;\n    width: 5px;\n  }\n\n  .edge-left {\n    top: 0;\n    left: -2px;\n    bottom: 0;\n    width: 5px;\n  }\n\n  .edge-bottom {\n    bottom: -2px;\n    left: 0;\n    right: 0;\n    height: 5px;\n  }\n\n  input {\n    // This is needed to bring down the cursor from the parent element, which is where interactjs applies it\n    cursor: inherit;\n\n    width: 100%;\n    height: 100%;\n    border: none;\n    outline: none;\n    padding: 0 3px;\n    font-size: 11px;\n    background: none;\n    font-weight: 500;\n    position: absolute;\n    transform-origin: 0 0;\n    box-sizing: border-box;\n    color: rgba(0, 0, 0, 0.87);\n\n    &.hide {\n      display: none;\n    }\n  }\n\n  &.disabled input {\n    opacity: 0.5;\n  }\n\n  textarea {\n    // This is needed to bring down the cursor from the parent element, which is where interactjs applies it\n    cursor: inherit;\n\n    width: 100%;\n    height: 100%;\n    resize: none;\n    border: none;\n    outline: none;\n    padding: 0 3px;\n    font-size: 11px;\n    background: none;\n    font-weight: 500;\n    transform-origin: 0 0;\n    box-sizing: border-box;\n    color: rgba(0, 0, 0, 0.87);\n\n    &.hide {\n      display: none;\n    }\n  }\n\n  &.disabled textarea {\n    opacity: 0.5;\n  }\n\n  label {\n    top: -14px;\n    left: -1px;\n    height: 14px;\n    color: white;\n    padding: 0 4px;\n    font-size: 9px;\n    line-height: 13px;\n    position: absolute;\n    background: #4a4a99;\n    border-top-left-radius: 2px;\n    border-top-right-radius: 2px;\n  }\n\n  &.required {\n    border: 1px solid rgb(204, 0, 0);\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.4s 1;\n  }\n\n  verdocs-button-panel {\n    top: -3px;\n    left: -2px;\n    opacity: 0.5;\n    z-index: 1000;\n    cursor: pointer;\n    position: absolute;\n    transform: scale(0.6);\n\n    &[data-active],\n    &:hover {\n      opacity: 1;\n    }\n\n    .icon {\n      svg {\n        fill: #333333;\n      }\n\n      &:hover {\n        svg {\n          fill: #000000;\n        }\n      }\n    }\n  }\n\n  // @see https://community.logmein.com/t5/LastPass-Support-Discussions/placeholder-text-overrides-data-lpignore-quot-true-quot/td-p/295135\n  // LastPass is ignoring the data-lpignore attribute in some cases\n  [data-lastpass-icon-root] {\n    display: none !important;\n  }\n\n  .settings-icon {\n    position: absolute;\n    top: -4px;\n    left: -18px;\n    display: inline-block;\n    cursor: pointer;\n    opacity: 0.3;\n\n    svg {\n      fill: $border-color;\n    }\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n}\n\n@keyframes verdocs-field-pulse {\n  0% {\n    background-color: rgba(0, 0, 0, 0.35);\n  }\n  50% {\n    background-color: rgba(0, 0, 0, 0);\n  }\n  100% {\n    background-color: rgba(0, 0, 0, 0.35);\n  }\n}\n","import interact from 'interactjs';\nimport {getRGBA, IEnvelopeField, ITemplate, ITemplateField, updateField, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, h, Host, Element, Prop, Method, Event, EventEmitter, Fragment, State} from '@stencil/core';\nimport {SettingsIcon} from '../../../utils/Icons';\nimport {Store} from '../../../utils/Datastore';\nimport {ResizeEvent} from '@interactjs/actions/resize/plugin';\n\n/**\n * Display a simple 1-line text input field.\n */\n@Component({\n  tag: 'verdocs-field-textbox',\n  styleUrl: 'verdocs-field-textbox.scss',\n  shadow: false,\n})\nexport class VerdocsFieldTextbox {\n  @Element() el: HTMLElement;\n  private inputEl: HTMLInputElement | HTMLTextAreaElement;\n\n  /**\n   * Fields may be attached to templates or envelopes, but only template fields may be edited.\n   */\n  @Prop({reflect: true}) source: 'template' | 'envelope' = 'template';\n\n  /**\n   * The source template or envelope ID the field is found in.\n   */\n  @Prop({reflect: true}) sourceid: string = '';\n\n  /**\n   * The name of the field to display.\n   */\n  @Prop({reflect: true}) fieldname: string = '';\n\n  /**\n   * Override the field's settings. This is intended to be used during signing when fields are being\n   * mutated.\n   */\n  @Prop() field: IEnvelopeField | null | undefined = null;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop({reflect: true}) disabled?: boolean = false;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop({reflect: true}) multiline?: boolean = false;\n\n  /**\n   * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n   * changed, so it should typically only be enabled in the Builder.\n   */\n  @Prop({reflect: true}) editable?: boolean = false;\n\n  /**\n   * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n   */\n  @Prop({reflect: true}) moveable?: boolean = false;\n\n  /**\n   * If set, the field is considered \"done\" and is drawn in a display-final-value state.\n   */\n  @Prop({reflect: true}) done?: boolean = false;\n\n  /**\n   * If set, the field will be be scaled horizontally by this factor.\n   */\n  @Prop({reflect: true}) xscale?: number = 1;\n\n  /**\n   * If set, the field will be be scaled vertically by this factor.\n   */\n  @Prop({reflect: true}) yscale?: number = 1;\n\n  /**\n   * The page the field is on\n   */\n  @Prop({reflect: true}) pagenumber?: number = 1;\n\n  /**\n   * Event fired when the field's settings are changed.\n   */\n  @Event({composed: true}) settingsChanged: EventEmitter<{fieldName: string; field: ITemplateField}>;\n\n  /**\n   * Event fired when the field is deleted.\n   */\n  @Event({composed: true}) deleted: EventEmitter<{fieldName: string}>;\n\n  @State() showingProperties?: boolean = false;\n  @State() focused?: boolean = false;\n\n  @Method()\n  async focusField() {\n    this.inputEl.focus();\n  }\n\n  @Method()\n  async showSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.showPanel) {\n      settingsPanel.showPanel();\n    }\n  }\n\n  @Method()\n  async hideSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.hidePanel) {\n      settingsPanel.hidePanel();\n    }\n    this.showingProperties = false;\n  }\n\n  componentDidRender() {\n    interact.dynamicDrop(true);\n\n    if (this.editable) {\n      interact(this.el).resizable({\n        edges: {\n          top: '.edge-top',\n          left: '.edge-left',\n          bottom: '.edge-bottom',\n          right: '.edge-right',\n        },\n        modifiers: [\n          interact.modifiers.restrictSize({\n            min: {width: 30, height: 15},\n          }),\n        ],\n        listeners: {\n          start: this.handleResizeStart.bind(this),\n          move: this.handleResize.bind(this),\n          end: this.handleResizeEnd.bind(this),\n        },\n      });\n    }\n  }\n\n  handleResizeStart(e: ResizeEvent) {\n    e.preventDefault();\n    e.stopPropagation();\n    e.target.dataset.originalBottom = e.target.style.bottom;\n  }\n\n  handleResize(e: any) {\n    let {width, height} = e.rect;\n\n    const dX = e.deltaRect.left;\n    const dY = e.deltaRect.bottom;\n    const currentLeft = parseFloat(e.target.style.left);\n    const currentBottom = parseFloat(e.target.style.bottom);\n\n    width /= this.xscale;\n    height /= this.yscale;\n\n    Object.assign(e.target.style, {\n      width: `${width}px`,\n      height: `${height}px`,\n      left: `${currentLeft + dX}px`,\n      bottom: `${currentBottom - dY}px`,\n    });\n  }\n\n  async handleResizeEnd(e: any) {\n    const {sourceid, fieldname} = this;\n\n    const width = Math.round(parseFloat(e.target.style.width));\n    let height = Math.round(parseFloat(e.target.style.height));\n    if (height < 20) {\n      height = 15;\n    }\n    const multiline = height > 15;\n\n    const newBottom = parseFloat(e.target.style.bottom);\n    const originalBottom = parseFloat(e.target.dataset.originalBottom);\n    const template = await Store.getTemplate(VerdocsEndpoint.getDefault(), this.sourceid);\n    const oldField = template.fields.find(f => f.name === fieldname);\n    let y = newBottom !== originalBottom ? newBottom / this.yscale : oldField?.y;\n    if (newBottom !== originalBottom) {\n      console.log('Adjusting Bottom', {y, fbot: oldField?.y, yscale: this.yscale, originalBottom, currentBottom: newBottom});\n    }\n    // const oldField =    Store.d  this.templateS.fields.findIndex(field => field.name === fieldname);\n\n    updateField(VerdocsEndpoint.getDefault(), sourceid, fieldname, {width, height, y, multiline})\n      .then(async updatedField => {\n        const template = await Store.getTemplate(VerdocsEndpoint.getDefault(), this.sourceid);\n        const newTemplate = JSON.parse(JSON.stringify(template)) as ITemplate;\n        const fieldIndex = newTemplate.fields.findIndex(field => field.name === fieldname);\n        if (fieldIndex > -1) {\n          newTemplate.fields[fieldIndex] = updatedField;\n        }\n        Store.updateTemplate(this.sourceid, newTemplate);\n\n        this.settingsChanged?.emit({fieldName: fieldname, field: updatedField});\n        Object.assign(e.target.dataset, {x: 0, y: 0, h: 0});\n      })\n      .catch(e => console.log('Field update failed', e));\n  }\n\n  render() {\n    const {source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1} = this;\n    const {index, field} = Store.getField(source, sourceid, fieldname, this.field);\n    let {required = false, placeholder = '', label = '', width = 150, default: value = '', multiline = false} = field || {};\n    const backgroundColor = getRGBA(index);\n\n    // TODO: Consolidate value/defaultValue handling between template and envelope fields.\n    if ((field as any)?.value) {\n      value = (field as any)?.value;\n    }\n\n    // TODO: This is an outdated technique from the old system. We should compute it.\n    const maxlength = width / 5;\n\n    if (done) {\n      return <Host class={{done}}>{value}</Host>;\n    }\n\n    return (\n      <Host class={{required, disabled, done, focused}} style={{backgroundColor}}>\n        {editable && <div class=\"edge-top\" />}\n        {editable && <div class=\"edge-right\" />}\n        {editable && <div class=\"edge-left\" />}\n        {editable && <div class=\"edge-bottom\" />}\n\n        {label && <label>{label}</label>}\n\n        {multiline ? (\n          <textarea\n            name={fieldname}\n            disabled={disabled}\n            required={required}\n            placeholder={placeholder}\n            ref={el => (this.inputEl = el)}\n            onFocus={() => (this.focused = true)}\n            onBlur={() => (this.focused = false)}\n          >\n            {value}\n          </textarea>\n        ) : (\n          <input\n            type=\"text\"\n            name={fieldname}\n            value={value}\n            disabled={disabled}\n            required={required}\n            placeholder={placeholder}\n            maxlength={maxlength}\n            ref={el => (this.inputEl = el)}\n            onFocus={() => (this.focused = true)}\n            onBlur={() => (this.focused = false)}\n          />\n        )}\n\n        {editable && (\n          <Fragment>\n            <div\n              id={`verdocs-settings-panel-trigger-${fieldname}`}\n              style={{transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})`}}\n              class=\"settings-icon\"\n              innerHTML={SettingsIcon}\n              onClick={(e: any) => {\n                e.stopPropagation();\n                this.showingProperties = !this.showingProperties;\n              }}\n            />\n\n            {this.showingProperties && (\n              <verdocs-portal anchor={`verdocs-settings-panel-trigger-${fieldname}`} onClickAway={() => (this.showingProperties = false)}>\n                <verdocs-template-field-properties\n                  templateId={sourceid}\n                  fieldName={fieldname}\n                  onClose={() => this.hideSettingsPanel()}\n                  onDelete={() => {\n                    this.deleted?.emit({fieldName: fieldname});\n                    return this.hideSettingsPanel();\n                  }}\n                  onSettingsChanged={e => {\n                    this.settingsChanged?.emit(e.detail);\n                    return this.hideSettingsPanel();\n                  }}\n                  helpText={\n                    'Text boxes may be used to capture simple text input. Participant-entered values will be stored for later retrieval via the \"name\" field.<br /><br />If marked required, the participant must complete the field before proceeding.'\n                  }\n                />\n              </verdocs-portal>\n            )}\n          </Fragment>\n        )}\n      </Host>\n    );\n  }\n}\n","@import '../../../theme.scss';\n\nverdocs-field-timestamp {\n  width: 160px;\n  height: 15px;\n  display: block;\n  font-size: 9px;\n  position: relative;\n  scroll-margin: 20px 0;\n  background-color: transparent;\n  transform-origin: bottom left;\n  font-family: $verdocs-primary-font;\n\n  &.done {\n    opacity: 1;\n  }\n\n  input {\n    position: absolute;\n\n    // This is needed to bring down the cursor from the parent element, which is where interactjs applies it\n    cursor: inherit;\n\n    opacity: 0.5;\n    width: 100%;\n    height: 100%;\n    font-size: 9px;\n    background: none;\n    font-weight: 500;\n    transform-origin: 0 0;\n    box-sizing: border-box;\n    color: rgba(0, 0, 0, 0.87);\n    border: 1px solid rgba(0, 0, 0, 0.2);\n\n    &.hide {\n      display: none;\n    }\n  }\n\n  label {\n    top: -14px;\n    left: -1px;\n    height: 14px;\n    color: white;\n    padding: 0 4px;\n    font-size: 9px;\n    line-height: 13px;\n    position: absolute;\n    background: #4a4a99;\n    border-top-left-radius: 2px;\n    border-top-right-radius: 2px;\n  }\n\n  &.required {\n    border: 1px solid rgb(204, 0, 0);\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.4s 1;\n  }\n\n  verdocs-button-panel {\n    top: -3px;\n    left: -2px;\n    opacity: 0.5;\n    z-index: 1000;\n    cursor: pointer;\n    position: absolute;\n    transform: scale(0.6);\n\n    &[data-active],\n    &:hover {\n      opacity: 1;\n    }\n\n    .icon {\n      svg {\n        fill: #333333;\n      }\n\n      &:hover {\n        svg {\n          fill: #000000;\n        }\n      }\n    }\n  }\n\n  .settings-icon {\n    position: absolute;\n    top: -3px;\n    left: -20px;\n    display: inline-block;\n    cursor: pointer;\n    opacity: 0.3;\n\n    svg {\n      fill: $border-color;\n    }\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n}\n","import {format} from 'date-fns/format';\nimport {ITemplateField, getRGBA, IEnvelopeField} from '@verdocs/js-sdk';\nimport {Component, h, Host, Prop, Method, Event, EventEmitter, Fragment, State} from '@stencil/core';\nimport {FORMAT_TIMESTAMP} from '../../../utils/Types';\nimport {SettingsIcon} from '../../../utils/Icons';\nimport {Store} from '../../../utils/Datastore';\n\n/**\n * Display a timestamp. Timestamps are not editable by signers. Instead, they are automatically\n * filled when the signer submits the document.\n */\n@Component({\n  tag: 'verdocs-field-timestamp',\n  styleUrl: 'verdocs-field-timestamp.scss',\n  shadow: false,\n})\nexport class VerdocsFieldTimestamp {\n  private el: HTMLInputElement;\n\n  /**\n   * Fields may be attached to templates or envelopes, but only template fields may be edited.\n   */\n  @Prop({reflect: true}) source: 'template' | 'envelope' = 'template';\n\n  /**\n   * The source template or envelope ID the field is found in.\n   */\n  @Prop({reflect: true}) sourceid: string = '';\n\n  /**\n   * The name of the field to display.\n   */\n  @Prop({reflect: true}) fieldname: string = '';\n\n  /**\n   * Override the field's settings. This is intended to be used during signing when fields are being\n   * mutated.\n   */\n  @Prop() field: IEnvelopeField | null | undefined = null;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop({reflect: true}) disabled?: boolean = false;\n\n  /**\n   * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n   * changed, so it should typically only be enabled in the Builder.\n   */\n  @Prop({reflect: true}) editable?: boolean = false;\n\n  /**\n   * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n   */\n  @Prop({reflect: true}) moveable?: boolean = false;\n\n  /**\n   * If set, the field is considered \"done\" and is drawn in a display-final-value state.\n   */\n  @Prop({reflect: true}) done?: boolean = false;\n\n  /**\n   * If set, the field will be be scaled horizontally by this factor.\n   */\n  @Prop({reflect: true}) xscale?: number = 1;\n\n  /**\n   * If set, the field will be be scaled vertically by this factor.\n   */\n  @Prop({reflect: true}) yscale?: number = 1;\n\n  /**\n   * The page the field is on\n   */\n  @Prop() pagenumber?: number = 1;\n\n  /**\n   * Event fired when the field's settings are changed.\n   */\n  @Event({composed: true}) settingsChanged: EventEmitter<{fieldName: string; field: ITemplateField}>;\n\n  /**\n   * Event fired when the field is deleted.\n   */\n  @Event({composed: true}) deleted: EventEmitter<{fieldName: string}>;\n\n  @State() showingProperties?: boolean = false;\n\n  @Method() async focusField() {\n    this.el.focus();\n  }\n\n  @Method()\n  async showSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.showPanel) {\n      settingsPanel.showPanel();\n    }\n  }\n\n  @Method()\n  async hideSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.hidePanel) {\n      settingsPanel.hidePanel();\n    }\n    this.showingProperties = false;\n  }\n\n  render() {\n    const {source, sourceid, fieldname, editable = false, done = false, disabled = false, xscale = 1, yscale = 1} = this;\n\n    const {index, field} = Store.getField(source, sourceid, fieldname, this.field);\n    const {required = false, placeholder = '', value = '', label = ''} = field || {};\n    const backgroundColor = getRGBA(index);\n\n    const formatted = format(new Date(value || new Date().toISOString()), FORMAT_TIMESTAMP);\n\n    if (done) {\n      return <Host class={{done}}>{formatted}</Host>;\n    }\n\n    return (\n      <Host class={{required, disabled, done}} style={{backgroundColor}}>\n        {label && <label>{label}</label>}\n        <input type=\"text\" placeholder={placeholder} value={formatted} disabled={true} ref={el => (this.el = el)} />\n\n        {editable && (\n          <Fragment>\n            <div\n              id={`verdocs-settings-panel-trigger-${fieldname}`}\n              style={{transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})`}}\n              class=\"settings-icon\"\n              innerHTML={SettingsIcon}\n              onClick={(e: any) => {\n                e.stopPropagation();\n                this.showingProperties = !this.showingProperties;\n              }}\n            />\n\n            {this.showingProperties && (\n              <verdocs-portal anchor={`verdocs-settings-panel-trigger-${fieldname}`} onClickAway={() => (this.showingProperties = false)}>\n                <verdocs-template-field-properties\n                  templateId={sourceid}\n                  fieldName={fieldname}\n                  onClose={() => this.hideSettingsPanel()}\n                  onDelete={() => {\n                    this.deleted?.emit({fieldName: fieldname});\n                    return this.hideSettingsPanel();\n                  }}\n                  onSettingsChanged={e => {\n                    this.settingsChanged?.emit(e.detail);\n                    return this.hideSettingsPanel();\n                  }}\n                  helpText={'Time stamps are automatically set when the recipient signs the document.'}\n                />\n              </verdocs-portal>\n            )}\n          </Fragment>\n        )}\n      </Host>\n    );\n  }\n}\n","@import '../../../theme.scss';\n\nverdocs-initial-dialog {\n  font-family: $primary-font;\n  box-sizing: border-box;\n  position: fixed;\n  z-index: 10000;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: #0000007f;\n\n  .dialog {\n    width: 100%;\n    max-width: 340px;\n    border-radius: 4px;\n    overflow: hidden;\n    box-shadow: 3px 3px 5px 1px rgba(40, 40, 40, 0.4);\n    background: $dialog-bg;\n  }\n\n  .heading {\n    display: flex;\n    flex-direction: row;\n    padding: 20px 20px 0 20px;\n    line-height: 28px;\n    font-size: 20px;\n    font-weight: 500;\n  }\n\n  .content {\n    font-size: 14px;\n    padding: 20px;\n  }\n\n  .buttons {\n    display: flex;\n    margin: 20px 0 0 0;\n    flex-direction: row;\n    justify-content: flex-end;\n    align-items: center;\n\n    verdocs-button {\n      margin-left: 16px;\n    }\n  }\n\n  canvas {\n    background: #fff;\n    box-sizing: border-box;\n    margin: 0 auto;\n    width: 300px;\n    // TODO: The original app had an aspect ratio of (80 / 305) * (signatureBodyWidth - 20)\n    height: 79px;\n    max-width: 100%;\n    box-shadow: 0 0 6px 0 #0000001f;\n  }\n\n  .disclaimer {\n    text-align: justify;\n    padding: 8px 0;\n    font-size: 11px;\n    line-height: 14px;\n    color: rgba(0, 0, 0, 0.54);\n  }\n\n  .as-shown {\n    font-size: 11px;\n    margin: 4px 0 20px 4px;\n    color: rgba(0, 0, 0, 0.54);\n  }\n\n  .tabs {\n    display: flex;\n    flex-direction: row;\n\n    .tab {\n      padding: 8px 15px;\n      cursor: pointer;\n\n      &.active {\n        border-bottom: 2px solid $light-border-color;\n      }\n\n      &:hover {\n        color: $primary-color;\n      }\n    }\n  }\n}\n","import {Component, Prop, Host, h, Event, EventEmitter, State} from '@stencil/core';\n\n/**\n * Display a dialog that allows the user to specify an initials image, either by using a signature-font-generated image\n * based on their full name, or by hand-drawing their initials with a mouse or tablet.\n */\n@Component({\n  tag: 'verdocs-initial-dialog',\n  styleUrl: 'verdocs-initial-dialog.scss',\n})\nexport class VerdocsInitialDialog {\n  private canvasElement?: HTMLCanvasElement;\n\n  /**\n   * Initial signature text\n   */\n  @Prop() initials: string = '';\n\n  /**\n   * Event fired when the initials are adopted.\n   */\n  @Event({composed: true}) next: EventEmitter<string>;\n\n  /**\n   * Event fired when the step is cancelled. This is called exit to avoid conflicts with the JS-reserved \"cancel\" event name.\n   */\n  @Event({composed: true}) exit: EventEmitter;\n\n  @State() fontLoaded = false;\n\n  @State() enteredInitials: string = '';\n\n  @State() mode: string = 'type';\n\n  componentWillLoad() {\n    this.enteredInitials = this.initials.toUpperCase();\n\n    const ds = new FontFace('Dancing Script', 'url(https://fonts.gstatic.com/s/dancingscript/v19/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3Sup6hNX6plRP.woff)');\n    ds.load().then(font => {\n      document.fonts.add(font);\n      this.fontLoaded = true;\n    });\n  }\n\n  componentDidLoad() {\n    this.redrawSignature();\n  }\n\n  componentDidUpdate() {\n    this.redrawSignature();\n  }\n\n  redrawSignature() {\n    console.log('redrawing sig');\n    if (!this.canvasElement) {\n      console.log('no canvas');\n      return;\n    }\n\n    const canvasWidth = this.canvasElement.width;\n    console.log('cw', canvasWidth);\n\n    const context = this.canvasElement.getContext('2d');\n    context.clearRect(0, 0, this.canvasElement.width, this.canvasElement.height);\n\n    let fontSize = 100;\n    do {\n      fontSize -= 2;\n      context.font = `${fontSize}px Dancing Script`;\n    } while (context.measureText(this.enteredInitials).width > canvasWidth - 32); // 32px padding each side\n\n    context.textAlign = 'center';\n    context.textBaseline = 'middle';\n    context.font = `${fontSize}px Dancing Script`;\n    context.fillText(this.enteredInitials, this.canvasElement.width / 2, this.canvasElement.height / 2);\n  }\n\n  handleNameChange(e: any) {\n    this.enteredInitials = e.target.value;\n  }\n\n  handleCancel(e: any) {\n    e.stopPropagation();\n    e.preventDefault();\n    this.exit.emit();\n  }\n\n  handleAdopt(e: any) {\n    e.stopPropagation();\n    e.preventDefault();\n    const data = this.canvasElement.toDataURL('image/png');\n    this.next.emit(data);\n  }\n\n  /*\n  selColor(hex: string) {\n    this.color = hex;\n    this.animateDraw();\n  }\n\n  stopDraw() {\n    this.paint = false;\n    this.adoptedAndSigned = !this.hasSignature();\n  }\n\n  draw(e) {\n    this.paint = true;\n    this.addPoints(e, false);\n    this.animateDraw();\n  }\n\n  recordPoints(e) {\n    if (this.paint) {\n      this.addPoints(e, true);\n      this.animateDraw();\n    }\n  }\n\n  animateDraw() {\n    this.canvas.clearRect(0, 0, this.canvas.canvas.offsetWidth, this.canvas.canvas.offsetHeight);\n\n    this.canvas.strokeStyle = this.color || '#000000';\n    this.canvas.lineJoin = 'round';\n    this.canvas.lineWidth = 3;\n\n    for (let i = 0; i < this.points.length; i++) {\n      this.canvas.beginPath();\n      if (this.points[i].drag && i) {\n        this.canvas.moveTo(this.points[i - 1].x, this.points[i - 1].y);\n        // this.canvas.arc(this.points[i - 1].x, this.points[i - 1].y, 2, 0, 2 * Math.PI, false);\n      } else {\n        this.canvas.moveTo(this.points[i].x - 1, this.points[i].y);\n        // this.canvas.arc(this.points[i].x, this.points[i].y, 2, 0, 2 * Math.PI, false);\n      }\n\n      this.canvas.lineTo(this.points[i].x, this.points[i].y);\n      this.canvas.closePath();\n      this.canvas.stroke();\n    }\n  }\n\n  drawCurve(color: string, curve: number) {\n    this.canvas.beginPath();\n  }\n\n\n\n  addPoints(e, drag: boolean) {\n    if (window) {\n      let x;\n      let y;\n      e.preventDefault();\n      if (e.touches && e.touches.length > 0) {\n        x = e.touches[0].clientX;\n      } else {\n        x = e.clientX;\n      }\n\n      if (e.touches && e.touches.length > 0) {\n        y = e.touches[0].clientY;\n      } else {\n        y = e.clientY;\n      }\n      const rect = this.signatureCanvas.nativeElement.getBoundingClientRect();\n      this.points.push({\n        x: x - rect.left,\n        y: y - rect.top,\n        drag: drag\n      });\n    }\n  }\n\n  clearPad() {\n    this.canvas.clearRect(0, 0, this.canvas.canvas.offsetWidth, this.canvas.canvas.offsetHeight);\n    this.points = [];\n    this.adoptedAndSigned = !this.hasSignature();\n  }\n\n    async adoptAndSign() {\n    try {\n      this.adoptedAndSigned = true;\n      await this.updateFullName();\n      await this.captureSignatureFromCanvas();\n      const message = this.signatureMode === 'Signature' ? 'Saving Signature' : 'Saving Initial';\n      this.snackbarService.open(message, 'OK', this.snackbarService.initConfig(null, 'bottom'));\n      this.handleMode();\n    } catch (err) {\n      this.snackbarService.open('Failed to apply signature', 'OK', this.snackbarService.initConfig(null, 'bottom'));\n    }\n  }\n\n  handleMode() {\n    let currentField;\n    switch (this.mode) {\n      case 'signerview':\n        if (this.signatureMode === 'Signature') {\n          this.signatureService.postSignatureBlob().then(result => {\n            if (result && result.id && result.url) {\n              currentField = this.signatureService.currField;\n              this.signatureService.updateSigned(currentField.fName, true);\n              this.signatureService.toggleSig(false);\n              this.signatureService.setSignatureId(result.id);\n              this.signatureService.putSignatureField(this.envelopeId, this.fieldName, result.id).then(res => {\n                this.eventTracker.createEvent({\n                  category: 'verdoc',\n                  action: 'verdoc signed',\n                  label: `verdoc id: ${this.envelopeId}`\n                })\n                if (res && res.settings) {\n                  this.signatureService.setSignatureData(res.settings.base64);\n                  this.signatureService.setSignatureId(res.settings.signature_id);\n                }\n                this.snackbarService.dismiss();\n                this.dialog.close({ status: 'saved', temp_sig: res.settings.base64, sig_id: res.settings.signature_id });\n              }).catch(err => {\n                this.snackbarService.open('Failed to save signature. Please try again.', 'DISMISS', {\n                  duration: 3000\n                });\n                this.adoptedAndSigned = false;\n                return err;\n              });\n            }\n          });\n        } else {\n          this.signatureService.postInitialBlob().then(result => {\n            if (result && result.id && result.url) {\n              currentField = this.signatureService.currField;\n              this.signatureService.updateInitialed(currentField.fName, true);\n              this.signatureService.setInitialId(result.id);\n              this.signatureService.toggleSig(false);\n              this.signatureService.putInitialField(this.envelopeId, this.fieldName, result.id).then(res => {\n                if (res && res.settings) {\n                  this.signatureService.setInitialData(res.settings.base64);\n                  this.signatureService.setInitialId(res.settings.initial_id);\n                }\n                this.snackbarService.dismiss();\n                this.dialog.close({ status: 'saved', temp_int: res.settings.base64, int_id: res.settings.initial_id });\n              }).catch(err => {\n                this.snackbarService.open('Failed to save initial. Please try again.', 'DISMISS', {\n                  duration: 3000\n                });\n                this.adoptedAndSigned = false;\n                return err;\n              });\n            }\n          });\n        }\n        break;\n    }\n  }\n   */\n\n  render() {\n    return (\n      <Host onClick={e => this.handleCancel(e)}>\n        <div class=\"dialog\">\n          <div class=\"heading\">Create Your Initial</div>\n\n          <div class=\"content\">\n            <verdocs-text-input placeholder=\"Initials...\" label=\"Initials\" value={this.enteredInitials} onInput={e => this.handleNameChange(e)} />\n            <div class=\"as-shown\">As shown on driver's license or govt. ID card.</div>\n\n            {/*<div class=\"tabs\">*/}\n            {/*  <div class={{tab: true, active: this.mode === 'type'}} onClick={() => (this.mode = 'type')}>*/}\n            {/*    Type*/}\n            {/*  </div>*/}\n            {/*  <div class={{tab: true, active: this.mode === 'draw'}} onClick={() => (this.mode = 'draw')}>*/}\n            {/*    Draw*/}\n            {/*  </div>*/}\n            {/*</div>*/}\n\n            {this.fontLoaded ? <canvas ref={el => (this.canvasElement = el as HTMLCanvasElement)} /> : <div style={{display: 'none'}} />}\n\n            <div class=\"disclaimer\">\n              By clicking Adopt, I agree that the signature will be the electronic representation of my signature for all purposes when I (or my agent) use them on documents,\n              including legally binding contracts &mdash; just the same as a pen-and-paper signature or initial.\n            </div>\n\n            <div class=\"buttons\">\n              <verdocs-button label=\"CANCEL\" variant=\"outline\" onClick={e => this.handleCancel(e)} />\n              <verdocs-button label=\"Adopt & Sign\" onClick={e => this.handleAdopt(e)} />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n","@import '../../../theme.scss';\n\nverdocs-signature-dialog {\n  font-family: $primary-font;\n  box-sizing: border-box;\n  position: fixed;\n  z-index: 10000;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: #0000007f;\n\n  .dialog {\n    width: 100%;\n    max-width: 340px;\n    border-radius: 4px;\n    overflow: hidden;\n    box-shadow: 3px 3px 5px 1px rgba(40, 40, 40, 0.4);\n    background: $dialog-bg;\n  }\n\n  .heading {\n    display: flex;\n    flex-direction: row;\n    padding: 20px 20px 0 20px;\n    line-height: 28px;\n    font-size: 20px;\n    font-weight: 500;\n  }\n\n  .content {\n    font-size: 14px;\n    padding: 20px;\n  }\n\n  .buttons {\n    display: flex;\n    margin: 20px 0 0 0;\n    flex-direction: row;\n    justify-content: flex-end;\n    align-items: center;\n\n    verdocs-button {\n      margin-left: 16px;\n    }\n  }\n\n  canvas {\n    background: $verdocs-grey-4;\n    box-sizing: border-box;\n    margin: 0 auto;\n    width: 300px;\n    // TODO: The original app had an aspect ratio of (80 / 305) * (signatureBodyWidth - 20)\n    height: 79px;\n    max-width: 100%;\n    box-shadow: 0 0 6px 0 #0000001f;\n  }\n\n  .disclaimer {\n    text-align: justify;\n    padding: 8px 0;\n    font-size: 11px;\n    line-height: 14px;\n    color: rgba(0, 0, 0, 0.54);\n  }\n\n  .as-shown {\n    font-size: 11px;\n    margin: 4px 0 20px 4px;\n    color: rgba(0, 0, 0, 0.54);\n  }\n\n  .tabs {\n    display: flex;\n    flex-direction: row;\n\n    .tab {\n      padding: 8px 15px;\n      cursor: pointer;\n\n      &.active {\n        border-bottom: 2px solid $light-border-color;\n      }\n\n      &:hover {\n        color: $primary-color;\n      }\n    }\n  }\n}\n","import {Component, Prop, h, Event, EventEmitter, State, Host} from '@stencil/core';\n\n/**\n * Display a dialog that allows the user to specify a signature image, either by using a signature-font-generated image\n * based on their full name, or by hand-drawing their signature with a mouse or tablet.\n */\n@Component({\n  tag: 'verdocs-signature-dialog',\n  styleUrl: 'verdocs-signature-dialog.scss',\n})\nexport class VerdocsSignatureDialog {\n  private canvasElement?: HTMLCanvasElement;\n\n  /**\n   * Initial signature text\n   */\n  @Prop() name: string = '';\n\n  /**\n   * Fired when the user completes the dialog and clicks Adopt. The event detail will contain a base64-encoded string\n   * representation of the signature adopted.\n   */\n  @Event({composed: true}) next: EventEmitter<string>;\n\n  /**\n   * Event fired when the step is cancelled. This is called exit to avoid conflicts with the JS-reserved \"cancel\" event name.\n   */\n  @Event({composed: true}) exit: EventEmitter;\n\n  @State() fontLoaded = false;\n\n  @State() enteredName: string = '';\n\n  @State() mode: string = 'type';\n\n  componentWillLoad() {\n    this.enteredName = this.name;\n\n    const ds = new FontFace('Dancing Script', 'url(https://fonts.gstatic.com/s/dancingscript/v19/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3Sup6hNX6plRP.woff)');\n    ds.load().then(font => {\n      document.fonts.add(font);\n      this.fontLoaded = true;\n    });\n  }\n\n  componentDidLoad() {\n    this.redrawSignature();\n  }\n\n  componentDidUpdate() {\n    this.redrawSignature();\n  }\n\n  redrawSignature() {\n    if (!this.canvasElement) {\n      return;\n    }\n\n    const canvasWidth = this.canvasElement.width;\n\n    const context = this.canvasElement.getContext('2d');\n    context.clearRect(0, 0, this.canvasElement.width, this.canvasElement.height);\n\n    let fontSize = 100;\n    do {\n      fontSize -= 2;\n      context.font = `${fontSize}px Dancing Script`;\n    } while (context.measureText(this.enteredName).width > canvasWidth - 32); // 32px padding each side\n\n    context.textAlign = 'center';\n    context.textBaseline = 'middle';\n    context.font = `${fontSize}px Dancing Script`;\n    context.fillText(this.enteredName, this.canvasElement.width / 2, this.canvasElement.height / 2);\n  }\n\n  handleNameChange(e: any) {\n    this.enteredName = e.target.value;\n  }\n\n  handleCancel(e: any) {\n    e.stopPropagation();\n    e.preventDefault();\n    this.exit.emit();\n  }\n\n  handleAdopt(e: any) {\n    e.stopPropagation();\n    e.preventDefault();\n    const data = this.canvasElement.toDataURL('image/png');\n    this.next.emit(data);\n  }\n\n  /*\n  selColor(hex: string) {\n    this.color = hex;\n    this.animateDraw();\n  }\n\n  stopDraw() {\n    this.paint = false;\n    this.adoptedAndSigned = !this.hasSignature();\n  }\n\n  draw(e) {\n    this.paint = true;\n    this.addPoints(e, false);\n    this.animateDraw();\n  }\n\n  recordPoints(e) {\n    if (this.paint) {\n      this.addPoints(e, true);\n      this.animateDraw();\n    }\n  }\n\n  animateDraw() {\n    this.canvas.clearRect(0, 0, this.canvas.canvas.offsetWidth, this.canvas.canvas.offsetHeight);\n\n    this.canvas.strokeStyle = this.color || '#000000';\n    this.canvas.lineJoin = 'round';\n    this.canvas.lineWidth = 3;\n\n    for (let i = 0; i < this.points.length; i++) {\n      this.canvas.beginPath();\n      if (this.points[i].drag && i) {\n        this.canvas.moveTo(this.points[i - 1].x, this.points[i - 1].y);\n        // this.canvas.arc(this.points[i - 1].x, this.points[i - 1].y, 2, 0, 2 * Math.PI, false);\n      } else {\n        this.canvas.moveTo(this.points[i].x - 1, this.points[i].y);\n        // this.canvas.arc(this.points[i].x, this.points[i].y, 2, 0, 2 * Math.PI, false);\n      }\n\n      this.canvas.lineTo(this.points[i].x, this.points[i].y);\n      this.canvas.closePath();\n      this.canvas.stroke();\n    }\n  }\n\n  drawCurve(color: string, curve: number) {\n    this.canvas.beginPath();\n  }\n\n\n\n  addPoints(e, drag: boolean) {\n    if (window) {\n      let x;\n      let y;\n      e.preventDefault();\n      if (e.touches && e.touches.length > 0) {\n        x = e.touches[0].clientX;\n      } else {\n        x = e.clientX;\n      }\n\n      if (e.touches && e.touches.length > 0) {\n        y = e.touches[0].clientY;\n      } else {\n        y = e.clientY;\n      }\n      const rect = this.signatureCanvas.nativeElement.getBoundingClientRect();\n      this.points.push({\n        x: x - rect.left,\n        y: y - rect.top,\n        drag: drag\n      });\n    }\n  }\n\n  clearPad() {\n    this.canvas.clearRect(0, 0, this.canvas.canvas.offsetWidth, this.canvas.canvas.offsetHeight);\n    this.points = [];\n    this.adoptedAndSigned = !this.hasSignature();\n  }\n\n    async adoptAndSign() {\n    try {\n      this.adoptedAndSigned = true;\n      await this.updateFullName();\n      await this.captureSignatureFromCanvas();\n      const message = this.signatureMode === 'Signature' ? 'Saving Signature' : 'Saving Initial';\n      this.snackbarService.open(message, 'OK', this.snackbarService.initConfig(null, 'bottom'));\n      this.handleMode();\n    } catch (err) {\n      this.snackbarService.open('Failed to apply signature', 'OK', this.snackbarService.initConfig(null, 'bottom'));\n    }\n  }\n\n  handleMode() {\n    let currentField;\n    switch (this.mode) {\n      case 'signerview':\n        if (this.signatureMode === 'Signature') {\n          this.signatureService.postSignatureBlob().then(result => {\n            if (result && result.id && result.url) {\n              currentField = this.signatureService.currField;\n              this.signatureService.updateSigned(currentField.fName, true);\n              this.signatureService.toggleSig(false);\n              this.signatureService.setSignatureId(result.id);\n              this.signatureService.putSignatureField(this.envelopeId, this.fieldName, result.id).then(res => {\n                this.eventTracker.createEvent({\n                  category: 'verdoc',\n                  action: 'verdoc signed',\n                  label: `verdoc id: ${this.envelopeId}`\n                })\n                if (res && res.settings) {\n                  this.signatureService.setSignatureData(res.settings.base64);\n                  this.signatureService.setSignatureId(res.settings.signature_id);\n                }\n                this.snackbarService.dismiss();\n                this.dialog.close({ status: 'saved', temp_sig: res.settings.base64, sig_id: res.settings.signature_id });\n              }).catch(err => {\n                this.snackbarService.open('Failed to save signature. Please try again.', 'DISMISS', {\n                  duration: 3000\n                });\n                this.adoptedAndSigned = false;\n                return err;\n              });\n            }\n          });\n        } else {\n          this.signatureService.postInitialBlob().then(result => {\n            if (result && result.id && result.url) {\n              currentField = this.signatureService.currField;\n              this.signatureService.updateInitialed(currentField.fName, true);\n              this.signatureService.setInitialId(result.id);\n              this.signatureService.toggleSig(false);\n              this.signatureService.putInitialField(this.envelopeId, this.fieldName, result.id).then(res => {\n                if (res && res.settings) {\n                  this.signatureService.setInitialData(res.settings.base64);\n                  this.signatureService.setInitialId(res.settings.initial_id);\n                }\n                this.snackbarService.dismiss();\n                this.dialog.close({ status: 'saved', temp_int: res.settings.base64, int_id: res.settings.initial_id });\n              }).catch(err => {\n                this.snackbarService.open('Failed to save initial. Please try again.', 'DISMISS', {\n                  duration: 3000\n                });\n                this.adoptedAndSigned = false;\n                return err;\n              });\n            }\n          });\n        }\n        break;\n    }\n  }\n   */\n\n  render() {\n    return (\n      <Host onClick={e => this.handleCancel(e)}>\n        <div class=\"dialog\">\n          <div class=\"heading\">Create Your Signature</div>\n\n          <div class=\"content\">\n            <verdocs-text-input placeholder=\"Full Name...\" label=\"Full Name\" value={this.enteredName} onInput={e => this.handleNameChange(e)} onClick={e => e.stopPropagation()} />\n            <div class=\"as-shown\">As shown on driver's license or govt. ID card.</div>\n\n            {/*<div class=\"tabs\">*/}\n            {/*  <div class={{tab: true, active: this.mode === 'type'}} onClick={() => (this.mode = 'type')}>*/}\n            {/*    Type*/}\n            {/*  </div>*/}\n            {/*<div class={{tab: true, active: this.mode === 'draw'}} onClick={() => (this.mode = 'draw')}>*/}\n            {/*  Draw*/}\n            {/*</div>*/}\n            {/*</div>*/}\n\n            {this.fontLoaded ? <canvas ref={el => (this.canvasElement = el as HTMLCanvasElement)} /> : <div style={{display: 'none'}} />}\n\n            <div class=\"disclaimer\">\n              By clicking Adopt, I agree that the signature will be the electronic representation of my signature for all purposes when I (or my agent) use them on documents,\n              including legally binding contracts &mdash; just the same as a pen-and-paper signature or initial.\n            </div>\n\n            <div class=\"buttons\">\n              <verdocs-button label=\"CANCEL\" size=\"normal\" variant=\"outline\" onClick={e => this.handleCancel(e)} />\n              <verdocs-button label=\"Adopt & Sign\" size=\"normal\" onClick={e => this.handleAdopt(e)} />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n","@import '../../../theme.scss';\n\nverdocs-upload-dialog {\n  position: fixed;\n  box-sizing: border-box;\n  font-family: $primary-font;\n\n  div {\n    box-sizing: border-box;\n  }\n\n  .background-overlay {\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    display: flex;\n    z-index: 10000;\n    position: fixed;\n    align-items: center;\n    background: #0000007f;\n    justify-content: center;\n  }\n\n  // Not simple .dialog to avoid conflicts with ok-dialog. Should review that more.\n  .upload-dialog-content {\n    width: 320px;\n    display: flex;\n    flex-direction: column;\n    border-radius: 4px;\n    overflow: hidden;\n    background: $verdocs-grey-4;\n    padding: 16px;\n    box-shadow: 3px 3px 5px 1px rgba(40, 40, 40, 0.4);\n  }\n\n  .heading {\n    display: flex;\n    font-size: 20px;\n    font-weight: 500;\n    flex-direction: row;\n  }\n\n  .buttons {\n    display: flex;\n    align-items: center;\n    flex-direction: row;\n    justify-content: flex-end;\n\n    verdocs-button {\n      margin-left: 16px;\n    }\n  }\n\n  .current-label {\n    margin: 20px 0 5px 0;\n  }\n\n  .drop-target {\n    opacity: 1;\n    width: 100%;\n    display: flex;\n    margin: 20px 0;\n    min-height: 260px;\n    padding: 30px 15px;\n    text-align: center;\n    align-items: center;\n    flex-direction: column;\n    justify-content: center;\n    background-color: #f5f5f5;\n    color: $verdocs-grey-1;\n    border: 2px dashed #979797;\n\n    p {\n      margin: 12px 0;\n      font-weight: 500;\n\n      &.subscript {\n        margin: 20px;\n        color: $verdocs-bg-4;\n        font-size: 14px;\n      }\n    }\n\n    &.dragging-over {\n      border: 5px solid $verdocs-deep-blue;\n    }\n\n    > verdocs-button {\n      margin: 12px 0;\n      display: inline-block;\n    }\n  }\n\n  .attachments {\n    height: 56px;\n    font-size: 0;\n    margin: 20px 0;\n    padding: 0 16px;\n    line-height: 56px;\n    white-space: normal;\n    box-shadow:\n      0 1px 3px 0 rgb(0 0 0 / 20%),\n      0 2px 2px 0 rgb(0 0 0 / 12%),\n      0 0 2px 0 rgb(0 0 0 / 14%);\n\n    .attachment {\n      gap: 10px;\n      display: flex;\n      align-items: center;\n      flex-direction: row;\n\n      .icon {\n        width: 18px;\n        height: 18px;\n        line-height: 18px;\n\n        &.trash {\n          cursor: pointer;\n        }\n      }\n\n      .name {\n        flex: 1;\n        font-size: 14px;\n        overflow: hidden;\n        font-weight: 400;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n      }\n    }\n  }\n\n  .error {\n    margin: 20px 0;\n    color: $verdocs-red-1;\n  }\n}\n","import {Component, h, Event, EventEmitter, Fragment, Host, State, Prop} from '@stencil/core';\n\nconst TrashIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\" /></svg>`;\n\nconst PaperclipIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13\" /></svg>`;\n\n/**\n * Display a file upload tool. Note that the file is not actually transmitted, so it may be used by\n * callers with a variety of workflows. Instead, data about the chosen file will be passed to the\n * caller via the onNext event handler. A delete event is also exposed to delete existing attachments.\n * To represent an existing attachment, set the existingFile property.\n */\n@Component({\n  tag: 'verdocs-upload-dialog',\n  styleUrl: 'verdocs-upload-dialog.scss',\n})\nexport class VerdocsUploadDialog {\n  private fileInput?: HTMLInputElement;\n\n  @Prop({mutable: true})\n  maxSize: number = 20 * 1024 * 1024;\n\n  @Prop({mutable: true})\n  existingFile: any;\n\n  /**\n   * Event fired when the step is cancelled. This is called exit to avoid conflicts with the JS-reserved \"cancel\" event name.\n   */\n  @Event({composed: true}) exit: EventEmitter;\n\n  /**\n   * Event fired when the dialog is closed. The event data will contain the file selected.\n   */\n  @Event({composed: true}) next: EventEmitter<File[]>;\n\n  /**\n   * Event fired when an existing attachment is deleted. The parent component is\n   * responsible for the actual removal.\n   */\n  @Event({composed: true}) remove: EventEmitter;\n\n  @State() draggingOver = false;\n  @State() confirmDelete = false;\n  @State() selectedFiles = [] as File[];\n  @State() errorMessage = '';\n\n  handleCancel() {\n    this.exit.emit();\n  }\n\n  // We need a separate event handler for clicking the background because it can receive events \"through\" other child components\n  handleDismiss(e: any) {\n    if (e.target.class === 'background-overlay') {\n      e.preventDefault();\n      this.handleCancel();\n    }\n  }\n\n  handleDone() {\n    this.next.emit(this.selectedFiles);\n  }\n\n  handleDragOver(e) {\n    e.preventDefault();\n    this.draggingOver = true;\n  }\n\n  handleDragLeave(e) {\n    e.preventDefault();\n    this.draggingOver = false;\n  }\n\n  async handleDrop(e) {\n    e.preventDefault();\n    this.draggingOver = false;\n    this.handleSetSelected(Array.from(e.dataTransfer.files));\n  }\n\n  handleRemoveAttachment(index: number) {\n    const newFiles = [...this.selectedFiles];\n    newFiles.splice(index, 1);\n    this.handleSetSelected(newFiles);\n  }\n\n  handleSetSelected(files: any[]) {\n    this.selectedFiles = files;\n    this.errorMessage = '';\n\n    const totalSize = this.selectedFiles.reduce((acc, file) => acc + file.size, 0);\n    if (totalSize > this.maxSize) {\n      this.errorMessage = 'Total file size must not exceed 20MB.';\n    }\n  }\n\n  handleDeleteAttachment(e: any) {\n    // Stop the parent from seeing \"next\" and thinking an upload was done.\n    // TODO: Rethink having so many commonalities in nested dialogs (next/exit).\n    e.preventDefault();\n    e.stopPropagation();\n\n    this.remove?.emit();\n    this.existingFile = null;\n    this.confirmDelete = false;\n  }\n\n  handleSelectFile() {\n    this.fileInput?.click();\n  }\n\n  async handleFileChange() {\n    const selectedFiles = Array.from(this.fileInput?.files);\n    let droppedFiles = [] as File[];\n    for (let i = 0; i < this.fileInput?.files.length; i++) {\n      droppedFiles.push(this.fileInput?.files[i]);\n    }\n\n    this.handleSetSelected(selectedFiles);\n  }\n\n  render() {\n    const existingFile = this.existingFile?.name ? this.existingFile : null;\n\n    return (\n      <Host>\n        <div class=\"background-overlay\" onClick={e => this.handleDismiss(e)}>\n          <div class=\"upload-dialog-content\">\n            <div class=\"heading\">Upload attachment</div>\n\n            {this.selectedFiles.length < 1 && existingFile && (\n              <Fragment>\n                <div class=\"current-label\">Current Attachment</div>\n                <div class=\"attachments\" style={{marginTop: '0'}}>\n                  <div class=\"attachment\">\n                    <div class=\"icon\" innerHTML={PaperclipIcon} />\n                    <div class=\"name\">{existingFile.name}</div>\n                    <div class=\"icon trash\" innerHTML={TrashIcon} onClick={() => (this.confirmDelete = true)} />\n                  </div>\n                </div>\n              </Fragment>\n            )}\n\n            {this.selectedFiles.length < 1 && !existingFile && (\n              <div\n                class={{'drop-target': true, 'dragging-over': this.draggingOver}}\n                onDragOver={e => this.handleDragOver(e)}\n                onDragLeave={e => this.handleDragLeave(e)}\n                onDrop={e => this.handleDrop(e)}\n              >\n                <p>Drag and drop your files here</p>\n                <p class=\"subscript\">Supported files: PDF, Word, JPG, PNG</p>\n\n                <verdocs-button label={!!existingFile ? 'Replace files' : 'Select files'} onClick={() => this.handleSelectFile()} />\n                <input\n                  type=\"file\"\n                  ref={el => (this.fileInput = el as HTMLInputElement)}\n                  style={{display: 'none'}}\n                  accept=\".pdf,application/pdf,.doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,image/*\"\n                  onChange={() => this.handleFileChange()}\n                />\n              </div>\n            )}\n\n            {this.selectedFiles.length > 0 && (\n              <div class=\"attachments\">\n                {this.selectedFiles.map((file, index) => (\n                  <div class=\"attachment\">\n                    <div class=\"icon\" innerHTML={PaperclipIcon} />\n                    <div class=\"name\">{file.name}</div>\n                    <div class=\"icon trash\" innerHTML={TrashIcon} onClick={() => this.handleRemoveAttachment(index)} />\n                  </div>\n                ))}\n              </div>\n            )}\n\n            {!!this.errorMessage && <div class=\"error\">{this.errorMessage}</div>}\n\n            <div class=\"buttons\">\n              <verdocs-button label=\"Cancel\" variant=\"outline\" onClick={() => this.handleCancel()} />\n              <verdocs-button label=\"Upload\" onClick={() => this.handleDone()} disabled={!!this.errorMessage || this.selectedFiles.length < 1} />\n            </div>\n          </div>\n        </div>\n\n        {this.confirmDelete && (\n          <verdocs-ok-dialog\n            heading=\"Delete Attachment?\"\n            message=\"Are you sure you wish to delete this attachment? This action cannot be undone.\"\n            showCancel={true}\n            onExit={e => {\n              // So we don't close the upload dialog\n              e.preventDefault();\n              e.stopPropagation();\n              this.confirmDelete = false;\n            }}\n            onNext={e => this.handleDeleteAttachment(e)}\n          />\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}