@verdocs/web-sdk 1.9.3 → 1.9.4

package/dist/cjs/verdocs-web-sdk.cjs.js

@@ -15,7 +15,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["verdocs-build.cjs",[[0,"verdocs-build",{"endpoint":[16],"templateId":[1,"template-id"],"step":[32],"pdfUrl":[32],"template":[32]}]]],["verdocs-sign.cjs",[[0,"verdocs-sign",{"endpoint":[16],"documentId":[1,"document-id"],"roleId":[1,"role-id"],"inviteCode":[1,"invite-code"],"recipient":[32],"signerToken":[32],"pdfUrl":[32],"recipientIndex":[32],"document":[32],"fields":[32],"hasSignature":[32],"nextButtonLabel":[32],"focusedField":[32]}]]],["verdocs-field-initial.cjs",[[0,"verdocs-field-initial",{"field":[16],"recipient":[16],"disabled":[4],"initials":[1],"editable":[4],"moveable":[4],"roleindex":[2],"tempInitials":[32],"focusField":[64]}]]],["verdocs-auth.cjs",[[0,"verdocs-auth",{"endpoint":[16],"visible":[4],"logo":[1],"debug":[4],"isAuthenticated":[32],"displayMode":[32],"username":[32],"password":[32],"loggingIn":[32],"activeSession":[32],"loginError":[32]}]]],["verdocs-field-date.cjs",[[0,"verdocs-field-date",{"field":[16],"recipient":[16],"disabled":[4],"editable":[4],"moveable":[4],"roleindex":[2],"focused":[32],"containerId":[32],"focusField":[64]}]]],["verdocs-field-textarea.cjs",[[0,"verdocs-field-textarea",{"field":[16],"recipient":[16],"disabled":[4],"editable":[4],"moveable":[4],"roleindex":[2],"focused":[32],"focusField":[64]}]]],["verdocs-field-textbox.cjs",[[0,"verdocs-field-textbox",{"field":[16],"recipient":[16],"disabled":[4],"editable":[4],"moveable":[4],"roleindex":[2],"focused":[32],"focusField":[64]}]]],["verdocs-field-timestamp.cjs",[[0,"verdocs-field-timestamp",{"field":[16],"recipient":[16],"disabled":[4],"editable":[4],"moveable":[4],"roleindex":[2],"focused":[32],"focusField":[64]}]]],["verdocs-preview.cjs",[[0,"verdocs-preview",{"endpoint":[16],"templateId":[1,"template-id"],"pdfUrl":[32],"template":[32]}]]],["verdocs-search.cjs",[[0,"verdocs-search",{"endpoint":[16]}]]],["verdocs-contact-picker.cjs",[[0,"verdocs-contact-picker",{"endpoint":[16],"templateRole":[16],"contactSuggestions":[16],"name":[32],"email":[32],"phone":[32],"message":[32],"showSuggestions":[32],"showMessage":[32],"delegator":[32]}]]],["verdocs-send.cjs",[[0,"verdocs-send",{"endpoint":[16],"templateId":[1,"template-id"],"template":[32],"pdfUrl":[32],"containerId":[32],"rolesAtLevel":[32],"showPickerForId":[32],"sessionContacts":[32],"recipientsAssigned":[32]}]]],["verdocs-field-attachment.cjs",[[0,"verdocs-field-attachment",{"field":[16],"recipient":[16],"disabled":[4],"focusField":[64]}]]],["verdocs-kba-dialog.cjs",[[0,"verdocs-kba-dialog",{"step":[2],"steps":[2],"helptitle":[1],"helptext":[1],"mode":[1],"label":[1],"placeholder":[1],"choices":[16],"open":[4],"response":[32]}]]],["verdocs-field-dropdown.cjs",[[0,"verdocs-field-dropdown",{"field":[16],"recipient":[16],"disabled":[4],"focused":[32],"focusField":[64]}]]],["verdocs-field-payment.cjs",[[0,"verdocs-field-payment",{"field":[16],"recipient":[16],"disabled":[4],"fields":[16],"pageNum":[2,"page-num"],"roleName":[1,"role-name"],"fieldId":[1,"field-id"],"recipients":[8],"selectedRoleName":[1,"selected-role-name"],"pdfPages":[16],"currentSignature":[1,"current-signature"],"currentSignatureId":[1,"current-signature-id"],"currentInitial":[1,"current-initial"],"currentInitialId":[1,"current-initial-id"],"focused":[4],"signed":[4],"preparedMessage":[32],"signatureUrl":[32]}]]],["verdocs-organization-card.cjs",[[0,"verdocs-organization-card",{"organization":[16]}]]],["verdocs-search-tabs.cjs",[[0,"verdocs-search-tabs",{"selected":[32]}]]],["verdocs-status-indicator.cjs",[[0,"verdocs-status-indicator",{"size":[1],"theme":[1],"status":[1],"document":[16],"isOpen":[32],"recipientStatusIcons":[32],"containerId":[32]}]]],["verdocs-template-card.cjs",[[0,"verdocs-template-card",{"template":[16]}]]],["verdocs-template-tags.cjs",[[0,"verdocs-template-tags",{"tags":[16]}]]],["verdocs-toggle.cjs",[[0,"verdocs-toggle",{"options":[16],"theme":[1],"selectedOption":[32]}]]],["verdocs-initial-dialog.cjs",[[0,"verdocs-initial-dialog",{"initials":[1],"open":[4],"fontLoaded":[32],"enteredInitials":[32],"mode":[32]}]]],["verdocs-ok-dialog.cjs",[[0,"verdocs-ok-dialog",{"heading":[1],"message":[1],"open":[4],"cancel":[4]}]]],["verdocs-upload-dialog.cjs",[[0,"verdocs-upload-dialog",{"open":[4],"draggingOver":[32],"decodedFiles":[32]}]]],["verdocs-checkbox.cjs",[[0,"verdocs-checkbox",{"checked":[4],"name":[1],"value":[1],"disabled":[4]}]]],["verdocs-toggle-button.cjs",[[0,"verdocs-toggle-button",{"active":[4],"icon":[1],"label":[1],"size":[1],"_active":[32]}]]],["verdocs-dropdown_3.cjs",[[0,"verdocs-dropdown",{"options":[16],"open":[4],"isOpen":[32]}],[0,"verdocs-field-checkbox",{"field":[16],"recipient":[16],"option":[2],"disabled":[4]}],[0,"verdocs-field-radio-button",{"field":[16],"recipient":[16],"option":[2],"disabled":[4]}]]],["verdocs-quick-functions_3.cjs",[[0,"verdocs-quick-functions",{"endpoint":[16]}],[0,"verdocs-search-activity",{"endpoint":[16],"type":[1],"options":[8],"emptyMessage":[32],"authFailure":[32],"title":[32],"recent":[32],"saved":[32],"starred":[32]}],[0,"verdocs-search-box",{"endpoint":[16],"placeholder":[1],"type":[1],"query":[1],"grabsFocus":[4,"grabs-focus"],"focusField":[64]}]]],["verdocs-radio-button.cjs",[[0,"verdocs-radio-button",{"checked":[4],"name":[1],"value":[1],"disabled":[4]}]]],["verdocs-button.cjs",[[0,"verdocs-button",{"label":[1],"startIcon":[1,"start-icon"],"endIcon":[1,"end-icon"],"size":[1],"type":[1],"variant":[1],"disabled":[4]}]]],["verdocs-help-icon_2.cjs",[[0,"verdocs-template-sender-dialog",{"value":[1],"open":[4],"newValue":[32]}],[0,"verdocs-help-icon",{"text":[1],"containerId":[32]}]]],["verdocs-field-signature_3.cjs",[[0,"verdocs-field-signature",{"field":[16],"name":[1],"recipient":[16],"disabled":[4],"editable":[4],"moveable":[4],"roleindex":[2],"tempSignature":[32],"focusField":[64]}],[0,"verdocs-toolbar-icon",{"text":[1],"icon":[1],"containerId":[32]}],[0,"verdocs-signature-dialog",{"name":[1],"open":[4],"fontLoaded":[32],"enteredName":[32],"mode":[32]}]]],["verdocs-document-page_3.cjs",[[0,"verdocs-view",{"endpoint":[16],"rotation":[2],"pageLayers":[16],"source":[1],"loadProgress":[32],"numPages":[32]}],[0,"verdocs-document-page",{"pageNumber":[2,"page-number"],"virtualWidth":[2,"virtual-width"],"virtualHeight":[2,"virtual-height"],"layers":[16],"containerId":[32],"renderedWidth":[32],"renderedHeight":[32],"skipFirstNotification":[32]}],[0,"verdocs-loader"]]],["verdocs-button-panel_3.cjs",[[4,"verdocs-button-panel",{"icon":[1]}],[0,"verdocs-select-input",{"value":[1],"label":[1],"options":[16],"disabled":[4],"_value":[32]}],[0,"verdocs-text-input",{"value":[1],"label":[1],"placeholder":[1],"autocomplete":[1],"type":[1],"disabled":[4],"_value":[32]}]]],["verdocs-template-create_4.cjs",[[0,"verdocs-template-fields",{"endpoint":[16],"templateId":[1,"template-id"],"pdfUrl":[32],"template":[32]}],[0,"verdocs-template-properties",{"endpoint":[16],"templateRole":[16],"sendReminders":[32]}],[0,"verdocs-template-recipients",{"endpoint":[16],"templateRole":[16],"contactSuggestions":[16],"name":[32],"email":[32],"phone":[32],"message":[32],"showSuggestions":[32],"showMessage":[32],"delegator":[32],"sender":[32],"showingSenderDialog":[32],"orderedRoles":[32]}],[0,"verdocs-template-create",{"endpoint":[16],"file":[32]}]]]], options);
+  return index.bootstrapLazy([["verdocs-build.cjs",[[0,"verdocs-build",{"endpoint":[16],"templateId":[1,"template-id"],"step":[32],"pdfUrl":[32],"template":[32]}]]],["verdocs-sign.cjs",[[0,"verdocs-sign",{"endpoint":[16],"documentId":[1,"document-id"],"roleId":[1,"role-id"],"inviteCode":[1,"invite-code"],"recipient":[32],"signerToken":[32],"pdfUrl":[32],"recipientIndex":[32],"document":[32],"fields":[32],"hasSignature":[32],"nextButtonLabel":[32],"focusedField":[32]}]]],["verdocs-field-initial.cjs",[[0,"verdocs-field-initial",{"field":[16],"recipient":[16],"disabled":[4],"initials":[1],"editable":[4],"moveable":[4],"roleindex":[2],"tempInitials":[32],"focusField":[64]}]]],["verdocs-auth.cjs",[[0,"verdocs-auth",{"endpoint":[16],"visible":[4],"logo":[1],"debug":[4],"isAuthenticated":[32],"displayMode":[32],"username":[32],"password":[32],"loggingIn":[32],"activeSession":[32],"loginError":[32]}]]],["verdocs-field-date.cjs",[[0,"verdocs-field-date",{"field":[16],"recipient":[16],"disabled":[4],"editable":[4],"moveable":[4],"roleindex":[2],"focused":[32],"containerId":[32],"focusField":[64]}]]],["verdocs-field-textarea.cjs",[[0,"verdocs-field-textarea",{"field":[16],"recipient":[16],"disabled":[4],"editable":[4],"moveable":[4],"roleindex":[2],"focused":[32],"focusField":[64]}]]],["verdocs-field-textbox.cjs",[[0,"verdocs-field-textbox",{"field":[16],"recipient":[16],"disabled":[4],"editable":[4],"moveable":[4],"roleindex":[2],"focused":[32],"focusField":[64]}]]],["verdocs-field-timestamp.cjs",[[0,"verdocs-field-timestamp",{"field":[16],"recipient":[16],"disabled":[4],"editable":[4],"moveable":[4],"roleindex":[2],"focused":[32],"focusField":[64]}]]],["verdocs-preview.cjs",[[0,"verdocs-preview",{"endpoint":[16],"templateId":[1,"template-id"],"pdfUrl":[32],"template":[32]}]]],["verdocs-search.cjs",[[0,"verdocs-search",{"endpoint":[16]}]]],["verdocs-contact-picker.cjs",[[0,"verdocs-contact-picker",{"endpoint":[16],"templateRole":[16],"contactSuggestions":[16],"name":[32],"email":[32],"phone":[32],"message":[32],"showSuggestions":[32],"showMessage":[32],"delegator":[32]}]]],["verdocs-send.cjs",[[0,"verdocs-send",{"endpoint":[16],"templateId":[1,"template-id"],"template":[32],"pdfUrl":[32],"containerId":[32],"rolesAtLevel":[32],"showPickerForId":[32],"sessionContacts":[32],"recipientsAssigned":[32]}]]],["verdocs-field-attachment.cjs",[[0,"verdocs-field-attachment",{"field":[16],"recipient":[16],"disabled":[4],"focusField":[64]}]]],["verdocs-kba-dialog.cjs",[[0,"verdocs-kba-dialog",{"step":[2],"steps":[2],"helptitle":[1],"helptext":[1],"mode":[1],"label":[1],"placeholder":[1],"choices":[16],"open":[4],"response":[32]}]]],["verdocs-field-dropdown.cjs",[[0,"verdocs-field-dropdown",{"field":[16],"recipient":[16],"disabled":[4],"focused":[32],"focusField":[64]}]]],["verdocs-field-payment.cjs",[[0,"verdocs-field-payment",{"field":[16],"recipient":[16],"disabled":[4],"fields":[16],"pageNum":[2,"page-num"],"roleName":[1,"role-name"],"fieldId":[1,"field-id"],"recipients":[8],"selectedRoleName":[1,"selected-role-name"],"pdfPages":[16],"currentSignature":[1,"current-signature"],"currentSignatureId":[1,"current-signature-id"],"currentInitial":[1,"current-initial"],"currentInitialId":[1,"current-initial-id"],"focused":[4],"signed":[4],"preparedMessage":[32],"signatureUrl":[32]}]]],["verdocs-organization-card.cjs",[[0,"verdocs-organization-card",{"organization":[16]}]]],["verdocs-search-tabs.cjs",[[0,"verdocs-search-tabs",{"selected":[32]}]]],["verdocs-status-indicator.cjs",[[0,"verdocs-status-indicator",{"size":[1],"theme":[1],"status":[1],"document":[16],"isOpen":[32],"recipientStatusIcons":[32],"containerId":[32]}]]],["verdocs-template-card.cjs",[[0,"verdocs-template-card",{"template":[16]}]]],["verdocs-template-tags.cjs",[[0,"verdocs-template-tags",{"tags":[16]}]]],["verdocs-toggle.cjs",[[0,"verdocs-toggle",{"options":[16],"theme":[1],"selectedOption":[32]}]]],["verdocs-initial-dialog.cjs",[[0,"verdocs-initial-dialog",{"initials":[1],"open":[4],"fontLoaded":[32],"enteredInitials":[32],"mode":[32]}]]],["verdocs-ok-dialog.cjs",[[0,"verdocs-ok-dialog",{"heading":[1],"message":[1],"open":[4],"cancel":[4]}]]],["verdocs-upload-dialog.cjs",[[0,"verdocs-upload-dialog",{"open":[4],"draggingOver":[32],"decodedFiles":[32]}]]],["verdocs-checkbox.cjs",[[0,"verdocs-checkbox",{"checked":[4],"name":[1],"value":[1],"disabled":[4]}]]],["verdocs-toggle-button.cjs",[[0,"verdocs-toggle-button",{"active":[4],"icon":[1],"label":[1],"size":[1],"_active":[32]}]]],["verdocs-dropdown_3.cjs",[[0,"verdocs-dropdown",{"options":[16],"open":[4],"isOpen":[32]}],[0,"verdocs-field-checkbox",{"field":[16],"recipient":[16],"option":[2],"disabled":[4]}],[0,"verdocs-field-radio-button",{"field":[16],"recipient":[16],"option":[2],"disabled":[4]}]]],["verdocs-quick-functions_3.cjs",[[0,"verdocs-quick-functions",{"endpoint":[16]}],[0,"verdocs-search-activity",{"endpoint":[16],"type":[1],"options":[8],"emptyMessage":[32],"authFailure":[32],"title":[32],"recent":[32],"saved":[32],"starred":[32]}],[0,"verdocs-search-box",{"endpoint":[16],"placeholder":[1],"type":[1],"query":[1],"grabsFocus":[4,"grabs-focus"],"focusField":[64]}]]],["verdocs-radio-button.cjs",[[0,"verdocs-radio-button",{"checked":[4],"name":[1],"value":[1],"disabled":[4]}]]],["verdocs-button.cjs",[[0,"verdocs-button",{"label":[1],"startIcon":[1,"start-icon"],"endIcon":[1,"end-icon"],"size":[1],"type":[1],"variant":[1],"disabled":[4]}]]],["verdocs-help-icon_2.cjs",[[0,"verdocs-template-sender-dialog",{"value":[1],"open":[4],"newValue":[32]}],[0,"verdocs-help-icon",{"text":[1],"containerId":[32]}]]],["verdocs-field-signature_3.cjs",[[0,"verdocs-field-signature",{"field":[16],"name":[1],"recipient":[16],"disabled":[4],"editable":[4],"moveable":[4],"roleindex":[2],"tempSignature":[32],"focusField":[64]}],[0,"verdocs-toolbar-icon",{"text":[1],"icon":[1],"containerId":[32]}],[0,"verdocs-signature-dialog",{"name":[1],"open":[4],"fontLoaded":[32],"enteredName":[32],"mode":[32]}]]],["verdocs-document-page_3.cjs",[[0,"verdocs-view",{"endpoint":[16],"rotation":[2],"pageLayers":[16],"source":[1],"loadProgress":[32],"numPages":[32]}],[0,"verdocs-document-page",{"pageNumber":[2,"page-number"],"virtualWidth":[2,"virtual-width"],"virtualHeight":[2,"virtual-height"],"layers":[16],"containerId":[32],"renderedWidth":[32],"renderedHeight":[32],"skipFirstNotification":[32]}],[0,"verdocs-loader"]]],["verdocs-button-panel_3.cjs",[[4,"verdocs-button-panel",{"icon":[1]}],[0,"verdocs-select-input",{"value":[1],"label":[1],"options":[16],"disabled":[4],"_value":[32]}],[0,"verdocs-text-input",{"value":[1],"label":[1],"placeholder":[1],"autocomplete":[1],"type":[1],"disabled":[4],"_value":[32]}]]],["verdocs-template-create_4.cjs",[[0,"verdocs-template-fields",{"endpoint":[16],"templateId":[1,"template-id"],"pdfUrl":[32],"template":[32]}],[0,"verdocs-template-properties",{"endpoint":[16],"templateId":[1,"template-id"],"template":[32],"name":[32],"sendReminders":[32],"firstReminderDays":[32],"reminderDays":[32]}],[0,"verdocs-template-recipients",{"endpoint":[16],"templateRole":[16],"contactSuggestions":[16],"name":[32],"email":[32],"phone":[32],"message":[32],"showSuggestions":[32],"showMessage":[32],"delegator":[32],"sender":[32],"showingSenderDialog":[32],"orderedRoles":[32]}],[0,"verdocs-template-create",{"endpoint":[16],"file":[32]}]]]], options);
 });
 
 //# sourceMappingURL=verdocs-web-sdk.cjs.js.map

package/dist/collection/components/controls/verdocs-dropdown/verdocs-dropdown.js

@@ -18,7 +18,8 @@ export class VerdocsDropdown {
   componentDidLoad() {
     this.popper = createPopper(this.dropdownButton, this.dropdownMenu, { placement: 'bottom-start', modifiers: [{ name: 'offset', options: { offset: [0, 6] } }] });
   }
-  handleSelectOption(option) {
+  handleSelectOption(e, option) {
+    e.stopPropagation();
     this.isOpen = false;
     this.optionSelected.emit(option);
     this.hide();
@@ -44,7 +45,8 @@ export class VerdocsDropdown {
     }
     this.hide();
   }
-  toggleDropdown() {
+  toggleDropdown(e) {
+    e.stopPropagation();
     if (this.isOpen) {
       this.hide();
     }
@@ -64,7 +66,7 @@ export class VerdocsDropdown {
   }
   render() {
     var _a;
-    return (h(Host, { class: { storybook: !!(window === null || window === void 0 ? void 0 : window['STORYBOOK_ENV']), open: !!this.isOpen } }, h("button", { class: "arrow", innerHTML: SortDown, "aria-label": "Open Menu", onClick: () => this.toggleDropdown(), onBlur: e => this.handleHideDropdown(e), ref: el => (this.dropdownButton = el) }), h("div", { class: "items", "aria-hidden": !this.open, ref: el => (this.dropdownMenu = el) }, (_a = this.options) === null || _a === void 0 ? void 0 : _a.map(option => (h("button", { onClick: () => this.handleSelectOption(option), class: "option", disabled: option.disabled }, option.label))))));
+    return (h(Host, { class: { storybook: !!(window === null || window === void 0 ? void 0 : window['STORYBOOK_ENV']), open: !!this.isOpen } }, h("button", { class: "arrow", innerHTML: SortDown, "aria-label": "Open Menu", onClick: e => this.toggleDropdown(e), onBlur: e => this.handleHideDropdown(e), ref: el => (this.dropdownButton = el) }), h("div", { class: "items", "aria-hidden": !this.open, ref: el => (this.dropdownMenu = el) }, (_a = this.options) === null || _a === void 0 ? void 0 : _a.map(option => (h("button", { onClick: e => this.handleSelectOption(e, option), class: "option", disabled: option.disabled }, option.label))))));
   }
   static get is() { return "verdocs-dropdown"; }
   static get originalStyleUrls() {

package/dist/collection/components/controls/verdocs-dropdown/verdocs-dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"verdocs-dropdown.js","sourceRoot":"","sources":["../../../../src/components/controls/verdocs-dropdown/verdocs-dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,eAAe,CAAC;AACnC,OAAO,EAAC,YAAY,EAAW,MAAM,gBAAgB,CAAC;AACtD,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAe,MAAM,eAAe,CAAC;AAC7E,OAAO,QAAQ,MAAM,kBAAkB,CAAC;AASxC;;;GAGG;AAKH,MAAM,OAAO,eAAe;;mBAQO,EAAE;;;;EAkBnC,iBAAiB;IACf,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;EAC5B,CAAC;EAED,gBAAgB;IACd,IAAI,CAAC,MAAM,GAAG,YAAY,CAAC,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,YAAY,EAAE,EAAC,SAAS,EAAE,cAAc,EAAE,SAAS,EAAE,CAAC,EAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAC,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAC,EAAC,CAAC,EAAC,CAAC,CAAC;EAC5J,CAAC;EAED,kBAAkB,CAAC,MAAmB;IACpC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;IACpB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACjC,IAAI,CAAC,IAAI,EAAE,CAAC;EACd,CAAC;EAED,8CAA8C;EAC9C,8GAA8G;EAC9G,YAAY;;IACV,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACnB,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;IAChD,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;IAEjD,MAAA,IAAI,CAAC,MAAM,0CAAE,UAAU,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;MAClC,GAAG,OAAO;MACV,SAAS,EAAE,CAAC,GAAG,OAAO,CAAC,SAAS,EAAE,EAAC,IAAI,EAAE,gBAAgB,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;KAC3E,CAAC,CAAC,CAAC;IAEJ,MAAA,IAAI,CAAC,MAAM,0CAAE,MAAM,EAAE,CAAC;EACxB,CAAC;EAED,kBAAkB,CAAC,CAAM;;IACvB,IAAI,CAAA,MAAA,CAAC,aAAD,CAAC,uBAAD,CAAC,CAAE,MAAM,0CAAE,SAAS,MAAK,QAAQ,IAAI,CAAA,MAAA,CAAC,aAAD,CAAC,uBAAD,CAAC,CAAE,MAAM,0CAAE,SAAS,MAAK,OAAO,EAAE;MACzE,+FAA+F;MAC/F,OAAO;KACR;IAED,IAAI,CAAC,IAAI,EAAE,CAAC;EACd,CAAC;EAED,cAAc;IACZ,IAAI,IAAI,CAAC,MAAM,EAAE;MACf,IAAI,CAAC,IAAI,EAAE,CAAC;KACb;SAAM;MACL,IAAI,CAAC,YAAY,EAAE,CAAC;KACrB;EACH,CAAC;EAED,IAAI;;IACF,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;IACpB,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC;IAC/C,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IACtD,MAAA,IAAI,CAAC,MAAM,0CAAE,UAAU,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;MAClC,GAAG,OAAO;MACV,SAAS,EAAE,CAAC,GAAG,OAAO,CAAC,SAAS,EAAE,EAAC,IAAI,EAAE,gBAAgB,EAAE,OAAO,EAAE,KAAK,EAAC,CAAC;KAC5E,CAAC,CAAC,CAAC;EACN,CAAC;EAED,MAAM;;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAC,SAAS,EAAE,CAAC,CAAC,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,eAAe,CAAC,CAAA,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,EAAC;MACxE,cACE,KAAK,EAAC,OAAO,EACb,SAAS,EAAE,QAAQ,gBACR,WAAW,EACtB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,EACpC,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,EACvC,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,EAAuB,CAAC,GAC1D;MAEF,WAAK,KAAK,EAAC,OAAO,iBAAc,CAAC,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,EAAoB,CAAC,IAC9F,MAAA,IAAI,CAAC,OAAO,0CAAE,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAC3B,cAAQ,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,MAAM,CAAC,EAAE,KAAK,EAAC,QAAQ,EAAC,QAAQ,EAAE,MAAM,CAAC,QAAQ,IAC7F,MAAM,CAAC,KAAK,CACN,CACV,CAAC,CACE,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Host} from '@stencil/core';\nimport {createPopper, Instance} from '@popperjs/core';\nimport {Component, Prop, State, h, Event, EventEmitter} from '@stencil/core';\nimport SortDown from './down-arrow.svg';\n\nexport interface IMenuOption {\n  label: string;\n  id?: any;\n  faIcon?: any;\n  disabled?: boolean;\n}\n\n/**\n * Display a drop-down menu button. A menu of the specified options will be displayed when the button is pressed. The menu will be hidden\n * when the button is pressed again, or an option is selected.\n */\n@Component({\n  tag: 'verdocs-dropdown',\n  styleUrl: 'verdocs-dropdown.scss',\n})\nexport class VerdocsDropdown {\n  private dropdownButton?: HTMLButtonElement;\n  private dropdownMenu?: HTMLDivElement;\n  private popper?: Instance;\n\n  /**\n   * The menu options to display.\n   */\n  @Prop() options: IMenuOption[] = [];\n\n  /**\n   * If set, the component will be open by default. This is primarily intended to be used for testing.\n   */\n  @Prop() open: boolean;\n\n  /**\n   * If set, the component will be open by default.\n   */\n  @State() isOpen: boolean;\n\n  /**\n   * Event fired when a menu option is clicked.\n   * Web Component events need to be \"composed\" to cross the Shadow DOM and be received by parent frameworks.\n   */\n  @Event({composed: true}) optionSelected: EventEmitter<IMenuOption>;\n\n  componentWillLoad() {\n    this.isOpen = !!this.open;\n  }\n\n  componentDidLoad() {\n    this.popper = createPopper(this.dropdownButton, this.dropdownMenu, {placement: 'bottom-start', modifiers: [{name: 'offset', options: {offset: [0, 6]}}]});\n  }\n\n  handleSelectOption(option: IMenuOption) {\n    this.isOpen = false;\n    this.optionSelected.emit(option);\n    this.hide();\n  }\n\n  // See https://popper.js.org/docs/v2/tutorial/\n  // What we're doing here is clearing event listeners when they aren't needed, to increase performance in lists\n  showDropdown() {\n    this.isOpen = true;\n    this.dropdownMenu.setAttribute('data-show', '');\n    this.dropdownMenu.removeAttribute('aria-hidden');\n\n    this.popper?.setOptions(options => ({\n      ...options,\n      modifiers: [...options.modifiers, {name: 'eventListeners', enabled: true}],\n    }));\n\n    this.popper?.update();\n  }\n\n  handleHideDropdown(e: any) {\n    if (e?.target?.localName === 'button' && e?.target?.className === 'arrow') {\n      // This event is fired when a menu element is clicked because the button \"loses focus\" then too\n      return;\n    }\n\n    this.hide();\n  }\n\n  toggleDropdown() {\n    if (this.isOpen) {\n      this.hide();\n    } else {\n      this.showDropdown();\n    }\n  }\n\n  hide() {\n    this.isOpen = false;\n    this.dropdownMenu.removeAttribute('data-show');\n    this.dropdownMenu.setAttribute('aria-hidden', 'true');\n    this.popper?.setOptions(options => ({\n      ...options,\n      modifiers: [...options.modifiers, {name: 'eventListeners', enabled: false}],\n    }));\n  }\n\n  render() {\n    return (\n      <Host class={{storybook: !!window?.['STORYBOOK_ENV'], open: !!this.isOpen}}>\n        <button\n          class=\"arrow\"\n          innerHTML={SortDown}\n          aria-label=\"Open Menu\"\n          onClick={() => this.toggleDropdown()}\n          onBlur={e => this.handleHideDropdown(e)}\n          ref={el => (this.dropdownButton = el as HTMLButtonElement)}\n        />\n\n        <div class=\"items\" aria-hidden={!this.open} ref={el => (this.dropdownMenu = el as HTMLDivElement)}>\n          {this.options?.map(option => (\n            <button onClick={() => this.handleSelectOption(option)} class=\"option\" disabled={option.disabled}>\n              {option.label}\n            </button>\n          ))}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"verdocs-dropdown.js","sourceRoot":"","sources":["../../../../src/components/controls/verdocs-dropdown/verdocs-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Host} from '@stencil/core';\nimport {createPopper, Instance} from '@popperjs/core';\nimport {Component, Prop, State, h, Event, EventEmitter} from '@stencil/core';\nimport SortDown from './down-arrow.svg';\n\nexport interface IMenuOption {\n  label: string;\n  id?: any;\n  faIcon?: any;\n  disabled?: boolean;\n}\n\n/**\n * Display a drop-down menu button. A menu of the specified options will be displayed when the button is pressed. The menu will be hidden\n * when the button is pressed again, or an option is selected.\n */\n@Component({\n  tag: 'verdocs-dropdown',\n  styleUrl: 'verdocs-dropdown.scss',\n})\nexport class VerdocsDropdown {\n  private dropdownButton?: HTMLButtonElement;\n  private dropdownMenu?: HTMLDivElement;\n  private popper?: Instance;\n\n  /**\n   * The menu options to display.\n   */\n  @Prop() options: IMenuOption[] = [];\n\n  /**\n   * If set, the component will be open by default. This is primarily intended to be used for testing.\n   */\n  @Prop() open: boolean;\n\n  /**\n   * If set, the component will be open by default.\n   */\n  @State() isOpen: boolean;\n\n  /**\n   * Event fired when a menu option is clicked.\n   * Web Component events need to be \"composed\" to cross the Shadow DOM and be received by parent frameworks.\n   */\n  @Event({composed: true}) optionSelected: EventEmitter<IMenuOption>;\n\n  componentWillLoad() {\n    this.isOpen = !!this.open;\n  }\n\n  componentDidLoad() {\n    this.popper = createPopper(this.dropdownButton, this.dropdownMenu, {placement: 'bottom-start', modifiers: [{name: 'offset', options: {offset: [0, 6]}}]});\n  }\n\n  handleSelectOption(e: any, option: IMenuOption) {\n    e.stopPropagation();\n    this.isOpen = false;\n    this.optionSelected.emit(option);\n    this.hide();\n  }\n\n  // See https://popper.js.org/docs/v2/tutorial/\n  // What we're doing here is clearing event listeners when they aren't needed, to increase performance in lists\n  showDropdown() {\n    this.isOpen = true;\n    this.dropdownMenu.setAttribute('data-show', '');\n    this.dropdownMenu.removeAttribute('aria-hidden');\n\n    this.popper?.setOptions(options => ({\n      ...options,\n      modifiers: [...options.modifiers, {name: 'eventListeners', enabled: true}],\n    }));\n\n    this.popper?.update();\n  }\n\n  handleHideDropdown(e: any) {\n    if (e?.target?.localName === 'button' && e?.target?.className === 'arrow') {\n      // This event is fired when a menu element is clicked because the button \"loses focus\" then too\n      return;\n    }\n\n    this.hide();\n  }\n\n  toggleDropdown(e: any) {\n    e.stopPropagation();\n\n    if (this.isOpen) {\n      this.hide();\n    } else {\n      this.showDropdown();\n    }\n  }\n\n  hide() {\n    this.isOpen = false;\n    this.dropdownMenu.removeAttribute('data-show');\n    this.dropdownMenu.setAttribute('aria-hidden', 'true');\n    this.popper?.setOptions(options => ({\n      ...options,\n      modifiers: [...options.modifiers, {name: 'eventListeners', enabled: false}],\n    }));\n  }\n\n  render() {\n    return (\n      <Host class={{storybook: !!window?.['STORYBOOK_ENV'], open: !!this.isOpen}}>\n        <button\n          class=\"arrow\"\n          innerHTML={SortDown}\n          aria-label=\"Open Menu\"\n          onClick={e => this.toggleDropdown(e)}\n          onBlur={e => this.handleHideDropdown(e)}\n          ref={el => (this.dropdownButton = el as HTMLButtonElement)}\n        />\n\n        <div class=\"items\" aria-hidden={!this.open} ref={el => (this.dropdownMenu = el as HTMLDivElement)}>\n          {this.options?.map(option => (\n            <button onClick={e => this.handleSelectOption(e, option)} class=\"option\" disabled={option.disabled}>\n              {option.label}\n            </button>\n          ))}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/controls/verdocs-text-input/verdocs-text-input.js

@@ -15,14 +15,14 @@ export class VerdocsTextInput {
     this._value = '';
   }
   componentWillLoad() {
-    this._value = this.value;
+    // this._value = this.value;
   }
   componentDidLoad() { }
-  handleInput(e) {
-    this._value = e.target.value;
-  }
+  // 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, onInput: e => this.handleInput(e) }))));
+    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 }))));
   }
   static get is() { return "verdocs-text-input"; }
   static get originalStyleUrls() {

package/dist/collection/components/controls/verdocs-text-input/verdocs-text-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"verdocs-text-input.js","sourceRoot":"","sources":["../../../../src/components/controls/verdocs-text-input/verdocs-text-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAE9D;;;;GAIG;AAKH,MAAM,OAAO,gBAAgB;;iBAIH,EAAE;iBAKF,EAAE;uBAKI,EAAE;wBAKD,EAAE;gBAMmD,MAAM;oBAK9D,KAAK;kBAEP,EAAE;;EAE5B,iBAAiB;IACf,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC;EAC3B,CAAC;EAED,gBAAgB,KAAI,CAAC;EAErB,WAAW,CAAC,CAAM;IAChB,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;EAC/B,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAC,aAAa;MACvB;QACG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,WAAK,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,KAAK,GAAG,GAAG,CAAO,CAAC,CAAC,CAAC,cAAO;QACzE,aACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,MAAM,EAClB,KAAK,EAAC,eAAe,mBACP,MAAM,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,GACjC,CACI,CACH,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Prop, State, Host, h} from '@stencil/core';\n\n/**\n * Display a text input field. This is just a standard HTML input field with minimal markup to fit the\n * visual styles of the other components. Note that events \"bubble\" from the input field to the container,\n * so you can subscribe to the same DOM events (input, blur, etc) that a normal input would emmit.\n */\n@Component({\n  tag: 'verdocs-text-input',\n  styleUrl: 'verdocs-text-input.scss',\n})\nexport class VerdocsTextInput {\n  /**\n   * The initial value for the input field.\n   */\n  @Prop() value: string = '';\n\n  /**\n   * The label for the field.\n   */\n  @Prop() label: string = '';\n\n  /**\n   * The placeholder for the field.\n   */\n  @Prop() placeholder: string = '';\n\n  /**\n   * If desired, the autocomplete attribute to set.\n   */\n  @Prop() autocomplete: string = '';\n\n  /**\n   * The type of field to render. Only text-type fields are allowed here for the current styling. Additional types\n   * (e.g. a date picker) will be supported by other controls in the future.\n   */\n  @Prop() type: 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url' = 'text';\n\n  /**\n   * Should the field be disabled?\n   */\n  @Prop() disabled: boolean = false;\n\n  @State() _value: string = '';\n\n  componentWillLoad() {\n    this._value = this.value;\n  }\n\n  componentDidLoad() {}\n\n  handleInput(e: any) {\n    this._value = e.target.value;\n  }\n\n  render() {\n    return (\n      <Host class=\"input-field\">\n        <label>\n          {this.label ? <div class=\"input-label\">{this.label + ':'}</div> : <div />}\n          <input\n            type={this.type}\n            value={this._value}\n            class=\"input-element\"\n            data-lpignore=\"true\"\n            disabled={this.disabled}\n            placeholder={this.placeholder}\n            autoComplete={this.autocomplete}\n            onInput={e => this.handleInput(e)}\n          />\n        </label>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"verdocs-text-input.js","sourceRoot":"","sources":["../../../../src/components/controls/verdocs-text-input/verdocs-text-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAE9D;;;;GAIG;AAKH,MAAM,OAAO,gBAAgB;;iBAIH,EAAE;iBAKF,EAAE;uBAKI,EAAE;wBAKD,EAAE;gBAMmD,MAAM;oBAK9D,KAAK;kBAEP,EAAE;;EAE5B,iBAAiB;IACf,4BAA4B;EAC9B,CAAC;EAED,gBAAgB,KAAI,CAAC;EAErB,wBAAwB;EACxB,kCAAkC;EAClC,IAAI;EAEJ,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAC,aAAa;MACvB;QACG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,WAAK,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,KAAK,GAAG,GAAG,CAAO,CAAC,CAAC,CAAC,cAAO;QACzE,aACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAC,eAAe,mBACP,MAAM,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,YAAY,EAAE,IAAI,CAAC,YAAY,GAE/B,CACI,CACH,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Prop, State, Host, h} from '@stencil/core';\n\n/**\n * Display a text input field. This is just a standard HTML input field with minimal markup to fit the\n * visual styles of the other components. Note that events \"bubble\" from the input field to the container,\n * so you can subscribe to the same DOM events (input, blur, etc) that a normal input would emmit.\n */\n@Component({\n  tag: 'verdocs-text-input',\n  styleUrl: 'verdocs-text-input.scss',\n})\nexport class VerdocsTextInput {\n  /**\n   * The initial value for the input field.\n   */\n  @Prop() value: string = '';\n\n  /**\n   * The label for the field.\n   */\n  @Prop() label: string = '';\n\n  /**\n   * The placeholder for the field.\n   */\n  @Prop() placeholder: string = '';\n\n  /**\n   * If desired, the autocomplete attribute to set.\n   */\n  @Prop() autocomplete: string = '';\n\n  /**\n   * The type of field to render. Only text-type fields are allowed here for the current styling. Additional types\n   * (e.g. a date picker) will be supported by other controls in the future.\n   */\n  @Prop() type: 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url' = 'text';\n\n  /**\n   * Should the field be disabled?\n   */\n  @Prop() disabled: boolean = false;\n\n  @State() _value: string = '';\n\n  componentWillLoad() {\n    // this._value = this.value;\n  }\n\n  componentDidLoad() {}\n\n  // handleInput(e: any) {\n  //   this._value = e.target.value;\n  // }\n\n  render() {\n    return (\n      <Host class=\"input-field\">\n        <label>\n          {this.label ? <div class=\"input-label\">{this.label + ':'}</div> : <div />}\n          <input\n            type={this.type}\n            value={this.value}\n            class=\"input-element\"\n            data-lpignore=\"true\"\n            disabled={this.disabled}\n            placeholder={this.placeholder}\n            autoComplete={this.autocomplete}\n            // onInput={e => this.handleInput(e)}\n          />\n        </label>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/elements/verdocs-template-create/verdocs-template-create.js

@@ -43,7 +43,7 @@ export class VerdocsTemplateCreate {
       console.log('created template', template);
       const template_document = await createTemplateDocument(this.endpoint, template.id, this.file);
       console.log('created document', template_document);
-      for await (let pageNumber of Array.from(Array(3).keys(), n => n + 1)) {
+      for await (let pageNumber of Array.from(Array(template_document.page_numbers).keys(), n => n + 1)) {
         console.log('Updating page', pageNumber);
         const page = await createPage(this.endpoint, template.id, { sequence: pageNumber, page_number: pageNumber, document_id: template_document.id });
         console.log('Created page', page);

package/dist/collection/components/elements/verdocs-template-create/verdocs-template-create.js.map

@@ -1 +1 @@
-{"version":3,"file":"verdocs-template-create.js","sourceRoot":"","sources":["../../../../src/components/elements/verdocs-template-create/verdocs-template-create.tsx"],"names":[],"mappings":"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","sourcesContent":["import {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, h, Event, EventEmitter, Prop, State} from '@stencil/core';\nimport {createTemplate} from '@verdocs/js-sdk/Templates/Templates';\nimport {SDKError} from '../../../utils/errors';\nimport {ITemplate, ITemplateDocument} from '@verdocs/js-sdk/Templates/Types';\nimport {createTemplateDocument} from '@verdocs/js-sdk/Templates/TemplateDocuments';\nimport {createPage} from '@verdocs/js-sdk/Templates/Pages';\n\nconst FileIcon =\n  '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z\"></path></svg>';\n\n/**\n * Displays a file upload mechanism suitable for the first step of creating a template.\n */\n@Component({\n  tag: 'verdocs-template-create',\n  styleUrl: 'verdocs-template-create.scss',\n  shadow: false,\n})\nexport class VerdocsTemplateCreate {\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   * Event fired when the user cancels the dialog.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\n\n  /**\n   * Event fired when the user changes the type.\n   */\n  @Event({composed: true}) templateCreated: EventEmitter<{template: ITemplate; template_document: ITemplateDocument}>;\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() file: File | null;\n\n  componentWillLoad() {}\n\n  handleFileChanged(e: any) {\n    console.log('files', e.target.files);\n    this.file = e.target.files?.[0] || null;\n    console.log('Selected file', this.file);\n    // this.filePath = e.target.files?.[0]?.name;\n  }\n\n  handleUpload(e) {\n    e.stopPropagation();\n    const fileElem = document.getElementById('verdocs-template-create-file');\n    fileElem.click();\n  }\n\n  handleCancel(e) {\n    e.stopPropagation();\n    this.cancel?.emit();\n  }\n\n  async handleSubmit(e) {\n    e.stopPropagation();\n\n    // Should be true if we're here because onClick is only enabled then. We're just guarding this for Typescript.\n    if (!this.file) {\n      return;\n    }\n\n    try {\n      const template = await createTemplate(this.endpoint, {name: this.file.name});\n      console.log('created template', template);\n\n      const template_document = await createTemplateDocument(this.endpoint, template.id, this.file);\n      console.log('created document', template_document);\n\n      for await (let pageNumber of Array.from(Array(3).keys(), n => n + 1)) {\n        console.log('Updating page', pageNumber);\n        const page = await createPage(this.endpoint, template.id, {sequence: pageNumber, page_number: pageNumber, document_id: template_document.id});\n        console.log('Created page', page);\n      }\n\n      this.templateCreated?.emit({template, template_document});\n      // this.fileUploaded?.emit({filePath: this.filePath});\n    } catch (e) {\n      console.log('[TEMPLATE-CREATE] Error creating template', e);\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n    }\n  }\n\n  render() {\n    return (\n      <form onSubmit={e => e.preventDefault()} onClick={e => e.stopPropagation()} autocomplete=\"off\">\n        <input type=\"file\" id=\"verdocs-template-create-file\" multiple accept=\"application/pdf\" style={{display: 'none'}} onChange={e => this.handleFileChanged(e)} />\n\n        <div class=\"upload-box\">\n          <div>\n            <span innerHTML={FileIcon} />\n          </div>\n          <div style={{marginTop: '20px', fontSize: '20px', fontWeight: 'bold'}}>Drag a file here</div>\n          <div style={{marginTop: '20px', marginBottom: '20px', fontSize: '16px'}}>Or, if you prefer...</div>\n          <verdocs-button label=\"Select a file from your computer\" size=\"small\" onPress={e => this.handleUpload(e)} />\n        </div>\n\n        <div class=\"buttons\">\n          <verdocs-button variant=\"outline\" label=\"Cancel\" size=\"small\" onPress={e => this.handleCancel(e)} />\n          <verdocs-button label=\"Next\" size=\"small\" onPress={e => this.handleSubmit(e)} disabled={!this.file} />\n        </div>\n      </form>\n    );\n  }\n}\n"]}
+{"version":3,"file":"verdocs-template-create.js","sourceRoot":"","sources":["../../../../src/components/elements/verdocs-template-create/verdocs-template-create.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,eAAe,EAAC,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAC,SAAS,EAAE,CAAC,EAAE,KAAK,EAAgB,IAAI,EAAE,KAAK,EAAC,MAAM,eAAe,CAAC;AAC7E,OAAO,EAAC,cAAc,EAAC,MAAM,qCAAqC,CAAC;AACnE,OAAO,EAAC,QAAQ,EAAC,MAAM,uBAAuB,CAAC;AAE/C,OAAO,EAAC,sBAAsB,EAAC,MAAM,6CAA6C,CAAC;AACnF,OAAO,EAAC,UAAU,EAAC,MAAM,iCAAiC,CAAC;AAE3D,MAAM,QAAQ,GACZ,uLAAuL,CAAC;AAE1L;;GAEG;AAMH,MAAM,OAAO,qBAAqB;;oBAII,eAAe,CAAC,UAAU,EAAE;;;EAoBhE,iBAAiB,KAAI,CAAC;EAEtB,iBAAiB,CAAC,CAAM;;IACtB,OAAO,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACrC,IAAI,CAAC,IAAI,GAAG,CAAA,MAAA,CAAC,CAAC,MAAM,CAAC,KAAK,0CAAG,CAAC,CAAC,KAAI,IAAI,CAAC;IACxC,OAAO,CAAC,GAAG,CAAC,eAAe,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;IACxC,6CAA6C;EAC/C,CAAC;EAED,YAAY,CAAC,CAAC;IACZ,CAAC,CAAC,eAAe,EAAE,CAAC;IACpB,MAAM,QAAQ,GAAG,QAAQ,CAAC,cAAc,CAAC,8BAA8B,CAAC,CAAC;IACzE,QAAQ,CAAC,KAAK,EAAE,CAAC;EACnB,CAAC;EAED,YAAY,CAAC,CAAC;;IACZ,CAAC,CAAC,eAAe,EAAE,CAAC;IACpB,MAAA,IAAI,CAAC,MAAM,0CAAE,IAAI,EAAE,CAAC;EACtB,CAAC;EAED,KAAK,CAAC,YAAY,CAAC,CAAC;;IAClB,CAAC,CAAC,eAAe,EAAE,CAAC;IAEpB,8GAA8G;IAC9G,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACd,OAAO;KACR;IAED,IAAI;MACF,MAAM,QAAQ,GAAG,MAAM,cAAc,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,EAAC,CAAC,CAAC;MAC7E,OAAO,CAAC,GAAG,CAAC,kBAAkB,EAAE,QAAQ,CAAC,CAAC;MAE1C,MAAM,iBAAiB,GAAG,MAAM,sBAAsB,CAAC,IAAI,CAAC,QAAQ,EAAE,QAAQ,CAAC,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;MAC9F,OAAO,CAAC,GAAG,CAAC,kBAAkB,EAAE,iBAAiB,CAAC,CAAC;MAEnD,IAAI,KAAK,EAAE,IAAI,UAAU,IAAI,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,YAAY,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE;QACjG,OAAO,CAAC,GAAG,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC;QACzC,MAAM,IAAI,GAAG,MAAM,UAAU,CAAC,IAAI,CAAC,QAAQ,EAAE,QAAQ,CAAC,EAAE,EAAE,EAAC,QAAQ,EAAE,UAAU,EAAE,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,iBAAiB,CAAC,EAAE,EAAC,CAAC,CAAC;QAC9I,OAAO,CAAC,GAAG,CAAC,cAAc,EAAE,IAAI,CAAC,CAAC;OACnC;MAED,MAAA,IAAI,CAAC,eAAe,0CAAE,IAAI,CAAC,EAAC,QAAQ,EAAE,iBAAiB,EAAC,CAAC,CAAC;MAC1D,sDAAsD;KACvD;IAAC,OAAO,CAAC,EAAE;MACV,OAAO,CAAC,GAAG,CAAC,2CAA2C,EAAE,CAAC,CAAC,CAAC;MAC5D,MAAA,IAAI,CAAC,QAAQ,0CAAE,IAAI,CAAC,IAAI,QAAQ,CAAC,CAAC,CAAC,OAAO,EAAE,MAAA,CAAC,CAAC,QAAQ,0CAAE,MAAM,EAAE,MAAA,CAAC,CAAC,QAAQ,0CAAE,IAAI,CAAC,CAAC,CAAC;KACpF;EACH,CAAC;EAED,MAAM;IACJ,OAAO,CACL,YAAM,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,EAAE,YAAY,EAAC,KAAK;MAC5F,aAAO,IAAI,EAAC,MAAM,EAAC,EAAE,EAAC,8BAA8B,EAAC,QAAQ,QAAC,MAAM,EAAC,iBAAiB,EAAC,KAAK,EAAE,EAAC,OAAO,EAAE,MAAM,EAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,GAAI;MAE7J,WAAK,KAAK,EAAC,YAAY;QACrB;UACE,YAAM,SAAS,EAAE,QAAQ,GAAI,CACzB;QACN,WAAK,KAAK,EAAE,EAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAC,uBAAwB;QAC7F,WAAK,KAAK,EAAE,EAAC,SAAS,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAC,2BAA4B;QACnG,sBAAgB,KAAK,EAAC,kCAAkC,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GAAI,CACxG;MAEN,WAAK,KAAK,EAAC,SAAS;QAClB,sBAAgB,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GAAI;QACpG,sBAAgB,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,IAAI,CAAC,IAAI,GAAI,CAClG,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, h, Event, EventEmitter, Prop, State} from '@stencil/core';\nimport {createTemplate} from '@verdocs/js-sdk/Templates/Templates';\nimport {SDKError} from '../../../utils/errors';\nimport {ITemplate, ITemplateDocument} from '@verdocs/js-sdk/Templates/Types';\nimport {createTemplateDocument} from '@verdocs/js-sdk/Templates/TemplateDocuments';\nimport {createPage} from '@verdocs/js-sdk/Templates/Pages';\n\nconst FileIcon =\n  '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z\"></path></svg>';\n\n/**\n * Displays a file upload mechanism suitable for the first step of creating a template.\n */\n@Component({\n  tag: 'verdocs-template-create',\n  styleUrl: 'verdocs-template-create.scss',\n  shadow: false,\n})\nexport class VerdocsTemplateCreate {\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   * Event fired when the user cancels the dialog.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\n\n  /**\n   * Event fired when the user changes the type.\n   */\n  @Event({composed: true}) templateCreated: EventEmitter<{template: ITemplate; template_document: ITemplateDocument}>;\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() file: File | null;\n\n  componentWillLoad() {}\n\n  handleFileChanged(e: any) {\n    console.log('files', e.target.files);\n    this.file = e.target.files?.[0] || null;\n    console.log('Selected file', this.file);\n    // this.filePath = e.target.files?.[0]?.name;\n  }\n\n  handleUpload(e) {\n    e.stopPropagation();\n    const fileElem = document.getElementById('verdocs-template-create-file');\n    fileElem.click();\n  }\n\n  handleCancel(e) {\n    e.stopPropagation();\n    this.cancel?.emit();\n  }\n\n  async handleSubmit(e) {\n    e.stopPropagation();\n\n    // Should be true if we're here because onClick is only enabled then. We're just guarding this for Typescript.\n    if (!this.file) {\n      return;\n    }\n\n    try {\n      const template = await createTemplate(this.endpoint, {name: this.file.name});\n      console.log('created template', template);\n\n      const template_document = await createTemplateDocument(this.endpoint, template.id, this.file);\n      console.log('created document', template_document);\n\n      for await (let pageNumber of Array.from(Array(template_document.page_numbers).keys(), n => n + 1)) {\n        console.log('Updating page', pageNumber);\n        const page = await createPage(this.endpoint, template.id, {sequence: pageNumber, page_number: pageNumber, document_id: template_document.id});\n        console.log('Created page', page);\n      }\n\n      this.templateCreated?.emit({template, template_document});\n      // this.fileUploaded?.emit({filePath: this.filePath});\n    } catch (e) {\n      console.log('[TEMPLATE-CREATE] Error creating template', e);\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n    }\n  }\n\n  render() {\n    return (\n      <form onSubmit={e => e.preventDefault()} onClick={e => e.stopPropagation()} autocomplete=\"off\">\n        <input type=\"file\" id=\"verdocs-template-create-file\" multiple accept=\"application/pdf\" style={{display: 'none'}} onChange={e => this.handleFileChanged(e)} />\n\n        <div class=\"upload-box\">\n          <div>\n            <span innerHTML={FileIcon} />\n          </div>\n          <div style={{marginTop: '20px', fontSize: '20px', fontWeight: 'bold'}}>Drag a file here</div>\n          <div style={{marginTop: '20px', marginBottom: '20px', fontSize: '16px'}}>Or, if you prefer...</div>\n          <verdocs-button label=\"Select a file from your computer\" size=\"small\" onPress={e => this.handleUpload(e)} />\n        </div>\n\n        <div class=\"buttons\">\n          <verdocs-button variant=\"outline\" label=\"Cancel\" size=\"small\" onPress={e => this.handleCancel(e)} />\n          <verdocs-button label=\"Next\" size=\"small\" onPress={e => this.handleSubmit(e)} disabled={!this.file} />\n        </div>\n      </form>\n    );\n  }\n}\n"]}

package/dist/collection/components/elements/verdocs-template-fields/verdocs-template-fields.js

@@ -5,6 +5,7 @@ import { h, Fragment, Host } from '@stencil/core';
 import { getRoleIndex, renderDocumentField } from '../../../utils/utils';
 import { getTemplate } from '@verdocs/js-sdk/Templates/Templates';
 import builderStore from '../../../utils/builderStore';
+import { SDKError } from '../../../utils/errors';
 /**
  * Helper function to safely set/update components in a CSS transform attribute. Transform is normally set as a string of
  * `operation1(param) operation2(param) ...` components, which makes updating them a bit of a pain. This will remove the
@@ -43,8 +44,9 @@ export class VerdocsTemplateFields {
     this.template = null;
   }
   async componentWillLoad() {
-    var _a;
+    var _a, _b, _c, _d;
     try {
+      this.endpoint.loadSession();
       console.log(`[PREVIEW] Loading template ${this.templateId}`);
       builderStore.templateId = this.templateId;
       const template = await getTemplate(this.endpoint, this.templateId);
@@ -68,7 +70,7 @@ export class VerdocsTemplateFields {
     }
     catch (e) {
       console.log('[PREVIEW] Error with preview session', e);
-      // this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));
+      (_b = this.sdkError) === null || _b === void 0 ? void 0 : _b.emit(new SDKError(e.message, (_c = e.response) === null || _c === void 0 ? void 0 : _c.status, (_d = e.response) === null || _d === void 0 ? void 0 : _d.data));
     }
   }
   componentDidRender() {

package/dist/collection/components/elements/verdocs-template-fields/verdocs-template-fields.js.map

@@ -1 +1 @@
-{"version":3,"file":"verdocs-template-fields.js","sourceRoot":"","sources":["../../../../src/components/elements/verdocs-template-fields/verdocs-template-fields.tsx"],"names":[],"mappings":"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","sourcesContent":["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, State, Host} from '@stencil/core';\nimport {IPageRenderEvent} from '../../embeds/verdocs-view/verdocs-view';\nimport {getRoleIndex, renderDocumentField} from '../../../utils/utils';\nimport {getTemplate} from '@verdocs/js-sdk/Templates/Templates';\nimport builderStore from '../../../utils/builderStore';\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  @State() pdfUrl = null;\n  @State() template: ITemplate | null = null;\n\n  async componentWillLoad() {\n    try {\n      console.log(`[PREVIEW] Loading template ${this.templateId}`);\n      builderStore.templateId = this.templateId;\n      const template = await getTemplate(this.endpoint, this.templateId);\n\n      console.log('[PREVIEW] Got template', this.template);\n      this.template = template;\n      builderStore.template = this.template;\n\n      this.pdfUrl = `${this.endpoint.getBaseURL()}/templates/${this.templateId}/documents/${template.template_document?.id}?file=true`;\n\n      builderStore.roleNames = template.roles.map(role => role.name);\n      // this.roles = template.roles.map(role => role.name);\n      console.log('[PREVIEW] Loaded roles', builderStore.roleNames);\n\n      builderStore.fields = [];\n      template.roles.forEach(role => {\n        builderStore.fields.push(...role.fields);\n      });\n      console.log('[PREVIEW] Loaded fields', builderStore.fields);\n      // this.fields = [];\n      // template.roles.forEach(role => {\n      //   this.fields.push(...role.fields);\n      // });\n      // console.log('[PREVIEW] Loaded fields', this.fields);\n    } catch (e) {\n      console.log('[PREVIEW] 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('[PREVIEW] handleFieldChange', field, e, optionId);\n  }\n\n  handlePageRendered(e) {\n    const pageInfo = e.detail as IPageRenderEvent;\n    console.log('[PREVIEW] Page rendered', pageInfo);\n\n    const fields = builderStore.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('[PREVIEW] Fields on page', fields);\n    fields.forEach(field => {\n      const el = renderDocumentField(field, pageInfo.renderedPage, getRoleIndex(builderStore.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        console.log('Skipping partially rendered field', field);\n        return;\n      }\n\n      el.addEventListener('recipientChanged', e => {\n        el.setAttribute('roleindex', getRoleIndex(builderStore.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('drag started', event.type, event.target);\n          },\n          move(event) {\n            console.log('moved');\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('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    return (\n      <Host>\n        {this.pdfUrl ? (\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              source={this.pdfUrl}\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          <verdocs-loader />\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"verdocs-template-fields.js","sourceRoot":"","sources":["../../../../src/components/elements/verdocs-template-fields/verdocs-template-fields.tsx"],"names":[],"mappings":"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","sourcesContent":["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, State, Host} from '@stencil/core';\nimport {IPageRenderEvent} from '../../embeds/verdocs-view/verdocs-view';\nimport {getRoleIndex, renderDocumentField} from '../../../utils/utils';\nimport {getTemplate} from '@verdocs/js-sdk/Templates/Templates';\nimport builderStore from '../../../utils/builderStore';\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  @State() pdfUrl = null;\n  @State() template: ITemplate | null = null;\n\n  async componentWillLoad() {\n    try {\n      this.endpoint.loadSession();\n\n      console.log(`[PREVIEW] Loading template ${this.templateId}`);\n      builderStore.templateId = this.templateId;\n      const template = await getTemplate(this.endpoint, this.templateId);\n\n      console.log('[PREVIEW] Got template', this.template);\n      this.template = template;\n      builderStore.template = this.template;\n\n      this.pdfUrl = `${this.endpoint.getBaseURL()}/templates/${this.templateId}/documents/${template.template_document?.id}?file=true`;\n\n      builderStore.roleNames = template.roles.map(role => role.name);\n      // this.roles = template.roles.map(role => role.name);\n      console.log('[PREVIEW] Loaded roles', builderStore.roleNames);\n\n      builderStore.fields = [];\n      template.roles.forEach(role => {\n        builderStore.fields.push(...role.fields);\n      });\n      console.log('[PREVIEW] Loaded fields', builderStore.fields);\n      // this.fields = [];\n      // template.roles.forEach(role => {\n      //   this.fields.push(...role.fields);\n      // });\n      // console.log('[PREVIEW] Loaded fields', this.fields);\n    } catch (e) {\n      console.log('[PREVIEW] 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('[PREVIEW] handleFieldChange', field, e, optionId);\n  }\n\n  handlePageRendered(e) {\n    const pageInfo = e.detail as IPageRenderEvent;\n    console.log('[PREVIEW] Page rendered', pageInfo);\n\n    const fields = builderStore.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('[PREVIEW] Fields on page', fields);\n    fields.forEach(field => {\n      const el = renderDocumentField(field, pageInfo.renderedPage, getRoleIndex(builderStore.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        console.log('Skipping partially rendered field', field);\n        return;\n      }\n\n      el.addEventListener('recipientChanged', e => {\n        el.setAttribute('roleindex', getRoleIndex(builderStore.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('drag started', event.type, event.target);\n          },\n          move(event) {\n            console.log('moved');\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('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    return (\n      <Host>\n        {this.pdfUrl ? (\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              source={this.pdfUrl}\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          <verdocs-loader />\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/elements/verdocs-template-properties/verdocs-template-properties.js

@@ -1,23 +1,37 @@
 import { VerdocsEndpoint } from '@verdocs/js-sdk';
 import { h } from '@stencil/core';
+import builderStore from '../../../utils/builderStore';
+import { getTemplate } from '@verdocs/js-sdk/Templates/Templates';
+import { SDKError } from '../../../utils/errors';
 /**
  * Displays a collection of settings boxes that allow a user to configure a template's behavior.
  */
 export class VerdocsTemplateProperties {
   constructor() {
     this.endpoint = VerdocsEndpoint.getDefault();
-    this.templateRole = null;
+    this.templateId = '';
+    this.template = null;
+    this.name = '';
     this.sendReminders = false;
+    this.firstReminderDays = '1';
+    this.reminderDays = '1';
   }
-  componentWillLoad() {
-    if (this.templateRole) {
-      // this.showMessage = this.message !== '';
+  async componentWillLoad() {
+    var _a, _b, _c;
+    try {
+      this.endpoint.loadSession();
+      console.log(`[PROPERTIES] Loading template ${this.templateId}`);
+      builderStore.templateId = this.templateId;
+      const template = await getTemplate(this.endpoint, this.templateId);
+      console.log('[PROPERTIES] Got template', template);
+      this.template = template;
+      this.name = template.name;
+      this.sendReminders = template.reminder_id !== null;
+    }
+    catch (e) {
+      console.log('[PROPERTIES] Error loading template', e);
+      (_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));
     }
-  }
-  handleNameChange(e) {
-    console.log(e);
-    // this.name = e.target.value;
-    // this.searchContacts?.emit({query: this.name});
   }
   handleMessageChange(e) {
     console.log(e);
@@ -37,7 +51,14 @@ export class VerdocsTemplateProperties {
     // });
   }
   render() {
-    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: "Motor Vehicle Bill of Sale", autocomplete: "off" })), 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: true })), h("div", { class: "input-row" }, h("label", null, "Days Before First Reminder"), h("verdocs-text-input", { value: "1" })), h("div", { class: "input-row" }, h("label", null, "Days Between Reminders"), h("verdocs-text-input", { value: "1" }))), 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) }))));
+    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) }))));
   }
   static get is() { return "verdocs-template-properties"; }
   static get originalStyleUrls() {
@@ -73,32 +94,33 @@ export class VerdocsTemplateProperties {
         },
         "defaultValue": "VerdocsEndpoint.getDefault()"
       },
-      "templateRole": {
-        "type": "unknown",
+      "templateId": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "IRole | null",
-          "resolved": "IRole",
-          "references": {
-            "IRole": {
-              "location": "import",
-              "path": "@verdocs/js-sdk/Templates/Types"
-            }
-          }
+          "original": "string",
+          "resolved": "string",
+          "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The role that this contact will be assigned to."
+          "text": "The template ID to edit."
         },
-        "defaultValue": "null"
+        "attribute": "template-id",
+        "reflect": false,
+        "defaultValue": "''"
       }
     };
   }
   static get states() {
     return {
-      "sendReminders": {}
+      "template": {},
+      "name": {},
+      "sendReminders": {},
+      "firstReminderDays": {},
+      "reminderDays": {}
     };
   }
   static get events() {
@@ -132,6 +154,26 @@ export class VerdocsTemplateProperties {
           "resolved": "any",
           "references": {}
         }
+      }, {
+        "method": "sdkError",
+        "name": "sdkError",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fired if an error occurs. The event details will contain information about the error. Most errors will\nterminate the process, and the calling application should correct the condition and re-render the component."
+        },
+        "complexType": {
+          "original": "SDKError",
+          "resolved": "SDKError",
+          "references": {
+            "SDKError": {
+              "location": "import",
+              "path": "../../../utils/errors"
+            }
+          }
+        }
       }];
   }
 }

package/dist/collection/components/elements/verdocs-template-properties/verdocs-template-properties.js.map

@@ -1 +1 @@
-{"version":3,"file":"verdocs-template-properties.js","sourceRoot":"","sources":["../../../../src/components/elements/verdocs-template-properties/verdocs-template-properties.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,eAAe,EAAC,MAAM,iBAAiB,CAAC;AAEhD,OAAO,EAAC,SAAS,EAAE,CAAC,EAAE,KAAK,EAAgB,IAAI,EAAE,KAAK,EAAC,MAAM,eAAe,CAAC;AAE7E;;GAEG;AAMH,MAAM,OAAO,yBAAyB;;oBAIA,eAAe,CAAC,UAAU,EAAE;wBAK3B,IAAI;yBAYP,KAAK;;EAEvC,iBAAiB;IACf,IAAI,IAAI,CAAC,YAAY,EAAE;MACrB,0CAA0C;KAC3C;EACH,CAAC;EAED,gBAAgB,CAAC,CAAM;IACrB,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IACf,8BAA8B;IAC9B,iDAAiD;EACnD,CAAC;EAED,mBAAmB,CAAC,CAAM;IACxB,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IACf,iCAAiC;EACnC,CAAC;EAED,YAAY,CAAC,CAAC;;IACZ,CAAC,CAAC,eAAe,EAAE,CAAC;IACpB,MAAA,IAAI,CAAC,MAAM,0CAAE,IAAI,EAAE,CAAC;EACtB,CAAC;EAED,YAAY,CAAC,CAAC;;IACZ,CAAC,CAAC,eAAe,EAAE,CAAC;IAEpB,MAAA,IAAI,CAAC,eAAe,0CAAE,IAAI,EAAE,CAAC;IAE7B,+BAA+B;IAC/B,+BAA+B;IAC/B,MAAM;EACR,CAAC;EAED,MAAM;IACJ,OAAO,CACL,YAAM,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,EAAE,YAAY,EAAC,KAAK;MAC5F,8BAAsB;MACtB;QACE,0BAAoB,KAAK,EAAC,4BAA4B,EAAC,YAAY,EAAC,KAAK,GAAG,CACnE;MAEX,0BAAkB;MAClB;QACE,WAAK,KAAK,EAAC,WAAW;UACpB,4CAAuC;UACvC,wBAAkB,IAAI,EAAC,qBAAqB,EAAC,OAAO,EAAE,IAAI,GAAI,CAC1D;QAEN,WAAK,KAAK,EAAC,WAAW;UACpB,8CAAyC;UACzC,0BAAoB,KAAK,EAAC,GAAG,GAAG,CAC5B;QACN,WAAK,KAAK,EAAC,WAAW;UACpB,0CAAqC;UACrC,0BAAoB,KAAK,EAAC,GAAG,GAAG,CAC5B,CACG;MAEX,oCAA4B;MAC5B;QACE,WAAK,KAAK,EAAC,WAAW;UACpB,4BAAsB,IAAI,EAAC,YAAY,EAAC,OAAO,EAAE,IAAI,EAAE,KAAK,EAAC,SAAS,GAAG;UACzE,aAAO,OAAO,EAAC,yCAAyC;YACtD,WAAK,KAAK,EAAC,OAAO,cAAc;YAChC,WAAK,KAAK,EAAC,aAAa,+CAA+C,CACjE,CACJ;QACN,WAAK,KAAK,EAAC,WAAW;UACpB,4BAAsB,IAAI,EAAC,YAAY,EAAC,OAAO,EAAE,IAAI,EAAE,KAAK,EAAC,QAAQ,GAAG;UACxE,aAAO,OAAO,EAAC,wCAAwC;YACrD,WAAK,KAAK,EAAC,OAAO,kCAAkC;YACpD,WAAK,KAAK,EAAC,aAAa,sEAAsE,CACxF,CACJ;QACN,WAAK,KAAK,EAAC,WAAW;UACpB,4BAAsB,IAAI,EAAC,YAAY,EAAC,OAAO,EAAE,IAAI,EAAE,KAAK,EAAC,eAAe,GAAG;UAC/E,aAAO,OAAO,EAAC,+CAA+C;YAC5D,WAAK,KAAK,EAAC,OAAO,6CAA6C;YAC/D,WAAK,KAAK,EAAC,aAAa,oHAAoH,CACtI,CACJ;QACN,WAAK,KAAK,EAAC,WAAW;UACpB,4BAAsB,IAAI,EAAC,YAAY,EAAC,OAAO,EAAE,IAAI,EAAE,KAAK,EAAC,QAAQ,GAAG;UACxE,aAAO,OAAO,EAAC,wCAAwC;YACrD,WAAK,KAAK,EAAC,OAAO,aAAa;YAC/B,WAAK,KAAK,EAAC,aAAa,uDAAuD,CACzE,CACJ,CACG;MAEX,WAAK,KAAK,EAAC,SAAS;QAClB,WAAK,KAAK,EAAC,WAAW,GAAG;QAEzB,sBAAgB,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GAAI;QACpG,sBAAgB,KAAK,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GAAI,CAC1E,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {IRole} from '@verdocs/js-sdk/Templates/Types';\nimport {Component, h, Event, EventEmitter, Prop, State} from '@stencil/core';\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 role that this contact will be assigned to.\n   */\n  @Prop() templateRole: IRole | null = null;\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  @State() sendReminders: boolean = false;\n\n  componentWillLoad() {\n    if (this.templateRole) {\n      // this.showMessage = this.message !== '';\n    }\n  }\n\n  handleNameChange(e: any) {\n    console.log(e);\n    // this.name = e.target.value;\n    // this.searchContacts?.emit({query: this.name});\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    this.settingsUpdated?.emit();\n\n    // this.contactSelected?.emit({\n    //   delegator: this.delegator,\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=\"Motor Vehicle Bill of Sale\" autocomplete=\"off\" />\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={true} />\n          </div>\n\n          <div class=\"input-row\">\n            <label>Days Before First Reminder</label>\n            <verdocs-text-input value=\"1\" />\n          </div>\n          <div class=\"input-row\">\n            <label>Days Between Reminders</label>\n            <verdocs-text-input value=\"1\" />\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-properties.js","sourceRoot":"","sources":["../../../../src/components/elements/verdocs-template-properties/verdocs-template-properties.tsx"],"names":[],"mappings":"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","sourcesContent":["import {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, h, Event, EventEmitter, Prop, State} from '@stencil/core';\nimport builderStore from '../../../utils/builderStore';\nimport {getTemplate} from '@verdocs/js-sdk/Templates/Templates';\nimport {ITemplate} from '@verdocs/js-sdk/Templates/Types';\nimport {SDKError} from '../../../utils/errors';\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;\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() 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      builderStore.templateId = this.templateId;\n      const template = await getTemplate(this.endpoint, this.templateId);\n\n      console.log('[PROPERTIES] Got template', template);\n      this.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    this.settingsUpdated?.emit();\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"]}

package/dist/collection/components/elements/verdocs-template-properties/verdocs-template-properties.stories.js

@@ -3,21 +3,12 @@ export default {
   title: 'Elements/Template Properties',
   component: 'verdocs-template-properties',
   args: {
-    template: {
-      template_id: '65cbba07-d0ac-4b62-afe3-25d186238938',
-      name: 'Recipient 1',
-      full_name: '',
-      email: '',
-      phone: '',
-      type: 'signer',
-      sequence: 1,
-      message: '',
-    },
+    templateId: '951016b0-c5ef-450d-b628-9a0c5b84b163',
   },
   argTypes: {
     cancel: { action: 'cancel' },
-    contactSelected: { action: 'contactSelected' },
+    settingsUpdated: { action: 'settingsUpdated' },
   },
 };
-export const TemplateProperties = ({ template, cancel, contactSelected }) => html `<verdocs-template-properties .template=${template} @cancel=${cancel} @contactSelected=${contactSelected} />`;
+export const TemplateProperties = ({ cancel, settingsUpdated, templateId }) => html `<verdocs-template-properties .templateId=${templateId} @cancel=${cancel} @settingsUpdated=${settingsUpdated} />`;
 //# sourceMappingURL=verdocs-template-properties.stories.js.map

package/dist/collection/components/elements/verdocs-template-properties/verdocs-template-properties.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"verdocs-template-properties.stories.js","sourceRoot":"","sources":["../../../../src/components/elements/verdocs-template-properties/verdocs-template-properties.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,UAAU,CAAC;AAG9B,eAAe;EACb,KAAK,EAAE,8BAA8B;EACrC,SAAS,EAAE,6BAA6B;EACxC,IAAI,EAAE;IACJ,QAAQ,EAAE;MACR,WAAW,EAAE,sCAAsC;MACnD,IAAI,EAAE,aAAa;MACnB,SAAS,EAAE,EAAE;MACb,KAAK,EAAE,EAAE;MACT,KAAK,EAAE,EAAE;MACT,IAAI,EAAE,QAAQ;MACd,QAAQ,EAAE,CAAC;MACX,OAAO,EAAE,EAAE;KACZ;GACF;EACD,QAAQ,EAAE;IACR,MAAM,EAAE,EAAC,MAAM,EAAE,QAAQ,EAAC;IAC1B,eAAe,EAAE,EAAC,MAAM,EAAE,iBAAiB,EAAC;GAC7C;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,EAAC,QAAQ,EAAE,MAAM,EAAE,eAAe,EAAC,EAAE,EAAE,CACxE,IAAI,CAAA,0CAA0C,QAAQ,YAAY,MAAM,qBAAqB,eAAe,KAAK,CAAC","sourcesContent":["import {html} from 'lit-html';\nimport {Meta} from '@storybook/web-components';\n\nexport default {\n  title: 'Elements/Template Properties',\n  component: 'verdocs-template-properties',\n  args: {\n    template: {\n      template_id: '65cbba07-d0ac-4b62-afe3-25d186238938',\n      name: 'Recipient 1',\n      full_name: '',\n      email: '',\n      phone: '',\n      type: 'signer',\n      sequence: 1,\n      message: '',\n    },\n  },\n  argTypes: {\n    cancel: {action: 'cancel'},\n    contactSelected: {action: 'contactSelected'},\n  },\n} as Meta;\n\nexport const TemplateProperties = ({template, cancel, contactSelected}) =>\n  html`<verdocs-template-properties .template=${template} @cancel=${cancel} @contactSelected=${contactSelected} />`;\n"]}
+{"version":3,"file":"verdocs-template-properties.stories.js","sourceRoot":"","sources":["../../../../src/components/elements/verdocs-template-properties/verdocs-template-properties.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,UAAU,CAAC;AAG9B,eAAe;EACb,KAAK,EAAE,8BAA8B;EACrC,SAAS,EAAE,6BAA6B;EACxC,IAAI,EAAE;IACJ,UAAU,EAAE,sCAAsC;GACnD;EACD,QAAQ,EAAE;IACR,MAAM,EAAE,EAAC,MAAM,EAAE,QAAQ,EAAC;IAC1B,eAAe,EAAE,EAAC,MAAM,EAAE,iBAAiB,EAAC;GAC7C;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,EAAC,MAAM,EAAE,eAAe,EAAE,UAAU,EAAC,EAAE,EAAE,CAC1E,IAAI,CAAA,4CAA4C,UAAU,YAAY,MAAM,qBAAqB,eAAe,KAAK,CAAC","sourcesContent":["import {html} from 'lit-html';\nimport {Meta} from '@storybook/web-components';\n\nexport default {\n  title: 'Elements/Template Properties',\n  component: 'verdocs-template-properties',\n  args: {\n    templateId: '951016b0-c5ef-450d-b628-9a0c5b84b163',\n  },\n  argTypes: {\n    cancel: {action: 'cancel'},\n    settingsUpdated: {action: 'settingsUpdated'},\n  },\n} as Meta;\n\nexport const TemplateProperties = ({cancel, settingsUpdated, templateId}) =>\n  html`<verdocs-template-properties .templateId=${templateId} @cancel=${cancel} @settingsUpdated=${settingsUpdated} />`;\n"]}