@verdocs/web-sdk 4.2.157 → 5.0.0

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

@@ -1,8 +1,7 @@
-import { r as registerInstance, c as createEvent, h, H as Host, F as Fragment } from './index-c8587076.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host } from './index-272d51a4.js';
 import { getRGBA } from '@verdocs/js-sdk';
-import { g as getTemplateRoleStore, a as getRoleIndex } from './TemplateRoleStore-2fef1fdb.js';
-import { g as getTemplateFieldStore } from './TemplateFieldStore-909147d8.js';
-import './index-24d8ae6a.js';
+import { S as SettingsIcon } from './Icons-190fd11d.js';
+import { S as Store } from './Datastore-52fcbac6.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;
@@ -10,15 +9,20 @@ const VerdocsFieldPaymentStyle0 = verdocsFieldPaymentCss;
 const VerdocsFieldPayment = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        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.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;
@@ -30,19 +34,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 = getTemplateFieldStore(this.templateid);
-        this.roleStore = getTemplateRoleStore(this.templateid);
         // Load validators
         // Load fields
         // Get role names
@@ -54,6 +51,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) {
@@ -67,18 +71,27 @@ const VerdocsFieldPayment = class {
         }
     }
     render() {
-        var _a;
-        const field = this.fieldStore.get('fields').find(field => field.name === this.fieldname);
-        const roleIndex = getRoleIndex(this.roleStore, field.role_name);
-        const backgroundColor = field['rgba'] || getRGBA(roleIndex);
+        const { source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1 } = this;
+        const { index, field } = Store.getField(source, sourceid, fieldname);
+        const backgroundColor = getRGBA(index);
         if (!field) {
             return h(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 (h(Host, { class: { focused: this.focused, disabled }, style: { backgroundColor } }, h("button", { class: { hide: this.signed } }, "$"), this.signed ? h("div", { class: "frame" }) : h("div", { style: { display: 'none' } }), h("img", { width: "100%", height: "100%", src: this.signatureUrl, alt: "Payment Icon" })));
+        if (done) {
+            return h(Host, { class: { done } }, "$\u2713");
+        }
+        return (h(Host, { class: { focused, disabled }, style: { backgroundColor } }, h("button", { class: { hide: this.signed } }, "$"), this.signed ? h("div", { class: "frame" }) : h("div", { style: { display: 'none' } }), h("img", { width: "100%", height: "100%", src: this.signatureUrl, alt: "Payment Icon" }), editable && (h(Fragment, null, 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: SettingsIcon, onClick: (e) => {
+                e.stopPropagation();
+                this.showingProperties = !this.showingProperties;
+            } }), this.showingProperties && (h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${field.name}`, onClickAway: () => (this.showingProperties = false) }, 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/{components/p-fe2dca8c.js → esm/verdocs-file-chooser.entry.js}

@@ -1,15 +1,13 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-7786799a.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-272d51a4.js';
 import { VerdocsEndpoint } from '@verdocs/js-sdk';
-import { u as unicodeNBSP } from './p-b0766439.js';
-import { d as defineCustomElement$1 } from './p-ac7578f6.js';
+import { u as unicodeNBSP } from './Icons-190fd11d.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;
 
-const VerdocsFileChooser = /*@__PURE__*/ proxyCustomElement(class VerdocsFileChooser extends H {
-    constructor() {
-        super();
-        this.__registerHost();
+const VerdocsFileChooser = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
         this.fileSelected = createEvent(this, "fileSelected", 7);
         this.endpoint = VerdocsEndpoint.getDefault();
         this.file = undefined;
@@ -31,28 +29,7 @@ const VerdocsFileChooser = /*@__PURE__*/ proxyCustomElement(class VerdocsFileCho
         const buttonlabel = this.file ? 'Select a different file' : 'Select a file from your computer';
         return (h(Host, { key: 'be9ae4e6e32d7c284001b7fea41d96f39b642005' }, h("input", { key: '0bc7cd1766b630372ea380300575dfd239bc86e4', type: "file", multiple: true, id: "verdocs-file-chooser", accept: "application/pdf,.pdf,.doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document", style: { display: 'none' }, onChange: e => this.handleFileChanged(e) }), h("div", { key: 'dbd3aa4e9d64b4bd427f4c6e198d92b10e94dfff', class: "upload-box" }, h("div", { key: '41a10b9ffbe862bedc300cdbb8d2a366dc00414e', class: "selected-filename" }, this.file ? this.file.name : 'Drag a file here'), h("div", { key: '128679d890e1c68ff1c7fb47abd4f638db453b87', class: "or-prefer" }, this.file ? unicodeNBSP : 'Or, if you prefer...'), h("verdocs-button", { key: '277c4246513e40dc2bc5e7f0f7d7130d52904813', label: buttonlabel, size: "small", onClick: e => this.handleSelectFile(e) }))));
     }
-    static get style() { return VerdocsFileChooserStyle0; }
-}, [0, "verdocs-file-chooser", {
-        "endpoint": [16],
-        "file": [32]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["verdocs-file-chooser", "verdocs-button"];
-    components.forEach(tagName => { switch (tagName) {
-        case "verdocs-file-chooser":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, VerdocsFileChooser);
-            }
-            break;
-        case "verdocs-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
+};
+VerdocsFileChooser.style = VerdocsFileChooserStyle0;
 
-export { VerdocsFileChooser as V, defineCustomElement as d };
+export { VerdocsFileChooser as verdocs_file_chooser };

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

@@ -1,7 +1,8 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, g as getElement } from './index-c8587076.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, g as getElement } from './index-272d51a4.js';
 import { VerdocsEndpoint, getEnvelope, getDocumentDownloadLink, cancelEnvelope, userCanCancelEnvelope, integerSequence } from '@verdocs/js-sdk';
-import { s as saveEnvelopesAsZip } from './utils-6ecd6558.js';
+import { s as saveEnvelopesAsZip } from './utils-47de6f79.js';
 import { S as SDKError } from './errors-887f1e88.js';
+import { S as Store } from './Datastore-52fcbac6.js';
 import './_commonjsHelpers-bdec4bbd.js';
 import './Types-95d86a44.js';
 import './format-b8602175.js';
@@ -75,14 +76,15 @@ const VerdocsView = class {
         this.another = createEvent(this, "another", 7);
         this.view = createEvent(this, "view", 7);
         this.next = 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;
@@ -94,12 +96,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 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;
@@ -116,6 +118,23 @@ const VerdocsView = class {
             headerTarget.append(headerEl);
         }
     }
+    disconnectedCallback() {
+        this.unlistenToEnvelope();
+    }
+    async listenToEnvelope() {
+        console.log('[SIDEBAR] Loading envelope', this.envelopeId);
+        this.unlistenToEnvelope();
+        Store.subscribe('envelopes', this.envelopeId, () => getEnvelope(this.endpoint, this.envelopeId), false, (envelope) => {
+            this.envelope = envelope;
+            this.loading = false;
+        });
+    }
+    unlistenToEnvelope() {
+        if (this.envelopeListenerId) {
+            Store.store.delListener(this.envelopeListenerId);
+            this.envelopeListenerId = null;
+        }
+    }
     handlePageRendered(_e) {
         // const pageInfo = e.detail as IDocumentPageInfo;
         // console.log('[VIEW] Page rendered', pageInfo);
@@ -192,6 +211,9 @@ const VerdocsView = class {
     }
     render() {
         var _a;
+        if (this.loading) {
+            return (h(Host, null, h("verdocs-loader", null)));
+        }
         if (this.showLoadError) {
             return (h(Host, null, h("verdocs-ok-dialog", { heading: "Unable to View Envelope", message: `Sorry, that envelope is not valid.`, buttonLabel: "OK", onNext: () => {
                     this.showLoadError = false;

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-c8587076.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-272d51a4.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/esm/verdocs-organization-card_2.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, c as createEvent } from './index-c8587076.js';
+import { r as registerInstance, h, H as Host, c as createEvent } from './index-272d51a4.js';
 import { f as format } from './format-b8602175.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/esm/verdocs-pagination_2.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-c8587076.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-272d51a4.js';
 import { integerSequence } from '@verdocs/js-sdk';
-import { h as renderedTextWidth } from './utils-6ecd6558.js';
+import { i as renderedTextWidth } from './utils-47de6f79.js';
 import { c as createPopper } from './popper-0fbeff6d.js';
 import './_commonjsHelpers-bdec4bbd.js';
 import './Types-95d86a44.js';