@verdocs/web-sdk 4.2.158 → 5.0.0

package/dist/cjs/verdocs-field-payment.cjs.entry.js

@@ -2,11 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2589e4d1.js');
+const index = require('./index-ccac8641.js');
 const jsSdk = require('@verdocs/js-sdk');
-const TemplateRoleStore = require('./TemplateRoleStore-e8bb00ec.js');
-const TemplateFieldStore = require('./TemplateFieldStore-7bcc0f7a.js');
-require('./index-76d03a35.js');
+const Icons = require('./Icons-02a47df1.js');
+const Datastore = require('./Datastore-b1742da2.js');
 
 const verdocsFieldPaymentCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-field-payment{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:24px;height:24px;display:block;font-size:11px;position:relative;scroll-margin:20px 0;border:1px solid #cfa;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-payment.disabled{opacity:0.5}verdocs-field-payment button,verdocs-field-payment div{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-field-payment button{color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:11px}verdocs-field-payment button.hide{display:none}verdocs-field-payment input{float:left;font-family:Arial, sans-serif}verdocs-field-payment select{position:absolute;font-family:Arial, sans-serif;background:linear-gradient(55deg, transparent 50%, #333 50%), linear-gradient(125deg, #333 50%, transparent 50%), linear-gradient(to right, transparent, transparent);background-position:calc(100% - 7px) 4px, calc(100% - 3px) 4px, 100% 0;background-size:5px 5px, 5px 5px, 2.5em 2.5em;background-repeat:no-repeat;-webkit-appearance:none;-moz-appearance:none;appearance:none}verdocs-field-payment .frame{width:100%;height:100%;background-size:contain;text-align:left}verdocs-field-payment .frame img{position:absolute;height:auto;width:100%}verdocs-field-payment.focused{-webkit-animation:verdocs-field-pulse 0.4s 1;animation:verdocs-field-pulse 0.4s 1}verdocs-field-payment .settings-icon{position:absolute;top:-3px;left:-20px;display:inline-block;cursor:pointer;opacity:0.3}verdocs-field-payment .settings-icon svg{fill:#707ae5}verdocs-field-payment .settings-icon:hover{opacity:1}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}";
 const VerdocsFieldPaymentStyle0 = verdocsFieldPaymentCss;
@@ -14,15 +13,20 @@ const VerdocsFieldPaymentStyle0 = verdocsFieldPaymentCss;
 const VerdocsFieldPayment = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.signatureComplete = index.createEvent(this, "signatureComplete", 7);
-        this.initialComplete = index.createEvent(this, "initialComplete", 7);
         this.settingsChanged = index.createEvent(this, "settingsChanged", 7);
         this.deleted = index.createEvent(this, "deleted", 7);
-        this.fieldStore = null;
-        this.roleStore = null;
-        this.templateid = '';
+        this.source = 'template';
+        this.sourceid = '';
         this.fieldname = '';
         this.disabled = false;
+        this.done = false;
+        this.editable = false;
+        this.moveable = false;
+        this.xscale = 1;
+        this.yscale = 1;
+        this.pagenumber = 1;
+        this.showingProperties = false;
+        this.focused = false;
         this.fields = undefined;
         this.pageNum = undefined;
         this.roleName = undefined;
@@ -34,19 +38,12 @@ const VerdocsFieldPayment = class {
         this.currentSignatureId = undefined;
         this.currentInitial = undefined;
         this.currentInitialId = undefined;
-        this.focused = false;
         this.signed = false;
-        this.xscale = 1;
-        this.yscale = 1;
-        this.pagenumber = 1;
         this.preparedMessage = undefined;
         this.signatureUrl = '';
         this.roleindex = 0;
-        this.showingProperties = false;
     }
     componentWillLoad() {
-        this.fieldStore = TemplateFieldStore.getTemplateFieldStore(this.templateid);
-        this.roleStore = TemplateRoleStore.getTemplateRoleStore(this.templateid);
         // Load validators
         // Load fields
         // Get role names
@@ -58,6 +55,13 @@ const VerdocsFieldPayment = class {
             }
         }
     }
+    async focusField() {
+        // We don't have a visible input that we can actually focus on, so we fake it
+        this.focused = true;
+        setTimeout(() => {
+            this.focused = false;
+        }, 500);
+    }
     async showSettingsPanel() {
         const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`);
         if (settingsPanel && settingsPanel.showPanel) {
@@ -71,18 +75,27 @@ const VerdocsFieldPayment = class {
         }
     }
     render() {
-        var _a;
-        const field = this.fieldStore.get('fields').find(field => field.name === this.fieldname);
-        const roleIndex = TemplateRoleStore.getRoleIndex(this.roleStore, field.role_name);
-        const backgroundColor = field['rgba'] || jsSdk.getRGBA(roleIndex);
+        const { source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1 } = this;
+        const { index: index$1, field } = Datastore.Store.getField(source, sourceid, fieldname);
+        const backgroundColor = jsSdk.getRGBA(index$1);
         if (!field) {
             return index.h(index.Fragment, null);
         }
-        // TODO:
-        // const settings = getFieldSettings(field);
-        // const disabled = this.disabled ?? settings.disabled ?? false;
-        const disabled = (_a = this.disabled) !== null && _a !== void 0 ? _a : false;
-        return (index.h(index.Host, { class: { focused: this.focused, disabled }, style: { backgroundColor } }, index.h("button", { class: { hide: this.signed } }, "$"), this.signed ? index.h("div", { class: "frame" }) : index.h("div", { style: { display: 'none' } }), index.h("img", { width: "100%", height: "100%", src: this.signatureUrl, alt: "Payment Icon" })));
+        if (done) {
+            return index.h(index.Host, { class: { done } }, "$\u2713");
+        }
+        return (index.h(index.Host, { class: { focused, disabled }, style: { backgroundColor } }, index.h("button", { class: { hide: this.signed } }, "$"), this.signed ? index.h("div", { class: "frame" }) : index.h("div", { style: { display: 'none' } }), index.h("img", { width: "100%", height: "100%", src: this.signatureUrl, alt: "Payment Icon" }), editable && (index.h(index.Fragment, null, index.h("div", { id: `verdocs-settings-panel-trigger-${fieldname}`, style: { transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: Icons.SettingsIcon, onClick: (e) => {
+                e.stopPropagation();
+                this.showingProperties = !this.showingProperties;
+            } }), this.showingProperties && (index.h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${field.name}`, onClickAway: () => (this.showingProperties = false) }, index.h("verdocs-template-field-properties", { templateId: sourceid, fieldName: field.name, onClose: () => (this.showingProperties = false), onDelete: () => {
+                var _a;
+                (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: fieldname });
+                return this.hideSettingsPanel();
+            }, onSettingsChanged: e => {
+                var _a;
+                (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit(e.detail);
+                return this.hideSettingsPanel();
+            }, helpText: 'Check boxes allow the user to select one or more (non-exclusive) options.' })))))));
     }
 };
 VerdocsFieldPayment.style = VerdocsFieldPaymentStyle0;

package/dist/cjs/{verdocs-file-chooser_2.cjs.entry.js → verdocs-file-chooser.cjs.entry.js}

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2589e4d1.js');
+const index = require('./index-ccac8641.js');
 const jsSdk = require('@verdocs/js-sdk');
-const Icons = require('./Icons-9a6f2f7c.js');
+const Icons = require('./Icons-02a47df1.js');
 
 const verdocsFileChooserCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-file-chooser{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background-color:#ffffff;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-file-chooser .upload-box{text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;padding:40px 15px;color:rgba(0, 0, 0, 0.54)}verdocs-file-chooser .upload-box svg{width:64px;height:64px;fill:#5c6575}verdocs-file-chooser .selected-filename{font-size:20px;font-weight:bold;overflow-wrap:anywhere}verdocs-file-chooser .or-prefer{height:20px;margin:20px 0;font-size:16px}";
 const VerdocsFileChooserStyle0 = verdocsFileChooserCss;
@@ -36,23 +36,4 @@ const VerdocsFileChooser = class {
 };
 VerdocsFileChooser.style = VerdocsFileChooserStyle0;
 
-const verdocsProgressBarCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-progress-bar{font-family:\"Inter\", \"Barlow\", sans-serif;width:100%;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column}verdocs-progress-bar .labels{display:-ms-flexbox;display:flex;margin:0 0 8px 0;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:justify;justify-content:space-between}verdocs-progress-bar .labels .label{display:-ms-flexbox;display:flex;font-size:14px;font-weight:600;margin-right:8px;color:#33364b}verdocs-progress-bar .bar{display:-ms-flexbox;display:flex;-ms-flex:0 0 10px;flex:0 0 10px;border-radius:5px;background-color:#cccccc}verdocs-progress-bar .bar .slider{display:-ms-flexbox;display:flex;border-radius:5px;background-color:#55bc81}";
-const VerdocsProgressBarStyle0 = verdocsProgressBarCss;
-
-const VerdocsProgressBar = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.label = '';
-        this.showPercent = false;
-        this.percent = 0;
-    }
-    render() {
-        const widthPercent = Math.ceil((100 * Math.min(this.percent, 100)) / 100);
-        console.log('Rendering progress bar', { widthPercent, label: this.label, showPercent: this.showPercent, percent: this.percent });
-        return (index.h(index.Host, { key: 'c57b566587b7fe5f95f7082964dc7d27c46008cb' }, index.h("div", { key: 'b44243b4c65cdd5ddb7a47028db07e47e1c9373b', class: "labels" }, this.label && index.h("div", { key: '58715d2cd0a47260618472ed06d3eeda095ea852', class: "label" }, this.label), this.showPercent && index.h("div", { key: '38b9fa2f2180eee29cdc6aff0562475c9d6cc943', class: "label" }, this.percent, "%")), index.h("div", { key: '1258f3696cb5852865e7d1af59bf2acb7acfda50', class: "bar" }, index.h("div", { key: 'eb1346d2b9f7ccce786c358ef247fd3ec62de67f', class: "slider", style: { width: `${widthPercent}%` } }))));
-    }
-};
-VerdocsProgressBar.style = VerdocsProgressBarStyle0;
-
 exports.verdocs_file_chooser = VerdocsFileChooser;
-exports.verdocs_progress_bar = VerdocsProgressBar;

package/dist/cjs/verdocs-kba-dialog_2.cjs.entry.js

@@ -2,10 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2589e4d1.js');
+const index = require('./index-ccac8641.js');
 const jsSdk = require('@verdocs/js-sdk');
-const utils = require('./utils-6d673ca1.js');
+const utils = require('./utils-ba1e95e0.js');
 const errors = require('./errors-017fb835.js');
+const Datastore = require('./Datastore-b1742da2.js');
 require('./_commonjsHelpers-e6ff1d6e.js');
 require('./Types-7a726ff3.js');
 require('./format-dc0f3757.js');
@@ -79,14 +80,15 @@ const VerdocsView = class {
         this.another = index.createEvent(this, "another", 7);
         this.view = index.createEvent(this, "view", 7);
         this.next = index.createEvent(this, "next", 7);
+        this.envelopeListenerId = null;
         this.endpoint = null;
         this.envelopeId = '';
-        this.envelope = null;
         this.headerTargetId = null;
         this.canceling = false;
-        this.roleNames = [];
         this.showCancelDone = false;
         this.showLoadError = false;
+        this.loading = true;
+        this.envelope = null;
     }
     async componentWillLoad() {
         var _a, _b, _c;
@@ -98,12 +100,12 @@ const VerdocsView = class {
             console.error(`[VIEW] Missing required envelopeId`);
             return;
         }
+        this.listenToEnvelope();
         if (!this.envelope) {
             try {
                 console.log('[VIEW] Loading envelope...');
                 this.envelope = await jsSdk.getEnvelope(this.endpoint, this.envelopeId);
                 console.log('[VIEW] Loaded envelope', this.envelope);
-                this.roleNames = this.envelope.recipients.map(r => r.role_name);
             }
             catch (e) {
                 this.showLoadError = true;
@@ -120,6 +122,23 @@ const VerdocsView = class {
             headerTarget.append(headerEl);
         }
     }
+    disconnectedCallback() {
+        this.unlistenToEnvelope();
+    }
+    async listenToEnvelope() {
+        console.log('[SIDEBAR] Loading envelope', this.envelopeId);
+        this.unlistenToEnvelope();
+        Datastore.Store.subscribe('envelopes', this.envelopeId, () => jsSdk.getEnvelope(this.endpoint, this.envelopeId), false, (envelope) => {
+            this.envelope = envelope;
+            this.loading = false;
+        });
+    }
+    unlistenToEnvelope() {
+        if (this.envelopeListenerId) {
+            Datastore.Store.store.delListener(this.envelopeListenerId);
+            this.envelopeListenerId = null;
+        }
+    }
     handlePageRendered(_e) {
         // const pageInfo = e.detail as IDocumentPageInfo;
         // console.log('[VIEW] Page rendered', pageInfo);
@@ -196,6 +215,9 @@ const VerdocsView = class {
     }
     render() {
         var _a;
+        if (this.loading) {
+            return (index.h(index.Host, null, index.h("verdocs-loader", null)));
+        }
         if (this.showLoadError) {
             return (index.h(index.Host, null, index.h("verdocs-ok-dialog", { heading: "Unable to View Envelope", message: `Sorry, that envelope is not valid.`, buttonLabel: "OK", onNext: () => {
                     this.showLoadError = false;

package/dist/cjs/verdocs-ok-dialog.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2589e4d1.js');
+const index = require('./index-ccac8641.js');
 
 const verdocsOkDialogCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-ok-dialog{font-family:\"Inter\", \"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-ok-dialog.closed{display:none}verdocs-ok-dialog .background-overlay{position:fixed;z-index:10000;top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background:rgba(0, 0, 0, 0.4980392157)}verdocs-ok-dialog .dialog{max-width:60%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;border-radius:4px;overflow:hidden;-webkit-box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4);box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4)}verdocs-ok-dialog .heading{display:-ms-flexbox;display:flex;font-size:16px;-ms-flex-direction:row;flex-direction:row;padding:8px 16px;font-weight:bold;color:#ffffff;background:#46497d}verdocs-ok-dialog .content{font-size:16px;background:#ffffff;padding:20px}verdocs-ok-dialog .buttons{display:-ms-flexbox;display:flex;margin:30px 0 0 0;padding:0 20px;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}verdocs-ok-dialog .buttons verdocs-button{margin-left:16px}";
 const VerdocsOkDialogStyle0 = verdocsOkDialogCss;

package/dist/cjs/verdocs-organization-card_2.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2589e4d1.js');
+const index = require('./index-ccac8641.js');
 const format = require('./format-dc0f3757.js');
 
 const verdocsOrganizationCardCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-organization-card{font-family:\"Inter\", \"Barlow\", sans-serif;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;border:1px solid #cccccc;background:#ffffff;border-radius:8px;padding:7px 15px}verdocs-organization-card .icon{-ms-flex:0;flex:0;height:24px;width:24px;margin:0 14px 0 0}verdocs-organization-card .icon svg{fill:#aeb4bf;height:24px;width:24px}verdocs-organization-card .content{margin-top:2px}.verdocs-org-card-popup{font-family:\"Inter\", \"Barlow\", sans-serif;background:#ffffff;border-radius:10px;width:326px;padding:20px 40px 0 40px;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;border:1px solid #cccccc}.verdocs-org-card-popup .popup-header-with-logo{display:-ms-flexbox;display:flex;-ms-flex:0;flex:0;gap:20px;-ms-flex-direction:column;flex-direction:column;margin:0 0 20px 0;font-size:21px;line-height:16px;color:#4c56cb}.verdocs-org-card-popup .popup-header-with-logo img{max-width:300px;max-height:50px}.verdocs-org-card-popup .popup-header{display:-ms-flexbox;display:flex;-ms-flex:0;flex:0;gap:20px;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:end;align-items:flex-end;margin:0 0 20px 0;font-size:21px;line-height:16px;color:#4c56cb}.verdocs-org-card-popup .popup-body{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-size:14px;text-transform:uppercase}.verdocs-org-card-popup .status{-webkit-transform:scale(1.5);transform:scale(1.5);width:24px;height:24px}.verdocs-org-card-popup .field{margin:0 0 20px 0}.verdocs-org-card-popup .field strong{color:#7b7b9a;display:block;margin:0 0 5px 0}.verdocs-org-card-popup .field a{color:#654dcb;text-transform:uppercase}";

package/dist/cjs/verdocs-pagination_2.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2589e4d1.js');
+const index = require('./index-ccac8641.js');
 const jsSdk = require('@verdocs/js-sdk');
-const utils = require('./utils-6d673ca1.js');
+const utils = require('./utils-ba1e95e0.js');
 const popper = require('./popper-31badbf8.js');
 require('./_commonjsHelpers-e6ff1d6e.js');
 require('./Types-7a726ff3.js');