@verdocs/web-sdk 4.2.158 → 5.0.1

package/dist/components/{p-fe533b11.js → p-a22a3b1b.js}

@@ -1,31 +1,32 @@
-import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } from './p-7786799a.js';
-import { VerdocsEndpoint, getTemplateDocumentPageDisplayUri } from '@verdocs/js-sdk';
-import { g as getTemplateFieldStore } from './p-00d39dca.js';
-import { t as throttle, d as getControlStyles, g as getFieldId } from './p-b0af9b72.js';
-import { d as defineCustomElement$m } from './p-ac7578f6.js';
-import { d as defineCustomElement$l } from './p-4dc4418a.js';
-import { d as defineCustomElement$k } from './p-921297ba.js';
-import { d as defineCustomElement$j } from './p-12594438.js';
-import { d as defineCustomElement$i } from './p-03660739.js';
-import { d as defineCustomElement$h } from './p-0162bdd3.js';
-import { d as defineCustomElement$g } from './p-1b60debe.js';
-import { d as defineCustomElement$f } from './p-b679d760.js';
-import { d as defineCustomElement$e } from './p-72e959a7.js';
-import { d as defineCustomElement$d } from './p-6e8c00bc.js';
-import { d as defineCustomElement$c } from './p-8f942993.js';
-import { d as defineCustomElement$b } from './p-b8cd75c0.js';
-import { d as defineCustomElement$a } from './p-cdf871dd.js';
-import { d as defineCustomElement$9 } from './p-69881420.js';
-import { d as defineCustomElement$8 } from './p-3518350d.js';
-import { d as defineCustomElement$7 } from './p-83245875.js';
-import { d as defineCustomElement$6 } from './p-8b27ce22.js';
-import { d as defineCustomElement$5 } from './p-263dc67d.js';
-import { d as defineCustomElement$4 } from './p-d3170dcd.js';
-import { d as defineCustomElement$3 } from './p-b2bf338f.js';
-import { d as defineCustomElement$2 } from './p-e4a852b5.js';
-import { d as defineCustomElement$1 } from './p-a7bbe96b.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, F as Fragment } from './p-324ed895.js';
+import { VerdocsEndpoint, getTemplateDocumentPageDisplayUri, getTemplate } from '@verdocs/js-sdk';
+import { t as throttle, d as getControlStyles, g as getFieldId } from './p-4bc5ac82.js';
+import { S as Store } from './p-da4d4eed.js';
+import { d as defineCustomElement$n } from './p-0e332769.js';
+import { d as defineCustomElement$m } from './p-3201d529.js';
+import { d as defineCustomElement$l } from './p-84ae0283.js';
+import { d as defineCustomElement$k } from './p-9c3fd545.js';
+import { d as defineCustomElement$j } from './p-4afcdc84.js';
+import { d as defineCustomElement$i } from './p-fd96322b.js';
+import { d as defineCustomElement$h } from './p-0a69031f.js';
+import { d as defineCustomElement$g } from './p-49153610.js';
+import { d as defineCustomElement$f } from './p-ecc818bb.js';
+import { d as defineCustomElement$e } from './p-b0c02eb8.js';
+import { d as defineCustomElement$d } from './p-1ca705bc.js';
+import { d as defineCustomElement$c } from './p-d9704a51.js';
+import { d as defineCustomElement$b } from './p-dd701894.js';
+import { d as defineCustomElement$a } from './p-0ca7012b.js';
+import { d as defineCustomElement$9 } from './p-b9034018.js';
+import { d as defineCustomElement$8 } from './p-1ae5d7e0.js';
+import { d as defineCustomElement$7 } from './p-cf6ea837.js';
+import { d as defineCustomElement$6 } from './p-5d4bbcd0.js';
+import { d as defineCustomElement$5 } from './p-315d6592.js';
+import { d as defineCustomElement$4 } from './p-5a9cea40.js';
+import { d as defineCustomElement$3 } from './p-0d063bf9.js';
+import { d as defineCustomElement$2 } from './p-c8fedb4e.js';
+import { d as defineCustomElement$1 } from './p-f990140a.js';
 
-const verdocsTemplateDocumentPageCss = "@-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-template-document-page{width:100%;position:relative}verdocs-template-document-page .verdocs-template-document-page-layer{position:absolute;top:0;left:0;right:0;bottom:0;-webkit-box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.0588235294);box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.0588235294)}verdocs-template-document-page .verdocs-template-document-page-layer.img{width:100%}";
+const verdocsTemplateDocumentPageCss = "@-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-template-document-page{width:100%;position:relative}verdocs-template-document-page .verdocs-template-document-page-layer{position:absolute;top:0;left:0;right:0;bottom:0;-webkit-box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.0588235294);box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.0588235294)}verdocs-template-document-page .verdocs-template-document-page-layer.img{width:100%}verdocs-template-document-page .placeholder{opacity:0.1;width:612px;height:792px;-webkit-box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.0588235294);box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.0588235294)}";
 const VerdocsTemplateDocumentPageStyle0 = verdocsTemplateDocumentPageCss;
 
 const VerdocsTemplateDocumentPage = /*@__PURE__*/ proxyCustomElement(class VerdocsTemplateDocumentPage extends H {
@@ -33,7 +34,7 @@ const VerdocsTemplateDocumentPage = /*@__PURE__*/ proxyCustomElement(class Verdo
         super();
         this.__registerHost();
         this.pageRendered = createEvent(this, "pageRendered", 7);
-        this.fieldStore = null;
+        this.templateListenerId = null;
         this.endpoint = VerdocsEndpoint.getDefault();
         this.editable = false;
         this.disabled = false;
@@ -54,10 +55,12 @@ const VerdocsTemplateDocumentPage = /*@__PURE__*/ proxyCustomElement(class Verdo
         this.pageDisplayUri = '';
         this.xScale = 1;
         this.yScale = 1;
+        this.loading = true;
+        this.template = null;
     }
     async componentWillLoad() {
         this.pageDisplayUri = await getTemplateDocumentPageDisplayUri(this.endpoint, this.documentId, this.pageNumber);
-        this.fieldStore = getTemplateFieldStore(this.templateId);
+        this.listenToTemplate();
     }
     componentDidLoad() {
         this.resizeObserver = new ResizeObserver(throttle(entries => {
@@ -77,12 +80,21 @@ const VerdocsTemplateDocumentPage = /*@__PURE__*/ proxyCustomElement(class Verdo
     disconnectedCallback() {
         var _a;
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.unlistenToTemplate();
+    }
+    async listenToTemplate() {
+        this.unlistenToTemplate();
+        Store.subscribe('templates', this.templateId, () => getTemplate(this.endpoint, this.templateId), false, (template) => {
+            this.template = template;
+            this.loading = false;
+        });
+    }
+    unlistenToTemplate() {
+        if (this.templateListenerId) {
+            Store.store.delListener(this.templateListenerId);
+            this.templateListenerId = null;
+        }
     }
-    // Left here for documentation purposes in case we find an edge case where this isn't true. But we apparently don't need this.
-    // When we add the resize observer it will always be triggered at least once so notifying here as well is just a dupe.
-    // componentDidRender() {
-    //   this.notifyRenderedSize();
-    // }
     notifyRenderedSize() {
         // We skip one notification because by default we will always get at least two, one when rendering the initial size
         // and a second once we're able to compute the scale size, when the resizeObserver sets renderedWidth/renderedHeight.
@@ -115,58 +127,63 @@ const VerdocsTemplateDocumentPage = /*@__PURE__*/ proxyCustomElement(class Verdo
         });
     }
     render() {
+        if (this.loading) {
+            return (h(Host, null, h("img", { src: "https://public-assets.verdocs.com/loading-placeholder.png", class: "placeholder", alt: "Placeholder page" })));
+        }
         const height = `${this.renderedHeight}px`;
-        return (h(Host, { key: '1e8a98b5849ce5cc222baf9f7bcd544456c07a35', id: `${this.containerId}`, style: { height, flex: `0 0 ${height}` } }, this.layers.map(layer => layer.type === 'div' ? (h("div", { class: "verdocs-template-document-page-layer", id: `${this.containerId}-${layer.name}`, style: { height } }, layer.name === 'controls' &&
-            this.fieldStore
-                .get('fields')
-                .filter(field => field && field.page === this.pageNumber)
-                .map(field => {
-                var _a, _b;
-                const id = getFieldId(field);
-                let { name, type, multiline } = field;
-                const { xScale, yScale, templateId, editable, disabled, done, pageNumber } = this;
-                if (((_a = field['setting']) === null || _a === void 0 ? void 0 : _a.leading) > 0 || ((_b = field['settings']) === null || _b === void 0 ? void 0 : _b.leading) > 0) {
-                    type = 'textarea';
-                    multiline = true;
-                }
-                switch (type) {
-                    case 'textbox':
-                        return (h("verdocs-field-textbox", { id: id, fieldname: name, templateid: templateId, editable: editable, multiline: multiline, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, xScale, yScale) }));
-                    case 'textarea':
-                        return (h("verdocs-field-textarea", { id: id, fieldname: name, templateid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, xScale, yScale) }));
-                    case 'date':
-                        return (h("verdocs-field-date", { id: id, fieldname: name, templateid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, xScale, yScale) }));
-                    case 'attachment':
-                        return (h("verdocs-field-attachment", { id: id, fieldname: name, templateid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, xScale, yScale) }));
-                    case 'dropdown':
-                        return (h("verdocs-field-dropdown", { id: id, fieldname: name, templateid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, xScale, yScale) }));
-                    case 'initial':
-                        return (h("verdocs-field-initial", { id: id, fieldname: name, templateid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, xScale, yScale) }));
-                    case 'signature':
-                        return (h("verdocs-field-signature", { id: id, fieldname: name, templateid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, this.xScale, this.yScale) }));
-                    case 'timestamp':
-                        return (h("verdocs-field-timestamp", { id: id, fieldname: name, templateid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, xScale, yScale) }));
-                    case 'checkbox':
-                        return (h("verdocs-field-checkbox", { id: id, fieldname: name, templateid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, xScale, yScale) }));
-                    case 'radio':
-                        return (h("verdocs-field-radio", { id: id, fieldname: name, templateid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, xScale, yScale) }));
-                    default:
-                        return h(Fragment, null, name);
-                }
-            }))) : this.pageDisplayUri ? (h("img", { class: "verdocs-template-document-page-layer img", id: `${this.containerId}-${layer.name}`, src: this.pageDisplayUri, alt: `Page ${this.pageNumber}`, "aria-hidden": true, loading: "lazy", onLoad: (e) => {
-                // Note that all we really care about is the aspect ratio. We track the natural Width and Height but they aren't really that
-                // useful as individual values. The image will already have been scaled down to fit a DIV for display (100%, auto height).
-                // Builder places fields offset into the rendered display area, not the original document's dimensions. So its X/Y values
-                // for a field are based on the responsive Web view the Template editor was seeing. The IMG was scaled down there in the
-                // exact same way, so we just honor it. We capture the natural width and height here more as information. Then we use the
-                // aspect ratio to adjust the "virtual" height in case the page is not 8.5"x11".
-                // TODO: Store this in the DB with each page.
-                this.naturalWidth = e.target.naturalWidth;
-                this.naturalHeight = e.target.naturalHeight;
-                this.aspectRatio = this.naturalWidth / this.naturalHeight;
-                this.virtualHeight = this.virtualWidth / this.aspectRatio;
-                this.renderedHeight = e.target.offsetWidth / this.aspectRatio;
-            } })) : (h("div", null)))));
+        return (h(Host, { id: `${this.containerId}`, style: { height, flex: `0 0 ${height}` } }, this.layers.map(layer => {
+            var _a;
+            return layer.type === 'div' ? (h("div", { class: "verdocs-template-document-page-layer", id: `${this.containerId}-${layer.name}`, style: { height } }, layer.name === 'controls' &&
+                (((_a = this.template) === null || _a === void 0 ? void 0 : _a.fields) || [])
+                    .filter(field => field && field.page === this.pageNumber)
+                    .map(field => {
+                    var _a, _b;
+                    const id = getFieldId(field);
+                    let { name, type, multiline } = field;
+                    const { xScale, yScale, templateId, editable, disabled, done, pageNumber } = this;
+                    if (((_a = field['setting']) === null || _a === void 0 ? void 0 : _a.leading) > 0 || ((_b = field['settings']) === null || _b === void 0 ? void 0 : _b.leading) > 0) {
+                        type = 'textarea';
+                        multiline = true;
+                    }
+                    switch (type) {
+                        case 'textbox':
+                            return (h("verdocs-field-textbox", { id: id, fieldname: name, source: "template", sourceid: templateId, editable: editable, multiline: multiline, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, xScale, yScale) }));
+                        case 'textarea':
+                            return (h("verdocs-field-textarea", { id: id, fieldname: name, source: "template", sourceid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, xScale, yScale) }));
+                        case 'date':
+                            return (h("verdocs-field-date", { id: id, fieldname: name, source: "template", sourceid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, xScale, yScale) }));
+                        case 'attachment':
+                            return (h("verdocs-field-attachment", { id: id, fieldname: name, source: "template", sourceid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, xScale, yScale) }));
+                        case 'dropdown':
+                            return (h("verdocs-field-dropdown", { id: id, fieldname: name, source: "template", sourceid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, xScale, yScale) }));
+                        case 'initial':
+                            return (h("verdocs-field-initial", { id: id, fieldname: name, source: "template", sourceid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, xScale, yScale) }));
+                        case 'signature':
+                            return (h("verdocs-field-signature", { id: id, fieldname: name, source: "template", sourceid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, this.xScale, this.yScale) }));
+                        case 'timestamp':
+                            return (h("verdocs-field-timestamp", { id: id, fieldname: name, source: "template", sourceid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, xScale, yScale) }));
+                        case 'checkbox':
+                            return (h("verdocs-field-checkbox", { id: id, fieldname: name, source: "template", sourceid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, xScale, yScale) }));
+                        case 'radio':
+                            return (h("verdocs-field-radio", { id: id, fieldname: name, source: "template", sourceid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, xScale, yScale) }));
+                        default:
+                            return h(Fragment, null, name);
+                    }
+                }))) : this.pageDisplayUri ? (h("img", { class: "verdocs-template-document-page-layer img", id: `${this.containerId}-${layer.name}`, src: this.pageDisplayUri, alt: `Page ${this.pageNumber}`, "aria-hidden": true, loading: "lazy", onLoad: (e) => {
+                    // Note that all we really care about is the aspect ratio. We track the natural Width and Height but they aren't really that
+                    // useful as individual values. The image will already have been scaled down to fit a DIV for display (100%, auto height).
+                    // Builder places fields offset into the rendered display area, not the original document's dimensions. So its X/Y values
+                    // for a field are based on the responsive Web view the Template editor was seeing. The IMG was scaled down there in the
+                    // exact same way, so we just honor it. We capture the natural width and height here more as information. Then we use the
+                    // aspect ratio to adjust the "virtual" height in case the page is not 8.5"x11".
+                    // TODO: Store this in the DB with each page.
+                    this.naturalWidth = e.target.naturalWidth;
+                    this.naturalHeight = e.target.naturalHeight;
+                    this.aspectRatio = this.naturalWidth / this.naturalHeight;
+                    this.virtualHeight = this.virtualWidth / this.aspectRatio;
+                    this.renderedHeight = e.target.offsetWidth / this.aspectRatio;
+                } })) : (h("div", null));
+        })));
     }
     get container() { return this; }
     static get style() { return VerdocsTemplateDocumentPageStyle0; }
@@ -190,13 +207,15 @@ const VerdocsTemplateDocumentPage = /*@__PURE__*/ proxyCustomElement(class Verdo
         "skipFirstNotification": [32],
         "pageDisplayUri": [32],
         "xScale": [32],
-        "yScale": [32]
+        "yScale": [32],
+        "loading": [32],
+        "template": [32]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["verdocs-template-document-page", "verdocs-button", "verdocs-checkbox", "verdocs-component-error", "verdocs-field-attachment", "verdocs-field-checkbox", "verdocs-field-date", "verdocs-field-dropdown", "verdocs-field-initial", "verdocs-field-radio", "verdocs-field-signature", "verdocs-field-textarea", "verdocs-field-textbox", "verdocs-field-timestamp", "verdocs-help-icon", "verdocs-initial-dialog", "verdocs-ok-dialog", "verdocs-portal", "verdocs-select-input", "verdocs-signature-dialog", "verdocs-template-field-properties", "verdocs-text-input", "verdocs-upload-dialog"];
+    const components = ["verdocs-template-document-page", "verdocs-button", "verdocs-checkbox", "verdocs-component-error", "verdocs-field-attachment", "verdocs-field-checkbox", "verdocs-field-date", "verdocs-field-dropdown", "verdocs-field-initial", "verdocs-field-radio", "verdocs-field-signature", "verdocs-field-textarea", "verdocs-field-textbox", "verdocs-field-timestamp", "verdocs-help-icon", "verdocs-initial-dialog", "verdocs-loader", "verdocs-ok-dialog", "verdocs-portal", "verdocs-select-input", "verdocs-signature-dialog", "verdocs-template-field-properties", "verdocs-text-input", "verdocs-upload-dialog"];
     components.forEach(tagName => { switch (tagName) {
         case "verdocs-template-document-page":
             if (!customElements.get(tagName)) {
@@ -205,75 +224,80 @@ function defineCustomElement() {
             break;
         case "verdocs-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$m();
+                defineCustomElement$n();
             }
             break;
         case "verdocs-checkbox":
             if (!customElements.get(tagName)) {
-                defineCustomElement$l();
+                defineCustomElement$m();
             }
             break;
         case "verdocs-component-error":
             if (!customElements.get(tagName)) {
-                defineCustomElement$k();
+                defineCustomElement$l();
             }
             break;
         case "verdocs-field-attachment":
             if (!customElements.get(tagName)) {
-                defineCustomElement$j();
+                defineCustomElement$k();
             }
             break;
         case "verdocs-field-checkbox":
             if (!customElements.get(tagName)) {
-                defineCustomElement$i();
+                defineCustomElement$j();
             }
             break;
         case "verdocs-field-date":
             if (!customElements.get(tagName)) {
-                defineCustomElement$h();
+                defineCustomElement$i();
             }
             break;
         case "verdocs-field-dropdown":
             if (!customElements.get(tagName)) {
-                defineCustomElement$g();
+                defineCustomElement$h();
             }
             break;
         case "verdocs-field-initial":
             if (!customElements.get(tagName)) {
-                defineCustomElement$f();
+                defineCustomElement$g();
             }
             break;
         case "verdocs-field-radio":
             if (!customElements.get(tagName)) {
-                defineCustomElement$e();
+                defineCustomElement$f();
             }
             break;
         case "verdocs-field-signature":
             if (!customElements.get(tagName)) {
-                defineCustomElement$d();
+                defineCustomElement$e();
             }
             break;
         case "verdocs-field-textarea":
             if (!customElements.get(tagName)) {
-                defineCustomElement$c();
+                defineCustomElement$d();
             }
             break;
         case "verdocs-field-textbox":
             if (!customElements.get(tagName)) {
-                defineCustomElement$b();
+                defineCustomElement$c();
             }
             break;
         case "verdocs-field-timestamp":
             if (!customElements.get(tagName)) {
-                defineCustomElement$a();
+                defineCustomElement$b();
             }
             break;
         case "verdocs-help-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$9();
+                defineCustomElement$a();
             }
             break;
         case "verdocs-initial-dialog":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "verdocs-loader":
             if (!customElements.get(tagName)) {
                 defineCustomElement$8();
             }

package/dist/components/{p-df4ac086.js → p-a3e12c74.js}

@@ -1,6 +1,6 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-7786799a.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-324ed895.js';
 import { randomString } from '@verdocs/js-sdk';
-import { d as defineCustomElement$1 } from './p-8b27ce22.js';
+import { d as defineCustomElement$1 } from './p-5d4bbcd0.js';
 
 const verdocsDropdownCss = "@-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-dropdown{height:26px;display:block;position:relative;font-family:\"Inter\", \"Barlow\", sans-serif}verdocs-dropdown .arrow{width:32px;height:26px;background:#fff;cursor:pointer;border-radius:4px;-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;border:1px solid #cccccc;-ms-flex-pack:center;justify-content:center}verdocs-dropdown .arrow svg{fill:#55bc81;-webkit-transition:0.3s;transition:0.3s}verdocs-dropdown.open .arrow{background:#4c56cb;border:1px solid #707ae5}verdocs-dropdown.open .arrow svg{-webkit-transform:scaleY(-1);transform:scaleY(-1);fill:#fff}#verdocs-dropdown-menu-items{width:200px;z-index:10000;position:absolute;border-radius:5px;background:#33354c;border:1px solid #654dcb}.verdocs-dropdown-menu-separator{height:1px;margin-top:5px;padding-top:5px;border-top:1px solid rgba(255, 255, 255, 0.3725490196)}.verdocs-dropdown-menu-option{width:100%;color:#fff;border:none;display:block;text-align:left;background:none;text-wrap:nowrap;padding:10px 20px}.verdocs-dropdown-menu-option:hover{cursor:pointer;background:#55bc81}.verdocs-dropdown-menu-option[disabled]{color:#aaaaaa}.verdocs-dropdown-menu-option[disabled]:hover{cursor:inherit;background:transparent;color:#aaaaaa}";
 const VerdocsDropdownStyle0 = verdocsDropdownCss;

package/dist/components/{p-6e8c00bc.js → p-b0c02eb8.js}

@@ -1,17 +1,17 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host, F as Fragment } from './p-7786799a.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, F as Fragment } from './p-324ed895.js';
 import { getRGBA } from '@verdocs/js-sdk';
-import { g as getTemplateRoleStore, a as getRoleIndex } from './p-9b5a4f9e.js';
-import { g as getTemplateFieldStore } from './p-00d39dca.js';
 import { S as SettingsIcon } from './p-b0766439.js';
-import { d as defineCustomElement$9 } from './p-ac7578f6.js';
-import { d as defineCustomElement$8 } from './p-4dc4418a.js';
-import { d as defineCustomElement$7 } from './p-921297ba.js';
-import { d as defineCustomElement$6 } from './p-69881420.js';
-import { d as defineCustomElement$5 } from './p-8b27ce22.js';
-import { d as defineCustomElement$4 } from './p-263dc67d.js';
-import { d as defineCustomElement$3 } from './p-d3170dcd.js';
-import { d as defineCustomElement$2 } from './p-b2bf338f.js';
-import { d as defineCustomElement$1 } from './p-e4a852b5.js';
+import { S as Store } from './p-da4d4eed.js';
+import { d as defineCustomElement$a } from './p-0e332769.js';
+import { d as defineCustomElement$9 } from './p-3201d529.js';
+import { d as defineCustomElement$8 } from './p-84ae0283.js';
+import { d as defineCustomElement$7 } from './p-0ca7012b.js';
+import { d as defineCustomElement$6 } from './p-1ae5d7e0.js';
+import { d as defineCustomElement$5 } from './p-5d4bbcd0.js';
+import { d as defineCustomElement$4 } from './p-315d6592.js';
+import { d as defineCustomElement$3 } from './p-5a9cea40.js';
+import { d as defineCustomElement$2 } from './p-0d063bf9.js';
+import { d as defineCustomElement$1 } from './p-c8fedb4e.js';
 
 const verdocsFieldSignatureCss = "@-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-signature{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:83px;height:36px;display:block;font-size:11px;position:relative;scroll-margin:20px 0;letter-spacing:0.3px;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-signature label{top:-14px;left:-1px;height:14px;color:white;padding:0 4px;font-size:9px;line-height:13px;position:absolute;background:#4a4a99;border-top-left-radius:2px;border-top-right-radius:2px}verdocs-field-signature.done{border:none;opacity:1}verdocs-field-signature img{display:block;max-width:100%;max-height:100%}verdocs-field-signature.disabled img{opacity:0.5}verdocs-field-signature button{cursor:inherit;-webkit-box-sizing:border-box;box-sizing:border-box;border:none;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-signature button.hide{display:none}verdocs-field-signature.required{border:1px solid rgb(204, 0, 0)}verdocs-field-signature.focused{-webkit-animation:verdocs-field-pulse 0.4s 1;animation:verdocs-field-pulse 0.4s 1}verdocs-field-signature verdocs-button-panel{top:-3px;left:-2px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-signature verdocs-button-panel[data-active],verdocs-field-signature verdocs-button-panel:hover{opacity:1}verdocs-field-signature verdocs-button-panel .icon svg{fill:#333333}verdocs-field-signature verdocs-button-panel .icon:hover svg{fill:#000000}verdocs-field-signature .settings-icon{position:absolute;top:-3px;left:-20px;display:inline-block;cursor:pointer;opacity:0.3}verdocs-field-signature .settings-icon svg{fill:#707ae5}verdocs-field-signature .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 VerdocsFieldSignatureStyle0 = verdocsFieldSignatureCss;
@@ -24,9 +24,8 @@ const VerdocsFieldSignature = /*@__PURE__*/ proxyCustomElement(class VerdocsFiel
         this.settingsPress = createEvent(this, "settingsPress", 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.name = '';
         this.disabled = false;
@@ -78,23 +77,19 @@ const VerdocsFieldSignature = /*@__PURE__*/ proxyCustomElement(class VerdocsFiel
         }
         this.showingProperties = false;
     }
-    async componentWillLoad() {
-        this.fieldStore = getTemplateFieldStore(this.templateid);
-        this.roleStore = getTemplateRoleStore(this.templateid);
-    }
     render() {
-        const { templateid, fieldname = '', editable = false, focused, done = false, disabled = false, xscale = 1, yscale = 1 } = this;
-        const field = this.fieldStore.get('fields').find(field => field.name === fieldname);
-        const { required = false, role_name = '', value = '', label = '' } = field || {};
-        const { base64 } = field.settings || {};
-        const backgroundColor = getRGBA(getRoleIndex(this.roleStore, role_name));
+        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 { required = false, value = '', label = '', settings = {} } = field || {};
+        const { base64 } = settings;
+        const backgroundColor = getRGBA(index);
         if (done) {
             return h(Host, { class: { done } }, value && h("img", { src: base64, alt: "" }));
         }
         return (h(Host, { class: { required, disabled, done, focused }, style: { backgroundColor } }, label && h("label", null, label), base64 ? h("img", { src: base64, alt: "" }) : h("button", { onClick: () => !disabled && this.handleShow() }, "Signature"), 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-${fieldname}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: templateid, fieldName: fieldname, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+            } }), this.showingProperties && (h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${fieldname}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: sourceid, fieldName: fieldname, onClose: () => this.hideSettingsPanel(), onDelete: () => {
                 var _a;
                 (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: fieldname });
                 return this.hideSettingsPanel();
@@ -106,7 +101,8 @@ const VerdocsFieldSignature = /*@__PURE__*/ proxyCustomElement(class VerdocsFiel
     }
     static get style() { return VerdocsFieldSignatureStyle0; }
 }, [0, "verdocs-field-signature", {
-        "templateid": [513],
+        "source": [513],
+        "sourceid": [513],
         "fieldname": [513],
         "name": [513],
         "disabled": [516],
@@ -127,7 +123,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["verdocs-field-signature", "verdocs-button", "verdocs-checkbox", "verdocs-component-error", "verdocs-help-icon", "verdocs-portal", "verdocs-select-input", "verdocs-signature-dialog", "verdocs-template-field-properties", "verdocs-text-input"];
+    const components = ["verdocs-field-signature", "verdocs-button", "verdocs-checkbox", "verdocs-component-error", "verdocs-help-icon", "verdocs-loader", "verdocs-portal", "verdocs-select-input", "verdocs-signature-dialog", "verdocs-template-field-properties", "verdocs-text-input"];
     components.forEach(tagName => { switch (tagName) {
         case "verdocs-field-signature":
             if (!customElements.get(tagName)) {
@@ -136,20 +132,25 @@ function defineCustomElement() {
             break;
         case "verdocs-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$9();
+                defineCustomElement$a();
             }
             break;
         case "verdocs-checkbox":
             if (!customElements.get(tagName)) {
-                defineCustomElement$8();
+                defineCustomElement$9();
             }
             break;
         case "verdocs-component-error":
             if (!customElements.get(tagName)) {
-                defineCustomElement$7();
+                defineCustomElement$8();
             }
             break;
         case "verdocs-help-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "verdocs-loader":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }

package/dist/components/{p-6b369b14.js → p-b16c202a.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, d as Host } from './p-7786799a.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-324ed895.js';
 
 const verdocsSpinnerCss = "verdocs-spinner{display:inline-block;border-radius:50%;-webkit-animation:spin 1s ease-in-out infinite;animation:spin 1s ease-in-out infinite}@keyframes spin{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes spin{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}";
 const VerdocsSpinnerStyle0 = verdocsSpinnerCss;

package/dist/components/{p-3518350d.js → p-b9034018.js}

@@ -1,7 +1,7 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-7786799a.js';
-import { d as defineCustomElement$3 } from './p-ac7578f6.js';
-import { d as defineCustomElement$2 } from './p-69881420.js';
-import { d as defineCustomElement$1 } from './p-e4a852b5.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-324ed895.js';
+import { d as defineCustomElement$3 } from './p-0e332769.js';
+import { d as defineCustomElement$2 } from './p-0ca7012b.js';
+import { d as defineCustomElement$1 } from './p-c8fedb4e.js';
 
 const verdocsInitialDialogCss = "@-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-initial-dialog{font-family:\"Inter\", \"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;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-initial-dialog .dialog{width:100%;max-width:340px;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);background:#f9f9f9}verdocs-initial-dialog .heading{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;padding:20px 20px 0 20px;line-height:28px;font-size:20px;font-weight:500}verdocs-initial-dialog .content{font-size:14px;padding:20px}verdocs-initial-dialog .buttons{display:-ms-flexbox;display:flex;margin:20px 0 0 0;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;align-items:center}verdocs-initial-dialog .buttons verdocs-button{margin-left:16px}verdocs-initial-dialog canvas{background:#fff;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 auto;width:300px;height:79px;max-width:100%;-webkit-box-shadow:0 0 6px 0 rgba(0, 0, 0, 0.1215686275);box-shadow:0 0 6px 0 rgba(0, 0, 0, 0.1215686275)}verdocs-initial-dialog .disclaimer{text-align:justify;padding:8px 0;font-size:11px;line-height:14px;color:rgba(0, 0, 0, 0.54)}verdocs-initial-dialog .as-shown{font-size:11px;margin:4px 0 20px 4px;color:rgba(0, 0, 0, 0.54)}verdocs-initial-dialog .tabs{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}verdocs-initial-dialog .tabs .tab{padding:8px 15px;cursor:pointer}verdocs-initial-dialog .tabs .tab.active{border-bottom:2px solid #cccccc}verdocs-initial-dialog .tabs .tab:hover{color:#55bc81}";
 const VerdocsInitialDialogStyle0 = verdocsInitialDialogCss;