@verdocs/web-sdk 4.2.157 → 5.0.0

package/dist/components/{p-9a85b700.js → p-258c3c53.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-4c8548d4.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-1030e0b1.js';
+import { d as defineCustomElement$j } from './p-649a2ae7.js';
+import { d as defineCustomElement$i } from './p-caa41754.js';
+import { d as defineCustomElement$h } from './p-82a3f92e.js';
+import { d as defineCustomElement$g } from './p-4e08dcdd.js';
+import { d as defineCustomElement$f } from './p-1fc15f94.js';
+import { d as defineCustomElement$e } from './p-642af221.js';
+import { d as defineCustomElement$d } from './p-bdc03b91.js';
+import { d as defineCustomElement$c } from './p-b9a18099.js';
+import { d as defineCustomElement$b } from './p-81794664.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-263dc67d.js → p-315d6592.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 verdocsSelectInputCss = "@-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-select-input{font-family:\"Inter\", \"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 0 10px 0;display:block}verdocs-select-input .input-element{-webkit-box-sizing:border-box;box-sizing:border-box;background:#ffffff;border:1px solid #cccccc;border-radius:4px;background:#ffffff;color:#092c4c;width:100%;font-size:16px;height:28px;padding:2px 8px}verdocs-select-input .input-element::-webkit-input-placeholder{color:#aaaaaa;opacity:1}verdocs-select-input .input-element::-moz-placeholder{color:#aaaaaa;opacity:1}verdocs-select-input .input-element:-ms-input-placeholder{color:#aaaaaa;opacity:1}verdocs-select-input .input-element::-ms-input-placeholder{color:#aaaaaa;opacity:1}verdocs-select-input .input-element::placeholder{color:#aaaaaa;opacity:1}verdocs-select-input .input-label{display:block;color:#555570;font-weight:700;font-size:14px;margin:0 0 4px 0}";
 const VerdocsSelectInputStyle0 = verdocsSelectInputCss;

package/dist/components/{p-4dc4418a.js → p-3201d529.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 verdocsCheckboxCss = "@charset \"UTF-8\";@-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-checkbox{line-height:18px;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-checkbox label>input[type=checkbox]{display:none}verdocs-checkbox label>input[type=checkbox]+*::before{content:\"\";width:20px;height:20px;-ms-flex-negative:0;flex-shrink:0;margin-right:8px;line-height:20px;border-radius:2px;border-style:solid;border-width:0.1rem;display:inline-block;vertical-align:bottom;border-color:#aeb4bf}verdocs-checkbox label>input[type=checkbox]:checked+*{color:#55bc81}verdocs-checkbox label>input[type=checkbox]:checked+*::before{content:\"✓\";color:white;text-align:center;background:#55bc81;border-color:#55bc81}verdocs-checkbox.dark label>input[type=checkbox]+*::before{border-color:#ffffff}verdocs-checkbox.dark label>input[type=checkbox]:checked+*::before{background:#55bc81;border-color:#55bc81}";
 const VerdocsCheckboxStyle0 = verdocsCheckboxCss;

package/dist/components/{p-7786799a.js → p-324ed895.js}

@@ -2,7 +2,7 @@ const NAMESPACE = 'verdocs-web-sdk';
 const BUILD = /* verdocs-web-sdk */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: true, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: true, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: false, hostListenerTargetDocument: true, hostListenerTargetParent: false, hostListenerTargetWindow: true, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: false, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: false, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: true, taskQueue: true, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
 
 /*
- Stencil Client Platform v4.22.2 | MIT Licensed | https://stenciljs.com
+ Stencil Client Platform v4.22.3 | MIT Licensed | https://stenciljs.com
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -1410,13 +1410,17 @@ var proxyCustomElement = (Cstr, compactMeta) => {
     cmpMeta.$attrsToReflect$ = [];
   }
   const originalDisconnectedCallback = Cstr.prototype.disconnectedCallback;
+  let hasHostListenerAttached = false;
   Object.assign(Cstr.prototype, {
     __registerHost() {
       registerHost(this, cmpMeta);
     },
     connectedCallback() {
-      const hostRef = getHostRef(this);
-      addHostEventListeners(this, hostRef, cmpMeta.$listeners$);
+      if (!hasHostListenerAttached) {
+        const hostRef = getHostRef(this);
+        addHostEventListeners(this, hostRef, cmpMeta.$listeners$);
+        hasHostListenerAttached = true;
+      }
       connectedCallback(this);
     },
     disconnectedCallback() {
@@ -1473,4 +1477,4 @@ var setNonce = (nonce) => plt.$nonce$ = nonce;
 // src/runtime/platform-options.ts
 var setPlatformOptions = (opts) => Object.assign(plt, opts);
 
-export { BUILD as B, Fragment as F, H, NAMESPACE as N, setNonce as a, setPlatformOptions as b, createEvent as c, Host as d, getAssetPath as g, h, proxyCustomElement as p, setAssetPath as s };
+export { Fragment as F, H, setNonce as a, setPlatformOptions as b, createEvent as c, Host as d, getAssetPath as g, h, proxyCustomElement as p, setAssetPath as s };

package/dist/components/{p-4c8548d4.js → p-4bc5ac82.js}

@@ -110,7 +110,7 @@ const updateDocumentFieldValue = (field) => {
         existingField.setAttribute('disabled', false); // We need this to trigger a re-render
     }
 };
-const renderDocumentField = (field, docPage, fieldOptions, tabIndex = 1) => {
+const renderDocumentField = (source, field, docPage, fieldOptions, tabIndex = 1) => {
     var _a, _b;
     const { disabled = false, editable = false, draggable = false, done = false } = fieldOptions;
     const controlsDiv = document.getElementById(docPage.containerId + '-controls');
@@ -145,7 +145,8 @@ const renderDocumentField = (field, docPage, fieldOptions, tabIndex = 1) => {
             el.field = field;
             el.setAttribute('id', id);
             el.setAttribute('fieldname', field.name);
-            el.setAttribute('templateid', 'template_id' in field ? field.template_id : 'PREVIEW');
+            el.setAttribute('source', source);
+            el.setAttribute('sourceid', 'template_id' in field ? field.template_id : field.envelope_id);
             if (disabled) {
                 el.setAttribute('tabindex', -1);
                 el.setAttribute('disabled', true);
@@ -324,4 +325,4 @@ const convertToE164 = (input) => {
     return `+1${temp}`;
 };
 
-export { saveAttachment as a, renderedTextWidth as b, convertToE164 as c, getControlStyles as d, updateCssTransform as e, removeCssTransform as f, getFieldId as g, defaultWidth as h, defaultHeight as i, renderDocumentField as r, saveEnvelopesAsZip as s, throttle as t, updateDocumentFieldValue as u };
+export { saveAttachment as a, renderedTextWidth as b, convertToE164 as c, getControlStyles as d, updateCssTransform as e, removeCssTransform as f, getFieldId as g, setControlStyles as h, defaultWidth as i, defaultHeight as j, renderDocumentField as r, saveEnvelopesAsZip as s, throttle as t, updateDocumentFieldValue as u };

package/dist/components/{p-ffe8b41d.js → p-4dd750e9.js}

@@ -1,4 +1,4 @@
-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';
 
 const verdocsTabsCss = "@-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-tabs{gap:10px;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-direction:row;flex-direction:row;font-family:\"Inter\", \"Barlow\", sans-serif}verdocs-tabs .tab{display:-ms-flexbox;display:flex;color:#111111;cursor:pointer;font-size:14px;font-weight:400;padding:5px 10px;-ms-flex-align:center;align-items:center;text-transform:none;-ms-flex-pack:center;justify-content:center;border-bottom:4px solid transparent}verdocs-tabs .tab:focus{border:none;outline:none}verdocs-tabs .tab.active{color:#000000;font-weight:500;border-bottom:4px solid #654dcb}verdocs-tabs .tab.disabled{color:#aaaaaa;cursor:default}";
 const VerdocsTabsStyle0 = verdocsTabsCss;

package/dist/components/{p-b679d760.js → p-4e08dcdd.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-3518350d.js';
-import { d as defineCustomElement$4 } from './p-8b27ce22.js';
-import { d as defineCustomElement$3 } from './p-263dc67d.js';
-import { d as defineCustomElement$2 } from './p-b2bf338f.js';
-import { d as defineCustomElement$1 } from './p-e4a852b5.js';
+import { S as SettingsIcon } from './p-7e9c499e.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-b9034018.js';
+import { d as defineCustomElement$5 } from './p-1ae5d7e0.js';
+import { d as defineCustomElement$4 } from './p-5d4bbcd0.js';
+import { d as defineCustomElement$3 } from './p-315d6592.js';
+import { d as defineCustomElement$2 } from './p-0d063bf9.js';
+import { d as defineCustomElement$1 } from './p-c8fedb4e.js';
 
 const verdocsFieldInitialCss = "@-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-initial{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:83px;height:36px;display:block;font-size:11px;position:relative;letter-spacing:0.3px;scroll-margin:20px 0;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-initial 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-initial.done{border:none;opacity:1}verdocs-field-initial img{display:block;max-width:100%;max-height:100%}verdocs-field-initial.disabled img{opacity:0.5}verdocs-field-initial 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-initial button.hide{display:none}verdocs-field-initial.required{border:1px solid #cc0000}verdocs-field-initial.focused{-webkit-animation:verdocs-field-pulse 0.4s 1;animation:verdocs-field-pulse 0.4s 1}verdocs-field-initial 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-initial verdocs-button-panel[data-active],verdocs-field-initial verdocs-button-panel:hover{opacity:1}verdocs-field-initial verdocs-button-panel .icon svg{fill:#333333}verdocs-field-initial verdocs-button-panel .icon:hover svg{fill:#000000}verdocs-field-initial .settings-icon{position:absolute;top:-3px;left:-20px;display:inline-block;cursor:pointer;opacity:0.3}verdocs-field-initial .settings-icon svg{fill:#707ae5}verdocs-field-initial .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 VerdocsFieldInitialStyle0 = verdocsFieldInitialCss;
@@ -26,9 +26,8 @@ const VerdocsFieldInitial = /*@__PURE__*/ proxyCustomElement(class VerdocsFieldI
         this.settingsChanged = createEvent(this, "settingsChanged", 7);
         this.settingsPress = createEvent(this, "settingsPress", 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.initials = '';
@@ -45,10 +44,6 @@ const VerdocsFieldInitial = /*@__PURE__*/ proxyCustomElement(class VerdocsFieldI
     async focusField() {
         this.handleShow();
     }
-    async componentWillLoad() {
-        this.fieldStore = getTemplateFieldStore(this.templateid);
-        this.roleStore = getTemplateRoleStore(this.templateid);
-    }
     hideDialog() {
         var _a;
         (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.remove();
@@ -84,18 +79,18 @@ const VerdocsFieldInitial = /*@__PURE__*/ proxyCustomElement(class VerdocsFieldI
         }
     }
     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 backgroundColor = getRGBA(index);
+        const { base64 } = settings;
         if (done) {
             return h(Host, { class: { done } }, value && h("img", { src: value, alt: "Initial" }));
         }
         return (h(Host, { class: { required, disabled, done, focused }, style: { backgroundColor } }, label && h("label", null, label), base64 ? h("img", { src: base64, alt: "Initial" }) : h("button", { onClick: () => !disabled && this.handleShow() }, "Initial"), 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.showingProperties = false), 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.showingProperties = false), onDelete: () => {
                 var _a;
                 (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: field.name });
                 return this.hideSettingsPanel();
@@ -107,7 +102,8 @@ const VerdocsFieldInitial = /*@__PURE__*/ proxyCustomElement(class VerdocsFieldI
     }
     static get style() { return VerdocsFieldInitialStyle0; }
 }, [0, "verdocs-field-initial", {
-        "templateid": [513],
+        "source": [513],
+        "sourceid": [513],
         "fieldname": [513],
         "disabled": [516],
         "initials": [513],
@@ -128,7 +124,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["verdocs-field-initial", "verdocs-button", "verdocs-checkbox", "verdocs-component-error", "verdocs-help-icon", "verdocs-initial-dialog", "verdocs-portal", "verdocs-select-input", "verdocs-template-field-properties", "verdocs-text-input"];
+    const components = ["verdocs-field-initial", "verdocs-button", "verdocs-checkbox", "verdocs-component-error", "verdocs-help-icon", "verdocs-initial-dialog", "verdocs-loader", "verdocs-portal", "verdocs-select-input", "verdocs-template-field-properties", "verdocs-text-input"];
     components.forEach(tagName => { switch (tagName) {
         case "verdocs-field-initial":
             if (!customElements.get(tagName)) {
@@ -137,25 +133,30 @@ 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$6();
+                defineCustomElement$7();
             }
             break;
         case "verdocs-initial-dialog":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "verdocs-loader":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }

package/dist/components/{p-82fb3284.js → p-58c2bd5d.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';
 import { formatFullName } from '@verdocs/js-sdk';
 import { c as createPopper } from './p-68a5aaff.js';
 

package/dist/components/{p-d3170dcd.js → p-5a9cea40.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 verdocsSignatureDialogCss = "@-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-signature-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-signature-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-signature-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-signature-dialog .content{font-size:14px;padding:20px}verdocs-signature-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-signature-dialog .buttons verdocs-button{margin-left:16px}verdocs-signature-dialog canvas{background:#ffffff;-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-signature-dialog .disclaimer{text-align:justify;padding:8px 0;font-size:11px;line-height:14px;color:rgba(0, 0, 0, 0.54)}verdocs-signature-dialog .as-shown{font-size:11px;margin:4px 0 20px 4px;color:rgba(0, 0, 0, 0.54)}verdocs-signature-dialog .tabs{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}verdocs-signature-dialog .tabs .tab{padding:8px 15px;cursor:pointer}verdocs-signature-dialog .tabs .tab.active{border-bottom:2px solid #cccccc}verdocs-signature-dialog .tabs .tab:hover{color:#55bc81}";
 const VerdocsSignatureDialogStyle0 = verdocsSignatureDialogCss;