@verdocs/web-sdk 1.9.10 → 1.9.14

package/dist/cjs/verdocs-template-create_4.cjs.entry.js

@@ -4,14 +4,43 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1329d89c.js');
 const Templates = require('./Templates-eb100ab3.js');
-const TemplateDocuments = require('./TemplateDocuments-01c6e570.js');
 const Types = require('./Types-da57ce69.js');
-const VerdocsEndpoint = require('./VerdocsEndpoint-db38e942.js');
+const VerdocsEndpoint = require('./VerdocsEndpoint-8c408e5b.js');
 const errors = require('./errors-0396da3d.js');
 const Colors = require('./Colors-e809dcc9.js');
-const utils = require('./utils-84236321.js');
-const templateStore = require('./templateStore-92828c3c.js');
-const Templates$1 = require('./Templates-399073ea.js');
+const utils = require('./utils-e0f38696.js');
+const templateStore = require('./templateStore-974781a8.js');
+const Templates$1 = require('./Templates-0051d647.js');
+require('./index-eb130f52.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: 10000,
+        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{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 .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}";
 
@@ -55,7 +84,7 @@ const VerdocsTemplateCreate = class {
     try {
       const template = await Templates.createTemplate(this.endpoint, { name: this.file.name });
       console.log('created template', template);
-      const template_document = await TemplateDocuments.createTemplateDocument(this.endpoint, template.id, this.file);
+      const template_document = await createTemplateDocument(this.endpoint, template.id, this.file);
       console.log('created document', template_document);
       const finalTemplate = await Templates.getTemplate(this.endpoint, template.id);
       console.log('[CREATE] Created template', finalTemplate);
@@ -103,27 +132,8 @@ var interact_min = createCommonjsModule(function (module, exports) {
 
 const interact = /*@__PURE__*/getDefaultExportFromCjs(interact_min);
 
-const verdocsTemplateFieldsCss = "verdocs-template-fields{position:relative;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-fields .page-0{padding:65px 15px 0 15px;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-template-fields .page-0 .user-placed-fields{height:100px;position:relative;background:#ffffff;-webkit-box-shadow:0 0 10px 5px #0000000f;box-shadow:0 0 10px 5px #0000000f}verdocs-template-fields .page-0 .user-placed-fields .title{top:0;left:0;color:#ffffff;font-size:12px;padding:3px 6px;font-weight:bold;position:absolute;background:#46497d}verdocs-template-fields .fields-bar{height:50px;display:-ms-flexbox;display:flex;z-index:10000;position:fixed;padding:5px 20px;line-height:28px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-webkit-box-sizing:border-box;box-sizing:border-box;background:#46497d}verdocs-template-fields .fields-bar .label{color:#ffffff;font-size:14px;font-weight:bold;margin-right:8px}verdocs-template-fields .fields-bar .icon{margin:0 4px;display:-ms-flexbox;display:flex;-webkit-transform:scale(0.8, 0.8);transform:scale(0.8, 0.8)}verdocs-template-fields .fields-bar .icon svg{fill:#ffffff}verdocs-template-fields .fields-bar .operation{border:none;outline:none;color:#ffffff;cursor:pointer;font-size:16px;margin-left:10px;background:transparent;text-transform:uppercase}verdocs-template-fields .fields-bar .operation:disabled{color:#cccccc;cursor:inherit;pointer-events:none}";
+const verdocsTemplateFieldsCss = "verdocs-template-fields{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-fields .page-0{padding:65px 15px 0 15px;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-template-fields .page-0 .user-placed-fields{height:100px;position:relative;background:#ffffff;-webkit-box-shadow:0 0 10px 5px #0000000f;box-shadow:0 0 10px 5px #0000000f}verdocs-template-fields .page-0 .user-placed-fields .title{top:0;left:0;color:#ffffff;font-size:12px;padding:3px 6px;font-weight:bold;position:absolute;background:#46497d}verdocs-template-fields .fields-bar{height:50px;display:-ms-flexbox;display:flex;z-index:10000;position:fixed;padding:5px 20px;line-height:28px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-webkit-box-sizing:border-box;box-sizing:border-box;background:#46497d}verdocs-template-fields .fields-bar .label{color:#ffffff;font-size:14px;font-weight:bold;margin-right:8px}verdocs-template-fields .fields-bar .icon{margin:0 4px;display:-ms-flexbox;display:flex;-webkit-transform:scale(0.8, 0.8);transform:scale(0.8, 0.8)}verdocs-template-fields .fields-bar .icon svg{fill:#ffffff}verdocs-template-fields .fields-bar .operation{border:none;outline:none;color:#ffffff;cursor:pointer;font-size:16px;margin-left:10px;background:transparent;text-transform:uppercase}verdocs-template-fields .fields-bar .operation:disabled{color:#cccccc;cursor:inherit;pointer-events:none}verdocs-template-fields .pages{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-template-fields .pages div,verdocs-template-fields .pages canvas{-webkit-box-sizing:border-box;box-sizing:border-box}";
 
-/**
- * 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
- * specified component if it's already set and replace it with the new value, without touching the other components that
- * may already be set. Note that this operation moves the component to the end of the transform chain so it's not meant
- * to be used for order-sensitive components e.g. translate-then-rotate.
- */
-const updateCssTransform = (el, key, value) => {
-  // e.g. 'scale(1.87908, 1.87908) translate(0px, 0px);'
-  const currentTransform = el.style.transform;
-  // e.g. ['scale(1.87908, 1.87908)', 'scale', '1.87908, 1.87908', ...], [ 'translate(0px, 0px)', 'translate', '0px, 0px']]
-  const components = [...currentTransform.matchAll(/(\w+)\(([^)]*)\)/gi)];
-  el.style.transform = [
-    components //
-      .filter(component => component[1] !== key) // Remove the entry if it's already set
-      .map(component => component[0]),
-    `${key}(${value})`,
-  ].join(' ');
-};
 const 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>';
 const iconMultiline = '<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>';
 const iconCheck = '<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>';
@@ -175,11 +185,11 @@ const VerdocsTemplateFields = class {
   handlePageRendered(e) {
     const pageInfo = e.detail;
     console.log('[FIELDS] Page rendered', pageInfo);
-    const fields = templateStore.state.fields.filter(field => field.page_sequence === pageInfo.renderedPage.pageNumber);
+    const fields = templateStore.state.fields.filter(field => field.page_sequence === pageInfo.pageNumber);
     // const fields = this.fields.filter(field => field.page_sequence === pageInfo.renderedPage.pageNumber);
     console.log('[FIELDS] Fields on page', fields);
     fields.forEach(field => {
-      const el = utils.renderDocumentField(field, pageInfo.renderedPage, utils.getRoleIndex(templateStore.state.roleNames, field.role_name), this.handleFieldChange, true, true, true);
+      const el = utils.renderDocumentField(field, pageInfo, utils.getRoleIndex(templateStore.state.roleNames, field.role_name), this.handleFieldChange, true, true, true);
       // const el = renderDocumentField(field, pageInfo.renderedPage, getRoleIndex(this.roles, field.role_name), this.handleFieldChange, true, true, true);
       if (!el) {
         return;
@@ -188,8 +198,8 @@ const VerdocsTemplateFields = class {
         el.setAttribute('roleindex', utils.getRoleIndex(templateStore.state.roleNames, e.detail));
         // el.setAttribute('roleindex', getRoleIndex(this.roles, e.detail));
       });
-      el.setAttribute('xScale', pageInfo.renderedPage.xScale);
-      el.setAttribute('yScale', pageInfo.renderedPage.yScale);
+      el.setAttribute('xScale', pageInfo.xScale);
+      el.setAttribute('yScale', pageInfo.yScale);
       interact(el).draggable({
         listeners: {
           start(event) {
@@ -204,7 +214,7 @@ const VerdocsTemplateFields = class {
             const newY = event.dy / yScale + oldY;
             event.target.setAttribute('posX', newX);
             event.target.setAttribute('posy', newY);
-            updateCssTransform(event.target, 'translate', `${newX}px, ${newY}px`);
+            utils.updateCssTransform(event.target, 'translate', `${newX}px, ${newY}px`);
           },
           end(event) {
             console.log('[FIELDS] Drag ended', event);
@@ -229,13 +239,19 @@ const VerdocsTemplateFields = class {
       },
       page_sequence: 0,
     };
-    if (templateStore.state.loading) {
+    // TODO: Render a better error
+    if (templateStore.state.loading || !templateStore.state.template) {
       return (index.h(index.Host, null, index.h("verdocs-loader", null)));
     }
-    return (index.h(index.Host, null, templateStore.state.template ? (index.h(index.Fragment, null, index.h("div", { class: "fields-bar", ref: el => (this.toolbarEl = el) }, index.h("div", { class: "label" }, "Add Field:"), index.h("verdocs-toolbar-icon", { icon: iconSingleline, text: "Single-line Text Box", onClick: () => console.log('single press') }), index.h("verdocs-toolbar-icon", { icon: iconMultiline, text: "Multi-line Text Box", onClick: () => console.log('multi press') }), index.h("verdocs-toolbar-icon", { icon: iconCheck, text: "Checkbox", onClick: () => console.log('check press') }), index.h("verdocs-toolbar-icon", { icon: iconRadio, text: "Radio Button", onClick: () => console.log('radio press') }), index.h("verdocs-toolbar-icon", { icon: iconDatepicker, text: "Date Picker", onClick: () => console.log('date press') }), index.h("verdocs-toolbar-icon", { icon: iconSignature, text: "Signature", onClick: () => console.log('signature press') }), index.h("verdocs-toolbar-icon", { icon: iconInitial, text: "Initials", onClick: () => console.log('initial press') }), index.h("div", { style: { flex: '1' } }), index.h("button", { onClick: () => { var _a; return (_a = this.next) === null || _a === void 0 ? void 0 : _a.emit(templateStore.state.template); }, disabled: true, class: "operation" }, "Save"), index.h("button", { onClick: () => { var _a; return (_a = this.cancel) === null || _a === void 0 ? void 0 : _a.emit(); }, class: "operation" }, "Close")), index.h("div", { class: "page-0", ref: el => (this.page0El = el) }, index.h("div", { class: "user-placed-fields" }, index.h("div", { class: "title" }, "User-Placed Fields"), index.h("verdocs-field-signature", { field: testField, style: { width: '82px', height: '41px', left: '20px', top: '40px', transform: 'scale(1,1)', backgroundColor: Colors.getRGBA(0) }, moveable: true, editable: true }))), index.h("verdocs-view", { templateId: this.templateId, endpoint: this.endpoint, onPageRendered: e => this.handlePageRendered(e), pageLayers: [
-        { name: 'page', type: 'canvas' },
-        { name: 'controls', type: 'div' },
-      ] }))) : (index.h("div", null, "Error loading Template. Please try again later."))));
+    const pages = [...templateStore.state.template.pages];
+    pages.sort((a, b) => a.sequence - b.sequence);
+    return (index.h(index.Host, null, index.h("div", { class: "fields-bar", ref: el => (this.toolbarEl = el) }, index.h("div", { class: "label" }, "Add Field:"), index.h("verdocs-toolbar-icon", { icon: iconSingleline, text: "Single-line Text Box", onClick: () => console.log('single press') }), index.h("verdocs-toolbar-icon", { icon: iconMultiline, text: "Multi-line Text Box", onClick: () => console.log('multi press') }), index.h("verdocs-toolbar-icon", { icon: iconCheck, text: "Checkbox", onClick: () => console.log('check press') }), index.h("verdocs-toolbar-icon", { icon: iconRadio, text: "Radio Button", onClick: () => console.log('radio press') }), index.h("verdocs-toolbar-icon", { icon: iconDatepicker, text: "Date Picker", onClick: () => console.log('date press') }), index.h("verdocs-toolbar-icon", { icon: iconSignature, text: "Signature", onClick: () => console.log('signature press') }), index.h("verdocs-toolbar-icon", { icon: iconInitial, text: "Initials", onClick: () => console.log('initial press') }), index.h("div", { style: { flex: '1' } }), index.h("button", { onClick: () => { var _a; return (_a = this.next) === null || _a === void 0 ? void 0 : _a.emit(templateStore.state.template); }, disabled: true, class: "operation" }, "Save"), index.h("button", { onClick: () => { var _a; return (_a = this.cancel) === null || _a === void 0 ? void 0 : _a.emit(); }, class: "operation" }, "Close")), index.h("div", { class: "page-0", ref: el => (this.page0El = el) }, index.h("div", { class: "user-placed-fields" }, index.h("div", { class: "title" }, "User-Placed Fields"), index.h("verdocs-field-signature", { field: testField, style: { width: '82px', height: '41px', left: '20px', top: '40px', transform: 'scale(1,1)', backgroundColor: Colors.getRGBA(0) }, moveable: true, editable: true }))), index.h("div", { class: "pages" }, pages.map(page => {
+      console.log('rendering page', page);
+      return (index.h("verdocs-document-page", { pageImageUri: page.display_uri, virtualWidth: 612, virtualHeight: 792, pageNumber: page.sequence, onPageRendered: e => this.handlePageRendered(e), layers: [
+          { name: 'page', type: 'canvas' },
+          { name: 'controls', type: 'div' },
+        ] }));
+    }))));
   }
 };
 VerdocsTemplateFields.style = verdocsTemplateFieldsCss;