@verdocs/web-sdk 1.11.2 → 1.11.4

package/dist/components/TemplateDocuments.js

@@ -0,0 +1,75 @@
+/**
+ * A TemplateDocument represents a PDF or other attachment in a Template.
+ *
+ * @module
+ */
+var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (undefined && undefined.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+/**
+ * Create a Document for a particular Template.
+ *
+ * ```typescript
+ * import {TemplateDocument} from '@verdocs/js-sdk/Templates';
+ *
+ * await TemplateDocument.createDocument((VerdocsEndpoint.getDefault(), templateID, params);
+ * ```
+ */
+var createTemplateDocument = function (endpoint, templateId, file, onUploadProgress) {
+    var formData = new FormData();
+    formData.append('document', file, file.name);
+    return endpoint.api //
+        .post("/templates/".concat(templateId, "/documents"), formData, {
+        timeout: 60000,
+        onUploadProgress: function (event) {
+            var total = event.total || 1;
+            var loaded = event.loaded || 0;
+            onUploadProgress === null || onUploadProgress === void 0 ? void 0 : onUploadProgress(Math.floor((loaded * 100) / (total || 1)), loaded, total || 1);
+        },
+    })
+        .then(function (r) { return r.data; });
+};
+/**
+ * Get a display URI for a given page in a file attached to a template document. These pages are rendered server-side
+ * into PNG resources suitable for display in IMG tags although they may be used elsewhere. Note that these are
+ * intended for DISPLAY ONLY, and do not contain any encoded metadata from participants. The original asset may be
+ * obtained by calling `getTemplateDocumentFile()` or similar.
+ */
+var getTemplateDocumentPageDisplayUri = function (endpoint, templateId, documentId, page) { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+    return [2 /*return*/, endpoint.api.get("/templates/".concat(templateId, "/documents/").concat(documentId, "/pages/").concat(page, "/image")).then(function (r) { return r.data; })];
+}); }); };
+
+export { createTemplateDocument as c, getTemplateDocumentPageDisplayUri as g };

package/dist/components/Templates.js

@@ -23,7 +23,7 @@ const loadTemplate = async (endpoint, templateId, forceReload = false) => {
   state.template = null;
   try {
     console.log(`[TEMPLATES] Loading template ${templateId}`);
-    const template = await getTemplate(endpoint, templateId, true);
+    const template = await getTemplate(endpoint, templateId);
     if (!template) {
       console.log('[TEMPLATES] Unable to load template');
       return;

package/dist/components/VerdocsEndpoint.js

@@ -1251,7 +1251,7 @@ const transitionalDefaults = {
 
 const URLSearchParams$1 = typeof URLSearchParams !== 'undefined' ? URLSearchParams : AxiosURLSearchParams;
 
-const FormData$1 = FormData;
+const FormData$1 = typeof FormData !== 'undefined' ? FormData : null;
 
 /**
  * Determine if we're running in a standard browser environment
@@ -1647,11 +1647,15 @@ function isValidHeaderName(str) {
   return /^[-_a-zA-Z]+$/.test(str.trim());
 }
 
-function matchHeaderValue(context, value, header, filter) {
+function matchHeaderValue(context, value, header, filter, isHeaderNameFilter) {
   if (utils.isFunction(filter)) {
     return filter.call(this, value, header);
   }
 
+  if (isHeaderNameFilter) {
+    value = header;
+  }
+
   if (!utils.isString(value)) return;
 
   if (utils.isString(filter)) {
@@ -1795,7 +1799,7 @@ class AxiosHeaders {
 
     while (i--) {
       const key = keys[i];
-      if(!matcher || matchHeaderValue(this, this[key], key, matcher)) {
+      if(!matcher || matchHeaderValue(this, this[key], key, matcher, true)) {
         delete this[key];
         deleted = true;
       }
@@ -2643,7 +2647,7 @@ function mergeConfig(config1, config2) {
   return config;
 }
 
-const VERSION = "1.3.1";
+const VERSION = "1.3.3";
 
 const validators$1 = {};
 

package/dist/components/index.d.ts

@@ -42,6 +42,7 @@ export { VerdocsStatusIndicator as VerdocsStatusIndicator } from '../types/compo
 export { VerdocsTemplateAttachments as VerdocsTemplateAttachments } from '../types/components/templates/verdocs-template-attachments/verdocs-template-attachments';
 export { VerdocsTemplateCard as VerdocsTemplateCard } from '../types/components/controls/verdocs-template-card/verdocs-template-card';
 export { VerdocsTemplateCreate as VerdocsTemplateCreate } from '../types/components/templates/verdocs-template-create/verdocs-template-create';
+export { VerdocsTemplateDocumentPage as VerdocsTemplateDocumentPage } from '../types/components/elements/verdocs-template-document-page/verdocs-template-document-page';
 export { VerdocsTemplateFieldProperties as VerdocsTemplateFieldProperties } from '../types/components/templates/verdocs-template-field-properties/verdocs-template-field-properties';
 export { VerdocsTemplateFields as VerdocsTemplateFields } from '../types/components/templates/verdocs-template-fields/verdocs-template-fields';
 export { VerdocsTemplateName as VerdocsTemplateName } from '../types/components/templates/verdocs-template-name/verdocs-template-name';

package/dist/components/index.js

@@ -42,6 +42,7 @@ export { VerdocsStatusIndicator, defineCustomElement as defineCustomElementVerdo
 export { VerdocsTemplateAttachments, defineCustomElement as defineCustomElementVerdocsTemplateAttachments } from './verdocs-template-attachments.js';
 export { VerdocsTemplateCard, defineCustomElement as defineCustomElementVerdocsTemplateCard } from './verdocs-template-card.js';
 export { VerdocsTemplateCreate, defineCustomElement as defineCustomElementVerdocsTemplateCreate } from './verdocs-template-create.js';
+export { VerdocsTemplateDocumentPage, defineCustomElement as defineCustomElementVerdocsTemplateDocumentPage } from './verdocs-template-document-page.js';
 export { VerdocsTemplateFieldProperties, defineCustomElement as defineCustomElementVerdocsTemplateFieldProperties } from './verdocs-template-field-properties.js';
 export { VerdocsTemplateFields, defineCustomElement as defineCustomElementVerdocsTemplateFields } from './verdocs-template-fields.js';
 export { VerdocsTemplateName, defineCustomElement as defineCustomElementVerdocsTemplateName } from './verdocs-template-name.js';

package/dist/components/templateStore.js

@@ -17,6 +17,7 @@ const { state, onChange } = createStore({
   dirty: false,
 });
 onChange('template', async (newTemplate) => {
+  console.log('nt', newTemplate);
   if (!newTemplate) {
     console.log('[TEMPLATESTORE] Clearing template');
     state.fields = [];

package/dist/components/verdocs-build.js

@@ -2,12 +2,11 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { l as loadTemplate } from './Templates.js';
 import { S as SDKError } from './errors.js';
-import { d as defineCustomElement$9 } from './verdocs-button2.js';
-import { d as defineCustomElement$8 } from './verdocs-component-error2.js';
-import { d as defineCustomElement$7 } from './verdocs-document-page2.js';
-import { d as defineCustomElement$6 } from './verdocs-floating-menu2.js';
-import { d as defineCustomElement$5 } from './verdocs-loader2.js';
-import { d as defineCustomElement$4 } from './verdocs-template-create2.js';
+import { d as defineCustomElement$8 } from './verdocs-button2.js';
+import { d as defineCustomElement$7 } from './verdocs-component-error2.js';
+import { d as defineCustomElement$6 } from './verdocs-loader2.js';
+import { d as defineCustomElement$5 } from './verdocs-template-create2.js';
+import { d as defineCustomElement$4 } from './verdocs-template-document-page2.js';
 import { d as defineCustomElement$3 } from './verdocs-template-fields2.js';
 import { d as defineCustomElement$2 } from './verdocs-toolbar-icon2.js';
 
@@ -82,7 +81,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["verdocs-build", "verdocs-button", "verdocs-component-error", "verdocs-document-page", "verdocs-floating-menu", "verdocs-loader", "verdocs-template-create", "verdocs-template-fields", "verdocs-toolbar-icon"];
+  const components = ["verdocs-build", "verdocs-button", "verdocs-component-error", "verdocs-loader", "verdocs-template-create", "verdocs-template-document-page", "verdocs-template-fields", "verdocs-toolbar-icon"];
   components.forEach(tagName => { switch (tagName) {
     case "verdocs-build":
       if (!customElements.get(tagName)) {
@@ -90,31 +89,26 @@ function defineCustomElement$1() {
       }
       break;
     case "verdocs-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$9();
-      }
-      break;
-    case "verdocs-component-error":
       if (!customElements.get(tagName)) {
         defineCustomElement$8();
       }
       break;
-    case "verdocs-document-page":
+    case "verdocs-component-error":
       if (!customElements.get(tagName)) {
         defineCustomElement$7();
       }
       break;
-    case "verdocs-floating-menu":
+    case "verdocs-loader":
       if (!customElements.get(tagName)) {
         defineCustomElement$6();
       }
       break;
-    case "verdocs-loader":
+    case "verdocs-template-create":
       if (!customElements.get(tagName)) {
         defineCustomElement$5();
       }
       break;
-    case "verdocs-template-create":
+    case "verdocs-template-document-page":
       if (!customElements.get(tagName)) {
         defineCustomElement$4();
       }

package/dist/components/verdocs-field-checkbox.js

@@ -19,6 +19,7 @@ const VerdocsFieldCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     super();
     this.__registerHost();
     this.settingsChanged = createEvent(this, "settingsChanged", 7);
+    this.deleted = createEvent(this, "deleted", 7);
     this.field = null;
     this.option = 0;
     this.disabled = false;
@@ -51,7 +52,7 @@ const VerdocsFieldCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     }
     return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, h("label", null, h("input", { type: "checkbox", tabIndex: settings.order, checked: option.checked, disabled: disabled, required: settings.required, value: option.id }), h("span", null), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("h6", null, "Field Settings"), h("verdocs-template-field-properties", { templateId: state.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
         var _a;
-        (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
+        (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
         return this.hideSettingsPanel();
       }, onSettingsChanged: e => {
         var _a;

package/dist/components/verdocs-field-date.js

@@ -2570,6 +2570,7 @@ const VerdocsFieldDate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
     this.__registerHost();
     this.settingsPress = createEvent(this, "settingsPress", 7);
     this.settingsChanged = createEvent(this, "settingsChanged", 7);
+    this.deleted = createEvent(this, "deleted", 7);
     this.field = null;
     this.disabled = false;
     this.editable = false;
@@ -2623,7 +2624,7 @@ const VerdocsFieldDate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
     }
     return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, h("input", { type: "text", value: "", id: this.containerId, disabled: disabled, placeholder: settings.placeholder, required: settings.required, ref: el => (this.el = el) }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("h6", null, "Field Settings"), h("verdocs-template-field-properties", { templateId: state.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
         var _a;
-        (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
+        (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
         return this.hideSettingsPanel();
       }, onSettingsChanged: e => {
         var _a;

package/dist/components/verdocs-field-dropdown.js

@@ -11,6 +11,7 @@ const VerdocsFieldDropdown$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     this.__registerHost();
     this.fieldChange = createEvent(this, "fieldChange", 7);
     this.settingsChanged = createEvent(this, "settingsChanged", 7);
+    this.deleted = createEvent(this, "deleted", 7);
     this.field = null;
     this.disabled = false;
     this.roleindex = 0;

package/dist/components/verdocs-field-initial.js

@@ -24,6 +24,7 @@ const VerdocsFieldInitial$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     this.fieldChange = createEvent(this, "fieldChange", 7);
     this.settingsChanged = createEvent(this, "settingsChanged", 7);
     this.settingsPress = createEvent(this, "settingsPress", 7);
+    this.deleted = createEvent(this, "deleted", 7);
     this.field = null;
     this.disabled = false;
     this.initials = '';
@@ -80,7 +81,7 @@ const VerdocsFieldInitial$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     }
     return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, value ? (h("img", { src: value, alt: "Initials" })) : (h("button", { class: {}, onClick: () => !disabled && this.handleShow() }, "Initials")), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("h6", null, "Field Settings"), h("verdocs-template-field-properties", { templateId: state.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
         var _a;
-        (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
+        (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
         return this.hideSettingsPanel();
       }, onSettingsChanged: e => {
         var _a;

package/dist/components/verdocs-field-payment.js

@@ -12,6 +12,7 @@ const VerdocsFieldPayment$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     this.signatureComplete = createEvent(this, "signatureComplete", 7);
     this.initialComplete = createEvent(this, "initialComplete", 7);
     this.settingsChanged = createEvent(this, "settingsChanged", 7);
+    this.deleted = createEvent(this, "deleted", 7);
     this._fields = [];
     // envelopeFieldsFormGroup: FormGroup;
     this.signatureFile = null;

package/dist/components/verdocs-field-radio-button.js

@@ -21,6 +21,7 @@ const VerdocsFieldRadioButton$1 = /*@__PURE__*/ proxyCustomElement(class extends
     super();
     this.__registerHost();
     this.settingsChanged = createEvent(this, "settingsChanged", 7);
+    this.deleted = createEvent(this, "deleted", 7);
     this.field = null;
     this.option = 0;
     this.disabled = false;
@@ -55,7 +56,7 @@ const VerdocsFieldRadioButton$1 = /*@__PURE__*/ proxyCustomElement(class extends
     }
     return (h(Host, { class: { required, disabled }, style: { backgroundColor } }, h("input", { id: id, type: "radio", value: option.id, tabIndex: settings.order, name: this.field.name, checked: !!option.selected, disabled: disabled, required: settings.required }), h("label", { htmlFor: id }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("h6", null, "Field Settings"), h("verdocs-template-field-properties", { templateId: state.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
         var _a;
-        (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
+        (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
         return this.hideSettingsPanel();
       }, onSettingsChanged: e => {
         var _a;

package/dist/components/verdocs-field-signature.js

@@ -22,6 +22,7 @@ const VerdocsFieldSignature$1 = /*@__PURE__*/ proxyCustomElement(class extends H
     this.fieldChange = createEvent(this, "fieldChange", 7);
     this.settingsPress = createEvent(this, "settingsPress", 7);
     this.settingsChanged = createEvent(this, "settingsChanged", 7);
+    this.deleted = createEvent(this, "deleted", 7);
     this.field = null;
     this.name = '';
     this.disabled = false;
@@ -79,7 +80,7 @@ const VerdocsFieldSignature$1 = /*@__PURE__*/ proxyCustomElement(class extends H
     }
     return (h(Host, { class: { required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled }, style: { backgroundColor } }, value ? h("img", { src: value, alt: "Signature" }) : h("button", { onClick: () => !disabled && this.handleShow() }, "Signature"), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("h6", null, "Field Settings"), h("verdocs-template-field-properties", { templateId: state.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
         var _a;
-        (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
+        (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
         return this.hideSettingsPanel();
       }, onSettingsChanged: e => {
         var _a;

package/dist/components/verdocs-field-textarea.js

@@ -19,6 +19,7 @@ const VerdocsFieldTextarea$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     super();
     this.__registerHost();
     this.settingsChanged = createEvent(this, "settingsChanged", 7);
+    this.deleted = createEvent(this, "deleted", 7);
     this.field = null;
     this.disabled = false;
     this.editable = false;
@@ -52,7 +53,7 @@ const VerdocsFieldTextarea$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     }
     return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, h("textarea", { placeholder: settings.placeholder || '', tabIndex: settings.order, value: settings.value, disabled: disabled, required: settings.required, ref: el => (this.el = el) }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("h6", null, "Field Settings"), h("verdocs-template-field-properties", { templateId: state.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
         var _a;
-        (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
+        (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
         return this.hideSettingsPanel();
       }, onSettingsChanged: e => {
         var _a;

package/dist/components/verdocs-field-textbox.js

@@ -19,6 +19,7 @@ const VerdocsFieldTextbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     super();
     this.__registerHost();
     this.settingsChanged = createEvent(this, "settingsChanged", 7);
+    this.deleted = createEvent(this, "deleted", 7);
     this.field = null;
     this.disabled = false;
     this.editable = false;
@@ -53,7 +54,7 @@ const VerdocsFieldTextbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     }
     return (h(Host, { class: { required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled, done: this.done }, style: { backgroundColor } }, h("input", { type: "text", placeholder: settings === null || settings === void 0 ? void 0 : settings.placeholder, tabIndex: settings === null || settings === void 0 ? void 0 : settings.order, value: value, disabled: disabled, required: (_d = this.field) === null || _d === void 0 ? void 0 : _d.required, ref: el => (this.el = el) }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("h6", null, "Field Settings"), h("verdocs-template-field-properties", { templateId: state.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
         var _a;
-        (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
+        (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
         return this.hideSettingsPanel();
       }, onSettingsChanged: e => {
         var _a;

package/dist/components/verdocs-field-timestamp.js

@@ -20,6 +20,7 @@ const VerdocsFieldTimestamp$1 = /*@__PURE__*/ proxyCustomElement(class extends H
     super();
     this.__registerHost();
     this.settingsChanged = createEvent(this, "settingsChanged", 7);
+    this.deleted = createEvent(this, "deleted", 7);
     this.field = null;
     this.disabled = false;
     this.editable = false;
@@ -59,7 +60,7 @@ const VerdocsFieldTimestamp$1 = /*@__PURE__*/ proxyCustomElement(class extends H
       // is encoded in a ton of existing entries in the database and is hard to change.
       value: formatted, disabled: true, ref: el => (this.el = el) }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("h6", null, "Field Settings"), h("verdocs-template-field-properties", { templateId: state.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
         var _a;
-        (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
+        (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
         return this.hideSettingsPanel();
       }, onSettingsChanged: e => {
         var _a;

package/dist/components/verdocs-floating-menu.js

@@ -1,4 +1,126 @@
-import { V as VerdocsFloatingMenu$1, d as defineCustomElement$1 } from './verdocs-floating-menu2.js';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './verdocs-toolbar-icon2.js';
+
+const verdocsFloatingMenuCss = "verdocs-floating-menu{display:none}#verdocs-floating-menu{position:absolute;width:56px;height:56px;display:-ms-flexbox;display:flex;-ms-flex:0 0 fit-content;flex:0 0 fit-content}#verdocs-floating-menu:not(.force-closed):hover{height:500px}#verdocs-floating-menu:not(.force-closed):hover .trigger{-webkit-box-shadow:0 10px 25px #4c56cb;box-shadow:0 10px 25px #4c56cb;-webkit-transform:translatey(2px);transform:translatey(2px);-webkit-transition:all 0.3s;transition:all 0.3s}#verdocs-floating-menu:not(.force-closed):hover .options{display:-ms-flexbox;display:flex}#verdocs-floating-menu:not(.force-closed):hover .options .option{-webkit-animation:vfm-appear 0.1s forwards 0.2s;animation:vfm-appear 0.1s forwards 0.2s}#verdocs-floating-menu .trigger{position:absolute;width:56px;height:56px;background:#654dcb;bottom:0;border-radius:50%;left:0;right:0;margin:auto;color:white;line-height:52px;text-align:center;font-size:44px;z-index:100;-webkit-box-shadow:0 10px 25px -5px #4c56cb;box-shadow:0 10px 25px -5px #4c56cb;cursor:pointer;-webkit-transition:all 0.3s;transition:all 0.3s}#verdocs-floating-menu .options{width:56px;-ms-flex-direction:column;flex-direction:column;-ms-flex:0 0 fit-content;flex:0 0 fit-content;position:absolute;bottom:70px;display:none}#verdocs-floating-menu .option{background:#654dcb;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border-radius:50%;width:36px;height:36px;margin:5px auto;color:white;font-weight:500;text-align:center;line-height:36px;opacity:0}#verdocs-floating-menu verdocs-toolbar-icon .icon{display:-ms-flexbox;display:flex}#verdocs-floating-menu verdocs-toolbar-icon .icon svg{fill:#ffffff}@-webkit-keyframes vfm-appear{0%{opacity:0}30%{-webkit-transform:scale(0.4);transform:scale(0.4);opacity:0.3}70%{-webkit-transform:scale(1.2);transform:scale(1.2);opacity:0.6}100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes vfm-appear{0%{opacity:0}30%{-webkit-transform:scale(0.4);transform:scale(0.4);opacity:0.3}70%{-webkit-transform:scale(1.2);transform:scale(1.2);opacity:0.6}100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}";
+
+// @see https://stackoverflow.com/a/49186677/1812436
+const getScrollParent = node => {
+  const regex = /(auto|scroll)/;
+  const parents = (_node, ps) => {
+    if (_node.parentNode === null) {
+      return ps;
+    }
+    return parents(_node.parentNode, ps.concat([_node]));
+  };
+  const style = (_node, prop) => getComputedStyle(_node, null).getPropertyValue(prop);
+  const overflow = _node => style(_node, 'overflow') + style(_node, 'overflow-y') + style(_node, 'overflow-x');
+  const scroll = _node => regex.test(overflow(_node));
+  const scrollParent = _node => {
+    if (!(_node instanceof HTMLElement || _node instanceof SVGElement)) {
+      return;
+    }
+    const ps = parents(_node.parentNode, []);
+    for (let i = 0; i < ps.length; i += 1) {
+      if (scroll(ps[i])) {
+        return ps[i];
+      }
+    }
+    return document.scrollingElement || document.documentElement;
+  };
+  return scrollParent(node);
+};
+const VerdocsFloatingMenu$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.optionSelected = createEvent(this, "optionSelected", 7);
+    this.menuContainer = null;
+    this.scrollParent = null;
+    this.scrollParentParent = null;
+    this.options = [];
+  }
+  componentDidLoad() {
+    this.menuContainer = document.createElement('div');
+    this.menuContainer.id = 'verdocs-floating-menu';
+    let el = document.createElement('div');
+    el.className = 'trigger';
+    el.innerText = '+';
+    this.menuContainer.append(el);
+    el = document.createElement('div');
+    el.className = 'options';
+    this.menuContainer.append(el);
+    const localhandleSelect = this.handleSelect.bind(this);
+    this.options.forEach(option => {
+      const childEl = document.createElement('div');
+      childEl.className = 'option';
+      childEl.addEventListener('click', () => localhandleSelect(option));
+      el.append(childEl);
+      const iconEl = document.createElement('verdocs-toolbar-icon');
+      iconEl.setAttribute('icon', option.icon);
+      iconEl.setAttribute('text', option.tooltip);
+      iconEl.setAttribute('placement', 'left');
+      childEl.append(iconEl);
+    });
+    document.body.append(this.menuContainer);
+    this.scrollParent = getScrollParent(this.el);
+    if (this.scrollParent) {
+      this.scrollParentParent = this.scrollParent.parentElement;
+      this.repositionTrigger(this.scrollParent);
+    }
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.menuContainer) === null || _a === void 0 ? void 0 : _a.remove();
+  }
+  handleSelect(option) {
+    var _a;
+    (_a = this.optionSelected) === null || _a === void 0 ? void 0 : _a.emit(option);
+    const el = document.getElementById('verdocs-floating-menu');
+    if (el) {
+      el.className = 'force-closed';
+      setTimeout(() => {
+        el.className = '';
+      }, 100);
+    }
+  }
+  repositionTrigger(scrollParent) {
+    const scrollParentParent = scrollParent.parentElement;
+    if (scrollParentParent) {
+      const bounds = scrollParentParent.getBoundingClientRect();
+      const menu = document.getElementById('verdocs-floating-menu');
+      if (menu) {
+        menu.style.bottom = `${document.documentElement.clientHeight - (document.documentElement.scrollTop + bounds.bottom) + 10}px`;
+        menu.style.left = `${bounds.right - 80}px`;
+      }
+    }
+  }
+  render() {
+    return h(Host, null);
+  }
+  get el() { return this; }
+  static get style() { return verdocsFloatingMenuCss; }
+}, [0, "verdocs-floating-menu", {
+    "options": [16]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["verdocs-floating-menu", "verdocs-toolbar-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "verdocs-floating-menu":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VerdocsFloatingMenu$1);
+      }
+      break;
+    case "verdocs-toolbar-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
 
 const VerdocsFloatingMenu = VerdocsFloatingMenu$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/verdocs-preview.js

@@ -4,8 +4,8 @@ import { r as renderDocumentField, a as getRoleIndex } from './utils.js';
 import { s as state } from './templateStore.js';
 import { l as loadTemplate } from './Templates.js';
 import { S as SDKError } from './errors.js';
-import { d as defineCustomElement$3 } from './verdocs-document-page2.js';
-import { d as defineCustomElement$2 } from './verdocs-loader2.js';
+import { d as defineCustomElement$3 } from './verdocs-loader2.js';
+import { d as defineCustomElement$2 } from './verdocs-template-document-page2.js';
 
 const verdocsPreviewCss = "verdocs-preview{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:-ms-flexbox;display:flex;padding:15px;row-gap:15px;min-height:200px;position:relative;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column}verdocs-preview div,verdocs-preview canvas{-webkit-box-sizing:border-box;box-sizing:border-box}";
 
@@ -34,9 +34,6 @@ const VerdocsPreview$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
       (_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));
     }
   }
-  async handleFieldChange(field, e, optionId) {
-    console.log('[PREVIEW] handleFieldChange', field, e, optionId);
-  }
   handlePageRendered(e) {
     const pageInfo = e.detail;
     console.log('[PREVIEW] Page rendered', pageInfo);
@@ -53,7 +50,7 @@ const VerdocsPreview$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     pages.sort((a, b) => a.sequence - b.sequence);
     return (h(Host, null, pages.map(page => {
       console.log('rendering page', page);
-      return (h("verdocs-document-page", { pageImageUri: page.display_uri, virtualWidth: 612, virtualHeight: 792, pageNumber: page.sequence, onPageRendered: e => this.handlePageRendered(e), layers: [
+      return (h("verdocs-template-document-page", { templateId: page.template_id, documentId: page.document_id, pageNumber: page.sequence, virtualWidth: 612, virtualHeight: 792, onPageRendered: e => this.handlePageRendered(e), layers: [
           { name: 'page', type: 'canvas' },
           { name: 'controls', type: 'div' },
         ] }));
@@ -68,19 +65,19 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["verdocs-preview", "verdocs-document-page", "verdocs-loader"];
+  const components = ["verdocs-preview", "verdocs-loader", "verdocs-template-document-page"];
   components.forEach(tagName => { switch (tagName) {
     case "verdocs-preview":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, VerdocsPreview$1);
       }
       break;
-    case "verdocs-document-page":
+    case "verdocs-loader":
       if (!customElements.get(tagName)) {
         defineCustomElement$3();
       }
       break;
-    case "verdocs-loader":
+    case "verdocs-template-document-page":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }

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

@@ -1,41 +1,13 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as createTemplate, g as getTemplate } from './Templates2.js';
+import { c as createTemplateDocument } from './TemplateDocuments.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { S as SDKError } from './errors.js';
 import { d as defineCustomElement$3 } from './verdocs-button2.js';
 import { d as defineCustomElement$2 } from './verdocs-component-error2.js';
 import { d as defineCustomElement$1 } from './verdocs-loader2.js';
 
-/**
- * A TemplateDocument represents a PDF or other attachment in a Template.
- *
- * @module
- */
-/**
- * Create a Document for a particular Template.
- *
- * ```typescript
- * import {TemplateDocument} from '@verdocs/js-sdk/Templates';
- *
- * await TemplateDocument.createDocument((VerdocsEndpoint.getDefault(), templateID, params);
- * ```
- */
-var createTemplateDocument = function (endpoint, templateId, file, onUploadProgress) {
-    var formData = new FormData();
-    formData.append('document', file, file.name);
-    return endpoint.api //
-        .post("/templates/".concat(templateId, "/documents"), formData, {
-        timeout: 60000,
-        onUploadProgress: function (event) {
-            var total = event.total || 1;
-            var loaded = event.loaded || 0;
-            onUploadProgress === null || onUploadProgress === void 0 ? void 0 : onUploadProgress(Math.floor((loaded * 100) / (total || 1)), loaded, total || 1);
-        },
-    })
-        .then(function (r) { return r.data; });
-};
-
-const verdocsTemplateCreateCss = "verdocs-template-create{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-create form{background-color:#ffffff;padding:12px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-template-create form .upload-box{-webkit-box-sizing:border-box;box-sizing:border-box;max-width:320px;text-align:center;padding:44px 18px 66px;border:2px dashed #979797;color:rgba(0, 0, 0, 0.54)}verdocs-template-create form .upload-box svg{width:64px;fill:#5c6575}verdocs-template-create .loader-wrapper{background-color:#ffffff;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;width:320px;height:320px;text-align:center;border:2px dashed #979797;-ms-flex-pack:end;justify-content:flex-end;padding:0 0 30px 0}verdocs-template-create .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;margin-top:16px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end}verdocs-template-create .buttons .flex-fill{-ms-flex:1;flex:1}verdocs-template-create ::-webkit-input-placeholder{color:#aaaaaa}verdocs-template-create ::-moz-placeholder{color:#aaaaaa}verdocs-template-create :-ms-input-placeholder{color:#aaaaaa}verdocs-template-create ::-ms-input-placeholder{color:#aaaaaa}verdocs-template-create ::placeholder{color:#aaaaaa}";
+const verdocsTemplateCreateCss = "verdocs-template-create{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-create form{background-color:#ffffff;padding:12px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-template-create form .upload-box{-webkit-box-sizing:border-box;box-sizing:border-box;max-width:320px;text-align:center;padding:44px 18px 66px;border:2px dashed #979797;color:rgba(0, 0, 0, 0.54)}verdocs-template-create form .upload-box svg{width:64px;fill:#5c6575}verdocs-template-create .loader-wrapper{background-color:#ffffff;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;max-width:320px;height:320px;text-align:center;border:2px dashed #979797;-ms-flex-pack:end;justify-content:flex-end;padding:0 0 30px 0}verdocs-template-create .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;margin-top:16px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end}verdocs-template-create .buttons .flex-fill{-ms-flex:1;flex:1}verdocs-template-create ::-webkit-input-placeholder{color:#aaaaaa}verdocs-template-create ::-moz-placeholder{color:#aaaaaa}verdocs-template-create :-ms-input-placeholder{color:#aaaaaa}verdocs-template-create ::-ms-input-placeholder{color:#aaaaaa}verdocs-template-create ::placeholder{color:#aaaaaa}";
 
 const unicodeNBSP = ' ';
 const FileIcon = '<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>';

package/dist/components/verdocs-template-document-page.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface VerdocsTemplateDocumentPage extends Components.VerdocsTemplateDocumentPage, HTMLElement {}
+export const VerdocsTemplateDocumentPage: {
+  prototype: VerdocsTemplateDocumentPage;
+  new (): VerdocsTemplateDocumentPage;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;