@verdocs/web-sdk 1.9.9 → 1.9.10

package/dist/components/verdocs-template-fields2.js.map

@@ -1 +1 @@
-{"file":"verdocs-template-fields2.js","mappings":"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","names":["TemplateStore"],"sources":["./src/components/elements/verdocs-template-fields/verdocs-template-fields.scss?tag=verdocs-template-fields","./src/components/elements/verdocs-template-fields/verdocs-template-fields.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-template-fields {\n  position: relative;\n  font-family: $verdocs-primary-font;\n\n  .page-0 {\n    padding: 65px 15px 0 15px;\n    box-sizing: border-box;\n\n    .user-placed-fields {\n      height: 100px;\n      position: relative;\n      background: #ffffff;\n      box-shadow: 0 0 10px 5px #0000000f;\n\n      .title {\n        top: 0;\n        left: 0;\n        color: #ffffff;\n        font-size: 12px;\n        padding: 3px 6px;\n        font-weight: bold;\n        position: absolute;\n        background: $verdocs-grey-blue;\n      }\n    }\n  }\n\n  .fields-bar {\n    height: 50px;\n    display: flex;\n    z-index: 10000;\n    position: fixed;\n    padding: 5px 20px;\n    line-height: 28px;\n    align-items: center;\n    flex-direction: row;\n    box-sizing: border-box;\n    background: $verdocs-grey-blue;\n\n    .label {\n      color: #ffffff;\n      font-size: 14px;\n      font-weight: bold;\n      margin-right: 8px;\n    }\n\n    .icon {\n      margin: 0 4px;\n      display: flex;\n      transform: scale(0.8, 0.8);\n\n      svg {\n        fill: #ffffff;\n      }\n    }\n\n    .operation {\n      border: none;\n      outline: none;\n      color: #ffffff;\n      cursor: pointer;\n      font-size: 16px;\n      margin-left: 10px;\n      background: transparent;\n      text-transform: uppercase;\n\n      &:disabled {\n        color: #cccccc;\n        cursor: inherit;\n        pointer-events: none;\n      }\n    }\n  }\n}\n","import interact from 'interactjs';\nimport {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {Component, h, Event, EventEmitter, Fragment, Prop, Host} from '@stencil/core';\nimport {IPageRenderEvent} from '../../embeds/verdocs-view/verdocs-view';\nimport {getRoleIndex, renderDocumentField} from '../../../utils/utils';\nimport TemplateStore from '../../../utils/templateStore';\nimport {loadTemplate} from '../../../utils/Templates';\nimport {SDKError} from '../../../utils/errors';\n\n/**\n * Helper function to safely set/update components in a CSS transform attribute. Transform is normally set as a string of\n * `operation1(param) operation2(param) ...` components, which makes updating them a bit of a pain. This will remove the\n * specified component if it's already set and replace it with the new value, without touching the other components that\n * may already be set. Note that this operation moves the component to the end of the transform chain so it's not meant\n * to be used for order-sensitive components e.g. translate-then-rotate.\n */\nconst updateCssTransform = (el: HTMLElement, key: string, value: string) => {\n  // e.g. 'scale(1.87908, 1.87908) translate(0px, 0px);'\n  const currentTransform = el.style.transform;\n  // e.g. ['scale(1.87908, 1.87908)', 'scale', '1.87908, 1.87908', ...], [ 'translate(0px, 0px)', 'translate', '0px, 0px']]\n  const components = [...currentTransform.matchAll(/(\\w+)\\(([^)]*)\\)/gi)];\n  el.style.transform = [\n    components //\n      .filter(component => component[1] !== key) // Remove the entry if it's already set\n      .map(component => component[0]), // Convert back the remaining entries\n    `${key}(${value})`,\n  ].join(' ');\n};\n\nconst iconSingleline = '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"M3.425 16.15V13h11.15v3.15Zm0-5.15V7.85h17.15V11Z\"/></svg>';\n\nconst iconMultiline =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"M3.225 20.725v-3.15h11.55v3.15Zm0-4.775V12.8h17.55v3.15Zm0-4.75V8.05h17.55v3.15Zm0-4.775v-3.15h17.55v3.15Z\"/></svg>';\n\nconst iconCheck =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z\"/></svg>';\n\nconst iconRadio =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"M12 17q2.075 0 3.538-1.463Q17 14.075 17 12t-1.462-3.538Q14.075 7 12 7 9.925 7 8.463 8.462 7 9.925 7 12q0 2.075 1.463 3.537Q9.925 17 12 17Zm0 5.85q-2.275 0-4.25-.85t-3.438-2.312Q2.85 18.225 2 16.25q-.85-1.975-.85-4.25T2 7.75q.85-1.975 2.312-3.438Q5.775 2.85 7.75 2q1.975-.85 4.25-.85t4.25.85q1.975.85 3.438 2.312Q21.15 5.775 22 7.75q.85 1.975.85 4.25T22 16.25q-.85 1.975-2.312 3.438Q18.225 21.15 16.25 22q-1.975.85-4.25.85Zm0-3.15q3.25 0 5.475-2.225Q19.7 15.25 19.7 12q0-3.25-2.225-5.475Q15.25 4.3 12 4.3q-3.25 0-5.475 2.225Q4.3 8.75 4.3 12q0 3.25 2.225 5.475Q8.75 19.7 12 19.7Zm0-7.7Z\"/></svg>';\n\nconst iconDatepicker =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"M7.6 13.925q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375Zm4.4 0q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375Zm4.4 0q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375ZM5.3 22.85q-1.325 0-2.238-.912-.912-.913-.912-2.238V6.3q0-1.325.912-2.238.913-.912 2.238-.912H6v-2h2.575v2h6.85v-2H18v2h.7q1.325 0 2.238.912.912.913.912 2.238v13.4q0 1.325-.912 2.238-.913.912-2.238.912Zm0-3.15h13.4V10H5.3v9.7ZM5.3 8h13.4V6.3H5.3Zm0 0V6.3 8Z\"/></svg>';\n\nconst iconSignature =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"m9.225 21.225 4.65-4.65h8.45v4.65Zm-5.35-2.2H5.05l8.5-8.5-1.175-1.175-8.5 8.5Zm14.25-9.95L13.8 4.8l1.325-1.325q.625-.65 1.525-.663.9-.012 1.6.663l1.225 1.175q.675.675.663 1.562-.013.888-.663 1.513ZM16.7 10.55 6 21.225H1.675V16.9L12.35 6.225Zm-3.725-.625-.6-.575 1.175 1.175Z\"/></svg>';\n\nconst iconInitial = '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"M6.225 20.775V7h-5V3.225H15V7h-5v13.775Zm9.775 0v-8h-3V9h9.775v3.775h-3v8Z\"/></svg>';\n\n/**\n * Displays a builder experience for laying out fields in a template. Note that this experience requires a large display area to\n * present all of the required controls, so it is primarily intended to be used in desktop environments.\n */\n@Component({\n  tag: 'verdocs-template-fields',\n  styleUrl: 'verdocs-template-fields.scss',\n  shadow: false,\n})\nexport class VerdocsTemplateFields {\n  page0El: HTMLDivElement;\n  toolbarEl: HTMLDivElement;\n\n  /**\n   * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n   */\n  @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n  /**\n   * The ID of the template to create the document from.\n   */\n  @Prop() templateId: string | null = null;\n\n  /**\n   * Event fired when the user completes the step.\n   */\n  @Event({composed: true}) settingsUpdated: EventEmitter;\n\n  /**\n   * Event fired when the user cancels the dialog.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\n\n  /**\n   * Event fired if an error occurs. The event details will contain information about the error. Most errors will\n   * terminate the process, and the calling application should correct the condition and re-render the component.\n   */\n  @Event({composed: true}) sdkError: EventEmitter<SDKError>;\n\n  async componentWillLoad() {\n    try {\n      this.endpoint.loadSession();\n\n      if (!this.templateId) {\n        console.log(`[FIELDS] Missing required template ID ${this.templateId}`);\n        return;\n      }\n\n      try {\n        console.log(`[FIELDS] Loading template ${this.templateId}`);\n        await loadTemplate(this.endpoint, this.templateId);\n      } catch (e) {\n        console.log('[FIELDS] Error loading template', e);\n        this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n      }\n    } catch (e) {\n      console.log('[FIELDS] Error with preview session', e);\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n    }\n  }\n\n  componentDidRender() {\n    // console.log('rendered', this.page0El, this.toolbarEl);\n    // console.log('w', this.page0El.clientWidth);\n    // console.log('t', this.toolbarEl.clientWidth);\n    interact.dynamicDrop(true);\n    this.toolbarEl.style.width = `${this.page0El.clientWidth}px`;\n  }\n\n  async handleFieldChange(field: ITemplateField, e: any, optionId?: string) {\n    console.log('[FIELDS] handleFieldChange', field, e, optionId);\n  }\n\n  handlePageRendered(e) {\n    const pageInfo = e.detail as IPageRenderEvent;\n    console.log('[FIELDS] Page rendered', pageInfo);\n\n    const fields = TemplateStore.fields.filter(field => field.page_sequence === pageInfo.renderedPage.pageNumber);\n    // const fields = this.fields.filter(field => field.page_sequence === pageInfo.renderedPage.pageNumber);\n    console.log('[FIELDS] Fields on page', fields);\n    fields.forEach(field => {\n      const el = renderDocumentField(field, pageInfo.renderedPage, getRoleIndex(TemplateStore.roleNames, field.role_name), this.handleFieldChange, true, true, true);\n      // const el = renderDocumentField(field, pageInfo.renderedPage, getRoleIndex(this.roles, field.role_name), this.handleFieldChange, true, true, true);\n      if (!el) {\n        return;\n      }\n\n      el.addEventListener('recipientChanged', e => {\n        el.setAttribute('roleindex', getRoleIndex(TemplateStore.roleNames, e.detail));\n        // el.setAttribute('roleindex', getRoleIndex(this.roles, e.detail));\n      });\n\n      el.setAttribute('xScale', pageInfo.renderedPage.xScale);\n      el.setAttribute('yScale', pageInfo.renderedPage.yScale);\n\n      interact(el).draggable({\n        listeners: {\n          start(event) {\n            console.log('[FIELDS] Drag started', event.type, event.target);\n          },\n          move(event) {\n            const oldX = +(event.target.getAttribute('posX') || 0);\n            const oldY = +(event.target.getAttribute('posY') || 0);\n            const xScale = +(event.target.getAttribute('xScale') || 1);\n            const yScale = +(event.target.getAttribute('yScale') || 1);\n            const newX = event.dx / xScale + oldX;\n            const newY = event.dy / yScale + oldY;\n            event.target.setAttribute('posX', newX);\n            event.target.setAttribute('posy', newY);\n            updateCssTransform(event.target, 'translate', `${newX}px, ${newY}px`);\n          },\n          end(event) {\n            console.log('[FIELDS] Drag ended', event);\n            // event.target.setAttribute('posX', 0);\n            // event.target.setAttribute('posy', 0);\n            // updateCssTransform(event.target, 'translate', `${0}px, ${0}px`);\n          },\n        },\n      });\n    });\n  }\n\n  render() {\n    const testField: ITemplateField = {\n      template_id: '',\n      name: 'test',\n      role_name: 'Recipient 1',\n      type: 'textbox',\n      required: true,\n      setting: {\n        x: 0,\n        y: 0,\n      },\n      page_sequence: 0,\n    };\n\n    if (TemplateStore.loading) {\n      return (\n        <Host>\n          <verdocs-loader />\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        {TemplateStore.template ? (\n          <Fragment>\n            <div class=\"fields-bar\" ref={el => (this.toolbarEl = el as HTMLDivElement)}>\n              <div class=\"label\">Add Field:</div>\n              <verdocs-toolbar-icon icon={iconSingleline} text=\"Single-line Text Box\" onPress={() => console.log('single press')} />\n              <verdocs-toolbar-icon icon={iconMultiline} text=\"Multi-line Text Box\" onPress={() => console.log('multi press')} />\n              <verdocs-toolbar-icon icon={iconCheck} text=\"Checkbox\" onPress={() => console.log('check press')} />\n              <verdocs-toolbar-icon icon={iconRadio} text=\"Radio Button\" onPress={() => console.log('radio press')} />\n              <verdocs-toolbar-icon icon={iconDatepicker} text=\"Date Picker\" onPress={() => console.log('date press')} />\n              <verdocs-toolbar-icon icon={iconSignature} text=\"Signature\" onPress={() => console.log('signature press')} />\n              <verdocs-toolbar-icon icon={iconInitial} text=\"Initials\" onPress={() => console.log('initial press')} />\n              <div style={{flex: '1'}} />\n              <button onClick={() => console.log('save')} disabled={true} class=\"operation\">\n                Save\n              </button>\n              <button onClick={() => console.log('close')} class=\"operation\">\n                Close\n              </button>\n            </div>\n\n            <div class=\"page-0\" ref={el => (this.page0El = el as HTMLDivElement)}>\n              <div class=\"user-placed-fields\">\n                <div class=\"title\">User-Placed Fields</div>\n                <verdocs-field-signature\n                  field={testField}\n                  style={{width: '82px', height: '41px', left: '20px', top: '40px', transform: 'scale(1,1)', backgroundColor: getRGBA(0)}}\n                  moveable={true}\n                  editable={true}\n                />\n              </div>\n            </div>\n\n            <verdocs-view\n              templateId={this.templateId}\n              endpoint={this.endpoint}\n              onPageRendered={e => this.handlePageRendered(e)}\n              pageLayers={[\n                {name: 'page', type: 'canvas'},\n                {name: 'controls', type: 'div'},\n              ]}\n            />\n          </Fragment>\n        ) : (\n          <div>Error loading Template. Please try again later.</div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"verdocs-template-fields2.js","mappings":"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","names":["TemplateStore"],"sources":["./src/components/elements/verdocs-template-fields/verdocs-template-fields.scss?tag=verdocs-template-fields","./src/components/elements/verdocs-template-fields/verdocs-template-fields.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-template-fields {\n  position: relative;\n  font-family: $verdocs-primary-font;\n\n  .page-0 {\n    padding: 65px 15px 0 15px;\n    box-sizing: border-box;\n\n    .user-placed-fields {\n      height: 100px;\n      position: relative;\n      background: #ffffff;\n      box-shadow: 0 0 10px 5px #0000000f;\n\n      .title {\n        top: 0;\n        left: 0;\n        color: #ffffff;\n        font-size: 12px;\n        padding: 3px 6px;\n        font-weight: bold;\n        position: absolute;\n        background: $verdocs-grey-blue;\n      }\n    }\n  }\n\n  .fields-bar {\n    height: 50px;\n    display: flex;\n    z-index: 10000;\n    position: fixed;\n    padding: 5px 20px;\n    line-height: 28px;\n    align-items: center;\n    flex-direction: row;\n    box-sizing: border-box;\n    background: $verdocs-grey-blue;\n\n    .label {\n      color: #ffffff;\n      font-size: 14px;\n      font-weight: bold;\n      margin-right: 8px;\n    }\n\n    .icon {\n      margin: 0 4px;\n      display: flex;\n      transform: scale(0.8, 0.8);\n\n      svg {\n        fill: #ffffff;\n      }\n    }\n\n    .operation {\n      border: none;\n      outline: none;\n      color: #ffffff;\n      cursor: pointer;\n      font-size: 16px;\n      margin-left: 10px;\n      background: transparent;\n      text-transform: uppercase;\n\n      &:disabled {\n        color: #cccccc;\n        cursor: inherit;\n        pointer-events: none;\n      }\n    }\n  }\n}\n","import interact from 'interactjs';\nimport {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {ITemplate, ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {Component, h, Event, EventEmitter, Fragment, Prop, Host} from '@stencil/core';\nimport {IPageRenderEvent} from '../../embeds/verdocs-view/verdocs-view';\nimport {getRoleIndex, renderDocumentField} from '../../../utils/utils';\nimport TemplateStore from '../../../utils/templateStore';\nimport {loadTemplate} from '../../../utils/Templates';\nimport {SDKError} from '../../../utils/errors';\n\n/**\n * Helper function to safely set/update components in a CSS transform attribute. Transform is normally set as a string of\n * `operation1(param) operation2(param) ...` components, which makes updating them a bit of a pain. This will remove the\n * specified component if it's already set and replace it with the new value, without touching the other components that\n * may already be set. Note that this operation moves the component to the end of the transform chain so it's not meant\n * to be used for order-sensitive components e.g. translate-then-rotate.\n */\nconst updateCssTransform = (el: HTMLElement, key: string, value: string) => {\n  // e.g. 'scale(1.87908, 1.87908) translate(0px, 0px);'\n  const currentTransform = el.style.transform;\n  // e.g. ['scale(1.87908, 1.87908)', 'scale', '1.87908, 1.87908', ...], [ 'translate(0px, 0px)', 'translate', '0px, 0px']]\n  const components = [...currentTransform.matchAll(/(\\w+)\\(([^)]*)\\)/gi)];\n  el.style.transform = [\n    components //\n      .filter(component => component[1] !== key) // Remove the entry if it's already set\n      .map(component => component[0]), // Convert back the remaining entries\n    `${key}(${value})`,\n  ].join(' ');\n};\n\nconst iconSingleline = '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"M3.425 16.15V13h11.15v3.15Zm0-5.15V7.85h17.15V11Z\"/></svg>';\n\nconst iconMultiline =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"M3.225 20.725v-3.15h11.55v3.15Zm0-4.775V12.8h17.55v3.15Zm0-4.75V8.05h17.55v3.15Zm0-4.775v-3.15h17.55v3.15Z\"/></svg>';\n\nconst iconCheck =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z\"/></svg>';\n\nconst iconRadio =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"M12 17q2.075 0 3.538-1.463Q17 14.075 17 12t-1.462-3.538Q14.075 7 12 7 9.925 7 8.463 8.462 7 9.925 7 12q0 2.075 1.463 3.537Q9.925 17 12 17Zm0 5.85q-2.275 0-4.25-.85t-3.438-2.312Q2.85 18.225 2 16.25q-.85-1.975-.85-4.25T2 7.75q.85-1.975 2.312-3.438Q5.775 2.85 7.75 2q1.975-.85 4.25-.85t4.25.85q1.975.85 3.438 2.312Q21.15 5.775 22 7.75q.85 1.975.85 4.25T22 16.25q-.85 1.975-2.312 3.438Q18.225 21.15 16.25 22q-1.975.85-4.25.85Zm0-3.15q3.25 0 5.475-2.225Q19.7 15.25 19.7 12q0-3.25-2.225-5.475Q15.25 4.3 12 4.3q-3.25 0-5.475 2.225Q4.3 8.75 4.3 12q0 3.25 2.225 5.475Q8.75 19.7 12 19.7Zm0-7.7Z\"/></svg>';\n\nconst iconDatepicker =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"M7.6 13.925q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375Zm4.4 0q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375Zm4.4 0q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375ZM5.3 22.85q-1.325 0-2.238-.912-.912-.913-.912-2.238V6.3q0-1.325.912-2.238.913-.912 2.238-.912H6v-2h2.575v2h6.85v-2H18v2h.7q1.325 0 2.238.912.912.913.912 2.238v13.4q0 1.325-.912 2.238-.913.912-2.238.912Zm0-3.15h13.4V10H5.3v9.7ZM5.3 8h13.4V6.3H5.3Zm0 0V6.3 8Z\"/></svg>';\n\nconst iconSignature =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"m9.225 21.225 4.65-4.65h8.45v4.65Zm-5.35-2.2H5.05l8.5-8.5-1.175-1.175-8.5 8.5Zm14.25-9.95L13.8 4.8l1.325-1.325q.625-.65 1.525-.663.9-.012 1.6.663l1.225 1.175q.675.675.663 1.562-.013.888-.663 1.513ZM16.7 10.55 6 21.225H1.675V16.9L12.35 6.225Zm-3.725-.625-.6-.575 1.175 1.175Z\"/></svg>';\n\nconst iconInitial = '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"M6.225 20.775V7h-5V3.225H15V7h-5v13.775Zm9.775 0v-8h-3V9h9.775v3.775h-3v8Z\"/></svg>';\n\n/**\n * Displays a builder experience for laying out fields in a template. Note that this experience requires a large display area to\n * present all of the required controls, so it is primarily intended to be used in desktop environments.\n */\n@Component({\n  tag: 'verdocs-template-fields',\n  styleUrl: 'verdocs-template-fields.scss',\n  shadow: false,\n})\nexport class VerdocsTemplateFields {\n  page0El: HTMLDivElement;\n  toolbarEl: HTMLDivElement;\n\n  /**\n   * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n   */\n  @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n  /**\n   * The ID of the template to create the document from.\n   */\n  @Prop() templateId: string | null = null;\n\n  /**\n   * Event fired when the user completes the step.\n   */\n  @Event({composed: true}) next: EventEmitter<ITemplate>;\n\n  /**\n   * Event fired when the user cancels the dialog.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\n\n  /**\n   * Event fired if an error occurs. The event details will contain information about the error. Most errors will\n   * terminate the process, and the calling application should correct the condition and re-render the component.\n   */\n  @Event({composed: true}) sdkError: EventEmitter<SDKError>;\n\n  async componentWillLoad() {\n    try {\n      this.endpoint.loadSession();\n\n      if (!this.templateId) {\n        console.log(`[FIELDS] Missing required template ID ${this.templateId}`);\n        return;\n      }\n\n      try {\n        console.log(`[FIELDS] Loading template ${this.templateId}`);\n        await loadTemplate(this.endpoint, this.templateId);\n      } catch (e) {\n        console.log('[FIELDS] Error loading template', e);\n        this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n      }\n    } catch (e) {\n      console.log('[FIELDS] Error with preview session', e);\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n    }\n  }\n\n  componentDidRender() {\n    // console.log('rendered', this.page0El, this.toolbarEl);\n    // console.log('w', this.page0El.clientWidth);\n    // console.log('t', this.toolbarEl.clientWidth);\n    interact.dynamicDrop(true);\n    this.toolbarEl.style.width = `${this.page0El.clientWidth}px`;\n  }\n\n  async handleFieldChange(field: ITemplateField, e: any, optionId?: string) {\n    console.log('[FIELDS] handleFieldChange', field, e, optionId);\n  }\n\n  handlePageRendered(e) {\n    const pageInfo = e.detail as IPageRenderEvent;\n    console.log('[FIELDS] Page rendered', pageInfo);\n\n    const fields = TemplateStore.fields.filter(field => field.page_sequence === pageInfo.renderedPage.pageNumber);\n    // const fields = this.fields.filter(field => field.page_sequence === pageInfo.renderedPage.pageNumber);\n    console.log('[FIELDS] Fields on page', fields);\n    fields.forEach(field => {\n      const el = renderDocumentField(field, pageInfo.renderedPage, getRoleIndex(TemplateStore.roleNames, field.role_name), this.handleFieldChange, true, true, true);\n      // const el = renderDocumentField(field, pageInfo.renderedPage, getRoleIndex(this.roles, field.role_name), this.handleFieldChange, true, true, true);\n      if (!el) {\n        return;\n      }\n\n      el.addEventListener('recipientChanged', e => {\n        el.setAttribute('roleindex', getRoleIndex(TemplateStore.roleNames, e.detail));\n        // el.setAttribute('roleindex', getRoleIndex(this.roles, e.detail));\n      });\n\n      el.setAttribute('xScale', pageInfo.renderedPage.xScale);\n      el.setAttribute('yScale', pageInfo.renderedPage.yScale);\n\n      interact(el).draggable({\n        listeners: {\n          start(event) {\n            console.log('[FIELDS] Drag started', event.type, event.target);\n          },\n          move(event) {\n            const oldX = +(event.target.getAttribute('posX') || 0);\n            const oldY = +(event.target.getAttribute('posY') || 0);\n            const xScale = +(event.target.getAttribute('xScale') || 1);\n            const yScale = +(event.target.getAttribute('yScale') || 1);\n            const newX = event.dx / xScale + oldX;\n            const newY = event.dy / yScale + oldY;\n            event.target.setAttribute('posX', newX);\n            event.target.setAttribute('posy', newY);\n            updateCssTransform(event.target, 'translate', `${newX}px, ${newY}px`);\n          },\n          end(event) {\n            console.log('[FIELDS] Drag ended', event);\n            // event.target.setAttribute('posX', 0);\n            // event.target.setAttribute('posy', 0);\n            // updateCssTransform(event.target, 'translate', `${0}px, ${0}px`);\n          },\n        },\n      });\n    });\n  }\n\n  render() {\n    const testField: ITemplateField = {\n      template_id: '',\n      name: 'test',\n      role_name: 'Recipient 1',\n      type: 'textbox',\n      required: true,\n      setting: {\n        x: 0,\n        y: 0,\n      },\n      page_sequence: 0,\n    };\n\n    if (TemplateStore.loading) {\n      return (\n        <Host>\n          <verdocs-loader />\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        {TemplateStore.template ? (\n          <Fragment>\n            <div class=\"fields-bar\" ref={el => (this.toolbarEl = el as HTMLDivElement)}>\n              <div class=\"label\">Add Field:</div>\n              <verdocs-toolbar-icon icon={iconSingleline} text=\"Single-line Text Box\" onClick={() => console.log('single press')} />\n              <verdocs-toolbar-icon icon={iconMultiline} text=\"Multi-line Text Box\" onClick={() => console.log('multi press')} />\n              <verdocs-toolbar-icon icon={iconCheck} text=\"Checkbox\" onClick={() => console.log('check press')} />\n              <verdocs-toolbar-icon icon={iconRadio} text=\"Radio Button\" onClick={() => console.log('radio press')} />\n              <verdocs-toolbar-icon icon={iconDatepicker} text=\"Date Picker\" onClick={() => console.log('date press')} />\n              <verdocs-toolbar-icon icon={iconSignature} text=\"Signature\" onClick={() => console.log('signature press')} />\n              <verdocs-toolbar-icon icon={iconInitial} text=\"Initials\" onClick={() => console.log('initial press')} />\n              <div style={{flex: '1'}} />\n              <button onClick={() => this.next?.emit(TemplateStore.template)} disabled={true} class=\"operation\">\n                Save\n              </button>\n              <button onClick={() => this.cancel?.emit()} class=\"operation\">\n                Close\n              </button>\n            </div>\n\n            <div class=\"page-0\" ref={el => (this.page0El = el as HTMLDivElement)}>\n              <div class=\"user-placed-fields\">\n                <div class=\"title\">User-Placed Fields</div>\n                <verdocs-field-signature\n                  field={testField}\n                  style={{width: '82px', height: '41px', left: '20px', top: '40px', transform: 'scale(1,1)', backgroundColor: getRGBA(0)}}\n                  moveable={true}\n                  editable={true}\n                />\n              </div>\n            </div>\n\n            <verdocs-view\n              templateId={this.templateId}\n              endpoint={this.endpoint}\n              onPageRendered={e => this.handlePageRendered(e)}\n              pageLayers={[\n                {name: 'page', type: 'canvas'},\n                {name: 'controls', type: 'div'},\n              ]}\n            />\n          </Fragment>\n        ) : (\n          <div>Error loading Template. Please try again later.</div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/verdocs-template-properties2.js

@@ -16,7 +16,7 @@ const VerdocsTemplateProperties = /*@__PURE__*/ proxyCustomElement(class extends
     super();
     this.__registerHost();
     this.cancel = createEvent(this, "cancel", 7);
-    this.settingsUpdated = createEvent(this, "settingsUpdated", 7);
+    this.next = createEvent(this, "next", 7);
     this.sdkError = createEvent(this, "sdkError", 7);
     this.endpoint = VerdocsEndpoint.getDefault();
     this.templateId = '';
@@ -48,10 +48,6 @@ const VerdocsTemplateProperties = /*@__PURE__*/ proxyCustomElement(class extends
       (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
     }
   }
-  handleMessageChange(e) {
-    console.log(e);
-    // this.message = e.target.value;
-  }
   handleCancel(e) {
     var _a;
     e.stopPropagation();
@@ -60,32 +56,15 @@ const VerdocsTemplateProperties = /*@__PURE__*/ proxyCustomElement(class extends
   handleSubmit(e) {
     var _a;
     e.stopPropagation();
-    console.log('new', {
-      name: this.name,
-      visibility: this.visibility,
-      firstReminderDays: +this.firstReminderDays,
-      reminderDays: +this.reminderDays,
-      sendReminders: this.sendReminders,
-    });
-    (_a = this.settingsUpdated) === null || _a === void 0 ? void 0 : _a.emit({
+    (_a = this.next) === null || _a === void 0 ? void 0 : _a.emit({
       name: this.name,
       firstReminderDays: +this.firstReminderDays,
       reminderDays: +this.reminderDays,
       sendReminders: this.sendReminders,
     });
-    // this.contactSelected?.emit({
-    //   delegator: this.delegator,
-    // });
   }
   render() {
-    console.log('vals', { firstReminderDays: this.firstReminderDays, reminderDays: this.reminderDays, name: this.name });
-    return (h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("h5", null, "Template Name"), h("fieldset", null, h("verdocs-text-input", { value: this.name, autocomplete: "off", onInput: (e) => {
-        this.name = e.target.value;
-      } })), h("h5", null, "Reminders"), h("fieldset", null, h("div", { class: "input-row" }, h("label", null, "Send Automatic Reminders"), h("verdocs-checkbox", { name: "automatic-reminders", checked: this.sendReminders, value: "on", onSelected: e => (this.sendReminders = e.detail.value === 'on') })), h("div", { class: "input-row" }, h("label", null, "Days Before First Reminder"), h("verdocs-text-input", { value: this.firstReminderDays, onInput: (e) => {
-        this.firstReminderDays = e.target.value;
-      } })), h("div", { class: "input-row" }, h("label", null, "Days Between Reminders"), h("verdocs-text-input", { value: this.reminderDays, onInput: (e) => {
-        this.firstReminderDays = e.target.value;
-      } }))), h("h5", null, "Template Visibility"), h("fieldset", null, h("div", { class: "radio-row" }, h("verdocs-radio-button", { name: "visibility", checked: true, value: "private" }), h("label", { htmlFor: "verdocs-radio-button-visibility-private" }, h("div", { class: "title" }, "Private"), h("div", { class: "description" }, "Only you can share and use this template"))), h("div", { class: "radio-row" }, h("verdocs-radio-button", { name: "visibility", checked: true, value: "shared" }), h("label", { htmlFor: "verdocs-radio-button-visibility-shared" }, h("div", { class: "title" }, "Shared to your organization"), h("div", { class: "description" }, "Give access to your organization to share and use this template"))), h("div", { class: "radio-row" }, h("verdocs-radio-button", { name: "visibility", checked: true, value: "shared_public" }), h("label", { htmlFor: "verdocs-radio-button-visibility-shared_public" }, h("div", { class: "title" }, "Shared to your organization and Public"), h("div", { class: "description" }, "Give access to your organization to share this template, and anyone on the Web can find and use this template"))), h("div", { class: "radio-row" }, h("verdocs-radio-button", { name: "visibility", checked: true, value: "public" }), h("label", { htmlFor: "verdocs-radio-button-visibility-public" }, h("div", { class: "title" }, "Public"), h("div", { class: "description" }, "Anyone on the Web can find and use this template")))), h("div", { class: "buttons" }, h("div", { class: "flex-fill" }), h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onPress: e => this.handleCancel(e) }), h("verdocs-button", { label: "OK", size: "small", onPress: e => this.handleSubmit(e) }))));
+    return (h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("h5", null, "Template Name"), h("fieldset", null, h("verdocs-text-input", { value: this.name, autocomplete: "off", onInput: (e) => (this.name = e.target.value) })), h("h5", null, "Reminders"), h("fieldset", null, h("div", { class: "input-row" }, h("label", null, "Send Automatic Reminders"), h("verdocs-checkbox", { name: "automatic-reminders", checked: this.sendReminders, value: "on", onInput: (e) => (this.sendReminders = e.target.checked) })), h("div", { class: "input-row" }, h("label", null, "Days Before First Reminder"), h("verdocs-text-input", { value: this.firstReminderDays, onInput: (e) => (this.firstReminderDays = e.target.value) })), h("div", { class: "input-row" }, h("label", null, "Days Between Reminders"), h("verdocs-text-input", { value: this.reminderDays, onInput: (e) => (this.reminderDays = e.target.value) }))), h("h5", null, "Template Visibility"), h("fieldset", null, h("div", { class: "radio-row" }, h("verdocs-radio-button", { name: "visibility", checked: true, value: "private", onChange: () => (this.visibility = 'private') }), h("label", { htmlFor: "verdocs-radio-button-visibility-private" }, h("div", { class: "title" }, "Private"), h("div", { class: "description" }, "Only you can share and use this template"))), h("div", { class: "radio-row" }, h("verdocs-radio-button", { name: "visibility", checked: true, value: "shared", onChange: () => (this.visibility = 'shared') }), h("label", { htmlFor: "verdocs-radio-button-visibility-shared" }, h("div", { class: "title" }, "Shared to your organization"), h("div", { class: "description" }, "Give access to your organization to share and use this template"))), h("div", { class: "radio-row" }, h("verdocs-radio-button", { name: "visibility", checked: true, value: "shared_public", onChange: () => (this.visibility = 'shared_public') }), h("label", { htmlFor: "verdocs-radio-button-visibility-shared_public" }, h("div", { class: "title" }, "Shared to your organization and Public"), h("div", { class: "description" }, "Give access to your organization to share this template, and anyone on the Web can find and use this template"))), h("div", { class: "radio-row" }, h("verdocs-radio-button", { name: "visibility", checked: this.visibility === 'public', value: "public", onChange: () => (this.visibility = 'public') }), h("label", { htmlFor: "verdocs-radio-button-visibility-public" }, h("div", { class: "title" }, "Public"), h("div", { class: "description" }, "Anyone on the Web can find and use this template")))), h("div", { class: "buttons" }, h("div", { class: "flex-fill" }), h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e) }), h("verdocs-button", { label: "OK", size: "small", onClick: e => this.handleSubmit(e) }))));
   }
   static get style() { return verdocsTemplatePropertiesCss; }
 }, [0, "verdocs-template-properties", {

package/dist/components/verdocs-template-properties2.js.map

@@ -1 +1 @@
-{"file":"verdocs-template-properties2.js","mappings":"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","names":["TemplateStore"],"sources":["./src/components/elements/verdocs-template-properties/verdocs-template-properties.scss?tag=verdocs-template-properties","./src/components/elements/verdocs-template-properties/verdocs-template-properties.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-template-properties {\n  font-family: $verdocs-primary-font;\n\n  form {\n    display: flex;\n    flex-direction: column;\n\n    h5 {\n      font-size: 14px;\n      font-weight: 400;\n      margin: 0 0 6px 0;\n    }\n\n    .row {\n      display: flex;\n      position: relative;\n      margin: 0 0 20px 0;\n      flex-direction: column;\n    }\n\n    fieldset {\n      width: 440px;\n      border: none;\n      max-width: 100%;\n      margin: 0 0 20px 0;\n      box-sizing: border-box;\n      padding: 20px 20px 10px 20px;\n      background-color: $verdocs-grey-4;\n      box-shadow: 0 1px 3px 0 rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 12%), 0 0 2px 0 rgb(0 0 0 / 14%);\n    }\n\n    label {\n      display: block;\n      font-size: 14px;\n      font-weight: 500;\n      margin: 0 0 4px 0;\n      color: $verdocs-bg-4;\n    }\n\n    input {\n      border: none;\n      font-size: 18px;\n      padding: 3px 6px 3px 0;\n      background: transparent;\n      border-bottom: 1px solid $verdocs-dark-blue;\n\n      &:focus {\n        outline: none;\n      }\n    }\n\n    .input-row {\n      display: flex;\n      margin: 0 0 10px 0;\n      align-items: center;\n      flex-direction: row;\n\n      label {\n        flex: 1;\n        display: flex;\n      }\n\n      verdocs-text-input {\n        margin: 0;\n        display: flex;\n        flex: 0 0 40px;\n\n        input {\n          text-align: center;\n        }\n      }\n\n      verdocs-checkbox {\n        display: flex;\n        flex: 0 0 40px;\n        justify-content: center;\n      }\n    }\n\n    .radio-row {\n      display: flex;\n      position: relative;\n      margin: 0 0 10px 0;\n      flex-direction: row;\n\n      verdocs-radio-button {\n        display: flex;\n        flex: 0 0 30px;\n      }\n\n      label {\n        display: flex;\n        flex-direction: column;\n\n        .title {\n          font-size: 16px;\n          font-weight: 500;\n        }\n\n        .description {\n          font-size: 14px;\n          font-weight: 400;\n        }\n      }\n    }\n  }\n\n  .buttons {\n    display: flex;\n    column-gap: 8px;\n    margin-top: 16px;\n    flex-direction: row;\n\n    .flex-fill {\n      flex: 1;\n    }\n  }\n\n  ::placeholder {\n    color: $verdocs-bg-2;\n  }\n}\n","import {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, h, Event, EventEmitter, Prop, State} from '@stencil/core';\nimport {getTemplate} from '@verdocs/js-sdk/Templates/Templates';\nimport {ITemplate} from '@verdocs/js-sdk/Templates/Types';\nimport {SDKError} from '../../../utils/errors';\nimport TemplateStore from '../../../utils/templateStore';\n\n/**\n * Displays a collection of settings boxes that allow a user to configure a template's behavior.\n */\n@Component({\n  tag: 'verdocs-template-properties',\n  styleUrl: 'verdocs-template-properties.scss',\n  shadow: false,\n})\nexport class VerdocsTemplateProperties {\n  /**\n   * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n   */\n  @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n  /**\n   * The template ID to edit.\n   */\n  @Prop() templateId: string = '';\n\n  /**\n   * Event fired when the user cancels the dialog.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\n\n  /**\n   * Event fired when the user completes the step.\n   */\n  @Event({composed: true}) settingsUpdated: EventEmitter<{name: string; sendReminders: boolean; firstReminderDays: number; reminderDays: number}>;\n\n  /**\n   * Event fired if an error occurs. The event details will contain information about the error. Most errors will\n   * terminate the process, and the calling application should correct the condition and re-render the component.\n   */\n  @Event({composed: true}) sdkError: EventEmitter<SDKError>;\n\n  @State() template: ITemplate | null = null;\n  @State() name: string = '';\n  @State() visibility: string = '';\n  @State() sendReminders = false;\n  @State() firstReminderDays = '1';\n  @State() reminderDays = '1';\n\n  async componentWillLoad() {\n    try {\n      this.endpoint.loadSession();\n\n      console.log(`[PROPERTIES] Loading template ${this.templateId}`);\n      const template = await getTemplate(this.endpoint, this.templateId);\n      if (!template) {\n        console.log('[PREVIEW] Unable to load template');\n        return;\n      }\n\n      console.log('[PROPERTIES] Got template', template);\n      this.template = template;\n      TemplateStore.template = template;\n      this.name = template.name;\n      this.sendReminders = template.reminder_id !== null;\n    } catch (e) {\n      console.log('[PROPERTIES] Error loading template', e);\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n    }\n  }\n\n  handleMessageChange(e: any) {\n    console.log(e);\n    // this.message = e.target.value;\n  }\n\n  handleCancel(e) {\n    e.stopPropagation();\n    this.cancel?.emit();\n  }\n\n  handleSubmit(e) {\n    e.stopPropagation();\n\n    console.log('new', {\n      name: this.name,\n      visibility: this.visibility,\n      firstReminderDays: +this.firstReminderDays,\n      reminderDays: +this.reminderDays,\n      sendReminders: this.sendReminders,\n    });\n    this.settingsUpdated?.emit({\n      name: this.name,\n      firstReminderDays: +this.firstReminderDays,\n      reminderDays: +this.reminderDays,\n      sendReminders: this.sendReminders,\n    });\n\n    // this.contactSelected?.emit({\n    //   delegator: this.delegator,\n    // });\n  }\n\n  render() {\n    console.log('vals', {firstReminderDays: this.firstReminderDays, reminderDays: this.reminderDays, name: this.name});\n    return (\n      <form onSubmit={e => e.preventDefault()} onClick={e => e.stopPropagation()} autocomplete=\"off\">\n        <h5>Template Name</h5>\n        <fieldset>\n          <verdocs-text-input\n            value={this.name}\n            autocomplete=\"off\"\n            onInput={(e: any) => {\n              this.name = e.target.value;\n            }}\n          />\n        </fieldset>\n\n        <h5>Reminders</h5>\n        <fieldset>\n          <div class=\"input-row\">\n            <label>Send Automatic Reminders</label>\n            <verdocs-checkbox name=\"automatic-reminders\" checked={this.sendReminders} value=\"on\" onSelected={e => (this.sendReminders = e.detail.value === 'on')} />\n          </div>\n\n          <div class=\"input-row\">\n            <label>Days Before First Reminder</label>\n            <verdocs-text-input\n              value={this.firstReminderDays}\n              onInput={(e: any) => {\n                this.firstReminderDays = e.target.value;\n              }}\n            />\n          </div>\n          <div class=\"input-row\">\n            <label>Days Between Reminders</label>\n            <verdocs-text-input\n              value={this.reminderDays}\n              onInput={(e: any) => {\n                this.firstReminderDays = e.target.value;\n              }}\n            />\n          </div>\n        </fieldset>\n\n        <h5>Template Visibility</h5>\n        <fieldset>\n          <div class=\"radio-row\">\n            <verdocs-radio-button name=\"visibility\" checked={true} value=\"private\" />\n            <label htmlFor=\"verdocs-radio-button-visibility-private\">\n              <div class=\"title\">Private</div>\n              <div class=\"description\">Only you can share and use this template</div>\n            </label>\n          </div>\n          <div class=\"radio-row\">\n            <verdocs-radio-button name=\"visibility\" checked={true} value=\"shared\" />\n            <label htmlFor=\"verdocs-radio-button-visibility-shared\">\n              <div class=\"title\">Shared to your organization</div>\n              <div class=\"description\">Give access to your organization to share and use this template</div>\n            </label>\n          </div>\n          <div class=\"radio-row\">\n            <verdocs-radio-button name=\"visibility\" checked={true} value=\"shared_public\" />\n            <label htmlFor=\"verdocs-radio-button-visibility-shared_public\">\n              <div class=\"title\">Shared to your organization and Public</div>\n              <div class=\"description\">Give access to your organization to share this template, and anyone on the Web can find and use this template</div>\n            </label>\n          </div>\n          <div class=\"radio-row\">\n            <verdocs-radio-button name=\"visibility\" checked={true} value=\"public\" />\n            <label htmlFor=\"verdocs-radio-button-visibility-public\">\n              <div class=\"title\">Public</div>\n              <div class=\"description\">Anyone on the Web can find and use this template</div>\n            </label>\n          </div>\n        </fieldset>\n\n        <div class=\"buttons\">\n          <div class=\"flex-fill\" />\n\n          <verdocs-button variant=\"outline\" label=\"Cancel\" size=\"small\" onPress={e => this.handleCancel(e)} />\n          <verdocs-button label=\"OK\" size=\"small\" onPress={e => this.handleSubmit(e)} />\n        </div>\n      </form>\n    );\n  }\n}\n"],"version":3}
+{"file":"verdocs-template-properties2.js","mappings":"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","names":["TemplateStore"],"sources":["./src/components/elements/verdocs-template-properties/verdocs-template-properties.scss?tag=verdocs-template-properties","./src/components/elements/verdocs-template-properties/verdocs-template-properties.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-template-properties {\n  font-family: $verdocs-primary-font;\n\n  form {\n    display: flex;\n    flex-direction: column;\n\n    h5 {\n      font-size: 14px;\n      font-weight: 400;\n      margin: 0 0 6px 0;\n    }\n\n    .row {\n      display: flex;\n      position: relative;\n      margin: 0 0 20px 0;\n      flex-direction: column;\n    }\n\n    fieldset {\n      width: 440px;\n      border: none;\n      max-width: 100%;\n      margin: 0 0 20px 0;\n      box-sizing: border-box;\n      padding: 20px 20px 10px 20px;\n      background-color: $verdocs-grey-4;\n      box-shadow: 0 1px 3px 0 rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 12%), 0 0 2px 0 rgb(0 0 0 / 14%);\n    }\n\n    label {\n      display: block;\n      font-size: 14px;\n      font-weight: 500;\n      margin: 0 0 4px 0;\n      color: $verdocs-bg-4;\n    }\n\n    input {\n      border: none;\n      font-size: 18px;\n      padding: 3px 6px 3px 0;\n      background: transparent;\n      border-bottom: 1px solid $verdocs-dark-blue;\n\n      &:focus {\n        outline: none;\n      }\n    }\n\n    .input-row {\n      display: flex;\n      margin: 0 0 10px 0;\n      align-items: center;\n      flex-direction: row;\n\n      label {\n        flex: 1;\n        display: flex;\n      }\n\n      verdocs-text-input {\n        margin: 0;\n        display: flex;\n        flex: 0 0 40px;\n\n        input {\n          text-align: center;\n        }\n      }\n\n      verdocs-checkbox {\n        display: flex;\n        flex: 0 0 40px;\n        justify-content: center;\n      }\n    }\n\n    .radio-row {\n      display: flex;\n      position: relative;\n      margin: 0 0 10px 0;\n      flex-direction: row;\n\n      verdocs-radio-button {\n        display: flex;\n        flex: 0 0 30px;\n      }\n\n      label {\n        display: flex;\n        flex-direction: column;\n\n        .title {\n          font-size: 16px;\n          font-weight: 500;\n        }\n\n        .description {\n          font-size: 14px;\n          font-weight: 400;\n        }\n      }\n    }\n  }\n\n  .buttons {\n    display: flex;\n    column-gap: 8px;\n    margin-top: 16px;\n    flex-direction: row;\n\n    .flex-fill {\n      flex: 1;\n    }\n  }\n\n  ::placeholder {\n    color: $verdocs-bg-2;\n  }\n}\n","import {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, h, Event, EventEmitter, Prop, State} from '@stencil/core';\nimport {getTemplate} from '@verdocs/js-sdk/Templates/Templates';\nimport {ITemplate} from '@verdocs/js-sdk/Templates/Types';\nimport {SDKError} from '../../../utils/errors';\nimport TemplateStore from '../../../utils/templateStore';\n\n/**\n * Displays a collection of settings boxes that allow a user to configure a template's behavior.\n */\n@Component({\n  tag: 'verdocs-template-properties',\n  styleUrl: 'verdocs-template-properties.scss',\n  shadow: false,\n})\nexport class VerdocsTemplateProperties {\n  /**\n   * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n   */\n  @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n  /**\n   * The template ID to edit.\n   */\n  @Prop() templateId: string = '';\n\n  /**\n   * Event fired when the user cancels the dialog.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\n\n  /**\n   * Event fired when the user completes the step.\n   */\n  @Event({composed: true}) next: EventEmitter<{name: string; sendReminders: boolean; firstReminderDays: number; reminderDays: number}>;\n\n  /**\n   * Event fired if an error occurs. The event details will contain information about the error. Most errors will\n   * terminate the process, and the calling application should correct the condition and re-render the component.\n   */\n  @Event({composed: true}) sdkError: EventEmitter<SDKError>;\n\n  @State() template: ITemplate | null = null;\n  @State() name: string = '';\n  @State() visibility: string = '';\n  @State() sendReminders = false;\n  @State() firstReminderDays = '1';\n  @State() reminderDays = '1';\n\n  async componentWillLoad() {\n    try {\n      this.endpoint.loadSession();\n\n      console.log(`[PROPERTIES] Loading template ${this.templateId}`);\n      const template = await getTemplate(this.endpoint, this.templateId);\n      if (!template) {\n        console.log('[PREVIEW] Unable to load template');\n        return;\n      }\n\n      console.log('[PROPERTIES] Got template', template);\n      this.template = template;\n      TemplateStore.template = template;\n      this.name = template.name;\n      this.sendReminders = template.reminder_id !== null;\n    } catch (e) {\n      console.log('[PROPERTIES] Error loading template', e);\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n    }\n  }\n\n  handleCancel(e) {\n    e.stopPropagation();\n    this.cancel?.emit();\n  }\n\n  handleSubmit(e) {\n    e.stopPropagation();\n\n    this.next?.emit({\n      name: this.name,\n      firstReminderDays: +this.firstReminderDays,\n      reminderDays: +this.reminderDays,\n      sendReminders: this.sendReminders,\n    });\n  }\n\n  render() {\n    return (\n      <form onSubmit={e => e.preventDefault()} onClick={e => e.stopPropagation()} autocomplete=\"off\">\n        <h5>Template Name</h5>\n        <fieldset>\n          <verdocs-text-input value={this.name} autocomplete=\"off\" onInput={(e: any) => (this.name = e.target.value)} />\n        </fieldset>\n\n        <h5>Reminders</h5>\n        <fieldset>\n          <div class=\"input-row\">\n            <label>Send Automatic Reminders</label>\n            <verdocs-checkbox name=\"automatic-reminders\" checked={this.sendReminders} value=\"on\" onInput={(e: any) => (this.sendReminders = e.target.checked)} />\n          </div>\n\n          <div class=\"input-row\">\n            <label>Days Before First Reminder</label>\n            <verdocs-text-input value={this.firstReminderDays} onInput={(e: any) => (this.firstReminderDays = e.target.value)} />\n          </div>\n          <div class=\"input-row\">\n            <label>Days Between Reminders</label>\n            <verdocs-text-input value={this.reminderDays} onInput={(e: any) => (this.reminderDays = e.target.value)} />\n          </div>\n        </fieldset>\n\n        <h5>Template Visibility</h5>\n        <fieldset>\n          <div class=\"radio-row\">\n            <verdocs-radio-button name=\"visibility\" checked={true} value=\"private\" onChange={() => (this.visibility = 'private')} />\n            <label htmlFor=\"verdocs-radio-button-visibility-private\">\n              <div class=\"title\">Private</div>\n              <div class=\"description\">Only you can share and use this template</div>\n            </label>\n          </div>\n          <div class=\"radio-row\">\n            <verdocs-radio-button name=\"visibility\" checked={true} value=\"shared\" onChange={() => (this.visibility = 'shared')} />\n            <label htmlFor=\"verdocs-radio-button-visibility-shared\">\n              <div class=\"title\">Shared to your organization</div>\n              <div class=\"description\">Give access to your organization to share and use this template</div>\n            </label>\n          </div>\n          <div class=\"radio-row\">\n            <verdocs-radio-button name=\"visibility\" checked={true} value=\"shared_public\" onChange={() => (this.visibility = 'shared_public')} />\n            <label htmlFor=\"verdocs-radio-button-visibility-shared_public\">\n              <div class=\"title\">Shared to your organization and Public</div>\n              <div class=\"description\">Give access to your organization to share this template, and anyone on the Web can find and use this template</div>\n            </label>\n          </div>\n          <div class=\"radio-row\">\n            <verdocs-radio-button name=\"visibility\" checked={this.visibility === 'public'} value=\"public\" onChange={() => (this.visibility = 'public')} />\n            <label htmlFor=\"verdocs-radio-button-visibility-public\">\n              <div class=\"title\">Public</div>\n              <div class=\"description\">Anyone on the Web can find and use this template</div>\n            </label>\n          </div>\n        </fieldset>\n\n        <div class=\"buttons\">\n          <div class=\"flex-fill\" />\n\n          <verdocs-button variant=\"outline\" label=\"Cancel\" size=\"small\" onClick={e => this.handleCancel(e)} />\n          <verdocs-button label=\"OK\" size=\"small\" onClick={e => this.handleSubmit(e)} />\n        </div>\n      </form>\n    );\n  }\n}\n"],"version":3}

package/dist/components/verdocs-template-recipients2.js

@@ -33,8 +33,7 @@ const VerdocsTemplateRecipients = /*@__PURE__*/ proxyCustomElement(class extends
     this.__registerHost();
     this.searchContacts = createEvent(this, "searchContacts", 7);
     this.cancel = createEvent(this, "cancel", 7);
-    this.settingsUpdated = createEvent(this, "settingsUpdated", 7);
-    this.contactSelected = createEvent(this, "contactSelected", 7);
+    this.next = createEvent(this, "next", 7);
     this.sequences = [];
     this.rolesAtSequence = {};
     this.endpoint = VerdocsEndpoint.getDefault();
@@ -195,17 +194,16 @@ const VerdocsTemplateRecipients = /*@__PURE__*/ proxyCustomElement(class extends
     (_a = this.cancel) === null || _a === void 0 ? void 0 : _a.emit();
   }
   handleSubmit(e) {
-    var _a, _b;
+    var _a;
     e.stopPropagation();
     this.showSuggestions = false;
-    (_a = this.contactSelected) === null || _a === void 0 ? void 0 : _a.emit({
+    (_a = this.next) === null || _a === void 0 ? void 0 : _a.emit({
       full_name: this.name,
       email: this.email,
       phone: this.phone,
       message: this.message,
       delegator: this.delegator,
     });
-    (_b = this.settingsUpdated) === null || _b === void 0 ? void 0 : _b.emit({});
   }
   render() {
     console.log('ordered roles', JSON.parse(JSON.stringify(this.orderedRoles)));
@@ -214,9 +212,9 @@ const VerdocsTemplateRecipients = /*@__PURE__*/ proxyCustomElement(class extends
     return (h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("h5", null, "Participant Order"), h("div", { class: "participants" }, h("div", { class: "left-line" }), h("div", { class: "row" }, h("div", { class: "icon", innerHTML: startIcon }), h("div", { class: "sender" }, h("span", { class: "label" }, "Sender:"), " ", senderLabels[this.sender], ' ', h("div", { class: "settings-button", innerHTML: settingsIcon, onClick: () => (this.showingSenderDialog = true), "aria-role": "button" }))), this.sequences.map(sequence => (h("div", { class: "row" }, h("div", { class: "icon", innerHTML: stepIcon }), h("div", { class: "dropzone", "data-order": beforeOrder, "data-sequence": sequence }), this.rolesAtSequence[sequence].map(role => {
       beforeOrder = role.order;
       return (h(Fragment, null, h("div", { class: "recipient", style: { backgroundColor: getRGBA(getRoleIndex(roleNames, role.name)) }, "data-rolename": role.name }, role.name, " ", h("div", { class: "settings-button", innerHTML: settingsIcon, onClick: () => (this.showingSenderDialog = true), "aria-role": "button" })), h("div", { class: "dropzone", "data-order": beforeOrder, "data-sequence": sequence })));
-    })))), h("div", { class: "row" }, h("div", { class: "icon", innerHTML: doneIcon }), h("div", { class: "complete" }, "Document Complete"))), h("div", { class: "buttons" }, h("div", { class: "flex-fill" }), h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onPress: e => this.handleCancel(e) }), h("verdocs-button", { label: "OK", size: "small", onPress: e => this.handleSubmit(e) })), this.showingSenderDialog && (h("verdocs-template-sender-dialog", { open: true, value: this.sender, onCancel: () => (this.showingSenderDialog = false), onDone: e => {
+    })))), h("div", { class: "row" }, h("div", { class: "icon", innerHTML: doneIcon }), h("div", { class: "complete" }, "Document Complete"))), h("div", { class: "buttons" }, h("div", { class: "flex-fill" }), h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e) }), h("verdocs-button", { label: "OK", size: "small", onClick: e => this.handleSubmit(e) })), this.showingSenderDialog && (h("verdocs-template-sender-dialog", { value: this.sender, onCancel: () => (this.showingSenderDialog = false), onNext: e => {
         this.showingSenderDialog = false;
-        this.sender = e.detail.sender;
+        this.sender = e.detail;
       } }))));
   }
   static get style() { return verdocsTemplateRecipientsCss; }

package/dist/components/verdocs-template-recipients2.js.map

@@ -1 +1 @@
-{"file":"verdocs-template-recipients2.js","mappings":"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","names":[],"sources":["./src/components/elements/verdocs-template-recipients/verdocs-template-recipients.scss?tag=verdocs-template-recipients","./src/components/elements/verdocs-template-recipients/verdocs-template-recipients.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-template-recipients {\n  font-family: $verdocs-primary-font;\n\n  form {\n    background-color: $verdocs-grey-4;\n    padding: 12px;\n    display: flex;\n    flex-direction: column;\n\n    h5 {\n      font-size: 16px;\n      font-weight: bold;\n      color: $verdocs-deep-blue;\n      margin: 0 0 10px 0;\n    }\n\n    .participants {\n      position: relative;\n    }\n\n    // To avoid the need to compute things like heights, this layer is simply displayed \"on top\" of all the level rows. Its\n    // background obscures the horizontal lines.\n    .left-line {\n      top: 32px;\n      left: 20px;\n      z-index: 1;\n      width: 12px;\n      bottom: 30px;\n      position: absolute;\n      background: #ffffff;\n      border-left: 3px dotted #9b9b9b;\n    }\n\n    .row {\n      display: flex;\n      column-gap: 0;\n      margin-left: 50px;\n      position: relative;\n      flex-direction: row;\n      padding: 6px 0 4px 0;\n\n      .icon {\n        top: 14px;\n        z-index: 2;\n        left: -40px;\n        width: 24px;\n        height: 24px;\n        position: absolute;\n        background: #ffffff;\n\n        svg {\n          fill: #00000089;\n        }\n      }\n\n      .sender {\n        height: 30px;\n        display: flex;\n        font-size: 14px;\n        padding: 0 5px 0 15px;\n        line-height: 30px;\n        flex-direction: row;\n        border-radius: 30px;\n        margin: 0 0 0 14px;\n        background-color: $verdocs-grey-3;\n        border: 1px solid $verdocs-grey-2;\n      }\n\n      .complete {\n        height: 30px;\n        display: flex;\n        font-size: 14px;\n        padding: 0 15px;\n        line-height: 30px;\n        flex-direction: row;\n        border-radius: 30px;\n        margin: 0 0 0 14px;\n        background-color: $verdocs-grey-3;\n        border: 1px solid $verdocs-grey-2;\n      }\n\n      .label {\n        font-weight: bold;\n        margin-right: 6px;\n        color: $verdocs-grey-1;\n      }\n\n      .settings-button {\n        margin: 4px 0 0 9px;\n        cursor: pointer;\n      }\n\n      .recipient {\n        height: 30px;\n        display: flex;\n        font-size: 14px;\n        line-height: 30px;\n        border-radius: 30px;\n        flex-direction: row;\n        padding: 0 5px 0 15px;\n        border: 1px solid $verdocs-grey-2;\n      }\n\n      .dropzone {\n        width: 14px;\n        height: 30px;\n        //visibility: hidden;\n\n        svg {\n          fill: #cccccc;\n        }\n\n        &.visible {\n          margin: 0 7px;\n          //visibility: visible;\n        }\n\n        &.active {\n          width: 100px;\n          border-radius: 30px;\n          background: #654dcb7f;\n          border: 1px dashed #654dcb;\n\n          svg {\n          }\n        }\n      }\n    }\n\n    label {\n      display: block;\n      font-size: 14px;\n      font-weight: 500;\n      margin: 0 0 4px 0;\n      color: $verdocs-bg-4;\n    }\n\n    input {\n      border: none;\n      font-size: 18px;\n      padding: 3px 6px 3px 0;\n      background: transparent;\n      border-bottom: 1px solid $verdocs-dark-blue;\n\n      &:focus {\n        outline: none;\n      }\n    }\n  }\n\n  .buttons {\n    display: flex;\n    column-gap: 8px;\n    margin-top: 16px;\n    flex-direction: row;\n\n    .flex-fill {\n      flex: 1;\n    }\n  }\n\n  ::placeholder {\n    color: $verdocs-bg-2;\n  }\n}\n","import interact from 'interactjs';\nimport {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {IRole, TemplateSenderTypes} from '@verdocs/js-sdk/Templates/Types';\nimport {Component, h, Event, EventEmitter, Fragment, Prop, State} from '@stencil/core';\nimport {getRoleIndex} from '../../../utils/utils';\n\nconst arrayMove = (arr: any[], fromIndex: number, toIndex: number) => {\n  const newArr = [...arr];\n  newArr.splice(toIndex, 0, newArr.splice(fromIndex, 1)[0]);\n  return newArr;\n};\n\ntype TAnnotatedRole = IRole & {order: number};\n\nconst senderLabels: Record<TemplateSenderTypes, string> = {\n  [TemplateSenderTypes.EVERYONE]: 'Everyone',\n  [TemplateSenderTypes.EVERYONE_AS_CREATOR]: 'Everyone as Me',\n  [TemplateSenderTypes.ORGANIZATION_MEMBER]: 'Organization member',\n  [TemplateSenderTypes.ORGANIZATION_MEMBER_AS_CREATOR]: 'Organization Member as Me',\n  [TemplateSenderTypes.CREATOR]: 'Me',\n};\n\nconst settingsIcon =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" width=\"20\"><path d=\"m8.021 17.917-.313-2.5q-.27-.125-.625-.334-.354-.208-.625-.395l-2.312.979-1.979-3.438 1.979-1.5q-.021-.167-.031-.364-.011-.198-.011-.365 0-.146.011-.344.01-.198.031-.385l-1.979-1.5 1.979-3.417 2.312.958q.271-.187.615-.385t.635-.344l.313-2.5h3.958l.313 2.5q.312.167.625.344.312.177.604.385l2.333-.958 1.979 3.417-1.979 1.521q.021.187.021.364V10q0 .146-.01.333-.011.188-.011.396l1.958 1.5-1.979 3.438-2.312-.979q-.292.208-.615.395-.323.188-.614.334l-.313 2.5Zm1.937-5.355q1.063 0 1.813-.75t.75-1.812q0-1.062-.75-1.812t-1.813-.75q-1.041 0-1.802.75-.76.75-.76 1.812t.76 1.812q.761.75 1.802.75Zm0-1.333q-.5 0-.864-.364-.365-.365-.365-.865t.365-.865q.364-.364.864-.364t.865.364q.365.365.365.865t-.365.865q-.365.364-.865.364ZM10.021 10Zm-.854 6.583h1.666l.25-2.187q.605-.167 1.136-.49.531-.323 1.031-.802l2.021.875.854-1.375-1.792-1.354q.105-.333.136-.635.031-.303.031-.615 0-.292-.031-.573-.031-.281-.115-.635l1.792-1.396-.834-1.375-2.062.875q-.438-.438-1.021-.781-.583-.344-1.125-.49l-.271-2.208H9.167l-.271 2.208q-.584.146-1.125.458-.542.313-1.042.792l-2.021-.854-.833 1.375 1.75 1.354q-.083.333-.125.646-.042.312-.042.604t.042.594q.042.302.125.635l-1.75 1.375.833 1.375 2.021-.854q.479.458 1.021.771.542.312 1.146.479Z\"/></svg>';\n\nconst startIcon =\n  '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" tabindex=\"-1\"><path d=\"M2 12C2 6.48 6.48 2 12 2s10 4.48 10 10-4.48 10-10 10S2 17.52 2 12zm10 6c3.31 0 6-2.69 6-6s-2.69-6-6-6-6 2.69-6 6 2.69 6 6 6z\"></path></svg>';\n\nconst stepIcon =\n  '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" tabindex=\"-1\"><path d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z\"></path></svg>';\n\nconst doneIcon =\n  '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" tabindex=\"-1\"><path d=\"m18 7-1.41-1.41-6.34 6.34 1.41 1.41L18 7zm4.24-1.41L11.66 16.17 7.48 12l-1.41 1.41L11.66 19l12-12-1.42-1.41zM.41 13.41 6 19l1.41-1.41L1.83 12 .41 13.41z\"></path></svg>';\n\nexport interface IContactSearchEvent {\n  // The text the user has entered in the search field\n  query: string;\n}\n\nexport interface IContactSelectEvent {\n  full_name: string;\n  email: string;\n  phone: string;\n  message: string;\n  delegator: boolean;\n}\n\nexport interface IEmailContact {\n  // Optional but recommended. An internal identifier used to identify the contact in the calling system.\n  id?: any;\n\n  // The user's avatar. If not set, a placeholder will be shown. To hide avatars entirely, use CSS to set\n  // `verdocs-contact-picker .avatar { display: none; }`\n  avatar?: string;\n\n  // The recipient's name, as it should be displayed to the user.\n  name: string;\n\n  // The email address for the contact.\n  email: string;\n\n  // An optional phone number for the contact. This number must be able SMS messages. If both email and phone are provided,\n  // notifications will be sent to both locations.\n  phone?: string;\n\n  [key: string]: any;\n}\n\nexport interface IPhoneContact {\n  // Optional but recommended. An internal identifier used to identify the contact in the calling system.\n  id?: any;\n\n  // The user's avatar. If not set, a placeholder will be shown. To hide avatars entirely, use CSS to set\n  // `verdocs-contact-picker .avatar { display: none; }`\n  avatar?: string;\n\n  // The recipient's name, as it should be displayed to the user.\n  name: string;\n\n  // The email address for the contact.\n  email?: string;\n\n  // An optional phone number for the contact. This number must be able SMS messages. If both email and phone are provided,\n  // notifications will be sent to both locations.\n  phone: string;\n\n  [key: string]: any;\n}\n\n/**\n * Displays a contact picker suitable for filling out Recipient objects when sending Documents.\n *\n * This picker can also be integrated with a backend to provide contact list / suggestion / address-book style behavior. As the\n * user interacts with the component, the text entered in the name field is sent back to the parent via the `searchContacts` event.\n * The parent can use that text as a query string to call a backend to obtain appropriate contacts to show. This list may also be\n * hard-coded ahead of time to provide the user with smart suggestions on initial display, such as \"Recently Used\" contacts, or\n * to always display the user's own contact record.\n */\n@Component({\n  tag: 'verdocs-template-recipients',\n  styleUrl: 'verdocs-template-recipients.scss',\n  shadow: false,\n})\nexport class VerdocsTemplateRecipients {\n  /**\n   * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n   */\n  @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n  /**\n   * The role that this contact will be assigned to.\n   */\n  @Prop() templateRole: IRole | null = null;\n\n  /**\n   * If set, suggestions will be displayed in a drop-down list to the user. It is recommended that the number\n   * of suggestions be limited to the 5 best matching records.\n   */\n  @Prop() contactSuggestions: (IEmailContact | IPhoneContact)[] = [];\n\n  /**\n   * Event fired when the user enters text in the search field. The calling application may use this to update\n   * the `contactSuggestions` property.\n   */\n  @Event({composed: true}) searchContacts: EventEmitter<IContactSearchEvent>;\n\n  /**\n   * Event fired when the user cancels the dialog.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\n\n  /**\n   * Event fired when the user completes the step.\n   */\n  @Event({composed: true}) settingsUpdated: EventEmitter;\n\n  /**\n   * Event fired when the user changes the type.\n   */\n  @Event({composed: true}) contactSelected: EventEmitter<IContactSelectEvent>;\n\n  @State() name: string;\n  @State() email: string;\n  @State() phone: string;\n  @State() message: string;\n  @State() showSuggestions: boolean = false;\n  @State() showMessage: boolean = false;\n  @State() delegator: boolean = false;\n  @State() sender: TemplateSenderTypes = TemplateSenderTypes.CREATOR;\n  @State() showingSenderDialog = false;\n  @State() orderedRoles: TAnnotatedRole[] = [];\n\n  sequences: number[] = [];\n  rolesAtSequence: Record<number, TAnnotatedRole[]> = {};\n\n  componentWillLoad() {\n    if (this.templateRole) {\n      this.name = this.templateRole.full_name || '';\n      this.email = this.templateRole.email || '';\n      this.phone = this.templateRole.phone || '';\n      this.delegator = this.templateRole.delegator || false;\n      this.message = this.templateRole.message || '';\n      this.showMessage = this.message !== '';\n    }\n\n    this.orderedRoles = [\n      {\n        order: 0,\n        template_id: '951016b0-c5ef-450d-b628-9a0c5b84b163',\n        name: 'Seller 1',\n        full_name: '',\n        email: '',\n        type: 'signer',\n        sequence: 1,\n        fields: [],\n        delegator: false,\n        phone: '',\n      },\n      {\n        order: 1,\n        template_id: '951016b0-c5ef-450d-b628-9a0c5b84b163',\n        name: 'Seller 2',\n        full_name: '',\n        email: '',\n        type: 'signer',\n        sequence: 1,\n        fields: [],\n        delegator: false,\n        phone: '',\n      },\n      {\n        order: 2,\n        template_id: '951016b0-c5ef-450d-b628-9a0c5b84b163',\n        name: 'Buyer 1',\n        full_name: '',\n        email: '',\n        type: 'signer',\n        sequence: 2,\n        fields: [],\n        delegator: false,\n        phone: '',\n      },\n      {\n        order: 3,\n        template_id: '951016b0-c5ef-450d-b628-9a0c5b84b163',\n        name: 'Buyer 2',\n        full_name: '',\n        email: '',\n        type: 'signer',\n        sequence: 2,\n        fields: [],\n        delegator: false,\n        phone: '',\n      },\n    ];\n\n    this.computeRolesBySequence();\n  }\n\n  componentDidRender() {\n    interact.dynamicDrop(true);\n    interact('.recipient').draggable({\n      listeners: {\n        start(event) {\n          console.log('drag start', event.type, event.target);\n        },\n        move(event) {\n          const oldX = +(event.target.getAttribute('posX') || 0);\n          const oldY = +(event.target.getAttribute('posY') || 0);\n          const newX = event.dx + oldX;\n          const newY = event.dy + oldY;\n          event.target.setAttribute('posX', newX);\n          event.target.setAttribute('posy', newY);\n          event.target.style.transform = `translate(${newX}px, ${newY}px)`;\n        },\n        end(event) {\n          console.log('end', event);\n          event.target.setAttribute('posX', 0);\n          event.target.setAttribute('posy', 0);\n          event.target.style.transform = `translate(0px, 0px)`;\n        },\n      },\n    });\n\n    interact('.dropzone').dropzone({\n      overlap: 0.05,\n      ondrop: event => {\n        event.target.classList.remove('active');\n\n        console.log(event.relatedTarget.id + ' was dropped into ' + event.target.id);\n\n        const roleName = event.relatedTarget.dataset.rolename;\n        const targetOrder = +event.target.dataset.order;\n        const targetSequence = +event.target.dataset.sequence;\n        // const roleIndex = this.orderedRoles.findIndex(role => role.name === roleToMove);\n\n        const roleIndex = this.orderedRoles.findIndex(role => role.name === roleName);\n        if (roleIndex !== -1) {\n          console.log('Will move', {roleName, targetOrder, targetSequence, roleIndex});\n          const role = this.orderedRoles[roleIndex];\n          role.sequence = targetSequence;\n\n          console.log('before', JSON.parse(JSON.stringify(this.orderedRoles)));\n          this.orderedRoles = arrayMove(this.orderedRoles, roleIndex, targetOrder);\n          this.orderedRoles.forEach((role, index) => {\n            role.order = index;\n          });\n          console.log('after', JSON.parse(JSON.stringify(this.orderedRoles)));\n          this.computeRolesBySequence();\n        }\n      },\n      ondropactivate: e => {\n        // console.log('drop activated');\n        e.target.classList.add('visible');\n      },\n      ondropdeactivate: e => {\n        e.target.classList.remove('visible');\n      },\n      ondragenter: e => {\n        // console.log('drag enter', e);\n        e.target.classList.add('active');\n      },\n      ondragleave: e => {\n        // console.log('drag leave', e);\n        e.target.classList.remove('active');\n      },\n    });\n  }\n\n  computeRolesBySequence() {\n    const rolesAtSequence: Record<number, TAnnotatedRole[]> = {};\n\n    this.orderedRoles.forEach(role => {\n      rolesAtSequence[role.sequence] ||= [];\n      rolesAtSequence[role.sequence].push(role);\n    });\n\n    this.rolesAtSequence = rolesAtSequence;\n\n    console.log('ras', this.rolesAtSequence);\n    this.sequences = Object.keys(rolesAtSequence).map(levelStr => +levelStr);\n    this.sequences.sort((a, b) => a - b);\n  }\n\n  handleCancel(e) {\n    e.stopPropagation();\n    this.showSuggestions = false;\n    this.cancel?.emit();\n  }\n\n  handleSubmit(e) {\n    e.stopPropagation();\n\n    this.showSuggestions = false;\n    this.contactSelected?.emit({\n      full_name: this.name,\n      email: this.email,\n      phone: this.phone,\n      message: this.message,\n      delegator: this.delegator,\n    });\n\n    this.settingsUpdated?.emit({});\n  }\n\n  render() {\n    console.log('ordered roles', JSON.parse(JSON.stringify(this.orderedRoles)));\n    const roleNames = this.orderedRoles.map(role => role.name) || [];\n    let beforeOrder = 0;\n\n    return (\n      <form onSubmit={e => e.preventDefault()} onClick={e => e.stopPropagation()} autocomplete=\"off\">\n        <h5>Participant Order</h5>\n\n        <div class=\"participants\">\n          <div class=\"left-line\" />\n          <div class=\"row\">\n            <div class=\"icon\" innerHTML={startIcon} />\n            <div class=\"sender\">\n              <span class=\"label\">Sender:</span> {senderLabels[this.sender]}{' '}\n              <div class=\"settings-button\" innerHTML={settingsIcon} onClick={() => (this.showingSenderDialog = true)} aria-role=\"button\" />\n            </div>\n          </div>\n\n          {this.sequences.map(sequence => (\n            <div class=\"row\">\n              <div class=\"icon\" innerHTML={stepIcon} />\n              <div class=\"dropzone\" data-order={beforeOrder} data-sequence={sequence} />\n              {this.rolesAtSequence[sequence].map(role => {\n                beforeOrder = role.order;\n                return (\n                  <Fragment>\n                    <div class=\"recipient\" style={{backgroundColor: getRGBA(getRoleIndex(roleNames, role.name))}} data-rolename={role.name}>\n                      {role.name} <div class=\"settings-button\" innerHTML={settingsIcon} onClick={() => (this.showingSenderDialog = true)} aria-role=\"button\" />\n                    </div>\n                    <div class=\"dropzone\" data-order={beforeOrder} data-sequence={sequence} />\n                  </Fragment>\n                );\n              })}\n            </div>\n          ))}\n\n          <div class=\"row\">\n            <div class=\"icon\" innerHTML={doneIcon} />\n            <div class=\"complete\">Document Complete</div>\n          </div>\n        </div>\n\n        <div class=\"buttons\">\n          <div class=\"flex-fill\" />\n\n          <verdocs-button variant=\"outline\" label=\"Cancel\" size=\"small\" onPress={e => this.handleCancel(e)} />\n          <verdocs-button label=\"OK\" size=\"small\" onPress={e => this.handleSubmit(e)} />\n        </div>\n\n        {/* We do it this way instead of setting open so the widget resets each time it's displayed, in case the user opens/changes/cancels */}\n        {this.showingSenderDialog && (\n          <verdocs-template-sender-dialog\n            open={true}\n            value={this.sender}\n            onCancel={() => (this.showingSenderDialog = false)}\n            onDone={e => {\n              this.showingSenderDialog = false;\n              this.sender = e.detail.sender;\n            }}\n          />\n        )}\n      </form>\n    );\n  }\n}\n"],"version":3}
+{"file":"verdocs-template-recipients2.js","mappings":"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","names":[],"sources":["./src/components/elements/verdocs-template-recipients/verdocs-template-recipients.scss?tag=verdocs-template-recipients","./src/components/elements/verdocs-template-recipients/verdocs-template-recipients.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-template-recipients {\n  font-family: $verdocs-primary-font;\n\n  form {\n    background-color: $verdocs-grey-4;\n    padding: 12px;\n    display: flex;\n    flex-direction: column;\n\n    h5 {\n      font-size: 16px;\n      font-weight: bold;\n      color: $verdocs-deep-blue;\n      margin: 0 0 10px 0;\n    }\n\n    .participants {\n      position: relative;\n    }\n\n    // To avoid the need to compute things like heights, this layer is simply displayed \"on top\" of all the level rows. Its\n    // background obscures the horizontal lines.\n    .left-line {\n      top: 32px;\n      left: 20px;\n      z-index: 1;\n      width: 12px;\n      bottom: 30px;\n      position: absolute;\n      background: #ffffff;\n      border-left: 3px dotted #9b9b9b;\n    }\n\n    .row {\n      display: flex;\n      column-gap: 0;\n      margin-left: 50px;\n      position: relative;\n      flex-direction: row;\n      padding: 6px 0 4px 0;\n\n      .icon {\n        top: 14px;\n        z-index: 2;\n        left: -40px;\n        width: 24px;\n        height: 24px;\n        position: absolute;\n        background: #ffffff;\n\n        svg {\n          fill: #00000089;\n        }\n      }\n\n      .sender {\n        height: 30px;\n        display: flex;\n        font-size: 14px;\n        padding: 0 5px 0 15px;\n        line-height: 30px;\n        flex-direction: row;\n        border-radius: 30px;\n        margin: 0 0 0 14px;\n        background-color: $verdocs-grey-3;\n        border: 1px solid $verdocs-grey-2;\n      }\n\n      .complete {\n        height: 30px;\n        display: flex;\n        font-size: 14px;\n        padding: 0 15px;\n        line-height: 30px;\n        flex-direction: row;\n        border-radius: 30px;\n        margin: 0 0 0 14px;\n        background-color: $verdocs-grey-3;\n        border: 1px solid $verdocs-grey-2;\n      }\n\n      .label {\n        font-weight: bold;\n        margin-right: 6px;\n        color: $verdocs-grey-1;\n      }\n\n      .settings-button {\n        margin: 4px 0 0 9px;\n        cursor: pointer;\n      }\n\n      .recipient {\n        height: 30px;\n        display: flex;\n        font-size: 14px;\n        line-height: 30px;\n        border-radius: 30px;\n        flex-direction: row;\n        padding: 0 5px 0 15px;\n        border: 1px solid $verdocs-grey-2;\n      }\n\n      .dropzone {\n        width: 14px;\n        height: 30px;\n        //visibility: hidden;\n\n        svg {\n          fill: #cccccc;\n        }\n\n        &.visible {\n          margin: 0 7px;\n          //visibility: visible;\n        }\n\n        &.active {\n          width: 100px;\n          border-radius: 30px;\n          background: #654dcb7f;\n          border: 1px dashed #654dcb;\n\n          svg {\n          }\n        }\n      }\n    }\n\n    label {\n      display: block;\n      font-size: 14px;\n      font-weight: 500;\n      margin: 0 0 4px 0;\n      color: $verdocs-bg-4;\n    }\n\n    input {\n      border: none;\n      font-size: 18px;\n      padding: 3px 6px 3px 0;\n      background: transparent;\n      border-bottom: 1px solid $verdocs-dark-blue;\n\n      &:focus {\n        outline: none;\n      }\n    }\n  }\n\n  .buttons {\n    display: flex;\n    column-gap: 8px;\n    margin-top: 16px;\n    flex-direction: row;\n\n    .flex-fill {\n      flex: 1;\n    }\n  }\n\n  ::placeholder {\n    color: $verdocs-bg-2;\n  }\n}\n","import interact from 'interactjs';\nimport {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {IRole, TemplateSenderTypes} from '@verdocs/js-sdk/Templates/Types';\nimport {Component, h, Event, EventEmitter, Fragment, Prop, State} from '@stencil/core';\nimport {getRoleIndex} from '../../../utils/utils';\n\nconst arrayMove = (arr: any[], fromIndex: number, toIndex: number) => {\n  const newArr = [...arr];\n  newArr.splice(toIndex, 0, newArr.splice(fromIndex, 1)[0]);\n  return newArr;\n};\n\ntype TAnnotatedRole = IRole & {order: number};\n\nconst senderLabels: Record<TemplateSenderTypes, string> = {\n  [TemplateSenderTypes.EVERYONE]: 'Everyone',\n  [TemplateSenderTypes.EVERYONE_AS_CREATOR]: 'Everyone as Me',\n  [TemplateSenderTypes.ORGANIZATION_MEMBER]: 'Organization member',\n  [TemplateSenderTypes.ORGANIZATION_MEMBER_AS_CREATOR]: 'Organization Member as Me',\n  [TemplateSenderTypes.CREATOR]: 'Me',\n};\n\nconst settingsIcon =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" width=\"20\"><path d=\"m8.021 17.917-.313-2.5q-.27-.125-.625-.334-.354-.208-.625-.395l-2.312.979-1.979-3.438 1.979-1.5q-.021-.167-.031-.364-.011-.198-.011-.365 0-.146.011-.344.01-.198.031-.385l-1.979-1.5 1.979-3.417 2.312.958q.271-.187.615-.385t.635-.344l.313-2.5h3.958l.313 2.5q.312.167.625.344.312.177.604.385l2.333-.958 1.979 3.417-1.979 1.521q.021.187.021.364V10q0 .146-.01.333-.011.188-.011.396l1.958 1.5-1.979 3.438-2.312-.979q-.292.208-.615.395-.323.188-.614.334l-.313 2.5Zm1.937-5.355q1.063 0 1.813-.75t.75-1.812q0-1.062-.75-1.812t-1.813-.75q-1.041 0-1.802.75-.76.75-.76 1.812t.76 1.812q.761.75 1.802.75Zm0-1.333q-.5 0-.864-.364-.365-.365-.365-.865t.365-.865q.364-.364.864-.364t.865.364q.365.365.365.865t-.365.865q-.365.364-.865.364ZM10.021 10Zm-.854 6.583h1.666l.25-2.187q.605-.167 1.136-.49.531-.323 1.031-.802l2.021.875.854-1.375-1.792-1.354q.105-.333.136-.635.031-.303.031-.615 0-.292-.031-.573-.031-.281-.115-.635l1.792-1.396-.834-1.375-2.062.875q-.438-.438-1.021-.781-.583-.344-1.125-.49l-.271-2.208H9.167l-.271 2.208q-.584.146-1.125.458-.542.313-1.042.792l-2.021-.854-.833 1.375 1.75 1.354q-.083.333-.125.646-.042.312-.042.604t.042.594q.042.302.125.635l-1.75 1.375.833 1.375 2.021-.854q.479.458 1.021.771.542.312 1.146.479Z\"/></svg>';\n\nconst startIcon =\n  '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" tabindex=\"-1\"><path d=\"M2 12C2 6.48 6.48 2 12 2s10 4.48 10 10-4.48 10-10 10S2 17.52 2 12zm10 6c3.31 0 6-2.69 6-6s-2.69-6-6-6-6 2.69-6 6 2.69 6 6 6z\"></path></svg>';\n\nconst stepIcon =\n  '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" tabindex=\"-1\"><path d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z\"></path></svg>';\n\nconst doneIcon =\n  '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" tabindex=\"-1\"><path d=\"m18 7-1.41-1.41-6.34 6.34 1.41 1.41L18 7zm4.24-1.41L11.66 16.17 7.48 12l-1.41 1.41L11.66 19l12-12-1.42-1.41zM.41 13.41 6 19l1.41-1.41L1.83 12 .41 13.41z\"></path></svg>';\n\nexport interface IContactSearchEvent {\n  // The text the user has entered in the search field\n  query: string;\n}\n\nexport interface IContactSelectEvent {\n  full_name: string;\n  email: string;\n  phone: string;\n  message: string;\n  delegator: boolean;\n}\n\nexport interface IEmailContact {\n  // Optional but recommended. An internal identifier used to identify the contact in the calling system.\n  id?: any;\n\n  // The user's avatar. If not set, a placeholder will be shown. To hide avatars entirely, use CSS to set\n  // `verdocs-contact-picker .avatar { display: none; }`\n  avatar?: string;\n\n  // The recipient's name, as it should be displayed to the user.\n  name: string;\n\n  // The email address for the contact.\n  email: string;\n\n  // An optional phone number for the contact. This number must be able SMS messages. If both email and phone are provided,\n  // notifications will be sent to both locations.\n  phone?: string;\n\n  [key: string]: any;\n}\n\nexport interface IPhoneContact {\n  // Optional but recommended. An internal identifier used to identify the contact in the calling system.\n  id?: any;\n\n  // The user's avatar. If not set, a placeholder will be shown. To hide avatars entirely, use CSS to set\n  // `verdocs-contact-picker .avatar { display: none; }`\n  avatar?: string;\n\n  // The recipient's name, as it should be displayed to the user.\n  name: string;\n\n  // The email address for the contact.\n  email?: string;\n\n  // An optional phone number for the contact. This number must be able SMS messages. If both email and phone are provided,\n  // notifications will be sent to both locations.\n  phone: string;\n\n  [key: string]: any;\n}\n\n/**\n * Displays a contact picker suitable for filling out Recipient objects when sending Documents.\n *\n * This picker can also be integrated with a backend to provide contact list / suggestion / address-book style behavior. As the\n * user interacts with the component, the text entered in the name field is sent back to the parent via the `searchContacts` event.\n * The parent can use that text as a query string to call a backend to obtain appropriate contacts to show. This list may also be\n * hard-coded ahead of time to provide the user with smart suggestions on initial display, such as \"Recently Used\" contacts, or\n * to always display the user's own contact record.\n */\n@Component({\n  tag: 'verdocs-template-recipients',\n  styleUrl: 'verdocs-template-recipients.scss',\n  shadow: false,\n})\nexport class VerdocsTemplateRecipients {\n  /**\n   * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n   */\n  @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n  /**\n   * The role that this contact will be assigned to.\n   */\n  @Prop() templateRole: IRole | null = null;\n\n  /**\n   * If set, suggestions will be displayed in a drop-down list to the user. It is recommended that the number\n   * of suggestions be limited to the 5 best matching records.\n   */\n  @Prop() contactSuggestions: (IEmailContact | IPhoneContact)[] = [];\n\n  /**\n   * Event fired when the user enters text in the search field. The calling application may use this to update\n   * the `contactSuggestions` property.\n   */\n  @Event({composed: true}) searchContacts: EventEmitter<IContactSearchEvent>;\n\n  /**\n   * Event fired when the user cancels the dialog.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\n\n  /**\n   * Event fired when the user selects a contact.\n   */\n  @Event({composed: true}) next: EventEmitter<IContactSelectEvent>;\n\n  @State() name: string;\n  @State() email: string;\n  @State() phone: string;\n  @State() message: string;\n  @State() showSuggestions: boolean = false;\n  @State() showMessage: boolean = false;\n  @State() delegator: boolean = false;\n  @State() sender: TemplateSenderTypes = TemplateSenderTypes.CREATOR;\n  @State() showingSenderDialog = false;\n  @State() orderedRoles: TAnnotatedRole[] = [];\n\n  sequences: number[] = [];\n  rolesAtSequence: Record<number, TAnnotatedRole[]> = {};\n\n  componentWillLoad() {\n    if (this.templateRole) {\n      this.name = this.templateRole.full_name || '';\n      this.email = this.templateRole.email || '';\n      this.phone = this.templateRole.phone || '';\n      this.delegator = this.templateRole.delegator || false;\n      this.message = this.templateRole.message || '';\n      this.showMessage = this.message !== '';\n    }\n\n    this.orderedRoles = [\n      {\n        order: 0,\n        template_id: '951016b0-c5ef-450d-b628-9a0c5b84b163',\n        name: 'Seller 1',\n        full_name: '',\n        email: '',\n        type: 'signer',\n        sequence: 1,\n        fields: [],\n        delegator: false,\n        phone: '',\n      },\n      {\n        order: 1,\n        template_id: '951016b0-c5ef-450d-b628-9a0c5b84b163',\n        name: 'Seller 2',\n        full_name: '',\n        email: '',\n        type: 'signer',\n        sequence: 1,\n        fields: [],\n        delegator: false,\n        phone: '',\n      },\n      {\n        order: 2,\n        template_id: '951016b0-c5ef-450d-b628-9a0c5b84b163',\n        name: 'Buyer 1',\n        full_name: '',\n        email: '',\n        type: 'signer',\n        sequence: 2,\n        fields: [],\n        delegator: false,\n        phone: '',\n      },\n      {\n        order: 3,\n        template_id: '951016b0-c5ef-450d-b628-9a0c5b84b163',\n        name: 'Buyer 2',\n        full_name: '',\n        email: '',\n        type: 'signer',\n        sequence: 2,\n        fields: [],\n        delegator: false,\n        phone: '',\n      },\n    ];\n\n    this.computeRolesBySequence();\n  }\n\n  componentDidRender() {\n    interact.dynamicDrop(true);\n    interact('.recipient').draggable({\n      listeners: {\n        start(event) {\n          console.log('drag start', event.type, event.target);\n        },\n        move(event) {\n          const oldX = +(event.target.getAttribute('posX') || 0);\n          const oldY = +(event.target.getAttribute('posY') || 0);\n          const newX = event.dx + oldX;\n          const newY = event.dy + oldY;\n          event.target.setAttribute('posX', newX);\n          event.target.setAttribute('posy', newY);\n          event.target.style.transform = `translate(${newX}px, ${newY}px)`;\n        },\n        end(event) {\n          console.log('end', event);\n          event.target.setAttribute('posX', 0);\n          event.target.setAttribute('posy', 0);\n          event.target.style.transform = `translate(0px, 0px)`;\n        },\n      },\n    });\n\n    interact('.dropzone').dropzone({\n      overlap: 0.05,\n      ondrop: event => {\n        event.target.classList.remove('active');\n\n        console.log(event.relatedTarget.id + ' was dropped into ' + event.target.id);\n\n        const roleName = event.relatedTarget.dataset.rolename;\n        const targetOrder = +event.target.dataset.order;\n        const targetSequence = +event.target.dataset.sequence;\n        // const roleIndex = this.orderedRoles.findIndex(role => role.name === roleToMove);\n\n        const roleIndex = this.orderedRoles.findIndex(role => role.name === roleName);\n        if (roleIndex !== -1) {\n          console.log('Will move', {roleName, targetOrder, targetSequence, roleIndex});\n          const role = this.orderedRoles[roleIndex];\n          role.sequence = targetSequence;\n\n          console.log('before', JSON.parse(JSON.stringify(this.orderedRoles)));\n          this.orderedRoles = arrayMove(this.orderedRoles, roleIndex, targetOrder);\n          this.orderedRoles.forEach((role, index) => {\n            role.order = index;\n          });\n          console.log('after', JSON.parse(JSON.stringify(this.orderedRoles)));\n          this.computeRolesBySequence();\n        }\n      },\n      ondropactivate: e => {\n        // console.log('drop activated');\n        e.target.classList.add('visible');\n      },\n      ondropdeactivate: e => {\n        e.target.classList.remove('visible');\n      },\n      ondragenter: e => {\n        // console.log('drag enter', e);\n        e.target.classList.add('active');\n      },\n      ondragleave: e => {\n        // console.log('drag leave', e);\n        e.target.classList.remove('active');\n      },\n    });\n  }\n\n  computeRolesBySequence() {\n    const rolesAtSequence: Record<number, TAnnotatedRole[]> = {};\n\n    this.orderedRoles.forEach(role => {\n      rolesAtSequence[role.sequence] ||= [];\n      rolesAtSequence[role.sequence].push(role);\n    });\n\n    this.rolesAtSequence = rolesAtSequence;\n\n    console.log('ras', this.rolesAtSequence);\n    this.sequences = Object.keys(rolesAtSequence).map(levelStr => +levelStr);\n    this.sequences.sort((a, b) => a - b);\n  }\n\n  handleCancel(e) {\n    e.stopPropagation();\n    this.showSuggestions = false;\n    this.cancel?.emit();\n  }\n\n  handleSubmit(e) {\n    e.stopPropagation();\n\n    this.showSuggestions = false;\n    this.next?.emit({\n      full_name: this.name,\n      email: this.email,\n      phone: this.phone,\n      message: this.message,\n      delegator: this.delegator,\n    });\n  }\n\n  render() {\n    console.log('ordered roles', JSON.parse(JSON.stringify(this.orderedRoles)));\n    const roleNames = this.orderedRoles.map(role => role.name) || [];\n    let beforeOrder = 0;\n\n    return (\n      <form onSubmit={e => e.preventDefault()} onClick={e => e.stopPropagation()} autocomplete=\"off\">\n        <h5>Participant Order</h5>\n\n        <div class=\"participants\">\n          <div class=\"left-line\" />\n          <div class=\"row\">\n            <div class=\"icon\" innerHTML={startIcon} />\n            <div class=\"sender\">\n              <span class=\"label\">Sender:</span> {senderLabels[this.sender]}{' '}\n              <div class=\"settings-button\" innerHTML={settingsIcon} onClick={() => (this.showingSenderDialog = true)} aria-role=\"button\" />\n            </div>\n          </div>\n\n          {this.sequences.map(sequence => (\n            <div class=\"row\">\n              <div class=\"icon\" innerHTML={stepIcon} />\n              <div class=\"dropzone\" data-order={beforeOrder} data-sequence={sequence} />\n              {this.rolesAtSequence[sequence].map(role => {\n                beforeOrder = role.order;\n                return (\n                  <Fragment>\n                    <div class=\"recipient\" style={{backgroundColor: getRGBA(getRoleIndex(roleNames, role.name))}} data-rolename={role.name}>\n                      {role.name} <div class=\"settings-button\" innerHTML={settingsIcon} onClick={() => (this.showingSenderDialog = true)} aria-role=\"button\" />\n                    </div>\n                    <div class=\"dropzone\" data-order={beforeOrder} data-sequence={sequence} />\n                  </Fragment>\n                );\n              })}\n            </div>\n          ))}\n\n          <div class=\"row\">\n            <div class=\"icon\" innerHTML={doneIcon} />\n            <div class=\"complete\">Document Complete</div>\n          </div>\n        </div>\n\n        <div class=\"buttons\">\n          <div class=\"flex-fill\" />\n\n          <verdocs-button variant=\"outline\" label=\"Cancel\" size=\"small\" onClick={e => this.handleCancel(e)} />\n          <verdocs-button label=\"OK\" size=\"small\" onClick={e => this.handleSubmit(e)} />\n        </div>\n\n        {/* We do it this way instead of setting open so the widget resets each time it's displayed, in case the user opens/changes/cancels */}\n        {this.showingSenderDialog && (\n          <verdocs-template-sender-dialog\n            value={this.sender}\n            onCancel={() => (this.showingSenderDialog = false)}\n            onNext={e => {\n              this.showingSenderDialog = false;\n              this.sender = e.detail;\n            }}\n          />\n        )}\n      </form>\n    );\n  }\n}\n"],"version":3}

package/dist/components/verdocs-template-sender-dialog2.js

@@ -4,16 +4,15 @@ import { d as defineCustomElement$3 } from './verdocs-button2.js';
 import { d as defineCustomElement$2 } from './verdocs-help-icon2.js';
 import { d as defineCustomElement$1 } from './verdocs-radio-button2.js';
 
-const verdocsTemplateSenderDialogCss = "verdocs-template-sender-dialog{font-family:\"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-template-sender-dialog div{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-template-sender-dialog .background-overlay{position:absolute;z-index:10000;top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background:#0000007f}verdocs-template-sender-dialog .dialog{width:340px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;border-radius:4px;overflow:hidden;background:#ffffff;padding:16px;-webkit-box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4);box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4)}verdocs-template-sender-dialog .heading{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;font-size:20px;font-weight:500}verdocs-template-sender-dialog .buttons{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end}verdocs-template-sender-dialog .buttons verdocs-button{margin-left:16px}verdocs-template-sender-dialog .options{row-gap:10px}verdocs-template-sender-dialog .options .option{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}verdocs-template-sender-dialog .options .option .description{margin-left:10px}verdocs-template-sender-dialog .options .option .description .name{display:inline-block;vertical-align:top;margin-top:4px;margin-right:4px}";
+const verdocsTemplateSenderDialogCss = "verdocs-template-sender-dialog{font-family:\"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-template-sender-dialog div{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-template-sender-dialog .background-overlay{position:absolute;z-index:10000;top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background:#0000007f}verdocs-template-sender-dialog .dialog{width:340px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;border-radius:4px;overflow:hidden;background:#ffffff;padding:16px;-webkit-box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4);box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4)}verdocs-template-sender-dialog .heading{display:-ms-flexbox;display:flex;font-size:20px;font-weight:500;-ms-flex-direction:row;flex-direction:row}verdocs-template-sender-dialog .buttons{display:-ms-flexbox;display:flex;margin-top:10px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end}verdocs-template-sender-dialog .buttons verdocs-button{margin-left:16px}verdocs-template-sender-dialog .options{row-gap:10px}verdocs-template-sender-dialog .options .option{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}verdocs-template-sender-dialog .options .option .description{margin-left:10px}verdocs-template-sender-dialog .options .option .description .name{display:inline-block;vertical-align:top;margin-top:4px;margin-right:4px}";
 
 const VerdocsTemplateSenderDialog = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.cancel = createEvent(this, "cancel", 7);
-    this.done = createEvent(this, "done", 7);
+    this.next = createEvent(this, "next", 7);
     this.value = TemplateSenderTypes.EVERYONE;
-    this.open = false;
     this.newValue = TemplateSenderTypes.EVERYONE;
   }
   componentWillLoad() {
@@ -21,7 +20,6 @@ const VerdocsTemplateSenderDialog = /*@__PURE__*/ proxyCustomElement(class exten
   }
   handleCancel() {
     this.cancel.emit();
-    this.open = false;
   }
   // We need a separate event handler for clicking the background because it can receive events "through" other child components
   handleDismiss(e) {
@@ -31,19 +29,17 @@ const VerdocsTemplateSenderDialog = /*@__PURE__*/ proxyCustomElement(class exten
     }
   }
   handleDone() {
-    this.done.emit({ sender: this.newValue });
-    this.open = false;
+    this.next.emit(this.newValue);
   }
   handleSelectSetting(value) {
     this.newValue = value;
   }
   render() {
-    return (h(Host, { style: { display: this.open ? 'block' : 'none' } }, h("div", { class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { class: "dialog" }, h("div", { class: "options" }, h("div", { class: "option" }, h("verdocs-radio-button", { checked: this.value === TemplateSenderTypes.EVERYONE, name: "template-sender", value: TemplateSenderTypes.EVERYONE, onSelected: () => this.handleSelectSetting(TemplateSenderTypes.EVERYONE) }), h("div", { class: "description" }, h("div", { class: "name" }, "Anyone on the Web"), h("verdocs-help-icon", { text: "Anyone can use this template. (Make its visibility is set to to 'Public' or 'Shared'.)" }))), h("div", { class: "option" }, h("verdocs-radio-button", { checked: this.value === TemplateSenderTypes.EVERYONE_AS_CREATOR, name: "template-sender", value: TemplateSenderTypes.EVERYONE_AS_CREATOR, onSelected: () => this.handleSelectSetting(TemplateSenderTypes.EVERYONE_AS_CREATOR) }), h("div", { class: "description" }, h("div", { class: "name" }, "Anyone on the Web as me"), h("verdocs-help-icon", { text: "Anyone can use this template on my behalf. (Make sure its visibility is set to 'Public' or 'Shared'.)" }))), h("div", { class: "option" }, h("verdocs-radio-button", { checked: this.value === TemplateSenderTypes.ORGANIZATION_MEMBER, name: "template-sender", value: TemplateSenderTypes.ORGANIZATION_MEMBER, onSelected: () => this.handleSelectSetting(TemplateSenderTypes.ORGANIZATION_MEMBER) }), h("div", { class: "description" }, h("div", { class: "name" }, "Anyone in my organization"), h("verdocs-help-icon", { text: "Anyone in my organization can use this template. (Make sure its visibility is set to 'Shared')" }))), h("div", { class: "option" }, h("verdocs-radio-button", { checked: this.value === TemplateSenderTypes.ORGANIZATION_MEMBER_AS_CREATOR, name: "template-sender", value: TemplateSenderTypes.ORGANIZATION_MEMBER_AS_CREATOR, onSelected: () => this.handleSelectSetting(TemplateSenderTypes.ORGANIZATION_MEMBER_AS_CREATOR) }), h("div", { class: "description" }, h("div", { class: "name" }, "Anyone in my organization as me"), h("verdocs-help-icon", { text: "Anyone in my organization can use this template on my behalf. (Make sure its visibility is set to to 'Shared'.)" }))), h("div", { class: "option" }, h("verdocs-radio-button", { checked: this.value === TemplateSenderTypes.CREATOR, name: "template-sender", value: TemplateSenderTypes.CREATOR, onSelected: () => this.handleSelectSetting(TemplateSenderTypes.CREATOR) }), h("div", { class: "description" }, h("div", { class: "name" }, "Me"), h("verdocs-help-icon", { text: "Only I can use this template." })))), h("div", { class: "buttons" }, h("verdocs-button", { label: "Cancel", variant: "outline", onPress: () => this.handleCancel() }), h("verdocs-button", { label: "Done", onPress: () => this.handleDone() }))))));
+    return (h(Host, null, h("div", { class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { class: "dialog" }, h("div", { class: "options" }, h("div", { class: "option" }, h("verdocs-radio-button", { name: "template-sender", value: TemplateSenderTypes.EVERYONE, checked: this.value === TemplateSenderTypes.EVERYONE, onInput: () => this.handleSelectSetting(TemplateSenderTypes.EVERYONE) }), h("div", { class: "description" }, h("div", { class: "name" }, "Anyone on the Web"), h("verdocs-help-icon", { text: "Anyone can use this template. (Make its visibility is set to to 'Public' or 'Shared'.)" }))), h("div", { class: "option" }, h("verdocs-radio-button", { name: "template-sender", value: TemplateSenderTypes.EVERYONE_AS_CREATOR, checked: this.value === TemplateSenderTypes.EVERYONE_AS_CREATOR, onInput: () => this.handleSelectSetting(TemplateSenderTypes.EVERYONE_AS_CREATOR) }), h("div", { class: "description" }, h("div", { class: "name" }, "Anyone on the Web as me"), h("verdocs-help-icon", { text: "Anyone can use this template on my behalf. (Make sure its visibility is set to 'Public' or 'Shared'.)" }))), h("div", { class: "option" }, h("verdocs-radio-button", { name: "template-sender", value: TemplateSenderTypes.ORGANIZATION_MEMBER, checked: this.value === TemplateSenderTypes.ORGANIZATION_MEMBER, onInput: () => this.handleSelectSetting(TemplateSenderTypes.ORGANIZATION_MEMBER) }), h("div", { class: "description" }, h("div", { class: "name" }, "Anyone in my organization"), h("verdocs-help-icon", { text: "Anyone in my organization can use this template. (Make sure its visibility is set to 'Shared')" }))), h("div", { class: "option" }, h("verdocs-radio-button", { name: "template-sender", value: TemplateSenderTypes.ORGANIZATION_MEMBER_AS_CREATOR, checked: this.value === TemplateSenderTypes.ORGANIZATION_MEMBER_AS_CREATOR, onInput: () => this.handleSelectSetting(TemplateSenderTypes.ORGANIZATION_MEMBER_AS_CREATOR) }), h("div", { class: "description" }, h("div", { class: "name" }, "Anyone in my organization as me"), h("verdocs-help-icon", { text: "Anyone in my organization can use this template on my behalf. (Make sure its visibility is set to to 'Shared'.)" }))), h("div", { class: "option" }, h("verdocs-radio-button", { name: "template-sender", value: TemplateSenderTypes.CREATOR, checked: this.value === TemplateSenderTypes.CREATOR, onInput: () => this.handleSelectSetting(TemplateSenderTypes.CREATOR) }), h("div", { class: "description" }, h("div", { class: "name" }, "Me"), h("verdocs-help-icon", { text: "Only I can use this template." })))), h("div", { class: "buttons" }, h("verdocs-button", { label: "Cancel", variant: "outline", onClick: () => this.handleCancel() }), h("verdocs-button", { label: "Done", onClick: () => this.handleDone() }))))));
   }
   static get style() { return verdocsTemplateSenderDialogCss; }
 }, [0, "verdocs-template-sender-dialog", {
     "value": [1],
-    "open": [4],
     "newValue": [32]
   }]);
 function defineCustomElement() {

package/dist/components/verdocs-template-sender-dialog2.js.map

@@ -1 +1 @@
-{"file":"verdocs-template-sender-dialog2.js","mappings":";;;;;;AAAA,MAAM,8BAA8B,GAAG,qiDAAqiD;;MCU/jD,2BAA2B;;;;;;iBAID,mBAAmB,CAAC,QAAQ;gBAKzC,KAAK;oBAYY,mBAAmB,CAAC,QAAQ;;EAErE,iBAAiB;IACf,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC;GAC5B;EAED,YAAY;IACV,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;IACnB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;GACnB;;EAGD,aAAa,CAAC,CAAM;IAClB,IAAI,CAAC,CAAC,MAAM,CAAC,SAAS,KAAK,oBAAoB,EAAE;MAC/C,CAAC,CAAC,cAAc,EAAE,CAAC;MACnB,IAAI,CAAC,YAAY,EAAE,CAAC;KACrB;GACF;EAED,UAAU;IACR,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,EAAC,MAAM,EAAE,IAAI,CAAC,QAAQ,EAAC,CAAC,CAAC;IACxC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;GACnB;EAED,mBAAmB,CAAC,KAA0B;IAC5C,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;GACvB;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,EAAC,OAAO,EAAE,IAAI,CAAC,IAAI,GAAG,OAAO,GAAG,MAAM,EAAC,IAClD,WAAK,KAAK,EAAC,oBAAoB,EAAC,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IACjE,WAAK,KAAK,EAAC,QAAQ,IACjB,WAAK,KAAK,EAAC,SAAS,IAClB,WAAK,KAAK,EAAC,QAAQ,IACjB,4BACE,OAAO,EAAE,IAAI,CAAC,KAAK,KAAK,mBAAmB,CAAC,QAAQ,EACpD,IAAI,EAAC,iBAAiB,EACtB,KAAK,EAAE,mBAAmB,CAAC,QAAQ,EACnC,UAAU,EAAE,MAAM,IAAI,CAAC,mBAAmB,CAAC,mBAAmB,CAAC,QAAQ,CAAC,GACxE,EACF,WAAK,KAAK,EAAC,aAAa,IACtB,WAAK,KAAK,EAAC,MAAM,wBAAwB,EACzC,yBAAmB,IAAI,EAAC,wFAAwF,GAAG,CAC/G,CACF,EACN,WAAK,KAAK,EAAC,QAAQ,IACjB,4BACE,OAAO,EAAE,IAAI,CAAC,KAAK,KAAK,mBAAmB,CAAC,mBAAmB,EAC/D,IAAI,EAAC,iBAAiB,EACtB,KAAK,EAAE,mBAAmB,CAAC,mBAAmB,EAC9C,UAAU,EAAE,MAAM,IAAI,CAAC,mBAAmB,CAAC,mBAAmB,CAAC,mBAAmB,CAAC,GACnF,EACF,WAAK,KAAK,EAAC,aAAa,IACtB,WAAK,KAAK,EAAC,MAAM,8BAA8B,EAC/C,yBAAmB,IAAI,EAAC,uGAAuG,GAAG,CAC9H,CACF,EACN,WAAK,KAAK,EAAC,QAAQ,IACjB,4BACE,OAAO,EAAE,IAAI,CAAC,KAAK,KAAK,mBAAmB,CAAC,mBAAmB,EAC/D,IAAI,EAAC,iBAAiB,EACtB,KAAK,EAAE,mBAAmB,CAAC,mBAAmB,EAC9C,UAAU,EAAE,MAAM,IAAI,CAAC,mBAAmB,CAAC,mBAAmB,CAAC,mBAAmB,CAAC,GACnF,EACF,WAAK,KAAK,EAAC,aAAa,IACtB,WAAK,KAAK,EAAC,MAAM,gCAAgC,EACjD,yBAAmB,IAAI,EAAC,gGAAgG,GAAG,CACvH,CACF,EACN,WAAK,KAAK,EAAC,QAAQ,IACjB,4BACE,OAAO,EAAE,IAAI,CAAC,KAAK,KAAK,mBAAmB,CAAC,8BAA8B,EAC1E,IAAI,EAAC,iBAAiB,EACtB,KAAK,EAAE,mBAAmB,CAAC,8BAA8B,EACzD,UAAU,EAAE,MAAM,IAAI,CAAC,mBAAmB,CAAC,mBAAmB,CAAC,8BAA8B,CAAC,GAC9F,EACF,WAAK,KAAK,EAAC,aAAa,IACtB,WAAK,KAAK,EAAC,MAAM,sCAAsC,EACvD,yBAAmB,IAAI,EAAC,iHAAiH,GAAG,CACxI,CACF,EACN,WAAK,KAAK,EAAC,QAAQ,IACjB,4BACE,OAAO,EAAE,IAAI,CAAC,KAAK,KAAK,mBAAmB,CAAC,OAAO,EACnD,IAAI,EAAC,iBAAiB,EACtB,KAAK,EAAE,mBAAmB,CAAC,OAAO,EAClC,UAAU,EAAE,MAAM,IAAI,CAAC,mBAAmB,CAAC,mBAAmB,CAAC,OAAO,CAAC,GACvE,EACF,WAAK,KAAK,EAAC,aAAa,IACtB,WAAK,KAAK,EAAC,MAAM,SAAS,EAC1B,yBAAmB,IAAI,EAAC,+BAA+B,GAAG,CACtD,CACF,CACF,EAEN,WAAK,KAAK,EAAC,SAAS,IAClB,sBAAgB,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,GAAI,EACvF,sBAAgB,KAAK,EAAC,MAAM,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,GAAI,CAC7D,CACF,CACF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/dialogs/verdocs-template-sender-dialog/verdocs-template-sender-dialog.scss?tag=verdocs-template-sender-dialog","./src/components/dialogs/verdocs-template-sender-dialog/verdocs-template-sender-dialog.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-template-sender-dialog {\n  font-family: $primary-font;\n  box-sizing: border-box;\n\n  div {\n    box-sizing: border-box;\n  }\n\n  .background-overlay {\n    position: absolute;\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\n  .dialog {\n    width: 340px;\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    flex-direction: row;\n    font-size: 20px;\n    font-weight: 500;\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  .options {\n    row-gap: 10px;\n\n    .option {\n      display: flex;\n      flex-direction: row;\n\n      .description {\n        margin-left: 10px;\n\n        .name {\n          display: inline-block;\n          vertical-align: top;\n          margin-top: 4px;\n          margin-right: 4px;\n        }\n      }\n    }\n  }\n}\n","import {TemplateSenderTypes} from '@verdocs/js-sdk/Templates/Types';\nimport {Component, Prop, h, Event, EventEmitter, Host, State} from '@stencil/core';\n\n/**\n * Display a dialog that allows a template sender to be selected.\n */\n@Component({\n  tag: 'verdocs-template-sender-dialog',\n  styleUrl: 'verdocs-template-sender-dialog.scss',\n})\nexport class VerdocsTemplateSenderDialog {\n  /**\n   * Whether the dialog is currently being displayed. This allows it to be added to the DOM before being displayed.\n   */\n  @Prop() value: TemplateSenderTypes = TemplateSenderTypes.EVERYONE;\n\n  /**\n   * Whether the dialog is currently being displayed. This allows it to be added to the DOM before being displayed.\n   */\n  @Prop() open: boolean = false;\n\n  /**\n   * Event fired when the dialog is closed. The event data will contain the closure reason.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\n\n  /**\n   * Event fired when the dialog is closed. The event data will contain the closure reason.\n   */\n  @Event({composed: true}) done: EventEmitter<{sender: TemplateSenderTypes}>;\n\n  @State() newValue: TemplateSenderTypes = TemplateSenderTypes.EVERYONE;\n\n  componentWillLoad() {\n    this.newValue = this.value;\n  }\n\n  handleCancel() {\n    this.cancel.emit();\n    this.open = false;\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.className === 'background-overlay') {\n      e.preventDefault();\n      this.handleCancel();\n    }\n  }\n\n  handleDone() {\n    this.done.emit({sender: this.newValue});\n    this.open = false;\n  }\n\n  handleSelectSetting(value: TemplateSenderTypes) {\n    this.newValue = value;\n  }\n\n  render() {\n    return (\n      <Host style={{display: this.open ? 'block' : 'none'}}>\n        <div class=\"background-overlay\" onClick={e => this.handleDismiss(e)}>\n          <div class=\"dialog\">\n            <div class=\"options\">\n              <div class=\"option\">\n                <verdocs-radio-button\n                  checked={this.value === TemplateSenderTypes.EVERYONE}\n                  name=\"template-sender\"\n                  value={TemplateSenderTypes.EVERYONE}\n                  onSelected={() => this.handleSelectSetting(TemplateSenderTypes.EVERYONE)}\n                />\n                <div class=\"description\">\n                  <div class=\"name\">Anyone on the Web</div>\n                  <verdocs-help-icon text=\"Anyone can use this template. (Make its visibility is set to to 'Public' or 'Shared'.)\" />\n                </div>\n              </div>\n              <div class=\"option\">\n                <verdocs-radio-button\n                  checked={this.value === TemplateSenderTypes.EVERYONE_AS_CREATOR}\n                  name=\"template-sender\"\n                  value={TemplateSenderTypes.EVERYONE_AS_CREATOR}\n                  onSelected={() => this.handleSelectSetting(TemplateSenderTypes.EVERYONE_AS_CREATOR)}\n                />\n                <div class=\"description\">\n                  <div class=\"name\">Anyone on the Web as me</div>\n                  <verdocs-help-icon text=\"Anyone can use this template on my behalf. (Make sure its visibility is set to 'Public' or 'Shared'.)\" />\n                </div>\n              </div>\n              <div class=\"option\">\n                <verdocs-radio-button\n                  checked={this.value === TemplateSenderTypes.ORGANIZATION_MEMBER}\n                  name=\"template-sender\"\n                  value={TemplateSenderTypes.ORGANIZATION_MEMBER}\n                  onSelected={() => this.handleSelectSetting(TemplateSenderTypes.ORGANIZATION_MEMBER)}\n                />\n                <div class=\"description\">\n                  <div class=\"name\">Anyone in my organization</div>\n                  <verdocs-help-icon text=\"Anyone in my organization can use this template. (Make sure its visibility is set to 'Shared')\" />\n                </div>\n              </div>\n              <div class=\"option\">\n                <verdocs-radio-button\n                  checked={this.value === TemplateSenderTypes.ORGANIZATION_MEMBER_AS_CREATOR}\n                  name=\"template-sender\"\n                  value={TemplateSenderTypes.ORGANIZATION_MEMBER_AS_CREATOR}\n                  onSelected={() => this.handleSelectSetting(TemplateSenderTypes.ORGANIZATION_MEMBER_AS_CREATOR)}\n                />\n                <div class=\"description\">\n                  <div class=\"name\">Anyone in my organization as me</div>\n                  <verdocs-help-icon text=\"Anyone in my organization can use this template on my behalf. (Make sure its visibility is set to to 'Shared'.)\" />\n                </div>\n              </div>\n              <div class=\"option\">\n                <verdocs-radio-button\n                  checked={this.value === TemplateSenderTypes.CREATOR}\n                  name=\"template-sender\"\n                  value={TemplateSenderTypes.CREATOR}\n                  onSelected={() => this.handleSelectSetting(TemplateSenderTypes.CREATOR)}\n                />\n                <div class=\"description\">\n                  <div class=\"name\">Me</div>\n                  <verdocs-help-icon text=\"Only I can use this template.\" />\n                </div>\n              </div>\n            </div>\n\n            <div class=\"buttons\">\n              <verdocs-button label=\"Cancel\" variant=\"outline\" onPress={() => this.handleCancel()} />\n              <verdocs-button label=\"Done\" onPress={() => this.handleDone()} />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"verdocs-template-sender-dialog2.js","mappings":"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","names":[],"sources":["./src/components/dialogs/verdocs-template-sender-dialog/verdocs-template-sender-dialog.scss?tag=verdocs-template-sender-dialog","./src/components/dialogs/verdocs-template-sender-dialog/verdocs-template-sender-dialog.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-template-sender-dialog {\n  font-family: $primary-font;\n  box-sizing: border-box;\n\n  div {\n    box-sizing: border-box;\n  }\n\n  .background-overlay {\n    position: absolute;\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\n  .dialog {\n    width: 340px;\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    margin-top: 10px;\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  .options {\n    row-gap: 10px;\n\n    .option {\n      display: flex;\n      flex-direction: row;\n\n      .description {\n        margin-left: 10px;\n\n        .name {\n          display: inline-block;\n          vertical-align: top;\n          margin-top: 4px;\n          margin-right: 4px;\n        }\n      }\n    }\n  }\n}\n","import {TemplateSenderTypes} from '@verdocs/js-sdk/Templates/Types';\nimport {Component, Prop, h, Event, EventEmitter, Host, State} from '@stencil/core';\n\n/**\n * Display a dialog that allows a template sender to be selected.\n */\n@Component({\n  tag: 'verdocs-template-sender-dialog',\n  styleUrl: 'verdocs-template-sender-dialog.scss',\n})\nexport class VerdocsTemplateSenderDialog {\n  /**\n   * Whether the dialog is currently being displayed. This allows it to be added to the DOM before being displayed.\n   */\n  @Prop() value: TemplateSenderTypes = TemplateSenderTypes.EVERYONE;\n\n  /**\n   * Event fired when the dialog is closed. The event data will contain the closure reason.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\n\n  /**\n   * Event fired when the dialog is closed. The event data will contain the selected value.\n   */\n  @Event({composed: true}) next: EventEmitter<TemplateSenderTypes>;\n\n  @State() newValue: TemplateSenderTypes = TemplateSenderTypes.EVERYONE;\n\n  componentWillLoad() {\n    this.newValue = this.value;\n  }\n\n  handleCancel() {\n    this.cancel.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.className === 'background-overlay') {\n      e.preventDefault();\n      this.handleCancel();\n    }\n  }\n\n  handleDone() {\n    this.next.emit(this.newValue);\n  }\n\n  handleSelectSetting(value: TemplateSenderTypes) {\n    this.newValue = value;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"background-overlay\" onClick={e => this.handleDismiss(e)}>\n          <div class=\"dialog\">\n            <div class=\"options\">\n              <div class=\"option\">\n                <verdocs-radio-button\n                  name=\"template-sender\"\n                  value={TemplateSenderTypes.EVERYONE}\n                  checked={this.value === TemplateSenderTypes.EVERYONE}\n                  onInput={() => this.handleSelectSetting(TemplateSenderTypes.EVERYONE)}\n                />\n                <div class=\"description\">\n                  <div class=\"name\">Anyone on the Web</div>\n                  <verdocs-help-icon text=\"Anyone can use this template. (Make its visibility is set to to 'Public' or 'Shared'.)\" />\n                </div>\n              </div>\n              <div class=\"option\">\n                <verdocs-radio-button\n                  name=\"template-sender\"\n                  value={TemplateSenderTypes.EVERYONE_AS_CREATOR}\n                  checked={this.value === TemplateSenderTypes.EVERYONE_AS_CREATOR}\n                  onInput={() => this.handleSelectSetting(TemplateSenderTypes.EVERYONE_AS_CREATOR)}\n                />\n                <div class=\"description\">\n                  <div class=\"name\">Anyone on the Web as me</div>\n                  <verdocs-help-icon text=\"Anyone can use this template on my behalf. (Make sure its visibility is set to 'Public' or 'Shared'.)\" />\n                </div>\n              </div>\n              <div class=\"option\">\n                <verdocs-radio-button\n                  name=\"template-sender\"\n                  value={TemplateSenderTypes.ORGANIZATION_MEMBER}\n                  checked={this.value === TemplateSenderTypes.ORGANIZATION_MEMBER}\n                  onInput={() => this.handleSelectSetting(TemplateSenderTypes.ORGANIZATION_MEMBER)}\n                />\n                <div class=\"description\">\n                  <div class=\"name\">Anyone in my organization</div>\n                  <verdocs-help-icon text=\"Anyone in my organization can use this template. (Make sure its visibility is set to 'Shared')\" />\n                </div>\n              </div>\n              <div class=\"option\">\n                <verdocs-radio-button\n                  name=\"template-sender\"\n                  value={TemplateSenderTypes.ORGANIZATION_MEMBER_AS_CREATOR}\n                  checked={this.value === TemplateSenderTypes.ORGANIZATION_MEMBER_AS_CREATOR}\n                  onInput={() => this.handleSelectSetting(TemplateSenderTypes.ORGANIZATION_MEMBER_AS_CREATOR)}\n                />\n                <div class=\"description\">\n                  <div class=\"name\">Anyone in my organization as me</div>\n                  <verdocs-help-icon text=\"Anyone in my organization can use this template on my behalf. (Make sure its visibility is set to to 'Shared'.)\" />\n                </div>\n              </div>\n              <div class=\"option\">\n                <verdocs-radio-button\n                  name=\"template-sender\"\n                  value={TemplateSenderTypes.CREATOR}\n                  checked={this.value === TemplateSenderTypes.CREATOR}\n                  onInput={() => this.handleSelectSetting(TemplateSenderTypes.CREATOR)}\n                />\n                <div class=\"description\">\n                  <div class=\"name\">Me</div>\n                  <verdocs-help-icon text=\"Only I can use this template.\" />\n                </div>\n              </div>\n            </div>\n\n            <div class=\"buttons\">\n              <verdocs-button label=\"Cancel\" variant=\"outline\" onClick={() => this.handleCancel()} />\n              <verdocs-button label=\"Done\" onClick={() => this.handleDone()} />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/verdocs-text-input2.js

@@ -12,15 +12,7 @@ const VerdocsTextInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     this.autocomplete = '';
     this.type = 'text';
     this.disabled = false;
-    this._value = '';
   }
-  componentWillLoad() {
-    // this._value = this.value;
-  }
-  componentDidLoad() { }
-  // handleInput(e: any) {
-  //   this._value = e.target.value;
-  // }
   render() {
     return (h(Host, { class: "input-field" }, h("label", null, this.label ? h("div", { class: "input-label" }, this.label + ':') : h("div", null), h("input", { type: this.type, value: this.value, class: "input-element", "data-lpignore": "true", disabled: this.disabled, placeholder: this.placeholder, autoComplete: this.autocomplete }))));
   }
@@ -31,8 +23,7 @@ const VerdocsTextInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     "placeholder": [1],
     "autocomplete": [1],
     "type": [1],
-    "disabled": [4],
-    "_value": [32]
+    "disabled": [4]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {